:root {
  --carousel-height: 100%;
  }

  /**
    Wrapper
  */
  .carousel {
    position: relative;
    padding-top: 110px;
  }


  /**
    Controls - pause/resume, previous, and next buttons
  */

    /* Resets for all buttons */
    .is-control {
      background: none;
      color: rgba(0,0,0,.7);
      border: 0;
      cursor: pointer;
      transition: all .2s linear;
    }

      .is-control:focus {
        outline: none;
        background-color: rgba(0,0,0,.8);
        color: rgba(255,255,255,1);
      }

    /* Pause/resume button */
    .rotation-button {
      position: absolute;
      bottom: 5px;
      left: 5px;

      padding: 10px 15px;
      z-index: 1;

      font-size: 20px;

      border-radius: 5px;
    }

      .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: calc(var(--carousel-height)/2);

      padding: 5px 15px;
      z-index: 1;

      font-size: 40px;

      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      border-left: 0;
    }

    /* Next slide button */
    .next-button {
      position: absolute;
      right: 0;
      top: calc(var(--carousel-height)/2);

      padding: 5px 15px;
      z-index: 1;

      font-size: 40px;

      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      border-right: 0;
    }


  /**
    Collection of all slides
  */
  .slides {
    overflow: hidden;
  }


  /**
    Single slide
  */
  .owl-item {
    display: inline-block;
    position: relative;
  }

    /* Make absolutely sure that non-visible slides are fully hidden. */
    .owl-item[aria-hidden="true"] {
      visibility: hidden;
    }

    .owl-item-content {
      height: var(--carousel-height) !important;
    }

      .owl-item-content .background-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

  /**
    Slide dot navigation
  */
  .navigation {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;

    list-style: none;
    margin: 0;
    padding: 0;
  }

    .navigation .slide-dot {
      display: inline;
      margin: 0 5px;
    }

      .navigation .slide-dot:not(:last-of-type) {
        margin-right: 5px;
      }

      /* Create a circle to serve as the slide dot */
      .navigation .slide-dot-button {
      	background-color: rgba(255,255,255,1);
        border: 0;
        width: 15px;
        height: 15px;
        border-radius: 15px;
        cursor: pointer;
        opacity: 1;
        transition: transform .2s linear;
      }

        /* Give the focused slide dot a nice visible focus indicator */
        .navigation .slide-dot-button:focus {
          box-shadow: 0 0 0 1px white, 0 0 0 4px hsl(204, 86%, 53%);
          outline: none;
        }

        /* Fade in on hover */
        .navigation .slide-dot-button:hover {
          opacity: 1;
        }

        /* Leverage aria-current for styling to ensure we're using the attribute correctly */
        .navigation .slide-dot .slide-dot-button[aria-current="true"] {
          background-color: rgba(255,255,255,1);
          transform: scale(1.4);
        }

  /**
    Owl will still put some DOM elements (like previous/next buttons) in the DOM even when they aren't used, but with a class of `.disabled`. Let's hide them completely to avoid confusing people.
  */
  .disabled {
    display: none;
  }