/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */


/* THIS HIDES TITLE ON SMALLER SCREENS - YOU NEED TO SET IT TO THE MAX-WIDTH WHEN THE TITLE WRAPS */

@media (max-width: 682px) {
    body>div.container-fluid.main-container>div.navbar.navbar-default.navbar-fixed-top>div>div.navbar-header>a.navbar-brand {
        display: none;
    }
}

/* BANNER IMAGE */

#hide-header>h2 {
    display: none;
}

#banner-img {
    /* place banner images in components/images/ folder then link as below: */
    background-image: url("./images/Turbidity\ cropped.jpg");
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* pick nice height for the photo then set padding top to that height -105px; */
    height: 264px;
    padding-top: calc(264px - 105px);
    margin-top: -35px;
    margin-right: -28px;
    margin-bottom: 24px;
    margin-left: -28px;
}

#banner-img>div {
    color: white;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.725)), to(rgba(0, 0, 0, 0.725)));
    background: -o-linear-gradient(rgba(0, 0, 0, 0.725), rgba(0, 0, 0, 0.725));
    background: linear-gradient(rgba(0, 0, 0, 0.725), rgba(0, 0, 0, 0.725));
    padding: 12px;
    padding-left: 15px;
    padding-right: 30px;
    font-size: 2em;
    width: 973px;
    max-width: 100%;
}

/* MAKE WINDOW SMALLER AND NOTE PIXEL WIDTHS TO SET LINE WRAP ADJUSTMENTS BELOW */

/* narrow screen to pix that text wraps */

@media (max-width: 989px) {
    #banner-img {
        /* move text up (grab height from above and substract 1 lineheight) */
        padding-top: calc(264px - 105px - 49px);
    }
    #banner-img>div {
        /* optionally condense text to nice rectangle */
        /* width: 866px; */
    }
}

/* then do this as many times as need to to get to width smaller than most mobiles (iPhone 4 is 320px) */

@media (max-width: 562px) {
    #banner-img {
        /* move text up by 1 line height again */
        padding-top: calc(264px - 105px - 98px);
    }
}
@media (max-width: 421px) {
    #banner-img {
        /* move text up by 1 line height again */
        padding-top: calc(264px - 105px - 147px);
    }
}
@media (max-width: 329px) {
    #banner-img {
        /* move text up by 1 line height again */
        padding-top: calc(264px - 105px - 196px);
    }
}

/* OVERVIEW MAP LEGEND */

div.leaflet-control-container>div.leaflet-bottom.leaflet-right>div.info.legend.gis-layers.leaflet-control {
    text-align: left;
    background: rgba(255, 255, 255, 0.95) !important;
}

div.leaflet-control-container>div.leaflet-bottom.leaflet-right>div.info.legend.gis-layers.leaflet-control>i {
    margin-bottom: 5px;
}

div.leaflet-control-container>div.leaflet-bottom.leaflet-right>div.info.legend.gis-layers.leaflet-control>i:nth-child(9) {
    border-radius: 18px;
}

div.leaflet-control-container>div.leaflet-bottom.leaflet-right>div.info.legend.gis-layers.leaflet-control>i:nth-child(11) {
    border-radius: 18px;
}

div.leaflet-control-container>div.leaflet-bottom.leaflet-right>div.info.legend.gis-layers.leaflet-control>i:nth-child(13) {
    height: 4px;
    margin-top: 7px;
}

div.leaflet-control-container>div.leaflet-bottom.leaflet-right>div.info.legend.gis-layers.leaflet-control>i:nth-child(15) {
    height: 4px;
    margin-top: 7px;
}

div.leaflet-control-container>div.leaflet-bottom.leaflet-right>div.info.legend.gis-layers.leaflet-control>i:nth-child(17) {
    height: 4px;
    margin-top: 7px;
    background: repeating-linear-gradient( to right, black, #FFF 0px, #FFF 4px, #FFF 4px, black 2px, black 9px) !important
}


/* SITE IMAGE LINKS */

@media (max-width: 767px) {
    .overview-img {
        margin-bottom: 24px;
    }
}

.overview-img>a>img {
    width: 100%;
}

.overview-img>a>h4 {
    padding-top: 0 !important;
    margin-top: 0 !important;
    color: #00586a;
}

#overview-map {
    text-align: center;
}

#overview-map>img {
    -webkit-filter: grayscale(25%);
    filter: grayscale(25%);
    max-width: 700px;
}