/* Animation */
.floating-start-ani {
	animation: floating-start-ani 3s infinite forwards ease;
}

.floating-end-ani {
	animation: floating-end-ani 3s infinite forwards ease;
}

.ani-delay-01 {
	animation-delay: .1s;
}

.ani-delay-02 {
	animation-delay: .2s;
}

.ani-delay-03 {
	animation-delay: .3s;
}

.ani-delay-04 {
	animation-delay: .4s;
}

@keyframes eleFadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes floating-start-ani {
	0% {
		transform:translate(0,0);
	}
	50% {
		transform:translate(0,10px);
	}
	100% {
		transform:translate(0,0);
	}
}

@keyframes floating-end-ani {
	0% {
		transform:translate(0,0);
	}
	50% {
		transform:translate(0,-10px);
	}
	100% {
		transform:translate(0,0);
	}
}

@keyframes char-updown-ani {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(20px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes shiny-ani {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}

@keyframes shiny-ani02 {
	0% {
		transform:rotate(0deg) scale(0);
	}
	50% {
		transform:rotate(180deg) scale(1);
	}
	100% {
		transform:rotate(0deg) scale(0);
	}
}

@keyframes updown-ani01 {
	0% {
		transform: translate(0px, 0px);
	}
	50% {
		transform: translate(-20px, -20px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}

@keyframes updown-ani02 {
	0% {
		transform: translate(0px, 0px);
	}
	50% {
		transform: translate(20px, -20px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}

@keyframes rotate-ani {
	0% {
    transform: rotate(0deg);
  }
	100% {
    transform: rotate(360deg);
  }
}


@keyframes bounce-left {
	0% {
		transform: scale(1) translate3d(0,0,0);
		opacity: .2
  }

	20% {
		transform: scale(1.12) translate3d(6%, -10%,0);
		opacity: .4
  }

	42% {
		transform: scale(.95) translate3d(10%, -6%,0);
		opacity: .6
  }

	65% {
		transform: scale(1.15) translate3d(6%,10%,0);
		opacity: .7
	}

	82% {
		transform: scale(1.05) translate3d(4%, 6%,0);
		opacity: .4
	}

	100% {
		transform: scale(1) translate3d(0,0,0);
		opacity:.2
	} 
}

@keyframes bounce-right {
	0% {
			transform: scale(1) translate3d(0,0,0);
			opacity: .2
	}
	
	20% {
			transform: scale(1.1) translate3d(-4%,6%,0);
			opacity: .4
	}
	
	42% {
			transform: scale(.8) translate3d(-12%,0,0);
			opacity: .6
	}
	
	65% {
			transform: scale(1) translate3d(-4%,-12%,0);
			opacity: .7
	}
	
	82% {
			transform: scale(1.1) translate3d(-4%,-6%,0);
			opacity: .4
	}
	
	100% {
			transform: scale(1) translate3d(0,0,0);
			opacity: .2
	}
}

@keyframes rotateShape {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes moveShape {
	0%,
	100% {
		transform: translate(0, -2vh);
	}
	25% {
		transform: translate(20%, 2vh);
	}
	50% {
		transform: translate(40%, -2vh);
	}	
	70% {
		transform: translate(65%, -4vh);
	}
}

@keyframes changeShape {
	0%,
	100% {
		border-radius: 30% 60% 60% 30% / 30% 40% 60% 60%;
	}
	20% {
		border-radius: 40% 55% 55% 50% / 40% 35% 35% 55%;
	}
	40% {
		border-radius: 35% 55% 55% 35% / 55% 40% 40% 25%;
	}
	60% {
		border-radius: 40% 55% 55% 50% / 30% 30% 60% 65%;
	}
	80% {
		border-radius: 40% 60% 40% 60% / 50% 50% 50% 60%;
	}
}

@media screen and (max-width:768px) {	
	@keyframes floating-start-ani {
		0% {
			transform:translate(0,0);
		}
		50% {
			transform:translate(0,6px);
		}
		100% {
			transform:translate(0,0);
		}
	}

	@keyframes floating-end-ani {
		0% {
			transform:translate(0,0);
		}
		50% {
			transform:translate(0,-6px);
		}
		100% {
			transform:translate(0,0);
		}
	}

	@keyframes char-updown-ani {
		0% {
			transform: translateY(0px);
		}
		50% {
			transform: translateY(8px);
		}
		100% {
			transform: translateY(0px);
		}
	}

	@keyframes updown-ani01 {
		0% {
			transform: translate(0px, 0px);
		}
		50% {
			transform: translate(-8px, -8px);
		}
		100% {
			transform: translate(0px, 0px);
		}
	}

	@keyframes updown-ani02 {
		0% {
			transform: translate(0px, 0px);
		}
		50% {
			transform: translate(8px, -8px);
		}
		100% {
			transform: translate(0px, 0px);
		}
	}
}