/*---=====================================================
   <!--educate All Animation Here-->
=========================================================---*/

/*bounce-left-right-animation*/

@keyframes bounceleft {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    50% {
        -webkit-transform: translateX(-15px);
        transform: translateX(-15px);
    }
    100% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }
}

/*bounce-top-bottom-animation*/

@keyframes bounce {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}

@keyframes scaleZoom {
    0% {
        transform: scale(0.6);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.upDown {
    animation: upDown 1.3S infinite alternate;
}

@keyframes upDown {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@-webkit-keyframes upDown {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes animation-upDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-40px);
    }
}

.rotateme {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.bounce-animate-3 {
    animation-name: float-bob6;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob6;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob6;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob6;
    -o-animation-duration: 6s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes float-bob {
    0% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    100% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}

@keyframes bd-bounce {
    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0) translateX(0%);
    }
    40% {
        -webkit-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
        transform: translateY(-8px) translateX(0%);
    }
    60% {
        -webkit-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
        transform: translateY(-4px) translateX(0%);
    }
}

@keyframes shine {
    100% {
        left: 100%;
    }
}

/* animation ripple  */

@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.30196078431372547), 0 0 0 10px rgba(255, 255, 255, 0.30196078431372547), 0 0 0 20px rgba(255, 255, 255, 0.30196078431372547);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.30196078431372547), 0 0 0 10px rgba(255, 255, 255, 0.30196078431372547), 0 0 0 20px rgba(255, 255, 255, 0.30196078431372547);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.30196078431372547), 0 0 0 20px rgba(255, 255, 255, 0.30196078431372547), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.30196078431372547), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.30196078431372547), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.30196078431372547);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.30196078431372547), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.30196078431372547);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.30196078431372547), 0 0 0 20px rgba(255, 255, 255, 0.30196078431372547), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.30196078431372547), 0 0 0 20px rgba(255, 255, 255, 0.30196078431372547), 0 0 0 30px rgba(255, 255, 255, 0);
    }
}

/* wobble animation */

@keyframes wobble_vertical {
    16.65% {
        transform: translateY(8px);
    }
    33.3% {
        transform: translateY(-6px);
    }
    49.95% {
        transform: translateY(4px);
    }
    66.6% {
        transform: translateY(-2px);
    }
    83.25% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0);
    }
}

/* ================ All Animation CSS ===================*/

.rotate {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background-position: center center;
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.rotates {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.9s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background-position: center center;
}

@keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.bounce-animate {
    animation-name: float-bob;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate2 {
    animation-name: float-bob2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob2;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob2;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob2;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate3 {
    animation-name: float-bob3;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob3;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob3;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob3;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate4 {
    animation-name: float-bob4;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob4;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob4;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob4;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate5 {
    animation-name: float-bob5;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob5;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob5;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob5;
    -o-animation-duration: 6s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate-slow {
    animation-name: float-bob5;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob5;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob5;
    -ms-animation-duration: 15s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob5;
    -o-animation-duration: 15s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate-3 {
    animation-name: float-bob6;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob6;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob6;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob6;
    -o-animation-duration: 6s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@keyframes float-bob {
    0% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    100% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}

@keyframes float-bob2 {
    0% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }
    50% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    100% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }
}

@keyframes float-bob3 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}

@keyframes float-bob4 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}

@keyframes float-bob5 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}

@keyframes float-bob6 {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }
    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

@keyframes movebounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes moveleftbounce {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    50% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}

/*--==============================================->
<!-- educate Animation Dance -->
==================================================-*/

.dance3 {
    -webkit-animation: dance3 8s alternate infinite;
    animation: dance3 8s alternate infinite;
}

@keyframes dance3 {
    0% {
        -webkit-transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

.dance {
    -webkit-animation: dance 2s alternate infinite;
    animation: dance 2s alternate infinite;
}

@keyframes dance {
    0% {
        -webkit-transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1.2);
    }
}

.dance2 {
    -webkit-animation: dance2 4s alternate infinite;
    animation: dance2 4s alternate infinite;
}

@keyframes dance2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    50% {
        -webkit-transform: translate3d(25px, -25px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -25px, 25px);
    }
}

.watermark-animate {
    -webkit-animation: watermark-animate 8s infinite;
    animation: watermark-animate 8s infinite;
    animation-direction: alternate-reverse;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes watermark-animate {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

/*  float animation*/

@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(3deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/*  flip animation*/

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(20deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes animatePen {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) rotate(10deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes animateShape {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(100px) rotate(180deg) scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: translateX(0) rotate(360deg) scale(1);
        opacity: 1;
    }
}

@keyframes flip2 {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-180deg);
    }
}

/* moveleft bounces */

@-webkit-keyframes moveLeftBounces {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(585px);
        transform: translateY(585px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes moveLeftBounces {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(585px);
        transform: translateX(585px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/* moveleft bounces two */

@-webkit-keyframes moveLeftBouncestwo {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(200px);
        transform: translateY(200px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes moveLeftBouncestwo {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shakeAnimation {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    50% {
        transform: translateX(10px);
    }
    75% {
        transform: translateX(-10px);
    }
}

@keyframes rippleGreen {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 10px 10px rgba(0, 255, 0, 0.2);
    }
    100% {
        box-shadow: 0 0 20px 20px rgba(0, 255, 0, 0);
    }
}

@keyframes flexAnimation {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(-5deg);
    }
}

@keyframes liftDumbbell {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(-5deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) rotate(5deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* animation  */

@keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -850px, 0);
        transform: translate3d(0, -850px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@keyframes circle {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

@keyframes floatShimmer {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0px #fb923c);
    }
    25% {
        transform: translateY(-4px) rotate(-1deg) scale(1.02);
        filter: drop-shadow(0 0 6px #fb923c);
    }
    50% {
        transform: translateY(0) rotate(1deg) scale(1);
        filter: drop-shadow(0 0 10px #fb923c);
    }
    75% {
        transform: translateY(-4px) rotate(-1deg) scale(1.02);
        filter: drop-shadow(0 0 6px #fb923c);
    }
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0px #fb923c);
    }
}

@keyframes sadSway {
    0% {
        transform: rotate(0deg) translateY(0);
        filter: grayscale(0%) brightness(100%);
        opacity: 1;
    }
    25% {
        transform: rotate(-1deg) translateY(2px);
        filter: grayscale(40%) brightness(90%);
        opacity: 0.95;
    }
    50% {
        transform: rotate(1deg) translateY(4px);
        filter: grayscale(60%) brightness(80%);
        opacity: 0.9;
    }
    75% {
        transform: rotate(-1deg) translateY(2px);
        filter: grayscale(40%) brightness(90%);
        opacity: 0.95;
    }
    100% {
        transform: rotate(0deg) translateY(0);
        filter: grayscale(0%) brightness(100%);
        opacity: 1;
    }
}

@keyframes bookPage {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(-180deg);
    }
    100% {
        transform: rotateY(-180deg);
    }
}

@keyframes enter {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}