@font-face {font-family: 'Futura';font-weight:bold; font-style:normal;src: url('Fonts/FuturaPTBold.otf');}
@font-face {font-family: 'Raleway-Regular';font-weight:normal; font-style:normal;src: url('Fonts/Raleway-Regular.ttf');}
@font-face {font-family: 'Raleway-Bold';font-weight:bold; font-style:normal;src: url('Fonts/Raleway-Bold.ttf');}
@font-face {font-family: 'Raleway-SemiBold';font-weight:semi-bold; font-style:normal;src: url('Fonts/Raleway-SemiBold.ttf');}
@font-face {font-family: 'nunito';font-weight:light; font-style:normal;src: url('Fonts/Nunito-Light.ttf');}
@font-face {font-family: 'poppins-thin';font-weight:light; font-style:normal;src: url('Fonts/Poppins-Thin.ttf');}
@font-face {font-family: 'Poppins-ExtraLight';font-weight:light; font-style:normal;src: url('Fonts/Poppins-ExtraLight.ttf');}
@font-face {font-family: 'Poppins-Light';src: url('Fonts/Poppins-Light.ttf');}
@font-face {font-family: 'averes';font-weight:regular; font-style:normal;src: url('Fonts/AveresTitle-Regular.otf');}
@font-face {font-family: 'averes-light';font-weight:light; font-style:normal;src: url('Fonts/AveresTitle-Light.otf');}
@font-face {font-family: 'averes-thin';font-weight:light; font-style:normal;src: url('Fonts/AveresTitle-Thin.otf');}



.font-1{
	font-family:'Raleway-Bold';
	font-size:32px;
	line-height:32px;
	margin:0;
	color:#031c4d;
}

.font-2{
	font-family:'Raleway-Regular';
	line-height:14px;
	font-size:14px;
	margin:4px 0 0 0;
}

.font-2-2{
	font-family:'Raleway-Regular';
	line-height:14px;
	font-size:14px;
	margin:15px 0 0 0;
}

.font-3{
	font-family:'Raleway-SemiBold';
	line-height:14px;
	font-size:14px;
	margin:15px 0 0 0;
	color:#031c4d;
}

.font-5{
	font-family:'Raleway-Regular';
	line-height:12px;
	font-size:12px;
	margin:0;
}

.font-6{
	font-weight: 400;
	color:#212E53;
	margin:0;
}

.font-7{
	font-family:'nunito';
	line-height:25px;
	font-size:20px;
	margin:0;
}


* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	vertical-align: baseline;
	box-sizing:border-box;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
	
}
body {

	max-width: 1920px;
	margin: 0 auto;
	position: relative;
	top:0;
	font-family: 'Helvetica Neue', Helvetica, Arial;
	background-color: #faf9f8;
}

h1{
	font-size: 2em;
	font-family:'Poppins-ExtraLight';
	color:#212E53;
}

p{
	font-family:'poppins-thin';
}

a{
	cursor:pointer;
}

@media all and (min-width: 700px){

.translate{
	opacity: 0;
	transition: transform 0.7s ease-in-out, opacity 0.5s ease-in-out;
}

.translatex-left{
	transform: translateX(-100px);
}

.translatex-right{
	transform: translateX(100px);
}

.translatey-top{
	transform: translateY(-100px);
}

.translatey-bottom{
	transform: translateY(100px);
}


.translatey-top-1{
	transform: translateY(-50px);
}

.translatey-top-2{
	transition-delay: 150ms;
	transform: translateY(-50px);
}

.translatey-top-3{
	transition-delay: 300ms;
	transform: translateY(-50px);
}

.translatey-top-4{
	transition-delay: 450ms;
	transform: translateY(-50px);
}

}


#section-2{
	background-color: #faf9f8;
}

.section-content{
	display:flex;
	flex-direction:row;
	padding:200px 0;
}

.section-1-box{
	flex:1 1 50%;
	box-sizing: border-box;
}

.section-1-box-container{
	padding:0 100px;
}

.section-1-box img{
	width:100%;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
}

.section-1-box-text{
	padding:50px 100px;
}

