header.site {
	--button-width: 36px;
	--button-height: calc(var(--nav-height) - 8px);
	--nav-radius: calc(var(--button-height) / 2);
	--nav-side-pad: 8px;
}

header.site {
	width: 100%;
	position: relative;
}

header.site div.main-image {
	width: 100%;
	height: 440px; /* careful: is used in calcs below! */
	background: url("../img/snowyRanden.jpg") no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
	z-index: 100;
}

header.site button.webcams,
header.site #id_snowflake {
	position: absolute;
	right: 28px;
	top: 28px;
	width: var(--nav-height);
	height: var(--nav-height);
	color: var(--neutral-1);
	background-color: var(--contrast-2);
	border: none;
	border-radius: 50%;
	z-index: 120;
	cursor: pointer;
}
header.site #id_snowflake {
	right: 28px;
	top: 92px;
}
header.site #id_snowflake i {
	position: absolute;
	width: 16px;
	height: 16px;
	left: calc((var(--nav-height) - 16px) / 2);
	top: calc((var(--nav-height) - 16px) / 2);
	text-align: center;
}

header.site div.modal.webcams #id_webcamsKeeper,
header.site div.modal.webcams div.content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	gap: 24px;
}
header.site div.modal.webcams #id_webcamsKeeper {
	display: none;
}

header.site div.modal.webcams h2 {
	color: var(--contrast-2);
}

header.site div.modal.webcams div.iframe-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
}
header.site div.modal.webcams div.iframe-container.elongated {
	aspect-ratio: 16 / 6;
}

header.site div.modal.webcams div.iframe-container span.goto {
	position: absolute;
	display: inline-block;
	right: 10px;
	top: 10px;
	z-index: 200;
	color: var(--contrast-1);
}
header.site div.modal.webcams div.iframe-container span.goto i {
	font-size: 20px;
}

header.site div.modal.webcams iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: none;
	border-radius: 12px;
}

header.site a.logo-link {
	position: absolute;
	top: 28px;
	left: 28px;
	z-index: 120;
	display: inline-block;
	width: 20%;
	min-width: 140px;
	max-width: 680px;
	cursor: pointer;
}

header.site svg.logo {
	width: 100%;
	height: auto;
	fill: var(--neutral-1);
	position: relative;
	display: block;
}

header.site nav {
	width: 100%;
	height: var(--nav-height);
	bottom: 0;
	position: absolute;
	overflow: visible;
	z-index: 120;
	background-color: var(--theme-2-medium);
	transition: background-color 1s linear;
	box-shadow: 0px 5px 10px var(--shadow);
}

header.site nav.sticky {
	position: fixed;
	top: 0;
	bottom: auto;
	background-color: var(--theme-2);
	animation: nav-sliding 1s ease;
}

@keyframes nav-sliding {
	from { top: calc(0px - var(--nav-height)); }
	to { top: 0; }
}

header.site nav a {
	text-decoration: none;
}

header.site nav svg.sports {
	position: absolute;
	height: calc(var(--nav-height) - 16px); /* 142 x 40 --> 106.5 x 30 */
	width: auto;
	top: 8px;
	fill: var(--contrast-1-medium);
	right: calc((100% - 5 * var(--tab-width) - 106.5px - 63.5px) / 2 + var(--nav-side-pad));
}

header.site nav.sticky svg.sports {
	fill: var(--contrast-1);
}

header.site div.modal.menu {
	display: block;
	padding-left: calc(2 * var(--nav-side-pad));
}

header.site nav div.page-group,
header.site nav div.page-group div.page,
header.site nav div.page-group div.page a,
header.site nav div.page-group.expanded a.subpage,
header.site div.page button {
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
	width: var(--tab-width);
}
header.site nav div.page-group {
	margin: 4px;
	height: calc(100% - 8px);
}
header.site nav div.page-group div.page,
header.site nav div.page-group div.page a {
	height: var(--button-height);
	border-radius: var(--nav-radius);
}
header.site nav div.page-group div.page a.with-button {
	margin-right: 0;
	width: calc(100% - var(--button-width));
	border-radius: var(--nav-radius) 0 0 var(--nav-radius);
}

header.site nav div.page-group svg.logo {
	width: auto;
	max-width: auto;
	min-width: auto;
	height: calc(100% - 16px);
	fill: var(--contrast-2);
	position: relative;
	top: auto;
	left: auto;
	z-index: auto;
}

header.site nav a.menu,
header.site nav div.page-group a.subpage,
header.site nav div.page-group div.drop-down {
	display: none;
}

header.site nav div.page-group {
	float: left;
}

header.site nav div.page-group.expanded div.drop-down {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: calc(var(--nav-height) + 2px);
}

header.site nav div.page-group div.page {
	color: var(--contrast-2);
}

header.site nav div.page-group div.page a {
	width: 100%;
}

header.site nav div.page-group.expanded a.subpage {
	padding: 10px;
	margin: 1px 0;
	color: var(--theme-1);
	background-color: var(--contrast-2);
	box-shadow: 5px 5px 10px var(--shadow);
	border-radius: 50vh;
}

header.site div.page button {
	border: none;
	width: var(--button-width);
	cursor: pointer;
	color: var(--contrast-2);
	background-color: var(--invisible);
	margin-left: 0;
	border-radius: 0 var(--nav-radius) var(--nav-radius) 0;
	justify-content: flex-start;
}

header.site nav div.page-group.active div.page button,
header.site nav div.page-group.active div.page a {
	background-color: var(--theme-1-medium);
}

header.site nav.sticky div.page-group.active div.page button,
header.site nav.sticky div.page-group.active div.page a {
	background-color: var(--theme-1);
}

