@charset "UTF-8";
html,body{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	cursor: default;
	background-color: #f8f8f8;
	font-family: 'Varela', Helvetica, Arial, sans-serif;
	font-size: 100%;
	color: #8c8c8c;
}
a,a img{ border: 0px none; outline: none; color: #8c8c8c; text-decoration: none; }
*:focus{ outline: none; }

.holder{
	position: relative;
	width: 90%;
	max-width: 1500px;
	padding: 0px 0px 20px 0px;
	margin: 0px auto;
	
	font-size: 0.625em;
	letter-spacing: 0.1em;
}
.contents{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	margin: 0px 0px 20px 0px;
}
.loader{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	margin: 20px 0px 20px 0px;
	text-align: center;
}

/*----------------------------------------------------------------------------------------------------
languages
----------------------------------------------------------------------------------------------------*/
.languages{
	position: relative;
	float: right;
	clear: both;
	padding: 0px;
	margin: 0px 0px 10px 0px;
	text-transform: uppercase;
	#width: 100%;
	#float: left;
}
.languages .language{
	position: relative;
	float: left;
	padding: 10px;
	#float: right;
	
}
.languages .language:hover, .languages .language.selected{ text-decoration: underline; }

/*----------------------------------------------------------------------------------------------------
header
----------------------------------------------------------------------------------------------------*/
.logo{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	padding: 0px;
	margin: 0px 0px 20px 0px;
	text-align: center;
}
.logo img{ #max-width: 250px; }
.navbar{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	padding: 0px;
	margin: 0px 0px 20px 0px;
}

/*slogan*/
.navbar .slogan{
	float: left;
	width: 125px;
	line-height: 1.5em;
}

/*menu*/
.navbar .menu{
	position: relative;
	overflow: auto;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
.navbar .menu a{
	position: relative;
	/*font-size: 0.625em;
	letter-spacing: 0.1em;*/
	display: inline-block;
	margin: 35px 5% 0% 5%;
	text-transform: uppercase;
}
.navbar .menu a:hover, .navbar .menu a.selected{ text-decoration: underline; }

/*share*/
.navbar .share{
	position: relative;
	float: right;
	margin-top: -25px;
}
.navbar .share .newsletter{
	position: relative;
	float: right;
	clear: both;
	width: auto;
	height: 17px;
	padding: 3px 10px 0px 10px;
	margin: 0px 0px 10px 0px;
	background: #999999;
	color: #FFFFFF;
	text-transform: uppercase;
}
.navbar .share .icons, .navbar .share .copyright{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	text-align: right;
}
.navbar .share .icons{ margin-bottom: 10px; }
.navbar .share .icons a{
	position: relative;
	float: right;
	width: 20px;
	height: 20px;
	margin: 0px 0px 0px 5px;
	display: block;
}


/*----------------------------------------------------------------------------------------------------
navbar fixed
----------------------------------------------------------------------------------------------------*/
.navbar.fixed{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	background: #ffffff;
	border-bottom: 1px solid #cccccc;
	z-index: 998;
	opacity: 0.90;
	-moz-opacity: 0.90;
	filter: alpha(opacity=90);
}
.navbar.fixed .slogan, .navbar.fixed .share{ display: none;}
/*.navbar.fixed .menu{ overflow: visible; }*/
.navbar.fixed .menu a{
	position: relative;
	display: inline-block;
	margin: 10px 3% 10px 3%;
}

/*----------------------------------------------------------------------------------------------------
home
----------------------------------------------------------------------------------------------------*/
.home .work{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	padding: 0px;
	margin: 0px;
	background: #CCCCCC;
}
.home .work:hover{ background-color: #AAAAAA; }
.home .work img{
	position: relative;
	width: 100%;
	-ms-interpolation-mode: bicubic;
}
.home .work .title{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: inline-block;
	font-size: 1.5em;
}
.home .work .title a{
	width: 100%;
	height: 100%;
	display: table;
	#display: block;
	cursor: pointer;
}
.home .work .title a .ie_bg{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	#background-color: #ff0066;
	#filter: alpha(opacity=0);
}
.home .work .title a p{
	display: table-cell; 
	vertical-align: middle; 
	text-align: center;
	color: #ffffff;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	#margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
.home .work .title a p span.t{ font-size: 1.1em; }
.home .work .title a p span.c{ font-style: italic; }
.home .work .title a p.rollOver{ display: none; }
.home .work .title a:hover p.rollOver{ display: table-cell; #display: block; }
.home .work .title a:hover p.info{ display: none; }

/*----------------------------------------------------------------------------------------------------
work detail
----------------------------------------------------------------------------------------------------*/
.work_detail .video{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	margin: 0px 0px 20px 0px;
	background: #000000;
}
.work_detail .video .proportion{ display: none; }
.work_detail .title{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	margin: 0px 0px 10px 0px;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
}
.work_detail .description{
	position: relative;
	float: left;
	clear: both;
	width: 60%;
	margin: 0px 20% 20px 20%;
	text-align: center;
	line-height: 1.7em;
	text-transform: uppercase;
}

.work_detail .credits{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	padding: 0px;
	margin: 0px 0px 20px 0px;
	text-transform: uppercase;
}
.work_detail .credits li{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	list-style: none;
	padding: 0px;
	margin: 0px 0px 5px 0px;
}
.work_detail .credits li .left{
	position: relative;
	float: left;
	width: 49%;
	margin-right: 1%;
	text-align: right;
}
.work_detail .credits li .right{
	position: relative;
	float: left;
	text-align: left;
	padding-left: 1%;
}
.work_detail .gallery{
	position: relative;
	float: left;
	clear: both;
	text-align: center;
	width: 100%;
	margin-top: 20px;
}
.work_detail .gallery img{
	position: relative;
	clear: both;
	max-width: 100%;
}
.work_detail .gallery .video{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	margin: 20px 0px 20px 0px;
	background: #000000;
}
.work_detail .gallery .video .proportion{ display: none; }

/*----------------------------------------------------------------------------------------------------
directors
----------------------------------------------------------------------------------------------------*/
.directors{
	padding-top: 20px;
}
.directors div, .directors a, .directors ul, .directors li, .directors h1, .directors h2, .directors span{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.directors .director{
	position: relative;
	float: left;
	width: 49%;
	padding: 60px 10px 60px 10px;
	margin-bottom: 2%;
	font-size: 20px;
	background: #f9f9f9;
	text-align: center;
	text-transform: uppercase;
}
.directors .director.right{
	float: right;
}
.directors .director:hover{
	color: #111111;
	background: #ffffff;
}

/*director page*/
.director_page{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
}
.director_page div, .director_page a, .director_page ul, .director_page li, .director_page h1, .director_page h2, .director_page span{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.director_page h1{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	margin-bottom: 20px;
	text-align: center;
	text-transform: uppercase;
}
.director_page .work{
	position: relative;
	float: left;
	width: 30%;
	margin-right: 5%;
	margin-bottom: 5%;
}
.director_page .work.right{ margin-right: 0px; }
.director_page .work img{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
}
.director_page .work .name{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	padding-top: 20px;
	text-align: center;
	text-transform: uppercase;
}

/*----------------------------------------------------------------------------------------------------
index
----------------------------------------------------------------------------------------------------*/
.index{ margin-top: 30px; }
.index .column{
	position: relative;
	float: left;
	width: 30%;
	text-align: center;
	text-transform: uppercase;
}
.index .column.center{ margin-left: 5%; margin-right: 5%; }
.index .column .category{
	text-decoration: underline;
	margin-bottom: 10px;
}
.index .column .work{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	margin-bottom: 5px;
}
.index .column .work a{
	width: 100%;
	text-decoration: none;
}
.index .column .work a:hover{ text-decoration: underline; }

/*----------------------------------------------------------------------------------------------------
about
----------------------------------------------------------------------------------------------------*/
.about{ margin-top: 30px; }
.about .info{
	position: relative;
	margin: 0px auto;
	max-width: 500px;
	width: 90%;
	line-height: 1.7em;
	text-transform: uppercase;
}
.about .info .title{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
}
.about .info .desc{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	text-align: center;
	margin-bottom: 60px;
}

/*----------------------------------------------------------------------------------------------------
contact
----------------------------------------------------------------------------------------------------*/
.contact{ margin-top: 30px; }
.contact .address{
	position: relative;
	margin: 0px auto;
	max-width: 500px;
	width: 90%;
	line-height: 1.7em;
	text-align: center;
	margin-bottom: 40px;
}
.contact .people{
	position: relative;
	margin: 0px auto;
	max-width: 600px;
	width: 70%;
	line-height: 1.7em;
	text-align: center;
	margin-bottom: 20px;
}
.contact .people .left{
	position: relative;
	float: left;
	width: 48%;
	text-align: center;
	margin-bottom: 20px;
}
.contact .people .right{
	position: relative;
	float: right;
	width: 48%;
	text-align: center;
	margin-bottom: 20px;
}
.contact a:hover{ text-decoration: underline; }

/*----------------------------------------------------------------------------------------------------
shadowbox
----------------------------------------------------------------------------------------------------*/
.shadowBox, .shadowBoxBg{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	position: fixed;
}
.shadowBox{ z-index: 999; }
.shadowBoxBg{
	background: #666666;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

/*----------------------------------------------------------------------------------------------------
newsletter form
----------------------------------------------------------------------------------------------------*/
.formHolder{
	position: relative;
	width: 100%;
	height: 100%;
	display: table;
	text-align: center;
}
.formCenterer{
	position: relative;
	display: table-cell;
	vertical-align: middle;
}
form.newsletterSignUp{
	position: relative;
	display: table;
	width: 90%;
	width: 300px;
	padding: 20px;
	margin: 0px auto;
	/*border: 1px solid #dddddd;*/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
form.newsletterSignUp label{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font: normal 10px Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffff;
	padding: 0px;
	margin: 0px 0px 10px 0px;
}
form.newsletterSignUp input{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 10px 20px 10px 20px;
	margin: 0px 0px 10px 0px;
	font: normal 11px Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	color: #444444;
	text-align: center;
	border: 0px none;
}
form.newsletterSignUp input[type="button"], form.newsletterSignUp input[type="submit"]{
	background: #444444;
	color: #FFFFFF;
	cursor: pointer;
	margin-bottom: 0px;
	border: 0px none;
	font: normal 10px Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
}
form.newsletterSignUp .closeNewsletterForm{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	margin: 10px 0px 0px 0px;
	text-align: left;
	font-size: 11px;
	color: #CCCCCC;
	text-decoration: underline;
}
/*icons*/
form.newsletterSignUp input[name="email"]{
	background-image: url(../img/interface/form_icon_email.png);
	background-position: 10px 10px;
	background-repeat: no-repeat;
	padding-left: 35px;
}
form.newsletterSignUp #admin_password{ background: #efefef; color: #555555; }
/*status*/
form.newsletterSignUp .status{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 200;
	/*background: #FFFFFF;
	color: #333333;*/
	display: none;
	/*border: 5px solid #CCCCCC;*/
}
form.newsletterSignUp .status .message{
	position: relative;
	clear: both;
	width: 90%;
	margin: 5%;
	font: normal 10px Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #FFFFFF;
}
form.newsletterSignUp.error{ border-color: #FF0000; }
form.newsletterSignUp.error label, form.newsletterSignUp.error input, form.newsletterSignUp.error .closeNewsletterForm{ display: none; }
form.newsletterSignUp.sending label, form.newsletterSignUp.sending input, form.newsletterSignUp.sending .closeNewsletterForm{ display: none; }
form.newsletterSignUp.error .message{ color: #FF0000; }
/*form.newsletterSignUp.success{ border-color: #19b015; }
form.newsletterSignUp.success .message{ color: #19b015; }*/
form.newsletterSignUp .status .close{
	clear: both;
	width: 100%;
	cursor: pointer;
	text-align: center;
	text-decoration: underline;
	font: normal 10px Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #FFFFFF;
}


/*----------------------------------------------------------------------------------------------------
small screens and mobile
----------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:600px){
	.holder{
		letter-spacing: 0em;
	}
	.languages{
		width: 100%;
		margin-bottom: 10%;
	}
	.languages .language{
		width: 45%;
		padding: 2.5%;
		text-align: center;
		border-bottom: 1px solid #cccccc;
	}
	.logo{ margin-bottom: 2.5%; }
	.logo img{ width: 50%; }
	.navbar{ margin-bottom: 5%; }
	.navbar .share{
		margin-top: 5px;
	}
	.navbar .slogan{
		width: 100%;
		text-align: center;
		margin-bottom: 2.5%;
		color: #000000;
	}
	.navbar .menu{
		position: relative;
		width: 100%;
		overflow: visible;
	}
	.navbar .menu a{
		letter-spacing: 0em;
		margin-right: 2%;
		margin-top: 0px;
	}
	.navbar .share{ width: 100%; text-align: center; float: left; margin-bottom: 5%; z-index: 100; }
	.navbar .share .newsletter{
		float: none;
		display: inline-block;
	}
	.navbar .share .copyright{ display: none; }
	.navbar .share .icons{ width: 100%; text-align: center; }
	.navbar .share .icons a{ display: inline; float: none; margin: 0% 2% 0% 2%; }
	.navbar .share .icons a.social{ margin-top: 2%; }
	
	.contents{ margin-top: 5% }
	
	.home .work{ overflow: hidden; text-align: center; }
	.home .work img{ width: 150%; margin-left: -25%; }
	.home .work .title a p span{
		position: relative;
		float: left;
		clear: both;
		width: 90%;
		margin: 0% 5% 0% 5%;
		text-align: center;
	}
	
	.work_detail .video, .work_detail .title{ margin-bottom: 5%; }
	.work_detail .description{
		width: 100%;
		margin: 0% 0% 5% 0%;
	}
	.work_detail .credits{
		margin-top: 5%; 
		margin-bottom: 5%;
		padding-top: 2.5%; 
		border-top: 1px solid #cccccc;
	}
	.work_detail .credits li{
		border-bottom: 1px solid #cccccc;
		margin-bottom: 2.5%;
		padding-bottom: 2.5%;
	}
	.work_detail .gallery{ margin-bottom: 5%; }
	
	.index .column{ width: 100%; margin-bottom: 5%; }
	.index .column.center{ margin-left: 0%; margin-right: 0%; }
	.index .column .category{
		margin-bottom: 3%;
		padding: 3% 0% 3% 0%;
		background-color: #efefef;
		text-decoration: none;
	}
	.index .column .work{
		border-bottom: 1px solid #cccccc;
		margin-bottom: 0%;
		padding: 3% 0% 3% 0%;
	}
	.index .column .work a{ display: block; width: 100%; }
	.index .column .work a:hover{ text-decoration: none; }
	.index .column .work:last-child{ border-bottom: 0px none; }
	
	.contact .address{
		border-bottom: 1px solid #cccccc;
		padding-bottom: 5%;
		margin-bottom: 5%;
	}
	.contact .people{
		width: 90%;
	}
	.contact .people .left, .contact .people .right{
		width: 100%;
		/*border-bottom: 1px solid #cccccc;*/
		padding-bottom: 5%;
		margin-bottom: 5%;
	}
	/*.contact .people .right{
		margin: 2.5%;
		border: 0px none;
	}*/
	form.newsletterSignUp{
		display: block;
		width: 90%;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape){
	form.newsletterSignUp .status .message{
		margin: 12% 5% 5% 5%;
		display: block;
	}
	form.newsletterSignUp{
		display: block;
		width: 90%;
	}
}