/* --- ANIMATION ---*/

/* FADEINDOWN */

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translatey(-150px);
        -moz-transform: translatey(-150px);
        -o-transform: translatey(-150px);
        transform: translatey(-150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}

@-moz-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translatey(-150px);
        -moz-transform: translatey(-150px);
        -o-transform: translatey(-150px);
        transform: translatey(-150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translatey(-150px);
        -moz-transform: translatey(-150px);
        -o-transform: translatey(-150px);
        transform: translatey(-150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}

.in-down {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;
}

.in-down-2 {
    animation-delay: 0.2s;
}

.in-down-3 {
    animation-delay: 0.3s;
}

.in-down-4 {
    animation-delay: 0.4s;
}

.in-down-5 {
    animation-delay: 0.5s;
}

.in-down-6 {
    animation-delay: 0.6s;
}

.in-down-7 {
    animation-delay: 0.7s;
}

/* fadeInUp */

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translatey(150px);
        -moz-transform: translatey(150px);
        -o-transform: translatey(150px);
        transform: translatey(150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}

@-moz-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translatey(150px);
        -moz-transform: translatey(150px);
        -o-transform: translatey(150px);
        transform: translatey(150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translatey(150px);
        -moz-transform: translatey(150px);
        -o-transform: translatey(150px);
        transform: translatey(150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}

.in-up {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.6s;
    -moz-animation-duration: 0.6s;
    -o-animation-duration: 0.6s;
    animation-duration: 0.6s;
}

.in-up-2 {
    animation-delay: 0.2s;
}

.in-up-3 {
    animation-delay: 0.3s;
}

.in-up-4 {
    animation-delay: 0.4s;
}

.in-up-5 {
    animation-delay: 0.5s;
}

/* fadeInUpModal */

@-webkit-keyframes fadeInUpModal {
    from {
        opacity: 0;
        -webkit-transform: translatey(20px);
        -moz-transform: translatey(20px);
        -o-transform: translatey(20px);
        transform: translatey(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}

@-moz-keyframes fadeInUpModal {
    from {
        opacity: 0;
        -webkit-transform: translatey(20px);
        -moz-transform: translatey(20px);
        -o-transform: translatey(20px);
        transform: translatey(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}

@keyframes fadeInUpModal {
    from {
        opacity: 0;
        -webkit-transform: translatey(20px);
        -moz-transform: translatey(20px);
        -o-transform: translatey(20px);
        transform: translatey(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}

.in-up-modal {
    -webkit-animation-name: fadeInUpModal;
    -moz-animation-name: fadeInUpModal;
    -o-animation-name: fadeInUpModal;
    animation-name: fadeInUpModal;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.6s;
    -moz-animation-duration: 0.6s;
    -o-animation-duration: 0.6s;
    animation-duration: 0.6s;
}

/* FADEINLEFT */

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translatex(-150px);
        -moz-transform: translatex(-150px);
        -o-transform: translatex(-150px);
        transform: translatex(-150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@-moz-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translatex(-150px);
        -moz-transform: translatex(-150px);
        -o-transform: translatex(-150px);
        transform: translatex(-150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translatex(-150px);
        -moz-transform: translatex(-150px);
        -o-transform: translatex(-150px);
        transform: translatex(-150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

.in-left {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.6s;
    -moz-animation-duration: 0.6s;
    -o-animation-duration: 0.6s;
    animation-duration: 0.6s;
}

.in-left-2 {
    animation-delay: 0.2s;
}

.in-left-3 {
    animation-delay: 0.3s;
}

.in-left-4 {
    animation-delay: 0.4s;
}

.in-left-5 {
    animation-delay: 0.5s;
}

/* FADEINRight */

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translatex(150px);
        -moz-transform: translatex(150px);
        -o-transform: translatex(150px);
        transform: translatex(150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@-moz-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translatex(150px);
        -moz-transform: translatex(150px);
        -o-transform: translatex(150px);
        transform: translatex(150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translatex(150px);
        -moz-transform: translatex(150px);
        -o-transform: translatex(150px);
        transform: translatex(150px);
    }
    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

.in-right {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.6s;
    -moz-animation-duration: 0.6s;
    -o-animation-duration: 0.6s;
    animation-duration: 0.6s;
}

.in-right-2 {
    animation-delay: 0.2s;
}

.in-right-3 {
    animation-delay: 0.3s;
}

.in-right-10 {
    animation-delay: 1s;
}

/* FADEOUTUP */

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
        -webkit-transform: translatey(0px);
        -moz-transform: translatey(0px);
        -o-transform: translatey(0px);
        transform: translatey(0px);
    }
    to {
        opacity: 0;
        -webkit-transform: translatey(-50px);
        -moz-transform: translatey(-50px);
        -o-transform: translatey(-50px);
        transform: translatey(-50px);
    }
}

@-moz-keyframes fadeOutUp {
    from {
        opacity: 1;
        -webkit-transform: translatey(0px);
        -moz-transform: translatey(0px);
        -o-transform: translatey(0px);
        transform: translatey(0px);
    }
    to {
        opacity: 0;
        -webkit-transform: translatey(-50px);
        -moz-transform: translatey(-50px);
        -o-transform: translatey(-50px);
        transform: translatey(-50px);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        -webkit-transform: translatey(0px);
        -moz-transform: translatey(0px);
        -o-transform: translatey(0px);
        transform: translatey(0px);
    }
    to {
        opacity: 0;
        -webkit-transform: translatey(-50px);
        -moz-transform: translatey(-50px);
        -o-transform: translatey(-50px);
        transform: translatey(-50px);
    }
}

.out-up {
    -webkit-animation-name: fadeOutUp;
    -moz-animation-name: fadeOutUp;
    -o-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.6s;
    -moz-animation-duration: 0.6s;
    -o-animation-duration: 0.6s;
    animation-duration: 0.6s;
}

/* FADEOUTLEFT */

@-webkit-keyframes fadeoutleft {
    from {
        opacity: 1;
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
        -o-transform: translatex(0px);
        transform: translatex(0px);
    }
    to {
        opacity: 0;
        -webkit-transform: translatex(-50px);
        -moz-transform: translatex(-50px);
        -o-transform: translatex(-50px);
        transform: translatex(-50px);
    }
}

@-moz-keyframes fadeoutleft {
    from {
        opacity: 1;
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
        -o-transform: translatex(0px);
        transform: translatex(0px);
    }
    to {
        opacity: 0;
        -webkit-transform: translatex(-50px);
        -moz-transform: translatex(-50px);
        -o-transform: translatex(-50px);
        transform: translatex(-50px);
    }
}

@keyframes fadeoutleft {
    from {
        opacity: 1;
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
        -o-transform: translatex(0px);
        transform: translatex(0px);
    }
    to {
        opacity: 0;
        -webkit-transform: translatex(-50px);
        -moz-transform: translatex(-50px);
        -o-transform: translatex(-50px);
        transform: translatex(-50px);
    }
}

.out-left {
    -webkit-animation-name: fadeoutleft;
    -moz-animation-name: fadeoutleft;
    -o-animation-name: fadeoutleft;
    animation-name: fadeoutleft;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.6s;
    -moz-animation-duration: 0.6s;
    -o-animation-duration: 0.6s;
    animation-duration: 0.6s;
}

/* FADEOUTUPMODAL */

@-webkit-keyframes fadeOutUpModal {
    from {
        opacity: 1;
        -webkit-transform: translatey(0px);
        -moz-transform: translatey(0px);
        -o-transform: translatey(0px);
        transform: translatey(0px);
    }
    to {
        opacity: 0;
        -webkit-transform: translatey(-20px);
        -moz-transform: translatey(-20px);
        -o-transform: translatey(-20px);
        transform: translatey(-20px);
    }
}

@-moz-keyframes fadeOutUpModal {
    from {
        opacity: 1;
        -webkit-transform: translatey(0px);
        -moz-transform: translatey(0px);
        -o-transform: translatey(0px);
        transform: translatey(0px);
    }
    to {
        opacity: 0;
        -webkit-transform: translatey(-20px);
        -moz-transform: translatey(-20px);
        -o-transform: translatey(-20px);
        transform: translatey(-20px);
    }
}

@keyframes fadeOutUpModal {
    from {
        opacity: 1;
        -webkit-transform: translatey(0px);
        -moz-transform: translatey(0px);
        -o-transform: translatey(0px);
        transform: translatey(0px);
    }
    to {
        opacity: 0;
        -webkit-transform: translatey(-20px);
        -moz-transform: translatey(-20px);
        -o-transform: translatey(-20px);
        transform: translatey(-20px);
    }
}

.out-up-modal {
    -webkit-animation-name: fadeOutUpModal;
    -moz-animation-name: fadeOutUpModal;
    -o-animation-name: fadeOutUpModal;
    animation-name: fadeOutUpModal;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.6s;
    -moz-animation-duration: 0.6s;
    -o-animation-duration: 0.6s;
    animation-duration: 0.6s;
}

/* FADEIN */

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

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

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

.fade-in {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.6s;
    -moz-animation-duration: 0.6s;
    -o-animation-duration: 0.6s;
    animation-duration: 0.6s;
}

.fade-in-2 {
    animation-delay: 0.5s;
}

.fade-in-3 {
    animation-delay: 0.7s;
}