* {
	box-sizing:border-box;
	margin: 0;
	padding: 0;
}
body {
	background:url(/wp-content/themes/butenland/img/bg_struktur.png) #fff;
	color: #222;
	font-family: verdana;
	font-size: 17px;
	line-height: 150%;
}

div#main {
  min-width: 300px;
  max-width: 1200px;
  margin:0 auto;
  width: 100%;
}
a {
	color:#ac2300; /*#FF7614 #FB9E56;*/
	text-decoration: underline;
}
a:hover {
text-decoration:underline;
}

a img {
border:none;
}

h1 {
line-height:125%;
}

h1, h2 {
	color:#653A1A;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:bold;
	margin-top:0;
}

header div.bg {
	border:solid 1px rgba(255,255,255,0);	
	background:url(img/bg_header.jpg) no-repeat;
	background-size:150% auto;
	background-position:left center;
	height:8em;
	position:relative;
	
	transition:height .5s ease, background-size .5s ease;
}

header div#logo {
	margin:2%;
	width:25%;
}
header div#logo img {
	border:none;
	width: 100%;
}

header img#claim {
	position:absolute;
	left:40%;
	opacity:.75;
	top:5%;
	width:35%;
}

header nav a, header nav a:hover {
	text-decoration:none;
}

header nav {
	background-color:#fb9e56;
	box-shadow: 0 1px 3px #aaaaaa;
	min-height:2.5em;
	text-align: center;
}
header nav > ul {
	display:none;
	box-sizing:border-box;
	margin:.25em 0;
	padding:0 1.75%;
}
header nav > ul li > ul {
	box-shadow: 5px 5px 10px rgba(0,0,0,.5);
}
header nav > ul > li {
	border:solid 1px rgba(0,0,0,0);
	box-sizing:border-box;
	display: block;
	float: left;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:bold;
	position: relative;
	white-space: nowrap;
	width: 44%;
}
header nav > ul > li.page_item_has_children {
	border-radius:0;
	border-top-left-radius:.5em;
	border-top-right-radius:.5em;
}
header nav > ul > li:first-child {
	width: 22%;
}
header nav > ul > li:last-child {
	width: 32%;
}
header nav > ul > li > a {
	color:#fff; /*#7b5f47;*/
	display:block;
	padding: .5em 0;
}

header nav > ul li:hover a {
	color:#7b5f47;
}

header nav > ul > li > ul {
  /* erste Drop-Down-Ebene */
  display: none;
  font-size: 90%;
  position: absolute;
  left: 0;
  top: 2.5em;
  width: 100%;
  z-index:1;
}

header nav > ul > li:hover ul {
  /* erste Drop-Down-Liste vertikal nach unten */
  display: block;
  list-style: none;
  min-width: 10em;
  padding:0;
}

header nav > ul > li:hover ul li {
	background-color:#FB8B3B;
}

header nav > ul > li:hover ul > li {
	background-color: #fff;
	display: block;
	font-weight:normal;
	padding:.25em 0;
	position: relative;
	text-align: left;
	white-space: normal;
}

header nav > ul > li:hover ul > li ul {
  box-sizing: border-box;
  display: none;
}

header nav > ul > li:last-child:hover ul {
  left: auto;
  right: 0;
}

/* aktuelle links hervorheben */
li.current_page_item a {
	text-decoration:underline;
}

header nav form {
  display: block;
  float:right;
  margin: 0 auto;
  width: 45%;
  max-width:25em;
  overflow:hidden;
  padding: .25em 0;
  text-align:left;
}
header nav form input[type=text] {
	color:#222; /*#fb9e56;*/
	font-size: 75%;
	font-weight:bold;
	line-height:200%;
	padding:0 2%;
	width:86%;
}

span#nav_handle {
	cursor:pointer;
	float:left;
	height:2.5em;
	margin:.5em 1em 0 1em;
	position:relative;
	text-align:center;
	z-index:1;
}

span#nav_handle ul {
	display:none;
	list-style:none;
	text-align:center;
}

span#nav_handle:hover ul {
	background-color:#fff;
	box-shadow:2px 2px 2px #555;
	display:block;
	font-size:75%;
	padding:0;
	position:absolute;
	top:1.7em;
	left:-1em;
	width:15em;
}

span#nav_handle ul li {
	margin-top:.25em;
}

span#nav_handle ul li a {
	color:#7b5f47;
	display:block;
	padding:.5em .25em;
}

span#nav_handle ul li a:hover {
	background-color:#eee;
}

div#main_content {
  margin-top: .5em;
  padding:0 0 2em 0;
}
div#content {
	box-sizing: border-box;
	font-size:90%;
	padding: 0 2em;
}
div#content .wp-caption.alignright, div#content .wp-caption.alignleft, div#content img.alignnone {
	max-width:100%;
	height:auto;
	margin:0 auto;
}

iframe#formular {
	width: 786px;
	height: 485px;
	border: none;
}

/* Beginn Bildergalerie */

/* div#content div.gallery {
border:solid 1px blue;
}

div#content div.gallery dl.gallery-item {
margin:1%;
width:45%;
}

div#content div.gallery dl.gallery-item  img{
max-width:100%;
height:auto;
} */

/* // Ende Bildergalerie */

