#content-area #content {
    margin-top: 35px;
}

/* logo */
#mainHeader:not(.visible) #logo a {
    /* background: url(../../Img/Logo-KEY.svg) no-repeat; */
}

#inner-wrapper #content-header {
    border-color: transparent;
}

#mainHeader {
    border-bottom: solid 3px var(--primary-color);
}

#mainNav ul.menu.nav-menu.menu-level-1 > li > a {
    padding: 15px 23px;
}

#mainNav ul.menu.nav-menu.menu-level-1 > li:first-child > a {
    background-color: var(--primary-color);
    color: #FFF;
    border-radius: 5px 5px 0 0;
    padding: 15px 23px;
    transition: all .4s ease;
}

#mainNav ul.menu.nav-menu.menu-level-1 > li:first-child:hover > a {
    background-color: rgba(255, 166, 0, 0.2);
    color: var(--primary-color);
}

#mainNav .menu-level-2 > li.has--child-items > a {
    border-bottom: 1px solid #d0d0d0;
}

#mainNav .menu-level-2 li ul > li {
    border-bottom: 1px solid #d0d0d0;
}

#mainNav .menu-level-2 > li a > .image + .label {
    position: static;
    font-weight: 500;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-left: 0;
    background-color: unset;
}

#mainNav .submenu-wrapper {
    backface-visibility: hidden;
    opacity: 0;
    background-color: #FFF;
    transform: rotateX(-90deg);
    transform-style: preserve-3d;
    transform-origin: top center;
    transition: transform .5s cubic-bezier(.2, .7, .7, 1.3), opacity .1s .1s;
    position: absolute;
    top: calc(100% + 3px);
    z-index: 20;
    left: -20px;
    font-size: 17px;
    width: calc(100% + 40px);
}

#mainNav ul.menu.nav-menu.menu-level-1 li:first-child .submenu-wrapper {
    left: -20px;
}

ul.submenu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#mainNav .submenu-wrapper li > a,
#mainNav .submenu-wrapper li:first-child > a,
#mainNav .submenu-wrapper li:last-child > a {
    padding: 0;
}

#mainNav ul.menu.nav-menu.menu-level-2 > li,
#mainNav ul.menu.nav-menu.menu-level-2 > li:first-child,
#mainNav ul.menu.nav-menu.menu-level-2 > li:last-child {
    padding: 20px 15px;
}

#mainNav .menu-level-2 > li ul li {
    width: 100%;
}

#mainNav .submenu-wrapper li a > span {
    display: block;
    padding: 10px 0;
}

img.img.nav-image {
    width: 100%;
    height: 100%;
}

#mainNav ul.menu.nav-menu.menu-level-2 li a:hover, .header-mobile-nav ul.menu.nav-menu.menu-level-2 li a:hover {
    color: var(--nav-color);
    text-decoration: none;
}

#mainNav ul.menu.nav-menu.menu-level-2 li.active.current a, .header-mobile-nav ul.menu.nav-menu.menu-level-2 li.active.current a {
    color: var(--nav-color);
}

#mainNav .menu-level-2 ul li.has--child-items input ~ .submenu {
    display: none;
}

#mainNav .menu-level-2 ul li.has--child-items input:checked ~ .submenu {
    display: block;
}

#mainNav ul.menu.nav-menu.menu-level-2 li.active.current a:not([data-page-id="286"])::before,
.header-mobile-nav ul.menu.nav-menu.menu-level-2 li.active.current a:not([data-page-id="286"])::before,
#mainNav ul.menu.nav-menu.menu-level-2 li a:hover::before {
    display: none;
}

#mainNav ul.menu.nav-menu.menu-level-2 li.has--child-items {
    position: relative;
}

#mainNav .menu-level-2 > li ul .menu-item.has--child-items > a {
    padding-right: 25px;
}

