/************************************PORTFOLIO***********************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix:before, .clearfix:after { 
	content: " "; 
	display: table; 
}
	
.clearfix:after { 
	clear: both; 
}

@font-face {
  font-family: 'Muli-Light';
  src: url('Muli-Light.eot');
  src: url('Muli-Light.eot?#iefix') format('embedded-opentype'),
       url('Muli-Light.woff') format('woff'),
       url('Muli-Light.ttf') format('truetype'),
       url('Muli-Light.svg#Muli-Light') format('svg');
}

.fontpro,.fontpro-35765 {
  font-family: 'Muli-Light',sans-serif;
}

@font-face {
  font-family: 'Muli';
  src: url('Muli-Regular.eot');
  src: url('Muli-Regular.eot?#iefix') format('embedded-opentype'),
       url('Muli-Regular.woff') format('woff'),
       url('Muli-Regular.ttf') format('truetype'),
       url('Muli-Regular.svg#Muli') format('svg');
}

.fontpro,.fontpro-35767 {
  font-family: 'Muli',sans-serif;
}


/* ____________________________________GENERAL___________________________________________________________*/


body, html { font-size: 100%; padding: 0; margin: 0; height: 100%; line-height:120%; background:#EFEFEC; 	font-family: 'Muli-Light',Helvetica, Arial,sans-serif;	overflow-x:hidden; 
}

.zone_texte { 
	z-index:100; 
	position:relative;
}
.content	{ 
	width:980px; 
	margin:0 auto; 
	position:relative; 
}	
.backg_nuages {
	background:url(../images/fond_nuages.jpg) no-repeat;
	height:100%;
	width:auto;
	margin:0 auto;
	background-position:center;
	overflow:hidden;
}

.viadeo{
	background:no-repeat;
	width:32px;
	height:33px;
}

.linkedin{
	background:no-repeat;
	width:32px;
	height:33px;
}

a{
	text-decoration:none;
}

#wait{
	padding:25em 5em;
}

.loading{
	text-align:center;
	color:#b1130c;
}

.loading:before,
.loading:after{
	content:"";
	display:inline-block;
	vertical-align:middle;
	margin:0 0.7em;
	width:10em;
	border-bottom:1px solid #b1130c;
	
	-moz-animation: loading 3s forwards linear;
  	-webkit-animation: loading 3s forwards linear;
 	 animation: loading 3s forwards linear;
  
  	-moz-animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
  	animation-iteration-count:infinite;
}

/*Animation */
@-webkit-keyframes loading {
  0% {width: 0em; opacity:0.1}
  70% {width: 8em; opacity:1.0}
  100% {width: 10em; opacity:0.0}
}

@-moz-keyframes loading {
  0% {width: 0em; opacity:0.1}
  70% {width: 8em; opacity:1.0}
  100% {width: 10em; opacity:0.0}
}
@keyframes loading {
  0% {width: 0em; opacity:0.1}
  70% {width: 8em; opacity:1.0}
  100% {width: 10em; opacity:0.0}
}


/* ____________________________________ACCUEIL___________________________________________________________*/

.backg_accueil {
	background:url(../images/fond_accueil.jpg) no-repeat;
	background-position:center;
	height:100%;
	width:auto;
	margin:0 auto;
}

		#accueil {
			height:100%;
			color: #EFEFEC;	
		}
			#logo_accueil {
				display:none;
				background:url(../images/logo_accueil.png) no-repeat center;
				opacity:2;
				width:120px;
				height:130px;
				position:absolute;
				top:30%;
				left:50%;
				margin-left:-60px;
			}
			

.container {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-171px;
	text-align:center;
}
	.container h1{
		display:none;
		text-transform:lowercase;
		padding-bottom:20px;
		font-size:36px;
		letter-spacing:5px;
	}
	.container h2{
		display:none;
		font-size:30px;
		line-height:120%;
		text-transform:uppercase;
		font-weight:lighter;
	}

#rectcentral {
	display:none;
	background:#b1130c;
	opacity:0.5;
	width:196px;
	margin-left:-98px;
	height:100%;
	left:50%;
	position:absolute;
}

/*____________________________________________MENU__________________________________________________*/

