@charset "UTF-8";
/* CSS Document */

*{
	margin:0;
	padding:0;}
	
html, body{
	width:100%;
	height:100%;
	min-height:100%;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-size: 100%;
	color:#000;
	font-size:12px;
	
	font-family: 'PT Sans', sans-serif;
	/*
	font-family: 'Merriweather', serif;
	font-family: 'PT Sans', sans-serif;
	*/
}
	
a{
	text-decoration:none;}	

img{
		vertical-align: middle;/*pour virer la bordure sous l image*/}

.centrage{
	max-width:1024px;
	position:relative;
	margin:auto;
	box-sizing:border-box;
	}

@media screen and (min-width: 960px) {
	.centrage{
		padding:0 64px;}
}

@media screen and (max-width: 960px) {
	.centrage{
		padding:0 44px;}
}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

HEADER

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

header{
	height:100%;
	min-height:100%;
	position:relative;
	}

header h1{
	float:left;
	}

header a.contact{
	font-size:12px;
	font-weight:700;
	color:#FFF;
	text-transform:uppercase;
	float:right;
	border-bottom:solid 1px #FFF;
	padding-bottom:4px;
		transition:.3s;
	
	}
	header h1,
header a.contact{
		margin-top:54px;}
		
header a:hover.contact{
	color:#9D9E9E;
	border-bottom:solid 4px #9D9E9E;
		transition:.3s;}		

/*
////////
CONTACT
////////
*/
.demi{
	height:50%;
	max-height:50%;
	position:relative;
	/*background-image:url(https://picsum.photos/1600/600);*/
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

SLIDE

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.fullscreen{
	width:100%;
	height:100%;
	min-height:100%;
	float:left;
	z-index:1;
	position:relative;
	float:left;}

.slider ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.slider {float: left;
width:100%;
height:100%;
min-height:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
}

.slider .jquery-reslider .slider-block {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0;
}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

ACCUEIL

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen and (min-width: 960px) {
.intro{
	width:40%;
	left:84px;}
}


@media screen and (min-width: 560px) and (max-width: 960px) {
.intro{
	width:50%;
	left:64px;}
}


@media screen and (max-width: 560px) {
.intro{
	width:76%;
	left:12%;
	}
}
	

.intro{
	position:absolute;
	bottom:46px;
	}

.intro h2{
	font-family: 'Merriweather', serif;
	font-size:23px;
	color:#FFF;
	margin-bottom:8px;}	

.intro p{
	text-align:left;
	color:#FFF;
	padding-bottom:46px;
	}

.intro:after{
	content:"";
	width:110px;
	position:absolute;
	left:0px;
	bottom:0;
	border-bottom:solid 1px #FFF;}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

ACTIVITE

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
section{
	width:100%;
	position:relative;
	float:left;}
	
section h3{
	font-family: 'Merriweather', serif;
	font-weight:400;
	text-align:center;
	margin:50px 0;
	position:relative;}
	
.activite h2{
	width:100%;
	margin-bottom:24px;}




		
@media screen and (min-width: 700px){	
.activite{
	width:25%;
	float:left;
	position:relative;
		text-align:center;
		/*top:-210px;*/
		box-sizing:border-box;
		padding:0 20px;
		z-index:2;
	}	
}

@media screen and (max-width: 700px){	
.activite{
	width:50%;
	float:left;
	position:relative;
		text-align:center;
		/*top:-210px;*/
		box-sizing:border-box;
		padding:0 20px;
		z-index:2;
	}	
}

		
.activite{
		padding-bottom:64px;}	
	
		
.activite img{
	max-width:144px;
	width:80%;}		

.activite p strong{
	font-weight:700;
	font-size:14px;
	position:relative;
	float:left;
	margin-bottom:12px;}
	
	
.simulateur a.lien-partenaire,
.simulateur p a.lien-partenaire,
button .lien-partenaire,
.contact-gauche a{
	background-color:#000;
	border:solid 1px #000;
	padding:4px 14px;
	width:80%;
	left:10%;
	color:#FFF;
	font-size:12px;
	font-weight:700;
		transition:.3s;}	


.simulateur a:hover.lien-partenaire,
.simulateur p a:hover.lien-partenaire,
button:hover .lien-partenaire,
.contact-gauche a:hover{
	color:#000;
	/*background-color:#9D9E9E;*/
	background-color:transparent;
	border:solid 1px #000;
		transition:.3s;}

	
@media screen and (min-width: 760px) {
.activite h3{
		font-size:15px;
}	
.intro h2,
section h3{
	font-size:23px;}
	}
	
@media screen and (max-width: 760px) {
.activite h3{
		font-size:12px;
}	
.intro h2,
section h3{
	font-size:18px;}
	}	


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

#activite .centrage{
	padding:0;
	box-sizing:inherit;
	margin:0;
	width:100%;
	}



.activite h2{
	padding-top:30px;}

.activite h3{
	width:140px;
	position:relative;
	margin:auto;
	top:16px;
	margin-top:0px;
	margin-bottom:36px;
	}	
	
.activite p,
.activite strong{
	color:#000;
	width:100%;
	box-sizing:border-box;
	padding:0 44px;}	
		
}

