@charset "UTF-8";
/* LESS CSS Document */
@font-face {
    font-family: 'flexo';
    src: url('../fonts/flexo.eot');
    src: url('../fonts/flexo.eot?#iefix') format('embedded-opentype'),
         url('../fonts/flexo.woff') format('woff'),
         url('../fonts/flexo.ttf') format('truetype'),
         url('../fonts/flexo.svg#flexo') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'perpetua';
    src: url('../fonts/perpetua.eot');
    src: url('../fonts/perpetua.eot?#iefix') format('embedded-opentype'),
         url('../fonts/perpetua.woff') format('woff'),
         url('../fonts/perpetua.ttf') format('truetype'),
         url('../fonts/perpetua.svg#perpetua') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gotham';
    src: url('../fonts/gotham.eot');
    src: url('../fonts/gotham.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gotham.woff') format('woff'),
         url('../fonts/gotham.ttf') format('truetype'),
         url('../fonts/gotham.svg#gotham') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font:'flexo', Arial, Helvetica, sans-serif;
@fonts:'perpetua', Arial, Helvetica, sans-serif;
@fontt:'gotham', Arial, Helvetica, sans-serif;

header{
	height:143px;
	margin:0 auto;
	padding:50px 15px 0 15px;
	width:1170px;
		h1{
			background-image:url(../img/biemar.svg);
			float:left;
			height:93px;
			width:145px;
				a{
					display:block;
					height:93px;
					width:145px;
				}
		}
		nav{
			ul.menu{
				display:flex;
				float:right;
				margin-top:38px;
					li.menu-item{
						a{
							color:#3c441f;
							font-family:@font;
							font-size:16px;
							padding:15px;
							position:relative;
							text-decoration:none;
							transition:color 0.5s;
							margin-left:50px;
						}
						a:hover, a:focus{
							color:#93d82a;
						}
					}
					li.current-menu-item a{
						color:#93d82a;
					}
			}
		}
		span.responsive{
			display:none;
			float:right;
			margin:32px 10px 0 0;
		}
		div.menu-responsive{
			display: none;
				div{
					background-color:#FFF;
					left:-20px;
					position:absolute;
					top:143px;
					width:111%;
					z-index:1;
						ul{
							display:none;
								li{
									display:block;
										a{
											border-bottom:1px solid #3c441f;
											color:#3c441f;
											display:block;
											font-family:@font;
											font-size:16px;
											height:28px;
											margin:10px 0 0 20px;
											text-decoration:none;
											text-transform:uppercase;
										}
								}
						}
				}
		}
		div.menu-responsive div li:last-child a{
			border:none;
		}
}

/* EFFET MENU */
ul#menu-menu-principal li.menu-item a::before, ul#menu-menu-principal li.menu-item a::after{
	border:2px solid #93d82a;
	content:'';
	height:10px;
	opacity:0;
	position:absolute;
	transition:transform 0.5s, opacity 0.5s;
	transition-timing-function:cubic-bezier(0.17, 0.67, 0.05, 1.29);
	width:10px;
}
ul#menu-menu-principal li.menu-item a::before{
	border-width:2px 0 0 2px;
	left:0;
	top:0;
	transform:translate3d(30px, 30px, 0);
}
ul#menu-menu-principal li.menu-item a::after {
	border-width:0 2px 2px 0;
	bottom:0;
	right:0;
	transform:translate3d(-30px, -30px, 0);
}
ul#menu-menu-principal li.menu-item a:hover::before, ul#menu-menu-principal li.menu-item a:hover::after{
	opacity:1;
	transform:translate3d(0, 0, 0);
}
ul#menu-menu-principal li.current-menu-item a::before, ul#menu-menu-principal li.current-menu-item a::after{
	opacity:1;
	transform:translate3d(0, 0, 0);
}
/* FIN EFFET MENU */

