@-webkit-keyframes play {
  0% {
    background-position: 50% 0%; }
  100% {
    background-position: 50% 100%; } }
@-moz-keyframes play {
  0% {
    background-position: 50% 0%; }
  100% {
    background-position: 50% 100%; } }
@-ms-keyframes play {
  0% {
    background-position: 50% 0%; }
  100% {
    background-position: 50% 100%; } }
@-o-keyframes play {
  0% {
    background-position: 50% 0%; }
  100% {
    background-position: 50% 100%; } }
@keyframes play {
  0% {
    background-position: 50% 0%; }
  100% {
    background-position: 50% 100%; } }
.personaje0 { 
	width: 100%;
  /*height: 416px;*/
	background: url("../img/avatar/h_sprite03.png") 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-repeat: no-repeat;
  background-position: 50% 0; 
  padding-bottom: 100%;
}

.personaje0.play {
  -webkit-animation: play 1.8s steps(7) infinite;
  -moz-animation: play 1.8s steps(7) infinite;
  -ms-animation: play 1.8s steps(7) infinite;
  -o-animation: play 1.8s steps(7) infinite;
  animation: play 1.8s steps(7) infinite; 
}

.personaje0.stop {
  background-position: 50% 100%; 
}


.personaje1 { 
  width: 100%;
  /*height: 416px;*/
  background: url("../img/avatar/m_sprite04_resp.png") 0 0;
  background-size: auto 1200%;
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-position: 50% 0; 
  padding-bottom: 100%;
}

.personaje1.play {
  -webkit-animation: play 1.8s steps(11) infinite;
  -moz-animation: play 1.8s steps(11) infinite;
  -ms-animation: play 1.8s steps(11) infinite;
  -o-animation: play 1.8s steps(11) infinite;
  animation: play 1.8s steps(11) infinite; 
}

.personaje1.stop {
  background-position: 50% 100%; 
}


.personaje2 { 
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0;
  background: url(../img/avatar/m_sprites04.png) 0 0;
  background-size: auto 800%;
  background-repeat: no-repeat;
  background-position: 50% 0;
  /*z-index: 1010;*/
}

.personaje2.play {
  -webkit-animation: play 1.8s steps(7) infinite;
  -moz-animation: play 1.8s steps(7) infinite;
  -ms-animation: play 1.8s steps(7) infinite;
  -o-animation: play 1.8s steps(7) infinite;
  animation: play 1.8s steps(7) infinite; 
}

.personaje2.stop {
  background-position: 50% 100%; 
}

.personaje3 { 
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0;
  background: url(../img/avatar/m_sprite04_resp.png) 0 0;
  background-size: auto 800%;
  background-repeat: no-repeat;
  background-position: 50% 0;
}

.personaje3.play {
  -webkit-animation: play 1.8s steps(7) infinite;
  -moz-animation: play 1.8s steps(7) infinite;
  -ms-animation: play 1.8s steps(7) infinite;
  -o-animation: play 1.8s steps(7) infinite;
  animation: play 1.8s steps(7) infinite; 
}

.personaje3.stop {
  background-position: 50% 100%; 
}

.parent-personaje {
  position: relative;
  width: 100%;
  
}

.parent-personaje:before {
  content: "";
  display: block;
  padding-top: 65%;
}