@charset "UTF-8";
 /* CSS Document */

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////                                        
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                             ACTIVITE                                               ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
/////                                                                                                    ///// 
////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Site location spécial blanc */
#page_activite #site_location li { color: #fff}
#page_activite #site_location { margin-left: 10%;}

.scroll_button {
	color: #D31D31;
	font-family: Giorgio;
	line-height: 30px;
	text-align: center;
	opacity: 0;
	cursor: pointer;
	
	background-color: rgba(255,255,255,0.4);
	color: #444;
	border-radius: 6px ;
	height: 30px;
	width: 12%;
	margin: 0 44%;
	
	
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out; 
}

.scroll_button:hover {background-color: rgba(255,255,255,1);}
	
#scroll_2 { position: absolute; top: 400px;}
#scroll_3 { position: absolute; top: 800px;}
#scroll_4 { position: absolute; top: 1200px;}
#scroll_5 { position: absolute; top: 1600px;}

#page_activite {
	background-color: #444;
	position: relative;
}

#page_activite h1 {
	width: 70%;
	margin: 20% 15% 50px 15%;
	color: #fff;
	text-align: center;
	
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out; 
}

#page_activite #scroll_button {
	
}

#page_activite #full_width1 {
	position: relative;
	box-shadow: none;
	z-index: 1002;
	overflow: hidden;
	background: url("../images/bg_activite2.png") repeat;
	background-color: #444;
}

#page_activite #full_width1 .w960{
	position: relative;
	height: 2600px;
}

#page_activite #full_width2 {
	position: absolute;
	z-index: 1003;
	opacity: 1;
	height: 100vh;
	top: 2800px;
	background: url("../images/bg_activite2.png") repeat;
	background-color: #666;
	box-shadow: inset 0 20px 20px -20px #222;
}

.step_number {
	display: inline-block;
	background-color: #FFF;
	color: #444;
	font-weight: bold;
	font-size: 18px;
	height: 30px;
	width: 30px;
	margin-right: 15px;
	border-radius: 3px;
	vertical-align: bottom;
	line-height: 30px;
	text-align: center;
}

.step_content p { 
	font-family: giorgio-thin;
	letter-spacing: 0.1em;
	font-size: 16px;
	text-align: justify;
}

.step_title {
	color: #FFF;
	margin: 0 0 20px 0;
	line-height: 25px;
}

.step_content {
	display: inline-block;
	position: absolute;
	width: 420px;
	height: 150px;
	vertical-align: bottom;
	opacity: 0;
	
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out; 
}

.main_img_container {
	position: absolute;
	display: inline-block;
	height: 150px;
	width: 280px;
	
	opacity: 0;
	
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out; 
}

.main_img {
	position: absolute;
	bottom: 0;
	width: 100%;
	border-radius: 0 0 6px 6px;
}

.background_shadow{
	position: absolute;
	bottom: 0; right: 0; left: 0;
	height: 30px;
	border-radius: 0 0 6px 6px;
	box-shadow: inset 0 -20px 20px -20px #666;	
}

/* CONCEPTION */

#page_activite #content_conception {
	top: 250px;
	right: 15%; 
}

#page_activite #img_container_conception{
	top: 200px;
	left: 15%;
}

#page_activite #img_background{
	bottom: 0;
}

#page_activite #img_container_conception #img_camion{
	bottom: 24px;
	right: -60px;
	width: 50px;
	height: 22px;
	opacity: 0;
	
	transform: rotate(4deg);
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;  
}

#page_activite #img_container_conception #img_mat{
	bottom: -100px;
	right: 90px;
	height: 260px;
	width: 80px;
	opacity: 0;
	
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out; 
}

#page_activite #img_container_conception #img_aubans{
	bottom: -100px;
	right: 90px;
	height: 260px;
	width: 80px;
	opacity: 0;
	
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out; 
}


/* CONSTRUCTION */

#page_activite #img_container_construction{
	top: 600px;
	right: 15%;
}

#page_activite #content_construction {
	top: 610px;
	left: 15%;
}

#page_activite #img_container_construction #img_camion{
	bottom: 29px;
	right: 37px;
	width: 50px;
	height: 22px;
	
	transform: rotate(4deg);
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;  
}

