/* font-family: 'Economica', sans-serif; */
/* font-family: 'Carme', sans-serif; */
* {
  box-sizing: content-box;
}

html, body {
  position: relative;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  background-color: #a5c8c4;
}

#wrap {
  background-color: #0a1213;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#login_port {
  position: absolute;
  bottom: 20px;
  left: 40px;
  text-transform: uppercase;
  color: #a5c8c4;
  text-align: center;
  font-family: 'Carme', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
}

#login_port input, #login_bnt {
  border: none;
  background-color: #0a1213;
  text-transform: uppercase;
  color: #a5c8c4;
  text-align: left;
  font-family: 'Carme', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
}

#login_bnt {
  float: right;
  border-left: solid 1px #a5c8c4;
  padding: 2px 10px;
}

#login_port input {
  border-bottom: solid 1px #1A2B24;
  margin-right: 10px;
}

#login_bnt:hover {
  cursor: pointer;
}

input:focus {
  outline: none;
}

.logo_wrap {
  max-width: 100px;
  position: relative;
  margin: 20% auto;
}

.logo_wrap span {
  text-transform: uppercase;
  color: #a5c8c4;
  text-align: center;
  font-family: 'Carme', sans-serif;
  font-size: 25px;
  letter-spacing: 8px;
}

.blinking {
  animation: blinkingText 1s infinite;
}

@keyframes blinkingText {
  0% {
    color: #a5c8c4;
  }

  50% {
    color: transparent;
  }

  100% {
    color: #a5c8c4;
  }
}

/* LETTERING */
.letter {
  width: 24px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  margin: 0 0;
  font-family: sans-serif;
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  color: #a5c8c4;
}

.lt2 {
  color: #8B9E90 !important;
  font-family: 'Carme', sans-serif !important;
}

.letter:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  word-break: break-all;
  background-color: #0a1213;
}

