/* Hauptfarben */
/* #007ac3 BLAU */
/* #008855 GRUEN */

@charset "utf-8";
/* CSS Document */
/* TAGS */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html { height: 100%; -ms-overflow-style: scrollbar; }

body {
	font-size:18px;
	font-weight: 300;
	line-height:28px;
	color:#555555;
	text-align:left;
	font-family: 'Ubuntu';
	height: 100%;
	padding: 0;
	margin: 0;
}
body:not(.start) { padding-top: 160px; }


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0;}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #e5e5e5; margin: 0.75em 0; padding: 0; }
input, select { vertical-align: middle; }
input, select, textarea, button { font-family: 'Ubuntu', sans-serif; border-radius: 0; }
strong, th, b { font-weight: 700; }
img { border:0;}
p, article td, article ol li, article ul li {
	margin:1em 0;
	text-align: left;
	/*
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;*/
}
article > p, article > h1, article > h2, article > h3, article ul, article ol {
	text-align: center;
	width: 70%;
	margin: 0 auto;
}
body:not(.start) article.d-flex {
	padding: 30px 8.333333%;
    margin: 80px -8.333333%;
}

article:not(.is_object) {
	overflow: hidden;
}
article td {
	text-align: left;
}
article td:first-child {
	width: 40%;
}
html:not(.theme_dark) .article.d-flex:nth-child(even) {
	background-color: #ebebeb;
}

a { color: #2c2b2b; text-decoration:none; outline:none; border: none;}
a:hover { color:#000000; text-decoration:underline; background-color: transparent;}
article a { color:#009c6e; text-decoration:none; outline:none; border: none;}
a.more { color: #000000; }
a.more:hover { color:#009c6e; }
article table { clear:both; width:100% !important; height:auto !important; }
i, em { font-style:italic; }
u { text-decoration:underline; }
a:focus { outline: none; }
td { vertical-align:top; }
.table td {font-size:1.5em; }
.pagerJumper a { text-decoration: none; width:30px;	height:30px; background-color: #FFF; }
.pagerJumper a.aktiv { font-style: normal; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { line-height:1.33em; text-align: left; }
h1 {
	font-size: 30px;
	font-weight: 300;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 60px;
	text-align: center;
}
h1:after {
	content: "";
	position:absolute;
	background-color: #9999;
	width: 200px;
	height: 2px;
	left: 50%;
	margin-left: -100px;
	bottom: 25px;
}
article > h1 { padding-bottom: 20px; }
article > h1:after { display: none; }
h2, h4 {
	font-size: 22px;
	color: #007ac3;
	margin-bottom: 0;
	text-transform: none;
	font-weight: 700;
	margin-bottom: 30px;
}

h3, h3 a, h4, h4 a {
	text-decoration: none;
	font-size: 18px;
	color: #000000;
	font-weight: normal;
	line-height: 18px;
    padding-bottom: 0.5em;
	margin-top: 0.5em !important;
}

h5 { font-size:1em; font-weight:bold; }
h6 { font-size:0.8em; font-weight:bold; }

/* MISC */
img.icon { width:16px; height:16px; }
p.fehler {color:#900;}
.hr { margin:0.8em 0; padding:0; height:1px; background:#e5e5e5; }
.hr hr { display:none; }
.right { float:right; margin:0 0 12px 12px; text-align:right; }
.left { float:left; margin:0 12px 12px 0; text-align:left; }
.left .imgWrap, .right .imgWrap { margin-bottom:12px;}
.left .imgWrap img, .right .imgWrap img { margin-bottom:12px; border: 1px solid #BBBBBB;}
.schrift_klein { font-size:0.8em !important; line-height:1.4em !important; }
.schrift_kleiner { line-height:1.4em; display:block;}
.highlight { color:#267f11; font-weight:bold; }
.anchor, .versteckt { display:none; }
.accordion { line-height:24px; }

.pTop { margin-top:0.2em; }
.backLink { position:relative; margin:0.75em 0; height:20px; display:none;}
.article { padding: 5px; margin: 80px 0; }
.article.second {
	color: #333333;
}
.success { color:#267f11; }
.hint { color:#000000; font-size: 120%; margin:0; font-size: 90%; }

.pages { text-align:center; }
.pages a { color:#000000; text-decoration:none; }
.pages a.disabled { color:#999; font-style:italic; cursor:not-allowed; }

#content a { text-decoration: none;}
#content ul:not(.nav), ol { padding: 1em 2em; }

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.clear { clear:both; height:0; line-height:0; font-size:0; }


/* HEADER, STANDARD NAVIGATION */
#header-box {

}
#start-headline-wrapper {
	position: absolute;
	margin-top: 200px;
	z-index: 9;
	width: 100%;
}
#start-h1, #start-h2 {
	color: #FFF;
	font-weight: 500;
	font-size: 30px;
	line-height: 40px;
	text-align: center;
	position: relative;
	text-shadow: 5px 2px 3px rgba(0, 23, 22, 0.5);
	margin-top: 0.5em;
}
#start-h1 {
	color: #FFF;
	font-weight: 700;
	font-size: 50px;
	line-height: 60px;
	text-transform: uppercase;
	margin-bottom: 0.2em;
}

#start-features {
	position: absolute;
	margin-top: 200px;
	z-index: 9;
	width: 100%;
	bottom: 6em;
}
#start-features pre {
	color: #FFF;
	font-size: 20px;
	font-weight: 500;
	text-align: left;
	overflow: hidden;
}

/* Bildwechsler */
.carousel-indicators { z-index: 5; }
.sub-gallery { padding: 0; }
#gallery, #bildwechsler { position: relative; height: 100vH; overflow: hidden;}
#gallery:before {
	content: "";
	position: absolute;
	background-color: rgba(93, 100, 100, 0.15);
	width: 100%;
	height: 100%;
	z-index: 2;
}
#wrapper {
	height: auto !important;
    margin: 0 auto;
    min-height: 100%;
}

#main { margin-bottom: 100px; }

@media (max-width: 1199px) {
  #bildwechsler .h-100, #bildwechsler video {
   /* margin-left: -50%;*/
  }
  #bildwechsler .h-100, #bildwechsler video {
    height: 100% !important;
    width: auto !important;
    min-height: 100vh;
  }
}

/* MAIN NAVIGATION */
#navbar {
	width: 100%;
	top: 0;
	position: fixed;
	z-index: 10;
	border-top: 10px solid #008855;
	padding-top: 70px;
	padding-bottom: 0;

	background: rgba(34,34,34,1);
	background: -moz-linear-gradient(top, rgba(34,34,34,1) 0%, rgba(34,34,34,0) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(34,34,34,1)), color-stop(100%, rgba(34,34,34,0)));
	background: -webkit-linear-gradient(top, rgba(34,34,34,1) 0%, rgba(34,34,34,0) 100%);
	background: -o-linear-gradient(top, rgba(34,34,34,1) 0%, rgba(34,34,34,0) 100%);
	background: -ms-linear-gradient(top, rgba(34,34,34,1) 0%, rgba(34,34,34,0) 100%);
	background: linear-gradient(to bottom, rgba(34,34,34,1) 0%, rgba(34,34,34,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#222222', GradientType=0 );

	transition: background 0.5s ease 0s;
}
/* Navi gescrollt und auf Unterseiten */
.nav-overlay #navbar, body:not(.start) #navbar { background: #008855; padding: 40px 0 0 0; }
.nav-overlay #navmain > li > a  { font-size: 22px; padding-bottom: 30px; }
.nav-overlay #navMain #m_4 a, body:not(.start) #navMain #m_4 a { width: 200px; margin-left: -80px; }
.nav-overlay #navMain > ul > li:not(#m_4):hover:before, .nav-overlay #navMain > ul > li:not(#m_33):hover:before { background-color: #FFF !important; }

/* schmale scrollversion */
.nav-overlay #navMain #m_33, body:not(.start) #navMain #m_33 { height: 100px; }
.is_paddelboot_site .nav-overlay #navbar { padding-top: 5px; }
.is_paddelboot_site .nav-overlay #navMain ul > li { padding: 10px; }

#navMain ul {
	margin-bottom: 0;
	list-style: none;
	display: table;
  table-layout: fixed;
	width: 100%;
	margin-left: 2%;
	margin-right: 2%;
}

#navMain li {
	display: inline-block;
	text-align: center;
	display: table-cell;
	width: calc(16.667% - 30px);
}

@media (min-width: 769px) {
  #navMain li {
    min-width: 100px;
  }
	#navMain > ul > li:not(#m_4):hover > a:before, #navMain > ul > li:not(#m_33):hover > a:before {
		content:"";
		position: absolute;
		top: -15px;
		left: 50%;
		width: 100px;
		margin-left: -50px;
		height: 5px;
		background-color: #FFF;
	}
  #navMain > ul > li#m_4:hover > a:before, #navMain > ul > li#m_33:hover > a:before {
    display: none;
  }
}
body:not(.start) #navMain > ul > li:not(#m_4):hover:before, body:not(.start) #navMain > ul > li:not(#m_33):hover:before { background-color: #FFF; }

#navMain ul ul, #navMain .menue-wrapper { display: none; }

#navMain li a {
	color: #FFF;
	font-size: 25px;
	font-weight: 500;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 10px;
	display: block;
}

#navMain #m_4 a span, #navMain #m_33 a span {
	visibility: hidden;
}
#navMain #m_4, #navMain #m_33 { position: relative; }
#navMain #m_4:before, #navMain #m_33:before {
	content: "Hafen Waldschloesschen Logo";
	visibility: hidden;
}
#navMain #m_4 a, #navMain #m_33 a {
	background: url(../img/template/logo_spreewaldhafen.png) center center no-repeat;
	position: absolute;
	background-size: contain;
	width: 400px;
	height: 150px;
	top: -55px;
	left: 50%;
	margin-left: -150px;
}
#navMain a:hover { text-decoration: none; }
#navMain #m_33 a {
  background: url(../img/template/logo_spreewaldhafen_paddeln.png) center center no-repeat;
  background-size: contain;
}
#navMain .subtitle {
	font-size: 15px;
	display: block;
	text-transform: none;
	font-weight: 400;
	line-height: 18px;
	margin-top: 5px;
}
.logo-mobile {
  display: none;

  width: auto;
  height: 40px;
  position: absolute;
  top: -15px;
  left: 10px;
}
@media (max-width: 768px) {
  .is_paddelboot_site #logo-paddeln.logo-mobile {
    display: block;
  }
  body:not(.is_paddelboot_site) #logo-kahnfahrt.logo-mobile {
    display: block;
  }

  #naviMobi li a .subtitle {
    font-size: 14px;
    display: block;
    text-transform: none;
    font-weight: 400;
    line-height: 18px;
    margin-top: 5px;
  }
}


