#onframe {
   overflow: hidden;
   height: 360px;
}
#slider {
	background-image: radial-gradient( circle farthest-corner at -4.1% 49.8%,  rgba(247,127,127,1) 0%, rgba(255,175,90,1) 20.8%, rgba(151,255,114,1) 43.8%, rgba(149,251,255,1) 65.2%, rgba(147,145,255,1) 84.3%, rgba(255,147,248,1) 100.2% );
/*	   background-image: radial-gradient( circle farthest-corner at 50.7% 54%,  rgba(204,254,152,1) 0%, rgba(229,253,190,1) 92.4% );*/
   border: 5px solid #b0c4de;
   box-sizing:border-box;
   height: 370px;
   width: 90%;
   margin: 40px auto 0;
   overflow: hidden;
   position: relative;
}

#slider figure {
   width: 680px;  /* Breite des Bildes */
   height: 360px; /* Höhe des Bildes */
   position: absolute;
   margin: 0;
   bottom: 360px; /* Originalposition - Nicht im sichtbaren Ausschnitt */
   left: calc(50% - 360px); /* Setzt Bild in die Mitte des sichtbaren Ausschnitts */
}

#slider .animate1 {
   animation: cycle1 25s linear infinite;
}

#slider .animate2 {
   animation: cycle2 25s linear infinite;
}

#slider .animate3 {
   animation: cycle3 25s linear infinite;
}

#slider .animate4 {
   animation: cycle4 25s linear infinite;
}

#slider .animate5 {
   animation: cycle5 25s linear infinite;
}

/** 5 Bilder jeweils 5 Sekunden sichtbar: 25 Sekunden für die gesamte Animation **/


@keyframes cycle1 {
   0%  { top: 0px; } /* Am Anfang der Slideshow ist das erste Bild sichtbar */
   4%  { top: 0px; } /* Bild steht noch auf der Startposition */
   16% { top: 0px; opacity:1; z-index:0; } /* Von 4% bis 16 % ist das Bild für 3 Sekunden sichtbar */
   20% { top: -325px; opacity: 0; z-index: 0; } /* Von 16% bis 20% = 1 Sekunde für Slide Out */
   21% { top: 325px; opacity: 0; z-index: -1; } /* Zurück auf die Originalposition */
   92% { top: 325px; opacity: 0; z-index: 0; }
   96% { top: 325px; opacity: 0; } /* Von 96% bis 100% = 1 Sekunde für Slide In */
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycle2 {
   0%  { top: 325px; opacity: 0; } /* Originalposition außer Sicht */
   16% { top: 325px; opacity: 0; }/* Beginnt mit der Bewegung */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* Von 20% bis 24% = 1 Sekunde für Slide In */
   36% { top: 0px; opacity: 1; z-index: 0; }   /* Von 24% bis 36 % = Bild für 3 Sekunden sichtbar */
   40% { top: -325px; opacity: 0; z-index: 0; } /* Von 36% bis 40% = 1 Sekunde für Slide Out */
   41% { top: 325px; opacity: 0; z-index: -1; }   /* Zurück auf die Originalposition */
   100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle3 {
   0%  { top: 325px; opacity: 0; }
   36% { top: 325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: -325px; opacity: 0; z-index: 0; }
   61% { top: 325px; opacity: 0; z-index: -1; }
   100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle4 {
   0%  { top: 325px; opacity: 0; }
   56% { top: 325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: -325px; opacity: 0; z-index: 0; }
   81% { top: 325px; opacity: 0; z-index: -1; }
   100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle5 {
   0%  { top: 325px; opacity: 0; }
   76% { top: 325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: -325px; opacity: 0; z-index: 0; }
}

.progress-bar {
   position: relative;
   top: -5px;
   width: 680px;
   height: 5px;
   background: none;
   animation: fullexpand 25s ease-out infinite;
}

@keyframes fullexpand {
   /* Anfang: Fortschrittsbalken steht ist nicht sichtbar */
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

   /* Fortschrittsbalken bereit zum Start */
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0; }

   /* Fortschrittsbalken läuft 3 Sekunden an */
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0; }

   /* Fortschrittsbalken hat Ende erreicht */
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0; }

   /* Fortschrittsbalken wird unsichtbar und beginnt einen neuen Durchlauf */
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

#slider .label {
   background: hsla(0,0%,100%,0.5);
   width: 100%;
   height: 50px;
   padding-top: 20px; 
   box-sizing: border-box;
   position: absolute;
   left: -1000px;
   line-height:200%;
   bottom: 4px;
   padding: 0;
   margin: 0;
   color: darkslategray;
   text-align: center;
   font-size: 1.5em;
   box-sizing: border-box;
   transition: left 0.3s ease-in-out;
}

#slider li:hover .label {
   left: 0px;
}

#slider:hover li,
#slider:hover .progress-bar {
   animation-play-state: paused;
}

#slider figure.toggle .label {
   left: 0px;
}

#slider figure.toggle,
#slider.toggle .progress-bar {
   animation-play-state: paused;
}