/*
Theme Name: 	Hermann Jost
Theme URI: 		http://miggroup.com
Version: 		1.0
Author: 		Robert Baumgartner
*/



/*** Sensible Defaults ***/

@import "css/reset.css";
@import "js/lightbox/css/lightbox.min.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;
}

html, body {
	font-family: 'Signika', sans-serif;
	font-size: 15px;
	line-height: 135%;
	font-weight: 400;
	color: #57666d;
}

.wrap {
	width: 100%;
	max-width: 930px;
	margin: 0 auto;
	padding: 0 15px;
}

	.wrap.flex {
		display: flex;
		flex-flow: row wrap;
	}

	.wrap.narrow {
		max-width: 780px;
	}

	.wrap.wide {
		max-width: 1100px;
	}

	@media (min-width: 500px) {
		.wrap {
			max-width: 950px;
			padding: 0 25px;
		}

		.wrap.narrow {
			max-width: 800px;
		}
	}

header {
	background: #fff;
	height: 75px;
	box-shadow: 0 0 1rem rgba(0,0,0,0.2);
	position: fixed;
	width: 100%;
	z-index: 9999;
}

	.header-spacer {
		height: 75px;
	}

	header .wrap {
		height: 100%;
		position: relative;
	}

	header a.logo {
		display: block;
		width: 158px;
		height: 52px;
		background: url(css/img/logo.png) no-repeat center center;
		background-size: contain;
		text-indent: -1000px;
		overflow: hidden;
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
	}

	header .navToggle {
		display: block;
		position: absolute;
		right: 15px;
		height: 40px;
		width: 40px;
		top: 50%;
		transform: translateY(-50%);
		padding-top: 2px;
	}

		header .navToggle span {
			height: 2px;
			background: #ebbd00;
			width: 70%;
			margin: 8px auto;
			display: block;
		}

	@media (min-width: 850px) {
		header .navToggle {
			display: none;
		}
	}

	header nav,
	header .nav {
		display: block;
		position: absolute;
		right: 15px;
		bottom: 10px;
		font-size: 13px;
		text-transform: uppercase;
		color: #57666d;
		display: none;
	}

		header.open nav {
			display: block;
		}

		header .nav {
			display: block;
		}

		@media (max-width: 849px) {
			header nav {
				position: absolute;
				top: 75px;
				background: #ebbd00;
				color: #fff;
				width: 100%;
				bottom: auto;
				left: 0;
				padding: 15px;
			}

				header nav ul li {
					display: block;
					width: 100%;
					font-size: 1rem;
				}

				header nav ul li::after {
					display: none;
				}

				header nav ul li a {
					padding: 0.3em 0;
					display: block;
				}

				header nav ul li.c-yellow { color: inherit; }
		}

		@media (min-width: 500px) {
			header a.logo { left: 25px; }
			header nav { right: 25px; }
		}

		@media (min-width: 750px) {
			header nav {
				display: block;
			}

			header nav ul li:hover a {
				color: #ebbd00;
			}
		}

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

			header nav ul li {
				position: relative;
			}

				header nav ul li::after {
					content: "|";
					margin: 0 1em;.
				}

				header nav ul li:last-child::after {
					display: none;
				}

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


		header nav ul ul {
			background: #fff;
			position: absolute;
			margin-left: -0.75rem;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
			display: none;
		}

			header nav ul li:hover ul {
				display: block;
			}

			header nav ul ul li::after {
				display: none;
			}

			header nav ul ul li {

			}

			header nav ul ul li a {
				display: block;
				padding: 0.25rem 0.75rem;
			}

			@media (max-width: 849px) {
				header nav ul li:hover a {
					color: #fff !important;

				}
				header nav ul ul {
					background: none;
					position: relative;
					margin-left: 1rem;
					margin-top: 1rem;
					margin-bottom: 1.5rem;
					display: block;
					border-left: 2px solid #fff;
					color: #fff !important;
				}

				header nav ul li:hover ul a {
					color: #fff !important
				}

			}


h1,
h2 {
	font-size: 1.8rem;
	line-height: 100%;
	font-weight: 300;
	text-transform: uppercase;
	margin-bottom: 1.5em;
}

	@media (min-width: 500px) {
		h1,
		h2 {
			font-size: 2.6rem;
			line-height: 100%;
		}
	}

	@media (min-width: 1000px) {
		h1,
		h2 {
			font-size: 3.33rem;
			line-height: 100%;
		}
	}