@media (min-width: 1600px) {
  .is_paddelboot_site #navMain ul {
    table-layout: auto;
    text-align: center;
  }
  .is_paddelboot_site #navMain ul > li {
    padding: 1%;
    display: inline-block;
    width: auto;
  }
  #navMain #m_33 a {
    width: 100%;
    height: 150px;
    top: -70px;
    position: relative;
    margin-left: auto;
    left: auto;
  }
  #navMain #m_33::before {
    font-size: 30px;
  }
}

/* HAUPTMENÜ UNTERPUNKTE */
#navmain > li:hover .menue-wrapper { text-align: left; }
#navmain > li:hover .menue-wrapper ul {
	display: inline-block !important;
	width: 45%;
}

#navMain .hasImg {
	background-repeat: no-repeat;
	background-position: calc(100% - 20px) center;
	background-size: auto 90%;
	min-height: 250px;
	padding-right: 40% !important;
}

#navMain .menue-wrapper .subtitle, #navMain .menue-wrapper .subtitle a {
	text-transform: uppercase;
	color: #777777;
	font-size: 25px;
	font-weight: 400;
}
#navMain .menue-wrapper .subtitle {
	border-bottom: 1px solid #FFF;
	margin-bottom: 10px;
}
#navMain .menue-wrapper ul li {
	line-height: 20px;
}
#navMain ul.split {
	float: left;
}

#navmain > li:hover > ul:after, #navmain > li:hover .menue-wrapper:after {
	content: "";
	background-color: rgba(0,0,0, 0.5);
	width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
	z-index: -1;
	pointer-events: none;
	transition: all 0.5s ease 0s;
}

#navmain ul li {
	display: block;
	float: none;
	padding: 10px 0;
	width: 100%;
	text-align: left;
}

#navmain ul li a {
	color: #3d3d3d;
	font-weight: 500;
	font-size: 20px;
	text-transform: none;
	padding-bottom: 0;
}
#navmain ul li:hover a { color: #007ac3; }



/* Mobile Nav */
#navMobiWrapper { display: none; }

/* STANDARD NAVIGATION */
#navStd  {
	list-style: none;
}

#navStd li {
	padding-left: 22px;
	font-weight: 500;
	font-size: 20px;
	position: relative;
}
#navStd li:after {
	content: "|";
	position: absolute;
	top: 0;
	right: -15px;
	color: #FFF;
}
#navStd li:last-child:after {
	display: none;
}
#navStd li button {
  background-color: transparent;
}

/* CONTENT */
#main-box {
	padding-bottom: 100px;
}


#content { min-height:200px; }

@media (min-width: 769px) {
  #navmain > li:hover > ul, #navmain > li:hover .menue-wrapper {
    display: block !important;
    position: absolute;
    padding: 20px 30px;
    background-color: #007ac3 /*rgba(255,255,255, 0.95)*/;
    color: #FFF;
    /*width: calc((25vw * .8) - 10px);
    margin-left: calc((-12.5vw * .8) + 5px);*/
    width: 90vw;
    left: 5vw;
  }

  #navmain > li:hover > ul a, #navmain > li:hover .menue-wrapper li {
    transition: all 0.25s ease 0s;
    padding-left: 10px;
  }
  .cs-0 #navmain ul li:hover { background-color: #00432a; }

  .cs-0 #navmain > li:hover > ul, .cs-0 #navmain > li:hover .menue-wrapper {
    background-color: #008855;
  }
  .is_paddelboot_site #navmain ul li:hover, .is_paddelboot_site #navmain > li:hover .menue-wrapper { background-color: #007ac3; }

  #navmain ul li a {
    color: #FFF;
  }
  #navmain ul li:hover a { color: #FFF; }

  #navMain .menue-wrapper .subtitle, #navMain .menue-wrapper .subtitle a {
    color: #FFF;
  }

  /* Paddeln großflächiges Menü */
  .is_paddelboot_site  #navmain > li:hover > ul:after, .is_paddelboot_site  #navmain > li:hover .menue-wrapper:after {
    background-color: rgba(0,122,195,1);
  }
  .is_paddelboot_site  #navmain > li:hover ul .subtitle { display: none; }
  .is_paddelboot_site  #navmain > li:hover .menue-wrapper {
    height: 70vh;
  }
  .is_paddelboot_site  #navmain > li:hover ul { width: 100%; }
  .is_paddelboot_site  #navmain > li:hover ul li {
    line-height: 40px;
    width: 100%;
    text-align: center;
  }
  .is_paddelboot_site  #navmain > li:hover ul li a {
    font-size: 150%;
  }

  .is_paddelboot_site #navmain > li > ul:after, .is_paddelboot_site #navmain > li .menue-wrapper:after {
    content: "";
    background-color: rgba(0,0,0, 0.5);
    width: 100%;
    /*height: 0;*/
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    z-index: -1;
    pointer-events: none;

    animation-name: fadeItOut;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }
  .is_paddelboot_site #navmain > li:hover > ul:after, .is_paddelboot_site #navmain > li:hover .menue-wrapper:after {
    animation-name: makeVisible;
    animation-duration: 0.4s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }
  .is_paddelboot_site #navmain > li .menue-wrapper ul {
    opacity: 0;
    animation-name: makeVisible;
    animation-duration: 0.4s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
  }
  .is_paddelboot_site #navmain > li:hover .menue-wrapper {
    background: none;
  }


  @keyframes fadeItIn {
    0% {
      height: 0;
      border-bottom-left-radius: 70%;
      border-bottom-right-radius: 70%;
    }
    60% {
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
    }
    100% {
      height: 100%;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  @keyframes fadeItOut {
    0% {
      height: 100%;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    100% {
      height: 0;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
    }
  }

  @keyframes makeVisible {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  body.navMainOpen.is_paddelboot_site,
  body.overlayOpen {
    overflow: hidden;
  }
  body.navMainOpen.is_paddelboot_site .menue-wrapper {
    overflow-y: auto;
  }
  .is_paddelboot_site #navMain ul { margin-left: 0; margin-right: 0; }
}

@media (min-width: 1200px) {
  #bildwechsler video {
    width: 100% !important;
    min-height: 100vh;
    object-fit: cover;
  }
}
@media (min-width: 1500px) {
  #navMain li a {
    font-size: 20px;
  }
}
@media (min-width: 1800px) {
  #navMain li a {
    font-size: 35px;
  }
}


/* Paddel Schnellbuchung auf der Startseite */
#quick-booking {
  display: block;
  position: absolute;
  margin-top: -170px;
  z-index: 9;
  color: #FFF;
  text-align: center;
  font-weight: 400;
}
#quick-booking > p { text-align: center; margin-bottom: 5px; font-size: 20px; }
#quick-booking .link-booking {
  display: inline-block;
  background-color: #007ac3;
  border-radius: 3px;
  padding: 10px 20px;
}
#quick-booking form { display: inline; }

#quick-booking .paddel-option {
  display: inline-block;
  margin-right: 10px;
}
#quick-booking .btn {
  background-color: #4ba0d2;
  border: none;
  color: #FFF;
  padding: 5px 20px;
  text-transform: none;
  font-size: 16px;
}
#quick-booking #GA_bookingData_time {
  min-width: 150px;
}


/* ARTIKEL */
article ul, .article ul {
	list-style: none;
}
article ul li, article ol li { position: relative; margin: 2px 0; padding-left: 15px; }
article ul li:before, article ol li:before {
	content: "";
	position: absolute;
	top: 12px;
	left: -17px;
	width: 7px;
	height: 7px;
	background-color: #007ac3;
}

/* Bilder Viewer Titel oben ausblenden wegen Doppelung */
.ppt { display: none !important; }


