/* CSS Document */

/*Allgemein
**********************************************/
html, body{
	height: 100%;
}
body{
	font-family: corpid-regular, sans-serif;
	font-size: 100%;
	font-style: normal;	
	font-weight: normal;
	color: #fff;	
	line-height: 1.65rem;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: #606669;
}
@font-face {
    font-family: 'corpid-light';
    src: url('bm-fonts/corpid-light.eot');
    src: url('bm-fonts/corpid-light.eot?#iefix') format('embedded-opentype'),
         url('bm-fonts/corpid-light.woff') format('woff'),
         url('bm-fonts/corpid-light.ttf') format('truetype'),
         url('bm-fonts/corpid-light.svg#corbel') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'corpid-regular';
    src: url('bm-fonts/corpid-regular.eot');
    src: url('bm-fonts/corpid-regular.eot?#iefix') format('embedded-opentype'),
         url('bm-fonts/corpid-regular.woff') format('woff'),
         url('bm-fonts/corpid-regular.ttf') format('truetype'),
         url('bm-fonts/corpid-regular.svg#corbel') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ionicons';
    src: url('bm-fonts/ionicons.eot');
    src: url('bm-fonts/ionicons.eot?#iefix') format('embedded-opentype'),
         url('bm-fonts/ionicons.woff') format('woff'),
         url('bm-fonts/ionicons.ttf') format('truetype'),
         url('bm-fonts/ionicons.svg#bliss2r') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1.sig{
	width: 0;
	height: 1px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0;
	line-height: 0;
	color:#FFFFFF;
	text-indent: -9999px;
}
h1{
	font-size: 2.4em;
	font-weight: normal;
	color: #000;
	line-height: 1.15em;
	margin: 0 0 0.3em 0;
}
h2{
	font-family: corpid-light, sans-serif;
	font-size: 2.4rem;
	line-height: 1.15em;
	font-weight: normal;
	margin: 0 0 1.5rem -4.8%;
	transition: 0.4s ease;
}
h3{
	font-family: corpid-light, sans-serif;
	font-size: 1.8rem;
	line-height: 1.2em;
	font-weight: normal;
	margin: 0 0 0.6em 0;
	transition: 0.4s ease;
}
h4, h5{
	font-size: 1.5rem;
	line-height: 1.2em;
	font-weight: normal;
	margin: 1.2em 0 0.6em 0;
	transition: 0.4s ease;
}
h5{
	font-family: corpid-light, sans-serif;
}
p{
	padding: 0 0 12px 0;
	margin: 0;
}
img{
	width: 100%;
	height: auto;
}
.clearfix{
	clear: both;
}

/*links
**********************************************/
a:link{
	text-decoration: none;
	color: #fff;
}
a:visited{
	text-decoration: none;
	color: #fff;
}
a:hover{
	text-decoration: none;
	color: #ccc;
	transition: 0.4s ease;
}
a:active{
	text-decoration: none;
	color: #999;
}

/* Navigation desktop
**********************************************/

.menu-active{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	height: 24px;
	cursor: pointer;
	z-index: 54;
}
.kopf{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 75px;
	background: url(bilder/transp_3c474d_80.png) 0 0;
	z-index: 60;
}
/*.section-fuss{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 75px;
	background: url(bilder/transp_3c474d_80.png) 0 0;
	transition: 0.4s ease;
	z-index: 60;
}*/
.logo{
	position: absolute;
	top: 18px;
	right: 36px;
	width: 225px;
	height: auto;
	transition: 0.4s ease;
	z-index: 60;
}
ul.nav{
	position: absolute;
	list-style: none;
	top: 30px;
	left: 30px;
	width: auto;
	height: auto;
	font-size: 1.35rem;
	text-align: left;
	line-height: 1.2rem;
	margin: 0;
	padding: 0;
}
ul.nav li{
	position: relative;
	display: inline-block;
	top: 0;
	left: 0;
	height: auto;
	margin: 0 15px 0;
	padding-bottom: 24px;
	float: left;
	transition: 0.4s ease;
}
ul.nav li:last-of-type{
	color: #3F6;
	margin-right: 0;
}
ul.nav li.current, 
ul.nav li.current a,
ul.nav-mobil li.current, 
ul.nav-mobil li.current a,
p.current{
	color: #999;
}
ul.nav ul{
	position: absolute;
	top: 45px;
	left: -36px;
	width: auto;
	height: auto;
	white-space: nowrap;
	margin: 0;
	list-style: none;
	background: url(bilder/transp_3c474d_80.png) 0 0; 
	padding: 0 36px 12px;
	z-index: 60;
	display: none;
}
ul.nav ul li {
	position: relative;
	display: block;
	line-height: 1.5em;
	margin-left: 0;
	padding: 1rem 0 0.6rem;
	margin: 0 auto;
}
.use-hover li:hover ul{display: block;}

/* Navigation mobil
**********************************************/

.kopf-mobil{
	position: absolute;
	top: 0;
	right: 0;
	width: 273px;
	height: 60px;
	background-color: #3c474d;
	z-index: 60;
	display: none;
}
.logo-mobil{
	position: absolute;
	top: 12px;
	right: 18px;
	width: 180px;
	height: auto;
	transition: 0.4s ease;
	z-index: 60;
}
ul.nav-mobil{
	position: absolute;
	list-style: none;
	top: 60px;
	right: 0;
	width: 255px;
	height: auto;
	font-size: 1.8rem;
	text-align: left;
	line-height: 2.1rem;
	margin: 0;
	padding: 48px 0 0 18px;
	background: url(bilder/transp_666.png) 0 0 no-repeat;
	display: none;
}
ul.nav-mobil li{
	position: relative;
	left: 0;
	width: 150px;
	height: auto;
	margin-bottom: 30px;
	cursor: pointer;
}
ul.nav-mobil li a{
	transition: 0.4s ease;
}

/*Hamburger Button
**********************************************/
/*.nav-button{
	position: absolute;
	top: 18px;
	left: 36px;
	width: 48px;
	height: 42px;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
	transition: 0.4s ease;
	z-index: 150;
	display: none;
}
.h-button .h-line{
  	width: 48px;
  	height: 6px;
  	background-color: #ecf0f1;
  	display: block;
  	margin: 12px 0;
  	-webkit-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	transition: all 0.4s ease-in-out;
}
.h-button:hover{
  cursor: pointer;
}
.h-button.is-active{
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.h-button.is-active .h-line:nth-child(2){
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.h-button .h-line:nth-child(2){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.h-button.is-active .h-line:nth-child(2){
  opacity: 0;
}

.h-button.is-active .h-line:nth-child(1),
.h-button.is-active .h-line:nth-child(3){
  width: 36px;
  -webkit-transform-origin: right;
  -moz-transform-origin: right;
  -ms-transform-origin: right;
  -o-transform-origin: right;
  transform-origin: right;
}

.h-button.is-active .h-line:nth-child(1){
  -webkit-transform: translateY(20px) rotate(45deg);
  -ms-transform: translateY(20px) rotate(45deg);
  -o-transform: translateY(20px) rotate(45deg);
  transform: translateY(20px) rotate(45deg);
}

.h-button.is-active .h-line:nth-child(3){
  -webkit-transform: translateY(-20px) rotate(-45deg);
  -ms-transform: translateY(-20px) rotate(-45deg);
  -o-transform: translateY(-20px) rotate(-45deg);
  transform: translateY(-20px) rotate(-45deg);
}*/
.nav-button{
	position: absolute;
	top: 14px;
	right: 216px;
	width: 42px;
	height: 36px;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
	transition: 0.4s ease;
	z-index: 150;
	display: none;
}
.h-button .h-line{
  	width: 42px;
  	height: 4px;
  	background-color: #ecf0f1;
  	display: block;
  	margin: 9px 0;
  	-webkit-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}
.h-button:hover{
  cursor: pointer;
}
.h-button.is-active{
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.h-button.is-active .h-line:nth-child(2){
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}
.h-button .h-line:nth-child(2){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.h-button.is-active .h-line:nth-child(2){
  opacity: 0;
}
.h-button.is-active .h-line:nth-child(1),
.h-button.is-active .h-line:nth-child(3){
  	width: 30px;
	-webkit-transform-origin: right;
 	-moz-transform-origin: right;
 	-ms-transform-origin: right;
  	-o-transform-origin: right;
  	transform-origin: right;
}
.h-button.is-active .h-line:nth-child(1){
  	-webkit-transform: translateY(14px) rotate(45deg);
  	-ms-transform: translateY(14px) rotate(45deg);
  	-o-transform: translateY(14px) rotate(45deg);
  	transform: translateY(14px) rotate(45deg);
}

.h-button.is-active .h-line:nth-child(3){
  	-webkit-transform: translateY(-14px) rotate(-45deg);
  	-ms-transform: translateY(-14px) rotate(-45deg);
  	-o-transform: translateY(-14px) rotate(-45deg);
  	transform: translateY(-14px) rotate(-45deg);
}

/*Navigation - Allgemein
**********************************************/
.kopf.invisible,
.kopf-mobil.invisible{
	position: fixed;
	top: -90px;
}
.kopf.visible,
.kopf-mobil.visible{
	position: absolute;
	top: 0 !important;
}
.impressum{
	position: absolute;
	top: 0;
	right: 5%;
	width: 150px;
	height: auto;
	color: #fff;
	text-align: right;
}
.impressum p{
	padding-bottom: 0;
}


/* PagePiling Menu 
**********************************************/
/*body.pp-viewing-section1 > .kopf{
	top: 0 !important;
  	transition: 0.4 ease;
}
body.pp-viewing-section2 > .kopf,
body.pp-viewing-section3 > .kopf,
body.pp-viewing-section4 > .kopf{
	top: -90px;
}*/

/*Layout
**********************************************/

#buehne{
	position: relative;
	top:0;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	margin: 0 auto -60px;
	overflow: hidden;
}
.fixed{
	position: fixed;
}
.fullscreen-slider,
.background{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  	height: 100%;
  	overflow: hidden;
}
.fullscreen-slider img{
	width: inherit !important;
	height: auto !important;
}

.head{
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.head h2{
	position: relative;
	display: inline-block;
	top: 48%;
	font-family: corpid-regular, sans-serif;
	font-size: 4.5rem;
	color: #FFF;
	padding-bottom: 15px;
	margin-bottom: 0.6rem;
	transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);	
}
/*.head h2:before{
	position: absolute;
	content: '';
	height: 3px;
	bottom: 0;
    width: 60%;
	left: 20%;
	border-bottom: 6px solid #FFF;	
}*/
.article{
	position: relative;
	width:100%;
	height: auto;
	margin-top: 2rem;
	padding: 1rem 0 1.5rem;
}
.content-wrapper{
	position: relative;
	top: 0;
	width: 75%;
	max-width: 2100px;
	margin: 0 auto;
	padding-top: 2.4rem;
}
.inh{
	position: relative;	
	width: 45%;
	font-weight: normal;
	color: #fff;
	text-align: left;
	margin: 0 auto;
	transition: 0.4s ease;
}
table{
	width: 300px;
	border-collapse: collapse;
	margin: 0 0 12px 0;
}
td{
	vertical-align: top;
	padding: 0 0 0 0;
}
video,
figure{
	width: 47.4%;
	transition: 0.4s ease;
}
video.video-left,
figure.image-left{
	display: inline-block;
	margin: 0.3rem 5.1% 2.4rem 0;
	float: left;
}
video.video-right,
figure.image-right{
	display: inline-block;
	margin: 0.3rem 0 2.4rem 4.8%;
	float: right;
}
figure.image-left-sync,
figure.image-right-sync{
	display: inline-block;
	margin: 0.3em 0 2.4em;
}
figure.image-left-sync{
	float: left;
}
figure.image-right-sync{
	float: right;
}
video.video-center,
figure.image-center{
	width: 100%;
	height: auto;
	margin: 0.6rem 0 1.2rem;
}
figure.image-q{
	display: inline-block;
	width: 20%;
	margin: 0.3rem 0 2.4rem 4.8%;
	transition: 0.4s ease;
	float: right;
}
figure figcaption {
	font-size: 0.875em;
	line-height: 1.25em;
  	padding: 0.6em 0 1em;
}
video{
	padding-bottom: 2.4rem;
}
.pp-galerie-image-mc img:hover{
	-webkit-filter: none;
    -moz-filter: none;
    -o-filter: none;
    -ms-filter: none;
	filter: none;
	transition: 0.4s ease;
}
.fuss{
	position: relative;
	bottom: 0;
	height: 108px;
	width: 100%;	
	padding-top: 18px;
	background-color: #3c474d; 
	transition: 0.4s ease;
}
.fuss .inh{
	top: 0;
	left: 0;
	width: 90%;
	height: auto;
	padding: 0 5% 18px;
	margin: 0;
	transition: 0.4s ease;
}
.fuss .inh ul{
	position: relative;
	list-style: none;
	color: #fff;
	margin: 0 90px 0 0;
	padding: 0;
	transition: 0.4s ease;
	float: left;
}
dt{
	width: 75px;
	float: left;
}
#pp-nav{
	display: none;
}


/*Willkommen - Willkommen
**********************************************/
#bg-willkommen{
	background-image: url(bilder/adexchange_IMG_9465_sw3c474d_78_2400.jpg);
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder/adexchange_IMG_9465_sw3c474d_78_2400.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/adexchange_IMG_9465_sw3c474d_78_2400.jpg', sizingMethod='scale')";
	background-position: top center;
}
#willkommen .content-wrapper{
	height: auto;
	padding: 12% 0;	
}
#willkommen .content-wrapper h3{
	line-height: 3rem;
	text-align: center;
}

