/* @charset "UTF-8";
 CSS Document */

@font-face {
	font-family: 'A';
	src:	url('../f/A/A.eot');
	src:	url('../f/A/A.woff') format('woff'),
			url('../f/A/A.ttf') format('truetype');
}

html, body { height: 100%; }												/*	 für footer*/

html { overflow-y: scroll; }												/* damit Seite nicht springt, Scrollbar einblenden */
body {
	background-color: #272521;   											/* im reset ändern nicht vergessen! */
	background-image: url("../img/papier.png");						
	font-family: 'A', Arial, Helvetica, sans-serif;
	color: #8c8576;
}

a, nav ul#haupt li a { color: #8c8576; }

a:hover, nav ul#haupt li a:hover, .hover_aktiv, ul#haupt li a.hover_aktiv, footer p.footer_kontakt a:hover, ul#subnavi_rest li a.hover_aktiv { color: #8f1a1a; cursor: pointer; }

nav ul#haupt li a.hover_an:hover, ul#subnavi_rest li a.hover_an:hover, p.link_menue a.hover_an:hover, footer a.hover_an:hover, article a.hover_an:hover { color: #8c8576; } /* sobald alle NEXT getauscht --> sind getauscht - footer p.next a.hover_an:hover -- fehlt es?*/

img { color: #514b40; } /* alt-Tag Schriftfarbe*/


div#wrapper { margin: 0 auto; width: 714px;
				height: auto; min-height: 100%;  }										/* für footer*/


/* - - - - - - - - STARTSEITE - - - - - - - - border: 1px solid green; */

div#startseite {
    position: absolute;
    height: 100%; width: 100%;
    background: url(../img/start.jpg) no-repeat center center;
	background-size: cover;
    top: 0; left: 0;	
}

div#startseite ul#start { 
	text-align: center;
	margin: 12% auto;
	max-width: 700px;
	text-transform: uppercase;
	font-size: 130%;
	letter-spacing: 0.18em;
	color: #f2eadb;
}

div#startseite ul#start li#mobil_illu { display: none; }

div#startseite ul#start li#logo_start { width: calc(100% - 85px); height: 110px; margin-right: 75px; background: url(../img/logo_start.png) no-repeat center 0; }
div#startseite ul#start li { display: inline-block; padding: 0 22px; }
div#startseite ul#start li.start_de { padding-right: 35px; }


div#startseite ul a { color:#f2eadb; }				/* Farbe Hauptnavi */
div#startseite ul a:hover { color:#555148; }

div#startseite div {
	width: 700px;
	padding-right: 22px;  /* für optische mitte*/
	position:absolute;
	margin-left: auto;
	margin-right: auto;
	top: 80%; 
	left: 0;
	right: 0;
	text-align: center;
	font-size: 130%; letter-spacing: 0.08em;
}
div#startseite div p a { color: #474435; }				/* Farbe Email/Sprache */
div#startseite div p a:hover { color: #c5bfb2; }

div#startseite div p.lang { margin-top: 35px; color: #28251e; font-size: 71%; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em; }  /*  */

 
 /* - - - - - - - - HAUPTNAVI - - - - - - - - border: 1px solid darkgreen; */

header { padding-top: 50px; height: 114px; text-transform: uppercase; }
nav { text-align: center; }

nav ul#haupt li#mobil_illu { display: none; }

nav#nav_de ul#haupt { padding-left: 14px; }
nav#nav_en ul#haupt { padding-left: 27px; }


div#logohaus { max-width: 714px; height: 72px; }
a#logo { 
	display: block;
	background: url(../img/logo.png) no-repeat center 0;
  	width: 150px;  height: 51px;
  	margin: 0 auto;
}
nav ul#haupt li { 
	display: inline-block;
	padding: 0 18px;
	margin-top: -15px;
	font-size: 90%; letter-spacing: 0.2em;
}


/* - - - - - - - - SUBNAVI - - - - - - - - border: 1px solid yellow;     */

div#subnavi ul { 
	position: relative;
	width: 250px;
	display: inline-block; vertical-align: top; 
	margin-top: 34px;
	font-size: 80%; letter-spacing: 0.07em;
}

div#subnavi ul li { height: 20px; }

ul#subnavi_rest { left: 736px; }
ul#subnavi_rest_ani { left: 486px; }
ul#subnavi_ani { left: -270px; text-align: right; }


div#subnavi ul li.abstand { margin-top: 11px; }

