* {
	margin : 0;
	padding : 0;
	color : black;
	text-decoration : none;
	list-style : none;
	font-family: Verdana;
}
.hidden {display : none;}

#container{
	background-image: url("img/david_bowie-life_on_mars-album_cover.jpg");
	background-position: center;
	background-size: cover;
}
section {
	position : relative;
	margin:auto;
	background-color: rgba(255,255,255, 0.95);;
}
button {
	border : none;
	background: none;
}
.nav {
	position : absolute;
}


figure, figcaption, figcaption> div,
#container, #menu li:nth-child(5), #dates ul, #artistes ul,
#oeuvres ul, #oeuvres li.active figure, 
#partenaires> ul, #partenaires> div  {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
  	display: flex;
}

/*Mise en forme de l'icone [///] */
div.slash-icon {
	display: inline-block;
	position: relative;
}
div.slash-icon> span {
	font-weight:999;
	font-size:1.6em;
}
div.slash-icon> span:first-child {color:#99D1B8;}
div.slash-icon> span:nth-child(2), div.slash-icon> span:nth-child(3) {
	position : absolute;
	top : 0;
}
div.slash-icon> span:nth-child(2) {
	left:-0.25em;
	color:#A27CAD;
}
div.slash-icon> span:nth-child(3) {
	right:-0.25em;
	color:#8ECC2D;
}
/* Home **************************************************************************************************/
#home {
	background-color:white;
	padding:1em;
}
#home figure {cursor:pointer;}

/* Menu ************************************************/
#menu {
	background-color : rgba(255,255,255, 0.5);
	height : auto;
	padding-top: none;
}
#menu.active {	
	font-size: 1.2em;
	background-color : rgba(255,255,255, 0.9);
}
#menu ul {padding: 1em;}
#menu li, #artistes li {margin: 0.2em 0;}
#menu li:nth-child(5) {align-items: center;}
#menu li:nth-child(5) span:last-child {margin-left:.4em;}
#menu span:first-child {
	font-size: 1.3em;
	margin-left : 0;
	margin-right: .5em;
	transition : margin-left margin-right .3s;
}
#menu li.active span:first-child {
	margin-left : .5em;
	margin-right: 0;
}
#menu div {
	top:.5em;
	right:.5em;
}
#menu.active div {
	top:1em;
	right:1em;
}
#menu img {
	width : 1.5em;
	height : 1.5em;
}

/* Dates ************************************************************************/
#dates {max-height:90%;}
#dates p {
	text-align : center;
	margin-top:1em;
}
#dates p img {min-width:50%;}
#dates p span {
	font-size:1.5em;
	font-weight:normal;
	margin:1em;
	margin-top:2em;
}
#dates p span.unactive {
	font-size:1em;
	font-weight:lighter;
}
#dates ul {
	flex-direction : column;
	justify-content : center;
	width: auto !important;
}
#dates li {margin:1em 2em;}
#dates li> div:first-child{font-size:1.4em;}
#dates li> div:nth-child(2) {display : flex;}
#dates li> div:nth-child(2) div {font-style: oblique;}
#dates div.slash-icon {margin: 0 1em 0 2em;font-size :.6em;}
#dates li span.loc, #dates li span.feat {font-size :.8em;font-style: normal;}
#dates li span.feat span {margin:0 .7em;}
#dates li span.feat span:first-of-type {margin-left:0;}
#dates li span.feat span:nth-of-type(2), #dates li span.feat span:nth-of-type(3) {font-weight:999;}
#dates li span.feat span:nth-of-type(2) {color:#A27CAD;}
#dates li span.feat span:nth-of-type(3) {color:#8ECC2D;}

/* Oeuvres ************************************************************************/
#oeuvres {background-color: rgba(255,255,255, 0.8);}
#oeuvres ul {
	-webkit-flex-wrap : wrap;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	justify-content: center;
	align-items : center;
	position: relative;
}
#oeuvres ul.active {
	justify-content: flex-end;
	align-items : flex-end;
}
#menu li, #oeuvres li, #oeuvres button {	
	cursor : pointer;
}
#oeuvres li.active {
	position : absolute;
	cursor : default;
	top: 0;
}
#oeuvres li.active figure {
}
#oeuvres li.related {
	z-index : 3;
}

