/* GENERAL
************************************************************************/

body {
  font-size: 14px;
	background: none;
	height: 100%;
}

body.nav {
	overflow: hidden;
	height: 100vh;
	
}

#content {
	width: 100vw;
	min-height: 80vh;
	}

#wrapper {
  width: 100vw;
}

.gutter, 
#accueil #content .gutter,
#content>.gutter {
  padding: 5vh 5vw;
  width: 90vw;
  margin: 120px 0 0 0
}

#right-col, 
#right-col.vertical-header,
#left-col {
	width: 100%;
	margin: 0;
}

#right-col {
  width: 100%;
}

#right-col.vertical-header .gutter {
  width: 100%;
}

#right-col h3 {
	margin: 0 0 .5em 0;
	
}

.gutter {
  padding: 10vh 5vw;
}
#right-col .gutter {
    padding: 0;
    margin: 0;
    width: 90vw;
}

#full-width {
  width: 100%;
  float:left;
}

#full-width h3 {
  width: 100%;
  float:left;
  margin: 0 0 .5em 0;
  text-align: left;
}


#content table td {
  display: block;
  width: 80vw;
  float:left;
}

#musee.equipe #content table td {
	display: block;
	width: 100vw;
	float:left;
	text-align: left;
	}

#content p {
  width: 80vw;
}

/* EN-TETE
************************************************************************/
#header {
	height: 80px;
	/*width: 100vw;*/
	position: fixed;;
	z-index: 2000;
	margin: 0;
	padding: 0;
	left:0;
	top:0;
	background: url(/img/mobile-header.png) no-repeat;
	background-size: contain;
	float:none;
	transition: none;
}

#header.shadow{
	box-shadow: none;
}

/* LANGUES
************************************************************************/
#lang-bar {
	display: none;
}


.nav #lang-bar {
	position: fixed;
	top:20px;
	left: 5vw;
	display:block;
	z-index: 2000;
	color:rgba(255,255,255,.8);
	margin: 0;
	padding: 0;
}

.nav #lang-bar a{
	color:rgba(255,255,255,.8);
	font-size: 14px;
}

/* TOOLBAR
************************************************************************/
.nav #toolbar {
	/*display: absolute;*/
	
  position: absolute;
	top:68vh;
	left:5vw;
	z-index: 2000;
	float:none;
	margin: 0;
	font-size: 14px;
	text-align: left;

	width: 90vw;
}

.nav #toolbar li {
	padding: .5em 0;
	margin: 0;
	border-bottom:1px dotted rgba(255,255,255,.5);
}

.nav #toolbar li a {
	color:rgba(255,255,255,.5);
}

#nav.opened #toolbar {
	left:-100vw
}

#sidebar.mobile {
	display: block;
 margin-top: 10px;
	text-align: center;

	}

#sidebar.desktop {
	display: none;
	}

/* NAVIGATION
************************************************************************/
#btn-menu {
  position: fixed;
  top:20px;
  right:10px;
  z-index: 10000;
	color:#666
	
}

#btn-menu:before {
	font-family: FontAwesome;
	content: "\f0c9";
	display: inline-block;
	padding-right: 3px;
	vertical-align: top;
}

.nav #btn-menu {
	color:white
}

.nav #btn-menu:before {
	font-family: FontAwesome;
	content: "\f00d";
	display: inline-block;
	padding-right: 3px;
	vertical-align: top;
}


#nav {
  height: 100vh;
  margin:0;
  padding: 0;
  position: fixed;;
  top:0;
  left:0;
  display: none;
	transition: .5s all ease;
}

#nav.opened {
	left:-100vw;
	top:0;
}

.nav #nav {
  display:block;
}

.f #nav, .d #nav, .e #nav {
  background: rgba(84,132,141,0.95);
}

#nav li {
  background: none;
  width: 90vw;
  margin: 0 5vw ;
  padding: 0;
  font-size: 16px;
  border-bottom:1px dotted rgba(255,255,255,.5);
	height: auto;

}

#nav>li>a, .sub li a{
	display:block;
  width: 100vw;
  margin: 0;
  padding: .7em 0 0;
  color:white;
  text-transform: uppercase;
}

#nav>li.selected>a, #nav  li.selected a {
	font-weight: 900;
	color:#FFA31E;
}

#nav a span {
  display: block;
  padding: 0;
  margin:0;

}

#nav, .sub {
	padding-top: 10vh;
}

#nav .sub {
  width: 100vw;
  height: 100vh;
	background: rgba(84,132,141,0.95);
  margin:0;

  position:absolute;
  top:0;
  left:100vw;
	display: block;
}

#nav .drop {
	background: url(/img/right-arrow.png) no-repeat;
	background-position: right center;
	background-size: .5em;
}

