@import '_vars.less';

html, body {
	height: 100%;
}

body {
	background-color: #fff;
	min-width: 300px;
	overflow-x: hidden;
	overflow-y: scroll;
}

body, input, textarea, select, button {
	font-family: 'basier', sans-serif;
	font-size: 14px;
	line-height: 1.5em;
}

.pw {
	@media @m456 {
		width: 1280px;
		margin: 0 auto;
		padding: 0 40px;
	}
}


@media @m23456 {
	.columns {
		& > .column {
			float: left;
		}
		&:after {
			.clear;
		}
	}
}

#page {
	transition: opacity 0.5s @easing;
}

button {
	display: inline-block;
	appearance: none;
	border: 0;
	border-radius: 0;
}

.button {
	display: inline-block;
	background-color: @red;
	font-size: 18px;
	line-height: 1.3em;
	@media @m0 {
		font-size: 14px;
	}
	cursor: pointer;
	.bold;
	color: #fff;
	padding: 6px 12px 8px;
	&:hover {
		background-color: #fff;
		color: @red;
	}
}

strong {
	.bold;
}

*:focus-visible {
	outline: 2px dashed #aaa !important;
	outline-offset: 2px !important;
}

nav {

	#logo {
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		@media screen and (max-width: 600px) {
			height: 100px;
		}
		@media screen and (min-width: 601px) and (max-width: 700px) {
			height: 33.3vw;
		}
		@media screen and (min-width: 701px) and (max-width: 1000px) {
			height: 25vw;
		}
		@media screen and (min-width: 1001px) and (max-width: 1200px) {
			height: 20vw;
		}
		@media screen and (min-width: 1201px) and (max-width: 1400px) {
			height: 16.666vw;
		}
		@media screen and (min-width: 1401px) {
			height: 14.285vw;
		}
		img {
			display: block;
			// width: 100%;
			width: auto;
			height: 100%;
		}
	}

	#languages {
		position: fixed;
		z-index: 21;
		transition: color 0.3s @easing 0.2s;
		@media @m1 {
			top: 9px;
			left: 115px;
		}
		@media @m23456 {
			top: 23px;
			margin-left: 35px;
		}
		@media screen and (min-width: 601px) and (max-width: 700px) {
			left: 33.3vw;
		}
		@media screen and (min-width: 701px) and (max-width: 1000px) {
			left: 25vw;
		}
		@media screen and (min-width: 1001px) and (max-width: 1200px) {
			left: 20vw;
		}
		@media screen and (min-width: 1201px) and (max-width: 1400px) {
			left: 16.666vw;
		}
		@media screen and (min-width: 1401px) {
			left: 14.285vw;
		}
		a {
			display: block;
			float: left;
			padding: 5px;
			& + a {
				margin-left: 10px;
			}
			&:hover {
				text-decoration: underline;
			}
		}	
	}

	#socialMedia {
		@media @m12 {
			display: none;
		}
		@media @m3456 {
			position: fixed;
			top: 23px;
			left: 31vw;
			z-index: 21;
			a {
				display: block;
				float: left;
			}
		}
	}

	#hamburger {

		all: unset;
		padding: 5px 6px;
		z-index: 30;
		cursor: pointer;
		transition: color 0.3s @easing 0.2s;
		span {
			display: block;
			float: left;
		}
		@media @m1 {
			top: 9px;
			right: 7px;
			position: fixed;
			span {
				display: none;
			}
		}

		@media (min-width: 601px) {
			position: fixed;
			top: 23px;
		}
		@media (min-width: 601px) and (max-width: 700px) {
			left: ~"calc( 100vw - 210px )";
		}
		@media (min-width: 701px) {
			left: 50vw;
			transform: translateX(-50%);
		}

		svg {
			display: block;
			float: left;
			vertical-align: middle;
			margin: -4px 0;
			line {
				transition: stroke 0.3s @easing 0.2s;
			}
			g {
				transition: opacity 0.3s @easing;
			}
			.open {
				opacity: 0;
				transition-delay: 0s;
			}
			.closed {
				transition-delay: 0.3s;
			}
		}
		&:hover span {
			text-decoration: underline;
		}
	}

	#links {
		transition: color 0.3s @easing 0.2s;
		@media @m12 {
			display: none;
		}
		@media @m3456 {
			position: fixed;
			top: 23px;
			left: ~"calc( 100vw - 393px )";
			z-index: 21;
			a {
				display: block;
				float: left;
				padding: 5px;
				& + a {
					margin-left: 15px;
				}
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	#search {

		position: fixed;
		z-index: 21;
		a {
			display: block;
		}

		@media @m1 {
			top: 7px;
			left: ~"calc( 100vw - 80px )";
		}
		@media @m23456 {
			top: 23px;
		}
		@media (min-width: 601px) and (max-width: 700px) {
			left: ~"calc( 100vw - 124px )";
		}
		@media (min-width: 701px) {
			left: ~"calc( 100vw - 215px )";
		}

	}

	#godlo {
		position: fixed;
		left: ~"calc( 100vw - 130px )";
		top: 33px;
		z-index: 1000;
		width: 34px;
		@media (max-width: 700px) {
			display: none;
		}
	}

	.icon {
		font-size: 0;
		line-height: 1em;
		padding: 10px;
		opacity: 0.8;
		img {
			transition: filter 0.3s @easing 0.2s;
		}
		&:hover {
			opacity: 1;
		}
	}

}