@media screen and (min-width: 480px) and (max-width: 700px){
	.activite {
	width:50%;
	box-sizing:border-box;
		padding:0px;
		padding-bottom:20px;
	background-color:#FFF;}
	}



@media screen and (max-width: 480px){
	.activite {
	width:100%;
	box-sizing:border-box;
		padding:0px;
		padding-bottom:20px;
	background-color:#FFF;}
	}


/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

AVANTAGES

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#avantages{
	width:100%;
	background-color:#9D9E9E;}

@media screen and (min-width: 860px){	
#avantages .centrage{
	padding:0 134px;
	}
}

@media screen and (max-width: 860px){	
#avantages .centrage{
	padding:0 44px;
	}
}



.avantage{
	
  width: 100%;
  display: inline-block;
  float: left;
  position:relative;
  box-sizing: border-box;
  padding:20px 0;
  }
  
 .avantage:last-child{
	 margin-bottom:40px;} 
 
  @media screen and (min-width: 960px){
	.txt-avantage{
	 height: 82px;
  line-height: 82px;
  border-left:solid 1px #FFF;}  
  
  .picto-avantage{}
	  
  }
  
  
  @media screen and (min-width: 800px) and (max-width: 960px){
	.txt-avantage{
	 height: 120px;
  line-height: 120px;
  }  
  
  .picto-avantage{
	  position:relative;
	  margin-top:10px;
	  padding-bottom:10px;
	  border-right:solid 1px #FFF;}
	  
  }
 
 
 @media screen and (min-width: 800px){
  
.txt-avantage{
	
  width:calc(80% - 1px);
  display: inline-block;
  float: left;
  position:relative;
  box-sizing: border-box;
  padding-left:36px;
	box-sizing:border-box;
		
 }
 
 .txt-avantage{
	 float:left;}
 
 .picto-avantage{
	width:calc(20% - 36px);
	 float:left;
	  padding-right:36px;
	box-sizing:content-box;
	 }
 }
 
 
 @media screen and (max-width: 800px){
  
.txt-avantage{
  width:100%;
  float: left;
  position:relative;
 }
 
 .txt-avantage{
	 float:left;
	 text-align:center;
	 margin-top:16px;}
 
 .picto-avantage{
	
	width:100%;
	 float:left;
	 text-align:center;
	 }
 }
 
 .picto-avantage img{
	 width:100%;
	 	max-width:82px;
}
	 	 
 .vertical-centrage{
	 
	 line-height: normal;
    display: inline-block;
    vertical-align: middle;}
	
.avantage h4{
	font-size:12px;
	font-weight:700;}

#avantages h3,
.avantage h4,
.avantage p{
	color:#FFF;}	


#avantages h3{
	margin-bottom:14px;}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

PARTENAIRES

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
section#partenaires{
	width:100%;
	position:relative;
	float:left;}
	
		
@media screen and (min-width: 700px){	

.partenaires{
	width:25%;
	float:left;
	position:relative;
		text-align:center;
		/*top:-210px;*/
		box-sizing:border-box;
		padding:0 20px;
		z-index:2;
	}	
}

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

.partenaires{
	width:50%;
	float:left;
	position:relative;
		text-align:center;
		/*top:-210px;*/
		box-sizing:border-box;
		padding:0 20px;
		z-index:2;
	}	
}	
	
