@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,900;1,300;1,400;1,900&display=swap');

:root {
	font-size: 20px;
	}

@media (max-width: 900px) {
	:root {
		font-size: 16px;
		}
}

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin-ext');html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed, figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display: block;}
body {line-height:1;}
ol,ul {list-style:none;}
blockquote,q { quotes:none;} blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}

html {
	scroll-behavior: smooth;
	background: url('bg.jpg') no-repeat top center;
	background-attachment: fixed;
	background-size: 100% auto;
	}

body {
    position: relative;
    margin: 0;
    padding: 0;
    font: 1rem/1.5 lato, arial, sans-serif;
    color: #333;
	text-align: center;
	text-align: left;
    }

* {
    font: 1rem/1.5 lato, arial, sans-serif;
	}

a {
    color: #c00;
    text-decoration: none;
    outline: none;
	transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-webkit-transition: all 0.15s ease;
    }
a:hover {
    color: #a00;
    }

input, textarea {
    outline: none;
    }

body>header {
	width: 50%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	line-height: 1.2;
	}

.form {
	width: 50%;
	padding-left: 50%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	line-height: 1.2;
	}

.mapa {
	width: calc(50% - 1rem);
	position: absolute;
	padding-left: 1rem;
	left: 0;
	top: 220px;
	font-size: 0;
	text-align: center;
	}

.zdjecia {
	width: calc(50% - 2rem);
	padding-left: 1rem;
	position: absolute;
	right: 0;
	top: 220px;
	font-size: 0;
	}

@media (max-width: 1700px) {
	
	body>header {
		width: 35%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
		line-height: 1.2;
		}

	body>header>a>span {
		padding-top: 1.25rem !important;
		}
	
	.form {
		width: 65%;
		padding-left: 35%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
		line-height: 1.2;
		}

}

@media (max-width: 1400px) {
	
	html {
		scroll-behavior: smooth;
		background: url('bg.jpg') no-repeat top center;
		background-attachment: fixed;
		background-size: cover;
		}
	
	body>header {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
		line-height: 1.2;
		}

	body>header>a>span {
		padding-top: 1.25rem !important;
		}
	
	.form {
		width: 100%;
		padding-left: 0%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 160px;
		text-align: center;
		line-height: 1.2;
		}

	.form>div {
		margin: 0 1rem;
		border-radius: 1rem !important;
		padding-top: .75rem !important;
		}
	
	.mapa {
		width: calc(50% - 1rem);
		position: absolute;
		padding-left: 1rem;
		left: 0;
		top: 370px;
		font-size: 0;
		text-align: center;

		padding-top: 1rem;
		}

		
	.zdjecia {
		width: calc(50% - 2rem);
		padding-left: 1rem;
		position: absolute;
		right: 0;
		top: 370px;
		font-size: 0;
		}

}


@media (max-width: 1300px) {


	.mapa section {
		font-size: 1rem !important;
		padding: 1rem 1rem !important;
		}
	
	.mapa section span {
		width: 190px !important;
		}


	.zdjecia section {
		font-size: 1.1rem !important;
		}

	.zdjecia section div {
		font-size: 1rem !important;
		}

	.danedzialek {
		font-size: .8rem !important;
		}

	.danedzialek a {
		display: block;
		}
	
	.danedzialek a:last-child {
		margin-top: 1.5rem;
		line-height: 1.2;
		margin-bottom: 1rem;
		}
	
}



@media (max-width: 900px) {
	
	body>header {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
		line-height: 1.2;
		}

	body>header>a>span {
		padding-top: 1.25rem !important;
		}
	
	.form {
		width: 100%;
		padding-left: 0%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 160px;
		text-align: center;
		line-height: 1.2;
		}

	.form>div {
		margin: 0;
		border-radius: 0 !important;
		padding-top: .75rem !important;
		}
	
	.mapa {
		width: calc(100% - 1rem);
		position: absolute;
		padding-left: 1rem;
		left: 0;
		top: 370px;
		font-size: 0;
		text-align: center;

		padding-top: 1rem;
		text-align: center !important;
		z-index: 100;
		}
	.mapa img {
		width: 60% !important;
		min-width: 300px;
		position: relative !important;
		displauy: block !important;
		margin: 0 auto !important;
	}

	.mapa section+div {
		text-align: center !important;
		}
	
	.zdjecia {
		width: calc(100% - 3rem);
		padding-left: 1rem;
		margin-left: 1rem;
		position: relative;
		right: 0;
		top: 1310px;
		font-size: 0;
		padding-bottom: 1rem;
		z-index: 100;
		}

	.zdjecia img {
		height: auto !important;
	}

	.zdjecia section {
		border-radius: 1rem !important;
		margin-bottom: 2rem !important;
	}

	.zdjecia section, .zdjecia section * {
		font-size: 1rem;
		}
	
}




@media (max-width: 800px) {
	
	.zdjecia {
		top: 1210px;
		}

}

