.loader {
	display: block;
	overflow: hidden;
	font-family: 'Locofont', sans-serif;
	text-align: center;


	/* für horizontale und vertikale Zentrierung: */
	position: absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	top: 50%;
	transform: translateY(-50%);
}

.loader--3d {
	transform-style: preserve-3d;
	perspective: 800px;
}

.loader-item {
	display: inline-block;
	margin: 0 3px;
	color: white;

	/* Chrome, Safari, Opera: */
	-webkit-animation-duration: 2000ms;
	-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	-webkit-animation-iteration-count: infinite;

	animation-duration: 2000ms;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	animation-iteration-count: infinite;


/* Grössenangaben werden je nach FAKTOR per JS gesetzt.
	Siehe Funktion InitLoaderAnimGroesse.
	Hinweis: line-height wie height, damit Text in der Mitte.

	Provisorische Grössen (passend für Faktor 2):
*/

	width: 32px;  height: 32px;  line-height: 32px;  font-size: 24px;
}

.loader-item:nth-child(1) { background-color: hsl(150, 100%, 27%);  -webkit-animation-delay:100ms; animation-delay: 100ms; }
.loader-item:nth-child(2) { background-color: hsl(180, 100%, 30%);  -webkit-animation-delay:200ms; animation-delay: 200ms; }
.loader-item:nth-child(3) { background-color: hsl(210, 100%, 33%);  -webkit-animation-delay:300ms; animation-delay: 300ms; }
.loader-item:nth-child(4) { background-color: hsl(240, 100%, 33%);  -webkit-animation-delay:400ms; animation-delay: 400ms; }
.loader-item:nth-child(5) { background-color: hsl(270, 100%, 33%);  -webkit-animation-delay:500ms; animation-delay: 500ms; }
.loader-item:nth-child(6) { background-color: hsl(300, 100%, 33%);  -webkit-animation-delay:600ms; animation-delay: 600ms; }
.loader-item:nth-child(7) { background-color: hsl(330, 100%, 33%);  -webkit-animation-delay:700ms; animation-delay: 700ms; }


.loader--flipDelayDown .loader-item {
	animation-name: flipDelay;
	animation-direction: reverse;
}

/**********************************/
/* KEYFRAME ANIMATION DEFINITIONS */
/**********************************/


@keyframes flipDelay {
	0% {
		transform: rotateX(0deg);
		transform-origin: 0 0 0;
		opacity: 1;
	}
	45% {
		transform: rotateX(90deg);
		transform-origin: 0 0 0;
		opacity: 0;
	}
	55% {
		transform: rotateX(90deg);
		opacity: 0;
		transform-origin: 0 100% 0;
	}
	95% {
		transform: rotateX(0deg);
		opacity: 1;
		transform-origin: 0 100% 0;
	}
}