*{
	margin: 0;
	padding: 0;
}

main#canvas {
	width: 78vw;
	height: 39vw;
	margin: 9.15vw auto;
	background-color: purple;
}

	article#one {
		width: 50%;
		height: 50%;
		background-color: #ebeae8;
		float: left;
	}
			
			section#box-one{
			width: 50%;
			height: 100%;
			float: left;
			}
				figure#box-one.black{
					width: 11.363636%;
					height: 66.666667%;
					float: left;
					margin-left: 13.25vw;
				}
				figure#box-one-1.yellow{
					height: 11.363636%;
					width: 68%;
					float: left;
				}
				figure#box-one.orange{
					width: 11.363636%;
					height: 11.363636%;
					float: left;
				}
				figure#box-one-2.yellow{
					height: 11.363636%;
					width: 20.636364%;
					float: left;
				}
				figure#box-one.green{
					width: 11.363636%;
					height: 21.969697%;
					float: left;
					margin-left: 13.25vw;
				}

			section#box-two{
				width: 50%;
				height: 100%;
				float: left;
				background-color: #007459;
			}
				figure#box-two-1.black{
					width: 32%;
					height: 66.666667%;
					float: none;
				}
				figure#box-two.orange{
					width: 32%;
					height: 11.363636%;
					float: left;
				}
				figure#box-two.yellow{
					width: 68%;
					height: 11.363636%;
					float: left;
				}
				figure#box-two-2.black{
					width: 32%;
					height: 21.969697%;
					float: left;
				}	

	article#two {
		width: 50%;
		height: 50%;
		background-color: #110e09;
		float: left;
		}
			section#box-three{
				width: 50%;
				height: 100%;
				float: left;
			}
				figure#box-three.navy{
					width: 32%;
					height: 66.666667%;
					float: right;
				}
				figure#box-three.white{
					width: 68%;
					height: 11.363636%;
					float: left;
					margin-top: 13vw;
				}
				figure#box-three.green{
					width: 32%;
					height: 11.363636%;
					float: left;
				}
				figure#box-three.orange{
					width: 68%;
					height: 21.969697%;
					float: left;
				}
	
		section#box-four{
			width: 50%;
			height: 100%;
			float: right;
			background-color: #eb6025;
		}
				figure#box-four-1.black{
					width: 20.636364%;
					height: 66.666667%;
					float: left;
				}
				figure#box-four-1.teal{
					width: 11.363636%;
					height: 66.666667%;
					float: left;
				}
				figure#box-four-blank-1{
					width: 68%;
					height: 66.666667%;
					float: left;
				}
				figure#box-four-1.white{
					width: 20.636364%;
					height: 11.363636%;
					float: left;
				}
				figure#box-four.yellow{
					width: 11.363636%;
					height: 11.363636%;
					float:left;				
				}
				figure#box-four-2.white{
					width: 68%;
					height: 11.363636%;
					float:left;				
				}
				
				figure#box-four-blank-2{
					width: 20.636364%;
					height: 32%;
					float: left;
				}
				figure#box-four-2.teal{
					width: 11.363636%;
					height: 32%;
					float: left;	
				}
				figure#box-four-2.black{
					width: 68%;
					height: 32%;
					float: left;	
				}

	article#three {
		width: 50%;
		height: 50%;
		background-color: #fff12c;
		float: left;
	}
		section#box-five{
			width: 50%;
			height: 100%;
			float: left;
		}

				figure#box-five-1.black{
							width: 11.363636%;
							height: 21.969697%;
							float: left;
							margin-left: 13.25vw;
				}
				figure#box-five.white{
					width: 68%;
					height: 11.363636%;
					float: left;
				}
				figure#box-five.navy{
					width: 11.363636%;
					height: 11.363636%;
					float: left;
				}
				figure#box-five.green{
					width: 20.636364%;
					height: 11.363636%;
					float: left;
				}
				figure#box-five-2.black{
					width: 11.363636%;
					height: 66.666667%;
					float: left;
					margin-left: 13.25vw;
				}

		section#box-six{
			width: 50%;
			height: 100%;
			float: left;
			background-color: #01a19f;
		}
				figure#box-six.orange{
					width: 32%;
					height: 21.969697%;
					float: left;
				}
				figure#box-six.yellow{
					width: 68%;
					height: 21.969697%;
					float: left;
				}
				figure#box-six.black{
					width: 32%;
					height: 11.363636%;
					float: left;
				}	
				figure#box-six.green{
					width: 68%;
					height: 11.363636%;
					float: left;
				}	
				figure#box-six.navy{
					width: 32%;
					height: 66.666667%;
					float: left;
				}

	article#four {
		width: 50%;
		height: 50%;
		background-color: #ebeae8;
		float: left;
	}

		section#box-seven{
			width: 50%;
			height: 100%;
			float: left;
			
		}	
				figure#box-seven-1.white{
					width: 68%;
					height: 21.969697%;
					float: left;
				}	
				figure#box-seven.teal{
					width: 32%;
					height: 21.969697%;
					float: left;
				}
				figure#box-seven.black{
					width: 68%;
					height: 11.363636%;
					float: left;
				}
				figure#box-seven.navy{
					width: 32%;
					height: 11.363636%;
					float: left;
				}
				figure#box-seven-2.white{
					width: 68%;
					height: 66.666667%;
					float: left;
				}
				figure#box-seven.yellow{
					width: 32%;
					height: 66.666667%;
					float: left;
				}

		section#box-eight{
			width: 50%;
			height: 100%;
			float: right;
		}
				figure#box-eight-1.white{
					width: 20.636364%;
					height: 21.969697%;
					float: left;
				}
				figure#box-eight-1.yellow{
					height: 21.969697%;
					width: 11.363636%;
					float: left;
				}
				figure#box-eight-2.white{
					width: 68%;
					height: 21.969697%;
					float: left;
								}

				figure#box-eight.orange{
					width: 20.636364%;
					height: 11.363636%;
					float: left;
				}	
				figure#box-eight.teal{
					width: 11.363636%;
					height: 11.363636%;
					float: left;
				}		
				figure#box-eight.black{
					height: 11.363636%;
					width: 68%;
					float: left;
				}	
				figure#box-eight-2.yellow{
					width: 11.363636%;
					height: 66.666667%;
					float: left;
					margin-left: 4.05vw;
				}	


/* CSS NAMED COLOR CLASSES*/

.white {
	background-color: #ebeae8;
}

.black {
	background-color: #110e09;
}

.green {
	background-color: #007459;
}

.navy {
	background-color: #06336c;
}

.teal {
	background-color: #00a2a4;
}
.orange {
	background-color: #eb6025;
}
.yellow {
	background-color: #fff12c;
}



/* CSS HOVER MODE*/

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

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

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

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

.teal:hover {
	background-color: maroon;
}
.orange:hover {
	background-color: salmon;
}
.yellow:hover {
	background-color: darkseagreen;
}