#masthead {

    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;

    transition: all 0.25s ease;

    color: #454545;
    background: white;
    position: relative;
}

body.searchshown {}

@media all and (max-width:1199px) {

#masthead {   }
}
@media all and (max-width:899px) {

#masthead { }

}




#masthead > .wrapper {
display: flex; flex-wrap: wrap;
justify-content: space-between;
align-items: center;
transition: all 0.2s ease;
    padding: 12px 0 32px;

}

@media all and (max-width:899px) {
    #masthead { border-bottom: 1px solid #6F6F6F; }
    #masthead > .wrapper {
        padding: 16px 0 16px;
    }

}


#masthead > .wrapper:nth-child(2n+2) {

}




#logo {
    width: 198px; min-width: 198px;
    height: 70px;
    position: relative;
}

#logo a,
#logo svg {
display: block;
    width: 100%;
    height: 100%;
    position: absolute; top: 0; left: 0;
    transition: all 0.2s ease;
}
#logo a:hover {
    opacity: 0.7;}
#logo svg path {
transition: all 0.2s ease;

}

@media all and (max-width: 899px) {
    #logo {
        width: 124px;
        min-width:124px;
        height: 44px;

        width: 141px;
        min-width:141px;
        height: 50px;
    }

    body.searchshown #logo {
        visibility: hidden;
    }

}



#logo a:focus-visible {  box-shadow: 0 0 0 3px white, 0 0 0 5px var(--orange); border-radius: 4px;   }

body.searchshown #logo a:focus-visible,
body.navshown #logo a:focus-visible {  box-shadow: 0 0 0 3px var(--hero-blue), 0 0 0 5px var(--orange); border-radius: 4px;   }

/*--logo-green:#7FC347;
--logo-lightblue:#0077AD;
--logo-red:#E31E36;
--logo-blue:#215568;*/
#logo svg path.logo-blue { fill:#215568; }
#logo svg path.logo-lightblue { fill:#0077AD; }
#logo svg path.logo-green { fill:#7FC347; }
#logo svg path.logo-red { fill:#E31E36; }