/* === ANIMATIONS === */
/*=== Trigger  ===*/
.animate {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}


/*=== Optional Delays, change values here  ===*/
.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.two {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}

.three {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
animation-delay: 2.5s;
}

.four {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}

.five {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}

.six {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
animation-delay: 5.5s;
}

.seven {
-webkit-animation-delay: 6.5s;
-moz-animation-delay: 6.5s;
animation-delay: 6.5s;
}

.eight {
-webkit-animation-delay: 7.5s;
-moz-animation-delay: 7.5s;
animation-delay: 7.5s;
}





/*=== Animations start here  ===*/

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

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

to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
}
}

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


/*=== FADE IN DOWN ===*/
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDown {
0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
}
100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
}
}
@keyframes fadeInDown {
0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
}
100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
}
} 

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

to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
}
}
@keyframes fadeInLeft {
from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 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(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
}

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

to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
}
}

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

/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn {
from {
        opacity: 0;
}

to {
        opacity: 1;
}
}
@keyframes fadeIn {
from {
        opacity: 0;
}

to {
        opacity: 1;
}
}
.fadeIn {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
}

/*=== FADE IN UP Big ===*/
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInUpBig {
0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
}
100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        }
}
@keyframes fadeInUpBig {
0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
}
100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        }
} 

/*=== FADE IN DOWN Big ===*/
.fadeInDownBig {
        -webkit-animation-name: fadeInDownBig;
        animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInDownBig {
        0% {
                opacity: 0;
                -webkit-transform: translate3d(0, -2000px, 0);
                transform: translate3d(0, -2000px, 0);
        }
        100% {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
        }
}
@keyframes fadeInDownBig {
        0% {
                opacity: 0;
                -webkit-transform: translate3d(0, -2000px, 0);
                transform: translate3d(0, -2000px, 0);
        }
        100% {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
        }
} 

/*=== FADE IN LEFT Big ===*/
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInLeftBig {
0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
}
100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
}
}
@keyframes fadeInLeftBig {
0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
}
100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
}
} 

/*=== FADE IN RIGHT Big ===*/
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}