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


/*@media only screen and (min-width:319px) and (max-width:849px)*/

*{
margin: 0px;
padding: 0px;
border: none;
}

body
{font-family: Opensans, Verdana, Geneva, sans-serif;
font-size: 12px;
line-height:190%;
word-spacing: 2px;
}

a
{font-weight: bold;
text-decoration: none;
color:white;
}

a:hover
{color: #CCC;
}

@font-face {
    font-family: 'luna';
	src: url('font/luna.woff')  format('woff'),
	     url('font/luna.woff2') format('woff2');
	font-style: normal;
}

/* ................ logo .................. */




img.logo
{display: block;
width:270px;
hight:150px;
margin: 0px auto 25px auto;
padding-top:30px;
}


img.winterpause
{display: block;
width:340px;
hight:230px;
margin: 50px auto 35px auto;
padding-bottom:30px;
}

img.versand
{display: block;
width:252px;
hight:288px;
margin: 36px auto 30px auto;
padding-bottom:30px;
}

/* .................... navi ..................... */

nav
{float:left;
background-color: black;
width: 100%;
min-height: 32px;
max-height: 72px;
color: white;
z-index:1;
}

nav li
{display:inline;
font-size: 13px;
line-height:160%;
padding:12px 12px;
}
nav ul
{padding:5px;
text-align: center;
}


/* ................ start pic  gross .................. */




.bonbon-gross      
{
width:318px;
height:214px;
margin: 66px auto 0px auto;
background-image:url(pic/sauer-medium.jpg);
background-repeat:no-repeat;

}



.bonbon-gross-impressum 
{
width:318px;
height:223px;
margin: 40px auto 0px auto;
background-image:url(pic/impress-medium.jpg);
background-repeat:no-repeat;

}




/* ................ start text .................. */

.wrapper2
{width: 100%;
height:auto;
text-align: center;
}

p
{font-size:14px;
line-height:180%;
}

.topping              /*  überschrift  */
{font-size:25px; 
font-weight: bold;
line-height:320%;
padding: 9px 0px 9px -5px;
}


.eins
{
margin:120px 35px 0 35px;
}

.eins img
{width:160px;
height:auto;
}

.zwei
{
margin:90px 35px 0 35px;
}
  
.zwei img
{width:210px;
height:auto;
}

.drei
{
margin:90px 35px 0 35px;
}

.drei img
{width:140px;
height:auto;
}
 
.vier
{
margin:120px 35px 0 35px;
}

.vier img
{width:230px;
height:auto;
}

.fuenf
{
margin:79px 50px 0 50px;
}

.fuenf img
{width:230px;
height:auto;
}

.sechs
{
margin:100px 50px 90px 50px;
}
 



/* ................  sortiment  .......................... */


.wrapper3              
{width: 100%;
height:auto;
margin: 30px auto 90px auto;
text-align: center;
line-height:250%;
}



.leckergarantie
{font-family: luna, opensans, sans;
text-align: center;
font-size: 37px;
margin-top: 100px;
}


.topping2              /*  überschrift  */
{display:block;
font-family: luna, opensans, sans;
text-align: center;
font-size:19px; 
line-height:190%;
margin-top: 12px;
display:block;
width: auto;
heigth: 70px;
}



.sauerscharf
{width: 390px;
height: auto;
margin:120px auto 0 auto;
}

.sauerscharf img
{width:230px;
height:auto;
}

.mischung
{width: 390px;
height: auto;
margin:120px auto 0 auto;
}

.mischung img
{width:270px;
height:auto;
}

.karamalak
{width: 390px;
height: auto;
margin:100px auto 0 auto;
}

.karamalak img
{width:230px;
height:auto;
margin:41px auto 0 auto;
}

.honigheil
{width: 390px;
height: auto;
margin:111px auto 0 auto;
}

.honigheil img
{width:230px;
height:auto;
}

.pdf
{width: 370px;
height: auto;
margin:115px auto 0 auto;
}

.pdf img
{width:190px;
height:auto;
margin:21px auto 0 auto;
}

.pdf a 
{color:black;
}

.seidenglanz
{width: 390px;
height: auto;
margin:140px auto 0 auto;
}

.seidenglanz img
{width:270px;
height:auto;
}



/* ................  herstellung  .......................... */


.herstellung-text
{height:auto;
width:500px;
line-height:230%;
font-size:15px;
margin:100px auto 120px auto;
text-align:center;
}

.herstellung-zutaten
{text-align:center;
width:480px;
height:160px;
margin:23px auto 0 auto;
background-image:url(pic/make/zutaten1.jpg);
background-repeat:no-repeat;	
}

