@media (min-width: 74.01rem) {

    header { z-index: 10; }

    #menu-button { display: none; }

    #mainmenu { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; margin: 0 2rem 0 0; gap: 2rem; }
    #mainmenu .additional-mobile { display: none; }

    #mainmenu ul { margin: 0; padding: 0; list-style-type: none; }
    #mainmenu li { position: relative; margin: 0; }
    #mainmenu li:before { display: none; }
    #mainmenu a { text-decoration-color: transparent; }
    #mainmenu a:focus-visible { outline: 2px solid var(--color-link-focus); }

    #mainmenu .mainmenu { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin: 1.5rem 0; gap: 2rem; }
    #mainmenu .mainmenu > li > a { display: block; padding: .25rem .5rem; font-family: 'Red Hat Display', sans-serif; font-weight: 900; text-transform: uppercase; color: var(--color-dark-grey); }
    #mainmenu .mainmenu > li > a.toggle-submenu { display: none; }
    #mainmenu .mainmenu > li.selected > a { color: var(--color-neon-purple); }
    #mainmenu .mainmenu > li > a:hover { text-decoration-color: var(--color-neon-yellow); }

    #mainmenu .submenu { position: absolute; display: flex; visibility: hidden; left: 50%; opacity: 0; transform: translate(-50%, 1rem); transition: visibility 0s linear .3s, opacity .3s ease, transform .3s ease; }
    #mainmenu li:hover > .submenu, #mainmenu li:focus-within > .submenu { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity .3s ease, transform .3s ease; }
    #mainmenu .submenu > ul { display: flex; flex-flow: column nowrap; margin: 0; padding: 2rem 1.5rem 1rem 1.5rem; gap: .5rem; background: var(--color-neon-purple); clip-path: polygon(50% 0, calc(50% + 1rem) 1rem, 100% 1rem, 100% 100%, 0 100%, 0 1rem, calc(50% - 1rem) 1rem); }
    #mainmenu .submenu > ul > li { white-space: nowrap; }
    #mainmenu .submenu > ul > li > a { color: var(--color-white); font-size: 1rem; font-weight: 700; }
    #mainmenu .submenu > ul > li > a:hover { color: var(--color-neon-green); }

}

@media (min-width: 74.01rem) and (max-width: 88rem) {
    #mainmenu .mainmenu{ gap: .5rem; }
}


