@font-face {
    font-family: 'Cursors';
    src: url('../fonts/Cursors-webfont.ttf');
    
}

* {
	 margin: 0;
	 padding: 0;
	 font-family: Arial;
	 font-size: 14px;
    
}

body {
    overflow-y: scroll;
    background-image: url("../img/bubble.jpg");
    width: 100%;
    height: auto;
}


body, html {
    width: 100%;
    height: auto;
	
}
.wrapper  {
	margin:auto;
	width: 100%;
	height:auto;
    overflow: hidden;
}
.weiss {
    background-color: #ffffff;
}

h1 {
    font-size: 20px;
    line-height:25px;
    color:#F9B100;
    margin-left: 5px;
    letter-spacing: 1px;
    }

h2 {
    font-size: 16px;
    line-height: 20px;
    color:#F9B100;
    letter-spacing: 1px;
    margin-left: 5px;
}
h3  {
    font-size: 15px;
    line-height: 20px;
    color:#F9B100;
    letter-spacing: 1px;
    margin-left: 5px;
}
p {
    color: #333333;
    }
.klick {
    font-family: Cursors;
    font-size: 25px;
}



header {
	list-style-type: none;
    text-decoration: none;
    width: 100%;
    max-width: 1250px;
    height: 80px;
    position: fixed;
    background-color: #ffffff;
    box-shadow:2px 2px 3px #83d0f5;
	
}
header img {
	display: block;
    margin-left: 2px;
   
}

header div p{
    display: none;
  
}

figure {
    float: left;   
}

/* Navigation*/

        /*button */
.button{
	height:50px;
	width:50px;
	background-size:100%;
	margin:10px;
	float:right;
}
.open{
	background-image:url(../img/menu.png);
}

.close{
	display:none;
	background-image:url(../img/menu2.png);
}
/*
.switch{
	height:50px;
	width:50px;
	background-size:100%;
	margin:10px;
	background-image:url(../img/switch.png);
	float:right;
}
*/
    /*nav*/


ul#Navigation {
    width: auto;
    margin: 15px;
    text-align: right;
    clear:both;
	display:none;
    z-index: 1;
    position: relative;
    background-color: #ffffff;
    border-style: solid;
    border-color:#83d0f5;  
}
ul#Navigation li {
    list-style: none;
   	margin: 0px 2px;
    font-size: 14px;
   
}  
ul#Navigation a, ul#Navigation span {
   color: #333333; 
    text-decoration: none; 
    
}
  * html ul#Navigation a, * html ul#Navigation span {
    width: 2px;    /* nur fuer IE 5.0x erforderlich */
    width: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
}
ul#Navigation a:hover, ul#Navigation span {
    color: #F9B100;
  
}
/* ENDE Navigation*/




.banner img{
    width:100%;
   float:none;
    height: auto;
 
   z-index: -2;
    position: relative;
    margin-top: 85px;
}

object {
  display:none;
  }

article img {
    width: 100%;
    height: auto;
    

}
article, address {
    padding: 40px 2px;
   
    
}

article p {
    padding: 10px 20px 10px 10px;
    
    line-height: 16px;
}




section article ul li {
   list-style: none;
   color: #333333;
}

.sortiment ul{
    list-style:none;
   
}

.sortiment ul li, .sortiment li { display:block; max-width:550px; height:auto; background-color:#83d0f5; border:5px solid #F9B100; padding:10px;
  }
.sortiment ul li:hover, .sortiment li:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
  -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
  transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

 .Bild130L { /*  = Bild 130 Links*/
	box-shadow: 5px 10px 35px #83d0f5;
	
	width:200px;
	height:200px;
    
	
}
  .Center .Preisliste ul {
    margin-top: 20px;
    
    }  
    .Center .Preisliste p {
    
    font-size: 20px;
    background-color: #83d0f5;
    }
    



/* Über Wasser */
/* zurücksetzen*/
.accordion {
    padding-bottom: 100px;
}
.accordion,.accordion h2,.accordion a,.accordion img,.accordion span,.accordion em,.accordion ul,.accordion li {
    margin: 0;
    padding: 0;
    border: none;
}

.accordion div, .accordion p   {
    margin: 10px 2px 0 0;

}
.mensch   {
    margin: 10px 20px 0 20px;

}

.accordion .tab {
    display: block;
    height: 35px;
    margin-top: 4px;
    padding-left: 20px;
   
    font: bold 16px/35px Arial, sans-serif;
    text-decoration: none;
   /* color: #eee; */
    color:#F9B100;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
 
    background: #020281;
   }
.accordion .tab:hover,
.accordion article:target .tab {
    color:  #020281;
    background: #F9B100;
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
    box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
}

.accordion div .content {
    display: none;
    margin: 5px 0;
}
 