.herstellung-walzen
{text-align:center;
width:480px;
height:160px;
margin:23px auto 0 auto;
background-image:url(pic/make/walzen1.jpg);
background-repeat:no-repeat;	
}

.herstellung-maschine
{
width:480px;
height:160px;
margin:23px auto 0 auto;
background-image:url(pic/make/maschine1.jpg);
background-repeat:no-repeat;	
}

.herstellung-pic2
{height:auto;
width:680px;
margin:5px auto 5px auto;
}

.pic2-d
{float: left;
width:180px;
height:180px;
padding:0px 21px 21px 21px;
margin: 41px auto 0px auto;
}

.tuete
{display: block;
width:210px;
hight:353px;
margin: 0px auto 25px auto;
}




/* ............................  geschichte ....................... */

table
{width:	100%;
height: auto;
margin: 150px auto 150px auto;
border-spacing: 5px;
}


.vlin
{background-image: linear-gradient(#063 50%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 3px 16px;
background-repeat: repeat-y;
padding: 0 1px 0 1px;
}

.hlin-left
{width:48px;
background-image: linear-gradient(to right, #063 50%, rgba(255,255,255,0) 0%);
background-position:5px 25px;
background-size: 16px 3px;
background-repeat: repeat-x;
}

.hlin-left2
{width:48px;
background-image: linear-gradient(to right, #063 50%, rgba(255,255,255,0) 0%);
background-position:5px 130px;
background-size: 16px 3px;
background-repeat: repeat-x;
}

.hlin-right
{width:48px;
background-image: linear-gradient(to right, #063 50%, rgba(255,255,255,0) 0%);
background-position:5px 147px;
background-size: 16px 3px;
background-repeat: repeat-x;
}

.one
{text-align:left;
width:100%;
height: auto;
}

.one img
{display:block;
padding-top:100px;
padding-left:70px;
padding-bottom:120px;
}

.two
{text-align:right;
}

.two img
{display:block;
padding-top:60px;
padding-right:70px;
padding-bottom:100px;
}

.three
{text-align:left;
}

.three img
{display:block;
padding-top:150px;
padding-left:70px;
padding-bottom:50px;
}

.four
{text-align:right;
}

.four img
{display:block;
padding-top:160px;
padding-right:70px;
padding-bottom:100px;
}

.five
{text-align:left;
}

.five img
{display:block;
padding-top:170px;
padding-left:70px;
padding-bottom:50px;
}

.six
{text-align:right;
}

.six img
{display:block;
padding-top:110px;
padding-right:70px;
padding-bottom:100px;
}

.seven
{text-align:left;
height:400px;}

h2 
{font-family: luna, opensans, sans;
font-size: 18px;
line-height:230%;
}

p
{margin-top: 10px;
}

/* ............................  download unterseite ....................... */




.dl-logw
{float: left;
width: 100%;
height: 170px;
margin:101px auto 70px auto;
}

.dl-logp
{float: left;
width: 100%;
height: 170px;
margin:21px auto 70px auto;
}

.dl-mischsauerw
{float: left;
width: 100%;
height: 170px;
margin:70px auto 70px auto;
}

.dl-mischsauerp
{float: left;
width: 100%;
height: 170px;
margin:70px auto 70px auto;
}

.dl-mischlilaw
{float: left;
width: 100%;
height: 170px;
margin:111px auto 70px auto;
}

.dl-mischlilap
{float: left;
width: 100%;
height: 170px;
margin:111px auto 70px auto;
}

.dl-misch-vintagew
{float: left;
width: 100%;
height: 170px;
margin:111px auto 70px auto;
}

.dl-misch-vintagep
{float: left;
width: 100%;
height: 170px;
margin:111px auto 70px auto;
}

.dl-hkw
{float: left;
width: 100%;
height: 170px;
margin:111px auto 70px auto;
}

.dl-hkp
{float: left;
width: 100%;
height: 170px;
margin:111px auto 170px auto;

}




/* ............................  impressum text ....................... */


h3
{font-size:15px;
font-weight:bold;
}

.text-impressum
{width:250px;
height:auto;
margin:70px auto 30px auto;
text-align:center;
}




/* ............................ footer ....................... */


footer
{clear:left;
width: 100%;
height:320px;
background-color: black;
padding:14px;
} 

.prime
{font-weight:bold;
font-size:15px;
}

.address ul
{margin: 10px;
text-align: center;
font-size:12px;
list-style-type:none;
letter-spacing: 0.03em;
color:white;
line-height:180%;
}