.rot {
background-color:red;
}

#zenter {
margin : 0 auto 0;
max-width : 100%;
}




#strasse {
    width: 100%;
    height: 20em;
position: fixed;
bottom:0;
background: #004c91;
        background: url(bild.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}



#div1 {
    width: 100px;
    height: 0em;
    font-weight: bold;
position: relative;
bottom: 0;
    -webkit-animation: mymove 15s infinite; /* Chrome, Safari, Opera */
    animation: mymove 55s infinite;
}
#div2 {
    width: 100px;
    height: 0em;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 15s infinite; /* Chrome, Safari, Opera */
    animation: mymove 15s infinite;
}
#div3 {
    width: 100px;
    height: 0em;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 15s infinite; /* Chrome, Safari, Opera */
    animation: mymove 15s infinite;
}
#div4 {
    width: 100px;
    height: 0em;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 15s infinite; /* Chrome, Safari, Opera */
    animation: mymove 15s infinite;
}
#div5 {
    width: 100px;
    height: 0em;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 15s infinite; /* Chrome, Safari, Opera */
    animation: mymove 15s infinite;
}
/* Chrome, Safari, Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

/* Standard syntax */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {right: -100%;}
    to {right: 100%;}
}

/* Standard syntax */
@keyframes mymove {
    from {right: -100%;}
    to {right: 100%;}
}










































/*html {
background : url(o.png) center center no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}*/



	img.bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			background: white;color:black;
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
			z-index : -1;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {z-index : -1;
				left: 50%;
				margin-left: -32em; }
		}
		
		#page-wrap { position: relative; width: 25em; margin: 3.125em auto; padding: 1.25em; background: white;color:black; -moz-box-shadow: 0 0 1.25em black; -webkit-box-shadow: 0 0 1.25em black; box-shadow: 0 0 1.25em black; }
		


#stapel, #slideshow, #slideshowintro, #video, #logo, article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display : block;
}

#logo img{
background: white;color:black;
}
@media only screen and (max-width:46.875em) {
section .link {
width : 100%;
margin : 0 auto;
}
header img {
height : 1em;
width : auto;
position : fixed;
top : 1em;
left : 0;
background: white;color:black;
z-index : 80;
}
#slideshow {
margin-top:16%;	
height : 8em;
width : 100%;
color:#fff;
background : orange;
-moz-box-shadow: 1.313em 1.313em 0.438em #888; 
-webkit-box-shadow: 0em 0.713em 0.438em -0.4em#888;
}
#stapel {
height : 7em;
margin : 0;
width : 99%;
position : relative;
overflow : hidden;
margin : 0 auto 0;
}
#toggleNav:before {
content : "";
position : absolute;
top : 60%;
right : 1em;
width : 50%;
height : 0.15em;
background : white;
box-shadow : 0 0.25em 0 0 white, 0 0.5em 0 0 white;
}
#toggleNav {
position : relative;
}
#toggleNav {
text-align : center;
position : fixed;
right : 0%;
top : 1em;
animation-name : example;
animation-duration : 2s;
}
@keyframes example {
0%   {background-color: #F1F1FC;color: black; right:0em; width: 5em;}
50%  {background-color: white;color: orange; right:0%;
width: 6em;
-webkit-border-radius: 2em 0 0 2em;
-moz-border-radius: 2em 0 0 2em;
border-radius: 2em 0 0 2em;

}
100% {background-color: orange;color: white; right:0em;}


}
a.toggle-nav {
min-height : 2em;
display : inline-block;
position : fixed;
right : 0%;
top : 1em;
text-decoration : none;
border-radius : 0.4em 0 0 0;
-webkit-border-radius: 0.4em 0 0 0;
-moz-border-radius: 0.4em 0 0 0;
cursor : pointer;
padding : 0.357em;
color : white;
background : orange;
border : white solid 0.063em;
z-index : 80;
}
a.toggle-nav:hover {
color : orange;
background : white;
transition : background-color 1s;
border : orange solid 0.063em;
z-index : 80;
}
#navMain {
display : none;
}
#navMain:target {
display : block;
}
ul {
list-style-type : none;
}
li a {
text-decoration : none;
}
.titel {
width : 100%;
text-align : center;
background : orange;
color : #fff;
-moz-box-shadow: 1.313em 1.313em 0.438em #888; 
-webkit-box-shadow: 0em 0.713em 0.438em -0.4em#888;
}
.leitung {
margin: 0 auto;
max-width:80%;
height: auto;
background :  orange;color:white;
border : 0.2em solid  #3450a2;
border-radius: 0em;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
-moz-box-shadow: 0.313em 0.313em 0.438em #888; 
-webkit-box-shadow: 0.313em 0.313em 0.438em #888;
}
.plan {
margin: 0 auto;
max-width:100%;
height: auto;
background :  orange;color:white;
border : 0.2em solid  #3450a2;
border-radius: 0em;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
-moz-box-shadow: 0.313em 0.313em 0.438em #888; 
-webkit-box-shadow: 0.313em 0.313em 0.438em #888;
}
img.leitung  {
background :  orange;color:black;
}
img.plan {
background :  orange;color:black;
}


}