/* Grid mit Bootsdaten */
.box {
	box-shadow: 1px 1px 6px rgba(0,0,0, 0.4);
	text-align: center;
	position: relative;
	height: 100%;
	overflow: hidden;
  display: block;
}
.box > p {
	text-align: center;
	padding: 0 15px;
}
.box .articleImgNone { overflow: hidden; }
.box .imgWrap {
  -webkit-transition: all 1s cubic-bezier(0,1,.5,1);
  transition: all 1s cubic-bezier(0,1,.5,1);
}
.box:hover .imgWrap {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.articleGrid h2, .articleGrid .headline {
	color: #FFF;
	background-color: #007ac3;
	box-shadow: 1px 1px 6px rgba(0,0,0, 0.5);
	display: inline-block;
	margin: 0 auto;
	padding: 5px 20px;
	position: relative;
  top: -20px;
  z-index: 1;
	font-weight: 500;
}
.articleGrid h2 a { color: #FFF; }

.boat-info {
  background-color: #EEE;
  margin-bottom: 10px;
  padding: 20px 10px 10px 10px;
  position: relative;
  top: -35px;
}

.tourdaten p {
	font-size: 15px;
	color: #313131;
	line-height: 14px;
	text-align: center;
	margin: 5px 0;
	min-height: 40px;
}
.tourdaten .icon {
	background: url(../img/template/icons_tour.png) -8px -4px no-repeat;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}
.tourdaten .time-table { font-size: 13px; line-height: 16px; }
.tourdaten .icon.duration { background-position: -60px -4px; }
.tourdaten .icon.range { background-position: -113px -4px; }
.tourdaten .icon.price { background-position: -4px -52px; }
.tourdaten .icon.price.timeless { background-position: -162px -4px; }

.tourdaten .icon.price2 { background-position: -246px -52px; }
.tourdaten .icon.price24 { background-position: -201px -52px; }
.tourdaten .icon.person { background-position: -62px -52px; }

.tourdaten div[class*="col-"] { text-align: center; overflow: hidden; text-overflow: ellipsis; }

.text-wrapper .tourdaten {
	background-color: #EEE;
	padding: 15px;
	margin-top: 40px;
}

.gridWrap .moreBtn {
	bottom: 75px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}
.gridWrap .moreBtn span { position: relative; }
.gridWrap .moreBtn span:after {
	content: "";
	position: absolute;
	background-color: #FFF;
	opacity: 0.2;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	transition: all 0.5s ease 0s;
}
.gridWrap .moreBtn.overImg {
  position: absolute;
  top: 0;
  text-indent: -99999px;
}

.gridWrap .moreBtn.overImg {
	position: absolute;
	top: 0;
}
.gridWrap .moreBtn.overImg span {
	display: inline-block;
	position: relative;
	top: -80px;
	background: none;
	color: #FFF;
	border: 1px solid #FFF;
	padding: 5px 10px;
	min-width: 50px;
	min-width: 40%;
	z-index: 6;
}
.gridWrap .moreBtn:hover span:after { opacity: 0.5; }

/* Tour-Filter*/
#filter-beschriftung { margin-left: 15px;margin-bottom: 10px; font-weight: 500; color: #007ac3; display: block; }
.tax-category, .tax-filterwerte { display: none; }
.filter { text-decoration: none !important; border: 1px solid #007ac3; border-radius: 5px; padding: 2px 10px; margin: 0 10px 8px 0; display: inline-block; }
.filter.active, .filter:hover { background-color: #007ac3; color: #FFF; text-decoration: none; }
#tourfilter { margin: 0 15px 10px 15px; color: #007ac3; font-size: 14px; }
.ui-slider { margin: 5px 10px; }
#slider-strecke, #slider-dauer { display: inline-block; width:80%; position: relative; top: 5px; float: right; }

.booking {
	position: absolute;
	height: 100%;
	top: 0;
	color: #FFF;
	left: 0;
	right: 0;
	display: none;
	padding: 10px 0 15px 0;
	z-index: 1;
}
.booking, .booking .row, .booking .form { height: 100%; }
.booking.boat { top: 20px; }
/*.booking:not(.boat) { border-bottom: 1px solid #FFF; }*/
.booking.coupon_available/*:not(.boat):not(.tour)*/:before { content:""; position:absolute; left: 50%; height: 30%; width: 1px; top: 0; background-color: #FFF; }
.booking p { color: #FFF; margin: 0; text-align: center; }
.booking form { text-align: center; }
.booking form .formBtn, .booking form .formBtn input { height:100%; width:100%; display: block; }
.booking input {
	color: #FFF !important;
	background: none !important;
	width: inherit !important;
	height: inherit !important;
	border: none !important;
	margin: 0 auto !important;
}
.booking.boat input { margin-top: 15%; }
.articleGrid:hover { cursor: pointer; }
.articleGrid:hover .imgTrigger { pointer-events: none; }
.articleGrid:hover .booking { display: block; }
.booking .formBtn p {
	font-size: 22px;
	text-transform: uppercase;
	font-weight: 500;

	position: absolute;
	width: 95%;
	height: 100%;
	top: 0;
	padding-top: 15%;
	pointer-events: none;
}
.booking:not(.coupon_available) .formBtn p { padding-top: 10%; }
.booking .formBtn .fas {
	font-size: 50px;
	display: block;
}
.booking.nodetail, .booking.nodetail .formBtn, .submit-terminal, .booking.nodetail .link-booking, .booking.nodetail .link-booking form, .booking.nodetail .formBtn, .booking.boat .link-booking { width: 100%; height: 100%; }
/* Kahnfahrten Buchung und Verschenken */
.booking .col-6 { height: 60%; }

.gridWrap .articleImgNone, .gridWrap .articleImgLeft, .gridWrap .articleImgRight { background-color: #007ac3; }
.articleGrid .imgWrap { transition: all 0.5s ease 0s; }
.articleGrid:hover .imgWrap { opacity: 0.2; }

/* Buchungslink auf der Detailseite */
.text-wrapper .booking {
	position: relative;
	background-color: #ccc;
	height: auto;
	padding: 5px 0;
}
.text-wrapper .booking .formBtn p {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 5px;
}
.text-wrapper .booking:before { height: 100% !important; }
.booking .btn, .booking .btn:hover {
	background-color: transparent;
	width: 100%;
}
.booking .btn:hover p {
	color: #007ac3;
}
.is_paddelboot_site .booking .btn:hover p {
	color: #FFF;
}

.form .textStyle {
	border: none;
    border-bottom: 1px dashed #007ac3;
    font-size: 14px;
    padding: 10px 1%;
    width: 70%;
}

#streckeninfo .booking { background-color: #007ac3; border: none; bottom: 50px; top: auto; left: 0; right: 0; box-shadow: 0px 0px 3px #000; }

/* Gutscheinformular */
.progress_bar {
    display: table;
    margin: 20px 0;
    table-layout: fixed;
    width: 100%;
}
.progress_bar span {
    border-bottom: 4px solid #d9d9d9;
    color: #ddd;
    display: table-cell;
    text-align: center;
	width: 100%;
}
.progress_bar span.aktiv {
    border-bottom: 4px solid #007ac3;
    color: #007ac3;
}
div.summary {
	margin-bottom: 10px;
}
.summary h4 {
    margin: 0;
}
.summary .total .priceTxt {
    float: right;
    font-weight: bold;
}
.summary .delete_obj {
    position: relative;
}
.summary .delete {
    position: absolute;
    right: 0;
    top: 0;
}
.price {
    text-align: right;
}
.ptCheckBox {
    width: 30px;
}
.ptImg {
    width: 55px;
}
.ptImg img { margin-top: 4px; display: block; position: relative; z-index: 9; }
.ptInfo label, .ptImg label {
    display: inline;
    white-space: normal;
}

#gutscheinanfrage h3:not(.ui-accordion-header) { color: #007ac3; padding: 0; margin-top: 25px; margin-bottom: 5px; }
.userInfo { font-size: 12px !important; }
.form td.formInput .inputWrap label { display: none; }
.form td.formInput .inputWrap label.checkbox,
.form td.formInput .inputWrap .line label,
.form td.formInput .inputWrap.box-padding label { display: inline; padding: 0 0.75em 0 0; }
.form .inputWrap.box-padding .ui-spinner { margin-bottom: 2px; }
#gutscheinanfrage .inputWrap > label[for="GA_furtherStuff_agb"] { display: inline-block; }
.inputWrap.duty { border-left: 4px solid #007ac3 !important; min-height: 35px;}
#gutscheinanfrage input[type="text"] { min-height: 35px; width: 99%; }
.number-input { min-height: inherit !important; width: 30px !important; height: 25px !important; float: left; padding: 5px !important; text-align: center; }
#gutscheinanfrage input[type="number"], .ui-spinner { float: left; width: 70px; margin-right: 0.25em; clear: left; height: 25px; min-height: 25px; padding: 0; text-align: center; position: relative; z-index: 1; }
#gutscheinanfrage .g33, #gutscheinanfrage .g67 { width: 49.8%; }
#gutscheinanfrage textarea { width: 100%; }
#additional-service-row label { line-height: 25px; }

.boat_type_count input {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  margin: 0;
}

.popover { max-width: 350px; }
.popover-content { font-size: 13px; }

.boat_type_count .selectMinus, .boat_type_count input, .boat_type_count .selectPlus { float: right; clear: none !important; }
.boat_type_count input { width: 35px !important; }
.boat_type_count .selectMinus, .boat_type_count .selectPlus { font-size: 18px; text-align: center; width: 25px !important; height: 25px !important; top: 0 !important; position: relative; z-index:1; line-height: 25px; }
.boat_type_count .selectMinus:hover, .boat_type_count .selectPlus:hover { cursor: pointer; }
.boat_type_count .numberWrap { float: left; margin-right: 10px; }

#reserveTimer span { display: inline-block; margin-right: 5px; }
#reserveTimer { color: #FFF;display: inline-block; float: right; background-color: #008855; margin: 0 5px 0 auto; }
#reserveTimer div { padding: 2px 5px; }
input[type="checkbox"], input[type="radio"] { float: none; }
.categorys ul { list-style: none; }
.box-padding { padding: 10px; background-color: #f5f7f8; }
.box-padding.boat_type_count.vorauswahl { background-color: #cfe0e6; }
.summary.box-padding td { line-height: 24px !important; }
.checksite h3 { padding-top: 15px !important; border-top: 1px solid #CCC; margin-top: 10px !important; }
.checksite h3:first-child { border-top: none; }

.previewGA a { display: block; text-align: center; width: 100%; }
.previewGA img {
	/*-ms-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);*/
	display: inline-block;
	margin: 10px;
}
.category { box-shadow: 0 0 4px #888; border: 1px solid #999; padding: 10px; margin-top: 10px; background-color: #FFF; }
.category:hover { box-shadow: 0 0 4px #555; border: 1px solid #222; }

.booking-number .box-padding label { padding-right: 60px !important; }
.box-padding .badge.price { position: absolute; right: 0; top: 0; color: #FFF; background-color: #9ec5d8; font-weight: 400; margin-top: 5px; min-width: 72px; text-align: center; }
.infobox { color: #007ac3; }
.infobox:hover { cursor: pointer; }
.popover-title { text-align: right !important; }

.wertgutschein { margin: 20px 0; }
.wertgutschein .row { justify-content: center; }
.wertgutschein .row > div { min-height: 75px; text-align: center; }
.wertgutschein .col-xs-3, .wertgutschein .col-xs-2 { background-color: #007ac3; color: #FFF; }
.wertgutschein .col-xs-3 { padding: 5px; }
.wertgutschein input { width: auto !important; margin: 5px auto 0 auto; }
.wertgutschein .form input { text-align: center; }
.wertgutschein .formBtn { text-align: center; }
.wertgutschein .formBtn input:hover { background-color: inherit; }
.bignumber { text-align: center; font-size: 30px; color: #FFF; margin: 20px 0; }
.wertgutschein h4 { color: #007ac3; margin-top: 8px; }
.wertgutschein .wertgutschein-beschreibung { border-top: 1px solid #2495d8; border-bottom: 1px solid #2495d8; }
.wertgutschein .wertgutschein-beschreibung h4 { margin-bottom: 0; }
.wertgutschein .wertgutschein-beschreibung p { margin: 0 0 10px 0; line-height: 22px; }
.wertgutschein .form p { font-size: 14px; text-align: center; color: #FFF; margin: 0; }
.wertgutschein .col-sm-3:hover { background-color: #2495d8; }
.wertgutschein .col-sm-3 .glyphicon { font-size: 18px; margin-top: 15px; position: relative; top: 5px; }
.wertgutschein .img-responsive {
  max-height: 40px;
  width: auto;
}

/* Zusatzleistungen */
#zusatzgruppierung {
  margin-bottom: 1em;
}
#zusatzgruppierung .ui-accordion-content {
  padding: 1em 0.5em;
}
@media (min-width: 480px) {
  #zusatzgruppierung .ui-accordion-content {
    padding: 1em;
  }
}


/* Tabelle Buchungsabschluss */
#booking_summary table { width: 100%; }
#booking_summary table tr:nth-child(2n+1) { background-color: rgba(0,122,195, 0.1); }
#booking_summary table td { padding: 5px 10px; color: #000; }
#booking_summary { margin-top: 2.5em; margin-bottom: 2.5em; }
#booking_summary a { color: #007ac3; text-decoration: underline; }
#storno_text { padding-top: 3em; margin-bottom: 15%; font-size: 80%; clear: both; }
#storno_text h4, #paypal-checkout h4 { font-size: 20px; margin-bottom: 15px; }
#storno_text p { line-height: 20px; }

  /* Responsive */
.isMobile .booking { display: block; background-color: rgba(0,122,195, 0.6); }
.ui-spinner-button { top: 0; width: 25px !important; height: 25px !important; text-align: center; clear:left; }
.ui-spinner-button span { margin: 0 auto; left: 0; right: 0; }
.ui-spinner { width: 90px; border: none !important; }

/* Fix Google Maps canvas
 *
 * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
 * global `box-sizing` changes. You may optionally need to reset the `max-width`
 * on images in case you've applied that anywhere else. (That shouldn't be as
 * necessary with Bootstrap 3 though as that behavior is relegated to the
 * `.img-responsive` class.)
 */

.map_canvas {
    color: #000000;
    height: 400px;
    width: 100%;
	margin-bottom: 1em;
}
.map_canvas,
.map_canvas * { box-sizing(content-box); }
.gm-ui-hover-effect { top: 0 !important; right: 0 !important; }

/* Optional responsive image override */
.map_canvas img { max-width: none; box-shadow: none; }
.map_canvas #map_content p { margin: 0; padding: 0; }

.mapDesc { line-height: 20px; }
.mapDesc.hasImg { width: 320px; }

/* 50-50 Artikelaufteilung */
.media-wrapper, .text-wrapper {
	display: block;
	vertical-align: middle;
}

.text-wrapper h1, .text-wrapper h2, .text-wrapperh3, .text-wrapperh4, .text-wrapper h5, .text-wrapper h6, .text-wrapper p { text-align: center; }
.rowOrderLeft { float: left; }
.rowOrderRight { float: right; }

.media-wrapper .imgLeft .imagesInnerWrap { width: 95%; margin-right: 5%; padding-right: 0; }
.media-wrapper .imgRight .imagesInnerWrap { width: 95%; margin-left: 5%; padding-left: 0; }

/* Bildstörer 100% */
.imgWidth-0 {
	width: 100%;
	position: absolute;
	z-index: 9;
}
.imgWidth-0 h1, .imgWidth-0 h2, .imgWidth-0 h3 {
	color: #FFF;
	text-transform: uppercase;
	font-size: 36px;
	text-shadow: 5px 5px 5px #222;
	padding: 0 15%;
}
.imgWidth-100 .imgWrap { padding: 0; width: 100%; }


/* Platzhalter */
.is_placeholder .moreBtn {
	display: none;
}

.is_placeholder {
	min-height: 320px;
}
.is_placeholder .booking .formBtn p {
	font-size: 80%;
}
.is_placeholder .placeholder-text-wrapper {
	position: absolute;
	bottom: 0;
	padding: 20px 0;
	pointer-events: none;
  width: 100%;

	background: rgba(0,0,0,0.5);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.8)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007cc3', endColorstr='#007cc3', GradientType=0 );
}
.is_placeholder:hover .placeholder-text-wrapper {
	background: rgba(0,124,195,0);
	background: -moz-linear-gradient(top, rgba(0,124,195,0) 0%, rgba(0,124,195,0.8) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,124,195,0)), color-stop(100%, rgba(0,124,195,0.8)));
	background: -webkit-linear-gradient(top, rgba(0,124,195,0) 0%, rgba(0,124,195,0.8) 100%);
	background: -o-linear-gradient(top, rgba(0,124,195,0) 0%, rgba(0,124,195,0.8) 100%);
	background: -ms-linear-gradient(top, rgba(0,124,195,0) 0%, rgba(0,124,195,0.8) 100%);
	background: linear-gradient(to bottom, rgba(0,124,195,0) 0%, rgba(0,124,195,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007cc3', endColorstr='#007cc3', GradientType=0 );
}
.is_placeholder .placeholder-text-wrapper h2 {
	background-color: transparent;
	text-transform: uppercase;
	box-shadow: none;
	text-shadow: 1px 1px 5px #000;
	top: 0;
	text-align: center;
}
.is_placeholder .placeholder-text-wrapper p {
	color: #FFF;
	font-weight: 400;
	font-style: italic;
	text-shadow: 1px 1px 5px rgba(0,0,0, 0.5);
	text-align: center;
	padding: 10px 10%;
	margin: 0;
}
.tax_box-doppelte-breite .imgWidth-100 {
	height: 100%;
}
.tax_box-doppelte-breite .imgWidth-100 .imgWrap {
	height: 100%;
    display: block;
    width: 100%;
	padding-bottom: 0;
}
.is_placeholder .imgTrigger { z-index: auto; }

/* FOOTER */
#footer {
	/*height: 100px;
	margin-top: -100px;*/
	position: relative;
	color: #949393;
	background-color: #007ac3;
	padding: 20px 0;
	text-align: center;
}
/* Schlange */
#footer:before {
	content: url(../img/template/spreefahrt_snake.png);
	position: absolute;
	top: -85px;
	left: 50px;
	z-index: 8;
}

#footer p {
	color: #FFF;
	font-size: 22px;
	font-weight: 500;
    margin-bottom: 0;
	text-align: center;
}
#footer .vcPrivacyNoPermission p { color: #888; margin-bottom: 15px; font-size: 16px; width: 80%; }
#footer a, #footer label, #footer button { color: #FFF; }
#footer #logo-link-footer img { display: block; width:70%; margin: 0 auto 20px auto; max-width: 350px; }
#footer .map_canvas {
	height: 300px !important;
	min-height: inherit;
	border-radius: 10px;
	margin-top: 0;
	margin-left: 20px;
}

#footer #eu-foerderung {
  text-align: left;
  margin-left: 20px;
  display: block;
}

/* SITEMAP */
#sitemap ul { margin:0; padding:0; list-style:none; }
#sitemap ul li { float:left; width:240px; margin:0 5px 10px 0; padding:0; font-size: 20px; line-height: 25px; }
#sitemap ul li.lvl1 { background-image:none !important; }
#sitemap ul li div { z-index: 1; position: relative; }
#sitemap ul li span { padding:5px; display:block; }
#sitemap li ul { margin: 0 5px 0; padding: 5px; background: none repeat scroll 0 0 #FAFAFA; border: 1px solid #F0F0F0; }
#sitemap li ul li { float:none; width:auto; padding:0 0 0 15px; margin:0; font-size:15px; }
#sitemap li ul li span { font-weight:normal; padding:0; }
#sitemap li ul li ul { padding:0; margin:0; border:0; }
#sitemap ul li a { color:#666666; }
#sitemap ul li a:hover { text-decoration:underline; }

/* Tabs Reitersystem */
.nav-tabs {
	margin-top: 2em;
}
.nav-tabs li a.active, .nav-tabs li:hover a, .nav-tabs li a:hover {
	background-color: #007ac3 !important;
	border: 1px solid #007ac3 !important;
	color: #FFF !important;
}
.tab-content { padding: 1em; border: 1px solid #DDD; border-top: none; margin-bottom: 2em; min-height: 300px; }

/*SUCHE*/
.search_results h3 { padding:0; margin:0; }
.search_results .depthpath { color:#999; font-style:italic; }
.search_results .depthpath a { color:#666; }
.search_results { margin-top: 1em; }

/* SEITENSPRUNGFUNKTION */
.jumper { text-align:left; padding:0 0 16px 0; padding-left: 160px; }

/* FORMS */
.form table { width: 100%; }
.form td, .form .klabel {  padding: 5px 0; }
.form .fehler_text {  padding: 0; }
.form label {  font-family: 'Cabin', sans-serif; font-size: 16px; color: #008855; display: block; margin-bottom: 5px; line-height: 20px; position: relative; font-weight: 400; }
#payment label {
	display: inline-block;
	line-height: 18px;
	font-size: 14px;
}
.form label.checkbox { display: inline; font-size: 14px;  padding: 0 0 0 0.5em; }
.optsContainer { margin-bottom: 5px; margin-top: 5px; line-height: 18px; clear: left; }

.ui-spinner-input { margin: 0; border: none; }
.ui-spinner { border: none; }
.ui-spinner-button, .boat_type_count .selectMinus, .boat_type_count .selectPlus { display: inline-block; background: #007ac3; margin-right: 2px; position: relative; width: 16px; height: 16px; top: -3px; color: #FFF; font-weight: bold; border: none; }
.ui-spinner-button:hover, .boat_type_count .selectMinus:hover, .boat_type_count .selectPlus:hover { background: #2495d8; cursor: pointer; border: none; color: #FFF !important; }
.ui-icon.ui-icon-white { background-image: url("/img/jQueryUI/ui-icons_ffffff_256x240.png") !important; }

.ui-spinner-down:before, .ui-spinner-up:before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	background-image: url("/img/jQueryUI/ui-icons_ffffff_256x240.png") !important;
	width: 15px;
	height: 15px;
}
.ui-spinner-up:before { background-position:-16px -128px; }
.ui-spinner-down:before { background-position:-48px -128px; }

.form input[type="text"]:not(.number-input), .form input[type="email"], .form input[type="number"], .form select, .form textarea, #submit {
	box-shadow: none;
	height: 35px;
	background-color: #EEE;
	border: none;
    border-bottom: 2px solid #EEE;
    color: #000000;
	transition: none;
	padding: 5px 10px;
	font-size: 16px;
}
.form .duty {
	font-weight: 500;
	font-size: 16px;
	color: #000000;
}
.form label .duty { display: none; }
.form input[type="text"].wrong { background-color: #f2dede; }
.form input[type="text"].correct { background-color: #dff0d8; }
.form input[type="text"].undefined { background-color: #fcf8e3; }

.hint .duty { color: #007ac3; }
.form .optsDuty input[type="text"], .form .optsDuty input[type="number"], .form .optsDuty select, .form .optsDuty textarea, .form .optsDuty .selectWrap .selectOver { border-left: 4px solid #007ac3; }
.form textarea {
	min-height: 80px;
	min-width: 400px;
}
#submit {
	padding: 5px;
	background-color: #CCCCCC;
}
#submit:hover {
	color: #FFFFFF;
	background: #999999;
}

.form input[type="checkbox"] {
	background: none;
}

input[type="checkbox"] {
	float: none;
	width: 20px;
	min-width: 20px;
	margin-right: 0.25em;
	clear: left;
}

#gutscheinanfrage #rqstFormSubmit, #tab-changer, .change-btn a { padding: 10px; min-width: 140px; text-transform: none; font-weight: 500; font-size: 18px; }
.lnk-btn { padding: 5px 10px; background-color: #008855; border-radius: 4px; color: #FFF !important; font-weight: 400; font-size: 16px; }
.lnk-btn:hover { background-color: #27ad7b; cursor: pointer; }

.change-btn { float: left; }
.change-btn a { color: #FFF; text-decoration: none; background-color: #F90; padding: 10px; margin-right: 10px; display: block; margin-bottom: 5px; text-align: center; }
.change-btn a.abort { background-color: #ccc; }
#flash-wrapper {
	width: 100%;
	text-align: center;
	position: absolute;
	display: none;
}
#flash-message { display: inline-block; margin: 0 auto; }
.alert { padding: 0.5rem 1.25rem; }

/* Checkboxen beim Kontaktormular */
.c5 {
	min-width: 20em;
}
label[for*="Antwort"], label[for*="Rückruf"], .c5 label {
	float: left;
}

.optsContainer.c5 {
	float: left;
	margin-right: 1em;
	margin-top: 1em;
}
label[for*="Rückruf"], input[id*="Rückruf"] {
	margin-top: 1em;
}

/* Fehlermeldung in Formularen */
.error {
	color: #FF0000;
}

/* Kahn Abfahrtzeiten */
#abfahrtzeit_auswahl .inputWrap {
	display: table;
	width: 100%;
}
#abfahrtzeit_auswahl { margin-top: -15px; }
#abfahrtzeit_auswahl .inputWrap > input, #abfahrtzeit_auswahl .inputWrap > div { display: inline-block; vertical-align: middle; min-width: 40px; }
#abfahrtzeit_auswahl .inputWrap label { font-weight: 600; margin-bottom: 0; }
#abfahrtzeit_auswahl .inputWrap .kahn-seats { font-size: 14px; line-height: 15px; color: #555; font-weight: 400; }

/* Bezahlarten beschränkt */
.payment-forbidden { opacity: 0.5; }
.payment-forbidden label, .payment-forbidden label strong {
	color: #222;
	font-weight: 400;
}
.payment-forbidden .hint {
	color: #222;
	margin-left: 0 !important;
}

.gutscheinauswahl {
  margin-bottom: 2em;
}

@media (min-width: 769px) {
  .gutscheinauswahl {
    margin-bottom: 0;
    width: 48%;
    display: inline-block;
    float: left;
  }
  .gutscheinauswahl:nth-child(2n) {
    margin-left: 4%;
  }
}
#gutscheinanfrage .tab-content > .active {
  display: block !important; /* Klick auf den Reiter zeigt auf jeden Fall den dazugehörigen Content an */
}

/* Bootstrap blauer Hover-Schatten entfernen */
/*textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus, .btn.focus, .btn:focus {
	border: none;
	box-shadow: none !important;
	transition: none;
}*/

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input
{
	border: none;
	transition: none;
	box-shadow: none;
}

.nav > li > a:hover, .nav > li > a:focus {
	background-color: transparent;
}
/* Bootstrap Fixes */
.popover-header { margin-top: 0 !important; }
.popover-body img { width: 100%; margin-top: 10px; }

.form input.checkbox { width: auto; }
.form .sendBtn { text-align: right; }
.form td.formInput .grid { float: left; }
.form .fehler_text { color: #990000; }
.form .sendenBtn {
	background:#007ac3;
	border:none;
	padding:5px;
	color:#FFF;
	cursor:pointer;
	margin-top: 1em;
	transition: all 0.5s ease 0s;
	min-width: 120px;
	margin-left: 0;
}
.form .sendenBtn:hover { background-color: #d5e448; }
.hint { margin-left: 0; }
.btn, .btn:hover {
  background-color: #008855;
  color: #FFF;
	font-size: 20px;
	border-radius: 0;
	text-transform: uppercase;
	transition: background-color 0.5s ease 0s;
}
.is_paddelboot_site .btn, .is_paddelboot_site .btn:hover {
    background-color: #007ac3;
}
.btn:hover {
	 background-color: #2c9bdd;
}
.formBtn input:hover {
    background: none repeat scroll 0 0 #880000;
    text-decoration: underline;
}

.optsContainer .selectWrap {
	position: relative;
	padding: 0;
	padding-bottom: 0 !important;
}
.optsContainer .selectOver {
	position: absolute;
	left: 0;
	top: 7px;
	width: 100%;
	white-space: normal;
	overflow: hidden;
	padding-right: 20px;
	padding-left: 10px;
}
.optsContainer .selectOver:after {
	position: absolute;
	right: 5px;
	top: 50%;
	margin-top: -3px;
	content: '';
	display: block;
	height: 0;
	width: 0;
	border-style: solid;
	border-width: 6px 6px 0 6px;
	border-color: #234 transparent transparent;
	border-radius: 1px;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s;
}
.optsContainer .selectWrap.focus .selectOver:after {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
#GA_userInput .optsContainer .selectWrap select {
  opacity: 0;
}
.optsContainer .selectWrap select {
	width: 100%;
	position: relative;
	padding-bottom: 8px !important;
	border-bottom: none !important;
}

.form .selectWrap {
    position: relative;
}
.form #GA_userInput .selectWrap select { width: 99%; }
.form .selectWrap .selectOver {
    bottom: 0;
    background-color: #EEE;
    cursor: pointer;
    font-size: 16px;
	font-weight: 400;
    left: 0;
    overflow: hidden;
    padding: 0 1%;
    position: absolute;
    right: 1%;
    top: 0;
	line-height: 30px;
	height: 35px;
}
.form .selectWrap .selectOver::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 16px;
}
.form .optsBlock label, .form .optsBlock input {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0;
    width: auto;
}
.form .optsBlock label {
    margin-right: 15px;
}
.form .selectWrap .selectOver::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 7.5px 0 7.5px;
	border-color: #007cc3 transparent transparent transparent;
	position: absolute;
	top: 12px;
}

.selectOver { display: none; }

/* GUESTBOOK */
.gbook { border-top:#ECECEC solid 4px; border-bottom:#ECECEC solid 4px; margin:10px 0; padding:10px 0 0 0; }
.gbook .noEntries { margin:0; text-align:center; font-style:italic; }
.gbook .addEntry { font-weight:bold; text-align:right; }

.entry { margin:0.75em 0; padding:10px 0; font-size:11px; line-height:16px; }
.entry .link { vertical-align:-7px; }
.entry .entryHead { background:#F6F6F6; border-bottom:1px solid #ECECEC; border-top:1px solid #ECECEC; font-weight:bold; }
.entry .entryHead .dateText { font-weight:normal; color:#666; }
.entry .entryBody { margin-top:0.75em; }
.entry .comment { font-style:italic; padding:8px 0 8px 16px; color:#666; }
.entry .commentHead { font-weight:bold; }

/* Zwischensumme */
#calculation {
	text-align: right;
	margin: 10px 0 15px 0;
	color: #007ac3;
	font-weight: 400;
	font-size: 25px;
    border: 1px solid #DDD;
}
#calculation div {
	background-color: #f5f7f8;
	padding: 10px 15px;
}

/* Direktlinks Startseite */
#direktlinks {
	position: fixed;
	right: 2%;
	z-index: 9;
	bottom: 6.5vH
}

#direktlinks a {
	width: 70px;
	height: 70px;
	display: block;
	margin-top: -10px;
	background: url(../img/template/icons_sprite.png) -5px -180px no-repeat;
	padding-left: 0;
	transition: all 0.5s ease 0s;
	opacity: 0.7;
}
#direktlinks a:hover { /*transform: scaleX(-1);*/ opacity: 1; }
#direktlinks a:before {
	margin: 0;
	width: 70px;
	height: 70px;
}
.sprite#link-whatsapp:before { background-position: -187px -182px; }
.sprite#link-webcam:before { background-position: 2px -90px; }
.sprite#link-buchung:before { background-position: -60px -92px; }
.sprite#link-gutschein:before { background-position: -125px -92px; }
.sprite#link-anfahrt:before { background-position: -185px -90px; }
.sprite#link-anfahrt { background-position: -88px -180px; }

#start_kahn-sommer, #start_kahn-winter {
	padding: 10px 30px;
	font-size: 30px;
	color: #FFF;
	text-transform: uppercase;
	transition: background-color 0.5s ease 0s;
	margin-bottom: 10px;
	min-width: 30%;
	text-align: center;
	display: inline-block;

	transition: background 0.5s ease 0s;

	background: rgb(228,208,83);
	background: linear-gradient(180deg, rgba(228,208,83,0.8) 0%, rgba(142,126,29,1) 100%);
}
#start_kahn-winter {
	background: rgb(83,185,228);
	background: linear-gradient(180deg, rgba(83,185,228,0.8) 0%, rgba(20,81,135,1) 100%);
}
#start_kahn-sommer div, #start_kahn-winter div { position: relative; display: inline-block; }
#start_kahn-sommer div:before, #start_kahn-winter div:before {
	content: "";
	position: absolute;
	width: 70px;
	height: 70px;
	left: -70px;
	display: block;
	background: url(../img/template/icons_sprite.png) -5px -180px no-repeat;
	background-position: -235px -100px;
}
#start_kahn-sommer div:before { background-position: -300px -100px; }
#start_kahn-winter { margin-left: 10px; }
#start_kahn-sommer:hover, #start_kahn-winter:hover {
	cursor: pointer;
	text-decoration: none;
	background: rgb(228,208,83);
	background: linear-gradient(180deg, rgba(228,208,83,0.8) 0%, rgba(228,208,83,1) 100%);;
}
#start_kahn-winter:hover {
	background: rgb(83,185,228);
	background: linear-gradient(180deg, rgba(83,185,228,0.8) 0%, rgba(83,185,228,1) 100%);
}
#start_kahn-sommer span, #start_kahn-winter span {
	text-transform: none;
	font-size: 20px;
}

/*.tooltip-inner { background-color: #008855; }
.tooltip .arrow:before { background-color: #008855; }*/

/* Grafiken */
.sprite {
	padding-left: 80px;
}
.sprite:before {
	content: "";
	position: absolute;
	width: 80px;
	height: 80px;
	margin-left: -90px;
	margin-top: -10px;
	background: url(../img/template/icons_sprite.png) 0 0 no-repeat;
}
.sprite.route:before { background-position: -100px 0; width: 90px; }
.sprite.snow:before { background-position: -190px 0; }

/* Webcam Vorschau */
#webcam {
	border: 1px solid #007ac3;
	text-align: center;
	min-width: 300px;
	min-height: 200px;
	vertical-align: middle;
	position: relative;
	background-color: #EEE;
}
#webcam:before {
	content: "";
	position: absolute;
	background: url(../img/template/icons_sprite.png) 0 0 no-repeat;
	background-position: 2px -90px;
	width: 70px;
	height: 70px;
	top: 50%;
	left: 50%;
	margin-top: -35px;
	margin-left: -35px;
	z-index: 0;
}
#webcam:after {
	content: "Eine Verbindung zur Webcam wird aufgebaut, bitte haben Sie einen Augenblick Geduld!";
	position: absolute;
	bottom: 20px;
	left: 0;
	z-index: 0;
	font-size: 12px;
	line-height: 16px;
	padding: 0 5px;
	text-align: center;
	width: 100%;
}
#webcam img {
	position: relative;
	z-index: 1;
}

/* Responsive */
@media (max-width: 1550px) {
	#start-h1 { font-size: 40px; line-height: 50px; }
	#start-h2 { font-size: 25px; line-height: 35px; }

	#start-features pre { font-size: 16px; line-height: 20px; padding-left: 60px; }
	/*.sprite:before { background-size: cover; width: 65px; height: 65px; margin-top: -10px; }
	.sprite.route:before { background-position: -70px 0; }
	.sprite.snow:before { background-position: -140px 0; }*/

	#navMain .menue-wrapper.hasImg {
		background-size: auto 70%;
	}
}

@media (max-width: 1400px) {
	h1 { font-size: 28px; }
	body:not(.start) article.d-flex .text-wrapper { padding: 0 60px; }
	.box h2 { font-size: 18px; }
	.booking .formBtn p { font-size: 18px; }
}

@media (min-width: 1200px) {
	body:not(.start) article.d-flex .text-wrapper { padding: 0 40px; }
	#kahnplaetze .plaetze:not(.without-children) { width: 50%; display: inline-block; margin-bottom: 5px; }

  #quick-booking > p {
    font-size: 40px;
    line-height: 45px;
    padding-left: 8%;
    padding-right: 8%;
    margin-bottom: 15px;
  }
  #quick-booking {
    margin-top: -320px;
  }
}

@media (min-width: 1300px) {
	#navMain > ul > li:not(#m_4):hover:before, #navMain > ul > li:not(#m_33):hover:before {
		top: -20px;
	}
	.articleGrid.gridWidth_33:nth-child(3n+1) {
		clear: left;
	}

	.bookingnumber-row label { margin-top: 10px; line-height: 25px }

	#banner .modal-dialog {
		max-width: 900px !important;
	}
}
@media (min-width: 1700px) {
  #quick-booking > p {
    padding-left: 25%;
    padding-right: 25%;
  }
}
@media (max-width: 1800px) {
  .is_paddelboot_site #navMain #m_4 a, .is_paddelboot_site .nav-overlay #navMain #m_4 a, .is_paddelboot_site #navMain #m_33 a, .is_paddelboot_site .nav-overlay #navMain #m_33 a {
    width: 280px;
    margin-left: 65px;
  }
}
@media (max-width: 2300px) {
  .is_paddelboot_site #navMain #m_4 a, .is_paddelboot_site .nav-overlay #navMain #m_4 a, .is_paddelboot_site #navMain #m_33 a, .is_paddelboot_site .nav-overlay #navMain #m_33 a {
    width: 280px;
    margin-left: 65px;
  }
}
@media (max-width: 2300px) {
  #navMain #m_4 a, .nav-overlay #navMain #m_4 a, #navMain #m_33 a, .nav-overlay #navMain #m_33 a {
    width: 155px;
    margin-left: -65px;
  }
}
@media (max-width: 1600px) {
  .is_paddelboot_site #navMain #m_4 a, .is_paddelboot_site .nav-overlay #navMain #m_4 a, .is_paddelboot_site #navMain #m_33 a, .is_paddelboot_site .nav-overlay #navMain #m_33 a {
    width: 155px;
    margin-left: -65px;
  }
}