#menu {
	height:100%;
	width:140px;
	background:#FFFFFF;
	opacity:0.9;
	top:0px;
	position:fixed;
	z-index:100;
}

		#log_menu{ 
			line-height:100%;
			height:25%; 
			position:relative;
		}
			#log_menu img {
				position:absolute; 
				left:50%; 
				top:50%; 
				margin:-21px 0 0 -19px;
			}
		#nav {
			display:block;
			position:absolute;
			width:90px;
			top:28%;
			left:20%;
			color:#000;
			padding-top:35px;
		}
			#nav li {
				list-style-type:none;
				font-size:0.9em;	
			}
				#propos {
					letter-spacing:5px;
					padding-bottom:35px;
				}				
				#projets {
					letter-spacing:3px;
					padding-bottom:0;
				}				
				#contact {
					letter-spacing:2px;
					padding-top:35px;
				}
				#nav li a{
					text-decoration:none;
					color:#000;
				}

					#nav_projets {
						display:block;
						color:#787878;
						letter-spacing:1px;
						font-size:0.7em;
						line-height:0.9em;	
					}					
					#nav_projets li{
						list-style-type:none;
						padding-top:20px;
					}				
					.acc{
						padding-bottom:0;
					}
					#nav_projets li a{
						color:#787878;
					}					
					#nav_projets li a:hover {
						color:#b1130c;
					}
					/*lien actif selon URL*/					
					#en_cours.id a{
						color:#b1130c;
					}
					#en_cours.web a{
						color:#b1130c;
					}
					#en_cours.acc a{
						color:#b1130c;
					}

#lignenav_vertical{
	display:block;
	background:url(../images/lignenav_rouge.jpg) no-repeat;
	position:absolute;
	top:0;
	opacity:0;
	left:85%;
	width:36px;
	height:600px;			
}

	
/*____________________________________________PROPOS________________________________________________*/

#propos_contenu .zone_texte {
	width:500px; 
	margin:80px 0 0 160px; 
	color: #000;
}
	#propos_contenu .bg { 
		background:#EFEFEC;
		padding:20px 50px 20px 20px; 
	}

		#propos_contenu h1 {
			font-size:24px;
			text-align:right;
			font-weight:lighter;
		}
		
		#propos_contenu h2 {
			font-size:15px;
			color:#787878;
			text-align:right;
			line-height:15px;
			padding-top:5px;
		}
		
		#propos_contenu p {
			display:inline-block;
			padding:10px 0;
			font-size:12px;
			text-align:justify;
			color:#787878;
		}
		
		.gras {
			font-family:'Muli',Helvetica, Arial,sans-serif;;
			color:#000;
		}

			#propos_contenu p.philo {
				font-size:14px;
				letter-spacing:3px;
				text-align:right;
				color:#767474;
				padding-right:50px;
				padding-left:200px;
			}

				#propos_contenu #photo1 {
					background-image:url(../images/photosylvie.jpg);
					background-repeat:no-repeat;
					z-index:200;
					position:absolute;
					top:20px;
					right:-150px;
					width:193px;
					height:225px;
				}
				
				#propos_contenu #photo2 {
					background:url(../images/photoap.jpg) no-repeat;
					z-index:100;
					position:absolute;
					top:180px;
					right:-310px;
					width:320px;
					height:351px;
				}

	#contacter {
		background:none;
		border:solid 1px #b1130c;	
		margin-left:315px;
		padding:10px;	
	}
	
	#contacter a{
		color:#b1130c;
	}
	
	#propos_contenu #contacter {
		font-size:14px;	
		padding:10px;	
	}

.rectrouge{
	background:#b1130c;
	width:50px;
	height:304px;
	left:140px;
	top:50%;
	margin-top:-304px;
	position:absolute;
}

#propos_contenu .viadeo{
	margin:5px 0 0 320px;
}

#propos_contenu .linkedin{
	float:right;
	margin:5px 40px 0 0;	
}


/*____________________________________________PROJETS________________________________________________*/

