#main-toggle{position:relative;box-sizing:border-box;display:block;border:0px solid #000;width:40px;height:38px;margin:0;padding:0 9px;border-radius:3px;background:#000}
#main-toggle span, #main-toggle span:before, #main-toggle span:after {cursor: pointer;border-radius:2px;height:2px;width:22px;background: #FFF;position:absolute;display:block;content:"";top:12px
}
#main-toggle span:before{top:7px; background:#FFF}
#main-toggle span:after{top:14px}
#main-toggle span, #main-toggle span:before, #main-toggle span:after{transition: all 500ms ease-in-out}
#main-toggle.active span{background-color: transparent}
#main-toggle.active span:before, #main-toggle.active span:after{top:6px}
#main-toggle.active span:before{transform: rotate(45deg);background: #FF0000}
#main-toggle.active span:after{transform: rotate(-45deg);background: #FF0000}
#sub-toggle{position:relative;box-sizing:border-box;display:block;width:40px;height:38px;margin:0;padding:0;border-radius:3px;background:#000}
#sub-toggle:before{position:absolute;top:8px;left:8px;width:8px;height:8px;background:#FFF;content:"";}
#sub-toggle:after{position:absolute;top:8px;left:24px;width:8px;height:8px;background:#FFF;content:"";}
#sub-toggle span:before{position:absolute;top:22px;left:8px;width:8px;height:8px;background:#FFF;content:"";}
#sub-toggle span:after{position:absolute;top:22px;left:24px;width:8px;height:8px;background:#FFF;content:"";}
#sub-toggle:before, #sub-toggle:after, #sub-toggle span:before, #sub-toggle span:after{transition: all 500ms ease-in-out}
#sub-toggle.active:before{width:20px;height:2px;transform:rotate(45deg);background: #FF0000;top:18px;left:10px}
#sub-toggle.active:after{display:none}
#sub-toggle.active span:before{width:20px;height:2px;transform: rotate(-45deg);background: #FF0000;top:18px;left:10px}
#sub-toggle.active span:after{display:none}