@media only screen and (min-width:46.875em) {
section ul.link {
width : 60%;
margin : 0 auto ;
}
#kasten {
margin : 0 auto ;
max-width : 60%;
}
header img {
height : auto;
width : 16%;
position : fixed;
top : 1em;
left : 1em;
border-bottom : 0.25em solid orange;
border-left : 0.25em solid orange;
background: white;color:black;
z-index : 80;
}
#slideshow {
margin-top:10%;	
height : 18em;
width : 100%;
color:#fff;
background : orange;
-moz-box-shadow: 1.313em 1.313em 0.438em #888; 
-webkit-box-shadow: 0em 0.713em 0.438em -0.4em#888;
}
#stapel {
height : 16em;
margin : 0;
width : 99%;
position : relative;
overflow : hidden;
margin : 0 auto 0;
}
#toggleNav:before {
content : "";
position : absolute;
top : 50%;
right : 1em;
width : 50%;
height : 0.22em;
background : white;
box-shadow : 0 0.46em 0 0 white, 0 0.9em 0 0 white;
}
#toggleNav {
position : relative;
}
#toggleNav {
text-align : center;
position : fixed;
right : 0%;
top : 1em;
animation-name : example;
animation-duration : 2s;
}
@keyframes example {
0%   {background-color: orange;color: white; right:0em; width: 5em;}
50%  {background-color: orange;color: white; right:0%;
width: 6em;
-webkit-border-radius: 2em 0 0 2em;
-moz-border-radius: 2em 0 0 2em;
border-radius: 2em 0 0 2em;
}
 100% {background-color:orange;color: white; right:0em;}


}
a.toggle-nav {
min-height : 21em;
display : inline-block;
position : fixed;
right : 0%;
top : 1em;
text-decoration : none;
-webkit-border-radius: 0.4em 0 0 0;
-moz-border-radius: 0.4em 0 0 0;
border-radius : 0.4em 0 0 0;
cursor : pointer;
padding : 0.357em;
color : white;
background : orange;
border : white solid 0.063em;
z-index : 80;
}
a.toggle-nav:hover {
color : orange;
background : white;
transition : background-color 1s;
border : orange solid 0.063em;
z-index : 80;
}
#navMain {
display : none;
}
#navMain:target {
display : block;
}
ul {
list-style-type : none;
}
li a {
text-decoration : none;
}
.titel {
width : 100%;
text-align : center;
background : orange;
color : #fff;
-moz-box-shadow: 1.313em 1.313em 0.438em #888; 
-webkit-box-shadow: 0em 0.713em 0.438em -0.4em#888;
}
.leitung {
margin: 0 auto;
max-width:40%;
height: auto;
background :  orange;color:white;
border : 0.2em solid  orange;
border-radius: 0em;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
-moz-box-shadow: 0.313em 0.313em 0.438em #888; 
-webkit-box-shadow: 0.313em 0.313em 0.438em #888;
}
.plan {
margin: 0 auto;
max-width:100%;
height: auto;
background :  orange;color:white;
border : 0.2em solid  orange;
border-radius: 0em;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
-moz-box-shadow: 0.313em 0.313em 0.438em #888; 
-webkit-box-shadow: 0.313em 0.313em 0.438em #888;
}
img.leitung  {
background :  orange;color:black;
}
img.plan {
background : orange;color:black;
}


}





