@import url(https://fonts.googleapis.com/css?family=Muli:400,300);

html {  margin: 0px; padding: 0px; }
body { font-family: Muli; font-weight: 400; background: url('/media/images/bg.jpg');background-repeat:no-repeat;color: #666666; font-size: 18px; background-size: cover; }
figure { margin: 0px; padding: 0px; }
a { color: #666666; text-decoration: none; }
a.button { margin: 2px; background: #c59f70; color: #fff; text-transform: uppercase; width: 300px; float: right; display: block; text-align: center; margin-right: 147px; padding: 5px; }
h1 { font-size: 39px !important; font-weight: 300 !important; color: #c59f70 !important;  }
h2 { font-size: 25px; font-weight: 300; color: #c59f70;  }
small { font-size: 11px; }
#wrapper{ max-width: 1024px; width: 100%;margin: 0 auto;}
#wrapper.after:after{
	content: "";
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5)
}
.block {overflow: visible;}
#header .mod_navigation { margin-top: 60px; height: 60px; background: #fff; }
#header .mod_navigation ul.level_1 {  margin: 0px auto; padding: 0px; height: 60px; max-width: 1024px; width: 100%; line-height: 60px; display: block; }
#header .mod_navigation ul li { display: block; float: left;  margin: 0px 0px 0px 35px; padding: 0px 0px 0px 0px; text-transform: uppercase; font-weight: 300; }
#header .mod_navigation ul li.first { margin-left: 255px; }
#logo { position: relative; max-width: 1024px; width: 100%; margin: 0px auto; left: 50px; top: -60px; }
#logo a { display: block; position: absolute; z-index: 100; }
.mobile-nav-button{display:none;}
#container { max-width: 1024px; width: 100%; margin: 0px auto; background: #fff; }

.mod_navigation .level_1>li.submenu ul{
	display: none;
}
.mod_navigation .level_2{
	background: rgb(230, 230, 230);
	padding-left: 25px;
}
#main .mod_navigation ul { display: block; list-style-type: none; height: 40px; margin: 0px; padding: 0px;  font-weight: 300; }
#main .mod_navigation ul li { border: 1px solid #C59F70;display: block; float: left; width: 254px; margin: 0px; padding: 0px; text-align: center; height: 40px; line-height: 40px; }
#main .mod_navigation ul li.active,#main .mod_navigation ul li:hover { background-color: #c59f70; border: 1px solid #fff;color:#fff}
#main .mod_navigation ul li.active span,#main .mod_navigation ul li:hover a  { color: #fff; }
#main .mod_navigation ul{display: flex;justify-content: center; flex-wrap: wrap; height: auto}
.mod_navigation ul li.submenu ul.level_2{display: none}
#main .inside .ce_text:first-child { padding: 35px 55px 0px 55px; }
#main .inside .ce_text { padding: 0 55px 0px 55px; }
#main .inside .ce_text:last-child { padding: 0 55px 35px 55px; }
#main .inside .ce_gallery { padding: 0 55px 0px 55px; }
#main .inside .ce_form  { padding: 0px 55px 35px 55px; }
#main .inside .ce_headline  { padding: 0px 55px; }
#main .inside .ce_image img { display: block; }
.g-map{width: 425px; float: left; margin-right: 30px;}
#footer { max-width: 1024px; width: 100%; margin: 0px auto; background: #fff; height: 80px; margin-bottom: 50px; font-size: 16px;  }
#footer .inside { height: 28px; line-height: 28px; position: relative; padding: 0px 55px; }
#footer .inside a { text-decoration: underline; }
#footer .inside img  { display: block; position: absolute; top: 0px; right: 55px; }

#juistflora-nav {
	width: 35px;
	height: 45px;
	position: absolute;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	top: 13px;
	right: -42px;
}

#juistflora-nav span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #666666;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

#juistflora-nav span:nth-child(1) {
	top: 0px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

#juistflora-nav span:nth-child(2) {
	top: 10px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

#juistflora-nav span:nth-child(3) {
	top: 20px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}

#juistflora-nav.open span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: -3px;
	left: 5px;
}

#juistflora-nav.open span:nth-child(2) {
	width: 0%;
	opacity: 0;
}

