#cyan-1 {
	background: url('./../imgs/anims.png') no-repeat -162px -53px;
	width: 174px;
	height: 194px;
}

#cyan-2 {
	background: url('./../imgs/anims.png') no-repeat -373px -43px;
	width: 157px;
	height: 204px;
}

#cyan-3 {
	background: url('./../imgs/anims.png') no-repeat -574px -46px;
	width: 154px;
	height: 202px;
}

#cyan-4 {
	background: url('./../imgs/anims.png') no-repeat -761px -64px;
	width: 172px;
	height: 177px;
}

#cyan-5 {
	background: url('./../imgs/anims.png') no-repeat -952px -48px;
	width: 153px;
	height: 205px;
}

#cyan-6 {
	background: url('./../imgs/anims.png') no-repeat -1138px -49px;
	width: 112px;
	height: 199px;
}

#cyan-7 {
	background: url('./../imgs/anims.png') no-repeat -1292px -48px;
	width: 154px;
	height: 199px;
}

#cyan-animation {
    width: 174px; 
    height: 194px; 
    background: url('./../imgs/anims.png') no-repeat;
    animation: cyanSpriteAnimation 0.5s infinite;
}

@keyframes cyanSpriteAnimation {
    0% {
        background-position: -162px -53px;
        width: 174px;
        height: 194px;
    }
    14.27% {
        background-position: -162px -53px;
        width: 174px;
        height: 194px;
    }
    14.28% {
        background-position: -373px -43px;
        width: 157px;
        height: 204px;
    }
    28.55% {
        background-position: -373px -43px;
        width: 157px;
        height: 204px;
    }
    28.56% {
        background-position: -574px -46px;
        width: 154px;
        height: 202px;
    }
    42.83% {
        background-position: -574px -46px;
        width: 154px;
        height: 202px;
    }
    42.84% {
        background-position: -761px -64px;
        width: 172px;
        height: 177px;
    }
    57.11% {
        background-position: -761px -64px;
        width: 172px;
        height: 177px;
    }
    57.12% {
        background-position: -952px -48px;
        width: 153px;
        height: 205px;
    }
    71.39% {
        background-position: -952px -48px;
        width: 153px;
        height: 205px;
    }
    71.4% {
        background-position: -1138px -49px;
        width: 112px;
        height: 199px;
    }
    85.67% {
        background-position: -1138px -49px;
        width: 112px;
        height: 199px;
    }
    85.68% {
        background-position: -1292px -48px;
        width: 154px;
        height: 199px;
    }
    99.99% {
        background-position: -1292px -48px;
        width: 154px;
        height: 199px;
    }
    100% { /* Primer fotograma añadido aquí para cerrar el ciclo */
        background-position: -162px -53px;
        width: 174px;
        height: 194px;
    }
}

.yellow-1 {
	background: url('./../imgs/anims.png') no-repeat -156px -322px;
	width: 177px;
	height: 172px;
}

.yellow-2 {
	background: url('./../imgs/anims.png') no-repeat -369px -313px;
	width: 145px;
	height: 170px;
}

.yellow-3 {
	background: url('./../imgs/anims.png') no-repeat -568px -312px;
	width: 141px;
	height: 180px;
}

.yellow-4 {
	background: url('./../imgs/anims.png') no-repeat -755px -329px;
	width: 163px;
	height: 160px;
}

.yellow-5 {
	background: url('./../imgs/anims.png') no-repeat -948px -312px;
	width: 135px;
	height: 175px;
}

.yellow-6 {
	background: url('./../imgs/anims.png') no-repeat -1131px -315px;
	width: 101px;
	height: 175px;
}

.yellow-7 {
	background: url('./../imgs/anims.png') no-repeat -1285px -317px;
	width: 147px;
	height: 177px;
}

#yellow-animation {
    width: 177px; 
    height: 172px; 
    background: url('./../imgs/anims.png') no-repeat;
    animation: yellowSpriteAnimation 0.5s infinite;
}

