@keyframes mybox1animation{ 
	0%{
		transform: scaleX(.1) scaleY(.1);
	}
	20%{
		transform: scaleX(.2) scaleY(.2);
	}
	40%{
		transform: scaleX(.3) scaleY(.3);
	}
	60%{
		transform: scaleX(.4) scaleY(.4);
	}
	80%{
		transform: scaleX(.5) scaleY(.5);
	}
	100%{
		transform: scaleX(1) scaleY(1);
	}	
}


@keyframes mybox2animation{ 
	0%{
		transform: scaleX(1) scaleY(1);
	}
	20%{
		transform: scaleX(.9) scaleY(.9);
	}
	40%{
		transform: scaleX(.8) scaleY(.8);
	}
	60%{
		transform: scaleX(.7) scaleY(.7);
	}
	80%{
		transform: scaleX(.5) scaleY(.5);
	}
	100%{
		transform: scaleX(.1) scaleY(.1);
	}	
}

@keyframes mybox3animation{ 
	0%{
		transform:scaleX(1) scaleY(1);
	}

	50%{
		transform:scaleX(1) scaleY(.2);
	}

	100%{
		transform:scaleX(1) scaleY(1);
	}

}

@keyframes mybox4animation{ 
	0%{
		transform:rotateY(180deg);
	}
	50%{
		transform:rotateY(270deg);
	}	
	110%{
		transform:rotateY(0deg);
	}
}


@keyframes mybox5animation{ 
	0%{
		transform:scale3d(1,1,1) rotateZ(0deg);
	}
	50%{
		transform:scale3d(.5,.5,.5) rotateZ(270deg);
	}	
	110%{
		transform:scale3d(1,1,1) rotateZ(0deg);
	}
}
@keyframes mybox6animation{ 
	0%{
		transform: rotate(0deg);
	}
	25%{
		transform: rotate(90deg);
	}
	50%{
		transform: rotate(180deg);
	}
	75%{
		transform: rotate(270deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

@keyframes mybox7animation{ 
	0%{
		transform: rotateZ(90deg); 
	}
	50%{
		transform: rotateZ(180deg);
	}
	75%{
		transform: rotateZ(270deg);
	}
	100%{
		transform: rotateZ(360deg);
	}
}

@keyframes mybox8animation{ 
	0%{
		transform: rotateZ(90deg); 
	}
	50%{
		transform: rotateZ(180deg);
	}
	75%{
		transform: rotateZ(270deg);
	}
	100%{
		transform: rotateZ(360deg);
	}
}
body{
	background-color: #8397A3;
}


.big{
	width: 540px;
	height:540px;
	position: relative;
	margin:100px auto 0 auto;
	padding:0 0 0 0;
}

.boxes{
	width:100px;
	height:100px;
	background-color:#8EACBF;
	position: absolute;
	border-color: grey;
	border-style: solid;
	border-width: .5px;

} 

.circle{
	border-radius: 50%;
}

.bgdT{
	background-color:pink;
}

/* ROW 1 IDS */
#r1c1{
	left:0px;
	top:0px;

}
#r1c2{
	left:110px;
	top:0px;
}
#r1c3{
	left:220px;
	top:0px;
}
#r1c4{
	left:330px;
	top:0px;
}
#r1c5{
	left:440px;
	top:0px;
}

/* ROW 1 class */
.r1c1{

}
.r1c2{

}
.r1c3{
	text-align: center;
}
.r1c4{
	text-align: center;
}
.r1c5{
	text-align: center;	
}


/* ROW 2 IDS*/
#r2c1{
	left:0px;
	top:110px;
}
#r2c2{
	left:110px;
	top:110px;
}
#r2c3{
	left:220px;
	top:110px;
}
#r2c4{
	left:330px;
	top:110px;
}
#r2c5{
	left:440px;
	top:110px;
}

/* ROW 2 class */
.r2c1{

}
.r2c2{

}
.r2c3{
	text-align: center;	
}
.r2c4{
	text-align: center;	
}
.r2c5{
	text-align: center;	
}

