#recrutement
{
	background-color:  	#f2f2f2;
}

#recrutement_header
{
	padding:  				1px 0;
	background-color:  		#eee;
	background-position:	center center;
	background-repeat: 		no-repeat;
	background-size:  		cover;
}



.recrutement_header_title
{
	width:  			50%;
	padding:  			20px 10%;
	font-size:  		30pt;
	font-weight:  		700;
	color:  			#fff;
	margin-top: 		25vh;
}

.recrutement_header_subtitle
{
	position:  			relative;
	color:  			#fff;
	width:  			50%;
	font-size:  		30pt;
	font-weight:  		600;
	padding:  			20px 10%;
	margin-bottom:  	25vh;
	overflow:  			hidden;
}
.recrutement_header_subtitle *
{
	position:  		relative;
	z-index:  		100;
}
.recrutement_header_subtitle::after
{
	content: 			" ";
	display: 			block;
	clear: 				both;
	position:   		absolute;
	top:  				-200px;
	left:  				-100px;
	right:  			50px;
	bottom:  			-200px;
	background-color: 	#7BD5F5;
	transform: 			rotate(10deg);
}

.commons_wrap
{
}
.recrutement_etape_intro
{
	max-width:  		600px;
	margin:  			100px auto;
	text-align:  		center;
	line-height: 		1.6;
	font-size:  		14pt;
}
.recrutement_etape_intro h2
{
	line-height: 		1.4;
}
.recrutement_etape_intro a:link,
.recrutement_etape_intro a:hover,
.recrutement_etape_intro a:active,
.recrutement_etape_intro a:visited
{
	color:  			#7BD5F5;
}
.recrutement_etape
{
	max-width:  		1200px;
	margin:  			0 auto;
}
.recrutement_etape::after
{
	content: 			" ";
	display: 			block;
	clear: 				both;
}
.recrutement_etape_button
{
	padding:  			50px 0;
	text-align:  		center;
	padding-bottom:  	100px;
}

	/*************************************
	 * Etape Item
	 *************************************/
.recrutement_etape_item
{
	position:  			relative;
	float:  			left;
	width:  			44%;
	margin:  			4% 3%;
}
	.recrutement_etape_item_image
	{
		height:  				150px;
		background-size:  		cover;
		background-position:	center center;
		background-repeat: 		no-repeat;
		-moz-border-radius:		8px 8px 0 0;
		-webkit-border-radius:	8px 8px 0 0;
		border-radius:			8px 8px 0 0;
	}

	.recrutement_etape_item_info
	{
		background-color:  		#fff;
		padding:  				30px 60px;
		min-height:  			400px;
		-moz-border-radius:		0 0 8px 8px;
		-webkit-border-radius:	0 0 8px 8px;
		border-radius:			0 0 8px 8px;
	}

	.recrutement_etape_item_info h3
	{
		color:  			#111;
		font-size:  		16pt;
		font-weight:  		700;
	}

	.recrutement_etape_item_description
	{
		line-height:  		1.6;
		font-weight:  		400;
	}
	.recrutement_etape_item_description strong,
	.recrutement_etape_item_description a:link,
	.recrutement_etape_item_description a:hover,
	.recrutement_etape_item_description a:active,
	.recrutement_etape_item_description a:visited
	{
		color:  		#7BD5F5;
	}
	.recrutement_etape_item_numero
	{
		position:  				absolute;
		top:  					-40px;
		left:  					-40px;
		width:  				80px;
		height:  				80px;
		-moz-border-radius:		50%;
		-webkit-border-radius:	50%;
		border-radius:			50%;
		font-size:  			18pt;
		color:  				#fff;
		background-color:  		#7BD5F5;
		text-align:  			center;
		line-height:  			80px;
	}

/*************************************
 * Bloc Image
 *************************************/

/*************************************
 * Ligne 1
 *************************************/
.recrutement_rem1
{
	position:  			relative;
	border-top:  		1px solid #fff;
	border-bottom:  	1px solid #fff;
}
.recrutement_rem1::after
{
	content: 			" ";
	display: 			block;
	clear: 				both;
}
	.recrutement_rem_image
	{
		position:  				absolute;
		top:  					0;
		left:  					0;
		bottom:  				0;
		width:  				40%;
		background-size:  		cover;
		background-position:	center center;
		background-repeat: 		no-repeat;
		border-right:  			1px solid #fff;

	}
	.recrutement_rem_text1
	{
		margin-left:  		40%;
		padding:  			100px 100px;
		padding-left:   	20%;
		background-color:  	#2d2d2d;
		color:  			#fff;
		min-height:  		50vh;
		text-align:  		right;
	}
	.recrutement_rem_text1 *
	{
		color:   		#fff;
	}

