@keyframes animateMobileNav {
    0% {
        transform: translate3d(-110%, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@media all and (min-width: 992px) {
    #navigation-close-button {
        display: none;
    }

    header.header #navbarSupportedContent {
        padding: 0;
        margin: 0;
    }

    #navigation {
        display: flex;
        justify-content: center;
        gap: 1rem;
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
    }

    #navigation li.menu-spacer {
        display: none;
    }

    #navigation ul {
        list-style: none;
        padding: 0;
    }

    #navigation ul.second-level {
        margin: 15px;
        flex-grow: 1;
    }

    #navigation ul.third-level {
        margin: 10px 0 36px;
    }

    #navigation li.desktop-hide,
    li>.subnavigation {
        display: none;
    }

    #navigation>li[role="menuitem"]>a {
        text-decoration: none;
        font-size: 1.1rem;
        padding: .8rem .5rem 2rem;
        display: block;
        position: relative;
    }

    #navigation li.menu-sep {
        align-self: stretch;
        width: 2px;
        position: relative;
    }

    #navigation li.menu-sep:after {
        content: "";
        width: 2px;
        height: 25%;
        background-color: var(--color-highlight-secondary, orange);
        position: absolute;
        top: 40%;
        transform: translate3d(0, -50%, 0);
    }

    #navigation a>span {
        display: block;
        position: relative;
    }

    #navigation li.hover>a>span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--color-highlight-secondary, orange);
        bottom: -0.4em;
        left: 0;
    }

    #navigation li.has-tree.hover>a:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        bottom: 0;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid var(--color-secondary);
        z-index: 2;
    }

    #navigation li.hover>.subnavigation,
    #navigation li.test>.subnavigation {
        display: inherit;
    }

    #navigation .subnavigation {
        position: absolute;
        background: var(--color-secondary);
        width: 100%;
        left: 0;
        box-shadow: 0 2px 7px #aaa;
        padding: 2rem 1rem 0;
    }

    #navigation .subnav-wrapper {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    #navigation a[data-level="third"] {
        text-decoration: none;
        display: block;
        font-weight: bold;
        position: relative;
        padding-bottom: 14px;
        font-size: 20px;
    }

    #navigation a[data-level="third"]:not(.has-children) {
        margin-bottom: 36px;
    }

    #navigation a[data-level="third"]:hover {
        color: var(--color-highlight-secondary);
    }

    #navigation a[data-level="third"]:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: var(--color-highlight-secondary);
    }

    #navigation ul.third-level a {
        text-decoration: none;
        display: block;
        font-size: 18px;
        padding: .3em 0;
    }

    #navigation ul.third-level a:hover>span {
        color: var(--color-highlight);
    }

    #navigation ul.third-level a span:before {
        content: "\f054";
        font-family: "Font Awesome 7 Free";
        font-size: .8em;
        margin-right: 1ch;
        color: var(--color-primary) !important;
    }

    #navigation>li.menu-sep:nth-last-child(3) {
        display: none;
    }
}

@media all and (max-width: 991px) {
    #navigation-close-button {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 3;
        color: var(--color-highlight);
        width: 4rem;
        height: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        background: none;
        backdrop-filter: blur(2px);
        border-radius: 4px;
    }

    html[data-nav="navigation"] #mainnav {
        position: fixed;
        margin-left: 0;
        left: 0;
        top: 0;
        right: 0;
        height: 100vh;

        @supports (height: 100dvh) {
            height: 100dvh;
        }

        z-index: 1000;
        backdrop-filter: blur(5px);
        background: #fff8;
    }

    html[data-nav="navigation"] header #navbarSupportedContent {
        background-color: var(--color-primary);
        display: block;
        transform: none;
        max-width: min(100%, 500px);
        animation: animateMobileNav 250ms ease-out;
    }

    #navigation {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
        height: calc(100% - 2rem);
        top: 2rem;
    }

    #navigation li.menu-spacer {
        flex-grow: 1;
        background-color: var(--color-bg-dark);
    }

    #navigation li.menu-sep {
        display: none;
    }

    #navigation li.menuitem {
        font-size: 1rem;
        background: var(--color-secondary);
    }

    #navigation li.menuitem>a {
        text-indent: 1rem;
    }

    html[data-nav="navigation"] header.header .header-wrapper {
        visibility: hidden;
    }

    header.header #navbarSupportedContent {
        padding: 0;
        margin: 0;
    }


    #navigation,
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 98%;
    }

    #navigation li:not(.menu-meta) {
        display: flex;
        flex-wrap: wrap;
    }

    #navigation li:not(.menu-meta) a {
        text-decoration: none;
        display: block;
        flex-grow: 1;
        padding: 0.5em 0;
        align-items: center;
    }

    #navigation .openSubcatMain {
        cursor: pointer;
    }

    #navigation .openSubcatMain,
    #navigation .openSubcatPlaceholder {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        background: var(--color-secondary);
    }

    #navigation .openSubcatMain:after {
        content: "+";
        scale: 1.5;
    }

    #navigation li.open>.openSubcatMain:after {
        content: "-";
        scale: 1.5;
    }

    #navigation .openSubcatMain:hover {
        color: var(--color-highlight-secondary);
    }

    #navigation .menu-meta {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    #navigation .menu-meta,
    #navigation .menu-meta a {
        color: var(--color-secondary);
    }

    #navigation .menu-meta>a {
        text-indent: 1rem;
    }

    #navigation .menu-meta a {
        text-decoration: none;
        padding: 0.5em 0;
    }

    #navigation .menu-language {
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid rgba(var(--color-secondary-rgb), .3);
    }

    #navigation .menu-language a {
        width: auto;
        display: flex;
        align-items: center;
        gap: 1ch;
    }

    #navigation .menu-language a.active {
        color: var(--color-highlight-secondary);
    }

    #navigation .menu-language a span {
        display: block;
        width: 20px;
        height: 15px;
    }

    #navigation .menu-meta a:hover {
        color: var(--color-highlight-secondary);
    }

    #navigation .subnavigation {
        display: none;
        width: 100%;
    }

    #navigation li.open>.subnavigation,
    #navigation li.open>ul {
        display: block;
    }

    #navigation>li>.subnavigation {
        background-color: var(--color-bg-dark);
    }

    #navigation .main-menu-item {
        border-top: 1px dashed var(--color-primary);
    }

    #navigation>li.menuitem:first-child>a {
        border-top: none;
    }

    #navigation .main-menu-item:hover {
        color: var(--color-highlight);
    }

    #navigation ul.second-level>li {
        display: flex;
    }

    #navigation ul.second-level .openSubcatMain,
    #navigation ul.second-level .openSubcatPlaceholder {
        background: var(--color-bg-dark) !important;
    }

    #navigation ul.second-level .openSubcatMain:hover {
        color: var(--color-secondary) !important;
    }

    #navigation ul.second-level>li>a {
        text-indent: 3rem;
    }

    #navigation ul.second-level>li>a:hover {
        color: var(--color-highlight);
    }

    #navigation ul.third-level {
        display: none;
        background-color: var(--color-bg-light);
    }

    #navigation ul.third-level>li>a {
        text-indent: 5rem;
    }

    #navigation ul.third-level>li>a:hover {
        color: var(--color-highlight);
    }

    #navigation .desktop-hide:not(.menu-meta) {
        display: none !important;
    }
}