/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••OO••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••OO••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••OO••••••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••••••OOOO•••••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••••••OOOO•••••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••••••OOOO•••••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••••••OOOO•••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••OOOOOO••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••OOOOOO••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••OOOOOO••••••••••••••••••••••••••••••••••••••
••••••••O••••••••••••••••••••••••••••••OOOOOO••••••••••••••••••••••••••••O•••••••••
•••••••••OO•••••••••••••••••••••••••••OOOOOOOO•••••••••••••••••••••••••OO••••••••••
•••••••••••OOO••••••••••••••••••••••••OOOOOOOO••••••••••••••••••••••OOO••••••••••••
•••••••••••••OOOO•••••••••••••••••••••OOOOOOOO•••••••••••••••••••OOOO••••••••••••••
•••••••••••••••OOOOOO•••••••••••••••••OOOOOOOO••••••••••••••••OOOOOO•••••••••••••••
•••••••••••••••••OOOOOOO•••••••••••••OOOOOOOOOO•••••••••••••OOOOOO•••••••••••••••••
•••••••••••••••••••OOOOOOO•••••••••••OOOOOOOOOO••••••••••OOOOOOO•••••••••••••••••••
••••••••••••••••••••••OOOOOOOO•••••••OOOOOOOOOO•••••••OOOOOOOO•••••••••••••••••••••
•••••••••••••••••••••••OOOOOOOOOO••••OOOOOOOOOO••••OOOOOOOOO•••••••••••••••••••••••
•••••••••••••••••••••••••OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO•••••••••••••••••••••••••
••••••••••••••••••••••••••••OOOOOOOOOOOOOOOOOOOOOOOOOOOO•••••••••••••••••••••••••••
••••••••••••••••••••••••••••••OOOOOOOOOOOOOOOOOO000000•••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••OOOOOOOOOOOOOOOOOOOO•••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••OOOOOOOOOOOOOOOOOO••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••OOOOOOOOOOOOOO••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••OOOOOOOOOO••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••OOOOOO••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••••DESIGN BY••••••••••••••••••••••••••••••••••••
••••••••••••••••••••••••••••••••••••MARCELO LAYERA•••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* CSS RESET */

* {
	margin: 0;
	padding: 0;
}

header#canvas {
	width: 51.99vw;
	height: 51.95vw;
	margin: 2vh auto 2vh auto;
}

	section	{
		width: 25%;
		height: 100%;
		float: left;
	}

		article {
			width: 100%;
			height: 25%;
			margin-top: 100%
		}

		article#top-right {
			width: 100%;
			height: 25%;
			margin-top: 0;
		}

		article#lower-right	{
			width: 100%;
			height: 25%;
			margin-top: 100%;
		}

			figure.red {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.purple {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.red {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.purple {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.blue {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.yellow {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.blue {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.yellow {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.red {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.purple {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.red {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.purple {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.blue {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.yellow {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.blue {
				width: 25%;
				height: 25%;
				float: left;
			}

			figure.yellow {
				width: 25%;
				height: 25%;
				float: left;
			}


/* CSS NAMED COLOR CLASSES */

.purple {
	background-color: #140066;
}

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

.blue {
	background-color: mediumturquoise;
}

	.blue:hover {
		background-color: #140066;
	}

.yellow {
	background-color: #edd300;
}

	.yellow:hover {
		background-color: #e02b50;
	}

.red {
	background-color: #e02b50;
}

	.red:hover {
		background-color: #edd300;
	}