@media (max-width: 700px) {

	.form>div>div {
		display: inline-block;
		vertical-align: middle;
		margin: .25rem;
		background: #eee;
		padding: .25rem;
		width: 90% !important;
		border-radius: .25rem;
		font-size: 1rem;
		text-align: right;
		opacity: .5;
		}

	.form>div {
		background: #fff;
		padding: 1rem 0;
		height: calc(200px - 2rem);
		border-radius: 0 0 0 1rem;
		font-size: 1.25rem;
		height: 240px !important;
		}

	.mapa {
		width: calc(100% - 1rem);
		position: absolute;
		padding-left: 1rem;
		left: 0;
		top: 420px;
		font-size: 0;
		text-align: center;

		padding-top: 1rem;
		text-align: center !important;
		z-index: 100;
		}
	
	.zdjecia {
		top: 1200px;
		}

}


@media (max-width: 590px) {
	
	.zdjecia {
		top: 1100px;
		}

}


@media (max-width: 510px) {
	
	.zdjecia {
		top: 1040px;
		}

}


@media (max-width: 370px) {
	
	body>header h1 {
		font-size: 1.2rem !important;
		font-weight: 900;
		padding-left: 1rem;
		padding-right: 1rem;
		}
	
	body>header>a>span {
		display: block;
		font-size: 2rem !important;
		font-weight: 900;
		padding-top: 2.4rem !important;
		padding-left: 1rem;
		padding-right: 1rem;
		}
	
	.form>div>div {
		display: inline-block;
		vertical-align: middle;
		margin: .25rem;
		background: #eee;
		padding: .25rem;
		width: 45%;
		border-radius: .25rem;
		font-size: .8rem !important;
		text-align: right;
		opacity: .5;
		}

	.mapa section span {
		width: 155px !important;
		}

	.mapa {
		width: calc(100%);
		position: absolute;
		padding-left: 0;
		left: 0;
		top: 420px;
		font-size: 0;
		text-align: center;

		padding-top: 1rem;
		text-align: center !important;
		z-index: 100;
		}


	.zdjecia {
		width: 100%;
		padding-left: 0rem;
		margin-left: 0rem;
		text-align: center;
		}

	.zdjecia img {
		width: 80% !important;
		margin: 1rem 0 !important;
		}
	
	.zdjecia section {
		font-size: 1rem;
		background: #fffa;
		margin-right: 0;
		margin-top: 1rem;
		margin-left: 0rem !important;
		padding: 1rem !important;
		font-size: 1.2rem;
		border-radius: 1rem 0 0 1rem; 
		}

}








.form>div {
	background: #fff;
	padding: 1rem 0;
	height: calc(200px - 2rem);
	border-radius: 0 0 0 1rem;
	font-size: 1.25rem;
	}

.form .likeform {
	display: block;
	padding-bottom: .5rem;
	}

.form>div>div {
	display: inline-block;
	vertical-align: middle;
	margin: .25rem;
	background: #eee;
	padding: .25rem;
	width: 45%;
	border-radius: .25rem;
	font-size: 1rem;
	text-align: right;
	opacity: .5;
	}

.form.active>div>div {
	opacity: 1;
	}

.form>div>div strong {
	display: inline-block;
	background: #ddda;
	position: relative;
	margin-top: -.25rem;
	margin-bottom: -.25rem;
	padding-top: .25rem;
	padding-bottom: .25rem;
	padding-left: .5rem;
	padding-right: .5rem;
	font-weight: bold;
	width: calc(50% - 1rem);
	font-size: 1.25rem;
	text-align: center;
	}

.form .status strong {
	color: green;
	}

.form label {
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	color: #1a61b0;
	margin-right: .5rem;
	}

.form input {
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	width: 200px;
	padding: .25rem 1rem;
	text-align: center;
	letter-spacing: 1px;
	border: 3px solid #2877cf;
	color: #000;
	border-radius: .25rem;
	background: #2877cf33;
	font-size: 1.4rem;
	}

body>header a {
    color: #c00 !important;
	}

body>header h1 {
	font-size: 1.6rem;
	font-weight: 900;
	}

body>header>a>span {
	display: block;
	font-size: 3rem;
	font-weight: 900;
	padding-top: 2.4rem;
	}

.mapa section {
	font-size: 1.25rem;
	line-height: 2;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 2rem;
	background: #fffa;
	padding: 1rem 2rem;
	border-radius: 1rem;
	text-align: left;
	}

.mapa section span {
	display: inline-block;
	width: 250px;
	}

.mapa section+div {
	text-align: left;
	}

.mapa img {
	width: calc(100% - 1rem);
	}

.zdjecia img {
	width: calc(50% - 2rem);
	margin-right: 2rem;
	box-shadow: 5px 2px 30px #0005;
	height: 20vw;
	object-fit: cover;
	margin-top: 1rem;
	margin-bottom: 1rem;
	}


.zdjecia section {
	font-size: 1rem;
	background: #fffa;
	margin-right: 0;
	margin-top: 1rem;
	margin-left: -1.5rem;
	padding: 2rem;
	font-size: 1.2rem;
	border-radius: 1rem 0 0 1rem; 
	}

.zdjecia section h2 {
	font-weight: bold;
	padding-bottom: 1rem;
	}

.zdjecia section p.danedzialek {
	font-weight: bold;
	margin-top: 1rem;
	background: #fff;
	padding: .5rem 2rem;
	line-height: 2;
	}

p.danedzialek a {
	word-break: break-all;
	}

footer {
	clear: both;
	display: block;
	}