.partenaires{
		padding-bottom:54px;}	
	

.partenaires svg{
	width:56px;}	
	
.parent{
	display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: space-around;
align-content: space-around;
	}		
	
section#paretanires	{
	text-align:center;}
	
section#paretanires p{
	margin-bottom:50px;}
	
section#paretanires h3{
	margin-bottom:34px;}
	
section#paretanires .partenaires p{
	margin:inherit;
	margin-bottom:10px;}
	
.partenaires h4{
	font-family: 'PT Sans', sans-serif;
	font-size:12px;
	font-weight:700;
	text-transform:uppercase;
	margin:inherit;
	margin-top:10px;}	
	
section#partenaires p{
	margin-bottom:50px;}

section#partenaires .partenaires p{
	margin-bottom:inherit;}

section#partenaires .partenaires p strong{
	font-weight:700;
	font-size:24px;}
	
.partenaires a.lien-partenaire,
.partenaires p a.lien-partenaire,
.simulateur a.lien-partenaire,
.simulateur p a.lien-partenaire,
button .lien-partenaire,
.contact-gauche a{
	background-color:#000;
	border:solid 1px #000;
	padding:4px 14px;
	width:80%;
	left:10%;
	color:#FFF;
	font-size:12px;
	font-weight:700;
		transition:.3s;}	


.partenaires a:hover.lien-partenaire,
.partenaires p a:hover.lien-partenaire,
.simulateur a:hover.lien-partenaire,
.simulateur p a:hover.lien-partenaire,
button:hover .lien-partenaire,
.contact-gauche a:hover{
	color:#000;
	/*background-color:#35a8e0;*/
	background-color:transparent;
	border:solid 1px #000;
		transition:.3s;}

#partenaires{
	text-align:center;}
	
.partenaires a{
	color:#000;}
	


 svg.btn-dl-doc{
	 width:12px;
	height:12px;
	fill:#FFF;
	background-color:#000;
	padding:6px;
	transition:.3s;}	

a:hover  svg.btn-dl-doc{
	fill:#9D9E9E;
	transition:.3s;}		
	
	

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

ML

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#ml{
	width:100%;
	text-align:center;
	margin:20px 0;}
	
	
#ml p strong{
	font-weight:700;}
	
#ml p a{
	color:#000;
	text-decoration:none;}
	

#ml p a:hover{
	text-decoration:underline;}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

FOOTER

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

footer {
	width:100%;
	position:relative;
	float:left;
	background-color:#000;
	box-sizing:content-box;
	}

@media screen and (min-width: 680px) {	
footer{padding:48px 0;}

footer h3{
	float:left;}
	
footer h3 img{
	max-width:144px;
	width:100%;
	}		
	
.info-footer{
	float:right;}	
	
.footer{
	float:left;
	width:auto;
	}	
	
footer h4{
	font-size:10px;
	color:#9D9E9E;
	font-weight:700;
	border-bottom:solid 1px #9D9E9E;
	padding-bottom:4px;
	margin-bottom:4px;}	

.footer p{
	text-align:left;}
}


@media screen and (min-width: 740px){
	.footer{
box-sizing:content-box;
	padding-left:66px;}	

	}

@media screen and (min-width: 680px) and (max-width: 740px) {
	.footer{
box-sizing:content-box;
	padding-left:46px;}	

	}

