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

* {margin:0; padding:0;}


li{list-style-type:none;}
a{text-decoration:underline; color:#4D0708;font-weight:100;}
a:hover{color:#666;}

body{
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

/*------START mobile-----*/

@media only screen and (max-width:700px)	{
	
h1{
	font-size:30px;
	font-weight:500;
	line-height:40px;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color:#4D0708;
	text-align:center;
	margin-bottom:20px;
}

h2{
	font-size:16px;
	font-weight:500;
	margin-top:10px;
	margin-bottom:10px;
	color:#333333;
	text-align:center;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

h3{
	font-size:16px;
	font-weight:500;
	line-height:20px;
	color:#333333;
	text-align:center;
	margin:10px 0 20px 0;
}

h5{
	font-size:10px;
	font-weight:100;
	line-height:18px;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	color:#fff;
	width:100%;
}

p{
	font-size: 12px;
	font-weight: normal;
	margin-bottom: 10px;
	line-height: 18px;
	white-space: normal;
	text-align: justify;
	color:#999999;
}

span{
	color:#4D0708;
}

/* Header  */
header{
	margin:0 ;
	padding:0 0 0 0;
	width:100%;
	height:60px;
	position:fixed;
	border-bottom:2px solid #666;
	z-index:999999;
	float:left;
	clear:both;
	background:#fff;
		-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	display:flex;
	justify-content:center;
	align-items:center;
}
	
	.logo{
		height:40px;
		width: auto;
		margin:5px auto;
		z-index:99999;
	}
	
	nav ul{line-height:auto; text-align:right; width:100%; padding:20px 0 0 0;}

nav li{
	display:block; 
	text-align:left;
	height:60px; 
	font-size:0;
}

nav a, nav a:visited {
	display:block;
	padding:0 0 0 5%; 
	text-transform:uppercase;
	text-decoration:none;
	text-align:left;
	color:#4D0708;
	font-size:24px;
	font-weight:500;
	line-height:60px;
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}


nav a:hover{
	color:#fff;
	background:#4d0708; 

}

.menu{
	width:70%;
	height:auto;
	background:#fff;
	padding-bottom:70px;
	position:absolute;
	top:62px;	
	left:-1000px;
	z-index:9999;
	transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-ms-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	-webkit-transition: all .8s ease-in-out;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;

}

.menu-icon{
	width:auto;
	height:60px;
	position:absolute;
	padding:0 0;
	z-index:99999999;
	top:0px;
	left:5%;
	background:#fff;
	color:#4D0708;
	text-align:center;
	font-size:30px;
	line-height:60px;}

.menu-icon:hover{color:#333;}

#menuToggle{display:none;}
#menuToggle:checked ~ .menu {top:62px; left:0px; position:absolute; z-index:999;}
	
	
/* End header  */	

	.cycle-slideshow{
	width:100%;
	max-width:700px;
	display:block;
	position:relative;
	margin:0 auto;
	overflow:hidden;
	z-index:9999999;
	}

.slide{display:block; position:relative; width:100%; 		background:red;}

.caption{
	width:100%;
	height:auto;
	display:block;
	position: absolute;
	background:url("../img/caption.png");
	bottom: 0px;
	left:0px;
	padding:0 5% 0 8%;
	z-index:9999;
	box-sizing:border-box;
	text-align:left;
	overflow:hidden;
	-webkit-box-shadow: 1px 5px 15px 3px rgba(0,0,0,0.54); 
	box-shadow: 1px 5px 15px 3px rgba(0,0,0,0.54);
}

.caption h3 {
	text-transform:uppercase; 
	color:#4D0708; 
	font-weight: bold;
	font-size:14px; 
	letter-spacing: 1px; 
	margin:2px 0 0 0;
	padding-bottom:0;
	text-align:left;
}

.caption p {
	color:#333; 
	font-size:12px; 
	letter-spacing:0;
	margin:2px 0 0 0
	padding-bottom:0px;
	text-align:left;
}

.caption p a{
	text-decoration:underline;
	color:#666;
	font-size: 12px;
	text-align:left;
}

.caption p a:hover{
	color:#666;
}
	
	.up{
	width:20px;
	padding:3px 3px 3px 3px;
	margin:20px 0 10px 0;
		font-size:12px;
	text-align:center;
	background:#4D0708;
	position:fixed;
	right:0;
	bottom: 100px;
	z-index:999999999999;
}

.up a{color:#fff;text-decoration:none;}

	
	.banner{
		width:100%;
		margin:50px 0;
	}
	
main{
	width:100%;
	margin:60px 0 0 0 ;
	padding:0 ;
	float:left;	
	position:relative;
	z-index:1;
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:space-around;
	align-items:stretch;
	align-content:flex-start;
}
	
	.wide{
		width:100%;
		margin:0;
		padding:0;
	}
	
	#bereiche{
		width:90%;
		margin: 0 0 0 0;
		padding: 60px 5% 20px 5%;
		background:#fff;
		color:#333;
	}
	
	#content{
		width:84%;
		margin:0;
		padding:60px 8% 40px 8%;
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items:stretch;
		justify-content: space-between;
	}

	.bereich{
		width:100%;
		margin:20px 0 40px 0;
		padding:0 0 50px 0;
		background:#fff;
		-webkit-box-shadow: 3px 5px 11px -1px rgba(0,0,0,0.5); 
		box-shadow: 3px 5px 11px -1px rgba(0,0,0,0.5);
		position:relative;
	}
	
	.mehr{
		width:100%;
		padding: 10px 0 10px 0;
		text-align:center;
		color: #fff;
		font-size:16px;
		font-weight:400;
		background:#4D0708;
		position:absolute;
		bottom:0;
		}
	
	.mehr a{color:#fff; text-decoration:none;}
	.mehr a:hover {color: #ccc;}

	.text{
		width:90%;
		padding:0 5% 0 5%;
	}
#kontakt{
	width:100%;
	padding:60px 0 0 0;
	margin:20px 0 0 0;
	color:#999;
	background: rgb(228,231,231);
background: linear-gradient(52deg, rgba(228,231,231,1) 11%, rgba(163,162,160,1) 84%);
	margin-bottom:0;
	}

.communication{
	width:84%;
	margin:0 8% 0 8%;
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	align-items:stretch;
	justify-content: space-between;
	
}

.contact{
	width:100%;
	margin: 15px 0 0px 0;
	padding:20px 0 20px 0;
	background:#F4F1F1;
	text-align:center;
}
	
	.contact2{
	width:49%;
	margin: 10px 0 30px 0;
	padding:20px 0 20px 0;
	background:#F4F1F1;
	text-align:center;
}

.contact h1, .contact2 h1, .formular h1 {
	font-size:14px;
	color:#333;
	text-align:center;
	margin-bottom:10px;
}

.contact p, .contact2 p {
	text-align:center;
	color:#4D0708;
}

.contact a. .contact2 a{
	text-align:center;
	color:#4D0708;
	font-size: 10px;
}

.contact_icon{
	margin-bottom:20px;
}

.formular{
	width:84%;
	margin: 10px 0 0px 0;
	padding: 10px 8% 20px 8%;
	display:flex;
	align-content: center;
	flex-wrap:wrap;
	text-align:center;
	background-image: url("../img/snack-g93d5dd988_1920.jpg");
	background-position: right;
	background-repeat:no-repeat;
	background-size:cover;
}

#topic{
	width:100%;
	margin: 40px 0 0 0;
	Color:#333;
	font-size:20px;
	font-weight: 500;
	line-height:40px;
	text-align:center;

}
form {
	width: 90%; /* Breite des Formulars */
	padding: 10px 3%;
	margin: 0 2% 30px 2%;
	border:1px solid #999;
	border-radius:none;
	background:#F4F1F1;
	text-align:left;
}

label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer;
	color:#4D0708;
	line-height:16px;
	font-size:14px;
	font-weight:400;
}

input#absender, input#name, input#telefon,
textarea {
	width: 100%;
	border: 1px solid #ccc;
	line-height:120%;
	border-radius:3px;
	margin-top:5px;
	margin-bottom: 10px;
	padding: 4px 0;
	transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
}

textarea {
	height: 6em;
	border-radius:3px;
	}

input:focus,
textarea:focus, fieldset:focus {
	background-color: #e1e1e1;
	-webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.48);
	-moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.48);
	box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.48);
	transform: scale(1.0);
	-moz-transform: scale(1.0);
	-ms-transform: scale(1.0);
	-o-transform: scale(1.0);
	-webkit-transform: scale(1.0);
	transform-origin:top left;
	-webkit-transform-origin:top left;
	-moz-transform-origin:top left;
	-ms-transform-origin:top left;
	-o-transform-origin:top left;
}

.button {
 cursor: pointer;
 padding:5px 12px 5px 12px;
 display:inline;
 text-decoration:none;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 position:relative;
 background-color:#fff;
 color:#999;
 font-size:14px;
 font-weight: normal;
 border : 1px outset #ccc;
 width : 40%;
}

.button_send {
 cursor: pointer;
 padding:5px 12px 5px 12px;
 display:inline;
 text-decoration:none;
 border-radius:5px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 position:relative;
 background-color:#fff;
 color:#333333;
 font-size:14px;
 font-weight: normal;
 border : 1px outset #666;
 width : 40%;
}
.button:hover, .button:focus {
	text-decoration:none;
	background:#F3EEEE;
	font-weight:bold;
}

.button_send:hover, .button_send:focus {
	text-decoration:none;
	background:#F3EEEE;
}

footer{
	height:auto;
	width:100%;
	padding:10px 0 10px 0;
	background:#000;	
	position:relative;
	bottom:0;
	float:left;
	clear:both;
}

#copyright{
	width:100%;
	margin:0 0 10px 0;	
	color:#fff;
	text-align:center;
	font-size:16px;
	font-weight:400;
	line-height:24px;
	float:left;
}

