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

.carousel-slide-show {
  /* -- Buttons: pause / reseum / previous / next -- */
  /* Resets for all buttons */
  /* Pause/resume button */
  /* Previous slide button */
  /* Next slide button */
  /**
          Single slide
        */
  /**
          Restyle the slide dots generated by Slick Slider
        */
  /* Create a circle to serve as the slide dot */
  /* Give the focused slide dot a nice visible focus indicator */
  /* Leverage aria-current for styling to ensure we're using the attribute correctly */
  /* - - THEME CUSTOMIZATIONS - - */
  /* - - content and colors - - */ }
  .carousel-slide-show > .splide.splide--loop {
    height: 100% !important; }
  .carousel-slide-show .splide__pagination.splide__pagination--ltr {
    margin-bottom: 0;
    padding-left: 0;
    overflow: visible !important; }
  .carousel-slide-show .splide__pagination__page.is-active {
    border: 1px solid #ccc; }
  .carousel-slide-show.carousel-slider {
    position: relative;
    max-width: 100%;
    width: 100%; }
  .carousel-slide-show .is-control {
    z-index: 5;
    background: none;
    color: rgba(0, 0, 0, 0.7);
    border: 0;
    cursor: pointer;
    transition: all .2s linear; }
  .carousel-slide-show .is-control:focus {
    outline: none;
    background-color: rgba(0, 0, 0, 0.8);
    color: white; }
  .carousel-slide-show .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; }
  .carousel-slide-show .rotation-button .pause-container, .carousel-slide-show .rotation-button .resume-container {
    display: none; }
  .carousel-slide-show .rotation-button .pause-container.is-visible, .carousel-slide-show .rotation-button .resume-container.is-visible {
    display: block; }
  .carousel-slide-show .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) {
    .carousel-slide-show .previous-button {
      left: -58px;
      top: calc(var(--carousel-slide-show-height)/2 - 60px);
      border-radius: 10px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0; } }
  .carousel-slide-show .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) {
    .carousel-slide-show .next-button {
      right: -58px;
      top: calc(var(--carousel-slide-show-height)/2 - 60px);
      border-radius: 10px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0; } }
  .carousel-slide-show .splide__slide {
    position: relative;
    height: var(--carousel-slide-show-height);
    visibility: hidden; }
  .carousel-slide-show .splide__slide.is-visible {
    visibility: visible; }
  .carousel-slide-show .splide__slide .background-image {
    width: 100%;
    height: 100% !important;
    object-fit: cover; }
  .carousel-slide-show .splide__slide .content {
    width: 100%;
    white-space: normal;
    padding: 20px; }
  .carousel-slide-show .splide__slide .content h2, .carousel-slide-show .splide__slide .content h3, .carousel-slide-show .splide__slide .content h4 {
    font-size: calc(23px + 11 * ((100vw - 100px) / 1900));
    margin: 0; }
  .carousel-slide-show .splide__slide .content p {
    margin: 10px 0 20px 0; }
  .carousel-slide-show .splide__pagination {
    bottom: 15px; }
  .carousel-slide-show .splide__pagination li {
    margin: 0 5px; }
  .carousel-slide-show .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; }
  .carousel-slide-show .splide__pagination li button:focus {
    box-shadow: 0 0 0 1px white, 0 0 0 4px #209cee;
    outline: none; }
  .carousel-slide-show .splide__pagination li button[aria-current="true"] {
    background-color: black; }
  .carousel-slide-show.carousel-slider-testimonial {
    background-color: #DEDEDE; }
    .carousel-slide-show.carousel-slider-testimonial .carousel-content.component-text {
      color: #333 !important; }
  @media screen and (max-width: 767.98px) {
    .carousel-slide-show.carousel-slider.carousel-slider-overlay {
      background-color: black; } }
  .carousel-slide-show.carousel-slider.carousel-slider-image {
    background-color: rgba(0, 0, 0, 0.7); }
  .carousel-slide-show.carousel-slider-image .splide__slide .content {
    color: white !important; }
  .carousel-slide-show.carousel-slider-image .splide__slide .content h2, .carousel-slide-show.carousel-slider-image .splide__slide .content h3, .carousel-slide-show.carousel-slider-image .splide__slide .content h4, .carousel-slide-show.carousel-slider-image .splide__slide .content strong, .carousel-slide-show.carousel-slider-image .splide__slide .content em {
    color: white !important; }
  .carousel-slide-show.carousel-slider-overlay .splide__slide .content, .carousel-slide-show.carousel-slider-overlay .splide__slide .content strong, .carousel-slide-show.carousel-slider-overlay .splide__slide .content h2, .carousel-slide-show.carousel-slider-overlay .splide__slide .content h3, .carousel-slide-show.carousel-slider-overlay .splide__slide .content h4 {
    color: white !important; }
  .carousel-slide-show.carousel-fixed-height .splide__slide .background-image {
    object-fit: scale-down;
    max-height: 400px; }
  @media screen and (min-width: 1200px) {
    .carousel-slide-show.carousel-fixed-height .splide__slide .background-image {
      max-height: 500px; } }
  @media screen and (min-width: 768px) {
    .carousel-slide-show.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-slide-show.carousel-slider-overlay .splide__pagination li button {
      background-color: rgba(255, 255, 255, 0.6); } }
  @media screen and (min-width: 768px) {
    .carousel-slide-show.carousel-slider-testimonial .splide__slide {
      display: flex;
      align-items: center; }
    .carousel-slide-show.carousel-slider-testimonial .splide__slide > .background-image, .carousel-slide-show.carousel-slider-testimonial .splide__slide > .carousel-image-link {
      width: 50%; }
    .carousel-slide-show.carousel-slider-testimonial .splide__slide .content {
      left: 50%;
      width: 50%; } }
