/* 8-BILDERSLIDESHOW - für INDEX */


#indexbg1 {
    width: 100%;
    position: absolute;
    z-index: 51;
    top: -250px;
}		


@media only screen and (max-width: 1200px) {
#indexbg1{
top: -170px;
}
}
@media only screen and (max-width: 950px) {
#indexbg1{
top: -80px;
}
}
@media only screen and (max-width: 810px) {
#indexbg1{
top: 0;
}
}

#indexbg2 {
    width: 100%;
    position: absolute;
	top: -130px;

    
    -webkit-animation-name: bg2;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite;  
	
	animation-name: bg2;
    animation-duration: 50s;
	animation-iteration-count: infinite;

    z-index: 52;
}	
@media only screen and (max-width: 900px) {
#indexbg2{
top: 0px;
}	
}	

#indexbg3 {
    width: 100%;
    position: absolute;
    top: -200px;

    -webkit-animation-name: bg3;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg3;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	     
    z-index: 53;
}	

@media only screen and (max-width: 1150px) {
#indexbg3{
top: -80px;
}
}	

@media only screen and (max-width: 800px) {
#indexbg3{
top: 0px;
}
}	

#indexbg4 {
    width: 100%;
    position: absolute;
    
    -webkit-animation-name: bg4;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg4;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	
	z-index:54;
}

#indexbg5 {
    width: 100%;
    position: absolute;
    
    -webkit-animation-name: bg5;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg5;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 55;
}

#indexbg6 {
    width: 100%;
    position: absolute;
    top: -180px;
    
    -webkit-animation-name: bg6;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg6;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 56;
}
@media only screen and (max-width: 1080px) {
#indexbg6{
top: -70px;
}
}	

@media only screen and (max-width: 800px) {
#indexbg6{
top: 0;
}
}

#indexbg7 {
    width: 100%;
    position: absolute;
    top: -250px;
    
    -webkit-animation-name: bg7;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg7;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 57;
}
    
@media only screen and (max-width: 1120px) {
#indexbg7{
top: -150px;
}
}	

@media only screen and (max-width: 940px) {
#indexbg7{
top: -50px;
}
}

@media only screen and (max-width: 760px) {
#indexbg7{
top: 0;
}
}


#indexbg8 {
    width: 100%;
    position: absolute;
    top: -250px;
    
    -webkit-animation-name: bg8;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg8;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 58;
}

@media only screen and (max-width: 1120px) {
#indexbg8{
top: -150px;
}
}	

@media only screen and (max-width: 940px) {
#indexbg8{
top: -50px;
}
}

@media only screen and (max-width: 760px) {
#indexbg8{
top: 0;
}
}

/* ------------------------------------------------------------- */


/* 8-BILDERSLIDESHOW */


#bg1 {
    width: 100%;
    position: absolute;
    
    z-index: 51;
}		

#bg2 {
    width: 100%;
    position: absolute;
    
    -webkit-animation-name: bg2;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite;  
	
	animation-name: bg2;
    animation-duration: 50s;
	animation-iteration-count: infinite;

    z-index: 52;
}		

#bg3 {
    width: 100%;
    position: absolute;
    
    -webkit-animation-name: bg3;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg3;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	     
    z-index: 53;
}	

#bg4 {
    width: 100%;
    position: absolute;
    
    -webkit-animation-name: bg4;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg4;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	
	z-index:54;
}

#bg5 {
    width: 100%;
    position: absolute;
    
    -webkit-animation-name: bg5;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg5;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 55;
}

#bg6 {
    width: 100%;
    position: absolute;
    
    -webkit-animation-name: bg6;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg6;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 56;
}

#bg7 {
    width: 100%;
    position: absolute;
    
    -webkit-animation-name: bg7;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg7;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 57;
}

