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

    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: -63px;
        right: var(--wrapper-margin);

    border: 2px solid 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="%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(--black2);  }
    body.searchshown #masthead { background: var(--black2);  }
    */


 /*   body.navshown #masthead #logo svg path { fill: white !important; }
*/
    #mainmenu .wrapper  { border: none !important;}

    #mainmenu .wrapper > ul#toplinks > li {

        margin: 16px 8px 16px 0;

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


        position: relative;
    }

    #mainmenu .wrapper > ul > li > div > div.wrapper {
        padding: 40px 40px 40px; background: var(--bg-purple);
    }
    #mainmenu .wrapper > ul > li > div::after { height: 4px; width: 100%;   display: block; content:"";
        position: absolute; bottom: 0; left: 0; }

    #mainmenu .wrapper > ul > li.active > div { max-height: 2000px; visibility: visible; border-bottom: 4px solid var(--yellow);   }

    #mainmenu .wrapper > ul:first-child { padding-left:var(--wrapper-margin);  padding-right: var(--wrapper-margin); display: flex; flex-wrap: wrap;}

    #mainmenu .wrapper > ul#menu > li > a {
        padding: 24px var(--wrapper-margin);
    }
    #mainmenu .wrapper > ul#menu > li:first-child > a { border-top: 1px solid #909090; }
    #mainmenu .wrapper > ul#menu > li > a {

        display: block;
        border-bottom: 1px solid #909090;

    }
    #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(--dark-purple); color: white;
        border-bottom: 4px solid var(--purple);
    }
     #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:""; z-index: 11;
        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(--purple);
    }


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

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

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

    #mainmenu div.wrapper>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;
    }
}