div#bgd{
	background-image:url(../img/bgd.jpg);
	background-position:center;
	background-size:cover;
	float:left;
	height:200px;
	width:100%;
		h1{
			color:#FFF;
			font-family:@fonts;
			font-size:100px;
			font-weight:100;
			margin-top:30px;
			text-align:center;
			width:100%;
				strong{
					color:#93d82a;
					font-weight:100;
				}
		}
		h2{
			color:#FFF;
			font-family:@fontt;
			font-size:20px;
			font-weight:100;
			letter-spacing:5px;
			margin-top:-17px;
			text-align:center;
			width:100%;
		}
}
nav.menu-menu-categories-container{
	border-bottom:1px solid #f2f2f3;
	width:100%;
		ul#menu-menu-categories{
			display:flex;
			justify-content:center;
			margin:0 auto;
			padding:0px 15px 0 15px;
			width:1170px;
				li{
					flex:1;
					text-align:center;
						a{
							color:#3c441f;
							display:block;
							font-family:@font;
							font-size:12px;
							height:36px;
							padding-top:23px;
							position:relative;
							text-decoration:none;
							transition:color 0.5s;
							width:100%;
						}
						a:hover{
							color:#FFF;
						}
						a::before{
							background-color:#93d82a;
							border-radius:10px;
							content:'';
							display:block;
							height:29px;
							opacity:0;
							position:absolute;
							top:15px;
							transition:opacity 0.5s;
							width:100%;
							z-index:-1;
						}
						a:hover::before{
							opacity:1;
						}
				}
				li.current-menu-item{
					a{
						color:#FFF;
					}
					a::before{
						opacity:1;
					}
				}
		}
}
section#projets{
	display:flex;
	justify-content:center;
	margin:0 auto;
	padding:75px 15px 90px 15px;
	width:1170px;
		h3{
			color:#3c441f;
			flex:1;
			font-family:@fonts;
			font-size:52px;
			font-weight:100;
			margin-top:-12px;
			text-transform:uppercase;
		}
		h3::after{
			background-color:#93d82a;
			content:' ';
			display:block;
			height:2px;
			margin-top:3px;
			width:50px;
		}
		h6{
			color:#3c441f;
			flex:1;
			font-family:@fonts;
			font-size:25px;
			font-weight:100;
			margin-top:-118px;
			text-transform:uppercase;
		}
		h6::after{
			background-color:#93d82a;
			content:' ';
			display:block;
			height:2px;
			margin-top:3px;
			width:50px;
		}
		ul{
			flex:2;
				li.projet{
					float:left;
					height:250px;
					margin:0 0 30px 30px;
					width:46%;
						div{
							background-position:center;
							background-size:cover;
							height:250px;
							width:100%;
							text-align:center;
								h4{
									color:#FFF;
									font-family:@font;
									font-size:18px;
									font-weight:100;
									opacity:0;
									position:absolute;
									text-transform:uppercase;
									transform:translate3d(0,112px,0);
									transition:opacity 0.3s, transform 0.3s;
									width:100%;
									z-index:2;	
								}
								span{
									background-color:#FFF;
									display:block;
									height:1px;
									margin-left:10%;
									opacity:0;
									position:absolute;
									transition:opacity 0.3s;
									top:125px;
									width:80%;
									z-index:2;
								}
								h5{
									color:#FFF;
									font-family:@font;
									font-size:14px;
									font-weight:100;
									opacity:0;
									position:absolute;
									transform:translate3d(0,115px,0);
									transition:opacity 0.3s, transform 0.3s;
									width:100%;
									z-index:2;
								}
						}
						div::after{
							background-color:#6f9746;
							content:'';
							display:block;
							height:250px;
							opacity:0;
							transition:opacity 0.3s;
							width:100%;
							z-index:1;
						}
						div:hover::after{
							opacity:0.9;
						}
						div:hover h4{
							opacity:1;
							transform:translate3d(0,82px,0);
						}
						div:hover span{
							opacity:1;	
						}
						div:hover h5{
							opacity:1;
							transform:translate3d(0,145px,0);
						}
				}
				li.lien{
					float:left;
					margin:35px 0 0 30px;
					text-align:center;
					width:96%;
						a{
							background-color:#93d82a;
							border:1px solid #93d82a;
							border-radius:15px;
							color:#FFF;
							font-family:@font;
							font-size:16px;
							padding:15px 25px 15px 25px;
							text-decoration:none;
							transition:all 0.5s;
						}
						a:hover{
							background-color:#FFF;
							color:#6f9746;
						}
				}
		}
		ul.category{
			flex:3;
				li.projet{
					float:left;
					height:250px;
					margin:0 2% 2% 0;
					width:31.3%;
				}
				li.projet:nth-child(3n){
					margin:0 0 2% 0;
				}
		}
		p{
			color:#93d82a;
			flex:2;
			font-family:@font;
			font-size:14px;
			font-weight:100;
			line-height:25px;
			margin:-119px 0 -23px 0;
			text-transform:uppercase;
				a{
					color:#3c441f;
					text-decoration:none;
				}
				a:hover{
					color:#93d82a;
				}
		}
}
nav.menu-menu-navigation-container{
	border-bottom:1px solid #f2f2f3;
	width:100%;
		ul#menu-menu-navigation{
			display:flex;
			justify-content:center;
			margin:0 auto;
			padding:0px 15px 0 15px;
			width:1170px;
				li{
					flex:1;
					text-align:center;
						a{
							color:#3c441f;
							display:block;
							font-family:@font;
							font-size:12px;
							height:36px;
							padding-top:23px;
							position:relative;
							text-decoration:none;
							transition:color 0.5s;
							width:100%;
						}
						a:hover{
							color:#FFF;
						}
						a::before{
							background-color:#93d82a;
							border-radius:10px;
							content:'';
							display:block;
							height:29px;
							opacity:0;
							position:absolute;
							top:15px;
							transition:opacity 0.5s;
							width:100%;
							z-index:-1;
						}
						a:hover::before{
							opacity:1;
						}
				}
		}
}
section#projet{
	font-size:0px;
	margin:0 auto;
	padding:75px 15px 52px 15px;
	width:1170px;
		div.img{
			background-position:center;
			background-size:cover;
			height:750px;
			margin-bottom:49px;
			width:98%;
		}
		h3{
			color:#3c441f;
			font-family:@fonts;
			font-size:52px;
			font-weight:100;
			padding-top:13px;
			text-transform:uppercase;
		}
		h3.noimg{
			margin-top:-26px;
		}
		h3::after{
			background-color:#93d82a;
			content:' ';
			display:block;
			height:2px;
			margin-top:3px;
			width:50px;
		}
		div.contenu{
			display:flex;
			justify-content:center;
			margin:44px 2% 75px 0;
				div.description{
					flex:1;
						p{
							color:#3c441f;
							font-family:@font;
							font-size:14px;
							font-weight:100;
							line-height:24px;
							text-align:justify;
						}
				}
				ul{
					color:#3c441f;
					flex:1;
					font-family:@font;
					font-size:14px;
					margin:-12px 0px 0px 50px;
						li{
							border-bottom:1px solid #f2f2f3;
							padding:15px 0 15px 0;
								strong{
									color:#6f9746;
								}
						}
				}
		}
		div.noimg{
			margin:44px 2% 23px 0;
		}
		div.galerie{
			background-position:center;
			background-size:cover;
			display:inline-block;
			height:250px;
			margin:0 2% 2% 0;
			width:31.3%;
		}
}
nav.menu-menu-apropos-container{
	border-bottom:1px solid #f2f2f3;
	width:100%;
		ul#menu-menu-apropos{
			display:flex;
			justify-content:center;
			margin:0 auto;
			padding:0px 15px 0 15px;
			width:1170px;
				li{
					flex:1;
					text-align:center;
						a{
							color:#3c441f;
							display:block;
							font-family:@font;
							font-size:12px;
							height:36px;
							padding-top:23px;
							position:relative;
							text-decoration:none;
							transition:color 0.3s;
							width:100%;
						}
						a:hover{
							color:#FFF;
						}
						a::before{
							background-color:#93d82a;
							border-radius:10px;
							content:'';
							display:block;
							height:29px;
							opacity:0;
							position:absolute;
							top:15px;
							transition:opacity 0.3s;
							width:100%;
							z-index:-1;
						}
						a:hover::before{
							opacity:1;
						}
				}
				li:first-child{
					a{
						color:#FFF;
					}
					a::before{
						opacity:1;
					}
				}
		}
}
section#apropos{
	margin:0 auto;
	padding:69px 15px 7px 15px;
	width:1170px;
		div{
			display:flex;
			margin-bottom:60px;
			width:100%;
				h3{
					color:#3c441f;
					flex:1;
					font-family:@fonts;
					font-size:52px;
					font-weight:100;
					margin-top:-7px;
					text-transform:uppercase;
				}
				h3::after{
					background-color:#93d82a;
					content:' ';
					display:block;
					height:2px;
					margin-top:3px;
					width:50px;
				}
				div.txt{
					flex:2;
					flex-direction:column;
					margin:0;
						p{
							color:#3c441f;
							font-family:@font;
							font-size:14px;
							font-weight:100;
							line-height:24px;
							text-align:justify;
						}
				}
		}
}
section#contact{
	display:flex;
	flex-direction:column;
	margin:0 auto;
	padding:62px 15px 0 15px;
	width:1170px;
		h3{
			color:#3c441f;
			font-family:@fonts;
			font-size:52px;
			font-weight:100;
			text-transform:uppercase;
		}
		h3.lux{
			margin-top:-13px;
		}
		h3::after{
			background-color:#93d82a;
			content:' ';
			display:block;
			height:2px;
			margin:3px 0px 27px 0px;
			width:50px;
		}
		p{
			color:#3c441f;
			font-family:@font;
			font-size:16px;
			font-weight:100;
			line-height:24px;
			text-align:justify;
				a{
					color:#3c441f;
					text-decoration:none;
				}
				a:hover{
					color:#93d82a;
				}
		}		
		div.acf-map{		
			height:500px;
			margin:43px 0px 75px 0px;
			width:100%;
		}		
		div.acf-map img {
   			max-width: inherit !important;
		}	
}
section#m-l{
	display:flex;
	flex-direction:column;
	margin:0 auto;
	padding:62px 15px 0 15px;
	width:1170px;
		h3{
			color:#3c441f;
			font-family:@fonts;
			font-size:52px;
			font-weight:100;
			text-transform:uppercase;
		}
		h3::after{
			background-color:#93d82a;
			content:' ';
			display:block;
			height:2px;
			margin:3px 0px 27px 0px;
			width:50px;
		}
		h4{
			color:#3c441f;
			font-family:@fonts;
			font-size:24px;
			font-weight:100;
			text-transform:uppercase;
		}
		h5{
			color:#3c441f;
			font-family:@fonts;
			font-size:20px;
			font-weight:100;
			margin: 20px 0 5px 0;
			text-transform:uppercase;
		}
		p{
			color:#3c441f;
			font-family:@font;
			font-size:14px;
			font-weight:100;
			line-height:24px;
			text-align:justify;
				a{
					color:#3c441f;
					text-decoration:none;
				}
				a:hover{
					color:#93d82a;
				}
		}
}
footer{
	background-color:#6f9746;
	border-top:3px solid #93d82a;
	height:258px;
	width:100%;
		div#contenu{
			margin:0 auto;
			padding:46px 15px 0 15px;
			width:1170px;
				div#haut{
					border-bottom:1px solid #FFF;
					display:flex;
					justify-content:center;
					padding-bottom:36px;
						ul{
							color:#FFF;
							flex:1;
							font-family:@font;
							font-size:16px;
							text-transform:uppercase;
								li{
									margin-bottom:10px;
										a{
											color:#FFF;
											text-decoration:none;
										}
										a:hover{
											color:#3c441f;
										}
								}
						}
						ul#right{
							text-align:right;
						}
				}
				div#bas{
					margin-top:23px;
						div#copyright{
							color:#FFF;
							float:left;
							font-family:@font;
							font-size:12px;
						}
						a{
							color: #FFF;
							text-decoration: none;
						}
						a.smartcom{
							float:right;
							margin-top:-9px;
							transform:rotate(0deg);
							transition:all 0.5s;
						}
						a.smartcom:hover{
							transform:rotate(180deg);
						}
				}
		}
}