#menuPanel {

	display: none;
	position: fixed;
	z-index: 20;
	width: 100vw;
	height: 100%;
	opacity: 0;
	left: 0;
	top: 0;
	background-color: rgb(60,60,60);
	color: #fff;
	transition: opacity 0.2s @easing 0.2s;

	.blend {

		content: '';
		background-color: rgb(60,60,60);
		position: fixed;
		z-index: 2;
		left: 0;
		top: 0;
		right: 40px;

		&:after {
			content: '';
			background-color: #fff;
			height: 1px;
			position: absolute;
			bottom: 0;
			right: 0;
			margin-left: 40px;
		}

		@media screen and (max-width: 600px) {
			height: 100px;
			right: 20px;
			&:after {
				left: 100px;
				margin-left: 20px;
			}
		}
		@media screen and (min-width: 601px) and (max-width: 700px) {
			height: 33.3vw;
			right: 30px;
			&:after {
				left: 33.3vw;
				margin-left: 30px;
			}
		}
		@media screen and (min-width: 701px) and (max-width: 1000px) {
			height: 25vw;
			right: 30px;
			&:after {
				left: 25vw;
				margin-left: 30px;
			}
		}
		@media screen and (min-width: 1001px) and (max-width: 1200px) {
			height: 20vw;
			&:after { left: 20vw; }
		}
		@media screen and (min-width: 1201px) and (max-width: 1400px) {
			height: 16.666vw;
			&:after { left: 16.666vw; }
		}
		@media screen and (min-width: 1401px) {
			height: 14.285vw;
			&:after { left: 14.285vw; }
		}

	}

	.overtop {
		border-bottom: 1px solid #fff;
		padding-bottom: 20px;
		margin-bottom: 35px;
		.godlo, span, a {
			display: inline-block;
			vertical-align: middle;			
		}
		.godlo {
			width: 35px;
			margin-right: 60px;
		}
		a {
			font-size: 0;
			line-height: 1em;
			margin-left: 18px;
			opacity: 0.8;
			filter: invert(1);
		}
	}

	@media screen and (max-width: 650px) {
		padding: 30px 20px;
		.grid {
			grid-template-columns: 1fr 1fr;
		}
		.contact .grid {
			display: block;
			& > div + div {
				margin-top: 20px;
			}
		}
	}

	@media screen and (min-width: 651px) and (max-width: 1000px) {
		padding: 30px;
		.grid {
			grid-template-columns: 1fr 1fr 1fr;
		}
	}

	@media screen and (max-width: 1000px) {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		height: 100%;
		.grid {
			display: grid;
			width: 100%;
			grid-gap: 0.5em 0;
			& > * {
				padding-right: 8px !important;
			}
		}
		.content {
			margin-top: 40px;
			h2 {
				cursor: pointer;
				border-top: 1px solid #fff;
				background: url('/images/icon-menu-open.svg') no-repeat right center;
				background-size: 12px auto;
				&:hover {
					text-decoration: underline;
				}
				&.showList {
					background-image: url('/images/icon-menu-close.svg');
				}
			}
			h2:not(.showList) + ul {
				display: none;
			}
			a h2 {
				background: none !important;
			}
			.sitemap {
				padding-bottom: 0 !important;
			}
		}
	}

	@media screen and (min-width: 1001px) {
		.grid {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}
		.header {
			position: absolute;
			left: 0;
			right: 40px;
			top: 0;
			padding-bottom: 30px;
			padding-left: ~"calc( 25% + 20px )";
			z-index: 3;
			display: flex;
			align-items: flex-end;
			.grid {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				width: 100%;	
			}
		}
		.content {
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			position: absolute;
			width: 100%;
			height: 100%;
			padding: 40px;
		}
		.sitemap {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			& > * {
				padding-right: 18px;
			}
		}
		.contact .grid {
			grid-template-columns: 1fr 1fr 2fr;
		}
	}

	@media screen and (max-width: 600px) {
		padding-top: 120px;
	}
	@media screen and (min-width: 601px) and (max-width: 700px) {
		padding-top: ~"calc( 33.3vw + 30px )";
	}
	@media screen and (min-width: 701px) and (max-width: 1000px) {
		padding-top: ~"calc( 25vw + 40px )";
	}

	.header {

		.semibold;

		.group {
			align-self: end;
		}

		@media screen and (min-width: 1001px) and (max-width: 1200px) {
			height: 20vw;
		}
		@media screen and (min-width: 1201px) and (max-width: 1400px) {
			height: 16.666vw;
		}
		@media screen and (min-width: 1401px) {
			height: 14.285vw;
		}

		.group {
			padding-right: 20px;
		}
	
		a {
			display: block;
			line-height: 1.45em;
			padding: 2px 0;
		}	
	}

	.content {
		@media screen and (min-width: 1001px) and (max-width: 1200px) {
			padding-top: 20vw;
		}
		@media screen and (min-width: 1201px) and (max-width: 1400px) {
			padding-top: 16.666vw;
		}
		@media screen and (min-width: 1401px) {
			padding-top: 14.285vw;
		}

	}

	.section + .section {
		border-top: 1px solid #fff;
	}

	@media (max-width: 1000px) {
		.section:not(:last-child) {
			padding-bottom: 1.5em;
		}
		.section + .section {
			padding-top: 2em;
		}
	}

	@media (min-width: 1001px) {
		.section:not(:last-child) {
			padding-bottom: 3em;
		}
		.section + .section {
			padding-top: 3em;
		}
	}

	ul {
		display: block;
		li {
			max-width: 270px;
		}
		a {
			display: block;
			line-height: 1.45em;
			padding: 2px 0;
		}
	}

	a:hover {
		text-decoration: underline;
	}

	.sitemap {

		h2 {
			font-size: 18px;
			line-height: 1.2em;
			.bold;
			color: @red;
			padding-top: 20px;
			padding-bottom: 20px;
			margin-bottom: 0px;
			margin-top: 0;

			@media screen and (min-width: 1001px) {
				position: sticky;
				top: 0;
				background: -moz-linear-gradient(top, rgba(60,60,60,1) 80%, rgba(60,60,60,0) 100%);
				background: -webkit-linear-gradient(top, rgba(60,60,60,1) 80%,rgba(60,60,60,0) 100%);
				background: linear-gradient(to bottom, rgba(60,60,60,1) 80%,rgba(60,60,60,0) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15151500', endColorstr='#151515',GradientType=0 );
			}

		}

		h4 {
			color: #fff;
			.bold;
		}

		ul ul ul {
			margin-left: 15px;
		}


		.group > ul > li {
			margin-bottom: 20px;
			& > a {
				color: #fff;
				.bold;
			}
		}

	}

	.hide-in-tree {
		display: none !important;
	}


	.footer {
		.semibold;
		a {
			display: block;
			line-height: 1.45em;
			padding: 2px 0;
		}
	}

	.contact {
		.copyrights {
			font-size: 12px;
			line-height: 1.4em;
			color: #aaa;
			align-self: end;
		}
	}

}

