/*--------------------------------------------------------------
## Styles
--------------------------------------------------------------*/



header.site__header,
content.site__content,
footer.site__footer
 {
		display: block;
		/* display: table; */
		width: 100%;
		line-height: 0
	}
header.site__header:after,
content.site__content:after,
footer.site__footer:after
{
		content: "";
		clear: both;
	}



header.site__header{
	background: #4874b8;
	padding-top:15px;
	padding-bottom: 15px;
}
	@media all and (min-width: 1100px){
		header.site__header{
			padding-top:45px;
			padding-bottom: 45px;
		}
	}
	
	.site__logo{
		float: left;
	}
	.site__logo__svg{
		max-width: 75px;
		float: left;
	}

	.site__logo__svg polygon,
	.site__logo__svg rect
	{
		fill:#fff;
	}
	.site__logo__text{
		position: relative;
		top:25px;
		left:10px;

		font-size: 18px;
		letter-spacing: 0.1em;
		color: #fff;
		text-transform: uppercase;
		font-weight: 400;

	}
	@media all and (min-width: 380px){
		.site__logo__text{
			font-size: 25px;
		}
	}
	@media all and (min-width: 1100px){
		.site__logo__text{
			font-size: 32px;
		}
	}


	.logos-header{ text-align: right; }

	@media all and (max-width: 1100px){
		.site__logo,
		.logos-header
		{
			text-align: center;
		}
	}

content.site__content{
	
}

footer.site__footer{

	display: inline-block;

	padding: 50px 0;
	text-align: center;
	font-size: 14px;
	line-height:18px; 
	color: #a8a9aa
}
.ml{font-size: 14px;
	line-height:18px; }

	footer.site__footer a{
		color: #5b5b5b
		}

svg path{
	fill: #000
}

.site__title__line{
	padding: 60px 0;
	width: 100%
}


.site__title{

		font-size: 25px;
		line-height: 30px;

		text-align: center;
		margin: 0;
		
	}
	@media all and (min-width: 1000px){
		.site__title{
			font-size: 34px;
			line-height: 42px;
		}
	}
	.site__title .color{
		color: #4874b8
	}

.line__banner{
	color: #fff;
	background-size: cover;
	background-position: left;
	padding-bottom: 50px;
}
	@media all and (min-width: 1000px){
		.line__banner{
			max-height: 680px;
			min-height: 550px;
			padding-bottom: 0
		}
	}
	
	.banner__form{
		background: #4874b8;

		position: relative;
    	top: -25px;

    	padding-top: 20px;
    	padding-bottom: 20px;

	}
	.form__line__title{
		text-align: center;
	}
		.form__title{

			font-size: 20px;

			text-align: center;
			margin-top: 0
		}
		@media all and (min-width: 1000px){
			.form__title{
				font-size: 28px;
			}
		}
		.form__wrap{
			padding: 0 5%;
		}
		@media all and (min-width: 1000px){
			.form__wrap{
				padding: 40px;
			}
		}

		.form__input{
			font-size: 22px;
			border:0;
			padding: 10px 0 10px 10px;
			
			width:100%;
			margin-bottom: 10px;
		}
		@media all and (min-width: 1000px){
			.form__input{
				padding: 20px 0 20px 15px;
			}
		}

		
	@media all and (min-width: 1000px){
		.banner__text{
			padding-top: 125px;
		}
	}

	.banner__text__li{
		font-size: 28px;
		font-weight: bold;
		padding: 20px 0;
	}
		.banner__text__li:before{
			content: "";
			display: block;
			height: 50px;
			width: 50px;

			float: left;

			background: url('img/puce.png') no-repeat;
			margin-right:15px;
			bottom: 12px;
			position: relative;
		}

	.banner__text_big{
		font-size: 38px;
		font-weight: bold;

		text-align: center;

		line-height: 45px;

		clear: both;

		position: relative;
		top:25px;

	}
	@media all and (min-width: 1000px){
		.banner__text_big{
			top:50px;
		}
	}

.line__intro{
	color: #202328;

	padding-top: 70px;
	padding-bottom: 50px;
}


	.intro__col{
		padding-left: 20px;
		padding-right: 20px;
	}
	.line__intro h2{
		font-size: 28px;
		line-height: 38px;
		font-weight: 700
	}
	.line__intro p{
		font-size: 18px;
    	line-height: 26px;
		font-weight: normal;
		font-weight: 500;
	}
	@media all and (min-width: 1100px){
		.line__intro p{
			font-size: 22px;
			line-height: 32px;
		}
	}

.line__pourquoi{
	background: #4874b8;
	color: #fff;

	padding-top: 50px;
	padding-bottom: 50px;
	
}
	.pourquoi__col{
		text-align: center;
		padding: 0 5px 15px 5px
	}
		@media all and (max-width: 700px){
			.pourquoi__col{
				border-bottom: 1px #202328 solid;
				margin-bottom: 15px;
			}
		}
		svg.pourquoi__icon{
			max-width: 180px;
		}
		.pourquoi__title{

			font-size: 30px;
			line-height: 38px;

			margin-top: 0;
			text-align: center;
		}
		@media all and (min-width: 1000px){
			.pourquoi__title{

				font-size: 38px;
				line-height: 48px;

			}
		}
		.pourquoi__subTitle{
			color: #202328;
			font-size: 28px;
			line-height: 34px;
		}
		.pourquoi__text{
			font-size: 22px;
			line-height: 28px;
			font-weight: normal;
		}

	.line__pourquoi svg path{
		fill:#fff;
	}

.line__logos{
	padding-top: 50px;
	padding-bottom: 50px;
}