@media (max-width: 1200px) {
	#navMain li a { font-size: 20px; }
	#navMain #m_4::before, #navMain #m_33::before { content: "Hafen Waldschloesschen"; }

	#navMain .menue-wrapper.hasImg {
		background-size: auto 60%;
	}

	h1 { font-size: 24px; }
	body:not(.start) article.d-flex .text-wrapper { padding: 0 50px; }
	.box h2 { font-size: 16px; }
	.booking .formBtn .fas {font-size: 40px; }
	.booking .formBtn p { font-size: 14px; }

	article p { font-size: 16px; line-height: 24px; }
}

@media (max-width: 979px) {
	#navMain li a, .nav-overlay #navMain li a { font-size: 20px; }
	#navMain #m_4::before, .nav-overlay #navMain #m_4::before, #navMain #m_33::before, .nav-overlay #navMain #m_33::before { content: "Waldschloesschen"; }

	#start-headline-wrapper { margin-top: 150px; }

	#footer #navStd li a, #footer #navStd li:after, #footer p { font-size: 18px; }

	.media-wrapper, .text-wrapper:not(.imgWidth-0) { align-self: flex-start; }

	.placeholder-text-wrapper p { padding: 10px 5%; font-size: 15px; line-height: 18px; }
	.is_placeholder:not(.is_object) .box .imgWidth-100 { position: absolute; height: 100%; }
	.is_placeholder:not(.is_object) .box .imgWidth-100 a { padding-bottom: 103% !important; }

	#navMain .hasImg {
		background-size: auto 80%;
	}

	#navMain .menue-wrapper.hasImg { background-image: none !important; padding-right: 20px !important; }
	#navMain .menue-wrapper ul.split { width: 50%; }

	.imgWidth-0 h1, .imgWidth-0 h2, .imgWidth-0 h3 {
		font-size: 28px;
		font-weight: 400;
		text-shadow: 2px 2px 3px #222;
	}
  #navMain li a, .nav-overlay #navMain li a { font-size: 13px; line-height: 16px; padding: 0 10px; }
  #navMain .subtitle { font-size: 13px; line-height: 16px; }
}

