.menu-icon{height:30px;width:30px;position:fixed;z-index:2;left:50px;top:30px;cursor:pointer}.menu-icon__line{height:2px;width:30px;display:block;background-color:#fff;margin-bottom:4px;transition:background-color .5s ease,-webkit-transform .2s ease;transition:transform .2s ease,background-color .5s ease;transition:transform .2s ease,background-color .5s ease,-webkit-transform .2s ease}.menu-icon__line-left{width:15px}.menu-icon__line-right{width:15px;float:right}.nav{position:fixed;z-index:1}.nav:after,.nav:before{content:"";position:fixed;width:100vw;height:100vh;background:rgba(234,234,234,.2);z-index:-1;transition:-webkit-transform cubic-bezier(.77,0,.175,1) .8s;transition:transform cubic-bezier(.77,0,.175,1) .8s;transition:transform cubic-bezier(.77,0,.175,1) .8s,-webkit-transform cubic-bezier(.77,0,.175,1) .8s;-webkit-transform:translateX(0) translateY(-100%);transform:translateX(0) translateY(-100%)}.nav:after{background:#fff;transition-delay:0s}.nav:before{transition-delay:.1s}.nav__content{position:fixed;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);width:100%;text-align:center;font-size:calc(2vw + 10px);font-weight:200;cursor:pointer}.nav__list-item{position:relative;display:inline-block;transition-delay:.8s;opacity:0;-webkit-transform:translate(0,100%);transform:translate(0,100%);transition:opacity .2s ease,-webkit-transform .3s ease;transition:opacity .2s ease,transform .3s ease;transition:opacity .2s ease,transform .3s ease,-webkit-transform .3s ease;margin-right:25px}.nav__list-item:before{content:"";position:absolute;background:#000;width:20px;height:1px;top:100%;-webkit-transform:translate(0,0);transform:translate(0,0);transition:all .3s ease;z-index:-1}.nav__list-item:hover:before{width:100%}body.nav-active .menu-icon__line{background-color:#000;-webkit-transform:translateX(0) rotate(-45deg);transform:translateX(0) rotate(-45deg)}body.nav-active .menu-icon__line-left{-webkit-transform:translateX(1px) rotate(45deg);transform:translateX(1px) rotate(45deg)}body.nav-active .menu-icon__line-right{-webkit-transform:translateX(-2px) rotate(45deg);transform:translateX(-2px) rotate(45deg)}body.nav-active .nav{visibility:visible}body.nav-active .nav:after,body.nav-active .nav:before{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}body.nav-active .nav:after{transition-delay:.1s}body.nav-active .nav:before{transition-delay:0s}body.nav-active .nav__list-item{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);transition:opacity .3s ease,color .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,transform .3s ease,color .3s ease;transition:opacity .3s ease,transform .3s ease,color .3s ease,-webkit-transform .3s ease}body.nav-active .nav__list-item:nth-child(0){transition-delay:.5s}body.nav-active .nav__list-item:nth-child(1){transition-delay:.6s}body.nav-active .nav__list-item:nth-child(2){transition-delay:.7s}body.nav-active .nav__list-item:nth-child(3){transition-delay:.8s}body.nav-active .nav__list-item:nth-child(4){transition-delay:.9s}