/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/Roboto-Thin.woff');
  src: local('Roboto Thin'), local('Roboto-Thin'),
       url('fonts/Roboto-Thin.woff') format('woff'), 
       url('fonts/Roboto-Thin.ttf') format('truetype'); 
}


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/roboto-v18-latin-100.eot');
  src: local('Roboto Light'), local('Roboto-Light'),
       url('fonts/roboto-v18-latin-100.eot?#iefix') format('embedded-opentype'), 
       url('fonts/roboto-v18-latin-100.woff2') format('woff2'), 
       url('fonts/roboto-v18-latin-100.woff') format('woff'), 
       url('fonts/roboto-v18-latin-100.ttf') format('truetype'), 
       url('fonts/roboto-v18-latin-100.svg#Roboto') format('svg'); 
}


/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/roboto-v18-latin-300italic.eot');
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
       url('fonts/roboto-v18-latin-300italic.eot?#iefix') format('embedded-opentype'), 
       url('fonts/roboto-v18-latin-300italic.woff2') format('woff2'), 
       url('fonts/roboto-v18-latin-300italic.woff') format('woff'), 
       url('fonts/roboto-v18-latin-300italic.ttf') format('truetype'), 
       url('fonts/roboto-v18-latin-300italic.svg#Roboto') format('svg'); 
}

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v18-latin-300.eot');
  src: local('Roboto Light'), local('Roboto-Light'),
       url('fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), 
       url('fonts/roboto-v18-latin-300.woff2') format('woff2'), 
       url('fonts/roboto-v18-latin-300.woff') format('woff'), 
       url('fonts/roboto-v18-latin-300.ttf') format('truetype'), 
       url('fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); 
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v18-latin-regular.eot');
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), 
       url('fonts/roboto-v18-latin-regular.woff2') format('woff2'), 
       url('fonts/roboto-v18-latin-regular.woff') format('woff'), 
       url('fonts/roboto-v18-latin-regular.ttf') format('truetype'), 
       url('fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); 
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/roboto-v18-latin-italic.eot');
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('fonts/roboto-v18-latin-italic.eot?#iefix') format('embedded-opentype'), 
       url('fonts/roboto-v18-latin-italic.woff2') format('woff2'), 
       url('fonts/roboto-v18-latin-italic.woff') format('woff'), 
       url('fonts/roboto-v18-latin-italic.ttf') format('truetype'), 
       url('fonts/roboto-v18-latin-italic.svg#Roboto') format('svg'); 
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v18-latin-700.eot');
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), 
       url('fonts/roboto-v18-latin-700.woff2') format('woff2'), 
       url('fonts/roboto-v18-latin-700.woff') format('woff'), 
       url('fonts/roboto-v18-latin-700.ttf') format('truetype'), 
       url('fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); 
}

html, body{
margin: 0px; 
padding: 0px; 
font-family: 'Roboto', Segoe, Helvetica, Arial, Verdana, Sans, Lucida;
font-weight: 100;
font-size: 1.0vw; 
}

#nav{
position: fixed; 
bottom: 0px; 
right: 0px; 
width: 90%; 
padding: 0px 9% 0px 1%; 
background-color: #F7931D; 
margin: 0px; 
z-index: 10; 
display: table; 
table-layout: fixed; 
}
#nav span{
display: table-cell; 
margin-left: calc(2% - 24px); 
margin-right: calc(2% - 24px); 
color: #000000; 
text-align: center; 
margin-top: 10px;  
margin-bottom: 10px;  
padding: 10px 10px 10px 10px; 
float: left; 
width: 30px; 
height: 30px; 
line-height: 30px; 
font-weight: 400; 
background-color: #FFFFFF; 
border: 5px solid #CA6600; 
border-radius: 50px; 
transition: all 0.8s ease-in-out;
font-size: 1.2em;
opacity: 0.8; 
}
#nav span:hover, #nav span:focus{
background-color: #333333; 
color: #FFFFFF; 
cursor: zoom-in;
}

#logo{
position: fixed; 
bottom: 100px; 
left: 40%; 
width:20%; 
height: auto; 
max-height: 170px; 
padding: 0px; 
margin: 0px; 
border: 0px solid #FFFFFF; 
}
#logo img{
max-width: 100%; 
height: auto; 
}

