@charset "utf-8";
/* CSS Document */

html {
	font-family: sans-serif;
	font-size:100%;
/*	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
*/	height:100%;
}

:root
{font-size:16px;
}

body {
	margin: 0;
	background: url("images/hg-kachel.gif") repeat #fff;
	height:100%;
	font-family: 'Droid Sans', sans-serif;
		font-size:100%;

	color:white;
	}
	
article,
figure,
footer,
header,
nav,
section {
	display: block;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

img {
	border: 0;
}
#page
{
	max-width:950px;
	max-width:59.375rem;
margin:0 auto;
background:  url("images/hg-page.gif") repeat #646464;
	min-height:100%;
 height: auto !important;
 position:relative;
 
 -webkit-box-shadow: 0 2px 2px 2px rgba(0,0,0,0.5);
box-shadow: 0 2px 2px 2px rgba(0,0,0,0.5);
 }

header {  
padding: 240px 0 0 155px;
padding: 15rem 0 0 9.6875rem;

  margin-bottom:65px;
  margin-bottom:4.0625rem;
}

header.home{
    background: rgba(0, 0, 0, 0) url("images/blase-gehts.png") no-repeat scroll 87% top;
	}

header.aboutme{  
  background: rgba(0, 0, 0, 0) url("images/blase-kaffee.png") no-repeat scroll 87% top;
	}
	
header.lessons{  
  background: rgba(0, 0, 0, 0) url("images/blase-gott.png") no-repeat scroll 87% top;
	}
	

header.takeplace{  
  background: rgba(0, 0, 0, 0) url("images/blase-tag.png") no-repeat scroll 87% top;
	}
	
header.contact{  
  background: rgba(0, 0, 0, 0) url("images/blase-claudia.png") no-repeat scroll 87% top;
	}
	
header h1
{margin:0;
padding:0;
font-size:29px;
font-size:1.8rem;
text-transform:uppercase;
font-weight:400;
}

header h2
{margin:0;
padding:0;
font-size:25px;
font-size:1.6rem;
font-weight:400;
}

#navigation img
{float:left;
}

nav
{float:right;
margin-right:90px;
padding-top:5px;
margin-right:5.625rem;
padding-top:0.3125rem;
}

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

nav li
{
margin-bottom:3px;
margin-bottom:0.1875rem;
padding: 10px 0 10px 50px;
padding: 0.625rem 0 0.625rem 3.125rem;

}

nav li:nth-child(1){
	background:url(images/h.png) no-repeat top left;
	}

nav li:nth-child(2){
	background:url(images/a.png) no-repeat top left;
	}

nav li:nth-child(3){
	background:url(images/w.png) no-repeat top left;
	}

nav li:nth-child(4){
	background:url(images/t.png) no-repeat top left;
	}

nav li:nth-child(5){
	background:url(images/c.png) no-repeat top left;
	}
	
	nav li:nth-child(6){
	background:url(images/p.png) no-repeat top left;
	}

nav a
{
color:white;
text-decoration:none;
font-size:18px;
font-size:1.125rem;
font-weight:400;
-webkit-tap-highlight-color: rgba(221,75,70,.6);
}

nav a:hover, nav a:active
{
color:#e51414; /*#c42924*/
text-decoration:none;
}

a.current
{
color:#e51414; 
text-decoration:none;
}

article a
{color:white;
text-decoration:none;
}

article a:hover
{color:white;
text-decoration:none;
border-bottom:1px dotted white;
}

#clearing
{
clear:both;
}

article
{
	margin: 0 63px 87px 360px;
		margin: 0 3.9375rem 5.4375rem 22.5rem;
font-size:18px;
font-size:1.15rem;
	font-weight:400;
}

article.folgeseite
{
	margin: 0 63px 87px 63px;
		margin: 0 3.9375rem 5.4375rem 3.9375rem;
	}


article h1{
	font-style:normal;
	text-transform:uppercase;
	font-size:22px;
	font-size:1.4rem;
	font-weight:400;
	}
	
	article h2
	{	font-style:normal;
	font-size:22px;
	font-size:1.4rem;
	font-weight:700;
	}
	
		article h3
	{	font-style:normal;
	font-size:22px;
	font-size:1.4rem;
	font-weight:400;
	font-style:italic;
	}

	
#minheight
	{
		height:215px;
		height:13.4375rem;
	}
	
footer
{
	background:url("images/buchstabensalat.png") no-repeat top center;
    bottom: 0 !important;
    margin: 0;
    max-width: 950px;
    max-width: 59.375rem;
height:215px;
		height:13.4375rem;
position: absolute;
    width: 100%;
	}



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

article.startarticle
{margin: 0 7% 87px 7%;
margin: 0 7% 5.4375rem 7%;
}
}

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

