/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      /* Not actually used currently... */
* {
  box-sizing: border-box;
}

.absolute {
  position: absolute;
  top:0;
  
}


.center {
  left:152px;
  top:104px;
  transform: translateX(-50%);
}

.head {
  white-space: nowrap;
  left:30px;
}

.head h2 {
  margin: 0;
  padding:0;
  position:absolute;
  left:2px;
  top:125px;
  
}

head h3 {
  position:absolute;
}

.font-larger {
  font-size: 0.2em;
}

.font2 {
  font-size: 0em;
}

.font3 {
  font-size: 0em;
}


.main-text {
  width:100%;
  height:100%;
  top: -0.25em;
  overflow: hidden;
  
  
}
.main-text h4 {
  position:absolute;
  top:330px;
  left:28px;
  animation-delay: 1s;
}
.main-text p {
  font-size: .8em;
  margin-top: .3em;
  margin-bottom: 0;
}
.main-text .first {
  position:relative;
  left:-4px;
  top:15px;
  animation-delay: 0.5s;
}
.main-text .second {
  position:absolute;
  top:125px;
  left:360px;
  margin: .0em;
  animation-delay:1s;
}

.main-text .third {
  position:absolute;
  top:66px;
  left:832px;
  margin: .0em;
  animation-delay: 1.5s;
}

.main-text .fourth {

  position:absolute;
  bottom:-54px;
  right:180px;
  margin: .0em;
  animation-delay: 2s;
}




.main-text .fifth {
  position:absolute;
  left:-4px;
  top:15px;
  animation-delay: 5s;
}
.main-text .sixth {
  position:absolute;
  top:125px;
  left:360px;
  margin-top: .0em;
  animation-delay:5.5s;
}

.main-text .seventh {
  position:absolute;
  top:66px;
  left:832px;
  margin-top: .0em;
  animation-delay: 6s;
}





.call-to-action {
  animation-delay: 6s;
  margin: 0 auto;
}

/* Animations */
.hello {
  transform: translate3d(-3000px, 0, 0);
  animation: bounceInLeft .75s forwards;
}


.date-name {
  transform: translate3d(3000px, 0, 0);
  animation: bounceInRight .5s .4s forwards;
}

.flip-down {
  transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  animation-name: flipInX;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

.fade-in {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  animation-name: fadeInUp;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

/* From Animate.css https://github.com/daneden/animate.css/blob/master/animate.css */
@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}