html {
	height:100%;
	min-height: 100%;
	width: 100%;
	overflow: auto;}

.outer-container {
	padding-bottom:0;
}


.content {
	display:block;
	position:relative;
	width:100%;
	}

.projects {
	width: 85%;
	display: block;
	margin: 0 auto;
	position:relative;
	}

.grid {
	display: block;
	width:95%;
	padding: 0;
	max-width:2100px;
	margin:0 auto;
	position:relative;
}	
/*
@media only screen and (max-width:1366px) {
	.grid {
		padding-top:3%;
	}
}
*/
.grid-item-wrap {
	width: 23%;
	display:inline-block;
	vertical-align:top;
	padding:10px 1% 0 1%;
	position:relative;
}

@media only screen and (max-width:1024px) {
	
	.grid {
		width:100%;
	}
	.grid-item-wrap {
		width:32%;
		
	}
	
}

.grid-item-wrap a {
	display:block;
	width:100%;
}
.grid-item {
	width: 100%;
	padding:2px;
	vertical-align:top;
	display:block;
	position:relative;
}

.grid-item img {
	width:100%;
	display: block;
	position:relative;
}

p.category-title-6  { 
    font-family: "Jost-Medium", serif;
    position: relative; 
	padding:10px 0 0 0;
	margin:0 auto;
	z-index: 600;
	width:95%;
	background:#ffffff;
	color: /*#7e5912*/#444444; 
	font-size:1rem;
	text-align:center;
	text-transform:uppercase;
	}
	
	
p.category-title-7  { 
    font-family: "Jost-Medium", serif;
    position: absolute; 
	bottom: -22px; 
	left:0;
	padding:15px 0;
	margin:0 auto;
	z-index: 600;
	width:95%;
	background:#ffffff;
	color: /*#7e5912*/#444444; 
	font-size:1rem;
	text-align:center;
	text-transform:uppercase;
	}


/*FOR THE TITLE "PROJECTS" ON CATEGORY PAGE for mobile*/

.title-mobile {
	display: block;
}

.title-mobile h1 {
	text-align: center;
	font-size:1.6rem;		
	padding-top:2rem;
	}

@media only screen and (min-width:960px) {
	.title-mobile {
		display:none;
	}
}


@media only screen and (max-width:1100px) {
	.grid {width:100%;}
	.grid-item-wrap {
		width:46%;
		padding:2%;
	}
}


@media only screen and (max-width:1024px) {

	.grid-item {
		padding:0 0 30px 0 ;
	}
	
}

@media only screen and (max-width:960px) {
/*	.content {margin-left:2%;}*/
	.projects {padding-left:0;padding-right:0;width:100%;}
	.grid-item-wrap {width:50%;padding-right:0;padding-left:0}
	.grid-item img {width:95%; margin:0 auto}
}

@media only screen and (max-width:800px) {
	.grid-item-wrap {
		width:100%;
	}
}

@media only screen and (max-width:600px) {
	.grid-item-wrap {
		width:100%;
	}
}



@media only screen and (min-width: 3200px) {
	.projects {
		padding-left: 8%;
		padding-right: 8%;
	}
	.grid {
		max-width:100%;
	}
}