/*
Note: 
	This file was generated, do not change here.  
	This file is copyrighted.

Name: 
	Ruegenmagic CSS-only image fader

Version:
	2021-09-18

Generated:
	2021-10-24

Usage:
	<figure class="my-fade my-fade-3">
		<figure>
			<img src="...">
			<figcaption>...</figcaption>			
		</figure>
		<figure>
			<img src="...">
			<figcaption>...</figcaption>			
		</figure>
		<figure>
			<img src="...">
			<figcaption>...</figcaption>			
		</figure>
	</figure>

	Min:  my-fade-2   for  2 images
	Max:  my-fade-10  for 10 images

*/




.my-fade
{
	position: relative;
	overflow: hidden;
}

.my-fade figure
{
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.my-fade figure + figure
{
	position: absolute;
	left: 0;
	top: 0;
}

.my-fade figure img
{
	width: 100%;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-name: ss-zoom;    
	animation-duration: 7.5s;
}

.my-fade figure figcaption
{
	position: absolute;
	bottom: 0em;
	left: 0;
	z-index: 100;
	width: 100%;
	color: #444;
	background-image: url(/bg11.gif);
}

@keyframes ss-zoom 
{
	  0% { transform: scale(1.00); }
	100% { transform: scale(1.13); }
}






@keyframes ss-fade-2 {
0% { opacity: 1; }
20% { opacity: 1; }
50% { opacity: 0; }
70% { opacity: 0; }
100% { opacity: 1; }
}
.my-fade-2 figure { animation-name: ss-fade-2; animation-duration: 10s; }
.my-fade-2 figure:nth-child(1)                   { animation-delay: 5s; }
.my-fade-2 figure:nth-child(1) img               { animation-delay: 2.5s; }
.my-fade-2 figure:nth-child(1) figcaption:before { content: "Abb. 2\2009/\2009" "2: " !important; }
.my-fade-2 figure:nth-child(2)                   { animation-delay: 0s; }
.my-fade-2 figure:nth-child(2) img               { animation-delay: -2.5s; }
.my-fade-2 figure:nth-child(2) figcaption:before { content: "Abb. 1\2009/\2009" "2: " !important; }


@keyframes ss-fade-3 {
0% { opacity: 1; }
13.333333333333% { opacity: 1; }
33.333333333333% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
.my-fade-3 figure { animation-name: ss-fade-3; animation-duration: 15s; }
.my-fade-3 figure:nth-child(1)                   { animation-delay: 10s; }
.my-fade-3 figure:nth-child(1) img               { animation-delay: 7.5s; }
.my-fade-3 figure:nth-child(1) figcaption:before { content: "Abb. 3\2009/\2009" "3: " !important; }
.my-fade-3 figure:nth-child(2)                   { animation-delay: 5s; }
.my-fade-3 figure:nth-child(2) img               { animation-delay: 2.5s; }
.my-fade-3 figure:nth-child(2) figcaption:before { content: "Abb. 2\2009/\2009" "3: " !important; }
.my-fade-3 figure:nth-child(3)                   { animation-delay: 0s; }
.my-fade-3 figure:nth-child(3) img               { animation-delay: -2.5s; }
.my-fade-3 figure:nth-child(3) figcaption:before { content: "Abb. 1\2009/\2009" "3: " !important; }


@keyframes ss-fade-4 {
0% { opacity: 1; }
10% { opacity: 1; }
25% { opacity: 0; }
85% { opacity: 0; }
100% { opacity: 1; }
}
.my-fade-4 figure { animation-name: ss-fade-4; animation-duration: 20s; }
.my-fade-4 figure:nth-child(1)                   { animation-delay: 15s; }
.my-fade-4 figure:nth-child(1) img               { animation-delay: 12.5s; }
.my-fade-4 figure:nth-child(1) figcaption:before { content: "Abb. 4\2009/\2009" "4: " !important; }
.my-fade-4 figure:nth-child(2)                   { animation-delay: 10s; }
.my-fade-4 figure:nth-child(2) img               { animation-delay: 7.5s; }
.my-fade-4 figure:nth-child(2) figcaption:before { content: "Abb. 3\2009/\2009" "4: " !important; }
.my-fade-4 figure:nth-child(3)                   { animation-delay: 5s; }
.my-fade-4 figure:nth-child(3) img               { animation-delay: 2.5s; }
.my-fade-4 figure:nth-child(3) figcaption:before { content: "Abb. 2\2009/\2009" "4: " !important; }
.my-fade-4 figure:nth-child(4)                   { animation-delay: 0s; }
.my-fade-4 figure:nth-child(4) img               { animation-delay: -2.5s; }
.my-fade-4 figure:nth-child(4) figcaption:before { content: "Abb. 1\2009/\2009" "4: " !important; }


@keyframes ss-fade-5 {
0% { opacity: 1; }
8% { opacity: 1; }
20% { opacity: 0; }
88% { opacity: 0; }
100% { opacity: 1; }
}
.my-fade-5 figure { animation-name: ss-fade-5; animation-duration: 25s; }
.my-fade-5 figure:nth-child(1)                   { animation-delay: 20s; }
.my-fade-5 figure:nth-child(1) img               { animation-delay: 17.5s; }
.my-fade-5 figure:nth-child(1) figcaption:before { content: "Abb. 5\2009/\2009" "5: " !important; }
.my-fade-5 figure:nth-child(2)                   { animation-delay: 15s; }
.my-fade-5 figure:nth-child(2) img               { animation-delay: 12.5s; }
.my-fade-5 figure:nth-child(2) figcaption:before { content: "Abb. 4\2009/\2009" "5: " !important; }
.my-fade-5 figure:nth-child(3)                   { animation-delay: 10s; }
.my-fade-5 figure:nth-child(3) img               { animation-delay: 7.5s; }
.my-fade-5 figure:nth-child(3) figcaption:before { content: "Abb. 3\2009/\2009" "5: " !important; }
.my-fade-5 figure:nth-child(4)                   { animation-delay: 5s; }
.my-fade-5 figure:nth-child(4) img               { animation-delay: 2.5s; }
.my-fade-5 figure:nth-child(4) figcaption:before { content: "Abb. 2\2009/\2009" "5: " !important; }
.my-fade-5 figure:nth-child(5)                   { animation-delay: 0s; }
.my-fade-5 figure:nth-child(5) img               { animation-delay: -2.5s; }
.my-fade-5 figure:nth-child(5) figcaption:before { content: "Abb. 1\2009/\2009" "5: " !important; }


@keyframes ss-fade-6 {
0% { opacity: 1; }
6.6666666666667% { opacity: 1; }
16.666666666667% { opacity: 0; }
90% { opacity: 0; }
100% { opacity: 1; }
}
.my-fade-6 figure { animation-name: ss-fade-6; animation-duration: 30s; }
.my-fade-6 figure:nth-child(1)                   { animation-delay: 25s; }
.my-fade-6 figure:nth-child(1) img               { animation-delay: 22.5s; }
.my-fade-6 figure:nth-child(1) figcaption:before { content: "Abb. 6\2009/\2009" "6: " !important; }
.my-fade-6 figure:nth-child(2)                   { animation-delay: 20s; }
.my-fade-6 figure:nth-child(2) img               { animation-delay: 17.5s; }
.my-fade-6 figure:nth-child(2) figcaption:before { content: "Abb. 5\2009/\2009" "6: " !important; }
.my-fade-6 figure:nth-child(3)                   { animation-delay: 15s; }
.my-fade-6 figure:nth-child(3) img               { animation-delay: 12.5s; }
.my-fade-6 figure:nth-child(3) figcaption:before { content: "Abb. 4\2009/\2009" "6: " !important; }
.my-fade-6 figure:nth-child(4)                   { animation-delay: 10s; }
.my-fade-6 figure:nth-child(4) img               { animation-delay: 7.5s; }
.my-fade-6 figure:nth-child(4) figcaption:before { content: "Abb. 3\2009/\2009" "6: " !important; }
.my-fade-6 figure:nth-child(5)                   { animation-delay: 5s; }
.my-fade-6 figure:nth-child(5) img               { animation-delay: 2.5s; }
.my-fade-6 figure:nth-child(5) figcaption:before { content: "Abb. 2\2009/\2009" "6: " !important; }
.my-fade-6 figure:nth-child(6)                   { animation-delay: 0s; }
.my-fade-6 figure:nth-child(6) img               { animation-delay: -2.5s; }
.my-fade-6 figure:nth-child(6) figcaption:before { content: "Abb. 1\2009/\2009" "6: " !important; }


@keyframes ss-fade-7 {
0% { opacity: 1; }
5.7142857142857% { opacity: 1; }
14.285714285714% { opacity: 0; }
91.428571428571% { opacity: 0; }
100% { opacity: 1; }
}
.my-fade-7 figure { animation-name: ss-fade-7; animation-duration: 35s; }
.my-fade-7 figure:nth-child(1)                   { animation-delay: 30s; }
.my-fade-7 figure:nth-child(1) img               { animation-delay: 27.5s; }
.my-fade-7 figure:nth-child(1) figcaption:before { content: "Abb. 7\2009/\2009" "7: " !important; }
.my-fade-7 figure:nth-child(2)                   { animation-delay: 25s; }
.my-fade-7 figure:nth-child(2) img               { animation-delay: 22.5s; }
.my-fade-7 figure:nth-child(2) figcaption:before { content: "Abb. 6\2009/\2009" "7: " !important; }
.my-fade-7 figure:nth-child(3)                   { animation-delay: 20s; }
.my-fade-7 figure:nth-child(3) img               { animation-delay: 17.5s; }
.my-fade-7 figure:nth-child(3) figcaption:before { content: "Abb. 5\2009/\2009" "7: " !important; }
.my-fade-7 figure:nth-child(4)                   { animation-delay: 15s; }
.my-fade-7 figure:nth-child(4) img               { animation-delay: 12.5s; }
.my-fade-7 figure:nth-child(4) figcaption:before { content: "Abb. 4\2009/\2009" "7: " !important; }
.my-fade-7 figure:nth-child(5)                   { animation-delay: 10s; }
.my-fade-7 figure:nth-child(5) img               { animation-delay: 7.5s; }
.my-fade-7 figure:nth-child(5) figcaption:before { content: "Abb. 3\2009/\2009" "7: " !important; }
.my-fade-7 figure:nth-child(6)                   { animation-delay: 5s; }
.my-fade-7 figure:nth-child(6) img               { animation-delay: 2.5s; }
.my-fade-7 figure:nth-child(6) figcaption:before { content: "Abb. 2\2009/\2009" "7: " !important; }
.my-fade-7 figure:nth-child(7)                   { animation-delay: 0s; }
.my-fade-7 figure:nth-child(7) img               { animation-delay: -2.5s; }
.my-fade-7 figure:nth-child(7) figcaption:before { content: "Abb. 1\2009/\2009" "7: " !important; }


@keyframes ss-fade-8 {
0% { opacity: 1; }
5% { opacity: 1; }
12.5% { opacity: 0; }
92.5% { opacity: 0; }
100% { opacity: 1; }
}
.my-fade-8 figure { animation-name: ss-fade-8; animation-duration: 40s; }
.my-fade-8 figure:nth-child(1)                   { animation-delay: 35s; }
.my-fade-8 figure:nth-child(1) img               { animation-delay: 32.5s; }
.my-fade-8 figure:nth-child(1) figcaption:before { content: "Abb. 8\2009/\2009" "8: " !important; }
.my-fade-8 figure:nth-child(2)                   { animation-delay: 30s; }
.my-fade-8 figure:nth-child(2) img               { animation-delay: 27.5s; }
.my-fade-8 figure:nth-child(2) figcaption:before { content: "Abb. 7\2009/\2009" "8: " !important; }
.my-fade-8 figure:nth-child(3)                   { animation-delay: 25s; }
.my-fade-8 figure:nth-child(3) img               { animation-delay: 22.5s; }
.my-fade-8 figure:nth-child(3) figcaption:before { content: "Abb. 6\2009/\2009" "8: " !important; }
.my-fade-8 figure:nth-child(4)                   { animation-delay: 20s; }
.my-fade-8 figure:nth-child(4) img               { animation-delay: 17.5s; }
.my-fade-8 figure:nth-child(4) figcaption:before { content: "Abb. 5\2009/\2009" "8: " !important; }
.my-fade-8 figure:nth-child(5)                   { animation-delay: 15s; }
.my-fade-8 figure:nth-child(5) img               { animation-delay: 12.5s; }
.my-fade-8 figure:nth-child(5) figcaption:before { content: "Abb. 4\2009/\2009" "8: " !important; }
.my-fade-8 figure:nth-child(6)                   { animation-delay: 10s; }
.my-fade-8 figure:nth-child(6) img               { animation-delay: 7.5s; }
.my-fade-8 figure:nth-child(6) figcaption:before { content: "Abb. 3\2009/\2009" "8: " !important; }
.my-fade-8 figure:nth-child(7)                   { animation-delay: 5s; }
.my-fade-8 figure:nth-child(7) img               { animation-delay: 2.5s; }
.my-fade-8 figure:nth-child(7) figcaption:before { content: "Abb. 2\2009/\2009" "8: " !important; }
.my-fade-8 figure:nth-child(8)                   { animation-delay: 0s; }
.my-fade-8 figure:nth-child(8) img               { animation-delay: -2.5s; }
.my-fade-8 figure:nth-child(8) figcaption:before { content: "Abb. 1\2009/\2009" "8: " !important; }


@keyframes ss-fade-9 {
0% { opacity: 1; }
4.4444444444444% { opacity: 1; }
11.111111111111% { opacity: 0; }
93.333333333333% { opacity: 0; }
100% { opacity: 1; }
}
.my-fade-9 figure { animation-name: ss-fade-9; animation-duration: 45s; }
.my-fade-9 figure:nth-child(1)                   { animation-delay: 40s; }
.my-fade-9 figure:nth-child(1) img               { animation-delay: 37.5s; }
.my-fade-9 figure:nth-child(1) figcaption:before { content: "Abb. 9\2009/\2009" "9: " !important; }
.my-fade-9 figure:nth-child(2)                   { animation-delay: 35s; }
.my-fade-9 figure:nth-child(2) img               { animation-delay: 32.5s; }
.my-fade-9 figure:nth-child(2) figcaption:before { content: "Abb. 8\2009/\2009" "9: " !important; }
.my-fade-9 figure:nth-child(3)                   { animation-delay: 30s; }
.my-fade-9 figure:nth-child(3) img               { animation-delay: 27.5s; }
.my-fade-9 figure:nth-child(3) figcaption:before { content: "Abb. 7\2009/\2009" "9: " !important; }
.my-fade-9 figure:nth-child(4)                   { animation-delay: 25s; }
.my-fade-9 figure:nth-child(4) img               { animation-delay: 22.5s; }
.my-fade-9 figure:nth-child(4) figcaption:before { content: "Abb. 6\2009/\2009" "9: " !important; }
.my-fade-9 figure:nth-child(5)                   { animation-delay: 20s; }
.my-fade-9 figure:nth-child(5) img               { animation-delay: 17.5s; }
.my-fade-9 figure:nth-child(5) figcaption:before { content: "Abb. 5\2009/\2009" "9: " !important; }
.my-fade-9 figure:nth-child(6)                   { animation-delay: 15s; }
.my-fade-9 figure:nth-child(6) img               { animation-delay: 12.5s; }
.my-fade-9 figure:nth-child(6) figcaption:before { content: "Abb. 4\2009/\2009" "9: " !important; }
.my-fade-9 figure:nth-child(7)                   { animation-delay: 10s; }
.my-fade-9 figure:nth-child(7) img               { animation-delay: 7.5s; }
.my-fade-9 figure:nth-child(7) figcaption:before { content: "Abb. 3\2009/\2009" "9: " !important; }
.my-fade-9 figure:nth-child(8)                   { animation-delay: 5s; }
.my-fade-9 figure:nth-child(8) img               { animation-delay: 2.5s; }
.my-fade-9 figure:nth-child(8) figcaption:before { content: "Abb. 2\2009/\2009" "9: " !important; }
.my-fade-9 figure:nth-child(9)                   { animation-delay: 0s; }
.my-fade-9 figure:nth-child(9) img               { animation-delay: -2.5s; }
.my-fade-9 figure:nth-child(9) figcaption:before { content: "Abb. 1\2009/\2009" "9: " !important; }


@keyframes ss-fade-10 {
0% { opacity: 1; }
4% { opacity: 1; }
10% { opacity: 0; }
94% { opacity: 0; }
100% { opacity: 1; }
}
.my-fade-10 figure { animation-name: ss-fade-10; animation-duration: 50s; }
.my-fade-10 figure:nth-child(1)                   { animation-delay: 45s; }
.my-fade-10 figure:nth-child(1) img               { animation-delay: 42.5s; }
.my-fade-10 figure:nth-child(1) figcaption:before { content: "Abb. 10\2009/\2009" "10: " !important; }
.my-fade-10 figure:nth-child(2)                   { animation-delay: 40s; }
.my-fade-10 figure:nth-child(2) img               { animation-delay: 37.5s; }
.my-fade-10 figure:nth-child(2) figcaption:before { content: "Abb. 9\2009/\2009" "10: " !important; }
.my-fade-10 figure:nth-child(3)                   { animation-delay: 35s; }
.my-fade-10 figure:nth-child(3) img               { animation-delay: 32.5s; }
.my-fade-10 figure:nth-child(3) figcaption:before { content: "Abb. 8\2009/\2009" "10: " !important; }
.my-fade-10 figure:nth-child(4)                   { animation-delay: 30s; }
.my-fade-10 figure:nth-child(4) img               { animation-delay: 27.5s; }
.my-fade-10 figure:nth-child(4) figcaption:before { content: "Abb. 7\2009/\2009" "10: " !important; }
.my-fade-10 figure:nth-child(5)                   { animation-delay: 25s; }
.my-fade-10 figure:nth-child(5) img               { animation-delay: 22.5s; }
.my-fade-10 figure:nth-child(5) figcaption:before { content: "Abb. 6\2009/\2009" "10: " !important; }
.my-fade-10 figure:nth-child(6)                   { animation-delay: 20s; }
.my-fade-10 figure:nth-child(6) img               { animation-delay: 17.5s; }
.my-fade-10 figure:nth-child(6) figcaption:before { content: "Abb. 5\2009/\2009" "10: " !important; }
.my-fade-10 figure:nth-child(7)                   { animation-delay: 15s; }
.my-fade-10 figure:nth-child(7) img               { animation-delay: 12.5s; }
.my-fade-10 figure:nth-child(7) figcaption:before { content: "Abb. 4\2009/\2009" "10: " !important; }
.my-fade-10 figure:nth-child(8)                   { animation-delay: 10s; }
.my-fade-10 figure:nth-child(8) img               { animation-delay: 7.5s; }
.my-fade-10 figure:nth-child(8) figcaption:before { content: "Abb. 3\2009/\2009" "10: " !important; }
.my-fade-10 figure:nth-child(9)                   { animation-delay: 5s; }
.my-fade-10 figure:nth-child(9) img               { animation-delay: 2.5s; }
.my-fade-10 figure:nth-child(9) figcaption:before { content: "Abb. 2\2009/\2009" "10: " !important; }
.my-fade-10 figure:nth-child(10)                   { animation-delay: 0s; }
.my-fade-10 figure:nth-child(10) img               { animation-delay: -2.5s; }
.my-fade-10 figure:nth-child(10) figcaption:before { content: "Abb. 1\2009/\2009" "10: " !important; }