@media (min-width: 768px) {
	.form .hint { margin-left: 30%; }
	.form .btnContainer { text-align: left; margin-left: 30%; margin-bottom: 5px; }
	.change-btn { margin-top: 1em; }
	.change-btn a { float: left; margin-bottom: 5px; }
}

/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
  #navMain #m_4 a, .nav-overlay #navMain #m_4 a, #navMain #m_33 a, .nav-overlay #navMain #m_33 a {
    width: 140px !important;
    margin-left: -70px !important;
  }

  .article.d-flex:not(.imgIsNone) {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .media-wrapper, .text-wrapper {
    width: 100%;
  }

  .booking-number > tbody > tr > td {
    width: 100%;
    display: block;
  }

  #navMain .hasImg {
    background-size: auto 60%;
  }

  .imgWidth-0 h1, .imgWidth-0 h2, .imgWidth-0 h3 {
    font-size: 24px;
  }

  article > p, article > h1, article > h2, article > h3, article ul, article ol {
    width: 85%;
  }

  .article {
    margin-bottom: 20px;
  }

  body:not(.start) article.d-flex {
    margin-top: 50px;
  }

  #footer #navStd li a, #footer #navStd li:after, #footer p {
    font-size: 16px;
  }

  /* Video größer */
  #bildwechsler video {
    margin-left: -100%;
  }
}

