/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    #header_lg {
        display: none !important;
        
    }
    .navbar-brand img{
        width:75%!important
    }
    .ns-PageTitleBanner-Header h2 {
        font-size: 20px
    }
    
    #rig > div{
       /* padding:0px!important;*/
        margin-bottom:10px
    }

    #header_sm {
        display: block !important;
    }
    div.ns-Constituents-PopupContainer {
        display:none
    }
    .ns-contextual-nav-wrapper {
        border-radius: unset;
        border-radius: 0 0 0 0 !important
    }
    .ns-PageTitleBanner-Header {
        border-radius: 0 0 0 0 !important;
        height: 60px;
    }
    .ns-fastFacts-wrapper {
        border-bottom-right-radius: 0 !important
    }
    #divNews {
        width:100% !important;
    }
    #divNews #newsContent {
        width: 100%!important;
    }
    #sustainTitleXLng{
        font-size: 3vw;;
    }
    
    #sustainTitleLng{
    font-size: 3vw;;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    #header_lg {
        display: none !important;
       
    }
    .navbar-brand img {
        width: 75% !important
    }
    #divRightNav {
        padding: 0 0 0 0px !important;
    }
    #header_sm {
        display: block !important;
    }
    .esri-display-object{
        width:500px!important
    }
    .esriMapContainer{
        width:500px!important
    }
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    #header_lg {
        display: none !important;
       
    }
    .navbar-brand img {
        width: 75% !important
    }
    #divRightNav {
        /*padding: 0px !important;*/
    }

    #header_sm {
        display: block !important;
    }

    #searchResultsText{
        font-size:10px!important
    }

    .ns-contextual-nav-wrapper {
        border-radius: unset;
        border-radius: 0 0 0 0 !important        
    }

    #rig > div {
        padding:0px!important;
        margin-bottom: 10px
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .navbar-brand img {
        width: 75% !important
    }
    
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    #header_lg {
        display: block !important;
    }
    .navbar-brand img {
        width: 75% !important
    }
    #header_sm {
        display: none !important;
    }
    div.ns-Constituents-PopupContainer {
        display: block !important
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    #header_lg {
        display: none !important;
    }
    .navbar-brand img {
        width: 75% !important
    }
    #header_sm {
        display: block !important;
     
    }
    div.ns-Constituents-PopupContainer {
        display:none!important
    }
}
/* iPad pro (portrait)*/
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : portrait) {
    #header_lg {
        display: none !important;
    }

    #header_sm {
        display: block !important;
    }

    div.ns-Constituents-PopupContainer {
        display: block !important
    }
}
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : landscape) {
    #header_lg {
        display: none !important;
    }

    #header_sm {
        display: block !important;
    }

    div.ns-Constituents-PopupContainer {
        display: block !important
    }
}

