/*////////////////////////////////////////////////////////////////////////////////////////////////////////////                                        
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                               INDEX                                                ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


.full_width { width: 100%; padding: 0 0 30px;}
#full_width1 { background-color: #fafafa; padding-top: 5px; }
#full_width2 { background-color: #fff; padding-bottom: 100px;}
#full_width3 { background-color: #fafafa; box-shadow: inset 0 10px 10px 0px rgba(0,0,0,0.03);}

#page_index #full_width1 { padding-top: 10px;  opacity: 0;  box-shadow: inset 0 -10px 10px 0px rgba(0,0,0,0.03); }
#page_index #full_width2 { opacity: 0; padding-top: 20px; }
#page_index #full_width3 {padding: 10px 0 0 0;  opacity: 0;  box-shadow: inset 0 10px 10px 0px rgba(0,0,0,0.03); }
#page_index #full_width4 { opacity: 0; background-color: #fff; padding: 20px 0 30px;}

#page_index #full_width1 #w960_1 {display: none; }

#page_index .full_width {
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
	
}

#main_photo{
	display: table;
	width: 100%;	
	height: 460px;
	overflow: hidden;
	text-align: center;
	z-index: 999;
	
	box-shadow: inset 0px 14px 14px -14px rgba(0,0,0,1), inset 0px -14px 14px -14px rgba(0,0,0,1);
	-webkit-box-shadow: inset 0px 14px 14px -14px rgba(0,0,0,1), inset 0px -14px 14px -14px rgba(0,0,0,1);
	-moz-box-shadow: inset 0px 14px 14px -14px rgba(0,0,0,1), inset 0px -14px 14px -14px rgba(0,0,0,1);
	-o-box-shadow: inset 0px 14px 14px -14px rgba(0,0,0,1), inset 0px -14px 14px -14px rgba(0,0,0,1);
	
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#main_photo li {
	display: table-cell;
	height: 460px;
	overflow: hidden;
	text-align: center;
	z-index: 999;
	
	background-size: cover;
	background-position: center;
	
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
}

 @media screen and (min-width: 0px) and (max-width: 900px)  	{ #main_photo{height:510px;} }
 @media screen and (min-width: 900px) and (max-width: 1100px) 	{ #main_photo{height:530px;} }
 @media screen and (min-width: 1100px) and (max-width: 1450px) 	{ #main_photo{height:560px;} }
 @media screen and (min-width: 1450px) and (max-width: 1800px) 	{ #main_photo{height:560px;} }
 @media screen and (min-width: 1800px) and (max-width: 2200px) 	{ #main_photo{height:660px;} }
 @media screen and (min-width: 2200px) and (max-width: 5000px) 	{ #main_photo{height:760px;} }

#main_photo li .link_cover {
	background-image: url('/images/bg_activite2.png');
	background-repeat: repeat;
	
	position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000;
}

#main_photo li .link_cover:hover {
	background-image: none;
	background-color: rgba(255,255,255,0.15);
}

#scroll_button{
	position: absolute;
	bottom: -50px;
	left: 45%;
	
	display: block;
	margin: 0px auto;
	width: 150px;
	height: 90px;
	border-radius: 45px;
	border: solid 2px rgba(0,0,0,0.1);
	background-color: rgba(0,0,0,0.4);
	color: rgba(255,255,255,0.9);
	text-align: center;	
	line-height: 40px;
	font-size: 13px;
	font-family: giorgio;
	cursor: pointer;
}

#main_photo h1 {
	margin: 100px 0 0;
	padding: 25px 20px;
	border-radius: 10px;
	font-size: 2em;
	color: #FFF;
	
	transform: skew(-8deg, 0deg);
	-moz-transform: skew(-8deg, 0deg);
	-webkit-transform: skew(-8deg, 0deg);
	-o-transform: skew(-8deg, 0deg);
	
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out; 
}

 @media screen and (min-width: 0px) and (max-width: 900px)  	{ #main_photo h1 {margin: 200px 0 0;} }
 @media screen and (min-width: 900px) and (max-width: 1100px) 	{ #main_photo h1 {margin: 210px 0 0;} }
 @media screen and (min-width: 1100px) and (max-width: 1450px) 	{ #main_photo h1 {margin: 220px 0 0;} }
 @media screen and (min-width: 1450px) and (max-width: 1800px) 	{ #main_photo h1 {margin: 250px 0 0;} }
 @media screen and (min-width: 1800px) and (max-width: 2200px) 	{ #main_photo h1 {margin: 250px 0 0;} }
 @media screen and (min-width: 2200px) and (max-width: 5000px) 	{ #main_photo h1 {margin: 250px 0 0;} }

#main_photo h1 span {
	font-size: 16px;
	display: block;
	color: #FFF;
}

#main_photo #h1_bg {
	background-color: rgba(0,0,0,0.3);
	border-radius: 10px;
}

#main_photo span { 
	font-family: 'Giorgio-thin', 'Roboto', 'Cabin',  helvetica;
	font-size: 1em;
	color: #ee293f;
	margin: 0px;
}

/*//////////////////// ARTICLE ///////////////*/

