.navButton{cursor:pointer;overflow:hidden;position:relative;transition:color .3s}.navButton:after{background:#bfd4c2;bottom:0;content:"";height:1px;left:0;pointer-events:none;position:absolute;right:0;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.6,0,.2,1),color .3s}.navButton:hover:after{transform:scaleX(1);transform-origin:left}.navButton:hover{opacity:1;transition:color .3s}#checkbox{display:none}.toggle{cursor:pointer;display:block;height:31px;position:relative;width:30px}.bar{background:#000;border-radius:1.5px;color:inherit;height:4px;left:0;opacity:1;position:absolute;right:0;transition:none .35s cubic-bezier(.5,-.35,.35,1.5) 0s}.bar--top{bottom:calc(50% + 6.5px);transition-delay:.35s * .6;transition-property:bottom,transform}.bar--middle{top:calc(50% - 1.5px);transition-delay:.105s;transition-property:opacity,transform}.bar--bottom{top:calc(50% + 6.5px);transition-delay:0s;transition-property:top,transform}#checkbox:checked+.toggle .bar--top{bottom:calc(50% - 1.5px);transform:rotate(-135deg);transition-delay:0s}#checkbox:checked+.toggle .bar--middle{opacity:0;transform:rotate(-135deg);transition-delay:.105s}#checkbox:checked+.toggle .bar--bottom{top:calc(50% - 2px);transform:rotate(-225deg);transition-delay:.21s}