/* Stylesheet */



/* Style Filme */



/* Werbung - Buch */


.bestefilme #main p.buchcover-p

	{
	margin-top: 0px;
	margin-bottom: 15px;
	font-size: 14px;
	}


.bestefilme #main .buchcover-div li

	{
	display: inline;
	float: left;
	margin-right: 14px;
	}


.bestefilme #main p.subtitel-buch

	{
	font-size: .75rem;
	font-style: italic;
	margin-top: 0px;
	margin-bottom: 10px;
	}


ul.buchshop-ul

	{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}


/*  Ende - Werbung - Buch  */





/* Werbung */


.bestefilme #main .p-werbung

	{margin-bottom: 0px !important;
	margin-top: 0px !important;}


p.werbung

	{
	font-size: .75rem !important;
	font-style: italic !important;
	margin-bottom: 0px !important;
	}
	
.werbung a

	{font-size: 1.9rem;}


/* Ende Werbung  */




.bestefilme #main h2.kaufen, .bestefilme #main .kaufen h2 

	{font-size: 12px;}

.bestefilme #main h2.soundtrack, .bestefilme #main h2.buch

	{margin-top: 30px;}


.filme #main .kaufen p 

	{font-size: 12px;
	margin-top: 10px;}

.filme #main a.button

	{	
	font-size: 14px !important;	
	padding: 0.5rem 1rem;
	}

.filme h2.beschreibung

	{font-size: 25px;}


.filme img

	{margin-top: 10px;}



.filme .iframe

	{height: 360;}


/*

.bestefilme #main p.year 

	{font-size: 11px;
	margin-top: 10px;
	margin-bottom: 10px;
	display: inline-box;}

*/


/* Ende Style Filme */




/* Style Index */


	



*	{
	padding: 0; margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}


html	{
	font-family: helvetica, arial, sans-serif;
	font-size: 100%;
	overflow-y: scroll;
	}

body	{
	max-width: 1400px;
	width: 90%;
	min-width: 350px;
	margin: 0 auto 0 auto;
	text-align: left;
	color: #333;
	background: white;
	font-size: 16px; font-size: 1rem;
	line-height: 1.7;
	}

h1	{font-size: 35px; font-size: 2.1875rem;}

h2	{font-size: 18px; font-size: 1.125rem;
	font-weight: normal;
	color: rgb(210,210,210);
	}

h3	{
	font-size: 18px; font-size: 1.125rem;
	font-weight: normal;
	}

h4	{font-size: 16px; font-size: 1rem;
	font-weight: normal;}

ul, li

	{
	overflow: hidden;
	list-style-type: none;
	display: inline;
	}

a	{
	color: rgb(20,20,20);
	text-decoration: none;
	}


li a:hover

	{
	text-decoration: underline;
	text-decoration-style: dotted;
	color: rgb(160,160,160);
	}

a:hover

	{color: rgb(120,120,120);}

.readmore a, .start a

	{font-size: 16px; font-size: 1rem;}


#main	a:hover

	{color: rgb(120,120,120);}


#main a.link

	{text-decoration: underline;}


#main a.link:hover

	{text-decoration: underline;}


img	{
	max-width: 100%;
	heigth: auto;
	}

.radius

	{border-radius: 3px;}


.artikelimg

	{
	margin-left: 20px;
	float:right;
	width: 50%;
	}


#main p.subtitel

	{
	color: rgb(60,60,60);
	font-size: 12px; font-size: 0.75rem;
	font-style: italic;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	}

.clearfix	{clear: both;}

.star		{color: red;}

.overflow-hidden	{overflow: hidden;}

.bold		{font-weight: bold;}

.readmore	{display: inline;}

.start		{display: inline;
		float: right;
		}


#header	h1

		{
		color: rgb(144,144,144);
		line-height: 1;
		margin: 0 0 0.25em 0;
		}

#header 	h1, h2, h3

		{display: inline;}

#header	h2

		{
		font-size: 15px; font-size: .9375rem;
		color: rgb(50,50,50);
		margin-left: 20px;
		font-weight: bold;
		}


#header	h3

		{
		padding: 5px;
		margin-left: 20px;
		font-weight: normal;
		}


#header ul h1.active

		{
		font-size: 22px; font-size: 1.375rem;
		color: rgb(50,50,50);
		margin-left: 20px;
		}


#header ul h2.active

		{font-size: 22px; font-size: 1.375rem;}

#main h2#keint1

		{
		font-size: 38px; font-size: 2rem;
		font-weight: 300;
		margin-top: 0px;		
		}

