*{
	margin:0;
	padding:0;

}


header#canvas {
	width: 41.3vw;
	height: 48.8vw;
}

section{
	width: 100.666666%;
	height: 100%;
	float: left;
	/* float allows to stack next to each other*/
}


		article#row-one{
			width: 27.6%;
			height: 100%;
			margin-left:0%;
			margn-top:0%;
		}

		article#row-two{
			width: 47.6%;
			height: 100%;
			margin-left:0%;
			margn-top:0%;
		}

		article#row-three{
			width: 67.6%;
			height: 100%;
			margin-left:0%;
			margn-top:0%;
		}

		article#row-four{
			width: 77.6%;
			height: 100%;
			margin-left:0%;
			margn-top:0%;
		}



section.red {
	width: 30%;
	height: 42.9%;
	float: none;
	margin-left:0%;
	margn-top:0%;
}

section.yellow {
	width: 70%;
	height: 72.9%;
	float: none;
	margin-left:0%;
	margn-top:0%;
}


section.green {
	width: 60%;
	height: 42.9%;
	float: none;
	margin-left:0%;
	margn-top:0%;
}


section.orange {
	width: 70%;
	height: 72.9%;
	float: none;
	margin-left:0%;
	margn-top:0%;
}



figure#section-red {
	display: inline-block;
	margin: 0% -1%;
	width: 40%;
	height: 63%;
}


figure#section-yellow {
	display: inline-block;
	margin: -700% 0%;
	width: 170%;
	height: 87.5%;
}


figure#section-green {
	display: inline-block;
	margin: -963% 0%;
	width: 381%;
	height: 91%;
}

figure#section-orange {
	display: inline-block;
	margin: -1076% 0%;
	width: 650%;
	height: 91%;
}

		figure#section-red-switch {
			display: inline-block;
			margin: -300% 321.5%;
			width: 41%;
			height: 73%;
		}

		figure#section-yellow-switch {
			display: inline-block;
			margin: -663% 595%;
			width: 166.5%;
			height: 83.5%;
		}

		figure#section-green-switch {
			display: inline-block;
			margin: -963% 745%;
			width: 382%;
			height: 91%;
		}

		figure#section-orange-switch {
			display: inline-block;
			margin: -1076% 810%;
			width: 643%;
			height: 91%;
		}






figure{
	width: 15%;
	height: 97%;
	float: left;
	margin-left: 8%;
	margin-top: 10%;
}

/* CSS NAMED COLOR CLASSES */

/* talking to classes with dot(.)*/


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

.orangered{
	background-color: orangered;
}

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

.yellow{
	background-color: yellow;
}

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

.limegreen{
	background-color: limegreen;
}

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

.cyan{
	background-color: blue;
}

	.cyan:hover{
		background-color: cyan;
	}

.green{
	background-color: lawngreen;
}

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

.pink{
	background-color: peachpuff;
}

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

.blue{
	background-color: blue;
}

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

.midnightblue{
	background-color: midnightblue;
}

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

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

.black{
	background-color: black;
}

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