header.site nav div.page-group a.subpage.active {
	color: var(--contrast-2);
	background-color: var(--theme-1);
}
header.site nav div.page-group a.subpage.active svg.logo {
	fill: var(--contrast-2);
}

@media (hover: hover) and (pointer: fine) {
	header.site button.webcams:hover,
	header.site #id_snowflake:hover {
		color: var(--contrast-2);
		background-color: var(--contrast-1);
		transform: scale(1.1);
		transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
	}

	header.site nav div.page-group div.page a:hover,
	header.site div.page button:hover {
		color: var(--theme-2-medium);
	}
	header.site nav div.page-group.active div.page a:hover,
	header.site div.page-group.active div.page button:hover {
		color: var(--contrast-1-medium);
	}
	header.site nav div.page-group:not(.active) div.page:hover a,
	header.site div.page:hover button {
		background-color: var(--contrast-1-medium);
	}

	header.site nav div.page-group a:hover svg.logo {
		fill: var(--theme-2-medium);
	}
	header.site nav div.page-group.active a:hover svg.logo {
		fill: var(--constrast-1-medium);
	}

	header.site nav.sticky div.page-group div.page a:hover,
	header.site .sticky div.page button:hover {
		color: var(--theme-2);
	}
	header.site nav.sticky div.page-group.active div.page a:hover,
	header.site .sticky div.page-group.active div.page button:hover {
		color: var(--contrast-1);
	}
	header.site nav.sticky div.page-group:not(.active) div.page:hover a,
	header.site .sticky div.page:hover button {
		background-color: var(--contrast-1);
	}

	header.site nav.sticky div.page-group a:hover svg.logo {
		fill: var(--theme-2);
	}
	header.site nav.sticky div.page-group.active a:hover svg.logo {
		fill: var(--contrast-1);
	}

	header.site nav div.page-group a.subpage:hover {
		color: var(--contrast-2);
		background-color: var(--contrast-1);
	}

	header.site nav div.page-group a.subpage:hover svg.logo {
		fill: var(--contrast-2);
	}
}

@media only screen and (max-width: 1800px) {
	header.site div.modal.menu {
		padding-left: var(--nav-side-pad);
	}
}

@media only screen and (max-width: calc(5 * 164px + 106.5px + 63.5px)) { /* n * var(--tab-width), where n numer of pages plus sports plus some tolerance */

	header.site div.main-image {
		height: 330px;
	}

	header.site button.webcams,
	header.site #id_snowflake {
		width: calc(0.7 * var(--nav-height));
		height: calc(0.7 * var(--nav-height));
	}
	header.site #id_snowflake {
		top: 76px;
	}
	header.site #id_snowflake i {
		left: calc((0.7 * var(--nav-height) - 16px) / 2);
		top: calc((0.7 * var(--nav-height) - 16px) / 2);
	}

	header.site nav a.menu {
		position: absolute;
		top: calc(0.15 * var(--nav-height));
		right: 28px;
		width: calc(0.7 * var(--nav-height));
		height: calc(0.7 * var(--nav-height));
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--contrast-2-medium);
		background-color: var(--theme-1-medium);
		cursor: pointer;
	}

	header.site nav.sticky a.menu {
		color: var(--contrast-2);
		background-color: var(--theme-1);
	}

	header.site nav svg.sports {
		right: auto;
		left: 28px;
	}

	header.site div.modal.menu {
		display: none;
		padding-left: initial;
	}
	header.site div.modal.menu.open {
		display: flex;
	}
	header.site div.modal.menu.open div.content {
		padding-top: 44px;
		max-width: 400px;
	}

	header.site div.modal.menu.open div.drop-down,
	header.site div.modal.menu.open div.page-group,
	header.site div.modal.menu.open div.page-group div.page,
	header.site div.modal.menu.open div.page-group div.page a,
	header.site div.modal.menu.open div.page-group a.subpage {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	header.site div.modal.menu.open div.page-group div.page a,
	header.site div.modal.menu.open div.page-group div.page a.with-button,
	header.site div.modal.menu.open div.page-group a.subpage {
		text-align: center;
		padding: 10px;
		margin: 1px 0;
		border-radius: 50vh;
		color: var(--neutral-1);
	}
	header.site div.modal.menu.open div.page-group div.page a.active,
	header.site div.modal.menu.open div.page-group div.page a.with-button.active,
	header.site div.modal.menu.open div.page-group a.subpage.active {
		background-color: var(--contrast-1);
		color: var(--contrast-2);
	}
	header.site div.modal.menu.open div.page-group div.page a,
	header.site div.modal.menu.open div.page-group div.page a.with-button {
		background-color: var(--contrast-2-low);
		font-size: large;
		margin: 4px 0;
	}
	header.site div.modal.menu.open div.page-group a.subpage {
		background-color: var(--contrast-2-high);
		font: small;
	}

	header.site div.modal.menu.open div.page-group div.page button {
		display: none;
	}

	header.site div.modal.menu.open div.page-group svg.logo {
		height: 100%;
	}

}
@media only screen and (max-width: calc(5 * 164px + 106.5px + 63.5px)) and (hover: hover) and (pointer: fine) {
	header.site nav a.menu:hover {
		color: var(--theme-1-medium);
		background-color: var(--contrast-1-medium);
	}

	header.site nav.sticky a.menu:hover {
		color: var(--theme-1);
		background-color: var(--contrast-1);
	}

	header.site div.modal.menu.open div.page-group div.page a:hover,
	header.site div.modal.menu.open div.page-group div.page a.with-button:hover,
	header.site div.modal.menu.open div.page-group a.subpage:hover {
		background-color: var(--contrast-1-medium);
	}
}

@media only screen and (max-width: 600px) {

	header.site div.main-image {
		height: 220px;
	}

}