/*.fadeInLeft{*/



.fadeInLeft{
    opacity: 0;
    transform: translate3d(-70%,0,0);

    animation-name: slide-in-blurred-left;
    animation-duration: 1.2s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards ;
}
.fadeInRight{
    animation-name: slide-in-blurred-right;
    animation-duration: 1.5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards ;
}

.fadeInBottom{
    animation-duration: 1.5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-name: slide-in-blurred-bottom;
    animation-fill-mode: forwards ;

}

.slide-animate{
    transform: scale(1.1);
    animation-fill-mode: forwards ;
    animation-name: scale-draw;
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-duration: 2.7s;
    animation-delay: .7s;

}

.drop-animate{
    opacity: 0;
    animation-name: shutter-in-bottom;
    animation-duration: 1.2s;
    animation-delay: 0.1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.fadeOutAnimation{
    opacity: 0;
    animation-name: fadeOut-animation;
    animation-duration: 1.8s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}


@keyframes  fadeOut-animation {
    0%{
        filter:blur(20px);
        transform: translate3d(0,50%,0);
        opacity:0;
    }
    100%{
        filter:blur(0);
        transform:none;
        opacity:1;
    }
}



@keyframes shutter-in-bottom {

    0% {
        opacity: 0;
        transform: translate3d(0,100%,0);
    }
    100% {
        transform:none;
        opacity:1;
    }
}


@keyframes scale-draw {
    0%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);

    }
}

@keyframes slide-in-blurred-bottom {
    0% {
        transform: translate3d(0,100%,0);
        opacity:0;
    }
    100% {
        transform: none;
        opacity:1;
    }
}

@keyframes slide-in-blurred-left {
    0% {
        transform: translate3d(-70%,0,0);
        opacity:0;
    }
    100% {
        transform: none;
        opacity:1;
    }
}

@keyframes slide-in-blurred-right {

    0% {
        transform: translate3d(100%,0,0);
        filter:blur(10px);
        opacity:0;
    }
    100% {
        transform: none;
        filter:blur(0);
        opacity:1;
    }
}