div#content div.gallery dl.gallery-item .wp-caption-text {
display:none;
}

div#content iframe, div#content textarea {
max-width:100%;
}

div#content hr {
border:none;
border-top:dashed 1px #aaa;
height:1px;
}
div#content h2 {
margin:.5em 0;
}

div#content h2 a {
font-size:150%;
line-height:100%;
}

div#content p {
margin-bottom:.75em;
}

div#content span.info {
color:#777;
font-size:85%;
}

div#breadcrumbs{
clear:both;
font-size:85%;
margin-bottom:1em;
padding:0 2%;
}

aside {
  box-sizing: border-box;
  font-size: 90%;
}
aside h2 {
  background-color: #ddd;
  box-shadow:0 1px 2px #777;
  font-size: 100%;
  margin:0 0 2px 0;
  padding: .25em;
  text-align: center;
}
aside ul.menu {
	list-style: none;
	margin:0 0 1em 0;
	padding:0;
	width: 100%;
}
aside ul.menu li {
  display: block;
}
aside ul.menu li a {
  background-color: #eee;
  color: #555;
  display: block;
  padding: .25em 1em;
  text-shadow: 1px 1px #fff;
}
aside ul.menu li a:hover {
  background-color: #fff;
}
aside div.extras {
	margin:0 0 1em 0;
	text-align:center;
}

	a.itembox img{
	display:block;
	margin:0 auto;
	max-width:100%;
	height:auto;
	}
	
	a.itembox:hover img {
	opacity:.9;
	}

footer {
  background-color:#fb9e56;
  background-size:100% 100%;
  clear: both;
  font-size:80%;
  padding:1em;
  text-align: center;
}

footer a {
color:#555;
text-decoration:underline;
}

div#faq a.q {
background-color:#eee;
border-left:.5em solid #FB9E56;
color:#222;
cursor:pointer;
padding:1%;
display:block;
overflow:hidden;
text-decoration:none;
}

div#faq a.q:hover {
text-decoration:underline;
}

div#faq div.qa {
margin-bottom:1em;
}

/* META zwische klein und mittel */

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

	header div.bg {
	background-size:150% auto;
	height:11em;
	}
	
	header div#logo {
	width:20%;
	}

}

/*### Mittlere Aufloesung Mittel ###*/
@media screen and (min-width: 540px) {
  /* Mittlere Aufloesung */

	
	header div.bg {
	height:12em;
	}
	
	header img#claim {
	width:30%;
	}
  
  header nav {
    min-height: 3em;
    padding: .25 0 0 2%;
  }
  header nav > ul {
  display:block;
    margin: .25em 0 .25em 0;
    float: left;
    width: 65%;
  }
  header nav > ul > li,
  header nav > ul li.home,
  header nav > ul li.right {
    float: left;
    width: auto;
  }
  header nav > ul > li > a {
	padding: .5em 1em;
  }
  header nav > ul > li:last-child ul,
  header nav > ul li.home:last-child ul,
  header nav > ul li.right:last-child ul {
    left: -1px;
  }
  header nav > ul > li > ul,
  header nav > ul li.home > ul,
  header nav > ul li.right > ul {
    top: 2.8em;
  }
 
header nav > ul > li:hover > ul li {
background:#FB8B3B;
}

header nav > ul > li:hover > ul li a {
color:#fff;
display:block;
padding:.1em .25em .1em 1em;
}

header nav > ul > li:hover ul li:hover > a {
color:#7b5f47;
text-decoration:none;
}
  
  header nav > ul > li > ul > li:hover ul,
  header nav > ul li.home > ul > li:hover ul,
  header nav > ul li.right > ul > li:hover ul {
    position: absolute;
    display: block;
    top: 0;
    left: 100%;
  }
  
  header nav > ul > li:last-child:hover ul ul,
  header nav > ul li.home:last-child:hover ul ul,
  header nav > ul li.right:last-child:hover ul ul {
    left: 100%;
  }
  
header nav > ul > li:hover > ul > li:hover > ul > li {
/* background-color:#FCD244; */
}
  
  header nav > form {
  padding:.5em 0;
    width: 33%;
  }

 div#content .wp-caption {
 box-shadow:0 0 3px #aaa;
 padding:.25em;
 text-align:center;
 }
div#content .wp-caption .wp-caption-text {
	font-size:80%;
	margin:0;
}

div#content .wp-caption.alignright , div#content img.alignright{
float:right;
margin-left:1em;
}

div#content .wp-caption.alignleft, div#content img.alignleft {
float:left;
margin-right:1em;
}

}

/* META zwischen mittel und gross */

@media screen and (min-width: 690px) {
	header div.bg {
	height:13em;
	background-size:125% auto;
	}
	
	header div#logo {
	width:20%;
	}
	
	header img#claim {
	left:35%;
	}
}

/* grosse aufloesung */

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

	header div.bg {
	height:15em;
	}

  div#content.has_sidebar {
    float: left;
    width: 75%;
  }
  aside,
  aside.extras {
    float: left;
    width: 23%;
  }
}

/* META sehr gross */
@media screen and (min-width: 950px) {
	header div.bg {
	height:18em;
	background-size:100% auto;
	}
	
	header div#logo {
	width:15%;
	}
	
	header img#claim {
	left:28%;
	width:25%;
	}
}