.coqui-ani {
  width: 100px;
  height: 100px;
  background-position: left top;
  background-repeat: no-repeat;
  pointer-events: none;
}

.coqui-ani--1_5x {
  transform: scale(1.5);
}

.coqui-ani--2x {
  transform: scale(2);
}

.coqui-ani--3x {
  transform: scale(3);
}

.coqui-gp-test,
.coqui-ani-correct {
  background: none;
  background-image: url("../images-r/coqui/coqui-ani-correct.svg");
  background-size: 900px;
}

.goCorrect {
  animation: goCorrect 0.8s steps(9) 1;
}

@keyframes goCorrect {
 100% { background-position-x: -900px; }
}

.coqui-ani-incorrect {
  background-image: url("../images-r/coqui/coqui-ani-incorrect.svg");
  background-size: 900px;
}

.goIncorrect {
  animation: goIncorrect 0.8s steps(9) 1;
}

@keyframes goIncorrect {
 100% { background-position-x: -900px; }
}

.coqui-ani-sad {
  background-image: url("../images-r/coqui/coqui-ani-sad.svg");
  background-size: 400px; 
}

.goSad {
  /* Stop on the last frame  */
  animation: goSad 0.3s steps(3) forwards;
}

@keyframes goSad {
 100% { background-position-x: -300px; }
}

.coqui-ani-shocked {
  background-image: url("../images-r/coqui/coqui-ani-shocked.svg");
  background-size: 400px;
}

.goShocked {
  animation: goShocked 0.3s steps(3) forwards;
}

@keyframes goShocked {
 100% { background-position-x: -300px; }
}

.coqui-ani-neutral {
  background-image: url("../images-r/coqui/coqui-ani-neutral.svg");
  background-size: 600px;
}

.goNeutral {
  animation: goNeutral 0.4s steps(6) 2;
}

@keyframes goNeutral {
  100% { background-position: left -600px top 0px; }
}

#start-button .coqui-ani-neutral {
  position: absolute;
  bottom: 30px;
}

.coqui-ani-wondering {
  background-image: url("../images-r/coqui/coqui-ani-wondering.svg");
  background-size: 400px;
}

.goWondering {
  animation: goWondering 0.6s steps(4) infinite;
}

@keyframes goWondering {
 100% { background-position-x: -400px; }
}

.coqui-ani-happy {
  background-image: url("../images-r/coqui/coqui-ani-happy.svg");
  background-size: 600px;
}

.goHappy {
  animation: goHappy 0.6s steps(6) infinite;
}

@keyframes goHappy {
 100% { background-position-x: -600px; }
}

.coqui-ani-happy-2 {
  background-image: url("../images-r/coqui/coqui-ani-happy-2.svg");
  background-size: 600px;
}

.goHappy-2 {
  animation: goHappy-2 0.6s steps(6) infinite;
}

@keyframes goHappy-2 {
 100% { background-position-x: -600px; }
}

.coqui-ani-fist {
  background-image: url("../images-r/coqui/coqui-ani-fist.svg");
  background-size: 400px;
}

.goFist {
  animation: goFist 0.4s steps(4) 1;
}

@keyframes goFist {
 100% { background-position-x: -400px; }
}