*{
   margin: 0;
   padding: 0;
}

header#canvas {
	width:29.8vw;
	height:33.3vw ;
	margin-left:34vw;
	margin-top: 5vw;
}

section.red {
	width: 29.8vw;
	height: 15vw;
	
}

section.black {
	width: 22.5vw;
	height: 15vw;

}

section.black {
	margin-left: 3.6vw;
}

article#block-one {
   margin-right: 2.5vw;
   margin-top: 3.3vw;
	display: inline-block;
	position: absolute;
}

figure.red {
	display: inline-block;
	width: 14.8vw ;
	height:7.4vw ;
	margin-top:4vw ;
	margin-left: 3.8vw;
}

figcaption#yellow-line {
	width:13.9vw;
	height:1.23vw;
	margin-left: .44vw;
	margin-top: .515vw;
}

figcaption.yellow {
	margin-top:;
	margin-bottom:.22vw;
}

figure.orange{
	display: inline-block;
	width: 18.5vw ;
	height:7.5vw ;
	margin-top:3.9vw ;
	margin-left: 5.48vw;
}

figcaption#blue-line {
	width:17.5vw;
	height:1.23vw;
	margin-left: .58vw;
	margin-top: .515vw;
}
/*CSS COLOR*/


.yellow{
	background-color: yellow;

}


.black{
	background-color: black;
}


.red{
	background-color: firebrick;
}

.orange{
	background-color: orange;
}

.blue{
	background-color: royalblue;
}



.yellow:hover{
	background-color:mediumorchid;

}


.black:hover{
	background-color: lawngreen;
}


.red:hover{
	background-color: lightgreen;
}

.orange:hover{
	background-color: mediumseagreen;
}

.blue:hover{
	background-color: darkorange;
}