html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration: none;}


body, input, button, select{
	font: 14px/1.5em "ars-maquette-web-1","ars-maquette-web-2", Verdana, Geneva, sans-serif;
	text-rendering: optimizeLegibility;
	color: #333;
	background:#FFF;
}
strong, b{
	font-weight:bold;
}
em, i{
	font-style:italic;
}

header{
	height: 45px;
	width: 100%;
	position: fixed;
	background: #efefef;
	top: 0;
	left: 0;
	z-index: 4;
}
h1 a,
.nav li a{
	color: inherit;
}
h1{
	position: absolute;
	top: 12px;
	left: 10px;
	font-size: 16px;
	z-index: 3;
	color: #333;
}
header > .nav{
	position: absolute;
	top: 12px;
	left: 200px;
	z-index: 3;
}
header > .nav li{
	font-size: 16px;
	display: inline-block;
	margin: 0 12px 0 0;
	color: #444;
}
header > .nav li.on{
	color: #aaa;
}
h2, h3, h4{
	font-size:36px;
	margin: 0 0 40px -2px;
}

h3 {
	font-size: 48px;
	margin: 0;
}

h4{
	font-size: 24px;
	margin-bottom: 1em;
}
h4:empty {
	display: none;
}

#content{
	position: relative;
	z-index: 2;
	margin-top: 85px;
	padding: 30px 200px;
}

#content > .nav{
	position: absolute;
}
#content > .nav li{
	font-size: 16px;
	margin-bottom: 10px;
}
#content > .nav li a{
	text-decoration: underline;
}

#productions_container {
	margin: 0 -15px;
}

#productions_container .column {
	padding: 0 15px 30px;
	box-sizing: border-box;
	width: 33.33%;
	float: left;
}

#productions_container .column:nth-child(3n+1) {
	clear: left;
}

a.production {
	display: block;
}

a.production h2 {
	color: black;
	font-size: 16px;
	margin: 0 0 1em 0;
}

a.production .preview {
	width: 100%;
	height: 200px;
	background-size: cover;
	background-position: 50% 50%;
}

.calendar {
	margin-bottom: 2em;
}

.programme{
	padding: 10px 0 20px;
	width: 980px;
	border: 1px solid #ddd;
	border-left: 0;
	border-right: 0;
	margin-bottom: -1px;
}
.programme > .main > *{
	float: left;
	box-sizing: border-box;
	padding-right: 10px;
}
.programme > .main > .dates{
	width: 230px;
}
.programme > .main > .works{
	width: 310px;
}
.programme > .main > .roles{
	width: 180px;
}
.programme > .main > .company{
	width: 260px;
}
.programme > .main > *:last-child{
	padding-right: 0;
}
.programme .contributers{
	clear: left;
	padding-top: 10px;
	color: #888;
	transition: 0.2s color linear;
}
.programme .contributers > div{
	display: inline-block;
}
.programme .contributers span{
	color: #aaa;
	transition: 0.2s color linear;
}
.programme:hover .contributers{
	color: #555;
	
}
.programme:hover .contributers span{
	color: #888;
}

body.production {
	color: #FFF;
	background: #333;
}

.left{
	width: 600px;
}
.left p{
	margin: 0 0 1em 0;
}
.right a,
.left a{
	color: #4d599b;
}
.left a{
	text-decoration: underline;
}

.right{
	position: fixed;
	right: 15px;
	text-align: right;
	top: 127px;
	width: 250px;
}

.right h3{
	margin-bottom: 1em;
}
.right ul{
	margin-bottom: 1em;
}
.left > a{
	position:relative;
	top: -50px;
	display: block;
}
.production-reviews {
	margin-bottom: 2em;
}

.production-reviews h4 {
	font-size: 18px;
}
.production-reviews .hide{
	display: none;
}
.review{
	margin-bottom: 1em;
	border-left: 3px solid #efefef;
	padding-left: 15px;
	box-sizing: border-box;
}
.review p:last-child {
	color: #999;
	margin-top: -1em;
}
.review p:last-child a {
	font-style: italic;
	text-decoration: none;
}

.tabs{
	margin-top: 0;
	text-align: center;
}
.tabs #credits, .tabs #photos, .tabs iframe{
	margin: 0 auto;
	text-align: left;
}
.tabs #credits{
	padding: 10px;
	background: rgb(255,255,255);
	background: rgba(255,255,255,0.7);
	color: #000;
	width: 600px;
}

#photos{
	width: 800px;
	height: 400px;
	position: relative;
}
.slideshow-photos{
	margin: 0 100px;
	position: relative;
	height: 400px;
}
#photos .buttons{
	position: absolute;
	top: 50%;
	height:50%;
	width: 100%;
	left: 0;
	display: none;
}
#photos:hover .buttons{
	display: block;
	opacity: 0.5;
}
#photos .buttons > div{
	width: 60px;
	height: 109px;
	position: absolute;
	top: -55px;
	left: 10px;
	background: url("/images/imagenav.png") 0 0 no-repeat;
	cursor: pointer;
}
#photos .buttons > div:first-child{
	right:10px;
	left: auto;
	background-position: -60px 0;
}

#backs{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-top: 37px solid #FFF;
	background: #000;
}
#backs.fade{
	opacity: 0.1;
}

#backs #backlist > div,
.slideshow-photos > div{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	display: none;
}
#backs #backlist > div:first-child,
.slideshow-photos > div:first-child{
	display: block;	
}

@media only screen and (max-width: 1280px){
	#productions_container .column {
		padding: 0 15px 30px;
		box-sizing: border-box;
		width: 50%;
	}
	
	#productions_container .column:nth-child(3n+1) {
		clear: none;
	}
	
	#productions_container .column:nth-child(2n+1) {
		clear: none;
	}
}

@media only screen and (max-width: 1024px){
	header{
		position: relative;
		top:0;
		left:0;
	}
	#content{
		margin-top: 0;
		padding: 30px;
	}
	#backs{
		border-top: 0;
	}
}

@media only screen and (max-width: 480px){
	body{
		font-size: 14px;
		line-height: 1.5em;
		-webkit-text-size-adjust:none;
	}
	header{
		position: relative;
		top:0;
		left:0;
		width: 100%;
		height: auto;
	}
	header h1{
		position: static;
		padding: 10px;
	}
	header .nav{
		position: static;
		padding: 0 10px 10px;
	}
	header > .nav li{
		font-size: 20px;
		margin-right: 0;
		display:block;
	}
	header > .nav li a {
		display: block;
		padding: 5px 0;
	}
	#content{
		margin: 10px;
		padding: 0;
		width: auto;
		box-sizing: border-box;
	}
	#content > .nav{
		position: static;
	}
	h2{
		font-size: 36px;
		line-height: 1.1em;
	}
	.programme{
		width: 100%;
	}
	#backs{
		border-top: 0;
		position: absolute;
	}
	.left{
		width: 100%;
	}
	h3 a{
		font-size: 18px;
		line-height: 1.3em;
		padding: 10px 0;
	}
	.right{
		display: none;
	}
	
	#photos{
		width: 100%;
		height: 300px;
	}
	.tabs #credits{
		box-sizing: border-box;
		width: 300px;
	}
	#productions_container .column {
		padding: 0 15px 30px;
		box-sizing: border-box;
		width: 100%;
		float: none;
	}
}