/*	==========================================================
	GENERAL - FONTS
	==========================================================	*/
@font-face {
    font-family: 'avenirlight';
    src: url('./fonts/avenir_light-webfont.eot');	/* IE9 compat */
    src: url('./fonts/avenir_light-webfont.eot?#iefix') format('embedded-opentype'),	/* IE6–IE8 */
         url('./fonts/avenir_light-webfont.woff2') format('woff2'),			/* Super modern browsers */
         url('./fonts/avenir_light-webfont.woff') format('woff'),			/* Modern browsers */
         url('./fonts/avenir_light-webfont.ttf') format('truetype'),			/* Safari, Android, iOS */
         url('./fonts/avenir_light-webfont.svg#avenirlight') format('svg');		/* Old iOS */
    font-weight: normal;
    font-style: normal;
}

/*	==========================================================
	GOOGLE FONTS
	==========================================================	*/
/* @import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap'); */

/*	==========================================================
	CSS BODY LAYOUT 
	==========================================================	*/
html{
	/* overflow:auto; */
}
body, html{
	height:100%;
	min-height:100%;
	width:100%;
}
body{
	background-color:#f3f3f3;
	display: grid;
	grid-template-rows:auto 1fr auto;
}

/*	==========================================================
	CSS ALL
	==========================================================	*/
*{
	font-family:avenirlight, sans-serif;
	font-size:1rem;
	box-sizing:border-box;
	margin:0px;
	padding:0px;
	position:relative; 
}
.weg{
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0); /* IE6-IE8 */
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

section, .SECTION{
	/* position:relative;  */
	min-height:200px;  
	margin:0px auto;
	padding:0px 50px 100px 50px;
	max-width:1250px;
	width:90%;
	/* border:1px solid blue; */
}
article, .ARTICLE{
	
	width:100%;
	text-align:left; 
	padding:0px 100px;
	/* border:1px solid red; */
}
.BBLUE{
	background-color:#aebec8;
}
section p, .SECTION p{
	font-size:1.1rem;
}
.TAB{
	display:table;
	width:100%;
}
.TCELL{
	display:table-cell;
	vertical-align:top;
	/* border:1px solid red; */
}
.TPIC{
	width:40%;
	vertical-align:middle;
}
.TPIC img{
	width:100%;
}
.TLEFT{
	padding-right:30px;
}
.TRIGHT{
	padding-left:30px;
}

/*	==========================================================
	HEADER
	==========================================================	*/
header{	
	width:100%;
} /* box-shadow:0px 2px 2px #666666;*/
#HEADCONT{
	display: grid;
	grid-template-columns:1fr auto;
	max-width:1400px; 
	width:100%;
	margin:0 auto;
	margin-bottom:1rem;
	align-items: end;
}

/*	-------------------
	HEAD LOGO
	-------------------	*/
#HEADLOGO{
	width: fit-content;
}
#HEADLOGO a{	}
#HEADLOGO img{	
	display: block;
}
/*	-------------------
	HEAD NAVIGATION
	-------------------	*/
nav{	
	width:100%;
	align-self: end;
	text-align:center;
	padding-bottom:75px;
	
	}
nav ul{	
	display: flex;
	gap: 0px;           /* ruimte tussen items */
	list-style: none;    /* bolletjes weg */
	margin: 0;
	padding: 0;
}
nav li{	
	text-align:left;
	width:25%;
	}

nav a{	
	text-decoration:none; font-weight:normal; 
	line-height:2rem; font-size:1rem; letter-spacing:0.05rem;
	color:#9a8731; /*text-shadow:-1px -1px 1px #999999, 1px -1px 1px #999999, -1px 1px 1px #999999, 1px 1px 1px #999999;*/
	padding:0rem 1rem;
	margin:0px; 
}
nav a:hover{	font-weight:bold; }
nav a.SEL{		font-weight:bold; }

/*	-------------------
	NAV ANIMATION - OPEN
	-------------------	*/
		/* -webkit-transition: color 300ms;	-webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;  -moz-osx-font-smoothing: grayscale; */