#travaux_page{
	height:100%;
	width:980px;
	margin:0 auto;
	position:relative;
}
	#fond_travaux {
		background:#E7E7E4;
		background-position:center;
		height:608px;
		width:825px;
		position:absolute;
		left:140px;
		top:50%;
		margin-top:-304px;
	}
			#trav_web{
				background:url(../images/trav_web_nb.jpg)no-repeat center;
				position:absolute;
				top:0;
				width:395px;
				height:324px;
			}			
			#trav_acc{
				background:url(../images/trav_acc_nb.jpg)no-repeat center;
				position:absolute;
				bottom:0;
				width:395px;
				height:259px;
			}			
			#trav_id{
				background:url(../images/trav_id_nb.jpg)no-repeat center;
				position:absolute;
				top:0;
				right:0;
				width:401px;
				height:608px;
			}
				.rect_titre{
					background:#FFF;
					opacity:0.8;
					position:absolute;
					top:0;
					right:10px;
					width:90px;
					height:75px;
					font-size:13px;
					line-height:12px;
					text-align:center;
					color: #787878;
				}				
				.rect_titre .ligne{
					display:block;
					border-right:solid 1px #b1130c;
					height:45px;
					width:45px;
				}

#rect_rouge_ssmenu{
	background:#b1130c;
	position:absolute;
	top:47%;
	margin-top:-284px;
	left:-50px;
	width:50px;
	height:284px;
}

/*_________________________________________PROJETS _____________________________________________*/

#projet_scroll, #projet_web{
	width:980px;
	height:100%;
	margin:0 auto;	
}
	#slider_projets {
		margin-left:140px;
		margin-top:-304px;
		top:50%;
		position:relative;
	}
		#visionneuse {
			width:820px;
			height:608px;	
		}
			#liste li{
				width: 820px;
				float: left;
				list-style-type:none;	
				position:relative;
			}
			.bouton_projets {
				width:164px;
				height:55px;
				border:solid 2px #b1130c;
				position:absolute;
				top:60%;
				left:50%;
				margin-left:-82px;
				text-align:center;
			}
				.bouton_projets h3 {
					font-family:'Muli',Helvetica, Arial,sans-serif;
					text-transform:uppercase;
					color:#b1130c;
					margin-top:10px;
				}				
				.bouton_projets p {
					text-transform:uppercase;
					color:#b1130c;
					font-size:13px;
				}
				
			.bouton_projets:hover{
				background:rgba(239, 239, 236, 0.8);
				color:#FFF;
				border:none;
			}
			

			
		#puces{
			background:#b1130c;
			opacity:0.9;
			text-align:center;
			position:absolute;
			bottom: 0;
			width:20px;
			height:283px;
			z-index:200;
		}
		#puces li{
			list-style-type:none;
			cursor:pointer;
			width:100px;
			height:15px;
			border-bottom:solid 1px #b1130c;
			color:#b1130c;
			font-size:14px;
			margin:10px 0 0 0px;
		}
		#puces li:hover, #puces .active {
			color:#FFF;
			border-bottom:1px solid #FFF;
		}


/*_________________________________________PROJETS / PAGE photos________________________________________*/