.section-1-box-text h1{
		padding-bottom:50px;
}



@media all and (max-width: 699px){
#header-logo{
	display:none !important;
}

}


nav{
	background-color: white;
	width:100%;
	position:fixed;
	top:0;
	box-sizing:border-box;
	z-index:100;
	padding: 30px 0;
	transition: all 0.2s;
}

nav.scroll-active{
	padding: 0 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

nav.scroll-active-mobile{
	padding: 20px 0;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.label{
	display:none;
	width: 30px;
	justify-content: center;
	align-items: left;
	font-size: 30px;
	color: black;
	cursor: pointer;
	padding-left:20px;
}

#header-container{
	width:90%;
	margin:auto;
	transition: all 0.3s;
}

#header-nav{
	position:relative;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
}

#header-logo{
	display:flex;
	flex-direction:row;
	width:5%;
}


.logo{
	width:100%;
	transition: all 0.2s;
}

.scroll-active-logo{
	width:80% !important;
}


#nav{
	display:flex;
	padding:20px 0 20px 0;
	list-style-type:none;
	text-decoration:none;
}

#header-nav ul li{
	margin:0 40px 0 40px;
	text-align:center;
	position: relative;
}

#header-nav ul li a{
	text-decoration:none;
	color:black;
	letter-spacing:1px;
	font-weight:bold;
	font-family:'Poppins-Light';
	font-size:14px;
	display:block;
}


.nav-active{
	border-bottom: 1px solid #03224C;
}

#header-nav ul li a:hover{
	color:grey;
}

.logos{
	width:25px;
	margin-left:10px;
	margin-top:20px;
}

ul.submenu {
	display: none;
	position: absolute;
	left: 0;
	top:100%;
	list-style: none;
	padding: 20px 0 0 0;
	margin: 0;
	min-width: 150px;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	z-index:50;
	background-color:white;
}
		
.submenu li {
	width: 100%;
}

.submenu a {
	padding: 20px;
	color: white;
	display: block;
	text-align:left;
}

#nav-submenu:hover ul.submenu{
	display: block !important;
}





@media all and (max-width: 699px){

#section-header{
	max-height:2000px!important;

}
#section-header-img{
	height:100%;
}
#section-header img{
	object-fit:cover;
	height:100%;
}
#section-header .section-header-logo img{
	width:80% !important;
}
}

















#first-section{
	margin-top: 0;
}


#section-header{
	width:100%;
	position:relative;
	box-sizing: border-box;
	max-height:600px;
	overflow:hidden;
}

#section-header-img{
	position: relative;
}

#section-header img{
	object-fit:cover;
	width:100%;
}

.section-header-logo{
	position: absolute;
	display: flex;
	flex-direction: column;
	grid-gap: 2rem;
	box-sizing: border-box;
	z-index: 1;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
	max-width: 1000px;
	align-items: center;
}

.section-header-logo{
	width:50%;
}

#section-header .section-header-logo img{
	width:30%;
}



.section-header-logo h1{
	font-size: 20px;
    line-height: 20px;
	font-style: normal;
	font-weight: 400;
	color:white;
	text-align:center;
	text-shadow:0 0 10px grey;
	font-family:'Poppins-ExtraLight';
}







@media all and (max-width: 699px){

#section-title{
	width:80% !important;
}
#section-title p{
	width:90%;
}

.section-title-container{
	flex-wrap:wrap;
}

.section-title-contain-order-3{
	order:3;
	flex: 1 0 50% !important;
}

.section-title-contain-order-2{
	order:2;
	flex: 1 0 50% !important;
}

.section-title-contain-order-1{
	order:1;
	flex: 1 0 100% !important;
	padding-bottom:50px;
}


}






#section-title{
	width:60%;
	margin:150px auto 80px auto;
}

#section-title h1{
	font-family: 'averes-light';
	font-size: 40px;
	text-align:center;
}

#section-title p{
	text-align:center;
}

.section-title-container{
	display:flex;
	margin:auto;
	align-items:center;
	justify-content: center;
}

