.hero-home .bf-autoplovykla {
  width: auto;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 1550px) {
  .hero-home .bf-autoplovykla {
    width: 500px;
  }
}

@media (max-width: 1300px) {
  .hero-home .bf-autoplovykla {
    width: 400px;
  }
}

@media (max-width: 960px) {
  .hero-home .bf-autoplovykla {
    width: 300px;
  }
}

@media (max-width: 767px) {
  .hero-home .bf-autoplovykla {
    width: 250px;
  }
}

@media (max-width: 640px) {
  .hero-home .bf-autoplovykla {
    width: 200px;
  }
}

.hero-home .percentage {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  animation: percent-spin 64s linear infinite;
  animation-delay: -9s;
}

@media (max-width: 1300px) {
  .hero-home .percentage {
    width: 200px;
  }
}

@media (max-width: 960px) {
  .hero-home .percentage {
    top: 34%;
  }
}

@media (max-width: 767px) {
  .hero-home .percentage {
    width: 150px;
  }
}

@media (max-width: 640px) {
  .hero-home .percentage {
    top: 27%;
  }
}

@media (max-width: 480px) {
  .hero-home .percentage {
    top: 110px;
  }
}

.hero-home .percentage.l {
  left: -30px;
  animation: percent-spin 71s linear infinite alternate;
  animation-delay: -13s;
}

@media (max-width: 480px) {
  .hero-home .percentage.l {
    display: none;
  }
}

.hero-home .percentage.r {
  right: -30px;
  transform: translateY(-50%) rotate(90deg);
  animation: rotate-right-90 37s linear infinite reverse;
  animation-delay: -19s;
}

@media (max-width: 480px) {
  .hero-home .percentage.r {
    right: 50%;
    transform: translateX(50%) translateY(-50%) rotate(90deg);
    animation: rotate-right-90-shift 43s linear infinite reverse;
    animation-delay: -7s;
  }
}

@keyframes percent-spin {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

@keyframes rotate-right-90 {
  from {
    transform: translateY(-50%) rotate(90deg);
  }
  to {
    transform: translateY(-50%) rotate(450deg);
  }
}

@keyframes rotate-right-90-shift {
  from {
    transform: translateX(50%) translateY(-50%) rotate(90deg);
  }
  to {
    transform: translateX(50%) translateY(-50%) rotate(450deg);
  }
}

.hero-home .bf-autoplovykla-badges {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .hero-home .bf-autoplovykla-badges {
    height: 10%;
    object-fit: cover;
  }
}