@viewport{
	zoom: 1.0;
	width: device-width;
}


body {
	font-family: Helvetica;
	color: #ffffff;
	font-size:13px;
	line-height:16px;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}
img{
	border: 0;
}
/*===========INDEX=================*/


div.indexwrap, div.indexwrap-d{
	position:absolute;
	top:50%;
	left:50%;
	width:520px;
	height:226px;
	margin-left:-260px;
	margin-top:-63px;
    line-height: initial;
}

.branding {
	float:left;
    letter-spacing:-5px;
    font-size: 80px;
    margin-left: -3px;
    font-weight: bold;
    
}

.indexwrap ul,.indexwrap-d ul{
	
	padding: 0;
	list-style: none;
	position: relative;
}

div.indexwrap li, div.indexwrap-d li{
	
	float: left;
	font-size: 30px;
    letter-spacing: -2px;
    font-weight: bold;
    


}
.indexwrap li{
	
	padding-right:7px;
	
}

.indexwrap-d li{
	
	padding-right:17px;
	
}

.indexwrap li:last-of-type,.indexwrap-d li:last-of-type{
	text-align: right;
	padding-right: 0;
}

.indexwrap li ul,.indexwrap-d li ul{

	position: absolute;
}

.indexwrap li ul li,.indexwrap-d li ul li{
	overflow: hidden;
	height: 0;

	-webkit-transition: height 160ms ease-in;
	-moz-transition: height 160ms ease-in;
	-o-transition: height 160ms ease-in;
	transition: height 160ms ease-in;
}
	


.indexwrap ul > li:hover ul li,.indexwrap-d ul > li:hover ul li {
	height: 34px;
}

div.toprightDiv {
	position: absolute;
	bottom:100%;
	right:30%;
	width:81px;
	height:18px;
	margin-right:-180px;
	margin-bottom:-50px;

	font-weight:bold;
	font-size: 17px;
	letter-spacing:-1px;

}

/*=========== FILM ACCESS DIRECTORS ACCESS =================*/

div.wrapDiv {
	text-align:center;

}


div.bigTitles_m, div.bigTitles_R{
	
	font-size: 44px;
    letter-spacing: -3px;
    font-weight: bold;
    transform: scale(0.88,1);
    -webkit-transform: scale(0.88,1);
    display: inline-block;
    line-height: 41px;
   padding-bottom: 12px;

}

.bigDir{
	font-size: 30px;
	
}

.bigDir:before{
content:"\00a0";
}

span.wtat {
    font-size: 32px;
}
/*===========KOMPLIZEN=================*/


.main{

	width: 433px;
	margin: auto;
	padding: 116px 0;
	position: relative;

}

img.foto{
	width: 100%;
}

.kompl{
	padding:21.5px 0 0;
	position: relative;
	text-align: justify;
}
.kompl p{
	margin: 0;
	padding: 0 0 7.5px;
}
.kompl p:nth-of-type(4){
	
	padding: 14px 0 7.5px;
}

.kompliz{
	font-size: 37px;
    letter-spacing: -2.9px;
    font-weight: bold;
    line-height: 27px;
    padding-bottom: 7.5px;
    transform: scale(0.96,1);
    -webkit-transform: scale(0.96,1);
    display: block;
    position: relative;
    left: -9px;
}

.kompltitel{
	 font-size: 28px;
    letter-spacing: -2.5px;
    font-weight: bold;
    line-height: 23px;
    padding: 14px 0;
    transform: scale(0.98,1);
    -webkit-transform: scale(0.98,1);
    display: block;
    position: relative;
    left: -6px;
}

img.title{
	padding-top: 15px;
}


.back-kompl{

	position: absolute;
	top: 385px;
    left: -50px;
    
}
.back-kompl img, .back-div img{

	height: 44px;
	width: 49px;
	margin: 0 !important;
	padding-right: 10px;
}
/*===========FILMS and CVSpages =================*/


div.pageTitles img{
	padding-bottom: 6px;
		display: none;

	}

	div.noscreen{
		display: block;
	}

	.mainHeader{

		font-size: 42px;
		letter-spacing: -4px;
		font-weight: bold;
		line-height: 42px;
		padding-bottom: 12px;
		transform:scale(0.88,1);
		-webkit-transform:scale(0.88,1); 

	}


