/* slide In element */
.animated-repeat {
    overflow: hidden;
}

.animated-repeat.slidInLeft {
    transform: translateX(-100%);
    transition: transform 1s;
}

.animated-repeat.slidInLeft.visible {
    transform: translateX(0%);
}

.animated-repeat.slidInRight {
    transform: translateX(100%);
    transition: transform 1s;
}

.animated-repeat.slidInRight.visible {
    transform: translateX(0%);
}
/* Slide in animation one time */

.animated-OneTime {
    overflow: hidden;
}

.animated-OneTime.slidInLeft {
    transform: translateX(-100%);
    transition: transform 1s;
}

.animated-OneTime.slidInLeft.visible {
    transform: translateX(0%);
}

.animated-OneTime.slidInRight {
    transform: translateX(100%);
    transition: transform 1s;
}

.animated-OneTime.slidInRight.visible {
    transform: translateX(0%);
}


 /* css for zoom-in &  flip-right */
 .animated-element {
    opacity: 0;
    transition: transform 1s, opacity 1s;
}

.animated-element.zoom-in {
    transform: scale(0);
}

.animated-element.zoom-in.visible {
    animation-duration: 4s;
    transform: scale(1);
    opacity: 1;
}

.animated-element.zoom-in2 {
    transform: scale(0);
}

.animated-element.zoom-in2.visible {
    transform: scale(1);
    opacity: 1;
}

.animated-element.flip-right {
    transform: rotateY(90deg);
}

.animated-element.flip-right.visible {
    transform: rotateY(0deg);
    opacity: 1;
}

.animated-element.flip-left {
    transform: rotateY(360deg);
}

.animated-element.flip-left.visible {
    transform: rotateY(0deg);
    opacity: 1;
}


/* on scroll load animation */
 .animated-ElementOnScroll {
    opacity: 0;
    overflow: hidden;
    transition: transform 1s, opacity 1s;
}

.animated-ElementOnScroll.zoom-in {
    transform: scale(0);
}

.animated-ElementOnScroll.zoom-in.visible {
    transform: scale(1);
    opacity: 1;
}

.animated-ElementOnScroll.zoom-in2 {
    transform: scale(0);
}

.animated-ElementOnScroll.zoom-in2.visible {
    transform: scale(1);
    opacity: 1;
}

/* .animated-ElementOnScroll.flip-right {
    transform: rotateY(90deg);
}

.animated-ElementOnScroll.flip-right.visible {
    transform: rotateY(0deg);
    opacity: 1;
}

.animated-ElementOnScroll.flip-left {
    transform: rotateY(360deg);
}

.animated-ElementOnScroll.flip-left.visible {
    transform: rotateY(0deg);
    animation-delay: 2s;
    opacity: 1;
} */


.bounce-infinite {
    animation: bounce 2s ease infinite;
}

@keyframes bounce-infinite {
    70% {
        transform: translateY(0%);
    }

    80% {
        transform: translateY(-15%);
    }

    90% {
        transform: translateY(0%);
    }

    95% {
        transform: translateY(-7%);
    }

    97% {
        transform: translateY(0%);
    }

    99% {
        transform: translateY(-3%);
    }

    100% {
        transform: translateY(0);
    }
}

.bounce{
    animation: bounce 2s ;
}

@keyframes bounce {
    70% {
        transform: translateY(0%);
    }

    80% {
        transform: translateY(-15%);
    }

    90% {
        transform: translateY(0%);
    }

    95% {
        transform: translateY(-7%);
    }

    97% {
        transform: translateY(0%);
    }

    99% {
        transform: translateY(-3%);
    }

    100% {
        transform: translateY(0);
    }
}




/* CodePen Home Rotate Y Zoom In css */
.cssanimation,
.cssanimation span {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.cssanimation span {
    display: inline-block
}

.leRotateYZoomIn span {
    animation-name: leRotateYZoomIn
}

@keyframes leRotateYZoomIn {
    from {
        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
        opacity: 0
    }

    5% {
        transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg)
    }
}

/* progress-bar  */
.progress-bar {
    position: fixed;
    align-items: baseline;
    width: 100%;
    height: 1vh;
    background: #e2e20d00;
}

#filled {
    width: 0%;
    height: 100%;

    /* background-color: rgba(17, 236, 236, 0.909); */
    background-image: linear-gradient(to right, rgb(10, 250, 190), rgb(0, 106, 255));
}



/* Slide In from Left */
@keyframes slideInLeft {
    from {
    transform: translateX(-100%);
    }
    to {
    transform: translateX(0);
    }
    }
    
    .slideInLeft {
    animation-name: slideInLeft;
    animation-duration: 1s;
    }
    
    /* Slide In from Right */
    @keyframes slideInRight {
    from {
    transform: translateX(100%);
    }
    to {
    transform: translateX(0);
    }
    }
    
    .slideInRight {
    animation-name: slideInRight;
    animation-duration: 1s;
    }


    /* blur animation */
    .blur-fade-in {
        animation: blur-fade-in 0.5s forwards;
    }
    
    @keyframes blur-fade-in {
        0% {
            filter: blur(5px);
            opacity: 0;
        }
        100% {
            filter: none;
            opacity: 1;
        }
    }

/*Typing animation */
    @keyframes typing {
        from {
            width: 0%;
        }

        to {
            width: 100%;
        }
    }

    .typing-animation {
        overflow: hidden;
        /* display: inline-block; */
        white-space: nowrap;
        animation: typing 3s;
        animation-fill-mode: forwards;
    }