#main #keint1 strong

		{font-weight: normal;} 



#nav		li

		{padding: 0 13px 0 13px;
		border-right: 1px solid;
		}

#nav		li.first

		{padding-left: 0;}

#nav		li.last

		{border-right: 0;}

#nav		li.active a

		{color: rgb(109, 109, 109);}


#filme

		{
		overflow: hidden;
		margin-top: 10px;
		margin-bottom: 10px;
		}

#filme #film3, #filme #film2, #filme #film1

		{padding-right: 2px;}


#main		{
		overflow: hidden;
		margin: 10px auto 10px auto;
		line-height: 1.7;
		text-align: left;
		}

#main 		h1#big

		{font-size: 30px; font-size: 1.875rem;
		margin-top: 0px;
		margin-bottom: 0px;
		}


#main		h2

		{color: rgb(20,20,20);
		}

#main		h3

		{color: rgb(50,50,50);
		padding-top: 0.5em;
		border-top: 1px solid #ddd;
		margin: 1.5em 0 0.25em 0;
		}

#main		p

		{margin-top: 0;
		margin-bottom: 1em;
		color: rgb(120,120,120);
		}

#main		p.artikelinfo

		{font-size: 13px; font-size: 0.8125rem;
		color: #999;
		}

.articel	{
		margin-top: 15px;
		margin-bottom: 15px;
		}

.articel 	a

		{color: rgb(40,40,40);
		}


.articel p	a

		{
		color: rgb(150,150,150);}


.articel .readmore a

		{color: rgb(60,60,60);}



#films1, #films2, #films3

		{
		overflow: hidden
		clear: both;
		}


.shop #film1, .shop #film2, .shop #film3

	{min-width: 150px;}

.shop #main h2

	{
	font-size: 18px; font-size: 1.125rem;
	font-weight: normal; 
	color: rgb(20,20,20);
	padding-top: 20px;
	padding-bottom: 5px;
	}

#main .dvd h3, #main .stream h3

	{
	border-top: none;
	font-weight: bold;
	margin: 0;
	padding: 0;
	}

#main .dvd h3 span, #main .stream h3 span

	{
	font-size: 12px; font-size: 0.75rem;
	font-weight: normal; 
	}

.shop #main ul, .shop #main li

	{display: block;}

.shop #main ul

	{margin: 1em 0;}

.shop #main li

	{
	font-size: 16px; font-size: 1rem;
	margin: 0;}


#main .kritik h3

	{
	font-size: 12px; font-size: 0.75rem;
	border-top: 0;
	font-weight: normal;
	margin-bottom: 5px;
	}

#main .kritik h4

	{margin-bottom: 5px;
	}


/* Css Beste Gute Filme  */


.bestefilme #main h1

	{
	font-size: 42px; font-size: 2,265rem;
	margin-top: 0px;
	}

.bestefilme #main h1 span

	{font-size: 16px; font-size: 1rem;
	 font-weight: normal;}


.bestefilme #main h2.statth1.kategorie	

	{
	font-size: 38px; font-size: 2rem;
	margin-top: 30px;
	}


.bestefilme h2.statth1	

	{font-size: 38px; font-size: 2rem
	margin-top: 30px;
	}


.bestefilme #main h2.extra	

	{
	font-size: 16px; font-size: 1rem;
	font-weight: normal;
	font-style: italic;
	margin-top: 0px;
	margin-bottom: 20px;
	}



.bestefilme #main h1.kategorie

	{font-size: 38px; font-size: 2rem}



.bestefilme #main h2

	{
	display: block;
	font-size: 24px; font-size: 1.5rem;
	font-weight: normal;
	color: rgb(40,40,40);
	margin-top: 0px;
	margin-bottom: 10px;
	}


.bestefilme #main p

	{line-hight: 1.6;
	margin-top: 20px;
	margin-bottom: 30px;
	color: rgb(60,60,60);
	font-size: 18px; 1.125rem;
	}


/* figcaption */

.bestefilme #main figcaption.filmplakat

	{margin-top: 10px;}


.bestefilme #main p.genre, .bestefilme #main p.kategorie

	{margin: 5px 0 5px 0;
	font-size: 14px; .875rem;}

.bestefilme #main .filmtitel


	{width: auto;
	min-height: 30px;} 

.bestefilme #main h3.filmtitel


	{
	font-weight: bold;
	margin: 20px 0 5px 0;
	font-size: 14px;
	color: rgb(60,60,60);
	line-height: 1;
	padding-top: 0em;
	border-top: 0px solid #ddd;
	}


