/* Portrait tablet to landscape and desktop */
@media (max-width: 967px) {

    #aside {
        display: none;
    } 
    #AsidePopupClose {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        margin: 0;
        z-index: 100;
    }
    #aside {
        right: 0;
        top: auto;
      /*  height: 420px; */
        width: 100%; 
        height: 100%;
        overflow:auto;
      /* top: 0;
       overflow:auto;
       height: 100% */

    }
    #map {
        left: 0;
        /*bottom: 300px;*/
        bottom: 0;
    }
    #nav {
        width: 50%;
    }

     #navTools {
        width: 50%;
    }

    #SplashPopup {
        height: 450px;
        overflow-y:auto;
        margin-top: -220px;
    }
    #BaseMaps {
        height: 450px;
       overflow:auto; 
        /* margin-top: -300px; */
        margin-top: -220px;
    }
  
    #Tools {
        height: 450px;
        margin-top: -220px;
    }
    #Layers {
        margin-left: -30px;
        height: 450px;
        margin-top: -220px;
    }
 #About {
        height: 450px;
        margin-top: -220px;
    }
 #LayersContent {
    overflow: auto; 
    height: 450px;
     
}
#LayersHeader {
        font-size: large;
        font-weight:normal;
}

#ZoomInToSeeMore,
 #LayersInfo,
#SalesFooter,
#SalesZoom  {
     margin-left:30px;
    font-size:small;
    font-style:italic;
    color:gray;
    font-weight:normal;
    
    }
 #geocoder {
        display: none;
        margin: 0;
    }
 #imgSocialMedia {
        display: none;
        margin: 0;
    }
 
    #geocoderPlaceholder,
    #menuPlaceholder,
    #iconsPlaceholder {
        display: none;
        float: right;
        color: #fff;
        font-size: 1.5em;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        margin: 5px;
        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 */  
     header .title {       
        display: none;        
    }
     header .titleMobile {      
        display: block; 
        width: 60%;         
    }
     header h2 .logo { 
        width: 151px;
        height: 45px;
    }

}


 
/* Landscape phones*/
@media (max-width: 850px) {  /* 846 px for Galaxy Note 8; 812 px for IPhone 10, was 767 px, 03/07/2018 */
    header .title {
        width: 60%;
    }
    /*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 */
    /*#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;
    } */
    #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;
        cursor: pointer;
        color: #777;
    }
    #legendContainer {
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
    }
    #SplashPopup {
        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, #About {
        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 all arials, 03/07/2018 */
        height: 800px;
        overflow-y: auto;
    }
   
    #Tools {
        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;
    }
    #Layers {
        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;
    }
    #imageView {
         display: none;
         margin: 0;
    }  
    #StreetView {
         display: none;
         margin: 0;
    }  
    #StreetViewDrag {
         display: none;
         margin: 0;
    }         
}

/* Portrait IPAD phones*/
@media (max-width: 768px) {
    header .title {
        width: 60%;
    }
    /*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 */
  
    aside {
        top: 0px;
        overflow: auto;
        height: 100%;
    }
    #sidebarPlaceholder {
        display: block;
    }
   /* #menuPlaceholder {
        display: block;
    } */
    #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;
        cursor: pointer;
        color: #777;
    }
    #legendContainer {
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
    }
    #SplashPopup {
        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, #About {  add extra basemap Arial2017 change size*/
    #BaseMaps, #About {
        width: auto;
        height: auto;
        overflow-y: auto;
        margin: 0px;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }  
     #Tools {
        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;
    }
      #Layers {
        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;
    }
     #imageView  {
         display: none;
         margin: 0;
    }  
       #StreetView {
         display: none;
         margin: 0;
    }  
    #StreetViewDrag {
         display: none;
         margin: 0;
    }
  
}
 
/* Portrait phones */
@media (max-width: 479px) {  
   header .title {       
          display: none;        
   }
   header .titleMobile {      
        display: block;              
   }
   header h2 .logo { 
        margin-left: 10px;
        margin-right: 10px;
        width: 151px;
        height: 45px;        
   }
   header h2 {       
        margin: 0 0 0 5px;      
   }
  
    #geocoderPlaceholder,
    #menuPlaceholder,
    #iconsPlaceholder  {
        display: block;   
        margin: 2px;    
    } 
   #StreetView {
        display: none;
        margin: 0;
   }  
   #StreetViewDrag {
        display: none;
        margin: 0;
   } 
   #imageView {
        display: none;
        margin: 0;
   }
    #BaseMaps { /* updated for new arials, 03/07/2018 */
        height: 1300px;
        overflow: auto;
    }
  /* .esriBasemapGallery {
        height: 1280px;
        overflow-y: auto;
    } */
}