p.intro{
	padding: 100px 0;
	width:75%;
	margin:auto;
	font-size:20px;
}

.section-title-contain{
	flex:1 0 33%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content: center;
}

.section-title-contain img{
	width:100px;
	transition: all 150ms ease-in-out;
	filter:grayscale(90%);
	opacity:50%;
}

.section-title-contain img:hover{
	transform:scale(1.1);
	filter:grayscale(0);
	opacity:100%;
}







#section-2{
	width:auto;
}

#section-2-container{
	margin:0 auto 100px auto;
	width:80%;
	text-align:center;
}



.section-2-flex p{
	padding:50px 0;
}



#section-2-flex{
	display:flex;
}

.section-2-flex{
	flex: 1 0 50%;
}

#section-2-flex-right{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:60%;
	height:100%;
	margin:auto;
}

#section-2-flex-right p a{
	text-decoration:none;
	color:#007397;
}

#section-2-flex-right p a:hover{
	color:#0F3B44;
}

#section-2-flex-right a img{
	transition: all 150ms ease-in-out;
}

#section-2-flex-right a img:hover{
	transform:scale(1.1);
}

#section-2-flex-right>*{
	padding:20px 0;
}

.carte{
	width:50% !important;
}

#section-2-flex img{
	width:100px;
}

#section-2-flex-right-2 img{
	padding:0 20px;
}



@media all and (max-width: 700px){
	
#section-2-flex{
	flex-direction:column;
}

#section-2-title{
	width:100% !important;
}


}



#footer-flex{
	display:flex;
	flex-direction:row;
	min-height:300px;
	box-sizing:border-box;
}

.footer-flex-box{
	flex: 1 0 33.33%;
	box-sizing:border-box;
	padding-bottom:100px;
}

.footer-flex-box:nth-child(1){
	background-color: #c3a571;
	padding-right:100px;
	padding-left:100px;
}

.footer-flex-box:nth-child(2){
	background-color: #c3a571;
	padding-right:100px;
}

.footer-flex-box:nth-child(3){
	background-color: #9C7B51;
}

.footer-flex-box-content{
	display:flex;
	flex-direction:column;
	padding-top:100px;
}

.footer-flex-box-content-right{
	height:100%;
	box-sizing:border-box;
}

#footer-flex-box-right-content{
	display:flex;
	flex-direction:column;
	height:100%;
	justify-content:center;
	text-align:center;
}

.footer-logo{
	display:flex;
	flex-direction: row;
	justify-content: center;
}

.footer-logo a img{
	width:100px;
	height:100px;
	margin:20px;
	transition: all 0.1s;
}

.footer-logo a:hover img{
	transform: scale(1.1);
}


.footer-flex-box-content h2{
	text-decoration: none;
	color: #9C7B51;
	font-size: 30px;
	font-family: 'poppins-thin';
	margin-bottom:10px;
}

.footer-flex-box-content p, .footer-flex-box-content a p{
	font-family: 'nunito';
	font-size: 1.1em;
	margin-bottom:10px;
	color:white;
}


.footer-flex-box-content a{
	text-decoration:none;
	color:white;
}

.footer-flex-box-content a:hover p{
	color:grey;
}

.footer-flex-box-content-right h2{
	color:white;
}




@media all and (max-width: 700px){

 footer{
	margin-top: 0 !important;
}

#footer-flex{
	flex-direction:column !important;
}

.footer-flex-box{
	flex: 1 0 100% !important;
	padding: 50px 50px 0 50px !important;
}

.footer-flex-box:nth-child(2){
	padding-bottom: 50px !important;
}

.footer-flex-box:nth-child(3){
	padding: 50px !important;
}

.footer-flex-box-content{
	padding-top:0 !important;
}

.footer-logo a img{
	transition: all 0.1s;
}

.footer-logo a:hover img{
	transform: scale(1.1);
}


}












@media all and (max-width: 699px){

.label{
	display: flex;
}

nav{
	padding:20px 0;
}

#header-container{
	display: none;
}

#header-nav{
	width:100%;
}

ul#nav{
	width:100%;
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