#mainNav .menu-level-2 > li ul .menu-item.has--child-items > a ~ span.nav-toggler::after,
#mainNav .menu-level-2 > li ul .menu-item.has--child-items > span ~ span.nav-toggler::after {
    content: url(../../Img/Icons/Icon-Arrow-small-right.svg);
    position: absolute;
    z-index: 9;
    right: 0;
    top: 15px;
    transform: rotate(90deg);
    transition: all .4s ease-in-out;
}

#mainNav .menu-level-2 > li ul .menu-item.has--child-items:has(input:checked) > a ~ span.nav-toggler::after,
#mainNav .menu-level-2 > li ul .menu-item.has--child-items:has(input:checked) > span ~ span.nav-toggler::after {
    transform: rotate(270deg);
    transition: all .4s ease-in-out;
}

#mainNav .menu-level-2 input[type="checkbox"] {
    right: -6px;
    top: 13px;
    width: 27px;
    margin: 0;
}

#mainHeader {
    width: 100vw;
    background-color: #FFF;
    max-width: unset;
    position: fixed;
    z-index: 100;
    transition: all .4s ease-in-out;
}

#mainHeader .header-meta,
#mainHeader .header-inner {
    margin: 0 auto;
    max-width: 1200px;
}

#mainNav .menu-level-2 > li.menu-item {
    flex: 0 0 auto;
    flex-basis: 25%;
    flex-wrap: wrap;
    max-width: 25%;
    margin: 0;
    padding: 10px 15px;
    position: relative;
}

#mainNav ul.menu.nav-menu.menu-level-1 > li {
    position: unset;
}

#mainNav .menu-level-3 > .menu-item.has--child-items > a ~ span.nav-toggler::after,
#mainNav .menu-level-3 > .menu-item.has--child-items > span ~ span.nav-toggler::after,
.mobile-footer-top .menu-level-3 > .menu-item.has--child-items > a ~ span.nav-toggler::after {
    content: url(../../Img/Icons/Icon-Arrow-small-right.svg);
    position: absolute;
    z-index: 9;
    right: 20px;
    top: 0;
    transform: rotate(90deg);
    transition: transform ease-in-out .3s;
}

#mainNav .menu-level-2 > li {
    font-size: 20px;
}

#mainNav .menu-level-2 > li > ul > li {
    font-size: 17px;
}

#mainHeader #logo a {
    height: 43px;
    width: 237px;
    margin-bottom: 21px;
    transition: width .4s ease, height .4s ease;
}

.navbar-toggler-icon::before {
    bottom: 10px;
}

.navbar-toggler-icon::after {
    top: 10px;
}

#nav-toggle:checked ~ #outer-wrapper .navbar-toggler .navbar-toggler-icon::before {
    transform: translateY(10px) rotate(45deg);
}

#nav-toggle:checked ~ #outer-wrapper .navbar-toggler .navbar-toggler-icon::after {
    transform: translateY(-10px) rotate(-45deg);
}

