/*** 

  multi_item_bs_carousel_mod.css
  
  Styles for the homepage proof points carousel.
  
  These styles, along with the script at /Wraps/ECO/wrap8/scripts/multi_item_bs_carousel_mod.js,
  modify the Bootstrap 4 carousel so that it displays 1, 2, or 3 items at once, depending on 
  the window size. 
  
  It also allows the user to scroll either left or right immediately upon page load. Scrolling in
  one direction will cycle through all slides infinitely.
  
***/

/* Push the control arrows to the left and right edges */

.pp .carousel-control-prev {
  justify-content: left;
}

.pp .carousel-control-next {
  justify-content: right;
  flex-direction: row-reverse;
}

/* Because justify-content and flex-direction didn't work for the "next" control in Firefox/MacOS */

.pp .carousel-control-prev svg {
  position: absolute;
  left: 0;
  top: 45%;
}

.pp .carousel-control-next svg {
  position: absolute;
  right: 0;
  top: 45%;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  .pp .carousel-inner {
    flex-wrap: nowrap;
  }
  
  .pp .carousel-inner .carousel-item-next,
  .pp .carousel-inner .carousel-item-prev {
    position: relative;
    transform: translate3d(0, 0, 0);
  }

  /* show 2 items */
  .pp .carousel-inner .active,
  .pp .carousel-inner .active + .carousel-item {
    display: block;
  }
  
  .pp .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .pp .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
    transition: none;
  }
  
  .pp .carousel-inner .active.carousel-item + .carousel-item + .carousel-item  {
    position: absolute;
    top: 0;
    right: -50%;
    z-index: -1;
    display: block;
    visibility: visible;
  }
    
  /* left or forward direction */
  .pp .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .pp .carousel-item-next.carousel-item-left + .carousel-item,
  .pp .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  
  /* farthest right hidden item must be abso position for animations */
  .pp .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: -50%;
    z-index: -1;
    display: block !important;
    visibility: visible !important;
  }
  
  /* right or prev direction */
  .pp .carousel-item-prev.carousel-item-right,
  .pp .carousel-item-prev.carousel-item-right + .active.carousel-item-right,
  .pp .carousel-item-right + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    display: block;
    visibility: visible;
  }

}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  /* show a third item */
  .pp .carousel-inner .active,
  .pp .carousel-inner .active + .carousel-item,
  .pp .carousel-inner .active + .carousel-item + .carousel-item {
    display: block;
  }
  
  .pp .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .pp .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
    transition: none;
  }
  
  .pp .carousel-inner .active.carousel-item + .carousel-item + .carousel-item  {
    position: relative;
    right: auto;
    z-index: auto;
  }
  
  .pp .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item  {
    position: absolute;
    top: 0;
    right: -33.333%;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  
  /* left or forward direction */
  .pp .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .pp .carousel-item-next.carousel-item-left + .carousel-item,
  .pp .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
  .pp .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  
  /* farthest right hidden item must be abso position for animations */
  .pp .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: -33.333%;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  
  /* right or prev direction */
  .pp .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .pp .carousel-item-prev.carousel-item-right + .carousel-item,
  .pp .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
  .pp .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    display: block;
    visibility: visible;
  }

}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}