/* CSS Document */
body {
background:#000000;
color: #999999;
margin-top:20px;
}

a {
color:#dddddd;
text-decoration:none;
}

a:hover {
color:#ffffff;
}

#container-top, #container-top2 {
width:960px;
margin:auto;
margin-bottom:20px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}

#container-top {
background: url(../images/forest1.jpg) #111111 no-repeat top center;
min-height:540px;

}

#container-top2 {
background: url(../images/forest1.jpg) #111111 no-repeat center -90px;
min-height:340px;
}

.grain, .grain2 {
background: url(../images/grain2.png);
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}

.grain { min-height:540px; }
.grain2 { min-height:340px; }

.smoke {
background: url(../images/smoke.png) repeat-x;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}

#container-top #header { padding-top:470px; }

#container-top2 #header { padding-top:296px; }

#header { width:960px; }

.flex-nav {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: center;/*space-around;*/
  
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  /*background: tomato;*/
  padding: 5px;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

.flex-item2 {
  /*background: tomato;*/
  padding: 5px;
  width: 120px;
  height: 20px;
  margin-top: 10px;
  line-height: 20px;
  color: white;
  font-size:18px;
  font-family: 'Archivo Narrow', sans-serif;
  text-align: center;
}

.flex-photo {
  /*padding: 5px;*/
  height: 188px;
  /*margin-top: 10px;*/
  text-align: center;
}
.musee-img {
	padding:4px;
	padding:4px;
}

.museetitle {
	font-size:32px;
	font-family: 'Archivo Narrow', sans-serif;
	text-align:center;
	margin-top:12px;
	padding:4px;
	padding:4px;
}

.museeannee {
	font-size:24px;
	font-family: 'Archivo Narrow', sans-serif;
	text-align:center;
	margin-top:12px;
	padding:4px;
	padding:4px;
}

.museeannee1 {
	font-size:24px;
	font-family: 'Archivo Narrow', sans-serif;
	text-align:center;
	margin-top:6px;
	padding:4px;
	padding:4px;
}

#header #nav {
opacity:0.8;
}

#header #nav li a {
margin: 0 4px;
margin-left:10px;
padding-left:10px;
margin-right:10px;
padding-right:10px;
}

#header #nav li a:hover {
color:#ffffff;
background: rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.3);
}

.nav-img {
	height:40px;
}

#warp {width:940px;margin-left:auto;margin-right:auto;}
#contenu {
width:940px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
padding:10px;
/*min-height:300px;*/
}
#contenumusee {
min-width: 940px;
margin:20px;
padding:10px;
/*min-height:300px;*/
}

#contenu2c {
width:840px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
padding:10px;
/*min-height:300px;*/
}

#contenu3c {
width:940px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
padding:10px;
/*min-height:300px;*/
}

#video {
width:600px;
margin-left:auto;
margin-right:auto;
padding:30px;
border: #333333 dotted 1px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}

#clips {width:752px; margin-left:auto; margin-right:auto;}
#clips .clip { float:left; width:360px; height:203px; margin:8px;}

#lesincendiaires2 { background: url(../images/lesincendiaires.jpg) center top no-repeat; width:674px; height:320px; margin-left:auto; margin-right:auto;}
#lesincendiaires { width:674px; height:100px; margin-left:auto; margin-right:auto;}
#lesincendiaires #logo {background: url(../images/lesincendiairesl.png) center 0px no-repeat; width:674px; height:320px; margin:auto; }
#videoclips {background: url(../images/clips.png) center 0px no-repeat; width:313px; height:74px; margin:auto; padding-bottom:10px; }
#biographie {background: url(../images/biographie.png) center 0px no-repeat; width:313px; height:63px; margin:auto; padding-bottom:10px; }
#musee {background: url(../images/musee.png) center 0px no-repeat; width:188x; height:74px; margin:auto; padding-bottom:10px; }

#bio {width:752px; margin-left:auto; margin-right:auto;}

#bio p {font-family: 'Archivo Narrow', sans-serif; margin-bottom:10px; font-size:17px; text-align:justify; line-height:20px; width:680px; margin-left:auto; margin-right:auto;}
#bio p em{font-family: 'Archivo Narrow', sans-serif; font-style:italic;}
#bio p strong{font-family: 'Archivo Narrow', sans-serif; font-weight:700;}

.clear {clear:both;}

#footer {
color:#505050;
width:960px;
margin:auto;
text-align:center;
/* height:16px;*/
/* background:#121212;*/
font-size:12px;
padding:10px;
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
}

#footer a {
color:#a0a0a0;
}

#footer a:hover {
color:#dddddd;
}