/*************************************
 * Ligne 2
 *************************************/
.recrutement_rem2
{
	position:  			relative;
	border-bottom:  	1px solid #fff;
}
.recrutement_rem2::after
{
	content: 			" ";
	display: 			block;
	clear: 				both;
}

	.recrutement_rem_text2
	{
		float:  			left;
		width:  			60%;
		background-color:  	#2d2d2d;
		min-height:  		50vh;
		border-right:  		1px solid #fff;
		padding:  			60px 100px;
		padding-right:  	20%;
	}

	.recrutement_rem_text3
	{
		float:  			right;
		width:  			40%;
		background-color:  	#7BD5F5;
		color:  			#fff;
		min-height:  		50vh;
		padding:  			60px 100px;
		padding-bottom:  	60px;
		text-align:  		center;
	}
	#recrutement_rem_salaire_bloc
	{

	}
	#recrutement_rem_salaire_bloc::after
	{
		content: 			"€";
		display: 			inline-block;
		clear: 				both;
		font-size:  		27pt;
		color:  			rgba(255,255,255,.7);
	}
	.recrutement_rem_text3 input[type='text']
	{
		border:  				0;
		font-size:  			27pt;
		color:  				#7BD5F5;
		background-color:  		#fff;
		font-family:  			inherit;
		padding:  				20px 10px;
		width:  				80%;
		min-width:  			160px;
		margin:  				10px auto;
		margin-left:  			25px;
		text-align:  			center;
		-moz-border-radius:		5px;
		-webkit-border-radius:	5px;
		border-radius:			5px;
	}
	.recrutement_rem_text3 input[type='button']
	{
		margin:           20px 0;
		width:            70%;
		min-width:  	  150px;
		font-size:        16pt;
		background-color: rgba(0,0,0,.2);
		font-family:      inherit;
	}
	.recrutement_rem_text2 *,
	.recrutement_rem_text3 *
	{
		color: 			#fff;
	}

.recrutement_rem_result_bloc
{
	position:   		relative;
	max-width:  		480px;
	margin:  			0 auto;
	padding:  			100px 0;
	text-align:   		center;
}
	#recrutement_rem_result_nbsales
	{
		border:  				0;
		font-size:  			35pt;
		font-weight:   			700;
		line-height:  			35pt;
		color:  				#7BD5F5;
		background-color:  		#fff;
		font-family:  			inherit;
		width:   				90%;
		padding:  				30px 10px;
		margin:    				30px auto;
		text-align:  			center;
		-moz-border-radius:		5px;
		-webkit-border-radius:	5px;
		border-radius:			5px;
	}

	.recrutement_rem_button_bloc
	{
		position:  				absolute;
		text-align:  			center;
		left:  					0;
		right:  				0;
		bottom:  				-25px;
	}
	#recrutement_rem_button
	{
		margin: 0 auto;
	}

/*************************************
 * Footer
 *************************************/
#recrutement_footer
{
	position:  		relative;
	padding:  		40px 0;
	padding-bottom: 150px;
	overflow:  		hidden;
}
#recrutement_footer *
{
	position:  		relative;
	z-index:  		1;
}
#recrutement_footer::before
{
	content: 				" ";
	display: 				block;
	clear: 					both;
	position:  				absolute;
	z-index:  				0;
	top:  					54vh;
	left:  					-150px;
	right:  				-150px;
	bottom:  				-50vh;
	transform:  			rotate(-7deg);
	background-color:  		#7BD5F5;
	background-image: 		url(../images/commons/pattern.svg);
	background-position:	bottom right;
	background-repeat: 		repeat;
	background-size:  		160%;
}
#recrutement_footer .commons_wrap
{
	max-width:  			1100px;
	margin:  				100px auto;
}

#recrutement_footer_image
{
	position:  				absolute;
	top:  					0;
	left:  					0;
	bottom:  				0;
	width:   				40%;
	background-size: 		cover;
	background-position:	center center;
	background-repeat: 		no-repeat;
}

