@charset "UTF-8";
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800';


::-webkit-scrollbar { 
    display: none; 
}
/*html {-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto;-ms-hyphens: auto; hyphens: auto;}*/
body { margin:0; padding:0; font-size:20px; font-family: 'Open Sans', sans-serif; color:#246541; font-weight:100; background:url(images/icons/back-hell.png); background-repeat:repeat;}
img {border:none;}
a {color:#246541; text-decoration:none; border:none;}
a:hover {color:#7dad91;}
a:visited {color:#246541;}
small {font-size:80%; line-height:60%;}
h1 {text-align:center; line-height:1em; font-size:200%; font-weight:100; font-variant:small-caps; text-transform:lowercase; letter-spacing:4px; 
	margin:0; padding:0; margin-top:1em; margin-bottom:.5em;}
.next { background-image:url(images/icons/right-big.png); background-repeat:no-repeat; 
	height:60px; width:20px; right:20px; border:none; background-color:transparent; position:absolute; top: 59vh; z-index: 40;}
.prev { background-image:url(images/icons/left-big.png); background-repeat:no-repeat; 
	height:60px; width:20px; left:20px; border:none; background-color:transparent; position:absolute; top: 59vh; z-index: 40;}
button {cursor:pointer; background-color:transparent; border:none; }
.clear {clear:both }

header  { position:fixed; color:#fff; width: 100vw; border-bottom: thin solid #246541;  z-index: 70; height:90px; top: 0px; background-color:#fff;}
#navbar { float:left; width:85%;}
.navbar-icon { float:left; text-align:center; line-height:65px; padding-top:20px; margin-left:3%; }
.navbar-icon a { font-weight:300; font-variant:small-caps; text-transform:lowercase; letter-spacing:4px; font-size:20px;}
.navbar-icon a:hover {color:#7dad91;}
.menu-icon {display:none;}
.logo { padding-top:10px; float:left; width:6%; text-align:center;}
.logo img { margin-left:3%;}

.wrapper { max-width:100vw; min-width:100vw; overflow:hidden; }
.section { min-height: 100vh;  max-width:100%; min-width:100%; display:none; padding-bottom:5em; background: #fff; position:absolute; overflow: hidden;}
.aktiv {display:inline !important; }

.panorama, .panorama-wrapper, .panorama-image { height:40vh; }
.panorama {width:100vw; margin-top:90px; overflow:hidden; background:url(images/icons/back.png); background-repeat:repeat;}
.panorama-wrapper { width:auto; position:relative;}
.panorama-image { width:100vw; position: absolute; overflow:hidden;}
.panorama-image img { min-width:100vw; min-height:40vh; position: relative; height:40vh; width:100vw; object-fit:cover; overflow: hidden;}

.slide { min-height:100vh; width:100vw; float:left; margin-bottom:5em;}
.site-text {width:66%; margin:0 auto; font-size: 100%; line-height: 1.75em;}
.site-text ul {list-style:none; margin:0; padding:0;}
.site-text ul li:first-child {border-top: thin solid #246541;}
.site-text ul li {border-bottom: thin solid #246541; font-size:85%;}
.site-text strong {font-weight:400;}
.drittel {width:30.3333%; float:left; margin-bottom:2em; padding-right:3%;}
.halb {width:45%; float:left; margin-bottom:2em; padding-right:5%;}

.sortiment-bilder { width:50%; float:left; }
.sortiment-bilder img {width:90%; height:auto; margin-top:1em;}
.sortiment-text {  width:50%; float:left; }

.produnktion-draw { width:50%; float:left; }
.produnktion-draw img { width:90%; height:auto; }
.produnktion-text {  width:50%; float:left; }

input, textarea {height:2em; margin-bottom:.5em; border: thin solid #7dad91; font-size:1em; color:#555; padding-left:.5em; width:95%;}
textarea {height:8em;}
.senden {background-color:#fff; width:47.5%;}
footer {position:fixed; bottom:0px; height:40px; width:100vw; background-color:#fff; border-top: thin solid #246541; display:none;}
footer button { height:20px; float:right; margin-right:0px;}
footer button img { height:100%;}

#home { background-color:transparent; background:url(images/home-cover.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;}
#home .site-text { margin-top:25vh; font-size:200%; line-height:1.75em; text-align:center; color:#fff; }
#map {background:none;}
#sortiment .slide-wrapper { width:500vw; margin-left:0; }
#produktion .slide-wrapper { width:700vw; margin-left:0; }
#impressum {display:none; width:100vw; height:90vh; position:fixed; overflow:scroll; z-index: 50; top:15vh; background-color: #222; color:#888; font-size:80%;} 

@media only screen and (orientation : landscape) and (max-width : 700px){
		.panorama, .panorama-wrapper, .panorama-image {  }
}

@media only screen and (orientation : portrait) {
		.panorama-image img { }
}

@media only screen and (max-width : 450px)
{
	body { font-size:15px;}
	header { height:55px;}
	.logo { padding-top:3px;}
	.logo img { height:50px;}
	#navbar { float:right; width:50%; padding-top:5px;}
	.menu-icon {display:inline; height:50px; width:50px; float:right; margin-right:5px; margin-bottom:1px;}
	.menu-icon img {width:100%; height:auto;}
	.navbar-icon { display:none; width:100vw; float:left; text-align:center; line-height:14px; padding: 0px; margin: 0; height: 30px; margin-left: -100%; 
		background-color:#fff; border-bottom: thin solid #246541;}
	.navbar-icon a {font-size:16px;}
	.panorama {margin-top:55px;}
	.site-text {width:85%;}
	.site-text .drittel {width:95%; margin-bottom:24px; }
	#kontakt .drittel { width:45%;}
	.next { background-image:url(images/icons/right.png); height:30px; width:10px; right:10px; }
	.prev { background-image:url(images/icons/left.png); height:30px; width:10px; left:10px; }
	.sortiment-bilder { width:100%; float:left; }
	.sortiment-bilder img {width:100%; }
	.sortiment-text {  width:100%; float:left; }
	.produnktion-draw {text-align:center;}
	.produnktion-draw img   { width:70%; }
	.produnktion-draw, .produnktion-text { width:100%; }
	footer { display:none;}
	

}

@media only screen and (min-width : 450px) and (max-width : 630px)
{
	body { font-size:14px;}
	header { height:35px;}
	.logo { width:10%; padding-top:2px;}
	.logo img { height:30px;}
	#navbar { padding-top:5px;}
	.navbar-icon { float:left; line-height:20px; padding-top:4px; font-weight:100;}
	.navbar-icon a {font-size:11px; letter-spacing:2px;}
	.panorama {margin-top:35px;}
	.site-text .drittel {width:45%; }
	#kontakt .drittel { width:28.33333%;}
	.produnktion-draw { width:60%; }
	.produnktion-draw img { width:90%; }
	.produnktion-text {  width:40%;  }
	footer { display:none;}
}

@media only screen and (min-width : 630px) and (max-width : 750px)
{
	body { font-size:14px;}
	header { height:50px;}
	.logo { width:10%; padding-top:5px;}
	.logo img { height:42px;}
	#navbar { padding-top:15px; width:83%;}
	.navbar-icon { float:left; line-height:20px;  padding-top:4px; font-weight:100;}
	.navbar-icon a {font-size:15px; letter-spacing:3px;}
	.panorama {margin-top:50px;}
	.site-text .drittel {width:47%; }
	.produnktion-draw { width:60%; }
	.produnktion-draw img { width:90%; }
	.produnktion-text {  width:40%;  }
}

@media only screen and (min-width : 750px) and (max-width : 900px)
{
	body { font-size:15px;}
	header { height:60px;}
	.logo { width:10%; padding-top:5px;}
	.logo img { height:52px;}
	#navbar { padding-top:20px; width:83%;}
	.navbar-icon { float:left; line-height:25px; padding-top:4px; font-weight:100;}
	.navbar-icon a {font-size:14px; letter-spacing:3px;}
	.panorama {margin-top:60px;}
	.site-text .drittel {width:47%;}
	.produnktion-draw { width:60%; }
	.produnktion-draw img { width:90%; }
	.produnktion-text {  width:40%;  }
}


@media only screen and (min-width : 900px) and (max-width : 1100px)
{
	body { font-size:16px;}
	header { height:70px;}
	.logo { width:10%; padding-top:5px;}
	.logo img { height:60px;}
	#navbar { padding-top:25px; width:85%;}
	.navbar-icon { float:left; line-height:30px;  padding-top:4px; font-weight:100;}
	.navbar-icon a {font-size:20px; letter-spacing:4px;}
	.panorama {margin-top:70px;}
	.site-text .drittel {width:47%; }
}


@media only screen and (min-width : 1100px)
{
	body { font-size:16px; max-width:1000px; margin: 0 auto; }
	main, header, .wrapper, .section, .panorama, .panorama-wrapper, .panorama-image, .panorama-image img, .slide, #impressum { max-width:1000px; width:1000px; min-width:1000px;}
	header { height:70px;}
	.logo { width:10%; padding-top:5px;}
	.logo img { height:60px;}
	#navbar { padding-top:25px; width:85%;}
	.navbar-icon { float:left; line-height:30px; padding-top:4px; font-weight:200;}
	.navbar-icon a {font-size:20px; letter-spacing:4px;}
	.panorama {margin-top:70px;}
	.site-text .drittel {width:47%; }
}