@charset "utf-8";
@import "flyoutstyle.css";
/* reset */
	*{max-width:100%;border:0;padding:0;margin:0;box-sizing:border-box;}
/* older browser html5 workaround */
	header, section, footer, aside, nav, article, figure,figcaption{display: block;}
	html{height:100%;}
body {
	font: normal 100% arial, sans-serif;
	line-height: 1.4em;
	letter-spacing: 0.05em;
	font-size: 13px;
	font-weight:300;
	color: #5f5f5f;
	margin:0 auto;
}
/* misc */
	b,strong{
		font-weight:600;
	}
	:focus,:visited{
		outline: none;
	}
	a:link,a:visited {
		cursor:pointer;
		outline:none;
		text-decoration:none;
		color: #5f5f5f;
	}
	a:active, a:hover {
		text-decoration:underline;
		color: #5f5f5f;
	}
	:focus {
		outline: 0px solid transparent !important;
	}
/* Überschriften */
	h1,h2,h3,h4,h5,h6{
		font-size: 1em;
		font-weight:400;
	}
	hr{
		height: 1px;
		margin: 5px 0 0 0;
		display:block;
		clear:both;
		background:#fff;
	}
/* wrapper */
	#wrapper{
		position:relative;
		padding:0 20px 20px 20px;
		_max-width:1900px;
		width:100%;
		margin:0 auto;
	}
	footer{
		padding:20px 20px;
		width:100%;
		margin:0 auto;
	}
	footer ul li{
		padding:0 10px 0 0;
		display:inline-block;
	}
	footer ul li a:link{
		font-size:1em;
		font-weight:400;
	}

/* #start.slideshow 
	.slideshow {width:80%;max-width:1024px;max-height:80%;margin:5em auto 0 auto;text-align:center}
	.slideshow div{margin:0 auto;text-align:center ;max-height:100%;}
	.slideshow div img{max-height:700px;}
	*/

	.slideshow {width:100%;margin: auto;text-align:center}
	.slideshow div{margin:0 auto;text-align:center ;max-height:100%;}


/* section */
	section{
		position:relative;
		float:left;
		display:inline-block;
		width:100%;
		max-width:none;
		overflow-x:show;
		height:auto;
		clear:both;
		margin-top:3em;
	}

/* header */
	header{
		line-height:1.25em;
		font-size:1.25em;
		position:fixed;
		top:0;
		padding-top:5px;
		background:#fff;
		width:100%;
		xopacity:.9;
	}
	header a#company{
		float:left;
		display:inline-block;
		padding:.5em 2em .1em 0em;
		font-weight:400;
		z-index:10000000001 !important;
		font-size:1.5em;
		text-transform:uppercase;
	}
	header a#company:hover{
		text-decoration:none;
	}
	#claim{
		z-index:10;
		clear:both;
		display:block;
		padding:.0em 2em 0em 0em;
		font-weight:100;
		font-size:.6em;
		min-height:10px;
	}

/* nav */
	nav{
		z-index:10;
		padding:.5em 0 0 0;
		min-width:70%;
		float:right;
		display:inline-block;
		position:fixed;
		xright:0px;
		background:#fff;
	}
		nav ul{
			position:relative;
			display:inline;
			list-style-type: none;
			margin:0;
			width:100%;
			float:right;
			display:block;
		}
			nav ul li{
				display:inline-block;
				padding:0 0 1em 2em;
			}
				nav ul li a {
					color: #5f5f5f; !important;
					font-weight:400;
					padding-right:1em;
				}

				nav ul.level_2{
					clear:both;
				}
				nav ul.level_2 li{
					display: block;
				}
				nav ul li li a , nav ul li li a{
					color: #5f5f5f; !important;
					font-weight:400;
					text-decoration:none;
				}
				nav ul li.active>a{
					color: #5f5f5f; !important;
					text-decoration:underline;
				}
	ul ul{
		background:#fff;
		z-index:100;
		margin-top:.5em;
		padding-top:.5em;
	}

	nav.mobile{width:100%;display:none;padding:.5em;margin-top:1em;z-index:1000 !important;background:#fff;}
	nav.screen{width:auto;}
	nav.screen  > ul > li[data-space] {padding:0 2em 1em 0;}

/* button.mobile */
	button.mobile{
		position: fixed;
		top:10px;
		right:15px;
		display:none;
		background:#fff;
		z-index:10001 !important;
		border-radius:50%;
		width:30px;
		height:30px;
		background: #fff url(../pics/hamburger.png) no-repeat center center;
	}
	button.mobile:hover{
		cursor:pointer;
	}

/* article */
	article {
		position:relative;
		width:100%;
		margin:2em auto;
		display:inline-block;
		text-transform:none;
	}
	article a:link,article a:visited,article a:hover,article a:active{
	}
	article hr {
		background: #fff;
		xopacity:.9;
	}
	article img{
		display:block;
		clear:both;
	}
	article aside.pics{
		display:block;
		float:right;
		padding:20px 0 0 20px;
		max-width:50%
	}
	article div.textcontainer{
		max-width:1120px;
	}
	article div.nur_bild{
		max-width:1240px;
	}
	article div.nur_bild p{
		padding-bottom:30px;
	}


/* horizontal scroll gallery */
	#horizontal_scroll{
		position:relative;
		width:5000%;
		max-width:none;
		overflow-x:show;
		padding:15px 10px;
		margin:0 -10px;
	}
	#horizontal_scroll div {
		float:left;
		width:auto;
		position:relative;
		display:inline-block;
		padding: 0;
		margin:0 10px 0 0;
	}
	#horizontal_scroll div:first-child {
		padding-right: 1em;
	}
	#horizontal_scroll div  img{
		height:500px;
		max-height:100%;
		width:auto;
	}
	#horizontal_scroll div  p{
		padding:.5em 0 1.5em 0;
	}

