/* CSS Document */

@font-face {font-family:'Open Sans';font-style: normal;font-weight: 400;src: url("https://fonts.filavision.de/open-sans-300.woff2") format("woff2"),url("https://fonts.filavision.de/open-sans-300.woff") format("woff"),url("https://fonts.filavision.de/open-sans-300.ttf") format("truetype");}
@font-face {font-family:'Oswald';font-style: normal;font-weight: 400;src: url("https://fonts.filavision.de/oswald-700.woff2") format("woff2"),url("https://fonts.filavision.de/oswald-700.woff") format("woff"),url("https://fonts.filavision.de/oswald-700.ttf") format("truetype");}

body{margin:0px;font-family:'Open Sans',sans-serif;background:#007733;font-size:18px;color:#333}

h1,h2{font-size:1.6em;color:#007733;font-family:'Oswald',sans-serif;}
h3{font-size:1em;}
a{text-decoration:none;color:#333}
a:hover{text-decoration:underline}

.wrapper{width:100%;max-width:980px;margin:0px auto 0px auto;position:relative}
.clear{clear:both}

#header{background:url(../img/bg-holz1.jpg);background-size:cover;position:relative;border-top:1px solid transparent}
#header .clear{margin-bottom:20px}
#logo{margin:20px 0px 20px 0px;box-shadow:0px 0px 10px #000;height:180px}
#menu{margin:0px;padding:0px;list-style:none;}
#menu li{float:left;padding:0px 20px 0px 0px}
#menu a{font-family:'Oswald',sans-serif;color:#eee;font-size:1.5em;text-shadow:0px 0px 10px #000;text-decoration:none;}
#menu a:hover,#menu a.aa{color:#007733;text-shadow:0px 0px 10px #fff;}
#peppermuellers{position:absolute;right:0px;bottom:0px;z-index:100;}

#main{box-shadow:0px 0px 20px #000;border-top:1px solid #fff;position:relative;z-index:100;background:#fff;padding:20px 0px 0px 0px}
#bildleistehome img{width:243px;border-left:1px solid #fff;border-right:1px solid #fff}
#leistungenul{width:30%;float:left;margin:0px}
#bildleisteleistungen{width:65%;float:right;}
#leistungenul{padding:0px 0px 0px 28px;margin:0px}
#leistungenul li{font-size:1.4em;color:#007733;font-family:'Oswald',sans-serif;}
#bildleisteleistungen img{width:300px;height:200px;float:right;border-left:1px solid #fff;border-right:1px solid #fff;padding-top:2px}
.adresse{width:45%;float:left}
.telefon{width:45%;float:right;text-align:right}
#impressumlinks{min-width:300px;max-width:400px;float:left}
#impressumrechts{min-width:300px;max-width:400px;float:right}

#footer{height:300px;position:relative;font-family:'Oswald',sans-serif;color:#66cc99;}
.footerdiv{float:left;padding:20px 50px 0px 0px}
#footer a{color:#66cc99;}

@media screen and (max-width:1000px){
.wrapper{width:95%}
#bildleisteleistungen{width:65%;}
}

@media screen and (max-width:975px){
#bildleisteleistungen{width:300px;}
}

@media screen and (max-width:880px){
#impressumlinks,#impressumrechts{min-width:100%px;max-width:100%;float:none}
}

@media screen and (max-width:600px){
#leistungenul{width:100%;float:none;margin:0px 0px 20px 0px}
#bildleisteleistungen{width:100%;float:none}
#bildleisteleistungen img{width:100%;float:none}
}

@media screen and (max-width:820px){
#header{height:auto;border-bottom:1px solid #fff}
#menu{width:50%}
#peppermuellers{right:-30px}
}

@media screen and (max-width:450px){
#peppermuellers{width:70%}
#bildleistehome img{width:100%}
}

@media screen and (max-width:360px){
#logo{width:100%;height:100%;}
#bildleistehome img{width:100%}
}