/* 
    Created on : 10-Nov-2018, 11:28:38
    Author     : Atspulgs
*/
@charset "utf-8";
.burger {
    position: absolute;
    
    margin: 0px;
    border: none;
    border-radius: 5px;
    padding: 0px;
    width: 40px;
    height: 24px;
    background-color: transparent;
    cursor: pointer;
}
.burger:hover>div, .burger:hover>div::before, .burger:hover>div::after {
    background-color: var(--burger-bg-hover-color, #333);
}
.burger>div, .burger>div::before, .burger>div::after {
    display: block;
    position: absolute;
    
    margin: 0px;
    border: none;
    border-radius: 5px;
    padding: 0px;
    width: 40px;
    height: 4px;
    background-color: var(--burger-bg-color, #000);
    
    transition-property: background-color, transform;
    transition-delay: 0s;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: linear;
}
.burger>div {
    top: calc(50% - 2px);
}
.burger>div::before {
    content: "";
    top: -10px;
}
.burger>div::after {
    content: "";
    bottom: -10px;
}
.active>div::before {
    transform:translate3d(-9px,0,0) rotate(-45deg) scaleX(.7)
}
.active>div::after {
    transform:translate3d(-9px,0,0) rotate(45deg) scaleX(.7)
}