* {
	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.6%;
		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;
}
.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: blue;
}
.black:hover {
	background-color: purple;
}
.white:hover {
	background-color: black;
}