* {
	margin: 0
	padding: 0;
}

header {
	font-size: 0;
}

main {
	margin: 4.3vw auto 0 auto;
	width: 45.6vw;
	height: 45.6vw;
}

	section#row-one {
		height: 3.333333333333333%;
	}

		article {
			float: left;
			height: 100%;
		}

			.width-two-nine {
				width: 2.9%;
			}

			.width-three-five {
				width: 3.5%;
			}

			.width-four-nine {
				width: 4.9%;
			}

			.width-five {
				width: 5%;
			}

			.width-five-three {
				width: 5.3%;
			}

			.width-six-six {
				width: 6.6%;
			}

			.width-six-eight {
				width: 6.8%;
			}

			.width-seven-three {
				width: 7.3%;
			}

			.width-seven-five {
				width: 7.5%;
			}

			.width-seven-six {
				width: 7.6%;
			}

			.width-seven-eight {
				width: 7.8%;
			}

			.width-eight-nine {
				width: 8.9%;
			}

			.width-ten-five {
				width: 10.5%;
			}

			.width-ten-six {
				width: 10.6%;
			}

			.width-ten-eight {
				width: 10.8%;
			}

.red {
	background-color: #e31f25;
}

	.red:hover {
		background-color: #fdc013;
	}
	
.green {
	background-color: #59ac45;
}

	.green:hover {
		background-color: #8a568c;
	}
	
.orange {
	background-color: #ee502e;
}
	
	.orange:hover {
		background-color: #5783af;
	}

	
.cyan {
	background-color: #5783af;
}

	
	.cyan:hover {
		background-color: #ee502e;
	}

	
.purple {
	background-color: #8a568c;
}

	
	.purple:hover {
		background-color: #59ac45;
	}

	
.yellow {
	background-color: #fdc013;
}

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