/* 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: "PT Sans", Helvetica, Arial, sans-serif;color: #585656;background-color: #FFFFFF;}
a {color: #e2001a;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;font-size: 30px;line-height: 125%;font-weight: 400;color: #e2001a;}
h2 {margin: 10px 0 0 0;font-size: 22px;color: #000000;font-weight: 400;}
h3 {margin: 20px 0 0 0;font-size: 18px;color: #7f7d7d;font-weight: 400;}

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

/* ----------------------------- */
/* ---- Document Structure ----- */
/* ----------------------------- */
#site-header {width:100%;margin:0;}
#main, footer {width:100%;max-width:1000px;margin:0 auto;}

/* ----------------------------- */
/* ---------- Header ----------- */
/* ----------------------------- */
#logo {width: 267px;height: 98px;margin:14px auto;}
#logo img {width: 100%;height: auto;}
#ihk {width:133px;height:89px;margin:20px auto 0 auto;}


/* ------- Mobile Navigation Toggle ------- */
.off-canvas-nav {background:rgba(0,0,0,0.7);margin:30px 0 0 0;}
.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: #fff;padding: 10px 10px 10px 40px;margin: 0;background: url(../images/menu.png) 5px 7px no-repeat transparent;}
.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;background:rgba(0,0,0,0.7);}
.active-nav .main-nav ul li a {display: block;font-size: 18px;color: #fff;padding: 10px 20px;text-decoration: none;border-bottom: solid 1px #d8d8d8;}
.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: #e2001a;}
.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 10px;}
article h1, article h2 {text-align:center;}
article p {
	margin: 26px 0 0 0;
	line-height: 150%;
	font-size: 15px;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	font-style:normal;
	text-align:justify;
}
article p.intro {font-size:16px;font-weight:700;color:#797878;margin-bottom:30px;}
article a.lb {
	cursor: url('../images/lupe.png'), pointer;
}
.content ul,
.content ol {
	margin: 26px 0 0 20px;
	overflow:hidden;
	padding-left: 1.2em;
}
.content ul li,
.content ol li {
	font-size: 15px;
	line-height: 150%;
	margin-top: 7px;
	font-style:normal;
}

.cols.hovercaption {list-style: none;margin: 36px 0 0 0;padding: 0;text-align:center;}
.cols.hovercaption li {float:left; padding: 0;position: relative;overflow: hidden;width:229px;margin: 0 auto 20px auto;}
.cols.hovercaption .caption {width:229px;height: 32px;position:absolute; bottom:6px; left: 0; background-color: rgba(0,0,0,0.7);text-align:center;padding-top:10px;}
.cols.hovercaption .caption h3 {font-size:16px; color:#fff; font-weight:400;margin:2px 0 0 0;}
.cols.hovercaption .caption a {color:#fff;}
.cols.hovercaption .caption a:hover {text-decoration:none;}



/* ----------------------------- */
/* ----------- Footer ---------- */
/* ----------------------------- */
footer {clear:both;font-style:normal;padding:7px 10px 40px 10px;margin-top:30px;color:#fff;}
footer h3 {font-size:18px;color:#fff;margin-bottom:12px;}
footer p {text-align:center;margin-top:16px;font-size:16px;}
footer a {color:#fff;}
footer a:hover {color:#e2001a;text-decoration:none;}
footer a.phonelink:hover {color:#ffffff;}
#footer-nav ul {list-style:none;margin-top:-3px;}
#footer-nav li {margin-bottom:2px;}

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

/* ---------- Google Map ----------- */
.map {
	position: relative;
	padding-bottom: 50%;
	height: 0;
	overflow: hidden;
	margin-top:0;
}
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* ---------- Slider ----------- */
#slider-container-top {position:relative;width: 100%;margin-top:30px;}
#slider-container-top .sliderbild {width: 100%;height:200px;display: block;background-size:cover;background-position: 50% 0;}
#slider-container-top .slidertext span {font-size:30px; color:#fefefe;background: rgba(0,0,0,.6);padding:5px 7px;line-height:200%;}
.slidertext {display: none;}
.slidertext.animated {display: block;}



#slider-container-bottom {padding: 0 20px;text-align:center;}
#slider-container-bottom h3 {font-family: Times, "Times New Roman", serif; font-size:18px;color:#000;font-weight:700;margin-bottom:14px;}
#slider-container-bottom img {width:100%; max-width:218px;padding:4px;border:solid 1px #c4c4c4;}

/* ---------- Kontaktformular ----------- */
#kontaktformular {width:100%;max-width:400px;margin:20px auto;}
#kontaktformular label {width:100%;display:block;margin:20px 0 5px 0;}
#kontaktformular input[type="text"] {padding:5px;width:100%;max-width:400px;border-radius:3px;}
#kontaktformular textarea {width:100%;max-width:410px;border-radius:5px;min-height:150px;}
#kontaktformular input#captcha_input {width:100px;}
#kontaktformular img.captchaimg {vertical-align:middle;}
#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: #e2001a;cursor:pointer;}
#kontaktformular input[type="button"] {display:block;width:240px;color:#fff;border:0;padding: 5px 10px;margin:20px 0;font-size:18px;border-radius:5px;background: #c4c4c4;cursor:pointer;font-weight:bold;}
#kontaktformular input[type="submit"]:hover {background:#c4c4c4;color:#e2001a;}
#kontaktformular input[type="button"]:hover {background:#666666;color:#c4c4c4;}
#kontaktformular p {color:#fff;}



/* ----------------------------- */
/* --- Bildgalerie Objekte --- */

.galerie {}

.galerie {list-style:none;margin:0;}

.galerie li img {}



/* ----------------------------- */

/* ------- Media Queries ------- */

/* ----------------------------- */

@media screen and (max-width: 567px) {
	.cols.hovercaption li {float:none;}
}
@media screen and (min-width: 568px) and (max-width:1023px) {
	.cols.hovercaption li {margin:20px;}
	.cols.hovercaption {width: 550px;margin: 0 auto;}
	.galerie li {display:inline-block;margin: 0 7px 0 0;}
    .galerie li img {}
}
@media screen and (max-width: 767px) {
	#slider-container-top .slidertext {display: none;}
}
@media screen and (min-width: 768px) {
	#ihk {position:absolute;top:17px;right:30px;margin:0;}
	#slider-container-top .sliderbild {height:400px;}
	#slider-container-top .slidertext {width:490px;position:absolute;bottom:60px;left:20px;padding:10px;}
}
@media screen and (max-width: 1023px) {
	.desktop-only {display:none;}
	article img.floatleft {float: none;margin: 20px auto;display: block;}
	article img.floatright {float: none;margin: 20px auto;display: block;}
	footer {background:#333;text-align:center;}
	footer .middle {padding-bottom:40px;}
	footer .last li {margin-top:10px;}
}
@media screen and (min-width: 1024px) {
	body {background:url(../images/bg_bottom.png) 0 100% repeat-x;}
	.mobile-only {display:none;}
	#site-header {position:absolute;top:0;left:0;z-index:10000;background:url(../images/bg_header.png) 0 0 repeat-x;height:167px;}
	#ihk {position:absolute;top:17px;left:calc(50% + 306px);margin:0;}
	article {padding-bottom:20px;}
	#sidebar {width:246px;float:right;padding: 40px 10px 40px 0;margin:0;text-align:left;}
	#sidebar h3 {margin:0 0 14px 0;}
	.off-canvas-nav {background:transparent;margin:0;}
	.off-canvas-nav ul {display:none;}
	.main-nav {width:100%;max-width:1400px;margin:0 auto;text-align:center;}
	.main-nav ul {display:block;list-style:none;}
	.main-nav li {display:inline;position: relative;}
	.main-nav li a {display:inline-block;height:16px;font-size:18px;color:#fff;padding:0 24px 3px 24px;margin-top:10px;background:url(../images/nav-separator.gif) 100% 2px no-repeat;}
	.main-nav li:first-child a {padding-left:8px;}
	.main-nav li:last-child a {padding-right:8px;background-image: none;}
	.main-nav li:hover a {text-decoration:none;color:#e2001a;}
	.main-nav ul ul {position: absolute;width: 120px; left: 15px; top: 100%; display:none; z-index: 1000;background-color: rgba(0,0,0,.9);margin: 0;padding: 10px 0;}
	.main-nav li:hover > ul {display: block;}
	.main-nav li:hover li a {display:block;border:none;padding:7px 10px;color:#fff;margin:0;font-size:16px;}
	.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;}
	.cols-2 {width:49%;}
	.cols-2.first {float:left;}
	.cols-2.last {float:right;}
	.cols.hovercaption {text-align:left;margin:36px 0;}
	.cols.hovercaption li {float: left;margin:0 18px 0 0;}
	.cols.hovercaption li:last-child {margin-right:0;}
	.cols.hovercaption .caption {bottom:-66px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
	.cols.hovercaption li:hover .caption {bottom:6px; }
	footer {height:129px; margin-bottom: 166px;padding:0;}
	footer .cols {width:33.3%;float:left;}
	footer .first {width:calc(33.3% - 98px);padding-right:98px;}
	footer .last {width:calc(33.3% - 196px);padding-left:196px;}
	footer .first h3, footer .first p {text-align:right;}
	footer .middle h3, footer .middle p {text-align:center;}
	footer .last h3, footer .last p {text-align:left;}
	footer p {margin-top:12px;font-size:12px;line-height:120%;}
	.copy {width:50%;float:left;}
	.credit {width:50%;float:right;text-align:right;}
	
	.galerie {}

	.galerie li {display:inline-block;margin: 0 7px 0 0;}

	.galerie li a {display:block;}

	.galerie li img {}
	
	#slider-container-top {margin-top:0;}
	#slider-container-top .sliderbild {height:630px;}
	#slider-container-top .slidertext {left:calc(50% - 490px);}
	#slider-container-top .slidertext span {font-size:30px; color:#fefefe;background: rgba(0,0,0,.6);padding:5px 7px;line-height:200%;}
	#kontaktformular {width: 300px;/*float:left;*/margin:0 auto;}
	#kontaktformular input[type="submit"] {clear:both;width:auto;margin:20px 0;font-size:16px;/*float:left;*/}
	#kontaktformular input[type="button"] {width:auto;margin:20px 10px;float:right;font-size:16px;}
	.map {padding-bottom: 16.35%;}
}