/*@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);*/

.text-input {
  position: absolute;
  opacity: 0;
  left: 0;
  width: 0;
  height: 0;
}

.text-output {
  position: relative;
  text-align: center;
  min-width: 150px;
  border-bottom: 2px solid #212f21;
  display: inline-block;
  padding-left: 10px;
  transition: all 0.2s;
  font-size: 35px;
  cursor: text;
}

.text-output:hover,
.text-output.active {
  border-bottom: 2px solid #343;
}

.letterContainer {
  display: inline;
  white-space: nowrap;
  color: #b1b5ab;
}

.letterStatic {
  display: inline;
  user-select: none;
}

.letterAnimTop {
  display: inline;
  position: absolute;
  -webkit-animation: dropTop 0.1s ease;
  -moz-animation: dropTop 0.1s ease;
  user-select: none;
}

.letterAnimBottom {
  display: inline;
  position: absolute;
  -webkit-animation: dropBottom 0.1s ease;
  -moz-animation: dropBottom 0.1s ease;
}

.placeholder {
  color: #0006;
}

.blink {
  position: static;
  top: -5px;
  -webkit-animation: blink 0.6s ease-in-out 0s infinite alternate;
  -moz-animation: blink 0.6s ease-in-out 0s infinite alternate;
  visibility: hidden;
  color: #b1b5ab;
  user-select: none;
}

.blink.visible {
  visibility: visible;
  padding: 0;
}

@-moz-keyframes blink {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes dropTop {
  from {
    -moz-transform: translateX(0) translateY(-20px) translateZ(20px)
      rotateX(90deg);
    transform: translateX(0) translateY(-20px) translateZ(20px) rotateX(90deg);
  }

  to {
    -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);
    transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);
  }
}

@-moz-keyframes dropBottom {
  from {
    -moz-transform: translateY(20px) translateZ(20px) rotateX(-90deg);
    transform: translateY(20px) translateZ(20px) rotateX(-90deg);
  }

  to {
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}

@-webkit-keyframes dropTop {
  from {
    -webkit-transform: translateX(0) translateY(-20px) translateZ(20px)
      rotateX(90deg);
  }

  to {
    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);
  }
}

@-webkit-keyframes dropBottom {
  from {
    -webkit-transform: translateY(20px) translateZ(20px) rotateX(-90deg);
  }

  to {
    -webkit-transform: rotateX(0deg);
  }
}