.flexslider {
}

.flex-direction-nav a {
	top:50%;
}

.flex-direction-nav a:before  { 
	font-size: 19px; 
  padding: 0.45em 0.6em 0.45em;
  border-radius: 1em;    
  background: #dddddd;
}

.flex-direction-nav .flex-prev {
    left: 50px;
}

.flex-direction-nav .flex-next {
    right: 50px;
}

@font-face {
font-family: 'Clearsans';
  src: url('fonts/clearsans-light-webfont.eot');
  src: url('fonts/clearsans-light-webfont?#iefix') format('embedded-opentype'),
       url('fonts/clearsans-light-webfont.woff') format('woff'),
       url('fonts/clearsans-light-webfont.ttf') format('truetype'),
       url('fonts/clearsans-light-webfont.svg#Clearsans') format('svg');
}

@font-face {
font-family: 'Chalkduster';
  src: url('fonts/chalkduster-webfont.eot');
  src: url('fonts/chalkduster-webfont?#iefix') format('embedded-opentype'),
       url('fonts/chalkduster-webfont.woff') format('woff'),
       url('fonts/chalkduster-webfont.ttf') format('truetype'),
       url('fonts/chalkduster-webfont.svg#Chalkduster') format('svg');
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


* {
	-webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
  -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
  box-sizing: border-box;         /* Safari 5.1+, Chrome 10+, Firefox 29+, Opera 7+, IE 8+, Android 4.0+, iOS any */	box-sizing: border-box;
	margin:0;
	padding:0;
}

html{
		
}

body{
    font-family: Open Sans;
    color: #575757;
    font-size:16px;
    line-height:22px;
    }
  
header {
		position:relative;
		min-height:90px;
    }
    
div#bilder {
		position:relative;
		height:490px;
		overflow:hidden;
		background-color: rgba(87,87,87,0.6);
		}

div#bilder_wrap {
		position:absolute;
		top:0;
		left:50%;
		margin-left:-900px;
		width:1800px;
		}

div#bilder_wrap_sm {
		position:absolute;
		top:0;
		left:50%;
		margin-left:-465px;
		width:930px;
		}
				   
main {
    display:block;
    }
  
aside {
		float:left;
		margin:0 0 20px 0;
		position:relative;		
    }

aside.cols3 {
		width:300px;
		height:460px;
		padding:15px 20px;
}

aside.cols4 {
		width:210px;
}

aside img {
	width:100%;
}

aside.cols4sm {
		width:200px;
		height:290px;
}

aside.rows4 {
		height:360px;
}

aside.cols4sm img{
		width:150px;
}

section {
    width:100%;
		margin-bottom:20px;		
    }
 
footer {
    clear:both;
    margin-bottom:60px !important;
    background-color: rgba(87,87,87,0.3);
    color:#ffffff;
    padding:20px 20px 0;
    }

div#logo {
		position:absolute;
		top:50px;
		right:10px;
		z-index:6;
		}
		
div#logo img {
		width:220px;
		}

div#logo img.logokl {
		width:125px;
		}
				
div#slogan {
		position:absolute;
		top:20px;
		left:50%;
		margin-left:-440px;
		z-index:5;
		color:#FFFFFF;
		font-family:Chalkduster;
		font-weight:lighter;
		font-size:26px;
		line-height:36px;
		}

div#bilderplus {
		position:relative;
		background-color: rgba(87,87,87,0.6);
		margin-bottom:20px;
		}
		
div#bild_content {
		position:relative;
		background: url(../images/tafel.jpg);
		z-index:5;
		}

.slogan_margin {
		margin:240px 0 40px 0;
}

div#flexsmall {
	width:370px;
	position:relative;
	float:left;
	margin-right:50px;
}

div.mapsize {
	width:350px;
	height:280px;
	float:left;
	margin-right:50px;
	margin-bottom:30px;
}
	
/*---------------- Navigation -------------------*/

header a#navlink {
		display:none;
    cursor: pointer;
    width: 45px;
    height: 38px;
    margin:10px 0 10px 20px;
    background-color: rgba(87,87,87,0.3);
		}

#navicon { 
		position: relative; 
		} 

#navicon::before { 
		content: ""; 
		position: absolute; 
		top:11px; 
		left:11px;
		width:25px; 
		height:4px;
		border-top: 10px double #ffffff; 
		border-bottom: 3px solid #ffffff;
		}

nav {
		padding-top:12px;
		display:block; /* damit nav bei Größerziehen wieder erscheint! */
    }

