/*=============================
    40. Keyframe Animation
===============================*/
@-webkit-keyframes hoverShine {
    100% {
        left: 125%;
    }
}
@keyframes hoverShine {
    100% {
        left: 125%;
    }
}

.alltuchtopdown {
    animation: alltuchtopdown 1.5s ease-in-out infinite alternate;
    animation-duration: 3s;
}
@keyframes alltuchtopdown {
    0% {
        transform: rotateX(0deg) translateY(0px);
    }
    50% {
        transform: rotateX(0deg) translateY(-20px);
    }
    100% {
        transform: rotateX(0deg) translateY(0px);
    }
}

.rightToLeft {
    animation-name: rightToLeft;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rightToLeft {
    0% {
        transform: translateX(-30px);
    }
    50% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(-30px);
    }
}

.ribbonRotate {
    animation-name: ribbonRotate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes ribbonRotate {
    0%, 100% {
        transform: rotate(0);
    }
    25%, 75% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(30deg);
    }
}

.rotateme {
    animation-name: rotateme;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotateme {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeInUp2 {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUp2 {
    animation-name: fadeInUp2;
    animation-delay: 0.5s;
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

@keyframes fadeInLeft2 {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInLeft2 {
    animation-name: fadeInLeft2;
    animation-delay: 0.5s;
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@-webkit-keyframes heartbeat {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1.05);
    }
}
@keyframes heartbeat {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1.05);
    }
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) scale(1.5);
        opacity: 0;
    }
}

.shake {
    animation-name: shake;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-webkit-keyframes shake {
    0% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(15deg);
    }
}
@keyframes shake {
    0% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(15deg);
    }
}

@keyframes animation__shape {
    0% {
        stroke-dashoffset: 12;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes animation__shape-two {
    0% {
        stroke-dashoffset: 18;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes animation__shape-three {
    0% {
        stroke-dashoffset: 24;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes animation__shape-four {
    0% {
        stroke-dashoffset: 14;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes animation__shape-five {
    0% {
        stroke-dashoffset: 16;
    }
    100% {
        stroke-dashoffset: 0;
    }
}