/*Willkommen - Über uns
**********************************************/
#bg-ueber-uns{
	background-image: url(bilder/BBS-TIRE_COLOGNE_skizze_3c474d_15_2400.jpg);
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder/BBS-TIRE_COLOGNE_skizze_3c474d_15_2400.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/BBS-TIRE_COLOGNE_skizze_3c474d_15_2400.jpg', sizingMethod='scale')";
}
.article#ueber-uns{	
	margin-top: 0;
	padding: 4.5% 0 4.5rem;
	transition: 0.4s ease;
}
.article#banner-ueber-uns{
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
	background-color: #3c474d;
}
#banner-ueber-uns .banner{
	padding-bottom: 400px;
}


/*Willkommen - Portfolio
**********************************************/
.article#portfolio .content-wrapper{
	padding-bottom: 42%;
}
.pp-tableCell{
	padding-bottom: 6%;
}
#bg-portfolio{
	background-image: url(bilder/ind-P1070113_gr_gw7_5_2400.jpg);
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder/ind-P1070113_gr_gw7_5_2400.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/ind-P1070113_gr_gw7_5_2400.jpg', sizingMethod='scale')";
	opacity: 0.15;	
}
.pf-galerie{
	position: relative;
	top:30px;
	left: -24px;
	width: calc(100% + 48px);
	height: auto;
	clear: both;
}
.pf-galerie .col33{
	position: relative;
	width: 33.33%;
	text-align: center;
	border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
	padding: 0 0 1.5rem;
	cursor: pointer;
	float: left;
	transition: 0.4s ease;
}
.col33:after {
  	content: "" ;
 	display: block !important;
  	padding-bottom: 6%;
}
.pf-galerie .col33 p{
	margin: 0;
}
.pf-galerie-image{
	position: relative;
	width: 100%;
	height: auto;
	z-index: 30;
	/*opacity: 0;*/
	transition: 0.4s ease;
}
.pf-galerie-image:hover,
.pf-galerie-image:active{
	opacity: 1;
	transition: 0.6s ease;
	-webkit-user-select: none; 
	-webkit-touch-callout: none;
}
.col33 img{
	width: 100%;
	height: auto;
}
.pf-galerie-info,
.pp-galerie-info{
	position: absolute;
	bottom: 24px;
	height: 24px;
	width: 100%;
	z-index: 1;
}
.pf-galerie-info h5,
.pp-galerie-info h5{
	position: relative;
	font-size: 1.5rem;
	color: #fff;
	line-height: 1.8rem;
	margin: 0;
	text-align: center;
}
.pf-col-cover{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	z-index: 3;
}
/*.col33 .image-cover{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 45px;
	background: url(bilder/eye.png) center center no-repeat;
}*/
.col33 .image-cover{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 45px;
}