span.underTitle{
	padding-top: 14px;
	display: block;
	text-transform: uppercase;
}

div.indent {

	text-align:justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;

}

div.indent p{
	margin: 0;
	padding-bottom: 6px;
}

div.indent p:last-of-type{
	padding: 0;
}

span.quote{

	font-style: italic;
	display: block;
	text-align: left;
	padding-bottom: 6px;

}

span.quote p{

	text-align: right;
	margin-top: 0;
}

.ATWT{
	font-size: 30px;


}

.ATWT:before{
content:"\00a0 \00a0";
}
.poster {
    padding-top: 12px;

}
.poster img{
	width: 236px;
}

/*=  MAIN TABLE   =*/


.mainTable tr:nth-child(2) td:first-child{
	padding-top: 0;/*top arrow- directors cvs text */
}

td.naviColumn {
	width:50px;
	vertical-align:top;
	text-align:right;
	padding: 14px 5px 0 0;
}

td.contentColumn {
	width:494px;
	padding-bottom: 14px;
}

td.names {
	text-transform:none;
}
td.names p{
	margin: 0;
}
td.leftListingColumn{
	width:180px;
}

td.leftListingDates{
	width: 100px
}

td.listingEmptyLine {
	height:10px;
}

span.contentHeader {
	display: block;
	text-transform:uppercase;
	font-weight:bold;
	padding: 14px 0;

}

span.select {
	text-transform: none;
	font-weight: normal;
}
span.uppercase {
	text-transform:uppercase;
	display: block;
}
span.time {
	padding-top: 18px;
	display: block;
}

span.cvHeader {
	font-size:15px;
	font-weight:bold;
}

/* PRINT LINK */

a.printlink {
	color: #ffffff;
	font-size:13px;
	text-decoration:none;
	padding-top: 14px;
	display: block;
}

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

a:hover {
	text-decoration:none;
}

/* ANKERS BACK ARROWS */


.svg-triangle{

	width: 28px;
	fill: white;
}

div.back{

    position: relative;
    top: -9px;
}

/* LISTING TABLES */

.listingTable {
	border-collapse: collapse;
}

.dir{
	line-height: 22px;
	margin: -5.5px 0;
}
.listingTable td {
	
	/*padding-bottom: 3px;*/
	vertical-align:top;

}
.listingTable td:last-of-style{
	padding: 0;
}

.mainTable {

	width: 550px;
	text-align: left; /*needed for Opera Browser */
	margin-left: auto; 
	margin-right: auto;
	margin-top: 23px;
	padding-bottom: 70px;

}


/* --- print definitions --- */

.noprint {
	/* ignore noprints in screen css */
}

.noscreen , .noscreen-1{
	display:none;
}
/* --- BACK FILMS DIRECTORS KOMPLIZEN--- */


div.back-div{
	
	width: 100%;
	padding: 40px 0;
	text-align: center;
	line-height: initial;
	
}


/* --- KONTAKTE --- */

div.centerdiv {
	position:absolute;
	display: table;
	height: 100%;
	width: 100%;

}

.contact {
    font-size: 44px;
    letter-spacing: -3px;
    font-weight: bold;
    line-height: 49px;
    transform: scale(0.95,1);
    -webkit-transform: scale(0.95,1);
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.contact p{
	font-weight: bold;
	font-size: 18px;
	letter-spacing: -0.07em;
	margin: auto;
	max-width: 440px;
	line-height: 30px;
	padding-top: 7px;
}

div.bottomDiv {
	position:absolute;
	top:100%;
	left:30%;
	width:81px;
	height:18px;
	margin-left:-180px;
	margin-top:-50px;
	font-weight: bold;
	font-size: 18px;
	letter-spacing: -0.07em;
}

.kont-back{

    top: 40px;
    margin-left: -450px;
    position: relative;

}
.imp-wrap{
	display: table-cell;
    vertical-align: middle;
}
.imp-back{
    position: relative;
    top: 36px;
    margin-left: -36px;
}
.imp-back .svg-triangle{

	fill: initial;
}
.imp{
	
	width: 400px;
	margin: auto;

}
.imp a, .imp{
	color: #000;
}

/*=================CSS SLIDE SHOWS===============*/

/*  3, 6 images */

#room-3{
	width: 500px;
	height: 333px;
	position: relative;


}
#room-3 img{
	width: 100%;
	opacity: 0;
	animation: 30s ease-in-out infinite;
	position: absolute;

}


