/*
 * Article Slideshow Styles
 *
 * --------------------------------------------------------------------------
 * CAPTION OPTIONS
 * --------------------------------------------------------------------------
 *
 * Captions are disabled when the slideshow container uses:
 *
 *     caption-no
 *
 * Captions are enabled when the slideshow container uses:
 *
 *     caption-yes
 *
 * --------------------------------------------------------------------------
 * TRANSITION OPTIONS
 * --------------------------------------------------------------------------
 *
 * The existing fade effect remains the default when the slideshow container
 * does not have a recognized transition class.
 *
 * Enable horizontal movement with:
 *
 *     transition-horizontal
 *
 * Enable vertical movement with:
 *
 *     transition-vertical
 */

/* Hide every slide until slideshow.js initializes its group. */
.mySlides,
.mySlides1,
.mySlides2,
.mySlides3,
.mySlides4,
.mySlides5,
.mySlides6,
.mySlides7,
.mySlides8,
.mySlides9 {
  display: none;

  /* Add space above and below each slideshow image. */
  /*margin: 15px 0;*/
  margin: 0;

  /* Set the font family used by slideshow content. */
  font-family: Verdana, sans-serif;
}

/* Position each slideshow and its navigation controls. */
.slideshow-container {
  /*
   * Allow the slideshow arrows, slide counter, and moving images to be
   * positioned relative to this container.
   */
  position: relative;

  /* Center the slideshow and add vertical space around it. */
  margin: 15px auto;

  /*  Add border to container for slides with white background  */
  border: 1px solid #CCC;
}
body.dark .slideshow-container {
  border-color: #32363a;
}

