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

*{ 	overflow-x:hidden;}

html{
	font-size:10px;
	font-family:'Philosopher', sans-serif;
	}
	
img{
	width:100%;
	height:auto;
	display:block;}
	
h1{ font-family:'Philosopher', sans-serif;
	font-size:3.4rem;
	font-weight:400;
	line-height:3.8rem;
	overflow:hidden;
	text-rendering:optimizeLegibility;
	display:block;
	text-align: center;
	}

h2{ font-family:'Philosopher', sans-serif;
	font-size:2.2rem;
	font-weight:700;
	line-height:2.5rem;
	overflow:hidden;
	text-rendering:optimizeLegibility;
	display:inline;
	}

h3{ font-family:'Philosopher', sans-serif;
	font-size:1.6rem;
	font-weight:700;
	line-height:2.5rem;
	overflow:hidden;
	text-rendering:optimizeLegibility;
	display:inline;
	}

p, nav, header, section, .theaser {font-family:'Philosopher', sans-serif;
	font-size:1.6rem;
	font-weight:400;
	line-height:2.2rem;
	padding-top:0.5em;
	padding-bottom:0.8em;
	overflow:hidden;
	text-rendering:optimizeLegibility;
	}


.linkStyle {text-decoration:none;}
.linkStyle_on {text-decoration:none; color: #FFFFFF; }

body {
	background-color: #fff;	}

div {background-color: #ffe9d1; }

#fond {width: 100%;
	height:auto;
	max-width: 1600px;
	background-color: #ffe9d1;
	margin-left:auto;
	margin-right:  auto;
	position: relative;
	}

nav a {text-decoration: none;
	color:#333333;
	}

#navi { width:20em;
	height:7.5em;
	min-height: 7.5em;
	overflow:hidden;
	margin-left:5%;
	}
nav li {float:none; padding-left:0.5em; padding-right:0.5em; }

#logosippe {width: 15em;
	float: right;
	margin-top: 0.5em;
	margin-left: 75%;
	position: absolute;
	}

header {width: 100%;
	max-width: 1600px;
	height: 40vh;
	max-height: 450px;
	background-size:cover;
	border-bottom: 0.5rem solid #FFF;
	margin-bottom: 2em;
	}

#angebot {width: 100%;
	max-width: 1600px;
	height: 20vh;
	max-height: 225px;
	background-size:cover;
	border-bottom: 0.5rem solid #FFF;
	margin-bottom: 2em;
	background-image: url(images/startbild.jpg); background-position: center;
	}

#entree{background-image: url("images/entree.jpg"); background-position: center;min-height:30vh; }
#start{background-image: url(images/startbild.jpg); background-position: center;min-height:30vh;}
#sippe{background-image: url(images/sippebild.jpg);background-position: center;min-height:30vh;}
#selbst{background-image: url(images/selbstbild.jpg);background-position: center;min-height:30vh;}
#kontext{background-image: url(images/kontextbild.jpg);background-position: top c;min-height:30vh;}
#galerie{background-image: url(images/galeriebild.jpg);background-position: center;min-height:30vh;}
#satzung{background-image: url(images/satzungbild.jpg);background-position: center;min-height:30vh;}

#logo{width:70%;  max-width: 40em; margin:0 auto 3em auto;}

.subline {width: 92%; text-align: center; margin: 0 auto 0 auto;}
.schmuckbild {width: 8em; margin: 2em auto 0 auto; max-width: 70%;}
.schmuckbild_kl {width: 5em; margin: 2em auto 0 auto;}
.schmuckbild_gr {width: 20em; margin: 1em auto 0 auto;}
.rot {color: #4c0d0d; font-weight: 700; }
.line {width: 100%; height: 10px; border-bottom: 0.2rem solid #FFF;}
.withoutline {width: 100%; height: 10px;}
.vignette {margin: 2em auto 0 auto; max-width: 70%;}
.center {text-align: center;}
.deko1 {width: 100%;
	max-width: 1600px;
	height: 26px;
	background-image: url(images/dekor1.gif);
	background-repeat: repeat-x;
	margin-bottom: 5em;}

.deko1_kl {width: 100%;
	max-width: 1600px;
	height: 13px;
	background-image: url(images/dekor1_kl.gif);
	background-repeat: repeat-x;
    margin-bottom: 5em;}

section {width: 100%;
	max-width: 1600px;
	margin-left:auto;
	margin-right:  auto;
	position: relative;
	margin-bottom: 2em;}


article {height: auto;
	min-height: 30px;
	padding: 10px;
	float: none;
	}
aside {padding: 10px;}

aside img {max-width:300px;}

.theaser {width:100%;
	max-width: 18em;
	height: auto;
	margin: 0 auto 0 auto;
	padding: 0.5em;
	float: none;
	color: #000;
	text-align: left;
	}

.einer, .zweier {}
#art {width: 100%; }

.artleft {width: 100%;
	float: left;}
.artright {width: 100%;
	float: right;}
.artcenter {width: 100%;}

#left, #center, #right  {width: 100%;}
#center {background-color: #ECA741;}
#right, .as50_b  {background-color:#F2C27C;}

#first, #second, #third, #last  {width: 100%;}

#second  {background-color:#F2C27C;}
#third {background-color: #ECA741;}
#last  {background-color:#F2C27C;}

.alinks {width: 100%;
	height: 10vh;
	float: none;
	background-color: #EC0FCF;}

.arechts {width: 100%;
	height: auto;
	float: none;
	}

.as50 {width: 100%;}	
.as70 {width: 100%;}	
.as80 {width: 100%;}

footer {width: 100%;
	max-width: 1600px;
	height: auto;
	background-color:#EAD3A7;
	margin-left:auto;
	margin-right:  auto;
	margin-bottom: 0.5rem; 
	padding: 10px;
	position: relative;}
footer a {color: #4c0d0d; font-weight: 400; 
	}
footer li {padding-right: 2em;}



@media screen and (min-width:480px){

#navi { width:20em;
	height:7.5em;
	min-height: 7.5em;
	overflow:hidden;
	margin-left:5%;
	}
	
.artleft {width: 50%;
	float: left;}
.artright {width: 50%;
	float: right;}
.artcenter {margin: 0;}	
}

@media screen and (min-width:680px){

.theaser {width:30%;
	max-width: 16em;
	height: auto;
	margin: 0 auto 0 auto;
	float: left;
	}
	
.arechts {width: 30%;
	height: auto;
	float: right;
	}
	
.as70 {width: 70%;}

    
    
}

@media screen and (min-width:1100px){
	
	
nav li {float:left; margin-top: 2em; }
	nav ul {text-align: center;}

#navi { width:50em;
	height:7.5em;
	min-height: 7.5em;
	overflow:hidden;
	margin-left:5%;
	}
	
.arechts {width: 30%;
	height: auto;
	float: right;
	}
	
.as70 {width: 50%;
	margin-left: 10em; }
	
.artleft {width: 35%;
	float: left;
	margin-left: 10em;}
.artright {width: 35%;
	float: right;
	margin-right: 10em;}
.artcenter {margin-left: 10em; margin-right: 10em;}	
	
}