#bg8 {
    width: 100%;
    position: absolute;
    
    -webkit-animation-name: bg8;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: bg8;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 58;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bg2 {
    0%   {opacity: 0;}
    11%	 {opacity: 0;}
    13%	 {opacity: 1;}
    25%	 {opacity: 1;}
    26%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes bg2 {
    0%   {opacity: 0;}
    11%	 {opacity: 0;}
    13%	 {opacity: 1;}
    25%	 {opacity: 1;}
    26%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bg3 {
    0%   {opacity: 0;}
    24%	 {opacity: 0;}
    26%	 {opacity: 1;}
    38%	 {opacity: 1;}
    39%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes bg3 {
    0%   {opacity: 0;}
    24%	 {opacity: 0;}
    26%	 {opacity: 1;}
    38%	 {opacity: 1;}
    39%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bg4 {
     0%  {opacity: 0;}
    37%	 {opacity: 0;}
    39%	 {opacity: 1;}
    51%	 {opacity: 1;}
    52%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes bg4 {
    0%   {opacity: 0;}
    37%	 {opacity: 0;}
    39%	 {opacity: 1;}
    51%	 {opacity: 1;}
    52%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bg5 {
    0%   {opacity: 0;}
    50%	 {opacity: 0;}
    52%	 {opacity: 1;}
    64%	 {opacity: 1;}
    65%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes bg5 {
    0%   {opacity: 0;}
    50%	 {opacity: 0;}
    52%	 {opacity: 1;}
    64%	 {opacity: 1;}
    65%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bg6 {
    0%   {opacity: 0;}
    63%	 {opacity: 0;}
    65%	 {opacity: 1;}
    76%	 {opacity: 1;}
    77%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes bg6 {
    0%   {opacity: 0;}
    63%	 {opacity: 0;}
    65%	 {opacity: 1;}
    76%	 {opacity: 1;}
    77%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bg7 {
    0%   {opacity: 0;}
    75%	 {opacity: 0;}
    77%	 {opacity: 1;}
    88%	 {opacity: 1;}
    89%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes bg7 {
    0%   {opacity: 0;}
    75%	 {opacity: 0;}
    77%	 {opacity: 1;}
    88%	 {opacity: 1;}
    89%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bg8 {
    0%   {opacity: 0;}
    87%	 {opacity: 0;}
    89%	 {opacity: 1;}
    99%	 {opacity: 1;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes bg8 {
    0%  {opacity: 0;}
    87%	 {opacity: 0;}
    89%	 {opacity: 1;}
    99%	 {opacity: 1;}
    100% {opacity: 0;}
}

/* --------------------------------------------------------------- */

/* 10-BILDERSLIDESHOW */

#start1 {
    width: 25%;
    position: absolute;
    
    z-index: 51;
}		

#start2 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: start2;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite;  
	
	animation-name: start2;
    animation-duration: 50s;
	animation-iteration-count: infinite;

    z-index: 52;
}		

#start3 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: start3;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: start3;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	     
    z-index: 53;
}	

#start4 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: start4;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: start4;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	
	z-index:54;
}

#start5 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: start5;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: start5;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 55;
}

#start6 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: start6;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: start6;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 56;
}

#start7 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: start7;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: start7;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 57;
}

#start8 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: start8;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: start8;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 58;
}

#start9 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: start9;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: start9;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 59;
}

#start10 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: start10;
    -webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite; 
	
	animation-name: start10;
    animation-duration: 50s;
	animation-iteration-count: infinite;  
	  
    z-index: 60;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes start2 {
    0%   {opacity: 0;}
    9%	 {opacity: 0;}
    10%	 {opacity: 1;}
    19%	 {opacity: 1;}
    20%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes start2 {
    0%   {opacity: 0;}
    9%	 {opacity: 0;}
    10%	 {opacity: 1;}
    19%	 {opacity: 1;}
    20%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes start3 {
    0%   {opacity: 0;}
    19%	 {opacity: 0;}
    20%	 {opacity: 1;}
    29%	 {opacity: 1;}
    30%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes start3 {
    0%   {opacity: 0;}
    19%	 {opacity: 0;}
    20%	 {opacity: 1;}
    29%	 {opacity: 1;}
    30%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes start4 {
     0%  {opacity: 0;}
    29%	 {opacity: 0;}
    30%	 {opacity: 1;}
    39%	 {opacity: 1;}
    40%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes start4 {
    0%  {opacity: 0;}
    29%	 {opacity: 0;}
    30%	 {opacity: 1;}
    39%	 {opacity: 1;}
    40%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes start5 {
    0%   {opacity: 0;}
    39%	 {opacity: 0;}
    40%	 {opacity: 1;}
    49%	 {opacity: 1;}
    50%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes start5 {
    0%   {opacity: 0;}
    39%	 {opacity: 0;}
    40%	 {opacity: 1;}
    49%	 {opacity: 1;}
    50%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes start6 {
    0%   {opacity: 0;}
    49%	 {opacity: 0;}
    50%	 {opacity: 1;}
    59%	 {opacity: 1;}
    60%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes start6 {
    0%   {opacity: 0;}
    49%	 {opacity: 0;}
    50%	 {opacity: 1;}
    59%	 {opacity: 1;}
    60%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes start7 {
    0%   {opacity: 0;}
    59%	 {opacity: 0;}
    60%	 {opacity: 1;}
    69%	 {opacity: 1;}
    70%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes start7 {
    0%   {opacity: 0;}
    59%	 {opacity: 0;}
    60%	 {opacity: 1;}
    69%	 {opacity: 1;}
    70%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes start8 {
    0%   {opacity: 0;}
    69%	 {opacity: 0;}
    70%	 {opacity: 1;}
    79%	 {opacity: 1;}
    80%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes start8 {
    0%   {opacity: 0;}
    69%	 {opacity: 0;}
    70%	 {opacity: 1;}
    79%	 {opacity: 1;}
    80%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes start9 {
    0%   {opacity: 0;}
    79%	 {opacity: 0;}
    80%	 {opacity: 1;}
    89%	 {opacity: 1;}
    90%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes start9 {
    0%   {opacity: 0;}
    79%	 {opacity: 0;}
    80%	 {opacity: 1;}
    89%	 {opacity: 1;}
    90%  {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes start10 {
    0%   {opacity: 0;}
    89%	 {opacity: 0;}
    90%	 {opacity: 1;}
    99%	 {opacity: 1;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes start10 {
    0%   {opacity: 0;}
    89%	 {opacity: 0;}
    90%	 {opacity: 1;}
    99%	 {opacity: 1;}
    100% {opacity: 0;}
}

/* 2-BILDERSLIDESHOW */


#zweier1 {
    width: 25%;
    position: absolute;
    
    z-index: 51;
}		

#zweier2 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: zweier2;
    -webkit-animation-duration: 12s;
	-webkit-animation-iteration-count: infinite;  
	
	animation-name: zweier2;
    animation-duration: 12s;
	animation-iteration-count: infinite;

    z-index: 52;
}		



/* Chrome, Safari, Opera */
@-webkit-keyframes zweier2 {
    0%   {opacity: 0;}
    46%	 {opacity: 0;}
    50%	 {opacity: 1;}
    95%	 {opacity: 1;}
    99%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes zweier2 {
     0%   {opacity: 0;}
    46%	 {opacity: 0;}
    50%	 {opacity: 1;}
    95%	 {opacity: 1;}
    99%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* 3-BILDERSLIDESHOW */


#dreier1 {
    width: 25%;
    position: absolute;
    
    z-index: 51;
}		

#dreier2 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: dreier2;
    -webkit-animation-duration: 16s;
	-webkit-animation-iteration-count: infinite;  
	
	animation-name: dreier2;
    animation-duration: 16s;
	animation-iteration-count: infinite;

    z-index: 52;
}		

#dreier3 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: dreier3;
    -webkit-animation-duration: 16s;
	-webkit-animation-iteration-count: infinite;  
	
	animation-name: dreier3;
    animation-duration: 16s;
	animation-iteration-count: infinite;

    z-index: 53;
}		



/* Chrome, Safari, Opera */
@-webkit-keyframes dreier2 {
    0%   {opacity: 0;}
    30%	 {opacity: 0;}
    33%	 {opacity: 1;}
    70%	 {opacity: 1;}
    71%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes dreier2 {
    0%   {opacity: 0;}
    30%	 {opacity: 0;}
    33%	 {opacity: 1;}
    70%	 {opacity: 1;}
    71%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes dreier3 {
    0%   {opacity: 0;}
    63%	 {opacity: 0;}
    66%	 {opacity: 1;}
    96%	 {opacity: 1;}
    99%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes dreier3 {
     0%   {opacity: 0;}
    63%	 {opacity: 0;}
    66%	 {opacity: 1;}
    96%	 {opacity: 1;}
    99%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* 4-BILDERSLIDESHOW */


#vierer1 {
    width: 25%;
    position: absolute;
    
    z-index: 51;
}		

#vierer2 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: vierer2;
    -webkit-animation-duration: 24s;
	-webkit-animation-iteration-count: infinite;  
	
	animation-name: vierer2;
    animation-duration: 24s;
	animation-iteration-count: infinite;

    z-index: 52;
}		

#vierer3 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: vierer3;
    -webkit-animation-duration: 24s;
	-webkit-animation-iteration-count: infinite;  
	
	animation-name: vierer3;
    animation-duration: 24s;
	animation-iteration-count: infinite;

    z-index: 53;
}		

#vierer4 {
    width: 25%;
    position: absolute;
    
    -webkit-animation-name: vierer4;
    -webkit-animation-duration: 24s;
	-webkit-animation-iteration-count: infinite;  
	
	animation-name: vierer4;
    animation-duration: 24s;
	animation-iteration-count: infinite;

    z-index: 54;
}	



/* Chrome, Safari, Opera */
@-webkit-keyframes vierer2 {
    0%   {opacity: 0;}
    23%	 {opacity: 0;}
    25%	 {opacity: 1;}
    55%	 {opacity: 1;}
    57%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes vierer2 {
	0%   {opacity: 0;}
    23%	 {opacity: 0;}
    25%	 {opacity: 1;}
    55%	 {opacity: 1;}
    57%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes vierer3 {
    0%   {opacity: 0;}
    50%	 {opacity: 0;}
    52%	 {opacity: 1;}
    77%	 {opacity: 1;}
    79%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes vierer3 {
     0%   {opacity: 0;}
    50%	 {opacity: 0;}
    52%	 {opacity: 1;}
    77%	 {opacity: 1;}
    79%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes vierer4 {
    0%   {opacity: 0;}
    73%	 {opacity: 0;}
    75%	 {opacity: 1;}
    97%	 {opacity: 1;}
    99%	 {opacity: 0;}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes vierer4 {
	0%   {opacity: 0;}
    73%	 {opacity: 0;}
    75%	 {opacity: 1;}
    97%	 {opacity: 1;}
    99%	 {opacity: 0;}
    100% {opacity: 0;}
}