.imagegrid {
	display: inline-block;
	overflow: hidden;
}
.imagegrid .content { 
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 100%; 
	height: 100%; 
	text-align: center; 
	z-index: 3; 
	background-color: rgba(52, 58, 67, .55);
	display: flex; 
	align-items: center;
  	justify-content: center;
}
.imagegrid .content .title { 
	font-size: 36px; 
	line-height: 42px; 
	color: #FFF;
	font-family: 'DanielBlack', sans-serif; 
	text-align: center; 
	margin: 0px auto; 
	padding: 0px 10px;
	text-transform: uppercase; 
}
.imagegrid .background img { width: 100%; display: block; }
.imagegrid .content.none { background-color: transparent; }
.imagegrid .content.yellow { background-color: rgba(255,242,0, .7); }
.imagegrid .content.green { background-color: rgba(0,124,135, .7); }
.imagegrid .content.lblue { background-color: rgba(0,174,239, .7); }
.imagegrid .content.pink { background-color: rgba(236,0,140, .7); }
.imagegrid .content.orange { background-color: rgba(227,111,30, .7); }
.imagegrid .content.red { background-color: rgba(161,6,51, .7); }
.imagegrid .content.gray { background-color: rgba(52, 58, 67, .55); }
.imagegrid .content:hover { background-color: transparent; }

@media only screen and (max-width: 90.063em) {
	.imagegrid .content .title {
	    font-size: 24px; 
		line-height: 36px; 
	}	
}
@media only screen and (max-width: 64.063em) {
	.imagegrid .content .title {
	    font-size: calc( 14px + ( 24 - 14 ) * ( 100vw - 420px ) / ( 1025 - 640 ) );
	    line-height: calc( 26px + ( 34 - 26 ) * ( 100vw - 420px ) / ( 1025 - 640 ) );
	}	
}
@media only screen and (max-width: 40.063em) {	
	.imagegrid .content .title {
	    padding: 0px 10px;
	}	
}