/* 
	@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) {
	.photo-3 figcaption {
		font-size: 18vw;
	}
}
@media (min-width: 640px) {
	.photo-3 figcaption {
		font-size: 10vw;
	}
}*/

/* -----------
	Project 1 
   ----------- */

#project {
	margin-top: 27%;
}
#project .section-title {
	text-align: center;
	position: relative;
	margin-bottom: 8%;
	width:400px
}
#project .section-title:before {
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	height: 3px;
  	background: black;
	width: 18%; /* lengte zwarte lijn */
}
#project-1 {
	padding: 10% 0 0 0;
	background: #e1f1d1;
}

#project-2, 
#project-3, 
#project-4, #project-4b, 
#project-5, 
#project-6, #project-6b,
#project-7, #project-7b {
	margin-top: 15px;
	padding: 5% 0 0;
	background: none;
	border:#fff 0px solid;
}
#project-6, #project-6b,
#project-7, #project-7b {
	border-bottom:#fff 1px solid;
	margin-bottom: 25px;
	background: #fff;
}
#project-6:before {
	background: #e1f1d1;
	top: 50%;
	height: 350px;
}
#project-7 {
	background:  #e1f1d1;	
}
#project-7b {
	border-bottom: #fff 1px solid;
	background: #fff;
}
#project-6b img {
	margin: 0px 0 30px 0;
} 
#project-3.row h3, 
#project-5.row h3 {
	margin-left: 9%;
}
#project-6 {
	background:#e1f1d1;
	margin-top: 45px;
	border-bottom: #f00 0px solid;
	padding-bottom: 0px;
}
#project-6b,
#project-7b {
	margin-bottom: 0px;
}
.project-2-well, .project-3-well, .project-5-well {
	padding: 8% 9% 6% 9%;
}

.project-6b-well {
	padding-left: 9%;
	padding-right: 9%;
	padding-bottom: 0px;
}
.project-5-well {
	margin-left: 6%;
}
.project-7-well {
	padding-top: 9%;
}
#project-7 {
	margin-top: 0px;
	background: #e1f1d1;
}
#project-7b {
	background: #ffffff;
}

/* 

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

/*@media (min-width: 480px) {
	
	.video-2 figcaption {
		font-size: 96px;
	}

	.video-3 figcaption {
		font-size: 24px;
	}
}*/

/* 

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

/* 

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


@media (min-width: 768px) {

	/* -----------
		Project 2 
	   ----------- */
	
	#project {
		margin-top: 7%;	
	}
	#project:before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 8%;
		left: -2%;
		width: 57%;
		height: 20%;
		background: #e1f1d1;
	}	
	#project .section-title {
		text-align: left;
		width: 300px;
		padding-left: 72px;
		left: -2%;
		margin-bottom: 5%;
	}
	#project .section-title:before {
	  	content: "";
	  	position: absolute;
	  	top: 50%;
	  	left: 0;
	  	height: 2px;
	  	background: black;
	  	width: 18%;
	}
	#project-1 {
		padding: 6% 0 0 0;
		background: none;
	}
	#project-2, 
	#project-3, 
	#project-4, 
	#project-5,
	#project-6,
	#project-7 {
		padding: 0;	
		margin-top: -17vw;
		background: none;
	}
	#project-2 {
		padding-left: 15px;
		padding-right: 7px;
	}
	#project-3, 
	#project-4, 
	#project-5,
	#project-6,
	#project-7 {
		margin-top: 5vw;
		padding-left: 3%;
	}	
	#project-6, #project-6b,
	#project-7, #project-7b {
		border:none;
	}
	#project-6b {
		padding-top: 0px;
	}
	#project-7b {
		background: none;
	}
	#project-2.col-sm-offset-0.col-sm-6  {
		padding-left: 5px;
	}
	#project-3.row h3, 
	#project-4.row h3, 
	#project-5.row h3,
	#project-6.row h3,
	#project-7.row h3 {
		position: relative; /*claire*/
		margin-left: 6%;
	}
	#project-3 h3 {
		padding-top:70px;
		position: relative;
	}
	#project-4.row h3,
	#project-4 h3 {
		margin-left: 0px;
	}
	#project-4:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 38%;
		left: -2%;
		width: 60%;
		height: 12%;
		background: #e1f1d1;
	}
	#project-6:before {
		content: "";
		position: absolute;
		z-index: -2;
		top: 51%;
		left: -2%;
		width: 70%;
		height: 12%;
		background: #e1f1d1;
	}
	#project-7:before {
		content: "";
		position: absolute;
		z-index: -3;
		top: 90%;
		left: -2%;
		width: 60%;
		height: 11%;
		background: #e1f1d1;
	}
	
	#project-6.row h3,
	#project-7.row h3 {
		margin-left: 0px;
	}
	#project-5.row h4 {
		position: relative; /*claire*/
		margin-left: 6%;
	}
	.project-2-well {
		padding: 5% 0 0 17%;
	}
	
	.project-6-well,
	.project-7-well{
		padding: 9%;
		background:#e1f1d1;
	}
	.project-6-well {
		background:none;
	}
	.project-4-well {
		background: none;
		padding-top: 65px;
	}
	.project-4b-well {
		padding: 9%;
		/*background:#ffffff;*/
		background: none;
		
	}
	.project-6b-well {
		padding: 0;
		background: none;	
	}
	.project-6b img {
		margin-top: 0px;
	}

}

