/* 
		Eric Meyer's CSS Reset
		http://meyerweb.com/eric/tools/css/reset/ 
		v2.0 | 20110126
   		License: none (public domain)
	*/
	
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: 			inherit;
		vertical-align: baseline;
	}
		
	}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
		display: 		block;
	}
	
.viewport-1275,
.viewport-1020,
.viewport-768,
.viewport-464,
.viewport-300 {
	display:				none;
}

.show-on-desktops {
	display:				block;
}

.show-on-phones {
	display:				none;
}

table {
	border-collapse: 		collapse;
	border-spacing: 		0;
	}	
	
/* fonts */

@font-face {
    font-family: 'ralewayregular';
    src: url('../fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('../fonts/raleway-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

} 

@font-face {
    font-family: 'ralewaysemibold';
    src: url('../fonts/raleway-semibold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ralewayextrabold';
    src: url('../fonts/raleway-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/* ----------------------- Seitenweite Definitionen, die in allen Viewports Gültigkeit haben ---------------------  */




html, body {
	height:				100%;
}

body { 
	font-family: 			arial, helvetica, 'sans-serif';
	font-size: 				1em;
	font-weight:			300;
	line-height: 			18px;
	color: 					#000; 
	position: 				relative; 
	padding: 				0;
	
	/* background:				#555;*/
	background:				#fff;
}


/* textformatierungen */

ol, ul {
	list-style:		 		none;
	}
	
a,
a:visited {
	text-decoration:		none;
	color: 					#003366;
}

a:hover {
	text-decoration:		underline;
	color: 					#555;
}

p, ul, ol {
	font-weight:			300;
	font-size: 				95%;
	line-height:			1.5rem;
	margin-bottom:			0.5%;
}	

strong {
	font-weight: 			700;
}

h1 {
	font-weight:			300;
	font-size: 				170%;
	line-height:			2.2rem;
	margin-bottom:			2%;
}
h2 {
	font-weight:			300;
	font-size: 				150%;
	line-height:			2rem;
	margin-bottom:			1%;
}

h3 {
	font-weight:			300;
	font-size: 				130%;
	line-height:			2rem;
	margin-bottom:			5px;
}

h5 {
	font-weight:			300;
	font-size: 				120%;
	line-height:			2rem;
	margin-top:				2%;
	margin-bottom:			2%;
	color: 					#555;
}

/* header  */

.header {
	overflow:				hidden;
	height:					168px;
}

.header-service {
	padding:				8px;
	background-color:		#fff;
	color:					#b7182f;
}

.header-service a {
	color:					#555;
}

.header-service h3 {
	font-size: 				90%;
	font-weight:			700;
	line-height:			14px;
}

.header-service h3 a {
	color:					#b7182f;
}

.header-service h4 {
	font-size: 				79%;
	font-weight:			300;
	line-height:			17px;
	margin-bottom:			3px;	
}

nav.service {
	float: right;
}

nav.service ul li {
	padding: 				0 4px;
	margin: 				0;
	font-size:				79%;
	line-height:			1rem;	
	float: 					left;
}








														/* START @media > 300  ---------- ---------- ----------  */
@media only screen and (min-width: 300px) {  

/* ----------------------- verofilm logo  ------------------  */

.logo, .logo h1, .logo h1 a {
	width:					100px;
	height:					56px;
}
.logo {
	clear:					right;
	margin: 				5px auto 20px auto;
}

.logo h1, .logo h1 a {
	display:				block;
	position:				relative;
	font-size:				12px;
}
.logo h1 a span {
	width:					100%;
	height:					100%;
	position:				absolute;
	background:				url('../img/logo-100.png') 0 0 no-repeat; 
}

/* ----------------------- Navigation  ------------------  */

.mainnav ul {
	background-color: 		#555;
	overflow:				hidden;
	height:					30px;
	border-bottom:			3px solid #b7182f;
}
    


.mainnav ul li a {
	font-family: 			'ralewayregular', sans-serif;
	text-transform:			uppercase;
	font-size:				84%;
	display: 				block;
	float:					left;
	color:					#fff;
	padding:				4px 20px;
}

.mainnav ul li.active a {
	background-color:		#b7182f;
	font-weight:			700;
	font-family: 			'ralewayextrabold', sans-serif;
    
}

.mainnav ul li a:hover {
	background-color:		#b7182f;
	font-weight:			400;
	text-decoration:		none;
}

.mainnav ul li.active a:hover {
	background-color:		#555;
	font-weight:			700;
}

/* ----------------------- Content  ------------------  */



.content {
	margin-top:				4%;
	clear:					both;
	padding: 				2%;
}

.content article {
	margin-bottom: 			8%;
	clear:					right;
	overflow:				hidden;
}
    


.content h2 {
	font-size:				100%;
	line-height:			130%;
	font-family: 			'ralewayextrabold', sans-serif;
	text-transform:			uppercase;
	color:					#b7182f;
}
.content h2 span.light {
	font-family: 			'ralewayregular', sans-serif;
}

.content h2.agentur {
	color:					#555;
}

.content .more {
	margin-top:				2%;
	text-align:				right;
}

.content .more a {
	font-size:				85%;
	float:					right;
	width:					140px;
	display:				block;
	padding:				4px 35px 4px 5px;
	color:					#555;
	background:				#e4e4e4 url('../img/dart.png') no-repeat right 1px;
}

.content .more a:hover {
	background-position:	right -29px;
	color:					#333;
	text-decoration:		none;
}

/* movieseiten */

.teaser {
	padding:				2%;
	margin-top:				4%;
}

.stage-bg {
	width:					100%;
	height:					auto;
	overflow:				hidden;
	padding: 				10px 0;
}

.movie {
	width:					100%;
	float: 					left;
	margin-right:			10px;
	margin-bottom:			10px;
}

.responsive-movie {
	position: relative;
    padding-bottom: 55%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.movie iframe {
	position: absolute;
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.movieposter img {
	width:					100%;
	height:					auto;
}



/* movie listings */

.content.movielist {
	padding: 2% 0;
}

.content article.movielist-element {
	position:				relative;
	overflow:				hidden;
	margin-bottom: 			6%;	
}


.movie img.moviereplacement-img {
	display:				none;
}


.movielist-poster img {
	width:					100%;
	height:					auto;

}

.movielist-poster {
	position:				relative;
	z-index:				50;
}

.movielist-teaser {
	position:				absolute;
	right: 					0px;
	bottom:					72px;
	width:					55%;
	background-color:		rgba(255,255,255,0.8);
	z-index:				100;
	padding:				5% 5% 10% 5%;
}

.content .movielist-teaser h2 {
	margin-bottom:			20px;
}

.content .movielist-teaser h2 a {
	color:					#b7182f;
}

 .content .movielist-teaser p {
	font-size: 				85%;
	line-height: 			21px;
} 

.movielist-element p.more {
	position:				absolute;
	right:					0;
	bottom:					20px;
	margin-bottom:			0;
	z-index:				150;
}

.content .more a {
	font-size:				80%;
	float:					right;
	width:					140px;
	display:				block;
	color:					#fff;
	background:				#b7182f url('../img/dart-white.png') no-repeat right 0px;
}

.content .more a:hover {
	background-position:	right -30px;
	color:					#fff;
	text-decoration:		none;
}

/* ----------------------- Footer  ------------------  */

.footer {
	margin-top:				4%;
	height:					265px;
	background:				#555;
	clear:					left;
}

.footer h2,
.footer h3,
.footer p {
	margin-left: 			20px;
	color:					#fff;
}

.footer h2 {
	padding-top:			30px;
	margin-bottom:			10px;
}

.footer h3 {
	font-size:				90%;
	font-weight:			600;
	margin-bottom:			10px;	
}

.footer p {
	font-size:				95%;
	margin-bottom:			0;
	line-height:			1.4rem;
}

.footer a {
	color:					#fff;
}	

.footer a:hover	{
	color: 					#000066;
}


.ft-col {
	margin-top:				20px;
}


} 	/* ENDE @media 300 */







														/* START @media > 464  */
@media only screen and (min-width: 464px) {	

.header {
	overflow:				hidden;
	height:					208px;
}

.header-service {
	padding:				8px 8px 3px 8px;
}

/* service und telefonnummer */

.header-service h3 {
	font-size: 				120%;
	line-height:			20px;
}

.header-service h4 {
	font-size: 				100%;
}	

nav.service ul li {
	font-size:				100%;
}

/* logo */

.logo {
	margin: 				5px auto 30px auto;
}

.logo, .logo h1, .logo h1 a {
	width:					150px;
	height:					83px;
}

.logo h1 a span {
	background:				url('../img/logo-150.png') 0 0 no-repeat; 
}

/* navigation */
.mainnav ul {
	border-bottom:			4px solid #b7182f;
}

	
.mainnav ul li a {
	font-size:				95%;
	padding:				4px 25px;
	letter-spacing:			0.05em;
}


/* content */

.content h2 {
	font-size:				135%;
	line-height:			130%;
	font-weight:			700;
}

.content p {
	font-weight:			300;
	font-size: 				100%;
	line-height:			1.6rem;
	margin-bottom:			0.5%;
}

/* movie listings */




/* footer */

.footer {
	padding-bottom:			4%;
	margin-top:				0%;
}

.footer h3 {
	font-size:				95%;
}

.footer p {
	font-size:				95%;
	margin-bottom:			0;
	line-height:			1.5rem;
}


.viewport-300 {
	display: 				none;
}

.viewport-464 {
	display: 				block;
}

}	/* ENDE @media 464*/



														/* START @media > 764  ---------- ---------- ----------   */
@media only screen and (min-width: 764px) {

.content article {
	margin-bottom: 			6%;
	clear:					right;
	overflow:				hidden;
}

.teaser {
	padding:				2%;
}

.main {
	overflow:				hidden;
}

/* movie listings */

.content.movielist {
	margin-top:				0%;
	overflow:				hidden;
	padding:				2%;
}

.content article.movielist-element {
	height:					auto;
	width:					100%;
	margin-bottom: 			6%;	
	margin-right:			0;
	float:					none;
}




.movielist-poster {
	position:				static;
	height:					240px;
	width:					200px;
	float: 					left;
	margin:					0 20px 0 0;
	z-index:				100;
}


.movielist-poster img {
	width:					auto;
	height:					240px;
}

.movielist-teaser {
	position:				static;
	width:					auto;
	height:					200px;
	top:					auto;
	left: 					auto;
	bottom:					auto;
	right: 					auto;
	padding:				0;
	margin:					0 0 0 140px;
	background-color:		rgba(255,255,255,1);
	z-index:				1;
}



 .movielist-teaser p {
	font-size: 				80%;
	line-height: 			20px;
} 
.movielist-element p.more {
	position:				absolute;
	right:					0;
	bottom:					0;
	margin-bottom:			0;
}

.content .more a {
	font-size:				80%;
	float:					right;
	width:					140px;
	display:				block;
	padding:				2px 30px 2px 0px;
	color:					#555;
	background:				#e4e4e4 url('../img/dart.png') no-repeat right 0px;
}


.content .more a:hover {
	background-position:	right -30px;
	color:					#333;
	text-decoration:		none;
}


/* footer */

.footer {
	padding-bottom:			0%;
	margin-top:				0%;
	height:					140px;
	clear:					left;
}


.footer h2,
.footer h3,
.footer p {
	margin-left: 			2%;
	color:					#fff;
}

.footer h2 {
	padding-top: 			2%;
	margin-bottom: 			0;
}

.footer h3 {
	font-size:				100%;
	margin-bottom:			0;
}

.footer p {
	font-size:				100%;
	margin-bottom:			0;
	line-height:			1.5rem;
}


.ft-col {
	width:					200px;
	float: 					left;
	margin:					1% 0 0 6%;
}

.ft-col:first-child {
	margin:					1% 0 0 2%;
}

.ft-col p {
	margin-left: 			0;
}




.viewport-464 {
	display: 				none;
}

.viewport-764 {
	display: 				block;
}


	
} 														/* ENDE @media 764*/




														/* START @media > 1000  ---------- ---------- ----------   */
@media only screen and (min-width: 1020px) {

.header {
	width:					980px;
	margin:					0 auto;
	height:					226px;
}

.header-service {
	padding:				16px 0px 3px 0px;
}

/* logo */

.logo {
	margin: 				5px auto 40px auto;
}


/* navigation */

/* content */

.main {
	width:					980px;
	margin:					0 auto;
	overflow:				hidden;
}


.content {
	margin-top: 			3%;
	clear: 					both;
	padding: 				2% 0;
}

.content article {
	margin: 			    0 0 8% 0;
	height:					260px;
	clear:					right;
	float:					left;
	width: 					47%;
	overflow:				hidden;
	position:				relative;

}

.content article:first-child {
	margin-right: 			6%;
}

p.more {
	position:				absolute;
	bottom:					15px;
	right:					0;
}


/* movie page */

.teaser {
	width:					980px;
	margin:					33px auto 22px auto;
}
    


.teaser h1 {
	font-size:				175%;
	color:					#b7182f;
	font-family: 			'ralewaysemibold', sans-serif;
	text-transform:			uppercase;
}

.teaser p {
	width: 					686px;
}

/* stage */

.stage-bg {
	width:					100%;
	height:					466px;
	overflow:				hidden;
}

.stage {
	width:					980px;
	margin:					22px auto 0 auto;
	padding:				18px 0 0 0;
}

.movie {
	width:					691px;
	height:					387px;
	float: 					left;
	margin-right:			18px;
}



.movie img.moviereplacement-img {
	display:				block;
	width: 					686px;
	height:					387px;
}

.movieposter img {
	width:					266px;
	height:					auto;
	border:					1px solid #fff;
}

/* movie description */

.content article.moviedescription {
	margin: 			    0 65px 5% 0;
	width:					640px;
	height:					auto;
}

.content article.moviecastcredits {
	margin: 			    0 0 0 0;
	width:					275px;
	height:					auto;
}


.content h2.castscredits {
	font-weight:			500;
	color:					#555;
	margin-bottom:			34px;
}

.content h2.awards {
	margin: 				33px 0 1% 0;
}

.content article.moviecastcredits p {
	font-size:				95%;
	line-height: 			26px;
	margin-bottom: 			22px;
}


/* movie listings */

.content.movielist {
	margin-top:				0.5%;
	padding:				0;
}

.content article.movielist-element {
	position:				relative;
	overflow:				hidden;
	height:					260px;
	width:					47%;
	margin-bottom: 			6%;	
	margin-right:			29px;
	float:					left;
}

.movielist-poster {
	float: 					left;

	margin:					0 20px 0 0;
}

.movielist-poster img {
	height:					260px;
}

.movielist-teaser {
	height:					260px;
	margin:					0 0 0 240px;
}




 .movielist-teaser {
	position:				relative;
	height:					300px;
}

 .movielist-teaser p {
	font-size: 				90%;
	line-height: 			1.5rem;
} 
.movielist-element p.more {
	position:				absolute;
	right:					0;
	bottom:					0;
	margin-bottom:			0;
}



/* footer */

.footer {
	padding-bottom:			0%;
	margin-top:				0%;
	height:					130px;
}

.footer-in {
	width:					980px;
	margin:					0 auto;
}

.ft-col {
	margin:					0 0 0 6%;
}

.ft-col:first-child {
	margin:					0 0 0 0;
}

.footer h2 {
	padding-top: 			2%;
	margin: 				0 0 0 0;
}

.footer h3 {
	margin:			 		0 0 10px 0;
}


.viewport-764 {
	display: 				none;
}

.viewport-1020 {
	display:				block;
}

}														/* / ENDE @media 1000 */




														/* START @media 1275 ---------- ---------- ---------- */
@media only screen and (min-width: 1275px) {


p, 
.content p {
	font-size:				105%;
	line-height: 			26px;
	margin-bottom: 			22px;
}

/* header */

.header {
	width:					1200px;
	height:					266px;
}

.header-service {
	padding:				22px 0px 3px 0px;
}

nav.service ul li {
	padding: 				0 8px;
	font-size:				105%;
}

/* logo */

.logo {
	margin: 				5px auto 40px auto;
}

.logo, .logo h1, .logo h1 a {
	width:					200px; /* 150 */
 	height:					111px; /* 83 */ 
}

.logo h1 a span {
	background:				url('../img/logo-200.png') 0 0 no-repeat; 
}

/* navigation */

.mainnav ul {
	height:					35px;
	border-bottom:			5px solid #b7182f;
}

.mainnav ul li a {
	font-size:				100%;
	padding:				7px 20px 8px 20px;
}

.main {
	width:					1200px;
}

.content article {
	margin: 			    0 0 5% 0;
	height:					230px;
}



/* movie page */

.teaser {
	width:					1200px;
	margin:					44px auto 22px auto;
}

.teaser h1 {
	font-size:				200%;
}

.teaser p {
	width: 					800px;
}

/* stage */


.stage-bg {
	height:					555px;
}

.stage {
	width:					1200px;
}

.movie {
	width:					840px;
	float: 					left;
	margin-right:			25px;
}

.movie iframe {
	width: 					840px;
	height:					473px;
}

.movie img.moviereplacement-img {
	width: 					840px;
	height:					473px;
}

.movieposter img {
	width:					auto;
	height:					auto;
	
}

/* movie description */

.content article.moviedescription {
	margin: 			    0 65px 5% 0;
	width:					800px;
}

.content article.moviecastcredits {
	margin: 			    0 0 0 0;
	width:					335px;
}


.content h2.castscredits {
	font-weight:			500;
	color:					#555;
	margin-bottom:			34px;
}

.content h2.awards {
	margin: 				44px 0 1% 0;
}

.content article.moviecastcredits p {
	font-size:				105%;
	line-height: 			26px;
	margin-bottom: 			22px;
}


/* movie listings */

.content.movielist {
	margin-top:				1%;
}

.content article.movielist-element {
	height:					300px;
	width:					46%;
	margin-bottom: 			6%;	
	margin-right:			48px;
}

.movielist-poster {
	margin:					0 20px 0 0;
}

.movielist-poster img,
 .movielist-teaser {
	height:					300px;
}

.movielist-poster img {
	width;					auto;
}

 .movielist-teaser {
	position:				relative;
	height:					300px;
}



.content .movielist-teaser h2 {
	font-size: 				160%;
	line-height: 			130%;
	font-weight: 			500;
}

 .movielist-teaser p {

} 

.movielist-element p.more {
	position:				absolute;
	right:					0;
	bottom:					0;
	margin-bottom:			0;
}

.content .more a {
	font-size: 				85%;
	float: 					right;
	width: 					140px;
	display: 				block;
	padding: 				4px 35px 4px 5px;
	color: 					#555;
	background: 			#e4e4e4 url('../img/dart.png') no-repeat right 1px;
}


/* footer */

.footer {
	padding-bottom:			0%;
	margin-top:				0%;
	height:					140px;
	
}

.footer-in {
	width:					1200px;
	margin:					0 auto;
}



} 														/* ENDE @media 1275 */