/* Slideshow container */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
  }

  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 10px;
    width: 30px;
    margin: 0 2px;
    background-color: #bbb;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active-slider, .dot:hover {
    background-color: #6B2090;
  }
  
  @keyframes bounce-left {
    0%   { transform: scale(1,1)      translateX(0); }
    10%  { transform: scale(1.1,.9)   translateX(0); }
    30%  { transform: scale(.9,1.1)   translateX(-20px); }
    50%  { transform: scale(1.05,.95) translateX(0); }
    57%  { transform: scale(1,1)      translateX(-7px); }
    64%  { transform: scale(1,1)      translateX(0); }
    100% { transform: scale(1,1)      translateX(0); }
  }

  @keyframes bounce-right {
    0%   { transform: scale(1,1)      translateX(0); }
    10%  { transform: scale(1.1,.9)   translateX(0); }
    30%  { transform: scale(.9,1.1)   translateX(20px); }
    50%  { transform: scale(1.05,.95) translateX(0); }
    57%  { transform: scale(1,1)      translateX(7px); }
    64%  { transform: scale(1,1)      translateX(0); }
    100% { transform: scale(1,1)      translateX(0); }
  }