.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_color;} 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; } }