body, div,  h1, h2, h3, h4, p, ul, li,  header, footer, main, aside, figure, section, article, nav 

{display:block; margin:0; padding:0;}

body {	
		font-family: 'Quicksand', sans-serif;
		font-weight:400;
	
		color:#666;
		background-color: #eee; 
	
}

header {	
			height:auto;
			padding:2rem ;
		
			background-color: #fff;	
			
	 /* set animation */
            transition: all 0.4s ease;
			-webkit-transition:  all 0.4s ease;
    		-moz-transition:  all 0.4s ease;
	
	
	}


header figure {width: 250px; float:left; margin: 0 0 0 2rem; }

header .right {width:70%; float:right;  position: relative}

header .right figure {float:right; width:120px; margin: 0 2rem 0 0; z-index: 99; position: relative; font-size: 0}

aside { margin:0 1rem 0 0; float: right; width:auto; box-sizing: border-box}
aside ul li {display:inline-block; }



nav.nav-two { 
    font-family: 'Quicksand', sans-serif;
	font-size: 1.1rem;
	font-weight: 500;
	margin:-1rem 0 0 0;
	float: left;
	width:100%;
	height:auto;
	background-color: #ffdd77;
	color:#ea4;
	box-sizing: border-box;
	z-index: 9;
	padding:.45rem 0 .45rem 1.5rem;
}




header #mobile {
	 width:30px; height: auto; display: none
	}

header #mobile2 {display:none;}


/*
section#onlineweg {
	position: relative; 
	padding-bottom: 75%; /* ratio 16x9 */
/*	overflow: scroll; 
	width: 100%;
	height: 500px;
	background-color: #fd7;
	padding-top: 4rem;

	}


section#onlineweg iframe {
	width:100%;
	height:100%;
	border: none;
	position: absolute; 
	top:0;
	left:0;
	z-index:89;
	
	}
*/

section#kontakt {width:100%}

section .sy-box {margin-bottom: 2rem}

section #box2  {display:none }

.point {
  background:#eee;
  border:none;
  padding:0.25rem 0.5rem;
  font-size: .75rem;
	color:#333
	
}

option {
  background:#eee;
  border:none;
  padding:0.25rem 0.5rem;
  font-size: .75rem;
color:#333
	
}

	 

#container {
		background-color:#fff;
		position:relative;
		margin: 0 auto;
		width:100%;
		height:auto;
		
	
	}
	


.line {
	border-bottom:1px solid rgba(204,153,102,.4);
	height:1px;
	margin:0 0 36px 0
	}	
	
	
.line2 {
	border-bottom:1px solid #003366;
	height:1px;
	margin:0 0 1.75rem 0
	}	


	
main {
	
	background-color:#fff;
	
	
}

#c-box {
	display: inline-block;
	position: absolute;
	width:320px;
	height:210px;
	background-color:rgba(255,255,255,.8);
	z-index:90;
	left:2rem;
	top:auto;
	margin-top:1.75rem;
	
}


#c-box2 {

	display: none;
	width:320px;
	height:210px;
	background-color:#ea4;
	z-index:90;
	float: none;
	margin:4rem auto 0;
	
}



main article, footer section { width:90%; float:left; height:auto; margin:1rem 5% 3rem; text-align:left;}

main article a {display:inline}

	


.flexContainer {
	width: 100%;
	max-width:1400px;
	float:left; 
	display:flex;
	display:-webkit-box;
  		display:-ms-flexbox;
  		display:-webkit-flex;

	flex-flow:row nowrap;
	-webkit-flex-flow:row nowrap;
	
	

} 

.flexContainer div {-webkit-flex:1 ; flex: 1 ; margin-right:3rem;  }


.flexContainer div:nth-child(2) {margin-right:0; }



