* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.slider {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.slider .slide .content {
  position: absolute;
  bottom: 70px;
  left: -200px;
  width: 200px;
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
  text-align: center;
  z-index: 1;
}

.slider .slide .content a {
  display: inline-block;
}

.slider .slide .content a:hover {
  text-decoration: none;
}

.slider .slide.current .content {
  opacity: 1;
  -webkit-transform: translateX(200px);
          transform: translateX(200px);
  -webkit-transition: all 1s ease-in-out 0.3s;
  transition: all 1s ease-in-out 0.3s;
}

.slider .current {
  opacity: 1;
}

.buttons #next {
  position: absolute;
  top: 50%;
  right: 15px;
  font-size: 1.2rem;
  font-weight: 700;
}

.buttons #prev {
  position: absolute;
  top: 50%;
  left: 15px;
  font-size: 1.2rem;
  font-weight: 700;
}

.buttons button {
  border: 2px solid #333;
  /*change the color if you are showing the picture across the entire screen*/
  background-color: transparent;
  color: #333;
  padding: 10px 18px 12px 17px;
  border-radius: 50%;
  outline: none;
}

.buttons button:hover {
  background-color: #333;
  color: #fff;
}

.exit {
  position: absolute;
  top: 15px;
  right: 15px;
  border: 2px solid #333;
  color: #333;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 50%;
}

.exit:hover {
  background-color: #333;
  color: #fff;
  text-decoration: none;
}

.slide:first-child {
  background: url("../slideshow/slideshow 01.jpg") no-repeat center;
  /*uncomment this in the need of displaying pictures across the entire screen*/
  background-size: contain;
  /*delete this for the same reason*/
}

.slide:nth-child(2) {
  background: url("../slideshow/slideshow 02.jpg") no-repeat center;
  /*only the first child was center/cover, all the rest are top/cover*/
  background-size: contain;
}

.slide:nth-child(3) {
  background: url("../slideshow/slideshow 03.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(4) {
  background: url("../slideshow/slideshow 04.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(5) {
  background: url("../slideshow/slideshow 05.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(6) {
  background: url("../slideshow/slideshow 06.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(7) {
  background: url("../slideshow/slideshow 07.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(8) {
  background: url("../slideshow/slideshow 08.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(9) {
  background: url("../slideshow/slideshow 09.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(10) {
  background: url("../slideshow/slideshow 10.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(11) {
  background: url("../slideshow/slideshow 11.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(12) {
  background: url("../slideshow/slideshow 12.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(13) {
  background: url("../slideshow/slideshow 13.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(14) {
  background: url("../slideshow/slideshow 14.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(15) {
  background: url("../slideshow/slideshow 15.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(16) {
  background: url("../slideshow/slideshow 16.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(17) {
  background: url("../slideshow/slideshow 17.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(18) {
  background: url("../slideshow/slideshow 18.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(19) {
  background: url("../slideshow/slideshow 19.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(20) {
  background: url("../slideshow/slideshow 20.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(21) {
  background: url("../slideshow/slideshow 21.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(22) {
  background: url("../slideshow/slideshow 22.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(23) {
  background: url("../slideshow/slideshow 23.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(24) {
  background: url("../slideshow/slideshow 24.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(25) {
  background: url("../slideshow/slideshow 25.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(26) {
  background: url("../slideshow/slideshow 26.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(27) {
  background: url("../slideshow/slideshow 27.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(28) {
  background: url("../slideshow/slideshow 28.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(29) {
  background: url("../slideshow/slideshow 29.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(30) {
  background: url("../slideshow/slideshow 30.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(31) {
  background: url("../slideshow/slideshow 31.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(32) {
  background: url("../slideshow/slideshow 32.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(33) {
  background: url("../slideshow/slideshow 33.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(34) {
  background: url("../slideshow/slideshow 34.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(35) {
  background: url("../slideshow/slideshow 35.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(36) {
  background: url("../slideshow/slideshow 36.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(37) {
  background: url("../slideshow/slideshow 37.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(38) {
  background: url("../slideshow/slideshow 38.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(39) {
  background: url("../slideshow/slideshow 39.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(40) {
  background: url("../slideshow/slideshow 40.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(41) {
  background: url("../slideshow/slideshow 41.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(42) {
  background: url("../slideshow/slideshow 42.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(43) {
  background: url("../slideshow/slideshow 43.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(44) {
  background: url("../slideshow/slideshow 44.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(45) {
  background: url("../slideshow/slideshow 45.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(46) {
  background: url("../slideshow/slideshow 46.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(47) {
  background: url("../slideshow/slideshow 47.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(48) {
  background: url("../slideshow/slideshow 48.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(49) {
  background: url("../slideshow/slideshow 49.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(50) {
  background: url("../slideshow/slideshow 50.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(51) {
  background: url("../slideshow/slideshow 51.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(52) {
  background: url("../slideshow/slideshow 52.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(53) {
  background: url("../slideshow/slideshow 53.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(54) {
  background: url("../slideshow/slideshow 54.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(55) {
  background: url("../slideshow/slideshow 55.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(56) {
  background: url("../slideshow/slideshow 56.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(57) {
  background: url("../slideshow/slideshow 57.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(58) {
  background: url("../slideshow/slideshow 58.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(59) {
  background: url("../slideshow/slideshow 59.jpg") no-repeat center;
  background-size: contain;
}

.slide:nth-child(60) {
  background: url("../slideshow/slideshow 60.jpg") no-repeat center;
  background-size: contain;
}

@media (max-width: 991px) {
  .slide .content {
    bottom: -300px !important;
    left: 0 !important;
    width: 100% !important;
    /*background-color: $font-color;
            color: $curtain-color; we can use these for additional styling if we want to*/
  }
  .slide.current .content {
    -webkit-transform: translateY(-370px) !important;
            transform: translateY(-370px) !important;
    /*these properties would not work without adding "!important", if there are any problems later, we need to figure out why*/
  }
  .buttons #next {
    top: 47%;
  }
  .buttons #prev {
    top: 47%;
  }
  .exit {
    border: 2px solid #333;
    color: #333;
  }
  .exit:hover {
    background-color: #333;
    color: #fff;
    border: 2px solid #fff;
  }
  /* I've commented these out because, with the current format of the pictures, they are being displayed in the same way on a large screen and on the mobile devices
    .slide:first-child
    {
        background: url('/slideshow/1.jpg') no-repeat center;
        background-size: contain;
    }
    
    .slide:nth-child(2)
    {
        background: url('/slideshow/2.jpg') no-repeat center;
        background-size: contain;
    }
    
    .slide:nth-child(3)
    {
        background: url('/slideshow/3.jpg') no-repeat center;
        background-size: contain;
    }
    .slide:nth-child(4)
    {
        background: url('/slideshow/4.jpg') no-repeat center;
        background-size: contain;
    }
    
    .slide:nth-child(5)
    {
        background: url('/slideshow/5.jpg') no-repeat center;
        background-size: contain;
    }
    
    .slide:nth-child(6)
    {
        background: url('/slideshow/6.jpg') no-repeat center;
        background-size: contain;
    }
    */
}
/*# sourceMappingURL=gallery.css.map */