.burger-icon {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin:8px auto;
}
.burger-icon, .burger-icon::before, .burger-icon::after {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #444;
    outline: 1px solid transparent;
    -webkit-transition-property: background-color, -webkit-transform;
    -moz-transition-property: background-color, -moz-transform;
    -o-transition-property: background-color, -o-transform;
    transition-property: background-color, transform;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.burger-icon::before, .burger-icon::after {
    position: absolute;
    content: "";
}
.burger-icon::before {
    top: -8px;
}
.burger-icon::after {
    top: 8px;
}
.menu-button.is-active .burger-icon {
    background-color: transparent;
}
.menu-button.is-active .burger-icon::before {
    -webkit-transform: translateY(8px) rotate(45deg);
    -moz-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    -o-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
}
.menu-button.is-active .burger-icon::after {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -moz-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    -o-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
}