/* Simple Fade */
.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s .5s, opacity .5s linear;
}

/* Fade in Left */
@-webkit-keyframes fadeInLeft {
0% {
   opacity: 0;
   -webkit-transform: translateX(-30px);
}
100% {
   opacity: 1;
   -webkit-transform: translateX(0);
}
}

@-moz-keyframes fadeInLeft {
0% {
   opacity: 0;
   -webkit-transform: translateX(-30px);
}
100% {
   opacity: 1;
   -webkit-transform: translateX(0);
}
}

@keyframes fadeInLeft {
0% {
   opacity: 0;
   transform: translateX(-30px);
}
100% {
   opacity: 1;
   transform: translateX(0);
}
}

.fade-in-left {
    opacity:0;  /* make things invisible upon start */
    /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeInLeft ease-in 1;
    animation:fadeInLeft ease-in 1;
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

/* Fade out Left */
@-webkit-keyframes fadeOutLeft {
    0% {
       opacity: 1;
       -webkit-transform: translateX(0);
    }
    100% {
       opacity: 0;
       -webkit-transform: translateX(-30px);
    }
}

@-moz-keyframes fadeOutLeft {
    0% {
       opacity: 1;
       -webkit-transform: translateX(0);
    }
    100% {
       opacity: 0;
       -webkit-transform: translateX(-30px);
    }
}

@keyframes fadeOutLeft {
    0% {
       opacity: 1;
       transform: translateX(0);
    }
    100% {
       opacity: 0;
       transform: translateX(-30px);
    }
}

.fade-out-left {
    /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeOutLeft ease-out 1;
    animation:fadeOutLeft ease-out 1;
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 0)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}