/*CSS Datei Yoga Zeit Bielefeld */
@import url(font-awesome.min.css);

body {
	color: #4d4841; /* 615b52 #4d4841; */
	font-size: 16px;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	background-image: url(../images/karton-grau.jpg);
	background-repeat: repeat;
	letter-spacing: -0.007em;
}

#header {
	background-color: #2dddfde;
	width: 100%;
	color: #77909e;
	padding: 20px 30px;
	text-align:center;
    height: 250px;
	background-color: #2dddfde;
	color: #77909e;
	margin-bottom: 20px;
}


#header .units-row .unit-66 {
	margin-top:40px;
}

#header .units-row .unit-33 {
	text-align: left;
}

#headerimg {
	background-image: url('../images/keyvisual.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;/* */
	height: 120px;
	width: 100%;
	border: 1px solid #fff;
	text-align:center;
}

#header h1 {
    color: #433361;
   font-family: "Philosopher",sans-serif;

    font-size: 7em;
    letter-spacing: 0.05em;
    margin: 0;
	font-weight: 300;
}

#header h2 {
    color: #84944b;
    font-size: 2.05em;
    padding: 10px 0;
	/*font-family: "Philosopher",sans-serif;   */
	 font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	 margin:0;
}

/*p {
	color: #111;
}*/

h2,h3 {
	font-weight: 300;
	color: #4d4841;
}
p.kleintext {
	color: #333;
    font-size: 0.8em;
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1.1em;
    margin-bottom: 0.25em;
    margin-top: 1em;
}

.feature {
	width: 100%;
	float: left;
	background-color: #84944b;
	padding: 20px;
	border-radius: 3px;
	color:	#fff;
	position:relative;
	font-weight: 300;
}
.feature p {
	color:	#fff;
}
.feature:last-child {
	margin-right: 0px;
}

.feature:first-of-type {
	margin-left: 0px;
}

.feature a {
	color:	#433361; 
	font-weight:500;
    font-family: "Philosopher";
    letter-spacing: 0.02em;
}
.feature a:hover {color:	#fff;}
.feature a.mehr {float:right; margin-bottom:10px; margin-top:10px;}

.feature ul {
    list-style: outside url("../img/dot-lila.png") none;
    margin-bottom: 1.2em;
    margin-left: -20px !important;
}


.logo {
	float: none;
}

.impressum p, .inner .impressum p {
	font-size: 0.8em;
}
.impressum h4 {font-size: 1.1em; font-weight:normal;}


.hidden {
    visibility: hidden;
}

a.menu-link {
    display: none;
}

/*keine Menü Höhenangabe */
.js nav[role=navigation] {
	max-height: none;
}

/*runde Bilder - Portrait*/
.portrait img {
    border-radius: 180px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15);
} 


/* --------------------------------- Start Navigation --------------------------------- */
#menu {
	float: 		none;
	clear:		both;
	padding: 	5px 0 0 0;
	background-color: #433361;
	color:		#fff;
}
#menu .inner {background-color:transparent; padding:5px;}

#menu .inner #nav ul {
	width: 100%; 
	list-style: none; 
	margin: 0px !important; 
	margin-left: 33%;
	}

#menu #nav ul li {
	display: 		inline-block;
	position:		relative;  /*hält subnavi auf position*/
	 text-transform: uppercase;
	 letter-spacing: 0.02em;
	 font-size: 0.9em;
}

#menu #nav ul li.first {
	margin-left:	-5px;
}
#menu #nav ul li a {
	color: 			#fff;
	text-decoration: none;
	/*padding-bottom 15px wichtig für Submenue */
	padding: 4px 21px 4px 21px;
	text-transform: uppercase;
}


#menu #nav ul li a:hover,
#menu #nav ul li a:active {
	color: #dad6d0 !important;
	text-decoration: none;
}
#menu #nav ul li a:link, 
#menu #nav ul li a:visited {
	color: #fff;
	text-decoration: none;
  	font-size:1.2em;
}
/* Subnavigation */


