#temp-footer {
	background: var(--primary-color);
	height: var(--footer-height);
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 4;
}

#temp-header {
	background: var(--primary-color);
	height: 60px;
	width: 100%;
	position: fixed;
	top: 0;
}

.diffused-light {
	animation-name: color-change;
	animation-duration: 4s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.diffused-light.order-5 {
	animation-delay: none;
}

.diffused-light.order-4,
.diffused-light.order-3 {
	animation-delay: 0.5s;
}

.diffused-light.order-2 {
	animation-delay: 1s;
}

.diffused-light.order-1 {
	animation-delay: 1.5s;
}

.diffused-light.order-0 {
	animation-delay: 2s;
}

@keyframes color-change {
	from {
		fill: rgba(241, 196, 15, 0.01);
	}

	to {
		fill: rgba(241, 196, 15, 0.3);
	}
}

/* Firefox < 16 */
@-moz-keyframes color-change {
	from {
		fill: rgba(241, 196, 15, 0.01);
	}

	to {
		fill: rgba(241, 196, 15, 0.3);
	}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes color-change {
	from {
		fill: rgba(241, 196, 15, 0.01);
	}

	to {
		fill: rgba(241, 196, 15, 0.3);
	}
}

/* Internet Explorer */
@-ms-keyframes color-change {
	from {
		fill: rgba(241, 196, 15, 0.01);
	}

	to {
		fill: rgba(241, 196, 15, 0.3);
	}
}

/* Opera < 12.1 */
@-o-keyframes color-change {
	from {
		fill: rgba(241, 196, 15, 0.01);
	}

	to {
		fill: rgba(241, 196, 15, 0.3);
	}
}
.background-wrap {
	position: absolute;
	bottom: 0;
	width: 100%;
}

.animated-background-svg {
	position: absolute;
}

@media (max-width: 768px) {
	.desktop-illustration {
		display: none;
	}

	.mobile-illustration {
		display: block;
		bottom: var(--footer-height);
		left: 0;
	}
}
@media (min-width: 768px) {
	.mobile-illustration {
		display: none;
	}

	.desktop-illustration {
		bottom: var(--footer-height);
		left: 0;
		display: block;
	}
}
body,
html {
	height: 100%;
}

.body-bis {
	margin-top: 60px;
	height: 100%;
	background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
	display: grid;
	grid-template-rows: 40% 60%;
}

.title-loading {
	font-family: 'Luna';
	color: white;
	text-align: center;
	line-height: 50px;
}

/*MOBILE*/
@media (max-width: 768px) {
	.title-loading {
		font-size: 18px;
		margin-left: 5px;
		margin-right: 5px;
	}
}
/*DESKTOP & TABLET*/
@media (min-width: 768px) {
}
.title-loading {
	font-size: 24px;
}

.spinner {
	height: 200px;
	width: 200px;
	animation: rotate 2s linear infinite;
	transform-origin: center center;
}

.spinner .path {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	animation: dash 1.5s ease-in-out infinite;
	stroke-linecap: round;
	stroke: #ddd;
}

.loading-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	justify-content: center;
}

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

@keyframes dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35px;
	}

	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124px;
	}
}