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


body{
	background-color: #CCCCCC;
	font-size: 87.5%; /* base fontsize is 14 px   */
	line-height: 1.5;
	font-family: arial, verdana, sans-serif;
	text-align: left;
}
.body{
margin: 0 auto;
width: 70%;
clear: both;
}
h1 {
	color: #990066;
	font-family:"Times New Roman", Times, serif;
	margin-bottom: 0px;
}

h2 {
	color: #FF6600;
	font-family:"Times New Roman", Times, serif;
	margin-bottom: 0px;
}
h3 {
	color: #6633CC;
}
h4 {
	color: #990066;
	font-size: 120%;
	margin-bottom: 0px;
	margin-top: 0px;
}

.mainFooter {
height: 40px;
width: 100%;
float: left;
background-color: #666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 2% 0%;

}

.mainFooter  p {
width: 92%;
margin: 10px;
color: #FFF;
}


.massage  {
	color: #333333;
	font-size: 100%;
}

img {
width: 100%;

}

.honig img {
width: 100%;

}
.responsiveContainer {
	  position: relative;
	  padding-bottom: 56%;
	  height: 0;
	  overflow: hidden;
	}
	 
	.responsiveContainer iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}




/*  Navigation  */
.mainheader  img {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 100%;
height: auto;
margin: 0% 0;
}

.mainheader nav {
background-color: #960F87;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.mainheader nav ul {
color:#FFFFFF;
list-stye: none;
margin: 0 auto;
}

.mainheader nav ul li {
float: left;
display: inline;
color:#FFFFFF;
}

.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
/* Come back to assign height*/
}

.mainheader  nav a:hover, .mainheader  nav a:active,
.mainheader  nav .active   a:link, .mainheader  nav .active  a:visited {
background-color: #CF5C3F;
text-shadow: none;
color:#FFFFFF;

/* */
}

.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:#FFFFFF;
}

.body .mainheader .active {
text-decoration: none;

color:#FFFFFF;
}

.body .mainheader a  {
text-decoration: none;
font-size: 120%;
color:#FFFFFF;
}

.body .mainheader a:link, a:visited  {
	color: #FF6600;
	font-size: 120%;
	color:#FFFFFF;
}

.body .mainheader a:hover, a:active {
background-color: #CF5C3F;
color: white;
font-size: 120%;

}
/*  Ende Navi */

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
	border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
	
	background-color:#FFFFFF
}
.span_2_of_3 {
	width: 66.1%;
	
	background-color:#FFFFFF
}
.span_1_of_3 {
	width: 32.2%;
	
	background-color:#FFFFFF
	}
	
.innen {
	padding: 10px;
	}
	
/* link grüne design agentur fehlt noch */
	
.design a  {
	text-decoration: none;
	font-size: 80%;
	color:#FF6600;
}
a:hover, a:active {
background-color: #CF5C3F;
color: white;
font-size: 80%;

}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
		padding-left: 0px;
	}
	
	.map img {
width: 100%;

}

	
}

@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
		margin-left: 0px;
		
	}
	.span_2_of_3 {
		width: 100%; 
		margin-left: 0px;
	}
	.span_1_of_3 {
		width: 100%;
		margin-left: 0px;
	}
	img {
width: 100%;

}

.honig img {
width: 100%;
}

.map img {
width: 100%;

}



}


/*  NAVIGATION */
@media only screen and (min-width: 150px) and (max-width: 600px)
{
.body{
width: 100%;
font-size: 95%;
}

.mainheader  img {
width: 100%;
}
.mainheader nav {

height: 160px;

}

.mainheader nav ul {

padding-left: 0px;
}

.mainheader nav ul li {
width: 100%;
text-align: center;
}

.mainheader nav a:link, .mainheader nav a:visited {

display: block; /* bringt die Hintergrundfarbe  der Navi auf ganze Breite*/
padding: 10px 25px;
height: 20px;
}
/* Come back to assign height*/

img {
width: 100%;

}

.honig img {
width: 100%;
}

.map img {
width: 100%;

}

}


@media only screen and (min-width: 600px) and (max-width: 1200px)
{
.body{
width: 95%;
font-size: 95%;
}

img {
width: 100%;

}

.honig img {
width: 100%;
}

.map img {
width: 100%;

}


}