* {
	padding: 0;
	margin: 0;

}
main {
	width: 77vw;
	height: 56vw;
	background-color: #DCE3D7;
	margin: auto;
	margin-top: 0%;
	padding-top: 1%	;
	
}
	main:hover {
			background-color: #00EDFF;
		}

section {
	width: 97%;
	height: 97%;
	background-color: #EEE8D8;
	margin: auto;
	
}	
	section:hover {
			background-color: #D900FF;
		}
	

article {
	
	float: left;
}


figure {
	
	
	
	float: left;
}

/*

figure {
	width: 16.9%;
	height: 100%;
	margin: auto;
	margin-left: 6%;
	float: left;
}  */
/*
.white {
	background-color: #EEE8D8;

	margin-top: 125.4%;
	margin-left: 24.8%;
}
	.white:hover {
		background-color: #D900FF;
	}
*/
.black_1 {
	background-color: #262626;
	
	width: 11.8%;
	height: 100%;
	margin: auto;
	margin-left: 5%;
	
}
	.black_1:hover {
		background-color: #FFF203;
	}
	
.black_2 {
	background-color: #262626;
	
	width: 5%;
	height: 100%;
	margin: auto;
	
}
	.black_2:hover {
		background-color: #FFF203;
	}
	
.black_3 {
	background-color: #262626;
	
	width: 10%;
	height: 100%;
	margin: auto;
}
	.black_3:hover {
		background-color: #FFF203;
	}
	


.offwhite_1 {
	background-color: #EEE8D8;
	
	width: 40%;	
	height: 53.75%;
	margin-left: 60%;
	margin-top: 285%;
	
	
}
	.offwhite_1:hover {
		background-color: #D900FF;
	}
	
.offwhite_2 {
	background-color: #EEE8D8;
	
	width: 100%;	
	height: 46.25%;
	
	
}
	.offwhite_2:hover {
		background-color: #D900FF;
	}

.offwhite_3 {
	background-color: #EEE8D8;

	width: 80%;
	height: 12.5%;
	margin-top: 60%;
	margin-left: 50%;
}
	.offwhite_3:hover {
		background-color: #D900FF;
	}

.offwhite_4 {
	background-color: #EEE8D8;

	width: 80%;
	height: 12.5%;
	margin-top: 93%;
	margin-left: 50%;
}
	.offwhite_4:hover {
		background-color: #D900FF;
	}