.htmlrect1, .htmlrect2, .htmlrect3, .htmlrect4 {
	width: 50%; height: 50%; 
	position: absolute;
	background-image: url(../_images_all/circle.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.fz1, .fz2, .fz3, .fz4, .oz2, .tz1, .tz2, .tz3, .tz4 {
	animation-duration: 2.0s;
	animation-timing-function: ease-out;
	animation-delay: 1.0s;
	animation-fill-mode: forwards;
}

/* FÜHRUNGSZIRKEL ****************************/
.fz1  {
	top: 0; left: 0;
	transform:rotate(270deg);
	animation-name: fz_spin1;
}

.fz2 {
	top: 0; left: 50%;
	transform:rotate(0deg);
	animation-name: fz_spin2;
}

.fz3 {
	top: 50%; left: 0;
	transform:rotate(180deg);
	animation-name: fz_spin3;
}

.fz4 {
	top: 50%; left: 50%;
	transform:rotate(90deg);
	animation-name: fz_spin4;
}


@keyframes fz_spin1 {
	from { transform:rotate(270deg); }
	to { transform:rotate(90deg); }
}

@keyframes fz_spin2 {
	from {  transform:rotate(0deg); }
	to{  transform:rotate(180deg); }
}

@keyframes fz_spin3 {
	from {  transform:rotate(180deg); }
	to {  transform:rotate(0deg); }
}

@keyframes fz_spin4 {
	from {  transform:rotate(90deg); }
	to {  transform:rotate(270deg); }
}

/* ORGANIUSATIONSSZIRKEL ****************************/

.oz1  {
	top: 0; left: 0;
	transform:rotate(270deg);
}

.oz2 {
	top: 0; left: 50%;
	transform:rotate(0deg);
	animation-name: oz_spin2;
}

.oz3 {
	top: 50%; left: 0;
	transform:rotate(180deg);
}

.oz4 {
	top: 50%; left: 50%;
	transform:rotate(90deg);
}

@keyframes oz_spin2 {
	from {  transform:rotate(0deg); }
	to{  transform:rotate(90deg); }
}

/* TRAININGSZIRKEL ****************************/

.tz1  {
	top: 0; left: 0;
	transform:rotate(270deg);
	animation-name: tz_spin1;
}

.tz2 {
	top: 0; left: 50%;
	transform:rotate(0deg);
	animation-name: tz_spin2;
}

.tz3 {
	top: 50%; left: 0;
	transform:rotate(180deg);
	animation-name: tz_spin3;
}

.tz4 {
	top: 50%; left: 50%;
	transform:rotate(90deg);
	animation-name: tz_spin4;
}


@keyframes tz_spin1 {
	from { transform:rotate(270deg); }
	to { transform:rotate(180deg); }
}

@keyframes tz_spin2 {
	from {  transform:rotate(0deg); }
	to{  transform:rotate(90deg); }
}

@keyframes tz_spin3 {
	from {  transform:rotate(180deg); }
	to {  transform:rotate(270deg); }
}

@keyframes tz_spin4 {
	from {  transform:rotate(90deg); }
	to {  transform:rotate(0deg); }
}



/*  ENDE ANIMATION  ***************************************/