@-webkit-keyframes inRight {
  0% {
    -webkit-transform: translate3d(300%, 0, 0);
            transform: translate3d(300%, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes inRight {
  0% {
    -webkit-transform: translate3d(300%, 0, 0);
            transform: translate3d(300%, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

.inRight {
  -webkit-animation-name: inRight;
          animation-name: inRight;
}

@-webkit-keyframes outRight {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  100% {
    -webkit-transform: translate3d(300%, 0, 0);
            transform: translate3d(300%, 0, 0);
  }
}

@keyframes outRight {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  100% {
    -webkit-transform: translate3d(300%, 0, 0);
            transform: translate3d(300%, 0, 0);
  }
}

.outRight{
  -webkit-animation-name: outRight;
  animation-name: outRight;
}

@-webkit-keyframes inLeft {
  0% {
    -webkit-transform: translate3d(-300%, 0, 0);
            transform: translate3d(-300%, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes inLeft {
  0% {
    -webkit-transform: translate3d(-300%, 0, 0);
            transform: translate3d(-300%, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

.inLeft {
  -webkit-animation-name: inLeft;
          animation-name: inLeft;
}

@-webkit-keyframes outLeft {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  100% {
    -webkit-transform: translate3d(-300%, 0, 0);
            transform: translate3d(-300%, 0, 0);
  }
}

@keyframes outLeft {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  100% {
    -webkit-transform: translate3d(-300%, 0, 0);
            transform: translate3d(-300%, 0, 0);
  }
}

.outLeft{
  -webkit-animation-name: outLeft;
  animation-name: outLeft;
}