.hamburger {
font-size: 30px;
display: inline-block;
width: 1em;
height: 1em;
padding: 0;
cursor: pointer;
transition: transform .2s ease-in-out;
vertical-align: middle;
border: 0 none;
background: transparent;
} .hamburger::-moz-focus-inner {
padding: 0;
border: 0 none;
} .hamburger:focus {
outline: 0;
}
.hamburger:before,
.hamburger:after {
content: "";
}
.hamburger:before,
.hamburger .icon,
.hamburger:after {
display: block;
width: 100%;
height: .2em;
margin: 0 0 .2em;
transition: transform .2s ease-in-out;
border-radius: .025em;
background: #fff;
} .hamburger.active:before,
.hamburger.active .icon,
.hamburger.active:after {
background: #fff;
} .hamburger.hamburger-cancel.active .icon {
transform: scale(0);
}
.hamburger.hamburger-cancel.active:before {
transform: translateY(.4em) rotate(135deg);
}
.hamburger.hamburger-cancel.active:after {
transform: translateY(-.4em) rotate(-135deg);
}