@charset "UTF-8";
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-= THESE STYLES DESIGNED AND BUILT WITH LOVING CARE -=-=-=
=-=-=-=- ENTIRELY BY HAND JUST FOR YOU BY IAN BESLER -=-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

/* -=-=-=-=-=-=-=-=-=-=
-=-=-= CSS RESET =-=-=-
=-=-=-=-=-=-=-=-=-=- */

* {
	margin: 0;
	padding: 0;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= HTML5 SEMANTIC TAGS =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

main#canvas {
	width: 52.1vw;
	height: 52.1vw;
	margin: 1.85vw auto 0 auto;
}

	section {
		width: 100%;
	}

		article {
			height: 100%;
		}

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

				section#row-one article.hudson-yellow {
					width: 68.1%;
					float: left;
				}

				section#row-one article.black {
					width: 31.9%;
					float: left;
				}

			section#row-two {
				width: 100%;
				height: 5.8%;
			}

			section#row-three {
				height: 2.2%;
			}

				section#row-three article.hudson-cyan {
					width: 15.8%;
					float: left;
				}

				section#row-three article.hudson-yellow {
					width: 84.2%;
					float: left;
				}

			section#row-four {
				height: 14.5%;
			}

				section#row-four article.hudson-cyan {
					width: 68.1%;
					float: left;
				}

				section#row-four article.hudson-yellow {
					width: 31.9%;
					float: left;
				}

			section#row-five {
				height: 7%;
			}

				section#row-five article.hudson-red {
					width: 24.2%;
					float: left;
				}

				section#row-five article.white {
					width: 75.8%;
					float: left;
				}

			section#row-six {
				height: 23.4%;
			}

				section#row-six article.hudson-cyan {
					width: 68.1%;
					float: left;
				}

				section#row-six article.hudson-yellow {
					width: 31.9%;
					float: left;
				}

			section#row-seven {
				height: 24.5%;
			}

				section#row-seven article.black {
					width: 24.5%;
					float: left;
				}

				section#row-seven article.hudson-yellow {
					width: 75.5%;
					float: left;
				}

			section#row-eight {
				height: 2.2%;
			}

			section#row-nine {
				height: 14%;
			}

				section#row-nine article.hudson-cyan {
					width: 52%;
					float: left;
				}

				section#row-nine article.white {
					width: 48%;
					float: left;
				}

			section#row-ten {
				height: 2.4%;
			}

				section#row-ten article.hudson-cyan {
					width: 15.8%;
					float: left;
				}

				section#row-ten article.hudson-red {
					width: 84.2%;
					float: left;
				}


/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-= BRYCE HUDSON COLOR CLASSES -=-=-=
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

	.hudson-yellow {
		background-color: #f5ea14;
	}
	
	.hudson-cyan {
		background-color: #1293cc;
	}
	
	.hudson-red {
		background-color: #ec1f26;
	}


	.hudson-yellow:hover {
		background-color: #1293cc;
	}
	
	.hudson-cyan:hover {
		background-color: #f5ea14;
	}
	
	.hudson-red:hover {
		background-color: white;
	}

	.black:hover {
		background-color: #ec1f26;
	}

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