@media screen AND (max-width: 1170px){
	header{
		width:97%;
	}
	nav.menu-menu-categories-container{
		border-bottom:none;
			ul#menu-menu-categories{
				display:block;
				margin:200px 0 0 0;
				padding:0;
				width:100%;
					li{
						a{
							border-bottom:1px solid #f2f2f3;
							height:22px;
							padding-top:8px;
						}
						a:hover{
							background-color:#93d82a;
							color:#FFF;
						}
						a::before{
							display:none;
						}
					}
					li.current-menu-item{
						a{
							background-color:#93d82a;
							color:#FFF;
						}
					}
			}
	}
	section#projets{
		width:97%;
			ul{
				li.projet{
					width:45%;
				}
			}
	}
	nav.menu-menu-navigation-container{
		border-bottom:none;
			ul#menu-menu-navigation{
				display:block;
				margin:200px 0 0 0;
				padding:0;
				width:100%;
					li{
						a{
							border-bottom:1px solid #f2f2f3;
							height:22px;
							padding-top:8px;
						}
						a:hover{
							background-color:#93d82a;
							color:#FFF;
						}
						a::before{
							display:none;
						}
					}
					li:first-child{
						a{
							background-color:#93d82a;
						}
					}
			}
	}
	section#projet{
		width:97%;
	}
	nav.menu-menu-apropos-container{
		border-bottom:none;
			ul#menu-menu-apropos{
				display:block;
				margin:200px 0 0 0;
				padding:0;
				width:100%;
					li{
						a{
							border-bottom:1px solid #f2f2f3;
							height:22px;
							padding-top:8px;
						}
						a:hover{
							background-color:#93d82a;
							color:#FFF;
						}
						a::before{
							display:none;
						}
					}
					li:first-child{
						a{
							background-color:#93d82a;
						}
					}
			}
	}
	section#apropos{
		width:97%;
			div{
				h3{
					font-size:42px;
				}
			}
	}
	section#contact{
		width:97%;
	}
	section#m-l{
		width:97%;
	}
	footer{
		div#contenu{
			width:97%;
		}
	}
}

