#content_expertise{
	width: 960px;
	margin: 0 auto;
}

#liste_expertise, #liste_formation{
	padding-bottom: 40px;
}

.item_expertise, .item_formation{
	width: 300px;
	float: left;
	margin:0 10px 20px 10px;
}

.item_expertise p,  .item_formation p{
	font-size: 14px;
}
.item_expertise a p{
	color:#000;
}

.btn_action{
	text-align: center;
	margin-bottom: 50px;
}
/*******************
	SECTEURS	
********************/
	#liste_secteurs{
	}

	.item_secteur{
		width: 300px;
		height: 140px;
		float: left;
		margin:0 10px;
		text-align: center;
		position: relative;
		padding-bottom: 40px;
		overflow: hidden;
	}
	.item_secteur_inner{
			width: 600px;
			height: 140px;
	}
		.item_secteur_orginal{
			width: 300px;
			height: 140px;

			background-color: #FFFFFF;
			-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
			-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
			transition: transform 0.4s, opacity 0.1s 0.3s;
			float: left;
			-webkit-transform: translateX(-100%);
			-moz-transform: translateX(-100%);
			-ms-transform: translateX(-100%);
			transform: translateX(-100%);
		}
		.item_secteur_clicked{
			padding: 15px;
			width: 270px;
			height: 110px;
			background-color: #666666;
			color: #FFFFFF;
			-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
			-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
			transition: transform 0.4s, opacity 0.1s 0.3s;
			float: left;
			-webkit-transform: translateX(-100%);
			-moz-transform: translateX(-100%);
			-ms-transform: translateX(-100%);
			transform: translateX(-100%);
		}
		
		
			.item_secteur_clicked table tr td{
				width: 270px;
				height: 110px;
			
			}
				.cross{
					display: block;
					position: absolute;
					top:7px;
					left: 7px;
					border: none !important;
				}

		.item_secteur h3{
			color:#373737;
			font-size: 14px;
			font-family: 'Comfortaa', cursive;
			margin: 0px;
			padding: 0px;
		}
	#liste_secteurs .btn_action{
		margin-bottom: 40px;
	}





.showDetail .item_secteur_orginal{
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
}

.showDetail .item_secteur_clicked{
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
}





#camera_wrap_1{
	width: 960px;
	height: 400px;
}
.caption_titre{
	font-size: 20px;
	color:#FFFFFF;
	background: #000;
	background: rgba(0, 0, 0, 0.8);
	padding: 10px;
}

.caption_texte{
	margin: 20px 0px;
	font-size: 14px;
	color:#FFFFFF;
	background: #000;
	background: rgba(0, 0, 0, 0.8);
	padding: 10px;
}
/**********************
	BOUTON
***********************/
.btn {
	border: none;

	cursor: pointer;
	display: inline-block;

	color: inherit;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;


	background-color: #e20046;
	color: #fff;
	text-align: center;

	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	background-repeat: no-repeat;
	background-position:-40px 50%;


	color: #FFFFFF;
    font-family: 'Comfortaa',cursive;
    font-size: 18px;
    padding: 7px;
}


.btn:hover {
	background-position: center center;
}
.btn span {
	display: inline-block;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	-moz-transition: all 0.3s;
	-moz-backface-visibility: hidden;
	transition: all 0.3s;
	backface-visibility: hidden;
}

.btn:hover span {
	-webkit-transform: translateX(200%);
	-moz-transform: translateX(200%);
	-ms-transform: translateX(200%);
	transform: translateX(200%);
	left: 0;
}
.btn_pojet{
	background-image: url(../images/BR-Projet.png);
}
.btn_formation{
	background-image: url(../images/BR-Formation.png);
}
.btn_ref{
	background-image: url(../images/BR-Ref.png);
}
/**********************
		Icones Secteur
***********************/

.item_secteur_images{
	cursor: pointer;
    position: relative;
    width: 89px;
    height: 89px;
    display: inline-table;
    margin-bottom: 10px;
	border: none !important;
}
.item_secteur_images > img{
    display: block;
    width: 89px;
    height: 89px;
    position: absolute;
    /* transitions */
    -webkit-transition: all .4s ease;
       -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
         -o-transition: all .4s ease;
            transition: all .4s ease;
    
}
/*     solution 1: css3 solution, it depends of <img>'s order */