nav.startnav{
	margin-right:3%;
	}
	nav.folgenav
	{
		margin-right:90px;
		margin-right:5.625rem;
}
header
{
	padding:240px 7% 0 7%;
	padding:15rem 7% 0 7%;
}
}

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

	#navigation img, nav {float:none;
}

nav, article
{margin: 0 7%;
}



/*neu*/
nav.startnav{
	margin-right:0;
	}
nav.folgenav
	{
		margin-right:0;		
}




header
{
	margin-bottom:35px;
	margin-bottom:2.1875rem;
}

article, article.folgeseite

{
	margin-top:35px;
	margin-top:2.1875rem;

}
}	

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

footer {
/*	background-size: 80% auto;
*/	    background-size: contain;
    width: 80%;
	margin:0 10%;
    height: 0;
/*    padding-top: 41.25%; *//* (img-height / img-width * container-width) */
                /* (198 / 480 * 100) */
	padding-top:38%;
}

#minheight
	{
		    height: 0;
 /*   padding-top: 41.25%;*/ /* (img-height / img-width * container-width) */
                /* (198 / 480 * 100) */				
	padding-top:45%;

	}
	
article.folgeseite, article.startarticle
{
	margin:0 7%;
	}


}

@media only screen and (max-width: 500px)
{
	
	#page header{background-size: 70%;}
	
	#page header
	{
		    /*height: 0;*/
			/*Der BG verkleinert sich mit dem 70%. Damit sich der Abstand zwischen Sprechblasen und HEadline auch verkleinert padding mit Prozent*/
	padding-top:48%;
	}

}



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

header h1
{
font-size:29px;
font-size:1.8rem;
}

header h2
{font-size:21px;
font-size:1.3rem;
}
}

@media only screen and (max-width: 240px)
{
html 
{font-size:80%;
}
}

/*iphone retina display */
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 
 body {
	background: url("images/hg-kachel-2x.gif") repeat #fff;
background-size: 128px 224px;	}

 #page
{
background:  url("images/hg-page-2x.gif") repeat #646464;
background-size: 420px 326px; }
 
 header.home{
  background: rgba(0, 0, 0, 0) url("images/blase-gehts-2x.png") no-repeat scroll 87% top;
background-size: 365px 199px;	}

header.aboutme{  
  background: rgba(0, 0, 0, 0) url("images/blase-kaffee-2x.png") no-repeat scroll 87% top;
background-size: 365px 199px;	}
	
header.lessons{  
  background: rgba(0, 0, 0, 0) url("images/blase-gott-2x.png") no-repeat scroll 87% top;
background-size: 365px 199px;	}
	

header.takeplace{  
  background: rgba(0, 0, 0, 0) url("images/blase-tag-2x.png") no-repeat scroll 87% top;
background-size: 365px 199px;	}
	
header.contact{  
  background: rgba(0, 0, 0, 0) url("images/blase-claudia-2x.png") no-repeat scroll 87% top;
background-size: 365px 199px;	}
	
footer
{
	background:url("images/buchstabensalat-2x.png") no-repeat top center;
background-size: 480px 198px;
	}



}