@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 =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

	body {
		background-color: white;
	}

	main#canvas {
		width: 28.8vw;
		height: 40.3vw;
		margin: 5.6vw auto 0 auto;
		padding-left: 0.1%;
	}

		section {
			width: 100%;
			height: 4.761904761904762%;
		}

			section article {
				height: 100%;
			}

			section#row-two article, section#row-twenty article {
				width: 6.6%;
				margin-left: 46.7%;
			}

			section#row-three article, section#row-nineteen article {
				width: 20%;
				margin-left: 40%;
			}

			section#row-four article, section#row-eighteen article {
				width: 33.3%;
				margin-left: 33.3%;
			}

			section#row-five article, section#row-seventeen article {
				width: 46.7%;
				margin-left: 26.7%;
			}

			section#row-six article, section#row-ten article, section#row-twelve article, section#row-sixteen article {
				width: 60%;
				margin-left: 20%;
			}

			section#row-seven article, section#row-nine article, section#row-thirteen article, section#row-fifteen article {
				width: 73.3%;
				margin-left: 13.3%;
			}

			section#row-eight article, section#row-fourteen article {
				width: 86.8%;
				margin-left: 6.5%;
			}

		aside {
			font-size: 0.8em;
			font-family: Arial, Helvetica, sans-serif;
			text-align: right;
			padding-top: 0.2em;
		}

/* COLOR CLASSES */

.purple-one, .blue-eleven:hover {
	background-color: #37297b;
}

.purple-two, .blue-ten:hover {
	background-color: #3a297f;
}

.purple-three, .blue-nine:hover {
	background-color: #4e3d88;
}

.purple-four, .blue-eight:hover {
	background-color: #5b458d;
}

.purple-five, .blue-seven:hover {
	background-color: #624d92;
}

.purple-six, .blue-six:hover {
	background-color: #6e599a;
}

.purple-seven, .blue-five:hover {
	background-color: #8269a3;
}

.purple-eight, .blue-four:hover {
	background-color: #9779a1;
}

.purple-nine, .blue-three:hover {
	background-color: #8269a3;
}

.purple-ten, .blue-two:hover {
	background-color: #6a5596;
}


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

.blue-two, .purple-ten:hover {
	background-color: #0863a5;
}

.blue-three, .purple-nine:hover {
	background-color: #1e70b0;
}

.blue-four, .purple-eight:hover {
	background-color: #2c7db9;
}

.blue-five, .purple-seven:hover {
	background-color: #2071b0;
}

.blue-six, .purple-six:hover {
	background-color: #0664a6;
}

.blue-seven, .purple-five:hover {
	background-color: #01579c;
}

.blue-eight, .purple-four:hover {
	background-color: #075197;
}

.blue-nine, .purple-three:hover {
	background-color: #154790;
}

.blue-ten, .purple-two:hover {
	background-color: #213e88;
}

.blue-eleven, .purple-one:hover {
	background-color: #253a84;
}


.red-one, .pink-nine:hover {
	background-color: #aa2b1b;
}

.red-two, .pink-eight:hover {
	background-color: #b62b1a;
}

.red-three, .pink-seven:hover {
	background-color: #c3291a;
}

.red-four, .pink-six:hover {
	background-color: #cf2619;
}

.red-five, .pink-five:hover {
	background-color: #da2618;
}

.red-six, .pink-four:hover {
	background-color: #e03517;
}

.red-seven, .pink-three:hover {
	background-color: #e24222;
}

.red-eight, .pink-two:hover {
	background-color: #e03517;
}

.red-nine, .pink-one:hover {
	background-color: #d3261b;
}


.pink-one, .red-nine:hover {
	background-color: #d8244e;
}

.pink-two, .red-eight:hover {
	background-color: #df2361;
}

.pink-three, .red-seven:hover {
	background-color: #e32374;
}

.pink-four, .red-six:hover {
	background-color: #e02363;
}

.pink-five, .red-five:hover {
	background-color: #da2551;
}

.pink-six, .red-four:hover {
	background-color: #d72549;
}

.pink-seven, .red-three:hover {
	background-color: #cf253d;
}

.pink-eight, .red-two:hover {
	background-color: #cb2536;
}

.pink-nine, .red-one:hover {
	background-color: #cb253e;
}