@charset "utf-8";
/* CSS Document */
body{
    width:100%;
    height:100%;
    animation: animacionColor 10s infinite;
}
.logo_intro{
	position:absolute;
	top:35%;
	left:42%;
	width:229px;
    height:219px;
	background:	url(../img/logo_intro.png) repeat-x;
	animation:walklogo 11s steps(6) infinite;
}

.flecha {
  position:absolute;
  /*top:63.2%;*/
  /*bottom:0%;*/
  top:63.2%;
  left:48%;
  width:26px;
  height:156px;
  margin:auto;  
  background: url(../img/fle.png) repeat-x;   /* Temporal, sólo para guiarnos */
  animation:walkfle 2s steps(13) infinite;
}
@keyframes walklogo {
  0% { background-position:0 }
  100% { background-position:-1380px }
}
@keyframes walkfle {
  0% { background-position:0 }
  100% { background-position:-332px }
}
@keyframes animacionColor{
    0% {background: #1FC3F3;} /*celesteoscuro*/
    20% {background: #FFCB00;} /*amarilloclaro*/
    40% {background: #1FD2F3;}/*naranjaoscuro*/
    60% {background: #E55344;}/*tomate*/
    80% {background: #FF8919;}/*celesteclaro*/
    100% {background: #FFD900;}/*amarillooscuro*/
}