#footermenu{
	width:100%;
	margin:0 0 0 0;
	background:none;
	text-align:center;
	float:left;
}

.fb{
	width:26px;
	height:26px;
	padding:5px 5px 5px 5px;
	position:fixed;
	right:40px;
	top:12px;
	background:#fff;
	z-index:99999999999999999999;
}
.insta{
	width:26px;
	height:26px;
	padding:5px 5px 5px 5px;
	position:fixed;
	right:5px;
	top:12px;
	background:#fff;
	z-index:99999999999999999999;

}

	.fb:hover, .insta:hover{
		cursor:grab;
		opacity:0.8;
	}
	
button{
	color:#333;
	font-size:16px;
	line-height:40px;
	padding:0 10px;
	background:#000;
	border:none;
	}
	

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow:auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 30px 5%;
  border: 1px solid #888;
  width: 80%;
  height:600px;
  color:#666;
  font-size:10px;
  font-weight:100; 
  text-align:justify;
  overflow:inherit;
}
	
.modal-content p{
	color:#4D0708;
	font-size:16px;
	font-weight:300;
	margin:0;
	}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

	* The Modal2 (background) */
.modal2 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow:auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal2-content {
  background-color: #fefefe;
  margin: auto;
  padding: 30px 5%;
  border: 1px solid #888;
  width: 80%;
  height:600px;
  color:#666;
  font-size:10px;
  font-weight:100; 
  text-align:justify;
  overflow:inherit;
}
	
