/* CSS RESET */

	* {
		margin: 0;
		padding: 0;
	}

/* HTML BODY */

	html {
		width: 100%;
		height: 100%;
	}

	body {
		width: 100%;
		height: 90%;
	}

/* CANVAS */

	body header#canvas {
		width: 100vw;
		height: 50vw;
		margin: 0vw auto 0 auto;
	}

/* SEMANTIC TAGS */

	body header#canvas section#left {
		width: 49.2%;
		height: 100%;
		float: left;
	}

		body header#canvas section#left article {
			float: left;
			border: rgba(160,160,160,0.85) 0.10vw solid;
		}

			body header#canvas section#left article#one {
				width:	99.6%;
				height:	99.6%;
			}

				body header#canvas section#left article#two {
					width:	92%;
					height:	91.6%;
					margin-top:		4.5%;
					margin-left:	3.4%;
				}

					body header#canvas section#left article#three {
						width:	90.6%;
						height:	90.6%;
						margin-top:		4.5%;
						margin-left:	4.6%;
					}

						body header#canvas section#left article#four {
							width:	89.8%;
							height:	89.6%;
							margin-top:		4.8%;
							margin-left:	4.8%;
						}

							body header#canvas section#left article#five {
								width:	88.4%;
								height:	88%;
								margin-top:		5.6%;
								margin-left:	5.2%;
							}

								body header#canvas section#left article#six {
									width:	86.8%;
									height:	86.8%;
									margin-top:		6.4%;
									margin-left:	6.4%;
								}

									body header#canvas section#left article#seven {
										width:	84.4%;
										height:	84.4%;
										margin-top:		7.4%;
										margin-left:	7.4%;
									}

										body header#canvas section#left article#eight {
											width:	81.6%;
											height:	81.6%;
											margin-top:		8.6%;
											margin-left:	8.6%;
										}

											body header#canvas section#left article#nine {
												width:	77.2%;
												height:	77.2%;
												margin-top:		11%;
												margin-left:	11%;
											}

												body header#canvas section#left article#ten {
													width:	72%;
													height:	71.6%;
													margin-top:		13.6%;
													margin-left:	13.6%;
												}

													body header#canvas section#left article#eleven {
														width:	59%;
														height:	59%;
														margin-top:		18.6%;
														margin-left:	18.6%;
													}

														body header#canvas section#left article#twelve {
															width:	33%;
															height:	33%;
															margin-top:		31.4%;
															margin-left:	31.4%;
														}

	body header#canvas section#right {
		width: 50.8%;
		height: 100%;
		float: left;
	}

		body header#canvas section#right article {
			float: left;
			border: rgba(160,160,160,0.85) 0.10vw solid;
		}

			body header#canvas section#right article#thirteen {
				width:	99.6%;
				height:	99.6%;
			}

				body header#canvas section#right article#fourteen {
					width:	92%;
					height:	91.6%;
					margin-top:		4.5%;
					margin-left:	3.4%;
				}

					body header#canvas section#right article#fifteen {
						width:	90.6%;
						height:	90.6%;
						margin-top:		4.5%;
						margin-left:	4.6%;
					}

						body header#canvas section#right article#sixteen {
							width:	89.8%;
							height:	89.6%;
							margin-top:		4.8%;
							margin-left:	4.8%;
						}

							body header#canvas section#right article#seventeen {
								width:	88.4%;
								height:	88%;
								margin-top:		5.6%;
								margin-left:	5.2%;
							}

								body header#canvas section#right article#eighteen {
									width:	86.8%;
									height:	86.8%;
									margin-top:		6.4%;
									margin-left:	6.4%;
								}

									body header#canvas section#right article#nineteen {
										width:	84.4%;
										height:	84.4%;
										margin-top:		7.4%;
										margin-left:	7.4%;
									}

										body header#canvas section#right article#twenty {
											width:	81.6%;
											height:	81.6%;
											margin-top:		8.6%;
											margin-left:	8.6%;
										}

											body header#canvas section#right article#twenty-one {
												width:	77.2%;
												height:	77.2%;
												margin-top:		11%;
												margin-left:	11%;
											}

												body header#canvas section#right article#twenty-two {
													width:	72%;
													height:	71.6%;
													margin-top:		13.6%;
													margin-left:	13.6%;
												}

													body header#canvas section#right article#twenty-three {
														width:	59%;
														height:	59%;
														margin-top:		18.6%;
														margin-left:	18.6%;
													}

														body header#canvas section#right article#twenty-four {
															width:	33%;
															height:	33%;
															margin-top:		31.4%;
															margin-left:	31.4%;
														}

