.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;
	/*************************************/
	animation-duration: 12.0s; 
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-delay: 1.0s;
}
.htmlrect1 {
	top: 0; left: 0;
	transform:rotate(270deg);
	animation-name: spin1;
}

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

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

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


@keyframes spin1 {
	0%{  transform:rotate(270deg); }
	12.5% {  transform:rotate(90deg); }
	25%{  transform:rotate(90deg); }
	37.5% { transform:rotate(270deg); }
	50% { transform:rotate(270deg); }
	62.5% { transform:rotate(180deg); }
	75% { transform:rotate(180deg); }
	87.5% { transform:rotate(270deg); }
	100% { transform:rotate(270deg); }
}

@keyframes spin2 {
	0%{  transform:rotate(0deg); }
	12.5% {  transform:rotate(180deg); }
	25%{  transform:rotate(180deg); }
	37.5% { transform:rotate(90deg); }
	50% { transform:rotate(90deg); }
	62.5% { transform:rotate(90deg); }
	75% { transform:rotate(90deg); }
	87.5% { transform:rotate(0deg); }
	100% { transform:rotate(0deg); }
}

@keyframes spin3 {
	0%{  transform:rotate(180deg); }
	12.5% {  transform:rotate(0deg); }
	25%{  transform:rotate(0deg); }
	37.5% { transform:rotate(180deg); }
	50% { transform:rotate(180deg); }
	62.5% { transform:rotate(270deg); }
	75% { transform:rotate(270deg); }
	87.5% { transform:rotate(180deg); }
	100% { transform:rotate(180deg); }
}

@keyframes spin4 {
	0%{  transform:rotate(90deg); }
	12.5% {  transform:rotate(270deg); }
	25%{  transform:rotate(270deg); }
	37.5% { transform:rotate(90deg); }
	50% { transform:rotate(90deg); }
	62.5% { transform:rotate(0deg); }
	75% { transform:rotate(0deg); }
	87.5% { transform:rotate(90deg); }
	100% { transform:rotate(90deg); }
}
/*  ENDE ANIMATION  ***************************************/