/*************************************
 * Part 3
 *************************************/
.step
{
	position:  			relative;
	padding:  			140px 160px;
	padding-bottom:   	0;
}

.step::after
{
	content: 			" ";
	display: 			block;
	clear: 				both;
}
.step_left
{
	float:  			left;
	width:    			45%;
	line-height:  		1.6;
}
.step_right
{
	position: 			relative;
	float:  			right;
	width:  			50%;
	text-align: 		center;
}
.step_steps
{
	padding:   			50px 0;
}
.step_items
{
	padding: 			20px 0;
}
.step_encadre
{
	position:  				absolute;
	top:  					-70px;
	right:  				-137.5px;
	width:   				275px;
}

.step_image
{
	padding-top:  			120%;
	background-position:	center center;
	background-repeat: 		no-repeat;
	background-size:   		cover;
}
.step_button:link,
.step_button:hover,
.step_button:active,
.step_button:visited
{
	position:  			relative;
	top:   				-30px;
}

/*************************************
 * Steps
 *************************************/
.step_item
{
	position:  			relative;
	padding:  			30px 0;
	cursor:  			pointer;
}
.step_item::after
{
	content: 			" ";
	display: 			block;
	clear: 				both;
}
.step_item_numero
{
	display:  				block;
	float:  				left;
	width:					15%;

}
.step_item_numero span
{
	display: 				block;
	position: 				absolute;
	background-color:  		#2d2d2d;
	margin-top:  			-15px;
	width:  				65px;
	height:  				65px;
	color:  				#fff;
	line-height:  			65px;
	text-align:  			center;
	font-size:   			20pt;
	font-weight:  			700;
	-moz-border-radius:		50%;
	-webkit-border-radius:	50%;
	border-radius:			50%;
	-webkit-transition:		all .2s ease-out;
	-moz-transition:		all .2s ease-out;
	-o-transition:			all .2s ease-out;
	transition:				all .2s ease-out;
}
.step_item_info
{
	float:  				left;
	/*width: 					84%;*/
	margin-left:  			90px;
}


@media only screen /* Smartphone Horizontal */
and (max-width : 1200px)
{
	.step_right
	{
		margin-bottom:   	80px;
	}
	.step_image
	{
		padding-top:  	80%;
	}

	.step_right,
	.step_left
	{
		float:   		none;
		width:   		auto;
	}
	.step_left
	{
		padding-bottom:  		70px;
	}

	.step_item_numero span
	{
		margin-top:  	-2px;
	}
}


@media only screen /* Smartphone Horizontal */
and (max-width : 1100px)
{
	.step
	{
		padding:   		100px 100px;
	}


	.step_button:link,
	.step_button:hover,
	.step_button:active,
	.step_button:visited
	{
		position:  			absolute;
		top:   				auto;
		display:   			block;
		bottom:   			-30px;
		margin:   			0 15%;
		width:   			70%;
	}
}

@media only screen /* Smartphone Horizontal */
and (max-width : 900px)
{
	#metier_zoom_step_encadre
	{
		width:  		35%;
	}
	#metier_zoom_step_image
	{
		margin-right:  	0;
	}

	#metier_zoom_step .commons_wrap
	{
		background-color: 	#fff;
	}

	.step_item_numero span
	{
		margin-top:  	-15px;
	}
}

@media only screen /* Smartphone Horizontal */
and (max-width : 700px)
{
	.step
	{
		padding:  			50px 10px;
		margin-bottom:  	80px;
		/*padding-bottom:  	70px;*/
		/*margin-top:  		70px;*/
		/*margin-bottom:   	50px;*/
	}
	.step .commons_wrap
	{
		position:  			relative;
		/*padding:  			50px 0;*/
	}
	.step_items
	{
		padding: 		40px 0;
		padding-bottom:  10px;
	}

	.step_item_info
	{
		width: 72%;
	}

	.step_encadre
	{
		right: 0;
		top:   -30px;
	}
	.step_right
	{
		position:  	static;
	}

	.step_image
	{
		padding-top: 100%;
	}

	.step .step_button:link,
	.step .step_button:hover,
	.step .step_button:active,
	.step .step_button:visited
	{
		position: absolute;
		top:      auto;
		display:  block;
		bottom:   -30px;
		margin:   0 0;
		width:    100%;
	}
}


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

	/*************************************
	 * Part 3
	 *************************************/
	.step_encadre
	{
		right:  			-50px;
		top:   				-60px;
		z-index:   			1;
		transform:   	   	scale(0.8);
	}
	.step_image
	{
		position:   		relative;
		top:   				30px;
		left:   			-30px;
		padding-top:   		130%;
		z-index:			0;
	}
}


@media only screen /* Smartphone Horizontal */
and (max-width : 1600px)
{
	.step_item_info
	{
		/*float:  				right;*/
		/*width: 					76%;*/
	}
}
.step_item_title
{
	font-size:  			19pt;
	font-weight:  			700;
}
.step_item_text
{
	/*display:  				none;*/
	opacity:  			0;
	height:  			0;
	overflow: 			hidden;
	line-height:   		1.6;
	-webkit-transition:	all .4s ease-out;
	-moz-transition:	all .4s ease-out;
	-o-transition:		all .4s ease-out;
	transition:			all .4s ease-out;
}
.step_item_text strong
{
	color:  			#7BD5F5;
}
.step_item_link
{
	opacity:  			0;
	height:  			0;
	overflow: 			hidden;
}

/*************************************
 * Step Opened
 *************************************/
/*.step_item:hover .step_item_numero span,*/
.step_item.opened .step_item_numero span
{
	transform: scale(1.2);
	/*width:  				90px;*/
	/*height:  				90px;*/
	color:  				#7BD5F5;
	/*line-height:  			90px;*/
	/*text-align:  			center;*/
	/*font-size:   			30pt;*/
	/*margin-top:  			-27px;*/
	/*margin-left:  			-5px;*/
}
/*.step_item:hover .step_item_text,*/
.step_item.opened .step_item_text
{
	height:  		180px;
	opacity:  		1;
}
.step_item.opened .step_item_link
{
	height:  		auto;
	opacity:  		1;
}

.step_item .step_item_numero::after
{
	content: 			" ";
	display: 			block;
	clear: 				both;
	position: 			absolute;
	top:  				100px;
	left:  				31px;
	border-left: 		5px dotted rgba(0,0,0,.15);
	width:  			1px;
	opacity:  			0;
	-webkit-transition:	all .4s ease-out;
	-moz-transition:	all .4s ease-out;
	-o-transition:		all .4s ease-out;
	transition:			all .4s ease-out;
	height:  			180px;
}
/*.step_item:hover .step_item_numero::after,*/
.step_item.opened .step_item_numero::after
{
	opacity:  			1;
}
/*.step_item:last-child:hover .step_item_numero::after,*/
.step_item:last-child.opened .step_item_numero::after
{
	display:  			none !important;
}





@media only screen /* Smartphone Horizontal */
and (max-width : 700px)
{
	/*************************************
	 * Step
	 *************************************/
	.step_item_title
	{
		font-size:  	17pt;
	}
	.step_item .step_item_numero::after
	{
		top:   				70px;
		height: 			260px;
	}
	.step_item_numero
	{
		position:  			relative;
		top:  				2px;
	}
	.step_item_text
	{
		font-size:  		11pt;
		line-height:  		1.4;

	}
	.step_item.opened .step_item_text
	{
		height:  		210px;
	}

	.step_item_numero span
	{
		margin-top: -2px;
	}
}