/* ROW 3 IDS*/
#r3c1{
	left:0px;
	top:220px;
}
#r3c2{
	left:110px;
	top:220px;
}
#r3c3{
	left:220px;
	top:220px;
}


#r3c4{
	left:330px;
	top:220px;
}
#r3c5{
	left:440px;
	top:220px;
}

/* ROW 3 class */
.r3c1{
	text-align: center;
}
.r3c2{
	text-align: center;
}
.r3c3{
	text-align: center;	
}
.r3c4{
	text-align: center;	
}
.r3c5{
	text-align: center;	
}

/* ROW 4 IDS*/
#r4c1{
	left:0px;
	top:330px;
}
#r4c2{
	left:110px;
	top:330px;
}
#r4c3{
	left:220px;
	top:330px;
}
#r4c4{
	left:330px;
	top:330px;
}
#r4c5{
	left:440px;
	top:330px;
}

/* ROW 4 class */
.r4c1{
	text-align: center;
}
.r4c2{
	text-align: center;
}
.r4c3{
	text-align: center;	
}
.r4c4{
	
}
.r4c5{
	
}

/* ROW 5 IDS*/
#r5c1{
	left:0px;
	top:440px;
}
#r5c2{
	left:110px;
	top:440px;
}
#r5c3{
	left:220px;
	top:440px;
}
#r5c4{
	left:330px;
	top:440px;
}
#r5c5{
	left:440px;
	top:440px;
}

/* ROW 5 class */
.r5c1{
	text-align: center;	
}
.r5c2{
	text-align: center;	
}
.r5c3{
	text-align: center;	
}
.r5c4{
	text-align: center;	
}
.r5c5{
	text-align: center;	
}


.reset{
	width:50px;		
	height:50px;
	background-color: #8397A3;
	position: relative;
	text-align:center;	
	margin: 100px auto 0 auto;

}
.small{
	display:inline-block;
	font-size: 20pt;
	color:black;
}


.animation1{
	background-color:#0073F8;
	animation-name: mybox1animation;
	animation-duration: 5s;
	width:100px;
	height:100px;
	position: absolute;

	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate; 
}

.animation2{
	background-color:#9CE5F7;
	animation-name: mybox2animation;
	animation-duration: 5s;
	width:100px;
	height:100px;
	position: absolute;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate; 
}

.animation3{
	background-color:#352EF2;
	animation-name: mybox3animation;
	animation-duration: 5s;
	font-size: 30pt;
	width:100px;
	height:100px;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate; 
}

.animation4{
	background-color:#2EB9CB;
	animation-name: mybox4animation;
	animation-duration: 9s;
	width:100px;
	height:100px;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}


.animation5{
	background-color:#94C130;
	animation-name: mybox5animation;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate; 
}


.animation6{
	background-color:#027381;
	animation-name: mybox6animation;
	animation-duration: 2s;
	width:100px;
	height:100px;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate; 
}


.animation7{
	background-color:#2D7600;
	animation-name: mybox7animation;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate; 
}


.animation8{
	background-color:#29A678;
	animation-name: mybox8animation;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate; 
}


p{
	display: inline-block;
	font-size: 30pt;
	color:#8EACBF;
	font-family: helvetica;
}

.C1{
	background-color: #E57D7D;
}

.C2{
	background-color: #C92B7B;
}

.C3{
	background-color: #A03171;
}

.C4{
	background-color: #FE51FE;
}

.C5{
	background-color: #A083B5;
}

.C6{
	background-color: #84395F;
}

.C7{
	background-color: #FE7751;
}

.C8{
	background-color: #FE5151;
}

.C9{
	background-color: #E52929;
}

.C10{
	background-color: #FF0000;
}

.C11{
	background-color: #900000;
}

.C12{
	background-color: #FCAC03;
}

.C13{
	background-color: #FF7600;
}

.C14{
	background-color: #F0E700;
}

.C15{
	background-color: #DFC6ED;
}

.C16{
	background-color: #B58383;
}

.C17{
	background-color: #F2D5CE;
}