@media screen AND (max-width: 768px){
	header{
		width:95%;
			nav{
				display:none;
			}
			span.responsive{
				display: block;
			}
			div.menu-responsive{
				display: block;
			}
	}
	div#bgd{
		h1{
			font-size:85px;
			margin-top:41px;			
		}
		h2{
			font-size:18px;
		}
	}
	section#projets{
		width:95%;
			h6{
				font-size:18px;
			}
			ul{
				li.projet{
					height:300px;
					margin:0 0 30px 0;
					width:100%;
						div{
							height:300px;
								h4{
									transform:translate3d(0,140px,0);
								}
								span{
									top:150px;
								}
								h5{
									transform:translate3d(0,143px,0);
								}
						}
						div::after{
							height:300px;
						}
						div:hover h4{
							transform:translate3d(0,110px,0);
						}
						div:hover h5{
							transform:translate3d(0,173px,0);
						}
				}
				li.lien{
					width:88%;
				}
			}
			ul.category{
				flex:2;
					li.projet{
						height:300px;
						width:48%;
				}
				li.projet:nth-child(2n){
					margin:0 0 2% 0;
				}
			}
	}
	section#projet{
		width:95%;
	}
	section#apropos{
		width:95%;
			div{
				h3{
					font-size:32px;
					margin-top:-2px;
				}
			}
	}
	section#contact{
		width:95%;
	}
	section#m-l{
		width:95%;
	}
	footer{
		div#contenu{
			width:95%;
		}
	}
}

@media screen AND (max-width: 568px){
	header{
		width:90%;
	}
	div#bgd{
		h1{
			font-size:38px;
			margin-top:59px;			
		}
		h2{
			font-size:12px;
			line-height:18px;
			margin-top:0px;
		}
	}
	section#projets{
		width:90%;
			h3{
				display:none;
			}
			h6{
				display:none;
			}
			ul{
				li.lien{
					width:81%;
				}
			}
			ul.category{
				flex:1;
					li.projet{
						height:300px;
						margin:0 0 6% 0;
						width:100%;
				}
			}
	}
	section#projet{
		width:90%;
			div.img{
				height:200px;
			}
			h3{
				font-size:25px;
			}
			div.galerie{
				margin:0 0 6% 0;
				width:100%;
			}
	}
	section#apropos{
		width:90%;
			h3{
				display:none;
			}
	}
	section#contact{
		width:90%;
			h3{
				font-size:36px;
			}
	}
	section#m-l{
		width:90%;
			h3{
				font-size:36px;
			}
	}
	footer{
		div#contenu{
			width:90%;
				div#haut{
					ul{
						font-size:11px;
					}
				}
		}
	}
}