@keyframes yellowSpriteAnimation {
    0% {
        background-position: -156px -322px;
        width: 177px;
        height: 172px;
    }
    14.27% {
        background-position: -156px -322px;
        width: 177px;
        height: 172px;
    }
    14.28% {
        background-position: -369px -313px;
        width: 145px;
        height: 170px;
    }
    28.55% {
        background-position: -369px -313px;
        width: 145px;
        height: 170px;
    }
    28.56% {
        background-position: -568px -312px;
        width: 141px;
        height: 180px;
    }
    42.83% {
        background-position: -568px -312px;
        width: 141px;
        height: 180px;
    }
    42.84% {
        background-position: -755px -329px;
        width: 163px;
        height: 160px;
    }
    57.11% {
        background-position: -755px -329px;
        width: 163px;
        height: 160px;
    }
    57.12% {
        background-position: -948px -312px;
        width: 135px;
        height: 175px;
    }
    71.39% {
        background-position: -948px -312px;
        width: 135px;
        height: 175px;
    }
    71.4% {
        background-position: -1131px -315px;
        width: 101px;
        height: 175px;
    }
    85.67% {
        background-position: -1131px -315px;
        width: 101px;
        height: 175px;
    }
    85.68% {
        background-position: -1285px -317px;
        width: 147px;
        height: 177px;
    }
    99.99% {
        background-position: -1285px -317px;
        width: 147px;
        height: 177px;
    }
    100% { /* Primer fotograma añadido aquí para cerrar el ciclo */
        background-position: -156px -322px; 
        width: 177px; 
        height: 172px; 
    }
}

.magenta-1 {
	background: url('./../imgs/anims.png') no-repeat -168px -561px;
	width: 174px;
	height: 151px;
}

.magenta-2 {
	background: url('./../imgs/anims.png') no-repeat -380px -551px;
	width: 143px;
	height: 161px;
}

.magenta-3 {
	background: url('./../imgs/anims.png') no-repeat -580px -550px;
	width: 138px;
	height: 163px;
}

.magenta-4 {
	background: url('./../imgs/anims.png') no-repeat -767px -567px;
	width: 159px;
	height: 140px;
}

.magenta-5 {
	background: url('./../imgs/anims.png') no-repeat -958px -551px;
	width: 134px;
	height: 168px;
}

.magenta-6 {
	background: url('./../imgs/anims.png') no-repeat -1145px -554px;
	width: 96px;
	height: 159px;
}

.magenta-7 {
	background: url('./../imgs/anims.png') no-repeat -1298px -555px;
	width: 143px;
	height: 157px;
}

#magenta-animation {
    width: 174px; 
    height: 151px; 
    background: url('./../imgs/anims.png') no-repeat;
    animation: magentaSpriteAnimation 0.5s infinite;
}

@keyframes magentaSpriteAnimation {
    0% {
        background-position: -168px -561px;
        width: 174px;
        height: 151px;
    }
    14.27% {
        background-position: -168px -561px;
        width: 174px;
        height: 151px;
    }
    14.28% {
        background-position: -380px -551px;
        width: 143px;
        height: 161px;
    }
    28.55% {
        background-position: -380px -551px;
        width: 143px;
        height: 161px;
    }
    28.56% {
        background-position: -580px -550px;
        width: 138px;
        height: 163px;
    }
    42.83% {
        background-position: -580px -550px;
        width: 138px;
        height: 163px;
    }
    42.84% {
        background-position: -767px -567px;
        width: 159px;
        height: 140px;
    }
    57.11% {
        background-position: -767px -567px;
        width: 159px;
        height: 140px;
    }
    57.12% {
        background-position: -958px -551px;
        width: 134px;
        height: 168px;
    }
    71.39% {
        background-position: -958px -551px;
        width: 134px;
        height: 168px;
    }
    71.4% {
        background-position: -1145px -554px;
        width: 96px;
        height: 159px;
    }
    85.67% {
        background-position: -1145px -554px;
        width: 96px;
        height: 159px;
    }
    85.68% {
        background-position: -1298px -555px;
        width: 143px;
        height: 157px;
    }
    99.99% {
        background-position: -1298px -555px;
        width: 143px;
        height: 157px;
    }
    100% {
        background-position: -168px -561px;
        width: 174px;
        height: 151px;
    }
}

.blue-1 {
	background: url('./../imgs/anims.png') no-repeat -162px -814px;
	width: 174px;
	height: 194px;
}

.blue-2 {
	background: url('./../imgs/anims.png') no-repeat -373px -804px;
	width: 157px;
	height: 204px;
}

.blue-3 {
	background: url('./../imgs/anims.png') no-repeat -574px -807px;
	width: 154px;
	height: 202px;
}

