/*
--------------------------------------------------------------
--------------------------------------------------------------
  INDEX
--------------------------------------------------------------
--------------------------------------------------------------

A.	TYPEFACE
		All typographic rules, form @ font to line-height

B. 	FLUIDITY
		All rules for normalized positioning, centering and margin

C. 	TRANSVERSE
		All css for transverse elements

D.	SECTION
		All css for specific elements & sections

*/


/*
--------------------------------------------------------------
--------------------------------------------------------------
  A.TYPEFACE
--------------------------------------------------------------
--------------------------------------------------------------
*/

/*
--------------------------
	OPEN SANS
--------------------------
*/
/* regular: 400; semi-bold: 600; bold : 700;*/
*{
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 400;

	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* BOLD */
.num,
strong,
nav li.current p{font-weight: 700;}

/* SEMI BOLD */
.studyText .tinyText,
.tabAgencyContact li p:nth-child(1),
.legend{
	font-weight: 600;
}

/*
--------------------------
MERRIWEATHER
--------------------------
*/
/* bold : 700;*/
h1, h2, h3, h4, h5, .bubble p{
	font-family: 'Merriweather', sans-serif !important;

	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* REGULAR */
.bubble p{
	font-weight: 400;
}
/* BOLD */
h1, h2, h3, h4, h5{
	font-weight: 700;
}


/*
--------------------------
	.TYPESCALE
--------------------------
*/

/* TITLES & SUBTILTLES */
/* 42px */
h1{font-size: 42px; line-height: 51px;}

/* 32px */
h2{font-size: 32px; line-height: 41px;}

/* 24px */
h3, .bubble p
{font-size: 24px; line-height: 30px;}

/* 18px */
h4{font-size: 18px; line-height: 23px;}

/* 14px */
h5, .num
{font-size: 14px; line-height: 18px;}

/* 10px */
.tinyText{font-size: 10px; line-height: 14px;}

/* ------------- */

/* BODY */

/* 18px */
.tabAgencyContact li p,
.banner.second .bannerText{
	font-size: 18px; line-height: 25px;
}

/* 16px */
.studyText p:not(:first-child),
.tabAgencyText p,
#certificationSection p{
	font-size: 16px; line-height: 26px;
}

/* 14px */
footer p,
footer a,
nav li p,
.ctaExpend li,
.ctaExpend > p:first-of-type{
	font-size: 14px;
	line-height: 19px;
}

/* 12px */
.legend{
	font-size: 12px; line-height: 18px;
}

/* 10px */

/*
--------------------------
	.COLORS
--------------------------
*/

:root {
	--black: #000;
	--white: #fff;
	--primary: #3BAA35;

	--bg-lightBlue: #D8E2ED;
	--bg-lightGreen1: #D9EED7;
	--bg-lightGreen2: #487545;
	--bg-lightGreen3: #278D21;
	--bg-darkGreen: #295619;
	--bg-cream: #F6F1EC;

	--text-darkGreen: #616F68;

	--box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.1);

	--centering-desktop-1: 968px;
	--centering-tablet-1: 740px;
	--centering-mobil-1: 375px;

	/* INPUT */
	--input-textColor-default: #000;
	--input-textColor-discret: rgba(0, 0, 0, .5);
	--input-textSize-default: 16px;
	--input-textSize-minimize: 12px;
  --input-backgroundColor-default: #fff;
  --input-borderColor-default: rgba(8, 57, 115, .1);
}

/* White */
*{color: var(--white);}



/*
--------------------------------------------------------------
--------------------------------------------------------------
  B.FLUIDITY
--------------------------------------------------------------
--------------------------------------------------------------
*/

/*
--------------------------
	POSITIONS
--------------------------
*/
/* CENTERING */
.centered{
	position: relative;
	max-width: var(--centering-desktop-1);
	margin: auto;
}

