.awesome-banner_catalog {
  background-image: url("../images/bg.jpg");
}

.awesome-banner_catalog .awesome-banner__media-wrapper {
  display: flex;
}

.awesome-banner_catalog .awesome-banner__media-el._0-1 {
  background-image: url("../images/0-1.png");
}

.awesome-banner_catalog .awesome-banner__media-el._1 {
  background-image: url("../images/1.png");
  transform-origin: calc(323 * 100% / 972) calc(299 * 100% / 650);
}

.awesome-banner_catalog .awesome-banner__media-el._1-1 {
  background-image: url("../images/1-1.png");
}

.awesome-banner_catalog .awesome-banner__media-el._1-2 {
  background-image: url("../images/1-2.png");
  transform-origin: calc(299 * 100% / 972) calc(248 * 100% / 650);
}

.awesome-banner_catalog .awesome-banner__media-el._2 {
  background-image: url("../images/2.png");
  transform-origin: calc(432 * 100% / 972) calc(358 * 100% / 650);
}

.awesome-banner_catalog .awesome-banner__media-el._2-1 {
  background-image: url("../images/2-1.png");
}

.awesome-banner_catalog .awesome-banner__media-el._2-2 {
  background-image: url("../images/2-2.png");
  transform-origin: calc(408 * 100% / 972) calc(298 * 100% / 650);
}

.awesome-banner_catalog .awesome-banner__media-el._3 {
  background-image: url("../images/3.png");
  transform-origin: calc(541 * 100% / 972) calc(411 * 100% / 650);
}

.awesome-banner_catalog .awesome-banner__media-el._3-1 {
  background-image: url("../images/3-1.png");
}

.awesome-banner_catalog .awesome-banner__media-el._3-2 {
  background-image: url("../images/3-2.png");
  transform-origin: calc(521 * 100% / 972) calc(352 * 100% / 650);
}

.awesome-banner_catalog .awesome-banner__media-el._0-1,
.awesome-banner_catalog .awesome-banner__media-el._1-1,
.awesome-banner_catalog .awesome-banner__media-el._2-1,
.awesome-banner_catalog .awesome-banner__media-el._3-1 {
  animation-duration: 3s;
  animation-name: awesome-banner_catalog-fly;
}

.awesome-banner_catalog .awesome-banner__media-el._1-1 {
  animation-delay: 2s;
}

.awesome-banner_catalog .awesome-banner__media-el._2-1 {
  animation-delay: 2.75s;
}

.awesome-banner_catalog .awesome-banner__media-el._3-1 {
  animation-delay: 2.5s;
}

@keyframes awesome-banner_catalog-fly {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1.5%);
  }
}

.awesome-banner_catalog .awesome-banner__media-el._0 {
  animation-name: awesome-banner_catalog-0;
}

@keyframes awesome-banner_catalog-0 {
  0% {
    opacity: 0;
    transform: translate(50%, 36%);
  }

  5%,
  95% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -36%);
  }
}

.awesome-banner_catalog .awesome-banner__media-el._1 {
  animation-name: awesome-banner_catalog-1;
}

@keyframes awesome-banner_catalog-1 {
  0%,
  5% {
    transform: scale(0);
  }

  10%,
  100% {
    transform: scale(1);
  }
}

.awesome-banner_catalog .awesome-banner__media-el._2 {
  animation-name: awesome-banner_catalog-2;
}

@keyframes awesome-banner_catalog-2 {
  0%,
  10% {
    transform: scale(0);
  }

  15%,
  100% {
    transform: scale(1);
  }
}

.awesome-banner_catalog .awesome-banner__media-el._3 {
  animation-name: awesome-banner_catalog-3;
}

@keyframes awesome-banner_catalog-3 {
  0%,
  15% {
    transform: scale(0);
  }

  20%,
  100% {
    transform: scale(1);
  }
}

.awesome-banner_catalog .awesome-banner__media-el._1-2 {
  animation-name: awesome-banner_catalog-1-2;
}

@keyframes awesome-banner_catalog-1-2 {
  0%,
  35% {
    opacity: 0;
    transform: translateY(-5%);
  }

  65% {
    opacity: 1;
    transform: translateY(0) scale(0.5);
  }

  40%,
  63%,
  67%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.awesome-banner_catalog .awesome-banner__media-el._2-2 {
  animation-name: awesome-banner_catalog-2-2;
}

@keyframes awesome-banner_catalog-2-2 {
  0%,
  40% {
    opacity: 0;
    transform: translateY(-5%);
  }

  70% {
    opacity: 1;
    transform: translateY(0) scale(0.5);
  }

  45%,
  66%,
  72%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.awesome-banner_catalog .awesome-banner__media-el._3-2 {
  animation-name: awesome-banner_catalog-3-2;
}

@keyframes awesome-banner_catalog-3-2 {
  0%,
  45% {
    opacity: 0;
    transform: translateY(-5%);
  }

  75% {
    opacity: 1;
    transform: translateY(0) scale(0.5);
  }

  50%,
  73%,
  77%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 575.98px) {
  .awesome-banner_catalog .awesome-banner__media {
    transform: translateX(5%);
  }
}