@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: 37vw;
		height: 50.2vw;
		margin: 2.8vw auto 0 auto;
	}

		section {
			width: 97.8%;
			height: 95.8%;
			margin: 1.5% 0 0 1.2%;
			display: inline-block;
		}

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

				article figure:nth-child(1) {
					width: 100%;
					height: 4.7%;
				}

				article figure:nth-child(2) {
					width: 100%;
					height: 6.3%;
				}

					article figure figcaption {
						height: 100%;
						width: 25%;
						float: left;
					}

						article#column-one figure:nth-child(2) figcaption:nth-child(1) {
							width: 25%;
						}

						article#column-one figure:nth-child(2) figcaption:nth-child(2) {
							width: 75%;
						}

						article#column-two figure:nth-child(2) figcaption {
							width: 100%;
						}

						article#column-one figure:nth-child(4) figcaption {
							width: 100%;
							height: 3.5%;
							margin-top: 23.3%;
						}

						article#column-two figure:nth-child(3) {
							width: 100%;
							height: 33%;
						}

							article#column-two figure:nth-child(3) figcaption {
								width: 100%;
								height: 4.8%;
								margin-top: 23.8%;
							}

						article#column-two figure:nth-child(4) {
							width: 100%;
							height: 15.9%;
						}

							article#column-two figure:nth-child(4) figcaption {
								width: 100%;
								height: 20%;
								margin-bottom: 49%;
							}

								article#column-two figure:nth-child(4) figcaption:last-child {
									margin-bottom: 0%;
								}

						article#column-two figure:nth-child(5) {
							width: 100%;
							height: 30%;
						}

							article#column-two figure:nth-child(5) figcaption {
								width: 100%;
								height: 5%;
								margin-bottom: 50%;
							}


				article#column-one figure:nth-child(3) {
					width: 100%;
					height: 39.4%;
				}

				article#column-one figure:nth-child(4) {
					width: 100%;
					height: 47.4%;
				}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= COLOR PALETTE CLASSES =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

	.albers-white {
		background-color: #e3e1e3;
	}

	.albers-lightgray {
		background-color: #d4d3d3;
	}

	.albers-black {
		background-color: #2c292a;
	}

	.albers-gray {
		background-color: #b5b6bb;
	}

	.albers-darkgray {
		background-color: #86878d;
	}

	.albers-red {
		background-color: #c92532;
	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-= PSEUDOCLASSS COLOR PALETTE CLASSES =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

	.albers-white:hover {
		background-color: #b4b5ba;
	}

	.albers-lightgray:hover {
		background-color: #e3e1e3;
	}

	.albers-black:hover {
		background-color: #b5b6bb;
	}

	.albers-gray:hover {
		background-color: #2c292a;
	}

	.albers-darkgray:hover {
		background-color: #c92532;
	}

	.albers-red:hover {
		background-color: #70737b;
	}