.hero-portfolio{
	color: #222;
	text-align: center;
	padding: 100px 0;
}

.hero-portfolio h1{
	font-size: 5em;
	text-transform: capitalize;
	margin-bottom:25px;
}

.hero-portfolio p{
	font-size: 1.7em;
	line-height: 2;
	letter-spacing: .3px;
	width: 50%;
	margin: auto;
}

.works-item{
	float: left;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.works-item img{
	width: 100%;
	height: 100%;
	object-fit:cover;
	display: block;						
}

.works_2-columns .works-item{
	width: 50%;
	height: 60vh;
}

.works_3-columns .works-item{
	width: 33.33%;
	height: 45vh;
}

.works_4-columns .works-item{
	width: 25%;
	height: 35vh;
}

.works-item-overlay{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0;
	transition: all .3s linear;
}

.works-item:hover .works-item-overlay{
	opacity: 1;
}

.works-item-info{
	 position: absolute;
	 transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
     z-index: 2;
     text-align: center;
     width: 100%;
}

.works-info-title{
	color: #333;
	font-size: 1em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding-bottom: 15px;
}

.works-info-category{
	color: #009fff;
	font-size: 1.2em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 2.5px;
}

.works_2-columns a:hover,
.works_3-columns a:hover,
.works_4-columns a:hover{
	color: inherit;
}


/*-----------------------------------------------------
Single Project
------------------------------------------------------*/

.single-project{
	text-align: center;
	margin-top: 100px;
}

.tag{
	color: #009fff;
	font-size: 1.2em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 3.5px;
}

.tag:hover{
	color: #007cff;
}

.single-project h1{
	color: #333;
	font-size: 7.5em;
	letter-spacing: 2px;
	padding: 20px 0 70px 0;
}

.single-project-info{
	margin: 90px auto;
	width: 80%;
}

.single-project-info h2{
	color: #009fff;
	font-size: 1.1em;
	font-weight: 600;
	text-align: left;
	padding-bottom: 17px;
	letter-spacing: 4.5px;
	text-transform: uppercase;
}

.single-project-info p{
	font-size: 1.9em;
	text-align: left;
	line-height: 2.1;
	letter-spacing: .5px;
	margin: 0 auto 30px auto;
}

.single-project > img:nth-of-type(3){
	float: left;
	width: 50%;
	padding-right:15px;
}

.single-project > img:nth-of-type(4){
	float: left;
	width: 50%;
	padding-left:15px;
}