.txtretroshadow {

  text-align: center;

  font-size: 10px;

  color: #2c2c2c;

  letter-spacing: .01em;

  text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);

  height: 50px;

  padding-top: 0px;

}

.txtdeepshadow {

  text-align: center;

  font-size: 30px;

  height: 100px;

  padding-top: 10px;

  color: #1c1a15;

  letter-spacing: .1em;

  text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424;

}

.shadow{

  font-size:2em;

  text-align:center;

  text-shadow: 0 -2px 0 #333,

    0 6px 8px rgba(0,0,0,.4),

    0 9px 10px rgba(0,0,0,.10),

    0 30px 10px rgba(0,0,0,.10),

    0 15px 10px rgba(0,0,0,.10);

}


.line-1{
    position: relative;
    top: 10%;  
    width: 10em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 120%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-10%);    
}

/* Animation */
.anim-typewriter{
  animation: typewriter 4s steps(40) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 20em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}


d {
  position: absolute;
  top: 35%;
  width: 100%;

  text-shadow:     0 1px 0 hsl(174,5%,80%),
	                 0 2px 0 hsl(174,5%,75%),
	                 0 3px 0 hsl(174,5%,70%),
	                 0 4px 0 hsl(174,5%,66%),
	                 0 5px 0 hsl(174,5%,64%),
	                 0 6px 0 hsl(174,5%,62%),
	                 0 7px 0 hsl(174,5%,61%),
	                 0 8px 0 hsl(174,5%,60%),
	
	                 0 0 5px rgba(0,0,0,.05),
	                0 1px 3px rgba(0,0,0,.2),
	                0 3px 5px rgba(0,0,0,.2),
	               0 5px 10px rgba(0,0,0,.2),
	              0 10px 10px rgba(0,0,0,.2),
	              0 20px 20px rgba(0,0,0,.3);
}

.sp-container h2 {
  position: absolute;
  top: 85%;
  line-height: 20px;
  height: 20px;
  margin-top: -20px;
  font-size: 20px;
  width: 100%;
  text-align: center;
  color: transparent;
  -webkit-animation: blurFadeInOut 3s ease-in backwards;
  -moz-animation: blurFadeInOut 3s ease-in backwards;
  -ms-animation: blurFadeInOut 3s ease-in backwards;
  animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
}
.sp-container h2.frame-2 {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}
.sp-container h2.frame-3 {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.sp-container h2.frame-4 {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}
/**/

@-webkit-keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #000;
    -webkit-transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #000;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #000;
    -webkit-transform: scale(0);
  }
}
@-webkit-keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #000;
    -webkit-transform: scale(1.3);
  }
  50% {
    opacity: 0.5;
    text-shadow: 0px 0px 10px #000;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #000;
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes fadeInBack {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
  50% {
    opacity: 0.4;
    -webkit-transform: scale(2);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: scale(5);
  }
}
@-webkit-keyframes fadeInRotate {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}
/**/

@-moz-keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #000;
    -moz-transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #000;
    -moz-transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #000;
    -moz-transform: scale(0);
  }
}
@-moz-keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #000;
    -moz-transform: scale(1.3);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #000;
    -moz-transform: scale(1);
  }
}
@-moz-keyframes fadeInBack {
  0% {
    opacity: 0;
    -moz-transform: scale(0);
  }
  50% {
    opacity: 0.4;
    -moz-transform: scale(2);
  }
  100% {
    opacity: 0.2;
    -moz-transform: scale(5);
  }
}
@-moz-keyframes fadeInRotate {
  0% {
    opacity: 0;
    -moz-transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1) rotate(0deg);
  }
}
/**/

@keyframes blurFadeInOut {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #000;
    transform: scale(1.3);
  }
  20%, 75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #000;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #000;
    transform: scale(0);
  }
}
@keyframes blurFadeIn {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #000;
    transform: scale(1.3);
  }
  50% {
    opacity: 0.5;
    text-shadow: 0px 0px 10px #000;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 1px #000;
    transform: scale(1);
  }
}
@keyframes fadeInBack {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.4;
    transform: scale(2);
  }
  100% {
    opacity: 0.2;
    transform: scale(5);
  }
}
@keyframes fadeInRotate {
  0% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}