/* Main styles */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

.text {
  fill: none;
  stroke-width: 5;
  stroke-dasharray: 0 300;
  stroke-dashoffset: 0;
}

.text:nth-child(3n + 1) {
  stroke: #FFFFFF;
    animation: stroke 10s  ease-in-out forwards;  

}
.text:nth-child(3n + 2) {
  stroke: #808080;
animation: stroke1 10s  ease-in-out forwards;

}

.text:nth-child(3n + 3) {
  stroke: #696969;
animation: stroke2 10s  ease-in-out forwards;

}


@keyframes stroke {
  100% {
    stroke-dashoffset: 1000;
    stroke-dasharray: 80 160;
  }
}

@keyframes stroke1 {
  100% {
    stroke-dashoffset: 1080;
    stroke-dasharray: 80 160;
  }
}


@keyframes stroke2 {
  100% {
    stroke-dashoffset: 1160;
    stroke-dasharray: 80 160;
  }
}
/* Other styles */
html, body {
  height: 100%;
}

body {
  background: #000000;
  background-size: .2em 100%;
  font: 14.5em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}