.reveal {
    position: relative;
    opacity: 0;
}
.reveal.active {
    opacity: 1;
}
.reveal.fade-bottom {
    transform: translateY(150px);
    transition: 0.5s all ease;
}

.reveal.active.fade-bottom{
    transform: translateY(0);
    opacity: 1;
}
.active.fade-left {
    animation: fade-left 0.3s ease-in;
}
.active.fade-right {
    animation: fade-right 0.3s ease-in;
}
.reveal.active.fade-right.tran03s{
    animation: fade-right 0.3s ease-in;
}
.reveal.active.fade-right.tran04s{
    animation: fade-right 0.4s ease-in !important;
}
.reveal.active.fade-right.tran05s{
    animation: fade-right 0.5s ease-in !important;;
}
.reveal.active.fade-right.tran06s{
    animation: fade-right 0.5s ease-in !important;;
}
.reveal.active.fade-right.tran07s{
    animation: fade-right 0.7s ease-in !important;;
}
.reveal.active.fade-right.tran09s{
    animation: fade-right 0.9s ease-in !important;;
}
@keyframes fade-bottom {
    0% {
        transform: translateY(150px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


.animate-top {
    position: relative;
    animation: animatetop 0.4s
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.animate-left {
    position: relative;
    animation: animateleft 0.4s
}

.animate-left.s06 {
    animation: animateleft 0.6s !important;
}


.animate-left.s08 {
    animation: animateleft 0.8s !important;
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

.animate-right {
    position: relative;
    animation: animateright 0.4s
}

@keyframes animateright {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

.animate-bottom {
    position: relative;
    animation: animatebottom 0.4s
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

.animate-zoom {
    animation: animatezoom 0.6s
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}
.fade-in-out {
    animation: fade 1s ease-in-out;
}

@keyframes fade {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}