.hamburger {
    --rotate-time: .15s;
    --move-time: .1s;
}
.hamburger-row {
    padding: 1em 1.5em;
    display: flex;
    justify-content: space-between;
    /* background: url(../img/spsse-logo-70x70.svg) left 1em center / 45px no-repeat; */
}
.hamburger-nav {
    border-top: 1px solid #25211F;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid #25211F;
    border-bottom: 1px solid var(--black);
}
.hamburger-nav ul {
    margin: 0;
    padding: 0;
}
.hamburger-nav li {
    display: block;
    padding: 0 1em;
}
.hamburger-nav li:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.05);
}
.hamburger {
    width: 40px;
    height: 30px;
    position: relative;
}

.hamburger span {
    position: absolute;
    height: 6px;
    background: #25211F;
    background: var(--black);
    border-radius: 3px;
    left: 0;
    width: 100%;
    transform: rotate(0deg);
    transform-origin: center;
}

.hamburger label {
    position: absolute;
    left: 0;
    top:0;
    right: 0;
    bottom: 0;
    margin: 0;
    cursor: pointer;
}

.hamburger span:nth-child(1) { 
    top: 0px; 
    transition: top ease-in-out var(--move-time) var(--rotate-time), 
                transform var(--rotate-time);
}

.hamburger span:nth-child(2) { 
    top: 12px; 
    transition: visibility 0s var(--rotate-time); }
  
.hamburger span:nth-child(3) { 
    bottom: 0px; 
    transition: bottom ease-in-out var(--move-time) var(--rotate-time), 
                transform var(--rotate-time);
}

#hamburger-checkbox {
    position: absolute;
    visibility: hidden;
    z-index: -1;
}

.hamburger-nav ul {
    height: 0;
    overflow: hidden;
    transition: .25s ease-in-out;
}

.hamburger-nav li:first-child {
    display: none;
}

@media screen and (max-width: 759.9px) { 
    /* #hamburger-checkbox:checked + .hamburger-row {
        background-image: none;
    } */

    #hamburger-checkbox:checked + .hamburger-row .hamburger span:nth-child(1) {
        transform: rotate(45deg);
        top: 12px;
        transition: top ease-in-out var(--move-time), 
                    transform var(--rotate-time) var(--move-time);
    }

    #hamburger-checkbox:checked + .hamburger-row .hamburger span:nth-child(2) {
        visibility: hidden;
        transition: visibility 0s var(--move-time);
    }

    #hamburger-checkbox:checked + .hamburger-row .hamburger span:nth-child(3) {
        transform: rotate(-45deg);
        bottom: 12px;
        transition: bottom ease-in-out var(--move-time), 
                    transform var(--rotate-time) var(--move-time);
    }
    #hamburger-checkbox:checked ~ .hamburger-nav ul {
        height: calc(4 * 3.5em);
    }
}