.bronze,
.silver {
  position: absolute;
  left: 2.5%;
  top: 43%;
  width: 51%;
}

.gold {
  position: absolute;
  left: 11.5%;
  top: 59%;
  width: 44%;
  z-index: 1;
  opacity: 0;
  animation: fadeIn 1s 5.5s ease forwards;
  transition: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

.bronze:before,
.bronze:after,
.silver:before,
.silver:after,
.gold:before,
.gold:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.bronze:after,
.silver:after,
.gold:after {
  opacity: 0;
  transition: 0.2s ease all;
}

.bronze[data-clicked='true']:after,
.silver[data-clicked='true']:after,
.gold[data-clicked='true']:after {
  opacity: 1;
}
.bronze[data-clicked='true']:before,
.bronze[data-clicked='true'] > img,
.silver[data-clicked='true']:before,
.silver[data-clicked='true'] > img,
.gold[data-clicked='true']:before,
.gold[data-clicked='true'] > img {
  opacity: 0 !important;
}
.bronze:before,
.silver:before {
  background-image: url('../assets/octopus/to-web/octo-ros-b.png');
}
.gold:before {
  background-image: url('../assets/octopus/to-web/octo-9-ros-b.png');
}

.bronze:after {
  background-image: url('../assets/octopus/to-web/octo-ros-c.png');
}
.silver:after {
  background-image: url('../assets/octopus/to-web/octo-ros-d.png');
}
.gold:after {
  background-image: url('../assets/octopus/to-web/octo-9-ros-c.png');
}
.arm {
  position: absolute;
  top: 45%;
  right: 0;
  width: 45%;
  transform: translateX(110%) rotate(45deg);
  transition: 0.5s 0s linear all;
}

.giraffe-slide-right {
  position: absolute;
  right: 18%;
  top: 8%;
  width: 26%;
  transform: translateX(170%);
  transition: 0.7s 0s linear all;
}

.giraffe-slide-up {
  transform: translateY(95%);
  transition: 0.7s 0.7s linear all;
}

.octo-slide-left {
  position: absolute;
  top: 0%;
  left: 18%;
  width: 60%;
  transform: translateX(-135%);
  transition: 1s 0s linear all;
}

.octo-slide-right {
  position: absolute;
  top: 25%;
  right: 7%;
  width: 79%;
  transform: translateX(110%);
  transition: 0.4s 1s linear all;
}

.octo-slide-up {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: auto;
  transform: translateY(115%);
  transition: 0.4s 1.3s linear all;
}

.js-play .octo-slide-up {
  transform: translateY(0%);
}

.yeti-slide-left {
  position: absolute;
  top: 11%;
  left: 25%;
  width: 58%;
  transform: rotate(0deg) translateX(-145%);
  transition: 0.5s 0s linear all;
}

.yeti-slide-right {
  position: absolute;
  bottom: 16%;
  left: 4%;
  width: 95%;
  transform: translateX(145%);
  transition: 0.5s 0.5s linear all;
}