#masthead {

    background: none;

    /* /*    border-top: <<0.33>> solid rgba(255,0,255,0.3);
            border-bottom: <<0.33>> solid rgba(255,0,255,0.3);

        border-top: none !important;
        border-bottom: none !important; */


    transition: all 0.2s ease;

    position: fixed;
    width: 100%;
    left: 0;
    z-index: 130;

    /*overflow: auto;*/
    max-height: 100%;
}

body.hashero #masthead {

}

body:not(.hero) #masthead {
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


@media all and (min-width: 900px) {
    body.navshown #masthead {
        background: #FFFFFF;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }
}

body:not(.preload) #masthead > .wrapper {
    transition: all 0.2s ease;
}


#masthead > .wrapper:first-child {
    height: 160px;
    height: 140px;
    display: flex;
    align-items: center;

}


@media all and (min-width: 900px) {

}


#masthead #logo {

    margin: 0 auto 0 0;
    /*background: url("../images/logo.svg");*/
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    flex: 1;
}

#masthead #logo a svg {
    display: block;
    width: auto;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    transition: all 0.2s ease;
    left: 24px;

    top: 50%;
    transform: translateY(-50%);
}

#masthead #logo a {
    display: block;
    position: relative;
    height: 64px;
    width: 100%;
    text-indent: -9000px;
    color: rgba(255, 255, 255, 0);

}

#masthead #logo a svg .st0 {
    fill: #AE9D6A;
    transition: all 0.2s ease;
}

#masthead #logo a svg .st1 {
    fill: #005350;
    transition: all 0.2s ease;
}


body.hero #masthead #logo a svg .st0 {
    fill: #a89769;
}

body.hero #masthead #logo a svg .st1 {
    fill: #FFFFFF;
}

body.scrolled #masthead #logo a svg .st1 {
    fill: #005350;
}


body.scrolled #masthead,
body.navshown #masthead {
    background: #FFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


@media all and (max-width: 899px) {
    #masthead > .wrapper:first-child {
        height: 90px;
        height: 80px;
    }

    /* body.navshown #masthead {  box-shadow: none;*/
}


@media all and (min-width: 900px) {
    body.scrolled #masthead > .wrapper:first-child {
        height: 90px;
    }

    /*  body.navshown #masthead>.wrapper:first-child { height: 120px; }*/
    body.scrolled #masthead #logo a svg,
    body.navshown #masthead #logo a svg {
        /*height: 70px;*/
    }
}


#masthead #logo a {
    color: white;
    display: block;
}


/*body.pageloaded #masthead #logo {transition: all 0.2s ease;}
body:not(.preload) #masthead #logo {transition: all 0.2s ease;}*/

body.scrolled #masthead {

}


body:not(.preload) #masthead #logo a
    /*, #mobilelogo a*/
{
    transition: all 0.2s ease;
}


#masthead #logo a:hover
    /*, #mobilelogo a:hover*/
{
    opacity: 0.66;
}


@media all and (max-width: 899px) {
    #masthead #logo a {
        padding-left: 0;
        height: 48px;

    }

    #masthead #logo a svg {
        left: 0
    }
}


@media all and (max-width: 499px) {
    #masthead #logo a {

        height: 40px;

    }

}

@media all and (max-width: 349px) {
    #masthead #logo a {

        height: 36px;

    }

}