.menu-box{border-radius:2px;box-shadow:1px 2px 10px 0 rgba(0,0,0,.3)}.menu-box .btn{-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;left:50%;margin:0;outline:none;overflow:visible;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.menu-box .btn span{background:var(--paragraphs);border-radius:3px;box-shadow:0 2px 10px 0 rgba(0,0,0,.3);display:block;height:4px;position:relative;transition:all .3s;width:100%}.menu-box .btn span+span{margin-top:5px}.menu-box .btn.active span:first-child{animation:top .7s ease forwards}.menu-box .btn.not-active span:first-child{animation:top-2 .7s ease forwards}.menu-box .btn.active span:nth-child(2){animation:scaled .7s ease forwards}.menu-box .btn.not-active span:nth-child(2){animation:scaled-2 .7s ease forwards}.menu-box .btn.active span:nth-child(3){animation:bottom .7s ease forwards}.menu-box .btn.not-active span:nth-child(3){animation:bottom-2 .7s ease forwards}@keyframes top{0%{top:0;transform:rotate(0)}50%{top:22px;transform:rotate(0)}to{top:7px;transform:rotate(45deg)}}@keyframes top-2{0%{top:7px;transform:rotate(45deg)}50%{top:22px;transform:rotate(0deg)}to{top:0;transform:rotate(0deg)}}@keyframes bottom{0%{bottom:0;transform:rotate(0)}50%{bottom:22px;transform:rotate(0)}to{bottom:11px;transform:rotate(135deg)}}@keyframes bottom-2{0%{bottom:7px;transform:rotate(135deg)}50%{bottom:22px;transform:rotate(0)}to{bottom:0;transform:rotate(0)}}@keyframes scaled{50%{transform:scale(0)}to{transform:scale(0)}}@keyframes scaled-2{0%{transform:scale(0)}50%{transform:scale(0)}to{transform:scale(1)}}