ul#nav li{
	padding: 15px 0;
}

#header-titre{
	display:none;
}



.section-header-logo{
	width:50%;
}

.section-header-logo{
	grid-gap: 1rem;
}

.section-header-logo h1{
	font-size: 14px;
    line-height: 14px;
}







#section-slide-container{
	flex-wrap : wrap;
}

#section-slide-text{
	padding: 0 15px 0 15px !important;
}

.section-slide{
	flex: 1 1 50%;
	min-width:50%;
	min-height:400px !important;
	margin: 0 !important;
	padding-bottom: 10px !important;
}

.section-slide:nth-child(even){
	padding-right:0 !important;
	padding-left:5px !important;
}

.section-slide:nth-child(odd){
	padding-left:0 !important;
	padding-right:5px !important;
}

.section-slide:nth-child(2){
	padding-right:10px !important;
}

.section-slide-link{
	display: block;
	height:100%;
	max-height:400px;
	width:100%;
}

.section-slide-button button{
width: fit-content !important;
}






.section-content{
	flex-direction:column-reverse !important;
}

.section-1-box img{
	border-top-left-radius:0 !important;
	border-bottom-left-radius:0 !important;
}




ul.submenumobile{
	width:100%;
	position:relative;
	display:none;
	flex-direction:column;
	justify-content:center;
	list-style-type:none;
	text-decoration:none;
	padding: 15px 0 0 0 !important;
}

ul.submenumobile li{
	padding: 15px 0 !important;
}

ul.submenumobile li:last-child{
	padding: 15px 0 0 0 !important;
}

ul.submenumobile li a span{
	color:grey;
}





#contact-contain{
	width:80%;
}

#contact-gauche{
	display:block !important;
	width:100% !important;
	text-align:left !important;
	padding:15px 0 !important;
	vertical-align:top !important;
	margin-right:0 !important;
}

#contact-droit{
	width:100% !important;
	display:block !important;
	padding:15px 0 !important;
	vertical-align:top !important;
	margin-left:0 !important;
}

}











































@media all and (min-width: 991px){

.img-scale:hover{
	transform:scale(1.015);
	border-radius:3px;
}

}


@media all and (min-width: 991px){
	
	.section-flex-box:hover{
	flex: 1.3;
}
}

@media all and (min-width: 700px) and (max-width: 990px){

#section-flex{
	max-height: 1400px !important;
}

#section-flex-container{
	flex-wrap: wrap;
}

.section-flex-box:nth-child(1){
	flex: 1 1 50%;
}

.section-flex-box:nth-child(2){
	flex: 1 1 50%;
}

.section-flex-box:nth-child(3){
	flex: 2 1 100%;
}
}


@media all and (max-width: 699px){

#section-flex-container{
	flex-direction: column;
	height:1400px !important;
	justify-content:center !important;

}

#section-flex{
	max-height:1400px !important;
}

.section-flex-box{
	flex: 1 0 31% !important;
	margin:3% 0 !important;

}



.hidden-text{
	display:block !important;
	opacity:1 !important;
	position: relative !important;
	transform: translate(0, 0) !important;
	left:0 !important;
	top:0 !important;
}

.section-flex-box-text h2{
	position:relative !important;
	bottom: 0 !important;
	left: 0 !important;
	transform: translate(0, 0) !important;
}


}




#section-flex{
	max-height: 700px;
	overflow:hidden;
	margin:150px 0;
}

#section-flex-container{
	display: flex;
}

.section-flex-box{
	position:relative;
	background-position: 50.0% 50.0%;
	background-size: cover;
	height: 700px;
	flex: 1;
	transition: all 0.5s;
	filter:grayscale(0%);
}

.section-flex-box:nth-child(1){
	background-image:  url('photos/ossature-bois.jpg');
}

.section-flex-box:nth-child(2){
	background-image:  url('photos/isolation-comble-3.jpg');
}

.section-flex-box:nth-child(3){
	background-image:  url('photos/charpente.jpg');
}

.section-flex-box a{
	position:relative;
	margin:0;
	text-decoration: none;
}

