.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;

  background-position: center;

  animation-duration: .5s;

  animation-fill-mode: forwards;

  animation-timing-function: ease-in-out;

}



.slip-n-slide[data-sizing="contain"] > div.slide {

  background-color: #000;

  background-size: contain;

}



.slip-n-slide[data-sizing="cover"] > div.slide{

  background-color: #000;

  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 {

  width: 100%;

}



/* Basic Controls */



.slip-n-slide[data-controls="pagination"] .control {

  display: inline-block;

  position: relative;

  width: 10px;

  height: 10px;

  margin: 8px;

  background-color: rgba(125, 215, 235, 1);

  border-radius: 50%;

  z-index: 4;

  cursor: pointer;

  transition: all .3s;

}



.slip-n-slide[data-controls="pagination"] .control.on {

  width: 10px;

  height: 10px;

  background-color: rgba(255, 255, 255, 1);

}



/* Thumbnail Controls */



.slip-n-slide[data-controls="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[data-controls="thumbnails"] .control {

  border: 2px solid transparent;

  transition: border .75s;

}



.slip-n-slide[data-controls="thumbnails"] .control.on {

  position: relative;

  border: 2px solid rgba(255, 255, 255, .7);

  z-index: 3;

}

/* Next/Prev Controls */



.slip-n-slide[data-controls="directional"] .next,

.slip-n-slide[data-controls="directional"] .previous {

  position: absolute;

  width: 50%;

  height: 100%;

  top: 0;

  cursor: pointer;

}



.slip-n-slide[data-controls="directional"] .previous {

  left: 0;

}



.slip-n-slide[data-controls="directional"] .next {

  right: 0;

}



.slip-n-slide[data-controls="directional"] .next:before,

.slip-n-slide[data-controls="directional"] .previous:before {

  content: '';

  display: block;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 0;

  height: 0;

  opacity: .7;

}



.slip-n-slide[data-controls="directional"] .previous:before {

  left: 7%;

  border-top: 50px solid transparent;

  border-bottom: 50px solid transparent;

  border-right: 25px solid #FFF;

}



.slip-n-slide[data-controls="directional"] .next:before {

  right: 7%;

  border-top: 50px solid transparent;

  border-bottom: 50px solid transparent;

  border-left: 25px solid #FFF;

}



/*****************************

* Transition Timing 

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

******************************/



.slip-n-slide[data-transition-speed="slow"] .slide {

  animation-duration: 1500ms;

}



.slip-n-slide[data-transition-speed="slow"] .control {

  transition-duration: 1500ms;

}



.slip-n-slide[data-transition-speed="normal"] .slide {

  animation-duration: 1000ms;

}



.slip-n-slide[data-transition-speed="normal"] .control {

  transition-duration: 1000ms;

}



.slip-n-slide[data-transition-speed="fast"] .slide {

  animation-duration: 500ms;

}



.slip-n-slide[data-transition-speed="fast"] .control {

  transition-duration: 500ms;

}



/*****************************

* Transition Effects

******************************/



/* Fade */



.slip-n-slide[data-transition="fade"] .slide.on {

  animation-name: fade-in;

}



@keyframes fade-in {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}



.slip-n-slide[data-transition="fade"] .slide.off {

  animation-name: fade-out;

}



@keyframes fade-out {

  0% {

    left: 1;

  }

  100% {

    opacity: 0;

  }

}



/* Slide Left */



.slip-n-slide[data-transition="slide"] .slide.left.on {

  animation-name: slide-left-in;

}



@keyframes slide-left-in {

  0% {

    transform: translateX(100%);

  }

  100% {

    transform: translateX(0%);

  }

}



.slip-n-slide[data-transition="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[data-transition="slide"] .slide.right.on {

  animation-name: slide-right-in;

}



@keyframes slide-right-in {

  0% {

    transform: translateX(-100%);

  }

  100% {

    transform: translateX(0%);

  }

}



.slip-n-slide[data-transition="slide"] .slide.right.off {

  animation-name: slide-right-out;

}



@keyframes slide-right-out {

  0% {

    transform: translateX(0%);

  }

  100% {

    transform: translateX(100%);

  }

}