.navbar-toggler .navbar-toggler-icon {
    margin: 10px 0 0;
}

.navbar-toggler-icon::before {
    bottom: 10px;
}
.navbar-toggler-icon::after {
    top: 10px;
}
#nav-toggle:checked ~ #outer-wrapper #logo,#nav-toggle:checked ~ #outer-wrapper #logo {
    /*transition: opacity 0.3s ease-in-out;*/
    transition: none;
    opacity:0;
    pointer-events: none;

}


#nav-toggle:checked ~ #outer-wrapper .navbar-toggler-icon::before, #nav-toggle:checked ~ #outer-wrapper .navbar-toggler-icon::after {
    background-color: var(--color-sherpa-blue);
}
#nav-toggle:checked ~ #outer-wrapper .navbar-toggler-icon::before {
    bottom:15px;
}
#nav-toggle:checked ~ #outer-wrapper .navbar-toggler-icon::after {
    top:15px;
}

/* toggle navi */
#nav-toggle {
    position: fixed;
    top: -100vh;
    left: -100vw;
}

.navbar-toggler {
    padding: 0;
    width: 25px;
    height: 30px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.navbar-toggler .navbar-toggler-label {
    display: none;
}

.navbar-toggler .navbar-toggler-icon {
    margin: 15px 0 0;
    position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
}

.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    display: block;
    background: var(--navbar-toggler-icon-color);
    height: 3px;
    transition: all .4s ease-in-out;
}

html:not(.touch) #nav-toggle:not(:checked) ~ #outer-wrapper .navbar-toggler:hover .navbar-toggler-icon,
html:not(.touch) #nav-toggle:not(:checked) ~ #outer-wrapper .navbar-toggler:hover .navbar-toggler-icon::before,
html:not(.touch) #nav-toggle:not(:checked) ~ #outer-wrapper .navbar-toggler:hover .navbar-toggler-icon::after {
    height: 4px;
}

html:not(.touch) #nav-toggle:not(:checked) ~ #outer-wrapper .navbar-toggler:hover .navbar-toggler-icon::before {
    transform: translateY(4px);
}

html:not(.touch) #nav-toggle:not(:checked) ~ #outer-wrapper .navbar-toggler:hover .navbar-toggler-icon::after {
    transform: translateY(-4px);
}

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

#nav-toggle:checked ~ #outer-wrapper .navbar-toggler .navbar-toggler-icon,
.touch #nav-toggle:checked + .navbar-toggler .navbar-toggler-icon {
    background: none;
}

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

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

#nav-toggle:checked ~ #outer-wrapper #inner-wrapper::after {
    content: "";
    box-shadow: 0 20px 50px #868686;
    width: 100%;
    position: absolute;
    top: -5vh;
    right: 0;
    bottom: -5vh;
}

#nav-toggle:checked ~ #outer-wrapper #content-area {
    overflow: hidden;
}

#mainNav li.has--child-items {
    position: relative;
}
#mainNav label[for*="subnavToggler"] {
    position: absolute;
    top: 0;
    right: 0;
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
    width: 14px;
}
#mainNav input[id*="subnavToggler"] {
    display: none;
}
#mainNav input[id*="subnavToggler"] ~ .submenu-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
#mainNav input[id*="subnavToggler"]:checked ~ .submenu-wrapper {
    max-height: 2000px;
}
#mainNav input[id*="subnavToggler"]:checked + label[for*="subnavToggler"] {
    transform: rotate(180deg);
    right: -8px;
}