@media (max-width: 800px) {
 #quick-booking p {
   font-size: 25px;
   line-height: 25px;
   margin-bottom: 15px;
 }
  #quick-booking { margin-top: -50vh; }
  #quick-booking .paddel-option { display: block; width: 100%; margin-top: 10px; }
  #quick-booking .paddel-option input, #quick-booking .paddel-option select, #quick-booking .btn { width: 100%; }
  #quick-booking .btn { margin-top: 20px; }
}

@media (min-width: 601px) {
	/* maximal 4 Hauptpunkte in Desktop-Ansicht */
  /* 2022 6 Menüpunkte */
	#navMain > ul > li:nth-child(1n+8) { display: none; }
	body:not(.start) article.d-flex .text-wrapper { padding: 0 40px; }

}

@media (max-width: 768px) {

	#start-h2 { font-size: 20px; line-height: 26px;	}
	#start-h1 { font-size: 30px; line-height: 40px; }

	.hidden-xs #navMain li:not(#m_4), .hidden-xs #navMain li:not(#m_33) { display: none; }
	#navMain #m_4 a, .nav-overlay #navMain #m_4 a, #navMain #m_33 a, .nav-overlay #navMain #m_33 a { margin-left: 0; left: 80px; }


	#navMobiWrapper { display: block; }
	#naviMobi { display: none; }

	#navMainTrigger {
		position:fixed;
		top: 30px;
		right: 25px;
		display:block;
		height:60px;
		width:60px;
		z-index:100;
		transition:top 0.2s ease 0.2s, left 0.2s;
		cursor:pointer;
	}
	.navbar-fixed-top #navMainTrigger {
		top: 0;
	}

	body:not(.start) { padding-top: 80px; }
	body:not(.start) article.d-flex { margin-top: 0; }
	body.open {
		overflow:hidden;
    position: fixed;
	}
	body.open #navMainTrigger {
		right:270px;
		background:#fff;
		top: 0;
		z-index: 2;
		box-shadow: 0 0 20px rgba(0,0,0, 0.6);
	}
	body.open #naviMobi { display: block; }
	.csstransforms #navMainTrigger .line, .csstransforms #navMainTrigger:after, .csstransforms #navMainTrigger:before {
		background:#FFF;
		display: block;
		height: 5px;
		right: 20px;
		left: 10px;
		position: absolute;
		transition: all 0.5s ease 0s;
		width: 40px;
	}
	.csstransforms #navMainTrigger .line {
		opacity: 1;
		top: 50%;
		margin-top:-2px;
		display:block;
	}
	.csstransforms #navMainTrigger:after, .csstransforms #navMainTrigger:before {
		content: "";
	}
	.csstransforms #navMainTrigger:before {
		bottom: 40px;
	}
	.csstransforms #navMainTrigger:after {
		bottom: 14px;
	}
	.csstransforms body.open #navMainTrigger .line {
		opacity: 0;
		background:#39986a;
	}
	.csstransforms body.open #navMainTrigger:before {
		bottom: 29px;
		transform: rotate(45deg);
		background:#666;
	}
	.csstransforms body.open #navMainTrigger:after {
		bottom: 29px;
		transform: rotate(-45deg);
		background:#666;
	}
	#navMobiWrapper {
		position:fixed;
		top:0;
		right:0;
		height:100%;
		z-index:5;
		background:#fff;
	}
	body.open #navMobiWrapper {
		box-shadow:0 0 20px rgba(0,0,0,0.4);
	}
	#naviMobi {
		height:100%;
		overflow:auto;
		width:0;
		transition:width 0.2s;
	}
	body.open #naviMobi {
		width:270px;
	}
	#naviMobi > ul {
		width:270px;
	}
	#navMain,
	#navMobiWrapper #navStdMobi  {
		width:270px;
	}
	#navMain .hasImg { min-height: inherit; }
	#navMobiWrapper #navStdMobi { margin-bottom: 20px; }
	#navMobiWrapper  #navStdMobi ul {
		padding:10px 0 ;
	}
	#navMain ul {
		padding:0;
		visibility:visible !important;
		opacity: 1 !important;
		width: 100%;
		margin: 0;
	}
	#navMobiWrapper #navStdMobi li,
	#navmain li {
		position:relative;
		font-size:14px;
		line-height:20px;
		width: 100%;
		display: block;

	}
	#navMobiWrapper #navStdMobi li a,
	#navmain li a {
		display:block;
		padding:10px 25px 10px 20px;
		text-align:left;
		transition:color 0.2s;
		color:#676767;
		text-decoration:none;

		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
	#navMobiWrapper #navStdMobi li { padding-left: 0; }
	#navMobiWrapper #navStdMobi li a, #navMobiWrapper #navStdMobi li label, #navMobiWrapper #navStdMobi li button { padding: 5px 25px; background: transparent; }
	#navMobiWrapper #navStdMobi li:after { display: none; }
	#navMobiWrapper #navStdMobi li:hover a, #navMobiWrapper #navStdMobi li a.active,
	#navmain li:hover a, #navmain li a.active { color: #007ac3; }
	#navmain li.active { background: none; }
	#navmain li a.lvl1 {
		font-weight:600;
		text-transform:uppercase;
	}
	#navmain .iconMenuTriggerDwn {
		color:#555;
		display:block;
		position:absolute;
		right:0;
		width:36px;
		height:36px;
		text-align:center;
		top:4px;
		cursor:pointer;
		overflow:hidden;
		border-radius:3px;
	}
	#navmain .iconMenuTriggerDwn:after {
		content: '\f067';
		font-family: 'Font Awesome 5 Free';
		display: block;
		height: 36px;
		line-height: 36px;
		width:36px;
		text-align:center;
		transition: transform 0.2s ease 0s;
		transform-origin:50% 50%;
		font-weight: 900;
	}
	#navmain .iconMenuTriggerDwn.active:after {
		content: "\f068";
	}

	#navMain li { background: none; display: block;  }
	#naviMobi #navMain li#m_4 , #naviMobi #navMain li#m_33 { display: none; }
	#navMain li:hover { background: none; color: #e2001a; }
	#navMain li:after, #navMain li:before { display: none; }
	#navMain li a, #navMain li a span {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}

	#navmain > li:hover > ul:after, #navmain > li:hover .menue-wrapper:after {
		display: none;
	}
	#navmain > li > ul, #navmain > li .menue-wrapper { position: relative; left: 0; }
	#navmain > li > ul { padding: 0; }

	/* Unterpunkte */
	#naviMobi #navMain li ul { padding: 0 20px; }
	#naviMobi #navMain li ul li {
		padding: 5px 50px 5px 20px;
		border-bottom: 1px dashed #007ac3;
		transition: background-color 0.5s ease 0s;
	}
	#naviMobi #navMain li ul li a {
		text-transform: none;
		font-weight: 200;
		font-size: 16px;
	}

	#naviMobi #navMain li .menue-wrapper.active ul { display: block !important; }
	#navMain .menue-wrapper ul.split { width: 100% !important; float: none; margin-bottom: 15px; }
	#naviMobi #navMain li ul li { padding: 10px; }
	#navMain .menue-wrapper li.subtitle { text-transform: none; background-color: #007ac3; color: #FFF; font-size: 14px; padding: 5px 10px !important; }
	#navMain .menue-wrapper li.subtitle a { color: #FFF; font-size: 14px !important; font-weight: 400 !important; }
	#naviMobi #navMain li ul li a { padding: 0; width: 100%; }

	article > p, article > h1, article > h2 { width: 90% !important; }

	.imgWidth-0 h1, .imgWidth-0 h2, .imgWidth-0 h3 { text-transform: none; }


	/* Header sichtbar, beim Scrollen verschwunden */
	.navbar-fixed-top.nav-overlay:not(.fixedShow) { display: none; }
	.navbar-fixed-top #navbar, body:not(.start) #navbar {
		min-height: 60px;
		background: #008855;
	}
  .cs-2 .navbar-fixed-top #navbar, body:not(.start) #navbar {
    background: #007ac3;
  }
	.navbar-fixed-top #navbar { padding-top: 15px !important; }
	#navMain #m_4 a, .navbar-fixed-top #navMain #m_4 a, #navMain #m_33 a, .navbar-fixed-top #navMain #m_33 a {
		width: 80px !important;
		height: 60px;
		top: -25px;
	}

	#start-features { visibility: hidden; }
	#start_kahn-sommer { margin-top: 30px !important; }
	#start_kahn-sommer, #start_kahn-winter {
		margin: 0 5% 10px 5%;
		max-width: 90%;
		flex: 0 0 100%;
	}

	.article { margin-top: 40px; }
	.nav-tabs .nav-link { font-size: 15px; padding: 0.5rem; }
}

