@media screen and (min-width: 1024px) {
    .menu .hamburger {
        display: none;
    }
}

@media screen and (max-width: 1024px) {

/**** Position ****/
.menu .hamburger {
    position: relative;
}
.menu .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu .hamburger .checkbox {
    position: absolute;
    cursor: pointer;
}
.menu .hamburger .checkbox {
    width: 50px;
    height: 50px;
}
.menu .hamburger .checkbox {
    opacity: 0;
    appearance: none;
}

/**** Lines ****/
.menu .hamburger .lines {
    width: 40px;
    height: 2px;
}
.menu .hamburger .lines {
    background: #fff;
    border-radius: 50px;
}
.menu .hamburger .lines {
    transform: translateY(-50%);
    transition: all 0.4s ease;
}
.menu .hamburger .lines::before,
.menu .hamburger .lines::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: #fff;
    border-radius: 50px;
    transition: all 0.4s ease;
}
.menu .hamburger .lines::before {
    top: -12px;
}
.menu .hamburger .lines::after {
    top: 12px;
}
.menu .hamburger .checkbox:checked + .lines {
    background: transparent;
}
.menu .hamburger .checkbox:checked + .lines::before {
    top: 0;
    transform: rotate(45deg);
}
.menu .hamburger .checkbox:checked + .lines::after {
    top: 0;
    transform: rotate(-45deg);
}
       
}