@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,200,400,900');
@import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Hairline');
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
    overflow: hidden;  
    height: 100%;
    font-family: 'Source+Sans+Pro', sans-serif;
}

#site-wrapper  {
  background-color: rgba(255,255,255,1);
    display: table;
    width: 100%;
    height: 100vh;
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 200px rgba(255,255,255,.3);
    box-shadow: inset 0 0 200px rgba(255,255,255,.3);
}
#intro-wrapper  {
    height: 60vh;
}

#subheadline-wrapper  {
  height: 10vh;
}

h2{
font-family: 'Source Sans Pro', sans-serif;
color: #03A9F4;
font-weight: 100;
font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
font-size: 3.4vw;  
}


p{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: -18px auto 0;
  color: white;
  width: 100%;
  color: #10826B;
  text-align: center;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 18px;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
}


.text--line {
  font-size: 6.5em;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: 'Bungee', sans-serif;
  
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 6% 29%;
  stroke-width: 1;
  stroke-dashoffset: 0%;
  -webkit-animation: stroke-offset 5s infinite linear;
          animation: stroke-offset 5s infinite linear;
}
.text-copy:nth-child(1) {
  stroke: #F44336;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.text-copy:nth-child(2) {
  stroke: #F44336;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.text-copy:nth-child(3) {
  stroke: #F44336;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.text-copy:nth-child(4) {
  stroke: #03A9F4;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
.text-copy:nth-child(5) {
  stroke: #03A9F4;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

@-webkit-keyframes stroke-offset {
  100% {
    stroke-dashoffset: -35%;
  }
}

@keyframes stroke-offset {
  100% {
    stroke-dashoffset: -35%;
  }
}