@keyframes right {
  from { transform: translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg); }
  to   { transform: translateX(calc(( 4vw +  4vh +  4%)/3)) rotate(0.01deg); }
}
@keyframes left {
  from { transform: translateX(calc(( 4vw +  4vh +  4%)/3)) rotate(0.01deg); }
  to   { transform: translateX(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg); }
}
@keyframes down {
  from { transform: translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg); }
  to   { transform: translateY(calc(( 4vw +  4vh +  4%)/3)) rotate(0.01deg); }
}
@keyframes up {
  from { transform: translateY(calc(( 4vw +  4vh +  4%)/3)) rotate(0.01deg); }
  to   { transform: translateY(calc((-4vw + -4vh + -4%)/3)) rotate(0.01deg); }
}
@keyframes out { from { transform: scale(1.15); } to { transform: scale(1); } }
@keyframes in  { from { transform: scale(1); }    to { transform: scale(1.15);} }

.kb-slideshow{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}


.kb-slideshow .kb-slide,
.kb-slideshow .kb-slide span{
  display:block;
  position:absolute;
  inset:0;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity, transform;  
}

.kb-slideshow .kb-slide span{
  background-size:cover;
  background-position:center;
}

.kb-slideshow .kb-animate.right,
.kb-slideshow .kb-animate.left{
  left:  calc((-4vw + -4vh + -4%)/3);
  right: calc((-4vw + -4vh + -4%)/3);
}

.kb-slideshow .kb-animate.up,
.kb-slideshow .kb-animate.down{
  top:    calc((-4vw + -4vh + -4%)/3);
  bottom: calc((-4vw + -4vh + -4%)/3);
}

.kb-slideshow .kb-animate{
  animation: none;              /* <-- important */
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.kb-slideshow .kb-animate.active{
  animation-duration: var(--kb-anim-ms, 7000ms);
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

/* animation-name stays on the direction classes */
.kb-slideshow .kb-animate.right{ animation-name:right; }
.kb-slideshow .kb-animate.left{  animation-name:left; }
.kb-slideshow .kb-animate.up{    animation-name:up; }
.kb-slideshow .kb-animate.down{  animation-name:down; }
.kb-slideshow .kb-animate.in{    animation-name:in; }
.kb-slideshow .kb-animate.out{   animation-name:out; }

.kb-slideshow .kb-animate.paused{ animation-play-state: paused; }

@media (max-width: 767px){
  .kb-slideshow .kb-slide span{
    background-position: right center;
  }
}