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

  wallop-slider--slide.css

  This is the slide animation styles

  NOTE: The 10ms animation-delay fixed some
        weird rendering issues with iPhone.

**************************************************/
.wallop-slider--slide .wallop-slider__item--show-previous {
  -webkit-animation: slideFromLeft 450ms 10ms ease both;
  -moz-animation: slideFromLeft 450ms 10ms ease both;
  -ms-animation: slideFromLeft 450ms 10ms ease both;
  animation: slideFromLeft 450ms 10ms ease both;
}

.wallop-slider--slide .wallop-slider__item--show-next {
  -webkit-animation: slideFromRight 450ms 10ms ease both;
  -moz-animation: slideFromRight 450ms 10ms ease both;
  -ms-animation: slideFromRight 450ms 10ms ease both;
  animation: slideFromRight 450ms 10ms ease both;
}

/* In order to animate the hidden elemends, we need to reset the display to block */
.wallop-slider--slide .wallop-slider__item--hide-previous,
.wallop-slider--slide .wallop-slider__item--hide-next {
  display: block;
}

.wallop-slider--slide .wallop-slider__item--hide-previous {
  -webkit-animation: slideToLeft 450ms 10ms ease both;
  -moz-animation: slideToLeft 450ms 10ms ease both;
  -ms-animation: slideToLeft 450ms 10ms ease both;
  animation: slideToLeft 450ms 10ms ease both;
}

.wallop-slider--slide .wallop-slider__item--hide-next {
  -webkit-animation: slideToRight 450ms 10ms ease both;
  -moz-animation: slideToRight 450ms 10ms ease both;
  -ms-animation: slideToRight 450ms 10ms ease both;
  animation: slideToRight 450ms 10ms ease both;
}

/*==========  SLIDE ANIMATIONS  ==========*/
@-webkit-keyframes slideFromLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@-moz-keyframes slideFromLeft {
  0% {
    -moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
  }
  100% {
    -moz-transform: translate3d(0, 0, 0);
  }
}

@-ms-keyframes slideFromLeft {
  0% {
    -ms-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
  }
  100% {
    -ms-transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideFromRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@-moz-keyframes slideFromRight {
  0% {
    -moz-transform: translate3d(100%, 0, 0);
  }
  100% {
    -moz-transform: translate3d(0, 0, 0);
  }
}

@-ms-keyframes slideFromRight {
  0% {
    -ms-transform: translate3d(100%, 0, 0);
  }
  100% {
    -ms-transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideToLeft {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
  }
}

@-moz-keyframes slideToLeft {
  0% {
    -moz-transform: translate3d(0, 0, 0);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -moz-transform: translate3d(-100%, 0, 0);
  }
}

@-ms-keyframes slideToLeft {
  0% {
    -ms-transform: translate3d(0, 0, 0);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -ms-transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes slideToRight {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
  }
}

@-moz-keyframes slideToRight {
  0% {
    -moz-transform: translate3d(0, 0, 0);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -moz-transform: translate3d(100%, 0, 0);
  }
}

@-ms-keyframes slideToRight {
  0% {
    -ms-transform: translate3d(0, 0, 0);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -ms-transform: translate3d(100%, 0, 0);
  }
}