body {
  text-align: center;
  background-color: #FFF;
}

.wrapper {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 90%;
  font-size: 0;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
}

p {
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #6fa8dc;
  opacity: 0.3;
}

.letter {
  width: 24px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  margin: 0 0;
  font-family: sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  color: #6fa8dc;
}
.letter:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  word-break: break-all;
  background-color: #FFF;
}

.letter:nth-child(1):before {
  content: "6190582743";
  margin-top: -72px;
  -webkit-animation-name: letter1;
          animation-name: letter1;
  -webkit-animation-duration: 0.72s;
          animation-duration: 0.72s;
  -webkit-animation-delay: 0.76s;
          animation-delay: 0.76s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter1 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter1 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(2):before {
  content: "2184035967";
  margin-top: -144px;
  -webkit-animation-name: letter2;
          animation-name: letter2;
  -webkit-animation-duration: 1.7485714286s;
          animation-duration: 1.7485714286s;
  -webkit-animation-delay: 0.49s;
          animation-delay: 0.49s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter2 {
  from {
    margin-top: -144px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter2 {
  from {
    margin-top: -144px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(3):before {
  content: "8679521340";
  margin-top: -168px;
  -webkit-animation-name: letter3;
          animation-name: letter3;
  -webkit-animation-duration: 1.435s;
          animation-duration: 1.435s;
  -webkit-animation-delay: 0.59s;
          animation-delay: 0.59s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter3 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter3 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(4):before {
  content: "9560132478";
  margin-top: -168px;
  -webkit-animation-name: letter4;
          animation-name: letter4;
  -webkit-animation-duration: 1.575s;
          animation-duration: 1.575s;
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter4 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter4 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(5):before {
  content: "0186349257";
  margin-top: -48px;
  -webkit-animation-name: letter5;
          animation-name: letter5;
  -webkit-animation-duration: 1.92s;
          animation-duration: 1.92s;
  -webkit-animation-delay: 0.28s;
          animation-delay: 0.28s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter5 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter5 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(6):before {
  content: "1687930452";
  margin-top: -72px;
  -webkit-animation-name: letter6;
          animation-name: letter6;
  -webkit-animation-duration: 0.39s;
          animation-duration: 0.39s;
  -webkit-animation-delay: 0.87s;
          animation-delay: 0.87s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter6 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter6 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(7):before {
  content: "0216957348";
  margin-top: -120px;
  -webkit-animation-name: letter7;
          animation-name: letter7;
  -webkit-animation-duration: 1.6s;
          animation-duration: 1.6s;
  -webkit-animation-delay: 0.52s;
          animation-delay: 0.52s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter7 {
  from {
    margin-top: -120px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter7 {
  from {
    margin-top: -120px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(8):before {
  content: "6430157892";
  margin-top: -192px;
  -webkit-animation-name: letter8;
          animation-name: letter8;
  -webkit-animation-duration: 0.1066666667s;
          animation-duration: 0.1066666667s;
  -webkit-animation-delay: 0.97s;
          animation-delay: 0.97s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter8 {
  from {
    margin-top: -192px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter8 {
  from {
    margin-top: -192px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(9):before {
  content: "8937526401";
  margin-top: -48px;
  -webkit-animation-name: letter9;
          animation-name: letter9;
  -webkit-animation-duration: 1.4933333333s;
          animation-duration: 1.4933333333s;
  -webkit-animation-delay: 0.44s;
          animation-delay: 0.44s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter9 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter9 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(10):before {
  content: "1842590376";
  margin-top: -96px;
  -webkit-animation-name: letter10;
          animation-name: letter10;
  -webkit-animation-duration: 0.768s;
          animation-duration: 0.768s;
  -webkit-animation-delay: 0.76s;
          animation-delay: 0.76s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter10 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter10 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(11):before {
  content: "8602431579";
  margin-top: -72px;
  -webkit-animation-name: letter11;
          animation-name: letter11;
  -webkit-animation-duration: 0.84s;
          animation-duration: 0.84s;
  -webkit-animation-delay: 0.72s;
          animation-delay: 0.72s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter11 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter11 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(12):before {
  content: "0738261549";
  margin-top: -96px;
  -webkit-animation-name: letter12;
          animation-name: letter12;
  -webkit-animation-duration: 1.504s;
          animation-duration: 1.504s;
  -webkit-animation-delay: 0.53s;
          animation-delay: 0.53s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter12 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter12 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(13):before {
  content: "3591640872";
  margin-top: -192px;
  -webkit-animation-name: letter13;
          animation-name: letter13;
  -webkit-animation-duration: 1.5644444444s;
          animation-duration: 1.5644444444s;
  -webkit-animation-delay: 0.56s;
          animation-delay: 0.56s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter13 {
  from {
    margin-top: -192px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter13 {
  from {
    margin-top: -192px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(14):before {
  content: "5207493168";
  margin-top: -72px;
  -webkit-animation-name: letter14;
          animation-name: letter14;
  -webkit-animation-duration: 0.84s;
          animation-duration: 0.84s;
  -webkit-animation-delay: 0.72s;
          animation-delay: 0.72s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter14 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter14 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(15):before {
  content: "5719203468";
  margin-top: 0px;
  -webkit-animation-name: letter15;
          animation-name: letter15;
  -webkit-animation-duration: 0s;
          animation-duration: 0s;
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter15 {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter15 {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(16):before {
  content: "3708294516";
  margin-top: 0px;
  -webkit-animation-name: letter16;
          animation-name: letter16;
  -webkit-animation-duration: 0s;
          animation-duration: 0s;
  -webkit-animation-delay: 0.54s;
          animation-delay: 0.54s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter16 {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter16 {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: 24px;
  }
}