#topbanner {
	padding:	25% 0 0 0;
}

#tools {
	padding:		1em 0 1em 0;
	background:		#373737;
}
#tools .title-primary {
	margin-top: 	.5em;
	padding-bottom: 0;
	font-size:		2em;
	font-weight: 	200;
}
#tools p {
	padding-bottom: 1em;
}

#tools .grid-wrapper {
	margin-top: 	2em;
}
#tools .grid-item {
	margin-bottom: 	1em;
	width: 			100%;
	text-decoration: none;
	background: 	#222;
}
#tools .grid-thumb {
	padding-top:			55%;
	background-position: 	0 0;
	background-repeat: 		no-repeat;
	background-size: 		100% auto;
}
#tools .grid-text {
	padding:		1em;
	text-align:		left;
}
#tools .grid-text h4 {
	font-size:		1.3em;
	padding:		0 0 .3em 0;
}
#tools .grid-text p {
	padding-bottom:	.5em;
	font-size:		.8em;
	line-height: 	1.4em;
}


@media (min-width: 45em){
	#tools .grid-item {
		display: 		inline-table;
	}
	#tools .grid-thumb,
	#tools .grid-text {
		position: 		relative;
		display: 		table-cell;
	}
	#tools .grid-thumb {
		padding-top:	25%;
		width:			25%;
		background-position: top center;
		background-size: auto 100%;
	}
	#tools .grid-text {
		vertical-align: middle;
	}
}

@media (min-width: 60em){
	#tools {
		text-align: 	center;
	}
	#tools .main-wrapper {
		width:			50em;
		margin-left:	auto;
		margin-right:	auto;
		text-align: 	left;
	}

	#tools .grid-item {
		margin:			1%;
		width:			48%;
	}
	#tools .grid-thumb,
	#tools .grid-text {
		display:		block;
	}
	#tools .grid-thumb {
		padding-top:	55%;
		width:			100%;
		background-position: center;
		background-size: cover;
	}
	#tools .grid-text {
		height: 	24em;
	}
	#tools .grid-text h4 {
		padding-bottom: .7em;
	}
}
@media (min-width: 70em){
	#tools .main-wrapper {
		width:			57em;
	}
	#tools .grid-thumb {
		padding-top:	45%;
	}
}
@media (min-width: 90em){
	#topbanner {
		padding:	18em 0 0 0;
	}
}