.projects-area{
	 background-color: black;
	 height: auto;
	 overflow: auto;
	 padding: 0;
	 margin: 0;
	 z-index: -1;
}

.project-link{
	text-decoration: none;
	display: block;
}

.project-row-one{
	display: inline-block;
	float: left;
	margin: 0 0 0 0;
	padding:  0% 0 0% 0;
	opacity: 1;
}

.project-row-one:hover{
	opacity: 1;	
}

.project-a{
	width: 33.3%;
	height: auto !important;
	background-color: /**#38c4e4**/ transparent;
/**	background: url(images/boingo-header-web.jpg); **/
	background-size: 1700px 718px;
	background-position: center center;
}

.project-b{
	width: 33.35%;
	height: auto !important;
	background-color: /**#d52b1e**/ transparent;
/**	background: url(images/hh-header.jpg); **/
	background-size: 1700px 718px;
	background-position: center center;		
}

.project-c{
	width: 33.35%;
	height: auto !important;
	background-color: /**#f56d11**/ transparent;
/**	background: url(images/sb-header.jpg); **/
	background-size: 1700px 718px;
	background-position: center center;		
}

.project-d{
	margin-top: -1px;
	width: 50%;
	height: auto !important;
	background-color: /**#f56d11**/ transparent;
/**	background: url(images/sb-header.jpg); **/
	background-size: 1700px 718px;
	background-position: center center;		
}

.project-e{
	margin-top: 0px;
	width: 25%;
	height: auto !important;
	background-color: /**#f56d11**/ transparent;
/**	background: url(images/sb-header.jpg); **/
	background-size: 1700px 718px;
	background-position: center center;		
}

.project-f{
	margin-top: 0px;
	width: 25%;
	height: auto !important;
	background-color: /**#f56d11**/ transparent;
/**	background: url(images/sb-header.jpg); **/
	background-size: 1700px 718px;
	background-position: center center;		
}


.project-g{
	margin-top: 0px;
	width: 25%;
	height: auto !important;
	background-color: /**#f56d11**/ transparent;
/**	background: url(images/sb-header.jpg); **/
	background-size: 1700px 718px;
	background-position: center center;		
}

.project-h{
	margin-top: -1px;
	width: 33.3%;
	height: auto !important;
	background-color: /**#f56d11**/ transparent;
/**	background: url(images/sb-header.jpg); **/
	background-size: 1700px 718px;
	background-position: center center;		
}


.project-j{
	margin-top: -1px;
	width: 33.35%;
	height: auto !important;
	background-color: /**#f56d11**/ transparent;
/**	background: url(images/sb-header.jpg); **/
	background-size: 1700px 718px;
	background-position: center center;		
}

.project-i{
	margin-top: -1px;
	width: 33.35%;
	height: auto !important;
	background-color: /**#f56d11**/ transparent;
/**	background: url(images/sb-header.jpg); **/
	background-size: 1700px 718px;
	background-position: center center;		
}


.project-image-area{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.project-image-content{
	width: 100%;
	height: auto;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex; 
	
}

.project-row-information{
	width: 100%;
	height: 100%;
	margin: 0px 0 0 0;
	/** change Here to 0 **/ opacity: 0;
	background-color: rgba(0,0,0,0.6);/**rgba(254, 190, 16, 0.75); rgba(40, 176, 192, 0.8);**/
	position: absolute;
	bottom: 0;
	cursor: pointer;
}

.project-row-information:hover{
	opacity: 1;
}

.selected-project{
	opacity: 0.85 !important;
	cursor:default !important;
}

.selected-project:hover{
	opacity: 0.85 !important;
}

.project-row-spacing-quarter{
	background-color: rgba(0,0,0,0.8);
	width: 91%;
	margin: 0 auto;
	padding: 5% 5% 7% 5%;
  transform: translateY(125px);
  -webkit-transform: translateY(125px);  
  -moz-transform: translateY(125px);    
  -o-transform: translateY(125px);  	
}

.project-row-spacing-half{
	background-color: rgba(0,0,0,0.8);
	width: 91%;
	margin: 0 auto;
	padding: 5% 5% 7% 5%;
  transform: translateY(255px);
  -webkit-transform: translateY(255px);  
  -moz-transform: translateY(255px);    
  -o-transform: translateY(255px);  	
}


.project-row-spacing-third{
	background-color: rgba(0,0,0,0.8);
	width: 91%;
	margin: 0 auto;
	padding: 5% 5% 7% 5%;
  transform: translateY(150px);
  -webkit-transform: translateY(150px);  
  -moz-transform: translateY(150px);    
  -o-transform: translateY(150px);  	
}

.icon-plus.a:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #38c4e4;
  text-align:center;
}

