/* Allgemein */

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);

html, body {
	height:100%;
	padding:0;
	margin:0;
	
	font-family: "Roboto", Helvetica, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	color: #fff;
}
body {
	overflow-x: hidden;
}
em {
	font-style: normal;
}
a, a:hover {
	color: inherit;
	text-decoration: underline;	
}

/* Navigationsleiste */

header {
	position: fixed;
	width: 100%;
	left: 0;
	background: #fff;
	z-index: 1000;
}

#mainlogo {
	width: 300px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 5px 0 0 ;
}
#hamburger {
	display: none;
}

header nav ul {
	margin: 0 0 0 300px;
	padding: 0;
	list-style: none;
}

header nav li {
	display: inline-block;
	width: 16.66666666%;
	background-color: rgb(84, 84, 84);
	/*--background-color: #424242;*/
}

header nav li a {
	font-family: Calibri, "Open Sans", Helvetica, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	text-transform: uppercase;
	display: block;
	text-align: center;
	height: 100px;
	box-sizing: border-box;
	font-size: 16px;
	padding-top: 40px;
	border-bottom: 8px solid transparent;
}
header nav li a:hover {
	text-decoration: none;
	color: #fff;
}
header nav li a,
header nav li a:focus {
	color: #ccc;
	text-decoration: none;
	outline: none;
}
header nav li a.active {
	/*--border-color: rgb(0, 184, 237);*/
	color: rgb(0, 184, 237);
	/*background-color: #424242;*/
}
@media (min-width: 720px) {
	header nav li a {
		font-size: 12px;
	}
	header nav li a:hover {
		/*background-color: #424242;*/
		color: #fff;
	}
}

/*
 * Colored navigation
 */
@media (min-width: 720px) and (max-width: 1024px) {
	header nav li a {
		font-size: 14px;
		transition: border-color .75s, color .75s;
	}
	header nav li a.active {
		border-color: rgb(0, 184, 237);
		color: rgb(0, 184, 237);
	}
	header nav li:nth-child(1) a.active {
		border-color: #AAFA40;
		color: #AAFA40;
	}
	header nav li:nth-child(2) a.active {
		border-color: #00B8ED;
		color: #00B8ED;
	}
	header nav li:nth-child(3) a.active {
		border-color: #b0cb1e;
		color: #b0cb1e;
	}
	header nav li:nth-child(5) a.active {
		border-color: rgb(226, 58, 32);
		color: rgb(226, 58, 32);
	}
	header nav li:nth-child(6) a.active {
		border-color: #0096e3;
		color: #0096e3;
	}
}

/*
 * Animated dot navigation (CSS)
 *
 * .001% is required instead of 0%, otherwiese CSS minifiers might change the
 * value to 0 and 0s without a unit will break keyframes in internet explorer!
 */