/* Keep slideshow images aligned cleanly inside their containers. */
.slideshow-container img {
  /* Remove the small inline-image gap that browsers normally add. */
  vertical-align: middle;
  /* Override the template's default image border. */
  border: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================
 * Slideshow Previous And Next Buttons
 * ========================================================== */

/* Style the previous and next slideshow controls. */
.prevImg,
.nextImg {
  /* Position each circular control over the slideshow image. */
  position: absolute;

  /* Keep the controls above images during directional transitions. */
  z-index: 210;

  /* Vertically center each control over the slideshow image. */
  top: 50%;

  /*
   * Center the button vertically without depending on margins or the
   * button's exact height.
   */
  transform: translateY(-50%);

  /*
   * Include older Safari support for vertically centering the button.
   */
  -webkit-transform: translateY(-50%);

  /* Set the width of the circular button. */
  width: 42px;

  /* Set the height of the circular button. */
  height: 42px;

  /*
   * Use flexbox to center the arrow character horizontally and vertically.
   */
  display: flex;

  /* Center the arrow vertically inside the circular button. */
  align-items: center;

  /* Center the arrow horizontally inside the circular button. */
  justify-content: center;

  /*
   * Remove the old padding because the button now has a fixed width and
   * height.
   */
  padding: 0;

  /*
   * Include the border inside the declared 42-pixel width and height.
   */
  box-sizing: border-box;

  /* Display the hand pointer when hovering over the control. */
  cursor: pointer;

  /* Set the normal arrow color. */
  color: #fbb450;

  /* Add a gold border around the circular control. */
  border: 1px solid #fbb450;

  /* Turn the control into a circle. */
  border-radius: 50%;

  /* Add a dark, partly transparent background behind the arrow. */
  background-color: rgba(20, 20, 20, 0.78);

  /* Add a soft shadow that separates the button from the image. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);

  /* Set the arrow character size. */
  font-size: 25px;

  /* Make the arrow heavier and easier to see. */
  font-weight: bold;

  /*
   * Keep the arrow character vertically balanced inside the round button.
   */
  line-height: 1;

  /* Remove the normal underline applied to links. */
  text-decoration: none;

  /* Smoothly animate hover-state changes. */
  transition:
  color 0.25s ease,
  border-color 0.25s ease,
  background-color 0.25s ease,
  box-shadow 0.25s ease;

  /*
   * Prevent accidental text selection when repeatedly clicking an arrow.
   */
  user-select: none;

  /*
   * Include Safari support for preventing accidental text selection.
   */
  -webkit-user-select: none;

  /*
   * Remove the colored tap highlight shown by some mobile browsers.
   */
  -webkit-tap-highlight-color: transparent;
}

/* Position the previous-slide button on the left. */
.prevImg {
  /*
   * Place the left edge of the circular button at the container's outer edge.
   *
   * Directional slideshows have a 5-pixel safety gutter, so the button
   * visually extends 5 pixels beyond the left edge of the image.
   */
  left: 5px;
}

/* Position the next-slide button on the right. */
.nextImg {
  /*
   * Place the right edge of the circular button at the container's outer
   * edge.
   *
   * Directional slideshows have a 5-pixel safety gutter, so the button
   * visually extends 5 pixels beyond the right edge of the image.
   */
  right: 5px;
}

/*
 * Preserve the original edge positioning for fade slideshows that do not
 * have the directional-transition safety gutter.
 */
.slideshow-container:not(.transition-horizontal):not(.transition-vertical)
> .prevImg {
  /* Extend the previous button 5 pixels beyond the left container edge. */
  left: 5px;
}

/*
 * Preserve the original edge positioning for fade slideshows that do not
 * have the directional-transition safety gutter.
 */
.slideshow-container:not(.transition-horizontal):not(.transition-vertical)
> .nextImg {
  /* Extend the next button 5 pixels beyond the right container edge. */
  right: 5px;
}

/* Highlight slideshow controls when the pointer is over them. */
.prevImg:hover,
.nextImg:hover {
  /* Change the arrow color to white during hover. */
  color: #ffffff !important;

  /* Keep the gold border visible during hover. */
  border-color: #fbb450;

  /* Change the control background to blue during hover. */
  background-color: rgba(39, 129, 231, 0.92);

  /* Slightly strengthen the shadow during hover. */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
}

/*
 * Give keyboard users a clearly visible focus indicator when they tab to a
 * slideshow button.
 */
.prevImg:focus-visible,
.nextImg:focus-visible {
  /* Draw a visible outline around the circular button. */
  outline: 3px solid cornflowerblue;

  /* Add space between the outline and the button border. */
  outline-offset: 2px;
}

/* Style the slide-number label displayed over the image. */
.numbertext {
  /* Position the number counter over the slideshow image. */
  position: absolute;

  /* Place the counter at the top of the slideshow. */
  top: 0;

  /* Keep the counter above images during directional transitions. */
  z-index: 220;

  /* Add space inside the counter box. */
  padding: 8px 12px;

  /* Set the counter text color. */
  color: #f2f2f2;

  /* Add a partly transparent background behind the counter. */
  background-color: rgba(19, 19, 20, 0.5);

  /* Set the counter text size. */
  font-size: 14px;

  /* Make the counter text easier to see. */
  font-weight: bold;
}

/* Retain compatibility with the existing dot navigation styles. */
.activeNow,
.dot:hover {
  /* Highlight the active navigation dot or a dot being hovered over. */
  background-color: #717171;
}

/* Apply the existing fade effect when a slide becomes visible. */
.fadeImg {
  /* Select the fadeImg animation defined below. */
  animation-name: fadeImg;

  /* Control how long the fade animation lasts. */
  animation-duration: 1.5s;
}

/* Animate a slide from partly transparent to fully visible. */
@keyframes fadeImg {
  /* Begin the animation with the image partly transparent. */
  from {
    opacity: 0.4;
  }

  /* End the animation with the image fully visible. */
  to {
    opacity: 1;
  }
}

/* ==========================================================
 * Slideshow Directional Transition Styles
 * ========================================================== */

/*
 * Add a small invisible gutter to directional slideshows.
 *
 * The gutter allows each circular navigation button to extend 5 pixels
 * beyond the visible image without being clipped by overflow: hidden.
 *
 * The declared inline slideshow width continues to control the image and
 * caption width. The two gutters add 10 pixels to the container's total
 * outside width.
 */
.slideshow-container.transition-horizontal,
.slideshow-container.transition-vertical {
  /* Add a 5-pixel safety area on both sides of the image. */
  /*padding-right: 5px;
  padding-left: 5px;*/

  /*
   * Keep the declared slideshow width as the content width so an image with
   * the same width continues to fit correctly.
   */
  box-sizing: content-box;

  /*
   * Clip moving images at the outer edges of the safety gutter.
   *
   * The circular arrows remain inside those outer edges, so they are not
   * clipped.
   */
  overflow: hidden;
}

/*
 * Keep the slide-number counter aligned with the visible image rather than
 * with the outer edge of the 5-pixel directional-transition gutter.
 */
.slideshow-container.transition-horizontal > .numbertext,
.slideshow-container.transition-vertical > .numbertext {
  /* Move the number counter to the visible image's left edge. */
  left: 0;
}

/*
 * Help the browser prepare directional slideshow images for movement.
 *
 * JavaScript adds the actual transform values only while a directional
 * transition is running.
 */
.slideshow-container.transition-horizontal > img,
.slideshow-container.transition-vertical > img {
  /*
   * Allow translated images to move smoothly without affecting surrounding
   * page elements.
   */
  backface-visibility: hidden;

  /*
   * Include Safari support for hiding the back face of a moving image.
   */
  -webkit-backface-visibility: hidden;

  /*
   * Encourage hardware-accelerated image movement in browsers that support
   * it.
   */
  transform: translate3d(0, 0, 0);
}

/*
 * Prevent the CSS fade effect from competing with horizontal movement.
 *
 * JavaScript also temporarily disables the animation inline as an additional
 * browser-safety measure.
 */
.slideshow-container.transition-horizontal > .fadeImg {
  animation-name: none;
}

/*
 * Prevent the CSS fade effect from competing with vertical movement.
 *
 * JavaScript also temporarily disables the animation inline as an additional
 * browser-safety measure.
 */
.slideshow-container.transition-vertical > .fadeImg {
  animation-name: none;
}

/* ==========================================================
 * Slideshow Caption Styles
 * ========================================================== */

/*
 * Remove the normal bottom image margin when captions are enabled.
 *
 * This keeps the caption close to the bottom of the image without changing
 * the spacing used by slideshows that have captions disabled.
 */
.slideshow-container.caption-yes > img {
  /* Remove the space above caption-enabled slideshow images. */
  margin-top: 0;

  /* Remove the space between the image and its caption. */
  margin-bottom: 0;
}

/* Style the caption that JavaScript creates beneath the active image. */
.slide-caption {
  /*
   * Keep the caption in the normal page layout while allowing its stacking
   * level to be controlled.
   */
  position: relative;

  /*
   * Keep the caption above a vertically moving image if that image briefly
   * passes behind the caption area.
   */
  z-index: 230;

  /* Add space between the bottom of the image and the caption text. */
  margin-top: 0;

  /* Add space below the caption before the next page element. */
/*   margin-bottom: 15px; */

  /* Add space inside the caption box. */
  padding: 10px 12px;

  /* Include padding inside the slideshow's declared width. */
  box-sizing: border-box;

  /* Make the caption fill the declared slideshow content width. */
  width: 100%;

  /* Center the caption text beneath the image. */
  text-align: center;

  /* Set the caption font family. */
  font-family: Verdana, sans-serif;

  /* Set the caption text size. */
  font-size: 16px;

  /* Set comfortable spacing when a caption wraps onto several lines. */
  line-height: 1.5;

  /* Set the caption text color. */
  color: #040404;

  /* Add a solid background that covers images moving behind the caption. */
  background-color: #f2f2f2;

  /* Add a light border around the caption. */
  /*border: 1px solid #d4d4d4;*/

  /* Remove the top border so the caption visually joins the image. */
  border-top: 0;
}

/*
 * Completely remove the caption from the page layout when JavaScript marks
 * it as hidden, such as when the active image has an empty alt attribute.
 */
.slide-caption[hidden] {
  display: none;
}

/* ==========================================================
 * Reduced Motion Accessibility Styles
 * ========================================================== */

/*
 * Respect visitors who have requested less animation through their operating
 * system or browser accessibility settings.
 *
 * The JavaScript also checks this preference before starting a directional
 * transition.
 */
@media (prefers-reduced-motion: reduce) {
  /*
   * Remove the existing fade animation for visitors who prefer reduced
   * motion.
   */
  .fadeImg {
    animation: none;
  }

  /*
   * Remove animated hover changes from the slideshow controls.
   */
  .prevImg,
  .nextImg {
    transition: none;
  }
}

/* Reduce the navigation control size on extremely narrow screens. */
@media only screen and (max-width: 300px) {
  .prevImg,
  .nextImg {
    /* Reduce the circular button width on extremely narrow screens. */
    width: 34px;

    /* Reduce the circular button height on extremely narrow screens. */
    height: 34px;

    /* Make the arrow character smaller on extremely narrow screens. */
    font-size: 19px;
  }
}