/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 3 févr. 2020, 11:47:26
    Author     : klegeay
*/

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

.wrapper {
}

p {
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4b4b4d;
  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: 24px;
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  color: #00a096;
}
.letter:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  word-break: break-all;
  background-color: #1d1f20;
}

.letter:nth-child(1):before {
  content: "0856492137";
  margin-top: -72px;
  -webkit-animation-name: letter1;
          animation-name: letter1;
  -webkit-animation-duration: 1.14s;
          animation-duration: 1.14s;
  -webkit-animation-delay: 0.62s;
          animation-delay: 0.62s;
  -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: "6438152907";
  margin-top: -192px;
  -webkit-animation-name: letter2;
          animation-name: letter2;
  -webkit-animation-duration: 0.3911111111s;
          animation-duration: 0.3911111111s;
  -webkit-animation-delay: 0.89s;
          animation-delay: 0.89s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

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

@keyframes letter2 {
  from {
    margin-top: -192px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(3):before {
  content: "0157263948";
  margin-top: -24px;
  -webkit-animation-name: letter3;
          animation-name: letter3;
  -webkit-animation-duration: 1.88s;
          animation-duration: 1.88s;
  -webkit-animation-delay: 0.06s;
          animation-delay: 0.06s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

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

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

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

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

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

@keyframes letter5 {
  from {
    margin-top: -216px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(6):before {
  content: "2394871605";
  margin-top: -144px;
  -webkit-animation-name: letter6;
          animation-name: letter6;
  -webkit-animation-duration: 1.6457142857s;
          animation-duration: 1.6457142857s;
  -webkit-animation-delay: 0.52s;
          animation-delay: 0.52s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

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

@keyframes letter6 {
  from {
    margin-top: -144px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(7):before {
  content: "6743280951";
  margin-top: 0px;
  -webkit-animation-name: letter7;
          animation-name: letter7;
  -webkit-animation-duration: 0s;
          animation-duration: 0s;
  -webkit-animation-delay: 0.68s;
          animation-delay: 0.68s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

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

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

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

@keyframes letter8 {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(9):before {
  content: "5816039427";
  margin-top: -216px;
  -webkit-animation-name: letter9;
          animation-name: letter9;
  -webkit-animation-duration: 0.36s;
          animation-duration: 0.36s;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

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

@keyframes letter9 {
  from {
    margin-top: -216px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(10):before {
  content: "3965012784";
  margin-top: -216px;
  -webkit-animation-name: letter10;
          animation-name: letter10;
  -webkit-animation-duration: 0.324s;
          animation-duration: 0.324s;
  -webkit-animation-delay: 0.91s;
          animation-delay: 0.91s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

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

@keyframes letter10 {
  from {
    margin-top: -216px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(11):before {
  content: "2871456093";
  margin-top: -168px;
  -webkit-animation-name: letter11;
          animation-name: letter11;
  -webkit-animation-duration: 3.36s;
          animation-duration: 3.36s;
  -webkit-animation-delay: 0.04s;
          animation-delay: 0.04s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

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

@keyframes letter11 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(12):before {
  content: "5740831692";
  margin-top: -168px;
  -webkit-animation-name: letter12;
          animation-name: letter12;
  -webkit-animation-duration: 3.15s;
          animation-duration: 3.15s;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

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

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

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

@keyframes letter13 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(14):before {
  content: "1297365048";
  margin-top: -144px;
  -webkit-animation-name: letter14;
          animation-name: letter14;
  -webkit-animation-duration: 2.5028571429s;
          animation-duration: 2.5028571429s;
  -webkit-animation-delay: 0.27s;
          animation-delay: 0.27s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

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

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

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

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

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

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


/******************************************************************************/

p {
  font-size:12px;
  color:#999;
  margin-top:200px;
}

.login-box{
    background-color: #ffffff;
    padding: 20px;
    -webkit-box-shadow: 0px 0px 25px 5px rgba(75,75,77,1);
    -moz-box-shadow: 0px 0px 25px 5px rgba(75,75,77,1);
    box-shadow: 0px 0px 25px 5px rgba(75,75,77,1);
}

.btn-google{
    background-color: #e8501f;
}

.btn-google:hover, .btn-google:focus{
    background-color: #00a096;
}

.login-box-msg{

}