@media screen and (max-width: 680px) {	
footer{padding-top:40px;}

footer h3{
	text-align:center;
	width:100%;
	margin-bottom:40px;}
	
footer h3 img{
	max-width:144px;
	width:100%;
	}	
	

.info-footer{
	width:100%;
	float:left;}	
	
.footer{
	position:relative;
	width:100%;
	text-align:center;
	box-sizing:content-box;
}	
	
footer h4{
	font-size:10px;
	color:#9D9E9E;
	font-weight:700;
	padding-bottom:4px;
	margin-bottom:4px;
	}	
	
.trait{
	border-bottom:solid 1px #9D9E9E;}	
	
.info-footer:nth-of-type(1) .footer,
.info-footer:nth-of-type(2) .footer{
	margin-bottom:24px;}	
	

.info-footer:nth-of-type(3) .footer{
	margin-bottom:0;}	
	
	
footer svg{
	position:absolute;
	top:-6px;
	left:calc(50% + 50px);
	}	
}


footer p,
footer a{
	color:#9D9E9E;
	font-size:11px;
	transition:.3s;
}
	
footer a:hover{
	color:#FFF;
	transition:.3s;}	

footer svg{
	width:20px;
	fill:#9D9E9E;
	transition:.3s;}

footer svg:hover{
	fill:#FFF;
	cursor:pointer;
	transition:.3s;}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

FORM

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


/*
////////////////////////////////////////////////////////////////////////////////////////////////////

FORM GENERAL

////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.cfg-clear{}

/*FORM*/
.cfg-contactform{
	width:100%;
	height:auto;
	direction:inherit;
	clear:right;
	position:relative;
	font-family: 'PT Sans', sans-serif;
	font-weight:400;
	font-size:12px;
	color:#000;
	z-index:100;
	
}


/*SECONDE BOX FORM EN CAS DE COUILLE PLACEMENT*/
.cfg-contactform-content{
	width:100%;
	float:right;
	position:relative;
	z-index:1;
	margin:34px 0;}


/*GROSSES PARTIES EN MODE BLOC [NOM / OBJET / MESSAGE …]*/
.cfg-element-container{
	width:100%;
	
}


/*INTITULE DES GROSSES PARTIES LES LABELS*/
.cfg-label{
	display:block;
	font-family: 'PT Sans', sans-serif;
	font-weight:400;
	font-size:12px;
	color:#000;
	
}

/*DIV DANS LAQUELLE J AURAI L INPUT*/
.cfg-element-set{
	margin-bottom:6px;
}


@media screen and (min-width: 960px) {
.contact-group{
	width:50%;
	display:inline-table;
	position:relative;
	border-left: solid #1 #FFF;}
	
.contact-group:nth-of-type(1){
	box-sizing:border-box;
	padding-right:5%;}	
	
.contact-group:nth-of-type(2){
	float:right;
	border-left:solid 1px #FFF;
	box-sizing:border-box;
	padding-left:5%;}

}

@media screen and (max-width: 960px) {
.contact-group{
	width:100%;
	display:inline-table;
	position:relative;
	border-left: solid #px #FFF;}
	
.contact-group:nth-of-type(2){
	border-bottom:solid 1px #FFF;
	box-sizing:content-box;
}

}

/*PLACEHOLDER*/
/*::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder{
	   color: #000;
	   opacity:1;
}*/


.cfg-option-content input[type=radio],
.cfg-option-content input[type=checkbox]{
	margin-right:2px;
}

.cfg-option-set::after{ /* restore margin bottom when elements are floating */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.cfg-paragraph{
	margin-bottom:1px; /* IE (for paragraphs above <select>) */
}
.captcha_container{
	margin-top:2px;
}

.cfg-captcha-input{}


.cfg-contactform input{}

.ui-datepicker{
	font-size:9pt !important;
}
	

.cfg-submit{
	cursor:pointer;
	padding:8px 4px;
}

.cfg-required{/*champ requit*/
	color:#e62b65;
}

.cfg-uploadsuccess-container{
	margin-top:10px;

}
.cfg-deleteupload{
	color:#ff0033;
	margin-left:10px;
	cursor:pointer;
}
.cfg-deleteupload:hover{
	text-decoration:underline;
}

.cfg-loading{
	display:none;
	background:url('../img/loading.gif') no-repeat 0 1px;
	padding-left:20px;
	font-size:14px;
}

.cfg-errormessage, .cfg-validationmessage{
font-family: 'PT Sans', sans-serif;
	font-weight:400;
	font-size:12px;
	color:red;
}

.cfg-errormessage{
	display:none;
	margin:0;
	width:95%;
}

.cfg-validationmessage{
	width:100%;
	margin-bottom:16px;
	padding-bottom:10px;
	background-color:#FFF;
	z-index:100;
	color:#000;
	text-align:center;
}



/*
////////////////////////////////////////////////////////////////////////////////////////////////////

16 = NOM ET PRENOM

////////////////////////////////////////////////////////////////////////////////////////////////////
*/





/*
////////////////////////////////////////////////////////////////////////////////////////////////////

12 = EMAIL

////////////////////////////////////////////////////////////////////////////////////////////////////
*/




/*
////////////////////////////////////////////////////////////////////////////////////////////////////

15 = OBJET

////////////////////////////////////////////////////////////////////////////////////////////////////
*/



/*
////////////////////////////////////////////////////////////////////////////////////////////////////

13 = MESSAGE

////////////////////////////////////////////////////////////////////////////////////////////////////
*/



/*
////////////////////////////////////////////////////////////////////////////////////////////////////

14 = BTN ENVOIE

////////////////////////////////////////////////////////////////////////////////////////////////////
*/
.cfg-element-container-envoyer{
	width:100%;
	position:relative;
	float:left;
	}


.cfg-element-content #cfg-element-67-14, .cfg-element-set #cfg-element-67-14{
position:relative;
margin:auto;
	padding:4px 14px;
	width:auto;
	/*left:10%;*/
	font-family: 'PT Sans', sans-serif;
	font-weight:700;
	font-size:12px;
	color:#FFF;
	background-color:#000;
	border:solid 1px #000;
	transition:.3s;
}

#cfg-element-67-14{	}

#cfg-element-67-14:hover{
color:#000;
background-color:transparent;
border:solid 1px #000;
transition:.3s;
}



/*
////////////////////////////////////////////////////////////////////////////////////////////////////

21 = Captcha

////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*.cfg-element-container .captcha{
	width:120%;
	left:10%;
	background-color:pink;
	position:relative;
	float:left;
	display:none;
}*/


@media screen and (min-width: 720px) {	
.captcha{
	float:left;
	width:80%;
	margin-left:10%;
	margin-top:20px;}
}

@media screen and (max-width: 720px) {	
.captcha{
	float:left;
	width:100%;
	margin-top:20px;}
}


	

/*MOT CAPTCHA ET IMG*/
#cfg-element-67-21-label{
font-size:14px;
color:#000;
text-align:center;
width:30%;
float:left;
margin-top:8px;
}	



.cfg-captcha-refresh{
	position:relative;
	margin-top:0px;
	left:-30px;
	cursor:pointer;
}

#cfg-element-67-21-label, #cfg-element-67-21-label img{
	width:auto;
	display:inline-block;
	
	left:10px;
	top:8px;}