article h1 {
	font-size: 2.5em;
	margin: 20px 0 -8px;	
	color: #d31d31;
	text-align: left;
}

article #news_table h1, 
article #career_bloc h1 {
	text-align: center;
	color: rgba(0,0,0,0.6);
}

article .w960 > h3 {
	color: #31A7D2;
	padding: 5px 0 10px 0;
	text-align: left;
}

/* About us */

#about_us {
	position: relative;
	margin: 10px 0 0;
	color: #fff; 
	border-radius: 8px; 
	background-color: rgba(255,255,255,1);
	overflow: hidden;
}

#about_us img {
	width: 180px;
	height: 120px;
	margin-right: 10px;
	border-radius: 3px 0 0 3px; 
	float: left;
}

#about_us h2 {
	color: rgba(0,0,0,0.7);
	margin: 10px 0;
}

#about_us p {
	color: rgba(0,0,0,0.5);
	font-size: 12px;
}

#about_us .read_more, #about_us .read_more img{
	width: 20px; height: auto;
	right: 50%;
	bottom: 10px; top: auto;
	background-color: transparent;
	color: #d31d31; 
}

/*//////////////////// News table ////////////////////*/

#news_table {
	width: 100%; 
	height: 320px; 
	margin: 10px 0 10px 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 0 0px 0 rgba(0,0,0,0.4);
}

#news_table img {
	width: 100%;
}

.news_title {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	height: auto;
	padding: 5px 10px;
	background-color: rgba(255,255,255,0.6);	
	border-radius: 0;
	text-align: left;
	cursor: pointer;
	
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out; 
}


#news_table #right_column {
	display: inline-block;
	float: right;
	width: 40%;
	height: 100%;
	vertical-align: top;
}


@media screen and (max-width: 1100px)  {#news_table #right_column{ width: 49.6%;} }
/*@media screen and (min-width: 1100px) and (max-height: 1500px)  {#news_table #right_column{ width: 49.2%;} }*/

#news_table #small_box_container{
	display: inline-block;
	width: 100%; 	
	height: 160px;
	border-radius: 8px;
}

#news_table .small_box{
	display: inline-block;
	width: 50%;
	height: 100%;
	background-color: rgba(255,255,255,0.9); 	
	margin: 0;
	position:relative;
    overflow:hidden;
}

#news_table #small_box1 { float: left; padding: 20px; text-align: center; box-shadow:none;}
#news_table #small_box2 { float: right;}

#news_table #small_box1 h1 { margin: 5px 0 8px 0; letter-spacing: 0.1em;}
#news_table #small_box1 p { background-color: rgba(255,255,255,0.8); font-family: giorgio-thin; font-size: 16px;letter-spacing: 0.1em;}

#news_table #medium_box{
	display: inline-block;
	position: relative;
	width: 100%;
	height: 160px;
	background-color: #fff; 
	text-align: right;	
	padding: 15px;
}

#news_table #medium_box img 	{ float: right; height: 140px; width: 190px;  margin: 10px; border-radius: 0 4px 0 0; }
#news_table #medium_box h2 		{ color: #D31D31;; margin: 0px; }
#news_table #medium_box span 	{ display: inline-block; color: #31A7D2;  margin-bottom: 10px;}
#news_table #medium_box p 		{ color: rgba(0,0,0,0.6); font-size: 22px; font-family: giorgio-thin;}

