@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
  font-family: 'Lato', sans-serif;
  height: 100vh;
  background: #232333;
  /* Old browsers */
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2F2D2B), color-stop(100% ,#2F2D2B));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #2F2D2B 0%, #2F2D2B 100%);
  /* Chrome10+,Safari5.1+ */
  /* Opera 12+ */
  /* IE10+ */
  background: -webkit-radial-gradient(center ellipse, #2F2D2B 0%, #2F2D2B 100%);
  background: radial-gradient(ellipse at center, #2F2D2B 0%, #2F2D2B 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 .8s 2.4s forwards;
          animation: nav_fade .8s 2.4s forwards;
  position: Relative;
  opacity: 0;
  margin-top: 60px;
}
body nav ul{
  display: inline-block;
}
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;
  -webkit-transition: all .31s;
  transition: all .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;
  -webkit-transform: rotate(-60deg) translateY(-50%) translatex(-50%);
          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);
  -webkit-transition: all .31s;
  transition: all .31s;
  height: 0px;
  border-top: 2px solid white;
  /*content: '';*/
  display: block;
  position: absolute;
  top: 36px;
  left: -2px;
  right: 0;
  z-index: -1;
  margin: auto;
  -webkit-transform: rotate(-60deg) translateY(-50%) translatex(-50%);
          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 .5s 1.9s forwards;
          animation: move_up .5s 1.9s forwards;
}
body .logo_holder__rotate {
  -webkit-animation: logo_rotate .35s .4s forwards,logo_move .35s .75s forwards;
          animation: logo_rotate .35s .4s forwards,logo_move .35s .75s forwards;
  -webkit-transform: translateY(-50%) rotate(0deg) scale(0.5);
          transform: translateY(-50%) rotate(0deg) scale(0.5);
  position: relative;
}
body .logo_holder__right {
  -webkit-transform: rotate(62.1deg);
          transform: rotate(62.1deg);
  -webkit-animation: logo_right .35s forwards;
          animation: logo_right .35s forwards;
  left: 2000px;
  position: relative;
  top: 11px;
}
body .logo_holder__left {
  -webkit-transform: rotate(-118deg);
          transform: rotate(-118deg);
  -webkit-animation: logo_left .35s forwards;
          animation: logo_left .35s forwards;
  left: 2000px;
  position: relative;
}
body .logo_holder__text {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  position: absolute;
  top: 30px;
  left: 60px;
  -webkit-animation: logo_text 0.4s 1.1s forwards;
          animation: logo_text 0.4s 1.1s forwards;
  opacity: 0;
}

@-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% {
    -webkit-transform: translateY(-50%) rotate(0deg) scale(0.5);
            transform: translateY(-50%) rotate(0deg) scale(0.5);
  }
  100% {
    -webkit-transform: translateY(-50%) rotate(-60deg) scale(0.5);
            transform: translateY(-50%) rotate(-60deg) scale(0.5);
  }
}
@keyframes logo_rotate {
  0% {
    -webkit-transform: translateY(-50%) rotate(0deg) scale(0.5);
            transform: translateY(-50%) rotate(0deg) scale(0.5);
  }
  100% {
    -webkit-transform: translateY(-50%) rotate(-60deg) scale(0.5);
            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%;
  }
}