.modal2-content p{
	color:#4D0708;
	font-size:16px;
	font-weight:300;
	margin:0;
	}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

	
}

/*------END mobile-----*/


@media only screen and (min-width:701px) and (max-width:1024px)	{
	
h1{
	font-size:30px;
	font-weight:500;
	line-height:40px;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color:#4D0708;
	text-align:center;
	margin-bottom:20px;
}

h2{
	font-size:16px;
	font-weight:500;
	margin-top:10px;
	margin-bottom:10px;
	color:#333333;
	text-align:center;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

h3{
	font-size:16px;
	font-weight:500;
	line-height:20px;
	color:#333333;
	text-align:center;
	margin:10px 0 20px 0;
}

h5{
	font-size:10px;
	font-weight:100;
	line-height:18px;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	color:#fff;
	width:100%;
}

p{
	font-size: 12px;
	font-weight: normal;
	margin-bottom: 10px;
	line-height: 18px;
	white-space: normal;
	text-align: justify;
	color:#999999;
}

span{
	color:#4D0708;
}

/* Header  */
header{
	margin:0 ;
	padding:0 0 0 0;
	width:100%;
	height:60px;
	position:fixed;
	border-bottom:2px solid #666;
	z-index:999999;
	float:left;
	clear:both;
	background:#fff;
		-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
	
	.logo{
		height:40px;
		width: auto;
		margin:5px 0 5px 5%;
		z-index:99999;
	}
	
	nav ul{line-height:60px; text-align:right; width:auto; padding:0 70px 0 20px;}

nav li{
	display:inline-block; 
	text-align:left;
	height:60px; 
	font-size:0;
}

nav a, nav a:visited {
	display:inline-block;
	padding:0 10px 0 10px; 
	text-transform:uppercase;
	text-decoration:none;
	text-align:right;
	color:#4D0708;
	font-size:15px;
	font-weight:500;
	line-height:60px;
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}


nav a:hover{
	color:#fff;
	background:#4d0708; 

}

.menu{
	width:auto;
	height:60px;
	background:none;
	position:absolute;
	top:0px;	
	right:20px;
	z-index:99999999;
	border-top:none;
	border-bottom:none;
	transition:none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	-webkit-transition: none;
}

.menu-icon{	display:none;}

.menu-icon:hover{color:#333;}

#menuToggle{display:none;}
#menuToggle:checked ~ .menu {top:62px; left:0px; position:absolute; z-index:999;}
	
	
/* End header  */	

	.cycle-slideshow{
	width:100%;
	max-width:1024px;
	display:block;
	position:relative;
	margin:0 auto;
	overflow:hidden;
	z-index:9999999;
	}

.slide{display:block; position:relative; width:100%; 		background:red;}

.caption{
	width:70%;
	height:auto;
	display:block;
	position: absolute;
	background:url("../img/caption.png");
	bottom: 30px;
	left:5%;
	padding:5px 5% 5px 5%;
	z-index:9999;
	box-sizing:border-box;
	text-align:left;
	overflow:hidden;
	-webkit-box-shadow: 1px 5px 15px 3px rgba(0,0,0,0.54); 
	box-shadow: 1px 5px 15px 3px rgba(0,0,0,0.54);
}

.caption h3 {
	text-transform:uppercase; 
	color:#4D0708; 
	font-weight: bold;
	font-size:14px; 
	letter-spacing: 1px; 
	margin:2px 0 0 0;
	padding-bottom:0;
	text-align:left;
}

.caption p {
	color:#333; 
	font-size:12px; 
	letter-spacing:0;
	margin:2px 0 0 0
	padding-bottom:0px;
	text-align:left;
}

.caption p a{
	text-decoration:underline;
	color:#666;
	font-size: 12px;
	text-align:left;
}

.caption p a:hover{
	color:#666;
}
	
	.up{
	width:20px;
	padding:3px 3px 3px 3px;
	margin:20px 0 10px 0;
		font-size:12px;
	text-align:center;
	background:#4D0708;
	position:fixed;
	right:0;
	bottom: 100px;
	z-index:999999999999;
}

.up a{color:#fff;text-decoration:none;}

main{
	width:100%;
	margin:60px 0 0 0 ;
	padding:0 ;
	float:left;	
	position:relative;
	z-index:1;
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:space-around;
	align-items:stretch;
	align-content:flex-start;
}
	
	.wide{
		width:100%;
		margin:0;
		padding:0;
	}
	
	#bereiche{
		width:80%;
		margin: 0 0 0 0;
		padding: 60px 10% 20px 10%;
		background:#fff;
		color:#333;
	}
	
	#content{
		width:90%;
		margin:0;
		padding:60px 5% 30px 5%;
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items:stretch;
		justify-content: space-between;
	}

	.bereich{
		width:48%;
		margin:20px 0 0 0;
		padding:0 0 50px 0;
		background:#fff;
		-webkit-box-shadow: 3px 5px 11px -1px rgba(0,0,0,0.5); 
		box-shadow: 3px 5px 11px -1px rgba(0,0,0,0.5);
		position:relative;
	}
	
	.mehr{
		width:100%;
		padding: 10px 0 10px 0;
		text-align:center;
		color: #fff;
		font-size:16px;
		font-weight:400;
		background:#4D0708;
		position:absolute;
		bottom:0;
		}
	
	.mehr a{color:#fff; text-decoration:none;}
	.mehr a:hover {color: #ccc;}

	.text{
		width:90%;
		padding:0 5% 0 5%;
	}
#kontakt{
	width:100%;
	padding:60px 0 0 0;
	margin:20px 0 0 0;
	color:#999;
	background: rgb(228,231,231);
background: linear-gradient(52deg, rgba(228,231,231,1) 11%, rgba(163,162,160,1) 84%);
	margin-bottom:0;
	}

.communication{
	width:90%;
	margin:0 5% 0 5%;
	padding: 0 0 30px 0;
	display:flex;
	flex-direction: row;
	flex-wrap:nowrap;
	align-items:stretch;
	justify-content: space-between;
	
}

.contact{
	width:32%;
	margin: 15px 0 0px 0;
	padding:20px 0 20px 0;
	background:#F4F1F1;
	text-align:center;
}
	
	.contact2{
	width:32%;
	margin: 15px 0 0px 0;
	padding:20px 0 20px 0;
	background:#F4F1F1;
	text-align:center;
}

.contact h1, .contact2 h1, .formular h1 {
	font-size:14px;
	color:#333;
	text-align:center;
	margin-bottom:10px;
}

.contact p, .contact2 p {
	text-align:center;
	color:#4D0708;
}

.contact a. .contact2 a{
	text-align:center;
	color:#4D0708;
	font-size: 10px;
}

.contact_icon{
	margin-bottom:20px;
}

.formular{
	width:90%;
	margin: 10px 0 0px 0;
	padding: 10px 5% 20px 5%;
	display:flex;
	align-content: center;
	flex-wrap:wrap;
	text-align:center;
	background-image: url("../img/snack-g93d5dd988_1920.jpg");
	background-position: right;
	background-repeat:no-repeat;
	background-size:cover;
}

#topic{
	width:100%;
	margin: 40px 0 0 0;
	Color:#333;
	font-size:20px;
	font-weight: 500;
	line-height:40px;
	text-align:center;

}
form {
	width: 90%; /* Breite des Formulars */
	padding: 10px 3%;
	margin: 0 2% 30px 2%;
	border:1px solid #999;
	border-radius:none;
	background:#F4F1F1;
	text-align:left;
}

label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer;
	color:#4D0708;
	line-height:16px;
	font-size:14px;
	font-weight:400;
}

input#absender, input#name, input#telefon,
textarea {
	width: 100%;
	border: 1px solid #ccc;
	line-height:120%;
	border-radius:3px;
	margin-top:5px;
	margin-bottom: 10px;
	padding: 4px 0;
	transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
}

textarea {
	height: 6em;
	border-radius:3px;
	}

input:focus,
textarea:focus, fieldset:focus {
	background-color: #e1e1e1;
	-webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.48);
	-moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.48);
	box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.48);
	transform: scale(1.0);
	-moz-transform: scale(1.0);
	-ms-transform: scale(1.0);
	-o-transform: scale(1.0);
	-webkit-transform: scale(1.0);
	transform-origin:top left;
	-webkit-transform-origin:top left;
	-moz-transform-origin:top left;
	-ms-transform-origin:top left;
	-o-transform-origin:top left;
}

