.animated-logo {
	position: absolute;
/*	scale: 400%;*/
/*	margin: 300px;*/
}

.logo-center, .logo-mid-left, .logo-mid-right, .logo-out-left, .logo-out-right  {
	width: 100px;
	height: 100px;
	position: absolute;
}

.logo-center {
	fill: var(--lavender-1);
	left: calc(var(--logo-space-outer) + var(--logo-space-inner));
}

.logo-mid-left, .logo-mid-right, .logo-out-left, .logo-out-right {
	fill: var(--lavender-2);
}

.logo-mid-left {
	left: calc(var(--logo-space-outer));
	top: var(--logo-mid-offset);
}

.logo-mid-right {
	left: calc(var(--logo-space-outer) + var(--logo-space-inner) + var(--logo-space-inner));
	top: var(--logo-mid-offset);
}

.logo-out-left {
	left: 0px;
	top: var(--logo-out-offset);
}

.logo-out-right {
	left: calc(var(--logo-space-outer) + var(--logo-space-inner) + var(--logo-space-inner) + var(--logo-space-outer));
	top: var(--logo-out-offset);
}



.logo-center[data-visible="false"] {
	opacity: 0;
}
.logo-center[data-visible="true"] {
	animation: 0.8s var(--cubic-bezier-quart) 0s 1 backwards logo-center;
}


.logo-mid-left[data-visible="false"] {
	opacity: 0;
}
.logo-mid-left[data-visible="true"] {
	animation: 0.8s var(--cubic-bezier-quart) 0.1s 1 backwards logo-mid-left;
}

.logo-mid-right[data-visible="false"] {
	opacity: 0;
}
.logo-mid-right[data-visible="true"] {
	animation: 0.8s var(--cubic-bezier-quart) 0.1s 1 backwards logo-mid-right;
}


.logo-out-left[data-visible="false"] {
	opacity: 0;
}
.logo-out-left[data-visible="true"] {
	animation: 0.9s var(--cubic-bezier-quart) 0.3s 1 backwards logo-out-left;
}

.logo-out-right[data-visible="false"] {
	opacity: 0;
}
.logo-out-right[data-visible="true"] {
	animation: 0.9s var(--cubic-bezier-quart) 0.3s 1 backwards logo-out-right;
}


.logo-circle[data-visible="false"] {
	opacity: 0;
}
.logo-circle[data-visible="true"] {
	animation: 1.3s var(--cubic-bezier-quart) 0.25s 1 backwards logo-circle;
}


@keyframes logo-circle {
	from {
		opacity: 0;
		transform: translate(36px, 110px) scale(0.5);
	}
	to {
		opacity: 1;
		transform: translate(0px, 0px) scale(1);
	}
}

@keyframes logo-center {
	from {
		opacity: 0;
		transform: translateY(50px) scale(0.5);
	}
	to {
		opacity: 1;
		transform: translateY(0px) scale(1);
	}
}

@keyframes logo-mid-left {
	from {
		opacity: 0;
		transform: translate(25px, 10px) rotate(30deg) scale(0.7);
	}
	to {
		opacity: 1;
		transform: translate(0px, 0px) rotate(0deg) scale(1);
	}
}

@keyframes logo-mid-right {
	from {
		opacity: 0;
		transform: translate(-25px, 10px) rotate(-30deg) scale(0.7);
	}
	to {
		opacity: 1;
		transform: translate(0px, 0px) rotate(0deg) scale(1);
	}
}

@keyframes logo-out-left {
	from {
		opacity: 0;
		transform: translate(25px, -10px) rotate(40deg) scale(0.7);
	}
	to {
		opacity: 1;
		transform: translate(0px, 0px) rotate(0deg) scale(1);
	}
}

@keyframes logo-out-right {
	from {
		opacity: 0;
		transform: translate(-25px, -10px) rotate(-40deg) scale(0.7);
	}
	to {
		opacity: 1;
		transform: translate(0px, 0px) rotate(0deg) scale(1);
	}
}