.section-flex-box-text{
	color: #ffffff;
	justify-content: center;
	text-align: center;
	max-width: 300px;
	height:100%;
	margin:auto;
	font-size: 1.5rem;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	z-index:10;
}

.section-flex-box-text h2{
	text-decoration: none;
	color: white;
	font-size: 30px;
	font-family: 'averes';
	position:absolute;
	bottom:50%;
	left:50%;
	transform: translate(-50%,50%);
	width:100%;

}

.hide{
	width:100%;
	height:100%;
	display:none;
	opacity:0;
	background-color:#000000;
	position:absolute;
	cursor:pointer;
}

.hidden-text{
	font-family: 'nunito';
	line-height: 20px;
	font-size: 1.1em;
	font-size: 16px;
	display:none;
	opacity:0;
	position:absolute;
	padding-top:50px;
	top:50%;
	left:50%;
	transform: translate(-50%,0);
	width:100%;
	
}






@media all and (max-width: 990px){
	
#slideshow-general{
	flex-direction:column !important;
}

#slideshow-text{
	flex: 1 1 100% !important;
}

#slideshow-text-container{
	padding: 0 0 100px 0 !important;
}

#slideshow{
	padding-bottom: 100px;
}

.slides {
	height:500px !important;
}

}


#slideshow-general{
	width:80%;
	margin:auto;
	margin-top:100px;
	padding-bottom:150px;
	display:flex;
	flex-direction:row;
}

#slideshow-text{
	flex: 1 1 50%;
	box-sizing: border-box;
}

#slideshow-text-container{
	display:flex;
	flex-direction: column;
	height: 100%;
	justify-content:center;
	text-align:center;
	padding: 0 100px;
}

#slideshow-text-container p{
	padding-top: 100px;
	font-family: 'nunito';
	line-height: 25px;
	font-size: 1.1em;
}





#slideshow{
	flex: 1 1 50%;
	box-sizing: border-box;
	overflow:hidden;
	position:relative;
}
		
		.slides {
            display:flex;
			box-sizing: border-box;
			height:1000px;
			font-size:0;
        }
		
        .slide {
			flex: 1 0 100%;
			position: relative;
			background-size:cover;
			background-position: center;
        }

		
        .prev, .next {
            position: absolute;
			box-sizing: border-box;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 1);
            color: white;
            border: none;
            padding: 20px;
            cursor: pointer;
            clip-path:circle(40%);
			transition:color 0.2s;
			transition:background-color 0.4s;
        }
		
		.prev:hover, .next:hover {
            color: black;
			background-color: rgba(255, 255, 255, 0.5);
        }
		
        .prev { left: 10px; }
        .next { right: 10px; }








.section-example{
	background-color:#4B413A;
}

.section-example-titre{
	width:80%;
	margin:auto;
	margin-top:200px;
	padding-bottom:300px;
	background-color:#faf9f8;
}

.section-example-titre h1{
	font-size: 50px;
}

.section-example-titre h1.h1-right{
	text-align:right;
}



.section-example-titre p{
	margin: 3% 10% 8% 50%;
	padding-right:2%;
	text-align:right;
	border-right: 1px solid #A89B91;
}

.section-example-titre p.p-right{
	margin: 3% 50% 8% 10%;
	padding-left:2%;
	text-align:left;
	border-left: 1px solid #A89B91;
	border-right: none;
}

.section-example-photo{
	width:80%;
	margin:auto;
	padding-top:300px;
	position:relative;
}

.photo-avant{
	position:absolute;
	transform:translateY(-600px);
	width:100%;
	height:600px;
	overflow:hidden;
	border-radius:5px;
}

.photo-avant.photo-avant-2{
	position:relative;
	transform:translateY(0);
}

.section-example-photo-container{
	display:flex;
}

.section-example-photo-container p{
	flex: 1 0 25%;
	padding: 80px 0;
	color:white;
	text-align:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
}


.photo-container{
	display:flex;
	width:100%;
	height:100%;
}

.photo-container-img{
	flex: 1 0 48%;
	border-radius:10px;
	background-size:cover;
	background-position: center;
	background-repeat:no-repeat;
}

