/*Animations*/
@keyframes fade-in {
    from {
        opacity: 0;
        transform: scale(.7,.7)
    }

    to {
        transform: scale(1,1)
    }
}
@-webkit-keyframes fade-in {
    from {
        opacity: 0;
        transform: scale(.7,.7)
    }

    to {
        transform: scale(1,1)
    }
}

@keyframes slide-top {
    from {
        opacity : 0 ;
        transform: translate3d(0,150px,0)
    }

    to {
        transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes slide-top {
    from {
        opacity: 0;
        transform: translate3d(0,150px,0)
    }

    to {
        transform: translate3d(0,0,0);
    }
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translate3d(0,-150px,0)
    }

    to {
        transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes slide-down {
    from {
        opacity: 0;
        transform: translate3d(0,-150px,0)
    }

    to {
        transform: translate3d(0,0,0);
    }
}

@keyframes slide-left {
    from {
        opacity: 0;
        transform: translate3d(150px,0,0)
    }

    to {
        transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes slide-left {
    from {
        opacity: 0;
        transform: translate3d(150px,0,0)
    }

    to {
        transform: translate3d(0,0,0);
    }

}

@keyframes slide-right {
    from {
        opacity: 0;
        transform: translate3d(-150px,0,0)
    }

    to {
        transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes slide-right {
    from {
        opacity: 0;
        transform: translate3d(-150px,0,0)
    }

    to {
        transform: translate3d(0,0,0);
    }
}

.fade-in {
    animation: fade-in 1.55s;
}
.hide-fade-in {
    opacity: 0;
}
.slide-top {
    animation: slide-top 1.4s;
}
.hide-slide-top {
    opacity: 0;
}
.slide-down {
    animation: slide-down 1.4s;
}
.hide-slide-down {
    opacity: 0;
}
.slide-left {
    animation: slide-left 1.4s;
}
.hide-slide-left {
    opacity: 0;
}
.slide-right {
    animation: slide-right 1.4s;
}
.hide-slide-right {
    opacity: 0;
}