/* Animations */
/*
** Observer animation
*/

.animation-delay-100 {
    transition-delay: 100ms;
    animation-delay: 100ms;
}

.animation-delay-200 {
    transition-delay: 200ms;
    animation-delay: 200ms;
}

.animation-delay-300 {
    transition-delay: 300ms;
    animation-delay: 300ms;
}

.animation-delay-400 {
    transition-delay: 400ms;
    animation-delay: 400ms;
}

.animation-delay-500 {
    transition-delay: 500ms;
    animation-delay: 500ms;
}

.animation-delay-600 {
    transition-delay: 600ms;
    animation-delay: 600ms;
}

.animation-delay-700 {
    transition-delay: 700ms;
    animation-delay: 700ms;
}

.animation-delay-800 {
    transition-delay: 800ms;
    animation-delay: 800ms;
}

/** ZOOMIN **/
/* class zoomIn is add to a parent of the image */

.zoom-in {
    opacity: 0;
}

.zoom-in.visible {
    animation-duration: 0.6s;
    animation-name: myZoomIn !important;
    overflow: hidden;
    opacity: 1;
}

.zoom-in.visible img {
    animation-duration: 1.4s;
    animation-timing-function: var(--ease-out-quart);
    animation-name: myZoomInImage;
}

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

@keyframes myZoomInImage {
    0% {
        transform: scale3d(1.05,1.05,1.05);
    }
    
    100% {
        transform: scale3d(1,1,1);
    }
}


/** SLIDEUP **/
.slide-up {
    opacity: 0;
}

.slide-up.visible {
    animation-duration: 0.9s;
    animation-name: mySlideUp;
    animation-timing-function: var(--ease-out-quart);
    opacity: 1;
}

@keyframes mySlideUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/** SLIDELEFT **/
.slide-left {
    opacity: 0;
}

.slide-left.visible {
    animation-duration: 0.6s;
    animation-name: mySlideLeft;
    animation-timing-function: var(--ease-out-quart);
    opacity: 1;
}

@keyframes mySlideLeft {
    0% {
        opacity: 0;
        transform: translateX(10px);
    }
    
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/** BOUNCE **/
.bounce.visible {
    transform-origin: center bottom;
    animation-duration: 1.2s;
    animation-name: myBounce;
}

@keyframes myBounce {
	20%, 53%, 80%, 0%, 100% {
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(.755,.050,.855,.060);
        transform: translate3d(0,-30px,0);
    }
    70% {
        animation-timing-function: cubic-bezier(.755,.050,.855,.060);
        transform: translate3d(0,-15px,0);
    }
    90% {
        transform: translate3d(0,-4px,0);
    }
}