Maphre-PLD-2026/css/sprites.css

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

/***** MARCOS ******/
.personaje_m_0 {
	width: 353px;
	height: calc(4124px / 8);
	background: url(../img/sprites/marco_0.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_m_0.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_m_0.stop {
	background-position: 50% 0;
}
.personaje_m_1 {
	width: 257px;
	height: calc(3640px / 8);
	background: url(../img/sprites/marco_1.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_m_1.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_m_1.stop {
	background-position: 50% 0;
}
.personaje_m_2 {
	width: 257px;
	height: calc(3632px / 8);
	background: url(../img/sprites/marco_2.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% -454px;
}
.personaje_m_2.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_m_2.stop {
	background-position: 50% 0;
}
.personaje_m_4 {
	width: 161px;
	height: calc(1282px / 8);
	background: url(../img/sprites/marco_4.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_m_4.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_m_4.stop {
	background-position: 50% 0;
}
.personaje_m_6 {
	width: 400px;
	height: calc(3704px / 8);
	background: url(../img/sprites/marco_6.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_m_6.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_m_6.stop {
	background-position: 50% 0;
}
.personaje_m_7 {
	width: 400px;
	height: calc(3704px / 8);
	background: url(../img/sprites/marco_7.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_m_7.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_m_7.stop {
	background-position: 50% 0;
}
.personaje_m_8 {
	width: 246px;
	height: calc(4256px / 8);
	background: url(../img/sprites/marco_8.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_m_8.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_m_8.stop {
	background-position: 50% 0;
}
.personaje_m_9 {
	width: 199px;
	height: calc(2372px / 8);
	background: url(../img/sprites/marco_9.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_m_9.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_m_9.stop {
	background-position: 50% 0;
}
/***** RUBEN *****/
.personaje_r_1 {
	width: 256px;
	height: calc(3464px / 8);
	background: url(../img/sprites/ruben_1.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_r_1.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_r_1.stop {
	background-position: 50% -1299px;
}
.personaje_r_2 {
	width: 256px;
	height: calc(3456px / 8);
	background: url(../img/sprites/ruben_2.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_r_2.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_r_2.stop {
	background-position: 50% 0;
}
.personaje_r_3 {
	width: 448px;
	height: calc(3584px / 8);
	background: url(../img/sprites/ruben_3.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_r_3.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_r_3.stop {
	background-position: 50% 0;
}
.personaje_r_4 {
	width: 161px;
	height: calc(1287px / 8);
	background: url(../img/sprites/ruben_4.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_r_4.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_r_4.stop {
	background-position: 50% 0;
}
.personaje_r_5 {
	width: 271px;
	height: calc(3568px / 8);
	background: url(../img/sprites/ruben_5.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_r_5.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_r_5.stop {
	background-position: 50% 0;
}
.personaje_r_6 {
	width: 271px;
	height: calc(3568px / 8);
	background: url(../img/sprites/ruben_6.png) 0 0;
	background-size: auto 800%;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.personaje_r_6.play {
	-webkit-animation: play 1.6s steps(7) infinite;
	-moz-animation: play 1.6s steps(7) infinite;
	-o-animation: play 	1.6s steps(7) infinite;
	animation: play 1.6s steps(7) infinite;
}
.personaje_r_6.stop {
	background-position: 50% 0;
}