#travaux_photos{
	width:980px;
	height:100%;
	margin:0 auto;
	
}
	#slider_travaux {
		margin-left:140px;
		margin-top:-304px;
		top:50%;
		position:relative;
	}
		#visionneuse_travaux {
			width:820px;
			height:608px;	
		}
			#liste_pages{
				width:auto;
				height:608px;
			}

				.position_img {
					float:left;
					width:273px;
					background:no-repeat;
				}				
				#p1_1{
					height:325px;
				}			
				#p1_2{
					height:325px;
				}				
				#p1_3{
					height:325px;
				}
				#p1_4{
					height:325px;
					width:546px;
				}				
				#p1_5{
					height:325px;
				}				
				#p1_6{
					height:283px;
					top:325px;
				}				
				#p1_7{
					width:546px;
					height:283px;
				}				
				#p1_8{
					height:283px;
				}				
				#p1_9{
					height:283px;
					width:546px;	
				}

		#zone_legende{
			background:#b1130c;
			text-align:center;
			position:absolute;
			bottom: 0;
			width:273px;
			height:283px;
			z-index:200;
			color:#E7E7E4;
		}
			.legende_travaux{
				width:253px;
				margin:10px;
			}

				#zone_legende h3{
					font-family:'Muli';
					font-size:14px;
					text-transform:uppercase;
					margin:30px 0 10px 0;
				}
				
				#zone_legende h4{
					font-size:12px;
					text-transform:uppercase;
				}

				.legende_travaux a{
					color:#E7E7E4;
				}
				
				.legende_travaux p{
					font-size:11px;
					margin:10px 25px;
					text-align:justify;
				}

					#ouvrir{
						background:url(../images/fleche_droite.png)no-repeat;
						width:20px;
						height:25px;
						position:absolute;
						bottom:10px;
						right:6px;	
					}
					
					#ouvrir:hover{
						cursor:pointer;
					}
					
					#fermer{
						background:url(../images/croix.png)no-repeat;
						height:20px;
						width:20px;
						position:absolute;
						right:10px;
						bottom:10px;	
					}
					
					#fermer:hover{
						cursor:pointer;	
					}

			#carres {
				width:40px;
				height:283px;
				position:absolute;
				right:0;
				bottom:0;
			}		
					#carres li{
						list-style-type:none;
						cursor:pointer;
						width:15px;
						height:15px;
						border:solid 1px #E7E7E4;
						color:#E7E7E4;
						margin:12px 0 0 12px;
							}		
					#carres li:hover, #carres li.active {
						background:#E7E7E4;
						color:#b1130c;
					}
						.numeros_carres {
							font-family:'Muli',Helvetica, Arial,sans-serif;
							text-transform:uppercase;
							font-size:14px;
							line-height:15px;
							text-align:left;
							margin-left:25px;
						}
						
						#slider_web p.numeros_carres{
							margin-left:0px;
							text-align:center;
						}
						
						#slider_travaux p.numeros_carres{
							margin-left:0px;
							text-align:center;
						}
			.next {
				background:#b1130c;
				position:relative;
				color:#E7E7E4;
				text-transform:uppercase;
				font-size:9px;
				cursor:pointer;
				padding:10px 40px 10px 30px;
				float:right;			
			}			
			.next img{
				position:absolute;
				bottom:7px;
				right:20px;
			}			
			#travaux_photos .next{
				top:-39px;
			}
			
/*_________________________________________TRAVAUX WEB______________________________________*/

#travaux_web{
	width:980px;
	height:100%;
	margin:0 auto;
}
	#slider_web{
		height:608px;
		margin-left:140px;
		margin-top:-304px;
		top:50%;
		position:relative;
	}
		#slider_web .rectrouge{
			margin:-80px 0 0 -30px;
			width:900px;
			height:100px;
		}

			#visionneuse_web{
				height:608px;
				width:820px;
			}

				#liste_page_web{
					height:608px;
				}

					#liste_page_web li{
						width: 470px;
						height:608px;
						float: left;
						list-style-type:none;	
						position:relative;
					}

						#player_web {
							width:355px;
							height:260px;
							margin:50px 0 0 75px;
							z-index:100;
						}						
						.imgweb1{
							width:382px;
							height:287px;
							margin:50px 20px 20px 60px;	
						}					
						.imgweb2{
							width:382px;
							height:287px;
							margin-left:50px;
							margin-top:40px;
						}						
						.imgweb3{
							width:382px;
							height:287px;
							margin-left:60px;
							margin-top:40px;
						}
						
						#travaux_web .text_multi{
							padding:20px 40px 20px 40px;
							width:300px;
							background:#EFEFEC;
						}					
							#travaux_web .text_multi p{
								text-align:justify;
							}
							
								#part1 .text_multi p{
									text-align:center;
								}
								
								#travaux_web .text_multi a{
									color:#000;
								}
								
								#part1 .text_multi{
									margin-left:60px;
									margin-top:80px;
								}
								
								#part2 .text_multi{
									margin:40px 0 0 50px;
								}
								
								#part3 .text_multi{
									margin:70px 0 0 60px;
									color:#787878;
									text-align:left;
									font-size:12px;	
								}
						
						#select_liste{
							background:#b1130c;
							opacity:0.9;
							text-align:center;
							position:absolute;
							bottom: 0;
							width:40px;
							height:283px;
							z-index:200;
						}
						
							#select_liste li{
								list-style-type:none;
								cursor:pointer;
								width:15px;
								height:15px;
								border:solid 1px #E7E7E4;
								color:#E7E7E4;
								font-size:10px;
								margin:12px 0 0 12px;
							}
						
							#select_liste li:hover, #select_liste li .active {
								background:#E7E7E4;
								color:#b1130c;
							}
							
							#travaux_web .next{
								position:absolute;
								bottom:0;
								right:0;
							}
							.next a{
								color:#E7E7E4;
							}

