.hamburger{cursor:pointer;display:inline-block}.hamburger.box{background:#333;padding:6px;border-radius:4px}.hamburger.box .bar{background:white;width:26px;height:2px;margin:5px auto}.bar{display:block;height:3px;width:30px;background:#333;margin:5px auto}.hamburger{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.hamburger:not(.box):hover .bar{background-color:#f92c8c}.hamburger:not(.box).is-active .bar{background-color:#f92c8c}.hamburger.box:hover{background:#f92c8c}.hamburger.box.is-active{background:#f92c8c}.bar{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.hamburger.is-active .top{-webkit-transform:translateY(8px) rotateZ(45deg);-moz-transform:translateY(8px) rotateZ(45deg);-ms-transform:translateY(8px) rotateZ(45deg);-o-transform:translateY(8px) rotateZ(45deg);transform:translateY(8px) rotateZ(45deg)}.hamburger.is-active .bottom{-webkit-transform:translateY(-8px) rotateZ(-45deg);-moz-transform:translateY(-8px) rotateZ(-45deg);-ms-transform:translateY(-8px) rotateZ(-45deg);-o-transform:translateY(-8px) rotateZ(-45deg);transform:translateY(-8px) rotateZ(-45deg)}.hamburger.is-active .middle{width:0}.hamburger.box.is-active .top{-webkit-transform:translateY(7px) rotateZ(45deg);-moz-transform:translateY(7px) rotateZ(45deg);-ms-transform:translateY(7px) rotateZ(45deg);-o-transform:translateY(7px) rotateZ(45deg);transform:translateY(7px) rotateZ(45deg)}.hamburger.box.is-active .bottom{-webkit-transform:translateY(-7px) rotateZ(-45deg);-moz-transform:translateY(-7px) rotateZ(-45deg);-ms-transform:translateY(-7px) rotateZ(-45deg);-o-transform:translateY(-7px) rotateZ(-45deg);transform:translateY(-7px) rotateZ(-45deg)}