@charset "UTF-8";
/* CSS Document */

/*-- 
    ____.              _______   
    |    | _________    \      \  
    |    |/  _ \__  \   /   |   \ 
/\__|    (  <_> ) __ \_/    |    \
\________|\____(____  /\____|__  /*/



* {
		margin: 0;
		padding: 0;
		color: #000;
	}

header#canvas {
		width: 68.6vw;
		height: 45.65vw;
		margin: 5.6vh auto 0 auto;
	}

	figcaption {
		width: 68.6vw;
		margin: 0.5vw auto 0 auto;
		font-size: 12pt;
		text-align: right;
		font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, 'serif'Helvetica, Arial, sans-serif;
	}

/*; HTML5 SEMANTIC TAGS ;*/

	section {
		width: 16.66666666666667%;
		height: 100%;
		float: left;
	}

		article {
			width: 60%;
			height: 80.2%;
			margin-top: 40%;
			margin-left: 20%;
		}

			figure {
				width: 17%;
				height: 97.8%;
				margin-top: 5.5%;
				margin-left: 6.4%;
				float: left;
			}

/*; CSS COLOR CLASSES ;*/

	.yellow {
		background-color: yellow;
	}

	.black {
		background-color: black;
	}

	.tomato {
		background-color: tomato;
	}

	.limegreen {
		background-color: limegreen;
	}

	.darkorchid {
		background-color: darkorchid;
	}

	.powderblue {
		background-color: powderblue;
	}

	.darkcyan {
		background-color: darkcyan;
	}

	.blue {
		background-color: blue;
	}

	.orange {
		background-color: orange;
	}

	.peachpuff {
		background-color: peachpuff;
	}

/*;HOVER;*/

	.yellow:hover {
		background-color: tomato;
	}

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

	.tomato:hover {
		background-color: yellow;
	}

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

	.darkorchid:hover {
		background-color: darkcyan;
	}

	.powderblue:hover {
		background-color: blue;
	}

	.darkcyan:hover {
		background-color: darkorchid;
	}

	.blue:hover {
		background-color: powderblue;
	}

	.orange:hover {
		background-color: peachpuff;
	}

	.peachpuff:hover {
		background-color: orange;
	}