h3 {
	font-size: 1.3rem;
	line-height: 115%;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 0.75em;
}

	@media (min-width: 500px) {
		h3 {
			font-size: 1.6rem;
			line-height: 115%;
		}
	}

	@media (min-width: 1000px) {
		h3 {
			font-size: 2.33rem;
			line-height: 115%;
		}
	}

h4 {
	font-size: 1.1rem;
	line-height: 115%;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: 1.5em;
	margin-bottom: 0.75em;
}

	@media (min-width: 500px) {
		h4 {
			font-size: 1.2rem;
			line-height: 115%;
		}
	}

	@media (min-width: 1000px) {
		h4 {
			font-size: 1.3rem;
			line-height: 115%;
		}
	}

h1 em,
h2 em,
h3 em {
	color: #ebbd00;
	font-style: normal;
}

p {
	margin-bottom: 1.35em;
}


.area {
	padding: 3em 0;
}

	@media (min-width: 500px) {
		.area {
			padding: 5em 0;
		}
	}

.area.hero {
	background-color: #666;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	min-height: 100vh;
	min-height: calc(100vh - 75px);
	text-align: center;
	color: #fff;
	display: table;
	width: 100%;
}

	.area.hero .hero-text {
		display: table-cell;
		vertical-align: middle;
	}

		.area.hero .hero-text h3 {
			font-weight: 300;
		}

	.area.hero .scroll-down-arrow {
		width: 4.5rem;
		height: 1.5rem;
		background: url(css/img/hero_scroll.svg) no-repeat center center;
		margin: 5em auto 0 auto;
		cursor: pointer;
		display: block;
	}

.area.geothermie-explained {
	background: #e5ebe7;
}

	@media (min-width: 500px) {
		.area.geothermie-explained p {
			font-size: 1.66rem;
			line-height: 120%;
		}
	}

	.geothermie-explained-image {
		width: 100%;
		max-width: 400px;
		height: auto;
		margin: 6em auto 0 auto;
		display: block;
	}

.area.services {
	padding: 0;
}

	.area.services .headline {
		padding: 4em 0;
	}

		.area.services .headline h3 {
			margin: 0;
		}

	.service-item {
		display: flex;
		flex-flow: row wrap;
		background: #f0f2f2;
	}

		.service-item:nth-child(even) {
			flex-flow: row-reverse wrap;
		}

		.service-image {
			width: 100%;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
		}

			@media (min-width: 500px) {
				.service-image {
					width: 50%;
				}
			}

			.service-image::after {
				content: "";
				display: block;
				padding-top: 63%;
			}

		.service-text {
			width: 100%;
		}

			@media (min-width: 500px) {
				.service-text {
					width: 50%;
				}
			}

			.service-text h3 {
				color: #ebbd00;
			}

			@media (min-width: 500px) and (max-width: 750px) {
				.service-text h3 {
					font-size: 1rem;
					line-height: 120%;
				}
			}

			@media (min-width: 750px) and (max-width: 1000px) {
				.service-text h3 {
					font-size: 1.5rem;
					line-height: 120%;
				}
			}

		.service-text .inner {
			padding: 15px 15px 3em 15px;
		}

		@media (min-width: 500px) {
			.service-text .inner {
				max-width: 450px;
				padding: 3em 1em 3em 3em;
				float: left;
			}

				.service-item:nth-child(even) .service-text .inner {
					padding: 3em 3em 3em 1em;
					float: right;
				}

				.page-template-page-portrait .service-text .inner {
					max-width: 600px;
				}
		}

		@media (min-width: 1200px) {
			.service-text .inner {
				padding: 5em 1em 5em 5em;
			}

				.service-item:nth-child(even) .service-text .inner {
					padding: 5em 5em 5em 1em;

				}
		}

.area.team {
	background-color: #f0f2f2;
}

