.hamburger {
    display: none;
    cursor: pointer;
        border-radius: 12px;
        height: 60px;
        width: 60px;    border: 2px solid white;
    position: relative;
    background: none;
    outline: none;

}

.hamburger::before {
    display: block;
    width: 32px;
    height: 32px;
    content: "";
    margin: auto;
    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 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="white" d="M0,2h24v3.2H0V2z M0,10.5h24v3.2H0V10.5z M0,18.8h24V22H0V18.8z"/></svg>');
}


@media (prefers-color-scheme: dark) {
    .hamburger::before {

        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 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="white" d="M0,2h24v3.2H0V2z M0,10.5h24v3.2H0V10.5z M0,18.8h24V22H0V18.8z"/></svg>');
    }

}

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

    .hamburger {
        height: 64px;
        width: 64px;
    }


}


.hamburger:is(:hover,:focus-visible){
    background: var(--hover_blue); border-color:var(--hover_blue);
}
.hamburger:is(:hover,:focus-visible)::before {

    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 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="black" d="M0,2h24v3.2H0V2z M0,10.5h24v3.2H0V10.5z M0,18.8h24V22H0V18.8z"/></svg>');
}

.hamburger:focus-visible {
    /* outline:2px solid var(--ttl_error); outline-offset: 2px; */ outline: 3px solid black; box-shadow: 0 0 0 6px white;
}
body.navshown #secondary .hamburger {

}

body.navshown .hamburger::before {
    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 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="black" d="M10.4,12l-9.6,9.6l1.6,1.6l9.6-9.6l9.6,9.6l1.6-1.6L13.6,12l9.6-9.6l-1.6-1.6L12,10.4L2.4,0.8L0.8,2.4 L10.4,12z"/></svg>');
}

#menuholder>p {display: none;}
/*
@media all and (max-width: 1023.98px) {
*/
@media all and (max-width: 1099.98px) {

    body.navshown #menuholder > p {
        height: var(--masthead-height);
        background: transparent;
        position: fixed;
        top: 16px;
        padding: 0 var(--section-padding);
        width: calc(100% - var(--wrapper-margin) - var(--wrapper-margin));
        left: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 16px; margin-right: 0;
        border-top: none;
        border-bottom: none;

    }

    #menuholder > p .hamburger {
        pointer-events: auto;
    }

    .hamburger {
        display: block;
    }
    body.navshown {
        overflow: hidden;
    }
    body.navshown #masthead > .wrapper div:first-child,
    body.navshown #masthead div#secondary {
      /*  opacity: 0.333; pointer-events: none;*/ }

    body.navshown #masthead div#secondary button.hamburger {
        opacity: 0; pointer-events: none;}


    #menuholder {
        background: white;
        visibility: hidden;
        position: absolute; /* top: var(--masthead-height);*/
        transform: translateX(-100%);
        /*transition: all 0.2s ease;*/

    }

    #menuholder {
        visibility: hidden;
        position: relative;
    }

/*    #menuholder .hamburger {
        position: absolute;
        top: -63px;
        right: var(--wrapper-margin);

        border: 2px solid white;
    }*/

    body.navshown #menuholder .hamburger { background: white;}
    body.hashero #menuholder .hamburger::before,
    body.navshown #menuholder .hamburger::before {
        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 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="black" d="M10.4,12l-9.6,9.6l1.6,1.6l9.6-9.6l9.6,9.6l1.6-1.6L13.6,12l9.6-9.6l-1.6-1.6L12,10.4L2.4,0.8L0.8,2.4 L10.4,12z"/></svg>');
    }


    body.navshown #menuholder {
        visibility: visible;
        z-index: 100;transform: none;
        pointer-events:none;
    }

    body.navshown #mainmenu {
        opacity: 1;
        visibility: visible;
        display: block;
        transform: none;
        overflow: auto;
        pointer-events:auto;


    }

    #masthead {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    :target {
        scroll-margin-top: calc(var(--masthead-height) + 32px);
    }

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

    body.navshown #menuholder > p {
        left: 8px;

    }
}