html { scroll-behavior:smooth; }

body { font-family: 'billabongregular', Arial, Helvetica, Verdana, Geneva, sans-serif; margin: 0; padding: 0; font-size: 2rem; font-weight: 300; }

input,textarea,select,button { font-family: 'billabongregular', Arial, Helvetica, Verdana, Geneva, sans-serif; font-size: 90%; font-weight: 300; }

nav { width: 100%; height: 96px; display: block; position: fixed; background: transparent none; z-index: 5; }
nav ul, nav ul li { list-style-type: none; margin: 0; padding: 0; }
nav ul li { float: left; text-align: center; }
nav ul li a { color: #fff; font-size: 150%; line-height: normal; font-weight: 300; }

a.home { width: 200px; height: auto; display: block; position: absolute; left: 10px; top: 10px; z-index: 5; }
a.home img { width: 100%; height: auto; display: block; }

nav #menu { position: absolute; width: auto; display: block; left: 10px; top: 90px; z-index: 5; }
nav ul.menu { width: 200px; margin: 0; height: auto;  }
nav ul.menu li { width: 100%; margin: 0; }
nav ul.menu li a { display: block; padding: 0 20px; text-align: center; width: 100%; }
nav ul.menu li a:hover { color: #009fe3; }
nav a { opacity: 0.9; text-decoration: none; }
nav a:hover { opacity: 1; text-decoration: none; }

nav ul.sm { position: absolute; right: 10px; width: 120px; margin-top: 25px; height:50px; }
nav ul.sm li { width: 50px; text-align: center; height: 50px;}
nav ul.sm li a { border-radius: 25px; background: #00aeef none; display: block; width: 50px; height: 50px; line-height: 50px; font-size: 25px; opacity: 0.5; }
nav ul.sm li a:before { line-height: 48px; }
nav ul.sm li a:hover { opacity: 1; }


#slider { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: #000; }
#slider > div { background: transparent none  center center no-repeat; background-size: cover; }

.box { display: block; min-height: 100px; background-color: #fff; max-width: 600px; width: 80%; margin: 100px auto; padding: 20px; color: #000; }

#boxmodelle > img { border-radius: 20px; height: auto; width: 100%; max-width: 600px; margin: 0 auto; display: block; }

.box h3 { font-weight: 400; font-size: 120%; margin: 10px 0; }
.box h2 { font-weight: 500; font-size: 150%; margin: 20px; text-align: center; }
.box h1 { font-weight: 500; font-size: 300%; margin: 20px; text-align: center; }



footer { display: block; background: #009fe3; text-align: center; color: #fff; }
footer ul { list-style: none; width: auto; margin: 0 auto; padding: 30px 0; text-align: center; }
footer ul li { width: auto; padding: 5px 20px; color: #fff; font-size: 80%;  }
footer ul li a { color: #fff; text-decoration: none; }

#galerie1 { background: transparent; padding: 1px 0 0 1px; border: none; border-radius: 0; }
#galerie1:after { content: " "; display: block; clear: both; float: none;  }
#galerie1 a { display: block; width: 33.333%; padding: 0 1px 1px 0; margin: 0; float: left; box-sizing: border-box; }
#galerie1 a img { display: block; width: 100%; height: auto; padding: 0; margin: 0; border: none; transition: all .2s ease-in-out; }
#galerie1 a:hover img { transform: scale(1.1); }

#contactbox { padding: 0; }
#contactbox > div { background: url("/img/contactbg.jpg") center center no-repeat; background-size: cover; padding: 10px; text-align: center; }

#impressum { display: none; max-width: 600px; width: 80%; margin: 10px auto; padding: 10px; color: #fff; }


@media (min-width: 1500px) {
	.box { max-width: 1000px; }
	#galerie1 a { width: 16.666%; }
}
@media (min-width: 1700px) {
	.box { max-width: 1200px; }
	#galerie1 a { width: 16.666%; }
}
@media (min-width: 1900px) {
	.box { max-width: 1400px; }
	#galerie1 a { width: 16.666%; }
}

.bx-controls { display: none; }

@media (max-width: 768px) {
	nav, a.home { display: none; }
	html { scroll-behavior: auto; }
}