#gesamt{
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
transition: all 1.5s ease-in-out;
position: fixed; 
left: 0%; top: 0%;
z-index: 1; 
}



#eins, #zwei, #drei, #vier, #fuenf, #sechs, #sieben, #acht, #neun, #zehn, #elf, #zwoelf, #dreizehn, #vierzehn, #fuenfzehn, #sechzehn, #siebzehn, #achzehn, #neunzehn, #zwanzig{
background-color: #F4F4F4;
border: 4px solid #000000; 
border-radius: 15px; 
width: calc(85% - 8px); 
height: calc(80% - 150px); 
padding: 2%; 
margin: 2% 5% 5% 5%; 
opacity: 0.0; 
transition: all 3.5s ease-in-out;
background-position: center center;
background-repeat: no-repeat;
background-size: cover; 
background-color: #CCCCCC; 
font-size: 2.0em; 
font-weight: 400;
text-shadow: 0px 0px 5px rgba(0,0,0,0.95); 
color: #FFFFFF; 
-webkit-box-shadow: 0px 0px 60px 15px #D0D0D0; 
box-shadow: 0px 0px 60px 15px #D0D0D0;
position: absolute; 
}

#eins{left: 300%; top: 300%; background-image: url("images/kawe-rodrigues-jKmdjT7aQJA-unsplash.jpg");}
#zwei{left: 100%; top: 300%;background-image: url("images/luana-azevedo-2X0Set_oSh8-unsplash-scaled.jpg");}
#drei{left: 300%; top: 500%;background-image: url("images/marea-wellness-HIugtasuIOA-unsplash.jpg");}
#vier{left: 100%; top: 500%;background-image: url("images/ben-wicks-iDCtsz-INHI-unsplash-1-2048x1365.jpg");}
#fuenf{left: 300%; top: 100%;background-image: url("images/janko-ferlic-zHJ4ph3GRyg-unsplash.jpg");}
#sechs{left: 300%; top: 400%; background-position: bottom center;background-image: url("images/hannah-busing-Zyx1bK9mqmA-unsplash.jpg");}
#sieben{left: 400%; top: 200%;background-image: url("images/pawan-thapa-hynxiq1NP0E-unsplash.jpg");}
#acht{left: 200%; top: 300%;background-image: url("images/robert-collins-tvc5imO5pXk-unsplash.jpg");}
#neun{left: 300%; top: 100%;background-image: url("images/amr-taha-aNwGNIAi7Kk-unsplash.jpg");}
#zehn{left: 100%; top: 100%;background-image: url("images/ana-curcan-nqemvntMQpU-unsplash.jpg");}
#elf{left: 400%; top: 400%;background-image: url("images/sincerely-media-kSeo6slWMQE-unsplash.jpg");}
/*#zwoelf{left: 200%; top: 100%;background-image: url("images/xxxxxxxxxxx.jpg");}
#dreizehn{left: 200%; top: 100%;background-image: url("images/xxxxxxxxxxxxx.jpg");}
#vierzehn{left: 200%; top: 300%;background-position: top center;background-image: url("images/xxxxxxxxxxxxxxxxx.jpg");}
#fuenfzehn{left: 100%; top: 200%;background-image: url("images/xxxxxxxxxxxxxxxxx.jpg");}
#sechzehn{left: 200%; top: 500%;background-image: url("images/xxxxxxxxxxxxxxxxxx.jpg");}
#siebzehn{left: 100%; top: 400%;background-image: url("images/xxxxxxxxxxxxxxxxx.jpg");}
#achzehn{left: 400%; top: 200%;background-image: url("images/xxxxxxxxxxxxxxxxx.jpg");}
#neunzehn{left: 400%; top: 100%;background-image: url("images/xxxxxxxxxxxxxxxxx.jpg");}
#zwanzig{left: 400%; top: 500%;background-image: url("images/xxxxxxxxxxxxxxxxx.jpg");}*/

