/*---=====================================================
   <!--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
}