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

.awesome-banner_e-commerce .awesome-banner__media-wrapper {
  display: flex;
}

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

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

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

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

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

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

.awesome-banner_e-commerce .awesome-banner__media-el._4 {
  background-image: url("../images/4.png");
}

.awesome-banner_e-commerce .awesome-banner__media-el._4-1 {
  background-image: url("../images/4-1.png");
}

.awesome-banner_e-commerce .awesome-banner__media-el._5 {
  background-image: url("../images/5.png");
}

.awesome-banner_e-commerce .awesome-banner__media-el._6 {
  background-image: url("../images/6.png");
}

.awesome-banner_e-commerce .awesome-banner__media-el._6-1 {
  background-image: url("../images/6-1.png");
}

.awesome-banner_e-commerce .awesome-banner__media-el._2-1,
.awesome-banner_e-commerce .awesome-banner__media-el._3-1,
.awesome-banner_e-commerce .awesome-banner__media-el._4-1,
.awesome-banner_e-commerce .awesome-banner__media-el._6-1 {
  animation-duration: 3s;
  animation-name: awesome-banner_e-commerce-fly;
}

.awesome-banner_e-commerce .awesome-banner__media-el._2-1 {
  animation-delay: 0s;
}

.awesome-banner_e-commerce .awesome-banner__media-el._3-1 {
  animation-delay: 0.75s;
}

.awesome-banner_e-commerce .awesome-banner__media-el._4-1 {
  animation-delay: 1.5s;
}

.awesome-banner_e-commerce .awesome-banner__media-el._6-1 {
  animation-delay: 2.25s;
}

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

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

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

@keyframes awesome-banner_e-commerce-0 {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  10%,
  90% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

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

@keyframes awesome-banner_e-commerce-1 {
  0%,
  10% {
    opacity: 0;
    transform: translate(-50%, -37.5%);
  }

  15%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes awesome-banner_e-commerce-2 {
  0%,
  15% {
    opacity: 0;
    transform: translate(-50%, -37.5%);
  }

  20%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes awesome-banner_e-commerce-3 {
  0%,
  20% {
    opacity: 0;
    transform: translate(-50%, -37.5%);
  }

  25%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.awesome-banner_e-commerce .awesome-banner__media-el._4 {
  animation-name: awesome-banner_e-commerce-4;
}

@keyframes awesome-banner_e-commerce-4 {
  0%,
  25% {
    opacity: 0;
    transform: translate(50%, 37.5%);
  }

  30%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.awesome-banner_e-commerce .awesome-banner__media-el._5 {
  animation-name: awesome-banner_e-commerce-5;
}

@keyframes awesome-banner_e-commerce-5 {
  0%,
  30% {
    opacity: 0;
    transform: translate(50%, 37.5%);
  }

  35%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.awesome-banner_e-commerce .awesome-banner__media-el._6 {
  animation-name: awesome-banner_e-commerce-6;
}

@keyframes awesome-banner_e-commerce-6 {
  0%,
  35% {
    opacity: 0;
    transform: translate(50%, 37.5%);
  }

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

@media (max-width: 575.98px) {
  .awesome-banner_e-commerce .awesome-banner__media {
    transform: translateX(2%);
  }
}