/*Über uns - Textslider
**********************************************/
/*.slides{
  	position: relative;
	display: inline-block;
  	width: 100%;
	height: auto;
	overflow: hidden;
}
.slides ul {
	position: relative;
  	list-style: none;
  	width: 100%;
  	margin: 0;
  	padding: 0;
}
.slides li {
 	position: relative;
  	width: 100%;
  	float: left;
}
.slides li .inh{
	width: 90%;
}
p.headless{
	margin-top: 3rem;
}*/


/*Icons
**********************************************/
.ion-phone,
.ion-printer,
.ion-iphone,
.ion-mail,
.ion-earth{
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.ion-phone,
.ion-printer,
.ion-iphone,
.ion-mail,
.ion-earth{
	font-family: ionicons;
	line-height: 0.6em;
	text-align: center;
	color: #fff;
}
.ion-phone:before{
	position: relative;
	content: "\f2d2";	
	top: 0.2rem;
	font-size: 1.5rem;
	padding-right: 15px;
}
.ion-printer:before{
	position: relative;
	content: "\f21a";	
	top: 0.1rem;
	font-size: 1.35rem;
	padding-right: 15px;
}
.ion-iphone:before{
	position: relative;
	content: "\f1fa";	
	top: 0.15rem;
	font-size: 1.5rem;
	padding: 0 21px 0 4px;
}
.ion-mail:before{
	position: relative;
	content: "\f132";	
	top:0.1rem;
	font-size: 1.35rem;
	padding-right: 12px;
}
.ion-earth:before{
	position: relative;
	content: "\f276";	
	top:0.1rem;
	font-size: 1.35rem;
	padding-right: 12px;
}
.arrow-down,
.arrow-up{
	position: absolute;
	left: 50%;
	width: 28px;
	margin-left: -14px;
	z-index: 12;
}
.arrow-down{
	height: 36px;
	bottom: 36px;
}
.arrow-up{
	height: 24px;
	top: -60px;
}
.arrow-top{
	position: relative;
	width: 28px;
	height: 24px;
	margin: 0 auto 72px;	
}
.arrow-down:hover,
.arrow-up-ind:hover,
.arrow-up:hover,
.arrow-top:hover{
	opacity: 0.6;
}
.arrow-previous, .arrow-next{
	position: absolute;
	top: 50%;
	width: 30px;
	height: 60px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	filter: progid:DXImageTransform.Microsoft.Matrix(Dy=-50%);
	cursor: pointer;
	z-index: 1;
	transition: 0.4s ease;
}
.arrow-previous{
	/*background-image: url(bilder/arrow-l.png);*/
	left: -60px;
}
.arrow-next{
	/*background-image: url(bilder/arrow-r.png);*/
	right: -60px;
}
.arrow-previous:hover,
.arrow-next:hover{
	opacity: 0.7;
	transition: 0.4s ease;
}
#buttons{
	font-size: 72px;
	font-weight: normal;
}


/*Referenzen
**********************************************/

.banner{
	position: relative;
	top: 0;
	width: 100%;
	height: 28%;
	background-color: transparent;
	overflow: hidden;	
}
#in-ref{
	top: 36%;
}
ul.ref{
	position: relative;
	padding: 0; 
	text-align: justify;
	margin: 0 auto;
	transition: 0.4s ease;
}
ul.ref	li{ 
	display: inline-block; 
	list-style: none;
	font-size: 2rem;
	color: #000;
	transition: 0.4s ease;
	cursor: pointer;
}
.line{ 
	padding-left: 100%; 
}
ul.ref	li:hover{
	color: #666;
}

/*Referenzen Slider
**********************************************/
.flumen {
	position: relative;
  	display: flex;
  	overflow: hidden;
  	-webkit-overflow-scrolling: touch;
}
.flumen.no-flexbox {
    display: block;
    width: auto;
    white-space: nowrap;
}
.flumen .flumen-slide {
  flex-shrink: 0;
}
.flumen.no-flexbox .flumen-slide {
    display: inline-block;
}
.ref-slider{
	position: absolute;
  	display: flex;
	width: 100%;
  	overflow: hidden;
  	-webkit-overflow-scrolling: touch;
}
.ref-slider > div,
.pro-slider > div{
 	flex-shrink: 0;
  	width: 600px;
	min-width: 120px;
  	height: 400px;
  	background: grey;
  	background-repeat: no-repeat;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	margin: 0 6px;
	transition: 0.4s ease;
}
.pro-slider > div {
	position: relative;
}

