*{
	margin: 0;
	padding: 0;
}

header#canvas{
	width: 52.2vw;
	height: 52.5vw;
}
	article#row-one{
		width: 100%;
		height: 15%;
	}


	section.yellow{
		width:	95%;
		height:	95%;
		margin-left:2%;
		margin-top: 2%;
		float: left;
	}
	section.green{
		width: 50%;
		height: 100%;

	}
	article.red{
		width: 25%;
		height: 20%;
		margin-top: 20%;
		float: left;
	}


	article.red-two{
		width:25%;
		height: 20%;
		margin-top: 20%;
/*		float: right;*/
	}

	article.red-three{
		width: 25%;
		height: 20%;
		margin-top: 20%;
		float: left;

	}

	article.red-four{
		width:25%;
		height: 20%;
		margin-top: 20%;
/*		float: right;*/
	}

	figure.green{

		width: 50%;
		height: 100%;
		margin-left: 25%;
		float: left;
	}

	article.red-five{
	width:	50%;
	height: 60%;
	margin-left: 25%;
	margin-top: 40%;
	}

/* CSS COLOR CLASS */

.black {
	background-color: black;
}

.yellow{
	background-color: yellow
}

.red{
	background-color: tomato;
}

.green{
	background-color: limegreen;
}

.red-two{
	background-color: tomato;
}

.red-three{
	background-color: tomato;
}

.red-four{
	background-color: tomato;
}

.red-five{
	background-color: tomato;
}
/*CSS HOVER*/

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

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

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

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

.red-two:hover{
	background-color: yellow;
}

.red-three:hover{
	background-color: yellow;
}

.red-four:hover{
	background-color: yellow;
}

.red-five:hover{
	background-color: yellow;
}