.hamburger{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}.hamburger>div{position:relative;width:100%;height:100%}.hamburger-line{position:absolute;left:0;width:100%;height:2px;background-color:currentColor;transition:all .3s ease-in-out}.hamburger-line:nth-child(1){top:15%}.hamburger-line:nth-child(2){top:50%;transform:translateY(-50%)}.hamburger-line:nth-child(3){bottom:15%}.hamburger.active .hamburger-line:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}.hamburger.active .hamburger-line:nth-child(2){opacity:0}.hamburger.active .hamburger-line:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}