/* Slideshow css file*/
/* used on home/index page only*/
/* based on examples found on w3schools.com*/
/* Tested and uploaded 19 Dec 2023*/

/* Slideshow container details with padding to suit left and right arrows*/
.slideshow-container {
  max-width: 300px;
  position: relative;
  margin: 10px;
  padding: 26px;
/*  border: 2px solid red; for debugging only*/
}

/* Hide the images by default */
.gallery {
  display: none;
}

/* Next & previous arrows */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50px;
  width: auto;
  padding: 6px;
  margin-top: -22px;
  color: red;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid black;
  border-radius: 0 3px 3px 0;
  transition: 0.6s ease;
}

/* position of "next" and "previous" arrows varies according to screen width to maintain readability. Arrows are placed relative to the picture */

@media screen and (max-device-width: 999px) {
.prev {
  left: -20px;
}
.next {
  right: -20px;
}
}

@media screen and (min-device-width: 1000px) {
.prev {
  left: -40px;
}
.next {
  right: -40px;
}
}

/* On arrow hover, add background color */
.prev:hover, .next:hover {
  background-color: yellow;
}

.sequence {
/* image number as sequence*/
  color: yellow;
  text-shadow: 0px 0px 8px black;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 12px;
  position: absolute;
  top: 30px;
  width: 100%;
  text-align: left;
}

.caption {
/* picture caption */
  color: yellow;
  text-shadow: 0px 0px 8px black;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 12px;
  position: absolute;
  top: 30px;
  width: 76%; /*works for 300px wide*/
/*  width: calc(100%-50px);*/
  text-align: right;
}

/*
.active,
.demo:hover {
  opacity: 1;
}
*/

/* Fading transition between images */
.fade {
  animation-name: fade;
  animation-duration: 1s;
}

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

/* On very small screens, decrease text size */
@media only screen and (max-device-width: 300px) {
  .prev, .next, .text {font-size: 11px}
}