.blue-4 {
	background: url('./../imgs/anims.png') no-repeat -761px -825px;
	width: 172px;
	height: 178px;
}

.blue-5 {
	background: url('./../imgs/anims.png') no-repeat -952px -809px;
	width: 153px;
	height: 206px;
}

.blue-6 {
	background: url('./../imgs/anims.png') no-repeat -1138px -810px;
	width: 112px;
	height: 199px;
}

.blue-7 {
	background: url('./../imgs/anims.png') no-repeat -1292px -809px;
	width: 154px;
	height: 199px;
}

#blue-animation {
    width: 174px; 
    height: 194px; 
    background: url('./../imgs/anims.png') no-repeat;
    animation: blueSpriteAnimation 0.5s infinite;
}

@keyframes blueSpriteAnimation {
    0% {
        background-position: -162px -814px;
        width: 174px;
        height: 194px;
    }
    14.27% {
        background-position: -162px -814px;
        width: 174px;
        height: 194px;
    }
    14.28% {
        background-position: -373px -804px;
        width: 157px;
        height: 204px;
    }
    28.55% {
        background-position: -373px -804px;
        width: 157px;
        height: 204px;
    }
    28.56% {
        background-position: -574px -807px;
        width: 154px;
        height: 202px;
    }
    42.83% {
        background-position: -574px -807px;
        width: 154px;
        height: 202px;
    }
    42.84% {
        background-position: -761px -825px;
        width: 172px;
        height: 178px;
    }
    57.11% {
        background-position: -761px -825px;
        width: 172px;
        height: 178px;
    }
    57.12% {
        background-position: -952px -809px;
        width: 153px;
        height: 206px;
    }
    71.39% {
        background-position: -952px -809px;
        width: 153px;
        height: 206px;
    }
    71.4% {
        background-position: -1138px -810px;
        width: 112px;
        height: 199px;
    }
    85.67% {
        background-position: -1138px -810px;
        width: 112px;
        height: 199px;
    }
    85.68% {
        background-position: -1292px -809px;
        width: 154px;
        height: 199px;
    }
    99.99% {
        background-position: -1292px -809px;
        width: 154px;
        height: 199px;
    }
    100% {
        background-position: -162px -814px;
        width: 174px;
        height: 194px;
    }
}

.red-1 {
	background: url('./../imgs/anims.png') no-repeat -150px -1079px;
	width: 177px;
	height: 172px;
}

.red-2 {
	background: url('./../imgs/anims.png') no-repeat -363px -1070px;
	width: 145px;
	height: 170px;
}

.red-3 {
	background: url('./../imgs/anims.png') no-repeat -562px -1069px;
	width: 141px;
	height: 180px;
}

.red-4 {
	background: url('./../imgs/anims.png') no-repeat -749px -1086px;
	width: 163px;
	height: 160px;
}

.red-5 {
	background: url('./../imgs/anims.png') no-repeat -942px -1069px;
	width: 135px;
	height: 175px;
}

.red-6 {
	background: url('./../imgs/anims.png') no-repeat -1125px -1072px;
	width: 101px;
	height: 175px;
}

.red-7 {
	background: url('./../imgs/anims.png') no-repeat -1279px -1074px;
	width: 147px;
	height: 177px;
}

#red-animation {
    width: 177px; 
    height: 172px; 
    background: url('./../imgs/anims.png') no-repeat;
    animation: redSpriteAnimation 0.5s infinite;
}

@keyframes redSpriteAnimation {
    0% {
        background-position: -150px -1079px;
        width: 177px;
        height: 172px;
    }
    14.27% {
        background-position: -150px -1079px;
        width: 177px;
        height: 172px;
    }
    14.28% {
        background-position: -363px -1070px;
        width: 145px;
        height: 170px;
    }
    28.55% {
        background-position: -363px -1070px;
        width: 145px;
        height: 170px;
    }
    28.56% {
        background-position: -562px -1069px;
        width: 141px;
        height: 180px;
    }
    42.83% {
        background-position: -562px -1069px;
        width: 141px;
        height: 180px;
    }
    42.84% {
        background-position: -749px -1086px;
        width: 163px;
        height: 160px;
    }
    57.11% {
        background-position: -749px -1086px;
        width: 163px;
        height: 160px;
    }
    57.12% {
        background-position: -942px -1069px;
        width: 135px;
        height: 175px;
    }
    71.39% {
        background-position: -942px -1069px;
        width: 135px;
        height: 175px;
    }
    71.4% {
        background-position: -1125px -1072px;
        width: 101px;
        height: 175px;
    }
    85.67% {
        background-position: -1125px -1072px;
        width: 101px;
        height: 175px;
    }
    85.68% {
        background-position: -1279px -1074px;
        width: 147px;
        height: 177px;
    }
    99.99% {
        background-position: -1279px -1074px;
        width: 147px;
        height: 177px;
    }
    100% {
        background-position: -150px -1079px;
        width: 177px;
        height: 172px;
    }
}