@keyframes navidot {
	0%,100% {
		top: .001%;
		left: .001%;
		margin-top: -3px;
		margin-left: -3px;
	}
	35% {
		top: .001%;
		left: 100%;
		margin-left: -2px;
		margin-top: -3px;
	}
	50% {
		top: 100%;
		left: 100%;
		margin-left: -2px;
		margin-top: -2px;
	}
	85% {
		top: 100%;
		left: .001%;
		margin-left: -3px;
		margin-top: -2px;
	}
	
}
@media (min-width: 1025px) {
	header nav li a {
		font-size: 16px;
	}
	header nav li a.active {
		color: #999;
	}
	header nav li a.active span {
		position: relative;
		padding: 3px 9px;
		border: 1px solid #747474;
		border-radius: 3px;
	}
	header nav li a.active span:before {
		content: ' ';
		position: absolute;
		width: 3px;
		height: 3px;
		margin-top: -3px;
		margin-left: -3px;
		top: 0;
		left: 0;
		background: #f6f6f6;
		border-radius: 2px;
		border: 1px solid #3d3d3d;
		box-sizing: content-box;
		
		animation-duration: 6s;
		animation-name: navidot;
		animation-timing-function: linear;
	}

	header nav li a span {
		transition: border-color .75s, color .75s;
	}
	header nav li a.active span {
		border-color: rgb(0, 184, 237);
		color: rgb(0, 184, 237);
	}
	header nav li:nth-child(1) a.active span {
		border-color: #AAFA40;
		color: #AAFA40;
	}
	header nav li:nth-child(2) a.active span {
		border-color: #00B8ED;
		color: #00B8ED;
	}
	header nav li:nth-child(3) a.active span {
		border-color: #b0cb1e;
		color: #b0cb1e;
	}
	header nav li:nth-child(5) a.active span {
		border-color: rgb(226, 58, 32);
		color: rgb(226, 58, 32);
	}
	header nav li:nth-child(6) a.active span {
		border-color: #0096e3;
		color: #0096e3;
	}

	header nav li a.active span:before {
		background-color: rgb(0, 184, 237);
	}
	header nav li:nth-child(1) a.active span:before {
		background-color: #AAFA40;
	}
	header nav li:nth-child(2) a.active span:before {
		background-color: #00B8ED;
	}
	header nav li:nth-child(3) a.active span:before {
		background-color: #b0cb1e;
	}
	header nav li:nth-child(5) a.active span:before {
		background-color: rgb(226, 58, 32);
	}
	header nav li:nth-child(6) a.active span:before {
		background-color: #0096e3;
	}

}

/* Divs Grau Typo */

h1 {
	font-size: 64px;
	font-weight: 600;
	font-family: Calibri, "Open Sans", Helvetica, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}

p {
	font-size: 16px;
	line-height: 25px;
	margin: 0;
	font-weight: 300;
}

span.yell {
	font-size: 22px;
	font-family: Calibri, "Open Sans", Helvetica, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}

.content p {
	color: rgb(224,224,224);
	padding: 0 0 30px 0;
}

.content h1 {
	margin-bottom: 30px;
}

/* Divs Grau */

.content > * {
	max-width: 1280px;
	margin: 0 auto;
}

.content {
	background-color: rgb(96, 96, 96);
	padding: 50px 100px 20px 100px;
	text-align: center;
}

/* Divs Grau font colors */

.content.page-home em {
	color: rgb(254, 193, 46);
}

.content.page-about h1,
.content.page-about span.yell {
	color: #AAFA40;
}
.content.page-service h1 {
	color: #00B8ED;
}
.content.page-partners h1,
.content.page-partners span.yell {
	color: rgb(192, 220, 42);
}
.content.page-clients h1,
.content.page-clients span.yell {
	color: rgb(0, 165, 232);
}
.content.page-contact h1 {
	color: rgb(226, 58, 32);
}

/* Hero units with images (default definition is the pen) */

.herounit .annot {
	position: relative;
	top: 10px;
	left: 33%;
}
.herounit .annot .dot {
	display: block;
	background: #505050;
	border-radius: 8px;
	height: 16px;
	width: 16px;
}
.herounit .annot .line {
	display: inline-block;
	color: #505050;
	border: 3px solid #505050;
	border-right: none;
	border-top: none;
	margin-top: -5px;
	margin-left: 6px;
	height: 32px;
	width: 90px;
}
.herounit .annot .text {
	display: inline-block;
	vertical-align: sub;
	margin-left: 6px;
	color: #505050;
	font-size: 18px;
	line-height: 20px;
	font-weight: 400;
	font-family: Calibri, "Open Sans", Helvetica, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}

/* nut annotation */
.page-partners .herounit .annot {
	top: 0;
	left: 48%;
}
.page-partners .annot .line {
	border-bottom: none;
	border-top: solid;
	margin-top: 0;
	margin-bottom: -10px;
	width: 70px;
}
.page-partners .annot .text {
}

/* Hero text elements over images */

