.menu-x, .menu-x:before, .menu-x:after{
    background-color: #372f37;
}

.menu-x,
.menu-x:after,
.menu-x:before {
    position: relative;
    width: 1.6em;
    height: 3px;
    margin: calc((1.6em - 3px) / 2) 0;
    border-radius: 2px;

    transition: background-color 333ms;
}

.menu-x:before {
    content: '';
    position: absolute;
    top: calc((1.6em - 3px) / -2);
    left: 0;
    right: 0;
    margin: 0;

    transition: transform 333ms;
    transform-origin: left 1.5px;
}

.menu-x:after {
    content: '';
    position: absolute;
    bottom: calc((1.6em - 3px) / -2);
    left: 0;
    right: 0;
    margin: 0;

    transition: transform 333ms;
    transform-origin: left 1.5px;
}


.modal.in + button .menu-x,
:not(.collapsed) > .menu-x {
    background-color: transparent;
}

.modal.in + button .menu-x:before,
:not(.collapsed) > .menu-x:before {
    transform: rotate(45grad) scaleX(1.35);
}

.modal.in + button .menu-x:after,
:not(.collapsed) > .menu-x:after {
    transform: rotate(-45grad) scaleX(1.35);
}