figure.plakat

	{max-width: 32.33333333333333%; height: auto;
	padding: 1% 1% 1% 0px;
	float: left;}

figure.buchcover

	{max-width: 50%; height: auto;
	padding: 1% 1% 1% 0px;
	float: left;}

.buchcover

	{max-width: 50%; height: auto;
	padding: 1% 1% 1% 0px;
	float: left;}


figure.plakatimpressum

	{max-width: 25%;}


/* Ende figcaption */



.bestefilme #main .about

	{
	margin-top: 0px;
	margin-bottom: 20px;
	}

.bestefilme #main h2.pabout

	{
	display: inline-block;
	font-size: 22px; font-size: 1.375rem;
	margin-top: 0px;
	}


.bestefilme #main p.pabout 

	{
	font-size: 18px; 1.125rem;
	color: rgb(60,60,60);
	}



.bestefilme #main p.mehrinfo

	{
	margin-bottom: 0px;
	}


.bestefilme #main p.mehr-text

	{
	margin-bottom: 10px;
	margin-top: 0px;

	}


/* CSS Newsletter  */



.bestefilme #main .letterp

	{margin-bottom: 0px;
	margin-top: 0;}


.bestefilme #main .letter li

	{
	overflow: hidden;
	float: left;
	font-weight: bold;	
	}





/* Button im Kategorie Text  */

.bestefilme #main p.einblenden

	{margin-top: 20px;}



.bestefilme #main a.button, .bestefilme a.button, .bestefilme p.button 

	{	
	display: inline-block;
	font-size: 16px; font-size: 1rem;
	font-weight: 500;	
	text-align:center;
	
	color: rgb(108,108,108);
	background-color: rgb(255,255,255);


	padding: 0.5rem 1rem;
	margin: 5px 0 20px 0px;
	border-radius: 4px;
	border: 2px solid;

	letter-spacing: 0.05em;

	transition: all .14s ease-in-out;
	cursor: pointer;
	} 


.bestefilme a.button

	{
	margin-left: 20px;
	}




.bestefilme a.button-vod, .bestefilme #main p.button-vod

	{	
	display: inline-block;
	font-size: 12px; font-size: .75rem;
	/*font-size: 10px; font-size: .625rem;*/

	font-weight: 500;	
	text-align:center;
	
	color: rgb(108,108,108);
	background-color: rgb(255,255,255);


	padding: 0.2rem .5rem;
	margin: 5px 0 5px 0px;
	border-radius: 2px;
	border: 1px solid;

	letter-spacing: 0.05em;

	transition: all .14s ease-in-out;
	
	}
	
	
	.bestefilme a.button-vod
	{
	cursor: pointer;
	} 



.bestefilme a.button-vod:hover, .bestefilme a.button-vod:hover

	{
	color: rgb(251,251,251);
	border-color: rgb(222,222,222);
	background-color: rgb(188,188,188);
	}




/* CSS Hover für die Buttons: Ticket, About und Start */

.bestefilme #main a.button:hover, .bestefilme a.button:hover

	{
	color: rgb(251,251,251);
	border-color: rgb(222,222,222);
	background-color: rgb(188,188,188);
	}





/* CSS für die Haupt-Navigation */


.bestefilme div.navigation

	{
	margin-bottom: 0;
	margin-top: 0;
	}


.bestefilme  #main .navigation li

	{display: inline;}

.bestefilme div.navigation a:hover

	{text-decoration: none;}



/* CSS für die Haupt-Navigations - Buttons */

.bestefilme #main a.navigation 

	{margin: 10px 0px 0px 0px;}


.bestefilme #main li

	{display: block;
	font-size: 18px; 1.125rem;}



/* CSS für die Seiten-Navigation*/


.komödien div.seiten-navigation, .liebesfilme div.seiten-navigation, .drama div.seiten-navigation 

	{
	margin-top: 0px;
	margin-bottom: 40px;}


/* Css für die Seiten Liebesfilme, Komödie, Drama */




/* CSS zum Verkürzen der Seitenbeschreibung */

.bestefilme #main div[id="t1"]:not(:target) div.artikelinhalt

	{display: none;} 

.bestefilme #main div[id="t1"]:target  div.mehr

	{display: none;} 



/* Css zum Verkürzen der Artikel in den Kategorien  */



.bestefilme #main div[id="k1"]:not(:target) ul

	{display: none;} 