.herotext {
	max-width: 540px;
	color: #5E5E5E;
	text-align: center;
	padding: 16px 24px;
	
	position: relative;
	
	/*--background-color: rgba(255,0,255, .75);*/ /* debug */
	/*--background-color: rgba(255,255,255, .75);*/ /* debug */
	
	z-index: 1;
	top: 0;
	left: 0;
	
}

.herotext:before,
.herotext:after {
	content: ' ';
	position: absolute;
	height: 20px;
	width: 20px;
	border: 4px solid #5e5e5e;
}

.herotext:before {
	top: 0;
	left: 0;
	border-right: none;
	border-bottom: none;
}

.herotext:after {
	bottom: 0;
	right: 0;
	border-top: none;
	border-left: none;
}

.herotext h1 {
	font-size: 40px;
	line-height: 48px;
	margin: 0 0 16px 0;
}

.herotext p {
	font-size: 18px;
	font-weight: 400;
}

/* Full Service Icons */

#fullServiceIcons {
	width: 100%;
	max-width: 625px;
	margin: 0 auto;
	overflow: hidden;
	margin-bottom: 25px;
}

.fsIcon {
	float: left;
	padding: 0 25px;
}

.fsIcon img {
	width: 75px;
	margin-bottom: 10px;
}

.fsIcon p {
	font-size: 17px;
	font-family: Calibri, "Open Sans", Helvetica, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	color: #00B8ED;
	font-weight: 400;
	padding: 0 !important;
}

/* On Off Icon */

#onOffIcon {
	width: 287px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	padding-bottom: 10px;
}

#onOffIcon img {
	width: 100px;
	margin: 0 10px;
}

#onOffIcon p {
	font-family: Calibri, "Open Sans", Helvetica, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
	font-weight: 400;
	font-size: 22px;
	margin-top: 39px;
	padding: 0;
}

#onOffIcon * {
	float: left;
}

/* logo in homepage hero text */
#qonexinline {
	display: inline-block;
	height: 80px;
	margin-bottom: -25px;
	width: 260px;
	background: url(../img/logo-qonex-white.svg) no-repeat;
}
#qonexinline b {
	display: none;
}

/* layout blocks */

.wrap {
	max-width: 1280px;
}

/* centered blocks */

.center {
	text-align: center;
}

/* 
@media (max-width: 1024px) {
	.full-center {
		text-align: center;
	}
}
*/
@media (min-width: 1025px) {
	.full-center {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3D(-50%, -50%, 0);
		-webkit-filter: blur(0); /* fix blurred fonts/elements from 3d transforms */
	}
}



.page-about .img1 img {
	width: 200px;
	height: auto;
}
.page-about .img2 img {
	width: 100%;
	height: auto;
}



.page-contact .img1 {
	height: 320px;
	width: 100%;
	background: url(../img/page6-mitte.jpg) bottom left repeat-x;
}
.page-contact .img1:before,
.page-contact .img1:after {
	content: ' ';
	position: absolute;
	z-index: 1;
	bottom: 0;
}
.page-contact .img1:before {
	left: -149px;
	height: 280px;
	width: 349px;
	background: url(../img/page6-links.jpg) bottom left repeat-x;
}
.page-contact .img1:after {
	right: -150px;
	height: 280px;
	width: 380px;
	background: url(../img/page6-rechts.jpg) bottom left repeat-x;
}



