article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
/* Page */ 
html { 
  font-size: 100%;
  line-height: 1.5;
} 

body {
	margin: 0;
	padding: 0;
	font-family: "Comfortaa", "Century Gothic", "Lucida Grande", "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #d35400;
	background: #FAFAFA;
	letter-spacing: 1px;
	-webkit-font-smoothing: antialiased;
} 

em { 
  font-style: italic; 
} 

strong { 
  font-weight: bold; 
} 

a{
	text-decoration: none;
}

li{
	list-style: none;
}

header h1, header h2{
	display: none;
}

h1 a, h1 a:visited {
  color: white;
  text-decoration: none;
}

h1 a:hover, h1 a:focus {
  text-decoration: none;
  outline: none;
  text-shadow: 0px 0px 15px #0076ff; 
}

h2 { 
  font-size: 19px; 
}

/*   Blocs */


#wrapper {  
  height: 100%;
}

/* Header */ 

header{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
}

nav{
  width: 1000px;
	margin-left: auto;
	margin-right: auto;
  text-transform: uppercase;
  list-style: none;
}

nav a.lien_cv, nav a.lien_contact, nav a.lien_site, nav a.lien_dimension, nav a.lien_twitter, nav a.lien_facebook {
	color: #2980b9;
}

nav a:hover{
	color: #d35400; 
}

nav ul {
	margin: 0;
	padding: 0;
}

nav ul li{
	display: inline-block;
	margin-left: 5px;
	width: 150px;
	/*float: left;*/
}

nav ul li a{
	display: block;
	width: 110px;
	font: 20px "Comfortaa", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
	font-weight: bold;
}

nav a:hover, nav a:focus {
  color: #d35400;
  text-decoration: none;
}

/* Conteneur */ 

#conteneur {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	clear: left;
}

#text-accueil{
	left: 75px;
	width: 100%;
	font-size: 28px;
	text-transform: uppercase;
	text-align: center;
	margin-top: 200px;
}

#text-accueil h2 { 
  font-weight: normal;
  font-size: 70px; 
  line-height: 0.8;
  color: #2980b9;
  text-transform: uppercase;
  margin-bottom: 20px;
}

#hors-conteneur{
	background-color: #d35400;
	color: white;
	text-align: center;
	margin: 20px 0;
	/*padding: 20px 0;*/
}



/* réalisation sites */

section.sites{
	width: 980px;
	margin-top: 300px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 40px 0;
	font-size: 40px;
}

div.realisation{margin: 0 auto; width: 600px;}

div.realisation figure  {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 20px 60px 10px 0;
  background: rgba(255,255,255,0.2);
  border: 12px solid #2980b9;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 1px 1px 5px black; 
  -webkit-box-shadow: 1px 1px 5px black; 
  box-shadow: 1px 1px 5px black;
  -moz-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  position: relative;
}

div.realisation p.desc_site1{
	/*position: absolute;
	margin-top: -210px;
	left: 710px;*/
	width: 250px;
	float: left;
	margin-top: 40px;
}

div.realisation p.desc_site2{
	/*position: absolute;
	margin-top: -210px;
	left: 710px;*/
	width: 250px;
	float: left;
	margin-top: 40px;
}

div.realisation p.desc_site3{
	/*position: absolute;
	margin-top: -210px;
	left: 710px;*/
	width: 250px;
	float: left;
	margin-top: 40px;
}

section div.realisation div#site3{
	/*position: absolute;*/
	left: 850px;
	right: 500px;
	top: 150px;
}

/*  site pharma  */

section.slider p{
	margin-bottom: 30px;
}

section.slider p.desc{
	width: 150px;
}


section.slider a{
	margin-right: 100px;
}

section.slider img{
	margin-bottom: 5px;
}

section.slider li{
	float: left;
}

section.slider ul{
	margin-left: 150px;
}

/* CV */

section.cv{
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	padding: 40px 0;
}

section.cv h2{
	font-size: 70px;
	padding-bottom: 40px;
}

article.competence table{
	text-align: right;
}

article.competence table td + td{
	padding-left: 10px;
}

article.competence h3, article.experience h3, article.formation h3{
	color: #2980b9;
	font-size: 28px;
}

article.competence, article.experience, article.formation{
	font-size: 20px;
	margin: 0 auto 40px auto;
	width: 600px;
}

article.competence ul, article.experience p.fin2para, article.formation p.fin2para{
	margin-bottom: 20px;
}

/* Contact */

#conteneur section.contact form{
	margin-top: 50px;
	margin-left: 15px;
}

/* Ecran plus petit */
@media (max-width: 1000px) {
	#conteneur {width:660px;}
	nav, header {width: 650px; margin-left: 10px;}
	section.sites{width: 650px; font-size: 20px;}
	section.cv{width: 650px; font-size: 20px;}
	section.cv h2{font-size: 50px;}
	/*div.realisation{width: 600px;}
	article.competence, article.experience, article.formation{width: 600px;}*/
}

/* Smartphone */
@media handheld, only screen and (max-width: 685px), only screen and (max-device-width: 685px) {
	#conteneur {width:auto;margin:0; overflow:hidden;}
	nav {width: 550px; margin-left: 10px;}
	section.sites{width: auto;}
	section.cv{width: auto;}
	div.realisation{width: auto;}
	article.competence, article.experience, article.formation{width: auto;}
	div.realisation p.desc_site1, div.realisation p.desc_site2, div.realisation p.desc_site3{font-size: 20px; width: auto;}
}