/* 

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

/*@media (min-width: 865px) {
	.video-3 figcaption {
		font-size: 24px;
	}
}
*/

/* 

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

@media (min-width: 992px) {

	/* -----------
		Project 3
	   ----------- */	
	#project {
    	/*margin-top: 5%;*/
		margin-top: 9%;
	}
	#project:before {
		content: "";
		position: absolute;
		/*top: -1%;*/
		top: 9%;
		left: -3.25%;
		width: 60%;
		/*height: 21%;*/
		height: 16%;
	}
	#project .section-title {
		text-align: left;		
		width: auto;
		width: 150px;
		padding-left: 72px;
		left: -2%;
		margin-bottom: 5%;
	}
	#project .section-title:before {
	  	content: "";
	  	position: absolute;
	  	top: 50%;
	  	left: 0;
	  	height: 2px;
	  	background: black;
	  	width: 50px;
    }
	#project-1 {
		padding: 0% 0 0 0;
		top: 10px;
		position: relative;
		margin-bottom: 40px;
	}
	#project-2, #project-3, #project-5 {
		margin-top: -125px;
	}
	#project-3,  #project-5 {
		margin-top: 40px;
		padding-left: 6%;
		padding-top: 200px;
	}
	#project-3 {
		padding-top: 0px;
	}
	#project-4,
	#project-6,
	#project-7 {
		margin-top: 20px;
		padding-top: 0px;
		padding-left: 6%;
	}
	#project-4:before {
		top:39%;
		height: 12%;
	}
	#project-5 {
		margin-top: -160px;
	}
	#project-2.col-sm-offset-0.col-sm-6 img {
		padding-left: 5px;
	}		
	.project-2-well {
		padding: 5% 1% 1% 22%;
	}	
	#project-1 h3, 
	#project-2 h3, 
	#project-3 h3, 
	#project-4 h3, 
	#project-5 h3,
	#project-6 h3,
	#project-7 h3 {
		font-size: 20px;
		margin-top:15px;	
	}

	#project-4.row h3,
	#project-4 h3 {
		margin-left: 0px;
	}
	
	.project-6-well {
		/*background:#f7f3ff;*/
		padding-left: 12%;
	}
	#project-6:before {
      background: #e1f1d1;
      top: 51%;
      height: 350px;	
	}
}


/* 

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

@media (min-width: 1200px) {


      /* ----------- 
          PROJECT 4
         ----------- */

	#project {
		content: "";
	}
	#project:before {
		top: -3%;
		top: 9%;
		left: -4%;
		/*height: 81%;*/
		height: 19%;
		width: 61%;
  	}
	#project .section-title {	
		/*top: 136px;
		padding-right: 310px;*/
		text-align: left;	
		width: auto;
		width: 190px;
		padding-left: 72px;
		left: -2%;
		margin-bottom: 5%;			
	}
	#project .section-title:before {
	  	/*width: 68%; claire*/
	  	/*width: 45%; *//*hoogte zwarte lijn*/		
		content: "";
	  	position: absolute;
	  	top: 50%;
	  	left: 0;
	  	height: 2px;
	  	background: black;
	  	width: 50px;
	}
	#project-1 {
		padding: 0;
	}
	#project-2,   
	#project-5 {
		margin-top: -154px;
	}
	#project-3,
	#project-4,
	#project-6,
	#project-7 {
		margin-top: 20px;
	}
	#project-4:before {
		top:37%;
		height: 13%;
	}
	.project-7-well {
		background: none;
	}
	#project-3.row h3, 	 
	#project-5.row h3 {
		position: relative; /*claire*/
		margin-left: 6%;
		margin-top: 15px;
	}
	#project-3 h3 {
		margin-top:25px;
		position: relative;
	}	
	#project-4.row h3,
	#project-4 h3 {
		margin-left: 0px;
		
	}
	.project-2-well {
		padding: 5% 5% 1% 23%;
	}
	#project-6:before {
		background: #e1f1d1;
		top: 51%;
		height: 380px;
	}

}


/* 

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

@media (min-width: 1300px) {

	#project:before {
            top: -3%;
            top: 8%;
            left: -4%;
            /*height: 81%;*/
            height: 16%;
            width: 62%;
    }

/*    #photo-2 {
        top: -110px;
    }

    #video .section-title {
        padding-left: 200px;
        top: 337px;
    }
    #contact-2 {
      top: -110px;
    }
	
*/
}


/* 

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

@media (min-width: 1450px) {

    #project:before {
            top: -3%;
            top: 8%;
            left: -4%;
            /*height: 81%;*/
            height: 17%;
            width: 62%;
    }
	.project-4-well {
		padding-top: 120px;
	}
	.project-7-well {
		padding-top: 120px;
	}

}