.slideshow{
  z-index: -2;
  top: 0;
  position: absolute;
  width: 100%;
}
.mySlides {
  display: none;
  animation: fade .3s ease-in-out;
}
@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.mySlides img {
  opacity: .7;
  vertical-align: middle;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: middle;
}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  height: 100vh;
  margin: auto;
}


/* Fading animation */
.fade {
  transition: 2s ease-in-out;
}
.prev1, .next1{
  position: absolute;
  display: flex;
  width: 50px;
  height: 60px;
  padding: 17px 18px;
  font-size: 20px;
  top:50%;
  background-color: rgba(240, 248, 255, 0.359);
}

.prev1{
  left: 0;
  
}

.next1{
  right: 0;
}

.prev1:hover, .next1:hover{
  background-color: rgba(240, 248, 255, 0.647);
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 800px) {
  .slideshow-container, .mySlides img{
    height: 500px;
  }
  .prev1, .next1{
    top: 40%;
  }

}
@media only screen and (max-width: 620px) {
  .slideshow-container, .mySlides img{
    height: 400px;
  }
  .prev1, .next1{
    top: 30%;
  }

}
@media only screen and (max-width: 500px) {
  .slideshow-container, .mySlides img{
    height: 380px;
  }

}