/*  \ \ \ \ \ \ \ \ \| |\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \| |\ \ \ \ \ \ \ \ \ 
/ / / / / / / / / | | / / / / / / __  / / / / / / / / | | / / / / / / / / /
 \ \ \ \ \ \ \ \ \| |\ \ \ \ \   /..\  ` ` \ \ \ \ \ \| |\ \ \ \ \ \ \ \ \ 
------------------' `---------- (    ) \|/ -----------' `------------------
 ,------------------------- _\___>  <__//` ------------------------------. 
 |/ / / / / / / / / / / / / >,---.   ,-'  / / / / / / / / / / / / / / / /| 
 | \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |  . \  \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ | 
 |/ / / / / / / / / / / / / / /  `. `. \   ., / / / / / / / / / / / / / /| 
 | \ \ \ \ \ \ \ \ \ \ \ \ \ \ \  |  `. | \||_ \ \ \ \ \ \ \ \ \ \ \ \ \ | 
 |/ / / / / / / / / / / / / / / / `.  : |__||   / / / / / / / / / / / / /| 
 | \ \ \ \ \ \ \ \ \ \ \ \ \ \ \  __> `.,---'  \ \ \ \ \ \ \ \ \ \ \ \ \ | 
 |/ / / / / / / / / / / / / / /  |.--'\`.\  / / / / / / / / / / / / / / /| 
 `------------------------------ _\\   \`.| -----------------------------' 
------------------. ,------------ /|\ - |:| ----------. ,------------------
 \ \ \ \ \ \ \ \ \| |\ \ \ \ \ \ ' `    |:|  \ \ \ \ \| |\ \ \ \ \ \ \ \ \ 
/ / / / / / / / / | | / / / / / / / / / |:| / / / / / | | / / / / / / / / /
 \ \ \ \ \ \ \ \ \| |\ \ \ \ \ \ \ \ \  |:/  \ \ \ \ \| |\ \ \ \ \ \ \ \ \ 
/ / / / / / / / / | | / /  --.________,-_/  / / / / / | | / / / / / / / / /
 \ \ \ \ \ \ \ \ \| |\ \ \ \ \ ```-----' \ \ \ \ \ \ \| |\ \ \ \ \ \ \ \ \ 
/ / / / / / / / / | | / / / / / / / / / / / / / / / / | | / / / / / / / */
@charset "UTF-8";

/* CSS RESET */

	* {
		margin: 0;
		padding: 0;
		color: #000;
		text-align: center;
	}

/* CANVAS */

	main#canvas {
		width: 44.55vw;
		height: 44.452vw;
		margin: 5vw auto 0 auto;   
	}

/* ARTIST CREDIT */

	section#artist {
		margin: 0.5vw auto 0 auto;  
		font-size: 16pt;
		text-align: center;
		
	}

/* HTML5 SEMANTIC TAGS */

	section#quad1 {
		width: 50%;
		height: 50%;
	}

	section#quad2 {
		width: 50%;
		height: 50%;
	}

	section#quad3 {
		width: 50%;
		height: 50%;
	}

	section#quad4 {
		width: 50%;
		height: 50%;
	}

    article {
    	width: 89.3%;
    	height: 56%;
     }

    figure {
    	width: 81%;
    	height: 49%;
     }

    figcaption {
     	width: 62%;
    	height: 39%;
     }

 	.left {
		float: left;  
    }

    .right {
		float: right;  
    }

    .bottom1 {
    	margin-top: 44%;
    }

    .bottom2 {
    	margin-top: 31.85%;
    }

    .bottom3 {
    	margin-top: 23.2%;
    }

    .top {
    	margin-top: 0%;
    }

/*  CSS COLOR CLASSES and HOVER PSEUDO-CLASS INTERACTIONS  */

	.blue {
		background-color: #349eda;
	}
		.blue:hover {
			background-color: #7dc7f0;
		}

	.green {
		background-color: #61a946;
	}
		.green:hover {
			background-color: #8ecc76;
		}

	.dkblue {
		background-color: #2b559f;
	}
		.dkblue:hover {
			background-color: #5c87d3;
		}

	.purple {
		background-color: #535296;
	}
		.purple:hover {
			background-color: #6e6ce0;
		}

	.yellow {
		background-color: #fbe619;
	}
		.yellow:hover {
			background-color: #c4b205;
		}

	.red {
		background-color: #c63323;
	}
		.red:hover {
			background-color: #9e1d0f;
		}

	.orange {
		background-color: #e39f20;
	}
		.orange:hover {
			background-color: #b87a05;
		}

	.magenta {
		background-color: #bb317e;
	}
		.magenta:hover {
			background-color: #d466a4;
		}