@charset "utf-8";
/* Simple fluid media */
img, object, embed, video {
	max-width: 100%;
}
.ie6 img {
	width:100%;
}




/*======================================================
    HEADER  —  .top
======================================================*/

    .top{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        width: 100%;
        padding: 1.4em 6%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        background-color: transparent;
        transition: all 0.45s ease;
    }


    /*--logo lockups, swapped by class--*/
    .logo{
        width: 9.5em;
        height: 3.4em;
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
        transition: all 0.45s ease;
    }

    .logo-full-color{ background-image: url(../img/logos/VB-Logos-landscape_Full-Color.svg);}
    .logo-white{ background-image: url(../img/logos/VB-Logos-landscape_white-icon-text.svg);}
    .logo-colored-white-text{ background-image: url(../img/logos/VB-Logos-landscape_icon-color-white-text.svg);}
    .logo-light-green{ background-image: url(../img/logos/VB-Logos-landscape_light-green-full.svg);}

    .logo-icon-only{
        width: 3.2em;
        height: 3.2em;
        background-image: url(../img/logos/VB-Logos_icon.svg);
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
        transition: all 0.45s ease;
    }


    /*--scrolled state--*/
    .topmoved{
        padding: 0.7em 6%;
    }

    .topmoved .logo,
    .topmoved .logo-icon-only{ height: 3.2em;}

    .topmoved .nav-main{
        background-color: rgba(255,255,255,0.97);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 1px 0 var(--line);
    }

    /*--on the light scrolled bar the mark returns to full colour--*/
    .topmoved .logo-white,
    .topmoved .logo-colored-white-text,
    .topmoved .logo-light-green{ background-image: url(../img/logos/VB-Logos-landscape_Full-Color.svg);}

    .topmoved .nav-btn p,
    .topmoved #mainnav li{ color: var(--basin-green);}

    .topmoved .navstrokes span{ background-color: var(--basin-green);}


    /*--drawer open : the bar becomes a solid panel behind the links--*/
    .navopen{
        height: 100%;
        padding-top: 1.4em;
        background-color: var(--basin-deep);
        align-content: flex-start;
        overflow-y: auto;
    }

    .navopen .logo{ background-image: url(../img/logos/VB-Logos_white-icon-text.svg);}

    .navopen .nav-btn p{ color: var(--white);}

    .navopen .navstrokes span{ background-color: var(--white);}

    /*--the CTA joins the drawer on a phone--*/
    .navopen .nav-cta{
        display: block;
        order: 4;
        width: 100%;
        margin-top: 1.5em;
    }




/*======================================================
    BURGER
======================================================*/

    .nav-btn{
        display: flex;
        align-items: center;
        gap: 0.8em;
        padding: 0;
        background-color: transparent;
        border: none;
        border-radius: 0;
    }

    .nav-btn:hover{ background-color: transparent; color: #fff;}

    .nav-btn p{
        margin: 0;
        font-size: 0.7em;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--white);
        transition: color 0.45s ease;
    }

    .nav-btn:hover p {color: #fff;}

    .nav-btn .navstrokes{
        position: relative;
        display: block;
        width: 1.8em;
        height: 0.9em;
    }

    .navstrokes span{
        position: absolute;
        left: 0;
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--white);
        transition: all 0.35s ease;
    }

    .navstrokes span:first-child{ top: 0;}
    .navstrokes span:last-child{ top: 0.5em; width: 65%;}

    .navstrokes-expanded span:first-child{
        top: 0.25em;
        transform: rotate(45deg);
    }

    .navstrokes-expanded span:last-child{
        top: 0.25em;
        width: 100%;
        transform: rotate(-45deg);
    }




/*======================================================
    MAIN NAV  —  full-screen drawer on mobile
======================================================*/

    .top nav{
        display: none;
        order: 3;
        width: 100%;
        padding: 2.2em 0 1em 0;
            background-color: var(--glass-dark);
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 42%);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-sheen), var(--glass-drop-dark);
    border-radius: 2em;
    padding: .5em;
    }

    .top nav #mainnav li{
        padding: 0.55em 0;
        font-size: 1.5em;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--white);
        transition: color 0.3s ease;
    }

    .topmoved nav #mainnav li{ color: var(--basin-green);}

    /*--must follow .topmoved : the drawer can be opened on a
        scrolled page, where the bar carries both classes--*/
    .navopen nav #mainnav li{ color: var(--white);}

    .top nav #mainnav li:hover{ color: var(--energy-lime);}

    .activelink li{ color: var(--energy-lime) !important;}


    /*--the CTA sitting at the end of the nav--*/
    .nav-cta{ display: none;}




