.block-slideshow {
  width: 100%; overflow: hidden; position: relative; }
.block-slideshow .slides {
  width: 100%; height: 100%; position: absolute;
  top: 0; left: 0; }

.block-slideshow .slide {
  width: 100%; height: 100%; position: absolute;
  top: 0; left: 0; z-index: 0; display: none; }
.block-slideshow .slide.active {
  display: block; }
.block-slideshow .slide.active,
.block-slideshow .slide.enter,
.block-slideshow .slide.exit {
  display: block!important;
  animation-duration: 0.4s;
  animation-fill-mode: both;
  animation-timing-function: ease; }
.block-slideshow .slide.enter.left { animation-name: slide-in-left; }
.block-slideshow .slide.exit.left { animation-name: slide-out-left; }
.block-slideshow .slide.enter.right { animation-name: slide-in-right; }
.block-slideshow .slide.exit.right { animation-name: slide-out-right; }

.block-slideshow .slide img {
  position: absolute; z-index: 0;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; }
.block-slideshow .slide .content {
  position: absolute; z-index: 1;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex; flex-flow: column; justify-content: space-between;
  padding: 0 4em 4em;
}

.block-slideshow .nav {
  position: absolute;
  color: white;
  font-size: 2em;
  z-index: 2;
  cursor: pointer;
}

.block-slideshow .dots {
  position: absolute;
  color: white;
  font-size: 2em;
  z-index: 2;
}

.block-slideshow .nav { opacity: 0.5; transition: opacity 0.2s ease; }
.block-slideshow .nav.active, .block-slideshow .nav:hover { opacity: 1; }
.block-slideshow .nav.next {
  top: 50%;
  right: 2em;
  transform: translateY(-50%);
}
.block-slideshow .nav.prev {
  top: 50%;
  left: 2em;
  transform: translateY(-50%);
}
.block-slideshow .dots {
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.block-slideshow .dots .dot {
  cursor: pointer;
  display: block;
  width: 0.25em; height: 0.25em;
  border-radius: 50%;
  margin-right: 0.6em;
  opacity: 0.5;
  background-color: white;
  transition: opacity 0.2s ease;
}
.block-slideshow .dots .dot:last-of-type {
  margin-right: 0;
}
.block-slideshow .dots .dot.active {
  opacity: 1;
}

@keyframes slide-in-left {
  0% { transform: translateX(100%) }
  100% { transform: translateX(0%) } }
@keyframes slide-out-left {
  0% { transform: translateX(0%) }
  100% { transform: translateX(-100%) } }
@keyframes slide-in-right {
  0% { transform: translateX(-100%) }
  100% { transform: translateX(0%) } }
@keyframes slide-out-right {
  0% { transform: translateX(0%) }
  100% { transform: translateX(100%) } }