*{
	margin:0;
	padding:0;

}


header#canvas {
	width: 36.5vw;
	height: 35.998vw;
}

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%;
		}

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

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

article#row-seven{
	width: 87.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: 92%;
	height: 25.3%;
}


figure#section-yellow {
	display: inline-block;
	margin: -500% 187%;
	width: 183.5%;
	height: 66.2%;
}


figure#section-green {
	display: inline-block;
	margin: 269% 0%;
	width: 283%;
	height: 25.5%;
}

figure#section-orange {
	display: inline-block;
	margin: -2020% 365%;
	width: 347.5%;
	height: 92%;
}

figure#section-orange-another {
	display: inline-block;
	margin: -450% 470%;
	width: 460.5%;
	height: 25.333333%;
}

figure#section-green-another {
	display: inline-block;
	margin: -1045% 530%;
	width: 530%;
	height: 25.5%;
}

		figure#section-red-switch {
			display: inline-block;
			margin: -300% 270.5%;
			width: 92%;
			height: 73.8%;
		}

		figure#section-yellow-switch {
			display: inline-block;
			margin: -643% 370%;
			width: 200.5%;
			height: 85.2%;
		}

		figure#section-green-switch-smallone {
			display: inline-block;
			margin: -553% 840%;
			width: 65%;
			height: 6.5%;
		}

figure#section-green-switch-smalltwo {
	display: inline-block;
	margin: -1050% 1865%;
	width: 130%;
	height: 6.9%;
}

figure#section-green-switch-smallsub {
	display: inline-block;
	margin: -790% 1577%;
	width: 147.99999%;
	height: 6.9%;
}

figure#section-green-switch-smallthree{
	display: inline-block;
	margin: -920% 1590%;
	width: 128%;
	height: 6.2%;
}

figure#section-green-switch-smallfour{
	display: inline-block;
	margin: -910% 1867%;
	width: 130%;
	height: 6.1%;
}

figure#section-green-switch-smallfive{
	display: inline-block;
	margin: -780% 1867%;
	width: 130%;
	height: 6.9%;
}


figure#section-green-switch-smallsix{
	display: inline-block;
	margin: -660% 1867%;
	width: 130%;
	height: 6.9%;
}

figure#section-green-switch-smallseven{
	display: inline-block;
	margin: -650% 1580%;
	width: 140%;
	height: 6.9%;
}


figure#section-green-switch-smalleight{
	display: inline-block;
	margin: -920% 1715%;
	width: 146%;
	height: 6.5%;
}

figure#section-green-switch-nine{
	display: inline-block;
	margin: -920% 2000%;
	width: 146%;
	height: 6.5%;
}

figure#section-green-switch-ten{
	display: inline-block;
	margin: -655% 2000%;
	width: 146%;
	height: 6.9%;
}

figure#section-green-switch-eleven{
	display: inline-block;
	margin: -655% 2000%;
	width: 146%;
	height: 6.9%;
}

figure#section-green-switch-twelve{
	display: inline-block;
	margin: -660% 1720%;
	width: 160%;
	height: 6.9%;
}







/*small*/


		figure#section-orange-switch {
			display: inline-block;
			margin: -1066% 1080%;
			width: 375%;
			height: 25%;
		}


		figure#section-orange-switch-another {
			display: inline-block;
			margin: -450% 1395%;
			width: 480%;
			height: 25.3333%;
		}

		figure#section-green-switch-another {
			display: inline-block;
			margin: -1040% 1055%;
			width: 545%;
			height: 24.8%;
		}

figure#section-green-switch-another-one {
	display: inline-block;
	margin: -2100% 1600%;
	width: 539%;
	height: 27.8%;
}







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

/* CSS NAMED COLOR CLASSES */

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


.gold{
	background-color: gold;
}
	.gold: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;
	}