section {
background-color : #F1F1FC;
color:black;
margin : 0 auto ;
width : 100%;
margin-top : 1em;
padding-bottom : 2em;
z-index : 1000;
}
section p  {
text-align : center;
margin : 0 1.5em 1em 1.5em;
}
section h3 {
text-align : center;
margin : 0 1.5em 1em 1.5em;
}
footer {
float : top;
margin : 2em 0 0 0;
padding : 0;
width : 100%;
height : 6em;
background-color : orange;
color : white;
text-align : right;
border-top : 0.438em solid orange;
clear : both;
}
.blocktext ul li {
float : right;
}
footer p {
margin : 0 2em 0 0;
}
.linie {
  border: 0; 
  height: 0.063em; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, orange, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, orange, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, orange, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, orange, #f0f0f0);
  color:black;
  margin : 0 0 1em 0;
}



h1, h2 {
text-align : center;
color : orange;
padding-top : 0.5em;
font-family : 'Syncopate', sans-serif;
}
.main-nav li {
max-height : 100%;
background : ;
margin : 0 auto ;
/*border-bottom : 0.125em solid #004c91;*/
}
nav ul {
opacity : 0.800000011920928955078125;
position : absolute;
background : white;
top : 0;
left : 0;
right : 0;
padding:0;
min-height : 4em;
height : 100%;
border-bottom : 0.125em solid orange;
z-index : 80;
text-align : center;
}
nav ul > li {
background : white;
margin-left : 0;
border-bottom : 0.063em solid orange;;
}
nav ul > li > a, nav ul > li > strong {
padding : 1.6em 1.25em;
display : block;
}
nav ul a:link {
text-decoration : none;
}

.link ul li a {
background-color : orange;
color : white;
}
.link ul li a:hover {
background-color : white;
color : orange;
transition : background-color 1s;
}
.link {
list-style : none;
float : top;
width : 100%;
margin : 0;
padding : 0;
z-index : 1;
}
.link ul {
margin : 0;
padding :0 0 1em 0;
}
li.linie2 {
margin : 2%;
padding : 0;
}
a.box {
text-align : center;
vertical-align : middle;
display : table-cell;
width : 100em;
height : 7.5em;
background :  white;color:black;
margin : 0 auto;
text-decoration : none;
list-style : none;
-moz-box-shadow: 0.313em 0.313em 0.438em #888; 
-webkit-box-shadow: 0.313em 0.313em 0.438em #888;
}

	

#section p small a {
display:block;
background-color : #F1F1FC;
color:orange;
margin-bottom:4em;
}

.toggle-nav{
background-color : #F1F1FC;
color:orange;
}
.leitung{
background-color : #F1F1FC;
color:orange;
}
.plan{
background-color : #F1F1FC;
color:orange;
}

li.linie a:link {
color : white;
}
li.linie a:visited {
color : white;
}
li.linie a:focus {
background : white;
color : black;
}
li.linie a:hover {
color : black;
}
li.linie a:active {
color : silver;
}




li a:link {
color : black;
}
li a:visited {
color : black;
}
li a:focus {
color : red;
}
li a:hover {
color : blue;
}
li a:active {
color : white;
}

.link  :focus  {
background-color : white;
color : #3450a2;
transition : background-color 1s;
}








#stapel img {		
position : absolute;
margin-top : 0.4em;
height : auto;
width : 100%;
background :  orange;color:white;
opacity : 0;
animation : 30s ease-in-out infinite;
}
#stapel img:nth-of-type(1) {
animation-name : fade1;
}
#stapel img:nth-of-type(2) {
animation-name : fade2;
}
#stapel img:nth-of-type(3) {
animation-name : fade3;
}
#stapel img:nth-of-type(4) {
animation-name : fade4;
}
#stapel img:nth-of-type(5) {
animation-name : fade5;
}
@keyframes fade1 {
     0% {opacity:1;}
    10% {opacity:1;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:1;}
}

@keyframes fade2 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:1;}
    30% {opacity:1;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade3 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:1;}
    50% {opacity:1;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade4 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:1;}
    70% {opacity:1;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade5 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:1;}
    90% {opacity:1;}
   100% {opacity:0;}
}




.short-animate {
  -webkit-transition:.5s ease-in-out;
  -moz-transition:.5s ease-in-out;
  -ms-transition:.5s ease-in-out;
  -o-transition:.5s ease-in-out;
  transition:.5s ease-in-out;
}

