.hamburger {
    display: none;
}

@media (min-width: 480px) and (max-width: 770px) {
    .hamburger {
        display: block;
        width: 40px;
        height: 35px;
        border: 0;
        border-top: 5px solid black;
        background: transparent;
        position: absolute;;
        left: 4vw;
        top: 4vw;
        transition: 0.3s transform linear;
    }
    .hamburger::before,
    .hamburger::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border-top: 5px solid black;
        transform: translateY(10px);
    }

    .hamburger::after {
        transform: translateY(25px);
        transition: .3s transform linear;
        opacity: 1;
    }

    .hamburgerClicked {
        transform: rotate(45deg) translateY(-5px);
        border: none;
    }

    .hamburgerClicked::after {
        transform: rotate(-90deg) translateX(-10px);
    }    
}

@media (min-width: 320px) and (max-width: 479px) {

    .hamburger {
        display: block;
        width: 40px;
        height: 35px;
        border: 0;
        border-top: 5px solid black;
        background: transparent;
        position: absolute;;
        left: 4vw;
        top: 4vw;
        transition: 0.3s transform linear;
    }

    .hamburger::before,
    .hamburger::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border-top: 5px solid black;
        transform: translateY(10px);
    }

    .hamburger::after {
        transform: translateY(25px);
        transition: .3s transform linear;
        opacity: 1;
    }

    .hamburgerClicked {
        transform: rotate(45deg) translateY(-5px);
        border: none;
    }

    .hamburgerClicked::after {
        transform: rotate(-90deg) translateX(-10px);
    }
}