nav ul,
nav ul li {           /* Normalisierung */
    list-style: none; 
    margin: 0; 
    padding: 0;
    border: 0;
  	}
 
nav ul li {
    float:left;  
		}
 
nav ul li a {
    display: block;  
    text-decoration: none;
    font-size:15px;
    font-weight:bold;
    color:#ffffff;
    padding:3px 23px;
    border:0;
	  transition: background 0.3s ease-out; /* explorer 10 */
	  -webkit-transition: background 0.3s ease-out; /* chrome & safari */
	  -moz-transition: background 0.3 ease-out; /* firefox */
	  -o-transition: background 0.3 ease-out; /* opera */
		}

nav ul li:hover > a {
  	background-color: rgba(211,126,39,0.4);
		}

nav ul li a.cur {
  	background-color: rgba(211,126,39,1.0);
		}

nav ul li:hover > ul {
    visibility: visible;
    padding-top:0;
    max-height: 260px;
		}

.pulldown {
		visibility:hidden;
		max-height:0;
}

.pulldown:target {
		visibility:visible;
    padding-top:0;
    max-height: 260px;
}

nav ul ul {
		visibility:hidden;
		position:absolute;
		z-index:10;
  	background-color: rgba(211,126,39,0.4);
		max-height:0;
    overflow: hidden; 
    -webkit-transition: max-height 0.3s ease-out;
    -moz-transition: max-height 0.3s ease-out;
    -o-transition: max-height 0.3s ease-out;
    -ms-transition: max-height 0.3s ease-out;
    transition: max-height 0.3s ease-out;
	  }

nav ul ul li {
		float:none;
		}

nav ul ul li a {
    color: #ffffff;
    text-transform:none;
    font-size:15px;
    line-height:15px;
    padding:8px 27px;
		}

nav ul ul li:hover > a, ul ul li a.cur {
  	background-color: rgba(211,126,39,1.0);
		}

/*---------------- Klassen -------------------*/

.marginright {
		margin-right:15px;
}
 
footer .sptrenner {
		float:left;
		height:420px;
		border-left:1px solid #ffffff;
		padding-right:20px;
		margin-bottom:30px;
}

footer .sp {
		float:left;
		padding-right:20px;	
		margin-bottom:30px;
}

footer .sp1 {
		width:300px;
}

footer .sp2 {
		width:300px;
}

footer .sp3 {
		width:220px;
}

a.icon {
		width:35px;
		height:35px;
		cursor:pointer;	
		display:inline-block; /* damit umgebende section Höhe bekommt, inline, damit center wirkt */
}

a.arrowdown {
		background-image: url(../images/pfeilrunter.png);
}

a.arrowup {
		background-image: url(../images/pfeilrauf.png);
}

.maxwidth {
    max-width:930px;
    margin:0 auto;
}

.overlap {
	  margin-top:-75px;
	  position:relative;
    z-index:10;
}

.textpadding {
		padding:20px;
    }

.dimmed {
		background-color: rgba(255,255,255,0.8);
}

.high {
		color:rgba(211,126,39,1.0);
}

.thumb {
		margin:0 0 15px -20px;
		width:300px;
}

.pfeil {
		text-align:center;
		margin:20px 0;
}

.kopf {
		height:60px;
}

.triangle { 
		position:absolute;
		top:61px;
		left:0;
		width: 0; 
		height: 0; 
		border-top: 14px solid transparent; 
		border-bottom: 14px solid transparent; 
}

.triang1 {
		border-left: 28px solid #D37E27; 
}

.triang2 {
		border-left: 28px solid #79830E;
}

.triang3 {
		border-left: 28px solid #B6C416;
}

.trenner {
    clear:both;
    }

.smalltd {
		width:150px;
}

.normaltd {
		width:600px;
}

#breadcrumb {
	float:right;
	line-height:15px;
	background: url(../images/pfeilrechts.png) no-repeat;
	padding-left:20px;
	margin:10px 0 20px 0;
	color:#999999;
	font-weight:bold;
}

img.intextright {
	float:right;
	width:180px;
	margin:0 0 20px 50px;
}

img.intextleft {
	float:left;
	width:210px;
	margin:0 20px 20px 0;
}

a.noarrow {
	background:none;
	padding:0;
}

a.play {
	padding:5px 0 5px 40px;
	background: url(../images/abspielen.png) no-repeat;
	color:#888888;
	text-decoration:none;
	font-weight:bold;
}

.centered {
	text-align:center;
}

.portrait {
	width:150px;
}

#socialmedia {
	margin-top:40px;
}
	
/*---------------- Tags -------------------*/
    