@media (min-width: 1025px) {
	
	.herotext {
		position: absolute;
		z-index: 2;
	}
	.page-home .herotext {
		z-index: 1;
		top: 0;
		left: 0;
	}
	.page-home .mainimg {
		padding: 190px 0 0;
	}
	.home-mainimg {
		overflow: hidden;
		width: 862px;
	}
	.home-mainimg img {
		float: left;
	}
	.year-badge {
		width: 180px;
		margin: 80px 0 0 20px;
	}

	.page-about .herounit {
		height: 100%;
	}
	.page-about .herotext {
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
	}
	.page-about .wrap {
		height: 100%;
		width: 100%;
	}
	.page-about .img1 {
		position: absolute;
		top: 20%;
		left: 10%;
	}
	.page-about .img2 {
		position: absolute;
		top: auto;
		bottom: 20%;
		left: 5%;
		right: 5%;
		max-width: 100%;
	}



	.page-service .herotext {
		top: 25%;
		left: 50%;
	}
	.page-service .full-center {
		width: 100%;
	}
	.page-service .img1 {
		position: relative;
		width: auto;
		display: inline-block;
		left: 50%;
		transform: translate3D(-50%, 0, 0);
	}
	.page-service .img1 img {
		height: auto;
		max-width: 100%;
		position: relative;
	}
	.page-service .img1:after {
		content: ' ';
		position: absolute;
		z-index: -1;
		bottom: 0;
		right: -1000px;
		height: 32px;
		width: 1000px;
		background: url(../img/page3-kachel.jpg) bottom left repeat-x;
	}



	.page-partners .wrap {
		width: 100%;
		height: 400px;
	}
	.page-partners .herotext {
		top: 25%;
		left: 10%;
		-transform: translate3D(0, -30%, 0);
	}
	.page-partners .img1 {
		position: absolute;
		top: 10%;
		right: 10%;
	}



	.page-clients .herounit {
		height: 100%;
	}
	.page-clients .herotext {
		top: auto;
		bottom: 15%;
		left: 43%;
		transform: translateY(-50%);
	}
	.page-clients .full-center {
		width: 100%;
		height: 100%;
	}
	.page-clients .img1 {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-40%);
	}



	.page-contact .herotext {
		top: 10%;
		left: 50%;
		transform: translateX(-50%);
		max-width: 700px;
	}
	.page-contact .full-center {
		width: 100%;
	}



	.page-imprint p:first-child {
		margin-top: 40px;
	}
	.page-imprint p {
		margin-top: 20px;
		margin-bottom: 20px;
	}

}

.page-about .herotext:before,
.page-about .herotext:after {
	border-color: #AAFA40;
}
.page-service .herotext em {
	color: #00B8ED;
}
.page-partners .herotext em {
	color: #fff;
}
.page-partners .herotext p {
	color: #000;
}
.page-clients .herotext em {
	color: rgb(0, 165, 232);
}
.page-clients .herotext h1 {
	color: #000;
}
.page-contact .herotext em {
	color: rgb(226, 58, 32);
}
.page-contact .herotext h1 {
	color: #000;
}

.page-contact .herotext p {
	margin-top: 60px;
}

.page-imprint {
	overflow: hidden;
}
.page-imprint .herotext {
	position: relative;
	display: inline-block;
	width: auto;
	margin: 30px auto;
	left: auto !important;
	transform: none !important;
}
.page-imprint .herotext h1 {
	color: #fff;
	font-size: 60px;
	line-height: 60px;
	margin: 0;
}

/* Kontakt */



ul.contact {
	list-style: none;
	width: 100%;
	max-width: 1280px;
	margin: 30px auto;
	padding: 0;
}
ul.contact li {
	font-size: 16px;
	height: 50px;
	padding: 15px 0 0 0;
	margin: 0 5px;
	display: inline-block;
}
ul.contact li:nth-child(2) {
	padding: 15px 0 0 60px;
}
ul.contact li br {
	display: none;
}

ul.contact li a {
	padding: 15px 0 15px 60px;
	text-decoration: none;
}

.addr {
	background: url("../img/Ort_icon.svg") no-repeat left center;
	background-size: 50px;
}
.phone {
	background: url("../img/Tel_icon.svg") no-repeat left center;
	background-size: 50px;
}
.web {
	background: url("../img/Mail_icon.svg") no-repeat left center;
	background-size: 50px;
}

div.page-contact ul.contact {
	margin: 50px auto 30px;
}

