.project-block {
	background-color: #f6f6f6;
	color: #000;
	float: left;
	width: 23%;
	margin: 0 1% 1% 1%;
	cursor: pointer;
	transition: all 0.1s ease-out 0s;
}
.project-block:hover {
	border-color: #dc2e3d;
}
.project-image {
	overflow: hidden;
	position: relative;
	min-height: 159px;
}
.project-block .project-image:before {
	height: 100%;
	width: 100%;
	content: "";
	position: absolute;
	top: -100%;
	left: 0%;
	background-color: rgba(220,46,61,0.61);
	transition: all 0.1s ease-out 0s;
	z-index: 1;
}
.project-block:hover .project-image:before {
	top: 0%;
	left: 0%;
}
.project-link {
	position: absolute;
	padding: 4px;
	background-color: #fff;
	border: 1px solid rgba(220,46,61,1.00);
	color: #000;
	top: -120%;
	left: 0;
	right: 0;
	margin: -25px auto 0;
	width: 40px;
	height: 40px;
	font-size: 24px;
	border-radius: 50%;
	transition: all 0.3s ease-out 0s;
	z-index: 5;
}
.project-block:hover .project-link {
	top: 50%;
}
.link-icn {
	width: 24px;
	padding: 8px 0 0 8px;
}
@media all and (max-width: 768px) {
  .project-block {
	width: 46%;
	margin: 0 2% 2% 2%;
}
}
@media all and (max-width: 500px) {
  .project-block {
	width: 80%;
	margin: 0 10% 2% 10%;
}
}