*{
	margin:0;
	padding:0;

}


header#canvas {

	width: 48.3vw;
	height: 56.3vw;
}

section{
	border: 4px solid black;
	width: 100.666666%;
	height: 100%;
	float: left;
	/* float allows to stack next to each other*/
}


article#row-one{
	width: 27.6%;
	height: 100%;
	margin-left:0%;
	margn-top:0%;
}



figure#section-red {
	display: inline-block;
	margin: 211% 35%;
	width: 135%;
	height: 9%;
}

figure#section-red-dos {
	display: inline-block;
	margin: -197% 35%;
	width: 135%;
	height: 9%;
}

figure#section-red-tres {
	display: inline-block;
	margin: -144% 35%;
	width: 135%;
	height: 9%;
}

figure#section-red-quatro {
	display: inline-block;
	margin: -144% 35%;
	width: 135%;
	height: 9%;
}

figure#section-red-cinco {
	display: inline-block;
	margin: -91% 35%;
	width: 135%;
	height: 9%;
}


figure#section-red-seven {
	display: inline-block;
	margin: -446% 170%;
	width: 192%;
	height: 9%;
}


figure#section-red-eight {
	display: inline-block;
	margin: -286% 170%;
	width: 192%;
	height: 9%;
}

figure#section-red-nine {
	display: inline-block;
	margin: -393% 170%;
	width: 192%;
	height: 9%;
}

figure#section-red-ten {
	display: inline-block;
	margin: -340% 170%;
	width: 192%;
	height: 9%;
}

figure#section-red-ten {
	display: inline-block;
	margin: -340% 170%;
	width: 192%;
	height: 9%;
}

figure#section-red-eleven {
	display: inline-block;
	margin: -211% 170%;
	width: 92%;
	height: 3.5%;
}


figure#section-red-twelve {
	display: inline-block;
	margin: -159% 170%;
	width: 92%;
	height: 3.5%;
}

figure#section-red-thirteen {
	display: inline-block;
	margin: -106% 170%;
	width: 92%;
	height: 3.5%;
}

figure#section-red-last {
	display: inline-block;
	margin: -54% 170%;
	width: 92%;
	height: 3.2%;
}

figure#section-circle {
	display: inline-block;
	margin: -530% 5%;
	width: 102%;
	height: 3.2%;
}

.circle:before {
	content: ' \25CF';
	font-size: 400px;
}


figure{
	width: 15%;
	height: 97%;
	float: left;
	margin-left: 8%;
	margin-top: 10%;
}

/* CSS NAMED COLOR CLASSES */

/* talking to classes with dot(.)*/


.red{
	background-color: red;
}
.red:hover{
	background-color: peachpuff;
}

.orangered{
	background-color: orangered;
}

.orangered:hover{
	background-color: yellow;
}

.yellow{
	background-color: yellow;
}

.yellow:hover{
	background-color: orange;
}

.limegreen{
	background-color: limegreen;
}

.limegreen:hover{
	background-color: powderblue;
}

.cyan{
	background-color: blue;
}

.cyan:hover{
	background-color: cyan;
}

.green{
	background-color: lawngreen;
}

.green:hover{
	background-color: limegreen;
}

.pink{
	background-color: peachpuff;
}

.pink:hover{
	background-color: black;
}

.blue{
	background-color: blue;
}

.blue:hover{
	background-color: powderblue;
}

.lightgrey{
	background-color: lightgrey;
}

.lightgrey:hover{
	background-color: blue;
}

.purple:hover{
	background-color: black;
}

.black{
	background-color: black;
}

.black:hover{
	background-color: darkorchid;
}