@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
body{font-family:"Lato",sans-serif;height:100vh;background:#232333;background:-moz-radial-gradient(center, ellipse cover, #232333 0%, #161616 100%);background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #232333), color-stop(100%, #161616));background:-webkit-radial-gradient(center, ellipse cover, #232333 0%, #161616 100%);background:-o-radial-gradient(center, ellipse cover, #232333 0%, #161616 100%);background:-ms-radial-gradient(center, ellipse cover, #232333 0%, #161616 100%);background:radial-gradient(ellipse at center, #232333 0%, #161616 100%);overflow:hidden}body span{opacity:0}.container{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw}.wrap{display:flex;flex-direction:column;gap:30px;text-align:center;align-items:center}@media only screen and (max-width: 767px){.wrap{padding:0 40px}}.wrap h2{font-size:16px;font-weight:300;color:#fff;margin-bottom:30px;letter-spacing:1px;margin-top:-30px;animation:nav_fade .8s 2.4s forwards;position:relative;opacity:0;line-height:2}@media only screen and (max-width: 767px){.wrap h2{max-width:240px}}.wrap nav{text-align:center;margin-top:20px;animation:nav_fade .8s 2.4s forwards;position:relative;opacity:0;margin-top:60px;display:flex;flex-direction:column}@media only screen and (min-width: 768px){.wrap nav{flex-direction:row}}.wrap nav a{color:#fff;text-decoration:none;font-weight:300;margin:5px;font-size:22px;padding:10px 20px;opacity:.5;text-align:center;position:relative}.wrap nav a:hover{opacity:1}.wrap nav a:hover:before{-webkit-clip-path:inset(0px 0px 0px 0px);clip-path:inset(0px 0px 0px 0px)}.wrap nav a:hover:after{-webkit-clip-path:inset(0px 0px 0px 0px);clip-path:inset(0px 0px 0px 0px)}.wrap nav a:before{width:20px;transition:all .31s;height:0px;-webkit-clip-path:inset(0px 40px 0px 0px);clip-path:inset(0px 40px 0px 0px);border-top:2px solid #fff;content:"";display:block;position:absolute;top:-16px;left:25px;right:0;z-index:-1;margin:auto;transform:rotate(-60deg) translateY(-50%) translatex(-50%)}.wrap nav a:after{width:20px;-webkit-clip-path:inset(0px 0px 0px 40px);clip-path:inset(0px 0px 0px 40px);transition:all .31s;height:0px;border-top:2px solid #fff;content:"";display:block;position:absolute;top:36px;left:-2px;right:0;z-index:-1;margin:auto;transform:rotate(-60deg) translateY(-50%) translatex(-50%)}.wrap .logo_holder{position:relative;text-align:center;animation:move_up .5s 1.9s forwards;display:flex;align-items:center;justify-content:center;height:100px;width:100%}.wrap .logo_holder__rotate{animation:logo_rotate .35s .4s forwards,logo_move .35s .75s forwards;transform:translateY(0%) rotate(0deg) scale(0.4) translate(0%, 5px);position:relative;width:auto}.wrap .logo_holder__right{transform:rotate(62.1deg);animation:logo_right .35s forwards;left:2000px;position:relative;top:11px}.wrap .logo_holder__left{transform:rotate(-118deg);animation:logo_left .35s forwards;left:2000px;position:relative}.wrap .logo_holder__text{transform:scale(1);animation:logo_text .4s 1.1s forwards;opacity:0}@media only screen and (max-width: 767px){.wrap .logo_holder__text{max-width:280px}}@keyframes logo_right{0%{left:2000px}100%{left:initial}}@keyframes logo_left{0%{left:-2000px}100%{left:initial}}@keyframes logo_rotate{0%{transform:translateY(-50%) rotate(0deg) scale(0.5)}100%{transform:translateY(-50%) rotate(-60deg) scale(0.5)}}@keyframes logo_move{0%{left:0}100%{left:-90px}}@keyframes logo_text{0%{top:-30px;opacity:0}100%{top:-64px;opacity:1}}@keyframes nav_fade{0%{top:10px;opacity:0}100%{top:0px;opacity:1}}@keyframes move_up{0%{top:50%}100%{top:35%}}