#masthead {

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

    transition: all 0.25s ease;
    color: var(--yellow-lightest);

    background: var(--blue-darker);
    position: relative;
    display: flex; align-items: center;
}

.logo{
/*    min-width: 182px;
    width: 182px; height: 20px;*/
    position: relative;
    --logosize:2em;  font-family:var(--headingfont);
}
.logo{

/*    min-width: 264px;
    width: 264px; height: 58px;*/
    position: relative;
    z-index: 10;
    margin: 0 !important;

    font-size: 32px;
}
.logo a, .logo img,
#logo a,
#logo img, #logo svg {
    display: block;
    object-fit: contain;
    object-position: left center;
/*    width: 100%;
    height: 100%;
    position: absolute;*/
    top: 0;
    left: 0;
    transition: all 0.2s ease;
    color: white;
}
.logo a,#logo a {display: flex; align-items: center; font-weight: 700; white-space: nowrap; }
.logo a::before { width: var(--logosize); height: var(--logosize); min-width: var(--logosize); margin-right: 0.5em; display: block; content:"";
    background-size: contain; background-position: left center; background-repeat: no-repeat; speak: none;
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve"><path fill="%231EB46A" d="M32,0L32,0c17.7,0,32,14.3,32,32l0,0c0,17.7-14.3,32-32,32l0,0C14.3,64,0,49.7,0,32l0,0C0,14.3,14.3,0,32,0z"/> <path fill="%239FDBB3" d="M58.1,33.9c-5.9-2.1-17.7-6.4-29.5-5.7c-9.5,0.6-19,4.4-28.5,7c0.9,9,5.6,17,12.4,22.2c5.3,0,10.7,0,16,0 c8.3,0,16.5,0,22.8,0c6.7-5.1,11.3-12.7,12.3-21.5L58.1,33.9z"/><path fill="%23035193" d="M59.1,49.1c-3.3-0.7-6.7-1.4-10-2.1C35,44.1,21,41.7,6.9,43.5c-1.5,0.2-3,0.4-4.5,0.7C7.2,55.8,18.6,64,32,64 C43.4,64,53.4,58,59.1,49.1z"/><path fill="%23F0DB10" d="M4.5,15.7c4.6,1.5,9.6,2.6,14.7,2.6c11.1,0,22.2-5.3,33.3-5.3c1.8,0,3.7,0.2,5.5,0.4C52.2,5.3,42.7,0,32,0 C20.3,0,10,6.3,4.5,15.7z"/><path fill="white" d="M32,64C14.4,64,0,49.6,0,32S14.4,0,32,0s32,14.4,32,32S49.6,64,32,64z M32,4C16.6,4,4,16.6,4,32 s12.6,28,28,28s28-12.6,28-28S47.4,4,32,4z"/> </svg>');
}
.logo a:hover,
#logo a:hover {
    opacity: 0.7;
}

#logo svg path { fill: #818688; }
#footer .logo svg path,
#hero #logo svg path { fill: #FFFFFF; }
#logo svg path.o { fill: #6fbf58; }


#masthead { padding:var(--gutter) 0 ; }

@media all and (min-width: 1200px) {
    #logo.logo,
    #logo {

    }

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

    #masthead { padding:48px 0; }
    .logo{ font-size: 24px;}
}

@media all and (max-width: 1023.98px) {
    .logo{ font-size: 18px; }
}
@media all and (max-width: 899.98px) {

    #masthead { padding:24px 0;  height: var(--masthead-height); }



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

    .logo{ font-size:18px;}

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

    .logo{ font-size:16px;}

}
#hero>#masthead {padding-bottom:0 !important; }

#masthead > .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;

}



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

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

    #masthead > .wrapper {
        display: flex; /*flex-wrap: wrap;*/
        justify-content: space-between;

        align-items: center;

    }
    .logo,
    #logo {

    }

    body.navshown #logo a:focus-visible {
        box-shadow: 0 0 0 3px var(--green);
        border-radius: 4px;
    }


}


/*
:not(#hero)>#masthead { background:#FFF; overflow: hidden}*/