.imagegrid {}
.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); }
.imagegrid .content .icon { margin-bottom: 10px; margin-top: 23%;}
.imagegrid .content .title { font-size: 48px; line-height: 48px; color: #FFF; font-family: 'TradeGothicLTCom Bold Condensed', sans-serif; text-align: center; margin: 0px auto; max-width: 240px; text-transform: uppercase; }
.imagegrid .background img { width: 100%; display: block; }

.imagegrid .content.none { background-color: transparent; }
.imagegrid .content.blue { background-color: rgba(52, 58, 67, .55); }
.imagegrid .content.teal { background-color: rgba(35, 102, 109, .55); }
.imagegrid .content.purple { background-color: rgba(66, 76, 123, .55); }
.imagegrid .content.yellow { background-color: rgba(78, 103, 47, .55); }
.imagegrid .content:hover { background-color: transparent; }

@media only screen and (max-width: 64.063em) {
	.imagegrid .content .title {
	    font-size: calc(26px + (48-26)*(100vw - 640px) / (1025-640));
	    line-height: calc(24px + (48-24)*(100vw - 640px) / (1025-640));
	}	
	.imagegrid .content .icon { 
		margin-bottom: 5px; 
		margin-top: 15%;
	}
}

@media only screen and (max-width: 40.063em) {	
	.imagegrid .content .title {
	    font-size: calc(30px + (48-30)*(100vw - 320px) / (640-320));
	    line-height: calc(28px + (48-28)*(100vw - 320px) / (640-320));
	}	
	.imagegrid .content .icon { 
		margin-bottom: 10px; 
		margin-top: 23%; 
	}
}