div.page-imprint ul.contact {
	margin: 10px auto 30px;
}

/* Hintergrundfarben Pax */

.paxbox.page-home, .gap.page-home {
	background: #fdb417;
}
.paxbox.page-about, .gap.page-about {
	background: rgb(255, 255, 255);
}
.paxbox.page-service, .gap.page-service {
	background: #fff;
}
.paxbox.page-partners, .gap.page-partners {
	background: #b0cb1e;
}
.paxbox.page-clients, .gap.page-clients {
	background: #e3e3e3;
}
.paxbox.page-contact, .gap.page-contact {
	background: #fff;
}
.paxbox.page-imprintXXX, .gap.page-imprint {
	background: #0096e3 !important;
}
.skrollr .gap {
	background: transparent;
}

/* Scroll indicator, fixed on the right side of the page */



#skrollrbar {
	position: fixed;
	right: 60px;
	top: 35%;
	height: 25%;
	width: 6px;
	background: #00B8ED;
	z-index: 100;
}

#skrollrbar:before {
	content: ' ';
	display: block;
	height: 2px;
	width: 12px;
	left: -3px;
	position: relative;
	background: #00B8ED;
}

#skrollrbar > div {
	background: #545454;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 6px;
	height: 0;
}

#skrollrbar > div:before {
	content: ' ';
	display: block;
	height: 2px;
	width: 12px;
	left: -3px;
	position: relative;
	background: #545454;
}

.scrolldown, .scrollup {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -25%;
}

.scrolldown img, .scrollup img {
	width: 75px;
}

.scrollup {
	left: auto;
	right: 0;
	bottom: 20px;
}



/*
 * Eveyrthing from here on formerly was in index.php
 */
.skrollr-desktop body {
	height:100% !important;
}


/*
 * test borders for pages
 */
/* * /
.page-home     { border: 5px solid #000 !important; }
.page-about    { border: 5px solid #f00 !important; }
.page-service  { border: 5px solid #0f0 !important; }
.page-partners { border: 5px solid #00f !important; }
.page-clients  { border: 5px solid #ff0 !important; }
.page-contact  { border: 5px solid #f0f !important; }
.page-imprint  { border: 5px solid #0ff !important; }
/* */


/*
 * layer gray content containers over the "skroll bar"
 */
.content {
	position: relative;
	z-index: 40;
}


.gap .wrap {
	max-width: 1280px;
}
.skrollr .gap-100 .wrap {
	height: 100%;
}


.paxbox {
	width: 100%;
}
.paxbox > div {
	border-top: 100px solid transparent; /* for fixed menu */
	position: relative; /* for .full-center */
}
.paxbox.nomenubar > div {
	border-top: transparent none;
}
.paxbox * {
	-webkit-filter: blur(0); /* fix blurred fonts/elements from 3d transforms */
}

.skrollr .paxbox {
	position: fixed;
	left: 0;
	width: 100%;
	overflow: hidden;
}

.skrollr .paxbox-100 {
	height: 100%;
	top: -100%;
}

.paxbox > div {
	display:none;
}

.paxbox-100 > div {
	height: 100%;
	/*--top: 0;*/
}

.paxbox > div.skrollable-between {
	display:block;
}

.no-skrollr .paxbox {
	display:none !important;
}

#skrollr-body {
	height: 100%;
	overflow: visible;
	position: relative;
	z-index: 10;
}

/*.skrollr #skrollr-body {
	--pointer-events: none;
	--background: rgba(0,255,0,.35);
}
.skrollr .gap {
	--pointer-events: none;
	--background: rgba(0,255,0,.35);
}*/
.gap {
	position: relative; /* for .full-center */
}

.skrollr .gap-100 {
	height: 100%;
}

.gap-100px {
	display: none;
	height: 100px;
}
.skrollr .gap-100px {
	display: block;
}

.header, .content {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.content-full {
	height:100%;
}

a:active, a:visited,a:focus {
	color: #fff;
}