.accordion article:target .content {
    display: block;
}
.accordion article:last-child {
    margin-bottom: 10px;

}
.accordion > article {
    height: 2px;
    overflow: hidden;
 
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.klick {

padding-right: 5px;
}
 
.accordion > article:target {
    height: auto;
}

     /* Über Wasser- Wasseranalyse*/



    /* ENDE- Wasseranalyse*/
    /* Über Wasser- Bestandteiletabelle*/
.analyse {
	margin:0px;padding:0px;
	max-width:340px;
	box-shadow: 10px 10px 5px #888888;
	
	
	-moz-border-radius-bottomleft:15px;
	-webkit-border-bottom-left-radius:15px;
	border-bottom-left-radius:15px;
	
	-moz-border-radius-bottomright:15px;
	-webkit-border-bottom-right-radius:15px;
	border-bottom-right-radius:15px;
	
	-moz-border-radius-topright:15px;
	-webkit-border-top-right-radius:15px;
	border-top-right-radius:15px;
	
	-moz-border-radius-topleft:15px;
	-webkit-border-top-left-radius:15px;
	border-top-left-radius:15px;
}


.analyse {
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.analyse tr:last-child td:last-child {
	-moz-border-radius-bottomright:15px;
	-webkit-border-bottom-right-radius:15px;
	border-bottom-right-radius:15px;
}
.analyse  tr:first-child td:first-child {
	-moz-border-radius-topleft:15px;
	-webkit-border-top-left-radius:15px;
	border-top-left-radius:15px;
}
.analyse  tr:first-child td:last-child {
	-moz-border-radius-topright:15px;
	-webkit-border-top-right-radius:15px;
	border-top-right-radius:15px;
}.analyse tr:last-child td:first-child{
	-moz-border-radius-bottomleft:15px;
	-webkit-border-bottom-left-radius:15px;
	border-bottom-left-radius:15px;
}.analyse tr:hover td{
	
}
.analyse tr:nth-child(odd){ background-color:#aad4ff; }
.analyse tr:nth-child(even)    { background-color:#ffffff; }.analyse td{
	vertical-align:middle;
	
	
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:12px;
	font-family:Arial;
	font-weight:normal;
	color:#4c4c4c;
}.analyse tr:last-child td{
	border-width:0px 1px 0px 0px;
}.analyse tr td:last-child{
	border-width:0px 0px 1px 0px;
}.analyse tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.analyse tr:first-child td{
	
	background-color:#005fbf;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.analyse tr:first-child:hover td{
	background-color:#005fbf;
}
.analyse tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.analyse tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}

.analyse tr td:last-child {
    text-align: right;
}
         /* ENDE Bestandteiletabelle*/
/* ENDE   Über Wasser */



#kontakt input {
    background-color: #83d0f5;
}
#kontakt textarea {
    background-color: #83d0f5;
}

#kontakt table, #kontakt ul {
    margin-left: 5px;
}



/* Footer */
footer {
	height:auto;
	background-color:#020281;
	position: fixed;
    bottom:0px;
    width: 100%;
    max-width: 1250px;
    text-align: center;
    color:#ffffff;
    
}

footer div {
  padding-top: 6px;

}
footer a {
	color:#ffffff;
    text-decoration: none;
    
}




/* ENDE Footer */

/*tablet___________________________________________________*/

@media only screen and (min-width:560px) {
    
nav {
    max-width: 550px;
    float: right;
    }
nav div {
    display:none;
    }
ul#Navigation {
    display: block;
    text-align: right;
    border-style: none;    
    }
ul#Navigation li {
    list-style: none;
    display: inline;
	margin: 0px 10px;
    }
ul#Navigation a, ul#Navigation span {
    text-decoration: none; 
    }
ul#Navigation a:hover, ul#Navigation span {
    color: #F9B100;
    }    
article img {
    display:block;
    height: auto;
    width: 100%;
    float:left;
    overflow: auto;
    margin-right: 10px;
    }
article {
    padding-left: 10px;
    padding-right: 10px;
    clear:both;
    }
section article div {
    float:left;
    width:99%;
    height: auto;
    overflow: hidden;
    padding: 10px;
    margin-bottom: 30px;
    }   
section article div p{
    padding-left: 5px;
    }  
section {
    padding-bottom: 33px;
    }  
     .spalte .spalte60 {
         width: 90%;
       
    }
       .spalte .spalt30 {
        max-width: 90%;
        
    
    }
    
footer  {
    clear:both;
    }
   
}
    
/* Desktop ________________________________________*/
    

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

   .wrapper  {
	margin:auto;
	 max-width: 1250px;
	height:auto;
       
	
}
  
    .rahmen {
        border-left:  #83d0f5 5px ridge;
    
    }
 .spalte .spalt45 {
        width: 45%;
        float:left;
    
    }


    .spalte .spalt {
        width: 30%;
        float:left;
    
    }
    
/* Sortiment*/
    .spalte .spalt30 {
        max-width: 30%;
       float: right;
    
    }
    
  
    .spalte .spalte60 {
         width: 60%;
       
    }
    .content {
          overflow: hidden;
        }
        
  
    
/* CENTER ANFANG*/
.Center { /* Center */	
	float: left;
	overflow: hidden;
   
}
  


.Center .Preisliste,  {
    width: auto;
	border-bottom-style: dotted;
	border-bottom-width: 3px;
	border-color:#a6a6a6;
    ;
	/* last-child: */
   
}
  

/* .Bild130L .bild{ /*  = Bild 130 Links*/
	
	float:left;
	width:300px;
	height:300px; */
	
}
 img.Bild130L:hover {
    /* display:inherit;*/
     overflow: visible;
   margin-top: 100px;
     margin-left: 100px;
     z-index:5;
     cursor: zoom-in; 
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(2.0, 2.0);
 -moz-transform: scale(2.0, 2.0);
 -webkit-transform: scale(2.0, 2.0);
 -o-transform: scale(2.0, 2.0);
 -ms-transform: scale(2.0, 2.0); 
    /* width:300px;
	height:300px;
     */
     
        
    }
    .Center .Preisliste p {
    
    font-size: 20px;
    background-color: #83d0f5;
    }
    
  
}