* {
	margin: 0;
	padding: 0;
}

#canvas {

	width: 88.5vw;
	height: 45.2vw;
	background-color: #D7CDBC;
	margin: 2vw auto;
}

section {

	width: 48.9%;
	height: 95.7%;
	float: left;
	margin-top: 1.1%;
	position: relative;
	left: 1%;
}

figure {
	width: 92%;
	height: 92%;
	float: left;
	margin-top: 4%;
	position: relative;
	left: 4%;
}

article {
	
	width: 90%;
	height: 90%;
	float: left;
	margin-top: 5%;
	position: relative;
	left: 5%;
}

aside {

	width: 90%;
	height: 90%;
	float: left;
	margin-top: 5%;
	position: relative;
	left: 5%;

}

.square {
	width: 88%;
	height: 88%;
	float: left;
	margin-top: 5.5%;
	position: relative;
	left: 6%;

}

.square1 {
	width: 85%;
	height: 85%;
	float: left;
	margin-top: 7.8%;
	position: relative;
	left: 7.3%;

}

.square2 {
	width: 84.5%;
	height: 84.5%;
	float: left;
	margin-top: 8%;
	position: relative;
	left: 7.3%;

}

.square3 {
	width: 82%;
	height: 82%;
	float: left;
	margin-top: 9.5%;
	position: relative;
	left: 9%;

}

.square4 {
	width: 78%;
	height: 78%;
	float: left;
	margin-top: 11%;
	position: relative;
	left: 11%;

}

.square5 {
	
	width: 70%;
	height: 70%;
	float: left;
	margin-top: 15%;
	position: relative;
	left: 15%;
}

.square6 {
	width: 65%;
	height: 65%;
	float: left;
	margin-top: 18%;
	position: relative;
	left: 18%;

}

.square7 {
	width: 35%;
	height: 35%;
	float: left;
	margin-top: 33%;
	position: relative;
	left: 33%;

}




/* COLOR CLASSES */
.darkred {

	background-color: #C62E34;
}

.grey {

	background-color: #EFEDEB;
}

.blue {

	background-color: #044793;
}

.purple {

	background-color: #6C386A;
}

.orange {
	background-color: #ED4717;
}

.lightblue {
	background-color: #78AFDD;
}

.blue2 {
	background-color: #0265BA;
}

.yellow {
	background-color: #FFBC02;
}

.lightblue2 {
	background-color: #2390D3;
}

.blue3 {
	background-color: #027BCB;
}

.green {

	background-color: #087347;
}

/* COLOR HOVER */

.darkred:hover {

	background-color: #EFEDEB;
}

.grey:hover {
	background-color: #C62E34;
}

.blue:hover {

	background-color: #6C386A;

}

.purple:hover {

	background-color: #044793;
}

.orange:hover {

	background-color: #78AFDD;
}

.lightblue:hover {

	background-color: #ED4717;
}

.blue2:hover {
	background-color: #044793;
}

.yellow:hover {
	background-color: #2390D3;
}

.blue3:hover {
	background-color: #087347;
}

.green:hover {
	background-color: #027BCB;	
}

.lightblue2:hover {
	background-color: #FFBC02;
}