/* new menu toggler */
.menu-toggler {
    width: 2rem;
    height: 2.5rem;
    position: absolute;
    top: 0.25rem;
    right: 1rem;
    margin: 1rem auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.menu-toggler span {
    display: block;
    position: absolute;
    height: 0.3rem;
    width: 50%;
    background: var(--color-primary-light);
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.menu-toggler span:nth-child(even) {
    left: 50%;
    border-radius: 0 5px 5px 0;
}

.menu-toggler span:nth-child(odd) {
    left: 0px;
    border-radius: 5px 0 0 5px;
}

.menu-toggler span:nth-child(1), .menu-toggler span:nth-child(2) {
    top: 0;
}

.menu-toggler span:nth-child(3), .menu-toggler span:nth-child(4) {
    top: 0.75rem;
}

.menu-toggler span:nth-child(5), .menu-toggler span:nth-child(6) {
    top: 1.5rem;
}

.showit .menu-toggler span:nth-child(1),.showit .menu-toggler span:nth-child(6) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.showit .menu-toggler span:nth-child(2),.showit .menu-toggler span:nth-child(5) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.showit .menu-toggler span:nth-child(1) {
    left: 5px;
    top: 0.45rem;
}

.showit .menu-toggler span:nth-child(2) {
    left: calc(50% - 5px);
    top: 0.45rem;
}

.showit .menu-toggler span:nth-child(3) {
    left: -50%;
    opacity: 0;
}

.showit .menu-toggler span:nth-child(4) {
    left: 100%;
    opacity: 0;
}

.showit .menu-toggler span:nth-child(5) {
    left: 5px;
    top: 0.85rem;
}

.showit .menu-toggler span:nth-child(6) {
    left: calc(50% - 5px);
    top: 0.85rem;
}

/* new menu */
.main-menu__wrapper {
    position: relative;
    z-index: 100;
}

#mainmenu.showit .main-menu__dropdown {
    display: block;
    transform: translateX(0vw);
    bottom: initial;
    top: 67px;
    height: calc(100vh - 67px);
    left: 0px;
    overflow: scroll;
}

.main-menu.lockit {
    position: fixed;
    z-index: 400;
}

.header__logo {
    width: 100%;
    background: var(--color-tooltip);
    padding: 0.5rem 1rem;
}

.lockit .header__logo {
    position: fixed;
}

.header__logo div, .header__logo a {
    display: inline-block;
    margin-right: 0.5rem;
}

@media screen and (max-width: 1039px) {
    .main-menu__dropdown {
        position: fixed;
        top: -100vh;
        background: var(--color-primary-lightest);
        width: 100%;
        z-index: 99;
        opacity: 0;
        padding: 0;
        margin: 0;
    }

    .showit .main-menu__dropdown {
        top: 0;
        opacity: 1;
    }

    .main-menu__nav {
        display: grid;
        grid-column: 1/-1;
        font-size: var(--font-size-body);
        padding: 0 1rem 1rem;
        margin: 0;
        height: fit-content
    }

    .main-nav__item {
        display: flex;
        flex-direction: column;
        position: relative;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent
    }

    .main-nav__item:after {
        content: '';
        position: absolute;
        display: block;
        top: 100%;
        width: calc(100% + 2.5rem);
        left: -1.25rem;
        height: 1px;
        background: var(--mobile-nav-items-border)
    }

    .main-nav__item>a,.main-nav__nav>li>a {
        text-decoration: none;
        font-weight: var(--font-weight-links);
        color: var(--mobile-nav-link-color);
        font-size: var(--body-text);
        max-width: 80%
    }

    .main-menu__nav>li>a {
        display: flex;
        align-items: center;
        margin: 18px 0;
        font-size: 18px
    }

    .main-nav__subitem {
        padding: 0;
        max-height: 1000px;
        overflow: visible
    }

    .main-nav__nav,.main-nav__subitem {
        list-style-type: none
    }

    .main-nav__subitem>li:first-of-type>a {
        margin-top: .23rem
    }

    .main-nav__subitem>li:last-of-type>a {
        margin-bottom: 1.5rem
    }

    .main-nav__subitem a {
        display: flex;
        font-weight: 400;
        color: var(--mobile-nav-link-color);
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        margin-bottom: 12px;
        padding: .75rem;
        background: #fff;
        border: 1px solid #e5e7eb;
        box-sizing: border-box;
        box-shadow: 0px 10px 20px rgb(107 114 128/8%);
        border-radius: var(--border-radius);
        font-size: var(--body-text)
    }

    .main-nav__subitem a:active {
        background: var(--color-cta);
        color: #fff
    }

    .main-nav__subitem .main-nav__subitem a {
        text-decoration: none;
        color: var(--text-color-light);
        font-weight: 400;
        font-size: var(--font-size-caption-desktop)
    }

    .main-nav__subitem .main-nav__subitem li {
        margin-top: .5rem
    }

    .main-nav__subitem a:hover {
        text-decoration: underline;
        background-color: var(--mobile-nav-bg-accent-color)
    }

    .main-nav__item>.main-nav__subitem>.main-nav__item>ul {
        max-height: none;
        padding-left: .5rem
    }

    .main-nav__item>.main-nav__subitem>.main-nav__item>a {
        margin-top: 0
    }
}

.content-wrapper {
    margin-top: 2.5rem !important;
    padding: 0 1.25rem 0 !important;
}

.main-menu__nav li {
    list-style-type: none;
}

.main-menu__nav li a {
    color: var(--text-color-dark);
    text-decoration: none;
    font-weight: bold;
    font-size: var(--font-size-body);
}

.main-menu__nav svg {
    display: none;
}

@media screen and (min-width: 640px) {
    .main-menu__nav {
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-gap: 1rem;
    }

    .main-nav__item:after {
        width: 100%;
        left: 0rem;
    }
}

@media screen and (min-width: 1040px) {
    .header__logo {
        padding: 0.5rem calc((100vw - (1040px - 2.5rem))*0.5) !important;
    }

    .menu-toggler {
        display: none;
    }

    .main-menu__nav {
        max-width: 1040px;
        padding: 0.7rem calc((100vw - (1040px - 2.5rem))*0.5) 0rem;
        box-shadow: 0 0 10px #00000033;
        margin: 0;
        background: var(--color-primary-lightest);
        font-size: 1rem;
        display: grid;
        grid-template-columns: repeat(6, auto);
        grid-gap: 2.2rem;
        position: relative;
        z-index: 100;
    }

    .main-menu__nav svg {
        display: block;
        margin-top: .4rem;
        transform: scale(.75);
    }

    .main-nav__item:hover .main-nav__subitem {
        box-shadow: 0 0 10px #00000033;
        clip-path: inset( 0.1rem -1rem -1rem);
    }
}