.ani-position {
	position: relative;
}

.ani-imgSize {
	width: 100%;
	height: auto;
	scale: 50%;
}

.ani-logoCanvas {
	left: 0%;
	top: 0%;
	z-index: 1;
	transform-origin: 50% 50%;
	animation-duration: 5s;
	animation-fill-mode: forwards;
	
}

.ani-logo {
	left: 9%;
	top: -8%;
	scale: 100%;
	position: absolute;
	opacity: 0
}

.ani-circlelarge {
	width: 100%;
	height: auto;
	scale: 43%;
	left: -9.1%;
	top: -48%;
	opacity: 0;
	z-index: 10;
	position: absolute;
	transform-origin: 50% 50%;
	animation-name: colorhue,fadeIn, c1scale;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
}

.ani-bar1 {
	width: 100%;
	height: auto;
	scale: 33%;
	left: -8%;
	top: -12%;
	opacity: 0;
	z-index: 9;
	position: absolute;
	transform-origin: 50% 50%;
	animation-name: colorhue,fadeIn;
	animation-duration: 2.2s;
	animation-fill-mode: forwards;
	animation-delay: 4.8s;
	animation-timing-function: ease;
}

.ani-bar2 {
	width: 100%;
	height: auto;
	scale: 11%;
	left: 6.5%;
	top: -195%;
	opacity: 0;
	z-index: 9;
	position: absolute;
	transform-origin: 50% 50%;
	animation-name: colorhue,fadeIn;
	animation-duration: 2.2s;
	animation-fill-mode: forwards;
	animation-delay: 5.5s;
	animation-timing-function: ease;
}

.ani-circleSmall {
	width: 100%;
	height: auto;
	scale: 22%;
	left: 1.3%;
	top: -20.2%;
	opacity: 0;
	z-index: 10;
	position: absolute;
	transform-origin: 50% 50%;
	animation-name: colorhue, fadeIn, c2scale;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-delay: 1.5s;
	animation-timing-function: ease;
}

.ani-circleMedium {
	width: 100%;
	height: auto;
	scale: 32.1%;
	left: 14.1%;
	top: -43.3%;
	z-index: 10;
	opacity: 0;
	position: absolute;
	transform-origin: 50% 50%;
	animation-name: colorhue,fadeIn, c3scale;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-timing-function: ease;
}

.ani-trust {
	width: 100%;
	height: auto;
	scale: 25%;
	left: -26.5%;
	top: 0%;
	opacity: 0;
	z-index: 10;
	position: absolute;
	transform-origin: 50% 50%;
	animation-name: colorhue,fadeIn, trustmove;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
}

.ani-trust-text {
	width: 100%;
	height: auto;
	scale: 48%;
	left: -26%;
	top: 35%;
	opacity: 0;
	z-index: 10;
	position: absolute;
	transform-origin: 50% 50%;
	animation-name: colorhue,fadeIn;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	animation-delay: 1s;
}

.ani-communication {
	width: 100%;
	height: auto;
	scale: 55%;
	left: 21%;
	top: 56%;
	opacity: 0;
	z-index: 10;
	position: absolute;
	transform-origin: 50% 50%;
	animation-name: colorhue,fadeIn, commumove;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	animation-delay: 1.5s;
}

.ani-communication-text {
	width: 100%;
	height: auto;
	scale: 46%;
	left: 15%;
	top: 66%;
	opacity: 0;
	z-index: 10;
	position: absolute;
	transform-origin: 50% 50%;
	animation-name: colorhue,fadeIn;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	animation-delay: 2.5s;
}

.ani-together {
	width: 100%;
	height: auto;
	scale: 39%;
	left: 28%;
	top: 8%;
	opacity: 0;
	z-index: 10;
	position: absolute;
	transform-origin: 50% 50%;
	animation-name: colorhue,fadeIn, togethermove;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	animation-delay: 3s;
}

.ani-together-text {
	width: 100%;
	height: auto;
	scale: 39%;
	left: 25%;
	top: 27%;
	opacity: 0;
	z-index: 10;
	position: absolute;
	transform-origin: 50% 50%;
	animation-name: colorhue,fadeIn;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	animation-delay: 4s;
}

/*keyframes*/
@keyframes colorhue {
	from {
		filter: hue-rotate(360deg);
	}

	to {
		filter: hue-rotate(0deg);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0%;
	}

	to {
		opacity: 100%;
	}
}

@keyframes c1scale {
	from {
		scale: 30%;
	}

	to {
		scale: 43%;
	}
}

@keyframes c2scale {
	from {
		scale: 10%;
	}

	to {
		scale: 22%;
	}
}

@keyframes c3scale {
	from {
		scale: 20%;
	}

	to {
		scale: 32.1%;
	}
}

@keyframes trustmove {
	from {
		left: -35%;
	}

	to {
		left: -26.5%;
	}
}


@keyframes commumove {
	from {
		left: 27%;
	}

	to {
		left: 21%;
	}
}


@keyframes togethermove {
	from {
		left: 34%;
	}

	to {
		left: 28%;
	}
}