#room-3
img:nth-of-type(1) {
	animation: fadedrei 30s ease-in-out infinite;
}

#room-3
img:nth-of-type(2) {
	animation: fadedrei 30s 5s ease-in-out infinite;
}

#room-3
img:nth-of-type(3) {
	animation: fadedrei 30s 10s ease-in-out infinite;
}

#room-3
img:nth-of-type(4) {
	animation: fadedrei 30s 15s ease-in-out infinite;
}

#room-3
img:nth-of-type(5) {
	animation: fadedrei 30s 20s ease-in-out infinite;
}

#room-3
img:nth-of-type(6) {
	animation: fadedrei 30s 25s ease-in-out infinite;
}

@keyframes fadedrei {
	3.33%, 16.66% {opacity:1;}
	0%, 20%, 100% {opacity:0;}
}


/*  5 images */

#room-5{
	width: 500px;
	height: 333px;
	position: relative;


}
#room-5 img{
	width: 100%;
	opacity: 0;
	animation: 25s ease-in-out infinite;
	position: absolute;

}

#room-5
img:nth-of-type(1) {
	animation: five 25s ease-in-out infinite;
}

#room-5
img:nth-of-type(2) {
	animation: five 25s 5s ease-in-out infinite;
}

#room-5
img:nth-of-type(3) {
	animation: five 25s 10s ease-in-out infinite;
}

#room-5
img:nth-of-type(4) {
	animation: five 25s 15s ease-in-out infinite;
}

#room-5
img:nth-of-type(5) {
	animation: five 25s 20s ease-in-out infinite;

}
img.portraitslide{
	max-height: 333px;
	width: initial !important;

}


@keyframes five {
	4%, 20% {opacity:1;}
	0%, 24%, 100% {opacity:0;}
}

/* 4, 8 images */

#room-8{
	width: 500px;
	height: 333px;
	position: relative;


}
#room-8 img{
	width: 100%;
	opacity: 0;
	animation: 40s ease-in-out infinite;
	position: absolute;

}


#room-8
img:nth-of-type(1) {
	animation: fadeacht 40s ease-in-out infinite;
}

#room-8
img:nth-of-type(2) {
	animation: fadeacht 40s 5s ease-in-out infinite;
}

#room-8
img:nth-of-type(3) {
	animation: fadeacht 40s 10s ease-in-out infinite;
}

#room-8
img:nth-of-type(4) {
	animation: fadeacht 40s 15s ease-in-out infinite;
}

#room-8
img:nth-of-type(5) {
	animation: fadeacht 40s 20s ease-in-out infinite;
}

#room-8
img:nth-of-type(6) {
	animation: fadeacht 40s 25s ease-in-out infinite;
}
#room-8
img:nth-of-type(7) {
	animation: fadeacht 40s 30s ease-in-out infinite;
}
#room-8
img:nth-of-type(8) {
	animation: fadeacht 40s 35s ease-in-out infinite;
}

@keyframes fadeacht {
	2.5%, 12.5% {opacity:1;}
	0%, 15%, 100% {opacity:0;}
}


/* 7images */

#room-7{
	width: 500px;
	height: 333px;
	position: relative;


}
#room-7 img{
	width: 100%;
	opacity: 0;
	animation: 35s ease-in-out infinite;
	position: absolute;

}


#room-7
img:nth-of-type(1) {
	animation: fadeseven 35s ease-in-out infinite;
}

#room-7
img:nth-of-type(2) {
	animation: fadeseven 35s 5s ease-in-out infinite;
}

#room-7
img:nth-of-type(3) {
	animation: fadeseven 35s 10s ease-in-out infinite;
}

#room-7
img:nth-of-type(4) {
	animation: fadeseven 35s 15s ease-in-out infinite;
}

#room-7
img:nth-of-type(5) {
	animation: fadeseven 35s 20s ease-in-out infinite;
}

