body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.main-spinner-wrapper {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #F2EDE4;
}


.main-spinner {
	margin: 0;
	padding: 0;
	color: #008496;
	vertical-align: middle;
	text-align: center;
	font-size: 12px;
}


/* animation should run 0.7s then wait 0.8sec */
@keyframes moveUp {
	0% {
		transform: translate(-20px, -40px);
		/* Start position */
		color: transparent;
	}

	13% {
		transform: translate(-20px, -55px);
		/* Midway position */
		color: #ED5628;
	}

	16% {
		transform: translate(-20px, -55px);
		color: #ED5628;
	}

	29% {
		transform: translate(-20px, -40px);
		/* End position */
		display: none;
		/* color: #ED5628; */
	}

	100% {
		transform: translate(-20px, -40px);
		/* End position */
		color: transparent;
		display: none;
	}
}


/* Apply the animation to the circle element */
.logo-top {
	position: absolute;
	color: transparent;
	transition: fill 1s;
	transform: translate(-20px, -40px);
	animation: moveUp 2.4s linear infinite;
	/* Animation duration, timing function, and repetition */
	animation-fill-mode: both;
}


@keyframes moveDown {
	0% {
		transform: scaleY(-1) scaleX(-1) translate(20px, 18px);
		color: transparent;
	}

	13% {
		transform: scaleY(-1) scaleX(-1) translate(20px, 3px);
		color: #ED5628;
	}

	16% {
		transform: scaleY(-1) scaleX(-1) translate(20px, 3px);
		color: #ED5628;
	}

	29% {
		transform: scaleY(-1) scaleX(-1) translate(20px, 18px);
		display: none;
	}

	100% {
		transform: scaleY(-1) scaleX(-1) translate(20px, 18px);
		color: transparent;
		display: none;
	}
}

.logo-bottom {
	position: absolute;
	color: transparent;
	transform: scaleY(-1) scaleX(-1) translate(20px, 18px);
	animation: moveDown 2.4s linear infinite;
	animation-fill-mode: both;
}

.circle {
	position: absolute;
	color: #ED5628;
}

@keyframes fadeInOut {
	0% {
		r: 0px;
	}

	15% {
		r: 10px;
	}

	55% {
		r: 10px;
	}

	65% {
		r: 0px;
	}

	100% {
		r: 0px;
	}
}

#center {
	animation: fadeInOut 2.4s linear 0.7s infinite;
	animation-fill-mode: both;
}

@keyframes moveLeft {
	0% {
		transform: translateX(0px)
	}

	13% {
		transform: translateX(-45px);
	}

	20% {
		transform: translateX(-45px);
	}

	35% {
		transform: translateX(0px);
	}

	100% {
		transform: translateX(0px);
	}
}

#left {
	animation: moveLeft 2.4s linear 1.3s infinite;
	animation-fill-mode: both;
}

@keyframes moveRight {
	0% {
		transform: translateX(0px)
	}

	13% {
		transform: translateX(45px);
	}

	20% {
		transform: translateX(45px);
	}

	35% {
		transform: translateX(0px);
	}

	100% {
		transform: translateX(0px);
	}
}

#right {
	animation: moveRight 2.4s linear 1.3s infinite;
	animation-fill-mode: both;
}

@keyframes shrink {
	0% {
		r: 10;
	}

	35% {
		r: 10;
	}

	40% {
		r: 0;
	}

	100% {
		r: 0;
	}
}

.shrinking {
	animation: shrink 2.4s linear 1.3s infinite;
	animation-fill-mode: forwards;
}