.photo-container-img-3{
	flex: 1 0 32%;
	border-radius:10px;
	background-size:cover;
	background-position: center;
	background-repeat:no-repeat;
}

.photo-container-img.hangar1{
	margin-right:1%;
	background-image: url('photos/hangar-1.jpg');
}

.photo-container-img.hangar2{
	margin-left:1%;
	background-image: url('photos/extension.jpg');
}

.photo-container-img-3.pergola1{
	margin-right:1%;
	background-image: url('photos/pergola.jpg');
}

.photo-container-img-3.pergola2{
	margin-left:1%;
	margin-right:1%;
	background-image: url('photos/carport.jpg');
}

.photo-container-img-3.pergola3{
	margin-left:1%;
	background-image: url('photos/pergola-dome.jpg');
}



@media (max-width: 699px) {



.section-example-photo-container{
	flex-wrap:wrap;
	padding: 50px 0;
}

.section-example-photo-container p{
	flex: 1 0 50%;
	padding:20px 0 !important;
}

.section-example-titre p {
	margin: 0 0 50px 0 !important;
	padding: 20px !important;	
}

.section-example-photo-1{
	padding-top:150px !important;
}

.photo-avant-1{
	transform:translateY(-300px) !important;
	height:300px !important;
}

.photo-avant-2{
	height:300px !important;
}

.section-example-titre-1 {
	padding-bottom:150px !important;	
}

.photo-container{
	flex-direction:column;
}

.photo-container-img{
	margin: 20px 0;
	flex: 0 1 48%;
}

.photo-container-img-3{
	margin: 20px 0;
	flex: 0 1 32%;
}

.section-deroulant{
	margin-top:50px !important;
}

.section-example-titre h1{
	font-size: 10vw !important;
}

}















:root {
  --ba-transition-speed: 100ms;
  --ba-thumb-size: 24px;
}




div.ab-wrapper {
  display: flex;
  width:100%;
  height:100%;
  margin: 0 auto;
  align-items:center;

}
 div.after-before {
    position: relative;
    display: flex;
    margin: 0;
    box-shadow: 0 0 1px black;
	overflow:hidden;
  }
    .bottom-img {
      width: 100%;
      height:auto;
      margin: 0;
    }
	
    .top-img {
      position: absolute;
      inset: 0;
      width: 100%;
      max-width: 100%;
      margin: 0;
      clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
      transition: clip-path var(--ba-transition-speed) ease-out;
    }
	
	.top-img-none {
      display:none;
    }
	
    .slider-mark {
      position: absolute;
      width: 1px;
      height: 100%;
      left: 50%;
      background-color: rgba(0,0,0,.25);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transform: translateX(-50%);
      transition: left var(--ba-transition-speed) ease-out;
	}
      .slider-mark::before {
        content: "\0021C4";
        font-family: 'nunito';
        font-weight: 900;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: rgba(15, 42, 67, 75%);
        color: white;
        width: 50px;
        height: 50px;
		animation-duration: 4s;
		animation-name: clignoter;
		animation-iteration-count: infinite;
		transition: none;
      }
	  
@keyframes clignoter {
	0%   { transform:translateX(0); }
	40%   { transform:translateX(0); }
	45%   {transform:translateX(4px); }
	47% { transform:translateX(-4px); }
	50%   { transform:translateX(2px); }
	53%   {transform:translateX(-2px); }
	55%   {transform:translateX(2px); }
	70%   {transform:translateX(0); }

}
    
    input[type="range"].hook {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      position: absolute;
      display: flex;
      overflow: hidden;
      justify-content: center;
      align-items: center;
      height: 100%;        
      width: calc(100% + var(--ba-thumb-size));
      inset: 0;
      margin: 0 calc( 0px - calc(var(--ba-thumb-size) / 2) );
      padding: 0;
      background-color: transparent;
      cursor: pointer;
      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background-color: transparent;
        box-shadow: 0 0 0 transparent;
        width: var(--ba-thumb-size);
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        cursor: col-resize;
     }
      &::-moz-range-thumb {
        -moz-appearance: none;
        appearance: none;
        background-color: transparent;
        box-shadow: 0 0 0 transparent;
        width: var(--ba-thumb-size);
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        cursor: col-resize;
      }
    }