/*Leistungen
**********************************************/
body#leistungen{
	background-color: #aaa;
}
#start-window{
		position: relative;	
}
.inh-lei,
.inh50{
	position: relative;	
	display: inline-block;
	width: 45%;
	font-weight: normal;
	color: #fff;
	text-align: left;
	transition: 0.4s ease;
}
.inh50{
	float: left;
}
.inh50.right{
	left: 10%;
}
#ueber-uns, #design, #partner, #individual-system, #messebau02{
	background-color: #606669;
}
ul.plus{
	list-style: none;
	padding-left: 15px;
}
ul.plus li{
	position: relative;
	padding-left: 0.3rem;
    text-indent: -0.9rem;
}
ul.plus li:before{
	position: relative;
	top: 0;
	content:"\002b";
	font-size: 1.5rem;
	color: #fff;
	padding-right: 0.6rem;
	margin-left: -0.4rem;
}
.bar{
	color: #fff;
	margin-top: 2em;
	border-bottom: 3px solid #666;
	cursor: pointer; 
}
.bar:first-of-type{
	margin-top: 0;
}
.bar:before{
  	content: "";
  	float: left;
  	width: 18px;
  	height: 18px;
  	margin-right: 0.6em;
  	margin-top: 0.4em;
  	background: url(bilder/plus.png) 0 0 no-repeat;
  	transform: rotate(0);
	-moz-transform:rotate(0);
 	-webkit-transform:rotate(0);
 	-o-transform:rotate(0);
 	-ms-transform:rotate(0);
	transition: .2s;
 	-moz-transition: .2s;
 	-webkit-transition: .2s;
 	-o-transition: .2s;
 	-ms-transition: .2s;
}
.bar h3{
	margin-bottom: 0.3em;
}
.bar:hover{
	color: #999;
}
.content{
	text-decoration: none;
	padding: 18px 0 0 0;
}
.current {
	color: #336699;
}
.bar.aktuell:before{
	transition: .2s;
 	-moz-transition: .2s;
 	-webkit-transition: .2s;
 	-o-transition: .2s;
 	-ms-transition: .2s;
	transform: rotate(45deg);
	-moz-transform:rotate(45deg);
 	-webkit-transform:rotate(45deg);
 	-o-transform:rotate(45deg);
 	-ms-transform:rotate(45deg);
}
.bar:hover:before {
	transition: .2s;
 	-moz-transition: .2s;
 	-webkit-transition: .2s;
 	-o-transition: .2s;
 	-ms-transition: .2s;
 	transform: rotate(45deg);
	-moz-transform:rotate(45deg);
 	-webkit-transform:rotate(45deg);
 	-o-transform:rotate(45deg);
 	-ms-transform:rotate(45deg);
}

/* bgCompare
------------------------------------*/

#light-theme .avant, #light-theme .apres{
	background: none !important;
}
.apres{
	margin-left: 75px !important;
}
.avant, .apres {
	left: calc(50% - 30px) !important;
	font-family: corpid-regular, sans-serif !important;
	font-size: 1.2rem !important;
	margin-top: 0 !important;
	-webkit-transform: translateY(-49%)!important;
	-moz-transform: translateY(-49%)!important;
	-ms-transform: translateY(-49%)!important;
	-o-transform: translateY(-49%)!important;
	transform: translateY(-49%)!important;
	filter: progid:DXImageTransform.Microsoft.Matrix(Dy=-49%)!important;
}

