/*
 * FILE_HEADER
 */

/** 
Left to right animation.
List items appear by moving in from the left and disappear by moving out to the right.
Opacity is increased during appearance and decreased during disappearance
 */

@-webkit-keyframes leftToRight-appear {
  0% {
    opacity: 0;
    transform: translate(-100%,0px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes leftToRight-appear {
  0% {
    opacity: 0;
    transform: translate(-100%,0px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes leftToRight-disappear {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate(100%,0px);
  }
}

@keyframes leftToRight-disappear {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate(100%,0px);
  }
}

.leftToRight-enter {
  opacity: 0;
}

.leftToRight-enter.leftToRight-enter-active {
  opacity: 1;
  animation: leftToRight-appear 500ms ease-in;
  transition: all .50s ease-in;
}

.leftToRight-exit {
  opacity: 1;

}

.leftToRight-exit.leftToRight-exit-active {
  opacity: 0.1;
  transition: all .50s ease-out;
  animation: leftToRight-disappear 500ms ease-out;
}

/** 
Right to left animation.
List items appear by moving in from the right and disappear by moving out to the left.
Opacity is increased during appearance and decreased during disappearance
 */

@-webkit-keyframes rightToLeft-appear {
  0% {
    opacity: 0;
    transform: translate(100%,0px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rightToLeft-appear {
  0% {
    opacity: 0;
    transform: translate(100%,0px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes rightToLeft-disappear {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate(-100%,0px);
  }
}

@keyframes rightToLeft-disappear {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translate(-100%,0px);
  }
}

.rightToLeft-enter {
  opacity: 0;
}

.rightToLeft-enter.rightToLeft-enter-active {
  opacity: 1;
  animation: rightToLeft-appear 500ms ease-in;
  transition: all .50s ease-in;
}

.rightToLeft-exit {
  opacity: 1;

}

.rightToLeft-exit.rightToLeft-exit-active {
  opacity: 0.1;
  transition: all .50s ease-out;
  animation: rightToLeft-disappear 500ms ease-out;
}