.cfg-label-value{
	position:relative;
	top:-4px;}
	
	
	
/*IMG DE VALIDATION ET INPUT*/
#cfg-element-67-21-set{
	
}

#cfg-element-67-21{
	width:60%;
	float:left;
}


/*#cfg-element-67-21-label, 
#cfg-element-67-21:nth-child(1),
#cfg-element-67-21:nth-child(2){
	width:10%;
	float:left;
	display:inline-block;}*/

#cfg-element-67-21:nth-child(1){
margin-top:10px;
width:120px;
float:left;
}

#cfg-element-67-21:nth-child(2){
	width:120px;
	height:26px;
	position:relative;
	top:-8px;
	text-align:center;
}

@media screen and (min-width: 660px){
	#cfg-element-67-21:nth-child(1),
	#cfg-element-67-21:nth-child(2){
		margin-left:20%;}
		}

@media screen and (max-width: 660px){
#cfg-element-67-21:nth-child(1){
	margin-left:0;
	margin-left:50px;

}	

#cfg-element-67-21:nth-child(2){
	float:right;}
}

input#cfg-element-67-21{
height:20px;
padding:0;
margin-top:14px;
border:solid 1px #000;
background-color:#FFF;
width:60%;


}


.cfg-captcha-img{
	border:none;
	background-color:#FFF;
	width:100px;
	height:20px;
	display:inline;
	margin-left:13px;
	top:-2px; /* Opera */
	position:relative;

		float:left;
	border:solid 1px #A6A6A6;
	 -webkit-filter: grayscale(1);
  filter: grayscale(1);	
}

