/**
 * @license
 * MyFonts Webfont Build ID 3035722, 2015-06-02T16:51:16-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: RotisSansSerifStd-Light by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/rotis-sans-serif/std-45-light/
 * 
 * Webfont: RotisSemiSansPro-Light by Monotype 
 * URL: http://www.myfonts.com/fonts/mti/rotis-semisans/pro-45-light/
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3035722
 * Licensed pageviews: 250,000
 * Webfonts copyright: Font software Copyright 1998, 2007 Monotype Imaging Inc. All rights reserved.
 * 
 * © 2015 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/2e524a");
@font-face {font-family: 'RotisSansSerifStd-Light';src: url('../webfonts/2E524A_0_0.eot');src: url('../webfonts/2E524A_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/2E524A_0_0.woff2') format('woff2'),url('../webfonts/2E524A_0_0.woff') format('woff'),url('../webfonts/2E524A_0_0.ttf') format('truetype');} 
@font-face {font-family: 'RotisSemiSansPro-Light';src: url('../webfonts/2E524A_1_0.eot');src: url('../webfonts/2E524A_1_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/2E524A_1_0.woff2') format('woff2'),url('../webfonts/2E524A_1_0.woff') format('woff'),url('../webfonts/2E524A_1_0.ttf') format('truetype');}

/* pre-HTML5-Browser treat unknown elements as display: inline. The following elements are block-elements in HTML5 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
/* --- RESET --------------------------------------------------------------------------------- */
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,font,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{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}.clearfix {display:inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}

html { overflow-y: scroll; }
body {
/*	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;*/

	font-family: RotisSansSerifStd-Light;
	font-weight: normal;
	font-style: normal;
	font-size: 19px;
	line-height: 24px;
	
	padding: 0;
	margin: 0;
}

/* --- ALLGEMEINES ---------------------------------------------------------------------------------------- */

.versal { text-transform: uppercase; }
.spacer { margin-bottom: 20px; }
.semibold {
	color: #555!important;
	letter-spacing: 1px;
}
.nounderline, .nounderline a { text-decoration: none; }

/* --- GRUNDSTRUKTUR --------------------------------------------------------------------------------------- */

#wrapper { position: relative; width: 960px; margin:0 auto; }
#left, #right { position: absolute; width: 480px; }
#left {  top: 50px; left: 0; margin-bottom: 40px; }
#right { top: 0; left:480px;}

#logo a, #startseite #logo { 
	display: block;
	width: 280px;
	height: 58px;
	font-size: 0;
	text-indent: -100%;
	background: url(../img/logo_s.gif?v=2) no-repeat;
	background: url(../img/logo.png) no-repeat 0 0/cover;
	margin-left: 74px;
}

/* --- NAVIGATION ------------------------------------------------------------------------------------------ */

#mainnav { margin-top: 50px; font-size: 14px; }
#mainnav nav { float: left; }
#mainnav nav li a {	
	font-family: RotisSemiSansPro-Light; 
	font-weight: normal;
	font-style: normal;
	letter-spacing: 1px;
	font-size: 16px;
	color: #666;
	text-transform: lowercase;
	text-decoration: none;
}
#mainnav nav li a.versal { text-transform: uppercase; }
#mainnav nav li.current a, #mainnav nav a:hover { color: #000; }

#topnav { width: 160px; margin-right: 1em; padding-top: 0; padding-right: 1em; text-align: right; border-right: 1px solid #555; }
#subnav { width: 280px; margin-bottom: 50px; min-height: 136px; }
#subnav .detailslink { display: none; margin-left: 1em; color: #bbb; }
#subnav li.current .detailslink { display: inline; color: #5B5; }
#subnav li.current .detailslink:hover { color: #555; }
#subnav li.current .detailslink.current { display: inline; color: #555; }

/* --- PRODUKTTEXT ----------------------------------------------------------------------------------------- */

#infotext {
	position: relative;
	width: 280px;
	margin-left: 224px;
	margin-top: 50px;
	border-left: 1px solid #555;
	padding-left: 1em;
}
#infotext h2 {
	color: #000;
	font-size: 30px;
	line-height: 40px;
	padding-bottom: 5px;
	margin-bottom: 0.5em;
	font-weight: normal;
}
#infotext.nosubnav h2, #infotext h2.noborder { border: none; }
#infotext p { padding: 0 0 20px 0; color: #444; }
#infotext a { color: inherit; }