.green-1 {
	background: url('./../imgs/anims.png') no-repeat -155px -1310px;
	width: 177px;
	height: 214px;
}

.green-2 {
	background: url('./../imgs/anims.png') no-repeat -368px -1300px;
	width: 158px;
	height: 213px;
}

.green-3 {
	background: url('./../imgs/anims.png') no-repeat -567px -1303px;
	width: 157px;
	height: 219px;
}

.green-4 {
	background: url('./../imgs/anims.png') no-repeat -754px -1321px;
	width: 175px;
	height: 198px;
}

.green-5 {
	background: url('./../imgs/anims.png') no-repeat -947px -1305px;
	width: 154px;
	height: 212px;
}

.green-6 {
	background: url('./../imgs/anims.png') no-repeat -1130px -1306px;
	width: 116px;
	height: 214px;
}

.green-7 {
	background: url('./../imgs/anims.png') no-repeat -1284px -1305px;
	width: 158px;
	height: 219px;
}

#green-animation {
    width: 177px; 
    height: 214px; 
    background: url('./../imgs/anims.png') no-repeat;
    animation: greenSpriteAnimation 0.5s infinite;
}

@keyframes greenSpriteAnimation {
    0% {
        background-position: -155px -1310px;
        width: 177px;
        height: 214px;
    }
    14.27% {
        background-position: -155px -1310px;
        width: 177px;
        height: 214px;
    }
    14.28% {
        background-position: -368px -1300px;
        width: 158px;
        height: 213px;
    }
    28.55% {
        background-position: -368px -1300px;
        width: 158px;
        height: 213px;
    }
    28.56% {
        background-position: -567px -1303px;
        width: 157px;
        height: 219px;
    }
    42.83% {
        background-position: -567px -1303px;
        width: 157px;
        height: 219px;
    }
    42.84% {
        background-position: -754px -1321px;
        width: 175px;
        height: 198px;
    }
    57.11% {
        background-position: -754px -1321px;
        width: 175px;
        height: 198px;
    }
    57.12% {
        background-position: -947px -1305px;
        width: 154px;
        height: 212px;
    }
    71.39% {
        background-position: -947px -1305px;
        width: 154px;
        height: 212px;
    }
    71.4% {
        background-position: -1130px -1306px;
        width: 116px;
        height: 214px;
    }
    85.67% {
        background-position: -1130px -1306px;
        width: 116px;
        height: 214px;
    }
    85.68% {
        background-position: -1284px -1305px;
        width: 158px;
        height: 219px;
    }
    99.99% {
        background-position: -1284px -1305px;
        width: 158px;
        height: 219px;
    }
    100% {
        background-position: -155px -1310px;
        width: 177px;
        height: 214px;
    }
}

.white-1 {
	background: url('./../imgs/anims.png') no-repeat -155px -1580px;
	width: 177px;
	height: 214px;
}

.white-2 {
	background: url('./../imgs/anims.png') no-repeat -368px -1570px;
	width: 158px;
	height: 213px;
}

.white-3 {
	background: url('./../imgs/anims.png') no-repeat -567px -1573px;
	width: 157px;
	height: 219px;
}

.white-4 {
	background: url('./../imgs/anims.png') no-repeat -754px -1591px;
	width: 175px;
	height: 198px;
}

.white-5 {
	background: url('./../imgs/anims.png') no-repeat -947px -1575px;
	width: 154px;
	height: 212px;
}

.white-6 {
	background: url('./../imgs/anims.png') no-repeat -1130px -1576px;
	width: 116px;
	height: 214px;
}

.white-7 {
	background: url('./../imgs/anims.png') no-repeat -1284px -1575px;
	width: 158px;
	height: 219px;
}

#white-animation {
    width: 174px; 
    height: 194px; 
    background: url('./../imgs/anims.png') no-repeat;
    animation: whiteSpriteAnimation 0.5s infinite;
}

