/* OI v0.1.0 
 * Copyright (c) 2016  
 */
#map-container { display: none; }

#map-canvas { width: 66.67%; height: 100%; float: left; }

#map-legend { width: 33.33%; height: 100%; float: left; position: relative; }

#map-legend .legend-slide { display: none; height: 100%; padding: 40px; }

#map-legend .legend-slide:first-child { display: block; }

#map-legend h3 { text-align: center; margin-bottom: 20px; }

#map-legend p { text-align: center; margin-bottom: 15px; }

#map-legend a.btn { margin-top: 10px; }

#legend-key { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 40px; }
#legend-key .legend-nub { position: absolute; top: 50%; left: -17px; margin-top: -20px; font-size: 40px; }

#map-legend.brand-orange-bg #legend-key { background-color: #f37d50; }
#map-legend.brand-orange-bg .legend-nub { color: #f37d50; }

#map-legend.brand-teal-bg #legend-key { background-color: #6cc9c8; }
#map-legend.brand-teal-bg .legend-nub { color: #6cc9c8; }

#map-legend.brand-purple-bg #legend-key { background-color: #611171; }
#map-legend.brand-purple-bg .legend-nub { color: #611171; }

#map-legend.brand-pink-bg #legend-key { background-color: #ea69a7; }
#map-legend.brand-pink-bg .legend-nub { color: #ea69a7; }

#map-legend.brand-pink-bg #legend-key { background-color: #ca066d; }

#map-legend.brand-purple-bg #legend-key { background-color: #703386; }

#map-legend.brand-teal-bg #legend-key { background-color: #009090; }

#legend-key .legend-key-item { float: left; width: 50%; padding: 10px; }

#legend-key .legend-key-item .icon { float: left; width: 20px; margin-right: 10px; }

#legend-key .legend-key-item .key { float: left; width: 78px; font-size: 12px; line-height: 16px; }

@media (min-width: 480px) { /* phone */ }

@media (min-width: 680px) { /* big phone, small tablet */ }

@media (min-width: 768px) { /* tablet */ }

@media (min-width: 960px) { /* netbook */ #map-container { display: block; height: 450px; } }

@media (min-width: 1080px) { /* small desktop */ }

@media (min-width: 1260px) { /* desktop */ }