.fadeInLoad {
        animation: fadeInLoad 2s;
    }
    @keyframes fadeInLoad {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }


html, body {
margin:0;
padding:0;
width:100%;
height:100%;
text-align:left;
font-family: Arial;
}



#hintergrund{
position:fixed;
width:100%;
height:100%;
}

   A.herunterladen {
	display: inline-block;
	margin-top: 10px;
	width: 400px;
	height: 35px;
	padding-top:  7px;
	text-align: center;
	text-decoration: none;
	font-family: arial;
	font-size: 24px;
	color: #000000;
	background-color: beige;/*#ffffff;*/
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	text-indent: 10px;
	      border-radius:5px; 
      -moz-border-radius:5px; 
      -webkit-border-radius:5px; 
 }
  A.herunterladen:hover {
  color: #ffffff;/*#000000;/*#003366;*/
  background-color: #708090;/*#eff1cd;/*#96af33;/*#003366;*/
}

   A.propaed {
	display: inline-block;
	margin-top: 5px;
	width: 350px;
	height: 35px;
	padding-top:  3px;
	text-align: left;
	text-decoration: none;
	font-family: arial;
	font-size: 24px;
	color: #000000;
	background-color: beige;
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	text-indent: 4px;
	      border-radius:5px; 
      -moz-border-radius:5px; 
      -webkit-border-radius:5px;*/ 
 }
 
   A.propaed:hover {
  color: #ffffff;/*#000000;/*#003366;*/
  background-color: #708090;/*#eff1cd;/*#96af33;/*#003366;*/
}


   A.mathe {
	display: inline-block;
	margin-top: 0px;
	width: 800px;
	height: 30px;
	padding-top:  0px;
	text-align: left;
	text-decoration: none;
	font-family: arial;
	font-size: 24px;
	color: #000000;
	background-color: beige;
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	text-indent: 10px;
	      border-radius:10px; 
      -moz-border-radius:10px; 
      -webkit-border-radius:10px; 
 }

   A.mathe:hover {
  color: #ffffff;/*#000000;/*#003366;*/
  background-color: #708090;/*#eff1cd;/*#96af33;/*#003366;*/
}




    .icon{
        opacity: 1;
        position:fixed;
        bottom: 8%;
        right: 3.5%;
        display: none;
    }


   A.menulink {
	display: inline-block;
	width: 300px;
	height: 32px;
	margin-top: 8px;/*10px;*/
	margin-left: 5px;
	padding-top:  3px;
	text-align: left;
	text-decoration: none;
	font-family: arial narrow;
	font-size: 24px;
	color: #6E702F;
	background-color: #ffffff;
	border-style: solid;
	border-width: 1px;
	border-color: #000080;
	text-indent: 10px;
	      border-radius:10px; 
      -moz-border-radius:10px; 
      -webkit-border-radius:10px; 
      -khtml-border-radius:10px; 
 }
  A.menulink:hover {
  color: #ffffff;
  background-color: #9fa633;
}


   A.menulink-u {
	display: inline-block;
	width: 270px;
	height: 25px;
	padding-top:  8px;
	text-align: left;
	text-decoration: none;
	font-family: arial;
	font-size: 18px;
	color: #6E702F;
	background-color: #ffffff;/*#fffff0;*/
	border-style: solid;
	border-width: 1px;
	border-color: #000080;
	margin-left: 30px;
	margin-top: 4px;

	text-indent: 8px;
	      border-radius:10px; 
      -moz-border-radius:10px; 
      -webkit-border-radius:10px; 
      -khtml-border-radius:10px; 
 }
  A.menulink-u:hover {
  color: #000080;
  background-color: #eff1cd;
}


#aktiv{
	background-color: #9fa633;
	color: #ffffff;
}

/*  */


body{
overflow-x: hidden;
}


#menu-auf-zu + label {
display: block; 
width: 240;
height:30px;
padding-top: 15px;
position: fixed; 
left: 0px;
top: 0px; 
cursor:pointer;
} 

#menu-auf-zu + label span {
position: fixed;
}

#slide{
display:none;
}


#navi ul {
padding:0; 
margin:0; 
list-style:none; 
text-align:left; 
overflow:scroll; 
overflow:hidden;
-webkit-overflow-scrolling: touch;
}


#navi {
width: 334px;
height: 110%;
top: 100px;/*67px;*/
position:fixed;
left:-336px; 
border-right:2px solid #800000; 
border-top:2px solid #800000; 
z-index:400000; 
background:  #dbdf88;
overflow-y: scroll;
-webkit-height:calc(100%);
-moz-height:calc(100%);
height:calc(100%);
-webkit-transition:0.6s 0.6s;
transition:0.6s 0.6s;
}

#navi > ul ul {
max-height: 0px; 
overflow:hidden;
-webkit-transition:0.6s;
transition:0.6s;
}

#menu-auf-zu {
position:absolute; 
left:-9999px; 
}




#menu-auf-zu:checked ~ #browser  #navi{
left:0;
-webkit-transition:0.6s;
transition:0.6s;
}

#menu-auf-zu:checked ~ #browser #navi > ul ul {
max-height:400px;/*200px;*/
-webkit-transition:0.6s 0.6s;
transition:0.6s 0.6s;
}

 */

#navi ul li a {
display:block; 
height:30px;
border-bottom:1px solid #000000; 
text-decoration:none; 
}

#menu-auf-zu {
  position: fixed;
  cursor: pointer;
  font-family: Arial;
  text-align: left;/*center;/*center;*/
  font-size: 20pt;
  color: #800000;
  width: 2px;
  height: 3px;
 display: none;
 z-index: 10;
}


#menu-auf-zu:checked + label { 
display: block;
content :""; 
opacity: 0.6;/*0.5;*/
width:300%; 
height: 150%; 
 background-color: #000000;
position: fixed;
left: 100px;/*68px;*/
top: -150px;
transition:  0s;
 border-width: 1px;
 border-style: solid;
 border-color: #800000;
 overflow:scroll;
}

#menu-auf-zu-checkbox {
  display: none;
}

#menu-auf-zu + label span {
left:0px;
}

.formlink {
   cursor:pointer;
	display: block;
	width: 240px;
	height:30px;
	text-align: left;
	text-decoration: none;
	font-family: Arial;
	font-size: 20pt;
	color: #800000;
position: fixed;
top: 0px;
left: 0px;
 }