#page_activite #img_container_construction #img_mat_bottom{
	bottom: 1000px;
	right: 110px;
	width: 40px;
	height: 40px;
	
	transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	
	-webkit-transition: all 1.2s ease-out;
	-moz-transition: all 1.2s ease-out;
	-o-transition: all 1.2s ease-out;
	transition: all 1.2s ease-out; 
}

#page_activite #img_container_construction #img_mat_middle{
	bottom: 1000px;
	right: 110px;
	width: 40px;
	height: 40px;
	
	transform: rotate(40deg);
	-webkit-transform: rotate(40deg);
	-moz-transform: rotate(40deg);
	-o-transform: rotate(40deg);
	
	-webkit-transition: all 1.2s ease-out;
	-moz-transition: all 1.2s ease-out;
	-o-transition: all 1.2s ease-out;
	transition: all 1.2s ease-out;  
}

#page_activite #img_container_construction #img_mat_top{
	bottom: 1000px;
	right: 110px;
	width: 40px;
	height: 40px;
	
	transform: rotate(50deg);
	-webkit-transform: rotate(50deg);
	-moz-transform: rotate(50deg);
	-o-transform: rotate(50deg);
	
	-webkit-transition: all 1.2s ease-out;
	-moz-transition: all 1.2s ease-out;
	-o-transition: all 1.2s ease-out;
	transition: all 1.2s ease-out;  
}

#page_activite #img_container_construction #img_pales{
	bottom: 1000px;
	right: 110px;
	width: 40px;
	height: 140px;
	
	transform: rotate(40deg);
	-webkit-transform: rotate(40deg);
	-moz-transform: rotate(40deg);
	-o-transform: rotate(40deg);
	
	transform: skew(-80deg, 0deg);
	-webkit-transform: skew(-80deg, 0deg);
	-moz-transform: skew(-80deg, 0deg);
	-o-transform: skew(-80deg, 0deg);
	
	-webkit-transition: all 1.2s ease-out;
	-moz-transition: all 1.2s ease-out;
	-o-transition: all 1.2s ease-out;
	transition: all 1.2s ease-out; 
}




/* MAINTENANCE */

#page_activite #img_container_maintenance{
	top: 1000px;
	left: 15%;
}

#page_activite #content_maintenance {
	top: 1030px;
	right: 15%;
}

#page_activite #img_container_maintenance #img_camion_maintenance{
	bottom: 24px;
	right: -60px;
	width: 50px;
	height: 22px;
	opacity: 0;
	
	transform: rotate(4deg);
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;  
}

#page_activite #img_container_maintenance #img_mat_bottom{
	bottom: 29px;
	right: 110px;
	width: 40px;
	height: 40px;
	
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out; 
}

#page_activite #img_container_maintenance #img_mat_middle{
	bottom: 69px;
	right: 110px;
	width: 40px;
	height: 40px;
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;  
}

#page_activite #img_container_maintenance #img_mat_top{
	bottom: 109px;
	right: 110px;
	width: 40px;
	height: 40px;
	
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;  
}

#page_activite #img_container_maintenance #img_pales_maintenance{
	bottom: 88px;
	right: 60px;
	width: 140px;
	height: 140px;
	
	-webkit-transition: all 5s ease-out;
	-moz-transition: all 5s ease-out;
	-o-transition: all 5s ease-out;
	transition: all 5s ease-out; 
}


/* DECONSTRUCTION */

#page_activite #img_container_deconstruction{
	top: 1410px;
	right: 15%;
}

#page_activite #content_deconstruction {
	top: 1460px;
	left: 15%;
}

#page_activite #img_container_deconstruction #img_camion_deconstruction{
	bottom: 29px;
	right: 37px;
	width: 50px;
	height: 22px;
	
	transform: rotate(4deg);
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;  
}

#page_activite #img_container_deconstruction #img_mat_bottom_deconstruction{
	bottom: 29px;
	right: 110px;
	width: 40px;
	height: 40px;
	
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out; 
}

#page_activite #img_container_deconstruction #img_mat_middle_deconstruction{
	bottom: 69px;
	right: 110px;
	width: 40px;
	height: 40px;
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;  
}

#page_activite #img_container_deconstruction #img_mat_top_deconstruction{
	bottom: 109px;
	right: 110px;
	width: 40px;
	height: 40px;
	
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;  
}

#page_activite #img_container_deconstruction #img_pales_deconstruction{
	bottom: 88px;
	right: 60px;
	width: 140px;
	height: 140px;
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;  
}