.vcentered{
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.hcentered{
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/* FLEXIBILITY */
.vflex, .hflex, .mflex{
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	align-items: center;
}
.hflex{
	flex-direction: column ;
}
.mflex{
	justify-content: center;
	align-items: center;
}
.vflex.wrap, .hflex.wrap{flex-wrap: wrap;}

/*In some cases, some overwrittes are needed*/
.rowflex{flex-direction: row !important;}
.colflex{flex-direction: column !important;}

/*
--------------------------
	MARGES
--------------------------
*/
*{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}



/*
--------------------------------------------------------------
--------------------------------------------------------------
  C.TRANSVERS
--------------------------------------------------------------
--------------------------------------------------------------
*/

/*
--------------------------
	GENERAL
--------------------------
*/
		/* CONTAINERS
		*/
		/* html, body{height: 100%;} */
		body{
			overflow-x: hidden;
			overflow-y: auto;
			background-color: #FFF;
			opacity: 0;
			background-color: #3C6C39;
		}

		/* SCROLL
		*/
		.hidescroll{ overflow-y: hidden; }
		.showscroll{ overflow-y: auto; overflow-x: hidden; }

		/* LINKS
		*/
		a{text-decoration: none; color: inherit;}
		a:hover:not(.tel){text-decoration: underline;}
		.ulink{text-decoration: underline; cursor: pointer;}
		.ulink:hover{color: #0782FE;}
		.clear{ width: 100%; clear: both;}

		/* IMGS
		*/
		img{
			display: block;
			min-width: 100%;
			max-width: 100%;
			-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
		  filter: grayscale(100%);
		}
		img.unwide{
			height: 100%;
			min-width: none;
			max-width: none;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.overlay{
			position: absolute;
			left: 0; top: 0;
			width: 100%; height: 100%;
			z-index: 1;
			background: rgba(45,45,45,0.90);
			transition: all .5s ease-out;
			-webkit-transition: all .5s ease-out;
		}


/*
--------------------------
	VISIBILITY
--------------------------
*/
		.desktop{
			display: inherit;
		}
		.bannerContent .desktop{
			display: flex;
		}

		.tablet{
			display: none;
		}
		.mobil{
			display: none;
		}

		.desktop-cascading{display: inherit;}
		.tablett-cascading{display: none;}
		.mobil-cascading{display: none;}

		.hidden{
			display: none;
		}



/*
--------------------------
	CURSOR
--------------------------
*/
		/* POINTER
		*/
		.topbar nav li, .menuCta,
		.ctaZone > ul .agency
		.js_fold, .js_unfold,
		.ctaZone .agency{
			cursor: pointer;
		}



/*
--------------------------
	BUTTONS & ICO
--------------------------
*/

		/* CTA PRIMARY
		*/
		.cta{
			position: relative;
			padding: 18px 26px;
			border-radius: 30px;
			/* transition: all .3s cubic-bezier(0.18, 0.94, 0.33, 0.98);
			-webkit-transition: all .3s cubic-bezier(0.18, 0.94, 0.33, 0.98); */
		}
		.cta:hover{
			cursor: pointer;
			transform : scale(1.03);
			transition: all .3s cubic-bezier(.09,.66,.69,.95);
			-webkit-transition: all .3s cubic-bezier(.09,.66,.69,.95);
		}

		.cta.dark{background-color: var(--black);}
		.cta.white{background-color: var(--white);}
		.cta.white .num{color: var(--black) !important;}

		/*	CTA MENU
		*/
		.menuCta{
			width: 40px;  height: 40px;
		}

		/*	CTA EXPEND
		*/
		.ctaExpend{
			padding: 10px 20px;
			border: 1px solid rgba(255, 255, 255, .5);
			border-radius: 4px;
			transition: all .3s cubic-bezier(0.18, 0.94, 0.33, 0.98);
			-webkit-transition: all .3s cubic-bezier(0.18, 0.94, 0.33, 0.98);
		}
		.ctaExpend:hover{
			background-color: var(--bg-darkGreen);
			border: 1px solid var(--bg-darkGreen);
		}
		.ctaExpend > p:first-of-type{
			text-align: center;
			margin: auto;
			margin-bottom: 0px !important;
			transition: all .3s cubic-bezier(0.18, 0.94, 0.33, 0.98);
			-webkit-transition: all .3s cubic-bezier(0.18, 0.94, 0.33, 0.98);
		}
		.ctaExpend > p.js_fold:first-of-type{
			margin-top: 10px;
			background-color: var(--bg-darkGreen);
			padding: 10px 20px;
			border-radius: 20px;
		}
		.ctaExpend .drawer{
			max-height: 0px;
			overflow: hidden;
		}

		.ctaExpend ul{
			padding: 10px 0 15px 0;
		}
		.ctaExpend li:not(:last-child){
			margin-bottom: 10px;
			padding-bottom: 10px;
			border-bottom: 1px solid rgba(255, 255, 255, .1);
		}

		/* BTN RADIUS
		*/
		.btn_radius:focus, .btn_round:focus{
			outline: none;
			/* box-shadow: 0 1px 3px 0 rgba(0,0,0,0.20), 0 5px 20px 0 rgba(0,0,0,0.07); */
		}


		/* BTN RADIUS TINY ROUND
		*/
		.btn_radius.tiny.round{
			width: 22px;
			padding: 5px 0;
			background-position: center;
			background-repeat: no-repeat;
			transition: all .2s cubic-bezier(0.18, 0.94, 0.33, 0.98);
			-webkit-transition: all .2s cubic-bezier(0.18, 0.94, 0.33, 0.98);
			position: relative;
			overflow: hidden;
		}
		.btn_radius.tiny.round.js_unfollow{background-image: url('assets/ico/checked_white.svg');}
		.btn_radius.tiny.round.js_added{
			border: 2px solid #F6F4F1;
			background-color: #F6F4F1;
			color: #221F20;
			background-image: url('assets/ico/checked_grey.svg');
		}
		.btn_radius.tiny.round.js_follow,
		.btn_radius.tiny.round.js_addList{background-image: url('assets/ico/plus_w.svg');}
		.btn_radius.tiny.round.js_askImg{background-image: url('assets/ico/refresh_b.svg');}

		.btn_radius.tiny.round p{
			width: 88px;
			opacity: 0;
			text-align: center;
			transition: all .2s cubic-bezier(0.18, 0.94, 0.33, 0.98);
			-webkit-transition: all .2s cubic-bezier(0.18, 0.94, 0.33, 0.98);
			word-wrap: nowrap;
		}
		.btn_radius.tiny.round:hover{
			width: 88px;
			background-position: -30px center;
		}
		.btn_radius.tiny.round:hover p{
			opacity: 1;
		}


		/* ICO
		*/
		.ico, .ico.inline{
			width: 100%; height: 100%;
			background-repeat: no-repeat;
			background-position: center;
		}
		.ico.inline{
			width: 18px; height: 18px;
			display: inline-block;
			margin-right: 10px;
		}


		.scale{
			transform : scale(1.3);
			transition: all .3s cubic-bezier(.09,.66,.69,.95);
			-webkit-transition: all .3s cubic-bezier(.09,.66,.69,.95);
		}

		.ico.burger{background-image: url('assets/ico/burger.svg');}
		.open .ico.burger{background-image: url('assets/ico/close.svg');}
		.ico.pin{background-image: url('assets/ico/pin.svg');}
		.ico.phone{background-image: url('assets/ico/phone.svg');}
		.ico.phoneB{background-image: url('assets/ico/phone-black.svg');}
		.ico.arrow{background-image: url('assets/ico/arrow.svg');}
		.ico.plus{background-image: url('assets/ico/plus.svg');}
		.ico.plus_w{background-image: url('assets/ico/plus_w.svg');}
		.ico.crux{background-image: url('assets/ico/crux.svg');}
		.ico.crux_w{background-image: url('assets/ico/crux_w.svg');}
		.ico.link{background-image: url('assets/ico/arrowLink.svg');}
		.ico.logo{background-image: url('assets/ico/logo.svg');}
		.ico.link.reverse{
			background-image: url('assets/ico/arrowLink.svg');
			transform: rotate(-180deg);
		}
		.ico.spinner{background-image: url('assets/ico/spinner_w.svg');}
		.ico.spinner.dark{background-image: url('assets/ico/spinner_b.svg');}


/*
--------------------------
	TOPBAR
--------------------------
*/
		.topbar{
			width: 100%;
			/* height: 62px; */
			position: absolute;
			top: 38px; left: 0;
			/* background-image: linear-gradient(0deg, rgba(255,255,255,0.00) 0%, #FFFFFF 100%); */
			z-index: 100;
			padding-top: 0px;
		}
		.topbar .centered{
			/* overflow: hidden; */
			height: 62px;
			padding: 0px;
			background-color: rgba(0, 0, 0, 0);
			transition: all .4s cubic-bezier(.09,.66,.69,.95);
			-webkit-transition: all .4s cubic-bezier(.09,.66,.69,.95);
			border-radius: 10px;
		}

		.topbar.fixed{
			top: -82px;
			position: fixed;
			/* height: 69px; */
			padding-top: 0px;
			transition: padding .3s cubic-bezier(.09,.66,.69,.95);
			-webkit-transition: padding .3s cubic-bezier(.09,.66,.69,.95);
			/* transition: all .3s cubic-bezier(.09,.66,.69,.95); */
			/* -webkit-transition: all .3s cubic-bezier(.09,.66,.69,.95); */
		}
		.topbar.fixed .centered{
			height: 69px;
			padding: 0 10px 0 20px;
			background-color: rgba(0, 0, 0, 1);
			transition: all .4s cubic-bezier(.09,.66,.69,.95);
			-webkit-transition: all .4s cubic-bezier(.09,.66,.69,.95);
		}

		.topbar.showOnScroll{
			padding-top: 102px;
			transition: padding .3s cubic-bezier(.09,.66,.69,.95);
			-webkit-transition: padding .3s cubic-bezier(.09,.66,.69,.95);
		}

		.topbar.safeArea{
			position: fixed;
			transition: all .4s cubic-bezier(.09,.66,.69,.95);
			-webkit-transition: all .4s cubic-bezier(.09,.66,.69,.95);
		}

		.topbar .ico.logo{
			width: 86px;
			height: 62px;
			background-size: contain;
			margin-right: auto;
			transition: all .4s cubic-bezier(.09,.66,.69,.95);
			-webkit-transition: all .4s cubic-bezier(.09,.66,.69,.95);
		}

		.topbar.fixed .ico.logo{
			width: 50px;
			height: 36px;
			transition: all .4s cubic-bezier(.09,.66,.69,.95);
			-webkit-transition: all .4s cubic-bezier(.09,.66,.69,.95);
		}

		nav li{padding: 15px 13px;}

		nav ul{
			/* padding: 15px 0px; */
			margin-right: 26px;
			position: relative;
		}
		.topbar.fixed nav li{
			padding: 25px 13px;
		}

		nav ul .currentBar{
			height: 4px;
			background-color: var(--primary);
			position: absolute;
			bottom: 0px;
			left: 0px;
			transition: all .7s cubic-bezier(0.18, 0.94, 0.33, 0.98);
			-webkit-transition: all .7s cubic-bezier(0.18, 0.94, 0.33, 0.98);
		}

		/* .topbar .cta{
			padding: 0px;
		} */




/*
--------------------------
	MAIN
--------------------------
*/
		.wrapper{
			z-index: 2;
			width: 100%;
			position: relative;
			top: 0px;
			margin-top: 50px;
		}



/*
--------------------------
	INPUTS
--------------------------
*/





/*
--------------------------
	COOKIE MESSAGE
--------------------------
*/
		.wrapper_cookie{
			width: 100%;
			position: fixed;
			bottom: 0px;
			height: 0px;
			z-index: 100;
		}

		.cookie_message{
			background-color: #F6F4F1;
			width: 80%;
			position: absolute;
			bottom: 0px;
			border-radius: 4px 4px 0 0;
		}

		.cookie_message p{
			padding: 20px 85px 20px 30px;
			line-height: 20px;
			text-align: center;
		}

		.cookie_message .close_zone{
			width: 55px;
			height: 100%;
			position: absolute;
			right: 0px;
			top: 0px;
		}



/*
--------------------------
	FOOTER
--------------------------
*/
		footer{
			width: 100%;
			padding: 100px 0;
			position: relative;
			opacity: 1;
			transition: all .6s ease-in-out;
			-webkit-transition: all .6s ease-in-out;
			text-align: center;
		}
		footer.active{opacity: 0;}



/*
--------------------------
	CLOSE
--------------------------
*/
.successMessage, .alreadyMessage{
	display: none;
}

#close main{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}
#close .centered{
	height: 100%;
	z-index: 1;
	padding-left: 10%;
	padding-right: 10%;
}
#close h1{
	margin-bottom: 30px;
}
#close .bg{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0; left: 0;
	z-index: 0;
}

.loginWrapper{
	width: 100%;
	padding: 30px;
	background-color: #FFFF;
	border-radius: 8px;
	box-shadow: var(--box-shadow);
}




/*
--------------------------------------------------------------
--------------------------------------------------------------
  C.TRANSVERS
--------------------------------------------------------------
--------------------------------------------------------------
*/


/*
--------------------------
	BACKGROUND
--------------------------
*/
.bg{
	width: 100%;
	position: absolute;
	top: 0; left: 0;
	z-index: 0;
}
section .bg{
	height: 100% !important;
}
header .bg{
	z-index: -1;
}

header .bg-transition{
	position: absolute;
	left: 0; bottom: 0;
	width: 100%;
	height: 80%;
	background: linear-gradient(180deg, rgba(60, 108, 57, 0) 0%, #3C6C39 100%);
}

.bg video{
	height: 100vh;
	width: 100vw;
	object-fit: cover;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}


/*
--------------------------
	HEADER
--------------------------
*/
		header{
			width: 100%;
			padding: 183px 0px 285px 0px;
			display: inline-block;
			position: relative;
			opacity: 1;
			transition: all .6s ease-in-out;
			-webkit-transition: all .6s ease-in-out;
			text-align: center;
		}

		/*	HEADER TITLE
		*/
		.headerTitle > p{margin-bottom: 32px;}

		/* ---------------- */

		/*	CTAZONE
		*/
		.ctaZonePlaceholder{
			width: 100%;
			height: 134px;
			/* background-color: red; */
			position: fixed;
			top: 407px;
			/* top:30%; */
			left: 0px;
			z-index: 200;

			transition: all 1s ease-in-out;
			-webkit-transition: all 1s ease-in-out;
			-webkit-backface-visibility: hidden;
			-webkit-transform-style: preserve-3d;
			will-change: transform;

			-webkit-transform: translateZ(0);
			-moz-transform: translateZ(0);
			-ms-transform: translateZ(0);
			-o-transform: translateZ(0);
			transform: translateZ(0);
		}

		.ctaZonePlaceholder.scrolled{
			/* overflow: hidden; */
			left: 100%;
			top: 100%;
			width: 233px;

			/* transform: translate(-100%, -100%); */
		}

		.ctaZone{
			/* justify-content: flex-end; */
			/* width: 100%; */
			width: var(--centering-desktop-1);
			height: 134px;
			/* margin: auto; */
			position: absolute;
			top: 0%;
			padding: 0px 0px 0px 20px;
			background-color: #fff;
			color: #000 !important;
			border-radius: 8px;
			z-index: 2;

			transition: all 1s ease-in-out;
			-webkit-transition: all 1s ease-in-out;
		}


		.ctaZonePlaceholder.scrolled .ctaZone{
			width: 233px;
			left: -50%;
			top: -100%;
		}



		.ctaZone > ul{height: 100%;flex-grow: 1;}
		.ctaZone > ul:nth-of-type(1) li:not(:first-child){
			height: 100%;
			text-align: left;
		}
		.ctaZone > ul:first-of-type li:first-child{
			height: 100%;
		}
		.ctaZone > ul li{justify-content: center;}

		.ctaZone > ul .agency{
			/* flex-grow: 1; */
			width: 289px;
			opacity: 1;
			border-right: 1px solid rgba(0, 0, 0, .1);

			transition: all .5s ease-in-out .2s;
			-webkit-transition: all .5s ease-in-out .2s;
		}

		.agency .legend .tinyText:last-child{
			height: 0px;
			opacity: 0;
			bottom: -40px;
			transition: all .3s cubic-bezier(.55,1,.71,.99) .1s;
			-webkit-transition: all .3s cubic-bezier(.55,1,.71,.99) .1s;
		}
		.agency .legend .tinyText:first-child{
			opacity: 1;
			top: 0px;
			transition: all .3s cubic-bezier(.55,1,.71,.99) .1s;
			-webkit-transition: all .3s cubic-bezier(.55,1,.71,.99) .1s;
		}

		.agency:hover .legend .tinyText:last-child{
			bottom: 0px;
			opacity: 1;
			height: 12px;
		}
		.agency:hover .legend .tinyText:first-child{
			opacity: 0;
			top: -40px;
		}

		.tabAgencyText .agency{
			width: 100%;
			border-top: 1px solid rgba(255, 255, 255, .1);
			border-bottom: 1px solid rgba(255, 255, 255, .1);
		}

		.scrolled .ctaZone > ul .agency{
			opacity: 0;
		}

		.ctaZone .ctaCard{
			z-index: 2;
			position: absolute;
			right: 0px;
			top: 0px;
			background-color: var(--white);
			border-radius: 8px;
		}

		/* ---------------- */


				/* FLAG
				*/
				.flagWrapper{
					width: 100%;
					height: 154px;
					position: relative;
					top: -11px;
					padding: 18px 0px;
					background: url(assets/ico/flag.svg) center no-repeat;
					overflow: hidden;
				}

				.ctaZonePlaceholder.scrolled .ctaZone .ctaCard .flag{
					transform: scale(1);
				}


				.ctaZonePlaceholder .ctaZone .flag{
					transition: all 1s cubic-bezier(.53,0,.5,.99);
					-webkit-transition: all 1s cubic-bezier(.53,0,.5,.99);
				}
				.ctaZonePlaceholder.scrolled .ctaZone .flag{
					transform: scale(.8);
				}

				.flagWrapper .anim-truck{
					width: 64px; height: 22px;
					margin: auto;
					/* background: url(assets/ico/truck.svg) center no-repeat; */
				}

				.flagWrapper .anim-places{
					width: 100%; height: 110px;
					position: relative;
					top: 0px;
					left: 0px;
					align-items: flex-start;
					transition: all .5s cubic-bezier(.4,1.24,.58,.99);
					-webkit-transition: all .5s cubic-bezier(.4,1.24,.58,.99);
				}

				.flagWrapper .anim-places li{
					min-width: 100%;
					padding: 8px 10px 0 10px;
					justify-content: flex-start;
					text-align: center !important;
				}

				/* .flag li{justify-content: flex-start !important;} */
				.flag ul{align-items: flex-start;}
				/* .flag > ul li:not(:first-child){text-align: center;} */

				.flag{width: 134px;}


				/* FLAGWRAPEPR IN CTA CARD
				*/
				.ctaCard .flag{
					width: 100% !important;
					height: 0px;
					opacity: 0;
					transition: all .3s ease-in-out;
					-webkit-transition: all .3s ease-in-out;
				}
				.ctaZoneFixed .ctaCard .flag{
					margin: none;
					margin-bottom: 20px;
					margin-top: 0px;
				}
				.scrolled .ctaCard .flag,
				.ctaZoneFixed .ctaCard .flag{
					opacity: 1;
					height: 14px;
				}
				.ctaCard .flagWrapper,
				.ctaZoneFixed .ctaCard .flagWrapper{
					height: 100%;
					top: -7px;
					padding: 0px;
					background: transparent;
				}
				.ctaZoneFixed .ctaCard .flagWrapper{
					top: 0;
				}
				.ctaCard .flagWrapper .anim-places{
					height: 14px;
				}
				.ctaZoneFixed .ctaCard .flagWrapper .anim-placesWrapper{
					width: 100%;
				}
				.ctaCard .flagWrapper .anim-places li{
					padding: 0px 10px;
				}
				.ctaZoneFixed .ctaCard .flagWrapper .anim-places li{
					padding: 0px;
				}
				.ctaCard .flagWrapper p.tinyText{
					color: var(--black) !important;
				}

				.ctaZoneFixed .ctaCard .flagWrapper p.tinyText{
					color: var(--white) !important;
				}


				/* ---------------- */


				/* AGENCY
				*/
				.ctaZone > ul .agency{padding: 0px 30px;}
				.tabAgencyText .agency{
					padding: 20px 0px;
					margin: 14px 0 16px 0;
				}

				.agency .legend p,
				.agency .legend h5{color: var(--text-darkGreen);}
				.agency .legend h4{color: var(--black);}
				.tabAgencyText .agency .legend h5,
				.tabAgencyText .agency .legend p,
				.tabAgencyText .agency .legend h4{color: var(--white);}

				.tabAgencyText .agency .legend{width: 100%;}


				/*	PROFIL PIC
				*/
				.profilPic{
					width: 78px;
					min-width: 78px;
					height: 78px;
					position: relative;
					margin-right: 10px;
				}

				.profilPic .pic{
					width: 68px;
					height: 44.5px;
					position: relative;
					top: -11px;
					margin: auto;
					z-index: 2;

					background-position: top center;
					background-size: cover;
					background-repeat: no-repeat;
				}
				/* .pic.PY{background-image: url(assets/bg/profilPic-Pierre-Yves-Le-Deun-ag-environnement.png);}
				.pic.FR{background-image: url(assets/bg/profilPic-Francois-Pinson-ag-environnement.png);} */
				.pic.PY{background-image: url(assets/bg/OLD3_profilPic-Pierre-Yves-Le-Deun-ag-environnement.png);}
				.pic.FR{background-image: url(assets/bg/OLD3_profilPic-Francois-Pinson-ag-environnement.png);}

				.profilPic .mask{
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;
				}

				.profilPic .mask .pic{
					width: 68px;
					height: 44.5px;
					position: absolute;
					top: 33.5px;
					z-index: 1;
					background-position: bottom center;
				}
				.profilPic .mask.blue{background-color: var(--bg-lightBlue);}
				.profilPic .mask.green{background-color: var(--bg-lightGreen1);}


				/* ---------------- */


				/* CTA CARD
				*/
				.ctaCard{
					width: 233px;
					min-width: 233px;
					height: 100%;
					/* padding: 0px 30px; */
				}

				.ctaCard h5{
					color: var(--text-darkGreen);
					margin-bottom: 8px;
				}



/*
--------------------------
	MAIN
--------------------------
*/
section{
	margin-bottom: 85px;
	position: relative;
}

section h2{
	text-align: center;
	margin-bottom: 58px;
}



/*
--------------------------
	SECTION 01
--------------------------
*/

		/* ARTICLE
		*/
		.articleWrapper{
			background: url(assets/bg/radial-topo.svg) center no-repeat;
		}

		article{position: relative;}
		.studyText,
		.studyIllustration{
			width: 50%;
			flex-grow: 1;
		}

		article .studyText{
			padding: 50px 50px 55px 50px;
			background: var(--bg-lightGreen2);
			border: 1px solid rgba(255, 255, 255, 0.4);
			box-shadow: var(--box-shadow);
		}

		article h3{margin-bottom: 16px;}
		.studyText p:not(:last-child){margin-bottom: 16px;}
		.studyText p:first-child{margin-bottom: 12px;}
		.studyText .tinyText{text-transform: uppercase;}

		.studyIllustration{
			align-self: stretch;
		}
		.studyIllustration div{
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
		}
		#assainissement .studyIllustration div{
			width: 312px;
			height: 282px;
			background-image: url(assets/bg/illustration-etude-assainissement-ag-environnement.png);
		}
		#infiltration .studyIllustration div{
			width: 402px;
			height: 266px;
			background-image: url(assets/bg/illustration-etude-infiltration-ag-environnement.png);
		}

		/* BUBBLE */
		article .bubble{
			position: absolute;
			width: 68px; height: 68px;
			border-radius: 50%;
			text-align: center;
			background-color: var(--bg-darkGreen);
			z-index: 2;
		}
		.bubble p{margin: auto;}

		#assainissement .bubble{
			top:-34px;
			left: -34px;
		}
		#infiltration .bubble{
			bottom:-34px;
			right: -34px;
		}