.button {
 cursor: pointer;
 padding:5px 12px 5px 12px;
 display:inline;
 text-decoration:none;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 position:relative;
 background-color:#fff;
 color:#999;
 font-size:14px;
 font-weight: normal;
 border : 1px outset #ccc;
 width : 40%;
}

.button_send {
 cursor: pointer;
 padding:5px 12px 5px 12px;
 display:inline;
 text-decoration:none;
 border-radius:5px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 position:relative;
 background-color:#fff;
 color:#333333;
 font-size:14px;
 font-weight: normal;
 border : 1px outset #666;
 width : 40%;
}
.button:hover, .button:focus {
	text-decoration:none;
	background:#F3EEEE;
	font-weight:bold;
}

.button_send:hover, .button_send:focus {
	text-decoration:none;
	background:#F3EEEE;
}

footer{
	height:auto;
	width:100%;
	padding:10px 0 10px 0;
	background:#000;	
	position:relative;
	bottom:0;
	float:left;
	clear:both;
}

#copyright{
	width:100%;
	margin:0 0 10px 0;	
	color:#fff;
	text-align:center;
	font-size:16px;
	font-weight:400;
	line-height:24px;
	float:left;
}

#footermenu{
	width:100%;
	margin:0 0 0 0;
	background:none;
	text-align:center;
	float:left;
}

