@charset "utf-8";
body {overflow: hidden}
#topmenu { float: left }
#topmenu a { display: inline-block; color: #ccc; opacity:0.3; padding: 2em 2em 1em 0em }
#top { position: absolute; left: 0; right: 0; z-index: 3; background: rgba(0,0,0,0.80); padding: 1em 3em }
#logo { float: right }
#logo img { max-height: 40px; max-width: 50vw; margin: 1em 0 }
p { margin: 0 0 1.5em 0 }
a, a:hover, a:focus { color: #fff; text-decoration: none }
a, .el *, .st0, #menu, #menu svg * { display: inline-block; text-decoration: none; transition: all 1s ease; }
html { height: 100% }
/*body { padding: 0; margin: 0; font-family: Arial, 'Open Sans', sans-serif; font-size: 14px; overflow: hidden; height: 100% }*/
h1 { color: #fff; font-size: 2.4em; font-weight: 700; text-transform: uppercase; position: relative; margin-bottom: 1.5em }
h1 span { font-size: 100px; /* position: absolute; */ top: 0; top: 23px; left: 0; display: inline-block; height: 0; margin: -100px 10px -100px 0; position: relative; }
h2 { margin: 0; padding: 1.5em 15px 0.5em 0; font-size: 37px; font-weight: 400; position: relative; line-height: 1em; }
h2 span { display: inline-block; color: #d8d8d8; font-size: 58px; position: relative; top: 0; top: 10px; margin: -100px 20px -100px 0 }
.inner {padding-left: 18px; overflow: hidden; display: none; padding-bottom: 1em; }
.toggle { font-weight: 700; display: block; padding: 0.5em 0; cursor: pointer;position: relative; padding-left: 18px }
.toggle:before { content: '\f054'; font-family: 'icomoon' !important; display: inline-block; padding-right: 0.5em;  position:absolute; top: 7px;
    left: 0 }
.toggleall { display: inline-block; float: right; font-size: 18px; cursor: pointer; margin: 0 }
.white { border-radius: 15px; overflow: hidden; background: #fff; margin-bottom: 3em; color: #000; border-radius: 15px }
.white a { color: #000 }
.white h2 { background: #ededed; color: #000; padding: 0.5em 15px 0.5em 40px; margin-right: -15px; }
.white ul li { padding: 0.5em 0; }
.white ul li >a { font-size: 18px; font-weight: 700 }
.white img { max-width: 100%;height: auto}
.row-eq-height > div { min-height: 445px; }
.row-eq-height > .col-sm-8 .content { column-count: 2; column-gap: 38px; }
.content { padding: 3em 5em 3em 43px; font-size: 13px; }
.fullimg { min-height: 400px; position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: 3; background-position: center center; background-size: cover; }
#spinner { padding: 1em; font-size: 30px; float: left; }
#wrap { height: 100vh; width: 100vw; overflow: hidden; position: absolute }
#anima { position: absolute; width: 100vw; height: 100vh; }
.page { z-index: 100; position: absolute; width: 100vw; height: 100vh; background: rgba(0,0,0,0.80); color: rgba(255,255,255,0.90); display: none; opacity: 0; }
#swipe { display: none; position: absolute; padding: 1em; background: rgba(0,0,0,0.80); left: 0; right: 0; text-align: center; color: #fff; font-size: 18px; z-index: 100000 }
#swipe span { font-size: 40px; }
.touch #swipe { display: block }
.page .content { margin: 2em; overflow-y: auto; max-height: 70vh; }
#hg2 { position: relative; width: 100vw; height: 100vh; }
#hg1 { position: relative; bottom: 0; left: 0; right: 0; top: 0; z-index: 3; }
#right { position: absolute; right: -2vw }
#left { position: absolute; left: -2vw }
#left, #right { height: 100vh; max-width: 10vw }
#mainimg { position: absolute; top: 0; min-width: 100vw }
#mainimg > img { min-width: 110vw; height: 110vh; margin-top: -5vh }
#preloader { position: absolute; z-index: 100001; width: 100%; height: 100%; background: #fff }
.loader-wrapper { position: absolute; left: 50%; top: 50%; width: 300px; margin: -50px 0 0 -150px; font-size: 24px; color: #666 }
#loader-progress { height: 8px; background: #ccc }
.loader div { display: inline-block }
.el { transition: all 0s ease; padding: 30px; position: absolute; left: 15.568%; top: 30%; z-index: 1; color: #fff; transform-style: preserve-3d; }
.el .icon { transform: translateZ(15px); font-size: 24px; display: block; position: absolute; left: 50%; top: 50%; margin: -31px; opacity: 0.9; padding: 20px; z-index: 10 }
.el .name { transform-origin: left bottom 0px; bottom: 69px; position: absolute; display: block; transform: rotate(-90deg); left: 38px; background: rgba(0, 0, 0, 0.5); padding: 5px; border-radius: 5px; /* min-width: 109px; */ display: block; white-space: nowrap; }
.el .icon:hover ~ .name { transform: rotate(0deg); bottom: 25%; left: 159%; }
.icon:before { display: block; transition: all 1s ease; }
.el .icon:hover:before { transform: rotate3d(0, 360, 0, 360deg); }
.el:before { filter: blur(2px); }
.el::before { background: rgba(255,255,255,0.10) }
.el::before, .el::after { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border: 2px solid rgba(255,255,255,0.50); border-radius: 50%; content: ''; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; transform: translateX(-50%) translateY(-50%) scale(1) translateZ(7px); }
.el::after { border: 4px solid rgba(255,255,255,0.30); -webkit-transform: translateX(-50%) translateY(-50%) scale(1.3); -moz-transform: translateX(-50%) translateY(-50%) scale(1.3); transform: translateX(-50%) translateY(-50%) scale(1.3) }
h3 { margin: 0; padding: 0 }
.el:hover::before { transform: translateX(-50%) translateY(-50%) scale(1.8); background: rgba(255,255,255,0.30); border: 1px solid rgba(255,255,255,0.90); filter: blur(0px); }
.el:hover::after { transform: translateX(-50%) translateY(-50%) scale(2); }
.el-contents { position: fixed }
.el:active::after, .el:focus::after { animation: ring2 500ms; }
.el:active::before, .el:focus::before { animation: ring1 500ms; }
.elcontent { background: rgba(0,0,0,0.80); border-radius: 30px; color: #fff; width: 400px; max-width: 100vw; display: none; position: fixed; left: 0; top: 0; z-index: 10; }
.padding { padding: 2em }
.close { background: #000; position: absolute; right: 30px; top: 30px; color: #fff; font-size: 18px; z-index: 10; border: 2px solid #fff; border-radius: 100px; padding: 7px; line-height: 0; width: 37px; text-align: center; height: 37px; }
#content { width: 100%; padding: 0; position: absolute; bottom: 0; right: 0; left: 0; top: 0; z-index: 10000; }
#ajaxcontent { width: 100%; padding: 0; position: absolute; bottom: 0; right: 0; left: 0; top: 0; z-index: 10000; }
#ajaxcontent .wrap { width: 100%; padding: 3em; overflow-y: auto; max-width: 1920px; margin: 0 auto; height: 100%; }
.fulliframe { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100% }
#menu { position: absolute; bottom: 0px; left: 50%; z-index: 1000; height: 150px; width: 800px; max-width: 100vw; margin-left: -400px; }
#submenuwrap { position: absolute; top: 0; width: 100%; }
#submenu { bottom: 0; padding-bottom: 2em; text-align: center; position: absolute; display: none }
#submenu a { transform: initial !important; transition: all 0s ease; transform-style: preserve-3d; display: inline-block; margin: 10px; padding: 8px 20px; background: rgba(0,0,0,0.80); border: 2px solid #fff; border-radius: 15px; font-size: 18px; }
#menu:hover { bottom: 30px }
#submenu .close { top: -50px; border-radius: 100px; padding: 7px; }
.menu-el .st0 { fill: rgba(0,0,0,0.60); stroke: rgba(255,255,255,1); stroke-width: 3; stroke-miterlimit: 10; display: block }
.menu-el { transform-style: preserve-3d; }
.menu-el:hover { cursor: pointer }
.menu-el:hover .st0 { fill: rgba(255,255,255,0.80); stroke: rgba(255,255,255,0.99); stroke-width: 3; stroke-miterlimit: 10; }
.menu-el .text { fill: rgba(255,255,255,0.80) }
.menu-el:hover .text { fill: rgba(0,0,0,0.80) }
.menu-el .st1 { fill: 255, 255, 255, 0.80); }
.menu-el:hover .st1 { fill: rgba(0,0,0,0.80); }
#trees { position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: 0; }
.touch #trees { overflow: hidden; }
#trees img { transform: scale(1.2); position: absolute; max-height: 100%; max-width: 100%; height: auto; width: auto; background: greens; }
#trees .left { top: 0; left: 0; margin-left: -3% }
#trees .right { top: 0; right: 0; margin-right: -3% }
#trees .top { top: 0; left: 50%; margin-left: -600px; width: 1200px; margin-top: -3% }
#trees .bottom { bottom: 0; left: 50%; margin-left: -600px; width: 1200px; - margin-bottom: -5%
}
#lights { overflow: hidden; position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: 0; }
#lights img { position: absolute; border: 0px solid red; top: 50%; left: 50% }
#lights #l1 { top: 39.7%; left: 40.5%; height: 1.1vh; }
#lights #l2 { top: 22.3%; left: 41.7%; height: 5.1vh; }
#lights #l3 { top: 51.8%; left: 41.3%; height: 1.3vh; }
#lights #l4 { top: 59.5%; left: 47.95%; height: 2.4vh; }
#content_unterstuetzer a { display: inline-block; transition: all 0s ease; transform-style: preserve-3d; margin: 10px; padding: 8px 20px; background: rgba(0,0,0,0.80); border: 2px solid #fff; border-radius: 15px; font-size: 18px; }



 @keyframes ring1 {
 50% {
transform: translateX(-50%) translateY(-50%) scale(2);
}
}
 @keyframes ring2 {
 50% {
transform: translateX(-50%) translateY(-50%) scale(1.2);
}
}
#el1 { left: 10%; top: 60%; }
#el2 { left: 20%; top: 50%; }
#el3 { left: 25%; top: 40%; }
#el4 { left: 30%; top: 60%; }
#el5 { left: 35%; top: 40%; }
#el6 { left: 38%; top: 49%; }
#el7 { left: 44%; top: 49%; }
#el8 { left: 46%; top: 40%; }
#el9 { left: 50%; top: 35%; }
#el10 { left: 55%; top: 44%; }
#el11 { left: 60%; top: 50%; }
#el12 { left: 65%; top: 40%; }
#el13 { left: 70%; top: 30%; }
#el14 { left: 75%; top: 40%; }
#el15 { left: 80%; top: 60%; }
#el16 { left: 85%; top: 30%; }
#el17 { left: 90%; top: 60%; }
.touch #anima { overflow: scroll; }

@media only screen and (max-width: 1440px) {
#ajaxcontent > div.wrap > div > div.col-md-7.col-sm-12.col-xs-12 > div > img { width:100%; }
}

@media only screen and (max-width: 1290px) {
#menu { left: 15vw; bottom: -10vw; height: auto; width: 70vw; margin-left: 0; }
#menu:hover { bottom: -5vw; }
.touch #anima { overflow: scroll; }
#trees img { transform: scale(0.9); }
#trees .top { top: 0; left: 50%; margin-left: -350px; width: 700px; margin-top: -3% }
#trees .bottom { bottom: 0; left: 50%; margin-left: -350px; width: 700px; margin-bottom: -5% }
}

@media only screen and (max-width: 800px) {
#content_unterstuetzer a, .toggleall { font-size: 14px }
h1 span { font-size: 30px; position: static; margin: 0 5px 0 0 }
h1 { font-size: 23px; margin-right: 47px; }
h2 { font-size: 23px; }
.row-eq-height > .col-sm-8 .content { column-count: 1; column-gap: 0; }
.row-eq-height { display: block; }
.content { padding: 1em; font-size: 13px; }
.white h2 { padding: 0.5em; }
h2 span { font-size: 36px; }
#menu { left: 0vw; bottom: -12vw; height: auto; width: 100vw; margin-left: 0; }
#menu:hover { bottom: -5vw; }
#logo img { max-height: 20px; }
#top { background: rgba(0,0,0,0.80); padding: 1em 1em; }
#topmenu a, #submenu a { padding: 0.8em 0.5em; font-size: 14px }
#ajaxcontent .wrap { padding: 1em; }
.close { right: 15px; top: 15px; }
.PM1.col-sm-7 img{ width:80%; }
.PM1.col-sm-5 { width:100%; }
}
@media only screen and (max-width: 485px) {
 #Bildnachweis { margin-left:0px; }
 #topmenu a { display:block; padding-bottom:0px; font-size:12px; }
 #pm1.col-xs-12 img { width:480px !important; }
}
 @keyframes pageIn {
 0% {
 opacity: 0;
 transform: translateZ(-1800px) rotateY(-180deg) rotateX(-180deg);
}
 100% {
 opacity: 1;
 transform: translateZ(0px) rotateY(-360deg) rotateX(-360deg);;
}
}
 @keyframes pageOut {
0% {
 opacity: 1;
 transform: translateZ(0px) rotateY(-360deg) rotateX(-360deg);
}
 99% {
 opacity: 0;
transform: translateZ(-1800px) rotateY(-180deg) rotateX-(180deg);
}
 100% {
 display:none
}
}
 @keyframes rotating {
 from {
 transform: rotate(0deg);
}
 to {
 transform: rotate(360deg);
}
}
.rotating { transform-origin: center center; display: block; -webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -ms-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; }