/* Reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, cite, code,del, dfn, img, ins, kbd, q, s, samp, strike, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, .main-nav, output, ruby, section, summary,time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;line-height: 100%;}
body {line-height: 1;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {	border-collapse: collapse;border-spacing: 0;}

/* ----------------------------- */
/* ------- HTML Elements ------- */
/* ----------------------------- */
body {font-family: "Roboto", Helvetica, Arial, sans-serif;color: #505565;background-color: #FFFFFF;}
a {
	color: #0066CC;
	text-decoration: none;
	outline: none;
}
a:focus, a:hover, a:active {text-decoration: underline;}
a.lb {cursor: url(../images/lupe.png), pointer;}
h1 {
	margin: 0 0 24px 0;
	font-size: 20px;
	line-height: 130%;
	font-weight: 400;
	clear:both;
	font-family: 'Montserrat', sans-serif;
	color:#0066CC;
}
h2 {
	margin: 30px 0 20px 0;
	font-size: 16px;
	line-height: 130%;
	font-weight: 400;
	clear:both;
	color:#0066CC;
}
h3 {margin: 20px 0 0 0;font-size: 16px;line-height: 130%;font-weight: 700;}

/* ----------------------------- */
/* ------- Basic Classes ------- */
/* ----------------------------- */
.floatleft {float: left;}
.floatright {float: right;}
.clearfloat {clear: both;}
.hidden {display:none;}
.center {text-align:center;}

/* ----------------------------- */
/* ---- Document Structure ----- */
/* ----------------------------- */
#container {width:100%; max-width:1011px;margin:0 auto;}
#site-header, footer {width:100%;max-width:980px; margin: 0 auto;}
#main {margin:0 auto;background:#fff;}
footer {}

/* ----------------------------- */
/* ---------- Header ----------- */
/* ----------------------------- */
#site-header {background-color:rgba(255,255,255,.2);}
#logo {width: 378px;height: 148px;margin:20px auto;}
#logo img {width: 100%;height: auto;}
#header-tel {color:#fff;font-size:11px;text-align:right;margin: 12px 30px 0 0;}
#header-tel a {
	color:#b2f100;
	font-size:18px;
	display:inline-block;
	height:40px;
}
#header-tel a#festnetz {background:url(../images/tel_festnetz.png) 0 0 no-repeat;padding: 4px 0 0 42px;}
#header-tel a#mobilfunk {background:url(../images/tel_mobil.png) 0 0 no-repeat;padding: 14px 0 0 30px;margin-left:30px;}