#infotext .detailslink {
	display: block;
	position: absolute;
	top: 50px;
	right: -20px;
	width: 20px;
	height: 53px;
	text-indent: -100%;
	font-size: 0;
	overflow: hidden;
	background: url(../img/pfeil_rechts.png) no-repeat;
}
#infotext .detailslink:hover {
	background-position: -20px 0;
}

#infotext .text li { color: #444; list-style-type: disc; list-style-position: outside; margin-left: 1em; }


/* --- PRODUKTBILDER --------------------------------------------------------------------------------------- */

#images { position: fixed; }
#images li.img { position: relative; }
#images img { width: 100%; height: auto; }

/* Images SINGLE und SLIDE */
#images.single, #images.slides { top: 0; left: 0; width: 100%; height: 100%; z-index: -10; }
#images.single .overlay, #images.slides .overlay { 
	position: absolute; 
	top: 0; 
	left: 0; 
	height: 100%; 
	width: 50%;
	min-width: 480px; 
	z-index: 99; 
	background: url(../img/white70.png);
	background: rgba(255,255,255,0.7);
}
#images.single img, #images.slides img { position: fixed; }

/* Images MULTI und HALF*/
#images.multi, #images.half { width: 480px; /* overflow: hidden; */ }
#images.multi ul {
	position:relative;
	/*height: auto;*/
    list-style: none;
    margin: 0;
    padding: 0;
}

#images.multi li span.description, article.bilder .galerie_breit p {
	display:block;
	position:absolute;
	bottom:5px;
	left:0;
	width:100%;
	padding:4px 10px;
	color:#444;
	background: url(../img/white70.png);
}
#images.multi ul, #images.multi li, #images.multi img { filter:inherit; } /* Workaround für IE BUG: filter:opacity wird nicht vererbt */

/* Textelement in multi */
#images.multi li span.multi_infotext {
	display: block;
	margin: 1em 0;
}
#images.multi li span.multi_infotext .title {
	display: block;
	font-size: 30px;
	line-height: 40px;
	color: #777;
	padding-bottom: 5px;
	font-weight: normal;
}
#images.multi li span.multi_infotext .text {
	display: block;
	color: #888;
}

body.nojs #images.multi, body.nojs #images.half, body.tablet #images.multi, body.tablet #images.half { position: absolute; }
body.nojs #images.multi ul { height: 100%; }

/* Images MULTI Imagenav */
#imagenav a { 
	position: fixed;
	right: 0;
	
	display: block;
	width: 700px;
	height: 20px;
	background: url(../img/pfeile_hochrunter.png) no-repeat center -20px;
	text-indent: 100%;
	overflow: hidden;
}
#imagenav a.up { top: 10px; }
#imagenav a.up:hover { background-position: center 0; }
#imagenav a.dn { bottom: 10px; background-position: center -60px; }
#imagenav a.dn:hover { background-position: center -40px; }

body.nojs #imagenav { display: none; }

/* --- DETAILSEITEN-------------------------------------------------------------------------------------- */



/* --- TEXTSEITE ---------------------------------------------------------------------------------------- */
#textwrapper { float:left; margin-top: 105px; padding-left: 20px; border-left: 1px solid #5B5; }
body.tablet #textwrapper { padding-right: 10px; overflow-x: hidden; }
#textwrapper h1, #textwrapper h2 {
	margin-bottom: .5em;
	letter-spacing: 1px;
	color: #555;
}
#textwrapper h2.extra {
	font-size: 30px;
	line-height: 36px;
	font-weight: normal;
	letter-spacing: 0;
	color: #333;
}
#textwrapper p { color: #555; margin-bottom: 20px; }
#textwrapper a { color: inherit; }

/* --- STARTSEITE --------------------------------------------------------------------------------------- */

body#startseite  #subnav { display: none; }

/* --- BILDER Modul ------------------------------------------------------------------------------------- */