@media (max-width: 74rem) {

    #menu-button {
        align-self: flex-end;
        position: relative;
        display: block;
        top: 0;
        right: 0;
        width: 4rem;
        height: 4.5rem;
        margin: 0;
        padding: 0;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        color: var(--color-white, #FFFFFF);
        background: var(--color-black, #050505);
        border: 0;
        border-radius: 0;
        z-index: 99;
        transition: background .3s ease;
    }
    #menu-button .text {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        clip: rect(0, 0, 0, 0);
    }
    #menu-button .bar {
        position: absolute;
        display: block;
        width: 70%;
        height: 3px;
        top: 50%;
        margin-top: -2px;
        margin-left: 15%;
        border-radius: 0;
        background: var(--color-white, #FFFFFF);
        transition: all .3s ease-in-out 0s;
        transform: rotate(0deg);
    }
    #menu-button .bar:nth-child(2) { margin-top: calc(-20% - 2px); }
    #menu-button .bar:nth-child(4) { margin-top: calc(20% - 2px); margin-left: 36%; width: 50%; }
    #menu-button:hover .bar:nth-child(3) { margin-left: 15%; }
    #menu-button.opened { background: rgba(131, 46, 252, 0.9); }
    #menu-button.opened .bar { background: var(--color-neon-green); }
    #menu-button.opened .bar:nth-child(2) { margin-top: calc(-5%); margin-left: 15%; transform: rotate(-45deg); }
    #menu-button.opened .bar:nth-child(3) { opacity: 0; }
    #menu-button.opened .bar:nth-child(4) { margin-top: calc(-5%); margin-left: 15%; transform: rotate(45deg); width: 70%; }


    #mainmenu {
        align-self: flex-end;
        position: relative;
        display: flex;
        align-items: stretch;
        flex-flow: column nowrap;
        overflow: hidden;
        visibility: hidden;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 24rem;
        height: 0;
        transition: height .5s ease, visibility 0s ease .5s;
        background: rgba(131, 46, 252, 0.9);
        /*
        background: rgba(131, 46, 252, 0.9) url(../files/design/rrr/rrr-green.svg) no-repeat right bottom;
        background-size: 100% auto;
        */
    }
    #mainmenu.opened {
        height: auto;
        visibility: visible;
        transition: height .5s ease;
    }

    header { z-index: 100; }
    header .additional-desktop { display: none; }
    body:before { content: ''; position: fixed; left: 0; top: 0; width: 100%; height: 0; opacity: 0; background: rgba(0, 0, 0, .5); z-index: 99; transition: opacity .5s ease, height 0s ease .5s; }
    body.menu-opened:before { height: 200%; opacity: 1; transition: opacity .5s ease; }

    #mainmenu .mainmenu { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; margin: 0; padding: 2rem 2rem; gap: 1.5em; list-style-type: none; font-size: 1.25em; }
    #mainmenu .mainmenu li { position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; margin: 0; gap: 0 1rem; }
    #mainmenu .mainmenu li:before { display: none; }
    #mainmenu .mainmenu li a { text-decoration: none; color: var(--color-white); }
    #mainmenu .mainmenu li > a:hover { color: var(--color-neon-green); }
    #mainmenu .mainmenu li.selected > a { color: var(--color-neon-green); }

    #mainmenu .mainmenu > li { transition: transform 0s ease .5s, opacity 0s ease .5s; transform: translateY(1.5rem); opacity: 0; }
    #mainmenu.opened .mainmenu > li { transition: transform .4s ease 0s, opacity .4s ease 0s; transform: none; opacity: 1; }
    #mainmenu.opened .mainmenu > li:nth-child(1) { transition-delay: .1s; }
    #mainmenu.opened .mainmenu > li:nth-child(2) { transition-delay: .2s; }
    #mainmenu.opened .mainmenu > li:nth-child(3) { transition-delay: .3s; }
    #mainmenu.opened .mainmenu > li:nth-child(4) { transition-delay: .4s; }
    #mainmenu.opened .mainmenu > li:nth-child(5) { transition-delay: .5s; }
    #mainmenu.opened .mainmenu > li:nth-child(6) { transition-delay: .6s; }
    #mainmenu.opened .mainmenu > li:nth-child(7) { transition-delay: .7s; }
    #mainmenu.opened .mainmenu > li:nth-child(8) { transition-delay: .8s; }
    #mainmenu.opened .mainmenu > li:nth-child(9) { transition-delay: .9s; }
    #mainmenu.opened .mainmenu > li:nth-child(10) { transition-delay: 1s; }

    #mainmenu .mainmenu > li > a { display: block; text-decoration: none; text-transform: uppercase; color: var(--color-white); font-family: 'Red Hat Display', sans-serif; font-weight: 700; }

    #mainmenu .toggle-submenu { position: relative; display: block; width: 1.75rem; height: 1.75rem; margin: 0 !important; padding: 0 !important; cursor: pointer; transform: rotate(0deg); transition: transform .5s ease; background: url(../files/design/plus-submenu.svg) center center no-repeat; background-size: 100%; }
    #mainmenu .toggle-submenu.opened { transform: rotate(45deg); }

    #mainmenu .submenu { display: block; width: 100%; overflow: hidden; margin: 0; height: 0; visibility: hidden; transition: margin .5s ease, height .5s ease, visibility 0s ease .5s; }
    #mainmenu .submenu ul { padding: .5rem 0 0 0; }
    #mainmenu .submenu.opened { height: auto; visibility: visible; transition: margin .5s ease, height .5s ease; }
    /*#mainmenu .submenu:focus-within { height: auto; } /* separate css rule/property to avoid ie11 bug */
    #mainmenu .submenu > ul { list-style-type: none; margin: 0; font-size: 1.25rem; }

    #mainmenu .mainmenu { font-size: 1.25rem; }
    #mainmenu .submenu > ul { font-size: 1.125rem; }


}