@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: rotate 4s linear infinite;
}

.hover-animate {
  animation: moveToLeft 2s forwards ease-in-out infinite;
}

@keyframes moveToLeft {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-2.5px);
  }
  20% {
    transform: translateX(-5px);
  }
  30% {
    transform: translateX(-2.5px);
  }
  40% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2.5px);
  }
  60% {
    transform: translateX(5px);
  }
  70% {
    transform: translateX(2.5px);
  }
  80% {
    transform: translateX(0);
  }
  90% {
    transform: translateX(-2.5px);
  }
  100% {
    transform: translateX(-5px);
  }
}

.animation-sliding-img-up-1 {
  animation: sliding-img-up-1 30s linear infinite;
}

.animation-sliding-img-up-2 {
  animation: sliding-img-up-2 30s linear infinite;
}

.animation-sliding-img-down-1 {
  animation: sliding-img-down-1 30s linear infinite;
}

@keyframes infinite-carousel-x {
  0% {
    transform: translateX(calc(-400px * 7));
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes infinite-carousel-x-reverse {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-400px * 7));
  }
}

@media (max-width: 1320px) {
  @keyframes infinite-carousel-x {
    0% {
      transform: translateX(calc(-300px * 7));
    }

    100% {
      transform: translateX(0);
    }
  }

  @keyframes infinite-carousel-x-reverse {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-300px * 7));
    }
  }
}

@media (max-width: 640px) {
  @keyframes infinite-carousel-x {
    0% {
      transform: translateX(calc(-250px * 7));
    }

    100% {
      transform: translateX(0);
    }
  }

  @keyframes infinite-carousel-x-reverse {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-250px * 7));
    }
  }
}

@keyframes shine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

@keyframes sliding-img-up-1 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-722px);
  }
}

@keyframes sliding-img-up-2 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-1098px);
  }
}

@keyframes sliding-img-down-1 {
  0% {
    transform: translateY(-1161px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes sliding-img-down-2 {
  0% {
    transform: translateY(-1389px);
  }

  100% {
    transform: translateY(0);
  }
}

@media (min-width: 640px) {
  @keyframes sliding-img-up-1 {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-936px);
    }
  }

  @keyframes sliding-img-up-2 {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-1438px);
    }
  }

  @keyframes sliding-img-down-1 {
    0% {
      transform: translateY(-1511px);
    }

    100% {
      transform: translateY(0);
    }
  }

  @keyframes sliding-img-down-2 {
    0% {
      transform: translateY(-1135px);
    }

    100% {
      transform: translateY(0);
    }
  }
}

@media (min-width: 1024px) {
  @keyframes sliding-img-up-1 {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-615px);
    }
  }

  @keyframes sliding-img-up-2 {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(-928px);
    }
  }

  @keyframes sliding-img-down-1 {
    0% {
      transform: translateY(-986px);
    }

    100% {
      transform: translateY(0);
    }
  }

  @keyframes sliding-img-down-2 {
    0% {
      transform: translateY(-928px);
    }

    100% {
      transform: translateY(0);
    }
  }
}

@keyframes sliding-img-right-1 {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: -2880px;
  }
}

@keyframes sliding-img-left-1 {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: 2880px;
  }
}

.pulsing-circle {
  fill: none;
  stroke-width: 2;
  animation: pulsingCircle 1.5s infinite;
}

@keyframes pulsingCircle {
  0% {
    r: 3;
    opacity: 1;
  }
  100% {
    r: 15;
    opacity: 0;
  }
}