/* TRANSITIONS */

.trait_transition { position: absolute; opacity: 0;   }
.trait {height: 10px;}
.coude { height: 64px; width: 64px;}

.trait1 {top: 434px;}
.trait2 {top: 840px;}
.trait3 {top: 1246px;}
.trait4 {left: 521px; width: 54px; display: block; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); margin-right: 5px; }

/* Entre (1) et (2) */

#coude1 { 	top: 380px; left: 293px;  	-webkit-transition: all 3s ease-out;	-moz-transition: all 3s ease-out;	-o-transition: all 3s ease-out;		transition: all 3s ease-out;}
#trait2 {	left: 350px; 				-webkit-transition: all 2.6s ease-out;	-moz-transition: all 2.6s ease-out;	-o-transition: all 2.6s ease-out;	transition: all 2.6s ease-out;}
#trait3 {	left: 410px; 				-webkit-transition: all 2.2s ease-out;	-moz-transition: all 2.2s ease-out;	-o-transition: all 2.2s ease-out;	transition: all 2.2s ease-out;}
#trait4 {	left: 470px; 				-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;}
#trait5 {	left: 530px; 				-webkit-transition: all 1.4s ease-out;	-moz-transition: all 1.4s ease-out;	-o-transition: all 1.4s ease-out;	transition: all 1.4s ease-out;}
#trait6 {	left: 590px; 				-webkit-transition: all 1s ease-out;	-moz-transition: all 1s ease-out;	-o-transition: all 1s ease-out;		transition: all 1s ease-out;}
#trait7 {	left: 650px; 				-webkit-transition: all 0.6s ease-out;	-moz-transition: all 0.6s ease-out;	-o-transition: all 0.6s ease-out;	transition: all 0.6s ease-out;}
#coude2 { 	top: 434px; left: 707px; 	-webkit-transition: all 0.2s ease-out;	-moz-transition: all 0.2s ease-out;	-o-transition: all 0.2s ease-out;	transition: all 0.2s ease-out;}

/* Entre (2) et (3) */

#coude3 { 	top: 786px; left: 701px; -webkit-transition: all 3s ease-out;	-moz-transition: all 3s ease-out;	-o-transition: all 3s ease-out;		transition: all 3s ease-out;}
#trait8 {	left: 350px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transition: all 2.6s ease-out;	-moz-transition: all 2.6s ease-out;	-o-transition: all 2.6s ease-out;	transition: all 2.6s ease-out;}
#trait9 {	left: 410px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transition: all 2.2s ease-out;	-moz-transition: all 2.2s ease-out;	-o-transition: all 2.2s ease-out;	transition: all 2.2s ease-out;}
#trait10 {	left: 470px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -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;}
#trait11 {	left: 530px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transition: all 1.4s ease-out;	-moz-transition: all 1.4s ease-out;	-o-transition: all 1.4s ease-out;	transition: all 1.4s ease-out;}
#trait12 {	left: 590px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transition: all 1s ease-out;	-moz-transition: all 1s ease-out;	-o-transition: all 1s ease-out;		transition: all 1s ease-out;}
#trait13 {	left: 650px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transition: all 0.6s ease-out;	-moz-transition: all 0.6s ease-out;	-o-transition: all 0.6s ease-out;	transition: all 0.6s ease-out;}
#coude4 { 	top: 840px; left: 287px; -webkit-transition: all 0.2s ease-out;	-moz-transition: all 0.2s ease-out;	-o-transition: all 0.2s ease-out;	transition: all 0.2s ease-out;}

/* Entre (3) et (4) */

#coude5 { 	top: 1192px; left: 292px; -webkit-transition: all 3s ease-out;	-moz-transition: all 3s ease-out;	-o-transition: all 3s ease-out;		transition: all 3s ease-out;}
#trait14 {	left: 350px; -webkit-transition: all 2.6s ease-out;	-moz-transition: all 2.6s ease-out;	-o-transition: all 2.6s ease-out;	transition: all 2.6s ease-out;}
#trait15 {	left: 410px; -webkit-transition: all 2.2s ease-out;	-moz-transition: all 2.2s ease-out;	-o-transition: all 2.2s ease-out;	transition: all 2.2s ease-out;}
#trait16 {	left: 470px; -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;}
#trait17 {	left: 530px; -webkit-transition: all 1.4s ease-out;	-moz-transition: all 1.4s ease-out;	-o-transition: all 1.4s ease-out;	transition: all 1.4s ease-out;}
#trait18 {	left: 590px; -webkit-transition: all 1s ease-out;	-moz-transition: all 1s ease-out;	-o-transition: all 1s ease-out;		transition: all 1s ease-out;}
#trait19 {	left: 650px; -webkit-transition: all 0.6s ease-out;	-moz-transition: all 0.6s ease-out;	-o-transition: all 0.6s ease-out;	transition: all 0.6s ease-out;}
#coude6 { 	top: 1246px; left: 708px; -webkit-transition: all 0.2s ease-out;	-moz-transition: all 0.2s ease-out;	-o-transition: all 0.2s ease-out;	transition: all 0.2s ease-out;}