.fb{
	width:26px;
	height:26px;
	padding:5px 5px 5px 5px;
	position:fixed;
	right:45px;
	top:12px;
	background:#fff;
	z-index:99999999999999999999;
}
.insta{
	width:26px;
	height:26px;
	padding:5px 5px 5px 5px;
	position:fixed;
	right:5px;
	top:12px;
	background:#fff;
	z-index:99999999999999999999;

}

	.fb:hover, .insta:hover{
		cursor:grab;
		opacity:0.8;
	}
	
button{
	color:#fff;
	font-size:16px;
	line-height:40px;
	padding:0 10px;
	background:#000;
	border:none;
	}
	
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow:auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 30px 5%;
  border: 1px solid #888;
  width: 80%;
  height:600px;
  color:#666;
  font-size:10px;
  font-weight:100; 
  text-align:justify;
  overflow:inherit;
}
	
.modal-content p{
	color:#4D0708;
	font-size:16px;
	font-weight:300;
	margin:0;
	}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

}

/*------END tablet-----*/




@media only screen and (min-width:1025px) {
	
h1{
	font-size:30px;
	font-weight:500;
	line-height:40px;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color:#4D0708;
	text-align:center;
	margin-bottom:20px;
}

h2{
	font-size:16px;
	font-weight:500;
	margin-top:10px;
	margin-bottom:10px;
	color:#333333;
	text-align:center;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

h3{
	font-size:16px;
	font-weight:500;
	line-height:20px;
	color:#333333;
	text-align:center;
	margin:10px 0 20px 0;
}

h5{
	font-size:14px;
	font-weight:100;
	line-height:24px;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	color:#fff;
	width:100%;
}

p{
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 18px;
	line-height: 24px;
	white-space: normal;
	text-align: justify;
	color:#999999;
}

span{
	color:#4D0708;
}

/* Header  */
header{
	margin:0 ;
	padding:0 0 0 0;
	width:100%;
	height:60px;
	position:fixed;
	border-bottom:2px solid #666;
	z-index:999999;
	float:left;
	clear:both;
	background:#fff;
		-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
	
	.logo{
		height:50px;
		width: auto;
		margin: 3px 0 3px 3%;
		z-index:99999;
	}
	
	nav ul{line-height:60px; text-align:center; width:auto; padding:0 120px 0 20px;}

nav li{
	display:inline-block; 
	text-align:center;
	height:60px; 
	font-size:0;
}

nav a, nav a:visited {
	display:inline-block;
	margin:0;
	padding:0 20px 0 20px; 
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	color:#4D0708;
	font-size:18px;
	font-weight:500;
	line-height:60px;
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}


nav a:hover{
	color:#fff;
	background:#4d0708; 

}

.menu{
	width:auto;
	height:60px;
	background:none;
	position:absolute;
	top:0px;	
	right:20px;
	z-index:99999999;
	border-top:none;
	border-bottom:none;
	transition:none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	-webkit-transition: none;
}

.menu-icon{	display:none;}

.menu-icon:hover{color:#333;}

#menuToggle{display:none;}
#menuToggle:checked ~ .menu {top:62px; left:0px; position:absolute; z-index:999;}
	
	
/* End header  */	

	.cycle-slideshow{
	width:100%;
	max-width:4000px;
	display:block;
	position:relative;
	margin:0 auto;
	overflow:hidden;
	z-index:9999999;
	}

.slide{display:block; position:relative; width:100%; 		background:red;}

.caption{
	width:60%;
	height:auto;
	display:block;
	position: absolute;
	background:url("../img/caption.png");
	bottom: 30px;
	left:3%;
	padding:15px 5% 15px 3%;
	z-index:9999;
	box-sizing:border-box;
	text-align:left;
	overflow:hidden;
	-webkit-box-shadow: 1px 5px 15px 3px rgba(0,0,0,0.54); 
	box-shadow: 1px 5px 15px 3px rgba(0,0,0,0.54);
}

.caption h3 {
	text-transform:uppercase; 
	color:#4D0708; 
	font-weight: bold;
	font-size:16px; 
	letter-spacing: 1px; 
	margin:2px 0 10px 0;
	padding-bottom:0;
	text-align:left;
}

.caption p {
	color:#333; 
	font-size:14px; 
	letter-spacing:0;
	margin:2px 0 0 0
	padding-bottom:0px;
	text-align:left;
}

.caption p a{
	text-decoration:underline;
	color:#666;
	font-size: 12px;
	text-align:left;
}

.caption p a:hover{
	color:#666;
}
	
	.up{
	width:30px;
	padding:3px 3px 3px 3px;
	margin:20px 0 10px 0;
		font-size:14px;
	text-align:center;
	background:#4D0708;
	position:fixed;
	right:0;
	bottom: 100px;
	z-index:999999999999;
}

.up a{color:#fff;text-decoration:none;}

main{
	width:100%;
	margin:60px 0 0 0 ;
	padding:0 ;
	float:left;	
	position:relative;
	z-index:1;
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:space-around;
	align-items:stretch;
	align-content:flex-start;
}
	
	.wide{
		width:100%;
		margin:0;
		padding:0;
	}
	
	#bereiche{
		width:70%;
		margin: 40px 0 50px 0;
		padding: 60px 5% 20px 5%;
		background:#fff;
		color:#333;
	}
	
	#content{
		width:70%;
		margin:0;
		padding:60px 15% 0 15%;
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items:stretch;
		justify-content: space-between;
	}

	.bereich{
		width:45%;
		margin:20px 0 0 0;
		padding:0 0 50px 0;
		background:#fff;
		-webkit-box-shadow: 3px 5px 11px -1px rgba(0,0,0,0.5); 
		box-shadow: 3px 5px 11px -1px rgba(0,0,0,0.5);
		position:relative;
	}
	
	.mehr{
		width:100%;
		padding: 10px 0 10px 0;
		text-align:center;
		color: #fff;
		font-size:16px;
		font-weight:400;
		background:#4D0708;
		position:absolute;
		bottom:0;
		}
	
	.mehr a{color:#fff; text-decoration:none;}
	.mehr a:hover {color: #ccc;}

	.text{
		width:90%;
		padding:0 5% 0 5%;
	}
#kontakt{
	width:100%;
	padding:60px 0 0 0;
	margin:20px 0 0 0;
	color:#999;
	background: rgb(228,231,231);
background: linear-gradient(52deg, rgba(228,231,231,1) 11%, rgba(163,162,160,1) 84%);
	margin-bottom:0;
	}

.communication{
	width:70%;
	margin:0 15% 0 15%;
	padding: 0 0 60px 0;
	display:flex;
	flex-direction: row;
	flex-wrap:nowrap;
	align-items:stretch;
	justify-content: space-between;
	
}

.contact{
	width:32%;
	margin: 15px 0 0px 0;
	padding:20px 0 20px 0;
	background:#F4F1F1;
	text-align:center;
}
	
	.contact2{
	width:32%;
	margin: 15px 0 0px 0;
	padding:20px 0 20px 0;
	background:#F4F1F1;
	text-align:center;
}

.contact h1, .contact2 h1, .formular h1 {
	font-size:14px;
	color:#333;
	text-align:center;
	margin-bottom:10px;
}

.contact p, .contact2 p {
	text-align:center;
	color:#4D0708;
}

.contact a. .contact2 a{
	text-align:center;
	color:#4D0708;
	font-size: 10px;
}

.contact_icon{
	margin-bottom:20px;
}

.formular{
	width:90%;
	margin: 10px 0 0px 0;
	padding: 10px 5% 20px 5%;
	display:flex;
	align-content: center;
	flex-wrap:wrap;
	text-align:center;
	background-image: url("../img/snack-g93d5dd988_1920.jpg");
	background-position: right;
	background-repeat:no-repeat;
	background-size:cover;
}

#topic{
	width:100%;
	margin: 40px 0 0 0;
	Color:#333;
	font-size:20px;
	font-weight: 500;
	line-height:40px;
	text-align:center;

}
form {
	width: 70%; /* Breite des Formulars */
	padding: 60px 5%;
	margin: 0 10% 30px 10%;
	border:1px solid #999;
	border-radius:none;
	background:#F4F1F1;
	text-align:left;
}

label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer;
	color:#4D0708;
	line-height:16px;
	font-size:14px;
	font-weight:400;
}

input#absender, input#name, input#telefon,
textarea {
	width: 100%;
	border: 1px solid #ccc;
	line-height:120%;
	border-radius:3px;
	margin-top:5px;
	margin-bottom: 10px;
	padding: 4px 0;
	transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
}

textarea {
	height: 6em;
	border-radius:3px;
	}

input:focus,
textarea:focus, fieldset:focus {
	background-color: #e1e1e1;
	-webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.48);
	-moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.48);
	box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.48);
	transform: scale(1.0);
	-moz-transform: scale(1.0);
	-ms-transform: scale(1.0);
	-o-transform: scale(1.0);
	-webkit-transform: scale(1.0);
	transform-origin:top left;
	-webkit-transform-origin:top left;
	-moz-transform-origin:top left;
	-ms-transform-origin:top left;
	-o-transform-origin:top left;
}

