/* 
	@elements
--------------------------------------
  Base element styles
-------------------------------------- */

/* 
	@grid
--------------------------------------
    Bootstrap grid customizations
-------------------------------------- */

/* Default XS */

/* 
	@well
--------------------------------------
  Wells with responsive modifiers
-------------------------------------- */

/* 
	@thumbs
--------------------------------------
  thumb
-------------------------------------- */

/* 
	@body
--------------------------------------
  Body layout styles
-------------------------------------- */

/* 
	@typography
--------------------------------------
  Typography styles
-------------------------------------- */

/* 
	@header
--------------------------------------
  The site header
-------------------------------------- */

/* 
	@footer
--------------------------------------
  Custom styles for site-footer
-------------------------------------- */


/* 
	@sections
--------------------------------------
  Custom styles per section
-------------------------------------- */

@media (min-width: 480px) {
	
	
}
@media (min-width: 640px) {
	
	
}

/* --------------
	commproject 
   -------------- */

#commproject {
	margin-top: 36px;
}
#commproject .section-title {
    text-align: center;
    position: relative;
    margin-bottom: 8%;
}
#commproject .section-title:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: 3px;
    background: black;
    width: 21%;
}

.commproject-1-well,
.commproject-2-well,
.commproject-3-well,
.commproject-4-well,
.commproject-5-well,
.commproject-6-well {
  	padding: 9% 10% 25%;
}
.commproject-1,
.commproject-2,
.commproject-3,
.commproject-4,
.commproject-5,
.commproject-6 {
	position: relative;
	background: black;
	box-shadow: 28px 28px 57px rgba(0,0,0,.25);
}
.commproject-1 img,
.commproject-2 img,
.commproject-3 img,
.commproject-4 img,
.commproject-5 img,
.commproject-6 img {
	position: relative;
	z-index: 1;
	opacity: 1;
	-webkit-backface-visibility: hidden;
  	backface-visibility: hidden;
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
}
.commproject-1,
.commproject-2,
.commproject-3,
.commproject-4,
.commproject-5,
.commproject-6 {
	position: relative;
	overflow: hidden;
}
.commproject-1::after,
.commproject-2::after,
.commproject-3::after,
.commproject-4::after,
.commproject-5::after,
.commproject-6::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	right: -1px;
	width: 50%;
	background: #5EF2F2;
	mix-blend-mode: multiply; /*low support*/
	opacity: .9; /* for other browsers */
	-webkit-transform: translateX(100%);
  	transform: translateX(100%);
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s;
}
.commproject-2::after {
	background: #617C8C;
}
.commproject-3::after {
	background: #7E7CA6;
}
.commproject-4::after {
	background: #403328;
}
.commproject-5::after {
	background: #F2B705;
}
.commproject-6::after {
	background: #592B02;
}
.commproject-1:hover::after,
.commproject-2:hover::after,
.commproject-3:hover::after,
.commproject-4:hover::after,
.commproject-5:hover::after,
.commproject-6:hover::after {
  	-webkit-transform: translateX(0);
  	transform: translateX(0);
}

.photo-3-well {
  	padding: 9% 10% 25%;
}
.photo-4 {
	position: relative;
	background: black;
	box-shadow: 28px 28px 57px rgba(0,0,0,.25);
}
.photo-4 img {
	position: relative;
	z-index: 1;
	opacity: 1;
	-webkit-backface-visibility: hidden;
  	backface-visibility: hidden;
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
}
.photo-4 {
	position: relative;
	overflow: hidden;
}
.photo-4::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	right: -1px;
	width: 50%;
	/*background: #e90063; claire*/
	background: #60B6BF;
	mix-blend-mode: multiply; /*low support*/
	opacity: .9; /* for other browsers */
	-webkit-transform: translateX(100%);
  	transform: translateX(100%);
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s;
}
.photo-4:hover::after {
  	-webkit-transform: translateX(0);
  	transform: translateX(0);
}

/* 

	@xs
===========================================
	XS Breakpoint 480px 
=========================================== */

@media (min-width: 480px) {
	
}