/* Entre (4) et Boutton "découvrir" */

#coude7 { 	top: 1600px; left: 708px; -webkit-transition: all 3s ease-out;	-moz-transition: all 3s ease-out;	-o-transition: all 3s ease-out;		transition: all 3s ease-out;}

#trait20 { 	top: 1654px; left: 661px; width: 54px; -webkit-transition: all 3s ease-out;	-moz-transition: all 3s ease-out;	-o-transition: all 3s ease-out;		transition: all 3s ease-out; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg);}
#trait21 {	top: 1654px; left: 606px; width: 54px; -webkit-transition: all 2.6s ease-out;	-moz-transition: all 2.6s ease-out;	-o-transition: all 2.6s ease-out;	transition: all 2.6s ease-out; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg);}

#coude8 { 	top: 1654px; left: 543px; -webkit-transition: all 0.2s ease-out;	-moz-transition: all 0.2s ease-out;	-o-transition: all 0.2s ease-out;	transition: all 0.2s ease-out;}

#trait22 {	top: 1734px; -webkit-transition: all 2.2s ease-out;	-moz-transition: all 2.2s ease-out;	-o-transition: all 2.2s ease-out;	transition: all 2.2s ease-out;}
#trait23 {	top: 1790px; -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;}
#trait24 {	top: 1847px; -webkit-transition: all 1.4s ease-out;	-moz-transition: all 1.4s ease-out;	-o-transition: all 1.4s ease-out;	transition: all 1.4s ease-out;}

/* DECOUVRIR ACTIVITE */

#decouvrir_activite {
	position: absolute;
	top: 1870px;
	width: 100%; 
	height: 100vh;
	text-align: center;
	vertical-align: middle;
}

#decouvrir_activite h2 {
	display: inline-block;
	background-color: #FFF;
	padding: 15px 50px;
	margin: 50px 20%;
	border-radius: 10px;
	cursor: pointer;
	opacity: 0;
	
	color: #444;
	font-size: 30px;
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;  
	
}

#decouvrir_activite h2:hover {
	background-color: #999;
	color: #FFF;
}

#decouvrir_activite ul {
	display: inline-block;
	width: 35%;
	margin-right: 8%;
	background-color: ;
	vertical-align: top;
	border-radius: 6px;
	overflow: hidden;
	text-align: left;
	opacity: 0;
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;  
}

#decouvrir_activite ul .titre_tableau {
	border-bottom: dotted 1px #fff;
	display: block;
	margin: 0 0 10px 0;
	text-align: center;
}

#decouvrir_activite ul .titre_tableau h3 {
	color: #FFF;
	padding: 5px 10px;
	font-family: giorgio;
	letter-spacing: 0.1em;
}

#decouvrir_activite ul li {
	padding: 3px 10px 3px 0;
	margin-left: 90px;
	
	display: list-item;
	list-style-type: disc;
	list-style-image: url("../images/puce.png");
}

#decouvrir_activite ul .last_li {
	margin-right: 0;
}

#decouvrir_activite ul li img {
	vertical-align: middle;
}

#decouvrir_activite ul li a{
	color: #fff;
	font-family: giorgio-thin;
	letter-spacing: 0.1em;
}

#decouvrir_activite ul li:hover a{
	color: #31A7D2;
}

/* Replay */

#replay_button {
	display: block;
	text-align: center;
	margin: 30px 0;
	opacity: 0;
	
	position: absolute;
	bottom: 0px;
	left: 48%;
	
	-webkit-transition: all 2s ease-out;
	-moz-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out; 
}

#replay_button img {
	width: 30px;
	height: 30px;
}