@media screen and (max-width: 991px), (min-width: 992px) and (max-width: 1024px) {
    #root #mainHeader .header-inner #mainNav > nav > ul > li.current > a, #root #mainHeader .header-inner #mainNav > nav > ul > li.active > a:not {
        color: var(--color-sherpa-blue-80);
        text-decoration: underline;
        border-bottom: 1px solid var(--color-sherpa-blue-30);
    }
    #root #mainHeader .header-inner #mainNav > nav > li > ul > li:last-child{
        border-bottom: 2px solid deeppink;
    }

    #root #mainHeader .menu.nav-menu + .mobileFooter{
        margin-top: 30px;
        height: calc(100% + 35px);
    }

    #mainNav {
        top: calc(117px - 15px);
        background-color: white;
        width: calc(100% + 20px);
        height: inherit;
        transition: transform 0.3s ease;
    }
    #mainNav .main-navigation {
        display:block !important;
    }
    #mainNav label[for*="subnavToggler"] {
        width:38px;
        z-index: 10;
        top: 15px;
    }
    #mainNav .menu-level-2 label[for*="subnavToggler"] {
        top: 3px;
    }
    #mainNav label[for*="subnavToggler"] svg {
        fill: var(--color-sherpa-blue-80);
    }
    #nav-toggle:checked ~ #outer-wrapper #mainNav {
        transform: translateX(0);
    }
    #mainHeader .header-inner #mainNav nav > ul > li {
        margin-right: 0 !important;
        position: relative !important;
        border-bottom: 1px solid var(--color-sherpa-blue-30);
    }

    #mainHeader #mainNav .mobileFooter .footer-bottom-after li{
        border-bottom: none;
    }
    #mainHeader .header-inner .menues #mainNav nav > ul > li > .submenu-wrapper {
        padding: 0;
    }
    /*#mainHeader .header-inner .menues #mainNav nav > ul > li:hover > .submenu-wrapper {*/
    /*    padding: 0;*/
    /*    max-height:unset;*/
    /*}*/
    #mainHeader .header-inner #mainNav li, #mainHeader .header-inner #mainNav li a, #mainHeader .header-inner .menues #mainNav nav > ul {
        display: block;
    }
    #mainHeader .header-inner #mainNav > .main-navigation > .menu:first-child {
        padding: 0 20px;
    }
    #mainHeader .header-inner #mainNav li {
        margin-right: 0;
    }
    #mainHeader .header-inner .menues #mainNav .social-navigation ul,
    #mainHeader .header-inner .menues #mainNav .footer-bottom-after .imprint ul
    {
        display: flex;
        flex-direction: row;
    }
    #mainHeader .header-inner .menues #mainNav .footer-bottom-after ul li a,
    #mainHeader .header-inner .menues #mainNav .socialMedia ul li a {
        color: #fff;
    }
    #mainHeader .header-inner .menues #mainNav .footer-bottom-after .imprint ul li a{
        border-bottom: none;
        color: #fff;
        font-weight: 300;
        font-size: 16px;
    }
    #mainHeader .header-inner .menues #mainNav nav > ul label, #mainHeader .header-inner .menues #mainNav nav ul label {
        visibility: visible;
        height: 38px;
    }
    #mainHeader .header-inner .menues #mainNav nav > ul > li > .submenu-wrapper {
        position: static;
        width:auto;
        transform: none;
    }
    #mainHeader .header-inner .menues #mainNav nav > ul > li > .submenu-wrapper > ul {
        display: block;
    }
    #mainHeader .header-inner .menues #mainNav nav ul .submenu-wrapper ul ul {
        max-height:0;
        transition: max-height 0.3s ease-in-out;
        overflow: hidden;
    }
    #mainHeader .header-inner .menues #mainNav nav ul input:checked ~ .submenu-wrapper,
    #mainHeader .header-inner .menues #mainNav nav input:checked ~ ul,
    #mainNav input[id*="subnavToggler"]:checked ~ .submenu-wrapper {
        max-height: 9000px !important;
    }
    #mainNav input[id*="subnavToggler"] {
        display: none;
    }
    #nav-toggle:checked ~ #outer-wrapper #inner-wrapper {

        transform: none;
    }


    #mainHeader .header-inner .menues #mainNav nav ul input:checked ~ a {
        text-decoration: underline;
        border-bottom: 1px solid var(--color-sherpa-blue-30);
    }
    #mainHeader .header-inner .menues #mainNav nav ul ul input:checked ~ a {
        color: var(--color-orange);
    }
    #mainHeader .header-inner #mainNav nav ul li a {
        display: flex;
    }
    #mainHeader .header-inner #mainNav nav > ul > li > a {
        color: var(--color-sherpa-blue-80);
        position: relative;
        z-index:1;
        font-weight: 700;
    }
    #mainHeader .header-inner #mainNav nav > ul > li > .submenu-wrapper > ul > li > ul {
        background-color: var(--color-sherpa-blue-10);
        border-bottom: 1px solid var(--color-sherpa-blue-30);
    }

    #mainHeader .header-inner .menues #mainNav nav > ul > li > .submenu-wrapper > ul > li > a {
        font-size: 16px;
        line-height: 1.2em;
        display: flex;
        margin-bottom: 0;
        font-weight: 600;
    }
    #mainHeader .header-inner .menues #mainNav nav > ul > li > .submenu-wrapper > ul > li > ul > li > a {
        color: var(--color-sherpa-blue);
        font-size: 16px !important;
        line-height: 20px;
        padding-left: 20px !important;
        border-bottom: 1px solid var(--color-sherpa-blue-30);
    }

    #mainHeader .header-inner #mainNav nav > ul > li > .submenu-wrapper > ul > li:last-child > ul, #mainHeader .header-inner .menues #mainNav nav > ul > li > .submenu-wrapper > ul > li > ul > li:last-child > a{
        border-bottom: none;
    }

    #mainHeader .menues .menu-level-3 li.menu-item:first-child {
        margin-top: 0;
    }
    #mainHeader .menues .menu-level-3 li.menu-item {
        margin-bottom: 0;
    }
    #mainHeader nav ul li a {
        padding: 15px 0 !important;
    }
}
@media screen and (max-width: 550px) {
    #mainNav {
        top: calc(93px - 15px);
        height: calc(100vh - 100px);
    }
}