.area.referenzen {
	background-color: #f0f2f2;
	background-size: 200% auto;
	background-position: left top;
	background-repeat: no-repeat;

}

	@media (min-width: 500px) {
		.area.referenzen {

		}
	}

	.references-holder {
		display: flex;
		flex-flow: row wrap;
		margin-left: -1rem;
		width: calc(100% + 2rem);
	}

	a.reference-item {
		text-decoration: none;
		display: block;
		width: 100%;
		margin: 0.5rem 0;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		overflow: hidden;
	}

	@media (min-width: 400px) {
		a.reference-item {
			width: 50%;
			width: calc(50% - 2rem);
			margin: 1rem;
		}
	}

	@media (min-width: 700px) {
		a.reference-item {
			width: 33.33%;
			width: calc(33.33% - 2rem);
			margin: 1rem;
		}
	}



		a.reference-item::before {
			content: "";
			display: block;
			padding-top: 75%;
		}

		a.reference-item span {
			position: absolute;
			width: 100%;
			top: 0;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 1rem;
			background: rgba(0,0,0,0.6);
			color: #fff;
			opacity: 0;
			transition: all 0.3s ease-in-out;
			font-size: 2rem;
			text-align: center;
			font-weight: bold;
			line-height: 100%;
		}

		a.reference-item:hover span {
			opacity: 1;
			transition: all 0.3s ease-in-out;
		}

.area.portrait {
	background-color: #000;
	color: #fff;
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
	padding-top: 52vw;
	padding-top: calc(52vw + 1em);
	padding-bottom: 0;
}

	.area.portrait a {
		color: #ebbd00;
		text-decoration: none;
	}

	@media (min-width: 500px) {
		.area.portrait {
			padding-top: calc(52vw + 3em);
		}
	}

	@media (min-width: 850px) {
		.area.portrait {
			min-height: 52vw;
			width: 100%;
			background-position: center center;
			background-size: cover;
			padding-top: 3em;
		}
	}

	.area.portrait .inner {
		padding-bottom: 3em;
		background-color: #f0f2f2;
		position: relative;
		margin-left: -15px;
		width: 100vw;
		padding: 2em 15px;
	}

		@media (min-width: 500px) {
			.area.portrait .inner {
				margin-left: -25px;
			}
		}

		@media (min-width: 850px) {
			.area.portrait .inner {
				width: 50%;
				margin-left: 50%;
				padding: 0 1em 3em 3em;
				background: transparent;
			}
		}

		@media (min-width: 1200px) {
			.area.portrait .inner {
				padding: 0 1em 3em 5em;
			}
		}

