.icon-cards {
  position: relative;
  width: 60vw;
  height: 40vw;
  max-width: 400px;
  max-height: 320px;
  margin: 0;
  color: white;
  perspective: 800px;
  transform-origin: center;
}
.icon-cards__content {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: translateZ(-50vw) rotateY(0);
  -webkit-animation: carousel 16s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
          animation: carousel 16s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.icon-cards__content.step-animation {
  -webkit-animation: carousel 8s infinite steps(1) forwards;
          animation: carousel 8s infinite steps(1) forwards;
}
.icon-cards__item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 60vw;
  height: 40vw;
 
  max-width: 400px;
  max-height: 320px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 1);
  border-radius: 6px;
  transform-origin: center;

}
.icon-cards__item:nth-child(1) {
  background: #FDD94F;
  transform: rotateY(0) translateZ(55vw);
}
.icon-cards__item:nth-child(2) {
  background: #F87949;
  transform: rotateY(60deg) translateZ(55vw);
}
.icon-cards__item:nth-child(3) {
  background: #FBAB48;
  transform: rotateY(120deg) translateZ(55vw);
}
.icon-cards__item:nth-child(4) {
  background: #FBAB48;
  transform: rotateY(180deg) translateZ(55vw);
}
.icon-cards__item:nth-child(5) {
  background: #FBAB48;
  transform: rotateY(240deg) translateZ(55vw);
}
.icon-cards__item:nth-child(6) {
  background: #FBAB48;
  transform: rotateY(300deg) translateZ(55vw);
}


@-webkit-keyframes carousel {
   0%, 12% {
    transform: translateZ(-50vw) rotateY(0);/*1*/
  }
  13%, 27% {
    transform: translateZ(-50vw) rotateY(-60deg);
  }
  28%, 42% {
    transform: translateZ(-50vw) rotateY(-120deg);/*2*/
  }
  43%, 57% {
    transform: translateZ(-50vw) rotateY(-180deg);
  }
	
  58%, 72% {
    transform: translateZ(-50vw) rotateY(-240deg);/*3*/
  }
  73%, 87% {
    transform: translateZ(-50vw) rotateY(-300deg);
  }	
	
  88%, 100% {
    transform: translateZ(-50vw) rotateY(-360deg);/*4*/
  }
}

@keyframes carousel {
  0%, 12% {
    transform: translateZ(-50vw) rotateY(0);/*1*/
  }
  13%, 27% {
    transform: translateZ(-50vw) rotateY(-60deg);
  }
  28%, 42% {
    transform: translateZ(-50vw) rotateY(-120deg);/*2*/
  }
  43%, 57% {
    transform: translateZ(-50vw) rotateY(-180deg);
  }
	
  58%, 72% {
    transform: translateZ(-50vw) rotateY(-240deg);/*3*/
  }
  73%, 87% {
    transform: translateZ(-50vw) rotateY(-300deg);
  }	
	
  88%, 100% {
    transform: translateZ(-50vw) rotateY(-360deg);/*4*/
  }
}
html,
body {
  height: 100%;
}

.div_body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
/*  background: #110F15;*/
}


@-webkit-keyframes jelly {
  from {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75);
  }
  40% {
    transform: scale(0.75, 1.25);
  }
  50% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
  to {
    transform: scale(1, 1);
  }
}

@keyframes jelly {
  from {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75);
  }
  40% {
    transform: scale(0.75, 1.25);
  }
  50% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
  to {
    transform: scale(1, 1);
  }
}