#room-7
img:nth-of-type(6) {
	animation: fadeseven 35s 25s ease-in-out infinite;
}
#room-7
img:nth-of-type(7) {
	animation: fadeseven 35s 30s ease-in-out infinite;
}


@keyframes fadeseven {
	2.85%, 14.28% {opacity:1;}
	0%, 17.14%, 100% {opacity:0;}
}


/*
A: Anzahl der Bilder 

Z: Zeit die ein Bild komplett sichtbar ist (4 Sekunden)

D: Dauer einer Überblendung (1 Sekunden)

G = ( Z + D ) * A: Gesamtdauer der Animation (.. Sekunden)

S = G / A: Staffelung der Startzeiten (.. Sekunden)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

{opacity:0;} -= 0%

{opacity:1;} - [ 100 * D / G]= 3.33%

{opacity:1;} - [ 100 / A ] = 16.66%

{opacity:0;} - [ 100 * ( Z + ( 2 * D ) ) / G ] = 20%

{opacity:0;} -= 100%
*/
/*TRAILER*/

#flash{

	width: 100%;
}

/*          RESPONSIVE              */




@media only screen and (max-width:766px){



	/*===========INDEX=================*/

	

	div.indexwrap, div.indexwrap-d {
		zoom:0.7;

	}
	
	.indexwrap ul > li:hover ul li,.indexwrap-d ul > li:hover ul li {
	height: 54px;
}

li ul {
	margin-top:20px;
	

}


	div.toprightDiv {

		margin-right:-81px;

	}

/*=========== FILM ACCESS DIRECTORS ACCESS =================*/


/*===========FILME-DIRECTORS=================*/



div.indent {
	
	text-align:left;
	}

	
/*===========KOMPLIZEN=================*/


	.kompl{
		box-sizing: border-box;
	}
	
.kompliz, .kompltitel{
	
}

	img.title{
		width: 100%
	}

	.back-kompl, .kont-back, .imp-back{
		position:initial;
		z-index:11;
		width: 100%;
		text-align: center;
		padding: 25px 17px 25px 0;
		box-sizing: border-box;
		margin: 0;
		line-height: initial;
	}

.imp-back a{
	color: #000;
}

.imp{
	width: 100%;
	padding: 0 12px;
	box-sizing: border-box;
}

	.main{

		width:100%;
		padding: 0 15px;
		box-sizing: border-box;
	}

	/*  SLIDESHOWS start   */

	#room-3, #room-5, #room-6, #room-7, #room-8{
		width: 100%;
		padding-bottom: 66%;
		overflow: hidden;
		height: initial;
	}

	/*  FILME DIR MAIN   */



	/*  BACKBUTTON   */

	div.back-div {
		padding: 20px 0;
	}

	/*  TABLES   */

	.mainTable{

		width: 100%;
		padding: 0 8% 50px 2%;
	}
	td.naviColumn{
		width: 8%;
	}
	td.contentColumn{
		width: initial;
	}

	.listingTable{
		width: 100%
	}

	td.leftListingColumn {
		width:45%;
	}

	td.leftListingDates {
		width:25%;
	}

	td.names {
		padding-left: 8px;
	}

	img.back{
		margin: -10px 0 0 0;
	}
	div.titles img{
		width: 100%

	}
	div.indent img{
		margin-bottom: 5px;

	}

/* --- KONTAKTE --- */

	div.centerdiv {
		position:initial;
		padding: 18px 0;
		display: block;
	}

	.contact{
	    font-size: 35px;
	    display: block;
	 
}

.contact p{
	 
	    max-width: 315px;
}

	div.bottomDiv {
		position:unset;
		width:auto;
		height:auto;
		margin:55px;

	}



	/*dont fuckin remove the following bracket8sorry, talking to myself!)*/
}

@media only screen and (max-width:375px){



	/*===========INDEX=================*/

	.indexwrap-d ,.indexwrap {
		zoom: 0.68 !important;
	}



	/*dont fuckin remove the following bracket8sorry, talking to myself!)*/
}

@media only screen and (max-width:320px){



	/*===========INDEX=================*/

.indexwrap-d ,.indexwrap {

	zoom: 0.58 !important;
		
	}
	


	/*dont fuckin remove the following bracket8sorry, talking to myself!)*/
}