.megamenu{
    padding-top: 3rem;
    width: 100%; 
    position: relative;
}

.mainpage-input {
    display: none
}

.mainpage-body {
    font-family: 'GT Flexa';
    background-color: #870A64;    
}

.mainpage-title {
    font-family: 'GT Flexa';
    font-size: 96px;
    line-height: 96px;
    font-variation-settings: "wdth" 0, "wght" 700, "ital" 0;
    transition: font-variation-settings 1s cubic-bezier(0.22, 1, 0.36, 1), padding-right 1s cubic-bezier(0.22, 1, 0.36, 1); /*easeOutQuint*/
    display: block;
    text-transform: uppercase;
    cursor: pointer;
    display: block;
    position: relative;
    padding-right: 0%;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.mainpage-title:hover {
    color: #FAE100 !important;
    font-variation-settings: "wdth" 0, "wght" 275, "ital" 0;
    padding-right:28%;
}

.mainpage-input:checked + .mainpage-item .mainpage-title {
    display: block;
    color: #FAE100;
}

.mainpage-link-direct a:hover {
    color: #FAE100;
}

.mainpage-link-sub a {
    text-decoration: none;
    font-size: 50px;
    line-height: 58px;
    font-variation-settings: "wdth" 50, "wght" 500, "ital" 0;
    transition: font-variation-settings 1s cubic-bezier(0.22, 1, 0.36, 1);
    display: block;
    text-transform: uppercase;
}

.mainpage-link-sub a:hover {
    color: #FAE100;
    font-variation-settings: "wdth" 25, "wght" 275, "ital" 0;
}

.subpage a {
    text-decoration: none;
    font-size: 40px;
    line-height: 48px;
    font-variation-settings: "wdth" 50, "wght" 500, "ital" 0;
    transition: font-variation-settings 1s cubic-bezier(0.22, 1, 0.36, 1);
    display: block;
    padding-left: 20px;
    text-transform: uppercase;
}

.subpage a:hover {
    color: #FAE100;
    font-variation-settings: "wdth" 25, "wght" 275, "ital" 0;
}

@media only screen and (min-width: 1081px) {
    .mainpage-item {
        width: 50%;
    }

    .mainpage-body {
        font-family: 'GT Flexa';
        opacity: 1;
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        right: calc(-1 * var(--container-padding));
        top: 0;
        bottom: 0;
        width: 50%;
        transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), right 1s cubic-bezier(0.22, 1, 0.36, 1);
        padding-top: calc(var(--navbar-size) + 4rem);
        padding-left: 2rem;
        padding-right: 2rem;
        animation: subMenuIn 1s cubic-bezier(0.22, 1, 0.36, 1);
    }
}


@media only screen and (max-width: 1080px) {
    .megamenu {
        width: 100%;
        padding-top: 2rem;
    }

    .mainpage-title{
        font-size: 80px;
        line-height: 80px;
    }

    .mainpage-body {
        display: block;
        padding: 2rem;
        margin: 1rem 0;
        position: relative;
    }

    .mainpage-body.inactive {
        opacity: 0;
        right: -50%;
    }

    .mainpage-input:checked + .mainpage-item .mainpage-body {
        position: static;
        width: 100%;
        display: block;
    }

    .mainpage-link-sub a {
        font-size: 36px;
        line-height: 44px;
    }

    .subpage a {
        font-size: 26px;
        line-height: 32px;
    }
}


@media only screen and (max-width: 700px) {
    .mainpage-title {
        font-size: 60px;
        line-height: 60px;
    }

    .mainpage-body {
        padding: 1rem;
        margin: 0.5rem 0;
    }

    .mainpage-input:checked + .mainpage-item .mainpage-body {
        position: static;
        width: 100%;
        display: block;
    }

    .mainpage-link-sub a{
        font-size: 30px;
        line-height: 35px;
    }

    .subpage a {
        font-size: 25px;
        line-height: 30px;
    }
}

@keyframes subMenuIn {
    from {
        opacity: 0;
        right: -45%;
    }
    to {
        opacity: 1;
        right: calc(-1 * var(--container-padding));
    }
}