*{
	padding: 0;
	margin: 0;
}

body{
	background-color: whitesmoke;
	overflow: hidden;
	float: left;

}
header{
	display: none;
}

div.box{   
	width: 5.2vw; 
	height: 5.2vw;
	background-color: #000;
    color: #fff;
    opacity: 0;
    float: left;

}
img{
	float: left;
	width: 5.2vw;
	height: 5.2vw;
	animation-name: fadeinout;
	animation-duration: 3.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out; 
}

/* CIRCLE 1*/
.circle1-1{
	transform: scaleX(-1.0);
}

.circle1-2{
	transform: scaleY(-1.0) scaleX(-1.0);

}

.circle1-3{
	transform: scaleY(-1.0);

}



/* CIRCLE 2*/
.circle2{
	animation-delay: .5s;

}

.circle2-1{
	animation-delay: .5s;
	transform: scaleX(-1.0);

}

.circle2-2{
	transform: scaleY(-1.0) scaleX(-1.0);
	animation-delay: .5s;

}

.circle2-3{
	transform: scaleY(-1.0);
	animation-delay: .5s;

}

/* CIRCLE 3*/

.circle3{
	animation-delay: 1s;
}

.circle3-1{
	animation-delay: 1s;
	transform: scaleX(-1.0);

}

.circle3-2{
	transform: scaleY(-1.0) scaleX(-1.0);
	animation-delay: 1s;

}

.circle3-3{
	transform: scaleY(-1.0) ;
	animation-delay: 1s;

}

/* CIRCLE 4*/

.circle4{
	animation-delay: 1.5s;
}

.circle4-1{
	animation-delay: 1.5s;
	transform: scaleX(-1.0);

}

.circle4-2{
	transform: scaleY(-1.0) scaleX(-1.0);
	animation-delay: 1.5s;

}

.circle4-3{
	transform: scaleY(-1.0);
	animation-delay: 1.5s;

}


/* CIRCLE 5*/

.circle5{
	animation-delay: 2s;
}

.circle5-1{
	animation-delay: 2s;
	transform: scaleX(-1.0);
}

.circle5-2{
	transform: scaleY(-1.0) scaleX(-1.0);
	animation-delay: 2s;

}

.circle5-3{
	transform: scaleY(-1.0);
	animation-delay: 2s;

}


/* CIRCLE 6*/

.circle6{
	animation-delay: 2.5s;
}

.circle6-1{
	animation-delay: 2.5s;
	transform: scaleX(-1.0);
}
.circle6-2{
	transform: scaleY(-1.0) scaleX(-1.0);
	animation-delay: 2.5s;

}

.circle6-3{
	transform: scaleY(-1.0);
	animation-delay: 2.5Ss;

}


/**
@keyframes fadeIn {
  0% { opacity: 0.1; }
  20% { opacity: 0.2; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}
**/

@keyframes fadeinout {
  0%,100% { opacity: 0.1; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0.1; }
  50% { opacity: 1; }
}
