/* ==== TRANSITIONS ==== */

.ease3 {
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
}

.fade-in-right {
    animation: fadeInRightAnimation 2s linear 0s;
    -webkit-animation: fadeInRightAnimation 2s linear 0s;
    -moz-animation: fadeInRightAnimation 2s linear 0s;
}


@keyframes fadeInRightAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInRightAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeInRightAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in-right,
.fade-in-left,
.fade-in-bottom,
.fade-in-top {
    opacity: 0;
    transition: all 1s ease-in 0s;
    -webkit-transition: all 1s ease-in 0s;
    -moz-transition: all 1s ease-in 0s;
}

.fade-in-right.activate,
.fade-in-left.activate,
.fade-in-bottom.activate,
.fade-in-top.activate {
    opacity: 1;
}

.fade-in-right.activate {
    -webkit-animation: fadeinright 1s ease-in 0s;
    animation: fadeinright 1s ease-in 0s;
}

.fade-in-left.activate {
    -webkit-animation: fadeinleft 1s ease-in 0s;
    animation: fadeinleft 1s ease-in 0s;
}

.fade-in-bottom.activate {
    -webkit-animation: fadeinbottom 1s ease-in 0s;
    animation: fadeinbottom 1s ease-in 0s;
}

.fade-in-top.activate {
    -webkit-animation: fadeintop 1s ease-in 0s;
    animation: fadeintop 1s ease-in 0s;
}

@-webkit-keyframes fadeinright {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@-moz-keyframes fadeinright {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeinright {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes fadeinleft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@-moz-keyframes fadeinleft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeinleft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes fadeinbottom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-moz-keyframes fadeinbottom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeinbottom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeintop {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-moz-keyframes fadeintop {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeintop {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}