body{
	background-color:#cc2020;/*#f4f7fa*/
	font-family:'helvetica','sans-serif';
}


#conteneur{
	margin:0 auto;
	width:85%;  /* 960/1200*100 */
}

/* ------------------------------------------- header ------------------------------------------- */

header{
	background-color:#000;
	height:190px; /* 170/960*100 */
	width:100%;
	position:relative;
	margin:0 auto 100px auto;
	
}

.logo{
	margin:14px 0 29px 80px;
	width:32.41666666%; /* 389/1200*100 */
	height:auto;
	min-width:230px;
	max-width:410px;
}

#menu{
	/*display:inline-block;*/
	position:absolute;
	top:77px;
	right:239px;
	width:253px;
}

nav a{
	text-decoration:none;
	color:#f4f7fa;
	margin:30px 0 0 0; 
}

#menu ul li{
	display:inline;
}

section p:hover{
	color:#696969;
}

.work{
	padding-right:10px;
	border-right:solid 1px rgba(255,255,255,0.2);
}

.work{
	margin-left:12.1875%;
}

.about{
	padding-left:5px;
}

.work:hover, .about:hover{
	color:#d9262e;
}

#reseaux{
	width:100px;
	position:absolute;
	top:68px;
	right:80px;	
}

/*#reseaux .viadeo:hover{
	background:url(../img/viadeo-survol.png);
}*/

/* ------------------------------ formulaire ------------------------------------ */

#name, #email, textarea{
	border:1px solid black;	
	padding:6px;
	width:300px;
	height:20px;
	margin-bottom:3px;
	box-shadow:rgba(0,0,0,0.3)0px 0px 8px;
	moz-box-shadow:rgba(0,0,0,0.3)0px 0px 8px; /* mozilla */
	-webkit-box-shadow:rgba(0,0,0,0.3)0px 0px 8px; /* chrome, safari */
}

textarea{
	width:400px;
	height:60px;
	margin-left:100px;
}

#form{
	margin-top:20px;
	padding:10px;
}
#form input{
	margin-left:100px;
}

#form label{
	color:#FFF;
	float:left;
	width:10px;
}

#envoyer{
	width:auto;
	padding:10px;
	cursor:pointer;
}

/* ------------------------------ formulaire ------------------------------------ */

/* ------------------------------------------- footer ------------------------------------------- */

footer{
	margin-top:100px;
	background-color:#000;
	width:100%;
	height:100px;
	clear:both;
}

footer p{
	background-color:#000;
	color:#FFF;
	height:50px;
	padding:30px 0 0 20px;
	font-size:16px;
	text-align:center;
	font-size:15px;
	line-height:50px;
}

@media screen and (max-width:960px){
	#menu{left:170px;top:130px;}		
}

@media screen and (max-width:768px){ /*(condition) {règles css}*/ /*768px = tablettes */
	#reseaux{right:20px;top:120px;}
	
} 

@media screen and (max-width:640px){
	#menu{left:10px;top:130px;}	
	#reseaux{right:10px;top:120px;}
	.work{margin-left:5px}
}

@media screen and (max-width:560px){
	.logo{margin-left:50px}		
}