/* Custom styling for Cuyama GSA site */

html {
    font-family: 'Noto Serif', 'Georgia', 'Droid Serif', serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
}

/* body padding-bottom to allow for fixed navbar - add height of navbar to push images/text below navbar */

body {
    padding-top: 3.5em;
    background-color: #fff;
    height: 100%;
}

/* adjusts in-page links to display below the fixed navbar */
:target:before {
    content: "";
    display: block;
    height: 100px;
    /* fixed header height*/
    margin: -100px 0 0;
    /* negative fixed header height */
}

/* Font styling ----------------------------- */
h1,
h2 {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
}

h3,
h4,
h5,
h6 {
    font-family: 'Noto Sans', sans-serif;
    line-height: 2.3rem;
}

p {
    font-family: 'Noto Serif', 'Aptos', 'Georgia', 'Droid Serif', serif;
    color: #3F3F3F;
    font-weight: 400;
}

li {
    font-family: 'Noto Serif', serif;
    color: #3F3F3F;
    font-weight: 400;
}

.display-1,
.display-2 {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
}

.display-3,
.display-4 {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
}

/* link colors */
a {
    color: #085484;
}

a.white {
    color: #fff;
}

a.white:hover {
    color: #8abc40;
}

.active {
    font-weight: bold;
    text-decoration: overline;
}

.navbar-light {
    font-size: 110%;
}

a.nav-link {
    color: #3F3F3F !important;
    margin-right: .7em;
}

/* FA icon color class ---------------- */
.fa-sm {
    color: darkgray;
}

/* Opacity tweaks -------------- */

.opacity80 {
    opacity: 0.8;
}

.opacity60 {
    opacity: 0.6;
}

.opacity40 {
    opacity: 0.4;
}

.opacity20 {
    opacity: 0.2;
}

/* theme color tweaks ----------------------------- */

.bg-dkblue {
    background-color: #085484;
}

.bg-dkgry {
    background-color: #282828;
}

.bg-ltgry {
    background-color: #e1dabf;
}

.bg-blue {
    background-color: #62abc1;
}

.bg-green {
    background-color: #8abc40;
}

/* Custom text selection color classes -------------------------- */
::selection {
    background: #8abc40;
    /* WebKit/Blink Browsers */
    color: #fff;
}

/* Home page/ splash page styling --------------------- */

.cover-lg {
    background:
        /* top, transparent gray, faked with gradient */
        linear-gradient(rgba(30, 30, 30, 0.25),
            rgba(30, 30, 30, 0.25)),
        /* bottom, image */
        url(../img/cuyama-valley-overlook-sunny_2000x1125.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 10em;
}

.cover-md {
    background-image: url(../img/cuyama-valley-overlook-sunny_2000x1125.jpg);
    background-size: cover;
    background-position: top;
    padding-top: 8em;
}

.cover-md-landowners {
    background-image: url(../img/cuyama-ag-field-sprinklers_2000x1125.jpg);
    background-size: cover;
    background-position: top;
    padding-top: 8em;
}

.cover-md-public {
    background-image: url(../img/public-workshop_2000x1125.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

.cover-md-winery {
    background-image: url(../img/cuyama-winery-rows_2000x1125.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

.cover-md-bailer {
    background-image: url(../img/cuyama-hay-bailer_2000x1125.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

.cover-md-pipe {
    background-image: url(../img/cuyama-irrigation-pond-pipe_2000x1125.jpg);
    background-size: cover;
    background-position: top;
    padding-top: 8em;
}

.cover-md-about {
    background-image: url(../img/cuyama-valley-looking-west_2000x1125.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

.cover-md-binders {
    background-image: url(../img/binders_2000x1125.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

.cover-md-contact {
    background-image: url(../img/cuyama-blue-skies-vista_2000x1125.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

.cover-no-img {
    background-size: cover;
    background-position: center;
    padding-top: 8em;
}

/* Google translate widget (for sidebar layout) -------------------------------- 
.translate-widget {
    position: relative;
    top: 20px;
    left: 20px;
}

.translate-spacing {
    margin-bottom: -80px;
}

@media only screen and (max-width: 940px) {
    .translate-widget {
        position: relative;
        top: 20px;
        left: 20px;
    }

    .translate-spacing {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 576px) {
    .translate-widget {
        position: relative;
        top: 20px;
        left: 20px;
    }

    .translate-spacing {
        margin-bottom: 0px;
    }
}


--------------- */

/* Card column responsiveness ---------------------------- */

@media (min-width: 576px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 992px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

/* text responsiveness ------------ */

@media only screen and (max-width: 576px) {

    .display-1,
    .display-2 {
        font-family: 'Noto Sans', sans-serif;
        font-weight: 400;
        font-size: 3em;
    }

    .display-3,
    .display-4 {
        font-family: 'Noto Sans', sans-serif;
        font-weight: 700;
        font-size: 2.5em;
        text-shadow: none;
    }

    h3 {
        font-size: 1.4em;
    }

    p.lead {
        font-size: 1em;
    }
}

/* Text Effects ----------------------------- */

.text-shadow {
    color: #fff;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
}

.nav-shadow {
    box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.2);
}

/* Toast popup notice styling ------------------------- */
.toast {
    flex-basis: 90%;
    max-width: 70%;
    z-index: 1000;
    background-color: #085484;
    color: #ffffff;
}

.toast-header {
    font-size: 1.5em;
}

@media only screen and (max-width: 576px) {
    .toast {
        flex-basis: 80%;
        max-width: 60%;
        font-size: 75%;
    }

    .popup h2 {
        font-size: 1.2rem;
        line-height: normal;
    }

    .popup h3,
    h4 {
        font-size: 1rem;
        line-height: normal;
    }

    .toast-body {
        font-size: .95rem;
    }

}