@font-face { font-family: 'Asp2'; src: url('fonts/asp2-Regular.woff') format('woff'); 
                                  font-weight: normal; font-style: normal; 
           }
@font-face { font-family: 'Asp2'; src: url('fonts/asp2-Bold.woff') format('woff'); 
                                  font-weight: bold; font-style: normal; 
           }
@font-face { font-family: 'Asp2'; src: url('fonts/asp2-Italic.woff') format('woff'); 
                                  font-weight: normal; font-style: italic; 
           }


/*@font-face { font-family: 'OpenSans'; src: url('fonts/OpenSans-Regular.woff') format('woff'); 
                                  font-weight: normal; font-style: normal; 
           }
@font-face { font-family: 'OpenSans'; src: url('fonts/OpenSans-Bold.woff') format('woff'); 
                                  font-weight: bold; font-style: normal; 
           }
@font-face { font-family: 'OpenSans'; src: url('fonts/OpenSans-Italic.woff') format('woff'); 
                                  font-weight: normal; font-style: italic; 
           }*/



body { background-color: #101532; color: #fff; font-family: 'Asp2', 'Open Sans', OpenSans, sans-serif;      /* FONT */
       background-image: url(img/backgrnd.jpg); background-repeat: no-repeat; 
       background-size: 100%; background-attachment: fixed; }
* { margin: 0; padding: 0; border: 0px solid; }

#navi { top:2vw; left:0; position: fixed; z-index: 2; 
        padding: 2vw; width: 6.5vw; min-width: 2.4em;
        background-color: rgba(0,0,0,0.7); border-radius: 0 12px 12px 0;
        }
.button1 { border: 0px solid; width: 100%; }
.button  { border: 0px solid; width: 100%; margin-top:25%; }
.icon    { width:100%; opacity:1; }
.icon:hover { opacity:0; }
div.button, div.button1 { background-size: 0 !important; }
div.button:hover, div.button1:hover { background-size:100% !important; }

#content { width: 72%; max-width: 40em; 
           margin: 2% auto 5%; margin: 2vw auto 5%;  /*Browserfix: Dolphin und Opera mini interpretieren vw nicht (Android 2.3)...*/
           line-height: 1.5em; 
           z-index: 1; 
           }
div#content a:link { color: #fff; text-decoration: underline; }
div#content a:visited { color: #fff; text-decoration: underline; }
div#content a:hover { color: #ff7c01; } /*#345BA0; #7377d2;*/

.past, .past a { color: #444 !important; }

.contentback { padding:2em 3em; background-color: rgba(0,0,0,0.7); border-radius:12px; }

h1 { font-size: 2em; margin-bottom: 0.4em;
     line-height: 1.2em; 
     }
h2 { font-size: 1.4em; margin-bottom: 0.7em; margin-top: 1.4em;
     line-height: 1.2em; 
     }
h3 { font-size: 1.2em; margin-bottom: 0.5em; margin-top: 1.2em;
     line-height: 1.2em; 
     }
h4 { font-size: 1em; /*font-family: georgia, serif;*/                         /* FONT */
     line-height: 1.2em; font-weight: bold; 
     } /*color: #95B7FF;*/
     
p  { margin-bottom: 0.5em; /*font-family: georgia, serif;*/                   /* FONT */
     }

td { padding-right: 0.5em; line-height: 1.5em; vertical-align:top; }
table { border-spacing: 0; /*font-family: georgia, serif;*/ }                 /* FONT */

 /* .sans { font-family: 'Asp2', sans-serif; }                                    FONT */
strong { font-weight: bold; }
em { font-style: italic; }

.line { display:block; border-bottom: 1px solid #999; width:100%; margin-top:2.4em; }

#footer { font-size: small; margin-top: 1.4em; }     

@media (orientation:portrait) { body { background-size: 100% 100%; }
                                #navi { width: 2em; padding: 0.3em; top:0;}
                                #content { width: 100%; margin: 0 auto; }
                                .contentback { border-radius: 0; }
                              }