#nav .sub li {
	padding: .5em 0 .7em;
}

#nav .sub li.btn-back {
	color:rgba(255,255,255,.4);
	font-weight: 100;
	font-size: 14px;
	border-bottom:0;
	text-transform: uppercase;
	margin-bottom: 1.5em;
	padding-left: 1em;
	background: url(/img/left-arrow.png) no-repeat;
	background-position: left center;
	background-size: .5em;
}

#nav .sub li, #nav .sub li a {
	color:white
}



#nav  li.drop:hover ul {
	display:none;
}

@media screen and
			 (device-width: 320px) and
			 (device-height: 568px) and
			 (-webkit-device-pixel-ratio: 2){
	
	.nav #toolbar {
		font-size: 11px;
		top:65vh;
		
		}
	
	#nav li {
		font-size: 13px;
		margin:0 2vh;
		}
	
	#nav .sub li.btn-back {
		padding-bottom: 0;
		margin-bottom: 1em;
		}
	
	#nav>li>a, .sub li a{
		display:block;
		width: 100vw;
		margin: 0;
		padding: .2em 0 0;
		color:white;
		text-transform: uppercase;
		}
	
	}

#m-musee,
#m-expositions,
#m-agenda,
#m-collections,
#m-infos_pratiques,
#m-accueil_publics,
#m-amis
{
  display: block;
  left:0px;
  height: auto;
  width: 100%;
}


/* ACCUEIL
************************************************************************/
#accueil-splash {
	width: 100%;
}

#home-image {
	width: 100%;
}

#actualite h3 {
	width: 100%;
	text-align: left;
	font-weight: bold
}

#actualite div {
	width: 100%;
	padding: 0;
	background: white;
	margin: 0;
}

/* CONTENU
************************************************************************/

div.header-image {
  width: 90vw;
  height: auto;
  margin: 0;
}

div.header-image img {
  width: 100%
}  

#two-cols-container .legende {
  width: 90vw;
  margin: 0;
}

#one-col-container img {
	width: 100%;
}

/* EXPOS */

#expositions.en_permanence #right-col {
    width: 100%;
    margin: 0;
}

/* AGENDA */

.agenda-item.closed {
    height: auto;
    overflow: visible;
}

.agenda-item img {
    width: 100%;
}

.agenda-item .right-col {
    width: 100%;
    margin: 0;
}

span.link {
    display: none;
}

.form {
    width: 100%;
    margin: 0;
}

.form input {
    width: 100%;
    height: 1.6em;
}

/* EXPOS
************************************************************************/
#right-col.expo-list {
	width: 100%;
	margin: 0;

}

#right-col.expo-list img {
	width: 60vw;
	float:none;
	}

.exposition-header {
	width: 80vw;
	margin: 0;
	background: none;
	}


.expositions-item.small {
	width: 100%;
	padding: 20px 0px 0
}

.exposition-header .titre {
	padding: 0 0 0 0;
	margin: 30px 0 0 0;
	padding: 0;
	float:left;
	width: 90vw
}
.expositions-item .affiche {
    width: 90vw;
    float:left;
    margin-bottom: 20px;
}

.expositions-item .affiche img{
  width: 50vw;
    float:left;
}

.exposition-header .soustitre, .exposition-header .dates {
  width: 100%;
  float:left;
		margin: 10px 0 10px 0;
	
	}
#content .expositions-item h2 {
  width: 90vw;
  float:left;
  padding: 0;
  margin: 0 0em 2em 0;
  text-align: center
  }
#expositions.precedentes #left-col, #expositions.a_venir #left-col {
	display:none
	}

#expositions.precedentes #left-col.list, #expositions.a_venir #left-col.list {
	display: block;
	}

#expositions.precedentes #right-col, #expositions.a_venir #right-col {
	display:none
	}

#expositions.precedentes #right-col.detail, #expositions.a_venir #right-col.detail {
	display: block;
	}

#left-col.expo-list a.sel {
	font-weight: normal;
	font-size: 100%;
	}

/* COllECTIONS
************************************************************************/
.collection-item, .collection-item img {
	width: 100%;
}

.collection-item {
	margin-bottom: 40px;
	font-size: 14px;
	text-align: center;
}

.child {
	max-width: 90vw;

}

.fancybox-title-float-wrap .child {
	white-space: normal;

}

/* LOGIN
************************************************************************/
#frmLogin {
	margin: 40px auto;
	}

/* PIED DE PAGE
************************************************************************/
#footer {
  display: block;
  background: #aaaaaa;
  width: 90vw;
  float:left;
  margin: 40px 0 0;
  padding: 5vw;
}

#footer h5 {
  margin-bottom: 1em;
  color:#333
}

#footer p {
  font-size: 80%;
  color:#666;
  line-height: 1.3em
}