/* 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;
    }

    #logOut {
        top: 10px;
        right: 100px;
        position: fixed;
        cursor: pointer;
        z-index: 200;
    }
}


/* Portrait IPAD phones 768px*/
@media (max-width: 820px) {
    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;
    }
    #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;
        margin: 0px;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        -webkit-border-radius:0;
        -moz-border-radius:0;
        border-radius:0;
    } */

    #BaseMaps {
        width: auto;
        height: 520px;
        margin: 0px;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        overflow-y: auto;
    } 

 #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;
    }
  
     #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;

}

    #logOut {
        margin: 10px 0;
        position: fixed;
        right: auto;
        cursor: pointer;
        z-index: 200;
    }
          
}
 

/* Portrait IPAD phones*/
@media (max-width: 768px) {
    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;
    }

    #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, #Layers, #BaseMaps, #About, #Help, #editPointContainer {
        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;
    }
    /*add for arial 2017 basemap*/
    #BaseMaps {
        height: 620px;
        margin-top: -15px;
        overflow-y: auto;
    }

    #StreetView {
        display: none;
        margin: 0;
    }

    #imageView {
        display: none;
        margin: 0;
    }
}
 
/* Portrait phones max-width: 479px */

@media (max-width: 640px) {
   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;      
    } 
  #StreetView
{
     display: none;
        margin: 0;
}  
#StreetViewDrag
{
     display: none;
        margin: 0;

} 

 #imageView
{
     display: none;
        margin: 0;
}  

    #BaseMaps {
        height: 880px;
        margin-top: -15px;
        overflow-y: auto;
    }

 
} 

/* Portrait phones */
@media (max-width: 481px) {
   header .title {       
          display: none;        
    }
     header .titleMobile {      
        display: block;              
    }
     header h2 .logo { 
        margin-left: 10px;
        margin-right: 10px;
        width: 140px;
        height: 45px;        
    }
   header h2 {       
        margin: 0 0 0 5px;      
    } 
  #StreetView
{
     display: none;
        margin: 0;
}  
#StreetViewDrag
{
     display: none;
        margin: 0;

} 

 #imageView
{
     display: none;
        margin: 0;
}  
  /*add for arial 2017 basemap*/
    #BaseMaps {
        height: 1250px;
        margin-top: -15px;
        overflow-y: auto;
    }

    #logOut {
        margin: 10px 0;
        position: fixed;
        right: 150px;
        cursor: pointer;
        z-index: 200;
    }

 
}