.icon-plus.b:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #d52b1e;
  text-align:center;
}

.icon-plus.c:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #f56d11;
  text-align:center;
}

.icon-plus.hh:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #b6be5a;
  text-align:center;
}

.icon-plus.ctfinder:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #00a1de;
  text-align:center;
}

.icon-plus.caweb:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #4a5dab;
  text-align:center;
}

.icon-plus.courts:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #023454;
  text-align:center;
}

.icon-plus.music:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #9765a9;
  text-align:center;
}

.icon-plus.vans:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #ffb400;
  text-align:center;
}

.icon-plus.sb:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #11a7da;
  text-align:center;
}

.icon-plus.ethics:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #c52424;
  text-align:center;
}

.icon-plus.climb:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #43c4b6;
  text-align:center;
}

.icon-plus.booth:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #36be73;
  text-align:center;
}

.icon-plus.logos:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #4fa9b0;
  text-align:center;
}

.icon-plus.faceblind:before{
  content: "i";
  font-size: 130%;
  padding: 0px 0 0px 48.5%;
  line-height: 175%;
  color: #50a4d5;
  text-align:center;
}

h1.project-row-title{
	color: 	#fff;
	font-size: 21px;
	font-weight: 700;
/**	text-transform: uppercase;**/
	text-align: center;
}

p.project-row-one-subtitle{
	color: 	rgba(255,255,255,0.6);
	font-size: 15px;
	font-weight: 400;
	font-family: 'Lora','Montserrat', helvetica, arial, sans-serif;
	text-align: center;
	line-height: 215%;	
	letter-spacing: 0.04em;
}


/*************************************************************/
/*******************Begin Responsive Styles*******************/
/*************************************************************/

@media (max-width: 1350px){
.project-row-spacing-quarter{
	background-color: rgba(0,0,0,0.8);
	width: 91%;
	margin: 0 auto;
	padding: 5% 5% 7% 5%;
  transform: translateY(95px);
  -webkit-transform: translateY(95px);  
  -moz-transform: translateY(95px);    
  -o-transform: translateY(95px);  	
}

.project-row-spacing-half{
	background-color: rgba(0,0,0,0.8);
	width: 91%;
	margin: 0 auto;
	padding: 5% 5% 7% 5%;
  transform: translateY(200px);
  -webkit-transform: translateY(200px);  
  -moz-transform: translateY(200px);    
  -o-transform: translateY(200px);  	
}


.project-row-spacing-third{
	background-color: rgba(0,0,0,0.8);
	width: 91%;
	margin: 0 auto;
	padding: 5% 5% 7% 5%;
  transform: translateY(125px);
  -webkit-transform: translateY(125px);  
  -moz-transform: translateY(125px);    
  -o-transform: translateY(125px);  	
}	

}


@media (max-width: 1100px){

	.project-row-spacing-third{
	  transform: translateY(95px);
	  -webkit-transform: translateY(95px);  
	  -moz-transform: translateY(95px);    
	  -o-transform: translateY(95px);  	
	}

	.project-row-spacing-half{
		transform: translateY(175px);
		-webkit-transform: translateY(175px);  
		-moz-transform: translateY(175px);    
		-o-transform: translateY(175px);  			
	}
	

}


@media (max-width: 975px){

	.project-row-spacing-third{
	  transform: translateY(65px);
	  -webkit-transform: translateY(65px);  
	  -moz-transform: translateY(65px);    
	  -o-transform: translateY(65px);  	
	}

	.project-row-spacing-half{
		transform: translateY(155px);
		-webkit-transform: translateY(155px);  
		-moz-transform: translateY(155px);    
		-o-transform: translateY(155px);  			
	}
	

}