#oeuvres li:first-child div {
	background-image : url("img/parknrock-logo-carre.png");
	cursor : default;
}
#oeuvres li> div {
	background-position : center;
	background-size : cover;
	margin : auto;
	transition : width .3s;
}
#oeuvres span.italic {
	font-style : italic;
}
#oeuvres figure button {
	position : absolute;
	right : 0;
}
#oeuvres figcaption> div:first-child  {width:100%;}
#oeuvres figcaption {
	flex-direction : column;
	align-items: center
}
#oeuvres figcaption> div:first-child div, figcaption> div:nth-child(2) {
	text-align : center;
	margin : auto;
}
#oeuvres figcaption> div:first-child div {flex:2;}
#oeuvres figcaption> div:nth-child(2) {align-items: center;}
#oeuvres figcaption> div:nth-child(2), figcaption> div:nth-child(3) {flex:1;}
#oeuvres hr {
	width : 40%;
	margin : 1em auto;
}
#oeuvres a {margin-left : .5em;}
#oeuvres .slash-icon {margin: 0 .5em;}

/* Artistes *********************************************************************/
#artistes {
	min-width: 50%;
	text-align: center;
}
#artistes ul {
	flex-direction :column;
	justify-content : space-around;
}
#artistes p> span {
	margin-left : 1em;
	margin-right : .6em;
}
#artistes li a {font-style: oblique;}


/* PArternaires ********************************************************************/
#partenaires> ul {
	flex-wrap : wrap;
	justify-content : center;
}
#partenaires> ul li {text-align : center;}
#partenaires> ul div {
	background-color:tomato;
	height:100%;
}
#partenaires> div {margin-left : 15%;}
#partenaires div ul {flex: 1.5;}
#partenaires div li {
	list-style:disc;
	list-style-position: inside;
	margin: .8em 0;
}
#partenaires div li:first-child {list-style:none;}
#partenaires div div {
	flex: 1;
	padding-top: 2%;
}
#petitbain {background-color:lightblue;}



/* Corrections IE.10+  ******************************************************************************************** */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    section { margin : 5% auto; }
	#menu {
		margin-top:10%;
		margin-left:60%;
		margin-bottom:24%;
	}
	#oeuvres figcaption> div:first-child div {height:100%;}
	#oeuvres figcaption> div:nth-child(2) {justify-content:center;}
	#partenaires {
		width : 100%;
		height : 100%;
		margin : auto;
	}
}	

/* Media queries *******************************************************************************************************/
@media screen {
	#home img {max-height:100px;}
	#dates, #oeuvres, #partenaires, #artistes {padding-top : 5px;}
	#dates ul, #oeuvres ul, #partenaires> ul, #partenaires> div {padding : 5px;}
	#oeuvres> div.nav, #partenaires button.nav, #artistes button.nav {
		top:-5px;
		right : 10px;
	}
	#oeuvres li, #oeuvres li> div, #oeuvres figcaption img, #petitbain {
		width : 50px;
		height: 50px;
	}
	#oeuvres li.active {
		top : 5px;
		left : 5px;
	}
	#oeuvres li, #partenaires> ul li {margin : 5px;}
	#oeuvres figure> img, #oeuvres figcaption {
		width : 170px;
		height : 170px;
		font-size : .6em;
	}
	#oeuvres figure button {
		top :-15px;
		right : 0;
	}
	#partenaires {max-width: 80%}
	#partenaires> ul li {height: 50px;}

	#dates button, #oeuvres button, #oeuvres figcaption> div:first-child div, #oeuvres figcaption a,
	#artistes a, #artistes button, #partenaires button {font-size : 1.4em;}
	#partenaires> div {font-size : 1em;}
}
@media screen and (orientation:landscape) {
	#menu {margin-left : 60%;}
	#oeuvres, #partenaires, #artistes {min-height:190px;}
	#oeuvres ul, #artistes ul {
		width: 360px;
		min-height : 180px;
	}
	#oeuvres li.active, #oeuvres figure {
		width: 350px;
		height : 170px;
	}
	#oeuvres figure {flex-direction:row;}
	#oeuvres figure> img {margin-right:5px;}
	#oeuvres figcaption {margin-left:5px;}
	#partenaires> ul {height : 60%;}
	#partenaires> ul li {flex-basis:30%;}
}
@media screen and (orientation:portrait) {
	#menu {margin: auto;}
	#oeuvres, #partenaires, #artistes {min-height:370px}
	#oeuvres ul, #artistes ul  {
		min-width: 180px;
		min-height : 360px;
	}
	#oeuvres li.active, #oeuvres figure {
		width: 170px;
		height : 350px;
	}
	#oeuvres figure {flex-direction:column;}
	#oeuvres figure> img {margin-bottom:5px;}
	#oeuvres figcaption {margin-top:5px;}
	#partenaires> ul li {width :45%;}
	#partenaires> div {
		margin-left: 5%;
    	flex-direction: column;
    }
}