/* 

	@custom bp
===========================================
	Breakpoint 640, no classes assoc.
=========================================== */

/* 

	@sm
===========================================
	SM Breakpoint 768px 
=========================================== */


@media (min-width: 768px) {
	
	/* --------------
		commproject 
	   -------------- */
	#commproject {
		margin-bottom: -17%;
	}
	#commproject:before {
		content: "";
		position: absolute;
		top: 6%;
		left: -2%;
		right: -2%;
		height: 42%;
	}
	
	#commproject .section-title {
	  	text-align: left;
	  	position: relative;
	  	left: -2%;
	  	margin-bottom: 2vw;
	  	padding-left: 67px;
	}
	#commproject .section-title:before {
	  	content: "";
	  	position: absolute;
	  	top: 50%;
	  	left: 0;
	  	height: 2px;
 	 	background: black;
	  	width: 53px;
	}
	
	#commproject-1,
	#commproject-2,
	#commproject-3,
	#commproject-4,
	#commproject-5,
	#commproject-6 {
		position: relative;
		padding-top: 10%;
		padding-right: 10%;
		width:100%;
	}
	.commproject-1-well,
	.commproject-2-well,
	.commproject-3-well,
	.commproject-4-well,
	.commproject-5-well,
	.commproject-6-well {
		padding: 0% 0 8% 16%;
	}

		


}

/* 

	@custom bp
===========================================
	Breakpoint 856, no classes assoc.
=========================================== */



@media (min-width: 865px) {
	
}

/* 

	@md
===========================================
	MD Breakpoint, 992px
=========================================== */

@media (min-width: 992px) {
	
	/* --------------
		commproject 
	   -------------- */	
	#commproject {
		margin-top: 7%;
	}
	#commproject:before {
		top: -1%;
		height: 53%;
	}
	#commproject .section-title {
		position: absolute;
		z-index: 5;
		-webkit-transform: rotate(90deg);
		-webkit-transform-origin: right bottom;
		transform: rotate(90deg);
		transform-origin: right bottom;
		right: 6.5%;
		top: 15%;
		left: auto;
		padding: 0 0 0 212px;
		margin: 0;
	}
	#commproject .section-title:before {
		width: 190px;
	}

	#commproject-1,
	#commproject-2,
	#commproject-3,
	#commproject-4,
	#commproject-5,
	#commproject-6 {
    	top: -30px;
	}
	.commproject-1-well,
	.commproject-2-well,
	.commproject-3-well,
	.commproject-4-well,
	.commproject-5-well,
	.commproject-6-well {
		padding-top: 18%;
	}

	#photo-3 {
    	top: -30px;
	}
	.photo-3-well {
		padding-top: 18%;
	}

}


/* 

	@lg
===========================================
	LG Breakpoint, 1200px
=========================================== */

@media (min-width: 1200px) {
	
	 /* -------- 
          Photo
         ------- */
	#commproject:before {
		top: 1.25%;
		left: -4%;
		right: -4%;
		height: 51%;
	}
	#commproject:before {
		top: 1.25%;
		left: -4%;
		right: -4%;
		height: 51%;
	}
	#commproject .section-title {
		/* top: 45%; */
		padding-left: 260px;	
		top: auto;
		bottom: 82%;
	}
	#commproject .section-title:before {
		width: 230px;
	}

	#commproject-1,
	#commproject-2,
	#commproject-3,
	#commproject-4,
	#commproject-5,
	#commproject-6 {
    	top: -1.25vw;
	}
	#commproject-5 {
    	margin-bottom: 60px;
	}
	.commproject-1-well,
	.commproject-2-well,
	.commproject-3-well,
	.commproject-4-well,
	.commproject-5-well,
	.commproject-6-well {
		padding: 20% 10%;
	}

	#photo-3 {
    	top: -1.25vw;
	}
	.photo-3-well {
		padding: 20% 10%;
	}




}


/* 

	@custom for xl
===========================================
	1300px
=========================================== */

@media (min-width: 1300px) {



}


/* 

	@custom for xxl
===========================================
	1450px
=========================================== */

@media (min-width: 1450px) {



}