/* nav a{	position:relative; transition:color 300ms; transform:translateZ(0); backface-visibility:hidden; } */
		/* -webkit-transform: scaleX(0); -webkit-transform-origin: 50%; -webkit-transition-property: transform; -webkit-transition: 300ms ease-out; */
/* nav a:before { */
	/* content:""; z-index:-1; */
	/* position:absolute; top:0; bottom:0; left:0; right:0; */
			/* background-color:#ee8822;  */
	/* transform: scaleX(0); transform-origin: 50%; transition-property: transform; transition: 200ms ease-out; */
		/*	border-radius:5px;
			box-shadow:-1px -1px 1px #999999, 1px -1px 1px #999999, -1px 1px 1px #999999, 1px 1px 1px #999999; */
/* } */
		/*   -webkit-transform: scaleX(1); */
/* nav a:hover:before {	transform: scaleX(1); } */

/* nav select{	display:none; color:#333333; padding:5px 30px; font-size:1rem; letter-spacing: 0.1rem; } */


/*	-------------------
	MENU ICO
	-------------------	*/
#MENUICO i, #MOBMENU i{
	padding:0rem 1rem; 
	margin:0px 5px;
	display:inline-block; 
	font-size:2rem; 
	color:#9a8731; 
	/* text-shadow:-1px -1px 1px #666666, 1px -1px 1px #666666, -1px 1px 1px #666666, 1px 1px 1px #666666; */
	/* filter: hue-rotate(180deg); */
	cursor:pointer; 
}
#MENUICO{		
	display:none; 
	transform: scaleX(1.5);
	padding-right:2rem;
}


/*	-------------------
	MOBILE MENU
	-------------------	*/
#MOBMENU{		
	/* display:none; */
	position:absolute; z-index:100; /* overflow-y:auto; */
	top:0; left:100%; /*width:100%; height:100%;  */
	text-align:center; 
	background-color:#f3eeea; color:#9a8731;
	/* height:0; */
	overflow:hidden;
	border:0;
	
	transform-origin: top;
	transform: scaleY(0);
	transition: transform 0.4s ease;
}
#MOBMENU ul{	display:block; list-style-type: none; margin:0px; padding:0px; }
#MOBMENU li{	display:block; 	}

#MOBMENU a, i.CLOSEICO{	
	display:block; 
	text-decoration:none; font-weight:normal; 
	line-height:3rem; font-size:1.4rem; letter-spacing:0.05rem;
	color:#9a8731;/* text-shadow:-1px -1px 2px #333333, 1px -1px 2px #333333, -1px 1px 2px #333333, 1px 1px 2px #333333; */
	padding:0rem 1.5rem; 
	margin:0px; 
	padding:1rem 2rem;
}
#MOBMENU a.SEL, #MOBMENU a:hover, i.CLOSEICO:hover{	font-weight:bold; }

#MOBMENU.MOBSHOW{	
	border-top:5px solid #9a8731;
	transform: scaleY(1);
}
#MOBMENU.MOBHIDE{
	transform: scaleY(0);
}

/*	==========================================================
	FOOTER
	==========================================================	*/
footer{			
	/* border:1px solid red; */
	color:#9a8731;
	padding:0px 0;
	z-index:10;
}
#FOOTCONT{
	display: grid;
	grid-template-columns:1fr auto;
	max-width:1400px; 
	margin:0 auto;
	padding:0rem 1rem;
}
#FOOTLEFT{
	width:50%;
	text-align:left;
}
#FOOTLEFT img{
	height:40px;
	margin:0px 5px;
}
#FOOTRIGHT{
	width:50%;
	text-align:right;
}
#FOOTRIGHT a{
	text-decoration:none;
	color:#9a8731;
	margin:0px 5px;
}

