/* LEFT to RIGHT */
.lefttoright-in {
  -webkit-animation: xlefttoright-in 0.7s ease-in-out both;
          animation: xlefttoright-in 0.7s ease-in-out both;
}
@-webkit-keyframes xlefttoright-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes xlefttoright-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}

.lefttoright-out {
  -webkit-animation: xlefttoright-out 0.7s ease-in-out both;
          animation: xlefttoright-out 0.7s ease-in-out both;
}
@-webkit-keyframes xlefttoright-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}
@keyframes xlefttoright-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}

/* RIGHT to LEFT */
.righttoleft-in {
  -webkit-animation: xrighttoleft-in 0.7s ease-in-out both;
          animation: xrighttoleft-in 0.7s ease-in-out both;
}
@-webkit-keyframes xrighttoleft-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes xrighttoleft-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}

.righttoleft-out {
  -webkit-animation: xrighttoleft-out 0.7s ease-in-out both;
          animation: xrighttoleft-out 0.7s ease-in-out both;
}
@-webkit-keyframes xrighttoleft-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}
@keyframes xrighttoleft-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}

/* TOP to DOWN */
.toptodown-in {
  -webkit-animation: xtoptodown-in 0.7s ease-in-out both;
          animation: xtoptodown-in 0.7s ease-in-out both;
}
@-webkit-keyframes xtoptodown-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes xtoptodown-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}

.toptodown-out {
  -webkit-animation: xtoptodown-out 0.7s ease-in-out both;
          animation: xtoptodown-out 0.7s ease-in-out both;
}
@-webkit-keyframes xtoptodown-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}
@keyframes xtoptodown-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}

/* DOWN to TOP */
.downtotop-in {
  -webkit-animation: xdowntotop-in 0.7s ease-in-out both;
          animation: xdowntotop-in 0.7s ease-in-out both;
}
@-webkit-keyframes xdowntotop-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
@keyframes xdowntotop-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}

.downtotop-out {
  -webkit-animation: xdowntotop-out 0.7s ease-in-out both;
          animation: xdowntotop-out 0.7s ease-in-out both;
}
@-webkit-keyframes xdowntotop-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}
@keyframes xdowntotop-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}

/* BOUNCE FWD */
.bouncefwd-in {
  -webkit-animation: xbouncefwd-in 0.7s both;
          animation: xbouncefwd-in 0.7s both;
}
@-webkit-keyframes xbouncefwd-in {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.84);
            transform: scale(0.84);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes xbouncefwd-in {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.84);
            transform: scale(0.84);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

.bouncefwd-out {
  -webkit-animation: xbouncefwd-out 0.7s both;
          animation: xbouncefwd-out 0.7s both;
}
@-webkit-keyframes xbouncefwd-out {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  5% {
    -webkit-transform: translateZ(-100px);
            transform: translateZ(-100px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  15% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  25% {
    -webkit-transform: translateZ(-110px);
            transform: translateZ(-110px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  38% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  52% {
    -webkit-transform: translateZ(-200px);
            transform: translateZ(-200px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  70% {
    -webkit-transform: translateZ(0) scale(1);
            transform: translateZ(0) scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  85% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-900px) scale(0);
            transform: translateZ(-900px) scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
}
@keyframes xbouncefwd-out {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  5% {
    -webkit-transform: translateZ(-100px);
            transform: translateZ(-100px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  15% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  25% {
    -webkit-transform: translateZ(-110px);
            transform: translateZ(-110px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  38% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  52% {
    -webkit-transform: translateZ(-200px);
            transform: translateZ(-200px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  70% {
    -webkit-transform: translateZ(0) scale(1);
            transform: translateZ(0) scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  85% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-900px) scale(0);
            transform: translateZ(-900px) scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
}

/* SLIDE CENTER */
.slidecenter-in {
  -webkit-animation: slidecenter-in 0.7s both;
	        animation: slidecenter-in 0.7s both;
}
@-webkit-keyframes slidecenter-in {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-filter: blur(5px);
            filter: blur(5px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;

  }
}
@keyframes slidecenter-in {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-filter: blur(5px);
            filter: blur(5px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;

  }
}

.slidecenter-out {
  -webkit-animation: slidecenter-out 0.7s both;
	        animation: slidecenter-out 0.7s both;
}
@-webkit-keyframes slidecenter-out {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-filter: blur(5px);
            filter: blur(5px);
    opacity: 0;
  }
}
@keyframes slidecenter-out {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-filter: blur(5px);
            filter: blur(5px);
    opacity: 0;
  }
}


/* GENERAL */

.fade-in {
  -webkit-animation: fade-in 1s both;
          animation: fade-in 1s both;
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-out {
  -webkit-animation: fade-out 1s both;
          animation: fade-out 1s both;
}
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}