:root {
    --mobile-menu-text-color: #FFFFFF;
    --mobile-menu-text-color-active: #FFFFFF;
    --mobile-menu-background: #333333;
    --mobile-menu-background-active: #666666;
    --mobile-menu-head-background: #666666;
    --mobile-menu-head-text-color: #FFFFFF;
}

@media (min-width: 63.01rem) {

    #main-menu { min-height: 0 !important; }
    #main-menu .mobile-only { display: none; }

}


@media (max-width: 63rem) {

    #main-menu .desktop-only { display: none; }

    #main-menu {
        position: absolute;
        display: none;
        overflow: hidden;
        width: 100vw;
        max-width: 30rem;
        min-height: 0;
        padding: 0 0 0 0;
        right: 0;
        top: 0;
        color: var(--mobile-menu-text-color);
        background: var(--mobile-menu-background);
        font-size: var(--font-size, 1.25rem);
        transition: min-height .5s ease, box-shadow .5s ease;
        will-change: transform, opacity; /* prevent safari rendering bug */
    }
    #main-menu.opened {
        display: flex;
        box-shadow: var(--box-shadow, 0 0 1rem rgba(0, 0, 0, .25));
    }
    #main-menu:after {
        content: '';
        position: fixed;
        visibility: hidden;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: none;
        transition: background .5s ease, visibility 0s ease .5s;
    }
    #main-menu.opened:after {
        visibility: visible;
        background: rgba(0, 0, 0, .5);
        transition: background .5s ease;
    }

    #main-menu ul {
        list-style-type: none;
        margin: 0;
    }
    #main-menu li {
        margin: 0;
    }
    #main-menu a {
        position: relative;
        display: block;
        padding: .5rem 2rem;
        text-decoration: none;
        color: var(--mobile-menu-text-color);
        text-transform: uppercase;
        cursor: pointer; /* needed for back link */
    }
    #main-menu li.selected > a,
    #main-menu a:hover {
        color: var(--mobile-menu-text-color-active);
        background: var(--mobile-menu-background-active);
    }
    #main-menu a:focus-visible {
        outline-offset: calc(-1 * var(--outline-width, 2px));
    }
    #main-menu .menu {
        position: absolute;
        display: block;
        visibility: hidden;
        width: 100%;
        top: 0;
        left: 0;
        padding: 6rem 0 2rem 0;
        box-sizing: border-box;
        transform: translate(calc(100% + 1rem), 0) scaleZ(1);
        transition: transform .5s ease;
        background: var(--mobile-menu-background);
        z-index: 2;
        /*will-change: contents, transform, opacity;*/
    }
    #main-menu .menu.visible {
        visibility: visible;
    }
    #main-menu .menu.delay-visible {
        transition: transform .5s ease, visibility 0s ease .5s;
    }
    #main-menu .menu.active-submenu {
        transform: translate(0, 0);
        box-shadow: -.5rem 0 .5rem rgba(0, 0, 0, .125);
        min-height: 100%;
    }
    #main-menu .menu .head {
        padding: 1rem 2rem;
        margin-bottom: 1rem;
        text-transform: uppercase;
        color: var(--mobile-menu-head-text-color);
        background: var(--mobile-menu-head-background);
    }
    #main-menu .menu .back a {
        padding-left: 4rem;
    }
    #main-menu .mainmenu > li:not(:last-child):after {
        content: '';
        display: block;
        width: calc(100% - 4rem);
        height: 0;
        margin: .25rem 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, .25);
    }
    #main-menu .menu > li:has(.submenu) > a {
        padding-right: 5rem;
    }

    #main-menu .menu .menu:after {
        content: '';
        display: block;
        width: calc(100% - 4rem);
        height: 0;
        margin: .75rem 2rem 0 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, .25);
    }
    #main-menu .submenu .head {
        font-weight: bold;
    }
    #main-menu .submenu li:has(> .submenu) > a {
        padding-right: 4rem;
    }

    #main-menu .menu .back a:before,
    #main-menu .menu > li:has(> .submenu) > a:after,
    #main-menu .submenu li:has(> .submenu) > a:after {
        content: '';
        position: absolute;
        right: 2rem;
        top: 50%;
        width: 1rem;
        height: 1rem;
        margin-top: -.5rem;
        background: url(arrow.svg) center right no-repeat;
        background-size: contain;
    }
    #main-menu .menu .back a:before {
        right: auto;
        left: 2rem;
        transform: rotate(-180deg);
    }

}