:root {
	--font-color: rgb(240, 240, 240);
	--font-family: Cambria, serif;
	--max-width: 1020px;
	--header-height-mobile: 60px;
	
	--background-header: rgba(0, 0, 0, 1);
	--background-menu-mobile: rgba(34, 34, 34, .95);
	
	--background: rgba(34, 34, 34, .9);
	--background-menu: rgba(0, 0, 0, 1);
	--background-menu-border: rgba(0, 0, 0, .2);
	
	--gold-top: rgba(255, 187, 84);
	--gold-bottom: rgba(143, 136, 83);
	--gold-top-hover: rgb(255, 225, 181);
	--gold-bottom-hover: rgb(185, 185, 185);
	--gold-top-current: rgb(255, 35, 84);
	--gold-bottom-current: rgb(188, 46, 46);
}
html
{
	height: 100%;
}
body
{
	margin: 0px;
	padding: 0px;
	min-height: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	font-family: var(--font-family);
	color: var(--font-color);
	background: linear-gradient(to bottom, var(--background), var(--background)),
					url("../images/background-dark-d1920-symetry.jpg") scroll center top / 100% auto repeat-y ;
	overflow-y: scroll;
}
a
{
	color: var(--font-color);
}
p
{
	padding: 0px;
	margin: 0px;
}
.color-gold
{
	background: linear-gradient(170deg, var(--gold-top), var(--gold-bottom));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}



