/* Responsive based on WIDTH */
@media (max-width: 1400px) {
    #left-wrapper { width: 100%; }
    #map-details-wrapper { position: fixed; right: -400px; transition: 0.2s ease all; }    
    #expand-menu { right: 0px; transition: 0.2s ease all; display: flex;  }
    #ensolegend ul,#legend ul { height: auto; overflow-y: hidden;  }
    #ensolegend,#legend {  z-index: 9000; }    
    #ensolegend-2 { right: 20px; }
    .legend.expanded ul { height: auto !important; }

    body.showing-menu #map-details-wrapper { right: 0px; }
    body.showing-menu #expand-menu { right: 400px; }  
    body.showing-menu { overflow: hidden; }
}

@media (max-width: 1200px) {
    #legend,#legend-growth { display: none !important; }
    .__slider3d-next,.__slider3d-prev { padding: 0px 20px !important; font-size: 0.7em; }
    .__slider3d-next { right: 0px !important; }
    .__slider3d-prev { left: 0px !important; }
    .__slider3d-next:hover,.__slider3d-prev:hover {  }
    .__slider3d-next:hover:after,.__slider3d-prev:hover:after { opacity: 1.0 !important; color: #333; }    
    .map-title { font-size: 1.3em; }
    #selected-period .map-title { font-size: 1.1em; }
    #map-grid-year-desc, #map-grid-grass-year-desc { left: 15px; bottom: 15px; top: auto; right: auto; } 
}

@media (max-width: 800px) {
    .date-range { display: none; }  
    #ensolegend, #ensolegend-2 { background: rgba(255,255,255,0.9); box-shadow: 1px 1px 2px rgba(0,0,0,0.1); }   
    .timeline-image { height: 30px; }   
    .timeline-image:hover, .active-year .timeline-image { height: 40px; }   
    #grouped-timeline li { font-size: 0.7em; }  
    #map-slider-wrapper { height: calc(100% - 170px); }      
    .map-title { font-size: 1.0em; }    
    #selected-period .map-title { font-size: 0.8em; right: 54%; }
    .year-grid { bottom: -20px; }
    #selected-period-wrapper { height: calc(100% - 150px); }
    #map-grid-year-desc, #map-grid-grass-year-desc {  padding: 5px 10px; font-size: 0.7em; }    
    .mobile-hidden { display: none; }
}

@media (max-width: 800px) and (min-height: 750px) {
    .column { width: 100%; height: 50%; padding: 30px !important; }
    #map-grid-content .column:first-child { padding-bottom: 5px !important; }
    #map-grid-content .column:last-child { padding-top: 5px !important; }
}

@media (max-width: 650px) {
    #page-years  { display: none !important; }
}

@media (max-width: 550px) {    
    #grouped-timeline li { font-size: 0.6em; }  
    .desktop-year { display: none; }
    .mobile-year { display: inline-block; }        
}

@media (max-width: 440px) {    
    body.showing-menu #expand-menu { right: calc(100% - 40px); }   
    .map-grid-year { width: calc(100vw - 120px); }
}

/* Responsive based on HEIGHT */
@media (max-height: 1000px) {    
    #map-slider-wrapper { padding-top: 0px; }
    #map-slider { height: 80%; }    
    .map-title { font-size: 1.5em; }
    #selected-period .map-title { font-size: 1.5em; }

}

@media (max-height: 800px) {
    #map-slider-wrapper { padding-top: 0px; }
    #map-slider { height: 90%; }    
    .map-title { font-size: 1.3em; }
    #selected-period .map-title { font-size: 1.3em; }
    .map-grid-year { height: 90px; width: 90px; }
    .mgy-image { height: 40px; }
    #selected-period-wrapper { height: calc(100% - 120px); }
}

@media (max-height: 800px) and (min-width: 800px) {   
    #selected-period-wrapper { height: calc(100% - 90px); }
}


@media (max-height: 750px) {
    #legend { font-size: 0.7em; }
}

@media (max-height: 700px) {
    .map-title { font-size: 1.2em; }
    #selected-period .map-title { font-size: 1.2em; }
}

@media (max-width: 800px) {   
    .map-title { font-size: 1.2em; bottom: 20%; }
    #selected-period .map-title { font-size: 1.2em; bottom: 20%; }
}

@media (max-height: 600px) {
    #open-menu { position: relative; float: right; padding: 0px 10px; top: 0px; color: #fff; }
    #page-years { padding: 0px; }
    header { display: none; }
    #active-wrapper { height: calc(100% - 50px); }
    #grouped-timeline-wrapper { height: 100px; }
    #grouped-wet-dry { height: calc(100% - 100px); }
    #map-slider-wrapper { height: calc(100% - 150px); }
    #legend,#legend-growth { bottom: 120px; }
    #ensolegend, #ensolegend-2 { bottom: 5px; }   
    .map-title { font-size: 1.2em; bottom: 10%; } 
    #selected-period .map-title { font-size: 1.0em; bottom: 5%; }
    #expand-menu { top: 60px; }
}

@media (max-height: 600px) and (max-width: 500px ) {
    #open-menu { display: none; }
}

@media (max-height: 500px) {    
    .map-title { font-size: 0.9em; bottom: 10%; }
    #selected-period .map-title { font-size: 0.9em; bottom: 5%; }
}

@media (max-height: 400px) {
    .map-title { font-size: 0.8em; bottom: 5%; }
    #selected-period .map-title { font-size: 0.8em; bottom: 1%; }
}

@media (max-width: 500px) {   
    .map-title { font-size: 0.8em; bottom: 25%; }
    #selected-period .map-title { font-size: 0.8em; bottom: 25%; }
}

@media (max-width: 400px) {
    .map-title { font-size: 0.5em; bottom: 30%; }
    #selected-period .map-title { font-size: 0.5em; bottom: 30%; }
}