.read_more {
	display: inline-block;
	position: absolute;
	left: 10px;
	bottom: 8px;
	width: 100px; 
	height: 25px;
	margin: 2px; 
	text-align: center; 
	line-height: 23px;
	font-family: Arial; 
	font-size: 12px; 
	font-weight: 500;
	color: #fff; 
	border-radius: 3px; 
	background-color: #e63943; 
	/*box-shadow: inset 0 35px 10px -20px rgba(255,255,255,0.6); */
	cursor: pointer;
}

.read_more a { color: #fff; }

.read_more:hover {
	background-color: #e37178; 
}

#news_table #big_box{
	display: inline-block;
	position: relative;
	width: 60%;
	height: 100%;
	background-color: rgba(222,222,222,0.7); 	
	overflow: hidden;
}

/* ===> définition des polices des vignettes */
.news_title h3 {font-size: 18px; font-weight: 400; color:#D31D31;}
.news_title span {font-size: 12px; color: #31A7D2;}
.news_title p { display: none; color: #666; font-size: 12px;}

/* ===> modifie la hauteur de l'espace titre et l'opacité de l'image */
#news_table li:hover .news_title, #news_table #big_box:hover .news_title {height: 160px; color: #eef1ba; background-color: rgba(255,255,255,0.85);	}
#news_table li:hover > #photo_news1, #news_table li:hover > #photo_news2, #news_table li:hover > #photo_news3, #news_table #big_box:hover > #photo_news1 { opacity: 0.7;}

/* ===> remplace la date par un apercu de l'article */
#news_table li:hover .news_title p, #news_table #big_box:hover .news_title p { display: block;}
#news_table li:hover .news_title span, #news_table #big_box:hover .news_title span { display: none;}

/*prévisualisation de l'article du slider*/
#page_index .last_actu_preview {
	position: relative;
	left: 0; top: 0; bottom: 0;
	width: 100%; height: 100%;
	box-shadow: inset 130px 0 130px 0 rgba(255,255,255, 0.1);
	padding: 15px;
	display: inline-block;
	
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out; 
}

#page_index .last_actu_preview:hover { }

#page_index .last_actu_preview h2 { font-size: 26px; color: #D31D31;  text-align: justify; font-family: Giorgio-thin; letter-spacing: 0; margin: 10px 0 5px; padding: 8px; background-color: rgba(255, 255, 255, 0.7); border-radius: 2px; }
#page_index .last_actu_preview p { color: #555; text-align: justify; margin: 0; font-size: 14px; cursor:pointer; padding: 8px 15px 8px;  background-color: rgba(255, 255, 255, 0.7); width: 70%;  border-radius: 2px;}
#page_index .last_actu_preview_next p, #page_index .last_actu_preview_next h2, #page_index .last_actu_preview_next span { margin-left: 15px; }
#page_index .last_actu_preview span {display: inline-block;  color: #31A7D2; margin-bottom: 6px; padding: 8px 15px;  background-color: rgba(255, 255, 255, 0.7);  border-radius: 2px;}
#page_index .last_actu .read_more {position: relative; bottom: 10px; left: 10px; right: auto; top: auto;}

/*///////////////////////// SLIDER ////////////////////////////*/

/* Définition des calques */

.sp-slideshow {
    position: relative;
    width: 100%;
    height: 320px;
	margin: 0px 0px 0px 0px;
	border-radius: 8px 0 0 8px;
	overflow: hidden;	
	z-index: 999;
	
}

.sp-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;	
}
 
 
.sp-slider {
    position: relative;
    left: 0;
    width: 500%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
	
	-webkit-transition: left ease-out 1s; 
	-moz-transition: left ease-out 1s; 
	-ms-transition: left ease-out 1s; 
	-o-transition: left ease-out 1s; 
    transition: left ease-out 1s; 
}

.sp-slider > li {
	position: relative;
    color: #fff;
    width: 20%;
    box-sizing: border-box;
    height: 100%;
    float: left;
    opacity: 0.4; 
	vertical-align: bottom;
	
	-webkit-transition: opacity ease-out 1s; 
	-moz-transition: opacity ease-out 1s; 
	-ms-transition: opacity ease-out 1s; 
	-o-transition: opacity ease-out 1s; 
    transition: opacity ease-out 1s; 
}
/* Définition des puces */

.sp-slideshow input {
    position: absolute;
    top: 15px;
    left: 50%;
    width: 15px;
    height: 15px;
    z-index: 1001;
    cursor: pointer;
    opacity: 0;
}
 
.sp-slideshow input + label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 15px;
    height: 15px;
    display: block;
    z-index: 1000;
    border: 3px solid #fff;
    border: 3px solid rgba(255,255,255,0.9);
    border-radius: 50%;
	
	-webkit-transition: background-color linear 1s;
	-moz-transition: background-color linear 1s;
	-ms-transition: background-color linear 1s;
	-o-transition: background-color linear 1s;
    transition: background-color linear 1s;
}