#gesamt.eins{ left: -300%; top: -300%; }
#gesamt.zwei{left: -100%; top: -300%;}
#gesamt.drei{left: -300%; top: -500%;}
#gesamt.vier{left: -100%; top: -500%;}
#gesamt.fuenf{ left: -300%; top: -100%; }
#gesamt.sechs{ left: -300%; top: -400%; }
#gesamt.sieben{left: -400%; top: -200%; }
#gesamt.acht{left: -200%; top: -300%;}
#gesamt.neun{left: -300%; top: -100%;}
#gesamt.zehn{left: -100%; top: -100%;}
#gesamt.elf{left: -400%; top: -400%;}
#gesamt.zwoelf{left: -200%; top: -100%;}
#gesamt.dreizehn{ left: -200%; top: -100%; }
#gesamt.vierzehn{ left: -200%; top: -300%; }
#gesamt.fuenfzehn{left: -100%; top: -200%;}
#gesamt.sechzehn{left: -200%; top: -500%;}
#gesamt.siebzehn{left: -100%; top: -400%;}
#gesamt.achzehn{ left: -400%; top: -200%; }
#gesamt.neunzehn{left: -400%; top: -100%;}
#gesamt.zwanzig{left: -400%; top: -500%;}





#eins a, #zwei a, #drei a, #vier a, #fuenf a, #sechs a, #sieben a, #acht a, #neun a, #zehn a, #elf a, #zwoelf a, #dreizehn a, #vierzehn a, #fuenfzehn a, #sechzehn a, #siebzehn a, #achzehn a, #neunzehn a, #zwanzig a{
color: #FFFFFF; 
text-decoration: none; 
}

#eins.aktiv,#zwei.aktiv, #drei.aktiv, #vier.aktiv, #fuenf.aktiv, #sechs.aktiv, #sieben.aktiv, #acht.aktiv, #neun.aktiv, #zehn.aktiv, #elf.aktiv, #zwoelf.aktiv, #dreizehn.aktiv, #vierzehn.aktiv, #fuenfzehn.aktiv, #sechzehn.aktiv, #siebzehn.aktiv, #achzehn.aktiv, #neunzehn.aktiv, #zwanzig.aktiv {
opacity: 1.0; 
}
#einsa.aktiv,#zweia.aktiv, #dreia.aktiv, #viera.aktiv, #fuenfa.aktiv, #sechsa.aktiv, #siebena.aktiv, #achta.aktiv, #neuna.aktiv, #zehna.aktiv, #elfa.aktiv, #zwoelfa.aktiv, #dreizehna.aktiv, #vierzehna.aktiv, #fuenfzehna.aktiv, #sechzehna.aktiv, #siebzehna.aktiv, #achzehna.aktiv, #neunzehna.aktiv, #zwanziga.aktiv{
background-color: #333333; 
color: #FFFFFF; 
}
.mailus{
border: 1px solid #FFFFFF; 
border-radius: 100px; 
padding: 10px 30px 10px 30px; 
margin: 30px 0px 20px 0px; 
font-size:0.9em; 
background-image: url("images/sys/black80.png"); 
background-repeat: repeat; 
text-align: center; 
width: calc(100% - 62px); 
display: block; 
}
.mailus:hover, .mailus:focus{
background-image: url("images/sys/black95.png"); 
}

.back{
width: 20%; 
float: left; 
text-align: left;
position: absolute; 
left: 2%; 
top: 5%; 
}
.vor{
width: 20%; 
float: right; 
text-align: right;
position: absolute; 
right: 2%; 
top: 5%; 
}

a#sofortlink{
text-decoration: none; 
position: fixed; 
top: 15px; 
right: 3%; 
opacity: 0.8;
padding: 50px 10px 50px 10px;
float: left;
width: 120px;
height: 40px;
line-height: 20px;
font-weight: 400;
border-radius: 100px;
border: 5px solid #CA6600; 
background-color: #FFFFFF;
transition: all 0.8s ease-in-out;
z-index: 1000; 
font-size: 1.2em;
color: #000000;
text-align: center;
transform: rotate(-368deg);
}
a#sofortlink b{font-size: 1.5em;}
a#sofortlink:hover, a#sofortlink:focus {
transform: rotate(0deg);
opacity: 1.0;
}

h1{
text-transform: uppercase; 
padding: 5px; 
margin: 0px; 
}