@keyframes whiteSpriteAnimation {
    0% {
        background-position: -155px -1580px;
        width: 177px;
        height: 214px;
    }
    14.27% {
        background-position: -155px -1580px;
        width: 177px;
        height: 214px;
    }
    14.28% {
        background-position: -368px -1570px;
        width: 158px;
        height: 213px;
    }
    28.55% {
        background-position: -368px -1570px;
        width: 158px;
        height: 213px;
    }
    28.56% {
        background-position: -567px -1573px;
        width: 157px;
        height: 219px;
    }
    42.83% {
        background-position: -567px -1573px;
        width: 157px;
        height: 219px;
    }
    42.84% {
        background-position: -754px -1591px;
        width: 175px;
        height: 198px;
    }
    57.11% {
        background-position: -754px -1591px;
        width: 175px;
        height: 198px;
    }
    57.12% {
        background-position: -947px -1575px;
        width: 154px;
        height: 212px;
    }
    71.39% {
        background-position: -947px -1575px;
        width: 154px;
        height: 212px;
    }
    71.4% {
        background-position: -1130px -1576px;
        width: 116px;
        height: 214px;
    }
    85.67% {
        background-position: -1130px -1576px;
        width: 116px;
        height: 214px;
    }
    85.68% {
        background-position: -1284px -1575px;
        width: 158px;
        height: 219px;
    }
    99.99% {
        background-position: -1284px -1575px;
        width: 158px;
        height: 219px;
    }
    100% {
        background-position: -155px -1580px;
        width: 177px;
        height: 214px;
    }
}

.black-1 {
	background: url('./../imgs/anims.png') no-repeat -163px -1881px;
	width: 173px;
	height: 152px;
}

.black-2 {
	background: url('./../imgs/anims.png') no-repeat -374px -1872px;
	width: 144px;
	height: 161px;
}

.black-3 {
	background: url('./../imgs/anims.png') no-repeat -575px -1871px;
	width: 137px;
	height: 163px;
}

.black-4 {
	background: url('./../imgs/anims.png') no-repeat -762px -1887px;
	width: 159px;
	height: 140px;
}

.black-5 {
	background: url('./../imgs/anims.png') no-repeat -952px -1871px;
	width: 134px;
	height: 168px;
}

.black-6 {
	background: url('./../imgs/anims.png') no-repeat -1139px -1874px;
	width: 96px;
	height: 159px;
}

.black-7 {
	background: url('./../imgs/anims.png') no-repeat -1292px -1876px;
	width: 143px;
	height: 156px;
}

#black-animation {
    width: 174px;
    height: 194px;
    background: url('./../imgs/anims.png') no-repeat;
    animation: blackSpriteAnimation 0.5s infinite;
}

@keyframes blackSpriteAnimation {
    0% {
        background-position: -163px -1881px;
        width: 173px;
        height: 152px;
    }
    14.27% {
        background-position: -163px -1881px;
        width: 173px;
        height: 152px;
    }
    14.28% {
        background-position: -374px -1872px;
        width: 144px;
        height: 161px;
    }
    28.55% {
        background-position: -374px -1872px;
        width: 144px;
        height: 161px;
    }
    28.56% {
        background-position: -575px -1871px;
        width: 137px;
        height: 163px;
    }
    42.83% {
        background-position: -575px -1871px;
        width: 137px;
        height: 163px;
    }
    42.84% {
        background-position: -762px -1887px;
        width: 159px;
        height: 140px;
    }
    57.11% {
        background-position: -762px -1887px;
        width: 159px;
        height: 140px;
    }
    57.12% {
        background-position: -952px -1871px;
        width: 134px;
        height: 168px;
    }
    71.39% {
        background-position: -952px -1871px;
        width: 134px;
        height: 168px;
    }
    71.4% {
        background-position: -1139px -1874px;
        width: 96px;
        height: 159px;
    }
    85.67% {
        background-position: -1139px -1874px;
        width: 96px;
        height: 159px;
    }
    85.68% {
        background-position: -1292px -1876px;
        width: 143px;
        height: 156px;
    }
    99.99% {
        background-position: -1292px -1876px;
        width: 143px;
        height: 156px;
    }
    100% {
        background-position: -163px -1881px;
        width: 173px;
        height: 152px;
    }
}