.sp-selector-1, 
.button-label-1 {
    margin-left: -60px;
	cursor: pointer;
}
 
.sp-selector-2, 
.button-label-2 {
    margin-left: -35px;
	cursor: pointer;
}

.sp-selector-3, 
.button-label-3 {
    margin-left: -10px;
	cursor: pointer;
}
 
.sp-selector-4, 
.button-label-4 {
    margin-left: 15px;
	cursor: pointer;
}
 
.sp-selector-5, 
.button-label-5 {
    margin-left: 40px;
	cursor: pointer;
}

.button-label-1:hover, 
.button-label-2:hover, 
.button-label-3:hover, 
.button-label-4:hover,
.button-label-5:hover {
    border: 3px solid #fb8200;
}




input.button-label-1:checked ~ .button-label-1:hover {
    border: 3px solid #d42a34;
}




input.sp-selector-1:checked ~ .button-label-1 {
    border: 3px solid #d42a34;
	background: #fff;
}
input.sp-selector-2:checked ~ .button-label-2 {
    border: 3px solid #d42a34;
	background: #fff;
}
input.sp-selector-3:checked ~ .button-label-3 {
    border: 3px solid #d42a34;
	background: #fff;
}
input.sp-selector-4:checked ~ .button-label-4 {
    border: 3px solid #d42a34;
	background: #fff;
}
input.sp-selector-5:checked ~ .button-label-5 {
    border: 3px solid #d42a34;
	background: #fff;
}


/*//////////////////// CAREER ////////////////////*/

#page_index #full_width3 h1 {
	margin-bottom: 0px; 
	text-align: right; 
	color: #d31d31;
}

#page_index #full_width3 h3 {
	margin: -5px 0 20px; 
	text-align: right; 
}

#career_bloc {
	position: relative; 
	text-align: right;
	min-height: 350px;
}

#career_profile {
	position: absolute; 
	bottom: 20px; left: 8.5%; 
	padding: 10px; 
	width: 250px; 
	height: 130px;
	background-color: rgba(255,255,255,0.3); 
	border-radius: 8px; 
	text-align: left; 
	box-shadow: inset 0 90px 90px 0px rgba(0,0,0,0.5);	
	cursor: pointer;
	overflow: hidden;
	
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out; 
}

#career_profile:hover { height: 290px;}


#career_profile h2 {color: #fb8600;}
#career_profile #profile_text a {display: block; color: orange; margin: 15px 0;}
#career_profile #profile_text { display: none; margin-top: 10px;}
#career_profile:hover #profile_text { display: block; }

#career_text {
	display: block;  
	margin: -10px 0 20px 35% ; 
	text-align: right; 
	color: rgba(0,0,0,0.6); 
	width: 65%;
	font-size: 16px;
	
}

#career_bloc .read_more {
	position: relative;
	left: 0; bottom: 0; 
	display: inline-block; 
	width: 22%;
	max-width: 200px;
	margin-left: 78%; 
}

#career_facts {
	display: inline-block;
	width: 75%;
	text-align: right;
	margin: 0 0 10px 0;
}