/*@media screen and ((orientation: landscape) and  (min-height: 280px) and (min-width:560px))
,((orientation: portrait) and (min-width: 280px) and (min-height:560px)) {
	
}*/
@media screen and (orientation:landscape) and (min-height: 280px) and (min-width:560px) {
	#home img {max-height:140px;}
	#dates, #oeuvres, #partenaires, #artistes {padding-top : 7px;}
	#dates ul, #oeuvres ul, #partenaires> ul, #partenaires> div {padding : 7px;}
	#dates button.nav, #oeuvres> div.nav, #partenaires button.nav, #artistes button.nav {
		top:-3px;
		right : 12px;
	}
	#oeuvres li, #oeuvres li> div, #oeuvres figcaption img, #petitbain {
		width : 70px;
		height: 70px;
	}
	#oeuvres li.active {
		top : 7px;
		left : 7px;
	}
	#oeuvres li, #partenaires> ul li {margin : 7px;}
	#oeuvres figure> img, #oeuvres figcaption {
		width : 238px;
		height : 238px;
		font-size : .6em;
	}
	#oeuvres figure button {
		top :-18px;
		right : 0;
	}
	#oeuvres, #partenaires, #artistes {min-height:266px;}
	#oeuvres ul, #artistes ul {
		width: 504px;
		min-height: 252px;
	}
	#oeuvres li.active, #oeuvres figure {
		width: 490px;
		height : 238px;
	}
	#oeuvres figure> img {margin-right:7px;}
	#oeuvres figcaption {margin-left:7px;}
}
@media screen and (orientation:portrait) and (min-width: 280px) and (min-height:560px) {
	#home img {max-height:140px;}
	#dates, #oeuvres, #partenaires, #artistes {padding-top : 7px;}
	#dates ul, #oeuvres ul, #partenaires> ul, #partenaires> div {padding : 7px;}
	#dates button.nav, #oeuvres> div.nav, #partenaires button.nav, #artistes button.nav {
		top:-3px;
		right : 12px;
	}
	#oeuvres li, #oeuvres li> div, #oeuvres figcaption img, #petitbain {
		width : 70px;
		height: 70px;
	}
	#oeuvres li.active {
		top : 7px;
		left : 7px;
	}
	#oeuvres li, #partenaires> ul li {margin : 7px;}
	#oeuvres figure> img, #oeuvres figcaption {
		width : 238px;
		height : 238px;
		font-size : .6em;
	}
	#oeuvres figure button {
		top :-18px;
		right : 0;
	}
	#oeuvres, #partenaires, #artistes {min-height:518px}
	#oeuvres ul, #artistes ul {
		min-width: 252px;
		min-height : 504px;
	}
	#oeuvres li.active, #oeuvres figure {
		width: 238px;
		height : 490px;
	}
	#oeuvres figure> img {margin-bottom:7px;}
	#oeuvres figcaption {margin-top:7px;}
}

