html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

table {border-collapse: collapse; border-spacing: 0; }

body {background: #050f19; color: #333; font: 16px Arial, Helvetica, sans-serif;}

h1 {font: bold 1.5em Arial, Helvetica, sans-serif;}
h2 {font: bold 1.25em Arial, Helvetica, sans-serif;}
p {font-size: 0.75em; line-height: 1.5em;}
ul {list-style: none;}

.klar {clear: left;}

a, a:active, a:visited {color: #00b4e5; text-decoration: none; font-weight: bold;}
a:hover {text-decoration: underline;}

#hg {width: 100%; height: 900px; overflow: visible; clear: left; background: transparent url(bilder/hg.jpg) top center no-repeat;}
#hg.start {background: transparent url(bilder/hg-start.jpg) top center no-repeat;}
#hg.neutral {background: transparent url(bilder/hg-neutral.jpg) top center no-repeat;}
#hg.erlebnispaedagogik {background: transparent url(bilder/hg-erlebnispaedagogik.jpg) top center no-repeat;}
#hg.outdoortraining {background: transparent url(bilder/hg-outdoortraining.jpg) top center no-repeat;}
#hg.azubitraining {background: transparent url(bilder/hg-outdoortraining.jpg) top center no-repeat;}
#hg.event {background: transparent url(bilder/hg-event.jpg) top center no-repeat;}
#hg.portrait {background: transparent url(bilder/hg-portrait.jpg) top center no-repeat;}

#box {width: 100%; overflow: visible; margin-top: -900px; height: 900px;}

#oben {margin: 0 auto; padding: 1em 0 0 0; width: 96%; max-width: 60em;}
#oben a {text-transform: uppercase; font-size: 0.75em; color: #fff; padding: 0.2em 0 0.2em 2em; margin: 0 0 0 1em;}
#oben a.seite {background: transparent url(bilder/icon-sitemap.png) left no-repeat;}
#oben a.start {background: transparent url(bilder/icon-start.png) left no-repeat;}

#logo {margin: 0 auto; padding: 0.5em 0 1.5em 0; width: 100%; text-align: right;}

#transparent {margin: 0 auto; width: 100%; max-width: 60em;}
#transparent.diashow {max-width: 50em;}

#navi {float: left; width: 11.5em;}
#navi ul {padding: 0.5em 1.25em 1em 1.25em; background: transparent url(bilder/hg-menu.png); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
#navi ul li {margin: 0.5em 0; }
#navi ul li.abstand {margin: 0 0 2em 0;}
#navi ul a {color: #fff; text-transform: uppercase; font-size: 0.75em;}
#navi ul a:hover {text-decoration: underline;}
#navi ul a.facebook {background: transparent url(bilder/icon-facebook.png) left no-repeat; padding: 0.25em 0 0.25em 2.5em;}
#navi ul a.kontakt {background: transparent url(bilder/icon-kontakt.png) left no-repeat; padding: 0.25em 0 0.25em 2.5em;}
#navi ul a.sub {color: #0cf; font-size: 0.75em;}
#navi p {color: #fff; font-size: 0.75em; text-transform: uppercase; font-weight: bold; line-height: 1em; font-size: 0.875em; }
#navi p.telefon {padding: 0.5em 0 0.5em 2.5em; background: url(bilder/icon-telefon.png) left no-repeat; font-size: 0.75em; line-height: 0.75em; color: #fff;}

#inhalt {margin: 0 0 5em 15em; background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}

#titel {margin: 0 0 0 15em;}
#titel h1 {font-size: 1em; color: #00b4e5; text-transform: uppercase; margin: 0.5em 0 1.5em 0;}
#titel h1 span {background: #00b4e5; color: #fff; padding: 0.3em 0.5em;}
#titel h2 {color: #fff; font-size: 2.5em;}

#intro {margin: 20em 0 0 15em;}
#intro h1 {color: #00b4e5; font-size: 1em; text-transform: uppercase; padding: 0 0 0.5em 0;}
#intro h1 span {background: #00b4e5; color: #fff; padding: 0.3em 0.5em;}
#intro h2 {font-size: 2.5em; color: #fff; padding: 0.5em 0;}
#intro p {color: #fff; font-size: 1em; font-weight: bold; padding: 0 0 1em 0;}

.blau {margin: 0 auto; background: #00b4e5; padding: 1.5em; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px;}
.blau h1 {font-size: 1em; color: #000; text-transform: uppercase; padding: 0 0 0.5em 0;}
.blau h2 {font-size: 2em; color: #fff; padding: 0 0 0.25em 0;}
.blau p {color: #fff; padding: 0; font-size: 1em; }

.text {margin: 0 auto; padding: 1.5em 1.5em 0.5em 1.5em;}
.text h1 {font-size: 1.25em; padding: 0 0 0.5em 0;}
.text h2 {font-size: 0.875em; padding: 0.5em 0;}
.text h3 {font-size: 1em; padding: 0 0 1em 0;}
.text p {line-height: 1.5em; padding: 0 0 1em 0;}
.text ul {list-style-position: inside; list-style-type: disc; padding: 0 0 1em 0.5em;}
.text ul li {line-height: 1.5em; color: #333; font-size: 0.75em;}

.links {float: left; width: 47%; margin: 0 6% 1em 0;}
.rechts {float: left; width: 47%;}

.bild {width: 100%;}
.zoom {width: 100%;}

#slideshow {position: relative; height: 400px;}
#slideshow IMG {position:absolute; top: 0; left: 0; z-index: 8; opacity: 0.0; width: 100%;}
#slideshow IMG.active {z-index: 10; opacity: 1.0;}
#slideshow IMG.last-active { z-index: 9;}

#mobil {visibility: hidden; height: 0.03em; overflow: hidden;}

/* QUERIES ------------------ */

@media only screen and (max-width: 700px), (max-device-width: 700px) {

.links {float: none; width: 100%; margin: 0;}
.rechts {float: none; width: 100%;}

}

@media only screen and (max-width: 480px), (max-device-width: 480px) {

body {background: #fff;}

#oben, #logo, #box, #navi, .blau, #inhalt, #intro, .text, .links, .rechts {display: none;}

#hg {height: 16em; background: #fff; background: transparent url(bilder/mobil-start.jpg) top center no-repeat;}
#hg.start, #hg.portrait {background: transparent url(bilder/mobil-start.jpg) top center no-repeat;}
#hg.erlebnispaedagogik {background: transparent url(bilder/mobil-erlebnispaedagogik.jpg) top center no-repeat;}
#hg.outdoortraining {background: transparent url(bilder/mobil-outdoortraining.jpg) top center no-repeat;}
#hg.event {background: transparent url(bilder/mobil-event.jpg) top center no-repeat;}

#mobil {visibility: visible; overflow: visible; width: 100%; margin-top: -15.5em; height: 15.5em; background: transparent url(bilder/mobil-natur-impulse.png) top center no-repeat; text-align: right;}
#mobil a.start {float: left;}
#mobil a.kontakt {float: right;}
#mobil ul {clear: left; padding: 8.5em 0 0 0; text-align: center;}
#mobil ul li {display: inline; float: left; width: 32%; margin: 0 2% 0 0; text-align: center; background: transparent url(bilder/mobil-menu.png) bottom repeat-x;}
#mobil ul li:hover {background: #050f19;}
#mobil ul li:last-child {margin: 0;}
#mobil ul li a, #mobil ul li a:hover {display: block; padding: 0.75em 0; line-height: 1em; font-size: 1em; color: #fff; text-align: center; text-decoration: none;}
#mobil h1 {clear: left; color: #fff; background: #00b4e5; font-size: 1.75em; text-align: left; padding: 0.5em 0.675em;}
#mobil h2 {font-size: 1em; text-align: left; padding: 1.25em 1em 0 1em; clear: left; }
#mobil h3 {color: #fff; background: #00b4e5; font-size: 1em; text-align: left; padding: 1em 1.25em;}
#mobil p {font-size: 0.875em; text-align: left; padding: 0.25em 1.25em;}
#mobil img.mob {float: left; padding: 1em 1em 0.5em 1em;}
}