@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
  font-family: "Lato", sans-serif;
  height: 100vh;
  background: #232333;
  /* Old browsers */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 12+ */
  /* IE10+ */
  background: radial-gradient(ellipse at center, #232333 0%, #161616 100%);
  /* W3C */
  overflow: hidden;
}
body span {
  opacity: 0;
}
body h2 {
  font-size: 12px;
  font-weight: 300;
  color: white;
  margin-bottom: 30px;
  opacity: 0.6;
  letter-spacing: 1px;
  margin-top: -30px;
}
body nav {
  text-align: center;
  margin-top: 20px;
  -webkit-animation: nav_fade 0.8s 2.4s forwards;
          animation: nav_fade 0.8s 2.4s forwards;
  position: Relative;
  opacity: 0;
  margin-top: 60px;
}
body nav a {
  color: white;
  text-decoration: none;
  font-weight: 300;
  margin: 5px;
  font-size: 12px;
  padding: 10px 20px;
  opacity: 0.5;
  text-align: center;
  position: relative;
}
body nav a:hover {
  opacity: 1;
}
body nav a:hover:before {
  -webkit-clip-path: inset(0px 0px 0px 0px);
  clip-path: inset(0px 0px 0px 0px);
}
body nav a:hover:after {
  -webkit-clip-path: inset(0px 0px 0px 0px);
  clip-path: inset(0px 0px 0px 0px);
}
body nav a:before {
  width: 20px;
  transition: all 0.31s;
  height: 0px;
  -webkit-clip-path: inset(0px 40px 0px 0px);
  clip-path: inset(0px 40px 0px 0px);
  border-top: 2px solid white;
  content: "";
  display: block;
  position: absolute;
  top: -16px;
  left: 25px;
  right: 0;
  z-index: -1;
  margin: auto;
  transform: rotate(-60deg) translateY(-50%) translatex(-50%);
}
body nav a:after {
  width: 20px;
  -webkit-clip-path: inset(0px 0px 0px 40px);
  clip-path: inset(0px 0px 0px 40px);
  transition: all 0.31s;
  height: 0px;
  border-top: 2px solid white;
  content: "";
  display: block;
  position: absolute;
  top: 36px;
  left: -2px;
  right: 0;
  z-index: -1;
  margin: auto;
  transform: rotate(-60deg) translateY(-50%) translatex(-50%);
}
body .logo_holder {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 380px;
  text-align: center;
  top: 50%;
  -webkit-animation: move_up 0.5s 1.9s forwards;
          animation: move_up 0.5s 1.9s forwards;
}
body .logo_holder__rotate {
  -webkit-animation: logo_rotate 0.35s 0.4s forwards, logo_move 0.35s 0.75s forwards;
          animation: logo_rotate 0.35s 0.4s forwards, logo_move 0.35s 0.75s forwards;
  transform: translateY(-50%) rotate(0deg) scale(0.5);
  position: relative;
}
body .logo_holder__right {
  transform: rotate(62.1deg);
  -webkit-animation: logo_right 0.35s forwards;
          animation: logo_right 0.35s forwards;
  left: 2000px;
  position: relative;
  top: 11px;
}
body .logo_holder__left {
  transform: rotate(-118deg);
  -webkit-animation: logo_left 0.35s forwards;
          animation: logo_left 0.35s forwards;
  left: 2000px;
  position: relative;
}
body .logo_holder__text {
  transform: scale(0.5);
  position: absolute;
  top: 60px;
  max-height:129px;
  left: 60px;
  -webkit-animation: logo_text 0.4s 1.1s forwards;
          animation: logo_text 0.4s 1.1s forwards;
  opacity: 0;
    fill: #fff;
  fill-rule: evenodd;
}

@-webkit-keyframes logo_right {
  0% {
    left: 2000px;
  }
  100% {
    left: 68px;
  }
}

@keyframes logo_right {
  0% {
    left: 2000px;
  }
  100% {
    left: 68px;
  }
}
@-webkit-keyframes logo_left {
  0% {
    left: -2000px;
  }
  100% {
    left: -68px;
  }
}
@keyframes logo_left {
  0% {
    left: -2000px;
  }
  100% {
    left: -68px;
  }
}
@-webkit-keyframes logo_rotate {
  0% {
    transform: translateY(-50%) rotate(0deg) scale(0.5);
  }
  100% {
    transform: translateY(-50%) rotate(-60deg) scale(0.5);
  }
}
@keyframes logo_rotate {
  0% {
    transform: translateY(-50%) rotate(0deg) scale(0.5);
  }
  100% {
    transform: translateY(-50%) rotate(-60deg) scale(0.5);
  }
}
@-webkit-keyframes logo_move {
  0% {
    left: 0;
  }
  100% {
    left: -90px;
  }
}
@keyframes logo_move {
  0% {
    left: 0;
  }
  100% {
    left: -90px;
  }
}
@-webkit-keyframes logo_text {
  0% {
    top: -30px;
    opacity: 0;
  }
  100% {
    top: -64px;
    opacity: 1;
  }
}
@keyframes logo_text {
  0% {
    top: -30px;
    opacity: 0;
  }
  100% {
    top: -64px;
    opacity: 1;
  }
}
@-webkit-keyframes nav_fade {
  0% {
    top: 10px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@keyframes nav_fade {
  0% {
    top: 10px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes move_up {
  0% {
    top: 50%;
  }
  100% {
    top: 35%;
  }
}
@keyframes move_up {
  0% {
    top: 50%;
  }
  100% {
    top: 35%;
  }
}