/*
--------------------------
	SECTION 02
--------------------------
*/
		#equipeSection{
			margin-bottom: 0px;
			padding-bottom: 85px;
		}

		/* BG
		*/
		#equipeSection > .bg div{
			width: 100%;
			position: absolute;
			top: 0%;
			left: 0%;
			z-index: -1;
		}

		.bg .bg-dirt{
			height: 60%;
			background-image: url("assets/bg/dirtbg.jpg");
			background-position: bottom left;
			background-repeat: repeat-x;
		}
		.bg .bg-solid{
			height: 40%;
			top: 60% !important;
			background-color: var(--bg-cream);
		}

		/* TAB
		*/
		.tabWrapper{
			border-radius: 5px 5px 0px 0px;
			/* overflow: hidden; */
			position: relative;
			z-index: 1;
		}

		.tabFrame{
			width: 100%;
			position: relative;
			overflow-x: hidden;
			border-radius: 2px 2px 0 0;
		}

		.tabContent{
			background-color: var(--bg-lightGreen3);
			position: relative;
			left: 0px;
			box-shadow: var(--box-shadow);
			transition: all .5s cubic-bezier(.5,.51,.58,.99);
			-webkit-transition: all .5s cubic-bezier(.5,.51,.58,.99);
		}

		.tabContent .tab{
			align-self: stretch !important;
			min-width: 100%;
			position: relative;
			padding: 57px 82px 30px 82px;
			overflow: hidden;
		}


		/* TAB BG
		*/
		.tab .bg{
			width: 100%;
			height: 100%;
			background-size: cover;
			z-index: 0;
			background-position: center;
			transition: all 20s cubic-bezier(.4,1.24,.58,.99);
		}

		.tab:hover .bg,
		.tab.triggerHover .bg{
			/* background-size: 110%; */
			transform: scale(1.1);
		}
		.tab:nth-child(1) .bg{background-image: url('assets/bg/agencybg-01.jpg');}
		.tab:nth-child(2) .bg{background-image: url('assets/bg/agencybg-02.jpg');}
		.bg .gradientLtoR, .bg .gradientRtoL{
			width: 100%;
			height: 100%;
			top: 0; left: 0;
			position: absolute;
			background: linear-gradient(71.23deg, #278D21 36.19%, rgba(0, 0, 0, 0) 100%);
		}
		.bg .gradientRtoL{
				/* background: linear-gradient(71.23deg, #278D21 36.19%, rgba(0, 0, 0, 0) 100%); */
				background: linear-gradient(302.86deg, #278D21 32.73%, rgba(0, 0, 0, 0) 100%);
				/* background: linear-gradient(302.86deg, #278D21 32.73%, rgba(0, 0, 0, 0) 100%); */

		}
		.bg .radialShadow{
			width: 60%;
			height: 80%;
			position: absolute;
			right: 8%;
			top: 0px;
			z-index: 1;
			background: radial-gradient(45.12% 100% at 50% 100%, #000409 0%, rgba(0, 27, 54, 0.56) 28.12%, rgba(41, 86, 25, 0) 100%);
		}


		/* TAB DESC
		*/
		.tabAgencyDesc{
			position: relative;
			width: 100%;
			z-index: 1;
		}

		.tabAgencyDesc > div{
			width: 50%;
		}

		.tabAgencyText{
			padding-right: 90px;
			padding-bottom: 36px;
		}
		.tabAgencyText h2{
			margin-bottom: 16px !important;
			text-align: left !important;
		}

		.tabAgencyPic{
			position: relative;
			align-self: stretch;
		}
		.tabAgencyPic .pic{
			background-position: top center;
			background-size: cover;
			background-repeat: no-repeat;
			width: 246px;
			height: 323px;
			position: absolute;
			bottom: -40px;
			z-index: 2;
		}


		/* TAB CONTACT
		*/
		.tabAgencyContact{
			position: relative;
			background-color: var(--black);
			border-radius: 8px;
			z-index: 1;
		}

		.tabAgencyContact li:first-child{
			width: 100%;
		}
		.tabAgencyContact li:not(:first-child){
			padding: 40px;
			width: 50%;
		}
		.tabAgencyContact li:first-child{
			border-right: 1px solid rgba(255, 255, 255, .2);
		}
		.tabAgencyContact a{
			display: block;
			position: relative;
			top: 0px; left: 0px;
			width: 50%; height: 100%;
			margin: none;
			padding: none;
		}

		.tabAgencyContact .ico.pin{
			width: 68px; height: 24px;
		}

		/* ---------------- */

		/* TAB CONTROLS
		*/
		.tabControls{
			align-items: flex-start;
			z-index: 2;
		}
		.tabControls li{
			width: 50%;
			height: 138px;
			background-color: var(--bg-darkGreen);
			padding: 0px 50px;
			position: relative;
			overflow: hidden;
			cursor: pointer;
		}
		.tabControls li:first-child{border-radius: 0 0 0 8px;}
		.tabControls li:last-child{border-radius: 0 0 8px 0;}

		.tabControls li.current{
			background-color: var(--bg-lightGreen3);
			height: 146px;
			border-radius: 0 0 8px 8px;
		}

		.tabControls li h3{
			text-align: center;
			width: 100%;
			position: relative;
			top: 54px;
		}

		.tabControls .currentBar{
			width: 40%;
			height: 8px;
			position: absolute;
			bottom: -8px;
			left: 30%;
			background-color: var(--primary);
		}
		.tabControls .current .currentBar{
			bottom: 0px;
		}


/*
--------------------------
	SECTION 03
--------------------------
*/

		#certificationSection{
			background-color: var(--bg-cream);
			padding-bottom: 170px;
			margin-bottom: 0px;
		}

		#certificationSection h2{
			color: var(--black);
			text-align: left;
			margin-bottom: 20px;
		}
		#certificationSection .legend, #certificationSection p{color: var(--text-darkGreen);}

		#certificationSection article{
			padding: 35px 82px 85px 82px;
		}
		#certificationSection article.vflex > div{width: 50%;}
		#certificationSection .legend{text-align: center;}

		.certificationText{
			margin-right: 8px;
		}
		.certificationVisual{
			padding: 0 63px;
			margin-left: 8px;
		}

		.certificationVisual div.assurance{
			height: 141px;
			width: 268px;
			background: url(assets/bg/mmabg.jpg) center no-repeat;
			background-size: contain;
			margin: auto;
		}

		.certificationVisual div.signature{
			width: 191px;
			height: 72px;
			background: url(assets/bg/signs.jpg) center no-repeat;
			background-size: contain;
			margin: auto;
		}

		.certificationVisual .legend{
			margin: 20px 0px;
		}

		.certificationLogos{
			border: 1px solid rgba(0, 0, 0, .1);
		}

		.certificationLogos li{
			width: 100%;
			padding: 26px 16px;
			border-right: 1px solid rgba(0, 0, 0, .1);
		}
		.certificationLogos li:last-child{
			border-right: 0px;
		}

		.certificationLogos .certLogo{
			width: 100%;
			height: 64px;
			margin-bottom: 20px;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			filter: grayscale(1);
			transition: all 1s ease-out;
			-webkit-transition: all 1s ease-out;
		}
		.certificationLogos li:hover .certLogo{
			filter: grayscale(0);
		}

		.certLogo.finCharte{
			background-image: url(assets/bg/logo-fin1.svg);
			background-size: 30%;
		}
		.certLogo.synCharte{
			background-image: url(assets/bg/logo-synaba.svg);
			background-size: 30%;
		}
		.certLogo.ancCharte{background-image: url(assets/bg/logo-anc29.svg);}
		.certificationLogos .legend{
			height: 48px;
			width: 100%;
		}


