*{font-family:Unbounded,Helvetica,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%}
.wrapper{position:fixed;top:0;left:-100%;height:100vh;width:100%;background:linear-gradient(rgba(172,67,1,1) 0,rgba(236,91,0,1) 50%,rgba(172,67,1,1) 100%);background-size:cover;background-position:center center;transition:all .6s ease-in-out}
#active:checked~.wrapper{left:0}
.menu-btn{position:relative;z-index:2;left:0;top:50%;height:30px;width:50px;text-align:center;line-height:50px;border-radius:50%;font-size:20px;cursor:pointer;transition:all .3s ease-in-out}
.menu-btn span,.menu-btn:after,.menu-btn:before{content:"";position:absolute;top:calc(50% - 1px);left:30%;width:50%;border-bottom:2px solid #fff;transition:transform .6s cubic-bezier(.215,.61,.355,1)}
.menu-btn:before{transform:translateY(-8px)}
.menu-btn:after{transform:translateY(8px)}
#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{position:absolute;top:60%;left:50%;height:50%;width:100%;transform:translate(-50%,-50%);list-style:none;text-align:center}
.wrapper ul li{height:10%;margin:15px 0}
.wrapper ul li a{text-decoration:none;color:#fff;font-size:2rem;font-weight:300;opacity:0;transition:all .3s ease;transition:transform .6s cubic-bezier(.215,.61,.355,1)}
.nav-menu>li:nth-child(2n) a{font-weight:200}
.nav-menu>li:nth-child(2n+1) a{font-weight:500}
.wrapper ul li a:hover:after{transform:scaleY(1)}
input[type=checkbox]{display:none}
#active:checked~.wrapper ul li a{opacity:1}
.wrapper ul li a{transition:opacity 1.2s,transform 1.2s cubic-bezier(.215,.61,.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)}