* {
	paddind: 0;
	margin: 0;
	
}


figcaption {
	float: left;
}

header#canvas {
	width: 35.5vw;
	height: 35.5vw;
	background-color: #0094d0;
	margin: 19.3vh auto;
}
section.yellow {
	width:100%;
	height:82%;
}

figure.black {
	margin-left: 68.5%;
	width:31.5%;
	height:5%;
}
figure.blue-one {
	width:100%;
	height:7%;
}
figure.blue-two {
	width:15.5%;
	height:2.7%;
}
figure.blue-three {
	width:68.5%;
	height:55%;
}
figcaption.white {
	display: inline-block;
	margin-top:-10.5%;
	margin-left: 35%;
	width:111%;
	height:16%;
}
figcaption.red {
	
	margin-top: 21%;
	width:35%;
	height:16%;
}
figure.black-two {
	display: inline-block;
	width: 24.5%;
	height:30.5%;
}
section.white-two {
	margin-left: 52%;
	margin-top: 2%;
	width: 48%;
	height:14%;
}
section.red-two {
	margin-left: 15%;
	
	width: 85%;
	height:2%;
}

/* css color classes */
.blue {
	background-color: #0094d0
}
.blue-one {
	background-color: #0094d0
}
.blue-two {
	background-color: #0094d0
}
.blue-three {
	background-color: #0094d0
}
.yellow  {
	background-color: #f1e902;
}
.black {
	background-color: #000000;
}
.black-two {
	background-color: #000000;
}
.red {
	background-color: #ed1c24;
}
.red-two {
	background-color: #ed1c24;
}
.white {
	background-color: #ffffff;
}
.white-two {
	background-color: #ffffff;
}


/* css color class hover states */



.blue:hover {
	background-color: #f40b37;
}
.blue-one:hover {
	background-color: #0ba1f4;
}
.blue-two:hover {
	background-color: #d20bf4;
}
.blue-three:hover {
	background-color: #0bf796;
}
.yellow:hover  {
	background-color: #0ba1f4;
}
.black:hover {
	background-color: #d20bf4;
}
.black-two:hover {
	background-color: #0bf796;
}
.red:hover {
	background-color: #0ba1f4;
}
.red-two:hover {
	background-color: #d20bf4;
}
.white:hover {
	background-color: #0bf796;
}
.white-two:hover {
	background-color: #0ba1f4;
}