#recent-projects {
	background: #333;
	color: #fff;
	padding: 50px 0;
}

#recent-projects h2 {
	border: 0 none;
	color: #fff;
	font-size: 20px;
	width: 200px;
	margin: 25px 0 20px 0;
	padding: 0 0 5px 0;
	text-transform: uppercase;
}

#recent-projects-wrapper {
	display: block;
	overflow: hidden;
	position: relative;
}

#recent-projects div a > img {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: url(grayscale.svg); /* Firefox 4+ */
	filter: gray; /* IE 6-9 */
	position: relative;

	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}
#recent-projects div a > span {
	background: #BE4834;
	color: #fff;
	
	opacity:0.0;
    filter:alpha(opacity=0);
	left: 50%;
	margin: -30px 0 0 -75px;
	padding: 20px 10px;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 150px;
	z-index: 2;

	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}
#recent-projects div a:hover > img {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%);
	filter: none; /* Firefox 4+ */
	filter: none; /* IE 6-9 */
}
#recent-projects div a:hover > span {
	opacity:1.0;
    filter:alpha(opacity=100);
}

#recent-projects div.info-box {
	bottom: 0px;
	display: block;
	position: absolute;
	right: 0px;
}
#recent-projects div.info-box > a {
	background: #BE4834;
	border: 0 none;
	color: #fff;
	display: table-cell;
	font-weight: 900;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	width: 25%;
}
#recent-projects div.info-box > a:hover {
	background: #777;

	border: 0 none;
	text-decoration: none;

	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}

@media screen and (max-width: 767px) {
	#recent-projects div a > img {
		height: auto;
		width: 100%;

	}
	#recent-projects div.info-box {
		background: #BE4834;
		position: relative;
		width: 100%;
	}
	#recent-projects div.info-box > a {
		display: block;
		height: 138px !important;
		padding-top: 65px;
		width: 100%;
	}
}