/*_________________________________________TRAVAUX VIDEO______________________________________*/

#player {
	overflow:auto;	
	display:block;
	background-bottom:#b1130c;
	color:#b6b179;	
	position:relative;
	width:705px;
	height:400px;
	margin:80px 0 0 200px;
	z-index:100;
}
		#play{
			background:url(../images/play.png)no-repeat;
			width:35px;
			height:35px;
			position:absolute;
			bottom:35px;
			left:535px;
			z-index:200;
		}
		
		#pause {
			background:url(../images/pause.png)no-repeat;
			display:none;
			border: 0px outset buttonface;
			width:35px;
			height:35px;
			position:absolute;
			bottom:35px;
			z-index:200;	
		}
		
		#barretime {
			width:705px;
			height:10px;
			margin-left:200px;
			z-index:300;
			position:absolute;
			bottom:0px;
		}
		
		#barrecharge {
			background:#b1130c;
			width:705px;
			height:10px;
		}

#motion_page .text_multi{
	color:#000;
	background:#E7E7E4;
	width:680px;
	position:absolute;
	padding:20px 50px 20px 50px;
	left:160px;	
}

		.text_multi h2{
			font-family:'Muli',Helvetica, Arial,sans-serif;
			text-transform:uppercase;
			text-align:center;
			
		}
		
		.text_multi h3{
			text-transform:uppercase;
			text-align:center;
			font-size:12px;
		}
		
		.text_multi h4{
			color:#787878;
			margin-bottom:5px;
			text-transform:uppercase;
			text-align:center;
			font-size:10px;
		}
		
		.text_multi p{
			color:#787878;
			text-align:center;
			font-size:12px;
			
		}
#motion_page .next {
	position:absolute;
	right:0;
	font-size:9px;
}

/*_____________________________________________CONTACT________________________________________________*/

#contact_page {
	color: #000;	
}
		#zone_red {
			background:#b1130c;
			width:375px;
			height:560px;
			position:relative;
			left:140px;
			margin-top:70px;
		}
			#zone_red p {
				text-align:right;
				margin-top:20px;
				margin-right:127px;
				font-size:14px;
			}
			
			#zone_red p a{
				color:#E7E7E4;
			}

#nom_activites {
	margin-right:127px;
	padding-top:9px;
}
		#nom_activites h1 {
			font-size:24px;
			letter-spacing:1px;
			margin-top:20px;
			margin-bottom:5px;
			text-align:right;
			font-weight:lighter;
		}
		
		#nom_activites h2 {
			font-size:18px;
			letter-spacing:1px;
			color:#E7E7E4;
			font-weight:lighter;
			line-height:18px;
			text-align:right;
			margin:0;
		}

		#line_top {
			display:block;
			width:125px;
			height:40px;
			position:absolute;
			top:0;
			right:0;
			border-bottom:1px solid #E7E7E4;
		}
		
		#line_center {
			display:block;
			width:165px;
			height:40px;
			position:absolute;
			top:160px;
			left:0;
			border-top:1px solid #E7E7E4;
		}

#contact_page .viadeo{
	position:absolute;
	top:145px;
	left:215px;
}

#contact_page .linkedin{
	position:absolute;
	top:145px;
	left:173px;
}

#rectred_contact{
	background:#b1130c;
	width:100px;
	height:260px;
	margin-top:-20px;
	right:0;
	top:305px;
	position:absolute;	
}

#photo_desk {
	background:url(../images/photo_desk.jpg)no-repeat;
	position:absolute;
	top:240px;
	left:50px;
	width:290px;
	height:310px;
	z-index:200;
}

