body {
	background: #FFFFFF;
	margin: 0;
	padding: 0;
	animation: overflow1 5s linear forwards;
	overflow-y: scroll;
	/*overflow-x: hidden; */
	animation: overflowx 2s;
}
/* The Mouse Spotlight Effect */
.splash.halo::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
			circle at var(--mouse-x) var(--mouse-y),
			rgba(0, 120, 212, 0.15) 0%,
			transparent 40%
	);
	pointer-events: none;
	z-index: 1;
}
/* start the logo splash */
.splash.corner {
		flex-direction: row;
    justify-content: unset;
		height: 110px;
		position: relative;
}
.splash.corner .logo {
    width: 74.5px;
    margin-right: 10px;
}
.splash.corner .logotext {
    margin-top: 23px;
    width: 189px;
}


.splash {
	display: flex;
	justify-content: center; /* Horizontally centers content */
	align-items: center;     /* Vertically centers content */
	height: 100vh;
	overflow: hidden;
	flex-direction: column;
	transition: all .35s ease;
	animation-name: Xsplash;
	animation-name: Xfadesplash;
	animation-delay: 6s;
	opacity: 1;
	background: #fff2dc;
}
.splash.dark {
	/*background: #161d29;*/
	background: radial-gradient(circle at center, #002e57 0%, #0a0a0a 100%);
}
.splash, .logo, .logotext, .fadesplash {
	animation-timing-function: ease-in-out; 
	animation-duration: .5s;
	animation-fill-mode: forwards;
}
@keyframes splash {
	0% {
		flex-direction: column;
		justify-content: center;
		height: 78vh;
		flex-direction: column;
		opacity: 1;
	}
	20% {
		flex-direction: column;
		justify-content: center;
		height: 78vh;
		flex-direction: column;
		opacity: 0;
	}
	99% {
		flex-direction: row;
		justify-content: start;
		height: 72px;
		position: relative;
		opacity: 0;
	}
	100% {
		flex-direction: row;
		justify-content: start;
		height: 72px;
		position: relative;
		opacity: 1;
	}
}
@keyframes fadesplash {
	0% {
		flex-direction: column;
		justify-content: center;
		height: 78vh;
		flex-direction: column;
		opacity: 1;
	}
	3% {
		opacity: 0;
	}
	6% {
		opacity: 1;
	}
	9% {
		opacity: 0;
	}
	10% {
		opacity: 1;
	}		
	100% {
		flex-direction: column;
		justify-content: center;
		height: 78vh;
		flex-direction: column;
		opacity: 0;
		display: none;
		scale: .3;
	}
}

.logo {
	position: relative;
	width: 318px;
	max-width: 35.06%;
	aspect-ratio: 533 / 531;
	overflow: visible;
	display: block;
	box-sizing: border-box;
	transition: all .35s ease;
	animation-name: Xsplash_a;
	animation-delay: 4.5s;
}
@keyframes splash_a {
	0% {
		width: 333px;
    margin-left: 117px;
	}
	70% {
		width: 70.5px;
    margin-right: 10px;
		margin-left: unset;
	}
	100% {
		width: 70.5px;
    margin-right: 10px;
		margin-left: unset;
	}
}
.logo > div, .logotext > div {
	position: absolute;
	display: block;
	animation-timing-function: ease-in-out; 
	animation-duration: 1.05s;
	animation-fill-mode: forwards;
	opacity: 0;
}
 .logotext > div {
	animation-duration: .95s;
}
 
/* yellow top */
.logo1 {
	width: 74.86%;
	height: 15.63%;
	background-color: #ffd200;
	animation-name: logo_1;
	z-index: 1;
}

/* orange top */
.logo2 {
	width: 60.6%;
	height: 27.68%;
	background-color: #df0000;
	animation-name: logo_2;
	animation-delay: .25s;
	z-index: 4;
}

/* yellow left */
.logo3 {
	width: 39.5%;
	height: 27.68%;
	background-color: #ffd200;
	animation-name: logo_3;
	animation-delay: .275s;
	z-index: 2;
}

/* black */
.logo4 { 
	width: 10.69%;
	height: 21.66%;
	background-color: #000000;
	animation-name: logo_4;
	animation-delay: .65s;
	z-index: 1;
}
.splash.dark .logo4 { 
	background-color: #FFFFFF;
}

/* orange bottom */
.logo5 {
	width: 37.15%;
	height: 42.65%;
	background-color: #df0000;
	animation-name: logo_5;
	animation-delay: .25s;
	z-index: 3;
}

/* green */
.logo6 {
	width: 20.64%;
	height: 11.68%;
	background-color: #039400;
	animation-name: logo_6;
	animation-delay: .675s;
	z-index: 1;
}

/* orange bottom 1 */
.logo7 {
	width: 25.06%;
	height: 14.15%;
	background-color: #df0000;
	animation-name: logo_7;
	animation-delay: .85s;
	z-index: 3;
}

/* blue */
.logo8 {
	width: 5.79%;
	height: 28.1%;
	background-color: #0040b5;
	animation-name: logo_8;
	animation-delay: .75s;
	z-index: 0;
}

/* green right */
.logo9 {
	width: 8.63%;
	height: 20.15%;
	background-color: #039400;
	animation-name: logo_9;
	animation-delay: .8s;
	z-index: 1;
}

/* animation */

@keyframes overflowx {
  0% {overflow-x: hidden; }
  99% {overflow-x: hidden; }
  100% {overflow-x: vidible; }
}
@keyframes logo_1 {
  0% {top: -60%; left: 19.34%; opacity: 0; }
  100% {top: 0.6%; left: 19.34%; opacity: 1; }
}
@keyframes logo_2 {
  0% {top: 15.67%; left: 109.5%; opacity: 0; }
  100% {top: 15.67%; left: 39.5%; opacity: 1; }
}
@keyframes logo_3 {
  0% {top: 15.67%; left: -60%; opacity: 0; }
  100% {top: 15.67%; left: 0.4%; opacity: 1; }
}
@keyframes logo_4 {
  0% {top: 42.9%; right: -60%; opacity: 0; }
  100% {top: 42.9%; right: 13.9%; opacity: 1; }
}
@keyframes logo_5 {
  0% {top: 79.3%; left: 39.5%; opacity: 0; }
  100% {top: 41.7%; left: 39.5%; opacity: 1; }
}
@keyframes logo_6 {
  0% {top: 42.7%; left: -60%; opacity: 0; }
  100% {top: 42.7%; left: 19%; opacity: 1; }
}
@keyframes logo_7 {
  0% {bottom: 2%; left: -60.5%; opacity: 0; }
  100% {bottom: 2%; left: 39.5%; opacity: 1; }
}
@keyframes logo_8 {
  0% {top: 54.0%; left: -60%; opacity: 0; }
  100% {top: 54.0%; left: 33.8%; opacity: 1; }
}
@keyframes logo_9 {
  0% {bottom: 7.94%; right: -60%; opacity: 0; }
  100% {bottom: 7.94%; right: 0%; opacity: 1; }
}

/* logo text elements */
.logotext {
	position: relative;
	margin-top: 36px;
	width: 688px;
	max-width: 70.24%;
	aspect-ratio: 1292 / 292;
	overflow: visible;
	display: block;
	box-sizing: border-box;
	transition: all .35s ease;
	animation-name: Xsplash_b;
	animation-delay: 4.5s;
	filter: invert(1);
}
.splash.dark .logotext {
	filter: invert(0);
}
@keyframes splash_b {
	0% {
		width: 688px;
		margin-top: 36px;
	}
	70% {
    margin-top: 23px;
    width: 161px;
	}
	100% {
    margin-top: 23px;
    width: 161px;
	}
}
.la {
	width: 21.05%;
	animation-delay: 1.75s;
	animation-name: lta;
}
.lf {
	width: 11.69%;
	animation-delay: 1.85s;
	animation-name: ltf;
}
.lr {
	width: 9.44%;
	animation-delay: 1.95s;
	animation-name: ltr;
}
.li {
	width: 3.25%;
	animation-delay: 2.05s;
	animation-name: lti;
}
.lc {
	width: 16.41%;
	animation-delay: 2.1s;
	animation-name: ltc;
}
.laa {
	width: 16.87%;
	animation-delay: 2.2s;
	animation-name: ltaa;
}

.lname {
	width: 76.78%;
	animation-delay: 2.3s;
	animation-name: ltw;
	height: auto;
	object-fit: contain; /* or cover */
}

@keyframes lta {
  0% {top: 1.5%; left: 0; opacity: 0; }
  35% {top: 1.5%; left: 0; opacity: 1; }
  100% {top: 1.5%; left: 0; opacity: 1; }
}
@keyframes ltf {
  0% {top: 1.5%; left: 23.14%; opacity: 0; }
  35% {top: 1.5%; left: 23.14%; opacity: 1; }
  100% {top: 1.5%; left: 23.14%; opacity: 1; }
}
@keyframes ltr {
  0% {top: 1.5%; left: 38.47%; opacity: 0; }
  35% {top: 1.5%; left: 38.47%; opacity: 1; }
  100% {top: 1.5%; left: 38.47%; opacity: 1; }
}
@keyframes lti {
  0% {top: 1.5%; left: 53.48%; opacity: 0; }
  35% {top: 1.5%; left: 53.48%; opacity: 1; }
  100% {top: 1.5%; left: 53.48%; opacity: 1; }
}
@keyframes ltc {
  0% {top: 0; left: 62.07%; opacity: 0; }
  35% {top: 0; left: 62.07%; opacity: 1; }
  100% {top: 0; left: 62.07%; opacity: 1; }
}
@keyframes ltaa {
  0% {top: 1.5%; left: 83.05%; opacity: 0; }
  35% {top: 1.5%; left: 83.05%; opacity: 1; }
  100% {top: 1.5%; left: 83.05%; opacity: 1; }
}
@keyframes ltw {
  0% {bottom: -3%; right: 0; opacity: 0; }
  100% {bottom: -3%; right: 0; opacity: 1; }
}

@media (max-width: 898px) {
	.logo {
    margin-left: 12.3%;
	}
	.logotext {
    margin-top: 3%;
	}
}