/*======================================================
    FOOTER
======================================================*/

    .footer{
        position: relative;
        width: 100%;
        padding: 4.5em 7.5% 2.5em 7.5%;
        background-color: var(--basin-deep);
        color: var(--white);
        float: left;
        clear: both;
        overflow: hidden;
    }

    .f-inner{
        position: relative;
        z-index: 2;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 3em;
    }

    .f-inner h4{
        margin-bottom: 1.1em;
        font-size: 0.72em;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--energy-lime);
    }

    .footer-logo{
        width: 12em;
        margin-bottom: 1.8em;
    }


    /*--location block--*/
    .location{ width: 100%;}

    .loca-details{ margin-bottom: 1.6em;}

    .location p{
        margin: 0 0 0.2em 0;
        font-size: 0.9em;
        line-height: 1.7;
        color: rgba(255,255,255,0.6);
    }

    .loca-span{
        display: flex;
        width: 100%;
        margin-bottom: 0.6em;
        padding: 0.9em 1.4em;
        font-size: 0.78em;
        letter-spacing: 0.02em;
        text-transform: none;
        color: var(--white);
        background-color: rgba(255,255,255,0.05);
        border: 1px solid var(--line-light);
        border-radius: 3em;
    }

    .loca-span:hover{
        background-color: var(--growth-teal);
        border-color: var(--growth-teal);
    }

    .loca-span i{ color: var(--energy-lime);}
    .loca-span:hover i{ color: var(--white);}


    /*--connect block--*/
    .connect{ width: 100%;}

    .social{ margin-bottom: 2.4em;}

    .social i{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.6em;
        height: 2.6em;
        margin-right: 0.5em;
        font-size: 0.9em;
        color: var(--white);
        border: 1px solid var(--line-light);
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .social i:hover{
        color: var(--basin-green);
        background-color: var(--energy-lime);
        border-color: var(--energy-lime);
    }

    .newsletter form{
        display: flex;
        flex-wrap: wrap;
        gap: 0.6em;
        width: 100%;
    }

    .newsletter input{
        flex: 1 1 100%;
        padding: 1em 1.4em;
        font-family: var(--font);
        font-size: 0.85em;
        color: var(--white);
        background-color: rgba(255,255,255,0.05);
        border: 1px solid var(--line-light);
        border-radius: 3em;
    }

    .newsletter input::placeholder{ color: rgba(255,255,255,0.4);}
    .newsletter input:focus{ outline: none; border-color: var(--growth-teal);}

    .newsletter button{
        background-color: var(--energy-lime);
        border-color: var(--energy-lime);
        color: var(--basin-green);
    }

    .newsletter button:hover{
        background-color: var(--white);
        border-color: var(--white);
    }


    /*--map block--*/
    .map{
        width: 100%;
        height: 16em;
        border-radius: 1.5em;
        overflow: hidden;
    }

    .map iframe{
        width: 100%;
        height: 100%;
        border: 0;
        filter: grayscale(1) invert(0.92) contrast(0.85);
    }


    /*--bottom strip--*/
    .f-base{
        position: relative;
        z-index: 2;
        width: 100%;
        margin-top: 3em;
        padding-top: 1.8em;
        display: flex;
        flex-wrap: wrap;
        gap: 0.8em;
        justify-content: space-between;
        border-top: 1px solid var(--line-light);
    }

    .f-base p{
        margin: 0;
        font-size: 0.76em;
        color: rgba(255,255,255,0.45);
    }

    .f-base a:hover{ color: var(--energy-lime);}


    /*--watermark--*/
    .f-mark{
        position: absolute;
        right: -12%;
        bottom: -18%;
        width: 55%;
        height: 65%;
        background-image: url(../img/logos/VB-Logos_icon.svg);
        background-size: contain;
        background-position: bottom right;
        background-repeat: no-repeat;
        opacity: 0.06;
        z-index: 1;
    }




/*======================================================
    TABLET  481px
======================================================*/

@media only screen and (min-width: 481px) {

    .logo{ width: 11em; height: 3.8em;}

    .loca-span{ width: auto; margin-right: 0.6em;}

    .newsletter input{ flex: 1 1 60%;}

    .map{ height: 20em;}

}




/*======================================================
    DESKTOP  769px
======================================================*/

@media only screen and (min-width: 769px) {

    .top{ padding: 2em 5%;}

    .topmoved{ padding: 1em 5%;}

    .logo{ width: 12em; height: 4em;}

    .nav-btn{ display: none;}


    /*--inline nav--*/
    .top nav{
        display: block !important;
        order: 2;
        width: auto;
        padding: .25em;
    }

    .top nav #mainnav{
        display: flex;
        align-items: center;
        gap: 0.4em;
    }

    .top nav #mainnav li{
        padding: 0.6em 1.15em;
        font-size: 0.82em;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--white);
        border-radius: 3em;
        transition: all 0.3s ease;
    }

    .top nav #mainnav li:hover{
        color: var(--white);
        background-color: rgba(255,255,255,0.12);
    }

    .topmoved nav #mainnav li{ color: var(--basin-green);}

    .topmoved nav #mainnav li:hover{
        color: var(--white);
        background-color: var(--basin-green);
    }

    .activelink li{
        color: var(--basin-green) !important;
        background-color: var(--energy-lime);
    }

    .topmoved .activelink li{
        color: var(--basin-green) !important;
        background-color: var(--energy-lime);
    }


    /*--nav CTA--*/
    .nav-cta{
        display: block;
        order: 3;
    }

    .nav-cta button{
        padding: 0.9em 1.5em;
        font-size: 0.75em;
    }

    .topmoved .nav-cta button{
        color: var(--white);
        background-color: var(--basin-green);
        border-color: var(--basin-green);
    }

    .topmoved .nav-cta button:hover{
        background-color: var(--growth-teal);
        border-color: var(--growth-teal);
    }


    /*--footer goes to columns--*/
    .footer{ padding: 6em 7.5% 3em 7.5%;}

    .f-inner{
        flex-wrap: nowrap;
        gap: 4%;
    }

    .location{ width: 32%;}
    .connect{ width: 30%;}
    .map{ width: 34%; height: auto; min-height: 20em;}

    .newsletter input{ flex: 1 1 100%;}

}




/*======================================================
    LARGE  1080px
======================================================*/

@media only screen and (min-width: 1080px) {

    .top nav #mainnav li{ font-size: 0.88em; padding: 0.65em 1.35em;}

    .logo{ width: 13.5em; height: 4.4em;}

    .newsletter input{ flex: 1 1 58%;}

}