.bestefilme #main div[id="ü1"]:not(:target) p.einblenden

	{display: none;}


.bestefilme #main div[id="ü1"]:target  a.weniger-text

	{display: none;} 


.bestefilme #main div[id="ü1"]:not(:target)  div.zweiter-button

	{display: none;} 




.bestefilme #main div[id="ü2"]:not(:target) p.einblenden

	{display: none;}, p.weniger-text {display: block;}

.bestefilme #main div[id="ü2"]:target  a.weniger-text

	{display: none;}

.bestefilme #main div[id="ü2"]:not(:target)  div.zweiter-button

	{display: none;} 







.bestefilme #main div[id="ü3"]:not(:target) p.einblenden

	{display: none;}, a.weniger-text {display: block;}

.bestefilme #main div[id="ü3"]:target  a.weniger-text

	{display: none;}

.bestefilme #main div[id="ü3"]:not(:target)  div.zweiter-button

	{display: none;} 





.bestefilme #main div[id="ü4"]:not(:target) p.einblenden

	{display: none;}, a.weniger-text {display: block;}

.bestefilme #main div[id="ü4"]:target  a.weniger-text

	{display: none;}

.bestefilme #main div[id="ü4"]:not(:target)  div.zweiter-button

	{display: none;} 






.bestefilme #main div[id="ü5"]:not(:target) p.einblenden

	{display: none;}, a.weniger-text {display: block;}

.bestefilme #main div[id="ü5"]:target  a.weniger-text

	{display: none;}

.bestefilme #main div[id="ü5"]:not(:target)  div.zweiter-button

	{display: none;} 





.bestefilme #main div[id="ü6"]:not(:target) p.einblenden

	{display: none;}, a.weniger-text {display: block;}

.bestefilme #main div[id="ü6"]:target  a.weniger-text

	{display: none;}

.bestefilme #main div[id="ü6"]:not(:target)  div.zweiter-button

	{display: none;} 





.bestefilme #main div[id="ü7"]:not(:target) p.einblenden

	{display: none;}, a.weniger-text {display: block;}

.bestefilme #main div[id="ü7"]:target  a.weniger-text

	{display: none;}

.bestefilme #main div[id="ü7"]:not(:target)  div.zweiter-button

	{display: none;} 


.bestefilme #main div[id="ü8"]:not(:target) p.einblenden

	{display: none;}, a.weniger-text {display: block;}

.bestefilme #main div[id="ü8"]:target  a.weniger-text

	{display: none;}

.bestefilme #main div[id="ü8"]:not(:target)  div.zweiter-button

	{display: none;} 






.bestefilme #main div[id="ü10"]:not(:target) p.einblenden

	{display: none;}, a.weniger-text {display: block;}

.bestefilme #main div[id="ü10"]:target  a.weniger-text

	{display: none;}

.bestefilme #main div[id="ü10"]:not(:target)  div.zweiter-button

	{display: none;} 




.bestefilme img

	{display: block;}



/* Kinoreihe - Im Kino und Vorschau  */

.bestefilme #main .Vorschau

	{padding-top: 1px;
	padding-bottom: 1px;}

.bestefilme #main #imKino h3, .bestefilme #main .Kinoreihe h3

	{
	color: rgb(20,20,20);
	padding: 10px 0; 
	margin-top: 20px;
	margin-bottom: 20px;
	border-top: 0px;
	}

#imKino a, .Vorschau a, .Kinoreihe a

	{
	font-size: 30px;
	margin-top: 20px;
	font-weight: normal;
	display: block;
	}

.bestefilme #main h2.Kinoreihe

	{margin-top: 60px;}



#main p.smaller

	{
	margin-top: 0px;
	margin-bottom: 10px;
	font-size: 14px;
	}


/* Filmseiten */


/* story */

.bestefilme #main h4.story

	{margin: 10px, 0px, 10px, 0px;
	font-weight: bold;
	font-size: 100%;} 


.bestefilme #main p.story

	{margin-top: 0px;} 


/* Ende story */


/* Filmseiten */



/* CSS zum Einbinden von Videos */

.iframe

	{
	
	width: 100%;
	max-width: 853px;
	height: 360px;
	}

.iframe-vorschau

	{
	width: 100%;
	max-width: 700px;
	height: 360px;
	}



/* CSS Mobil */



