/* gelb: #f3ef8a */ 

/* =============================================
                1. CSS RESET
================================================ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,maso
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
    {
    border: 0;
    font-size: 100%;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    text-decoration: none;
    }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
        { display: block; }
body    { line-height: 1; }
ol, ul  { list-style: none; }
table   { border-collapse: collapse; border-spacing: 0; }


html 
    {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

*, *:before, *:after 
    {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    }

@viewport 
	{
	width: device-width;
	}
/*================================
         FONTS IMPORT
==================================*/

@font-face 
	{
  	font-family: 'Montserrat';
  	src: 	url('fonts/montserrat-thin.woff') format('woff'),
       	url('fonts/montserrat-thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	}

@font-face 
	{
  	font-family: 'Montserrat';
  	src: 	url('fonts/montserrat-light.woff') format('woff'),
       	url('fonts/montserrat-light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	}

@font-face 
	{
  	font-family: 'Montserrat';
  	src: 	url('fonts/montserrat-regular.woff') format('woff'),
       	url('fonts/montserrat-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	}

@font-face 
	{
  	font-family: 'Montserrat';
  	src: 	url('fonts/montserrat-bold.woff') format('woff'),
       	url('fonts/montserrat-bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	}

html
	{
	font-size: 62.5%;
	}

body
	{   
	font-family: 'Montserrat', sans-serif;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.7;
	color: #333333;	
	text-align: left;
		
   background-color: #ffffff;
   background-repeat: repeat-x, repeat;
   
	margin: 0;
   padding: 0;
		
	height: 100vh;
		
	display: flex;
	flex-direction: column;
	align-items: center;
	}

body.normal
	{   
   background-color: #e8cb3e;
	background-image: url(bilder/hg_beige_f.png), url(bilder/beige_f.png);
	} 
	
body.yoga
	{   
   background-color: #803680;
	background-image: url(bilder/hg_lila_f.png), url(bilder/lila_f.png);
	}
	
body.tanz
	{   
   background-color: #97bf0d;
	background-image: url(bilder/hg_gruen_f.png), url(bilder/gruen_f.png);
	}
	
body.index
	{   
   background-color: #f3ef8a;
	background-image: url(bilder/index.png), url(bilder/gelb_f.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
		
	display: inline;
	}


img.round
	{
	border-radius: 2rem;
	}

img.gallery
	{
	width: 90%;
	margin: 0 2rem 2rem;
	}

img.gallery-3
	{
	width: 30%;
	margin: 1rem;
	}

img.portrait
	{
	width: 40%;
	float: right; 
	margin: 0 2rem 2rem 2rem;
	}

div.logo-container
	{
	margin: 7rem 0 5rem;
	z-index: 1;
	height: 70px;
	}

@media (max-width: 1500px) 
	{
	div.logo-container
		{
		margin: 4rem 0 3rem;
		z-index: 1;
		height: 50px;
		}
}

div.navigation-container
	{
	width: 50vw;
	min-width: 770px;
	max-width: 1200px;

	margin: 0 0 1rem;
	}

.container
	{
	width: 50vw;
	min-width: 770px;
	max-width: 1200px;
	height: 50vh;
	min-height: 400px;

	border: 1px solid #ccc; 
	background-color: #FFFFFF; 
	
	margin: 0;
	padding: 2rem 0 2rem 2rem;
	}	

.container #inhalt
	{
	height: 100%;
	overflow: auto;
	padding: 0 2rem 2rem;
	}		

.container-home
	{ 
	background-image: url(bilder/yoga-baum.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	}

.container-yoga
	{ 
	background-image: url(bilder/yoga.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	}	

.container-tanz
	{ 
	background-image: url(bilder/tanz.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	}

div.two-col
	{ 
	width: 100%;
	display: flex;
	flex-direction: row;
	}

div.two-col div.left
	{ 
	flex: 1;
	}	

div.two-col div.right
	{ 
	flex: 1;
	padding: 0 3rem 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}	


 /* Tabelle */	
	
table.termine
	{
	width: 90%;
	margin: 2rem 5%;
	}

@media (max-width: 1500px) 
	{
	table.termine
		{
		width: 98%;
		margin: 2rem 2%;
		}
}

th.termine {
	border: 0;
	overflow: hidden;
	background-color: #803680;
	color: #ffffff;
	text-align: center;
	font-weight: 700;
	padding: 0.5rem;
	}
	
td {
	border: 0px;
	vertical-align: top;
	overflow: hidden;
	padding: 10px;
	}


	
	
 /* Textformatierung */

h1   /* Seiten - Überschrift grau */
	{													 
	font-family: 'Times New Roman', serif;
	font-size: 3rem;
	color: #666666;
	font-style: italic;
	font-weight: normal;		
		
	margin-bottom: 1.5rem;
	margin-top: 0.5rem;
	margin-left: 3rem;
	}

h2
	{
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.7;
	
	margin-bottom: 2rem;
	margin-top: 0;
	margin-left: 0;
	}

aa   
	{
	font-family: times new roman, serif;
	font-size: 30px;
	color: #ff0000;
	font-style: italic;
	text-align: center;
	} 

bb   
	{													/* Überschrift 1 grau */ 
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.7;
	color: #666666;
	}

/* Zitat grün */  	
cc  
	{													
	font-family: 'Times New Roman', serif;
	font-size: 2.5rem;
	color: #97bf0d;
	font-style: italic;
	line-height: 1.5;
	margin: 1rem 0;
	text-shadow: 0px 0px 10px #FFFFFF;
	}	

blockquote 
	{													
	margin: 5rem 0 5rem 5rem;
	}	

/* Zitat grün */  	
p  
	{													
	margin: 0 0 1.5rem;
	}	

/* Links (Mouseover) */

a,
a:link,
a:visited
	{
	color: inherit; 
	text-decoration:none; 
	font-weight: 700;
	}

a:focus,
a:active,
a:hover
	{
	color: #666666; 
	}

 /* Textausrichtung */

	.right {text-align: right; }
	.left {text-align: left; }
	
	
 /* Trennlienien */

	hr 			{ height: 1px; border: 0 none; border-top: 1px solid #be882e; }

hr.dash 		
	{ 
	height: 1px; 
	border: 0 none; 
	border-top: 1px dashed #666666; 
	margin: 2rem 0 3rem;
	}

	hr.double 	{ height: 3px; border: 0 none; border-top: 3px double #be882e; }

 /* Liste */

ul.kreis
	{
	list-style-type: circle;
	}

ul.circle 
	{
	margin: 1rem 1rem 2.5rem 3rem;
	list-style-type: circle;
	}

/*////////// CSS NAVIGATION //////////*/	

a 
	{
	color:#ffffff;
	}	
			
.navigation 
	{
	height: 4rem;
	background: #97bf0d;
	}

.nav
	{
	display: flex;
	}
			
.link 
	{
	height: 4rem;
	padding: 0 0.5rem;
	position:relative;
	z-index:10;
	}
		
a.main 
	{
	position: relative;
	display: flex;
	align-items: center;
	text-decoration:none;
	height: 100%;
	z-index: 10;
	}
		
a.main b {
			position:relative;
			display:inline-block;
			padding:0 .5em 0 .5em;
			line-height:2em;
			cursor:pointer;
			}
			
.sublinkscontainer {
			position:absolute;
			}
					
.sublinks {
			position:relative;
			float:right;				/*can be any float*/
			margin-top:-2em;
			}

.sublinks a {
			display:block;
			background:#97bf0d;
			padding:.5em 0 .5em 0;
			text-decoration:none;
			}
			
.shifter {
			position:relative;
			float:right;
			}
			
.sublinks .bgthing {
			height:2em;
			background:#97bf0d;
			display:block;
			}

ul {
			margin:0;
			padding:0;
			list-style:none;
			}
			


/*height limit*/

.link {
			top:-25em;
			}
		
a.main {
			top:25em;
			}
		
a.main:hover, 
a.main:active, 
a.main:focus 
	{
	margin-bottom: 25em;
	background: #803680;
	color: #fff;
	outline: none;
	}
			
a.main:active b, a.main:focus b {
			outline: dotted thin;				/*resetting the outline*/
			}
								
.sublinkscontainer, .shifter {
			height:25em;
			}

/*valid browser height maximization*/
.nav > .link {
			top:-1000em;
			}

.link > a.main {
			top:1000em;
			}

.link > a.main:hover, .link > a.main:active, .link > a.main:focus {
			margin-bottom:1000em;
			}
																	
.link > .sublinkscontainer, .sublinkscontainer > .shifter {
			height:1000em;
			}		
		
/* ENDE valid browser height maximization*/


/*width limit*/
.sublinkscontainer {
			width:12.563em;
			}
					
.sublinks a {
			width:12.5em;					/*12.5 - padding*/
			}

.sublinks a:hover, .sublinks a:active, .sublinks a:focus {
			margin-right:0.063em;
			background:#803680;
			color:#fff;
			}

.sublinks:hover a {						/*opera fix*/
			margin-right:0.063em;
			}

a.main:focus + div .sublinks a, a.main:active + div .sublinks a {		/*valid browser tab+hover fix*/
			margin-right:0;
			}

.shifter {
			width:0.063em;
			}

.sublinks .bgthing {
			width:12.5em;
			}

.content {
			clear:both;
			}

a.main span {							/*this nullifies the masks effects*/
			position:absolute;
			right:0;
			top:0;
			line-height:0;
			}
			
a.main span i {							/*the mask*/
			display:block;
			position:absolute;
			width:12.5em;
			background:#97bf0d;			/*must be bg color for masking*/
			height:2em;
			top:0;
			right:auto;
			}

.hidehotspot {
			position:relative;
			float:left;
			background:red;
			height:2em;
			z-index:10;
			}
				
.hidehotspot b {
			position:absolute;
			background:#97bf0d;
			height: 100%;
			width:2px;
			display:block;
			}


/*ie5 fault for not supporting paddings on links*/

.sublinks a b {
			font-weight:normal;
			position:relative;
			padding-left:.5em;
			display:block;
			}

/*valid browser height fix*/

.link > a.main:hover,
.link > a.main:active,
.link > a.main:focus {
			margin-bottom:0;
			}
			
.link > a.main:hover + div .sublinks a,
.link > a.main:active + div .sublinks a,
.link > a.main:focus + div .sublinks a {
			margin-right:0.063em;
			}

/* ENDE valid browser height fix*/

/*////////// ENDE CSS NAVIGATION //////////*/