/*Projekte
**********************************************/
body#projekte{
	background-color: #606669;
}
.banner#banner-projekte{
	position: relative;
	height: 50%;
}
.pro-slider > div{
	width: 900px;
	min-width: 240px;
	height: 600px;
	transition: 0.4s ease;
}
.article#messen{
	background-color: #3c474d;
}
#messen .arrow-top{
	margin-top: 2rem;
}
.mega_text{
	display: block;
	color: #fff;
	margin-top: 12%;
	padding: 1.5rem 2rem 0.6rem 12.5%;
	background: url(bilder/transp_000_80.png);
}
.mega_text h2{
	padding: 0;
	margin: 0 0 6px 0;
}
.mega_text p{
	text-align: right;
	padding-right: 4px;
}
.parallaxator{
	position: relative;
	overflow: hidden;
}
.parallaxator > .parallax_child {
	position: absolute;
	top: 0;
}
#bbs-start{
	position: fixed;
	background: url(bilder-projekte/BBS/BBS-Essen_MoShow_2000_02_2400_gw9_sw606669_90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/BBS/BBS-Essen_MoShow_2000_02_2400_gw9_sw606669_90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/BBS/BBS-Essen_MoShow_2000_02_2400_gw9_sw606669_90.jpg', sizingMethod='scale')";
}
#fuchs-start{
	position: fixed;
	background: url(bilder-projekte/fuchs/Fuchs-2015_M_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/fuchs/Fuchs-2015_M_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/fuchs/Fuchs-2015_M_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#paschal-start{
	position: fixed;
	background: url(bilder-projekte/paschal/paschal-14_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/paschal/paschal-14_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/paschal/paschal-14_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#woerthersee-start{
	position: fixed;
	background: url(bilder-projekte/BBS-woertersee_treffen-IMG_1003_2400_gw9_sw606669_90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/BBS-woertersee_treffen-IMG_1003_2400_gw9_sw606669_90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/BBS-woertersee_treffen-IMG_1003_2400_gw9_sw606669_90.jpg', sizingMethod='scale')";
}
#ccbuchner-start{
	position: fixed;
	background: url(bilder-projekte/ccbuchner/didacta-IMG_0006_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/ccbuchner/didacta-IMG_0006_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/ccbuchner/didacta-IMG_0006_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#chemoform-start{
	position: fixed;
	background: url(bilder-projekte/chemoform/chemoform-aquanale_20151027-IMG_3168-HDR-2_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/chemoform/chemoform-aquanale_20151027-IMG_3168-HDR-2_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/chemoform/chemoform-aquanale_20151027-IMG_3168-HDR-2_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#xplace-start{
	position: fixed;
	background: url(bilder-projekte/xplace/xplace-20180228_130208_HDR_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/xplace/xplace-20180228_130208_HDR_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/xplace/xplace-20180228_130208_HDR_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#mildenberger-start{
	position: fixed;
	background: url(bilder-projekte/mildenberger/mildenberger-IMG_0038_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/mildenberger/mildenberger-IMG_0038_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/mildenberger/mildenberger-IMG_0038_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#bilstein-start{
	position: fixed;
	background: url(bilder-projekte/bilstein/bilstein-IMG_3891_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/bilstein/bilstein-IMG_3891_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/bilstein/bilstein-IMG_3891_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#dat-start{
	position: fixed;
	background: url(bilder-projekte/dat/dat-2018-325592641_20180912_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/dat/dat-2018-325592641_20180912_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/dat/dat-2018-325592641_20180912_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#hanover-start{
	position: fixed;
	background: url(bilder-projekte/hanover/hanover-displays_36_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/hanover/hanover-displays_36_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/hanover/hanover-displays_36_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#ladog-start{
	position: fixed;
	background: url(bilder-projekte/ladog/Ladog-2019_01_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/ladog/Ladog-2019_01_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/ladog/Ladog-2019_01_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#washi_beam-start{
	position: fixed;
	background: url(bilder-projekte/washi/Washi-Beam_real_02_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/washi/Washi-Beam_real_02_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/washi/Washi-Beam_real_02_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#body-start{
	position: fixed;
	background: url(bilder-projekte/body-coach/body-coach_01_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/body-coach/body-coach_01_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/body-coach/body-coach_01_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#clarion-start{
	position: fixed;
	background: url(bilder-projekte/clarion/Clarion-5_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((bilder-projekte/clarion/Clarion-5_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/clarion/Clarion-5_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#nexen-start{
	position: fixed;
	background: url(bilder-projekte/nexen/nexen-03_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((bilder-projekte/nexen/nexen-03_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/nexen/nexen-03_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#gemeinschaftsstand-start{
	position: fixed;
	background: url(bilder-projekte/gemeinschaftsstand/gemeinschaftsstand-Friedrichshvn_2006_02_2400_gw9_sw606669_90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/gemeinschaftsstand/gemeinschaftsstand-Friedrichshvn_2006_02_2400_gw9_sw606669_90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/gemeinschaftsstand/gemeinschaftsstand-Friedrichshvn_2006_02_2400_gw9_sw606669_90.jpg', sizingMethod='scale')";
}
#abas-ke-start{
	position: fixed;
	background: url(bilder-projekte/events/abas-DSCF2486_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/events/abas-DSCF2486_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/events/abas-DSCF2486_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#recaro-ve-start{
	position: fixed;
	background: url(bilder-projekte/recaro/recaro_16_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/recaro/recaro_16_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/recaro/recaro_16_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
#kuenstler-start{
	position: fixed;
	background: url(bilder-projekte/kuenstlerbuchung/evt-drummer_show_2_2400_gw9_sw606669-90.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder-projekte/kuenstlerbuchung/evt-drummer_show_2_2400_gw9_sw606669-90.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder-projekte/kuenstlerbuchung/evt-drummer_show_2_2400_gw9_sw606669-90.jpg', sizingMethod='scale')";
}
.content-wrapper#cw-projekte,
.content-wrapper#cw-daten{
	margin-bottom: 120px;
}
.kompendium{
	position: relative;
	display: inline-block;
	top: 120px;
	width: 100%;
	color: #fff;
	height: auto;
	margin-bottom: 60px;
}
/*img.figlio{
	width: 100%;
	max-width: 1200px;
	height: auto;
}*/

video{ 
   width: 47.4%; 
   height: auto;  
   background:transparent url(videos/vid-130510-GTI-DH-9369_gr900.jpg) no-repeat 0 0; 
   -webkit-background-size: contain; 
   -moz-background-size: contain; 
   -o-background-size: contain; 
   background-size: contain; 
   cursor: pointer;
   transparent: 0.4s ease;
}
video:hover{ 
	background:transparent url(videos/vid-130510-GTI-DH-9369_900.jpg) no-repeat 0 0; 
   -webkit-background-size: contain; 
   -moz-background-size: contain; 
   -o-background-size: contain; 
   background-size: contain; 
   transparent: 0.4s ease;
}
body#projekte .pf-galerie-image{
	opacity: 1;
}
body#projekte .pf-galerie-image{
	opacity: 1;
}
.pp-galerie h2,
.pp-galerie p{
	color: #fff;
}
.pp-galerie{
	position: relative;
	left: -9px;
	width: calc(100% + 18px);
	height: auto;
	clear: both;
}
.pp-galerie .col33{
	position: relative;
	width: 33.33%;
	text-align: center;
	border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
	padding: 0;
	cursor: pointer;
	transition: 0.2s ease;
	float: left;
}
.col33:after,
.col50:after{
  	content: "" ;
  	display: block !important;
  	padding-bottom: 6%;
  	transition: 0.2s ease;
}
.pp-galerie .col33 p,
.pp50-galerie .col50 p{
	margin: 0;
}
.pp-galerie-image,
.pp-galerie-image-mc{
	position: relative;
	width: 100%;
	height: auto;
	z-index: 30;
}
.pf-galerie-image img,
.pp-galerie-image-mc img{
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
	filter: grayscale(100%);
	transition: 0.4s ease;
}
.pf-galerie-image img:hover,
.pp-galerie-image-mc img:hover{
	-webkit-filter: none;
    -moz-filter: none;
    -o-filter: none;
    -ms-filter: none;
	filter: none;
	transition: 0.4s ease;
}
.col33 img{
	width: 100%;
	height: auto;
}
.pp-galerie-info h5{
	padding-top: 1.5rem;
}
.pp-col-cover,
.zoom-col-cover{
	position: absolute;
	top: 0;
	width: 100%;
	height: calc(100% - 2.4rem);
	z-index: 0;
}
.zoom-col-cover{
	background: url(bilder/plus_weiss.png)center center no-repeat #000;
	overflow: hidden;
}
.info h3{
	margin: 0 0 24px;
}
.info{
	position: relative;
	left: 0;
	margin: 1.5em 0 1.8rem;
}
img.pp-image-hidden{
	display: none;
}
.pp-galerie .col50{
	position: relative;
	width: 50%;
	text-align: center;
	border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
	padding: 0;
	cursor: pointer;
	transition: 0.2s ease;
	float: left;
}

.zurueck{
	position: relative;
	left: 0;
	height: 28px;
	color: #fff;
	padding-left: 42px;
	margin: 120px 0 30px;
	background: url(bilder/arrow-z.png) 0 0 no-repeat;
}
.zurueck:hover{
	opacity: 0.6;
}

/* Kontakt
**********************************************/
body#kontakt{
	background-color:#606669;
}	
#ba-kontakt{
	height: 600px;
	background: url(bilder/kontakt-IMG_9459_2400.jpg) top center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder/kontakt-IMG_9459_2400.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/kontakt-IMG_9459_2400.jpg', sizingMethod='scale')";
	transition: 0.4s ease;
}
.content-wrapper#cw-kontakt{
	top: 3rem;
	margin-bottom: 60px;
	transition: 0.4s ease;
}
iframe{
  	width: 100%;
    border:0;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
	  -webkit-filter: grayscale(99%); /* Chrome 19+ & Safari 6+ */
	  -webkit-backface-visibility: hidden;  /* Fix for transition flickering */
	  transition: 0.4s ease;
}
iframe:hover{
  	width: 100%;
    border:0;
    filter: none;
    filter: gray; /* IE6-9 */
	  -webkit-filter: none; /* Chrome 19+ & Safari 6+ */
	  -webkit-backface-visibility: visible;  /* Fix for transition flickering */
	  transition: 0.4s ease;
}
.embed-container{
	position: relative; 
	top: 6rem;
	height: 0;
	height: auto;
  	padding-bottom: 45%; 
	margin-bottom: 150px;
  	overflow: hidden; 
}
.embed-container iframe{
  	position: absolute; 
  	top: 0; 
  	left: 0; 
  	width: 100%; 
  	height: 100%; 
}

/*Impressum, datenschutz
**********************************************/
.content-wrapper#cw-daten{
	top: 120px;
	transition: 0.4s ease;
}
#ba-impressum{
	height: 600px;
	background: url(bilder/buchner-P1120022_2400x1200.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder/buchner-P1120022_2400x1200.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/buchner-P1120022_2400x1200.jpg', sizingMethod='scale')";
}
#ba-datenschutz{
	height: 600px;
	background: url(bilder/buchner-P1120011_2400x1200.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder/buchner-P1120011_2400x1200.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/buchner-P1120011_2400x1200.jpg', sizingMethod='scale')";
}
#impressum-start{
	position: fixed;
	background: url(bilder/imp-kafo_169824421_XL_gw9_sw000_75_2400.jpg) center center no-repeat;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(bilder/imp-kafo_169824421_XL_gw9_sw000_75_2400.jpg)', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/imp-kafo_169824421_XL_gw9_sw000_75_2400.jpg', sizingMethod='scale')";
}
#cw-daten h3{
	font-size: 1.5em;
	margin: 2rem 0 0.45rem;
}

/*Pagepiling
**********************************************/
.pagepiling-wrapper{
	display: none;
}
.pagepiling-wrapper#pp_unternehmen{
	display: block;
}
body #section1{
	overflow: hidden;
}
.pp-section {
    height:100%;
    position:absolute;
    width:100%;
}
.pp-easing {
    -webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
   -webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
}
.pp-scrollable{
	position: absolute;
    overflow-y: scroll;
    height: 100%;
}

/*Delighters
**********************************************/

/*.delighter.splash {
  transition: all 2s ease-out;
}
.delighter.splash.ended {
  background: #fff;
}
.delighter.right { transform:translate(-100%); opacity:0; transition: all .75s ease-out; }
.delighter.right.started { transform:none; opacity:1; }

.delighter.left { transform:translate(100%); opacity:0; transition: all .75s ease-out; }
.delighter.left.started { transform:none; opacity:1; }

.delighter.bottom { transform:translatey(300%); opacity:0; transition: all .75s ease-out; }
.delighter.bottom.started { transform:none; opacity:1; }

.delighter li { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started li { opacity: 1; transform: none; }
.delighter.started li:nth-child(1) { transition: all .7s ease-out .1s; }
.delighter.started li:nth-child(2) { transition: all .7s ease-out .3s; }
.delighter.started li:nth-child(3) { transition: all .7s ease-out .5s; }
.delighter.started li:nth-child(4) { transition: all .7s ease-out .7s; }
.delighter.started li:nth-child(5) { transition: all .7s ease-out .9s; }
.delighter.started li:nth-child(6) { transition: all .7s ease-out 1.1s; }
.delighter.started li:nth-child(7) { transition: all .7s ease-out 1.3s; }

.delighter pre {
  display: block; transition: all 2s ease-out; opacity: 0;
  padding: 20px 0;
  width: 1px; overflow: hidden;
}
.delighter.started pre {
  max-width: 99999px; width: 100%; opacity: 1;
}
.delighter .box { transition: all 1s ease-out; }
.delighter .box:nth-child(1) { transform: translate(-100%, 0); }
.delighter .box:nth-child(2) { transform: translate(170%, -70%); }
.delighter .box:nth-child(3) { transform: translate(20%, 0%); }

.delighter.started .box:nth-child(1) { transform: translate(0, 0); }
.delighter.started .box:nth-child(2) { transform: translate(70%, -70%); }
.delighter.started .box:nth-child(3) { transform: translate(20%, -120%); }*/



@media only screen and (min-width: 2400px) {

body{
		font-size: 125%;
}

/*Layout
**********************************************/


}

@media only screen and (max-width: 2400px) {

body{
		font-size: 125%;
}

/*Layout
**********************************************/

/*Projekte
**********************************************/

.pro-slider > div{
	width: 660px;
	height: 540px;
}


}

@media only screen and (max-width: 2100px) {
	
body{
		font-size: 120%;
}

/* Navigation 
**********************************************/


/*Layout
**********************************************/
.fuss{
	height: 105px;
}


/*projekte
**********************************************/
.pro-slider > div{
	width: 630px;
	height: 480px;
}

}

@media only screen and (max-width: 1800px) {

body{
		font-size: 111%;
}

/* Navigation 
**********************************************/

/*Layout
**********************************************/

/*Flumen
**********************************************/
.ref-slider > div{
	width: 510px;
	height: 360px;
}
.pro-slider > div{
	width: 600px;
	height: 450px;
}
#banner-ueber-uns .banner{
	padding-bottom: 360px;
}

/*Kontakt
**********************************************/
#ba-kontakt{
	height: 480px;
}

}

@media only screen and (max-width: 1650px) {

/*Textslider
**********************************************/
.ref-slider > div{
	width: 480px;
	height: 360px;
}


}

@media only screen and (max-width: 1500px) {
	
body{
		font-size: 108%;
}
h2{
	font-size: 2.25rem;
}
h3{
	font-family: corpid-light, sans-serif;
	font-size: 1.65rem;
}
/* Navigation 
**********************************************/


/*Layout
**********************************************/

.head h2{
	font-size: 4.2rem;
}
.content-wrapper{
	width: 75%;
}
.inh{
	width: 60%;
}
.fuss .inh ul{
	margin-right: 60px;
}


/*Projekt-Portfolio
**********************************************/

#section2 .pf-galerie .col33{
	position: relative;
	width: 33.33%;
	text-align: center;
	border-left: 12px solid transparent;
    border-right: 12px solid transparent
}
body#projekte .pf-galerie .col33,
.pp-galerie .col33{
	position: relative;
	width: 50%;
}
.pf-galerie-info{
	bottom: 18px;
}
.pf-galerie-info h5,
.pp-galerie-info h5{
	font-size: 1.325rem;
}
.col33:after{
  padding-bottom: 3%;
}

/*Flumen
**********************************************/
.ref-slider > div{
	width: 450px;
	height: 300px;
}
.pro-slider > div{
	width: 540px;
	height: 390px;
}
#banner-ueber-uns .banner{
	padding-bottom: 300px;
}

/*Messeplanung - Leistungen
**********************************************/
.leistungen-wrapper{
	left: -21px;
	width: calc(100% + 42px);
}

/*Referenzen
**********************************************/

#in-ref{
	margin-bottom: 90px;
}

/*Kontakt
**********************************************/
#ba-kontakt{
	height: 390px;
}

}

@media only screen and (max-width: 1350px) {

/* Referenzen
------------------------------------*/
.pp-galerie#kuenstler .col33{
	margin-bottom: 0.6rem;
}

}

@media only screen and (max-width: 1200px) {

body{
	font-size: 100%;
}
h2{
	font-size: 2.1rem;
}
h3{
	font-size: 1.5rem;
}
h4{
	font-size: 1.2rem;
}

/* Navigation 
**********************************************/
ul.nav li{
	margin: 0 10px 0;
}

/*Layout
**********************************************/

.head h2{
	font-size: 3.9rem;
}	
.inh{
	width: 69%;
}
.fuss{
	height: 96px;
	padding-top: 12px;
}
.fuss .inh ul{
	margin-right: 45px;
}
.pf-galerie{
	top:15px;
}

/*Willkommen - Willkommen
**********************************************/
#willkommen .content-wrapper{
	height: auto;
	padding: 12% 0 9%;	
}

/*Projekt-Portfolio
**********************************************/

pf-galerie-info{
	bottom: 0;
}
.col33:after {
  	padding-bottom: 3%;
}


/*Referenzen
**********************************************/
ul.ref	li{ 
	font-size: 1.65rem;
}

/*Flumen
**********************************************/
.ref-slider > div{
	width: 360px;
	height: 240px;
}
.pro-slider > div{
	width: 510px;
	height: 360px;
}
#banner-ueber-uns .banner{
	padding-bottom: 240px;
}