@media screen and (max-width: 1100px)  { #career_facts {width: 68%;} }
@media screen and (min-width: 1100px) and (max-width: 1500px)  { #career_facts {width: 70%;} }
@media screen and (min-width: 1500px) and (max-width: 1800px)  { #career_facts {width: 72%;} }

#career_facts li {
	position: relative;
	height: 130px;
	width: 21%;
	margin: 1.2%;
	padding: 10px;
	background-color: rgba(0,0,0,0.02);
	box-shadow: inset 0 90px 90px 0px rgba(255,255,255,1);
	border-radius: 8px;
	text-align: center;
	vertical-align: top;
	
}

#page_index #full_width3 #career_facts li h1 {color: rgba(0,0,0,0.4); text-align: center; margin: 0; font-family: "Avenir Light", avenir ;}
#page_index #full_width3 #career_facts li h3 {color: rgba(0,0,0,0.4); text-align: center;}



/*//////////////////// REFERENCES ////////////////////*/

#references_bloc {
	width: 100%; 
	margin: 10px 0;
	background-color: rgba(222,222,222,0.07); 
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
	border-radius: 8px;
	overflow: hidden;
}


/* Animation "afficher plus" */
#references_bloc input[type=radio] {display: none;}
#references_bloc label {
	display: inline-block;
	width: 100%;
	text-align: center;
	margin: -5px 0 10px;
	font-size: 14px;
	color: rgba(0,0,0,0.6);
	cursor: pointer;
}

#references_bloc .replaced_label {  
	opacity: 0; 
	height: 0; 
	visibility: hidden; 
	text-align: right; 
	padding-right: 2%;
	
	transition: all 2.2s ease-out; 
	-webkit- transition: all 2.2s ease-out; 
	-moz- transition: all 2.2s ease-out; 
	-o- transition: all 2.2s ease-out; 
}

#see_more_ref:checked ~ #ref_line3 {  height: 320px; margin: 10px 0;  visibility: visible;}
#see_more_ref:checked ~ .see_more_label {  display: none;}
#see_more_ref:checked ~ .replaced_label {  visibility: visible; opacity: 1; height: 14px; }
#see_more_ref:checked ~ #ref_line3 #ref1,
#see_more_ref:checked ~ #ref_line3 #ref2,
#see_more_ref:checked ~ #ref_line3 #ref3,
#see_more_ref:checked ~ #ref_line3 #ref4,
#see_more_ref:checked ~ #ref_line3 #ref5,
#see_more_ref:checked ~ #ref_line3 #ref6,
#see_more_ref:checked ~ #ref_line3 #ref7,
#see_more_ref:checked ~ #ref_line3 #ref8,
#see_more_ref:checked ~ #ref_line3 #ref9,
#see_more_ref:checked ~ #ref_line3 #ref10,
#see_more_ref:checked ~ #ref_line3 #ref11,
#see_more_ref:checked ~ #ref_line3 #ref12,
#see_more_ref:checked ~ #ref_line3 #ref13,
#see_more_ref:checked ~ #ref_line3 #ref14,
#see_more_ref:checked ~ #ref_line3 #ref15,
#see_more_ref:checked ~ #ref_line3 #ref16,
#see_more_ref:checked ~ #ref_line3 #ref17,
#see_more_ref:checked ~ #ref_line3 #ref18,
#see_more_ref:checked ~ #ref_line3 #ref19,
#see_more_ref:checked ~ #ref_line3 #ref20{ transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); }

#ref_line3 #ref10{  transition: transform 0.5s ease-out, background 0.5s ease-out; -webkit- transition: transform 0.5s ease-out , background 0.5s ease-out; 
					-moz- transition: transform 0.5s ease-out , background 0.5s ease-out; -o- transition: transform 0.5s ease-out, background 0.5s ease-out; }
#ref_line3 #ref12{  transition: transform 0.8s ease-out, background 0.5s ease-out; -webkit- transition: transform 0.8s ease-out , background 0.5s ease-out; 
					-moz- transition: transform 0.8s ease-out , background 0.5s ease-out; -o- transition: transform 0.8s ease-out, background 0.5s ease-out; }
#ref_line3 #ref13{  transition: transform 1s ease-out, background 0.5s ease-out;   -webkit- transition: transform 1s ease-out , background 0.5s ease-out;   
					-moz- transition: transform 1s ease-out , background 0.5s ease-out;   -o- transition: transform 1s ease-out, background 0.5s ease-out; }
#ref_line3 #ref14{  transition: transform 1.3s ease-out, background 0.5s ease-out; -webkit- transition: transform 1.3s ease-out , background 0.5s ease-out; 
					-moz- transition: transform 1.3s ease-out , background 0.5s ease-out; -o- transition: transform 1.3s ease-out, background 0.5s ease-out; }