/*
--------------------------
	SECTION 04 BANNERS
--------------------------
*/

	#bannerSection{
		padding: 0px;
		margin-bottom: 0px;
	}

	.banner{
		width: 100%;
		position: relative;
		height: 396px;
	}

	.bannerContent{
		width: 494px;
		position: relative;
		z-index: 1;
	}

	.first .bannerContent{
		margin-left: auto;
		padding-right: 90px;
	}
	.second .bannerContent{
		margin-right: auto;
		padding-left: 90px;
	}

	.banner.first{
		position: relative;
		/* background-color: blue; */
	}

	.banner.second{background-color: green;}

	.banner .flag .flagWrapper{
		top: 0px;
	}

	.first .bannerText{
		margin-left: 30px;
	}
	.first h2 .tinyText{
		line-height: 10px;
		position: relative;
		top: -10px;
	}
	.first .bg{
		background: url(assets/bg/bannerbg-01.jpg) center no-repeat;
		background-size: cover;
	}


	.second .bannerText{
		margin-bottom: 20px;
	}

	.second .cta{
		width: 178px;
	}

	.second .bg{
		background: url(assets/bg/radial-topo2.svg) center no-repeat;
		background-size: cover;
	}



/*
--------------------------
	CTAZONE FIXED
--------------------------
*/
section.ctaZoneFixed{
	margin-bottom: 0px;
	position: fixed;
	bottom: -135px;
	left: 0px;
	height: 135px;
	width: 100%;
	background: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 5;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}
section.ctaZoneFixed.active{
	bottom: 0px;
}

.ctaZoneFixed .ctaCard{
	background-color: transparent;
	border-radius: 0px;
}
.ctaZoneFixed .ctaCard .cta{
	margin-bottom:8px;
}


/*
--------------------------
	FOOTER
--------------------------
*/

footer{
	background-color: var(--black);
	text-align: left;
}

footer ul.vflex{
	align-items: flex-start;
}
footer li:not(:last-child){
	width: 148px;
	margin-right: 97px;
}
footer li.logoCol{width: 230px;}
.logoCol .tinyText{text-align: left;}
.logoCol .ico{
	width: 106px;
	height: 76px;
	margin-bottom: 16px;
}

footer h5{font-family: 'Open Sans', sans-serif !important;}
footer li p, footer a{margin-top: 16px;}
footer a{display: block;}