ul#subnavi_mobil { display: none; }

/* - - - - - - - - ÜBERSICHT PROJEKTE - - - - - - - - border: 1px solid pink;     */

div#uebersicht { margin: 0 auto; min-width: 714px; }
.abstand_uebersicht { clear: left; height: 75px; }  /* nur für animation*/

.gallerie {float: left; height: 128px; margin: 0 12px 12px 0; }
#uebersicht div:nth-child(3n+3) { margin-right: 0 !important;}

.gallerie_showreel { height: 128px; width: 230px; margin: 0 auto;}

#uebersicht a { font-size: 90%; text-align: center;	color: #b3ada1; letter-spacing: 0.07em; }
#uebersicht a img {	 border-radius: 2px; width: 230px; height: 128px;}


 /* --  hover BILDUNTERSCHRIFT MIT opacity  -- */
.gallerie a span, .gallerie_showreel a span { display: none; }
.gallerie a:hover span, .gallerie_showreel a:hover span {
	display: block;
	position: relative; top: -30px;
	width: 230px;
	padding: 6px 0 9px 0;
	background: #272521;
	opacity: 0.7;
	filter: alpha(opacity=70); /* For IE8 and earlier */
}


/* - - - - - - - - PROJEKT: ANIMATION / ILLUSTRATION / GRAPHIC DESIGN - - - - - - - - border: 1px solid red;       border: 1px solid yellow;        */

.re  { padding-left: 14px; }   /* vorher 17px auch in article darunter !!! */

article { padding-left: 14px; margin-bottom: 36px; text-align: center; letter-spacing: 0.05em; line-height: 120%; }
.li, article.video { padding-left: 0 !important; }

article.text { font-size: 115%; text-align: left; line-height: 130%; letter-spacing: 0.02em; }
.txt_mittig { text-align: center }																					

article img { display: block; margin: 0 auto; }
article img, article div.eins img, article div.zwei img  { padding-bottom: 12px; }

article div.eins, article div.zwei { margin-bottom: 20px;}
article div.videowrapper { margin-bottom: 36px; }
.video-daumenkino { margin: 0 auto; width: 500px;}

article div.zwei_schmal  { padding-bottom: 20px; }   /* warum nicht oben bei margin??? */

article p, article h1, article h2, article h4 { padding: 0 120px; margin-bottom: 10px; }
article h2.schmal { padding: 0 50px !important; }
article h2.schmal2 { padding: 0 80px !important; }

h1 { font-size: 115%; line-height: 120%; text-transform: uppercase; letter-spacing: 0.1em; }
h1 span { text-transform: lowercase; }
h2 { font-size: 100%;  line-height: 120%;  }
h4 { font-size: 115%; line-height: 120%; letter-spacing: 0.07em; }

p.client { letter-spacing: 0.06em; }
p.client span { text-transform: uppercase; font-size: 75%; letter-spacing: 0.2em; }
.trennung { padding-top: 18px; /*color: #a42222*/ }														/* Punkt vor Verweis zu Shop */

.link_menue a { text-transform: uppercase; font-size: 80%; letter-spacing: 0.12em; }

