/*Styles CSS3*/
		/*Général*/

		* { font-family: Arial, Helvetica, sans-serif; margin:0px; padding:0px; list-style-type:none; }
		a{text-decoration:none; color:inherit;}
		a img { border:0px none; }


		h1 { font-family: 'Quicksand', Verdana, Helvetica, sans-serif; font-size: 30px;line-height: 40px;  font-weight:bold;  color: #2d2d2d; margin:0; padding:0.8em 0 0.8em;}
		h1 strong  {  font-family: 'Quicksand', Verdana, Helvetica, sans-serif;  font-size: 32px; line-height: 36px; color: #ed3252; }
		h1 span {font-family:'Quicksand', Verdana, Helvetica, sans-serif;  font-weight:normal; color:white; font-size:25px; line-height:29px; }


		h2 {
			    font-family:'Quicksand', Verdana, Helvetica, sans-serif;
				font-size: 24px;
				color: #ed3252;
				line-height: 28px;
				font-weight: normal;
				margin: 0px 0px 15px 0px;
		}
		h2 span {  color:#40598f; }
		h2 strong {   color:#33adc9; }

		h3 {
		    font-family: 'Quicksand', Verdana, Helvetica, sans-serif;
			font-size: 18px;
			color: #1f2c33;;
			line-height: 22px;
			font-weight: normal;
			margin: 0px;
			margin-top: 6px;
			margin-bottom: 10px;
		 }
		h3 strong {  font-family: 'Quicksand', Verdana, Helvetica, sans-serif;  color: #FFAB24; font-size: 25px; line-height: 31px; }

		p { font-family: 'Montserrat', sans-serif; font-size: 15px;  color: #2d2d2d;line-height: 19px; }
		ul { font-size:12px; margin:0px; padding:10px; }
		li {
			line-height:15px; margin-bottom:5px; zoom: 1; *display: inline; color:#525252;
			background-image:url(../img/index_puce.png); background-repeat:no-repeat;
			background-position:0px 4px;
			padding-left:15px;
		}

		.left{text-align:left;}
		.right{text-align:right;}
		.center{text-align:center;}
		.white{background-color:white;}
		.bg-green{ background-color:#35b6c2;}
		.bg-grey{ background-color:#cfe1f5;}
		img{ max-width:100%; height:auto; }

		:focus {
  		outline-color: transparent;
 		 outline-style: none;
		}
		textarea, input { outline: none; }
		.mob{display:none;}
html{
	margin:0;
  padding:0;
  min-height:100%;

}

body{
	width:auto; margin:0px; padding:0px; background-color:#dbdbdb;



	min-height:100%;



}
.no-marge{ margin:0px; padding:0px;}
.bg-a{ background-color: #f49000;}
/*---------------------------------------------------------*/

	#go-form{display:none;}

/*----------------------------Structure-----------------------------*/
.max{  margin:0 auto; box-sizing:border-box; max-width: 1200px; }

.content-a .max, .title .max{ max-width: 1200px;margin: 0 auto;}
.main{ margin:0 auto;  background: #a67101 url(../img/index_bg.jpg) left bottom no-repeat; background-size: 20rem auto; padding-left: 20rem;
}


.padding{ padding: 1em ; box-sizing:border-box;}


/*----------------------------HEADER-----------------------------*/
.fond {
	background: #dbdbdb url( img/cata-anim_fond.jpg ) center top no-repeat;
	height: 23rem;
	background-size: auto 28rem;
	position: relative;
	overflow: hidden;
}

.fond .hand{ margin: 0 auto; display: block; z-index: 0; height: 28rem; width: auto; position: absolute;
	top: 0; left: 0; right: 0;     max-width: none;}
.header{ padding: 2em 1em 1em;}
.logo, .moto{
	position:relative;
	z-index:10;
}

.moto{ padding-top: 35px; float: right;}
 img.logo{
	width: 150px;
	height: auto;
	    padding-bottom: 1em;
}

.title{ padding: 0rem 0rem 0rem; position: relative; z-index: 10;}

.content-c h3{ padding: 1rem; background: #d61717; color: white; display: inline-block;}

/*----------------------------content-----------------------------*/
.content-a{
box-sizing: border-box;
	padding: 2rem ;
	position: relative;
	z-index: 1000;
	background: white;
}

.pastille {
	background: white;
	height: 10rem;
	width: 10rem;
	border-radius: 100%;
	position: absolute;
	float: left;
	left: -15rem;
	text-align: center;
	padding: 3rem 1rem;
	box-sizing: border-box;
	top: 5rem;

}
.pastille h2{color :#2d2d2d; font-weight: bold; font-size: 20px; line-height: 22px;}



.content-a > .padding{  padding: 1em 1em 0 0; border-right: 1px dashed #72bf44;}



.content-b{ text-align: center;}


.content-b h3 strong{font-size: 15px !important; line-height: 20px !important;}
.pastille > div{
	position: relative;
	background: white url(plus.svg) top left no-repeat;
	background-position: 0 1px;
    text-align: left;
    padding: 0rem 1rem 0.5rem 1.4rem;
	background-size: 20px auto;
    box-sizing: border-box;

	z-index: 100;
	margin-bottom: 0.5em;

}

.pastille > div:last-child{background: white url(../img/moins.svg) top left no-repeat;
	background-position: 0 1px; background-size: 20px auto;}



.pastille h3{margin: 0px; padding: 0px; color: white; font-size: 16px; line-height: 20px; color: black;}
.pastille h3 strong{ font-size: 22px; text-transform: uppercase; line-height: 26px;  display: block; margin-top: 2px; margin-bottom: 2px;}
.pastille:after{


}


.list p{
 background: url(check.png) left top no-repeat;;
    padding: 0rem 1.5rem 0.8rem;
	margin-top: 5px;
    background-size: 20px auto;
	background-position: 0 3px;

    font-size: 17px;
    line-height: 20px;
	display: block;
	color: black;

}






.video iframe{ max-width: 100%; max-height: 250px;}

.picto{    width: 125px;
    height: 125px;
    background: #f2f2f2;
    position: absolute;
    top: 35px;
    right: -63px;
    z-index: 100;}

.content-b img { width: 5rem; height: auto; display: block; margin: 0 auto; }
.aside-logo {width: 100%; height: auto;}



.slide{ background: url(../img/index_slide1.jpg) top center no-repeat;
		background-size: 100% auto;
		min-height: 200px;
}

.slideblock{position: relative; min-height: 200px; background-color:  #646464; }
.slideblock > div {
	min-height: 200px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.slideb, .slidec{display: none;}
/* anim jQUery*/
.second .slideb{

	background: url(../img/index_slide2.jpg) top center no-repeat;
    background-size: 100% auto;

    }
.third .slidec{

	background: url(../img/index_slide3.jpg) top center no-repeat;
    background-size: 100% auto;

    }



/*----------------------------Anim------------------------------*/
.fond{position: relative;}

.title{
	-webkit-animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

 .content-b{
	-webkit-animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}






/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@-moz-keyframes rot {
   0% { -moz-transform: rotate(0deg); }
    30% { -moz-transform: rotate(60deg); }
	70% { -moz-transform: rotate(-100deg); }
	100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes rot {
    0% { -webkit-transform: rotate(0deg); }
    30% { -webkit-transform: rotate(60deg); }
	70% { -webkit-transform: rotate(-100deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes rot {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(60deg); }
	70% { transform: rotate(-100deg); }
	100% { transform: rotate(0deg); }
}







/*----------------------------FORM------------------------------*/
.aside .label-floatlabel  {
	z-index:100;
	right: 8px !important;
	color: white !important;
	opacity:0.5 !important;
	left: auto !important;
}


.radio{min-height: 20px; margin-top:0.28em;}


.aside{
	    position: relative;
    z-index: 10;
   padding-top: 1rem;

   background:#2d2d2d;
    box-sizing: border-box;

    padding-bottom: 1em;
    text-align: left;

	margin: 0;
	padding: 1rem;



}
.aside > .row{ }


.aside:after{
	content:'';
}





.cata {text-align:center;      margin-top: -15px;    margin-bottom: -60px;}
.second #top_form{background-color: #f28c00;}
.third #top_form{background-color: #c4014b;}

#top_form { transition: background-color 0.8s; text-align: left}



.cata img{max-width:250px; height:auto; margin-top: -120px; }

#conteneur_form {
    position: relative;
    text-align: left;
    background-color: transparent;
    border: none;
    margin-top: 0px;
}
.form{max-width:300px; margin:0 auto;}
#form{width:auto;}
#ZeForm{}





.separ{ visibility:hidden; width: 100%;}








.alerte{     background-color: white; color: #FFAB24;  margin-bottom: 0px; }


.valid{text-align: center; margin-bottom: 2em;}
input#valid, .btn{
	    background-color: #FFAB24;
    margin-top: 0px;
    height: 40px;
   -webkit-transition: all 0.3s;
		transition: all 0.3s;
    margin-top: 2em;
    border-radius: 30px;
    color: #2d2d2d;
    display: inline-block;
    font-family: Verdana, Helvetica, sans-serif;



}
input#valid:hover, .btn:hover{background-color: #ffbb4d; color:#2d2d2d;
-webkit-transform: scale(1.3);
		transform: scale(1.2);
}
.champs_obligatoires{font-size:10px;color:white; font-size: 10px;  padding: 0 10px;}

#q_1 label{ font-size:15px; margin-bottom:5px;}
label.inline-block{ margin-bottom:0px;}


.q_4{

    padding: 10px 5px 0;
    margin: 0 0 10px 0;
    font-size: 11px;
    text-align: left;
}

.projet{    height: 80px; padding-top: 19px;}
/*----------------------------MENTIONS & Merci------------------------------*/
.mentions, .mentions p {
	color:white;
    line-height: 11px;
    font-size: 9px;
    opacity: 0.7;
    text-align: center;
}
.mentions{
	    padding-top: 100px;
    padding: 1em 2em;
    background-color: transparent;
    opacity: 1;
    /*border-top: 1px solid #35b6c2;*/
}

.footer{
background: #333333;


}



.page_remerciement .btn{
	position: relative;
    right: auto;
    display: inline-block;
    padding: 10px 20px 10px;
    /* color: white; */
    width: auto;
    text-align: center;
	height: auto;
}

.page_remerciement .fond .hand{top: auto;bottom: 0;}
.page_remerciement .fond {background: #dbdbdb;}


.page_remerciement .aside:before{ display:none;}
.page_remerciement .aside:after{ left:0;}
.page_remerciement .content-a{ padding-bottom: 20rem;}



.page_remerciement p{background:none;padding: 0.5em 0 1em;}
.page_remerciement a{ color:#505c5c;}
.page_remerciement a:hover {color: #505c5c;}
.page_remerciement a.btn ,.page_remerciement a.btn:hover {color: white;}


.page_remerciement .fond{ min-height: 100vh;  }
.page_remerciement h2{ margin-top:1em;}



body.inactive{ overflow: hidden !important;  }


@media screen and (max-device-width: 1380px), screen and (max-width: 1380px){
	.fond { background: #dbdbdb url(cata-anim_fond.jpg) right top no-repeat;background-size: auto 28rem;}
	.fond .diag{right: 4rem;}
	.fond .hand{ left: auto;}
	.title{max-width: 700px;}
}

@media screen and (max-device-width: 800px), screen and (max-width: 800px) {
	.pastille{display: none;}
	#top_form:before{display: none;}
	.fond .hand{display: none;}
	.fond { background: #dbdbdb;}
	img.logo{margin: 10px auto 20px; display: block;}
	h1{text-align: center; margin-bottom: 20px;}
	.pastille > div{-webkit-animation: none; animation: none; }
	.radio{min-height: auto; margin: 0px;}

	.content-b img{ margin-top: 1rem;}
	.content-a{padding-top:2em;}

	.slideblock, .slideblock > div, .pastille{display: none !important;}


		.left, .right{text-align:center;}


	h1{padding: 10px; margin: 0px;}

	.main{padding: 0;}


	.aside{padding: 0px;}

	.aside > .row{border-radius: 0; max-width: 100%;}
	.aside .col{margin:0px;}
	.cata img{margin-top: 10px;}
	input[type="text"], textarea{height: 50px;}

	.info{border:none; padding: none;}
	.logo{text-align: center;}
		.logo img{    max-width: 100%; height: auto; margin: 0 auto;}

	.forme{width: 100%; height: auto;}


	.page_remerciement p{text-align: center}
	input#valid{position: relative; right: auto; margin: 10px auto;}
}

@media screen and (max-device-width: 400px), screen and (max-width: 400px) {
	h1{font-size: 20px !important;line-height: 23px !important;}



}