.line__michelle{
	background: #64442d;
	color: #fff;

	background-position: 40%;
	background-repeat: no-repeat;
	background-size: cover;

	padding-top: 100px;
	padding-bottom: 100px;
}
	@media all and (min-width: 1100px){
		.line__michelle{
			background-position: center;
		}
	}


	.michelle__title{
		font-size: 22px;
		line-height: 28px;
		font-weight: bold;
	}
	.michelle__text{
		font-size: 22px;
		line-height: 28px;
		font-weight: lighter;
	}
	.michelle__text:after{
		content: "";
		clear: both;
		display: inline-block;
		width: 100%;
		z-index: 99;
		position: relative;
	}


.btn,
.form__button{

			display: inline-block;

			font-size: 22px;
			font-weight: 400;

			text-align: center;
			text-transform: uppercase;
			text-decoration: none;

			border:0;
			width: 100%;

			background: #81c614;
			color: #fff;
			
			
			letter-spacing: 0.1em;
			padding-top:25px;
			padding-bottom: 25px;

			padding-left: 25px;
			padding-right: 25px;

			
		}

.btn:hover,
.form__button:hover{
	background-color:#202328;
	cursor: pointer;
}

.btn_option{
	margin-bottom: 15px;
}

#dsl{
	border:2px yellow solid;
	padding: 10px;
	color: yellow;
	border-radius: 5px;
}

/*--------------------------------------------------------------
## Responsive Specific Styles
--------------------------------------------------------------*/

/* Wide */

@media all and (min-width: 700px) {
	.Uc{max-width: 960px;}
}

/* Small */

@media all and (max-width: 700px) {
	.Uw{width: 100%;}	
	.Uc{padding-left: 5%; padding-right: 5%}
}



/*--------------------------------------------------------------
## Responsive 
--------------------------------------------------------------*/

.Uw1-2 {width : 49.98%;}
.Uw1-3 {width : 33.31%;}
.Uw1-4 {width : 24.98%;}
.Uw1-5 {width : 19.98%;}
.Uw1-6 {width : 16.64%;}
.Uw1-7 {width : 14.26%;}
.Uw1-8 {width : 12.48%;}
.Uw2-3 {width : 66.64%;}
.Uw2-5 {width : 39.98%;}
.Uw2-7 {width : 28.55%;}
.Uw3-4 {width : 74.98%;}
.Uw3-5 {width : 59.98%;}
.Uw3-7 {width : 42.83%;}
.Uw4-5 {width : 79.98%;}
.Uw4-7 {width : 57.12%;}
.Uw5-6 {width : 83.31%;}
.Uw5-7 {width : 71.4%;}
.Uw1-9 {width : 11.09%;}
.Uw2-9 {width : 22.2%;}
.Uw3-9 {width : 33.31%;}
.Uw4-9 {width : 44.42%;}
.Uw5-9 {width : 55.53%;}
.Uw6-9 {width : 66.64%;}
.Uw7-9 {width : 77.75%;}
.Uw8-9 {width : 88.86%;}
.Uw100{width:100%;}


@media all and (max-width: 700px){
	body .Uw{
		width: 100%;
	}
}

/*--------------------------------------------------------------
## Normalize
--------------------------------------------------------------*/

body{margin: 0; font-family:'Roboto', sans-serif}
*{box-sizing: border-box;}
div{
	line-height: 0;
}
div *{
	line-height: initial;
}
.custom-radio {

    display: none;

}

/*--------------------------------------------------------------
## Thomas Dufranne Shortcuts
--------------------------------------------------------------*/
	

	.Ufw5{ font-family: 'Roboto', sans-serif; }
	.Ufw4{ font-family: 'Roboto', sans-serif; }
	.Ufw3{ font-family: 'Roboto', sans-serif; font-weight: 700 }
	.Ufw2{ font-family: 'Roboto', sans-serif; font-weight: 500 }
	.Ufw1{ font-family: 'Roboto', sans-serif; font-weight: 300 }

	[class^="line__"] {
		display: inline-block;
		/* display: table; */
		width: 100%;
	}
	[class^="line__"]:after{
		content: "";
		clear: both;
	}
	.line{width: 100%;  display: inherit;}

	.Ufull{width:100%;}
	.Udb{display: block;}
	.Uib{display: inline-block;}
	.Ufl{float:left;}
	.Ufr{float:right;}
	.Uib{display: inline-block;}
	.Ucl,.Ucleft{clear:left; }
	.Ucright{clear:right}
	.Ucboth{clear:both}
	.Uac, .center, .aligncenter{text-align: center}
	.Uar, .alignright{text-align: right}
	.Ual, .alignleft{text-align: left}
	.Uupp{text-transform: uppercase;}
	.Uw{display: inline-block;     vertical-align: top;}

	.Uround{ border-radius: 500px; }
	.center{display: table; margin: 0 auto}



	hr.ghost
	{
		border-top:0;
		border-bottom: 1px rgba(0,0,0,0.01) solid;
		margin:0;
	}

	@media all and (max-width: 700px){
		.Ucol{
			padding-left: 5%;
			padding-right: 5%
		}
	}



/*--------------------------------------------------------------
## Predefined
--------------------------------------------------------------*/

.fixed{
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 99;
	zoom:1;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
	opacity: 0.9
}

@media all and (max-width: 1100px){
	.c{	
		padding-left: 25px;
		padding-right: 25px;
	}
}
.c{	
	display: table;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	
}

img{max-width: 100%; height: auto;}
.no-bg{background: transparent!important;}

::selection {
  background: rgba(0,0,150,0.05); /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: rgba(0,0,150,0.05); /* Gecko Browsers */
}