.letter:nth-child(1):before {
  content: "123X567890";
  margin-top: -24px;
  -webkit-animation-name: letter1;
  animation-name: letter1;
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
  -webkit-animation-delay: 2.3s;
  animation-delay: 2.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

  to {
    margin-top: 24px;
  }
}

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

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(2):before {
  content: "567890123X";
  margin-top: -96px;
  -webkit-animation-name: letter2;
  animation-name: letter2;
  -webkit-animation-duration: 1.376s;
  animation-duration: 1.376s;
  -webkit-animation-delay: 2.57s;
  animation-delay: 2.57s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes letter2 {
  from {
    margin-top: -96px;
  }

  to {
    margin-top: 24px;
  }
}

@keyframes letter2 {
  from {
    margin-top: -96px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(3):before {
  content: "567123X890";
  margin-top: -48px;
  -webkit-animation-name: letter3;
  animation-name: letter3;
  -webkit-animation-duration: 1.6533333333s;
  animation-duration: 1.6533333333s;
  -webkit-animation-delay: 2.38s;
  animation-delay: 2.38s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

  to {
    margin-top: 24px;
  }
}

@keyframes letter3 {
  from {
    margin-top: -48px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(4):before {
  content: "EXPERIENCE";
  margin-top: -216px;
  -webkit-animation-name: letter4;
  animation-name: letter4;
  -webkit-animation-duration: 1.764s;
  animation-duration: 1.764s;
  -webkit-animation-delay: 2.51s;
  animation-delay: 2.51s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes letter4 {
  from {
    margin-top: -216px;
  }

  to {
    margin-top: 24px;
  }
}

@keyframes letter4 {
  from {
    margin-top: -216px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(5):before {
  content: "PROJECT";
  margin-top: -72px;
  -webkit-animation-name: letter5;
  animation-name: letter5;
  -webkit-animation-duration: 2.46s;
  animation-duration: 2.46s;
  -webkit-animation-delay: 2.18s;
  animation-delay: 2.18s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes letter5 {
  from {
    margin-top: -72px;
  }

  to {
    margin-top: 24px;
  }
}

@keyframes letter5 {
  from {
    margin-top: -72px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(6):before {
  content: "5436789324";
  margin-top: -216px;
  -webkit-animation-name: letter6;
  animation-name: letter6;
  -webkit-animation-duration: 2.088s;
  animation-duration: 2.088s;
  -webkit-animation-delay: 2.42s;
  animation-delay: 2.42s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes letter6 {
  from {
    margin-top: -216px;
  }

  to {
    margin-top: 24px;
  }
}

@keyframes letter6 {
  from {
    margin-top: -216px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(7):before {
  content: "3457689785";
  margin-top: -48px;
  -webkit-animation-name: letter7;
  animation-name: letter7;
  -webkit-animation-duration: 2.08s;
  animation-duration: 2.08s;
  -webkit-animation-delay: 2.22s;
  animation-delay: 2.22s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes letter7 {
  from {
    margin-top: -48px;
  }

  to {
    margin-top: 24px;
  }
}

@keyframes letter7 {
  from {
    margin-top: -48px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(8):before {
  content: "1234567890";
  margin-top: -72px;
  -webkit-animation-name: letter8;
  animation-name: letter8;
  -webkit-animation-duration: 2.49s;
  animation-duration: 2.49s;
  -webkit-animation-delay: 2.17s;
  animation-delay: 2.17s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes letter8 {
  from {
    margin-top: -72px;
  }

  to {
    margin-top: 24px;
  }
}

@keyframes letter8 {
  from {
    margin-top: -72px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(9):before {
  content: "3029481576";
  margin-top: -168px;
  -webkit-animation-name: letter9;
  animation-name: letter9;
  -webkit-animation-duration: 2.56s;
  animation-duration: 2.56s;
  -webkit-animation-delay: 2.84s;
  animation-delay: 2.84s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes letter9 {
  from {
    margin-top: -168px;
  }

  to {
    margin-top: 24px;
  }
}

@keyframes letter9 {
  from {
    margin-top: -168px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(10):before {
  content: "0923187645";
  margin-top: -192px;
  -webkit-animation-name: letter10;
  animation-name: letter10;
  -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 letter10 {
  from {
    margin-top: -192px;
  }

  to {
    margin-top: 24px;
  }
}

@keyframes letter10 {
  from {
    margin-top: -192px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(11):before {
  content: "5946178230";
  margin-top: -96px;
  -webkit-animation-name: letter11;
  animation-name: letter11;
  -webkit-animation-duration: 2.8s;
  animation-duration: 2.8s;
  -webkit-animation-delay: 2.75s;
  animation-delay: 2.75s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes letter11 {
  from {
    margin-top: -96px;
  }

  to {
    margin-top: 24px;
  }
}

@keyframes letter11 {
  from {
    margin-top: -96px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(12):before {
  content: "8415362907";
  margin-top: -96px;
  -webkit-animation-name: letter12;
  animation-name: letter12;
  -webkit-animation-duration: 1.28s;
  animation-duration: 1.28s;
  -webkit-animation-delay: 2.6s;
  animation-delay: 2.6s;
  -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: "7291538604";
  margin-top: -144px;
  -webkit-animation-name: letter13;
  animation-name: letter13;
  -webkit-animation-duration: 1.4057142857s;
  animation-duration: 1.4057142857s;
  -webkit-animation-delay: 2.59s;
  animation-delay: 2.59s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes letter13 {
  from {
    margin-top: -144px;
  }

  to {
    margin-top: 24px;
  }
}

@keyframes letter13 {
  from {
    margin-top: -144px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(14):before {
  content: "1235890467";
  margin-top: -168px;
  -webkit-animation-name: letter14;
  animation-name: letter14;
  -webkit-animation-duration: 2.665s;
  animation-duration: 2.665s;
  -webkit-animation-delay: 2.81s;
  animation-delay: 2.81s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes letter14 {
  from {
    margin-top: -168px;
  }

  to {
    margin-top: 24px;
  }
}

@keyframes letter14 {
  from {
    margin-top: -168px;
  }

  to {
    margin-top: 24px;
  }
}

.letter:nth-child(15):before {
  content: "1398506724";
  margin-top: -72px;
  -webkit-animation-name: letter15;
  animation-name: letter15;
  -webkit-animation-duration: 2.13s;
  animation-duration: 2.13s;
  -webkit-animation-delay: 2.29s;
  animation-delay: 2.29s;
  -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: "2160783594";
  margin-top: 0px;
  -webkit-animation-name: letter16;
  animation-name: letter16;
  -webkit-animation-duration: 0s;
  animation-duration: 0s;
  -webkit-animation-delay: 2.89s;
  animation-delay: 2.89s;
  -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;
  }
}

/* LOOP TEXT */
/* LOOP TEXT */
/* LOOP TEXT */
/* LOOP TEXT */