h3, article p.festival { padding: 0 55px !important; font-size: 100%; line-height: 132%; }							/* Festivals */
h3 span, p span.bull, .bull, .rot, ul li label p i { color: #a42222; } 												/* bull rot*/
h3 span.uppercase { text-transform: uppercase; color: #8c8576; font-size: 90%; letter-spacing: 0.15em; }
.breiter, h3 p.breiter { padding: 0 0 !important; /*border: 1px solid red;*/ }  									/*    anschauen     */

.abstand_bottom { margin-bottom: 10px; }
.abstand_top { margin-top: 9px; }
.abstand_weniger  { margin-bottom: 5px; }

article div.zwei { min-width: 714px; word-spacing: 0; line-height: 0; }
article div.zwei img, article div.zwei_schmal img { display: inline-block; padding-right: 12px;}
article div.zwei img:nth-child(2n+2), article div.zwei_schmal img:nth-child(2n+2) { padding-right: 0; }

article div.zwei_schmal { margin: 0 auto; max-width: 400px; word-spacing: 0; line-height: 0;  }

div.swusch {
	display: block;	background: url(../img/swusch.png) no-repeat center 0 ;
	width:100%; height: 16px;
	margin-bottom: 36px; 
}

p.next { display: inline-block; text-transform: uppercase; font-size: 75%; letter-spacing: 0.12em; line-height: 115%; }
/*footer a.next { text-transform: uppercase; font-size: 80%; letter-spacing: 0.1em; }*/  									 /*    ???????    */

p.oben_mobil { display: none; }


/* - - - - - - - - 4 Bilder  - - - - - - - - */


.mittig { text-align: center; }																									/* !!!!!  */

ul.behind { border-top: 1px solid #534f46; padding-top: 36px; width: 714px; word-spacing: 0; line-height: 0; }			/* word-spacing: 0; line-height: 0; -- !!! damit kein abstand ist beim img bei display: inline-block -- */
ul.behind li { position: relative; width: 169px; display: inline-block; vertical-align: top; margin: 0 12px 12px 0; }
ul.behind li:nth-child(4n+4), ul.behind li:last-child { margin-right: 0 !important;}

div.video_kl { margin: 0 auto; width: 500px; }

/* - - - - - - - - BEHIND THE SCENCES GALLERIE Button = 8 = BILDER - - - - - - - - */

#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, label span { display: none; }

#img1:checked + label span, #img2:checked + label span, #img3:checked + label span, #img4:checked + label span, #img5:checked + label span, #img6:checked + label span, #img7:checked + label span, #img8:checked + label span {
	display: block;
	position: absolute; 
	background: #272521;
	padding: 12px;
	z-index: 99;
	bottom: -57%;
	left: 50%;
  	transform: translateX(-50%);		/* grosses Bild unabhängig von Größe genau über kleinem Bild */
}

label p { padding: 15px 5px 5px 5px; text-decoration: none; color: #8c8576; text-align: center; line-height: 125%; }
label span p.Babc { letter-spacing: 0.05em; word-spacing: 0.05em; }								/* breakfast-abc */
label p em.auszeichnung { color: #b2a894; text-transform: uppercase; line-height: 100%; } 		/* breakfast-abc */

label { cursor: pointer;
	-webkit-user-select: none;					/* Safari 3.1+ - - - -  Auswahl verbieten*/
    -moz-user-select: none;						/* Firefox 2+ */
    -ms-user-select: none;						/* IE 10+ */
    user-select: none;							/* Standard syntax */
}

ul.behind li.ende0, ul.behind li.leerHalb, ul.behind li.leerHalb2, ul.behind li.leer1, ul.behind li.leer2, ul.behind li.leer3 {
	-webkit-user-select: none;					/* Safari 3.1+ - - - -  Auswahl verbieten*/
    -moz-user-select: none;						/* Firefox 2+ */
    -ms-user-select: none;						/* IE 10+ */
    user-select: none;							/* Standard syntax */
}

ul.behind li.leer01 { height: 92px; width: 266px; }										/* li für wegga = = = für mitte 10 px grösser */
ul.behind li.leer02 { height: 92px; width: 246px; }										/* 				= = = für mitte 10 px kleiner */
ul.behind li.leerHalb { height: 92px; width: 79px; }
ul.behind li.leerHalb2 { height: 92px; width: 79px; margin-left: 12px; }															
ul.behind li.leer1 { height: 92px; width: 169px; }															
ul.behind li.leer2 { height: 92px; width: 349px; }
ul.behind li.leer3 { height: 92px; width: 530px; }



/* - - - - - - - - DAUMENKINO - - - - - - - - */

.zwei_dk img { display: inline-block; padding: 25px 25px; /*width: 250px; height: auto;*/ }
.versalien { text-transform: uppercase; letter-spacing: 0.1em; font-size: 95%; } 


/* - - - - - - - - SHOP - - - - - - - - */

article.shop {  }

ul.angaben { margin-top: 25px; }
ul.angaben_oben { margin-top: 0; }
ul.angaben li, ul.angaben_oben li { padding-bottom: 6px; font-size: 105%; }
img.obenmehr { margin-top: 20px; }

.preis { font-size: 120%; padding: 20px 0 15px 0; }
.bestellung { margin-top: 25px; }
.groesser  { font-size: 110%; margin-top: 0;}
.zahl-gross { font-size: 120%; }
.kleiner { font-size: 75%; }

.zwei_shop img { display: inline-block; padding: 25px 10px; /*width: 250px; height: auto;*/}

ul#shop { margin: 0 auto; width: 714px; }
ul#shop li { display: inline-block;  text-align: center; width: 237px; height: 180px; padding-bottom: 30px; }				/* Breite = 714px/3=   xxx - paddding   237*/
/*ul#shop li:last-child {float: left; }*/																	/* wenn nur Artikel in letzter Reihe */
ul#shop li img { margin-bottom: 20px; width: 80%; }
ul#shop h1 { font-size: 100%; margin-bottom: 3px; }
ul#shop li p { padding-bottom: 5px; font-size: 108%; letter-spacing: 0.03em; }

ul.post { }
ul.post li { height: 35px; text-transform: uppercase; letter-spacing: 0.08em; }
ul.post li h1 { margin-top: 20px; }

p a.hover_rot:hover { color: #a42222; }


a.history_abstand { line-height: 175%; }


/* - - - - - - - - KONTAKT - - - - - - - -  border: 1px solid red; */

div#adresse ul, div#partner ul { width: 100%; display: inline-block; text-align: center; letter-spacing: 0.08em; }

div#adresse { margin-bottom: 50px; font-size: 120%; }
div#adresse ul li { margin-bottom: 15px; }
div#adresse ul li.wolf { text-transform: uppercase; letter-spacing: 0.15em; padding-bottom: 2px; padding-left: 2px; }
div#adresse ul li span { text-transform: uppercase; font-size: 75%; letter-spacing: 0.3em; padding-left: 15px;} 
div#adresse ul li span.rot { color: #a42222; } 
div#adresse ul li.wolf span { color: #a42222; padding-left: 0; } 

div#adresse ul li.socialmedia { margin: 40px 0 0 5px; }
div#adresse ul li.socialmedia a#facebook { margin-left: 5px; }
a#vimeo {	display: inline-block; background: url(../img/matzl_vimeo.png) no-repeat 0 0;
			width: 35px; height: 35px; }
a#vimeo:hover {	background: url(../img/matzl_vimeo_a.png) no-repeat 0 0; }
a#facebook {	display: inline-block; background: url(../img/matzl_facebook.png) no-repeat 0 0;				 /* abstand zu youtube */
				width: 35px; height: 35px; }
a#facebook:hover { background: url(../img/matzl_facebook_a.png) no-repeat 0 0; }

div#partner ul { padding-left: 35px;
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
	-moz-column-count: 3; /* Firefox */
	column-count: 3; }

div#partner ul li { text-align: left; margin-bottom: 10px; font-size: 110%; }
div#partner h4 { text-align: center; text-transform: uppercase; margin-bottom: 24px;  font-size: 110%; padding: 45px 0 15px 0; letter-spacing: 0.4em; border-top: 1px solid #534f46; }
div#partner h4 span { color: #a42222; }  



ul#copyright { text-align: center; padding: 0 50px; letter-spacing: 0.02em; line-height: 130%; margin: 75px 0; }
ul#copyright li.jahr { margin: 24px 0; }


/* - - - - - - - - FOOTER  - - - - - - - - */

div.footer_hoehe { padding-bottom:188px; }  		/* zieht die Höhe des Footers innerhalb des wrapper ab */

footer {
	margin: 0 auto;
	height: 212px;									/* Höhe des Footers */
	margin-top: -212px;								/* Höhe des Footers */ 
	text-align: center;
}

footer p.link_menue { padding-top:40px; margin-bottom: 20px; font-size: 90%; letter-spacing: 0.2em; text-transform: uppercase; }
footer p.link_menue a.gross { font-size: 100%; letter-spacing: 0.2em;}   											/* anschauen !!!!! */
footer p.footer_kontakt a { font-size: 100%; color: #767169; letter-spacing: 0.08em; }								/* wolf zeigen farbe dünkler !!! */
footer p span { color: #a42222; letter-spacing: 0.3em; } /* bull rot*/
footer div.swusch_footer { margin: 20px 0; height: 16px; }
footer div.swusch_footer { 
	display: block;	background: url(../img/swusch.png) no-repeat center 0;
	width: 100%; height: 16px;  }
footer div.swusch_footer_ohne_next { 
	display: block;	background: url(../img/swusch.png) no-repeat center 48px;
	width: 100%; height: 64px; 
	padding-bottom: 20px;  }
	
/* - - - - - - - -  - - - - - - - -  - - - - - - - - */

.nein_w, a.nein_w, span.nein_w, br.break_mobil { display: none; }

.no_break { white-space: nowrap; }

.clear { clear: both;}