/* animate */

.hithere {
	animation-name: hithere;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}
@keyframes hithere {
	30% {
		transform: scale(0.8);
	}
	40%,
	60% {
		transform: rotate(-20deg) scale(1);
	}
	50% {
		transform: rotate(20deg) scale(1);
	}
	70% {
		transform: rotate(0deg) scale(1);
	}
	100% {
		transform: scale(1);
	}
}

.bounce2 {
	animation-name: bounce2;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}
@keyframes bounce2 {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-30px);
	}
	60% {
		transform: translateY(-15px);
	}
}

.shockwaveJump {
	animation-name: shockwaveJump;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}

@keyframes shockwaveJump {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.08);
	}
	50% {
		transform: scale(0.98);
	}
	55% {
		transform: scale(1.02);
	}
	60% {
		transform: scale(0.98);
	}
	100% {
		transform: scale(1);
	}
}

.wiggle {
	animation-name: wiggle;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}

@keyframes wiggle {
	0% {
		transform: rotate(-3deg);
	}
	20% {
		transform: rotate(20deg);
	}
	40% {
		transform: rotate(-15deg);
	}
	60% {
		transform: rotate(5deg);
	}
	90% {
		transform: rotate(-1deg);
	}
	100% {
		transform: rotate(0);
	}
}

.flip {
	backface-visibility: visible !important;
	animation: flip 2s ease infinite;
}

@keyframes flip {
	0% {
		transform: perspective(400px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) rotateY(360deg) scale(0.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) scale(1);
		animation-timing-function: ease-in;
	}
}

.floating {
	animation-name: floating;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-10%);
	}
	100% {
		transform: translateY(0%);
	}
}

.animation_delay_01 {
	animation-delay: 0.1s;
}
.animation_delay_02 {
	animation-delay: 0.2s;
}
.animation_delay_1 {
	animation-delay: 1s;
}
.animation_delay_2 {
	animation-delay: 2s;
}

@media (max-width: 767px) {
	@keyframes bounce2 {
		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0);
		}
		40% {
			transform: translateY(-18px);
		}
		60% {
			transform: translateY(-6px);
		}
	}
}