.text1{opacity: 0.0; transition: all 0.5s ease-in-out; }
.text1.on{opacity: 0.9; }
.text2{opacity: 0.0; transition: all 0.5s ease-in-out;}
.text2.on{opacity: 1.0; }
.text3{opacity: 0.0; transition: all 0.5s ease-in-out;}
.text3.on{opacity: 0.8; }
.text4{opacity: 0.0; transition: all 0.5s ease-in-out;}
.text4.on{opacity: 0.85; }
.textklein{opacity: 0.0; transition: all 0.5s ease-in-out;}
.textklein.mittel{opacity: 0.0; transition: all 0.5s ease-in-out;}
.textklein.kleiner{opacity: 0.0; transition: all 0.5s ease-in-out; }
.textklein.on{opacity: 0.95; }

.list1{opacity: 0.0; transition: all 0.5s ease-in-out; padding: 0px 0px 0px 30px; display: inline-block; position: relative;}
.list2{opacity: 0.0; transition: all 0.8s ease-in-out; padding: 0px 0px 0px 30px; display: inline-block; position: relative;}
.list3{opacity: 0.0; transition: all 1.0s ease-in-out; padding: 0px 0px 0px 30px; display: inline-block; position: relative;}
.list4{opacity: 0.0; transition: all 0.5s ease-in-out; padding: 0px 0px 0px 30px; display: inline-block; position: relative;}
.list1.on{opacity: 0.85; }
.list2.on{opacity: 1.0; }
.list3.on{opacity: 0.8; }
.list4.on{opacity: 0.9; }
.list1.on b, .list2.on b, .list3.on b, .list4.on b{position: relative; left: -30px; }


.text.sehrgross{font-size: 1.8em;}
.text.mittelgross{font-size: 1.5em;}
.text.mittel{font-size: 1.2em;}
.text.normal{font-size: 1.0em;}
.text.normalklein{font-size: 0.8em;}
.text.klein{font-size: 0.6em;}
.text.sehrklein{font-size: 0.4em;}

#controls{
position: fixed; 
bottom: 10px; 
right: 1%; 
border: 5px solid #FFFFFF; 
border-radius: 100px; 
width: 30px;
height: 30px; 
z-index: 150; 
background-color: #000000; 
padding: 10px 10px 10px 10px; 
}
#controls div#play, #controls div#stop{
position: absolute; 
top: 15px; 
left: 15px; 
}
#play, #stop{
opacity: 0.0; 
}
#play.visible, #stop.visible{
opacity: 1.0; 
z-index: 155; 
}


#info{
width: 4%; 
min-width: 50px; 
height: 0%; 
overflow: hidden; 
position: fixed; 
left: -1px; 
top: -1px; 
margin: 0px; 
padding: 20px 10px 20px 10px; 
background-color: #FFFFFF; 
opacity: 0.8; 
font-size: 1.0em; 
border-radius: 0px 40px 40px 0px; 
/*background-image: url("images/sys/close.png"); 
background-repeat: no-repeat;
background-position: right 10px top 10px;  */
border: 1px solid #999999; 
transition: all 1.0s ease-in-out; 
}
#info .infotext{
opacity: 0.0; 
transition: all 3.0s ease-in-out;
display: inline-block; 
padding: 0px 10px 20px 10px; 
margin: 30px 0px 0px 0px; 
}

#info.aktiv{
left: -1px; 
width: 25%; 
height: 0%; 
padding: 20px 20px 20px 20px; 
}
#info.aktiv.infoheight{
height: 100%;
overflow: visible;
opacity: 0.95; 
border-radius: 0px 0px 0px 0px; 
}

#info.aktiv.infoheight .infotext{
opacity: 1.0; 
}
#info .close{
position: absolute; 
right: 10px; 
top: 7px; 
transition: all 1.0s ease-in-out;
padding: 0px; 
margin: 0px; 
z-index: 100; 
font-size: 0.9em; 
line-height: 0px; 
}
#info .close img{transform: rotate(-45deg); border: 1px solid #999999; 
border-radius: 50px; float: right; }
#info .close.aktiv img{transform: rotate(0deg); }
#info .close.aktiv{
right: 20px; 
top: 20px; 
}
#info .closetxt{float: right; font-size: 0.9em; 
line-height: 25px; padding: 0px 5px 0px 0px; }
#info.aktiv.infoheight .closetxt{
display: none; 
}
#info a{
text-decoration: none; 
color: #000000; 
font-weight: 400; 
}
#info a:hover, #info a:focus{
text-decoration: underline; 
}

