.wrapper{display:flex;justify-content:center;align-items:center;position:absolute;top:0;right:-100%;height:100vh;width:100%;background:#000;z-index:2;transition:all 1s ease-in-out}#active:checked~.wrapper{right:0}.menu-btn{position:relative;z-index:3;width:50px;height:40px;text-align:center;line-height:50px;font-size:20px;cursor:pointer;transition:all 0.3s ease-in-out}.menu-btn span,
.menu-btn:before,
.menu-btn:after{content:"";position:absolute;left:0;top:calc(50% - 1px);width:100%;border-bottom:5px solid #FFF;transition:transform .6s cubic-bezier(0.215,0.61,0.355,1)}.menu-btn:before{transform:translateY(-12px)}.menu-btn:after{transform:translateY(12px)}.close{z-index:1;width:100%;height:100%;pointer-events:none;transition:background .6s}#active:checked+.menu-btn span{transform:scaleX(0)}#active:checked+.menu-btn:before{transform:rotate(45deg);border-color:#fff}#active:checked+.menu-btn:after{transform:rotate(-45deg);border-color:#fff}.wrapper ul{list-style:none;text-align:center;padding:0px}.wrapper ul li{height:10%;margin:15px 0}.wrapper ul li a{text-decoration:none;font-size:30px;font-weight:500;padding:5px 30px;color:#fff;line-height:50px;margin:5px 30px;opacity:0;transition:all 0.3s ease;transition:transform .6s cubic-bezier(0.215,0.61,0.355,1);@media (max-width:500px){margin:0px;padding:0px}}.wrapper ul li a:after{position:absolute;content:"";width:100%;height:100%;left:0;top:0;transform:scaleY(0);z-index:-1;transition:transform 0.3s ease}.wrapper ul li a:hover:after{transform:scaleY(1)}.wrapper ul li a:hover{color:#f2b709}
.wrapper ul li.active a{color:#f2b709 !important;font-weight:bold}#layout-header input[type="checkbox"]{display:none !important}.content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;text-align:center;width:100%;color:#202020}.content .title{font-size:40px;font-weight:700}.content p{font-size:35px;font-weight:600}#active:checked~.wrapper ul li a{opacity:1}.wrapper ul li a{transition:opacity 1.2s,transform 1.2s cubic-bezier(0.215,0.61,0.355,1);transform:translateX(100px)}#active:checked~.wrapper ul li a{transform:none;transition-timing-function:ease,cubic-bezier(.1,1.3,.3,1);transition-delay:.6s;transform:translateX(-100px)}