.slideShow{
  position: absolute;
  width: 100vw;
  height: 100vh;
}
.slideContainer{
  width: 100%;
  height: 100%;
}
.slide{
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  -webkit-transition: 1s ease;
  -o-transition: 1s ease;
  transition: 1s ease;
}
.slide.active{
  position: absolute;
  z-index: 1;
  opacity: 1;
}
.slide .overlay{
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
.slide .overlay-no-vignette{
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0) !important;
}
.slide h1{
  position: absolute;
  font-size: 7vh;
  top: 50%;
  left: 50%;
  width: 90%;
  text-align: center;
  padding: 10vh 0;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.slide h1 span{
  font-size: 4vh;
}
.slideController{
  background: rgb(147, 128, 87, 0.2);
  margin: 0 20%;
  width: 60%;
  height: 0.25vh;
  position: fixed;
  z-index: 10;
  bottom: 7vh;
  overflow: hidden;
}
.slideCursor{
  height: 100%;
  position: absolute;
  background: rgb(147, 128, 87, 1);
}

.NextPrevContainer{
  height: 6vh;
  position: absolute;
  bottom: 4vh;
  right: 7vh;
  overflow: hidden;
  padding: 7px;
  z-index: 10;
}



/* MOBILE BREAKDOWN*/
@media (min-width: 0px) and (max-width: 767px) and (orientation: portrait), (orientation: portrait){
  .slideController{
    display: none;
  }
  .slideNextPrev{
    right: 0vh;
  }
  .slide h1{
    font-size: 3rem;
  }
}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {

}

/* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {

}

/* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {

}

/* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}

/*  ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px*/
@media (min-width: 481px) and (max-width: 767px) {

}

/*  ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {

}