.map--wrapper {
    @include constrain_wide;
    max-width: 99%;
    margin-top: 2em;
}
#map-canvas {
    height: 300px;
    img { max-width: 100%; padding: 0; margin: 0; background: none;}
    @include breakpoint(alpha) {
        height: 400px;
    }
    @include breakpoint(beta) {
        height: 500px;
    }
    @include breakpoint(gamma) {
        border: 10px $brown solid;
        width: 80%;
        float: right;
    }
    @include breakpoint(delta) {
        height: 600px;
        width: 84%;
    }
}

.map-legend {
    @include constrain_wide;
    text-align: left;
    &:after {
        content: " ";
        display: table;
        clear: both;
    }
    h4 {
        font-family: sans-serif;
        @include fontsize(14);
        @include smcaps;
        font-weight: bold;
        margin: 1em 0 0.25em;
        @include breakpoint(gamma) {
            @include fontsize(13);
        }
    }
    a { color: $body_font;}
    li {
        display: inline;
        &:after {
            content: ",";
        }
        @include breakpoint(gamma) {
            display: block;
            @include fontsize(13);
            &:after {
                content: "";
            }
        }
    }
}

.infowin {
  h4 {
    margin: 0 0 5px 0;
    font-weight: normal;
  }
  .date {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
  }
  p {
    font-size: 1em;
  }
}