.area.portrait-gallery {
	padding: 0;
	display: flex;
	flex-flow: row wrap;
}

	.area.portrait-gallery .gallery-img {
		width: 50%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: relative;
	}

		@media (min-width: 600px) {
			.area.portrait-gallery .gallery-img {
				width: 25%;
			}
		}

		.area.portrait-gallery .gallery-img::before {
			content: "";
			display: block;
			padding-top: 100%;
		}

		.area.portrait-gallery .gallery-img::after {
			content: "";
			position: absolute;
			background: #57666d;
			opacity: 0.5;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

		.area.portrait-gallery .gallery-img:hover::after {
			opacity: 0;
		}

.area.contact {
	padding: 0;
}

	.area.contact .headline {
		padding: 4em 0;
	}

		.area.contact .headline h3 {
			margin: 0;
		}

.area.contact-info {
	background: #333 url(css/img/contact-bg.jpg) no-repeat center center;
	background-size: cover;
	min-height: 100vh;
	min-height: calc(100vh - 75px);
	text-align: center;
	color: #fff;
	display: table;
	width: 100%;
}

	.area.contact-info .contact-info-text {
		display: table-cell;
		vertical-align: middle;
	}

	.contact-info-text a[href*='instagram.com'],
	.contact-info-text a[href*='facebook.com'] {
		width: 3rem;
		height: 3rem;
		display: inline-block;
		text-decoration: none;
		text-indent: -10000px;
		overflow: hidden;
		background: url(css/img/facebook.svg) no-repeat center;
		background-size: contain;
		margin: 0.25rem;
	}

	.contact-info-text a[href*='instagram.com'] {
		background-image: url(css/img/instagram.svg)
	}

	.area.contact-info img {
		width: 100%;
		height: auto;
	}

	.contact-info-text .contact-logo {
		width: 3em;
		height: 3em;
		background: url(css/img/logo_icon_white.svg) no-repeat center center;
		margin: 0 auto 3em auto;
	}

footer {
	background: #ebbd00;
	color: #fff;
	padding: 2em 0;
	font-weight: 600;
}

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

	footer a {
		text-decoration: none;
	}

	footer .imprint {
		padding-right: 185px;
		position: relative;
	}

		footer .imprint::after {
			content: "";
			display: block;
			position: absolute;
			right: 0;
			bottom: 0;
			width: 158px;
			height: 52px;
			background: url(css/img/logo_white.svg) no-repeat center center;
		}

.c-yellow { color: #ebbd00; }


body.page-template-page-form,
body.page-template-page-form .area.page {
	background: #ebefed;
}

.form-holder,
.person-holder {
	background: #fff;
	box-shadow: 0.8rem 0.8rem 2rem rgba(0,0,0,0.2);
	padding: 1rem;
	font-size: 0.9rem;
}

	@media (min-width: 600px) {
		.form-holder,
		.person-holder {
			padding: 3rem;
		}
	}

	.form-holder .form-row {
		display: flex;
		flex-flow: row wrap;
		margin-bottom: 2rem;
	}

	.form-holder .form-row .flex {
		display: flex;
		flex-flow: row wrap;
	}

	.form-holder .form-row .full {
		width: 100%;
	}

	.form-holder .form-row .half {
		width: 100%;
	}

		@media (min-width: 600px) {
			.form-holder .form-row .half {
				width: 50%;
			}

			.form-holder .form-row .half .half {
				width: 100%;
			}

			.form-holder .form-row .half.first { padding-right: 0.5rem; }
			.form-holder .form-row .half.second { padding-left: 0.5rem; }
		}

		@media (min-width: 1000px) {
			.form-holder .form-row .half .half {
				width: 50%;
			}
		}

	.form-holder h4 {
		font-size: 1.25rem;
		margin-bottom: 0.75rem;
		text-transform: uppercase;
	}

	.form-holder h4 .small {
		font-size: 0.9rem;
		text-transform: none;
	}

	.form-holder .text-input {
		background: #DCE0E9;
		padding: 2px 5px;
		margin-bottom: 5px;
	}

		.form-holder .text-input.space-down {
			margin-bottom: 1.25rem;
		}

		.form-holder .text-input label {
			display: flex;
			justify-content: space-between;
			position: relative;
		}

			.form-holder .text-input label span {
				-webkit-flex: 1;
				flex: 1;
			}

		.form-holder .text-input input {
			border: 0;
			background: transparent;
			outline: none;
			width: 100%;
			font: inherit;
			color: inherit;
			padding: 2px 5px;
			top: -2px;
			right: -5px;
			position: absolute;
		}

	.form-holder .text-input.double {

	}

		.form-holder .text-input.double {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
		}

			.form-holder .text-input.double label {
				display: flex;
				flex-flow: row-reverse wrap;
				width: 30%;
			}

				.form-holder .text-input.double label input {
					-webkit-flex: 1;
					flex: 1;
					right: 0;
					text-align: right;
				}

		.form-holder .text-input input:focus {
			background: #c2c8d6;
		}

	.form-holder .radio-field {
		margin-bottom: 1.25rem;
	}

	.form-holder .radio-field .wpcf7-list-item,
	.form-holder .checkbox-field .wpcf7-list-item {
		display: block;
		margin: 0;
		position: relative;
		padding: 0 0 2px 0;
	}

		.form-holder .radio-field .wpcf7-list-item-label,
		.form-holder .checkbox-field .wpcf7-list-item-label {
			cursor: pointer;
		}

		.form-holder .radio-field .wpcf7-list-item::before,
		.form-holder .checkbox-field .wpcf7-list-item::before {
			content: "";
			display: block;
			width: 1rem;
			height: 1rem;
			background: #DCE0E9;
			position: absolute;
			left: 0;
			/* top: 0.1rem;
			top: 50%; */
			pointer-events: none;
			opacity: 1;
			margin-top: 2px !important;
		}

			.form-holder .radio-field .wpcf7-list-item.is-checked::before,
			.form-holder .checkbox-field .wpcf7-list-item.is-checked::before {
				background: #abb0bb url(css/img/checked.svg) no-repeat center center;
				background-size: 80%;
			}

	.form-holder .checkbox-field .wpcf7-list-item {
		display: block;
		margin: 0;
	}

		.form-holder .checkbox-field .wpcf7-list-item-label {
			cursor: pointer;
		}

	.form-holder .radio-field .wpcf7-list-item input,
	.form-holder .checkbox-field .wpcf7-list-item input {
		opacity: 0;
	}

	@media (min-width: 600px) {
		.form-holder .form-submit {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 50%;
		}
	}

	.form-holder .form-submit input[type='submit'] {
		background: #ebbd00;
		border: 0;
		color: #fff;
		font: inherit;
		min-width: 50%;
		text-transform: uppercase;
		display: block;
	}

		@media (min-width: 600px) {
			.form-holder .form-submit input[type='submit'] {
				width: 100%;
			}
		}

.reference-holder img {
	width: 100%;
	margin: 0 auto;
	height: auto;
}

.person-holder img {
	width: 100%;
	margin: 2rem auto 0 auto;
	height: auto;
}

.team-holder {
	display: flex;
	flex-flow: row wrap;
	margin: 2rem 0 0 0;
}

	.team-member {
		background-color: #ccc;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		width: 100%;
		margin: 0 0 16px 0;
		display: block;
		position: relative;
	}

		@media (min-width: 450px) {
			.team-member {
				width: 50%;
				width: calc(50% - 8px);
				margin: 0 16px 16px 0;
			}

			.team-member:nth-child(even) {
				margin-right: 0;
			}
		}

		.team-member::after {
			content: "";
			display: block;
			padding-top: 60%;
		}

		.team-member .label {
			background: rgba(0,0,0,0.8);
			color: #fff;
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 10px;
			font-size: 0.9rem;
			transition: all 0.2s ease-in-out;
			opacity: 0;
		}

			.team-member:hover .label {
				opacity: 1;
			}

body.downloads a {
	margin: 1rem 0.5rem;
}

/* Helper Classes */

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


.area.page ul {
	padding-left: 1rem;
	margin: 1.2em 0;
}

	.area.page ul li {
		list-style-type: disc;
	}


.wrap .job-content {
	width: 100%;
	margin-bottom: 2rem;
}

	.job-content > h1:first-child,
	.job-content > h2:first-child,
	.job-content > h3:first-child,
	.job-content > h4:first-child {
		margin-top: 0;
	}

.wrap .job-sidebar {
	background: #eee;
	width: 100%;
}

	.job-sidebar .info-item {
		border-bottom: 1px dotted #94989a;
		padding: 1rem;
	}

	.job-sidebar .info-item strong {
		text-transform: uppercase;
		color: #94989a

	}

	.job-sidebar .info-item:nth-last-child(1) {
		border-bottom: 0
	}


	@media (min-width: 750px) {
		.wrap .job-content {
			flex: 1;
			width: auto;
		}

		.wrap .job-sidebar {
			align-self: flex-start;
			width: 33%;
			margin-left: 2rem;
		}
	}


.team-list {
	display: flex;
	flex-flow: row wrap;
	margin-left: -1rem;
	width: calc(100% + 2rem);
}

	.member-item {
		width: 100%;
		padding: 1rem;
	}

	@media (min-width: 600px) {
		.member-item {
			width: 50%;
		}
	}

	@media (min-width: 800px) {
		.member-item {
			width: 33.33%;
		}
	}

	.member-item .image {
		width: 100%;
		background: #000;
		background-position: center;
		background-size: cover;
	}

		.member-item .image::before {
			content: "";
			display: block;
			padding-bottom: 70%;
		}

	.member-item .member-info {
		padding: 1rem 1.5rem;
	}

		.member-item .member-info h4 {
			font-size: 1rem;
			line-height: 120%;
			color: #ebbd00;
			text-transform: none;
			margin: 0 0 0.25rem 0;
		}

		.member-item .member-info h4 a.mail {
			width: 2rem;
			height: 1rem;
			background: url(css/img/mail.svg) no-repeat center;
			background-size: contain;
			text-indent: -1000px;
			overflow: hidden;
			margin-right: 0.5rem;
			display: inline-block;
			transform: translateY(18%);
		}


.filters {
	margin: 2rem 0;
}

.filters ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

	.filters ul li {
		margin: 0 1rem;
		cursor: pointer;
	}

		.filters ul li::after {
			content: "|";
			display: block;
			position: absolute;
			right: -1rem;
			top: 0;
			color: #57666d;
		}

		.filters ul li:last-child::after {
			display: none;
		}

		.filters ul li.active {
			color: #ebbd00
		}