.section-deroulant{
	display:none;
	position:relative;
	margin-top:150px;
	overflow:hidden;
}



.bouton-deroulant-container{
	width:100%;
	display:flex;
    justify-content: flex-end;
}

.btn-1{
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.btn-1 div{
  text-decoration: none;
  cursor: pointer;
  border: 2px solid white;
  padding: 15px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  display: inline-block;
}

span {
  position: relative;
  z-index: 3;
}

.btn-1 div::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -2px;
  width: calc(100% + 6px);
  height: calc(100% - 10px);
  background-color: #4B413A;
  transition: all 0.3s ease-in-out;
  transform: scaleY(1);
}

.btn-1 div:hover::before{
  transform: scaleY(0);
}

.btn-1 div::after {
  content: "";
  position: absolute;
  left: 5px;
  top: -5px;
  width: calc(100% - 10px);
  height: calc(100% + 10px);
  background-color: #4B413A;
  transition: all 0.3s ease-in-out;
  transform: scaleX(1);
}

.btn-1 div:hover::after{
  transform: scaleX(0);
}
















#section-contact{
	border-bottom: 1px solid white;
	margin-bottom: 10vh;
}

.contact-container {
            display: flex;
            min-height: 100vh;
        }
        .contact-info {
            flex: 1;
			padding-top:150px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }
		
		.contact-info h1 {
            padding-bottom:50px;
			margin:0 auto;
			max-width:80%;
        }
		
		.contact-info-contain {
            display: flex;
            align-items: center;
			width:50%;
			margin: 20px  auto;
        }
		
        .contact-info img {
            width: 40px;
            height: 40px;
            object-fit: cover;
			margin-right:30px;
        }
		
        .contact-form {
            flex: 1;
			padding-top:150px;
            background-color: #ffffff;
            display: flex;
			flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            
        }
        form {
            width: 100%;
            max-width: 400px;
        }
		.contact-form form h2 {
            padding-bottom:50px;
			text-align:center;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #cbd5e1;
            border-radius: 5px;
        }
        .envoi-formulaire {
            width: 100%;
            padding: 12px;
            background-color: #2563eb;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        @media (max-width: 699px) {
            .contact-container {
                flex-direction: column;
            }
			.contact-info, .contact-form {
			padding-top:50px !important;
        }
		
		.contact-info h1 {
			text-align:center;
        }
		
		.contact-form {
			padding-left:20px !important;
			padding-right:20px !important;
        }
		
		.contact-info-contain {
			width:70%;
			display:flex;
			text-align:start !important;
        }
		
		#section-2-flex-right{
			width:90% !important;
		}

        }
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	
		
.free-wall {
	margin: 0 15px 200px 15px;
}

.brick {
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
	border-radius: 3px;
	color: #333;
	border: none;
	width:350px;
	overflow:hidden;
}

.brick img{
	margin:0;
	padding:0;
	display:block;
}


.brick .img {
	width: 100%;
	max-width: 100%;
	display: block;
}


.texte{
	width:100%;
	height:100%;
	display:none;
	opacity:0;
	background-color:black;
	position:absolute;
	cursor:pointer;
}

.texte p{
	opacity:1;
	color:white;
	font-weight:bold;
	position:absolute;
	top:50%;
	left:50%;
	text-align:center;
	transform:translateX(-50%) translateY(-50%);
	text-transform:uppercase;
	font-size:15px;
	margin:0;
}

h1.titre-page{
	text-align:center;
	padding: 100px 0;
}

p.texte-page{
	width:50%;
	margin:auto;
	padding-bottom:100px;
	font-family:'poppins-thin';
}

@media all and (max-width: 699px){
	p.texte-page{
	width:80%;
}
}

@media all and (min-width: 699px){
	.menu-accueil{
		display:none;
	}
}









