.icon-cards{position:relative;width:60vw;height:40vw;max-width:500px;max-height:250px;margin:0;color:white;-webkit-perspective:1000px;perspective:1000px;padding:5% 1% 0% 1%;}
.icon-cards__content{position:absolute;width:100%;height:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-30vw) rotateY(0);transform:translateZ(-30vw) rotateY(0);-webkit-animation:carousel 10s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;animation:carousel 10s 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;width:60vw;height:40vw;padding:3% 1% 3% 1%;max-width:500px;max-height:250px;box-shadow:0 5px 20px rgba(0, 0, 0, 0.1);border-radius:6px;}
.icon-cards__item:nth-child(1){background:#FDD94F;vertical-align:middle !important;-webkit-transform:rotateY(0) translateZ(35vw);transform:rotateY(0) translateZ(35vw);}
.icon-cards__item:nth-child(2){background:#F87949;vertical-align:middle !important;-webkit-transform:rotateY(120deg) translateZ(35vw);transform:rotateY(120deg) translateZ(35vw);}
.icon-cards__item:nth-child(3){background:#FBAB48;-webkit-transform:rotateY(240deg) translateZ(35vw);transform:rotateY(240deg) translateZ(35vw);}
@-webkit-keyframes carousel{0%, 17.5%{-webkit-transform:translateZ(-35vw) rotateY(0);transform:translateZ(-35vw) rotateY(0);}
27.5%, 45%{-webkit-transform:translateZ(-35vw) rotateY(-120deg);transform:translateZ(-35vw) rotateY(-120deg);}
55%, 72.5%{-webkit-transform:translateZ(-35vw) rotateY(-240deg);transform:translateZ(-35vw) rotateY(-240deg);}
82.5%, 100%{-webkit-transform:translateZ(-35vw) rotateY(-360deg);transform:translateZ(-35vw) rotateY(-360deg);}
}
@keyframes carousel{0%, 17.5%{-webkit-transform:translateZ(-35vw) rotateY(0);transform:translateZ(-35vw) rotateY(0);}
27.5%, 45%{-webkit-transform:translateZ(-35vw) rotateY(-120deg);transform:translateZ(-35vw) rotateY(-120deg);}
55%, 72.5%{-webkit-transform:translateZ(-35vw) rotateY(-240deg);transform:translateZ(-35vw) rotateY(-240deg);}
82.5%, 100%{-webkit-transform:translateZ(-35vw) rotateY(-360deg);transform:translateZ(-35vw) rotateY(-360deg);}
}
html,
body{height:100%;}