/*! http://responsiveslides.com v1.55 by @viljamis */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

@media (max-width: 900px) {
  .rslides li:first-child {
    height: auto; /* Allow dynamic height */
  }

  .rslides img {
    display: block;
    max-width: 100%; /* Ensure responsive images */
    margin: 0 auto; /* Center horizontally */
  }
}
@media (max-width: 768px) {
  .rslides li:first-child {
    height: auto; /* Allow dynamic height */
  }

  .rslides img {
    display: block;
    max-width: 100%; /* Ensure responsive images */
    margin: 0 auto; /* Center horizontally */
  }
}

@media (max-width: 600px){
  .rslides {
    display: none;
  }
}

.slideshow {
  position: relative;
  overflow: hidden;
  text-align: center; /* Center the image */
}

.slide {
  display: none;
}

.slide img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto; /* Center the image on mobile */
  }

@media (min-width: 600px){
  .slideshow{
    display: none;
  }
} 
/* Hide the slideshow when the screen width is less than or equal to 650px (portrait mode) */
@media (max-width: 650px) {
  .rslides {
    display: none;
  }
}

/* Center the slideshow and its images */
.slideshow {
  position: relative;
  overflow: hidden;
  text-align: center; /* center the image */
}

/* Hide individual slides */
.slide {
  display: none;
}

/* Display images within slides, centered horizontally */
.slide img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto; /* center the image on mobile */
}

/* Hide the slideshow again when the screen width is greater than or equal to 600px (landscape mode) */
@media (min-width: 600px) {
  .slideshow {
    display: none;
  }
}