@media all and (max-width: 700px){
	#slideshow-view{
	display:none !important;
	}
}



#slideshow-view{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:999;
	background-color:rgba(0,0,0,50%);
}

.slideshow-container{
	position:relative;
	margin: auto;
	width:80%;
	height:80%;
	top:10%;
	background-color:rgba(0,0,0,90%);
	border-radius:20px;
	box-sizing: border-box;
	overflow:hidden;
	padding:20px 0;
}

.slideshow-slides{
	display:flex;
	width:100%;
	height:100%;
}

.slideshow-slide{
	flex: 1 0 100%;
	position:relative;
	height:100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position:center;
}

.button-prev, .button-next, .button-close {
            position: absolute;
			box-sizing: border-box;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 1);
            color: white;
            border: none;
            padding: 20px;
            cursor: pointer;
            clip-path:circle(40%);
			transition:color 0.2s;
			transition:background-color 0.4s;
        }
		
		.button-prev:hover, .button-next:hover, .button-close:hover {
            color: black;
			background-color: rgba(255, 255, 255, 0.5);
        }
		
        .button-prev { left: 10px; }
        .button-next { right: 10px; }
		.button-close { right: 10px; top: 10px !important;transform: translateY(0) !important;}
		
		
		
		
		
		
		
		
		
		
		#section-apropos{
			width:80%;
			margin:200px auto 50px auto;
		}
		
		.apropos-container{
			display:flex;
			align-items:center;
			justify-content:center;
			padding: 10vh 0;
		}
		
		
		.apropos-info{
			flex:0 1 50%;
		}
		
		.apropos-info h1{
			text-align:center;
		}
		
		.apropos-info p{
			padding:100px 20px;
		}
		
		.apropos-image{
			flex:0 1 50%;
			display:flex;
			align-items:center;
			justify-content:center;
			flex-direction:column;
		}
		
		div.apropos-image-container{
			width:90%;
			height:500px;
			background-image: url('photos/charpente-2.jpg');
			background-size:cover;
			background-position: center;
			border-radius: 50% 20% / 10% 40%;
		}
		
		div.apropos-image-container-2{
			border-radius: 20% 50% / 40% 10%;
			background-image: url('logos/federation-cae.png');
			width:90%;
			height:300px;
		}
		



@media all and (max-width: 699px){
	#section-apropos{
			width:100% !important;
			margin:100px auto 0 auto !important;
	}
	
	.apropos-info p{
			padding:50px 20px !important;
		}
	
	.apropos-container{
			flex-direction:column;
			padding: 5vh 0 !important;
	}
	.apropos-info{
		order:1
	}
	.apropos-image{
		order:2
	}
	div.apropos-image-container, div.apropos-image-container-2{
			height:300px !important;
			width:80vw;
		}
		
}













#result {
    margin-top: 15px;
    font-weight: bold;
}
.success { color: green; }
.error { color: red; }







.loader{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background-color:#faf9f8;
	transition: opacity 0.75s, visibility 0.75s;
	z-index:9999999999;
}

.loader img{
	width: 150px;
}

.loader-hidden{
	opacity: 0;
	visibility: hidden;
}

.loader::after{
	content: "";
	width: 40px;
	height: 40px;
	border : 3px solid white;
	border-top-color:grey;
	border-radius:50%;
	animation : loading 0.75s ease infinite;
}

@keyframes loading {
	from{
		transform: rotate(0turn);
	}
	to{
		transform: rotate(1turn);
	}
}





.button-devis-container {
	display:flex;
	justify-content: center;
}

.button-devis {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 9px 12px;
  gap: 8px;
  height: 40px;
  border: none;
  background: #c3a571;
  border-radius: 20px;
  cursor: pointer;
  text-decoration:none;
  width:auto;
}

.lable {
  line-height: 22px;
  font-size: 17px;
  color: #fff;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.button-devis:hover {
  background: #9C7B51;
}

.button-devis:hover .svg-icon {
  animation: slope 1s linear infinite;
}

@keyframes slope {
  0% {
  }

  50% {
    transform: rotate(10deg);
  }

  100% {
  }
}