/*
@media all and ( (min-height: 400px) and (min-width:800px) and (orientation: landscape) ) or 
( (min-width: 400px) and (min-height:800px) and (orientation: portrait) ) {
	
}*/
@media screen and (orientation:landscape) and (min-height: 400px) and (min-width:800px) {
	#home img {max-height:200px;}
	#dates, #oeuvres, #partenaires, #artistes {padding-top : 10px;}
	#dates ul, #oeuvres ul, #partenaires> ul, #partenaires> div {padding : 10px;}
	#dates button.nav, #oeuvres> div.nav, #partenaires button.nav, #artistes button.nav {
		top:5px;
		right : 20px;
	}
	#oeuvres li, #oeuvres li> div, #oeuvres figcaption img, #petitbain {
		width : 100px;
		height: 100px;
	}
	#oeuvres li.active {
		top : 10px;
		left : 10px;
	}
	#oeuvres li, #partenaires> ul li {margin : 10px;}
	#oeuvres figure> img, #oeuvres figcaption {
		width : 340px;
		height : 340px;
		font-size : .8em;
	}
	#oeuvres figure button {
		top :-23px;
		right : 0;
	}
	#partenaires> ul li {height: 75px;}
	#oeuvres, #partenaires, #artistes {min-height:380px;}
	#oeuvres ul, #artistes ul {
		width: 720px;
		min-height: 360px;
	}
	#oeuvres li.active, #oeuvres figure {
		width: 700px;
		height : 340px;
	}
	#oeuvres figure> img {margin-right:10px;}
	#oeuvres figcaption {margin-left:10px;}
}
@media screen and (orientation:portrait) and (min-width: 400px) and (min-height:800px) {
	#home img {max-height:200px;}
	#dates, #oeuvres, #partenaires, #artistes {padding-top : 10px;}
	#dates ul, #oeuvres ul, #partenaires> ul, #partenaires> div {padding : 10px;}
	#dates button.nav, #oeuvres> div.nav, #partenaires button.nav, #artistes button.nav {
		top:5px;
		right : 20px;
	}
	#oeuvres li, #oeuvres li> div, #oeuvres figcaption img, #petitbain {
		width : 100px;
		height: 100px;
	}
	#oeuvres li.active {
		top : 10px;
		left : 10px;
	}
	#oeuvres li, #partenaires> ul li {margin : 10px;}
	#oeuvres figure> img, #oeuvres figcaption {
		width : 340px;
		height : 340px;
		font-size : .8em;
	}
	#oeuvres figure button {
		top :-23px;
		right : 0;
	}
	#partenaires> ul li {height: 75px;}
	#oeuvres, #partenaires, #artistes {min-height:740px}
	#oeuvres ul, #artistes ul {
		min-width: 360px;
		min-height: 720px;
	}
	#oeuvres li.active, #oeuvres figure {
		width: 340px;
		height: 700px;
	}
	#oeuvres figure> img {margin-bottom:10px;}
	#oeuvres figcaption {margin-top:10px;}
}


/*@media screen and ( ((min-height: 600px) and (min-width:1200px) and (orientation: landscape)) 
or ((min-width: 600px) and (min-height:1200px) and (orientation: portrait)) ) {
	
}*/
@media screen and (orientation:landscape) and (min-height: 600px) and (min-width:1200px) {
	#home img {max-height:300px;}
	#dates, #oeuvres, #partenaires, #artistes {padding-top : 15px;}
	#dates ul, #dates ul, #oeuvres ul, #partenaires> ul, #partenaires> div {padding : 15px;}
	#dates button.nav, #dates> div.nav, #oeuvres> div.nav, #partenaires button.nav, #artistes button.nav {
		top:12px;
		right : 30px;
	}
	 button {font-size :1em;}
	#oeuvres li, #oeuvres li> div, #oeuvres figcaption img {
		width : 150px;
		height: 150px;
	}
	#oeuvres li, #partenaires> ul li {margin : 15px;}
	#oeuvres figure> img, #oeuvres figcaption {
		width : 510px;
		height : 510px;
		font-size : 1em;
	}
	#oeuvres li.active {
		top : 15px;
		left : 15px;
	}
	#oeuvres figure button {
		top :-32px;
		right : 0;
	}
	#dates, #oeuvres, #partenaires, #artistes {min-height:570px;}
	#dates ul, #oeuvres ul, #artistes ul {
		width: 1080px;
		min-height: 540px;
	}
	#oeuvres li.active, #oeuvres figure {
		width: 1050px;
		height : 510px;
	}
	#oeuvres figure> img {margin-right:15px;}
	#oeuvres figcaption {margin-left:15px;}
}
@media screen and (orientation:portrait) and (min-width: 600px) and (min-height:1200px) {
	#home img {max-height:300px;}
	#dates, #oeuvres, #partenaires, #artistes {padding-top : 15px;}
	#dates ul, #oeuvres ul, #partenaires> ul, #partenaires> div {padding : 15px;}
	#dates button.nav, #oeuvres> div.nav, #partenaires button.nav, #artistes button.nav {
		top:12px;
		right : 30px;
	}
	button {font-size :1em;}
	#oeuvres li, #oeuvres li> div, #oeuvres figcaption img {
		width : 150px;
		height: 150px;
	}
	#oeuvres li.active {
		top : 15px;
		left : 15px;
	}
	#oeuvres li, #partenaires> ul li {margin : 15px;}
	#oeuvres figure> img, #oeuvres figcaption {
		width : 510px;
		height : 510px;
		font-size : 1em;
	}
	#oeuvres figure button {
		top :-32px;
		right : 0;
	}
	#oeuvres, #partenaires, #artistes {min-height:1110px}
	#oeuvres ul, #artistes ul {
		min-width: 540px;
		min-height: 1080px;
	}
	#oeuvres li.active, #oeuvres figure {
		width: 510px;
		height: 1050px;
	}
	#oeuvres figure> img {margin-bottom:15px;}
	#oeuvres figcaption {margin-top:15px;}
}


