body.change {
    overflow-y: hidden;
}

.menu-hamburger-wrapper {
    width: 60px;
    height: 60px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.menu-hamburger {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.change.menu-hamburger {
    background: white;
}

.change.menu-hamburger:hover .hamburger {
    /* transform: rotate(90deg); */
    transform: rotate(0deg);
    transition-duration: var(--dur);
    /* transition-delay: var(--dur); */
}

.change .hamburger {
    transform: rotate(90deg);
    transition-duration: var(--dur);
}

.hamburger {
    width: 28px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bar {
    background: #333333;
    /* background: linear-gradient(to right, #909090 50%, #cccccc 50%); */
    width: 100%;
    height: 2px;
}

.change .bar.top, .change .bar.bottom {
    animation-name: anim-menu-hamburger-open;
    animation-duration: var(--dur);
    animation-fill-mode: forwards;
}

.bar.center {
    transition-delay: calc(var(--dur) * .75);
    visibility: visible;
    transform: visibility;
}

.change .bar.center {
    transition-delay: calc(var(--dur) * .25);
    visibility: hidden;
    transform: visibility;
}

/* Ver porque não posso usar aqui o selector 'bar.top' e 'bar.bottom' */

/* faz a animação no load, ignora o '.no-animation' */

.top, .bottom {
    animation-name: anim-menu-hamburger-close;
    animation-duration: var(--dur);
    /* animation-fill-mode: forwards; */
}

.bar.top {
    --dirY: 9px;
    --deg: 45deg;
}

.bar.bottom {
    --dirY: -9px;
    --deg: -45deg;
}

@keyframes anim-menu-hamburger-open {
    0% {}
    25% {
        transform: translate(0px, var(--dirY));
    }
    50% {
        transform: translate(0px, var(--dirY)) rotate(var(--deg));
    }
    100% {
        transform: translate(0px, var(--dirY)) rotate(calc(var(--deg) + 180deg));
    }
}

@keyframes anim-menu-hamburger-close {
    0% {
        transform: translate(0px, var(--dirY)) rotate(calc(var(--deg) + 180deg));
    }
    50% {
        transform: translate(0px, var(--dirY)) rotate(var(--deg));
    }
    75% {
        transform: translate(0px, var(--dirY)) rotate(0);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

.menu-hamburger-overlay {
    /* position: absolute; */
    top: 80px;
    left: -300px;
    position: fixed;
    width: 300px;
    background: white;
    box-shadow: -1px 5px 6px rgba(0, 0, 0, 0.3);
    transition-duration: var(--dur);
    /* transform: translate(0px, 0px);  */
}

.menu-hamburger-overlay ul {
    list-style-type: none;
}

.change .menu-hamburger-overlay {
    transform: translate(300px, 0px);
    transition-duration: var(--dur);
}

.blocker {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* overflow: auto; */
    background-color: black;
    opacity: .7;
}

.change.blocker {
    display: block;
}

.no-animation {
    animation: none;
}

.menu-hamburger-overlay {
    padding: 8px;
}

.menu-hamburger-overlay a {
    display: block;
    padding: 16px 8px;
    text-decoration: none;
    color: black;
    font-size: 18px;
}

.menu-hamburger-overlay a:hover {
    background: #909090;
    color: white;
}

.menu-hamburger-wrapper {
    display: none;
}

#page-1 .menu-hamburger-overlay .page-1>a, 
#page-2 .menu-hamburger-overlay .page-2>a, 
#page-3 .menu-hamburger-overlay .page-3>a, 
#page-5 .menu-hamburger-overlay .page-5>a {
    text-decoration: none;
    border-bottom: none;
    color: darkorange;
} 


@media only screen and (max-width: 811px) {
    .menu-hamburger-wrapper {
        display: block;
    }
}