.portfolio::after { clear: both; display: block; content: ' '; }
.portfolio .thumbnail { float: left; position: relative; width: 33.33333%; }
.portfolio .thumbnail .img-cover { overflow: hidden; width: 100%; }
.portfolio .thumbnail .img-cover img { width: 100%; margin-bottom: -6px; }
.portfolio .thumbnail .proj-wrap { text-align: center; }


/* LARGE AND MEDIUM SCREEN SIZES */
@media screen and (min-width: 641px) {
	.portfolio .thumbnail .img-cover img { transition: transform .4s ease; }
	.portfolio .thumbnail:hover .img-cover img { transform: scale(1.2); }

	.portfolio .thumbnail .proj-wrap { transition: opacity .6s ease; opacity: 0; }
	.portfolio .thumbnail:hover .proj-wrap { opacity: 1; }

	.portfolio .proj-wrap { display: flex; position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 5%; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.6); color: #fff; align-items: center; }
	.portfolio .proj-wrap .project { margin: 0 auto; }
	.portfolio .proj-wrap .project .proj-name::after { display: block; width: 40px; margin: 20px auto; border-top: 2px solid #fff; content: ''; }
}

/* MEDIUM SCREEN SIZES */
@media screen and (max-width: 960px) {
	.portfolio .thumbnail { width: 50%; }
}

/* SMALL SCREEN SIZES */
@media screen and (max-width: 640px) {
	.portfolio .thumbnail { width: 100%; margin-bottom: 20px; }
	.portfolio .thumbnail:last-child { margin-bottom: 0; }
	.portfolio .proj-wrap { position: absolute; width: 100%; padding: 10px 0; bottom: 0; background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); color: #fff; }
	.portfolio .proj-wrap .project .proj-cate { display: none; }
	.portfolio .proj-wrap .project .p3 { font-size: 18px; }
}