/*----------  FADE IN DOWN  ----------*/
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}

/*----------  FADE IN LEFT  ----------*/
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}

/*----------  FADE IN RIGHT  ----------*/
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}

/*----------  FADE IN UP  ----------*/
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}

/*----------  FADE OUT DOWN  ----------*/
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}

/*----------  FADE OUT LEFT  ----------*/
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}

/*----------  FADE OUT RIGHT  ----------*/
@-webkit-keyframes fadeOutRight {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}

/*----------  FADE OUT UP  ----------*/
@-webkit-keyframes fadeOutUp {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}
}
@keyframes fadeOutUp {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}

/*----------  ZOOM IN  ----------*/
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.2, .2, .2);
transform: scale3d(.2, .2, .2);
}

50% {
opacity: 1;
}
to {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.2, .2, .2);
transform: scale3d(.2, .2, .2);
}

50% {
opacity: 1;
}
to {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}

/*----------  ZOOM OUT  ----------*/
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}

50% {
opacity: 0;
-webkit-transform: scale3d(.2, .2, .2);
transform: scale3d(.2, .2, .2);
}
to {
opacity: 0;
}
}
@keyframes zoomOut {
from {
opacity: 1;
}

50% {
opacity: 0;
-webkit-transform: scale3d(.2, .2, .2);
transform: scale3d(.2, .2, .2);
}

to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}