#menu #nav ul li ul {	
    display: none;
}
#menu #nav ul li:hover ul {	
	position: 			absolute;
	left:				0;
	top:				35px;
	background-color:	#9ea632;
	padding: 			10px;
	border-radius: 		5px;
	display: 			block;
	width: 				200px !important;
}


#menu #nav ul li ul li {
    display:			block;
}
#menu #nav ul li ul li a {
	clear: 				both;
    display: 			block;
    float: 				none;
    line-height: 		1.6em;
    margin: 			0;
    padding: 			5px 10px 5px 0;
	border:				none;
	font-size:			15px;
	text-transform: 	none;
}
#menu #nav ul li:hover ul li a:last-child {border:none !important;}	

#menu #nav ul li.angebot ul {
	width: 310px !important;
}

/* Subsubnavigation */
/* standard ausgeblendet */

#menu ul li ul li ul {	
    display: none;
    left: 100px;
    position: absolute;
	line-height: auto;
    top: -8px;
    width: 280px;
	z-index:100;
	/*margin: 0 auto;*/
	margin: 0 0 0 20px;
}

/* :hover eingeblendet*/
#menu #nav ul li ul li:hover ul {	
	display: block;
	background-color:#eee;/**/
	padding: 10px 10px 20px 0;
	border-radius: 		5px;
	margin-top:5px;
}


#menu ul li ul li ul li {
	padding-left:		20px;
}

#menu #nav ul li ul li ul li a {
	clear: 		both;
    display: 	block;
    float: 		none;
    line-height: 1.6em;
    margin: 	0;
    padding: 	0;
}
/*#nav ul.subnavi li ul li::after {
  	content: "";
}*/

/* Test mit Menüpfeil fr Subnavi */

#menu #nav ul li .sub-toggle::before {
    content: "";
    display: inline-block;
    height: 90%;
    margin-right: 1em;
    vertical-align: middle;
}
#menu #nav ul li .sub-toggle {
    background: none;
	color: #77929e;
    cursor: pointer;
    height: 100%;
    position: absolute;
    right: 0;
    text-align: center;
    top: -3px;
    width: 48px;
    z-index: 999;
}




/* --------------------------------- Ende Navigation --------------------------------- */

#footer {
	margin: 0px auto;
	background-color: #433361;
 	padding-bottom: 40px;
	color: #fff;
	font-weight:300;
}
#footer .inner {
	background-color: transparent;
}

#footer h3 {
	color: #dad6d0;
	font-size: 20px;
}
#footer .inner .unit-33 li a:hover,
#footer .inner .unit-33 a:hover  {color:	#dad6d0;}

#footer .inner a {text-decoration: none;}

#footer .inner .unit-33 li a {
	border-bottom: solid 1px #dad6d0;
	padding-bottom:1px;
	line-height:28px;
	display:block;
	color:	#9EA632;
}


#footer p {
	color: #fff;
	font-size: 16px;
}

#footer ul {
	list-style:none;
	margin-top: 1px;
	margin-left: -20px;
}
 /* Ausnahme für linke Spalte Footer */

#footer .unit-50 ul,
#footer .unit-66 ul,
#footer .unit-75 ul   {
	list-style: url(../img/dot.png) outside none;
    margin-left: 18px;
	margin-bottom: 1.2em;
}
#footer .unit-50  ul li,
#footer .unit-66  ul li, 
#footer .unit-33  ul li  {
    /*padding: 0 20px;*/
    text-align: left;
	margin-left: -20px;
}

/*  Ende Ausnahme */

#footer .copyright {
	font-size: 0.8em;
	padding:10px 0 !important;
	position:relative;/**/
	width: 100%;
	color:#444;
  	bottom: 0px;
	text-align:center;
	background-color: #dddfde; /*f9f2ec  d5d1cb;*/
	opacity: 0.8;
	border-top: 1px solid #444;
}

.headline {
	text-align: left;
	color: #77929e;
	font-size: 30px;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	font-weight: 400;
	font-family: 'Quicksand', serif;
}

.intro {
	font-size: 24px;
	padding-bottom: 10px;
	text-align: center;
}

.inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 20px;
	/*padding: 20px;background-color: #fefbf4;*/
}
.inner p {font-size:18px; color:#444;}

.inner img {
	/*border-radius: 3px;
    display: block;*/
    height: auto;
    max-width: 100%;
	margin-top: 6px; /* neu hinzugefügt */
}

.soc {
	float: right;
	margin-left: 10px;
}

.circle {
    width:70px;
    height:70px;
    border-radius:250px;
    font-size:20px;
    color:#fff;
    line-height:70px;
    text-align:center;
    background-color:#e67548;
    margin-bottom: 15px;
}

.portfolio {
	padding: 20px;
	margin-top: 40px;
	background-color: #eee;
}

input {
	border: 1px solid #ddd;
}

textarea {
	border: 1px solid #ddd;
}

#human {
	display: none;
}

/* --------------- eigene styles -----------*/

/* 
Generic Styling, Tabellen fuer Desktops/Laptops 
*/
table { 
  width: 		100%; 
  border-collapse: collapse; 
  font-size:	0.9em;
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: 	#eee; 
}
th { 
  background: 	#84944b; 
  color: 		#fff !important; 
  font-weight:	normal;
}
td, th { 
  padding: 		10px; 
  border: 		1px solid #d5d1cb; 
  text-align: 	left;
  color:		#444; 
}
.termine td, .termine th { 
  padding: 		5px 10px; 
  border: 		1px solid #d5d1cb; 
  text-align: 	center;
  color:		#444; 
}
th.th-1 {width:25%}
th.th-2 {width:10%}
th.th-3 {width:10%}
th.th-4 {width:20%}
th.th-5 {width:25%}
th.th-6 {width:10%}

/* Sonderstyles */

/*Abstände unter diesen p / Absätzen entfernen*/
p.ohne-abstand {margin-bottom: 0 !important;}


/* SMALL SCREENS ---------------------------------------------------- .fehler-404 {padding-bottom:200px !important;}*/

/* mit größter geänderter Auflösung beginnen */
@media only screen and (min-width: 761px) and (max-width: 1200px) {
	
	#header {
    	clear:both;
	}
	
	
	#header h1 {
    	font-size: 5em;
	}

	#header h2 {
		font-size: 1.6em;
	}
}


@media only screen and (max-width: 760px) {

#header {
	height:		250px;
	clear:		both !important;
}

#header .units-row .unit-33 {
	text-align: center;
}

#header h1 {
    color: #fff;
    font-size: 5.8em;
}

#header h2 {
    color: #84944b;
    font-size: 1.8em;
    padding: 20px 0 10px 0;
}
.inner {
	padding: 60px 20px 30px 20px;
}

.intro {
	font-size: 20px;
}

.logo {
	float: none;
}
img.logo {
	max-width: 200px;
}

/* Für alle nachfolgenden Monitorgrößen */

#menu ul.mainnavi li:hover ul.subnavi {	background-color:#fff; }
/* Navigation */

#menu ul.mainnavi li:hover ul.subnavi li a {color:#433361;}	

/* --------------------------------- Start Navigation --------------------------------- */

/* Display-Menü ausblenden  */ 
.js nav #menu ul.mainnavi {
	display:block !important; 
}



.js nav[role=navigation] {
			overflow: hidden;
			max-height: 0;
		}
nav[role=navigation].active {
			background-color: #eeeeee;
			border-radius: 2px;
			left: 0;
			max-height: 30em;
			position: absolute;
			top: 65px;
			width: 100%;
		}
.js nav[role=navigation] ul {
			margin: 0;
			padding: 0;
			float: none;
		}
		
nav#menu[role=navigation].active li {
			display:table !important;
			width: 100%;
			texta-align:center;
			margin-left: 0;
		}
		
nav[role=navigation].active li a {
			display: block;
			padding: 5px 10px !important;
			border-bottom: 1px solid #ccc;
			border-top:none;
			color:#444;
			width: 100%;
		}
		
		
		
nav#menu[role=navigation].active li a:hover,
nav#menu[role=navigation].active li a:active  {
			border-bottom: 1px solid #ccc;
			color: #77929e !important;
			border-top:none;
			padding: 5px 10px !important;
		}

nav#menu ul.mainnavi li a:hover {
			padding:0 !important; 
			margin: 0 !important;
}