/* #SITEMAP{		max-width:1400px; margin:0px auto; vertical-align:top; } */
/* #SITEMAP div{	display:inline-block; } */
/* #SITEMAP a{		display:block; color:#FFFFFF; text-decoration:none; font-size:1rem; line-height:100%; font-weight:normal; text-align:left; padding:0.5rem 2rem; } */
/* #SITEMAP a:hover{	color:#EE8822; } */
/* X-treem */
footer h2{	
	max-width:1400px; 
	margin:0 auto;	
	text-align:center;
	padding-top:30px;
	padding-bottom:5px;
	width:100%; 
}
footer h2 a{	
	font-size:0.8rem;
	letter-spacing:0.05rem;
	font-weight:normal;
	text-decoration:none;
	color:#999999;
	padding:0px;
	margin:0px;
}

/*	==========================================================
	DATA
	==========================================================	*/

.BOL{
	position:absolute;
	top:-10px; left:-10px; 
	width:150px; height:150px; 
	z-index:20;
	background: transparent url("./pic/bol-green.png") no-repeat center center;
	background-size: 100% 100%;
}
.BOL a{
	display:table;
	color:#FFFFFF;
	width:100%;
	height:100%;
	font-weight:bold;
	text-decoration:none;
	/* border:1px solid red; */
}
.BOL p{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
/*	==========================================================
	HOME
	==========================================================	*/
.OVERLAY{	
	display:none;
	z-index:100;
	position:absolute;
	width:100%;
	height:100%;
	top:0; left:0;
	background-color:rgb(255,255,255,0.70);
}
.OVERLAY div{
	font-size:2rem;
	align-self: center;
	text-align:center;
	font-style:italic;
}
/*	==========================================================
	OVER ONS
	==========================================================	*/
#OVERGRID{
	display: grid;
	grid-template-columns: 20% 1fr;
	gap: 0px;
	width:100%;
}
#OVERCOL1{
	height:100%;
	display: grid;
	grid-template-rows: 50% 50%;
	background: linear-gradient(to right, transparent 60%, #aebec8 40%);
}
#OVERCOL1 img{
	display:block;
	width:100%;
}
#OVERCOL1 a{
	/* width:100%; */
}
#OVERCOL2{
	padding:2rem;
}
#OVERSTEF{
	padding-top:2rem;
	align-self:start;
}
#OVERTINA{
	padding-bottom:2rem;
	align-self:end;
}
#OVERCOL2 a {
	font-weight:bold;
	color:#9a8731;
	text-decoration:none;
}
#OVER .BOL{
	top:auto;
	bottom:-10px;
	left:auto;
	right:-10px;
}

/*	==========================================================
	WERKWIJZE
	==========================================================	*/
#WERK .ARTICLE{
	/* padding:20px; */
}
#WERK p{
	padding:0 2rem;
}
#WERK a img{
	display:bock;
	width:100%;
}
#WERKRIJ1, #WERKRIJ3{
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 0px;
	width:100%;
	padding:1rem; 
	background-color:#aebec8;
}
#WERKRIJ1 img, #WERKRIJ3 img{
	padding-left:5rem;
}
#WERKRIJ1 p, #WERKRIJ3 p{
	padding-right:5rem;
}
#WERKRIJ2{
	display: grid;
	grid-template-columns: 1fr 40%;
	gap: 0px;
	width:100%;
	padding:1rem; 
	margin:1rem 0;
}
#WERKRIJ2 img{
	padding-right:5rem;
}
#WERKRIJ2 p{
	padding-left:5rem;
}
#WERK b{	font-size:1.2rem; }
#WERK .BOL{
	top:-30px;
	left:-50px;
}
#WERK .BOL p{
	padding:0;
}

/*	==========================================================
	CONTACT
	==========================================================	*/
