.b-feed {

}
	.b-feed:after {
		content: '';
		display: block;
		clear: both;
	}

.b-project {
	display: block;
	float: left;
	width: 33%;
	position: relative;
	height: 240px;
	background-size: cover;
	background-position: center;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-backface-visibility: hidden;
}
	.b-feed.grayscale .b-project {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
		filter: gray;
	}
	.b-feed.grayscale .b-project:hover {
		-webkit-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
		-ms-filter: grayscale(0%);
		-o-filter: grayscale(0%);
		filter: grayscale(0%);
		filter: none;
	}

.b-project:hover > .b-hover {
	opacity: 1;
	filter: Alpha(opacity=100);
}
	.b-hover {
		position: absolute;
		background: rgba(255,255,255,.8);
		width: 100px;
		height: 100px;
		border-radius: 100%;
		top: 50%;
		left: 50%;
		margin: -50px 0 0 -50px;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		opacity: 0;
		filter: Alpha(opacity=0);
		text-align: center;
		color: #444;
		line-height: 98px;
		font-size: 30px;
		font-weight: lighter;
	}

@media all and (max-width: 727px) {
	.b-project {
		width: 50%;
	}
}

@media all and (max-width: 480px) {
	.b-project {
		width: 100%;
	}
}