/* Style Template 1 */
body {
	font-family: "Source Sans Pro","Open Sans", Verdana, sans-serif;
	font-weight: 400;
	font-size: 1.1em;
	padding: 0; margin: 0;
	color: #7A5A27;
	//background-color: #7A5A27;
}

header, main, footer, section, div, article, aside { box-sizing: border-box; width: 100%;}

h1,h2,h3 { text-align:center; font-family: "Alex Brush", Verdana, sans-serif; font-weight: 400; font-size: 2em;}
h1 {font-size: 3em;}
h2, h3 {margin: 1.2em 0;}
h4 {margin: 2em 0 0 0;}
p {margin-top: 0.4em;}
ul { list-style: none; margin: 0; padding: 0;}
//ul li { float:left; }
ul:after {clear: both;}
a:link, a:focus, a:active, a:visited { text-decoration: none; color: #b00001;}
//a:hover { color: blue; }

img {max-width: 100%; height: auto; }

/*--- allgemeine Klassen ---*/
a.button {color: white; background-color: #CFAE3E; padding: 8px 12px; }
a.button:hover {background-color: #651012;}
a.borderButton { color: white; padding: 8px 12px; border: 2px solid white; margin-right: 8px; display: inline-block;}
a.borderButton:hover {background-color: white; color: #B8312F; }
a.whiteButton {background-color: white; color:#651012;padding: 8px;} 
.width800  { max-width: 800px; margin: 0 auto;}
.width960  { max-width: 960px; margin: 0 auto;}
.width1400  { max-width: 1400px; margin: 0 auto; }
.width1200  { max-width: 1200px;  margin: 0 auto;}
.maxwidth50 { max-width: 50%;}
.maxwidth33 { max-width: 33%;}
.maxwidth25 { max-width: 25%;}
.container {padding-bottom: 1em; }
.padBot {padding-bottom: 1em; }
.padTop {padding-top: 1em;}
div.quadTeaser { margin:0 auto; width:25%; height:280px; float: left; font-size: 0.9em;}
div.tripleTeaser { margin:0 auto; width:33.33%; height:280px; float: left; font-size: 0.9em;}
div.linkbox { margin-left: 10px;background-color: white; padding: 0px; border: 1px solid grey;}
	div.linkbox h4 { background-color: #7A5A27; color: white; padding: 0.5em 0 0.5em 0.5em; margin: 0;}
	div.linkbox p { color: #B8312F; display: block; padding: 8px 0 8px 8px; border-bottom: 1px solid grey;margin:0;} 
	div.linkbox p:last-of-type {border: none;}
	
div.contentTeaser { border: 1px solid #DFDFDF;max-width:320px;width:100%;}
div.contentTeaser a {width: 100%; color: #000; display: block;}
div.contentTeaser a:hover {background-color: #DFDFDF;}
div.contentTeaser a h4{margin: 0 0 0 10px; padding: 0.5em 0.5em 0.5em 12px; background: url("../../img/linkextern.png") no-repeat center left;}
div.contentTeaser a p {padding: 0 0.5em 0.5em 0.5em; margin: 0; font-size: 0.8em;}
.center { text-align: center;}
.weiss {background-color: #FFFFFF; }
.schwarz{background-color: #000000;}
.hellgrau {background-color: #EFEEEC;}
.mittelgrau {background-color: #DFDFDF;}
.dunkelgrau {background-color: #6C655F;}
.hellrot {background-color: #ED1C24;}
.rot { background-color: #B00000;}
.dunkelrot {background-color: #651012;}
.blau { background-color: #306A9A;}
.mittelblau { background-color: #234C6F;}
.dunkelblau { background-color: #152F44;}
.tuerkis {background-color: #378D9B;}
.mitteltuerkis {background-color: #286670;}
.dunkeltuerkis {background-color: #183E44;}
.lila {background-color: #9C4E9A;}
.mittellila {background-color: #71386F;}
.dunkellila {background-color: #452244;}
.colortest div.owl-item div{width: 100px; height: 100px;}
.fontWhite { color: #FFFFFF;}
div.clear { clear: both; }


/*--- HEADER ---*/
header {
	position: absolute;
	text-align:center;	
	z-index: 999;
	}

/*---NAVIGATION---*/
nav#mainNav {	
	display: block; 
	//right: 60px; 
	position: absolute; z-index: 999;
	margin: 0 5%;
	width: 90%;
}

nav#mainNav ul {
	padding: 0; margin: 0;
}

nav#mainNav ul li {
	float: left; box-sizing: border-box;
	text-align: center; 
	color: white;
	
}

nav#mainNav ul li a:link , nav#mainNav ul li a:focus, nav#mainNav ul li a:visited{ text-transform:uppercase; font-weight: bold; color: #FFFFFF;  margin: 0; padding: 22px; display: block; font-size: 1em;}
nav#mainNav ul li a:hover { text-decoration: underline; }

/* SCROLLNAVIGATION */
nav#scrollNav, nav#scrollNavPoints {	
	display: block;
	position: fixed;
	bottom: 45%;
	left: 0;
	z-index: 999;
}

nav#scrollNav ul, nav#scrollNavPoints ul {
	padding: 0; margin: 0; text-align: center;
}

nav#scrollNav ul li {
	background: #b00001; color: white;
	margin-bottom: 8px;
	display: block;
}

nav#scrollNav ul li a:link , nav#scrollNav ul li a:focus, nav#scrollNav ul li a:visited{ color: #FFFFFF;  margin: 0; padding: 8px; display: block;}
nav#scrollNav ul li a:hover { background-color: #B8312F; }
nav#scrollNav ul li img {max-width: 25px;}

nav#scrollNavPoints ul li {
	margin: 0 0 8px 12px;
	display: block;
}
nav#scrollNavPoints ul li a { 
background-image: url("../../img/scrollnavpoint.png");
background-position: center center; background-repeat: no-repeat;
width: 11px; height: 11px; text-indent: -9999px; display: block;}
nav#scrollNavPoints ul li a:hover { background-image: url("../../img/scrollnavpoint_hover.png");}


/*--- SECTIONS --- */
section#preise h4 {margin-top: 0;}
section#massagekurse h2 {margin-bottom: 0.6em;}

/*--- CONTENT SIMPLE ---*/
.contentSimple h3, footer h3 { 
	font-family: "Source Sans Pro","Open Sans", Verdana, sans-serif; 
	font-weight: 300; font-size: 1.5em;
	margin: 1em 0 0.6em 0;
} 

p.hinweis {font-size: 0.8em;}

section#salzyoga {
	background-image: url("../../img/salzyoga3.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	background-attachment: fixed;
	color: white !important;
}
	section#salzyoga h2 { margin: 0; padding-top: 1em;}

div#yogapilates { padding-left: 10px; color: white; background-color: #B8312F;}

/*IMAGE TEASER */
section.imgTeaser {
	background-color: #b00001;
	background-image: linear-gradient(
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1)
    ),url("../../img/grotte_totale.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	background-attachment: fixed;
	height: 85vh;
	color: white;
	padding: 10% 0 0 0 ;
 } 

 /* RESPONSIVE IMAGE*/
section.respImg {position: relative;margin-bottom: -6px;}
section.respImg div.respImgCaption {position: absolute; top: 40%; }
//section.respImg div.respImgCaption h2{display: inline-block;}
//section.respImg div.respImgCaption p {display: inline;}
 
/*QUADTEASER NO MARGINS*/ 
div.quadTeaser.qt1 {background-image: url("../../img/stbib_neumarkt.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.quadTeaser.qt2{ background-image: url("../../img/buecherbus.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.quadTeaser.qt3 { background-image: url("../../img/jugendliche_bibliothek_original.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.quadTeaser.qt4 { background-image: url("../../img/makerbot.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.darkOverlay { opacity: 0; background-color: rgba(0, 0, 0, 0.6); 
-webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; width: 100%; height: 100%; padding: 15% 5% 5% 5%; color: #FFF;}
div.darkOverlay:hover { opacity: 1; }
div.darkOverlay h3 { margin-top: 0; }

/*TRIPLETEASER NO MARGINS*/ 
div.tripleTeaser.tt1{background-image: url("../../img/tt1.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.tripleTeaser.tt2{ background-image: url("../../img/tt2.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.tripleTeaser.tt3 { background-image: url("../../img/tt3.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}



/* FIGURE IMAGES */
figure {margin: 0; width:100%;}
figure.figLeft {float: left; margin-right: 0.8em;}
figure.figRight {float: right; margin-left: 0.8em;}
figure figcaption { font-size: 0.7em;}

/*SOCIAL ICONS*/
article div.socialLinks {padding-top: 0.5em;}
article.socialIcons { padding: 3em; text-align: center;}
article.socialIcons h3 {display: inline; margin-right: 1em; }
article.socialIcons a {margin-right: 1em; }
article.socialIcons img { margin-bottom: -0.6em; max-width: 50px; height: auto; }

/*PARALLAX*/
section.parallax {
	//height: 40vh;
	background-image: linear-gradient(
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ), url("../../img/grotte_preise.jpg");
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	padding-top: 15px;
	color: white;
}

/*--- ACCORDION ---*/
.accordion h3 {border-bottom: 2px solid #b00001; cursor:pointer; text-align:left; margin-bottom: 0.5em;}
.accordion h3.ui-accordion-header-collapsed { background: url("../../img/akkordeon-aufklappen_neu.png") no-repeat center right; }
.accordion h3.ui-accordion-header-active { background: url("../../img/akkordeon-zuklappen_neu.png") no-repeat center right; }
.accordion .ui-accordion-content p{ margin-top: 0;}

/*--- DIALOG ---*/
#dialog {background-color: #b00001; color: white; padding: 10px; border: 1px solid #333; }

/*--- CALENDAR ----*/
//section.calendar ul.calendarList { font-size: 0.8em;}
section.calendar ul.calendarList li { display: block;border-bottom: 1px dashed #a3a3a3; margin-bottom: 12px; position:relative;}
section.calendar ul.calendarList li figure {width: 20%; height: auto; float:left; margin-right: 2%;}
section.calendar ul.calendarList li figcaption {margin-top: -6px; font-size: 0.6em; margin-bottom: 4px;}
section.calendar ul.calendarList li div.calendarInfo {float:left; width: 68%;}
//section.calendar ul.calendarList li div.calendarInfo:after {clear: both;}
section.calendar ul.calendarList li h3 {text-align: left; font-size: 0.8em; margin: 0 0 0.4em 0; }
section.calendar ul.calendarList li p {margin: 0; font-size: 0.8em;}
section.calendar ul.calendarList li div.calendarMeta { font-size: 0.6em; }
section.calendar ul.calendarList li a {font-size: 0.8em; width:10%;float:left; text-align:center;}

/*--multipleTeaser---*/	
//section.multiTeaser div.col {position: relative; } 
section.multiTeaser div.gutters {margin-bottom: 0.6em; }
section.multiTeaser div.standortContainer {overflow:hidden;position:relative;max-height: 127px; }
section.multiTeaser h3 { font-size: 80%; font-weight: normal; background-color:#B8312F; position: absolute; bottom: -34px; 
display: block;width: 100%; margin: 0; padding: 6px 0; 
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; opacity: 1; }
section.multiTeaser a:hover h3 {bottom: 0; opacity: 1;}
section.multiTeaser a {color: white;}


/*--- VIDEO Background---*/
video#bgvid { 
    //position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    z-index: -100;
    /*-ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;*/
    background-size: cover; 
}

/*--- RESPONSIVE YOUTUBE VIDEO---*/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	text-align:center;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*--- SLIDER ---*/
.slider {position:relative;}

/*--- CHARTS ---*/
.ct-chart { width: auto;}
.ct-chart-donut .ct-label, .ct-chart-pie .ct-label {color: white; fill: white; font-weight: bold;}

/* PREIS TABELLEN */
table {width:100%;}
table tr {padding: 10px 0;}
table tr td.td1 {width: 60%; }
table tr td.td2, table tr td.td3 {width: 20%;text-align: right;}

/*--- KONTAKTFORMULAR ---*/
form input, form textarea{ width: 100%; margin-bottom: 0.5em; border-radius: 6px; background-color: #DFDFDF; color: #333;}
form button { background-color: #b00001; color: white; width: 100%; border: none;border-radius: 6px; height: 60px;  }
form button:hover {background-color: #651012;cursor:pointer}
form .formLeft, form .formRight{width: 49%;float: left; margin-right: 0.5%;}


/*--- Footer ---*/
footer {color: #FFF;padding: 1em;}
footer a:link, footer a:visited, footer a:active, footer a:focus { color: #FFFFFF !important;}
footer #markenlogo {	background-image: url("../../img/marke_streifen_transparent.png"); background-repeat: repeat-x; background-size: auto 100%;}
a#topLink {position: fixed; bottom: 0; right: 10px; background-color: #6C655F; padding: 0.3em; color: #FFF;}