/* Portrait tablet to landscape and desktop */
@media (max-width: 967px) {
    aside {
        right: 0;
        top: auto;
        height: 420px;
        width: 100%;
    }
    #map {
        left: 0;      
        bottom: 0;
    }
    #nav {
        width: 50%;
    }
    #navTools {
        width: 50%;              
    }
    #navTools a { 
        padding-left: 2px;
        padding-right:0; 
        margin-right: 5px;       
    }
    .sample-popup-content {
        padding: 10px 5px;
    }
    #SplashPopup {
        height: 650px;
        margin-top: -300px;
    }
    #BaseMaps {
        height: 600px; 
        margin-top: -300px;
    }
    #Tools {
        height: 300px;
        margin-top: -300px;
    }
    #Layers {
        height: 600px;
        margin-top: -300px;
    }
    #About {
        height: 600px;
        margin-top: -300px;
    }
    #geocoder {
        display: none;
        margin: 0;
    }
    #imgSocialMedia {
        display: none;
        margin: 0;
    }
    #geocoderPlaceholder,
    #menuPlaceholder,
    #iconsPlaceholder {
        display: block;
        float: right;        
        color: #fff;
        font-size: 1.5em;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;        
        margin: 5px 0;
        cursor: pointer;
        color: #777;
    }
    #menuPlaceholder {
        display: none;
    }
    #geocoderPlaceholder:hover,
    #menuPlaceholder:hover,
    #iconsPlaceholder:hover {   
        color: #999;
    }
    #geocoder {
        position: fixed;
        right: 0px;
        background: #fff;
        width: auto;
        padding: 5px 0;
        top: 50px;
        border-bottom: 2px solid #333;
        z-index: 200;
    }
    /*side panel for tablet, rs*/
     #AsidePopupClose {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        margin: 0;
        z-index: 100;
    }     
     #sidebarPlaceholder {
        display: block;
    }

     /* logo for mobile devices, rs*/  
     header .title {       
        display: none;        
    }
     header .titleMobile {      
        display: block; 
        width: 60%;              
    }
     header h2 .logo {
        width: 148px;
        height: 44px; 
    }
}

/* Landscape phones*/
@media (max-width: 850px) {   /* 03/07/2018: 846 px for Galaxy Note 8; 812 px for IPhone 10, was 767 px */
    nav {
        display: none;
    }
    #aside {
        display: none;
    }
    #map {
        bottom: 0;
    }
    #AsidePopupClose {
        display: block;
        position: absolute;        
        top: 10px;
        right: 10px;
        margin: 0;
        z-index: 100;
    }
    #nav {
        display: none;
        position: absolute;
        background: #fff;
        z-index: 200;
        top: 50px;
        width: 100%;
        right: 0;
    }
    #nav a {
        width: 100%;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        border-bottom: 1px solid #ccc;
    }
    #nav a:visited {
        padding-left: 0;
        padding-right: 0;
    }
    #nav a:hover {
        background: #2E88C4;
        color: #fff;
    }
  
    /* Main nav for mobile phones */
     #navPhone {
        display: none;
        position: absolute;
        background: #fff;
        z-index: 200;
        top: 50px;
        width: 100%;
        right: 0;
    }
    #navPhone a {
        width: 100%;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        border-bottom: 1px solid #ccc;
    }
    #navPhone a:visited {
        padding-left: 0;
        padding-right: 0;
    }
    #navPhone a:hover {
        background: #2E88C4;
        color: #fff;
    }
    /* Main nav for mobile phones end */
       
    /* Nav for Tools, removed from mobile */
    /*#navTools {       
        position: absolute;
        background: #fff;
        z-index: 200;
        top: 50px;
        width: 100%;
        right: 0;
    }
    #navTools a {
        width: 100%;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        border-bottom: 1px solid #ccc;
    }
    #navTools a:visited {
        padding-left: 0;
        padding-right: 0;
    }
    #navTools a:hover {
        background: #2E88C4;
        color: #fff;
    }*/
   /* Nav for Tools end */

    aside {
        top: 0px;
        overflow: auto;
        height: 100%;
    }
    #sidebarPlaceholder {
        display: block;
    }
    #menuPlaceholder {
        display: block;
    }
    #legendContainer {
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
    }
    #SplashPopup,  #Layers, #BaseMaps, #About, #Help {
        width: auto;
        height: auto;
        margin: 0px;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        -webkit-border-radius:0;
        -moz-border-radius:0;
        border-radius:0;
    }    
    #BaseMaps {  /* updated for new arials, 03/07/2018 */
        height: 800px; 
    }
    #StreetView {
        display: none;
        margin: 0;
    } 
    #imageView {
        display: none;
        margin: 0;
    }    
}
 
/* Portrait phones */
@media (max-width: 479px) {   
     header .titleMobile {
        width: 20%;
    } 
    #imageView {
         display: none;
         margin: 0;
    }
    #StreetView {
         display: none;
         margin: 0;
    }  
    #StreetViewDrag {
         display: none;
         margin: 0;
    }     
    #BaseMaps { /* updated for new arials, 03/07/2018 */
        height: 1300px; 
    }
}