.long-animate {
  -webkit-transition: .5s .5s ease-in-out;
  -moz-transition: .5s .5s ease-in-out;
  -ms-transition: .5s .5s ease-in-out;
  -o-transition:.5s .5s ease-in-out;
  transition:.5s .5s ease-in-out;
}






#nachricht
{
display:block;
width : 100%;
height : auto;
background-color : #F1F1FC;color:black;
margin : 0 auto;
}

#mitte
{
display:block;
text-align:center;
max-width : 100%;
height : auto;
background :  orange;color:black;
margin : 2em;
border : 0.2em solid  orange;
border-radius: 0em;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
-moz-box-shadow: 0.313em 0.313em 0.438em #888; 
-webkit-box-shadow: 0.313em 0.313em 0.438em #888;
}

.anrede
{display:block;
background :  orange;color:white;
margin-bottom:2em;
}
p.frau
{display:block;
background :  orange;color:white;
margin:1em 0 1em 0;
}
p.herr
{display:block;
background :  orange;color:white;
margin:1em 0 1em 0;
}
.vorname
{display:block;
float :top;
width : 50%;
height : auto;
background :  white;color:orange;
margin : 0 auto;
border : 0.2em solid  orange;
margin-bottom:1em;
}
.nachname
{display:block;
float :top;
width : 50%;
height : auto;
background :  white;color:orange;
margin : 0 auto;
border : 0.2em solid  orange;
margin-bottom:1em;
}
.email
{display:block;
float :top;
width : 50%;
height : auto;
background :  white;color:orange;
margin : 0 auto;
border : 0.2em solid  orange;
margin-bottom:1em;
}
.betreff
{display:block;
float :top;
width : 50%;
height : auto;
background : white;color:#3450a2;
margin : 0 auto;
border : 0.2em solid  #3450a2;
margin-bottom:1em;
}
.mitteilung
{
text-align:center;
float :top;
color:white;
margin-bottom:1em;
}
.text
{display:block;
float :top;
width : 80%;
height : auto;
background :  white;color:#3450a2;
margin : 0 auto;
border : 0.2em solid  #3450a2;
margin-bottom:1em;
}
p.dieserknopf 
{
text-align:center;
float :top;
color:white;
margin-bottom:1em;
}
.abschicken
{
float :top;
width : 40%;
height : auto;
margin : 0 auto;
border : 0.2em solid  #3450a2;
margin-bottom:1em;
}
.reset
{
float :top;
width : 40%;
height : auto;
margin : 0 auto;
border : 0.2em solid  #3450a2;
margin-bottom:1em;
}
.abschicken:hover
{
float :top;
width : 40%;
height : auto;
margin : 0 auto;
background :  white;color:#3450a2;
border : 0.2em solid  #3450a2;
margin-bottom:1em;
}
.reset:hover
{
float :top;
width : 40%;
height : auto;
margin : 0 auto;
background :  white;color:#3450a2;
border : 0.2em solid  #3450a2;
margin-bottom:1em;
}















.wiggle img{
margin:1em;
max-width:100%;
max-height:10em;
border : 0.2em solid  orange;color:white;
-moz-box-shadow: 0.313em 0.313em 0.438em #888; 
-webkit-box-shadow: 0.313em 0.313em 0.438em #888;
}


.lightbox {
  position:fixed;
  top:-100%;
  bottom:100%;
  left:0;
  right:0;
  color:white;
  background:rgba(255,165,0,.8);
  z-index:501;
  opacity:0;
}

.lightbox img {
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  max-width:0%;
  max-height:0%;
  color:black;
  background:white;
}

#lightbox-controls {
  position:fixed;
  height:4.375em;
  width:4.375em;
  top:-4.375em;
  right:0;
  z-index:502;
  color:white;
  background:rgba(255,165,0);
}

#close-lightbox {
  color:white;
  background:rgba(255,165,0);
  display:block;
  position:absolute;
  overflow:hidden;
  height:3.125em;
  width:3.125em;
  text-indent:-312.5em;
  right:0.625em;
  top:0.625em;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

#close-lightbox:before {
	content:'';
  display:block;
  position:absolute;
  height:0em;
  width:0.188em;
  left:1.5em;
  top:0;
  background:white;color:red;
  border-radius:0.125em;
  -webkit-transition: .5s .5s ease-in-out;
  -moz-transition: .5s .5s ease-in-out;
  -ms-transition: .5s .5s ease-in-out;
  -o-transition:.5s .5s ease-in-out;
  transition:.5s .5s ease-in-out;
}

