/*
**
**
**
** Schrift-Import */
@font-face {
	font-family:'Open Sans';
	font-style:normal;
	font-weight:300;
	src:url('../fonts/open-sans-v15-latin-300.eot');
	src:local('Open Sans Light'), local('OpenSans-Light'),
		url('../fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'),
		url('../fonts/open-sans-v15-latin-300.woff2') format('woff2'),
		url('../fonts/open-sans-v15-latin-300.woff') format('woff'),
		url('../fonts/open-sans-v15-latin-300.ttf') format('truetype'),
		url('../fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg');
}
@font-face {
	font-family:'Playfair Display';
	font-style:normal;
	font-weight:900;
	src:url('../fonts/playfair-display-v13-latin-900.eot');
	src:local('Playfair Display Black'), local('PlayfairDisplay-Black'),
		url('../fonts/playfair-display-v13-latin-900.eot?#iefix') format('embedded-opentype'),
		url('../fonts/playfair-display-v13-latin-900.woff2') format('woff2'),
		url('../fonts/playfair-display-v13-latin-900.woff') format('woff'),
		url('../fonts/playfair-display-v13-latin-900.ttf') format('truetype'),
		url('../fonts/playfair-display-v13-latin-900.svg#PlayfairDisplay') format('svg');
}
/*
**
**
**
** Allgemeines */
body {
	font-family:"Open Sans";
	font-weight:300;
	color:#182a31;
	font-size:1.5rem;
}
::selection {
	color:#fff;
	background:#009ee0;
}
::-moz-selection {
	color:#fff;
	background:#009ee0;
}
#noscript {
	text-align:center;
	width:100%;
	position:fixed;
	bottom:0;
	left:0;
	color:#fff;
	background:#009ee0;
	padding:1rem;
	margin:0;
	font-size:1rem;
}
a, a:hover, a:focus {
	color:#009ee0;
}
ul {
	padding-left:0;
}
ul li {
	list-style:none;
	position:relative;
	margin-bottom:1rem;
}
ul li:before {
	position:absolute;
	content:"";
	left:-3rem;
	height:2px;
	background:#009ee0;
	top:1rem;
	transform:skew(-45deg);
	width:2rem;
}
section {
	position:relative;
}
h1, h2, h3, h4, h5 {
	font-family:"Playfair Display";
	font-weight:900;
	font-size:5rem;
	line-height:1.2;
}
h1:before, h2:before {
	position:absolute;
	content:"";
	left:-5rem;
	height:.5rem;
	background:#009ee0;
	top:4rem;
	transform:skew(-45deg);
	width:4rem;
}
.grey:after {
	top:0;
	left:0;
	position:absolute;
	display:block;
	background:#eef2f3;
	z-index:-1;
	content:"";
	height:100%;
	width:100%;
}
.wrap {
	display:block;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:-2;
}
.ele {
	position:absolute;
	transform:skew(-45deg);
	border:2px solid #009ee0;
	opacity:0;
}
.ele:nth-of-type(1).active {
	animation:fade 1s forwards .2s;
}
.ele:nth-of-type(2).active {
	animation:fade 1s forwards .4s;
}
.ele:nth-of-type(3).active {
	animation:fade 1s forwards .6s;
}
.ele:nth-of-type(4).active {
	animation:fade 1s forwards .8s;
}
.ele:nth-of-type(5).active {
	animation:fade 1s forwards 1s;
}
.ele:nth-of-type(6).active {
	animation:fade 1s forwards 1.2s;
}
@keyframes fade {
	from {
		opacity:0;
		margin-top:-4rem;
	}
	to {
		opacity:1;
		margin-top:0;
	}
}
/*
**
**
**
** Ladekreis */
#loader {
	width:100vw;
	height:100vh;
	position:fixed;
	z-index:9998;
	left:0;
	top:0;
	background:#eef2f3;
	display:flex;
	align-items:center;
	justify-content:center;
}
.no-js #loader {
	display:none;
}
#loader:after {
	border:10px solid #eef2f3;
	border-top:10px solid #009ee0;
	border-radius:50%;
	width:60px;
	height:60px;
	animation:spin 1s infinite;
	display:block;
	content:"";
	z-index:9999;
}
@keyframes spin {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(360deg); }
}
/*
**
**
**
** Start */
#start {
	padding-bottom:5rem;
}
h3 {
	font-size:7.5rem;
	line-height:1;
}
h3.active {
	animation:h3 1s forwards 4s;
}
@keyframes h3 {
	from {
		color:#182a31;
	}
	to {
		color:#eef2f3;
	}
}
h4 {
	font-size:24rem;
	line-height:1;
	opacity:0;
}
h4.active {
	animation:h4 1s forwards 4s;
}
@keyframes h4 {
	from {
		opacity:0;
		transform:translateY(-20rem);
	}
	to {
		opacity:1;
		transform:translateY(-10rem);
	}
}
#start .ele {
	left:0;
	top:0;
	width:65%;
	height:300px;
	transform:rotate(90deg) skew(45deg);
	animation:fade 2s forwards 6s;
}
/*
**
**
**
** Willkommen */
#willkommen .row:nth-of-type(1) .grey:after {
	width:calc(70% + 100px);
	left:50%;
}
#willkommen .row:nth-of-type(2) .grey:after {
	width:calc(100% + 100px);
}
#willkommen .ele:nth-of-type(1) {
	left:15%;
	top:75%;
	width:80%;
	height:300px;
}
#willkommen .ele:nth-of-type(2) {
	left:10%;
	top:90%;
	width:70%;
	height:300px;
}
#willkommen .ele:nth-of-type(3) {
	left:10%;
	top:95%;
	width:60%;
	height:300px;
}
#willkommen .ele:nth-of-type(4) {
	left:30%;
	top:115%;
	width:25%;
	height:200px;
	transform:rotate(90deg) skew(45deg) ;
}
#willkommen .ele:nth-of-type(5) {
	left:30%;
	top:120%;
	width:200px;
	height:80%;
	transform:rotate(90deg) skew(45deg) ;
}
#willkommen .ele:nth-of-type(6) {
	left:25%;
	top:210%;
	width:100px;
	height:20%;
	transform:rotate(90deg) skew(45deg) ;
}
/*
**
**
**
** Leistungen */
#leistungen {
	margin-top:600px;
}
#leistungen .row:nth-of-type(1) .grey:after {
	width:75%;
	left:-50%;
}
#leistungen .ele:nth-of-type(1) {
	right:0;
	top:50%;
	width:70%;
	height:300px;
	transform:skew(45deg);
}
#leistungen .ele:nth-of-type(2) {
	right:10%;
	top:70%;
	width:70%;
	height:300px;
	transform:skew(45deg);
}
#leistungen .ele:nth-of-type(3) {
	right:5%;
	top:75%;
	width:60%;
	height:300px;
	transform:skew(45deg);
}
#leistungen .ele:nth-of-type(4) {
	right:20%;
	top:100%;
	width:20%;
	height:200px;
	transform:rotate(90deg) skew(-45deg) ;
}
#leistungen .ele:nth-of-type(5) {
	right:10%;
	top:105%;
	width:200px;
	height:70%;
	transform:rotate(90deg) skew(-45deg) ;
}
#leistungen .ele:nth-of-type(6) {
	right:5%;
	top:175%;
	width:200px;
	height:20%;
	transform:rotate(90deg) skew(-45deg) ;
}
/*
**
**
**
** Team */
#team {
	margin-top:500px;
}
#team ul {
	margin-bottom:0;
}
#team .row:nth-of-type(1) .grey:after {
	width:calc(100% - 8.333333%);
	left:8.333333%;
}
#team .ele:nth-of-type(1) {
	left:0;
	top:70%;
	width:70%;
	height:300px;
}
#team .ele:nth-of-type(2) {
	left:10%;
	top:80%;
	width:70%;
	height:300px;
}
#team .ele:nth-of-type(3) {
	left:5%;
	top:85%;
	width:60%;
	height:300px;
}
#team .ele:nth-of-type(4) {
	left:0%;
	top:100%;
	width:50%;
	height:100px;
	transform:rotate(90deg) skew(45deg) ;
}
#team .ele:nth-of-type(5) {
	left:15%;
	top:140%;
	width:200px;
	height:80%;
	transform:rotate(90deg) skew(45deg) ;
}
#team .ele:nth-of-type(6) {
	left:15%;
	top:220%;
	width:250px;
	height:50%;
	transform:rotate(90deg) skew(45deg) ;
}
/*
**
**
**
** Links */
#links {
	margin-top:600px;
}
#links .row:nth-of-type(1) .grey:after {
	width:225%;
	left:-200%;
}
#links .ele:nth-of-type(1) {
	right:0;
	top:65%;
	width:70%;
	height:300px;
	transform:skew(45deg);
}
#links .ele:nth-of-type(2) {
	right:10%;
	top:70%;
	width:70%;
	height:300px;
	transform:skew(45deg);
}
#links .ele:nth-of-type(3) {
	right:5%;
	top:75%;
	width:60%;
	height:300px;
	transform:skew(45deg);
}
#links .ele:nth-of-type(4) {
	right:10%;
	top:130%;
	width:15%;
	height:380px;
	transform:rotate(90deg) skew(-45deg) ;
}
#links .ele:nth-of-type(5) {
	right:10%;
	top:125%;
	width:200px;
	height:50%;
	transform:rotate(90deg) skew(-45deg) ;
}
/*
**
**
**
** Kontakt */
#kontakt {
	margin:500px 0 150px 0;
}
#kontakt .row:nth-of-type(1) .grey:after {
	width:calc(50% + 100px);
	left:40%;
}
#kontakt .row:nth-of-type(2) .grey:after {
	width:calc(100% + 100px);
}
/*
**
**
**
** Impressum */
footer > .row > a, footer h6 {
	font-size:1rem;
}
#impressum.active {
	display:block !important;
}
#impressum {
	padding-top:5rem;
}
#impressum ul {
	padding-left:3rem;
}
#impressum h5 {
	font-size:3rem;
}
#impressum h6 {
	font-size:2rem;
}
#impressum p, #impressum li {
	font-size:1rem;
}
#impressum strong {
	font-size:1.5rem;
}
/*
**
**
**
** Seitenspalte */
aside {
	right:0;
	top:0;
	min-width:200px;
	position:relative;
}
aside:after {
	position:absolute;
	transform:rotate(90deg) skew(45deg);
	border:2px solid #009ee0;
	content:"";
	top:-85%;
	left:-5%;
	display:block;
	z-index:-1;
	width:350%;
	background:#fff;
	height:160%;
}
aside > a {
	display:block;
}
aside img {
	max-width:320px;
	position:relative;
	left:-10rem;
}
#nav {
	z-index:1;
	position:relative;
	left:-3rem;
}
#nav a {
	width:100%;
	color:#182a31;
	transition:color .2s;
}
#nav a.active, #nav a:hover, #nav a:focus {
	color:#009ee0;
}
#opener {
	width:60px;
	height:45px;
	transform:rotate(0deg) scale(0.5);
	transition:.5s ease-in-out;
	cursor:pointer;
	right:1rem;
	top:1rem;
	position:absolute;
	display:none;
}
#opener span {
	display:block;
	position:absolute;
	height:5px;
	width:100%;
	background:#009ee0;
	border-radius:5px;
	opacity:1;
	left:0;
	transform:rotate(0deg);
	transition:.25s ease-in-out;
}
#opener span:nth-child(1) {
	top:0;
}
#opener span:nth-child(2), #opener span:nth-child(3) {
	top:18px;
}
#opener span:nth-child(4) {
	top:36px;
}
#opener.active span:nth-child(1) {
	top:18px;
	width:0;
	left:50%;
}
#opener.active span:nth-child(2) {
	transform:rotate(45deg);
}
#opener.active span:nth-child(3) {
	transform:rotate(-45deg);
}
#opener.active span:nth-child(4) {
	top:18px;
	width:0;
	left:50%;
}
/*
**
**
**
** Media Queries */
@media screen and (max-width:1439px) {
	#start {
		padding-top:10rem;
	}
	aside.pt-5 {
		left:0;
		min-width:100%;
		background:#fff;
		padding-top:.5rem !important;
	}
	aside:after {
		display:none;
	}
	aside img {
		max-width:250px;
		position:static;
		float:left;
	}
	#nav {
		padding:1rem 0 0 1.5rem;
		left:0;
	}
	#nav a {
		width:auto;
		font-size:1rem;
	}
}
@media screen and (max-width:1299px) {
	body {
		overflow-x:hidden;
	}
	h3 {
		font-size:5rem;
		line-height:1.2;
	}
	h4 {
		font-size:15rem;
		line-height:1.2;
	}
}
@media screen and (max-width:991px) {
	.ele {
		display:none;
	}
	.grey:after {
		width:100% !important;
		left:0 !important;
	}
	#leistungen, #team, #links, #kontakt {
		margin-top:150px;
	}
	aside img {
		float:none;
	}
	#nav {
		padding:0;
		visibility:hidden;
		opacity:0;
		max-height:0;
		transition:visibility .4s, opacity .4s;
	}
	#nav.active {
		visibility:visible;
		opacity:1;
		max-height:auto;
	}
	#nav a {
		text-align:center;
		width:100%;
		background:#fff;
	}
	#nav a:last-child {
		padding-bottom:2rem;
	}
	#opener {
		display:block;
	}
}
@media screen and (max-width:767px) {
	h1, h2 {
		font-size:3rem;
	}
	h3.pl-5 {
		font-size:3rem;
		padding:0 !important;
	}
	h4.pl-5 {
		font-size:5rem;
		padding:0 !important;
	}
	aside > a {
		max-width:250px;
	}
}