#ref_line3 #ref15{  transition: transform 1.6s ease-out, background 0.5s ease-out; -webkit- transition: transform 1.6s ease-out , background 0.5s ease-out; 
					-moz- transition: transform 1.6s ease-out , background 0.5s ease-out; -o- transition: transform 1.6s ease-out, background 0.5s ease-out; }
#ref_line3 #ref16{  transition: transform 1.7s ease-out, background 0.5s ease-out; -webkit- transition: transform 1.7s ease-out , background 0.5s ease-out; 
					-moz- transition: transform 1.7s ease-out , background 0.5s ease-out; -o- transition: transform 1.7s ease-out, background 0.5s ease-out; }
#ref_line3 #ref17{  transition: transform 1.8s ease-out, background 0.5s ease-out; -webkit- transition: transform 1.8s ease-out , background 0.5s ease-out; 
					-moz- transition: transform 1.8s ease-out , background 0.5s ease-out; -o- transition: transform 1.8s ease-out, background 0.5s ease-out; }
#ref_line3 #ref18{  transition: transform 1.9s ease-out, background 0.5s ease-out; -webkit- transition: transform 1.9s ease-out , background 0.5s ease-out; 
					-moz- transition: transform 1.9s ease-out , background 0.5s ease-out; -o- transition: transform 1.9s ease-out, background 0.5s ease-out; }
#ref_line3 #ref19{  transition: transform 2s ease-out, background 0.5s ease-out;   -webkit- transition: transform 2s ease-out , background 0.5s ease-out;   
					-moz- transition: transform 2s ease-out , background 0.5s ease-out;   -o- transition: transform 2s ease-out, background 0.5s ease-out; }
#ref_line3 #ref20{ transition: transform 2.1s ease-out, background 0.5s ease-out; -webkit- transition: transform 2.1s ease-out , background 0.5s ease-out; 
					-moz- transition: transform 2.1s ease-out , background 0.5s ease-out; -o- transition: transform 2.1s ease-out, background 0.5s ease-out; }
 
#ref_line1,
#ref_line2,
#ref_line3,
#ref_line4 {
	width: 100%;	
	margin: 10px 0; 
	text-align:center;
	border-radius: 8px;
	
	-webkit-transition: all 1.8s ease-out;
	-moz-transition: all 1.8s ease-out;
	-o-transition: all 1.8s ease-out;
	transition: all 1.8s ease-out; 
}

#ref_line3,
#ref_line4 {
	height: 0px;
	visibility: hidden;
	margin: 0;
}

#ref_line1 li,
#ref_line2 li,
#ref_line3 li,
#ref_line4 li{
	display: inline-block;
	width: 18%;
	height: 150px;
	margin: 5px 0.6%;
	background-color: rgba(0,0,0,0.1);
	border-radius: 4px;
	background-size: contain;
	cursor: pointer;
	
	
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out; 
}

#ref_line3 li,
#ref_line4 li{
	transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg);
}


#ref_line1 li:hover,
#ref_line2 li:hover,
#ref_line3 li:hover,
#ref_line4 li:hover{
	background-size: contain; 
}

#ref1 {background: url(../images/references_logos/alstom_bw.png) center no-repeat;}
#ref1:hover {background: url(../images/references_logos/alstom.png) center no-repeat;}
#ref2 {background: url(../images/references_logos/erdf_bw.png) center no-repeat;}
#ref2:hover {background: url(../images/references_logos/erdf.png) center no-repeat;}
#ref3 {background: url(../images/references_logos/sncf_bw.png) center no-repeat;}
#ref3:hover {background: url(../images/references_logos/sncf.png) center no-repeat;}
#ref4 {background: url(../images/references_logos/colas_bw.png) center no-repeat;}
#ref4:hover {background: url(../images/references_logos/colas.png) center no-repeat;}
#ref5 {background: url(../images/references_logos/opinel_bw.png) center no-repeat;}
#ref5:hover {background: url(../images/references_logos/opinel.png) center no-repeat;}
#ref6 {background: url(../images/references_logos/initial_bw.png) center no-repeat;}
#ref6:hover {background: url(../images/references_logos/initial.png) center no-repeat;}
#ref7 {background: url(../images/references_logos/kone_bw.png) center no-repeat;}
#ref7:hover {background: url(../images/references_logos/kone.png) center no-repeat;}
#ref8 {background: url(../images/references_logos/skf_bw.png) center no-repeat;}
#ref8:hover {background: url(../images/references_logos/skf.png) center no-repeat;}
#ref9 {background: url(../images/references_logos/vicat_bw.png) center no-repeat;}
#ref9:hover {background: url(../images/references_logos/vicat.png) center no-repeat;}
#ref10 {background: url(../images/references_logos/alstom_bw.png) center no-repeat;}
#ref10:hover {background: url(../images/references_logos/alstom.png) center no-repeat;}

