.frame{position:absolute;top:50%;left:50%;width:400px;height:400px;margin-top:-200px;margin-left:-200px;border-radius:2px;box-shadow:1px 2px 10px 0px rgba(0,0,0,0.3);background:#3FAF82;color:#fff}.center{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.menu-icon{width:80px;height:52px;cursor:pointer;z-index:50}.menu-icon .line-1,.menu-icon .line-2,.menu-icon .line-3{height:8px;width:100%;background-color:#fff;border-radius:3px;box-shadow:0 2px 10px 0 rgba(0,0,0,0.3);transition:background-color .2s ease-in-out}.menu-icon .line-1{animation:animate-line-1-rev .7s ease-in-out}.menu-icon .line-2{margin:14px 0;animation:animate-line-2-rev .7s ease-in-out}.menu-icon .line-3{animation:animate-line-3-rev .7s ease-in-out}.menu-icon:hover .line-1,.menu-icon:hover .line-2,.menu-icon:hover .line-3{background-color:#fff}.menu-icon.active .line-1,.menu-icon.active .line-2,.menu-icon.active .line-3{background-color:#fff}.menu-icon.active .line-1{animation:animate-line-1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards}.menu-icon.active .line-2{animation:animate-line-2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards}.menu-icon.active .line-3{animation:animate-line-3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards}.no-animation{-webkit-animation:none !important;animation:none !important}@keyframes animate-line-1{0%{transform:translate3d(0, 0, 0) rotate(0deg)}50%{transform:translate3d(0, 22px, 0) rotate(0)}100%{transform:translate3d(0, 22px, 0) rotate(45deg)}}@keyframes animate-line-2{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}@keyframes animate-line-3{0%{transform:translate3d(0, 0, 0) rotate(0deg)}50%{transform:translate3d(0, -22px, 0) rotate(0)}100%{transform:translate3d(0, -22px, 0) rotate(135deg)}}@keyframes animate-line-1-rev{0%{transform:translate3d(0, 22px, 0) rotate(45deg)}50%{transform:translate3d(0, 22px, 0) rotate(0)}100%{transform:translate3d(0, 0, 0) rotate(0deg)}}@keyframes animate-line-2-rev{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes animate-line-3-rev{0%{transform:translate3d(0, -22px, 0) rotate(135deg)}50%{transform:translate3d(0, -22px, 0) rotate(0)}100%{transform:translate3d(0, 0, 0) rotate(0deg)}}