.divae-clickable-animation__video-container {
  position: relative;
}
.divae-clickable-animation__indicator {
  position: relative;
  left: 50%;
}
.divae-clickable-animation__indicator span {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #ea1b0a;
  border-radius: 50%;
  animation: ring 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  opacity: 0;
  filter: blur(1px);
}
@media only screen and (min-width: 768px) {
  .divae-clickable-animation__indicator span {
    width: 30px;
    height: 30px;
  }
}
.divae-clickable-animation__indicator span:nth-child(1) {
  animation-delay: 0ms;
}
.divae-clickable-animation__indicator span:nth-child(2) {
  animation-delay: 350ms;
}
.divae-clickable-animation__indicator--big span {
  width: 40px;
  height: 40px;
}
@media only screen and (min-width: 768px) {
  .divae-clickable-animation__indicator--big span {
    width: 50px;
    height: 50px;
  }
}
@keyframes ring {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0.5;
  }
  35% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0.06;
  }
  50% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0;
  }
}
.divae-clickable-animation__btn {
  position: absolute;
  cursor: pointer;
  background-color: unset;
  border: none;
}
.divae-clickable-animation__btn:focus-visible {
  border: 3px solid #0175c2;
  border-radius: 20%;
}
.divae-clickable-animation [data-btn-1] {
  width: 12%;
  height: 11%;
  top: 10%;
  left: 7%;
}
@media only screen and (min-width: 768px) {
  .divae-clickable-animation [data-btn-1] {
    width: 5.5%;
    height: 12%;
    top: 8%;
    left: 27%;
  }
}
.divae-clickable-animation [data-btn-2] {
  width: 12%;
  height: 12%;
  top: 10%;
  right: 8%;
}
@media only screen and (min-width: 768px) {
  .divae-clickable-animation [data-btn-2] {
    width: 6%;
    height: 13%;
    top: 8%;
    right: 32%;
  }
}
.divae-clickable-animation [data-btn-3] {
  width: 60%;
  height: 12%;
  top: 39%;
  left: 20%;
  transform: skew(42deg) rotate(-4deg);
}
.divae-clickable-animation [data-btn-3]:focus-visible {
  border-radius: 0;
}
@media only screen and (min-width: 768px) {
  .divae-clickable-animation [data-btn-3] {
    width: 29%;
    height: 14%;
    left: 33%;
    transform: skew(33deg) rotate(-4deg);
  }
}
.divae-clickable-animation [data-btn-4] {
  width: 10%;
  height: 9%;
  bottom: 26%;
  left: 11%;
}
@media only screen and (min-width: 768px) {
  .divae-clickable-animation [data-btn-4] {
    width: 6%;
    height: 10%;
    bottom: 23%;
    left: 28%;
  }
}
.divae-clickable-animation [data-btn-5] {
  width: 16%;
  height: 12%;
  bottom: 31%;
  right: 46%;
  border-radius: 50px;
}
@media only screen and (min-width: 768px) {
  .divae-clickable-animation [data-btn-5] {
    width: 8%;
    height: 14%;
    bottom: 28%;
    right: 50%;
  }
}
.divae-clickable-animation [data-btn-6] {
  width: 9%;
  height: 7%;
  bottom: 34%;
  right: 19%;
}
@media only screen and (min-width: 768px) {
  .divae-clickable-animation [data-btn-6] {
    width: 5%;
    height: 8%;
    bottom: 31%;
    right: 37%;
  }
}
.divae-clickable-animation [data-btn-7] {
  width: 5%;
  height: 5%;
  bottom: 30%;
  right: 9%;
}
@media only screen and (min-width: 768px) {
  .divae-clickable-animation [data-btn-7] {
    width: 2%;
    height: 5%;
    bottom: 28%;
    right: 33%;
  }
}