/***** Slideshow Styling *****/
#Slideshow_Background {
  background: rgba(255, 255, 255, 0.35);
  /* This creates a slightly transparent white background that's palced over the video in the background */
}

.mySlides {
  display: none;
  /* This prevents the images from being displayed, we will use JS to display these */
}

/* Slideshow section / container */
#Slideshow_Container {
  width: 39.5vw;
  /* Relative sizing of the container for the slidewshow set to 39.5% of the viewport width */
  height: auto;
  /* The height of the container is automatically adjusted based on the content it is displaying */
  padding-top: 4%;
  /* Adds a small padding to the top of the slideshow container */
  position: relative;
  /* This sets the container relative to its normal positioning */
  margin: auto;
  /* This will horizontally center the container on the page */
}

/* Remove the underline from the previous and next buttons on the slideshow */
#Slideshow_Container a {
  text-decoration: none;
}

/* Images contained within the slideshow */
.Slideshow_Images {
  vertical-align: middle;
  /* This centers the images vertically within the slideshow container */
  height: auto;
  /* The height of the images is automatically adjusted based on the content, ie if your images are different sizes, they will display as different sizes */
  box-shadow: 0px 5px 10px 12px rgba(0, 0, 0, .75);
  /* Adds a shadow around the slideshow images */
  width: 100%;
  /* The width of the images is automatically adjusted based on the content */
  max-width: 100%;
  filter: grayscale(40%);
}

/* Next and previous buttons */
.Previous,
.Next {
  cursor: pointer;
  /* Changes the mouse to a pointer when the buttons are selected */
  position: absolute;
  /* This makes the next and previous buttons positioned relative to the slideshow container */
  top: 50%;
  /* This moves the buttons up in the slideshow container */
  width: auto;
  /* The width of the buttons is automatically adjusted based on the content */
  padding: 2vw;
  /* Adds padding equal to 2% of the viewport width */
  color: darkgray;
  font-weight: bold;
  font-size: 1.5vw;
  border-radius: 0 3px 3px 0;
  /* Adds a slightly rounded border on the top and bottom right corners */
  user-select: none;
  /* This property makes it so that the user cannot highlight the text */
  transition: 0.6s ease;
  /* This specifies the details of the hover transition for these elements */
}

/* Positioning the next button on the right hand side */
.Next {
  right: 0;
  /* This moves the next button to the right side of the slideshow container */
  border-radius: 3px 0 0 3px;
  /* This changes the border radius on the next button to the top and bottom left of the button */
}

/* Hover effect on slide show buttons */
.Previous:hover,
.Next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  /* Makes the background of the arrows a transparent gray color */
  color: white;
  /* Makes the arrows white when hovered over */
}

/* Slideshow text */
.text {
  color: white;
  padding: 1vw;
  position: absolute;
  /* This ensures the text is positioned within the image */
  bottom: 0;
  /* This property sets the text at the bottom of the image */
  width: 100%;
  /* The element covers the full width of the image */
  text-align: center;
  /* The text is center aligned within the image */
  font-family: Perpetua, Rockwell Extra Bold;
  letter-spacing: .1vw;
  /* This gives slight spacing between the letters */
  font-size: 1.5vw;
  /* Font size is relative to the size of the viewport width */
  background-color: rgba(0, 0, 0, 0.75);
  /* Gives a slightly transparent black background */
  font-weight: bold;
  border-radius: 0px 0px 7px 7px;
  /* Gives the text background rounded corners on the bottom left and right corners */
}

/* Styling of the dots under the slideshow */

.dot {
  cursor: pointer;
  /* The cursor changes to pointer when hovered over the dots */
  height: 1vw;
  /* The dots are sized relative to the viewport width */
  width: 1vw;
  margin: .25vw;
  /* adds additional spacing between the dots */
  background-color: white;
  /* Makes the dots white */
  border-radius: 50%;
  /* Makes the dots circles by rounding each corner */
  display: inline-block;
  /* Allows the dots to sit next to eachother rather than on a new line */
  transition: background-color 0.6s ease;
  /* When clicked on the dots transition to a different color when clicked or hovered over (the affect is defined below) */
  z-index: 1;
  /* This ensures the dots will be displayed above any other elements */
}

/* Hover effect for slideshow dots */
.active,
.dot:hover {
  background-color: black;
  /* Sets the color of the dots when active or hovered over */
}

/* Fading animation for slideshow */
.fade {
  animation-name: fade;
  /* Fade animation is defined below */
  animation-duration: 1.5s;
  /* The animation lasts 1.5 seconds */
  -webkit-animation-name: fade;
  /* Same as above for Safari 4.0-8.0 */
  -webkit-animation-duration: 1.5s;
}



@-webkit-keyframes fade {
  from {
    opacity: .4;
  }

  /* Image starts transparent */
  to {
    opacity: 1;
  }

  /* Image ends opaque */
}

@keyframes fade {
  from {
    opacity: .4;
  }

  /* Image starts transparent */
  to {
    opacity: 1;
  }

  /* Image ends opaque */
}


/* grayscale animation for slideshow */
.grayscale_anim {
  animation-name: grayscale_anim;
  /* Fade animation is defined below */
  animation-duration: 2.5s;
  /* The animation lasts 2.5 seconds */
  -webkit-animation-name: grayscale_anim;
  /* Same as above for Safari 4.0-8.0 */
  -webkit-animation-duration: 2.5s;
}

@-webkit-keyframes grayscale_anim {
  from {
    filter:grayscale(100%)
  }

  /* Image starts 100% grayscale */
  to {
    filter: grayscale(30%)
  }

  /* Image ends 30% grayscale */
}

@keyframes grayscale_anim {
  from {
    filter: grayscale(100%)
  }

  /* Image starts 100% grayscale */
  to {
    filter: grayscale(15%)
  }

  /* Image ends 15% grayscale */
}
/***** End Slideshow Styling *****/