#sandwich {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 25px;
    right: 0;
    margin: auto;
    z-index: 50;
}
.sw-topper {
    position: relative;
    top: 0;
    width: 32px;
    height: 3px;
    background: #fff;
    border: none;
    border-radius: 4px 4px 4px 4px;
    transition: transform 0.5s, top 0.2s;
    /* transition-delay: 0.2s, 0s; */
}
.sw-bottom {
    position: relative;
    width: 32px;
    height: 3px;
    top: 10px;
    background: #fff;
    border: none;
    border-radius: 4px 4px 4px 4px;
    transition: transform 0.5s, top 0.2s;
    transition-delay: 0.2s, 0s;
}
.sw-footer {
    position: relative;
    width: 32px;
    height: 3px;
    top: 20px;
    background: #fff;
    border: none;
    border-radius: 4px 4px 4px 4px;
    transition: all 0.5s;
    transition-delay: 0.1s;
}
#sandwich.active .sw-topper {
    top: 12px;
    transform: rotate(140deg);
}
#sandwich.active .sw-bottom {
    top: 9px;
    transform: rotate(-140deg);
}
#sandwich.active .sw-footer {
    opacity: 0;
    top: 0;
    transform: rotate(180deg);
}