#strasse {
    width: 100%;
    height: 14em;
position: fixed;
bottom:0;
background: #004c91;
        background: url(bild.gif) 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 55s infinite; /* Chrome, Safari, Opera */
    animation: mymove 55s infinite;
}
#div2 {
    width: 100px;
    height: 0em;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
    animation: mymove 25s infinite;
}
#div3 {
    width: 100px;
    height: 0em;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 35s infinite; /* Chrome, Safari, Opera */
    animation: mymove 30s infinite;
}
#div4 {
    width: 100px;
    height: 0em;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 25s infinite; /* Chrome, Safari, Opera */
    animation: mymove 25s infinite;
}
#div5 {
    width: 100px;
    height: 0em;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 13s infinite; /* Chrome, Safari, Opera */
    animation: mymove 15s infinite;
}
#div6 {
    width: 100px;
    height: 0em;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 15s infinite; /* Chrome, Safari, Opera */
    animation: mymove 13s infinite;
}
#div7 {
    width: 100px;
    height: 0em;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 14s infinite; /* Chrome, Safari, Opera */
    animation: mymove 14s infinite;
}

/* Chrome, Safari, Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-out;}
#div4 {-webkit-animation-timing-function: ease-in;}
#div5 {-webkit-animation-timing-function: ease-in;}
#div6 {-webkit-animation-timing-function: linear;}
#div7 {-webkit-animation-timing-function: ease-out;}

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

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

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

@media only screen and (max-width:46.875em) {
#div1 img {
position: relative;
bottom: -11.5em;
height: 4em; width: auto;
}
#div2 img {
position: relative;
bottom: -11.5em;
height: 4em; width: auto;
}
#div3 img {
position: relative;
bottom: -10em;
height: 6em; width: auto;
}
#div4 img {
position: relative;
bottom: -9em;
height: 8em; width: auto;
}
#div5 img {
position: relative;
bottom: -10em;
height: 10em; width: auto;
}	
#div6 img {
position: relative;
bottom: -10.5em;
height: 4em; width: auto;
}
#div7 img {
position: relative;
bottom: -10em;
height: 6em; width: auto;
}	
}	

@media only screen and (min-width:46.875em) {
#div1 img {
position: relative;
bottom: -8em;
height: 10em; width: auto;
}
#div2 img {
position: relative;
bottom: -7em;
height: 12em; width: auto;
}
#div3 img {
position: relative;
bottom: -6em;
height: 12em; width: auto;
}
#div4 img {
position: relative;
bottom: -5em;
height: 14em; width: auto;
}
#div5 img {
position: relative;
bottom: -7em;
height: 16em; width: auto;
}
#div6 img {
position: relative;
bottom: -6.5em;
height: 8em; width: auto;
}
#div7 img {
position: relative;
bottom: -6em;
height: 12em; width: auto;
}	
}



/*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; }
		


@font-face {
font-family : "'Syncopate'";
font-style : normal;
font-weight : 400;
src : local('Syncopate'), local('Syncopate-Regular'), url(https://fonts.gstatic.com/s/syncopate/v7/pDM9CVwNx1ufBHCEatJA3KCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
#stapel, #slideshow, #logo, article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display : block;
}



@media only screen and (max-width:46.875em) {
	
#news1 {
background:silver;
font-family : 'Syncopate', sans-serif;
font-size: 1em;
text-decoration : none;
display: block;
vertical-align: middle;
padding: 2em 0 2em 0;
min-height : 5em;
width : auto;
margin : 0 auto 0;
width : 100%;
margin-top : 1em;
padding-bottom : 2em;
text-align : center;
z-index : 1000;	
}	
@keyframes drehbuch {
        0% {
            background-color:yellow;color:black;
        }
        50% {
transform: rotate(780deg)scale(0.5,0.5);
transition: 5s }

        100% {
            background-color:#3450a2;color:white;
        }
}

#news1{
    
  animation-name: drehbuch;
  animation-duration:3s;
  animation-iteration-count:both;
}

	
#news {
background:silver;
font-family : 'Syncopate', sans-serif;
font-size: 1em;
text-decoration : none;
display: block;
vertical-align: middle;
padding: 4em 0 2em 0;
min-height : 5em;
width : auto;
margin : 0 auto 0;
width : 100%;
margin-top : 1em;
padding-bottom : 2em;
text-align : center;
z-index : 1000;
	color:#3450a2;
    -webkit-animation-name: hovering;
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: hovering;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    animation-name: hovering;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes hovering {
    from {-webkit-transform:translate(0, 0em);}
    50% {-webkit-transform:translate(0, -1em);}
    to {-webkit-transform: translate(0, -0em);}
}

@-moz-keyframes hovering {
    from {-moz-transform:translate(0, 0em);}
    50% {-moz-transform:translate(0, -1em);}
    to {-moz-transform: translate(0, -0em);}
}

@keyframes hovering {
    from {transform:translate(0, 0em);}
    50% {transform:translate(0, -1em);}
    to {transform: translate(0, -0em);}
}

#news2 {
background:silver;
font-family : 'Syncopate', sans-serif;
font-size: 1em;
text-decoration : none;
display: block;
vertical-align: middle;
padding: 4em 0 2em 0;
min-height : 5em;
width : auto;
margin : 0 auto 0;
width : 100%;
margin-top : 1em;
padding-bottom : 2em;
text-align : center;
z-index : 1000;
	color:#3450a2;
    -webkit-animation-name: hovering;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: hovering;
    -moz-animation-duration: 8s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    animation-name: hovering;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes hovering {
    from {-webkit-transform:translate(0, 0em);}
    50% {-webkit-transform:translate(0, -1em);}
    to {-webkit-transform: translate(0, -0em);}
}

@-moz-keyframes hovering {
    from {-moz-transform:translate(0, 0em);}
    50% {-moz-transform:translate(0, -1em);}
    to {-moz-transform: translate(0, -0em);}
}

@keyframes hovering {
    from {transform:translate(0, 0em);}
    50% {transform:translate(0, -1em);}
    to {transform: translate(0, -0em);}
}	
	
	
}



@media only screen and (min-width:46.875em) {
	
	
#news1 {
font-family : 'Syncopate', sans-serif;
font-size: 0.8em;
text-decoration : none;
display: table-cell;
vertical-align: middle;
padding: 2em 2em 2em 2em;
min-height : 5em;
max-width : 16%;
position : fixed;
bottom : 10%;
left : 1.4em;
z-index :1000;
text-align : center;
color:white;
}	


#news1:hover {
min-width: 0%;
height: auto;	
font-family : 'Syncopate', sans-serif;
font-size: 0.8em;
text-decoration : none;
display: table-cell;
vertical-align: middle;
padding: 2em 2em 2em 2em;
min-height : 5em;
max-width : 16%;
position : fixed;
bottom : 10%;
left : 1.4em;
z-index :1000;
text-align : center;
color:yellow;	
}	

	
	
@keyframes drehbuch {
        0% {
            background-color:#3450a2;color:white;
        }
        10% {
            background-color:yellow;color:black;
			transform: rotate(780deg)scale(0.5,0.5);
			transition: 5s }
	        50% {
            transform: translate(20%, 20%) scale(2.5) rotate(760deg);
            border-radius: 10%;
}
        100% {
            background-color:#3450a2;color:yellow;
        }
}

#news1{
    
  animation-name: drehbuch;
  animation-duration:12s;
  animation-iteration-count:both;
}	
	

	
#news {
font-family : 'Syncopate', sans-serif;
font-size: 0.8em;
text-decoration : none;
display: table-cell;
vertical-align: middle;
padding: 2em 0 2em 0;
min-height : 5em;
max-width : 16%;
position : fixed;
bottom : 50%;
left : 1.4em;
z-index : 80;
text-align : center;
	color:white;
    -webkit-animation-name: hovering;
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: hovering;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    animation-name: hovering;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes hovering {
    from {-webkit-transform:translate(0, 0em);}
    50% {-webkit-transform:translate(0, -2em);}
    to {-webkit-transform: translate(0, -0em);}
}

@-moz-keyframes hovering {
    from {-moz-transform:translate(0, 0em);}
    50% {-moz-transform:translate(0, -2em);}
    to {-moz-transform: translate(0, -0em);}
}

@keyframes hovering {
    from {transform:translate(0, 0em);}
    50% {transform:translate(0, -2em);}
    to {transform: translate(0, -0em);}
}
	
#news2 {
font-family : 'Syncopate', sans-serif;
font-size: 0.8em;
text-decoration : none;
display: table-cell;
vertical-align: middle;
padding: 2em 0 2em 0;
min-height : 5em;
max-width : 16%;
position : fixed;
bottom : 30%;
left : 5.4em;
z-index : 80;
text-align : center;
	color:white;
    -webkit-animation-name: hovering;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: hovering;
    -moz-animation-duration: 8s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    animation-name: hovering;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes hovering {
    from {-webkit-transform:translate(0, 0em);}
    50% {-webkit-transform:translate(0, -2em);}
    to {-webkit-transform: translate(0, -0em);}
}

@-moz-keyframes hovering {
    from {-moz-transform:translate(0, 0em);}
    50% {-moz-transform:translate(0, -2em);}
    to {-moz-transform: translate(0, -0em);}
}

@keyframes hovering {
    from {transform:translate(0, 0em);}
    50% {transform:translate(0, -2em);}
    to {transform: translate(0, -0em);}
}

}	

}



#logo img{
background: white;color:black;
}
@media only screen and (max-width:46.875em) {
section .link {
width : 100%;
margin : 0 auto;
}
header img {
height : 3em;
width : auto;
position : fixed;
top : 1em;
left : 0;
background: white;color:black;
z-index : 80;
}
#slideshow {	
height : 8em;
width : 100%;
color:#fff;
background : #3450a2;
-moz-box-shadow: 1.313em 1.313em 0.438em #888; 
-webkit-box-shadow: 0em 0.713em 0.438em -0.4em#888;
}
#stapel {
height : 6em;
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: #3450a2; 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: #3450a2;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 : #3450a2;
border : white solid 0.063em;
z-index : 80;
}
a.toggle-nav:hover {
color : #3450a2;
background : white;
transition : background-color 1s;
border : #3450a2 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 : #3450a2;
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 :  #3450a2;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 :  #3450a2;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 :  #3450a2;color:black;
}
img.plan {
background :  #3450a2;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 #3450a2;
border-left : 0.25em solid #3450a2;
background: white;color:black;
z-index : 80;
}
#slideshow {	
height : 18em;
width : 100%;
color:#fff;
background : #3450a2;
-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: #3450a2;color: white; right:0em; width: 5em;}
50%  {background-color: #3450a2;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: #3450a2;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 : #3450a2;
border : white solid 0.063em;
z-index : 80;
}
a.toggle-nav:hover {
color : #3450a2;
background : white;
transition : background-color 1s;
border : #3450a2 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 : #3450a2;
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 :  #3450a2;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 :  #3450a2;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 :  #3450a2;color:black;
}
img.plan {
background :  #3450a2;color:black;
}


}



.firma{
margin-bottom : 1em;
}

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 : #3450a2;
color : white;
text-align : right;
border-top : 0.438em solid #3450a2;
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, #3450a2, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #3450a2, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #3450a2, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #3450a2, #f0f0f0);
  color:black;
  margin : 0 0 1em 0;
}



h1, h2 {
text-align : center;
color : #3450a2;
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 #3450a2;
z-index : 80;
text-align : center;
}
nav ul > li {
background : white;
margin-left : 0;
border-bottom : 0.063em solid #3450a2;;
}
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 : #3450a2;
color : white;
}
.link ul li a:hover {
background-color : white;
color : #3450a2;
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:#3450a2;
margin-bottom:4em;
}

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

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 :  #3450a2;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 :  #3450a2;color:black;
margin : 2em;
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;
}

.anrede
{display:block;
background :  #3450a2;color:white;
margin-bottom:2em;
}
p.frau
{display:block;
background :  #3450a2;color:white;
margin:1em 0 1em 0;
}
p.herr
{display:block;
background :  #3450a2;color:white;
margin:1em 0 1em 0;
}
.vorname
{display:block;
float :top;
width : 50%;
height : auto;
background :  white;color:#3450a2;
margin : 0 auto;
border : 0.2em solid  #3450a2;
margin-bottom:1em;
}
.nachname
{display:block;
float :top;
width : 50%;
height : auto;
background :  white;color:#3450a2;
margin : 0 auto;
border : 0.2em solid  #3450a2;
margin-bottom:1em;
}
.email
{display:block;
float :top;
width : 50%;
height : auto;
background :  white;color:#3450a2;
margin : 0 auto;
border : 0.2em solid  #3450a2;
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  #3450a2;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(52,80,162,.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(52,80,162,.8);
}

#close-lightbox {
  color:white;
  background:rgba(52,80,162,.8);
  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;
}

@media only screen and (max-width:46.875em) {
section {  display: inline-block;}

.leitung1 {
margin: 0 auto;
max-width:30%;
height: auto;
background :  #3450a2;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;
}
.leitung2 {
margin: 0 auto;
max-width:30%;
height: auto;
background :  #3450a2;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;
}
figure {
     margin: 0 auto;
	 width:100%;
	 height: auto;
 margin-left: 15%;
 padding: 1em;
 box-sizing: border-box;
}
figure:last-child {
     margin-right: 0;
}
figcaption {
  display: inline-block; 
  text-align: center;
	font-size: 1em;




}
}



@media only screen and (min-width:46.875em) {

section {  display: inline-block;}

.leitung1 {
margin: 0 auto;
max-width:20%;
height: auto;
background :  #3450a2;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;
}
.leitung2 {
margin: 0 auto;
max-width:100%;
height: auto;
background :  #3450a2;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;
}
figure {
     margin: 0 auto;
	 width:100%;
	 height: auto;
 margin-right: 0%;
 margin-bottom: 6%;
 padding: 0em;
 background: ;
 box-sizing: border-box;
}
figure:last-child {
     margin-right: 0;
}
figcaption {
  display: inline-block; 
  text-align: left;
	font-size: 0.8em;
}	





.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 { 
     float: left;
     max-width: 20%;
	 max-height: auto;
     margin-left:2.5%;
     margin-right: 2.4%;
     padding: 0.4em;
     background:;
     box-sizing: border-box;
}
.box4, .box8 {
     margin-right: 0;
}



}


section h4 {
text-align : center;
margin : 0 1.5em 1em 1.5em;
}

section h5 {
text-align : center;
margin : 0 1.5em 1em 1.5em;
}