@include keyframes(fadeIn) {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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

@include keyframes(fadeInDown) {
    0% {
        opacity: 0;
        @include translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

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

@include keyframes(fadeInDownBig) {
    0% {
        opacity: 0;
        @include translate3d(0, -2000px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

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

@include keyframes(fadeInLeft) {
    0% {
        opacity: 0;
        @include translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

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

@include keyframes(fadeInLeftBig) {
    0% {
        opacity: 0;
        @include translate3d(-2000px, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

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

@include keyframes(fadeInRight) {
    0% {
        opacity: 0;
        @include translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

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

@include keyframes(fadeInRightBig) {
    0% {
        opacity: 0;
        @include translate3d(2000px, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

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

@include keyframes(fadeInUp) {
    0% {
        opacity: 0;
        @include translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

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

@include keyframes(fadeInUpBig) {
    0% {
        opacity: 0;
        @include translate3d(0, 2000px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

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

@include keyframes(fadeOut) {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

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

@include keyframes(fadeOutDown) {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        @include translate3d(0, 100%, 0);
    }
}

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

@include keyframes(fadeOutDownBig) {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        @include translate3d(0, 2000px, 0);
    }
}

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

@include keyframes(fadeOutLeft) {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        @include translate3d(-100%, 0, 0);
    }
}

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

@include keyframes(fadeOutLeftBig) {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        @include translate3d(-2000px, 0, 0);
    }
}

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

@include keyframes(fadeOutRight) {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        @include translate3d(100%, 0, 0);
    }
}

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

@include keyframes(fadeOutRightBig) {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        @include translate3d(2000px, 0, 0);
    }
}

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

@include keyframes(fadeOutUp) {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        @include translate3d(0, -100%, 0);
    }
}

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

@include keyframes(fadeOutUpBig) {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        @include translate3d(0, -2000px, 0);
    }
}

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