.header
{
	flex: 0 0 auto;
	position: fixed;
	z-index: 1;
	width: 100%;
	height: var(--header-height-mobile);
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	background: var(--background-header);
	overflow:hidden;
}
.header-logo
{
	display: block;
	position: relative;
	top: -10px;
	height: 110px;
}
.logo
{
	display: block;
	object-fit: fill;
	width: auto;
	height: 100%;
}
.header-button
{
	position: absolute;
	right: 10px;
	height: 40px;
	cursor: pointer;
	font: bold 21px / 40px var(--font-family);
	border: none;
}
.header-button.is-visible
{
	background: linear-gradient(170deg, var(--gold-top-current), var(--gold-bottom-current));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.header-menu
{
	position: fixed;
	top: var(--header-height-mobile);
	left: 0px;
	display: flex;
	flex-flow: column nowrap;
	gap: 10px 0px;
	width: 100%;
	height: 100%;
	background: var(--background-menu-mobile);
	transform: translate(-100%, 0);
	transition: transform .3s ease-in-out;
}
.header-menu.is-visible
{
	transform: translate(0, 0);
}
.menu-ul
{
	display: flex;
	flex-flow: column nowrap;
	gap: 10px 0px;
	padding: 0px;
	margin: 0px;
	list-style: none;
}
.menu-item > a
{
	display: block;
	font: bold 18px / 21px var(--font-family);
	padding: 10px 0px;
	background: linear-gradient(170deg, var(--gold-top), var(--gold-bottom));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-transform: capitalize;
	text-decoration: none;
	font-variant-caps: small-caps;
	text-align: center;
}
.menu-item > a:hover
{
	background: linear-gradient(170deg, var(--gold-top-hover), var(--gold-bottom-hover));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.menu-item.current-menu-item > a
{
	background: linear-gradient(170deg, var(--gold-top-current), var(--gold-bottom-current));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
@media (min-width: 800px)
{
	.header
	{
		position: relative;
		flex-flow: column nowrap;
		background: transparent;
		height: 160px;
		top: -10px;
	}
	.header-logo
	{
		top: auto;
		height: 130px;
		width: 130px;
		z-index: 1;
		background: var(--background-menu);
		background-clip: padding-box;
		border: solid 5px var(--background-menu-border);
		border-radius: 50%;
		padding: 10px;
	}
	.logo
	{
		margin: auto;
	}
	.header-button
	{
		display: none;
	}
	.header-menu
	{
		position: absolute;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		z-index: 0;
		max-width: var(--max-width);
		flex-flow: row nowrap;
		transform: none;
		padding: 5px;
		background: var(--background-menu-border);
	}
	.menu-ul
	{
		flex: 1 0 0;
		flex-flow: row nowrap;
		justify-content: center;
		gap: 0px 25px;
		background: var(--background-menu);
	}
	.menu-ul-left{ padding-right: 80px; }
	.menu-ul-right{ padding-left: 80px; }
}












.main
{
	flex: 1 0 0;
	padding-top: var(--header-height-mobile);
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	z-index: 0;
}
.main-center
{
	box-sizing: border-box;
	padding: 0px 20px;
	max-width: var(--max-width);
}
.main-title
{
	text-align: center;
}
@media (min-width: 800px)
{
	.main
	{
		padding-top: 0px;
	}
}




.massage-tiles
{
	width: 100%;
	max-width: var(--max-width);
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 10px;
	row-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
}
@media (min-width: 800px)
{
	.massage-tiles
	{
		grid-template-columns: auto auto auto;
	}
}
.massage-tile
{
	position: relative;
	box-sizing: border-box;
	flex: 0 0 50%;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.massage-thumbnail
{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.massage-title
{
	position: absolute;
	z-index: 1;
	width: 100%;
	padding: 10px 0px;
	background: rgba(0, 0, 0, .6);
	text-align: center;
	font: 16px / 26px var(--font-family);
	overflow-wrap: anywhere;
}
.massage-title a 
{
	text-decoration: none;
}
.massage-title a:hover
{
	text-decoration: underline;
}







.massage-list
{
	width: 100%;
	max-width: var(--max-width);
	display: flex;
	flex-flow: column nowrap;
	box-sizing: border-box;
	padding: 0px 10px;
}
.massage-post
{
	display: flex;
	flex-flow: column nowrap;
	box-sizing: border-box;
	margin: 0px 0px 30px 0px;
}
.massage-post:first-child{ margin-top: 10px; }
.massage-post-thumbnail
{
	height: 100px;
	width: 100%;
	object-fit: cover;
}
.massage-post-text
{
	flex: 1 0 0;
}
.massage-post-header
{
	display: flex;
	flex-flow: row wrap;
	gap: 0px 10px;
	align-items: baseline;
}
.massage-post-title
{
	display: inline;
	margin: 0px;
	overflow-wrap: anywhere;
}
.massage-post-content
{
	margin: 0px;
}
@media (min-width: 800px)
{
	.massage-post
	{
		flex-flow: row wrap;
		align-items: center;
	}
	.massage-post-thumbnail
	{
		height: 100px;
		flex: 0 0 150px;
		object-fit: cover;
	}
	.massage-post-thumbnail.post-odd{ order: 0; }
	.massage-post-thumbnail.post-even{ order: 1; }
	.massage-post-text.post-odd
	{
		margin-left: 30px;
	}
	.massage-post-text.post-even
	{
		margin-right: 30px;
	}
	.massage-post-header.post-odd
	{
		justify-content: flex-start;
	}
	.massage-post-header.post-even
	{
		justify-content: flex-end;
	}
	.massage-post-content.post-even
	{
		text-align: right;
	}
}

.cennik-table
{
	width: 100%;
	max-width: 700px;
	box-sizing: border-box;
	padding: 0px 20px;
}
.cennik-row
{
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	border-top: solid 1px var(--gold-top);
	padding: 10px 0px;
}
.cennik-row:nth-child(4){padding-top: 70px;}
.cennik-row-comment
{
	padding: 3px 10px;
	font: 11px var(--font-family);
}
.cennik-title
{
	flex: 1 0 0;
	margin: 0px 20px 0px 0px;
	text-align: right;
	font: bold 17px var(--font-family);
	overflow-wrap: anywhere;
}
.cennik-info
{
	display: flex;
	flex-flow: column wrap;
	gap: 15px 0px;
	text-align: right;
}
.cennik-price
{
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-end;
}
.price-duration
{
	flex: 0 0 auto;
	min-width: 40px;
	margin: 0px 15px 0px 0px;
	font: 16px var(--font-family);
}
.price-duration-unit
{
	font: 10px var(--font-family);
	line-height: 5px;
}
.price-value
{
	flex: 0 0 auto;
	min-width: 80px;
	margin: 0px 10px 0px 0px;
	font: 19px var(--font-family);
}
.pass-row
{
	padding: 0px;
}
.cennik-pass:last-child{ margin: 0px }
.pass-price
{
	padding: 7px 0px;
	border-bottom: solid 1px var(--gold-bottom);
}
.pass-price:last-child{ border-bottom: none; }
.pass-entry
{
	padding: 0px 0px 0px 5px;
}
.pass-value
{
	min-width: 60px;
}



.voucher-images
{
	width: 100%;
	margin: 30px auto 20px auto;
	text-align: center;
}
.voucher-front
{
	position: relative;
	width: 140px;
	transform: rotate(-5deg);
	z-index: 2;
}
.voucher-back
{
	position: relative;
	width: 140px;
	transform: rotate(5deg);
	z-index: 1;
}
@media (min-width: 800px)
{
	.voucher-front
	{
		position: relative;
		left: 50px;
		width: 80%;
		max-width: 400px;
		transform: rotate(-5deg);
	}
	.voucher-back
	{
		position: relative;
		right: 50px;
		width: 80%;
		max-width: 400px;
		transform: rotate(5deg);
	}
}

.contact-body
{
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
}
.contact-info
{
	flex: 1 0 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin: 10px 0px;
}
.contact-name
{
	font: bold 21px var(--font-family);
	text-align: center;
	display: block;
}
.contact-line
{
	padding: 0px;
	margin: 3px 0px;
}
.contact-address
{
	padding: 5px 0px;
}
@media (min-width: 800px)
{
	.contact-body
	{
		max-width: var(--max-width);
		flex-flow: row nowrap;
	}
	.contact-info
	{
		flex: 1 0 0;
	}
	.contact-map
	{
		flex: 2 0 0;
	}
}
















.footer
{
	flex: 0 0 auto;
	font-size: 16px;
	padding: 20px 0px;
}