#formulaire{
	background:#EFEFEC;
	width:515px;
	position:absolute;
	top:65px;
	left:440px;
	font-size:12px;
	color:#787878;
	z-index:100;
}

		#form_contact{
			border:none;
			padding:20px 90px 40px 90px;	
		}

			#form_contact h2{
				font-size:14px;
				margin-top:10px;
				margin-bottom:10px;
			}
			
			.champs{
				position:absolute;
				margin-top:5px;
			}
			
			.champs:focus{
					outline:none;
					background:#5D8393;
			}
			p.label_form {
					border:1px solid #787878;
					color:#787878;
					overflow:hidden;
					text-transform:uppercase;
					height:30px;
					text-indent:10px;
					margin-bottom:5px;
			}
			
			#submit {
				display:block;
			}
			
			input {
				background:none;
				color:#787878;
				height:28px;
				width:250px;
				border:none;
				outline:none;
				font-family: 'Muli-Light',Helvetica, Arial,sans-serif;
				font-size:13px;	
				letter-spacing:1px;
				position:absolute;
				right:110px;
				text-indent:30px;
				
			}
			
			#descriptif {
				border:1px solid #787878;
				color:#787878;
				font-family: 'Muli-Light',Helvetica, Arial,sans-serif;
				font-size:12px;	
				width:330px;
				text-indent:10px;
				background:none;
				outline:none;
				height:115px;
				padding-top:6px;
			}
			
			
			.envoyer {
				font-size:14px;
				width:97px;
				border:solid 1px #b1130c;
				color:#b1130c;
				float:right;
				margin-top:20px;
				text-align:center;
				padding:7px 0px 7px 0px;
				cursor:pointer;	
			}


/*_______________________________________SITE MOBILE___________________________________________________________________*/

@media screen and (max-width:800px) {

.content{
	width:auto;
	font-size:120%;
}

.backg_nuages{
	background:none;
	background-position:top;
	overflow-y:auto;
}

figure , img {
	max-width:100%;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 .next{
	 font-size:14px;
 }

/*-------Menu---------*/
#menu {
	height:110px;
	width:100%;
	opacity:1;
	position:relative;
	
}

.bouton_menu{
	background:#b1130c;
	width:45px;
	height:45px;
	position:absolute;
	top:50px;
	left:0;
	z-index:100;
}
		.bouton_menu img{
			position:absolute;
			top:15px;
		}
				#closenav img{
					left:13px;
				}				
				#opennav img{
					left:10px;
				}

#log_menu{ 
	height:60px; 
	width:20%;
	float:left;
}

#nav {
	width:100%;
	top:0;
	padding-top:22px;
	left:inherit;
}

		#nav li {
			width:auto;
			padding-right:5%;	
			letter-spacing:2px;
			padding-bottom:0;
			font-size:0.8em;
		}
		
		#propos{
			float:left;
			margin-left:20%;
		}
		
		#projets{
			float:left;
		}
		
		#contact{
			letter-spacing:1px;
			float:left;
			padding-top:0;
		}
		
#nav_projets {
	background:#b1130c;
	width:100%;
	height:50px;
	position:absolute;
	top:60px;
	z-index:100;		
}

#nav_projets li{
	padding-top:16px;
	padding-right:10%;
	display:inline-block;
}
		.web{
			left:10%;
			padding-left:20%;
		}
		
		.id{
			left:43%;
		}
		
		.acc{
			left:70%;
		}

#nav_projets li a{
	color:#EFEFEC;
}
#nav_projets li a:hover {
	color:#000;
}
/*lien actif selon URL*/					
#en_cours.id a{
	color:#000;
}
#en_cours.web a{
	color:#000;
}
#en_cours.acc a{
	color:#000;
}
.red {
	color:#000;
}

		
#lignenav_vertical{
	display:none;
}

/*-------Propos---------*/
#propos_contenu .zone_texte {
	width:100%; 
	margin:60px 0 0 0;	
	z-index:0; 
}

	#propos_contenu .bg { 
		padding:20px; 
	}

		#propos_contenu p.philo {
			display:none;
		}
		
		#propos_contenu #photo1 {
			top:100%;
			left:10px;	
		}
		
		#propos_contenu #photo2 {
			position:initial;
			float:left;
			margin-top:15%;	
			margin-left:12%;
		}

		#contacter {	
			float:right;
			margin-left:80%;
		}
		
		#contacter {	
			float:right;
			margin-left:80%;
		}

		#propos_contenu .viadeo{
			float:right;
			margin:2% 0 0 10%;
		}
		
		#propos_contenu .linkedin{
			margin:2% 3% 0 0;	
		}

.rectrouge{
	display:none;
}

/*-------contact---------*/