/*Messeplanung - Leistungen
**********************************************/
.leistungen-wrapper{
	left: -18px;
	width: calc(100% + 36px);
}
.leistungen-in h3{
	font-size: 1.65em;
}
.leistungen-in div p{
	line-height: 1.2em;
}
.inh50{
	width: 100%;
}
.inh50.right{
	top: 3rem;
	left: 0;
	margin-bottom: 3rem;
}
.col50{
	width: 100%;
}

/*Kontakt
**********************************************/
#ba-kontakt{
	height: 330px;
}

/*Impressum / Datenschutz
**********************************************/
.content-wrapper#cw-daten{
	top: 75px;
	margin-bottom: 60px;
}

}

@media only screen and (max-width: 1050px) {
	
/*Navigation
**********************************************/
ul.nav{
	top: 18px;
	left: 18px;	
}	
ul.nav li{
	margin: 0 8px 0;
}
.logo{
	top: 12px;
	right: 24px;
	width: 180px;
}
.kopf{
	height: 60px;
}
	
/*Willkommen - Willkommen
**********************************************/
#willkommen .content-wrapper h3{
	line-height: 2.4rem;
}

/*Messeplanung - Leistungen
**********************************************/
.leistungen:before{
	padding-top: 60%;
}
.leistungen-in h3{
	margin-top: 29%;
}
.leistungen-in div p{
	left: 8%;
	width: 84%;
	margin-top: 33%;
}

}