@media (max-width: 1195px){
	
	.project-row-spacing-quarter{
	  transform: translateY(60px);
	  -webkit-transform: translateY(60px);  
	  -moz-transform: translateY(60px);    
	  -o-transform: translateY(60px); 		
	}	
	
}

@media (max-width: 1000px){
	
	.project-row-spacing-quarter{
	  transform: translateY(30px);
	  -webkit-transform: translateY(30px);  
	  -moz-transform: translateY(30px);    
	  -o-transform: translateY(30px); 		
	}	
	
}

@media (max-width: 800px){

	.project-row-information{
		/** change Here to 0 **/ opacity: 1;
	}
		
	.project-row-information{
		background-color: rgba(0, 0, 0, 0);
		height: 100%;
	}
	
	h1.project-row-title{
		font-size: 16px;
	}
	
	p.project-row-one-subtitle{
		font-size: 13px;
	}
	
	.project-a{
		width: 50%;
		margin-top: 0px;
	}
	
	.project-b{
		width: 50%;
		margin-top: 0px;
	}
	
	.project-c{
		width: 50%;
		margin-top: 0px;
	}
	
	.project-d{
		width: 50%;
		margin-top: 0px;
	}		
	
	.project-e{
		width: 50%;
		margin-top: 0px;
	}				
	
	.project-f{
		width: 50%;
		margin-top: 0px;
	}		
	
	.project-g{
		width: 50%;
		margin-top: 0px;
	}				

	.project-h{
		width: 50%;
		margin-top: 0px;
	}		
	
	.project-i{
		width: 50%;
		margin-top: 0px;
	}	

	.project-j{
		width: 50%;
		margin-top: 0px;
	}				

	.project-row-spacing-quarter{
	position: absolute;
	bottom: 0;
	  transform: translateY(0px);
	  -webkit-transform: translateY(0px);  
	  -moz-transform: translateY(0px);    
	  -o-transform: translateY(0px);
	}	
	
	.project-row-spacing-third{
	position: absolute;
	bottom: 0;
	  transform: translateY(0px);
	  -webkit-transform: translateY(0px);  
	  -moz-transform: translateY(0px);    
	  -o-transform: translateY(0px);
	}		
	
	.project-row-spacing-half{
	position: absolute;
	bottom: 0;
	  transform: translateY(0px);
	  -webkit-transform: translateY(0px);  
	  -moz-transform: translateY(0px);    
	  -o-transform: translateY(0px);
	}		

}

@media (max-width: 500px){
	
	.project-row-information{
		background-color: rgba(0, 0, 0, 0);
		height: 100%;
	}
	
	h1.project-row-title{
		font-size: 16px;
	}
	
	p.project-row-one-subtitle{
		font-size: 13px;
	}
	
	.project-a{
		width: 100%;
		margin-top: 0px;
	}
	
	.project-b{
		width: 100%;
		margin-top: 0px;
	}
	
	.project-c{
		width: 100%;
		margin-top: 0px;
	}
	
	.project-d{
		width: 100%;
		margin-top: 0px;
	}		
	
	.project-e{
		width: 100%;
		margin-top: 0px;
	}				
	
	.project-f{
		width: 100%;
		margin-top: 0px;
	}		
	
	.project-g{
		width: 100%;
		margin-top: 0px;
	}				

	.project-h{
		width: 100%;
		margin-top: 0px;
	}		
	
	.project-i{
		width: 100%;
		margin-top: 0px;
	}	

	.project-j{
		width: 100%;
		margin-top: 0px;
	}				

	.project-row-spacing-quarter{
	position: absolute;
	bottom: 0;
	  transform: translateY(0px);
	  -webkit-transform: translateY(0px);  
	  -moz-transform: translateY(0px);    
	  -o-transform: translateY(0px);
	}	
	
	.project-row-spacing-third{
	position: absolute;
	bottom: 0;
	  transform: translateY(0px);
	  -webkit-transform: translateY(0px);  
	  -moz-transform: translateY(0px);    
	  -o-transform: translateY(0px);
	}		
	
	.project-row-spacing-half{
	position: absolute;
	bottom: 0;
	  transform: translateY(0px);
	  -webkit-transform: translateY(0px);  
	  -moz-transform: translateY(0px);    
	  -o-transform: translateY(0px);
	}		

}