/*animations.css*/


@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  50% {
    opacity: 1;
    transform: none;
  }

    100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  50% {
    opacity: 1;
    transform: none;
  }
    100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0;
    /*transform: none;*/
    transform: translate3d(-100%, 0, 0);
  }  

  100% {
    opacity: 0;
    /*transform: none;*/
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0;
    /*transform: none;*/
    transform: translate3d(100%, 0, 0);
  }

100% {
    opacity: 0;
    /*transform: none;*/
    transform: translate3d(100%, 0, 0);
  }
}


.fadeOutLeft{
    /*animation-name: fadeOutLeft;*/
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

.fadeOutRight{
    /*animation-name: fadeOutRight;*/
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

.fadeInRight {
    /*animation-name: fadeInRight;*/
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in;
}

.fadeInLeft {
    /*animation-name: fadeInLeft;*/
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in;
}