@media screen and (max-width: 1023px) {
    .content.content-header {
        margin-top: 86px;
    }

    #mainNav .nav-image {
        display: none;
    }

    #mainNav {
        width: 100vw;
        transform: none;
        background: var(--primary-color);
        padding-top: 0;
        padding-bottom: 100px;
        position: absolute;
        left: calc(-100vw - 20px);
        transition: all .4s ease-in-out;
    }

    html.nav-open #mainNav {
        transform: translateX(100vw);
        transition: all .4s ease-in-out;
    }

    .navbar-toggler {
        top: 26px;
    }

    #nav-toggle:checked ~ #outer-wrapper #inner-wrapper #mainHeader {
        transform: translateX(-100vw);
    }

    #mainHeader .header-inner {
        /* margin-top: 30px; */
        padding-top: 30px;
    }

    #nav-toggle:checked ~ #outer-wrapper #inner-wrapper {
        position: fixed;
        transform: translateX(100vw);
    }

    #mainNav ul.menu.nav-menu.menu-level-1 > li {
        position: relative;
        padding-bottom: 0;
    }

    #mainNav ul.menu.nav-menu.menu-level-1 > li:first-child > a {
        position: relative;
        width: 100%;
    }

    #mainNav .submenu-wrapper {
        background-color: transparent;
        position: relative;
        padding: 0 20px;
    }

    #mainNav ul.menu.nav-menu.menu-level-1 li:first-child .submenu-wrapper {
        left: 0;
    }

    #mainNav ul.menu.nav-menu.menu-level-1 li .submenu-wrapper {
        background-color: #FFF;
    }

    #mainNav ul.menu.nav-menu.menu-level-2 > li,
    #mainNav ul.menu.nav-menu.menu-level-2 > li:first-child,
    #mainNav ul.menu.nav-menu.menu-level-2 > li:last-child {
        padding: 0;
    }

    #mainNav .menu-level-2 > li.menu-item {
        flex-basis: 100%;
        max-width: 100%;
    }

    #mainNav ul.menu.nav-menu.menu-level-1 > li > a,
    #mainNav ul.menu.nav-menu.menu-level-1 > li > span:first-child {
        color: #FFF !important;
    }

    #mainNav input[type="checkbox"] {
        right: 11px;
        top: 17px;
        width: 27px;
    }

    #mainNav .menu-item.has--child-items > a ~ span.nav-toggler::after,
    #mainNav .menu-item.has--child-items > span ~ span.nav-toggler::after,
    .mobile-footer-top .menu-item.has--child-items > a ~ span.nav-toggler::after {
        top: 15px;
    }

    #mainNav ul.menu.nav-menu.menu-level-1 > li > a {
        padding: 15px 50px 15px 20px;
    }

    #mainNav ul.menu.nav-menu.menu-level-1 > li:first-child > a {
        padding: 15px 20px;
    }

    #mainNav .menu-level-2 > li a > .image + .label {
        font-weight: 400;
    }

    #mainNav ul.menu.nav-menu.menu-level-1 li a,
    .header-mobile-nav ul.menu.nav-menu.menu-level-1 li a,
    #mainNav ul.menu.nav-menu.menu-level-1 li > span:first-child,
    header-mobile-nav ul.menu.nav-menu.menu-level-1 li > span:first-child {
        color: #FFF;
    }

    #nav-toggle:checked ~ #outer-wrapper #overlay {
        opacity: 0;
    }

    .header #logo, .navbar-toggler, .navbar-toggler-icon, .toggleSubNav span,
    #outer-wrapper #inner-wrapper {
        transition: all .4s ease-in-out;
    }

    .navbar-toggler {
        width: 40px;
        transition: all .4s ease-in-out;;
    }

    #mainHeader .header-meta .langselect nav {
        left: 80px;
        top: calc(50% - 8px);
    }

    #nav-toggle:checked ~ #outer-wrapper #inner-wrapper .toptext {
        transform: none !important;
    }

    #mainNav .submenu-wrapper .menu-item.has--child-items > a ~ span.nav-toggler::after {
        right: 40px;
        top: 12px;
    }

    #mainNav .menu-level-2 input[type="checkbox"] {
        right: 34px;
    }

    #mainNav ul.menu.nav-menu.menu-level-2 > li.has--child-items > a {
        padding-right: 75px;
    }

    #mainNav ul.menu.nav-menu > li.has--child-items > input:not(:checked) ~ ul {
        display: none;
    }

    #mainNav ul.menu.nav-menu > li.has--child-items > input:checked ~ ul {
        display: block;
    }

    #mainHeader .header-meta .langselect {
        position: relative;
        top: 46px;
        left: -15px;
        z-index: 2;
    }

    #mainHeader #logo a {
        height: 35px;
    }

    #mainNav .submenu-wrapper {
        width: 100%;
    }

    #mainNav .submenu-wrapper .menu-item.has--child-items > a ~ span.nav-toggler::after {
        right: 0;
    }

    #mainNav .menu-level-2 input[type="checkbox"] {
        right: -5px;
    }

    #mainNav ul.menu.nav-menu.menu-level-2 > li.has--child-items > a {
        padding-right: 35px;
    }
}