#juistflora-nav.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 23px;
	left: 5px;
}
@media only screen and (max-width: 1023px) {
	#logo{
		position: absolute;
		top: 60px;
		left: 20px;
		width: 150px;
	}
	#header .mod_navigation{
		margin-top: 0px;
	}
	#header .mod_navigation ul.level_1{
		display: flex;
		justify-content: space-around;
		flex-flow: row wrap;
	}
	#header .mod_navigation ul li{
		margin: 0px;

	}
	#header .mod_navigation ul li.first{
		margin-left: initial;
	}
	.ce_gallery li{
		display: inline-block;
		float: inherit;
	}
	#main .mod_navigation ul li{
		width: calc(25% - 2px);
	}
}
@media only screen and (max-width: 768px) {
	.block{
		overflow: hidden;
	}
	#logo{
		left: inherit;
		right: 15px;
		top: 0px;
		width: 90px
	}
	#wrapper{
		position: relative;
	}
	.mobile-nav-button{
		display: block;
	}
	#header .inside{
		position: inherit;
	}
	#header .mod_navigation{
		position: fixed;
		max-width: 200px;
		height: 100%;
		background: #fff;
		z-index: 10;
		transform: translateX(-200px);
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		overflow:visible;
		top: 0px
	}
	#header .mod_navigation:before{
		content: "";
		position:absolute;
		width: 50px;
		height: 50px;
		background: #fff;
		right: -50px;
	}
	#header .mod_navigation.open{
		transform: translateX(0px);
	}

	#header .mod_navigation ul{
		height: initial;
	}
	#header .mod_navigation ul.level_1{
		margin-top: 25px;
	}
	#header .mod_navigation ul li{
		float: inherit;
		width: 100%;
		font-size: 16px;
		text-transform: inherit;
		border-bottom: 1px solid #cecece;
		text-align: left;
	}
	#header .mod_navigation ul.level_1>li>a, #header .mod_navigation ul.level_1>li>span{
		padding-left: 15px;
	}
	#header .mod_navigation ul li.active.submenu ul.level_2 li{
		border-bottom: 1px solid #cecece;
	}
	#header .mod_navigation ul li.active.submenu ul.level_2 li.last{
		border-bottom: none;
	}
	#header .mod_navigation ul li.last{
		border-bottom: none;
	}
	.mod_navigation li.active.submenu>ul.level_2,
	.mod_navigation li.trail.submenu>ul.level_2{
		display: block;
	}
	#main .inside .ce_headline{
		padding: 0px 15px;
	}
	#main .mod_navigation ul{
		margin-top: 20px;
	}
	#main .mod_navigation ul li{
		width: 100%;
		margin: 10px 15px;
	}
	.preisliste, .belegungsplan{
		overflow: scroll;
		-webkit-overflow-scrolling: touch; /* lets it scroll lazy */
		padding-top: 100px !important;
		position: relative;
	}
	.mod_navigation span.active{
		font-weight: bold;
	}
	.belegungsplan{
		padding-top: 60px !important;
	}
	.preisliste:before, .belegungsplan:before{
		content: "Bitte wischen!";
		position: absolute;
		width: 100%;
		height: 40px;
		top: 0px;
		font-size: 16px;
		text-align: center;
		left: 0px;
		color: #777;
	}
	.preisliste:after, .belegungsplan:after{
		top: 30px;
		content: "";
		position: absolute;
		width: 100%;
		height: 40px;
		background: url("../images/arrow.svg");
		background-position: 50% 100%;
		display: block;
		background-repeat: no-repeat;
		left: 0px;
	}
	.preisliste table{
		border-collapse: collapse !important;
		width: 750px !important;
	}
	.preisliste td{
		border-bottom: 1px solid #b5b5b5;
		padding: 5px;
	}
	.rating{
		text-align: center;
	}
	.mod_navigation li.submenu{
		display: block !important;
	}
	.mod_navigation .level_1>li{
		position:relative;
	}
	.mod_navigation .level_1>li.submenu:after{
		content: '\f0da';
		font-family: FontAwesome;
		font-weight: normal;
		font-style: normal;
		margin:0px 0px 0px 10px;
		text-decoration:none;
		position: absolute;
		top: 0px;
		right: 10px;
	}
	.mod_navigation .level_1>li.active.submenu:after{
		content: '\f0d7';
		font-family: FontAwesome;
		font-weight: normal;
		font-style: normal;
		margin:0px 0px 0px 10px;
		text-decoration:none;
		position: absolute;
		top: 0px;
		right: 10px;
	}
	.g-map{width: 100%;}
	.g-map iframe{width: 100%}
	.button-group{
		display: flex;
		flex-wrap: wrap;
	}
	.button-group a{
		width: 100%;
		margin-right: inherit;
		display: block;
	}
	.tableform table{
		width: 100%;
	}
	.tableform tr{
		display: block;
	}
	.tableform td{
		display: block;
	}
	.tableform input{
		width: 100%;
	}
	.ce_gallery ul{
		text-align: center;
	}
	.ce_gallery li{
		float: inherit;
		margin: 0px auto;
	}
	#footer{
		padding: 20px 0px;
	}
	#footer, #footer .inside{
		height: inherit;
		margin-bottom:0px;
	}
	#footer .inside{
		padding: 0px 15px;
		text-align: center;
	}
	#footer .inside img{
		display: block;
		position: inherit;
		top: inherit;
		right: inherit;
		margin: 10px auto;
	}

}
@media only screen and (max-width: 630px) {
	#main .inside .ce_text, #main .inside .ce_text:last-child, #main .inside .ce_gallery, #main .inside .ce_form{
		padding: 0 15px 0px 15px;
	}
	.belegungsplan{
		overflow: scroll;
		-webkit-overflow-scrolling: touch; /* lets it scroll lazy */
	}
	.belegungsplan iframe{
		width: 600px
	}
}


.buttonbuchung{
	margin-top: 50px;
	margin-bottom:50px;
}

.buttonbuchung > a.button{
	margin-right: unset;
	margin: auto;
	float: unset;
	background: #3182ce;
}