@viewport {
   width: device-width;
   zoom: 1;
}

body { 
	background-image: url(Fotos-Vogel/Hintergrund.jpg);
}

div.mainBox {
	position: relative;
   background-color:#FFE;
    text-align: center;   
    margin: 0 auto;   
    width: 1020px;
    max-width: 80%;
    padding: 1.5em;  
}

.headline {
	max-width:67%;
	height:auto;
	position: relative;
	display:block;
	margin:0 auto; 	
}

.headline img{
	width:100% !important;
	height:auto !important;
	display:block;
}

.image-container {
	aspect-ratio: 4/2;
	/* overflow: hidden;	 */
	/* border: 5px solid green; */
}

#slider {
   /* background: rgb(123, 123, 123); */
   background:#FFE;
   /* border: 5px solid #fd96fd; */
   box-sizing:border-box;
   height: 100%;
   width: 100%;
   margin: auto 0;
   overflow: hidden;
   position: relative;
   /* border: 5px solid blue; */
}

#onframe {
  overflow: hidden;
  width: 100%;
  height: auto;

}

#onframe img{
	width:100% !important;
   max-width: 100%;
	height:auto !important;
	display:block;
  	/* border: 5px solid red; */
}

#slider figure {
   width:100% !important;
	height:auto !important;
	display:block;
   /*width: 320px;  /* Breite des Bildes */
   /*height: 360px; /* Höhe des Bildes */
   position: absolute;
   margin: 0;
   
   /* bottom: 360px;  */
   /* Originalposition - Nicht im sichtbaren Ausschnitt */

}
#slider .animate1a {
   animation: cycle1 58s linear infinite;
}
#slider .animate2a {
   animation: cycle2 58s linear infinite;
}
#slider .animate3a {
   animation: cycle3 58s linear infinite;
}
#slider .animate4a {
   animation: cycle4 58s linear infinite;
}
#slider .animate5a {
   animation: cycle5 58s linear infinite;
}
#slider .animate6a {
   animation: cycle6 58s linear infinite;
}
#slider .animate7a {
   animation: cycle7 58s linear infinite;
}
#slider .animate8a {
   animation: cycle8 58s linear infinite;
}
#slider .animate9a {
   animation: cycle9 58s linear infinite;
}

#slider .animate1b {
   animation: cycle1 61s linear infinite;
}
#slider .animate2b {
   animation: cycle2 61s linear infinite;
}
#slider .animate3b {
   animation: cycle3 61s linear infinite;
}
#slider .animate4b {
   animation: cycle4 61s linear infinite;
}
#slider .animate5b {
   animation: cycle5 61s linear infinite;
}
#slider .animate6b {
   animation: cycle6 61s linear infinite;
}
#slider .animate7b {
   animation: cycle7 61s linear infinite;
}
#slider .animate8b {
   animation: cycle8 61s linear infinite;
}
#slider .animate9b {
   animation: cycle9 61s linear infinite;
}

#slider .animate1c {
   animation: cycle1 75s linear infinite;
}
#slider .animate2c {
   animation: cycle2 75s linear infinite;
}
#slider .animate3c {
   animation: cycle3 75s linear infinite;
}
#slider .animate4c {
   animation: cycle4 75s linear infinite;
}
#slider .animate5c {
   animation: cycle5 75s linear infinite;
}
#slider .animate6c {
   animation: cycle6 75s linear infinite;
}
#slider .animate7c {
   animation: cycle7 75s linear infinite;
}
#slider .animate8c {
   animation: cycle8 75s linear infinite;
}
#slider .animate9c {
   animation: cycle9 75s linear infinite;
}

@keyframes cycle1 { 
   0%  { top: 0px; } 
   2%  { top: 0px; }
   9% { top: 0px; opacity:1;  } 
   11% { top: 0px; opacity: 0; }
   12% { top: 0px; opacity: 0; } 
   92% { top: 0px; opacity: 0; }
   98% { top: 0px; opacity: 0; } 
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycle2 { 
   0%  { top: 0px; opacity: 0; } 
   9% { top: 0px; opacity: 0; }
   11% { top: 0px; opacity: 1; }
   13% { top: 0px; opacity: 1; }  
   20% { top: 0px; opacity: 1; }   
   22% { top: 0px; opacity: 0; } 
   23% { top: 0px; opacity: 0; }   
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle3 {
   0%  { top: 0px; opacity: 0; }
   20% { top: 0px; opacity: 0; }
   22% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }
   31% { top: 0px; opacity: 1; }
   33% { top: 0px; opacity: 0; }
   34% { top: 0px; opacity: 0; }
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle4 {
   0%  { top: 0px; opacity: 0; }
   31% { top: 0px; opacity: 0; }
   33% { top: 0px; opacity: 1; }
   35% { top: 0px; opacity: 1; }
   42% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 0; }
   45% { top: 0px; opacity: 0; }
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle5 {
   0%  { top: 0px; opacity: 0; }
   42% { top: 0px; opacity: 0; }
   44% { top: 0px; opacity: 1; }
   46% { top: 0px; opacity: 1; }
   53% { top: 0px; opacity: 1; }
   55% { top: 0px; opacity: 0; }
   56% { top: 0px; opacity: 0; }
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle6 {
   0%  { top: 0px; opacity: 0; }
   53% { top: 0px; opacity: 0; }
   55% { top: 0px; opacity: 1; }
   57% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   66% { top: 0px; opacity: 0; }
   67% { top: 0px; opacity: 0; }
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle7 {
   0%  { top: 0px; opacity: 0; }
   64% { top: 0px; opacity: 0; }
   66% { top: 0px; opacity: 1; }
   68% { top: 0px; opacity: 1; }
   75% { top: 0px; opacity: 1; }
   77% { top: 0px; opacity: 0; }
   78% { top: 0px; opacity: 0; }
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle8 {
   0%  { top: 0px; opacity: 0; }
   75% { top: 0px; opacity: 0; }
   77% { top: 0px; opacity: 1; }
   79% { top: 0px; opacity: 1; }
   86% { top: 0px; opacity: 1; }
   88% { top: 0px; opacity: 0; }
   89% { top: 0px; opacity: 0; }
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle9 {
   0%  { top: 0px; opacity: 0; }
   86% { top: 0px; opacity: 0; }
   88% { top: 0px; opacity: 1; }
   90% { top: 0px; opacity: 1; }
   98% { top: 0px; opacity: 1; }
   100%{ top: 0px; opacity: 0; }
}

#pfeilR {
	position: absolute;
	right: 0;
	top: 0;
}
#pfeilL {
	position: absolute;
	left: 0;
	top: 0;
}
.text {
	text-align: left;
	max-width: 93%;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.9em;
	margin: 5px 25px 25px 25px;
}
#subtext {
	position: relative;
	left: 9%;
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.8em;
	font-style: italic;
}