.menuWrapper{z-index:0;width:50px;height:50px;position:relative}#menuButton{z-index:0;cursor:pointer;width:50px;height:50px;display:block;position:relative;overflow:hidden}#menuButton span,#menuButton:before,#menuButton:after{background:#fff;width:36px;height:4px;margin:auto;display:block;position:absolute;inset:0}#menuButton span{z-index:1;color:#fff;overflow:hidden}#menuButton:before{z-index:2;content:"";transform:translateY(-12px)}#menuButton:after{z-index:2;content:"";transform:translateY(12px)}@keyframes lineTop{50%{transform:translate(0)}to{transform:rotate(45deg)}}@keyframes lineMiddle{50%,to{opacity:0}}@keyframes lineBottom{50%{transform:translate(0)}to{transform:rotate(-45deg)}}#menuButton.active span{animation:.25s step-end forwards lineMiddle}#menuButton.active:before{animation:.25s forwards lineTop}#menuButton.active:after{animation:.25s forwards lineBottom}#menuButton.default span{animation:.25s step-end reverse lineMiddle}#menuButton.default:before{animation:.25s reverse lineTop}#menuButton.default:after{animation:.25s reverse lineBottom}