#zone_red {
	width:100%;
	left:0;
	margin-top:60px;
	
}
		#zone_red p {
			margin-right:15%;
			font-size:16px;
		}
		
		#nom_activites {
			margin-right:15%;
		}		
				#nom_activites h1 {
					font-size:26px;
				}
				
				#nom_activites h2 {
					font-size:20px;
				}

		#line_top {
			width:10%;
		}
		
		#line_center {
			width:60%;
		}
		
		#contact_page .linkedin{
			left:initial;	
			right:23%;		
		}
		
		#contact_page .viadeo{
			right:15%;
			left:initial;
		}

#rectred_contact{
	display:none;	
}

#photo_desk {
	display:none;
}

#formulaire{
	width:100%;
	top:270px;
	left:0px;
	z-index:0;
}

		#form_contact{
			padding:20px 10% 40px 10%;	
		}

				p.label_form {
						width:90%;
				}
				
				input {
					width:60%;
					left:22%;
				}
				
				#descriptif {
					width:89%;
				}
				
				.envoyer {
					margin-right:9%;
				}
				

/*-------Accueil---------*/

#logo_accueil {
	top:20%;
}

.container {
	margin-left:-130px;
}

		.container h1{
			margin-top:10px;
			letter-spacing:0;
		}
		
		.container h2{
			font-size:24px;
		}

/*-------Projets---------*/

#travaux_page{
	height:100%;
	width:auto;
	font-size:120%;
}

	#fond_travaux{
		background:none;
		width:100%;
		position:relative;
		margin:0;
		top:0;
		left:0;
		height:100%;
	}
			#trav_web{
				width:50%;
				float:none;
			}
			
			#trav_acc{
				width:50%;
				left:0;
				top:328px;
				float:none;
				margin-top:5px;
			}
			
			#trav_id{
				width:50%;
				float:none;
				height:592px;
			}
			
						
	#travaux_page #rect_rouge_ssmenu{
		display:none;
	}
	
/*---------Projets-et Travaux-----------------*/
	
#projet_scroll, #projet_web{
	width:100%;	
	background:#b1130c;
}
	#slider_projets, #slider_travaux, #slider_web{
		margin-left:0;
		margin-top:0;
		top:0;
		height:auto;
	}

		#visionneuse, #visionneuse_travaux ,#visionneuse_web{
			width:100%;
			height:auto;	
		}

#projet_web #liste li{
	width:600px;
}

		#liste li{
			width:50%;
			margin-bottom:-4px;
		}
		
		#liste li img{
			width:120%;
			max-width:none;
		}
		
		#liste_page_web, #liste_page_web li{
			height:530px;
		}

#part1{
	top:-30px;
}

#part2{
	top:10px;
}

#part3{
	top:-20px;
}

		#puces, #carres{
			position:initial;
			opacity:1;
			width:100%;
			height:auto;
			float:left;
			display:inline-block;
			padding-bottom:20px;
		}
		
		#select_liste{
			position:static;
			opacity:1;
			width:100%;
			height:100px;
			display:inline-block;
		}
		
		#puces li{
			width:90px;
			height:25px;
			position:relative;
			display:block;
			padding-left:20px;
			color:black;
			border-bottom:solid 1px #000000;
		}
		
		#carres li, #select_liste li{
			color:#E7E7E4;
			border-bottom:solid 1px #E7E7E4;
			display:inline-block;
			padding-left:inherit;
			width:30px;
			height:30px;
			position:relative;
		}
		
		.numeros_carres {
			font-family:'Muli-light';
			position:absolute;
			font-size:16px;
			top:20%;
			left:32%;
		}
	
#travaux_photos, #travaux_web{
	width:100%;
	height:auto;
}

#zone_legende{
	top:608px;
	width:100%;
	bottom:initial;
}

		.legende_travaux{
			width:100%;
			margin-top:0;
		}
		
		#zone_legende h3{
			font-size:16px;
			margin:0;
		}
		
		#zone_legende h4 , #zone_legende p{
			font-size:16px;
		}

#travaux_photos	#carres{
	height:60px;
}

#player_web{
	width:355px;
	height:255px;
}

#travaux_web .next{
	bottom:-20px;
}

/*-----------video motion-------------*/

#player{
	margin:0 auto;
	padding-top:45px;
}

#motion_page .text_multi{
	left:inherit;
	width:100%;
	padding:20px 0px 20px 0px;
}

#play{
	left:50%;
	margin-left:-17px;
}