#close-lightbox:after {
	content:'';
  display:block;
  position:absolute;
  width:0em;
  height:0.188em;
  top:1.5em;
  left:0;
  background:white;
  border-radius:0.125em;
  -webkit-transition: .5s 1s ease-in-out;
  -moz-transition: .5s 1s ease-in-out;
  -ms-transition: .5s 1s ease-in-out;
  -o-transition:.5s 1s ease-in-out;
  transition:.5s 1s ease-in-out;
}

.lightbox:target {
  top:0%;
  bottom:0%;
  opacity:1;
}

.lightbox:target img { color:silver;
  max-width:100%;
  max-height:100%;
}

.lightbox:target ~ #lightbox-controls {
  top:0em;
}

.lightbox:target ~ #lightbox-controls #close-lightbox:after {
  width:3.125em;
}

.lightbox:target ~ #lightbox-controls #close-lightbox:before {
  height:3.125em;
}





ol#skip {
margin : 0;
padding : 0;
z-index : 80;
}
ol#skip li {
display : inline;
list-style : none;
z-index : 80;
}
ol#skip a:link, ol#skip a:visited, ol#skip a:hover {
left : -400em;
position : absolute;
background : #004c91;color:white;
font-size : 4em;
padding : 2%;
z-index : 80;
}
ol#skip a:active, ol#skip a:focus {
position : fixed;
left : 0;
top : 0;
text-align : center;
width : 100%;
height : 10%;
z-index : 80;
}
ol#abschluss {
margin : 0;
padding : 0;
z-index : 80;
}
ol#abschluss li {
display : inline;
list-style : none;
z-index : 80;
}
ol#abschluss a:link, ol#abschluss a:visited, ol#abschluss a:hover {
left : -400em;
position : absolute;
background : #004c91;color:white;
font-size : 4em;
padding : 2%;
z-index : 80;
}
ol#abschluss a:active, ol#abschluss a:focus {
position : fixed;
left : 0;
top : 0;
text-align : center;
width : 100%;
height : 10%;
z-index : 80;
}
ol#skip {
margin : 0;
padding : 0;
z-index : 80;
}
ol#skip li {
display : inline;
list-style : none;
z-index : 80;
}
ol#skip a:link, ol#skip a:visited, ol#skip a:hover {
left : -400em;
position : absolute;
background : #004c91;color:white;
font-size : 4em;
padding : 2%;
z-index : 80;
}
ol#skip a:active, ol#skip a:focus {
position : fixed;
left : 0;
top : 0;
text-align : center;
width : 100%;
height : 10%;
z-index : 80;
}
ol#abschluss {
margin : 0;
padding : 0;
z-index : 80;
}
ol#abschluss li {
display : inline;
list-style : none;
z-index : 80;
}
ol#abschluss a:link, ol#abschluss a:visited, ol#abschluss a:hover {
left : -400em;
position : absolute;
background : #004c91;color:white;
font-size : 4em;
padding : 2%;
z-index : 80;
}
ol#abschluss a:active, ol#abschluss a:focus {
position : fixed;
left : 0;
top : 0;
text-align : center;
width : 100%;
height : 10%;
z-index : 80;
}

}

p ,a {font-family: Arial, Helvetica;color:#310404;}
h2 {font-family: Arial, Helvetica;color:#310404;margin-top:2em;}
span {font-family: Arial, Helvetica}
h1.titel {text-align: center;
font-size: 100%;

		
		
color:#fff;
background-color:#310404;
text-shadow:#fff 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
height : 3%;
	margin-top:0em;		
    position: fixed;
    top:0 ;
    right: ;
    bottom: 0;
    left: 0em;
    overflow: hidden;
    z-index: 10;
		
}

#slideshowintro {
margin-top:16%;	
height : 100%;
width : 100%;
color:#fff;
background : orange;
-moz-box-shadow: 1.313em 1.313em 0.438em #888; 
-webkit-box-shadow: 0em 0.713em 0.438em -0.4em#888;
}	
#video {
height : 94%;
width : 94%;
overflow : hidden;
padding :2%;
}