.open{position:absolute;top:1.5rem;right:1rem;width:60px;height:60px;display:block;cursor:pointer;z-index:999;background:rgba(255,255,255,.8);border-radius:5px}.open span:nth-child(1){background-color:#000}.open span{display:block;float:left;clear:both;height:4px;width:40px;border-radius:40px;background-color:#000;position:absolute;right:10px;top:3px;overflow:hidden;transition:all .8s ease}.open span:nth-child(1){margin-top:10px;z-index:9}.open span:nth-child(2){margin-top:25px}.open span:nth-child(3){margin-top:40px}.sub-menu{height:0;width:0;right:0;top:0;position:absolute;z-index:18;overflow:hidden}.sub-menu li{display:inline-block;height:auto;margin-right:-160px}.sub-menu li a{color:#424242;font-family:'IBM Plex Mono',monospace;font-size:20px;width:100%;display:block;float:left;line-height:25px;text-decoration:none;text-shadow:1px 1px 1px #fff}.oppenned .sub-menu{opacity:1;width:auto}.oppenned span:nth-child(2){overflow:visible}.oppenned span:nth-child(1),.oppenned span:nth-child(3){z-index:100;transform:rotate(45deg)}.oppenned span:nth-child(1){transform:rotate(45deg) translateY(12px) translateX(12px)}.oppenned span:nth-child(2){right:5rem;top:-1rem;width:60rem;background:0 0}.oppenned span:nth-child(3){transform:rotate(-45deg) translateY(-10px) translateX(10px)}.oppenned li{margin-right:0}@keyframes updown{0%,100%,50%{transform:translatey(0)}20%{transform:translatey(5px)}25%{transform:translatey(-20px)}30%{transform:translatey(20px)}35%{transform:translatey(-5px)}}.sub-menu{display:inline-table}.sub-menu li{margin-right:3rem}