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

    body.navshown { overflow: hidden;}

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

    #menuholder .hamburger {
        position: absolute;
        top: -64px;
        right: 32px;
    border: 2px solid white;
}
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="%23FFFFFF" 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;}
    body.navshown #mainmenu { opacity: 1; visibility: visible; display: block; transform:none;    overflow: auto;}

    #masthead { position: fixed; top: 0; left: 0; width: 100%; }

    body.navshown #masthead { background: var(--hero-blue);  }
    body.searchshown #masthead { background: var(--search-blue);  }


    body.navshown #masthead #logo svg path { fill: white !important; }

    #mainmenu .wrapper  { border: none !important;}

    #mainmenu .wrapper > ul#toplinks > li {

        margin: 16px 0;

    }
    #mainmenu .wrapper > ul > li > div { max-height: 0; overflow: hidden; visibility: hidden; transition: all 0.5s ease;

        background: var(--light-blue);
        position: relative;
    }
    #mainmenu .wrapper > ul > li > div > div.wrapper {
        padding: 32px 40px 24px;
    }
    #mainmenu .wrapper > ul > li > div::after { height: 4px; width: 100%; background-color:var(--menu-orange); display: block; content:"";
        position: absolute; bottom: 0; left: 0; }

    #mainmenu .wrapper > ul > li.active > div { max-height: 1000px; visibility: visible; }

    #mainmenu .wrapper > ul:first-child { padding-left: 16px;  padding-right: 16px; }

    #mainmenu .wrapper > ul#menu > li > a {
        padding: 24px 40px;
    }
    #mainmenu .wrapper > ul#menu > li > a {

        display: block;
        border-bottom: 1px solid rgba(102, 102, 102, 0.20);

    }
    #mainmenu > .wrapper > ul > li > a span::after  {
        margin-left: auto;
    }

    #mainmenu > .wrapper > ul:not(#toplinks) > li.active > a span::after  {
        transform: rotate(180deg);

        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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><polygon fill="%23FFFFFF" points="10,15.4 1.3,6.7 2.7,5.3 10,12.6 17.3,5.3 18.7,6.7 	"/></svg>');

    }

    #mainmenu > .wrapper > ul:not(#toplinks) > li.active>a {
        background: var(--hero-blue); color: white;
    }
     #mainmenu>.wrapper ul:not(#toplinks)>li>a:focus-visible>span:first-child {
        box-shadow: 0 0 0 2px white, 0 0 0 4px var(--orange);
        border-radius: 4px;
    }
    #mainmenu>.wrapper ul:not(#toplinks)>li.active>a:focus-visible>span:first-child {
        box-shadow: 0 0 0 2px var(--hero-blue), 0 0 0 4px var(--orange);
        border-radius: 4px;
    }



    #mainmenu > .wrapper > ul > li.active> div::before {
        display: block; content:"";
        position: absolute; top: 0; left: 40px;
        width: 0;
        height: 0;
        border-left: 14px solid transparent;
        border-right: 14px solid transparent;
        border-top: 20px solid var(--hero-blue);
    }


    #mainmenu div.overview>p:first-child {

        font-size: 26px;
        line-height: 32px;

    }
    #mainmenu div.overview>p:first-child a { display:flex; }

    #mainmenu div.overview>p:first-child a::after{
        transition: all 0.2s ease;
        background-position: center; background-size: cover; background-repeat: no-repeat;
        width: 32px; height: 1em; display: inline-block; content:"";  margin-left: auto;
        position: relative;
        top: 0.2em;
        /*background-image: url('data:image/svg+xml;utf8, <svg fill="%23111B29" 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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><path d="M11.8,14.9l-1.2-1.2l3-3H3.5V9h10.1l-3-3l1.2-1.2l5,5L11.8,14.9z"/></svg> ');
        */
        background-image: url('data:image/svg+xml;utf8, <svg fill="%23454545" 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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><path d="M11.8,14.9l-1.2-1.2l3-3H3.5V9h10.1l-3-3l1.2-1.2l5,5L11.8,14.9z"/></svg> ');
    }


}
@media all and (max-width: 599px) {
    #menuholder .hamburger {

        right: 16px;
    }
}