/*
Theme Name: 	Hirudoid
Theme URI: 		http://xeit.ch
Version: 		1.0
Author: 		Xeit GmbH
Author URI: 	http://xeit.ch
*/



/*** Sensible Defaults ***/

@import "css/reset.css";
@import "css/flickity.css";
@import "typo.css";
@import "blocks.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
/*::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; } */

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	   -moz-font-smoothing: antialiased;
	        font-smoothing: antialiased;
}

/* Helper Classes */

.clear { clear: both; }
strong { font-weight: bold; }
em { font-style: italic; }
a, a:link, a:visited, a:hover, a:focus { color: inherit; }

html, body {
	font-family: 'Barlow', sans-serif;
	font-size: 18px;
	line-height: 145%;
	color: #707070;
	background: #F4F4F4;
}


@media (max-width: 1349px) {
	header {
		height: 75px;
		position: fixed;
		z-index: 9999;
		left: 0;
		top: 0px !important;
		width: 100%;
		background: #fff;
	}

		header .main-header nav,
		header .offcanvas-header {
			display: none;
		}

		header .main-header .wrap {
			overflow: hidden;
			height: 75px;
		}

		header .main-header a.logo {
			width: 12.5rem;
			height: 1.55rem;
			text-indent: -1000px;
			overflow: hidden;
			display: block;
			background: url(css/img/logo.svg) no-repeat top center;
			background-size: contain;

			margin: 28px 0 0 24px;
			transition: all 0.2s ease-in-out;
		}

			header.open .main-header a.logo {
				display: none;
			}

		header .main-header .nav-toggle {
			width: 75px;
			height: 75px;
			top: 0;
			right: 0;
			position: absolute;
			cursor: pointer;
			padding-top: 5px;
			background: #F4F4F4;
		}

			header .main-header .nav-toggle span {
				width: 34px;
				height: 2px;
				display: block;
				background: #6997FF;
				position: absolute;
				top: 50%;
				left: 21px;

				transition: all 0.2s ease-in-out;
			}

			header .main-header .nav-toggle span:nth-child(1) {
				transform: translateY(-5px);
			}

			header .main-header .nav-toggle span:nth-child(2) {
				transform: translateY(5px);
			}

			header.open .main-header .nav-toggle span:nth-child(1) {
				transform: rotate(45deg);
			}

			header.open .main-header .nav-toggle span:nth-child(2) {
				transform: rotate(-45deg);
			}


	header.open {
		height: 100vh;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	header.open .main-header .wrap {
		overflow: visible;
		height: auto;
	}

	header.open .offcanvas-header .wrap {
		display: flex;
		flex-flow: row wrap;
	}

	header.open .offcanvas-header {
		height: 156px;
		display: block;
	}

		header.open .offcanvas-header .lang-switch {
			width: 75px;
			height: 81px;
			line-height: 81px;
			font-weight: bold;
			font-size: 1.11rem;
			text-transform: uppercase;
			letter-spacing: 0.03em;
			display: block;
			color: #fff;
			background: #FF8787;
			text-align: center;
			text-decoration: none;
		}

		header.open .offcanvas-header form {
			position: relative;
			height: 81px;
			width: calc(100% - 75px);
			background: #062E55;
			padding: 11px 10px;
		}

		header.open .offcanvas-header input[type='text'] {
			font: inherit;
			border: 2px solid rgba(255,255,255,0.2);
			height: 58px;
			font-weight: 500;
			padding: 0 60px 0 35px;
			border-radius: 30px;
			outline: none;
			background: transparent;
			color: #fff;
			width: 100%;
		}

		header.open .offcanvas-header input[type='text']::placeholder {
			color: #fff;
		}

		header.open .offcanvas-header input[type='submit'] {
			width: 58px;
			height: 58px;
			position: absolute;
			top: 11px;
			right: 20px;
			border: 0;
			background: transparent url(css/img/search.svg) no-repeat center;
			background-size: 40% auto;
			cursor: pointer;
			outline: none;
		}

		header.open .offcanvas-header nav {
			height: 75px;
			width: calc(100% - 75px);
		}

			header.open .offcanvas-header nav ul {
				display: flex;
				flex-flow: row wrap;
				height: 100%;
			}

			header.open .offcanvas-header nav ul li {
				flex: 1;
				font-size: 0.9rem;
			}

			header.open .offcanvas-header nav ul li:nth-child(3) {
				flex: 1.5;
			}

				header.open .offcanvas-header nav ul li a {
					display: block;
					background: #05203B;
					height: 75px;
					text-align: center;
					color: #6997FF;
					text-decoration: none;
					vertical-align: middle;
					line-height: 110%;
					padding: 0.5rem 0.5rem;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				header.open .offcanvas-header nav ul li:nth-child(1) a { background: #05203B }
				header.open .offcanvas-header nav ul li:nth-child(2) a { background: #05284A }
				header.open .offcanvas-header nav ul li:nth-child(3) a { background: #09355F }



	header.open .main-header .nav-toggle {
		top: -156px;
		background: #0D3F6F;
	}

	header.open .main-header nav {
		display: block;
	}

		header.open .main-header nav ul {

		}

			header.open .main-header nav > ul li a {
				height: 75px;
				border-bottom: 1px solid rgba(0,0,0,0.1);
				display: block;
				color: #19398A;
				font-size: 1.4rem;
				line-height: 110%;
				display: flex;
				align-items: center;
				justify-content: center;
				text-decoration: none;
			}

				header.open .main-header nav > ul > li:nth-child(1) a { background: #fff; }
				header.open .main-header nav > ul > li:nth-child(2) a { background: #F2F2F2; }
				header.open .main-header nav > ul > li:nth-child(3) a { background: #ECECEC; }
				header.open .main-header nav > ul > li:nth-child(4) a { background: #E5E5E5; }
				header.open .main-header nav > ul > li:nth-child(5) a { background: #DFDFDF; }
				header.open .main-header nav > ul > li:nth-child(6) a { background: #D8D8D8; }
				header.open .main-header nav > ul > li:nth-child(7) a { background: #D1D1D1; }

					header.open .main-header nav > ul li a span {

					}

			header.open .main-header nav ul ul {
				display: none;
			}

			header.open .main-header nav ul li.current-menu-item ul,
			header.open .main-header nav ul li.current-page-ancestor ul {
				display: block;
			}

			header.open .main-header nav ul ul li a {
				height: 75px;
				border-bottom: 1px solid rgba(255,255,255,0.1);
				display: block;
				color: #D3D3D3;
				font-size: 1.4rem;
				line-height: 110%;
				display: flex;
				align-items: center;
				justify-content: center;
				text-decoration: none;
				background: #4E4E4E !important;
			}
}

@media (max-width: 500px) {
	header .main-header a.logo {
		width: 10.5rem;
		height: 1.55rem;
		margin: 28px 0 0 24px;
	}
}

@media (min-width: 1350px) {
	header {
		height: 230px;
		box-shadow: 0 0 1rem rgba(0,0,0,0.33);
		position: fixed;
		z-index: 9999;
		left: 0;
		top: -80px;
		width: 100%;
		background: #fff;

		transition: all 0.2s ease-in-out;
	}

		.offcanvas-header {
			background: #062E55;
			height: 80px;
			top: 0;
		}

			.offcanvas-header nav {
				margin-left: auto;
			}

				.offcanvas-header nav ul {
					display: flex;
					flex-flow: row wrap;
				}

					.offcanvas-header nav ul li a {
						line-height: 80px;
						padding: 1rem;
						text-decoration: none;
						color: #6997FF;
						transition: all 0.2s ease-in-out;
					}

						.offcanvas-header nav ul li a:hover {
							color: #fff
						}

			.offcanvas-header .lang-switch {
				width: 80px;
				line-height: 80px;
				font-weight: bold;
				font-size: 1.11rem;
				text-transform: uppercase;
				letter-spacing: 0.03em;
				display: block;
				color: #fff;
				background: #FF8787;
				text-align: center;
				text-decoration: none;

				transition: all 0.2s ease-in-out;
			}

			.lang-switch:hover {
				background: #FD6D6D;
			}

			.offcanvas-header form {
				position: relative;
				margin: 10px 1.5rem 0 0.5rem;
			}

			.offcanvas-header input[type='text'] {
				font: inherit;
				border: 2px solid rgba(255,255,255,0.2);
				height: 58px;
				font-weight: 500;
				padding: 0 60px 0 35px;
				border-radius: 30px;
				outline: none;
				background: transparent;
				color: #fff;
				width: 300px;
			}

			.offcanvas-header input[type='text']::placeholder {
				color: #fff;
			}

			.offcanvas-header input[type='submit'] {
				width: 58px;
				height: 58px;
				position: absolute;
				top: 0;
				right: 10px;
				border: 0;
				background: transparent url(css/img/search.svg) no-repeat center;
				background-size: 40% auto;
				cursor: pointer;
				outline: none;
			}

		.main-header {
			box-shadow: 0 -1rem 0.9rem rgba(0,0,0,0.2);
		}

		header .main-header .wrap,
		header .offcanvas-header .wrap {
			padding: 0 2rem;
			width: 100%;
			max-width: 1600px;
			margin: 0 auto;
			height: 100%;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
		}

		header.scroll {
			height: 160px;
		}

		header.open {
			top: 0;
		}

		header .main-header a.logo {
			width: 12.5rem;
			height: 1.55rem;
			text-indent: -1000px;
			overflow: hidden;
			display: block;
			background: url(css/img/logo.svg) no-repeat top left;
			background-size: 95% auto;

			margin: 95px 0 0 0;
			transition: all 0.2s ease-in-out;
		}


			header.scroll .main-header a.logo {
				margin: 25px 0 0 0;
			}

		header .main-header .nav-toggle {
			width: 40px;
			height: 40px;
			top: 20px;
			position: relative;
			margin-left: 1.5rem;
			cursor: pointer;
			padding-top: 5px;
		}

			header .main-header .nav-toggle span {
				width: 34px;
				height: 2px;
				display: block;
				background: #6997FF;
				position: absolute;
				top: 50%;

				transition: all 0.2s ease-out;
			}

			header .main-header .nav-toggle span:nth-child(1) {
				transform: translateY(-5px);
			}

			header .main-header .nav-toggle span:nth-child(2) {
				transform: translateY(5px);
			}

			header .main-header .nav-toggle:hover span:nth-child(1) {
				transform: translateY(-7px);
			}

			header .main-header .nav-toggle:hover span:nth-child(2) {
				transform: translateY(7px);
			}

			header.open .main-header .nav-toggle span:nth-child(1) {
				transform: rotate(45deg);
			}

			header.open .main-header .nav-toggle span:nth-child(2) {
				transform: rotate(-45deg);
			}

			header.open .main-header .nav-toggle:hover span:nth-child(1) {
				transform: rotate(-45deg);
			}

			header.open .main-header .nav-toggle:hover span:nth-child(2) {
				transform: rotate(-135deg);
			}

		header .main-header nav {
			font-weight: 500;
			color: #19398A;
			margin-left: auto;
		}

			header .main-header nav ul {
				display: flex;
				flex-flow: row wrap;
			}

			header .main-header nav ul li {
				margin: 0 11px;
			}

			header .main-header nav > ul > li > a {
				display: block;
				padding-top: 26px;
				padding-bottom: 20px;
				position: relative;
			}

			header .main-header nav > ul > li > a::before {
				content: "";
				display: block;
				width: 100%;
				background: #19398A;
				position: absolute;
				top: 0;
				height: 0;
				transition: all 0.15s ease-in-out;
			}

				header .main-header nav > ul > li > a:hover::before,
				header .main-header nav > ul > li.current-menu-item > a::before,
				header .main-header nav > ul > li.current-page-ancestor > a::before {
					height: 7px;
				}


				header .main-header nav > ul > li:nth-child(1) > a::before { background: #19398A; }
				header .main-header nav > ul > li:nth-child(2) > a::before { background: #062E55; }
				header .main-header nav > ul > li:nth-child(3) > a::before { background: #4E4E4E; }
				header .main-header nav > ul > li:nth-child(4) > a::before { background: #7E4D4D; }
				header .main-header nav > ul > li:nth-child(5) > a::before { background: #A05050; }
				header .main-header nav > ul > li:nth-child(6) > a::before { background: #FF8787; }
				header .main-header nav > ul > li:nth-child(7) > a::before { background: #FAAFAF; }

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

			header ul ul {
				pointer-events: none;
			}

			header ul li:hover ul {
				display: block;
				pointer-events: all;
			}

			header .main-header nav ul ul {
				/* display: none; */
				background: #19398A;
				border-radius: 3px;
				position: absolute;
				box-shadow: 2px 8px 14px rgba(0,0,0,0.33);
				color: #fff;
				width: 220px;
				margin-left: -110px;
				left: 50%;
				opacity: 0;
				padding: 5px 0;

				transition: all 0.25s ease-in-out;
				transform: translateY(30px);
			}

				header .main-header nav > ul > li:nth-child(1) ul { background: #19398A; }
				header .main-header nav > ul > li:nth-child(2) ul { background: #062E55; }
				header .main-header nav > ul > li:nth-child(3) ul { background: #4E4E4E; }
				header .main-header nav > ul > li:nth-child(4) ul { background: #7E4D4D; }
				header .main-header nav > ul > li:nth-child(5) ul { background: #A05050; }
				header .main-header nav > ul > li:nth-child(6) ul { background: #FF8787; }
				header .main-header nav > ul > li:nth-child(7) ul { background: #FAAFAF; }

				header .main-header nav ul li:hover ul {
					display: block;
					opacity: 1;
					transform: translateY(0);
					z-index: 99;
				}

				header .main-header nav ul ul::before {
					content: "";
					display: block;
					background: #19398A;
					position: absolute;
					width: 16px;
					height: 16px;
					left: 50%;
					margin-left: -8px;
					margin-top: -8px;
					transform: rotate(45deg);
				}

				header .main-header nav > ul > li:nth-child(1) ul::before { background: #19398A; }
				header .main-header nav > ul > li:nth-child(2) ul::before { background: #062E55; }
				header .main-header nav > ul > li:nth-child(3) ul::before { background: #4E4E4E; }
				header .main-header nav > ul > li:nth-child(4) ul::before { background: #7E4D4D; }
				header .main-header nav > ul > li:nth-child(5) ul::before { background: #A05050; }
				header .main-header nav > ul > li:nth-child(6) ul::before { background: #FF8787; }
				header .main-header nav > ul > li:nth-child(7) ul::before { background: #FAAFAF; }


				header .main-header nav ul ul li {
					margin: 0;
				}

				header .main-header nav ul ul a {
					display: block;
					padding: 11px 25px;
					border-top: 1px solid rgba(255,255,255,0.15);
					border-bottom: 1px solid rgba(0,0,0,0.15);
					transition: all 0.2s ease-in-out;
				}

				header .main-header nav ul ul li:nth-child(1) a { border-top: 0; }
				header .main-header nav ul ul li:nth-last-child(1) a { border-bottom: 0; }

				header .main-header nav ul ul a:hover,
				header .main-header nav ul ul li.current-menu-item a {
					background: #FF8787;
				}

				header .main-header nav > ul > li:nth-child(6) ul a:hover,
				header .main-header nav > ul > li:nth-child(6) ul li.current-menu-item a {
					background: #FF7474
				}
}

article.main {
	padding-top: 75px;
}

	@media (min-width: 1350px) {
		article.main {
			padding-top: 150px;
		}
	}

	article.main .wrap {
		padding: 0 1rem;
		width: 100%;
		max-width: 1600px;
		margin: 0 auto;
	}

		@media (min-width: 600px) {
			article.main .wrap {
				padding: 0 2rem;
			}
		}

.quiz-overlay .wrap {
	padding: 0 1rem;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
}

@media (min-width: 600px) {
	.quiz-overlay .wrap {
		padding: 0 2rem;
	}
}

body.has-overlay article.main,
body.has-overlay footer {
	-webkit-filter: blur(20px);
	-moz-filter: blur(20px);
	-o-filter: blur(20px);
	-ms-filter: blur(20px);
	filter: blur(20px);
}

.quiz-overlay {
	display: none;
}

body.has-overlay .quiz-overlay {
	display: block;
	opacity: 0;
	transform: scale(1);
	transition: all 0.3s ease-in-out;
	top: 0;
	height: 100%;
	width: 100%;
	padding-top: 75px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

body.has-overlay .quiz-overlay h2 {
	padding-left: 2rem;
	padding-right: 2rem;
}

	@media (min-width: 1350px) {
		body.has-overlay .quiz-overlay {
			padding-top: 150px;
		}

		body.has-overlay .quiz-overlay h2 {
			padding-left: 0;
			padding-right: 0;
		}
	}

body.has-overlay .quiz-overlay.visible {
	opacity: 1;
	transform: scale(1);
	z-index: 999;
	position: fixed;
	background: rgba(255, 255, 255, 0.75);
}


.quiz-close {
	width: 40px;
	height: 40px;
	top: 20px;
	right: 10px;
	position: absolute;
	margin-left: 1.5rem;
	cursor: pointer;
	padding-top: 5px;
	z-index: 99;
}

	@media (min-width: 1350px) {
		.quiz-close {
			top: 20px;
			right: 2rem;
		}
	}

.quiz-close span {
	width: 34px;
	height: 2px;
	display: block;
	background: #6997FF;
	position: absolute;
	top: 50%;

	transition: all 0.2s ease-in-out;
}

.quiz-close span:nth-child(1) {
	transform: rotate(45deg);
}

.quiz-close span:nth-child(2) {
	transform: rotate(-45deg);
}

.search-result {
	display: block;
	border-bottom: 1px solid #ccc;
}

a.search-result {
	display: block;
	padding: 1rem;
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: none;
}

sup {
	font-size: 0.5em;
	display: inline-block;
	transform: translateY(-0.5em);
}

.quiz-share {

}

	@media (min-width: 600px) {
		.quiz-share {
			display: none;
		}
	}

footer {
	background: #062E55;
	min-height: 220px;
	position: relative;
	font-size: 14px;13
	line-height: 140%;
	overflow: hidden;
	padding-bottom: 0.5rem;
}

	footer a {
		text-decoration: none;
		display: block;
	}

	footer .wrap {
		width: 100%;
	    max-width: 782px;
	    margin: 0 auto;
		padding: 0 1rem;
		display: flex;
	}

	footer .contact {
		padding-top: 2rem;
	}

		footer .contact .wrap {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
		}

		footer .contact .footer-area {
			width: 100%;
			/* width: calc(50% - 1.5rem); */
			color: #FF8787;
			margin-bottom: 1rem;
		}

		@media (min-width: 500px) {
			footer .contact .footer-area {
				width: 33.33%;
				width: calc(50% - 2rem);
				color: #FF8787;
				margin-bottom: 1rem;
			}
		}

	footer .imprint {
		width: 100%;
		text-align: center;
	}

		@media (min-width: 700px) {
			footer .imprint {
				position: absolute;
				width: 100%;
				bottom: 0.5rem;

			}
		}

		footer .imprint .wrap {
			justify-content: space-between;
			color: #fff;
		}

		footer .imprint span {
			width: 100%;
			margin: 0 0;
			color: #fff;
			text-align: center;
			display: block;
		}

			@media (min-width: 700px) {
				footer .imprint span {
					text-align: left;
				}
			}

		footer .copyright {
			width: 100%;
			margin: 1rem;
			color: #fff;
			text-align: center;
			display: block;

		}

		@media (min-width: 700px) {
			footer span.copyright {
				position: absolute;
				width: 100%;
				bottom: 0rem;
				margin: 0;
				margin-left: auto;
				right: 2rem;
				color: #fff;
				text-align: right;
				display: inline-block;
			}
		}


	footer .button a {
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
		width: 100%;
	}

	footer .button a:hover {
		background: #6997FF;
	}

	footer ul li {
		border-bottom: 9px solid rgba(0,0,0,0.3);
		padding: 0.3rem 0;
	}

.dsgvo-text {
	position: fixed;
	width: 100%;
	display: none;
	bottom: 0;
	z-index: 99999;
	background: #062E55;
	padding: 1rem 0;
	color: #FF8787;
}

	.dsgvo-text .wrap {
		width: 100%;
	    max-width: 1000px;
	    margin: 0 auto;
	    padding: 0 1rem;
	    display: flex;
		flex-flow: row wrap;
		font-size: 0.833rem;
		line-height: 140%;
	}

	.dsgvo-text .inner {
		width: 80%;
	}

	.dsgvo-text .agree {
		width: 20%;
		text-align: right;
	}

		.dsgvo-text .agree a {
			cursor: pointer;
			display: inline-block;
			border: 1px solid #FF8787;
			padding: 0.3em 0.8em;
		}