article.bilder { margin-bottom:2em; }
article.bilder .galerie_breit { position:relative; }
article.bilder .galerie_breit img { cursor: pointer; }
article.bilder .galerie_breit img { max-width: 440px; }
article.bilder .galerie_breit p { bottom:0; margin-bottom:0!important; padding:6px; min-height:2em; }
article.bilder .galerie_breit p.hidden { display:none; }
article.bilder .galerie_thumbs a { display:block; float:left; padding:1px; margin-right:5px; border:1px solid #888; line-height:0; }


/* --- KONTAKTFORMULAR ------------------------------------------------------------------------------------- */

#rex-xform label { display: inline-block; width: 100px; }
#rex-xform .formtext input { width: 280px; }
#xform-formular-nachricht label, #xform-formular-datenschutz label, #xform-formular-datenschutz label { display: inline; width: auto; }
#xform-formular-nachricht label { display: block; }
#xform-formular-nachricht textarea { width: 390px; max-width: 100%; }
.form_warning li { margin-bottom: 0.5em; }
.kontakt_danke { font-weight: bold; }

/* --- MEDIAQUERIES ---------------------------------------------------------------------------------------- */

@media screen and (min-width: 1200px) {

	#wrapper { width: 1200px; }
	#left { width: 600px; }
	#right { left: 600px; width: 600px; }
	#textwrapper { margin-top: 145px; }
	
	#topnav { width: 160px; margin-right: 1em; margin-left: 20px; }
	#subnav { width: 350px; }
	#infotext { width: 350px; }
	
	#images.single .overlay, #images.slides .overlay { min-width: 600px; }
	#images.multi, #images.half { width: 600px; }
	
	article.bilder .galerie_breit img { max-width: 560px; }
}

/* min 1400px Breit */
@media screen and (min-width: 1400px) {

	#wrapper { width: 1400px; }
	#left { width: 700px; }
	#right { left: 700px; width: 700px; }
	#textwrapper { margin-top: 165px; }
	
	#topnav { width: 160px; margin-right: 1em; margin-left: 50px; }
	#subnav { width: 400px; }
	#infotext { width: 400px; }
	
	#images.single .overlay, #images.slides .overlay { min-width: 700px; }
	#images.multi, #images.half { width: 700px; }
	
	article.bilder .galerie_breit img { max-width: 660px; }
}

@media screen and (min-width: 1500px) {

	#wrapper { width: 1500px; }
	#left { width: 750px; }
	#right { left: 750px; width: 750px; }
	#textwrapper { margin-top: 165px; }
	
	#topnav { width: 160px; margin-right: 1em; margin-left: 70px; }
	#subnav { width: 400px; }
	#infotext { width: 400px;}
	
	#images.single .overlay, #images.slides .overlay { min-width: 750px; }
	#images.multi, #images.half { width: 750px; }
	
	article.bilder .galerie_breit img { max-width: 710px; }
}

/* Phone / iPhone */
@media screen and (max-device-width: 480px) {
	
	html { min-height: 625px; }
	body { -webkit-text-size-adjust:none; }
	
	#wrapper { width: 440px; padding: 0 20px; margin-top: 40px; }
	#left, #right { position: relative; width: 440px; top: 0; left: 0; }
	
	#logo a, #startseite #logo { position:relative!important; text-align: right; margin: 0; }
	#mainnav { position:relative!important; margin-top: 0!important; padding: 0; line-height: 30px; }
	#topnav, #subnav { float: none!important; width: 440px; border: none; border-bottom: 1px solid #5B5; }
	#topnav { padding-bottom: 0.5em; }
	#subnav { padding: 0.5em 0; text-align: right; min-height:0; }
	#topnav li { display: inline; margin-left: 0.5em; font-size: 18px; }
	#subnav li { float: right; margin-left: 1em; font-size: 18px; }
	#mainnav #subnav li a { color: #444; }
	#mainnav #subnav li.current a { color: #555; }
	#mainnav #subnav li.current .detailslink { color: #5B5; }
	#mainnav #subnav li.current .detailslink.current { color: #555; }
	
	#infotext { float: none; width: 440px; padding: 0; margin: 0; }
	#infotext h2 { border: none; }
	#infotext article { width: 440px; }
	
	#images { position:relative!important; width: 440px!important; margin: 0; padding: 0; }
	#images img { position:relative!important; }
	#images .overlay { display: none; }
	article.text img { max-width: 440px!important; height: auto; }
	article.text pre { white-space: normal!important; }
	
	#textwrapper { float: none; margin: 0; padding: 0; border: none; }
	#textwrapper { font-size: 18px; }

}