.button {
 cursor: pointer;
 padding:5px 12px 5px 12px;
 display:inline;
 text-decoration:none;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 position:relative;
 background-color:#fff;
 color:#999;
 font-size:14px;
 font-weight: normal;
 border : 1px outset #ccc;
 width : 40%;
}

.button_send {
 cursor: pointer;
 padding:5px 12px 5px 12px;
 display:inline;
 text-decoration:none;
 border-radius:5px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 position:relative;
 background-color:#fff;
 color:#333333;
 font-size:14px;
 font-weight: normal;
 border : 1px outset #666;
 width : 40%;
}
.button:hover, .button:focus {
	text-decoration:none;
	background:#F3EEEE;
	font-weight:bold;
}

.button_send:hover, .button_send:focus {
	text-decoration:none;
	background:#F3EEEE;
}

footer{
	height:auto;
	width:100%;
	padding:10px 0 10px 0;
	background:#000;	
	position:relative;
	bottom:0;
	float:left;
	clear:both;
}

#copyright{
	width:100%;
	margin:0 0 10px 0;	
	color:#fff;
	text-align:center;
	font-size:16px;
	font-weight:400;
	line-height:24px;
	float:left;
}

#footermenu{
	width:100%;
	margin:0 0 0 0;
	background:none;
	text-align:center;
	float:left;
}

.fb{
	width:36px;
	height:36px;
	padding:5px 5px 5px 5px;
	position:fixed;
	right:70px;
	top:7px;
	background:#fff;
	z-index:99999999999999999999;
}
.insta{
	width:36px;
	height:36px;
	padding:5px 5px 5px 5px;
	position:fixed;
	right:20px;
	top:7px;
	background:#fff;
	z-index:99999999999999999999;

}

	.fb:hover, .insta:hover{
		cursor:grab;
		opacity:0.8;
	}
	
button{
	color:#fff;
	font-size:16px;
	line-height:40px;
	padding:0 10px;
	background:#000;
	border:none;
	}
	
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow:auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 30px 5%;
  border: 1px solid #888;
  width: 80%;
  height:600px;
  color:#666;
  font-size:10px;
  font-weight:100; 
  text-align:justify;
  overflow:inherit;
}
	
.modal-content p{
	color:#4D0708;
	font-size:16px;
	font-weight:300;
	margin:0;
	}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

}

/*------END mobile-----*/