/*---=====================================================
   <!--Toptech 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 dance {
  0% {
    -webkit-transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1.0);
  }
}


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

@keyframes hero-animation {
	0% {
	  width: 0;
	}
	15% {
	  width: 100%;
	}
	85% {
	  opacity:0.45;
	}
	90% {
	  width: 100%;
	  opacity:0;
	}
	to {
	  width: 0;
	  opacity: 0;
	}
}

@keyframes wave-animation {
	0% {
		transform: rotate( 0.0deg);
	}

	10% {
		transform: rotate(14.0deg);
	}  /* The following five values can be played with to make the waving more or less extreme */
	20% {
		transform: rotate(-8.0deg);
	}

	30% {
		transform: rotate(14.0deg);
	}

	40% {
		transform: rotate(-4.0deg);
	}

	50% {
		transform: rotate(10.0deg);
	}

	60% {
		transform: rotate( 0.0deg);
	}  /* Reset for the last half to pause */
	100% {
		transform: rotate( 0.0deg);
	}
}



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

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

.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;
  }
  @-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);
    }
  }
  @-webkit-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);
    }
  }
  @-webkit-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);
    }
  }
  @-webkit-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);
    }
  }
  @-webkit-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);
    }
  }
  @-webkit-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);
    }
  }
  @-webkit-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 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);
    }
  }
  
  @-webkit-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);
    }
  }
  
  @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);
    }
  }