/**
  Setup for code demo only
*/
:root {
  --eplistingcarousel-height: 700px;
}


/**
  Container
*/
.eplistingcarousel {
  position: relative;
}


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

  /* 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/play 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(--eplistingcarousel-height)/2 - 40px);
    
    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(--eplistingcarousel-height)/2 - 40px);
    
    padding: 5px 15px;
    z-index: 1;
    
    font-size: 40px;
    
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: 0;
  }


/**
  eplistingslides
*/
.eplistingslides {
  overflow: hidden;
}

  .eplistingslides:focus {
    outline: none;
  }

  .eplistingslides:focus:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    z-index: 100;
    
    outline: 2px solid royalblue;
    outline-offset: 2px;
  }

  .eplistingslides .slide {
    position: relative;
    height: var(--eplistingcarousel-height);
    width: 100%;
  }

    .eplistingslides .slide.is-hidden {
      visibility: hidden;
    }

    .eplistingslides .slide .background-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }




/**
  Slide dot navigation
*/
.navigation {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;  
  list-style: none;
  margin: 0;
  padding: 0;
}

  .navigation .dot {
    display: inline;
    margin: 0 4px;
  }

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

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

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

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

/** Credits at bottom */
.credits {
  margin-top: 20px;
  float: right;
  opacity: 1;
}