/* CSS Document */
@import url("/css/police/font.css");

body, html, a, ul, li{ padding:0px; margin:0px; border:0px; list-style-type:none; text-decoration:none;/*transition : all 0.2s linear;*/}
ol{ list-style-type: decimal !important;}ol li{ list-style-type: decimal !important;}
img{ /*max-width:100%;*/}
body{ font:14px/22px 'Oxygen', sans-serif; font-weight:300;color:#515848;}
a{ text-decoration:none;color:#515848;transition : all 0.2s linear;}img{ border:0px;}
/*Bouton pour remonter en haut de la page :*/

div#btn_up{position: fixed;bottom: 15px;right: 25px;cursor: pointer;display:none;z-index:99999; width:50px; height:50px; background:url(../charte/btn_up.png); opacity:0.5;transition : all 0.2s linear;}
div#btn_up:hover{opacity:1}

div#first{ width:100%; float:left; text-align:center; position: relative; z-index: 9;}
div#first div#second{ width:1200px; margin:auto; text-align:left; position:relative; z-index: 1;}

@media screen and (max-width: 900px) {div#first div#second{ width:100%; margin:auto; text-align:left;}div#first div#second img{ max-width:100%;}}
@media screen and (min-width: 901px) {div#first div#second{ width:900px; margin:auto; text-align:left;}}
@media screen and (min-width: 1200px) {div#first div#second{ width:1200px; margin:auto; text-align:left;}}

/**########*/
/*DIAPORAMA*/
div#diaporama{ float:left; width:100%; position:absolute; z-index: 1; top: 0px; left: 0px; margin:0px 0px 0px 0px; padding:0px; height:700px;}
div#diaporama .diapo{ float:left; width:100%; height:100%; overflow:hidden;z-index:1; position:absolute; top:0px; left:0px; display: none;}
@media screen and (max-width: 900px) 
{		
	div#diaporama{ width:100%; z-index:1; height:320px; top: 0px;}
div#diaporama .diapo .bloc_txt{  position:absolute; z-index: 2; bottom: 50px; height:auto; left:10px ; display: none; color: #ffffff;}
	/*div#diaporama .diapo img{  height:100%; width: auto;}*/
}
@media screen and (min-width: 901px)
{
	div#diaporama{height:500px;}
	div#diaporama .diapo .bloc_txt{ width:900px; margin:auto; position: absolute; text-align:left;left:calc(50% - 420px); left:-webkit-calc(50% - 420px); bottom:15px;z-index: 2;  color: #FFFFFF;}
}
@media screen and (min-width: 1200px) 
{
	div#diaporama{height:670px;}
	div#diaporama .diapo .bloc_txt{ width:1200px; margin:auto; position: absolute; text-align:left;left:calc(50% - 550px); left:-webkit-calc(50% - 550px); bottom:10px; z-index: 2; color: #FFFFFF;}
}
div#diaporama .diapo img{ position: absolute; z-index: 1; top: 50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);  }

/**########*/
/* RESEAUX */
div#reseaux{ width:100%; float: left; margin-top: 20px;}div#reseaux2{ width:auto; float: left; margin-left: 10px;}
div#reseaux #reseaux_sociaux a, div#reseaux2 a{ background: #87b04a; border-radius:5px; width: 20px; height:20px; display: block; float:left; margin: 0px 10px 0px 0px;}
div#reseaux a:hover, div#reseaux2 a:hover{ background: #000000; opacity: 0.8;}
div#reseaux2  a{ margin-top: 10px;}
div#telephone a{color:#FFFFFF !important;}
@media screen and (max-width: 900px) {div#reseaux #telephone{ display: block;}div#reseaux{ width:100%; float: left; margin-top: 10px; margin-bottom: 10px;}}

a.reseaux{ background: #87b04a; border-radius:5px; width: 20px; height:20px; display: inline-block;}a.reseaux:hover{ background: #000000; opacity: 0.8;}

/**#################*/
/*  MENU / header   */
#header{ background: rgba(0,0,0,0.85); float: left; width: 100%; height: 110px; position: relative; z-index: 999999;}
#header #header_content{height: 110px; position:relative;}
@media screen and (max-width: 900px) {#header #header_content{ width:100%; margin:auto; text-align:left;}}
@media screen and (min-width: 900px) {#header #header_content{ width:900px; margin:auto; text-align:left;}}
@media screen and (min-width: 1200px) {#header #header_content{ width:1200px; margin:auto; text-align:left;}}

#header #header_content #logo{ float:left;}
@media screen and (max-width: 900px) 
{#header #header_content #logo{ float:left;width: 100px; text-align: center;}#header #header_content #logo img{ max-height: 50px; margin-top: 5px; }}
@media screen and (min-width: 901px) 
{#header #header_content #logo img{ max-height: 60px; margin-top: 25px;}#header.fixe #header_content #logo img{ max-height: 60px; margin-top: 0px;}}
@media screen and (min-width: 1200px) 
{#header #header_content #logo img{ max-height: 110px; margin-top: 0px;}}

#header #header_content #menu{ float:left; margin: 0px 0px 0px 65px;}
#header #header_content #menu ul{ float:left;}
#header #header_content #menu ul li{ float:left; color:#FFFFFF; position:relative;}
#header #header_content #menu ul li::after{ content: "|";font: 16px/110px "FuturaLight" ;color:#87b04a;}#header #header_content #menu ul li:last-child::after{ content: "";}
#header #header_content #menu ul li a{ float:left; font: 16px/110px "FuturaLight"; color: #ffffff; text-transform: uppercase;}
#header #header_content #menu ul li a::after{content: " ˅ ";}


#header #header_content #menu ul li a:hover{color:#87b04a;}
@media screen and (max-width: 900px) 
{
	#header{ height: 60px;}
	#header #header_content #menu{ display: none; margin: 0px 0px 0px 0px;}
	#header #header_content #menu2{display:block; float: right; padding: 10px 50px 0px 0px; font: 20px/60px "FuturaLight"; text-transform: uppercase; color: #FFFFFF; width:auto; text-align: center;}#header #header_content #menu2 a{display:block; color: #FFFFFF;}
	#header.fixe #header_content #menu2{display:block; float: right; padding: 0px 50px 0px 0px;}
	#header #header_content #menu{ position: absolute; top: 60px; left: 0px; background: rgba(0,0,0,0.85); width: 100%;}
#header #header_content #menu ul{ width: 100%;}
	#header #header_content #menu ul li{ float:none; color:#FFFFFF; width: 100%; text-align: left; position: relative;}
	#header #header_content #menu ul li::after{ content: "";font: 16px/30px "FuturaLight" ;color:#87b04a;}
#header #header_content #menu ul li a{ float:left; font: 16px/30px "FuturaLight"; color: #ffffff; text-transform: uppercase; text-align: center; display: block; width: 100%;}
	#header #header_content #menu ul li:hover ul.ssmenu{ display:none;}
	#header #header_content #menu ul li ul.ssmenu{ display:none; position: absolute; top: 0px; width: 100%;background: rgba(0,0,0,0.85);}
	#header #header_content #menu ul li ul.ssmenu li.retour a::before{ content: ' « ';}
	#header #header_content #menu ul li ul.ssmenu li.retour a::after{ content: '';}
	#header.fixe #header_content #menu2{ width:auto; height: auto;}
}
@media screen and (min-width: 901px) 
{
	#header #header_content #menu ul li.close, #header #header_content #menu ul li ul.ssmenu li.retour{ display:none;}
	#header #header_content #menu2{display:none;}
	#header #header_content #menu ul li a{ padding: 0px 5px 0px 5px;}
	#header #header_content #menu{ float:left; margin: 0px 0px 0px 30px;}
	#header #header_content #menu ul li:hover ul.ssmenu{ display:block;}
#header #header_content #menu ul li ul.ssmenu{ display:none; position: absolute; top: 110px; left:0px;background: rgba(0,0,0,0.85); width: auto; white-space: nowrap;}
#header #header_content #menu ul li:nth-last-child(2) ul.ssmenu{ left: inherit; right: 0px; top: 110px;}
}
@media screen and (min-width: 1200px) 
{
	#header #header_content #menu ul li a{ padding: 0px 20px 0px 20px;}
	#header #header_content #menu{ float:left; margin: 0px 0px 0px 65px;}
}
/*Sous-menu*/
#header #header_content #menu ul li ul.ssmenu li{ width:100%; float:left;}
#header #header_content #menu ul li ul.ssmenu li::after{ content: "";font: 16px/40px "FuturaLight";}
#header #header_content #menu ul li ul.ssmenu li a{ display: block;font: 16px/40px "FuturaLight";}
#header #header_content #menu ul li ul.ssmenu li a::after{content:'';}

/*Header lors du scroll*/
#header.fixe{ position: fixed; top: 0px; height: 40px; z-index: 999999;}
#header.fixe #header_content #menu ul li ul.ssmenu{ top: 40px;}

#header.fixe #header_content #menu ul li::after{font: 16px/40px "FuturaLight" ;}
#header.fixe #header_content #menu ul li a{font: 16px/40px "FuturaLight";}
@media screen and (max-width: 900px) {
	#header.fixe{height: 40px;}#header.fixe #header_content{height: 40px;}
	#header.fixe #header_content #menu2{font: 20px/30px "FuturaLight";}
	#header.fixe #header_content #menu{ position: absolute; top: 40px; left: 0px; background: rgba(0,0,0,0.85);}
}
@media screen and (min-width: 901px) {#header.fixe{height: 40px;}#header.fixe #header_content{height: 40px;}}
@media screen and (min-width: 1200px) {#header.fixe{height: 40px;}#header.fixe #header_content{height: 40px;}}

/*L'icone*/
div#first .icone{ position:absolute; top:-400px; right: 0px; z-index: 999; }
div#first .icone_small{ position:absolute; top:-280px; right: 0px; z-index: 999;display:block;}div#first .icone_small img{ max-height:300px;}
div#first.change-taille2{height:125px; overflow: hidden;}
div#first.change-taille{height:495px;}
@media screen and (max-width: 780px) {div#first .icone, div#first .icone_small{display:none;}}
@media screen and (min-width: 781px) {div#first .icone, div#first .icone_small{display:none;}}
@media screen and (max-width: 900px){div#first.change-taille{height:180px;}div#first.change-taille2{height:180px;}}
@media screen and (min-width: 901px) {div#first .icone{display:block; top:-280px;}div#first .icone img{max-height: 300px;}div#first.change-taille{height:305px;}div#first.change-taille.on{height:415px;}div#first .icone_small{display:block;top:-180px;}div#first .icone_small img{max-height: 200px; }}
@media screen and (min-width: 1200px) {div#first .icone{display:block; top:-400px;}div#first .icone img{max-height: inherit;}div#first.change-taille{height:475px;}div#first.change-taille.on{height:585px;}div#first .icone_small img{max-height: 300px !important;}}

/* Carrousel*/
div.carrousel{ width:100%; float: left;}
div.carrousel a.left{ width:31px; float: left; background:url(../charte/fleche.png) left center no-repeat; display: block;}
div.carrousel a.right{ width:31px; float: left; background:url(../charte/fleche.png) right center no-repeat; display: block;}
div.carrousel .slideshow, div.carrousel .slideshow2{float:left; width: calc(100% - 98px); width: -webkit-calc(100% - 98px); position: relative; overflow: hidden; margin: 0px 18px 0px 18px;}
div.carrousel .slideshow ul,div.carrousel .slideshow2 ul{ width:5000px; position:relative;padding:0; margin:0;}

div.carrousel a.left2{ width:31px;  float: left; background:url(../charte/fleche_b.png) left center no-repeat; display: block;}
div.carrousel a.right2{ width:31px; float: left; background:url(../charte/fleche_b.png) right center no-repeat; display: block;}
div.carrousel .slideshow ul li,div.carrousel .slideshow2 ul li{ overflow: hidden; position: relative; float: left;}
@media screen and (max-width: 900px) {
	div.carrousel .slideshow ul li,div.carrousel .slideshow2 ul li{ width: 210px; height: 180px; float:left; margin: 0px 5px 0px 4px;}
	div.carrousel .slideshow ul li img,div.carrousel .slideshow2 ul li img{ height: 180px; width: auto !important; max-width: none !important;}
	div.carrousel a.left2, div.carrousel a.left{height: 180px;}
	div.carrousel a.right2, div.carrousel a.right{ height: 180px;}
	div.carrousel .slideshow, div.carrousel .slideshow2{ height: 180px;}
	div.carrousel .slideshow ul li #contenu #contenu2 a,div.carrousel .slideshow2 ul li #contenu #contenu2 a{ height:180px;}
	div.carrousel .slideshow ul li img,div.carrousel .slideshow2 ul li img{min-height:100%;}
}
@media screen and (min-width: 900px) {
	div.carrousel .slideshow ul li,div.carrousel .slideshow2 ul li{ width: 250px; height: 180px; margin: 0px 9px 0px 8px; float:left;}
	div.carrousel a.left2, div.carrousel a.left{height: 180px;}
	div.carrousel a.right2, div.carrousel a.right{ height: 180px;}
	div.carrousel .slideshow, div.carrousel .slideshow2{ height: 180px;}
	div.carrousel .slideshow ul li #contenu #contenu2 a,div.carrousel .slideshow2 ul li #contenu #contenu2 a{ height:180px;}
	div.carrousel .slideshow ul li img,div.carrousel .slideshow2 ul li img{min-height:100%;}
}
@media screen and (min-width: 1200px) {
	div.carrousel .slideshow ul li,div.carrousel .slideshow2 ul li{ width: 350px; height: 280px; margin: 0px 9px 0px 8px; float:left;display: inline;}
	div.carrousel a.left2, div.carrousel a.left{height: 280px;}
	div.carrousel a.right2, div.carrousel a.right{ height: 280px;}
	div.carrousel .slideshow, div.carrousel .slideshow2{ height: 280px;}
	div.carrousel .slideshow ul li #contenu #contenu2 a,div.carrousel .slideshow2 ul li #contenu #contenu2 a{ height:280px;}
	div.carrousel .slideshow ul li img,div.carrousel .slideshow2 ul li img{min-height:100%;}
}
div.carrousel .slideshow ul li img,div.carrousel .slideshow2 ul li img{ width:auto; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);  }

div.carrousel .slideshow ul li #contenu,div.carrousel .slideshow2 ul li #contenu{ background: rgba(40,2,0,0.70); opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height:100%;transition : all 0.2s linear;}
div.carrousel .slideshow ul li #contenu #contenu2,div.carrousel .slideshow2 ul li #contenu #contenu2{ width: calc(100% - 22px); height: calc(100% - 22px); width: -webkit-calc(100% - 22px); height: -webkit-calc(100% - 22px); padding: 5px; margin: 5px; border: 1px solid rgba(255,255,255,1.00);}
div.carrousel .slideshow ul li #contenu #contenu2 a,div.carrousel .slideshow2 ul li #contenu #contenu2 a{ display: block; position: relative; width: 100%;}
div.carrousel .slideshow ul li #contenu #contenu2 a .centrer,div.carrousel .slideshow2 ul li #contenu #contenu2 a .centrer{ width: 100%; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); -webkit-transform:translateY(-50%);}
div.carrousel .slideshow ul li #contenu #contenu2 a .centrer img,div.carrousel .slideshow2 ul li #contenu #contenu2 a .centrer img{ min-width:inherit; min-height:inherit; position: relative; top: inherit; left: inherit; transform: none; -webkit-transform:none;}
div.carrousel .slideshow ul li:hover > #contenu,div.carrousel .slideshow2 ul li:hover > #contenu{ opacity:1;}
div.carrousel .slideshow ul li #contenu #contenu2 div img, div.carrousel .slideshow2 ul li #contenu #contenu2 div img{ width:inherit auto; height: inherit;}

/*Galerie*/
#galerie {    margin-bottom: 40px;    overflow: hidden;    margin-top: 25px; text-align: center; position: relative; display: block;}
#galerie .work { display: inline-block;   overflow: hidden;    width:311px;    height: 292px;    border: 4px solid #222;    cursor: pointer;    position: relative;    -moz-transition: all .6s;     -webkit-transition: all .5s;     -o-transition: all .6s;     transition: all .6s;    margin-right: 20px;	margin-bottom:20px;}
#galerie .work:hover {    border: 4px solid #FFF;}
#galerie .work img { height: 100%; width: auto !important; max-width: inherit !important; left:50%; position: absolute; top: 0px;  transform: translateX(-50%); -webkit-transform:translateX(-50%); }
#galerie .work .triangle-droite {    background: url(../charte/triangle-droite.png);    width: 312px;    height: 293px;    position: absolute;    right: -312px;    bottom: -293px;    -moz-transition: all .6s;    -webkit-transition: all .6s;     -o-transition: all .6s;     transition: all .6s;}
#galerie .work:hover .triangle-droite {right: 0;bottom: 0;}
#galerie .work .triangle-gauche { background: url(../charte/triangle-gauche.png);    width: 312px;    height: 293px;    position: absolute;
    left: -311px;    top: -293px;    -moz-transition: all .6s;     -webkit-transition: all .6s;     -o-transition: all .6s;    transition: all .6s;}
#galerie .work:hover .triangle-gauche {    left: -1px;    top: -1px;}
#galerie .work span {    color: #FFF;    text-transform: uppercase;    font-size: 20px;    text-align: center;    position: absolute;
    top: 125px;    left: -280px;   background: #222;    padding-left: 70px;    padding-right: 8px;    -moz-transition: all .5s;     -webkit-transition: all .5s;     -o-transition: all .5s;     transition: all .5s;}
#galerie .work:hover span {    left: 0px;}
#galerie .work span a{ color:#FFFFFF; font-size:16px;}
#galerie .work span a:hover{ color:#87b04a;}

/* Fil d'arianne*/
div#fil{float:left;width:100%;font:10px/16px "FuturaLight"; margin: 10px 0px 10px 0px;}
div#fil a{width:100%;text-decoration:none;font:10px/16px "FuturaLight";color:#999;}
div#fil a:hover{color:#87b04a;}

/* Formulaire Footer*/
#form_footer{ float:left; width:100%;}
#form_footer input{ border:1px solid #cacac9; height:28px;font:13px/15px 'Raleway', sans-serif; color:#818181; width:calc(48% - 6px);width: -webkit-calc(48% - 6px); margin:1%; padding:2px; float:left; background:#f6f6f6;}
#form_footer textarea{ border:1px solid #cacac9; font:13px/15px 'Raleway', sans-serif; color:#818181; width:calc(98% - 6px);width: -webkit-calc(98% - 6px); margin:1%; padding:2px; height:108px; background:#f6f6f6;}

input, select{ border:1px solid #cacac9; height:28px;font:13px/15px 'Raleway', sans-serif; color:#818181; width:calc(48% - 6px);width: -webkit-calc(48% - 6px); margin:1%; padding:2px; float:left; background:#f6f6f6;}
input.at100, select.at100, textarea.at100{ border:1px solid #cacac9; height:28px;font:13px/15px 'Raleway', sans-serif; color:#818181; width:calc(98% - 6px);width: -webkit-calc(98% - 6px); margin:1%; padding:2px; float:left; background:#f6f6f6;}
input:focus, select:focus, textarea:focus{border:1px solid #87b04a;}

/*Gestion du listing*/
.listing{ border-bottom:1px solid #818181;}
.listing .titrelisting{ width:100%; float:left; font:18px/22px "FuturaLight"; cursor: pointer;}
.listing .titrelisting::after{content: " > ";}
.listing .titrelisting:hover{ color: #87b04a;}
.listing .contenu{display: none; height: auto inherit; float:left; width: 100%;}
.listing .contenu ul{ padding:10px;}
.listing .contenu li{ list-style: circle;}

ul.liste1{ padding:10px;}
ul.liste1 li{ list-style: circle;}

/*Background parallax*/
.bg_para1{background:url(../diaporama/maison-de-campagne.jpg) right center; height: 250px; background-size: cover;}
.bg_para2{background:url(../diaporama/madrier-angle-coise.jpg) right center; height: 250px; background-size: cover;}
.bg_para3{background:url(../diaporama/enfant-madriers.jpg) right center; height: 250px; background-size: cover;}
.bg_para4{background:url(../diaporama/bois-europe.jpg) right center; height: 250px; background-size: cover;}
.bg_para5{background:url(../diaporama/bois-salon.jpg) right center; height: 250px; background-size: cover;}
.bg_para6{background:url(../diaporama/habitat-sain.jpg) right center; height: 250px; background-size: cover;}
.bg_para7{background:url(../diaporama/madrier.jpg) right center; height: 250px; background-size: cover;}
.bg_para8{background:url(../diaporama/maison-ecologique.jpg) right center; height: 250px; background-size: cover;}

/*Galerie*/
.galerie a{ width:150px; height: 90px; margin: 5px 5px 0px 0px; position: relative; display: block; opacity: 0.75; overflow: hidden; float: left;}
.galerie a img{ max-width: inherit; max-height: 100%; min-width: 100%;}
.galerie a:hover{opacity: 1;}

.fancybox-container{ z-index: 999999999 !important;}

@media screen and (max-width: 780px) {
.txtcenter_responsive{ text-align:center !important ;}
	.div100{ float:left; width:100%; position:relative;}
.div100_2{ float:left; width:98%; padding:1%;}
.div50{ float:left; width:100%; position:relative;}
.div50_2{ float:left; width:98%; padding:1%; position:relative;}
	.div50_2.img_hauteur{display: none;}/*.div50_2.img_hauteur img{position: absolute; z-index: 999; top: 50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);}*/
.div30{ float:left; width:100%;}
.div30_2{  width:98%; padding:1%; margin:20px 0px 0px 0px; display:inline-table;}
.div30_3{ float:left; width:98%; padding:0% 0% 0% 2%;}
.div30_4{  width:98%; padding:1%; float:left;}
.div60_1{ float:left; width:98%; padding:1%;}
.div60_2{ float:left; width:98%; padding:1%;}
.div40{ float:left; width:40%; padding:0%;}
.div40_1{ float:left; width:98%; padding:1%; position: relative;}
.div40_2{ float:left; width:100%; padding:0%;}
.div25{ float:left; width:100%;}
.div25_2{ float:left; width:98%; padding:1%;}
.div20{ float:left; width:50%;}
.div20_2{ float:left; width:48%; padding:1%;}}
@media screen and (min-width: 781px) {
.txtcenter_responsive{ text-align:center !important ;}
	.div100{ float:left; width:100%; position:relative;}
.div100_2{ float:left; width:98%; padding:1%;}
.div50{ float:left; width:100%; position:relative;}
.div50_2{ float:left; width:98%; padding:1%; position:relative;}
	.div50_2.img_hauteur{height:300px; overflow: hidden;}.div50_2.img_hauteur img{position: absolute; z-index: 999; top: 50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);}
.div30{ float:left; width:100%;}
.div30_2{  width:98%; padding:1%; display:inline-table;}
.div30_3{ float:left; width:98%; padding:0% 0% 0% 2%;}
.div30_4{  width:98%; padding:1%; float:left;}
.div60_1{ float:left; width:58%; padding:1%;}
.div60_2{ float:left; width:98%; padding:1%;}
.div40, .div40_2{ float:left; width:40%; padding:0%;}
.div40_1{ float:left; width:38%; padding:1%; position: relative;}
.div25{ float:left; width:25%;}
.div25_2{ float:left; width:23%; padding:1%;}
.div20{ display:inline-table; width:17%;}
.div20_2{ display:inline-table; width:15%; padding:1%;}}
@media screen and (min-width: 901px) {
.txtcenter_responsive{ text-align:left !important ;}
	.div100{ float:left; width:100%; position:relative;}
.div100_2{ float:left; width:98%; padding:1%;}
.div50{ float:left; width:50%; position:relative;}
.div50_2{ float:left; width:48%; padding:1%; position:relative;}
	.div50_2.img_hauteur{height:inherit; overflow:inherit;}.div50_2.img_hauteur img{position: relative;  z-index: 999; top: inherit; left:inherit;  transform: inherit; -webkit-transform:inherit; margin-bottom: -60px;}
.div30{ float:left; width:33%;}
.div30_2{  width:31%; padding:1%; float:left; max-width:31%; overflow:hidden}
.div30_2 a img{ max-width:100%; overflow:hidden;}
.div30_3{ float:left; width:31%; padding:0% 0% 0% 2%;}
.div30_4{  width:31%; padding:1%; float:left;}
.div60_2{ float:left; width:64%; padding:1%;}
	.div60_1{ float:left; width:58%; padding:1%;}
.div40, .div40_2{ float:left; width:40%; padding:0%;}
.div40_1{ float:left; width:38%; padding:1%; position: relative;}
.div25{ float:left; width:25%;}
.div25_2{ float:left; width:23%; padding:1%;}
.div20{ display:inline-table; width:20%;}
.div20_2{ display:inline-table; width:18%; padding:1%;}
}
.div75{ float:left; width:75%;}
.div25_3{ float:left; width:25%; display: block;position: relative;}
.div30_2 img, .div30 img{ max-width:100%; overflow:hidden;}
.div20_3{ float: left; width:20%;}
.div50_3{ float:left; width:48% !important; padding:1% !important; position:relative;}
.div60{ float:left; width:60%; padding:0%; position:relative;}
.div60_1 img, .div40 img, .div40_1 img, .div40_2 img{ max-width:100%;}
.img100{ max-width:100% !important;}

/*padding*/
.padding5{ padding:5px;}
/*TITRE*/
h1{ font:55px/60px "FuturaLight";} h2{ font:55px/60px "FuturaLight";} h3{ font:55px/60px "FuturaLight";} h4{ font:20px/25px "FuturaLight"; padding: 0px; margin: 0px;}h5{ font:20px/25px "FuturaLight"; padding: 0px; margin: 0px;} h2.design1{ font:35px/50px "FuturaLight"; background: url(../charte/trait-separation.png) left bottom  no-repeat;}h2.design2{ font:35px/50px "FuturaLight"; background: url(../charte/trait-separation.png) center bottom  no-repeat;} h3.design1{ font:25px/35px "FuturaLight";}h3.design2{ font:25px/35px "FuturaLight"; background: url(../charte/trait-separation3.png) center bottom  no-repeat;}h3.design3{ font:25px/35px "FuturaLight"; background: url(../charte/trait-separation.png) left bottom  no-repeat;}
/*Background dégradé*/
.bg_vert{ background: url(../charte/bg-vert-degrade.jpg) center;}.bg_marron{ background: url(../charte/bg-marron-degrade.jpg) center;}.bg_gris{ background: url(../charte/bg-gris-degrade.jpg) center;}.bg_plan{ background: url(../charte/bg-plan.jpg) center;} .bg_marronsimple{ background: #654a3f;}.bg_photo_verte{ background: url(../charte/bg-photo-verte.jpg) center; background-size: cover;}

div.btn_video{ cursor:pointer; display: block; background: #818181; }
div.btn_video.on{ cursor:pointer; display: block; background: #87b04a; }
div.btn_video:hover{ background:#87b04a;transition : all 0.2s linear;}
/*Couleur police*/
.txtblanc{ color:#ffffff !important;} .txtnoir{ color:#000000;} .txtvert{ color:#87b04a;} .txtombre{text-shadow: 2px 2px 4px #000000; color: #FFFFFF;} .txtgris{ color:#818181;}
/*Align police*/
.txtcenter{ text-align:center;}.txtleft{ text-align:left;}.txtright{ text-align:right;}
.txtjustify{ text-align:justify;}
@media screen and (max-width: 900px) {.txtright{ text-align:left;}}
/*Gestion police*/
.light{ font-family: "FuturaLight";} .bold{ font-family: "FuturaBOLD";} .heavy{ font-family: "FuturaHeavy";}
/*taille police*/
/*###########*/
/*Tailles TXT*/
.small2{ font-size:12px; line-height: 16px;}
.small{ font-size:14px; line-height: 16px;}.small2{ font-size:14px; line-height: 20px;}.small3{ font-size:14px; line-height: 30px;}
.medium2{ font-size:16px; line-height: 20px;}
.large{ font-size:18px;  line-height: 22px;}
.xlarge{ font-size:20px; line-height: 22px;}
.xxlarge{ font-size:22px;  line-height: 28px;}
.xxlarge2{ font-size:22px;  line-height: 22px;}
.xxxlarge{ font-size:25px;  line-height: 32px;}
.x4large{ font-size:30px; line-height: 40px;}
.x5large{ font-size:40px; line-height: 50px;}
.x6large{ font-size:50px; line-height: 60px;}

@media screen and (max-width: 900px) {
.x4large{ font-size:26px; line-height: 35px;}
.x5large{ font-size:28px; line-height: 35px;}
.x6large{ font-size:30px; line-height: 35px;}
}
.txtup{ text-transform: uppercase;}
/*Bouton*/
a.btn1{ height: 40px; display:inline-block; font: 16px/40px "FuturaLight"; border-radius: 20px; border: 2px solid #FFFFFF; color:#FFFFFF; padding: 0px 10px 0px 10px; text-align: center; text-transform: uppercase; } a.btn1:hover{ color:#87b04a; border: 2px solid #87b04a;}
a.btn2{ height: 40px; display: inline-block; font: 16px/40px "FuturaLight"; border-radius: 20px; border: 2px solid #818181; color:#818181; padding: 0px 10px 0px 10px; text-align: center; text-transform: uppercase; } a.btn2:hover{ color:#87b04a; border: 2px solid #87b04a;}
a.btn3{ color:#FFFFFF; font: 14px/30px "FuturaLight"; }a.btn3::before{content:"•  "; color: #87b04a;} a.btn3:hover{ color:#87b04a; }
a.btn4{ height: 40px; display:inline-block; font: 16px/40px "FuturaLight"; border-radius: 20px; border: 2px solid #FFFFFF; color:#FFFFFF; padding: 0px 10px 0px 10px; text-align: center; text-transform: uppercase; } a.btn4:hover{ color:#818181; border: 2px solid #818181;}
a.btn5{ height: 60px; min-width: 30%; display: inline-block; font: 20px/60px "FuturaLight"; border-radius: 20px; border: 2px solid #818181; color:#818181; padding: 0px 10px 0px 10px; text-align: center; text-transform: uppercase; } a.btn5:hover{ color:#87b04a; border: 2px solid #87b04a;}
.txtverticalcentre{ position: absolute; z-index: 1; top: 50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);}

@media screen and (max-width: 900px) {
.guillemet1{ position:absolute; top:-10px; left: -20%; background: url(../charte/guillemet1.png) no-repeat; background-size: cover; width: 20%; height: 69px; display: block;}
.guillemet2{ position:absolute; bottom:5px; right: -20%; background: url(../charte/guillemet2.png) no-repeat; width: 20%; height: 69px; display: block;}
}
@media screen and (min-width: 901px) {
.guillemet1{ position:absolute; top:-10px; left: -150px; background: url(../charte/guillemet1.png) no-repeat; width: 90px; height: 69px; display: block;}
.guillemet2{ position:absolute; bottom:5px; right: -150px; background: url(../charte/guillemet2.png) no-repeat; width: 90px; height: 69px; display: block;}
}

.barre{ float:left; width:auto; background:#ffffff; height:20px; position:relative; display:block; margin:10px 10px 10px 0px;}
.barre .on{ position:relative; float:left;  height:20px; display:block; background:#87b04a;}
.barre .percent{ position:absolute; top:-21px; left:-15px; height:21px; width:30px; background:url(../charte/infobulle.png); text-align:center; color:rgba(255,255,255,1.00); font:12px/16px  "FuturaLight", sans-serif;}

.barre2{ float:left; width:50px; height: 100%; background:#ede9e6; position:relative; display: block; margin-left: calc(50% - 25px);}
.barre2 .on{ position:absolute; bottom:0px; left:0px; width:50px; height: 0px; display:block; background:#87b04a;}
.barre2 .percent{ position:absolute; bottom:-21px; left:10px; height:21px; width:30px; background:url(../charte/infobulle.png); text-align:center; color:rgba(255,255,255,1.00); font:12px/16px  "FuturaLight", sans-serif;}

.bgetape{ background:url(../charte/bg-etape.jpg) no-repeat; height: 60px; width:35px; display: inline-block; margin: 5px 0px 5px 0px;font:20px/55px "FuturaHeavy"; text-align: center; color:#87b04a; }