/**************************************************

  wallop-slider--fold.css

  This is the fold animation styles

**************************************************/
.wallop-slider--fold .wallop-slider__list {
  -webkit-perspective: 1000;
}

.wallop-slider--fold .wallop-slider__item--show-previous {
  -webkit-transform: translateZ(0);
  -webkit-transform-origin: center left;
  -webkit-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
  z-index: 2;
}

.wallop-slider--fold .wallop-slider__item--show-next {
  -webkit-transform: translateZ(0);
  -webkit-transform-origin: center right;
  -webkit-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
  z-index: 1;
}

.wallop-slider--fold .wallop-slider__item--hide-previous,
.wallop-slider--fold .wallop-slider__item--hide-next {
  display: block;
}

/*==========  FOLD ANIMATIONS  ==========*/
@-webkit-keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
  }
}

@-webkit-keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
  }
}