@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 */
   /*left: calc(80% - 360px); /* Setzt Bild in die Mitte des sichtbaren Ausschnitts */
}
#slider .animate1a {
   animation: cycle1 61s linear infinite;
}
#slider .animate2a {
   animation: cycle2 61s linear infinite;
}
#slider .animate3a {
   animation: cycle3 61s linear infinite;
}
#slider .animate4a {
   animation: cycle4 61s linear infinite;
}
#slider .animate5a {
   animation: cycle5 61s linear infinite;
}
#slider .animate6a {
   animation: cycle6 61s linear infinite;
}
#slider .animate7a {
   animation: cycle7 61s linear infinite;
}
#slider .animate8a {
   animation: cycle8 61s linear infinite;
}

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

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

@keyframes cycle1 { 
   0%  { top: 0px; } 
   2%  { top: 0px; }
   11% { top: 0px; opacity:1;  } 
   13% { top: 0px; opacity: 0; }
   14% { 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; } 
   11% { top: 0px; opacity: 0; }
   13% { top: 0px; opacity: 1; }
   15% { top: 0px; opacity: 1; }  
   23% { top: 0px; opacity: 1; }   
   25% { top: 0px; opacity: 0; } 
   26% { top: 0px; opacity: 0; }   
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle3 {
   0%  { top: 0px; opacity: 0; }
   23% { top: 0px; opacity: 0; }
   25% { top: 0px; opacity: 1; }
   27% { top: 0px; opacity: 1; }
   36% { top: 0px; opacity: 1; }
   38% { top: 0px; opacity: 0; }
   39% { top: 0px; opacity: 0; }
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle4 {
   0%  { top: 0px; opacity: 0; }
   36% { top: 0px; opacity: 0; }
   38% { top: 0px; opacity: 1; }
   40% { top: 0px; opacity: 1; }
   48% { top: 0px; opacity: 1; }
   50% { top: 0px; opacity: 0; }
   51% { top: 0px; opacity: 0; }
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle5 {
   0%  { top: 0px; opacity: 0; }
   48% { top: 0px; opacity: 0; }
   50% { top: 0px; opacity: 1; }
   52% { top: 0px; opacity: 1; }
   61% { top: 0px; opacity: 1; }
   63% { top: 0px; opacity: 0; }
   64% { top: 0px; opacity: 0; }
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle6 {
   0%  { top: 0px; opacity: 0; }
   61% { top: 0px; opacity: 0; }
   63% { top: 0px; opacity: 1; }
   65% { top: 0px; opacity: 1; }
   73% { top: 0px; opacity: 1; }
   75% { top: 0px; opacity: 0; }
   76% { top: 0px; opacity: 0; }
   100%{ top: 0px; opacity: 0; }
}

@keyframes cycle7 {
   0%  { top: 0px; opacity: 0; }
   73% { top: 0px; opacity: 0; }
   75% { top: 0px; opacity: 1; }
   77% { 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 cycle8 {
   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;
}