:root {
    --font-size: 0.5em;
    --color1: #fff;
    --borderRadius: 1em;
}

.burger {
    font-size: var(--font-size);
    cursor: pointer;
    padding: 3em 1.5em;
    margin-right: 10px;
    display: none;
}

.burger:after {
    display: none;
}

@media (max-width: 991px) {
    .burger {
        display: inline-block;
    }
}

.burger>div {
    width: 4em;
    height: 0.5em;
    border-radius: var(--borderRadius);
    background: var(--color1);
}

.nav-scroll .burger>div,
.nav-scroll .burger>div::before,
.nav-scroll .burger>div::after {
    background: #4d004b;
}

.burger>div::before,
.burger>div::after {
    transition: font-size 0s;
    content: "";
    display: block;
    position: absolute;
    width: 4em;
    height: 0.5em;
    background: var(--color1);
    border-radius: var(--borderRadius);
}

.burger>div::before {
    margin-top: -1.5em;
}

.burger>div::after {
    margin-top: 1.5em;
}

.burger1 {
    transition: all 0.7s, font-size 0s;
    transition-timing-function: cubic-bezier(0.68, -0.35, 0.265, 1.35);
}

.burger1>div {
    transition: all 0.1s 0.3s, font-size 0s;
}

.burger1>div::before,
.burger1>div::after {
    transition: all 0.3s 0.2s, font-size 0s;
}

.burger1.toggled {
    transform: rotate(180deg);
}

.burger1.toggled>div::before {
    transform: rotate(45deg) translate(1.1em, 1em);
}

.burger1.toggled>div {
    background: transparent;
}

.burger1.toggled>div::after {
    transform: rotate(-45deg) translate(1.1em, -1em);
}

.burger2>div {
    transition: background 0.4s, font-size 0s;
}

.burger2>div::before,
.burger2>div::after {
    transition: font-size 0s;
    transform-origin: center center;
}

.burger2.toggled>div::before {
    -webkit-animation: burg2top 0.4s linear forwards;
    animation: burg2top 0.4s linear forwards;
}

.burger2.toggled>div {
    background: transparent;
}

.burger2.toggled>div::after {
    -webkit-animation: burg2bottom 0.4s linear forwards;
    animation: burg2bottom 0.4s linear forwards;
}

.burger2.unToggled>div::before {
    -webkit-animation: burg2topReset 0.4s linear forwards;
    animation: burg2topReset 0.4s linear forwards;
}

.burger2.unToggled>div {
    background: var(--color1);
}

.burger2.unToggled>div::after {
    -webkit-animation: burg2bottomReset 0.4s linear forwards;
    animation: burg2bottomReset 0.4s linear forwards;
}

@-webkit-keyframes burg2top {
    20% {
        margin-top: 0em;
        transform: rotate(0deg);
    }
    60% {
        margin-top: 0em;
        transform: rotate(55deg);
    }
    100% {
        margin-top: 0em;
        transform: rotate(45deg);
    }
}

@keyframes burg2top {
    20% {
        margin-top: 0em;
        transform: rotate(0deg);
    }
    60% {
        margin-top: 0em;
        transform: rotate(55deg);
    }
    100% {
        margin-top: 0em;
        transform: rotate(45deg);
    }
}

@-webkit-keyframes burg2bottom {
    20% {
        margin-top: 0em;
        transform: rotate(0deg);
    }
    60% {
        margin-top: 0em;
        transform: rotate(-55deg);
    }
    100% {
        margin-top: 0em;
        transform: rotate(-45deg);
    }
}

@keyframes burg2bottom {
    20% {
        margin-top: 0em;
        transform: rotate(0deg);
    }
    60% {
        margin-top: 0em;
        transform: rotate(-55deg);
    }
    100% {
        margin-top: 0em;
        transform: rotate(-45deg);
    }
}

@-webkit-keyframes burg2topReset {
    0% {
        margin-top: 0em;
        transform: rotate(45deg);
    }
    20% {
        transform: rotate(0deg);
    }
    60% {
        margin-top: 1.7em;
        transform: rotate(0deg);
    }
    100% {
        margin-top: 1.5em;
        transform: rotate(0deg);
    }
}

@keyframes burg2topReset {
    0% {
        margin-top: 0em;
        transform: rotate(45deg);
    }
    20% {
        transform: rotate(0deg);
    }
    60% {
        margin-top: 1.7em;
        transform: rotate(0deg);
    }
    100% {
        margin-top: 1.5em;
        transform: rotate(0deg);
    }
}

@-webkit-keyframes burg2bottomReset {
    0% {
        margin-top: 0em;
        transform: rotate(-45deg);
    }
    20% {
        transform: rotate(0deg);
    }
    60% {
        margin-top: -1.7em;
        transform: rotate(0deg);
    }
    100% {
        margin-top: -1.5em;
        transform: rotate(0deg);
    }
}

