/* with gratitude to http://lea.verou.me/2012/02/simpler-css-typing-animation-with-the-ch-unit/*/
@keyframes letters {
  from {
    left: 0;
  }
  to {
    left: 50ch;
  }
}
@keyframes lines {
  from {
    top: 0;
  }
  to {
    top: 100%;
  }
}
@keyframes cursor-type {
  50% {
    border-color: #000;
  }
}
@keyframes cursor-wait {
  0% {
    box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, 0);
  }
  1% {
    box-shadow: inset 2px 0 0 0 black;
  }
  40% {
    box-shadow: inset 2px 0 0 0 black;
  }
}
.test {
  display: none;
  animation-name: cursor-wait;
  animation-duration: 0.8s;
  animation-timing-function: ease;
  animation-iteration-count: 2;
  animation-fill-mode: backward;
  animation-delay: 0s;
  padding-left: 10px;
}

.type {
  position: relative;
    font-family: 'Roboto', sans-serif;
  width: 50ch;
  word-break: break-all;
  overflow: hidden;
  padding:0;
}
@supports (width: 1ch) {
  .type:before, .type:after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    height: 3.2em;
    width: 100%;
    background-color: #0083ca;
  }
  .type:before {
    border-left: 2px solid transparent;
    top: 100%;
    animation-name: letters, lines, cursor-type, cursor-wait;
    animation-fill-mode: both, both, both, backwards;
  }
  .type:after {
    content: "";
    height: 100%;
    top: 100%;
    left: 0;
    margin-top: 1.2em;
  }
}

.type:before {
  animation-duration: 1.4285714286s, 1.4285714286s, 0.0285714286s, 0.8s;
  animation-timing-function: steps(50, end), steps(1, end), step-end, ease-out;
  animation-iteration-count: 1, 1, 35, 2;
  animation-delay: 1.6s, 1.6s, 1.6s, 0s;
}
.type:after {
  animation: lines 1.4285714286s steps(1, end) 1;
  animation-fill-mode: both;
  animation-delay: 1.6s;
}

.type + .type:before {
  animation-duration: 1.4285714286s, 5.7142857143s, 0.0285714286s, 0.8s;
  animation-timing-function: steps(50, end), steps(4, end), step-end, ease-out;
  animation-iteration-count: 4, 1, 181, 2;
  animation-delay: 4.2s, 4.2s, 4.2s, 2.6s;
}
.type + .type:after {
  animation: lines 5.7142857143s steps(4, end) 1;
  animation-fill-mode: both;
  animation-delay: 4.2s;
}

.type + .type + .type:before {
  animation-duration: 1.4285714286s, 4.2857142857s, 0.0285714286s, 0.8s;
  animation-timing-function: steps(50, end), steps(3, end), step-end, ease-out;
  animation-iteration-count: 3, 1, 120, 2;
  animation-delay: 10.9714285714s, 10.9714285714s, 10.9714285714s, 9.3714285714s;
}
.type + .type + .type:after {
  animation: lines 4.2857142857s steps(3, end) 1;
  animation-fill-mode: both;
  animation-delay: 10.9714285714s;
}

.type + .type + .type + .type:before {
  animation-duration: 1.4285714286s, 7.1428571429s, 0.0285714286s, 0.8s;
  animation-timing-function: steps(50, end), steps(5, end), step-end, ease-out;
  animation-iteration-count: 5, 1, 215, 2;
  animation-delay: 16s, 16s, 16s, 14.4s;
}
.type + .type + .type + .type:after {
  animation: lines 7.1428571429s steps(5, end) 1;
  animation-fill-mode: both;
  animation-delay: 16s;
}