#ref11 {background: url(../images/references_logos/bollhoff_bw.png) center no-repeat;}
#ref11:hover {background: url(../images/references_logos/bollhoff.png) center no-repeat;}
#ref12 {background: url(../images/references_logos/schindler_bw.png) center no-repeat;}
#ref12:hover {background: url(../images/references_logos/schindler.png) center no-repeat;}
#ref13 {background: url(../images/references_logos/edf_bw.png) center no-repeat;}
#ref13:hover {background: url(../images/references_logos/edf.png) center no-repeat;}
#ref14 {background: url(../images/references_logos/saintgobain_bw.png) center no-repeat;}
#ref14:hover {background: url(../images/references_logos/saintgobain.png) center no-repeat;}
#ref15 {background: url(../images/references_logos/areva_bw.png) center no-repeat;}
#ref15:hover {background: url(../images/references_logos/areva.png) center no-repeat;}
#ref16 {background: url(../images/references_logos/cnr_bw.png) center no-repeat;}
#ref16:hover {background: url(../images/references_logos/cnr.png) center no-repeat;}
#ref17 {background: url(../images/references_logos/grdf_bw.png) center no-repeat;}
#ref17:hover {background: url(../images/references_logos/grdf.png) center no-repeat;}
#ref18 {background: url(../images/references_logos/conductix_bw.png) center no-repeat;}
#ref18:hover {background: url(../images/references_logos/conductix.png) center no-repeat;}
#ref19 {background: url(../images/references_logos/bouygues_bw.png) center no-repeat;}
#ref19:hover {background: url(../images/references_logos/bouygues.png) center no-repeat;}
#ref20 {background: url(../images/references_logos/alstom_bw.png) center no-repeat;}
#ref20:hover {background: url(../images/references_logos/alstom.png) center no-repeat;}



/*//////////////////// ACTIVITY ////////////////////*/

/*#full_width3 .w960 > h1,
#full_width3 .w960 > h3 {
	text-align: right;
	margin-right: 2%;
}

#full_width3 .w960 > h3 {
	padding-bottom: 0;
	margin-bottom: -25px;
}*/

.activity_bloc {
	width: 100%; 
	height: 300px; 
	margin: 0 0 10px 0;
	background-color: rgba(255,255,255,0.9); 
	border-radius: 0 8px 8px;
	overflow: hidden;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.08);
	
}

#activity_menu {
	width: 50%;
	margin: 10px 0 0 0;
	border-radius: 8px 8px 0 0;
	background-color: rgba(255,255,255,0);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.08);
}

#activity_menu li {
	width: 33.3%;
 	height: 30px;
	padding: 5px;
	color: rgba(0,0,0,0.5);
	text-align: center;
	transition: none;
	border-right: solid 1px rgba(0,0,0,0.1);
	border-bottom: solid 1px rgba(0,0,0,0.1);
}


#act_button1 { background-color: rgba(255,255,255,0.9); border-radius: 8px 0 0 0; cursor: default; margin: 0 0 0 0px;}
#act_button2 { background-color: rgba(0,0,0,0.1); border-radius: 0 0 0 0; cursor: pointer; margin: 0 0 0 -4px;}
#act_button3 { background-color: rgba(0,0,0,0.1); border-radius: 0 8px 0 0; cursor: pointer;margin: 0 0 0 -4px;}
#act_button2:hover { background-color: rgba(0,0,0,0.05); }
#act_button3:hover { background-color: rgba(0,0,0,0.05); }


.activity_bloc img {
	width: 100%;
}

