@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(https://fonts.googleapis.com/css?family=Arimo:400,700);
body {
  margin: 0;
}


main {
  font-family: Open Sans;
  text-transform: uppercase;
  line-height: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(25deg, #091521, #7a8699);
}

.animation {
  width: 20em;
  height: 4em;
  margin: 1em auto;
  position: relative;
}

.arimo {
  font-family: Arimo;
}

.red {
  color: #cf4c4e;
}

.white {
  color: white;
}

.light {
  font-weight: 300;
}

.bold {
  font-weight: 700;
}

.mask {
  overflow: hidden;
  position: relative;
}

/*********************
* Animation 1
*********************/
@keyframes animation-1-slash {
  0% {
    opacity: 0;
    transform: translate3d(6em, 0, 0);
  }
  25% {
    opacity: 0;
    transform: translate3d(6em, 0, 0);
  }
  45% {
    opacity: 1;
  }
  50% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-1-text-1 {
  0% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  65% {
    left: 0;
  }
}
@keyframes animation-1-text-2 {
  0% {
    left: -100%;
  }
  55% {
    left: -100%;
  }
  75% {
    left: 0;
  }
}
#animation-1 div {
  position: absolute;
}
#animation-1 > div:first-child {
  font-size: 4.8em;
  top: -.13em;
  animation: 4s cubic-bezier(0.19, 0.76, 0.32, 1) infinite alternate both animation-1-slash;
}
#animation-1 > div:nth-child(2), #animation-1 > div:nth-child(3) {
  font-size: 2em;
  height: 1em;
  width: 5em;
}
#animation-1 > div:nth-child(2) div, #animation-1 > div:nth-child(3) div {
  animation: 4s cubic-bezier(0.19, 0.76, 0.32, 1) infinite alternate both;
}
#animation-1 div:nth-child(2) {
  top: 0;
  left: .9em;
}
#animation-1 div:nth-child(2) div {
  animation-name: animation-1-text-1;
}
#animation-1 div:nth-child(3) {
  top: .8em;
  left: .5em;
}
#animation-1 div:nth-child(3) div {
  animation-name: animation-1-text-2;
}

/*********************
* Animation 2
*********************/
@keyframes animation-2-name {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  30% {
    transform: translate3d(0, 100%, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-2-title {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  30% {
    transform: translate3d(0, -100%, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
}
#animation-2 {
  text-align: center;
}
#animation-2 > div {
  width: 100%;
  height: 1em;
}
#animation-2 > div div {
  position: absolute;
  width: 100%;
}
#animation-2 > div:first-child {
  font-size: 2.8em;
}
#animation-2 > div:first-child div {
  animation: 3s ease-out infinite alternate both animation-2-name;
}
#animation-2 > div:last-child {
  font-size: 1.1em;
}
#animation-2 > div:last-child div {
  animation: 3s ease-out infinite alternate both animation-2-title;
}

/*********************
* Animation 3
*********************/
@keyframes animation-3-left {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  30% {
    transform: translate3d(100%, 0, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-3-right {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  30% {
    transform: translate3d(-100%, 0, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
}
#animation-3 > div {
  display: inline-block;
  width: 50%;
  height: 1em;
}
#animation-3 > div:first-child {
  font-size: 2.4em;
  text-align: right;
  letter-spacing: 1px;
}
#animation-3 > div:first-child div {
  animation: 3.2s ease-out infinite alternate both animation-3-left;
}
#animation-3 > div:last-child {
  font-size: 2.5em;
  line-height: 1.15;
  letter-spacing: -1px;
}
#animation-3 > div:last-child div {
  animation: 3.2s ease-out infinite alternate both animation-3-right;
}

/*********************
* Animation 4
*********************/
@keyframes animation-4-stroke {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  30% {
    transform: translate3d(0, -100%, 0);
  }
  60% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-4-text {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  50% {
    transform: translate3d(0, -100%, 0);
  }
  80% {
    transform: translate3d(0, 0, 0);
  }
}
#animation-4 > div {
  display: inline-block;
  vertical-align: middle;
}
#animation-4 > div div {
  animation: 3s ease-out infinite alternate both;
}
#animation-4 > div:first-child {
  font-size: 2.8em;
}
#animation-4 > div:first-child div {
  animation-name: animation-4-text;
}
#animation-4 > div:last-child div {
  width: .38em;
  height: 2.4em;
  background-color: #cf4c4e;
  animation-name: animation-4-stroke;
}

/*********************
* Animation 5
*********************/
@keyframes animation-5-bottom-right {
  0% {
    transform: translate3d(-100%, 96%, 0);
  }
  8% {
    transform: translate3d(-100%, 96%, 0);
  }
  30% {
    transform: translate3d(0, 96%, 0);
  }
  38% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-5-top {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  38% {
    transform: translate3d(100%, 0, 0);
  }
  58% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-5-bottom-left {
  0% {
    transform: translate3d(-98%, -100%, 0);
  }
  58% {
    transform: translate3d(-98%, -100%, 0);
  }
  64% {
    transform: translate3d(-98%, 0, 0);
  }
  84% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-5-text-name {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  25% {
    transform: translate3d(0, 100%, 0);
  }
  45% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes animation-5-text-title {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  35% {
    transform: translate3d(0, -100%, 0);
  }
  55% {
    transform: translate3d(0, 0, 0);
  }
}
#animation-5 {
  text-align: center;
  height: 3.5em;
}
#animation-5 svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#animation-5 line {
  stroke-width: 4px;
  stroke: #cf4c4e;
}
#animation-5 div,
#animation-5 .clip-path {
  animation: 3.1s ease-out infinite alternate both;
}
#animation-5 .bottom-right,
#animation-5 .right {
  clip-path: url(#mask-bottom-right);
}
#animation-5 .top {
  clip-path: url(#mask-top);
}
#animation-5 .bottom-left,
#animation-5 .left {
  clip-path: url(#mask-bottom-left);
}
#animation-5 #mask-bottom-right > .clip-path {
  animation-name: animation-5-bottom-right;
}
#animation-5 #mask-top > .clip-path {
  animation-name: animation-5-top;
}
#animation-5 #mask-bottom-left > .clip-path {
  animation-name: animation-5-bottom-left;
}
#animation-5 > div:nth-child(2) {
  font-size: 2em;
  padding-top: .4em;
}
#animation-5 > div:nth-child(2) div {
  animation-name: animation-5-text-name;
}
#animation-5 > div:nth-child(3) {
  font-size: .9em;
  letter-spacing: .7px;
  margin-top: .2em;
}
#animation-5 > div:nth-child(3) div {
  animation-name: animation-5-text-title;
}