* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #000;
	}

	.container {
		position: relative;
		display: flex;
		height: 20vh;
		width: 100%;
		justify-content: center;
		align-items: center;
		-webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005);
	}

	.loader {
		position: absolute;
		width: 20vh;
		height: 20vh;
		border-radius: 50%;
		animation: animate 2s linear infinite;
	}

	.loader:nth-child(2),
	.loader:nth-child(4) {
		filter: hue-rotate(290deg);
		animation-delay: -1s;
	}

	@keyframes animate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loader:nth-child(1)::before,
	.loader:nth-child(2)::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: 100%;
		background: linear-gradient(to top, transparent, rgb(0 13 255 / 40%));
		background-size: 10vh 18vh;
		background-repeat: no-repeat;
		border-top-left-radius: 10vh;
		border-bottom-left-radius: 10vh;
	}

	i {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%);
		width: 2vh;
		height: 2vh;
		background: #0D47A1;
		border-radius: 50%;
		z-index: 10;
		box-shadow: 0 0 1vh #0D47A1,
			0 0 2vh #0D47A1,
			0 0 3vh #0D47A1,
			0 0 4vh #0D47A1,
			0 0 5vh #0D47A1,
			0 0 6vh #0D47A1,
			0 0 7vh #0D47A1,
			0 0 8vh #0D47A1,
			0 0 9vh #0D47A1,
			0 0 10vh #0D47A1;
	}

	.loader span {
		position: absolute;
		top: 2vh;
		left: 2vh;
		right: 2vh;
		bottom: 2vh;
		background-color: #000;
		border-radius: 50%;
		z-index: 1;
	}

	.logo-container {
		position: absolute;
		width: 40vh;
		height: 40vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.logo-container img {
		max-width: 100%;
		max-height: 100%;
/*		border-radius: 50%;*/
	}