.slip-n-slide {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
}

.slip-n-slide.fullscreen {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slip-n-slide > div.slide {
  position: absolute;
  min-width: 100%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.slip-n-slide.top-left > div.slide {
  background-position: top left;
}

.slip-n-slide.top > div.slide {
  background-position: center top;
}

.slip-n-slide.top-right > div.slide {
  background-position: top right;
}

.slip-n-slide.center > div.slide {
  background-position: center;
}

.slip-n-slide.bottom-left > div.slide {
  background-position: bottom left;
}

.slip-n-slide.bottom > div.slide {
  background-position: center bottom;
}

.slip-n-slide.bottom-right > div.slide {
  background-position: bottom right;
}

.slip-n-slide.contain > div.slide {
  background-size: contain;
}

.slip-n-slide.cover > div.slide{
  background-size: cover;
}

.slip-n-slide > div > img {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
  max-width: 100%;
}

/*****************************
* Controls
******************************/

.slip-n-slide .controls {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.slip-n-slide .controls .wrapper {
  margin: auto;
  width: fit-content;
}

/* Basic Controls */

.slip-n-slide.pagination .control {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  margin: .5px;
  background-color: rgba(125, 215, 235, 1);
  border-radius: 50%;
  z-index: 4;
  cursor: pointer;
  transition: all .3s;
  padding: 0;
}

.slip-n-slide.pagination .control.on {
  background-color: rgba(255, 255, 255, 1);
}

/* Thumbnail Controls */

.slip-n-slide.thumbnails .control {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  margin: 3px;
  z-index: 2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all .3s;
  overflow: hidden;
  vertical-align: bottom;
}

.slip-n-slide.thumbnails .control {
  border: 2px solid transparent;
  transition: border .75s;
}

.slip-n-slide.thumbnails .control.on {
  position: relative;
  border: 2px solid rgba(255, 255, 255, .7);
  z-index: 3;
}
/* Next/Prev Controls */

.slip-n-slide.directional .next,
.slip-n-slide.directional .previous {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  cursor: pointer;
}

.slip-n-slide.directional .previous {
  left: 0;
}

.slip-n-slide.directional .next {
  right: 0;
}

.slip-n-slide.directional .next svg,
.slip-n-slide.directional .previous svg {
  display: flex;
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 60px;
  width: 60px;
  opacity: .9;
  fill: #ffffff;
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}

.slip-n-slide.directional .previous svg {
  left: 7%;
}

.slip-n-slide.directional .next svg {
  right: 7%;
}

/*****************************
* Transition Timing
* (Do not change without changing photo-gallery.js as well)
******************************/

.slip-n-slide.speed-1500 .slide {
  animation-duration: 1500ms;
}

.slip-n-slide.speed-1500 .control {
  transition-duration: 1500ms;
}

.slip-n-slide.speed-1000 .slide {
  animation-duration: 1000ms;
}

.slip-n-slide.speed-1000 .control {
  transition-duration: 1000ms;
}

.slip-n-slide.speed-500 .slide {
  animation-duration: 500ms;
}

.slip-n-slide.speed-500 .control {
  transition-duration: 500ms;
}

/*****************************
* Transition Effects
******************************/

/* Fade */

.slip-n-slide.fade .slide.on {
  animation-name: fade-in;
  position: relative;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.slip-n-slide.fade .slide.off {
  animation-name: fade-out;
}

@keyframes fade-out {
  0% {
    left: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Slide Left */

.slip-n-slide.slide .slide.left.on {
  animation-name: slide-left-in;
}

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

.slip-n-slide.slide .slide.left.off {
  animation-name: slide-left-out;
}

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

/* Slide Right */

.slip-n-slide.slide .slide.right.on {
  animation-name: slide-right-in;
}

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

.slip-n-slide.slide .slide.right.off {
  animation-name: slide-right-out;
}

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