.menu-icon{width:100%;height:100%;display:block;position:relative}.menu-icon span{transform-origin:50%;background:#fff;border-radius:2px;outline:1px solid #0000;height:2px;transition:all .3s;position:absolute}.menu-icon span:first-child{width:80%;top:calc(50% - 11px);left:10%}.menu-icon span:nth-child(2){width:60%;top:50%;left:30%;transform:translateY(-50%)}.menu-icon span:nth-child(3){width:40%;top:calc(50% + 10px);left:50%}.menu-btn:hover .menu-icon span:nth-child(2),.menu-btn:hover .menu-icon span:nth-child(3){width:80%;left:10%}.menu-btn[data-open=true] .menu-icon span:first-child{top:50%;transform:translateY(-50%)rotate(-45deg)}.menu-btn[data-open=true] .menu-icon span:nth-child(2){opacity:0}.menu-btn[data-open=true] .menu-icon span:nth-child(3){width:80%;top:50%;left:10%;transform:translateY(-50%)rotate(45deg)}