footer .flexContainer div:first-child {border-right:1px solid #fff; margin-right:2rem; padding-right:2rem}



main article ul li {
	
	display: list-item ;
	font-size: .9rem;
	list-style-image:url(../images/bullet-point.gif);
	list-style-position: outside
	
}

main article ul  {margin-left:2rem}

.zeig {height:auto;	}

.weg {
	height:.1rem; }



footer  {background-color:#ddd; color:#333; margin-bottom: 0}


footer h3 {padding:0}

footer .send {width:auto}


.up {
	width:40px;
	height:40px;
	background-color: #ab1;
	color:#333;
	text-align: center;
	padding-top: .65rem;
	box-sizing: border-box;
	position: fixed;
	bottom: 1rem;
	right:2rem;
	z-index: 90;
	border:3px solid #740;
	opacity: 0;
	 visibility: hidden;
  	-webkit-transition: 0.5s;
 	 transition: 0.5s;
	
	-webkit-border-radius: 2px;
border-radius: 2px;


}

.up.active {
  opacity: 1;
  visibility: visible;
}

.up a:hover, .up:active, .up a:focus {
  text-decoration: none;
  outline: none;
}






/*---------------------------------------------- TYPO -------------------------------------------*/
	
p { 
	font-family: 'Quicksand',  sans-serif;
	margin:.5rem 0;
	color:#666;
	line-height: 1.25rem;
	font-size:.9rem;
	font-weight:400;
		
	}

#service div p:first-child {margin-top:0}
	
sup {line-height: 100%}


p.life {font-weight:400; color:#666; font-size:1rem; line-height:1.5rem; max-width:800px}

p.last {padding-bottom:2rem}
	

#c-box p, #c-box2 p  {
	
	margin:1rem 2rem;
	line-height: 1.25rem;
	
}



.small {font-size:.75rem; font-style:italic}


	
.impr  {
	font-size:.8rem;
	line-height:1rem;
	text-align:justify;
	color:#999;
	font-weight:400;
	}
	
.white {color:#eeaa44}
.beige {color:#cc9966; text-decoration: none}

.beige:hover {color:#fff}
	
h1 {
	font-family: 'Quicksand',  sans-serif;
	color:#666;
	margin:0 0 .5rem 0;
	font-weight:400;
	font-size: 2rem;
	
	}
	
h2 {
	font-family: 'Quicksand',  sans-serif;
	color:#740;
	font-size:1.25rem;
	font-weight:400;
	margin:0;
	line-height: 2rem;
	}


h3 {
	color:#fff;
	font-size:1.35rem;
	font-weight:300;
	margin:0;
	line-height: 1.5rem;
	text-transform:uppercase;
	display:block;
	 
	}

h4 {
	font-style: italic;
	color:#000;
	font-size:1.12rem;
	font-weight:400;
	margin: .5rem 0 1rem
	}

footer h4 {
	font-family:'Playfair Display', "Times New Roman", Times, serif;
	font-style:  normal;
	color:#fff;
	font-size:.9rem;
	font-weight:400;
	margin: 1.5rem 0 -0.5rem
}

footer a {color:#740; font-size: .85rem}

footer a:hover {color:#000;}


footer p  {color:#333; font-size: .85rem; margin-top: 0}


.formular {
		font-family: 'Quicksand', sans-serif;
		height:1rem;
		background-color:transparent;
		border:none;
		border-bottom:1px solid #740;
		color:#333;
		font-size:.9rem;
		margin:.5rem 0;
		padding:0.5rem 1rem;

}


.form {	border:1px solid #740; -webkit-border-radius: 2px;
border-radius: 2px;}

.send {
	font-family: 'Quicksand', sans-serif;
	background-color: transparent;
	border:1px solid #740;
	color:#740;
	font-size:.9rem;
	font-weight:400;
	margin:.5rem 0;
	padding:0.75rem 1.25rem;
	
	-webkit-border-radius: 2px;
border-radius: 2px;
	


	}
	

.ninety {width:90%}

/*

.g-recaptcha {width:210px; overflow: hidden; }

*/

/*
.sub {
	float:none; 
	padding:3px 10px 2px;
	margin:0 auto;
	border:0;	
	background-color:#000;
	color:#fff;
	font-size:20px;
	font-weight:300;

		-webkit-appearance: none;
}
*/

a {color:#039; text-decoration:none;}

a:hover {color:#666;   }

/*
	nav.nav-two ul li {display:inline-block; margin: 0; padding:0;  position:relative }
	nav.nav-two ul li ul li {display:block; line-height: 1.5rem }
	nav.nav-two ul li ul {z-index:99; display:none; background-color:#ffdd77; margin-top: .37rem}
	nav.nav-two ul li ul li:hover { background-color:none;}

nav.nav-two ul li a {color: #003366; padding: .5rem .5rem .45rem .5rem; margin: 0; border-radius: 0; transition: all 0.3s ease; font-size: 1.2rem
		}
nav.nav-two ul li a:hover {color: #ffdd77; background-color:#039; }

nav.nav-two ul li ul li a {font-size:1.1rem; color:#c60}

nav.nav-two ul li ul li a:hover { color:#003366; background-color: transparent;}
	
	
.sub1, .sub2, .sub3, .sub4 {
	position:absolute;
	z-index: 99;
	width:auto;
	padding:  .5rem 0; 
		}

	.sub1 {width: 200px}	
	.top1:hover .sub1 {display:block}

	.top2:hover .sub2 {display:block}

	.top3:hover .sub3 {display:block}
	
	.sub4 {width: 200px}
	.top4:hover .sub4 {display:block}

*/
header aside li {color: #7d4e24; padding:2rem 4px 2px;}


header aside li a {
	font-size:1rem;
	color:#7d4e24;
 padding: .2rem .25rem;

	
	
       transition: all 0.3s ease;
		-webkit-transition:  all 0.3s ease;
    	-moz-transition:  all 0.3s ease;

}


header aside li a:hover, header aside li a:focus {
	color:#fff;
	background: #740;
	-webkit-border-radius: 2px; border-radius:2px;
	
	}


li.death {
	font-size:1.15rem;
	color:#cc9966;
	padding:3px 10px 2px;
	margin-right:6px;
	
	
	}
	
	
	



.stoerer {
	float:left;
	width:11rem;
	height:11rem;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;

	font-size:1rem;
	font-weight:bold;
	letter-spacing:-1px;
	text-align:center;
	color:#000;
	border: 2px  dotted #000;
	
	padding:.75rem;
	box-sizing:border-box;
	
	line-height:1.35rem;
	

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7f5026+0,cc9966+50,7f5026+99 */

background: #7f5026; /* Old browsers */

background: -moz-linear-gradient(-45deg,  #7f5026 0%, #cc9966 50%, #7f5026 99%); /* FF3.6-15 */

background: -webkit-linear-gradient(-45deg,  #7f5026 0%,#cc9966 50%,#7f5026 99%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(135deg,  #7f5026 0%,#cc9966 50%,#7f5026 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f5026', endColorstr='#7f5026',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */



	
}

.big {
	font-size:1.7rem;
	text-shadow:#000 0 1px 0;
	color:#fff
	}


i { font-family:  'Roboto Condensed',sans-serif; font-size: 1rem;    }

i span {color:#fff}






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

	header .right {width:65%;}
	
}
	


@media screen and (max-width:1150px) {
	
nav.nav-two { margin:1rem 0 0;}

header aside li { padding:0 6px 2px;}


}


@media screen and (max-width:950px) {
	
	
	
	nav.nav-two {padding-left:0.5}
	
	nav.nav-two ul li {margin-right:.25rem}

	nav.nav-two ul li a { padding: .5rem .25rem .5rem .25rem; font-size:1.1rem; font-weight:400}
	
	nav.nav-two ul li ul li {line-height: 1.25rem; padding:.2rem .25rem; }
	
	nav.nav-two ul li ul li a {font-size:.95rem; }
	
	header .right {width:60%;}
	
	header .right figure {width: 100px; }
	
	aside ul li a {font-size:.9rem; }

	.sub1, .sub2, .sub3, .sub4 {padding:  .25rem 0; }
	
	p {font-size:.8rem}
	
	footer {margin-bottom: 0}
	
	
}





@media screen and (max-width:850px) {
	
	section#service div div p:first-child  {padding-top:2rem}
	
	section#buchen {padding-top:2rem}
	
	main h1 {font-size:1.8rem;}
	
	main h2 {font-size:1rem;}
	
/*	#c-box {display: none}
	
	#c-box2 {display: block}
*/
	
	header .right {width:60%; margin-right:0 }
	
	header .right aside {width:auto; padding: .5rem 0; margin:0 .5rem; float: right;}

	header aside ul {float:right;  width:auto; }
	
	header aside li {padding: 0 0 2px}

	header figure { padding-bottom: 1rem; width:5%}		
	
	
	
	header .right figure#logo2 { float:right; width:45%;  margin: 0;  }
	header .right figure#logo2 img {width:100px; padding:1rem; float:right}
	
	
/*	header .right figure#mobile {display:inline-block; float:left; width: 50px; margin-left:1rem;}
	header .right figure#mobile img {width:100%; padding:0; float:left}
*/	

	
	footer .flexContainer {
	
	flex-flow:column nowrap;
	-webkit-flex-flow:column nowrap;
	
}


footer .flexContainer div {flex:1; border-right:0; }

footer .flexContainer div:first-child { border-right:0; }

	/*
	nav.nav-two {
		position:absolute;
		right:-0.5rem;
		top:0;
		height:100%;
		width: 0;
		z-index:100;
		margin: 0;
		text-align: left;
		overflow: hidden;
		padding:0;
		
		transition: linear .5s;
	-moz-transition: linear .5s;
	-webkit-transition: linear  .5s;
	}
	
	
	nav.nav-two ul {padding:2rem 0 0 1rem; }
	nav.nav-two ul li {float:none; display: block;  padding:0 .5rem .5rem; margin:0;}
	nav.nav-two ul li ul {padding: 0 0 .5rem; }
	
	
	nav.nav-two ul li ul li {display:block; line-height: 1.2rem; padding:0rem 0 .5rem; margin:0 }

nav.nav-two ul li a {color: #003366; padding: 0; margin: 0; border-radius: 0; transition: all 0.3s ease; font-size: 1.2rem; font-weight: 500;
		}
nav.nav-two ul li a:hover, nav.nav-two ul li a:focus  {color: #036; background-color:transparent; padding:0}


	
	
.sub1, .sub2, .sub3, .sub4 {
	position:relative;
	z-index: 99;
	width:auto;
	padding:0; 
		}
	

#container:target nav.nav-two  {
	
	right:0; width:15rem;
	
	transition: linear .5s;
	-moz-transition: linear .5s;
	-webkit-transition: linear  .5s;
	

	}
	
a.open {display:block}

a.close {display:none}
	
#container:target a.open {display:none}

#container:target a.close {display:block}
	
*/	

	
	
}

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

	
	section #box1 {display:none }
	section #box2  {display:block }

}





@media screen and (max-width:650px) {
	
	header .right {width:100%; }
	
	header .right figure#logo2 { float:right; width:15%;  margin: 0;  }
	header .right figure#logo2 img {width:70px; padding:0 1rem 0 0; float:right}
	
	header figure {margin:0}

.flexContainer {
	
	flex-flow:column nowrap;
	-webkit-flex-flow:column nowrap;
	
}

.flexContainer div {flex: 1; margin-right:0;  }	
	
	
	

	
}

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


	
	
	
a.open {display:block}

header .right {width:100%; }

#container h1 {margin-right:0}

	



main.sticky {padding-top:9rem} 





}

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

	
.left {float:left; margin-left:0; max-width:600px; width:100%; }

header aside li { padding:0 4px 2px;}

main aside article .send {width:90%; }



}