/*@media screen and ( ((min-height: 800px) and (min-width:1600px) and (orientation: landscape)) 
or ((min-width: 800px) and (min-height:1600px) and (orientation: portrait)) ) {
	
}*/
@media screen and (orientation:landscape) and (min-height: 800px) and (min-width:1600px) {
	#home img {max-height:400px;}
	#oeuvres, #partenaires, #artistes {padding-top : 20px;}
	#oeuvres ul, #partenaires> ul, #partenaires> div {padding : 20px;}
	#dates button.nav, #oeuvres> div.nav, #partenaires button.nav, #artistes button.nav {
		top:20px;
		right : 40px;
	}
	#oeuvres li, #oeuvres li> div, #oeuvres figcaption img {
		width : 200px;
		height: 200px;
	}
	#oeuvres li.active {
		top : 20px;
		left : 20px;
	}
	#oeuvres li, #partenaires> ul li {margin : 20px;}
	#oeuvres figure> img, #oeuvres figcaption {
		width : 680px;
		height : 680px;
	}
	#oeuvres figure button {
		top :-40px;
		right : 0;
	}
	#partenaires> ul li {height: 100px;}
	#oeuvres, #partenaires, #artistes {min-height:760px;}
	#oeuvres ul, #artistes ul {
		width: 1440px;
		min-height: 720px;
	}
	#oeuvres li.active, #oeuvres figure {
		width: 1400px;
		height : 680px;
	}
	#oeuvres figure> img {margin-right:20px;}
	#oeuvres figcaption {margin-left:20px;}
}
@media screen and (orientation:portrait) and (min-width: 800px) and (min-height:1600px) {
	#home img {max-height:400px;}
	#oeuvres, #partenaires, #artistes {padding-top : 20px;}
	#oeuvres ul, #partenaires> ul, #partenaires> div {padding : 20px;}
	#dates button.nav, #oeuvres> div.nav, #partenaires button.nav, #artistes button.nav {
		top:20px;
		right : 40px;
	}
	#oeuvres li, #oeuvres li> div, #oeuvres figcaption img {
		width : 200px;
		height: 200px;
	}
	#oeuvres li.active {
		top : 20px;
		left : 20px;
	}
	#oeuvres li, #partenaires> ul li {margin : 20px;}
	#oeuvres figure> img, #oeuvres figcaption {
		width : 680px;
		height : 680px;
	}
	#oeuvres figure button {
		top :-40px;
		right : 0;
	}
	#partenaires> ul li {height: 100px;}
	#oeuvres, #partenaires, #artistes {min-height:1480px}
	#oeuvres ul, #artistes ul {
		min-width: 720px;
		min-height: 1440px;
	}
	#oeuvres li.active, #oeuvres figure {
		width: 680px;
		height: 1400px;
	}
	#oeuvres figure> img {margin-bottom:20px;}
	#oeuvres figcaption {margin-top:20px;}
}