.item_secteur_images > img:nth-child(1){ /* first <img> child of <div> */
    filter: alpha(opacity=100); /* IE stuff */
    opacity: 1;
    z-index: 2;
}
.item_secteur_images > img:nth-child(2){ /* second <img> child of <div> */
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
    z-index: 1;
}
/* hover */
.item_secteur_images:hover > img:nth-child(1){ 
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 1;
}
.item_secteur_images:hover > img:nth-child(2){ 
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
    z-index: 2;
}
/* Responsive
-------------------------------------------------- */
/* Ipad > portrait & Nexus 7 paysage OR Nexus 7 portrait*/
@media (min-width: 768px) and (max-width: 979px) , (min-width: 600px) and (max-width: 767px) { 

	#content_expertise{
		width: 100%;
		padding: 15px;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */	
	}
	.item_expertise{
		width: 50%;
		padding: 0px 15px 15px 15px;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
		margin: 0;
	}
	.item_formation{
		width: 50%;
		padding: 15px;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
		margin: 0;
	}
	.item_expertise p,  .item_formation p{
		font-size: 16px;
	}

	.btn:hover {
		background-position:-40px 50%;
	}
	.btn span {
		display: inline-block;
		width: 100%;
		height: 100%;
		-webkit-transition: all 0.3s;
		-webkit-backface-visibility: hidden;
		-moz-transition: all 0.3s;
		-moz-backface-visibility: hidden;
		transition: all 0.3s;
		backface-visibility: hidden;
	}
	
	.btn:hover span {
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
		left: auto;
	}
	
	#liste_secteurs{
		width: 100%;
		margin: 0;
		padding: 0px;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}

	.item_secteur{
		width: 50%;
		padding:0;
		margin: 0;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
		height: 200px;
	}
	.item_secteur h3{
		font-size: 16px;
	}
	.item_secteur_inner{
		width: 200%;
		height: 200px;
	}
		.item_secteur_orginal{
			height: 200px;
			width: 50%;
		}

		.item_secteur_clicked{
			height: 200px;
			padding: 15px;
			width: 50%;
			-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
			-moz-box-sizing: border-box;    /* Firefox, other Gecko */
			box-sizing: border-box;         /* Opera/IE 8+ */
		}
		
		
			.item_secteur_clicked table tr td{
				height: 170px;
				width: 100%;
				font-size: 16px;
			}
.btn_secteur{
	margin-top:20px;
}
	/**********************
		 Icones menu
	***********************/
	.item_secteur_images > img{
	    -webkit-transition: none;
	       -moz-transition: none;
	        -ms-transition: none;
	         -o-transition: none;
	            transition: none;
	}
	/*     solution 1: css3 solution, it depends of <img>'s order */
	
	.item_secteur_images > img:nth-child(1) { /* first <img> child of <div> */
	    z-index: 9;
	}
	.item_secteur_images > img:nth-child(2){ /* second <img> child of <div> */
	    -webkit-transition: none;
	       -moz-transition: none;
	        -ms-transition: none;
	         -o-transition: none;
	            transition: none;
	    z-index: 0;
	    opacity: 0;
	}
	/* hover */
	.item_secteur_images:hover > img:nth-child(1){ 
	    filter: alpha(opacity=100);
	    opacity: 1;
	    z-index: 9;
	}
	.item_secteur_images:hover > img:nth-child(2){ 
	    -webkit-transition: none;
	       -moz-transition: none;
	        -ms-transition: none;
	         -o-transition: none;
	            transition: none;
	    z-index: 0;
	}

	#camera_wrap_1{
		width: 100%;
	}

}
@media (max-width: 599px) {

	#content_expertise{
		width: 100%;
		padding: 15px;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */	
	}
	.item_expertise{
		width: 100%;
		padding: 0px 15px 15px 15px;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
		margin: 0;
	}
	.item_formation{
		width: 100%;
		padding: 15px;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
		margin: 0;
	}
	.item_expertise p,  .item_formation p{
		font-size: 16px;
	}
	.btn:hover {
		background-position:-40px 50%;
	}
	.btn span {
		display: inline-block;
		width: 100%;
		height: 100%;
		-webkit-transition: all 0.3s;
		-webkit-backface-visibility: hidden;
		-moz-transition: all 0.3s;
		-moz-backface-visibility: hidden;
		transition: all 0.3s;
		backface-visibility: hidden;
	}
	
	.btn:hover span {
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
		left: auto;
	}
	
	/*#liste_secteurs{
		width: 100%;
		margin: 0 auto;
	}
	.item_secteur {
	    float: none;
		margin: 0 auto;
  	}*/

	#liste_secteurs{
		width: 100%;
		margin: 0;
		padding: 0px;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}

	.item_secteur{
		float: none;
		width: 100%;
		padding:0;
		margin: 0;
		margin-bottom: 15px;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	.item_secteur h3{
		font-size: 16px;
	}
	.item_secteur_inner{
		width: 200%;
	}
		.item_secteur_orginal{
			width: 50%;
		}
		.item_secteur_clicked{
			height: 140px;
			padding: 15px;
			width: 50%;
			-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
			-moz-box-sizing: border-box;    /* Firefox, other Gecko */
			box-sizing: border-box;         /* Opera/IE 8+ */

		}
		
		
			.item_secteur_clicked table tr td{
				width: 100%;
			}


	/**********************
		 Icones menu
	***********************/
	.item_secteur_images > img{
	    -webkit-transition: none;
	       -moz-transition: none;
	        -ms-transition: none;
	         -o-transition: none;
	            transition: none;
	}
	/*     solution 1: css3 solution, it depends of <img>'s order */
	
	.item_secteur_images > img:nth-child(1) { /* first <img> child of <div> */
	    z-index: 9;
	}
	.item_secteur_images > img:nth-child(2){ /* second <img> child of <div> */
	    -webkit-transition: none;
	       -moz-transition: none;
	        -ms-transition: none;
	         -o-transition: none;
	            transition: none;
	    z-index: 0;
	    opacity: 0;
	}
	/* hover */
	.item_secteur_images:hover > img:nth-child(1){ 
	    filter: alpha(opacity=100);
	    opacity: 1;
	    z-index: 9;
	}
	.item_secteur_images:hover > img:nth-child(2){ 
	    -webkit-transition: none;
	       -moz-transition: none;
	        -ms-transition: none;
	         -o-transition: none;
	            transition: none;
	    z-index: 0;
	}

	#camera_wrap_1, #slider_archi{
		display: none;
	}

}