/* hamburger menu */

:root {
    --hamburger-color: #fff;
}

/* Hamburder */
#hamburger {
    position: absolute;
    top: 0;
    right: 1rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    /* visibility: hidden; */
    cursor: pointer;
}

#hamburger__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 4px;
    background: var(--hamburger-color);
    /* visibility: hidden; */
    border-radius: 64px;
    transition: all 0.25s;
}

#hamburger__icon::before,
#hamburger__icon::after {
    position: absolute;
    content: '';
    width: 90%;
    height: inherit;
    background: var(--hamburger-color);
    transition: all 0.25s;
    border-radius: 64px;
}

#hamburger__icon::before {
    transform: translateY(-8px);
}

#hamburger__icon::after {
    transform: translateY(8px);
}

#hamburger__icon.enable {
    transform: translateX(-70px);
    background: transparent;
    box-shadow: none;
}

#hamburger__icon.enable::before,
#hamburger__icon.enable::after {
    opacity: 1;
    margin-top: 0;
    background: var(--hamburger-color);
}

#hamburger__icon.enable::before {
    transform: rotate(-45deg) translate(50px, 50px);
    visibility: visible;
}

#hamburger__icon.enable::after {
    transform: rotate(45deg) translate(50px, -50px);
    visibility: visible;
}



#hamburger {
    /* display: none; */
}

@media screen and (max-width: 980px) {
    #hamburger {
        display: flex;
    }
}