#CONTACT .ARTICLE{
	padding-top:20px;
}
#CONTACT .BOL{
	top:auto;
	bottom:-2rem;
	left:auto;
	right:-5rem;
}
#CONTACT h2{
	color:#9a8731;
	font-size:1.4rem;
	font-weight:bold; 
	padding-bottom:2rem;
}
#CONTGRID{
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto auto auto auto;
	gap: 0px;
	width:100%;
	padding:1rem; 
	margin:1rem 0;
}
#CONTNIX1{
	
}
#CONTHEAD{
	
}
#CONTNAAM{
	
}
#CONTTINA{
	
}
#CONTSTEF{
	
}
#CONTFORM{
	grid-row: span 3;
}
#CONTNIX2{
	
}
#CCONTSUBM{
	text-align:center;
}
#CONTACT textarea,
#CONTACT input{		
	width:100%;
	padding:0.5rem 1rem;
	margin-bottom:1rem;
	box-shadow: #333333 1px 1px 5px;
	resize: none;
	background-color:#FFFFFF;
}
#CONTACT textarea:focus,
#CONTACT input:focus{
	border:2px solid #FFFFFF;
}
#CONTACT input.RAD{	width:1rem; }
#CONTACT .BUT{		cursor:pointer;  width:60%;  color:#000000; }
#BCONT{				text-align:center; width:100%; }
#CONTACTMSG{
	text-align:center;
	padding:0px;
	text-align:center;
	color:#FF3333;
	font-weight:bold;
}

/*	==========================================================
	PROJECTEN
	==========================================================	*/
#PROJ .BOL{
	top:165px;
	bottom:auto;
	left:auto;
	right:-75px;;
}
.PGRID{
	display: flex;
	width:100%;
	flex-wrap:wrap;
	margin:0 -10px;
	/* justify-content: center; center last row */
}
.PBOX{
	width:33.3333%;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:10px;
	transition: padding 0.5s ease;
}
.POVERLAY{
	position:absolute;
	z-index:10;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgb(0,0,0,0);
	transition: background-color 0.5s ease;
}
.PBOXA span{
	z-index:11;
}
.PBOX:hover {
	padding:0px;
}
.PBOX:hover  .PBOXA span{
	font-size:1.4rem;
}
.PBOX:hover .POVERLAY{
	background-color:rgb(0,0,0,0.5);
}

.PBOX .PBOXA{
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	background-color:#CCCCCC;
	color: black;
	cursor:pointer;
	text-decoration:none;
}
.PBOX .PBOXA img{
	position:absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.PBOX .PBOXA span{
	font-weight:bold;
	font-style: italic;
	font-size:1.1rem;
	transition: font-size 0.5s ease;
	text-align:center;
}

.PBOX .PBACKTRANS{		background-color:transparent; }
.PBOX .PBACKGOLD{		background-color:#9a8731; }
.PBOX .PBACKGREY{		background-color:#a8b9c3; }
.PBOX .PBACKBLUE{		background-color:#104263; }

.PBOX .PTEXTGOLD{		color:#9a8731; }
.PBOX .PTEXTGREY{		color:#a8b9c3; }
.PBOX .PTEXTBLUE{		color:#104263; }
.PBOX .PTEXTWHITE{	color:#FFFFFF; }

/*	DETAIL 	*/
#PROJDESC{
	padding:2rem 100px;
	padding-bottom:5rem;
}
#PROJDESC h1{
	color:#9a8731;
	text-transform: uppercase;
	margin-bottom:1rem;
}
#PROJPICS{
	margin:-3rem 120px 0 120px;
	width:auto;
	/* border:1px solid red; */
}

#PROJ #PROJPICS .BOL{
	top:auto;
	bottom:-30px;
	left:auto;
	right:-50px;
}
/*	==========================================================

	-------- MOBILE VERSION --------

	==========================================================	*/
@media screen and (max-width: 48rem) { /* 768px */
/*	==========================================================
	HEADER /MENU
	==========================================================	*/
	body{
		grid-template-rows:auto 1fr;
	}
	header{
	}
	nav{
		align-self: end;
		padding-bottom:0px
	}
	nav ul{
		display:none;
	}
	#MOBMENU{		
		display:block;
	}
	#MENUICO{		
		display:block; 
	}	
	#HEADLOGO img{
		width:60vw;
		height:auto;
	}
/*	==========================================================
	HOME
	==========================================================	*/
	.OVERLAY{	
		display:grid;
	}
/*	==========================================================
	CSS ALL
	==========================================================	*/
	section, .SECTION{
		padding:0px 1rem 100px 1rem;
		width:100%;
		/* border:1px solid blue; */
	}
	article, .ARTICLE{
		width:100%;
		text-align:left; 
		padding:0px 0px;
		/* border:1px solid red; */
	}
/*	==========================================================
	OVER
	==========================================================	*/
	#OVERGRID{
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	#OVERCOL1{
		display:grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: 1fr;
		background: linear-gradient(to bottom, transparent 60%, #aebec8 40%);
	}
	#OVERCOL1 img{
		display:inline;
		width:60%;
	}
	#OVERSTEF{
		padding-top:0;
		align-self:start;
		justify-self:start;
		padding-left:2rem;
	}
	#OVERTINA{
		text-align:right;
		width: 100%;
		padding-bottom:0;
		padding-right:2rem;
	}
	#OVER .BOL{
		top:auto;
		bottom:0px;
		left:auto;
		right:0px;
	}