/* ------- Mobile Navigation Toggle ------- */
.off-canvas-nav ul {list-style: none;z-index: 10000;width: 100%;text-align: center;}
.off-canvas-nav ul li a {display: inline-block;font-size: 22px;color: #2a5ae3;padding: 10px 10px 10px 40px;margin: 20px 0;background: url(../images/menu.png) 5px 7px no-repeat #fff;}
.off-canvas-nav ul li a:hover {text-decoration: none;}

/* ---------- .main-navigation ----------- */
.main-nav ul {display: none;}
.active-nav .main-nav ul {display: block;width: 100%;list-style: none;margin-bottom: 40px;}
.active-nav .main-nav ul li a {display: block;font-size: 24px;background-color: #557be8;color: #fff;padding: 10px 20px;text-decoration: none;border-bottom: solid 1px #fff;}
.active-nav .main-nav ul li a:focus,.active-nav .main-nav ul li a:hover,.active-nav .main-nav ul li a:active {background-color: #fff;color: #000;}
.active-nav .main-nav ul ul {margin-bottom: 0;}
.active-nav .main-nav ul ul li a {padding-left: 40px;font-size: 20px;}

/* ----------------------------- */
/* ---------- Content ---------- */
/* ----------------------------- */
article {padding: 20px 20px 40px 20px;background:#fff;}
article p {margin: 20px 0 0 0;line-height: 150%;font-size: 14px;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;hyphens: auto;font-style:normal;text-align:justify;}
article img {width:auto;max-width:100%;height:auto;}
article ul, article ol {margin: 26px 0 0 20px;overflow:hidden;padding-left: 1.2em;}
article ul li, article ol li {font-size: 15px;line-height: 150%;margin-top: 7px;font-style:normal;}
.round-image {width: auto;height: auto;margin-right:2rem;border-radius: 50%; -webkit-shape-outside:circle();shape-outside:circle();}

/* ----------------------------- */
/* ---------- Sidebar ---------- */
/* ----------------------------- */
#sidebar {padding: 20px;}
#sidebar .infobox {padding-top:40px;}
#sidebar p {font-size:12px;color:#7b7777;line-height:150%;margin-bottom:18px;padding-left:50px;}
#sidebar p.adresse {background:url(../images/info_adresse.png) 0 0 no-repeat;}
#sidebar p.telefon {background:url(../images/info_tel.png) 0 0 no-repeat;}
#sidebar p.termin {background:url(../images/info_termin.png) 0 0 no-repeat;}
#sidebar .gutschein {margin-top:40px;}

/* ----------------------------- */
/* ----------- Footer ---------- */
/* ----------------------------- */
footer {clear:both;font-style:normal;margin-top:30px;font-size:12px;color:#fff;}
footer a {color:#fff;}

/* ----------------------------- */
/* --------- Specials ---------- */
/* ----------------------------- */

/* ---------- Google Map ----------- */
.map {
	position: relative;
	padding-bottom: 43.6%;
	height: 0;
	overflow: hidden;
}
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* ---------- Slider ----------- */
#slider-container-top {position:relative;width: 100%;}
#slider-top {width: 100%;max-width:980px;margin:0 auto;}
#slider-container-top img {width:100%;height:auto;}

/* ---------- Kontaktformular ----------- */
#kontaktformular {margin-top:20px;}
#kontaktformular label {width:100%;display:block;margin:20px 0 5px 0;}
#kontaktformular input[type="text"] {padding:5px;width:230px;border-radius:3px;box-shadow:none;border:solid 1px #b2f100;}
#kontaktformular textarea {width:240px;border-radius:5px;min-height:150px;box-shadow:none;border:solid 1px #b2f100;}
#kontaktformular input[type="submit"] {display:block;width:240px;color:#fff;border:0;padding: 5px 10px;margin:20px 0;font-size:18px;border-radius:5px;background: #2a5ae3;cursor:pointer;}
#kontaktformular input[type="submit"]:hover {color:#fff;background: #b2f100;}
#kontaktformular p {}

/* ----------------------------- */
/* ------- Media Queries ------- */
/* ----------------------------- */
@media screen and (max-width: 374px) {
	#main {width: calc(100% - 24px);margin: 0 12px;}	
	#sidebar {padding: 20px 12px;}
}
@media screen  and (max-width: 767px) {
	article img.floatleft {float: none;margin: 20px auto;display: block;}
	article img.floatright {float: none;margin: 20px auto;display: block;}
	#kontaktformular input[type="text"] {width:80%;}
	#kontaktformular textarea {width:80%;}
}
@media screen and (max-width: 1023px) {
	.desktop-only {display:none;}
	#site-header {background-color:#557be8;margin-bottom:20px;}
	#logo {margin-top:0;width: 280px;height: 110px;padding-top:30px;}
	#header-tel {text-align:center;margin: 14px auto;}
	#header-tel a#festnetz {margin-top:16px;}
	#header-tel a#mobilfunk {margin-left:10px;}
	article p {-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens: none;hyphens: none;text-align:left;}
	footer {background-color:#4b4f52;height:80px; text-align:center;}
	footer p {margin:0 10px;padding:10px 0;}
	footer .floatright {float:none;}
	footer .floatright:before {content:"\a\a";white-space: pre;}
	.infobox, .gutschein {width:250px;margin:0 auto;}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	article img.floatleft {margin: 0 20px 20px 0;}
	article img.floatright {margin: 0 0 20px 20px;}	
	#kontaktformular input[type="text"] {width:60%;}
	#kontaktformular textarea {width:60%;}
}

@media screen and (min-width: 1024px) {
	html {background: url(../images/bg_body_top.gif) 0 0 repeat-x #fff;} 
	body {background: url(../images/bg_body_bottom.gif) 0 100% repeat-x transparent;}
	.mobile-only {display:none;}
	#site-header {height:134px;}
	#main-outer {width:980px;margin:0 auto;padding-bottom:60px;background:url(../images/bg_main.png) 0 100% no-repeat;}
	#main {padding-top:428px;box-shadow: 0 9px 0px 0px #fff, 0 -9px 0px 0px #b2f100, 12px 0 10px -4px rgba(0, 0, 0, 0.3), -12px 0 10px -4px rgba(0, 0, 0, 0.3);}
	article {width:604px;float:left;padding: 18px 20px 30px 38px;}
	#sidebar {width:285px;float:right;padding:0 0 0 5px;}
	#logo {position:relative;top:19px;left:30px;margin:0;float:left;z-index:9999;}
	#header-tel {float:right;}
	#header-tel a {}
	#header-tel a:hover {text-decoration:none;cursor:default;}
	.off-canvas-nav ul {display:none;}
	.main-nav {float:right;margin:4px 30px 0 0;}
	.main-nav ul {display:block;list-style:none;}
	.main-nav li {display:inline;position: relative;}
	.main-nav li a {display:inline-block;height:26px;font-size:16px;color:#fff;padding:10px 0 0 16px;margin:0 16px 0 0;text-transform:uppercase;background:url(../images/nav-separator.gif) 0 0 no-repeat;}
	.main-nav li:first-child a {background-image:none;padding-left:0;}
	.main-nav li:last-child a {margin-right:0;}
	.main-nav li:hover a {text-decoration:none;color:#b2f100;}
	.main-nav ul ul {position: absolute;width: 230px; left: 0; top: 100%; display:none;z-index: 1000;background-color: #2a5ae3;margin:10px 0 0 0;padding: 10px 0;}
	.main-nav li:hover > ul {display: block;}
	.main-nav li:hover li a {display:block;height:auto;padding:7px 10px;color:#fff;margin:0;font-size:16px;text-transform:none;background-image:none;}
	.main-nav li li:hover a {background:#fff;color:#000;}
	article img.floatleft {margin: 0 20px 20px 0;}
	article img.floatright {margin: 0 0 20px 20px;}
	footer {margin-top:0;height:77px;padding-top:10px;}
	footer p {margin:0 38px;}
  #slider-container-top {top:125px;left:0;position:absolute;}
}
@media screen and (min-width: 1050px) {
	article {width:644px;}
	#sidebar {width:260px;}

}