* {
	margin: 0;
	padding: 0;
}

header#canvas {
	width: 74.5vw;
	height: 49.6vw;
	background-color: red;
	margin: 2vw auto;

}

section {

	width: 16.6666667%;
	height: 100%;
	float: left;
}

figure {

	height: 80%;
	width: 59.7%;
	margin-left: 20%;
	margin-top: 40%;
}

article {

	height: 97.3%;
	width: 16.5%;
	margin-top: 7%;
	margin-left: 6.7%;
	float: left;
	display: inline-block;
}
/* Color Classes */

.yellow{
	background-color: #F7FD39;
}

.red {
	background-color: #FF575B;
}

.black {
	background-color: #2B2D2C;
}

.green {
	background-color: #1ED85C;
}

.purple{
	background-color: #90508F;
}

.lightblue {
	background-color: #B0D0F8;
}

.turquoise {
	background-color: #27ACA8;
}

.blue {
	background-color: #192DB6;
}

.orange {
	background-color: #FCA325;
}

.pink {

background-color: #FB6588;

}

.white {
background-color: #FFEBF3;
}

.lightpurple {
background-color: #A583DA;
}

.skyblue {
	background-color: #BFEDFD;
}

/* Color Hover */

.yellow:hover {

	background-color: #FFEBF3;
}

.black:hover {
	background-color: #FCA325;

}

.red:hover {
	background-color: #90508F;
}

.green:hover {

	background-color: #F7FD39;
}

.purple:hover {

	background-color: #FB6588;
}

.lightblue:hover {
	background-color: #1ED85C;

}

.white:hover {
	background-color: #1ED85C;

}

.orange:hover {
	background-color: #B0D0F8;
}

.blue:hover {
	background-color: #FCA325;
}

.skyblue:hover {
	 background-color: #2B2D2C;
}

.turquoise:hover {
	background-color: #90508F;
}

.pink:hover {
	background-color: #F7FD39;
}