h1 {
		font-size:1px;
		line-height:1px;
		color:#c3966f;
		}

h2 {
		
		font-weight:lighter;
		font-size:24px;
		line-height:28px;
		color:#333333;
		margin-bottom:20px;
		}

h3 {
		
		font-weight:lighter;
		font-size:24px;
		line-height:33px;
		color:#333333;
		margin-bottom:40px;
		}
		
h4 {
		font-size:18px;
		line-height:20px;
		color:#666666;
		margin-bottom:10px;
		}

h5 {
		
		font-weight:lighter;
		font-size:20px;
		line-height:26px;
		color:#333333;
		margin-bottom:0;
		}

section a, aside a {
    display:inline-block; /* für margin braucht es block, für Bild links daneben inline */
    text-decoration:none;
    font-weight:bold;
    color:#D37E27;
    background: url(../images/pfeilrechts_or.png) no-repeat; 
    padding-left:17px;
    margin-top:10px;
    }
    
section a:hover, aside a:hover, section a.cur {
    color:#db4123;
    }

section a.intext {
		margin-top:0;
}
    
footer a {
    color:#ffffff;
    background: url(../images/pfeilrechts_weiss.png) no-repeat; 
    padding-left:17px;
    text-decoration:none;
    font-weight:bold;
    }
    
footer a:hover, footer a.cur {
    text-decoration:underline;
    }

section.bild img {
    width:100%;
    }

img {
		border:0;
		}    

p {
	margin-bottom:10px;
	}

ul {
		padding-left:22px;
		margin:12px 0;
		}

td {
		vertical-align:top;
		padding-bottom:8px;
}

table.table_kontakt {
	width:400px;
}

.klein {
	font-size:11px;
	line-height:14px;
	text-transform:none;
}

.formfield {
	width:100%;
}

.form_right {
	text-align:right;
	padding-right:20px;
}

input, textarea, select {
	border:#333;
	background-color:#dddddd;
	padding:2px 5px;
	color:#D37E27;	
	font-size:15px;
	margin-bottom:5px;
}

input.button {
  background-color: rgba(211,126,39,0.6);;
  color:#ffffff;
}

input.button:hover {
  background-color: #D37E27;
}


/*---------------- Responsivity -------------------*/


@media only screen and (max-width : 1200px) {
body, header {width:100%}
} 

@media only screen and (max-width : 950px) {
header a#navlink {display:block;}
header {position:relative;min-height:60px}
div#slogan {left:25px;margin-left:0;}
div#logo {top:10px;}
div#logo img {height:100px;width:auto;}
div#logo img.logokl {height:100px;width:auto;}
nav {display:none;width:300px;padding:0;margin-bottom:10px;border-bottom:1px solid #ffffff;} 
nav ul li {float:none;}
nav ul li a {    
    text-align:center;
    padding:8px 0;
    border-collapse:collapse;
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-right:1px solid #ffffff;
}
nav ul ul {position:relative;top:0;padding-bottom:0;border:0}
nav ul ul li a {border:0;width:100%;border-left:1px solid #ffffff;border-right:1px solid #ffffff;}
div#links, div#linkshalb {float:none;width:100%;text-align:center;padding:20px 0 0 0;}
div#rechts, div#rechtshalb {padding:20px;margin-left:0;}
#socialmedia {margin-top:20px}
#breadcrumb {float:none;margin-top:0}
aside {margin-left:20px}
}

@media only screen and (max-width : 725px) {
.slogan_margin {margin-top:20px;padding-right:20px;}
div.mapsize {width:100%;float:none;margin-right:0;}
}

@media only screen and (max-width : 700px) {
div#slogan {font-weight:bold;font-size:20px;line-height:26px;}
div#bilder {height:395px;}
.sp {float:none;}
.sptrenner {display:none}
footer .sp1 {width:100%;}
footer .sp2 {width:100%;}
footer .sp3 {width:100%;}
td {display:block}
.smalltd, .normaltd {width:100%;}
.form_right {text-align:left}
aside {float:none;}
aside.cols3 {margin:0 auto 20px;}
}


@media only screen and (max-width : 500px) {
div#slogan {width:220px;}
nav {width:100%;} 
nav ul li a {border-left:0;border-right:0;}
nav ul ul li a {border-left:0;border-right:0;}
img.intextright, img.intextleft {float:none;margin-left:0;margin-right:0}
table.table_kontakt {width:100%;}
}  

@media only screen and (max-width : 380px) {
div#bild_content img {width:100%;}
div#flexsmall {width:100%;margin-right:0}
}