#mindmap{
width: 200px; 
height: auto;  
border-radius: 200px; 
font-size: 0.8em; 
position: fixed; 
bottom: 100px; 
left: 2%; 
padding: 0px; 
margin: 0px 0% 0px 0%; 
opacity: 0.0; 
border: 0px solid #999999; 
/*background-color: #F5F5F5; */
text-align: center; 
transition: all 1.0s ease-in-out;
}
#mindmap.aktiv{
opacity: 0.6; 
}


#mindmap span{
width: calc(25% - 16px);
height: calc(20% - 16px); 
float: left; 
border: 1px solid #999999; 
border-radius: 3px; 
text-align: center; 
padding: 0px; 
margin: 8px 8px 0px 0px; 
background-color: #FFFFFF;
}
#mindmap span:hover, #mindmap span:focus{
cursor: crosshair;
}



.eins #mindmap .eins, .zwei #mindmap .zwei, .drei #mindmap .drei, .vier #mindmap .vier, .fuenf #mindmap .fuenf, .sechs #mindmap .sechs, .sieben #mindmap .sieben, .acht #mindmap .acht, .neun #mindmap .neun, .zehn #mindmap .zehn, .elf #mindmap .elf, .zwoelf #mindmap .zwoelf, .dreizehn #mindmap .dreizehn, .vierzehn #mindmap .vierzehn, .fuenfzehn #mindmap .fuenfzehn, .sechzehn #mindmap .sechzehn, .siebzehn #mindmap .siebzehn, .achzehn #mindmap .achzehn, .neunzehn #mindmap .neunzehn, .zwanzig #mindmap .zwanzig{background-color: #CCCCCC; }

/*NICHT BENOETIGTE ELEMENTE AUSBLENDEN*/
/*#sieben, span.sieben ,#acht, span.acht, #neun, span.neun, #zehn, span.zehn, #elf, span.elf, */

#zwoelf, #dreizehn, #vierzehn, #fuenfzehn, #sechzehn, #siebzehn, #achzehn, #neunzehn, #zwanzig, span.zwoelf, span.dreizehn, span.vierzehn, span.fuenfzehn, span.sechzehn, span.siebzehn, span.achzehn, span.neunzehn, span.zwanzig{opacity: 0.0 !important;}

/*NAVIGATION UNTEN*/
/*#siebena, #achta, #neuna, #zehna, #elfa, */

#zwoelfa, #dreizehna, #vierzehna, #fuenfzehna, #sechzehna, #siebzehna, #achzehna, #neunzehna, #zwanziga{opacity: 0.0 !important; width: 0% !important; position: absolute; left: -1000px; } 

/*NAVIGATION UNTEN BREITE EINSTELLEN BSP - 100/6 ELEMENTE + L+R (0,5) = 8% */
/**/
#nav span{
margin-left: calc(4% - 24px); margin-right: calc(4% - 24px); 
}

/*NICHT BENOETIGTE ELEMENTE AUSBLENDEN ENDE*/

@media screen and (min-width: 769px) and (max-width: 1200px) {
#logo{
bottom: 180px; 
left: 35%;
width: 30%;
}
}

@media screen and (min-width: 300px) and (max-width: 768px) {
body{
font-size: 1.42vw;
}
#nav span {
  margin-left: calc(7% - 24px);
  margin-right: calc(7% - 24px);
  font-size: 1.4em;
}
#logo{
bottom: 160px; 
left: 15%;
width: 70%;
}
#info{
font-size: 1.6em;
}
#info.aktiv{
width: 50%; 
}
#mindmap{
bottom: 240px; 
}

a#sofortlink{
top: calc(80% - 260px);
right: calc(50% - 80px);
opacity: 0.8;
padding: 50px 10px 50px 10px;
float: left;
width: 120px;
height: 40px;
line-height: 20px;
font-weight: 400;
border-radius: 100px;

font-size: 2.4em;
color: #000000;
text-align: center;
transform: rotate(-368deg);
}


}