@import url(https://fonts.googleapis.com/css?family=Finger+Paint);

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}


.efecto {
  background: black; 
  overflow: hidden;
  font: 10vw/100vh "Finger Paint";
  text-align: center;
  color: transparent;
  backface-visibility: hidden;
}
#myVideo {
  position: fixed;
  right: 0;
  bottom: 10;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(1, 1, 1, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  font-family: Arial;
}

#logo{ 
	position:absolute; 
	top:0; 
	left:0; 
        z-index:3;
} 

span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s 3s both;
}

span:nth-child(even){
  animation-name: smoky-mirror;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform:
      translate3d(15rem,-8rem,0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke; }
  to {
    transform:
      translate3d(18rem,-8rem,0)
      rotate(-40deg) 
      skewX(-70deg)
      scale(2);
     text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}