* {
	margin: 0;
	padding:0;
}


header.canvas {
	width: 41.5vw;
	height: 42.5vw;
	margin: 5vh auto 5vh auto;
	background-color: red;
}
	figcaption {
		font-size: 12pt;
		font-family: "Helvetica", serif;
		margin: 5vh auto 5vh auto;
	}

section.yellowgreen-1 {
	width: 39.5%;
	height: 28.25%;
	background-color: yellowgreen;
	float: left;
}


section.navy-1 {
	width: 39.5%;
	height: 28.25%;
	background-color: navy;
	float: left;
}



section.deeppink-1 {
	width: 21%;
	height: 21%;
	background-color: deeppink;
	float: left;
}

	

section.red-1 {
	width: 21%;
	height: 21%;
	background-color: red;
	float: right;
}



section.navy-2 {
	width: 25%;
	height: 36%;
	background-color: navy;
	float: left;
}

	

section.red-2 {
	width: 29%;
	height: 36%;
	background-color: red;
	float: left;
}



section.greenyellow-2 {
	width: 25%;
	height: 21.5%;
	background-color: greenyellow ;
	float: left;
}



section.navy-3 {
	width: 21%;
    height: 28.25%;
    background-color: navy;
    float: right;
}



section.yellow-1 {
	width: 30%;
	height: 35.75%;
	background-color: yellow;
	float: left;
}



section.yellowgreen-3 {
	width: 23.94%;
	height: 35.75%;
	background-color: yellowgreen;
	float: left;
}



section.deeppink-2 {
	width: 25%;
	background-color: deeppink;
	margin-left: 54%;
    padding-top: 65.8%;
    width: 25%;
    height: 6%;
}

/*hover*/ 


section.yellowgreen-1:hover {
	width: 39.5%;
	height: 28.25%;
	background-color: green;
	float: left;
}


section.navy-1:hover {
	width: 39.5%;
	height: 28.25%;
	background-color: red;
	float: left;
}



section.deeppink-1:hover {
	width: 21%;
	height: 21%;
	background-color: red;
	float: left;
}

	

section.red-1:hover {
	width: 21%;
	height: 21%;
	background-color: yellow;
	float: right;
}



section.navy-2:hover {
	width: 25%;
	height: 36%;
	background-color: greenyellow;
	float: left;
}

	

section.red-2:hover {
	width: 29%;
	height: 36%;
	background-color: deeppink;
	float: left;
}



section.greenyellow-2:hover {
	width: 25%;
	height: 21.5%;
	background-color: navy ;
	float: left;
}



section.navy-3:hover {
	width: 21%;
    height: 28.25%;
    background-color: yellowgreen;
    float: right;
}



section.yellow-1:hover {
	width: 30%;
	height: 35.75%;
	background-color: deeppink;
	float: left;
}



section.yellowgreen-3:hover {
	width: 23.94%;
	height: 35.75%;
	background-color: greenyellow;
	float: left;
}



section.deeppink-2:hover {
	width: 25%;
	background-color: yellow;
	margin-left: 54%;
    padding-top: 65.8%;
    width: 25%;
    height: 6%;
}

header.canvas:hover {
	width: 41.5vw;
	height: 42.5vw;
	margin: 5vh auto 5vh auto;
	background-color: navy;
}