@media (max-width: 575px) {
	#start-features .col-12 { margin-top: 20px; }
	#start-features  pre { text-align: center; }

	#footer .map_canvas { margin-left: 0; }

	#footer #navStd { margin: 30px auto 0 auto; float: none; display: block; }
	#footer #navStd .nav { display: table; width: 100%; }
	#footer #navStd .nav li { display: table-cell; }
	#footer::before { top: -60px; left: 10px; }

	.wertgutschein { margin-bottom: 50px; }
	.wertgutschein .col-xs-2 { width: 30%; background-color: #008855; }
	.wertgutschein .col-xs-7 { width: 70%; border-right: 1px solid #2495d8; }
	.wertgutschein .col-xs-3 { width: 100%; }

	#footer #navStd .nav li { display: block; border-top: 1px solid #3b93c7; }
	#footer #navStd .nav li:hover { background-color: #3b93c7; }
	#footer #navStd .nav li a { padding: 12px 0; display: block; width: 100%; }
	#footer #navStd .nav li:hover a { text-decoration: none; }
	#footer #navStd li:after { display: none; }

  .lnk-btn {
    display: block;
    margin-top: 5px;
  }

  #quick-booking {
    margin-top: -80vH;
  }
  #quick-booking > p {
    font-size: 20px;
  }

}

@media (max-width: 480px) {
	body { font-size: 16px; line-height: 20px; }
	#main-box { padding:10px; }
	.imgRight, .imgLeft, .imagesInnerWrap  { float:none !important; margin: 5px 0; text-align:center; }
	.imgWrap { width:100% !important; }
	.imgWrap img, .imagesInnerWrap  { width:100% !important; height:auto !important; margin-left: 0 !important; padding-left: 0 !important; }

	.sendenBtn, .hint { margin-left: 0 !important; width: 100%; }

	.imgWidth-0 { right: 0; }
	.imgWidth-0 h1, .imgWidth-0 h2, .imgWidth-0 h3 {
		padding: 0 10%;
		font-size: 18px;
	}

	article.d-flex .text-wrapper {
		padding: 0 15px !important;
	}
	.text-wrapper .btn {
		font-size: 16px;
		padding: 2px 10px;
	}

	/* Formulare */
	.nav-tabs > li {
		width: 100%;
		display: block;
		margin-bottom: 2px;
		float: none;
		width: 100%;
	}
	.nav-tabs > li a {
		border-radius: 0 !important;
	}
	.form td:not(.line), #GA_coupon_code {
		width: 100% !important;
		display: block;
	}
	#calculation div { font-size: 18px; }
	#gutscheinanfrage #rqstFormSubmit, #tab-changer, .change-btn a { font-size: 16px; }

	#footer {
		height: auto;
		margin-top: 50px;
		padding-bottom: 20px;
	}
	#footer #navStd li a, #footer #navStd li::after, #footer p { font-size: 15px; line-height: 18px; }
	#footer #navStd li { padding-left: 15px; }
	#footer #navStd li:after { right: -11px; top: 10px; }

	/* Direktlinks nebeneinander */
	#direktlinks {
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    position: fixed;
    background: #eee;
    height: 80px;
    z-index: 99;
	}
	#direktlinks a, .sprite#link-anfahrt {
		display: inline-block;
		background-position: -93px -180px;
		width: 60px;
    margin: 5px 7px 0;

	}
	#direktlinks a:before { margin-left: -38px; }

  .vcA11yOverlayTrigger {
    font-size: 2.8em !important;
    right: 5% !important;
    bottom: 18px !important;
    z-index: 99 !important;
  }
}

@media (max-width: 380px) {
	#footer #navStd .nav li { display: block; }
	#footer #navStd .nav li:after { display: none; }

	.box-padding .badge.price { position: relative; }
	.inputWrap.box-padding label { padding-right: 0 !important; }
	.inputWrap.box-padding label .badge.price { margin-top: 0; }

	#gutscheinanfrage #rqstFormSubmit, #tab-changer, .change-btn a { min-width: 105px; }
	.change-btn a { float: none; display: block; width: 100%; margin-bottom: 5px; text-align: center; }
	.change-btn { margin-bottom: 15px; }

	/* Texte kleiner */
	body, article p { font-size: 14px; line-height: 20px; }
	body:not(.start) { padding-top: 90px; }
	.article { margin-top: 10px; }
	.article h1 { font-size: 18px; padding-bottom: 30px; }
	.article > h1 { padding-bottom: 0; }
	.article h1:after { bottom: 8px; }
	.article h2 { font-size: 16px; margin-bottom: 15px; font-weight: 500; }
}