body.menuPanelVisible {
	overflow: hidden;
	height: 100%;
	#menuPanel {
		opacity: 1;
		transition-delay: 0s;
		.content > *:first-child {
			margin-top: 0;
			transition-delay: 0.2s;
		}
		& > div {
			opacity: 1;
			transition-delay: 0.2s;
		}
	}
	#hamburger {
		svg {
			.open {
				opacity: 1;
				transition-delay: 0.3s;
			}
			.closed {
				opacity: 0;
				transition-delay: 0s;
			}
		}
	}
	.icon {
		img {
			transition-delay: 0s;
		}
	}
}




body.menuPanelVisible,
body.whiteNav {
	#links,
	#languages,
	#hamburger {
		color: #fff;
		transition-delay: 0s;
	}
	nav .icon {
		img {
			filter: invert(1);
		}
	}
}
body.whiteNav {
	#hamburger .closed rect {
		fill: #fff;
	}	
}



#header {
	display: block;
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	background-color: #fff;
	@media screen and (max-width: 600px) {
		height: 100px;
	}
	@media screen and (min-width: 601px) and (max-width: 700px) {
		height: 33.3vw;
	}
	@media screen and (min-width: 701px) and (max-width: 1000px) {
		height: 25vw;
	}
	@media screen and (min-width: 1001px) and (max-width: 1200px) {
		height: 20vw;
	}
	@media screen and (min-width: 1201px) and (max-width: 1400px) {
		height: 16.666vw;
	}
	@media screen and (min-width: 1401px) {
		height: 14.285vw;
	}
	.content {
		position: absolute;
		bottom: 12%;
		@media @m1 {
			left: 120px;
			right: 20px;
		}
		@media @m23456 {
			right: 40px;
			padding-left: 40px;
		}
		@media screen and (min-width: 601px) and (max-width: 700px) {
			left: 33.3vw;
		}
		@media screen and (min-width: 701px) and (max-width: 1000px) {
			left: 25vw;
		}
		@media screen and (min-width: 1001px) and (max-width: 1200px) {
			left: 20vw;
		}
		@media screen and (min-width: 1201px) and (max-width: 1400px) {
			left: 16.666vw;
		}
		@media screen and (min-width: 1401px) {
			left: 14.285vw;
		}
	}
	h1, #searchInput {
		line-height: 1.15em;
		&.long {
			font-size: 12px;
		}
		@media @m1 {
			font-size: 14px;
			&.long {
				font-size: 12px;
			}
		}
		@media @m2 {
			font-size: 20px;
			&.long {
				font-size: 18px;
			}
		}
		@media @m3456 {
			font-size: 24px;
			&.long {
				font-size: 20px;
			}
		}
	}
	&:after {
		content: '';
		display: block;
		height: 1px;
		background-color: #000;
		position: absolute;
		bottom: 0;
		@media @m1 {
			left: 120px;
			right: 20px;
		}
		@media @m23456 {
			right: 40px;
		}
		@media screen and (min-width: 601px) and (max-width: 700px) {
			left: ~"calc( 33.3vw + 40px )";
		}
		@media screen and (min-width: 701px) and (max-width: 1000px) {
			left: ~"calc( 25vw + 40px )";
		}
		@media screen and (min-width: 1001px) and (max-width: 1200px) {
			left: ~"calc( 20vw + 40px )";
		}
		@media screen and (min-width: 1201px) and (max-width: 1400px) {
			left: ~"calc( 16.666vw + 40px )";
		}
		@media screen and (min-width: 1401px) {
			left: ~"calc( 14.285vw + 40px )";
		}
	}
}

body.grey {
	background-color: @grey;
	color: #fff;
	#header {
		background-color: @grey;
		color: #fff;
		&:after {
			background-color: #fff;
		}
	}
}

.showTooltip {
	display: inline-block;
	position: relative;
	text-decoration: underline;
	.tooltip {
		display: none;
		position: absolute;
		left: 0;
		bottom: 27px;
		width: 300px;
		.bold;
		background-color: #ccc;
		padding: 10px 12px 11px;
		font-size: 12px;
		line-height: 14px;
		color: #000;
		&:after {
			display: block;
			content: '';
			position: absolute;
			left: 0;
			top: 100%;
			border-width: 6px;
			border-color: #ccc transparent transparent #ccc;
			border-style: solid;
		}
	}
	&:hover .tooltip {
		display: block;
	}
}


#userwayAccessibilityIcon {
	transition: none !important;
	@media (max-width: 600px) {
		transform: translate(-100%) scale(0.7);
		&:hover {
			transform: translate(-100%) scale(0.7) !important;
		}
	}
	@media (min-width: 601px) {
		transform: translate(-100%) scale(0.85);
		&:hover {
			transform: translate(-100%) scale(0.85) !important;
		}
	}
}