.divRelative {
	position: relative;
}

.divOpacity {
	width: 100%;
	opacity: 0;
}

.container {
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	overflow: hidden;
	background-color: black;
}
.container img {
	width: 100%;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	opacity: 1;
}

.slideshow-img-anim {
	animation-duration: 10s;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
/* Animacja 3 zdjęć */
#slideshow-img-1 {
	animation-name: img1;
}
#slideshow-img-2 {
	animation-name: img2;
}
#slideshow-img-3 {
	animation-name: img3;
}
/* ---------------- */

@keyframes img3 {
	0% {
		opacity: 1;
	}
	31% {
		opacity: 1;
	}
	33% {
		opacity: 0;
	}
	66% {
		opacity: 0;
	}
	98% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes img2 {
	0% {
		opacity: 0;
	}
	31% {
		opacity: 0;
	}
	33% {
		opacity: 1;
	}
	64% {
		opacity: 1;
	}
	66% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}	
}

@keyframes img1 {
	0% {
		opacity: 0;
	}

	33% {
		opacity: 0;
	}
	64% {
		opacity: 0;
	}
	66% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* Animacja dwóch zdjęć */
#slideshow-img-4 {
	animation-name: img4;
}
#slideshow-img-5 {
	animation-name: img5;
}
/* ---------------- */
@keyframes img4 {
	0% {
		opacity: 1;
	}
	51% {
		opacity: 1;
	}
	53% {
		opacity: 0;
	}
	98% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes img5 {
	0% {
		opacity: 0;
	}
	51% {
		opacity: 0;
	}
	53% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}	
}