@media (max-width: 360px) {
	#start_kahn-sommer, #start_kahn-winter { font-size: 25px; }
	#start-h2 { margin-bottom: 0; }
	#start-headline-wrapper { margin-top: 100px; }

	#direktlinks a, .sprite#link-anfahrt {
		background: url(../img/template/icons_sprite_mobile.png) -65px -130px no-repeat;
		width: 60px;

	}
	#direktlinks a:before {
		margin-left: -28px;
		width: 50px;
		height: 50px;
		background: url(../img/template/icons_sprite_mobile.png) 0 0 no-repeat;
	}
	.sprite#link-whatsapp:before { background-position: -142px -130px; }
	.sprite#link-webcam:before { background-position: 0 -63px; }
	.sprite#link-buchung:before { background-position: -45px -66px; }
	.sprite#link-gutschein:before { background-position: -93px -64px; }
	.sprite#link-anfahrt:before { background-position: -140px -63px; }
}

@media (max-height: 630px) {
	#start-headline-wrapper {
		margin-top: 95px;
	}
}

@media (max-height: 590px) {
	#start-headline-wrapper {
		margin-top: 80px;
	}
	#start-h2 {
		font-size: 18px;
		line-height: 20px;
		font-weight: 400;
	}
	#start_kahn-sommer {
		margin-top: 10px !important;
	}
}

.nav-tabs > .active > a, .nav-tabs > .active > a:hover { outline:0;}

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer { overflow: hidden; position: relative; max-width: 630px;}
.jspPane { position: relative; }
.jspVerticalBar {
	position: absolute;
	top: 0;
	right: 2px;
	width: 16px;
	height: 100%;
	background: rgba(255,255,255,0.2);
}

.jspHorizontalBar { display: none; }

.jspCap { display: none; }
.jspHorizontalBar .jspCap { float: left; }
.jspTrack { background: none; position: relative; }
.jspDrag {
	background: #7c7978;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}
.jspHover {  }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; }
.jspVerticalBar .jspTrack { background-color: #cdcac9;}
.jspArrow {
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
	/*background: url(../img/jQuery_scroll.png) no-repeat;*/
}
.jspArrow.jspDisabled { cursor: default; }
.jspArrowUp.jspDisabled { background-position:-16px 0; }
.jspArrowDown.jspDisabled { background-position:-48px 0; }
.jspArrowUp { background-position:-32px 0; }
.jspArrowDown { background-position:-64px 0; }
.jspVerticalBar .jspArrow { height: 16px; }
.jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus { outline: none; }
.jspCorner { background: #eeeef4; float: left; height: 100%; }

/* Trenner für Artikel */
.hr {
}

@keyframes hvr-pop {
	50% {
		transform: scale(1.2);
	}
}
.hvr-pop {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transform: translateZ(0px);
    vertical-align: middle;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-name: hvr-pop;
    animation-timing-function: linear;
}

.container-fluid, #main { min-width: 320px; }

/* Projekt Farbgebung */
.optsContainer .selectWrap:hover .selectOver:after { border-top-color: #007ac3; }
.optsContainer .selectOver:after { border-color: #008855 transparent transparent; }
#swipebox-action { border-top: none; }
#swipebox-caption { border-bottom: none; }
.optsDuty input[type="text"], .optsDuty input[type="number"], .optsDuty input[type="email"], .optsDuty select, .optsDuty textarea { border-left: 3px solid #007ac3; } /* Pflichtfeld */
#swipebox-caption, #swipebox-action, .pagerJumper a.aktiv, .vid:hover .video-time, #swipebox-bottom-bar, #swipebox-top-bar { background: #008855 !important; } /* Bildbetrachter */
.vid:hover .playIcon:after { border-color: #008855; }
.vid:hover .playIcon { border-color: transparent transparent transparent #008855; }

#banner .modal-header { background-color: #008855 !important; color: #FFF !important; border-radius: 5px 5px 0 0; }
.is_paddelboot_site #banner .modal-header { background-color: #007ac3 !important; }
#banner .close { opacity: 1; color: #FFF; }
#banner .btn { background-color: #DDD !important; border-radius: 5px; color: #666; text-transform: none; font-size: 16px; }
.img-responsive { width: 100%; }


/* 2022 neues Farbschema für Paddel */
.cs-2 .gridWrap .articleImgNone, .cs-2 .gridWrap .articleImgLeft, .cs-2  .gridWrap .articleImgRight {
  background-color: transparent;
}
.cs-2 .articleGrid:hover .imgWrap { opacity: 1; }
.cs-2 .gridWrap div:not(.link-giveaway) > form > .formBtn p { visibility: hidden; }
body.is_paddelboot_site:not(.start) #navbar { background: #007ac3; border-top: 10px solid #007ac3; }


/* Gutschein-Button */
.cs-2 .gridWrap .link-giveaway .btn {
  /*background: #007ac3;*/
  background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
  radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  width: 100%;
}
.cs-2 .gridWrap .link-giveaway {
  padding: 0;
  z-index: 5;
}
.cs-2 .gridWrap .link-giveaway .formBtn p {
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
  color: #FFF;
  margin: 8px 0;
  pointer-events: none;
  font-weight: 500;
}
.cs-2 .gridWrap .link-giveaway .formBtn p .fa-gift {
  font-size: 25px;
  margin-right: 10px;
  vertical-align: middle;
}

.bounce {
  align-self: flex-end;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  background-color: #F44336;
  height: 200px;
  margin: 0 auto 0 auto;
  transform-origin: bottom;
  width: 200px;
}
.bounce {
  animation-name: bounce;
  animation-timing-function: ease;
}
@keyframes bounce {
  0%   { transform: scale(1,1)      translateY(0); }
  10%  { transform: scale(1.1,.9)   translateY(0); }
  30%  { transform: scale(.9,1.1)   translateY(-100px); }
  50%  { transform: scale(1.05,.95) translateY(0); }
  57%  { transform: scale(1,1)      translateY(-7px); }
  64%  { transform: scale(1,1)      translateY(0); }
  100% { transform: scale(1,1)      translateY(0); }
}

@media (min-height: 640px) {
  .is_paddelboot_site .link-giveaway {
    position: absolute;
    bottom: 0;
  }

  .row.tour-details {
    padding-bottom: 3em;
  }
}

.development {
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #6610f2;
  z-index: 9999;
  color: #FFF;
}

/*
	Overlay
	*/

.vcModal {
  transition: height 0s .3s, opacity .3s;
  pointer-events: none;
  position: fixed;
  opacity: 0;
  left: 0;
  top: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 30px calc(15px + 2.667em) 20px 15px;
  border: none;
  width: 100%;
  height: 0;
  margin: 0;
  max-width: none;
  max-height: none;
  background: none;
}
.vcModal::backdrop {
  background: rgba(255,255,255,.75);
}
.vcModal.open,
.vcModal[open] {
  height: 100vh;
  opacity: 1;
  transition: height 0s, opacity .3s;
  pointer-events: auto;
}
.vcModalMsg {
  position: relative;
  z-index: 1;
  margin: auto;
  max-width: 40em;
  width: 100%;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  padding: 20px;
  border-radius: 0;
}
.vcModalMsg:not(.greyBackground) {
  background: #fff;
}
.vcModalMsg .article {
  width: 100%;
  margin: 0;
}
.vcModal .vcModalClose {
  position: absolute;
  display: block;
  right: -2em;
  top: 0;
  cursor: pointer;
  padding: .5em;
  line-height: 1;
  text-align: center;
  background: #37454b;
  border: none;
  color: #fff;
  font-size: 1.333em;
  height: 2em;
  width: 2em;
  border-radius: 0;
  transition: all .3s;
  z-index: 1;
}
.vcModal .vcModalClose:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.vcModalBannerBottom {
  padding: 30px 0 0;
  align-items: flex-end;
  background: rgba(255,255,255,.75);
}
.vcModalBannerBottom .vcModalMsg {
  margin-bottom: 0;
  max-width: none;
  padding: 0;
  border-radius: 0;
}
.vcModalBannerBottom .vcModalClose {
  right: 15px;
  top: 15px;
}
.vcModalBannerBottom .vcModalMsg .article {
  padding: 20px;
  margin: 0 auto;
}

.vcModalMsg .article .imgTeaser:first-child {
  margin: -20px -20px 0 !important;
}
.vcModalMsg .article .imgTeaser + .headline {
  margin-top: 20px;
}
.vcModalMsg .gridWrap {
  margin-left: -15px;
  margin-right: -15px;
}
@media (min-width: 960px) {
  .vcModalMsg {
    max-width: 60em;
    padding: 40px;
  }
  .vcModalMsg .article .imgTeaser:first-child {
    margin: -40px -40px 0 !important;
  }
  .vcModalBannerBottom .vcModalMsg .article {
    width: 83.33%;
  }
  .vcModalBannerBottom .vcModalMsg .article > :first-child {
    padding-right: 0;
  }
}

/*
	CSS Icons
	*/
.vcCssIcon {
  position: relative;
  display: inline-block;
}
.vcCssIconCheck {
  height: 1em;
  width: .667em;
  border-right: .1875em solid #000;
  border-bottom: .1875em solid #000;
  transform: rotate(45deg);
  margin: 0 .2em;
}
.vcCssIconArrowDown {
  width: 1em;
  height: 1em;
  margin: 0 .2em;
}
.vcCssIconArrowDown:after {
  content: '';
  display: block;
  font-size: .667em;
  width: 1em;
  height: 1em;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -.375em;
  margin-left: -.5em;
  transform: rotate(-45deg);
  border-left: 3px solid #000;
  border-bottom: 3px solid #000;
}
.vcCssIconClose {
  height: 100%;
  width: 100%;
  display: block;
}
.vcCssIconClose:before,
.vcCssIconClose:after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: '';
  background: #fff;
  display: block;
  width: 100%;
  height: .1875em;
  margin-top: -.09375em;
  margin-left: -50%;
}
.vcCssIconClose:before {
  transform: rotate(45deg);
}
.vcCssIconClose:after {
  transform: rotate(-45deg);
}