/* Submenue */
nav#menu ul.mainnavi li ul.subnavi {
    display: table !important;
	position:relative !important;
	z-index:1;
	padding:0 !important;
	margin:0 !important;
	top:0 !important;
}
nav#menu ul.mainnavi li ul.subnavi li {
	width:100%;
	display:block;	
	padding: 0px 10px !important;
}

nav#menu ul.mainnavi li ul.subnavi li a {
	padding: 0 0 0 20px !important;
	font-size:1.1em;
}


nav#menu[role=navigation].active li ul.subnavi li a:hover {
	border:none;
	padding: 0 0 0 20px !important;
	margin:0 !important;
}
nav#menu ul.mainnavi li.angebot ul.subnavi {
	width: 100% !important;
}

#menu ul.mainnavi li .sub-toggle::before {
    content: "";
    display: inline-block;
    height: 100%;
    margin-right: -0.25em;
    vertical-align: middle;
}
#menu ul.mainnavi li .sub-toggle {
    background: #dddfde none repeat scroll 0 0;
    cursor: pointer;
    height: 100%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 48px;
    z-index: 999;
}

/* --------------------------------- Ende Navigation --------------------------------- */




.headline {
	font-size: 42px;
	margin-top: 200px;
}

#footer {
	margin: 0 0 0 4px;
}

.copyright {
	display: none;
}

.soc {
	float: left;
}

.feature {
	max-width: 100%;
	float: none;
	margin: 1%;
}

.feature:last-child {
	margin-right: 1%;
}

.feature:first-of-type {
	margin-left: 1%;
}

.unit-80 {
	width: 100%;
} 

/*tabelle*/
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}

table {  
  font-size:	1.1em;
}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td, th { 
  		padding: 		6px; 
		font-size: 0.8em;
  		text-align: 	left; 
	}
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Kursart"; }
	td:nth-of-type(2):before { content: "Ort"; }
	td:nth-of-type(3):before { content: "Datum"; }
	td:nth-of-type(4):before { content: "Zeit"; }
	td:nth-of-type(5):before { content: "Info*"; }
	
	
	
	a.menu-link {
		background-color:#dddfde;
		background-image: url("../../content/media/icons/menue.png");
		background-repeat: no-repeat;
		border-radius: 2px;
		cursor: pointer;
		float: right;
		height: 35px;
		margin: 3px;
		width: 35px;
	}
	
	a.menu-link {
		display: block;
		float: right;
		position: absolute;
		right: 10px;
		top: 26px;
	}
	
	a.menu-link:hover,
	a.menu-link:active {background-color:#dddfde;}
	
}
/* von birgit */
  @media (max-width: 575.98px)
table.termine td, table.varianten td {
  border-bottom: none;
  font-size: 0.95em;
}
@media (max-width: 767.98px) {
	table.termine td {
	  border-bottom: 1px solid #eee;
	  position: relative;
	  padding-left: 30%; /* Abstand zur TH*/
	  text-align:left;
	}

  }
@media (max-width: 767.98px) {
	table.termine td, table.termine th {
		font-size: 0.8em;
		text-align: left;
	}	
	table.termine td p {margin:0; padding:0;}
}

@media (max-width: 1200.98px) {
	table.termine td, table.varianten td {
	  min-width: 10%;
	}
	table.termine td, table.varianten td {
	  border-right: 1px solid #577091;
	  font-size: 1em;
	}
}
@media (max-width: 767.98px) {
table, thead, tbody, th, td, tr {
  display: block;}
} 
 /*ende */



@media only screen and (min-width: 320px) and (max-width: 480px) {
#header h1 {
    color: #fff;
    font-family: "Philosopher",sans-serif;
    font-size: 2.8em;
    font-weight: 300;
    letter-spacing: 0.05em;
    margin-bottom: 0;
    margin-top: 40px;
}


#header h2 {
    color: #fff;
    font-size: 0.9em;
    padding: 10px 0;
}

h1 {font-size: 1.6em; }
.inner {
	padding: 30px 20px;
}
#menu .inner ul {padding-bottom: 20px;}

	
}