/* GENERAL STYLES */

.hamburgerMobMain label.labelCheckbox4 {
    margin: 0;
}

.visuallyHidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.hamburger {
    width: 30px;
    height: 30px;
    position: relative;
}

.hamburger .bar {
    padding: 0;
    width: 30px;
    height: 4px;
    background-color: #fff;
    display: block;
    border-radius: 4px;
    transition: all 0.4s ease-in-out;
    position: absolute;
}

.bar1 {
    top: 0;
}

.bar2,
.bar3 {
    top: 13.5px;
}

.bar3 {
    right: 0;
}

.bar4 {
    bottom: 0;
}


/* HAMBURGER 4 */

.hamburger2 .bar2,
.hamburger3 .bar3,
.hamburger4 .bar4 {
    top: 13.5px;
}

.hamburger4 .bar5 {
    bottom: 0px;
}

.hamburger4 .bar {
    transition: all 0.4s ease-in-out, transform 0.4s ease-in-out 0.4s;
}

.hamburger4 .bar2 {
    width: 1px;
    transform: rotate(90deg);
    left: 13.5px;
}

.hamburger4 .bar3 {
    width: 1px;
    left: 13.5px;
}

.checkbox4:checked+label>.hamburger4>.bar1 {
    top: 13.5px;
    background-color: transparent;
}

.checkbox4:checked+label>.hamburger4>.bar2 {
    left: 0px;
    width: 30px;
    transform: rotate(45deg);
}

.checkbox4:checked+label>.hamburger4>.bar3 {
    left: 0;
    width: 30px;
    transform: rotate(-45deg);
}

.checkbox4:checked+label>.hamburger4>.bar4 {
    background-color: transparent;
}

.checkbox4:checked+label>.hamburger4>.bar5 {
    bottom: 13.5px;
    background-color: transparent;
}