@media screen and (min-width: 1024px) {
    .content.content-header {
        margin-top: 103px;
    }

    #mainHeader .header-meta .langselect nav {
        background-color: transparent;
    }

    #mainHeader .header-meta .langselect .language-navigation.language-menu div::after,
    #mainHeader .header-meta .langselect a {
        color: #565957 !important;
    }

    #mainHeader #mainNav ul.menu.nav-menu.menu-level-1 .submenu-wrapper {
        max-height: calc(100vh - 160px);
        overflow-y: scroll;
        overflow-x: hidden;
    }

    html:not(.nav-open) #mainHeader:not(.visible) {
        transform: translateY(-30px);
        transition: all .4s ease-in-out;
    }

    html:not(.nav-open) #mainHeader:not(.visible) #logo a {
        height: 32px;
        width: 175px;
        /* transition: width .4s ease, height .4s ease; */
        margin-bottom: 13px;
    }

    html:not(.nav-open) #mainHeader:not(.visible) ul.menu.nav-menu.menu-level-1 > li:first-child > a,
    html:not(.nav-open) #mainHeader:not(.visible) ul.menu.nav-menu.menu-level-1 > li > a {
        padding: 10px 23px;
    }

    html:not(.touch) #mainHeader #mainNav ul.menu.nav-menu.menu-level-1 li:hover .submenu-wrapper,
    html:not(.touch) #mainHeader #mainNav input:checked ~ .submenu-wrapper,
    #mainHeader #mainNav ul.menu.nav-menu.menu-level-1 > li > a.mobile-hovered ~ .submenu-wrapper {
        opacity: 1;
        transform: rotateX(0) translateZ(0);
        z-index: 100;
        /* min-width: 270px; */
    }
}

@media screen and (min-width: 1024px) and (pointer: coarse) {
    #mainNav input:not(:checked) ~ .submenu-wrapper {
        backface-visibility: hidden;
        opacity: 0;
        background-color: #FFF;
        transform: rotateX(-90deg);
        transform-style: preserve-3d;
        transform-origin: top center;
        transition: transform .5s cubic-bezier(.2, .7, .7, 1.3), opacity .1s .1s;
        position: absolute;
        top: calc(100% + 3px);
        z-index: 20;
    }

    #mainNav .submenu-wrapper {
        backface-visibility: hidden;
        opacity: 0;
        background-color: #FFF;
        transform: rotateX(-90deg);
        transform-style: preserve-3d;
        transform-origin: top center;
        transition: transform .5s cubic-bezier(.2, .7, .7, 1.3), opacity .1s .1s;
        position: absolute;
        top: calc(100% + 3px);
        z-index: 20;
        left: -20px;
        font-size: 17px;
        width: calc(100% + 40px);
    }

    #mainNav ul.menu.nav-menu.menu-level-1 > li > input.checkbox,
    #mainNav ul.menu.nav-menu.menu-level-1 > li > .nav-toggler,
    #mainNav ul.menu.nav-menu.menu-level-2 > li > input.checkbox,
    #mainNav ul.menu.nav-menu.menu-level-2 > li > .nav-toggler {
        display: none;
    }
}



@media screen and (max-width: 490px) {
    #mainHeader #logo a {
        width: 120px;
        height: 22px;
        margin-top: 8px;
        margin-bottom: 26px;
    }

    .navbar-toggler {
        left: 0;
    }

    #mainHeader .header-meta .langselect nav {
        padding: 0;
    }

    #mainHeader .header-meta .langselect {
        left: -25px;
    }

    #nav-toggle:checked ~ #outer-wrapper .navbar-toggler {
        transform: none;
    }
}

/* eof */