.hamburger {
    display: none;
}

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

    #menuholder {
        position: fixed;
        width: 100%;
        height: 100%;
        /*background: linear-gradient(90deg, #5856D6 0%, #003C4C 92.42%);*/
        background-color: var(--blue-darker);
        left: 0;
        top: 0;
        padding-top: var(--masthead-height);
        color: white;
        z-index: 9;
    }

    #mainmenu ul li {
        font-size: 16px;
        line-height: 1.2;
        margin: 1em 0;
    }

    #mainmenu ul li a {
        margin: 0;
    }


    body.navshown::before {
        z-index: -1;
        pointer-events: auto;
        opacity: 0.5;
    }

    #menuholder {
        visibility: hidden;
    }


    .hamburger {
        display: block;
        cursor: pointer;
        border: 2px solid white;

        height: 44px;
        width: 44px;
        position: relative;
        outline: none;
        color: white;

        background: none;
        outline: none;
        border-radius: 8px;
    }

    .hamburger span {
        display: block;
        width: 24px;
        height: 17px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


    .hamburger:focus-visible {
        box-shadow: 0 0 0 3px var(--yellow);
    }

    .hamburger span em,
    .hamburger span::after,
    .hamburger span::before {
        display: block;
        width: 100%;
        height: 3px;
        content: "";
        background: white;
        transition: transform 0.2s ease;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .hamburger span::before {
        top: 0;
    }

    .hamburger span em {
        top: 7px;
        transition: none;
    }

    .hamburger span::after {
        top: calc(100% - 3px);
    }


    body.navshown .hamburger {
        border: 3px solid white;
        border-radius: 50%;
        transform: scale(0.9);
    }

    body.navshown .hamburger span::before {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg)
    }

    body.navshown .hamburger span em {
        opacity: 0;;
    }

    body.navshown .hamburger span::after {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg)
    }

    .hamburger span em,
    .hamburger span::after,
    .hamburger span::before,
    .hamburger:focus-visible span em,
    .hamburger:focus-visible span::after,
    .hamburger:focus-visible span::before,
    .hamburger:hover span em,
    .hamburger:hover span::after,
    .hamburger:hover span::before {
        background: white;
    }

    body.navshown .hamburger span em,
    body.navshown .hamburger span::after,
    body.navshown .hamburger span::before {
        background: white;
    }


    body.navshown #masthead {
        z-index: 33;
    }

    body.navshown #menuholder {
        visibility: visible;
        opacity: 1;
    }

    body.navshown {
        overflow: hidden;
    }


    #menuholder .hamburger {

        position: absolute;
        right: var(--wrapper-margin);
        top: 0;
        top: calc((var(--masthead-height) - 44px) / 2);

    }


}