/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}
/* Desktops and laptops ----------- */
/*@media only screen and (min-width : 1224px) {*/
@media only screen and (min-width:100px) and (max-width:816px){
    div.ns-Constituents-PopupContainer {
        display: none !important
    }
    #divNews #newsContent{
        width:200px!important;
    }
    
}
    @media only screen and (min-width : 849px) {
        #header_lg {
            display: block !important;
        }

        #header_sm {
            display: none !important;
        }
        #divNews {
            width: 200px!important;
        }
            #divNews #newsContent {
                width: 200px !important;
            }
    }

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
    .ns-contextual-nav-wrapper {
        border-radius: unset;
        border-radius: 0 0 0 0 !important
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
    .ns-contextual-nav-wrapper {
        border-radius: unset;
        border-radius: 0 0 0 0 !important
    }
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    .ns-page-content{
        min-height:667px!important;
		height:100%;
    }
    #divRightNav {
        padding: 0 0 0 0px !important;
    }


    * {
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: 13px;
    }

    html, body {
       
        width: 100%;
        min-width: 350px;
        margin: 0%;
		overflow:visible;
        
    }
    /*
.map {
    opacity: 0;
    border-radius: 10px 0 0 0 !important;
}
*/
    .helpImg {
        position: absolute;
        top: 135px;
        left: 18px;
        z-index: 50;
        opacity: 0.8;
        cursor: pointer;
    }

        .helpImg:hover {
            opacity: 1;
        }

    .centeredMessageShow {
        border: solid 2px #999999;
        border-radius: 8px;
        position: fixed;
        width: 300px;
        height: 235px;
        top: 50%;
        left: 220px;
        margin-top: -88px;
        margin-left: -150px;
        font-size: medium;
        background: rgba(252,179,22,.9);
        padding: 15px;
        opacity: 1;
        font-weight: bold;
        z-index: 1000 !important;
        visibility: visible;
    }

    .centeredMessageHide {
        border: solid 2px #999999;
        border-radius: 8px;
        position: fixed;
        width: 300px;
        height: 235px;
        top: 50%;
        left: 220px;
        margin-top: -88px;
        margin-left: -150px;
        font-size: medium;
        background: rgba(252,179,22,.9);
        padding: 15px;
        opacity: 1;
        font-weight: bold;
        z-index: 1000 !important;
        visibility: hidden;
    }

    .opsMapTitle {
        color: white;
        font-size: x-large;
        font-weight: bold;
    }

    #footer {
        position: relative;
        background: #FDBB30;
        border: 1px solid lightgray;
        vertical-align: middle;
        height: 60px;
        padding: 0;
        width: 83.5%;
        min-width: 350px;
        float: left;
        border-radius: 0 0 15px 0;
    }


    #mainContent {
        width: 100%;
        height: 90%;
        overflow: visible;
        min-height: 500px;
        min-width: 350px;
    }

    .mapObject {
        width: 100%;
        min-width: 350px;
        height: 100%;
        min-height: 500px;
        margin-bottom: 0px;
    }

    .navigationContainer {
        width: 140px !important;
        position: relative;
        float: right;
        bottom: auto;
        background-color: #666666;
        border-radius: 0 10px 0 0;
    }

    .navigationDiv {
        color: white;
        text-align: left;
        border-bottom: solid 1px #cccccc;
        padding: 5px 5px 5px 5px;
        font-size: 75%;
        width: 97%;
        height: 30px !important;
        font-size: 12px;
    }



    #staticNavBox {
        position: absolute;
        min-width: 350px;
        width: 100%;
    }



    #HomeButton {
        position: absolute;
        top: 90px;
        left: 19px;
        z-index: 49;
    }

    #navPane {
        background: #E6F3FC;
        height: 540px;
        width: 140px !important;
        position: absolute;
        top: 0px;
        right: 0px;
        border-radius: 0 0 15px 0;
        margin-right: 3px;
        /*margin: 5px 0 0 2px;*/
    }

    #map {
        position: relative;
        /*left: 5px;
    top: 5px;*/
        width: 83.5%;
        min-width: 300px;
        height: 99%;
        min-height: 560px;
        /*border: 1px solid #000;*/
    }

    #navContent {
        position: relative;
        top: 5px;
        left: 15px;
        width: 155px;
    }

    .cbLarge {
        border-radius: 100%;
        border: 1px solid black;
        background: lightgray;
        width: 13px;
        height: 13px;
        display: inline-block;
        vertical-align: middle;
        margin: 2px;
    }


    .cbSmall {
        box-sizing: border-box;
        border: 1px solid #999999;
        border-radius: 100%;
        width: 9px;
        height: 9px;
        margin-left: 1px;
        position: relative;
        top: 1px;
    }

        .cbSmall:hover {
            opacity: 0.8;
        }


    .cbSmallAll {
        border-radius: 100%;
        width: 9px;
        height: 9px;
        margin-left: 1px;
        position: relative;
        top: 1px;
    }

        .cbSmallAll:hover {
            opacity: 0.8;
        }

    span {
        font-size: 11px;
    }

    .cbLabel {
        color: #3289C0;
    }

    .esriPopup .titleButton.maximize {
        display: none;
    }


    .esriMapContainer{
        width:350px
    }


}

/*sustain*/
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
    .ns-contextual-nav-wrapper {
        border-radius: unset;
        border-radius: 0 0 0 0 !important
    }
   
}


@media all and (min-width:0px) and (max-width: 480px) {
    #sustainTitleXLng{
        font-size: 3vw;;
    }
    
    #sustainTitleLng{
    font-size: 3vw;;
    }
}