body {
	background: #fff;
	margin: 0;
}

.project-bg {
	/*height: 500px;*/
	position: relative;
}
.project-bg img{
	width: 100%;
	height: auto;
	min-height: 250px;
	object-fit: cover;
}
.project-bg:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background: rgba(0,0,0,0.4);*/
}

.project-partOne {
	background: #fff;
	margin: 20px 0;
}

#filters {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
}
#portfoliolist{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#portfoliolist .portfolio {
	width: 31.3%;
}

#filters {
	margin-bottom: 36px;
}

#filters li span {
	font-size: 15px;
	letter-spacing: 2px;
}

#filters li span:hover {
	color: #000;
}

#filters li span.active {
	color: #000;
	background: none;
}

.pro-filter-img a {
	position: relative;
	display: block;
}

.pro-filter-img a:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	opacity: 0;
	transition: linear 0.2s opacity;
	-webkit-transition: linear 0.2s opacity;
}

@media(max-width:768px) {
	.pro-filter-img a:before {
		opacity: 1;
	}
}

.pro-filter-img a:hover:before {
	opacity: 1;
}

.pro-filter-img a:hover .pro-filter-title {
	padding-top: 0;
	transition-delay: 0.2s;
	font-size: 15px;
}

.pro-filter-img a:hover .pro-filter-txt {
	padding-top: 10px;
	transition-delay: 0.3s;
}

.pro-filter-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.pro-filter-title {
	font-size: 15px;
	height: 15px;
	padding-top: 15px;
	transition: linear 0.2s padding-top;
}

.pro-filter-txt {
	font-size: 14px;
	letter-spacing: 1px;
	height: 30px;
	padding-top: 30px;
	transition: linear 0.2s padding-top;
}