#pause{
	left:inherit;
	right:20px;
}

#barretime{
	width:100%;
	margin-left:0;
}

}

@media screen and (max-width:580px) {	
	
	.content{
		font-size:100%;
	}
	
		#propos{
			float:left;
			margin-left:15%;
		}
		
		#projets{
			float:left;
		}
		
		#projet_web #liste li{
	width:580px;
}
		
		#contact{
			letter-spacing:1px;
			float:left;
			padding-top:0;
		}
		
	#nav_projets li{
		display:inline-block;
		padding-right:5%;
	}
	
	
	#liste li img{
		width:150%;
	}
	
	
	#projet_web #liste li img{
		width:120%;
		max-width:none;
	}
	
	#line_top {
		width:10%;
	}
		
	#line_center {
		width:55%;
	}
	
	.next{
	 	font-size:11px;
 	}
	
	#zone_legende .legende_travaux p, #zone_legende .legende_travaux h4{
		font-size:11px;
	}
	
	#contact_page .linkedin{
			right:27%;
	}
	
	
	/*-------Projets---------*/

			#trav_web{
				position:relative;
				margin-top:0px;
				width:100%;
				height:280px;
				float:left;
			}
			
			#trav_acc{
				position:relative;
				width:100%;
				float:left;
				top:0;
			}
			
			#trav_id{
				position:relative;
				width:100%;
				float:left;
			}
	
	#liste_pages{
		height:auto;
	}
	
	#p1_1, #p1_2, #p1_3, #p1_5{
		width:160px;
		height:190px;
	}
	
	#p1_4{
		width:320px;
		height:190px;
	}
	
	#p1_6 ,#p1_8{
		width:160px;
		height:166px;
	}
	
	#p1_7, #p1_9{
		width:320px;
		height:166px;
	}
	
	#zone_legende{
		top:355px;
		
	}
	
	#player{
	width:450px;
	height:300px;
}

}
	
	@media screen and (max-width:470px) {
	
	#projet_web #liste li{
	width:400px;
}	
	#travaux_page {
	font-size:100%;
	}
	
	.web{
		padding-left:7%;
	}
	
	#visionneuse_web{
		height:360px;
	}
	
	#travaux_web .next{
		right:10%;
		bottom:-10px;
	}
	
	#liste_page_web li{
		width:320px;
		left:inherit;
		height:360px;
	}
	
	#liste_page_web{
		height:360px;
	}
	
	.imgweb1{
		margin-left:10%;
		width:85%;
		height:auto;
		margin-top:0;
	}
	
	#part1 .text_multi{
		margin-left:5px;
		padding:13px;
		margin-top:0px;
	}
	
	#part1{
		top:0;
	}
	
	#part2{
		top:-20px;
	}
	
	.imgweb2{
		height:auto;
		width:75%;
		margin-left:20%;
	}
	
	#part2 .text_multi{
		margin:0px 0 0 30px;
		padding:12px;
		margin-top:0;
		width:90%;
	}
	
	#part3{
		left:inherit;
		top:inherit;
		
	}
	
	#part3 .text_multi{
		margin:5% 0 0 13%;
		padding:9px;
		width:80%;
	}
	
	.imgweb3{
		height:auto;
		width:83%;
		margin-top:0;
		margin-left:10%;
	}
	
	#player_web{
		width:260px;
		height:198px;
		margin:0 0 0 5%;
	}
	
	#travaux_page{
	font-size:100%;
	}
	
	
}
	
@media screen and (max-width:320px) {
	
	#projet_web #liste li{
	width:320px;
}	
	
	#nav li {
			padding-right:2%;	
		}
		
	#nav_projets li{
		padding-left:3%;
		padding-right:inherit;
	}
	
	.imgweb1{
		margin-left:5%;
	}
	
	#part1 .text_multi{
		margin-left:0;
	}
	
	.imgweb2{
		margin-left:9%;
	}
	
	#part2 .text_multi{
		margin:0;
		width:80%;
	}
	
	#part3 .text_multi{
		margin:5% 0 0 9%;
		width:80%;
	}
	
	.imgweb3{
		margin-left:3%;
	}
	
	#nav_projets .web{
		padding-left:10%;
	}

	#contact_page .linkedin{
			right:30%;	
		}
	#player{
	width:300px;
	height:170px;
}
	
}