/* masonry */

	#masonry{
		width:100%;
		padding:0;
	}
	.brick{
		 width:33.33%;
		 padding:5px;
		 display:inline-block;
		 float:left;
		 position:relative;
	}
	.brick img{
		 width:100%;
		 height:auto;
	}

	.brick div.hover{
		position:absolute;
		top:0;left:0;
		padding:10%;
		display:none;
		background:transparent url(../pics/opacity.png) repeat 0 0;
		font-size:1.5em;
	}
	.brick:hover div.hover{
		 display:block;
		 height:100%;
		 max-height:100%;
		 overflow:hidden;
		 width:100%;
	}
	.brick div.hover h6{color:#696969;font-size:.7em}
	.brick p{
		 padding-top:5px;
	}
	.brick div.hover p{font-size:.65em}

/* form */
	form{
		clear:both;
		display:block;
		max-width:1200px;
	}
	fieldset{
		border:none;
		padding:5px 0;
		width:100%;
	}

	label{
		border:none;
		display:inline;
		float:left;
		width:25%;
		text-align:left;
	}
	input,textarea{
		display:inline-block;
		float:right;
		padding:0 5px;
		height:2em;
		width:75%;
		border:1px solid #dadada;
		border-radius:5px;
	}
	input[type=checkbox]{width:10px;padding:0;line-height:.1em;margin-top:-0.5em;float:left;}
	textarea{height:4em;}
	form button{
		padding:15px;
		width:auto;
		float:right;
		border:1px solid #dadada;
		border-radius:5px;
	}


	label.inline{float:left;display:inline-block;text-align:right;padding-right:10px}
	input.inline:not([type=checkbox]){float:left;display:inline-block;width:50%;margin:0;text-align:left}


/* mailorder */
	table , td , th{
		border-bottom:1px solid #dadada;
		border-collapse:collapse;

	}
	table th{
		display:none;
	}
	#mailorder  table{
		width:100%;
	}
	#mailorder  th{
		background:#f2f2f2;
		padding:10px 5px;
	}
	#mailorder  th:first-child{
		width:70%;
	}
	#mailorder  th:last-child{
		width:10%;
	}
	#mailorder table tr td{
		padding:10px;
		text-align:left;
		vertical-align:top;
	}

	#mailorder fieldset.summe{
		display:block;
		text-align:right;
	}
	#mailorder fieldset.summe input{
		display:inline;
		border:1px solid red;
		font:inherit;
		background:white;
		width: 50px;
		margin:0 10px;
		padding:0 10px;
		text-align:right;
		float:right;
	}
	#mailorder fieldset.summe span{
		display:block;
		float:right;
	}
	#mailorder p.red{background:orange;padding:25px;}


/* start media queries (orientation: portrait)*/

	@media screen and (max-width: 479px) {
		/* iPhone Portrait width: 320px */
		nav.screen{display:none;}
		button.mobile{display:block;}
		section{padding:0;}
		#masonry{margin:0 -5px;}
		.brick{width:100%;}
		aside.pics{width:100%}
		#wrapper,footer{padding:10px 10px;}
		#horizontal_scroll,#horizontal_scroll div{width:100%;margin:0;}
		#horizontal_scroll div img{height:auto !important;width:100% !important;margin-bottom:15px}
	}
	@media screen and (min-width: 480px) and (max-width: 767px) {
		/* iPhone Portrait width: 320px */
		nav.screen{display:none;}
		button.mobile{display:block;}
		section{padding:0;}
		#wrapper,footer{padding:10px 10px;}
		#masonry{margin:0 -5px;}
	}
	@media screen and (min-width: 768px) and (max-width: 1023px) {
		/* iPad [Portrait + landscape] */
		nav.screen{display:none;}
		button.mobile{display:block;}
		section{padding-left:0px;}
		.brick{width:33%;padding:10px;}
		#masonry{margin:0 -10px;}
	}
	@media only screen and (min-width: 768px) and (max-width: 1024px) {
		/* iPad [landscape] */
		nav.mobile{display:none;}
	}
	@media screen and (min-width: 1025px) {
		/* >ipad portait ,netbooks,  macbook */
		nav.mobile{display:none;}
		.brick{width:25%;padding:10px;}
		#masonry{margin:0 -10px;}

	}
	@media screen and (min-width: 1500px) {
		/* desktop, imac */
		nav.mobile{display:none;}
		.brick{width:20%;padding:10px;}
		#masonry{margin:0 -10px;}
	}