@media only screen and (max-width: 960px) {
	
/*Navigation
**********************************************/

.kopf{
	display: none;
}
.kopf-mobil{
	position: absolute;
	display: block;
}
.nav-button{
	display: block;
}

/*Hamburger Button
**********************************************/
.nav-button{
	top: 8px;
	right: ;
	width: 36px;
	height: 30px;
}
.h-button .h-line{
  	width: 33px;
  	height: 3px;
  	background-color: #ecf0f1;
  	display: block;
  	margin: 8px 0;
  	-webkit-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}

.h-button.is-active .h-line:nth-child(1),
.h-button.is-active .h-line:nth-child(3){
  width: 24px;
}

.h-button.is-active .h-line:nth-child(1){
  -webkit-transform: translateY(12px) rotate(45deg);
  -ms-transform: translateY(12px) rotate(45deg);
  -o-transform: translateY(12px) rotate(45deg);
  transform: translateY(12px) rotate(45deg);
}

.h-button.is-active .h-line:nth-child(3){
  -webkit-transform: translateY(-12px) rotate(-45deg);
  -ms-transform: translateY(-12px) rotate(-45deg);
  -o-transform: translateY(-12px) rotate(-45deg);
  transform: translateY(-12px) rotate(-45deg);
}	
	

/*Layout
**********************************************/	

.head h2{
	font-size: 3.6rem;
}	
.content-wrapper{
	width: 84%;
}
.inh{
	width: 72%;
}
.fuss .inh ul{
	margin-right: 30px;
}

/*Willkommen - Portfolio
**********************************************/
.article#portfolio{
	padding-bottom: 9% ;
}

/*Über uns - Textslider
**********************************************/

/*.arrow-down{
	bottom: 36px;
}
.arrow-top{
	margin: 0 auto 60px;	
}*/

/* Service-Icons
------------------------------------*/
/*#unser-service{
	width: 72%;
}

/*Messeplanung - Leistungen
**********************************************/
.leistungen-wrapper{
	left: -12px;
	width: calc(100% + 24px);
}

/*Projekt-Portfolio
**********************************************/
#section2 .pf-galerie .col33{
	width: 50%;
}
.pf-galerie-info{
	bottom: 15px;
}
.pf-galerie-info h5{
	font-size: 1.25rem;
}
.article#portfolio .content-wrapper{
	padding-bottom: 0.6rem;
}

/*Referenzen
**********************************************/
ul.ref{
	line-height: 1.25rem;
}
ul.ref	li{ 
	font-size: 1.313rem;
}
.pp-galerie#kuenstler .col33{
	margin-bottom: 0.9rem;
}
.pp-galerie-info h5{
	font-size: 1.25rem;
	padding-top: 1.8rem;
}

/*Flumen
**********************************************/
.ref-slider > div{
	width: 240px;
	height: 160px;
}
.pro-slider > div{
	width: 450px;
	height: 300px;
	margin: 0 4px;
}
#banner-ueber-uns .banner{
	padding-bottom: 160px;
}

/*Kontakt
**********************************************/
#ba-kontakt{
	height: 240px;
}

}


@media only screen and (max-width: 840px) {
	
/*Layout
**********************************************/
	
.head h2{
	font-size: 3.3rem;
}	

/*Willkommen - Über uns
**********************************************/
.article#ueber-uns{
	padding: 2rem 0 0;
}

/*Referenzen
**********************************************/
ul.ref{
	line-height: 1.35rem;
}
ul.ref	li{ 
	font-size: 1.35rem;	
}

/*Messeplanung - Leistungen
**********************************************/
.leistungen:before{
	padding-top: 75%;
}
.leistungen-in h3{
	margin-top: 35%;
}
.leistungen-in div p{
	left: 8%;
	width: 84%;
	margin-top: 39%;
}

/*Kontakt
**********************************************/
#ba-kontakt{
	height: 222px;
}
.embed-container{
	top: 3rem;
}


}