@media screen and (max-width: 980px)


	{

/* Banner - Werbung */


.bestefilme #main div.buchcover-div


	{
	margin-top: 0px;
	margin-bottom: 0px;
	}

.bestefilme #main img.buchcover-img

	{
	max-width: 250px;
	}

/* CSS zum Einbinden von Videos */


.iframe

	{
	width: 100%;
	height: 360px;
	}

.iframe-vorschau


	{
	width: 100%;
	height: 360px;
	}



.bestefilme #main h1

	{
	font-size: 40px; font-size: 2.265rem;
	}


.bestefilme #main h1.kategorie

	{font-size: 28px; font-size: 1.75rem;}



.bestefilme a.button-start

	{
	margin-left: 10px !important;
	}

.bestefilme #main a.button, .bestefilme a.button

	{
	font-size: 14px;
	margin-bottom: 20px;
	margin-top: 0;
	padding: 0.3rem 0.6rem;}

.top	{overflow: hidden}


/* CSS für die Navigation Komoedien, Liebesfilm, Drama */

.navigation

	{margin-bottom: 5px !important;}


	}


@media screen and (max-width: 480px)

	{

.bestefilme #main img.buchcover-img


	{
	max-width: 200px;
	}


.iframe

	{
	width: 100%;
	height: 200px;
	}

.iframe-vorschau


	{
	width: 100%;
	height: 200px;
	}


	}




.bestefilme div.iframe

	{margin-bottom: 40px;}





.bestefilme #main li

	{display: block;
	font-size: 18px; 1.125rem;}




/* Ende CSS Beste Gute Filme */


/* Komödie */


.komödien #main #ü10 a.button, .komödien #main #ü10 a.button, .komödien #main #t1 a.button 

	{	
	margin: 10px 0 0px 0px;
	} 


/* CSS Liebesfilme */


.liebesfilme div.iframe

	{margin-bottom: 80px;}



/* Ende - CSS Liebesfilme */




#footer	p

		{
		color: rgb(109,109,109);
		font-size: 12px; font-size: .875rem;
		display: inline;
		}


.footercontent

		{border-top: 1px solid #ccc;
		padding-top: 15px;
		}


#header .inside, #nav, #footer

		{margin: 10px;}

#header .inside, #nav, #main, #footer

		{padding: 10px;}



.grid1 {width: 6.25%;}

.grid2 {width: 14.583333333333%;}

.grid3 {width: 22.916666666667%;}

.grid4 {width: 31.25%}

.grid5 {width: 39.58333333333%}

.grid6 {width: 47.916666666667%;}

.grid7 {width: 56.2%}

.grid8 {width: 64.583333333333%;}

.grid9 {width: 72.916666666667%;}

.grid10 {width: 81.25%;}

.grid11 {width: 89.583333333333%;}

.grid12 {width: 97.916666666667%;}


.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12

	{
	float: left;
	margin-right: 1.041666666667%;
	margin-left:  1.041666666667%;
	margin-top: 20px;
	margin-bottom: 20px;
	overflow: hidden;
	}

.grid25

	{
	width: 33.3333333333333%;
	float: left;
	}



@media screen and (max-width: 980px)

	{

body	{
	max-widht: 98%;
	}

#header h1, #header h2

	{display: block;}

#header h2

	{
	margin: 5px 0;
	padding: 0;
	}

#header h3

	{
	font-size: 1rem;
	margin-left: 0;
	padding: 0;
	}

#header ul

	{margin-left 0;}

#header li

	{margin: 5px 000;
	padding: 0;}


#nav	{
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	}


#nav li

	{padding-left: 0;}

.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12  

	{float: none !important;
	width: auto !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	}

grid25

	{min-width: 110px;}

#header .inside, #nav, #footer, #main

	{margin-right: 0;
	margin-left: 0;
	}




.news #main div[id*="a"] h3 


	{font-size: .9375em; 
	padding: .1em 1.em .1em 0; 
	border-top: 0; 
	border-radius: 0.2em;}


.news #main div[id*="a"] h3 a 

	{margin-left: 0em;}


.news #main div[id*="a"]:not(:target) div.artikelinhalt

	{display: none;} 


.articel ul
		{margin: 0 0 5px 0;}


#main		h3

		{border-top: 0;}


.artikelimg

	{
	float: none;
	width: 90%;
	max-width: 100%;
	}


.shop #film1, .shop #film2, .shop #film3

	{float: left;
	min-width: 149px;
	margin-right: 20px !important;
	}

.shop #film1 ul

	{clear: both;}

#films1 .articel h3, #films2 .articel h3, #films3 .articel h3

	{font-size: 1rem;}

.shop #main li

	{
	font-size: 14px;
	font-size: .875rem;
	margin: 0;}


}