/*

CC 2.0 License Iatek LLC 2018
Attribution required

*/


@media (min-width: 768px) and (max-width: 991px) {
    /* Show 4th slide on md  if col-md-4*/
      .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
          position: absolute;
          top: 0;
          right: -33.3333%;  /*change this with javascript in the future*/
          z-index: -1;
          display: block;
          visibility: visible;
      }
  
  }
  
  @media (min-width: 576px) and (max-width: 768px) {
    /* Show 3rd slide on sm  if col-sm-6*/
      .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
          position: absolute;
          top: 0;
          right: -50%;  /*change this with javascript in the future*/
          z-index: -1;
          display: block;
          visibility: visible;
      }
  
  }
  @media (min-width: 576px) {
      
      .carousel-item {
          margin-right: 0;
      }
  
      /* show 2 items */
      .carousel-inner .active + .carousel-item {
          display: block;
      }
      
      .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
      .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
          transition: none;
      }
  
      .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
      }
      
      /* left or forward direction */
      .active.carousel-item-left + .carousel-item-next.carousel-item-left,
      .carousel-item-next.carousel-item-left + .carousel-item,
      .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 */
      .carousel-inner .carousel-item-prev.carousel-item-right {
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          display: block;
          visibility: visible;
      }
      
      /* right or prev direction */
      .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
      .carousel-item-prev.carousel-item-right + .carousel-item,
      .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
          position: relative;
          transform: translate3d(100%, 0, 0);
          visibility: visible;
          display: block;
          visibility: visible;
      }
  
  }
  
  /*MD*/
  @media (min-width: 768px) {
  
      /* show 3rd of 3 item slide */
    .carousel-inner .active + .carousel-item + .carousel-item {
          display: block;
      }
   
      .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
          transition: none;
      }
    
      
      .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
      }
      
      
      /* left or forward direction */
      .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
          position: relative;
          transform: translate3d(-100%, 0, 0);
          visibility: visible;
      }
      
      /* right or prev direction */
      .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
          position: relative;
          transform: translate3d(100%, 0, 0);
          visibility: visible;
          display: block;
          visibility: visible;
      }
  
  }
  
  
  /*LG */
  @media (min-width: 991px) {
  
      /* show 4th item */
      .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
          display: block;
      }
      
      .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
          transition: none;
      }
      
      /* Show 5th slide on lg if col-lg-3 */
      .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
          position: absolute;
          top: 0;
          right: -25%;  /*change this with javascript in the future*/
          z-index: -1;
          display: block;
          visibility: visible;
      }
      
      /* left or forward direction */
      .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
          position: relative;
          transform: translate3d(-100%, 0, 0);
          visibility: visible;
      }
      
      /* right or prev direction //t - previous slide direction last item animation fix */
      .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
          position: relative;
          transform: translate3d(100%, 0, 0);
          visibility: visible;
          display: block;
          visibility: visible;
      }
  
  }
  
  /*LG 6th  -  if you want a carousel with 6 slides */
  @media (min-width: 991px) {
  
          /* show 5th and 6th item */
   /*   .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
          display: block;
      }
  
      
    
      .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
      }
  */
      
    
    /*show 7th slide for animation when its a 6 slides carousel */
   /*      .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item  + .carousel-item {
          position: absolute;
          top: 0;
          right: -16.666666666%;
          z-index: -1;
          display: block;
          visibility: visible;
    }
    */
    
        /* forward direction > */
   /*   .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
          position: relative;
          transform: translate3d(-100%, 0, 0);
          visibility: visible;
      }
    */
        /* prev direction < last item animation fix */
   /*   .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
      .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
          position: relative;
          transform: translate3d(100%, 0, 0);
          visibility: visible;
          display: block;
          visibility: visible;
      }
  */
  }