@media only screen and (max-width: 780px) {
	
/*Navigation
**********************************************/

/*ul.nav{
	top: 54px;
	width: 198px;
	font-size: 1.5rem;
	line-height: 1rem;
	padding: 30px 0 0 18px;
}
ul.nav li{
	width: 150px;
	height: 45px;
}*/
	
/* Layout
**********************************************/

.head h2{
	font-size: 3rem;
}

/*Icons
**********************************************/
.arrow-previous{
	left: -45px;
}
.arrow-next{
	right: -45px;
}
.arrow-down{
	bottom: 24px;
}

/*Referenzen
**********************************************/
ul.ref{
	line-height: 1.35rem;
}
ul.ref	li{ 
	font-size: 1.2rem;
}

/*Projekt-Portfolio
**********************************************/
body#projekte .pf-galerie .col33,
.pp-galerie .col33{
	position: relative;
	width: 100%;
}

/*Messeplanung - Leistungen
**********************************************/
.leistungen{
	position: relative;
	width: 46.5%;
	margin: 1.5%;
	float: left;
}
.leistungen:before{
	padding-top: 42%;
}
.leistungen-in h3{
	margin-top: 21%;
}
.leistungen-in div p{
	left: 10%;
	width: 80%;
	line-height: 1.35em;
	margin-top: 22%;
}

/*Projekte
**********************************************/
.pro-slider > div{
	width: 420px;
	height: 240px;
}

/*Referenzen
**********************************************/
.pp-galerie-info h5{
	padding-top: 1.5rem;
}

/*Kontakt
**********************************************/
#ba-kontakt{
	height: 195px;
}
.embed-container{
	top: 3rem;
}

}


@media only screen and (max-width: 660px) {
	
h2{
	font-size: 1.8rem;
	margin: 0 0 1rem 0;
}
h3{
	font-size: 1.35rem;
}
h4{
	font-size: 1.2rem;
}

/*Layout
**********************************************/

.kopf{
	width: 216px;
	height: 54px;
}
.logo{
	top: 17px;
	left: 66px;
	width: 135px;
}
.head h2{
	font-size: 2.4rem;
}
.content-wrapper{
	width: 90%;
}
.inh{
	width: 78%;
}
figure{
	width: 100%;
	transition: 0.4s ease;
}
figure.image-left,
figure.image-right{
	margin: 0.3rem 0 1.5rem;
	float: none;
}

/*Willkommen - Willkommen
**********************************************/
#willkommen .content-wrapper h3{
	line-height: 2.1rem;
}

/*Willkommen - Über uns
**********************************************/
.article#ueber-uns{	
	padding: 0 0 2.4rem;
}

/*Willkommen - Portfolio
**********************************************/

.article#portfolio{
	padding-bottom: 12% ;
}

.pf-galerie{
	left: -6px;
	width: calc(100% + 12px);
	height: auto;
	clear: both;
}
#section2 .pf-galerie .col33{
	position: relative;
	width: 100%;
	text-align: center;
	border-left: 6px solid transparent;
    border-right: 6px solid transparent
}
#section2 .pf-galerie-info h5{
	font-size: 1rem;
	line-height: 1.2rem;
}
#section2 .col33:after {
  	padding-bottom: 0;
}
#section2 .pf-galerie-info{
	bottom: 3px;
}

/*Icons
**********************************************/
.arrow-previous{
	left: -15px;
}
.arrow-next{
	right: -15px;
}
	
/*leistungen
**********************************************/
.inh-lei{
	width: 100%;	
}

/*Messeplanung - Leistungen
**********************************************/

.leistungen-in h3{
	margin-top: 23%;
}
.leistungen-in div p{
	left: 5%;
	width: 90%;
	line-height: 1.35em;
	margin-top: 26%;
}
.leistungen:before{
	padding-top: 48%;
}
.pp-galerie .col50{
	width: 100%;
}

/*bgCompare
**********************************************/
.apres{
	margin-left: 60px !important;
}
.avant, .apres {
	left: calc(50% - 18px) !important;
	font-size: 1rem !important;
}


/*Referenzen
**********************************************/
ul.ref{
	line-height: 1rem;
}
ul.ref	li{ 
	font-size: 1.2rem;	
}

/*Projekte
**********************************************/
.pro-slider > div{
	width: 360px;
	height: 210px;
}

/*Kontakt
**********************************************/
#ba-kontakt{
	height: 180px;
}
.embed-container{
	top: 3rem;
}

/*Impressum / Datenschutz
**********************************************/
.content-wrapper#cw-daten{
	top: 60px;
	margin-bottom: 30px;
}
.arrow-top{
	margin: 0 auto 45px;	
}

}

@media only screen and (max-width: 540px) {
	
/*Layout
**********************************************/
.fuss{
	height: 186px;
	padding-top: 12px;
}
.fuss .inh ul{
	margin-bottom: 0.6rem;
	clear: both;
}
	
/*Referenzen
**********************************************/	

}

@media only screen and (max-width: 480px) {
	
.kopf-mobil{
	width: 240px;
	height: 51px;
}	
.nav-button{
	top: 6px;
	right: 186px;
}
ul.nav-mobil{
	top: 51px;
	width: 222px;
	font-size: 1.5rem;
	line-height: 1.8rem;
	padding: 30px 0 0 18px;
}
ul.nav-mobil li{
	width: 120px;
	margin-bottom: 18px;
}
.logo-mobil{
	width: 150px;
}	

/*Layout
**********************************************/
.head h2{
	font-size: 2.1rem;
}
.inh{
	width: 81%;
}

/*Icons
**********************************************/
.arrow-down{
	bottom: 15px;
}

/*Willkommen - Portfolio
**********************************************/
.pf-galerie{
	left: -6px;
	width: calc(100% + 12px);
	height: auto;
	clear: both;
}
#section2 .pf-galerie .col33{
	position: relative;
	text-align: center;
	border-left: 6px solid transparent;
    border-right: 6px solid transparent
}
#section2 .pf-galerie-info h5{
	font-size: 1rem;
	line-height: 1.2rem;
}
#section2 .col33:after {
  	padding-bottom: 3%;
}
#section2 .pf-galerie-info{
	bottom: 9px;
}
	
/*Referenzen
**********************************************/
ul.ref{
	line-height: 1rem;
}
ul.ref	li{ 
	font-size: 1rem;	
}
.pp-galerie-info h5{
	padding-top: 1.65rem;
}

/*Messeplanung - Leistungen
**********************************************/
.leistungen{
	width: 97%;
	margin: 1.5%;
}
.leistungen:before{
	padding-top: 36%;
}
.leistungen-in h3{
	font-size: 1.8em;
	margin-top: 17%;
}
.leistungen-in div p{
	left: 7%;
	width: 88%;
	margin-top: 18%;
}

/*Projekte
**********************************************/
.pro-slider > div{
	width: 240px;
	height: 150px;
	margin: 0 3px;
}

/*Kontakt
**********************************************/
#ba-kontakt{
	height: 165px;
}
.embed-container{
	top: 3rem;
}


}


@media only screen and (max-width: 360px) {
	
/*Layout
**********************************************/


/*Kontakt
**********************************************/
#ba-kontakt{
	height: 150px;
}
.embed-container{
	top: 2.4rem;
}


}