.slideshow{
  --num-slides: 20;
  --current-slide: 0;
  --slide-width: 100vw;
  --image-height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.slides{
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slide {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: left 1s;
  position: absolute;
  top:0;
  background: white;
}

.slide {
  left: 100vw;
  z-index: -1;
}

.slide[data-order="0"] {
  left: 0;
  z-index: inherit;
}

.slide[data-order="-1"] {
  left: -100vw;
  z-index: inherit;
}

.slide-content {
  display: table;
  margin: 0 auto;
}

.slide-image {
  cursor: url(Hover.cur), pointer;
}

.slide-content .caption{
  font-size: var(--font-size-small);
  text-align: center;
  display: table-caption;
  caption-side: bottom;
}

.slide-content .caption p{
  margin: 0;
  line-height: 1.1em;
}

.slide img {
  max-height: var(--image-height);
  max-width: 100vw;
}

@keyframes animateleft {
  from {
    left: calc((800px * var(--current-slide) * -1) - 800px);
    opacity: 0
  }
  to {
    opacity: 1
  }
}