@import url('https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:700');


/* start general ########################### 
**/	

html {
		overflow-y: scroll;  
} 

.clear { clear:both; }

body {
	color: black;	
	background:#3a3e47;
	background:#c3c2c1;
	font-family: 'Open Sans', sans-serif;
	font-size:0.95em;
	}
	
p { 
	line-height:1.35em; 
	text-align:justify;
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
	}
	
/*topline_px span nur temporär zur anzeige device-width*/
#topline_px { width:50px;height:20px;}
#topline_px span {  
		font-size: 1.5em; 
		color:red;
		}
	

#wrapper {
	max-width: 950px;/*achtung, die folgenden %-berechnungen haben von diesen px MINUS padding rechts und links auszugehen!!! */
	margin: 0 auto;
	margin-top:20px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	margin-bottom:1em;
}

#content{
	max-width: 950px;
	margin: 0 auto;
	background: white;
	padding:10px 30px 20px 30px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;

}

header {
	max-width:950px;
	height:100px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background: #feb913; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ffc627, #feae13); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ffc627, #feae13); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ffc627, #feae13); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ffc627, #feae13); /* Standard syntax */
}

header img {
	float:right;
	margin-top:1em;
	margin-right:1em;
}

h1, h2, h3 { 
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:700;
	}

h1 {
	font-size:2.4em;
	}
	
h2 {
	font-size:1.8em;
	}
	
h3 {
	font-size:1.2em;
	margin:1em 0 0.75em 0;
} /* als Produktüberschrift /-titel */

.small { font-size: 0.87em; }

.sichtbar { display:block; }

.unsichtbar, figure#teaser-2 { display:none; }

.dunkelgruen { color:#0a8236; }

.lachs { color:#ff5a55; }

.dunkelgrau { color:#565656; }

.bubble {
	background:#5380c6;
	background:#fc3732;
	color:white;
	font-weight:700;
	/*border-radius:4px;*/
	padding: 0 7px;
}

span.caption {
	font-size:0.85em;
	
}

section {
	
	padding-bottom:20px;
}

figure img { width:100%; }


div.left { 
	float:left; 
	width:48.5%;
	margin-right:3%;
	position:relative;
	}

div.right { 
	float:right; 
	width:48.5%;
	}
	
div.left img, div.right img {
	max-width:100%;
	}

#home {
	display:none;
	cursor:pointer;
	width:150px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:5px 0;
	color:#6d778c; /* grau */
	/*color:#0ab0fe; blau */
	background:rgba(255,255,255,0.8);
	border:1px solid;
	font-size:0.95em;
	text-align:center;
	position:fixed;
	bottom:100px;
	left:50%;
	margin-left:324px;
	}
	
#home:hover {
	color:black;
}

footer {
	max-width:950px;
	height:55px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	box-sizing:border-box;
	background: #feb913; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ffc627, #feae13); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ffc627, #feae13); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ffc627, #feae13); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ffc627, #feae13); /* Standard syntax */
	text-align:center;
	}
	
footer img {
	margin-top:1em;
}

div#copyright {
	margin:0 auto;
	font-size:0.95em;
	letter-spacing:0.005em;
	color: white;
	text-align:center;
	margin-bottom:3em;
	}
	

div.produkt {
	border-bottom: 1px solid #c3c2c1;
	padding-bottom:1.5em;
}

div#produkt62850 { border-bottom:none; } /* das letzte item ohne border unten */

div.produkt div.right a { color:#0a8236;}

div.produkt div.right a.item-link {
	padding-bottom:1em;
	text-decoration:none;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:700;
	font-size:1.2em;
	color:#0a8236;
}

div.produkt div.right a.item-link:hover, div.produkt div.right a:hover {
	color:#ff5a55;
}

/* end general ########################### 
**/	

/* # # #  media queries # # # */

@media screen and (max-width:982px) {
#home {
	bottom:100px;
	left:inherit;
	right:9px;
	margin-left:0;
	}
}

@media screen and (max-width:960px) {

p { line-height:1.3em; }


}

@media screen and (max-width:835px) {


h1 { font-size:1.8em; }
h2 { font-size:1.5em; }
h3 { font-size:1.1em; }
	

div.produkt img { padding-top:1em; }

}


@media screen and (max-width:780px) {



}

@media screen and (max-width:720px) {

}

@media screen and (max-width:690px) {


div.left { 
	float:none; 
	width:100%;
	margin-right:0;
	}

div.right { 
	float:none; 
	width:100%;
	margin-top:0;
	}
	
}


@media screen and (max-width:635px) {

header {
	text-align:center;
}
header img {
	float:none;
	margin-right:0;
}

div.home {
	width:40%;
	}
}


@media screen and (max-width:600px) {

figure#teaser-1 { display:none; }

figure#teaser-2 { display:block; }

}	

@media screen and (max-width:550px) {



}

@media screen and (max-width:520px) {




}

@media screen and (max-width:470px) {


}


@media screen and (max-width:450px) {

#content{
	padding:10px 20px 10px 20px;
	}
	
#home {
	bottom:100px;
	left:inherit;
	right:9px;
	margin-left:0;
	}
	
	

}

@media screen and (max-width:420px) {

h1 { font-size:1.6em; }
h2 { font-size:1.3em; }


}

@media screen and (max-width:340px) {

}