*{
	margin: 0;
	padding: 0;
	}

header#canvas {
	width: 52.15vw;
	height: 52.15vw;
	margin: 2vw auto 0 auto ;

}

section, article {
	float: left;
}


	article#row-one{
		width: 27.5%;
		height: 100%;
	}
		section.red {
			width: 100%;
			height:64%;
			float: none;
		}

			figure#section-red {
				display: inline-block;
				margin: 28% 21%;
				width: 58%;
				height: 76%;
			}

			figcaption#red-section {
				margin-top: 6%;
				margin-left: 5%;
				width: 18.4%;
				height: 96%;
				float: left;
			}

	


		section.yellow {
			width: 44.8%;
			height:36%;
		}

		figure.black {
			display: inline-block;
				margin: 13.8% 16.8%;
				width: 67.5%;
				height: 65%;

		}
		figcaption#yellow-section {
			margin-top: 9.5%;
			margin-bottom: 18%;
			margin-right: 4%;

				
				width: 20.75%;
				height: 79%;
				float: left
				}
		

		section.blue {
			width: 27.5%;
			height:36%;
		}
			figure.red {
				margin: 25% 20%;
				width: 62%;
				height: 61%;

			}

				figcaption.white {
					margin-top: 6%;
					margin-left: 5.5%;
					width: 18%;
					height: 92%;
					float: left
					}

		article#row-two {
			width: 72.5%;
			height: 28%;
		
		}

		section.orange {
			width:  50.3%;
			height:100%;
		}
		figure#section-orange {
			display: inline-block;
			margin: 15% 10%;
			width: 80%;
			height: 66%;
		}

		figcaption#orange-section {
			margin-top: 6%;
				margin-left: 5%;
				width: 18.4%;
				height: 80%;
				float: left
		}


		article#rowfive{
			width: 50%
			height:60%;
		}
		section.cyan {
			width: 235%;
			height: 36%;
			
		}

			figure.purple {
				margin: 10.5% 13.2%;
				width: 73.5%;
				height: 63%;
			}

				figcaption.orange {
					margin-top: 2.5%;
					margin-left: 2.5%;
					width: 21.9%;
					height: 90%;
					float: left;

				}




		section.black {
			width: 49.7%;
			height:229%;
		}

		figure.yellow {
			
				
				margin: 24.5% 19.5%;
				width: 61.5%;
				height: 72.8%;
			}

			figcaption.red {
				margin-top: 5%;
				margin-left: 5.5%;
				width: 18%;
				height: 95%;
				float: left;
			}




/*CSS COLOR CLASSES */


.gray {
	background-color:  gray; 
}
.indigo {
	background-color: indigo;
}

.red {
	background-color:  red; 
}
.pink {
	background-color:  pink; 
}
.orange {
	background-color:  orange; 
}
.blue {
	background-color: blue;
}
.yellow {
	background-color:  yellow; 
}
.green  {
	background-color:  green; 
}
.cyan{
	background-color:  cyan; 
}
.black {
	background-color:  black; 
}
.white {
	background-color: white;
}

.purple {
		background-color: purple;
}

/* CSS COLOR CLASS HOVER STATES */

.gray {
	background-color:  gray; 
}

.red:hover {
	background-color:  white; 
}
.pink:hover {
	background-color:  red; 
}
.orange:hover {
	background-color:  pink; 
}
.blue:hover {
	background-color: cyan;
}
.yellow:hover {
	background-color:  orange; 
}
.green:hover  {
	background-color:  yellow; 
}
.cyan:hover{
	background-color:  limegreen; 
}
.black:hover {
	background-color:  purple; 
}
.indigo {
	background-color: blue;
}

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

.purple {
		background-color: blue;
}







h1 {font-family: "Avenir";
 	color: pink;
 	font-size: 24pt;
 	text-align: center;
}