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

    #mainmenu .translate,
    #mainmenu #toplinks{ display:none !important; }

    #mainmenu {
       border-bottom: 1px solid #6F6F6F; /**/
    }
/*    #mainmenu::after { content:""; display: block; height: 1px; width: 100%; background: #6F6F6F;
        position: relative; pointer-events: none;
        z-index: 2;}*/

    #mainmenu .wrapper {
        display: flex;
        position: static !important;
    }


    #mainmenu > .wrapper:first-child > ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    /*#masthead a:focus-visible,*/
    #mainmenu > .wrapper:first-child > ul > li > a:focus-visible > span {
        box-shadow: 0 0 0 2px white, 0 0 0 4px var(--orange);
        border-radius: 4px;
    }


    #mainmenu .wrapper > ul > li > div {
       /* display: none;*/

        visibility:hidden;opacity: 0;
        transition: opacity 0.25s ease-out;
        position: absolute; z-index: 20;
        left: 0;


        top: 100%;top: calc(100% - 1px);
        width: 100%;

        /*opacity: 0; visibility: hidden;*/

        padding: calc(var(--unit) * 2);
        padding-left: 0;
        padding-right: 0;
        border-bottom: 4px solid var(--menu-orange);

        background: white;

        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 21px 46px 0px rgba(0, 0, 0, 0.10), 0px 83px 83px 0px rgba(0, 0, 0, 0.09), 0px 186px 112px 0px rgba(0, 0, 0, 0.05), 0px 331px 132px 0px rgba(0, 0, 0, 0.01), 0px 518px 145px 0px rgba(0, 0, 0, 0.00);
    }
    #mainmenu .wrapper > ul > li > div::before { content:""; display: block; height: 1px; width: 100%; background: #6F6F6F;
        position: absolute; top:0; left: 0; pointer-events: none;
        z-index: 2;}


    @keyframes opensubmenu {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0)
        }
        50% {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    #mainmenu .wrapper > ul > li:hover > div, #mainmenu .wrapper > ul > li > div:hover,
    #mainmenu .wrapper > ul > li.active > div {

        /*display: block; */visibility:visible;opacity: 1; transition: opacity 0.25s ease-in;

       /* -webkit-animation: opensubmenu .75s ease-out 1 normal forwards;
        animation: opensubmenu .75s ease-out 1 normal forwards;*/
    }




    #mainmenu div.overview {


        width: var(--grid-third);
        margin-right: var(--gutter);position: relative;
    }

    /*#mainmenu div.menu {

        width: var(--grid-twothirds);
    }*/
    /*#mainmenu div.menu ul{*/
    #mainmenu div.overview + ul {
        width: var(--grid-twothirds);
        column-count: 2;
        column-gap: var(--gutter);
        position: relative;

    }

    #mainmenu div.overview + ul > li {
        break-inside: avoid-column;
    }


    #mainmenu div.overview::after,
    #mainmenu div.overview + ul::after
    { display: block;   content:"";
        position: absolute; top: 0;  height: 100%; width: 1px; background: rgba(102, 102, 102, 0.20);
    }
    #mainmenu div.overview::after { left: calc( 100% + 15px);  }
    #mainmenu div.overview+ ul::after { left: calc( 50% - 7.5px);  }



    /*
    #mainmenu .wrapper>ul>li>div*/
    #mainmenu div.overview p {
        font-size: 17px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0.01em;
        margin: 1em 0;
    }



}




#mainmenu div.overview>p:first-child {
    font-family: 'Source Serif Pro', serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: 0.01em;
    margin: 0 0 0.5em;
}

h3>a,
h2.h2>a,
#mainmenu div.overview>p:first-child a { color: inherit}

h3>a:focus-visible,
h2.h2>a:focus-visible,
#mainmenu div.overview>p:first-child a:focus-visible {
    box-shadow: 0 0 0 1px white, 0 0 0 3px var(--orange);
    border-radius: 2px;
     }


#mainmenu li > ul {


}

#mainmenu li .wrapper > ul > li {
    padding: 12px 8px;
    font-size: 14px;
    line-height: 140%;


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

    #mainmenu div.overview div {
        display: none !important;
    }
    #mainmenu li .wrapper > ul > li {
        padding: 0px 0; margin: 24px 0;
    }
}


#mainmenu li .wrapper > ul > li strong {

    /*display: inline-block; display: inline-flex; align-content: center; flex-wrap: wrap;*/
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    margin-bottom: 0.25em;
}
#mainmenu li .wrapper > ul > li strong::after{
    transition: all 0.2s ease;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    width: 1.25em; height: 1em; display: inline-block; content:"\00A0";  margin-left: 0.25em; /*float: right;*/
    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> ');
}

#mainmenu li .wrapper > ul > li a:hover strong::after{
    margin-left: 0.75em;

}
#mainmenu li .wrapper > ul > li a>span {
    padding-top: 0.25em;
    display: inline-block;
}


#mainmenu li .wrapper > ul > li a {
    color: var(--black);
}

#mainmenu li .wrapper > ul > li li a:focus-visible,
#mainmenu li .wrapper > ul > li a:focus-visible strong:first-child {
    box-shadow: 0 0 0 1px white, 0 0 0 3px var(--orange);
    border-radius: 2px;
}




#mainmenu li .wrapper > ul > li ul {
    padding: 0.5em 8px 0;
}

#mainmenu li .wrapper > ul > li li {


    font-weight: 600;
    font-size: 16px;
    line-height: 120%;

    margin:0.75em 0;
}

#mainmenu li .wrapper > ul > li li a {
    color: var(--menu-blue);
}
#mainmenu li .wrapper > ul > li li a:hover{
    color: var(--black);

}

h3>a,
h2.h2>a,
#mainmenu div.overview>p:first-child a,
#mainmenu li .wrapper > ul > li li a,
#mainmenu li .wrapper > ul > li a>strong:first-child {
    transition: all 0.2s ease; cursor: pointer;
    text-decoration: none;
    padding:2px 0  ;
    background-image: linear-gradient(var(--blue), var(--blue)), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 0 2px, 100% 2px;
    transition: background-size .3s;

}

h3>a:hover,
h2.h2>a:hover,
#mainmenu div.overview>p:first-child a:hover,
#mainmenu li .wrapper > ul > li li a:hover,
#mainmenu li .wrapper > ul > li a:hover>strong:first-child  {
    background-size: 100% 2px, 100% 2px

}

h2.h2>a,
#mainmenu div.overview>p:first-child a {
    padding:2px 0 4px ;
    background-size: 0 4px, 100% 4px;
    background-image: linear-gradient(var(--orange), var(--orange)), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}
h3>a {
    padding: 0;
    background-size: 0 4px, 100% 4px;
}

h2.h2>a {
    padding:0 0 ;
}
h3>a:hover,
h2.h2>a:hover,
#mainmenu div.overview>p:first-child a:hover {
    background-size: 100% 4px, 100% 4px
}