#recrutement_footer_info
{
	margin-left:  			40%;
	background-color:  		#2d2d2d;
	padding:    			80px 80px;
	color:  				#fff;
	text-align:   			center;
	font-size:  			15pt;
}

#recrutement_footer_info_intro *
{
	color:  				#fff;
}
#recrutement_footer_info strong
{
	color:  				#7BD5F5;
}
#recrutement_footer_info_intro
{
}

#recrutement_email
{
	display:   				block;
	border:  				0;
	font-size:  			14pt;
	color:  				#fff;
	background-color:  		#2d2d2d;
	font-family:  			inherit;
	padding:  				10px 10px;
	width: 					300px;
	margin:  				30px auto;
	text-align:  			center;
	border-bottom:  		1px solid rgba(255,255,255,.5);
}

#recrutement_footer_button_bloc
{
	position:  			absolute;
	bottom:  			-25px;
	left:  				0;
	right:  			0;
	text-align:  		center;
}

#recrutement_button
{
	font-family:  			inherit;
}






@media only screen /* Smartphone Horizontal */
and (max-width : 1500px)
{
	.recrutement_header_title,
	.recrutement_header_subtitle
	{
		padding:  			20px 10%;
		font-size:  		25pt;
	}
}


@media only screen /* Smartphone Horizontal */
and (max-width : 1300px)
{
	.recrutement_header_title,
	.recrutement_header_subtitle
	{
		padding:  			20px 10%;
		font-size:  		22pt;
	}
	/*************************************
	 * Rem
	 *************************************/
	.recrutement_rem_image,
	.recrutement_rem_text1,
	.recrutement_rem_text2,
	.recrutement_rem_text3
	{
		padding:  		60px 80px;
	}

	.recrutement_rem_text2,
	.recrutement_rem_text3
	{
		min-height:  		60vh;
	}
}

@media only screen /* Smartphone Horizontal */
and (max-width : 1100px)
{
	/*************************************
	 * Rem
	 *************************************/
	.recrutement_rem_image,
	.recrutement_rem_text1,
	.recrutement_rem_text2,
	.recrutement_rem_text3
	{
		padding:  		60px 30px;
	}
}

@media only screen /* Smartphone Horizontal */
and (max-width : 900px)
{

	.recrutement_header_title,
	.recrutement_header_subtitle
	{
		width:     60%;
		padding:   20px 10%;
		font-size: 18pt;
	}

	.recrutement_etape_intro
	{
		padding: 10px 20px;
	}


	.recrutement_etape
	{
		max-width:  		550px;
	}

	.recrutement_etape_item
	{
		float:  			none;
		width:  			auto;
		margin:  			60px 40px;
	}
	.recrutement_etape_item_info
	{
		padding: 			20px 30px;
	}
	.recrutement_etape_item_numero
	{
		position:  				absolute;
		top:  					-30px;
		left:  					-30px;
		width:  				60px;
		height:  				60px;
		font-size:  			14pt;
		line-height:  			60px;
	}

	/*************************************
	 * Rem
	 *************************************/
	.recrutement_rem_image,
	.recrutement_rem_text1,
	.recrutement_rem_text2,
	.recrutement_rem_text3
	{
		position:  		relative;
		float:  		none;
		width:  		auto;
		margin:		 	0;
		min-height:  	300px;
		text-align:  	center;
		padding:  		80px 120px;
	}



	/*************************************
	 * Footer
	 *************************************/
	#recrutement_footer
	{
		padding:   				20px 20px;
	}
	#recrutement_footer_image,
	#recrutement_footer_info
	{
		position:  				relative;
		top:  					0;
		left:  					0;
		bottom:  				0;
		right:  				0;
		padding:  				50px;
		width:   				auto;
		min-height:  			400px;
		margin:  	 			0;
	}
	#recrutement_email
	{
		width:  				90%;
		font-size:  			12pt;
	}

}

@media only screen /* Smartphone Horizontal */
and (max-width : 700px)
{
	.recrutement_header_title,
	.recrutement_header_subtitle
	{
		width:     90%;
		padding:   20px 5%;
		font-size: 13pt;
	}

	.recrutement_rem_image,
	.recrutement_rem_text1,
	.recrutement_rem_text2,
	.recrutement_rem_text3
	{
		position:  		relative;
		float:  		none;
		width:  		auto;
		margin:		 	0;
		min-height:  	300px;
		text-align:  	center;
		padding:  		70px 30px;
	}

}