@-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%; } 

}

/**************** personajes ************************/

.hombre_1 {

  background: url(../img/avatars/h_1.png) 0 0;

  background-size: auto 1200%;

  background-repeat: no-repeat;

  background-position: 50% 0;

  padding-bottom: 100%;

}

.hombre_1.play {

  -webkit-animation: play 2.7s steps(11) infinite;

  -moz-animation: play 2.7s steps(11) infinite;

  -o-animation: play  2.7s steps(11) infinite;

  animation: play 2.7s steps(11) infinite;

}

.hombre_1.stop {

  background-position: 50% 0;

}

.hombre_2 {

  background: url(../img/avatars/h_2.png) 0 0;

  background-size: auto 1200%;

  background-repeat: no-repeat;

  background-position: 50% 0;

  padding-bottom: 100%;

}

.hombre_2.play {

  -webkit-animation: play 2.7s steps(11) infinite;

  -moz-animation: play 2.7s steps(11) infinite;

  -o-animation: play  2.7s steps(11) infinite;

  animation: play 2.7s steps(11) infinite;

}

.hombre_2.stop {

  background-position: 50% 0;

}

.hombre_3 {

  background: url(../img/avatars/h_3.png) 0 0;

  background-size: auto 1200%;

  background-repeat: no-repeat;

  background-position: 50% 0;

  padding-bottom: 100%;

}

.hombre_3.play {

  -webkit-animation: play 2.7s steps(11) infinite;

  -moz-animation: play 2.7s steps(11) infinite;

  -o-animation: play  2.7s steps(11) infinite;

  animation: play 2.7s steps(11) infinite;

}

.hombre_3.stop {

  background-position: 50% 0;

}

.hombre_4 {

  background: url(../img/avatars/h_4.png) 0 0;

  background-size: auto 1200%;

  background-repeat: no-repeat;

  background-position: 50% 0;

  padding-bottom: 100%;

}

.hombre_4.play {

  -webkit-animation: play 2.7s steps(11) infinite;

  -moz-animation: play 2.7s steps(11) infinite;

  -o-animation: play  2.7s steps(11) infinite;

  animation: play 2.7s steps(11) infinite;

}

.hombre_4.stop {

  background-position: 50% 0;

}

.hombre_5 {

  background: url(../img/avatars/h_5.png) 0 0;

  background-size: auto 1200%;

  background-repeat: no-repeat;

  background-position: 50% 0;

  padding-bottom: 100%;

}

.hombre_5.play {

  -webkit-animation: play 2.7s steps(11) infinite;

  -moz-animation: play 2.7s steps(11) infinite;

  -o-animation: play  2.7s steps(11) infinite;

  animation: play 2.7s steps(11) infinite;

}

.hombre_5.stop {

  background-position: 50% 0;

}

.mujer_1 {

  background: url(../img/avatars/m_1.png) 0 0;

  background-size: auto 1200%;

  background-repeat: no-repeat;

  background-position: 50% 0;

  padding-bottom: 100%;

}

.mujer_1.play {

  -webkit-animation: play 2.7s steps(11) infinite;

  -moz-animation: play 2.7s steps(11) infinite;

  -o-animation: play  2.7s steps(11) infinite;

  animation: play 2.7s steps(11) infinite;

}

.mujer_1.stop {

  background-position: 50% 0;

}

.mujer_2 {

  background: url(../img/avatars/m_2.png) 0 0;

  background-size: auto 1200%;

  background-repeat: no-repeat;

  background-position: 50% 0;

  padding-bottom: 100%;

}

.mujer_2.play {

  -webkit-animation: play 2.7s steps(11) infinite;

  -moz-animation: play 2.7s steps(11) infinite;

  -o-animation: play  2.7s steps(11) infinite;

  animation: play 2.7s steps(11) infinite;

}

.mujer_2.stop {

  background-position: 50% 0;

}

.mujer_3 {

  background: url(../img/avatars/m_3.png) 0 0;

  background-size: auto 1200%;

  background-repeat: no-repeat;

  background-position: 50% 0;

  padding-bottom: 100%;

}

.mujer_3.play {

  -webkit-animation: play 2.7s steps(11) infinite;

  -moz-animation: play 2.7s steps(11) infinite;

  -o-animation: play  2.7s steps(11) infinite;

  animation: play 2.7s steps(11) infinite;

}

.mujer_3.stop {

  background-position: 50% 0;

}