*{
	margin: 0;
	padding: 0;
	

}

header#canvas {
	width: 52.15vw;
	height: 52.2vw;
	margin: 2vh auto;
}

section,article,figcaption {
	float: left;
}

	article#row-one {
		width: 27.5%;
		height: 100%;

	}


		section.red {
			width: 100%;
			height: 64%;
			float: none;

		}

			figure#section-red {
				display: inline-block;
				margin: 28% 21%;
				width: 58%;
				height: 76%;
				
			}

				figcaption#red-section {
					margin-top: 6%;
					margin-left: 5%;
					width: 18.4%;
					height: 96%;

				}

		section.cyan {
			width: 233%;
			height: 36%;

		}

			figure.purple {
				margin: 10.5% 13.2%;
				width: 73.5%;
				height: 63%;
			}

				figcaption.orange {
					margin-top: 2.5%;
					margin-left: 2.5%;
					width: 21.9%;
					height: 90%;

				}


	section.yellow {
		width: 44.7%;
		height: 36%;

	}

		figure.black {
			margin: 13.8% 16.8%;
			width: 67.5%;
			height: 65%;

		}

			figcaption.blue {
				margin-top:4%;
				margin-left: 4%;
				width: 20%;
				height: 90%;
			}

	section.blue {
		width: 27.7%;
		height: 36%;

	}

		figure.red {
			margin: 25% 20%;
			width: 62%;
			height: 61%;
		}

			figcaption.white {
				margin-top: 6%;
				margin-left: 5.5%;
				width:18%;
				height: 92%;
			}

	article#row-two {
		width: 72.4%;
		height:28%;

	}

		section.orange { 
			width: 50.3%;
			height: 100%;

		}

			figure.green {
				margin: 17% 18.5%;
				width: 64%;
				height:56%;
			}

				figcaption.yellow {
					margin-top: 3%;
					margin-left: 3%;
					width: 21%;
					height: 91%;
				}


		section.black {
			width: 49.7%;
			height: 229%;

		}

			figure.yellow {
				margin: 24.5% 19.5%;
				width: 61.5%;
				height: 72.8%;
			}


			figcaption.red {
				margin-top: 5%;
				margin-left: 5.5%;
				width: 18%;
				height: 95%;

			}
		



/*CSS COLOR CLASSES */



.red {
	background-color: red;
}


.pink{
	background-color: pink;
}


.orange {
	background-color: orange;
}


.yellow {
	background-color: yellow;
}


.green {
	background-color: limegreen;
}


.cyan {
	background-color: cyan;
}


.blue {
	background-color: blue;
}

.purple{
	background-color: purple;
}

.black{
	background-color: black;
}

.white{
	background-color: white;
}



/* CSS COLOR CLASS HOVER STATES */




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

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

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

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

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

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

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

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

.black:hover{
	background-color: blue;
}
	
.white:hover {
	background-color: black;
}