.cfg-captcha-img img{
	
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
		filter: grayscale(1);}



@media screen and (max-width: 460px) {
#cfg-element-67-21-label{
font-size:14px;
color:#000;
text-align:center;
width:100%;
float:left;
left:-4px;
margin-top:0;
top:-4px;
}	
#cfg-element-67-21:nth-child(1),
	#cfg-element-67-21:nth-child(2){
		margin-left:0;}
		
#cfg-element-67-21:nth-child(1){
	float:left;}
	#cfg-element-67-21:nth-child(2){
		float:right;}

}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////

16 = NOM ET PRENOM
15 = OBJET
12 = EMAIL
13 = MESSAGE
21 = Captcha
14 = BTN ENVOIE


////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
#cfg-element-67-16-set, 
#cfg-element-67-12-set, 
#cfg-element-67-15-set, 
#cfg-element-67-13-set{
width:100%;
float:left;
display:inline-block;
clear:left;
color:#F00;
}



#cfg-element-67-16-label,
#cfg-element-67-12-label,
#cfg-element-67-15-label,
#cfg-element-67-13-label{
	font-size:14px;
	color:#000;
	width:20%;
	float:left;
	text-align:left;
}
*/



/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
}

@media screen and (min-width: 960px) {
.contact-group .cfg-element-container:nth-of-type(2),
.cfg-element-container.msg{
	margin-top:40px;
	}
}


@media screen and (max-width: 960px) {
.contact-group .cfg-element-container{
	margin-bottom:40px;
	}

.cfg-element-container.msg	{
	margin-top:40px;
	margin-bottom:20px;
	}
}

input,
textarea 				{
  font-size:12px;
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:2px solid #FFF;/*#F2F2F2*/
  box-sizing:border-box;
  transition:.3s;
  background-color:#FFF;
}

textarea{
	resize:none;}

input:focus,
textarea:focus 		{ 
outline:none; 
 border:2px solid #000;/*#F2F2F2*/
 
  transition:.3s;}

/* LABEL ======================================= */
label 				 {
  color:#000; 
  font-size:12px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:20px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}


.captcha label{
		 position:inherit;
		  left:0px;
  top:6px;
  position:relative;
}

/* active state */
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label, textarea:valid ~ label 		{
  top:-20px;									/*top:-20px;*/
  left:2px;
  font-size:12px;
  color:#000;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:0px; 
  position:absolute;
/*  background:yellow;*/ 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after,
input:focus ~ .bar:before, input:focus ~ .bar:after,
textarea:focus ~ .bar:before, textarea:focus ~ .bar:after,
textarea:focus ~ .bar:before, textarea:focus ~ .bar:after {

  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight,
textarea:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter,
@-webkit-keyframes textareaHighlighter {
	from { background:#595959; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter,
@-moz-keyframes textareaHighlighter {
	from { background:#595959; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter,
@keyframes textareaHighlighter {
	from { background:#595959; }
  to 	{ width:0; background:transparent; }
}


/*RGPD*/		
@media screen and (min-width: 720px) {		
.rgpd{
	position:relative;
	float:left;
	margin:20px 0;
	width:80%;
	margin-left:10%;
	}
}

@media screen and (max-width: 720px) {		
.rgpd{
	position:relative;
	float:left;
	margin:20px 0;
	width:100%;
	}
}
	
.rgpd label{
	 pointer-events:inherit;}	

.rgpd #cfg-element-67-166-label, 
.rgpd #cfg-element-67-166-set{
	display:inline-block;}

.rgpd #cfg-element-67-166-label{
	position:relative;
	width:90%;
	margin-left:5%;
	height:auto;
	min-height:50px;
	margin-bottom:30px;
	clear:right;}
	

.rgpd #cfg-element-67-166-label a{
	text-decoration:underline;
	color:#000;
	}
	
.rgpd #cfg-element-67-166-label a:hover{
	text-decoration:none;
	color:#000;}

.rgpd #cfg-element-67-166-set{
	position:absolute;
	clear:left;
	top:20px;
	left:0px;
	width:20px;
	height:20px;
}