/* HOVER STATE COLOR CHANGES */

	body header#canvas section#left article#one.red-one:hover {
		background-color: #eeefe1;
	}

		body header#canvas section#left article#two.blue-one:hover {
			background-color: #753a7a;
		}

			body header#canvas section#left article#three.orange-one:hover	{
				background-color: #7cafda;
			}

				body header#canvas section#left article#four.blue-two:hover	{
					background-color: #024697;
				}

					body header#canvas section#left article#five.yellow-one:hover {
						background-color: #1f92d5;
					}
			
						body header#canvas section#left article#six.blue-three:hover {
							background-color: #00734c;
						}

							body header#canvas section#left article#seven.green-one:hover {
								background-color: #0078bf;
							}

								body header#canvas section#left article#eight.blue-four:hover {
									background-color: #fdb900;
								}

									body header#canvas section#left article#nine.blue-five:hover {
										background-color: #00629d;
									}

										body header#canvas section#left article#ten.blue-six:hover {
											background-color: #eb4616;
										}

											body header#canvas section#left article#eleven.purple-one:hover {
												background-color: #004191;
											}

												body header#canvas section#left article#twelve.white-one:hover {
													background-color: #bc1f28;
												}

	body header#canvas section#right article#thirteen.gray-one:hover {
		background-color: #c22b30;
	}

		body header#canvas section#right article#fourteen.purple-two:hover {
			background-color: #004795;
		}

			body header#canvas section#right article#fiteen.blue-seven:hover {
				background-color: #f9bc02;
			}

				body header#canvas section#right article#sixteen.blue-eight:hover {
					background-color: #0062ad;
				}

					body header#canvas section#right article#seventeen.blue-nine:hover {
						background-color: #f9bc02;
					}

						body header#canvas section#right article#eighteen.green-two:hover {
							background-color: #0677c5;
						}

							body header#canvas section#right article#nineteen.blue-ten:hover {
								background-color: #027c53;
							}

								body header#canvas section#right article#twenty.yellow-two:hover {
									background-color: #1d95d2;
								}

									body header#canvas section#right article#twenty-one.blue-eleven:hover {
										background-color: #004391;
									}

										body header#canvas section#right article#twenty-two.orange-two:hover {
											background-color: #74a9df;
										}

											body header#canvas section#right article#twenty-three.blue-twelve:hover {
												background-color: #6e3770;
											}

												body header#canvas section#right article#twenty-four.orange-three:hover {
													background-color: #efe6e1;
												}

/* COLOR CLASSES */

.red-one {
	background-color: #c22b30;
	}

.blue-one {
	background-color: #004795;
}

.orange-one {
	background-color: #f34417;
}

.blue-two {
	background-color: #0062ad;
}

.yellow-one {
	background-color: #f9bc02;
}
			
.blue-three {
	background-color: #0677c5;
}

.green-one {
	background-color: #027c53;
}

.blue-four {
	background-color: #1d95d2;
}

.blue-five {
	background-color: #004391;
}

.blue-six {
	background-color: #74a9df;
}

.purple-one {
	background-color: #6e3770;
}

.white-one {
	background-color: #efe6e1;
}

.gray-one {
	background-color: #eeefe1;
}

.purple-two {
	background-color: #753a7a;
}

.blue-seven {
	background-color: #7cafda;
}

.blue-eight {
	background-color: #024697;
}

.blue-nine {
	background-color: #1f92d5;
}

.green-two {
	background-color: #00734c;
}

.blue-ten {
	background-color: #0078bf;
}

.yellow-two {
	background-color: #fdb900;
}

.blue-eleven {
	background-color: #00629d;
}

.orange-two {
	background-color: #eb4616;
}

.blue-twelve {
	background-color: #004191;
}

.orange-three {
	background-color: #bc1f28;
}