/* - - 
        CSS for slide show reused and modified from Accessibility360:
        https://accessible360.github.io/accessible-carousel-boilerplates/
        2023-05-08
 - - */
/* - - COMMON CSS - - */
:root {
  --carousel-height: 100%; }

.splide__pagination.splide__pagination--ltr {
  margin-bottom: 0;
  padding-left: 0;
  overflow: visible !important; }

.splide__pagination__page.is-active {
  border: 1px solid #ccc; }

.carousel-slider {
  position: relative;
  max-width: 100%;
  width: 100%; }

/* -- Buttons: pause / reseum / previous / next -- */
/* Resets for all buttons */
.is-control {
  z-index: 5;
  background: none;
  color: rgba(0, 0, 0, 0.7);
  border: 0;
  cursor: pointer;
  transition: all .2s linear; }

.is-control:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0.8);
  color: white; }

/* Pause/resume button */
.rotation-button {
  position: absolute;
  bottom: 5px;
  padding: 10px 15px;
  z-index: 3;
  font-size: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.8);
  right: 10px; }

.rotation-button .pause-container, .rotation-button .resume-container {
  display: none; }

.rotation-button .pause-container.is-visible, .rotation-button .resume-container.is-visible {
  display: block; }

/* Previous slide button */
.previous-button {
  position: absolute;
  left: 0;
  top: 25%;
  padding: 5px 15px;
  z-index: 3;
  font-size: 40px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left: 0; }

@media screen and (min-width: 768px) {
  .previous-button {
    left: -58px;
    top: calc(var(--carousel-height)/2 - 60px);
    border-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; } }

/* Next slide button */
.next-button {
  position: absolute;
  right: 0;
  top: 25%;
  padding: 5px 15px;
  z-index: 1;
  font-size: 40px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right: 0; }

@media screen and (min-width: 768px) {
  .next-button {
    right: -58px;
    top: calc(var(--carousel-height)/2 - 60px);
    border-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; } }

/**
      Single slide
    */
.splide__slide {
  position: relative;
  height: var(--carousel-height);
  visibility: hidden; }

.splide__slide.is-visible {
  visibility: visible; }

.splide__slide .background-image {
  width: 100%;
  height: 100% !important;
  object-fit: cover; }

.splide__slide .content {
  width: 100%;
  white-space: normal;
  padding: 20px; }

.splide__slide .content h2, .splide__slide .content h3, .splide__slide .content h4 {
  font-size: calc(23px + 11 * ((100vw - 100px) / 1900));
  margin: 0; }

.splide__slide .content p {
  margin: 10px 0 20px 0; }

/**
      Restyle the slide dots generated by Slick Slider
    */
.splide__pagination {
  bottom: 15px; }

.splide__pagination li {
  margin: 0 5px; }

/* Create a circle to serve as the slide dot */
.splide__pagination li button {
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.3);
  border: 0;
  border-radius: 15px;
  cursor: pointer; }

/* Give the focused slide dot a nice visible focus indicator */
.splide__pagination li button:focus {
  box-shadow: 0 0 0 1px white, 0 0 0 4px #209cee;
  outline: none; }

/* Leverage aria-current for styling to ensure we're using the attribute correctly */
.splide__pagination li button[aria-current="true"] {
  background-color: black; }

/* - - THEME CUSTOMIZATIONS - - */
.carousel-slider-testimonial {
  background-color: #DEDEDE; }
  .carousel-slider-testimonial .carousel-content.component-text {
    color: #333 !important; }

@media screen and (max-width: 767.98px) {
  .carousel-slider.carousel-slider-overlay {
    background-color: black; } }

.carousel-slider.carousel-slider-image {
  background-color: rgba(0, 0, 0, 0.7); }

/* - - content and colors - - */
.carousel-slider-image .splide__slide .content {
  color: white !important; }

.carousel-slider-image .splide__slide .content h2, .carousel-slider-image .splide__slide .content h3, .carousel-slider-image .splide__slide .content h4, .carousel-slider-image .splide__slide .content strong, .carousel-slider-image .splide__slide .content em {
  color: white !important; }

.carousel-slider-overlay .splide__slide .content, .carousel-slider-overlay .splide__slide .content strong, .carousel-slider-overlay .splide__slide .content h2, .carousel-slider-overlay .splide__slide .content h3, .carousel-slider-overlay .splide__slide .content h4 {
  color: white !important; }

@media screen and (min-width: 768px) {
  .carousel-slider-overlay .splide__slide .content {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); } }

@media screen and (min-width: 768px) {
  .carousel-slider-overlay .splide__pagination li button {
    background-color: rgba(255, 255, 255, 0.6); } }

@media screen and (min-width: 768px) {
  .carousel-slider-testimonial .splide__slide {
    display: flex;
    align-items: center; }
  .carousel-slider-testimonial .splide__slide > .background-image, .carousel-slider-testimonial .splide__slide > .carousel-image-link {
    width: 50%; }
  .carousel-slider-testimonial .splide__slide .content {
    left: 50%;
    width: 50%; } }