/*	==========================================================
	WERKWIJZE
	==========================================================	*/
	#WERK p{
		padding:0 2rem;
	}
	#WERKRIJ1, #WERKRIJ3{
		grid-template-columns: auto;
		grid-template-rows: auto auto;
		background: linear-gradient(to bottom, transparent 5%, #aebec8 5%);
	}
	#WERKRIJ1 img, #WERKRIJ3 img, #WERKRIJ2 img{
		padding:0 3rem;
	}
	#WERKRIJ1 p, #WERKRIJ3 p{
		padding:1rem 1rem;
	}
	#WERKRIJ2{
		grid-template-columns: auto;
		grid-template-rows: auto auto;
	}
	#WERKRIJ2 p{
		padding:1rem 1rem;
		grid-row: 1;
	}
	#WERKRIJ2 p{
		grid-row: 2;
	}
	#WERK .BOL{
		top:auto;
		bottom:-85px;
		left:auto;
		right:-1rem;
	}
	#WERK .BOL p{
		padding:0;
	}
/*	==========================================================
	CONTACT
	==========================================================	*/
	#CONTACT .BOL{
		bottom:-5rem;
		right:-1rem;
	}
	#CONTGRID{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap: 0px;
		width:100%;
		padding:0rem 2rem; 
		margin:0rem 0;
	}
	#CONTNIX1{
		display;none;
	}
	#CONTHEAD{
		grid-row: 1;
		grid-column: span 2;
	}
	#CONTACT h2{
	font-size:1.2rem;
	padding-bottom:1rem;
}
	#CONTNAAM{
		padding-top:1.5rem;
		grid-row: 3;
	}
	#CONTTINA{
		grid-row: 4;
	}
	#CONTSTEF{
		grid-row: 4;
	}
	#CONTFORM{
		grid-row: 2;
		grid-column: span 2;
	}
	#CONTNIX2{
		display;none;
	}
	#CCONTSUBM{
		grid-row: 3;
		text-align:right;
	}
/*	==========================================================
	PROJECTEN
	==========================================================	*/
	#PROJ .BOL{
		top:auto;
		margin-top:auto;
		bottom:-100px;
		left:auto;
		right:-1rem;
	}

	.PBOX:hover  .PBOXA span{
		font-size:1rem;
	}
	.PBOX .PBOXA span{
		font-size:0.8rem;
	}

/*	DETAIL 	*/
	#PROJPICS{
		margin:-3rem 50px 0 50px;
		/* border:1px solid red; */
	}

	#PROJDESC{
		padding:2rem 50px;
		padding-bottom:5rem;
	}
	#PROJ #PROJPICS .PBOX{
		width:100%;
	}
	#PROJ #PROJPICS .BOL{
		top:200px;
		bottom:auto;
		left:auto;
		right:-4rem;
	}