#header {
	margin: -130px 0px 100px 0px;
	opacity: 0;
	animation: bgp 5s ease-in-out both;
}
@keyframes bgp {
	to {
		margin: -130px 0px 100px 100px;
		opacity: 1;
	}
}
.bgp h1 {
	text-align: left;
	font-family: Italic, cursive;
	font-weight: 100;
	font-size: 3em;
	color: #666;
}
.img-div {
	display: inline-block;
	width: 200px;
	margin: 30px;
}
.img-catalog {
	height: 300px;
	position: relative;
}
.podpis {
	position: absolute;
	width: 200px;
	margin-top: 0px;
	height: 0px;
	color: #000;
	background-color: rgba(250,250,250,1);
	opacity: 0;
	transition: 0.5s Ease;
}
.img-div:hover .podpis {
	opacity: 1;
	margin-top: -90px;
	height: 90px;
}
.img-collection {
	max-width: 100%;
}
@media (max-width: 1020px) {
	.podpis {
		opacity: 1;
		margin-top: -50px;
		height: 90px;
		font-weight: 900;
		background-color: rgba(250,250,250,.9);
	}
	.img-div:hover .podpis {
		margin-top: -50px;
	}
	.bgp h1 {
		font-size: 2em;
	}
	#header {
		margin: -100px 0px 100px 0px;
		opacity: 0;
	}
	@keyframes bgp {
		to {
			margin: -100px 0px 100px 60px;
			opacity: 1;
		}
	}
}
@media (max-width: 600px) {
	.bgp h1 {
		font-size: 1.5em;
	}
	#header {
		margin: -70px 0px 100px 0px;
		opacity: 0;
	}
	@keyframes bgp {
		to {
			margin: -70px 0px 100px 40px;
			opacity: 1;
		}
	}
}
@media (max-width: 450px) {
	.bgp h1 {
		font-size: 1em;
		color: #000;
	}
	#header {
		margin: -50px 0px 100px 0px;
		opacity: 0;
	}
	@keyframes bgp {
		to {
			margin: -50px 0px 100px 30px;
			opacity: 1;
		}
	}
}