#slider{
  position:relative;
  background-color:#000;
}
.slide{
  max-height:400px;
  overflow:hidden;
}
.slide img{
  transform: translateY(-50%);
}
.caption-wrapper{
  position:absolute;
  height:100%;
  max-width:1200px;
  left:0;
  right:0;
  margin:0px auto;
}
.caption {
  position:absolute;
  background-color:#fff;
  color:#000;
  right:0;
  top:50%;
  transform: translateY(-50%);
  padding:8px;
  opacity:0.8;
  font-size:1em;
  margin:8px;
  border-radius:5px;
  z-index:999;
}
.caption h2{
  margin:0px 0px 5px 0px;
  font-size:1.4em;
  font-weight:500;
}

#prevSlide, #nextSlide{
  position:absolute;
  color:#fff;
  margin:0px 16px 0px 16px;
  font-size:34px;
  text-shadow: 1px 1px 5px #000;
  z-index:999;
}
#prevSlide:hover, #nextSlide:hover{
  color: #ff7326;
}
#prevSlide{
  left:0px;
  top:calc(50%);
  transform: translateY(-50%);
}
#nextSlide{
  right:0px;
  top:calc(50%);
  transform: translateY(-50%);
}
.slide{
  visibility: hidden;
  height:0px;
  opacity:0;
}
.showslide{
  visibility: visible!important;
  height:auto;
  transition: 1s;
  opacity:1;
}
.dots{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:20px;
  text-align:center;
}
.dot{
  color:#fff;

}
.active{
  color:#000;
}

/* Small Screen Specific */
@media screen and (max-width: 1200px) {
  .slide img{
    transform: translateY(0%);
  }

}
@media screen and (max-width: 680px) {

  #prevSlide, #nextSlide{display:none;}
}