@keyframes burg2bottomReset {
    0% {
        margin-top: 0em;
        transform: rotate(-45deg);
    }
    20% {
        transform: rotate(0deg);
    }
    60% {
        margin-top: -1.7em;
        transform: rotate(0deg);
    }
    100% {
        margin-top: -1.5em;
        transform: rotate(0deg);
    }
}

.burger3 {
    transition: all 0.7s, font-size 0s;
    transition-timing-function: cubic-bezier(0.68, 0, 0.265, 1.25);
}

.burger3>div {
    transition: all 0.5s, font-size 0s;
}

.burger3>div::before,
.burger3>div::after {
    transition: all 0.4s 0.2s, font-size 0s;
    transform-origin: left top;
}

.burger3.toggled {
    transform: rotate(180deg);
}

.burger3.toggled>div::before {
    width: 3em;
    transform: rotate(-45deg) translate(-1.4em, 1.1em);
}

.burger3.toggled>div::after {
    width: 3em;
    transform: rotate(45deg) translate(-1em, -1.2em);
}

.burger4>div {
    transition: all 0.4s, font-size 0s;
}

.burger4>div::before,
.burger4>div::after {
    transition: font-size 0s;
    transform-origin: center center;
}

.burger4.toggled>div::before {
    -webkit-animation: burg4top 0.4s linear forwards;
    animation: burg4top 0.4s linear forwards;
}

.burger4.toggled>div {
    -webkit-animation: burg4 0.4s linear forwards;
    animation: burg4 0.4s linear forwards;
}

.burger4.toggled>div::after {
    -webkit-animation: burg4bottom 0.4s linear forwards;
    animation: burg4bottom 0.4s linear forwards;
}

.burger4.unToggled>div::before {
    -webkit-animation: burg4topReset 0.4s linear forwards;
    animation: burg4topReset 0.4s linear forwards;
}

.burger4.unToggled>div {
    background: var(--color1);
    -webkit-animation: burg4reset 0.4s linear forwards;
    animation: burg4reset 0.4s linear forwards;
}

.burger4.unToggled>div::after {
    -webkit-animation: burg4bottomReset 0.4s linear forwards;
    animation: burg4bottomReset 0.4s linear forwards;
}

@-webkit-keyframes burg4 {
    50% {
        transform: rotate(0deg);
        background: var(--color1);
    }
    100% {
        transform: rotate(360deg);
        background: #f0ffff00;
    }
}

@keyframes burg4 {
    50% {
        transform: rotate(0deg);
        background: var(--color1);
    }
    100% {
        transform: rotate(360deg);
        background: #f0ffff00;
    }
}

@-webkit-keyframes burg4top {
    50% {
        margin-top: 0;
        transform: rotate(0deg);
    }
    100% {
        margin-top: 0;
        transform: rotate(45deg);
    }
}

@keyframes burg4top {
    50% {
        margin-top: 0;
        transform: rotate(0deg);
    }
    100% {
        margin-top: 0;
        transform: rotate(45deg);
    }
}

@-webkit-keyframes burg4bottom {
    50% {
        margin-top: 0;
        transform: rotate(0deg);
    }
    100% {
        margin-top: 0;
        transform: rotate(-45deg);
    }
}

@keyframes burg4bottom {
    50% {
        margin-top: 0;
        transform: rotate(0deg);
    }
    100% {
        margin-top: 0;
        transform: rotate(-45deg);
    }
}

@-webkit-keyframes burg4reset {
    0% {
        transform: rotate(0deg);
        background: #f0ffff00;
    }
    50% {
        transform: rotate(0deg);
        background: #f0ffff00;
    }
    100% {
        transform: rotate(-360deg);
        background: #f0ffff;
    }
}

@keyframes burg4reset {
    0% {
        transform: rotate(0deg);
        background: #f0ffff00;
    }
    50% {
        transform: rotate(0deg);
        background: #f0ffff00;
    }
    100% {
        transform: rotate(-360deg);
        background: #f0ffff;
    }
}

@-webkit-keyframes burg4topReset {
    0% {
        transform: rotate(45deg);
        margin-top: 0;
    }
    50% {
        transform: rotate(0deg);
        margin-top: 0em;
    }
    100% {
        transform: rotate(0deg);
        margin-top: 1.5em;
    }
}

@keyframes burg4topReset {
    0% {
        transform: rotate(45deg);
        margin-top: 0;
    }
    50% {
        transform: rotate(0deg);
        margin-top: 0em;
    }
    100% {
        transform: rotate(0deg);
        margin-top: 1.5em;
    }
}

@-webkit-keyframes burg4bottomReset {
    0% {
        transform: rotate(-45deg);
        margin-top: 0;
    }
    50% {
        margin-top: 0;
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
        margin-top: -1.5em;
    }
}

@keyframes burg4bottomReset {
    0% {
        transform: rotate(-45deg);
        margin-top: 0;
    }
    50% {
        margin-top: 0;
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
        margin-top: -1.5em;
    }
}