.activity_bloc h1 {text-align: center; color: #D31D31;}

.activity_bloc .map_title {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	height: 52px;
	padding: 5px 10px;
	background-color: rgba(255,255,255,0.76);	
	border-radius: 0 ;
	text-align: left;
	cursor: pointer;
	
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out; 
}

.activity_bloc #left_column {
	display: inline-block;
	width: 50%;
	height: 100%;
	vertical-align: top;
}

.activity_bloc #small_box_container{
	display: inline-block;
	width: 100%; 	
	height: 160px;
	border-radius: 8px;
}

.activity_bloc .small_box{
	display: inline-block;
	height: 100%; 	
	margin: 0;
	position:relative;
    overflow:hidden;
}


#activity1 {}
#activity2, #activity3 {display: none;}

#activity2 #small_box1{width: 55%;}
#activity2 #small_box2{width: 45%;}

#activity3 #small_box1,
#activity3 #small_box2 {width: 50%;}

.activity_bloc #small_box1 { float: left; width: 35%; }
.activity_bloc #small_box2 { float: right; width: 65%; padding: 20px; text-align: center; background-color: rgba(0,0,0,0.01); box-shadow: inset  0 -60px 60px -60px rgba(0,0,0,0.05);}
.activity_bloc #small_box2 p { color: rgba(0,0,0,0.7); font-family: giorgio-thin; font-size: 16px;letter-spacing: 0.1em;}

.activity_bloc #small_box1 h1 {  margin-top: 15px;}
.activity_bloc #small_box1 p { color: rgba(0,0,0,0.7); font-size: 12px;}

/* ===> définition des polices de titre de la carte  */
.activity_bloc .map_title h3 {font-size: 18px; font-weight: 400; color: #D31D31;}
.activity_bloc .map_title span {font-size: 12px; color: rgba(0,0,0,0.5);}
.activity_bloc .map_title p { display: none; color: #ccc; font-size: 12px;}

/* ===> remplace la date par un apercu de l'article */
.activity_bloc li:hover .map_title p { display: block;}
.activity_bloc li:hover .map_title span { display: none;}

.activity_bloc #medium_box{
	display: inline-block;
	position: relative;
	width: 100%;
	height: 140px;
	background-color: rgba(255,255,255,0.9); 	
}

.activity_bloc #medium_box p { color: #31A7D2; margin: 20px 30px; font-size: 20px; font-family: giorgio-thin; letter-spacing: 0.03em; text-align: justify;}

.read_more {
	display: inline-block;
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 100px; 
	height: 25px;
	margin: 2px; 
	text-align: center; 
	line-height: 23px;
	font-family: Arial; 
	font-size: 12px; 
	font-weight: 500;
	color: #fff; 
	border-radius: 3px; 
	background-color: #e63943; 
	/*box-shadow: inset 0 35px 10px -20px rgba(255,255,255,0.6); */
	cursor: pointer;
}

.read_more:hover {
	background-color: #e37178; 
}

.activity_bloc #big_box{
	display: inline-block;
	position: relative;
	float: right;
	width: 50%;
	height: 100%;
	text-align: left;
	border-radius: 0 8px 8px 0;
	overflow: hidden;
}

@media screen and (max-width: 1100px)  {.activity_bloc #big_box{ width: 49.5%;} }
/*@media screen and (min-width: 1100px) and (max-height: 1500px)  {.activity_bloc #big_box{ width: 49.2%;}} */


.activity_bloc .big_box h1 { color: #D31D31; margin: 0; text-align: right;}
.activity_bloc .big_box .read_more { width: 180px; right: 10px; left: auto; background-color: #ccc;}
.activity_bloc .big_box .read_more:hover { width: 180px; right: 10px; left: auto; background-color: #ebebeb;}

#entities_list{
	text-align: center;
}

#entities_list li {
	background: rgba(0,0,0,0.1);
	width: 20%;	
	height: 100px;
	border-radius : 4px;
	margin: 30px 1% 0;
	cursor: pointer;
}

#entities_list li:hover { background: rgba(0,0,0,0.05);}



/* VIDEO */

#activity1 #big_box img { width: 100%; height: 100%;}

.activity_bloc #big_box iframe { width: 100%; }
.activity_bloc #big_box iframe,
.activity_bloc #big_box object,
.activity_bloc #big_box embed {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	border-radius: 0 8px 8px 0;
	overflow: hidden;
}