* {
	margin:0;
	padding:0;
	font-weight: normal;
	list-style: none;
	-webkit-backface-visibility: hidden;
}

html, body {
	margin: 0;
	padding:0;
}

body.scrollock {
	overflow: hidden;
}

body {
	background: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size:12px;
	line-height: 1.3em;
	min-width:980px;
}



/* Typo */
h1, h2, h3 {
	font-family: "AdobeGaramondProRegular";
	color: #6d6e71;
	font-size: 28px;
	line-height: 28px;
	text-align: center;
}
h3 {
	font-family: "AdobeGaramondProRegular";
	color: #6d6e71;
	font-size: 22px;
	line-height: 28px;
	text-align: center;
}
h4 {
	font-family: "AdobeGaramondProRegular";
	color: #4B3929;
	font-weight: bold;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
}

h6 {
	font-family: "AdobeGaramondProRegular";
	color: #4B3929;
	font-weight: bold;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
}

h6 {
	margin: 20px 0 12px 0;
}

h2 {
	line-height: 28px;
	font-size: 28px;
	margin: 0 0 16px 0;
	color: #6d6e71;
}

p {
	text-align: center;
	color: #6d6e71;
	line-height: 18px;
	font-size: 13px;
}
bold {
	font-weight: bold;}

hr {
	border: none;
	background: #d1d3d4;
	height: 1px;
}

a {
	color: #6D6E71;
}




/* Bereiche */
#willkommen,
#agentur,
#arbeiten,
#wafai2013
#services,
#karriere {
	height:880px;
	position: relative;
}

#arbeiten{
	height:880px;
	position: relative;}
	
	
#willkommen,
#agentur,
#karriere {
	background: #b2ccd1  url(../imgLayout/bg_blue.jpg) 50% 0 no-repeat;
}

#arbeiten,
#services {
	background: #fbfaf9; background-image:url(../imgLayout/cloth.jpg);
}

#services {
	background: #fbfaf9; background-image:url(../imgLayout/cloth2.jpg);
}

.innerWrapper {
	width: 930px;
	height:880px;
	margin: 0 auto;
	position: relative;
	top:0;
}

.sprite {
	position: absolute;
	background-repeat: no-repeat;
	width: 100%;
	height: 880px;
}

/* preloader */
#preloader {
	z-index: 999;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fbfaf9;
	display:block;
}
.preloader-scroll {
  background: url('../imgLayout/scroll.gif') no-repeat center center;
  position: absolute;
  top: 240px;
  height: 150px;
  width: 400px;
}
.preloader-progress {
	width: 100%;
	height: 42px;
	position: absolute;
	background: url('../imgLayout/loader.png') no-repeat bottom center;
	bottom: 85px;
	display: none;
}
.preloader-content {
	position: relative;
	width: 700px;
	height: 130px;
}
.preloader-info {
	position: absolute;
	bottom: 0;
	color: #bcbec0;
	width: 100%;
	text-align: center;
}
.preloader-content .logo {
	position: absolute;
	bottom: 20px;
}
.preloader-wrapper {
	position: relative;
	margin: 65px auto 0 auto;
	width: 400px;
	height: 130px;
}


/* Navigation */
#navigation {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 800;
	height: 50px;

}

.navWrapper {
	min-width: 950px;
	width: 950px;
	background: url('../imgLayout/nav_bg.png') repeat-x;
	height: 45px;
	margin: 0 auto;
	position: relative;
	box-shadow: 0px 0px 6px #333;

}



.nav-item.active, .nav-item:hover {
	color: #d2d3d5 !important;
	background-position: left bottom;
}

.nav-item {
	background-repeat: no-repeat;
	background-position: left top;
	height: 45px;
	cursor: pointer;
	position: relative;
	z-index:400;
	color: #6d6e71;
	width:100px;
	text-align: center;
	text-transform: uppercase;
	line-height:45px;
	font-size: 12px;
	float:left;
	-webkit-transition: all .5s ease-in-out;
}

/* MagicLine */

#magic-line {
	position: absolute;
	top:0;
	left: 0;
	width: 120px;
	height: 45px;
	z-index:390;
	background: url('../imgLayout/gallery_bg.jpg') center top;
	opacity: .7;
}


#navigation .contact {
	float: right;
}

#navigation .contact-email, #navigation .contact-fb, #navigation .contact-phone {
margin: 0 24px 0 0;
}


#navigation .contact-fb {
	background: url('../imgLayout/fb.png') no-repeat center 11px;
	width: 36px;
	height: 46px;
	cursor: pointer;
	float: left;
	position: relative;

}


#navigation .contact-fb_hover {
	background: url('../imgLayout/fb_hover.png') no-repeat center 11px;
	width: 36px;
	height: 46px;
	cursor: pointer;
	position: absolute;
	opacity: 0;
	-webkit-transition: 0.3s all ease-in-out;
}

body.safari .contact-fb {
	-webkit-backface-visibility: hidden;
}

#navigation .contact-fb:hover .contact-fb_hover {
	opacity: 1
}

#navigation .contact-email, #navigation .contact-phone {
	line-height: 46px;
	float: left;
}

#navigation, #navigation a {
	color: #939598;
}





/* Willkommen */
.sprite.spaceshuttle {
	background-image: url("../imgLayout/spaceshuttle.png");
	z-index: 199;
}

.sprite.cloud-small {
	background-image: url("../imgLayout/cloud_small.png");
	z-index: 198;
}

.sprite.cloud-big {
	background-image: url("../imgLayout/cloud_big.png");
	z-index: 201;
}

.sprite.balloon-red {
	background-image: url("../imgLayout/balloon_red.png");
	z-index: 198;
}

#welcome .sprite.balloon-purple {
	z-index: 198;
}

.logo {
	background: url('../imgLayout/logo.png') no-repeat center center;
	width: 670px;
	height: 54px;
}

ie6 .logo,
ie7 .logo,
ie8.logo {
	background: url('../imgLayout/logo.png') no-repeat center center;
	width: 100%;
	height: 54px;
}

#willkommen .logo {
	top: 120px;
	position: absolute;
	z-index: 300;
}

.willkommen_text {
	position: absolute;
	bottom: 75px;
	z-index: 400;
	left: 0;
	width: 320px;
}

/* News */
#news {
	display:none;
	position: relative;
}

.agentur_gallery_trigger,
.news_gallery_trigger {
	position: absolute;
	bottom:-10px;
	left:50%;
	margin-left: -68px;
	width:136px;
	display:block;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	z-index: 250;
}

.agentur_gallery_trigger:hover,
.news_gallery_trigger:hover {
	bottom:-5px;
	cursor: pointer;
}

/* Agentur Galerie */
.ajax-data a {
	color:#fff;
}


#agentur-galerie {
	display:none;
	position: relative;
}

.slideshow .infostream .item {
	display:none;
}

.slideshow .infostream .item.first {
	display:block;
}

.slideshow hr {
	background: #222;
	border-bottom: 1px solid #777;
	margin:0;
}

.slideshow {
	height: 470px;
	width: 100%;
	background: url('../imgLayout/gallery_bg.jpg') center top repeat;
	color: #ddd;
	cursor: default;
	z-index:255;
}

.total,
.slideshow .label {
	display:none;
}



.imageSlider {
	width:700px;
	height:430px;
	overflow: hidden;
	box-shadow: 1px 1px 6px #111;
	position: relative;
}

.imageSlider span {
	display:block;
	height:430px;
	float:left;
}

.imageWrapper {
	position: absolute;
	left:0;
	top:0;
	-webkit-transition: left .3s ease-in-out;
	-moz-transition: left .3s ease-in-out;
	-ms-transition: left .3s ease-in-out;
	transition: left .3s ease-in-out;
}

.arrow {
	position: absolute;
	display: block;
	width: 200px;
	cursor: pointer;
	height:470px;
	background: url(../imgLayout/arrowsBig.svg) no-repeat -40px center;
	opacity: .7;
	top:0;
	z-index:30;
}

#agentur-galerie .arrow,
#news .arrow,
.showDetail .arrow {
	background-image: url(../imgLayout/whiteArrowsBig.svg);
	background-repeat: no-repeat;
}

@media only screen and (max-width: 1100px) {
	.arrow {
		width: 20px;
		background: url(../imgLayout/arrows.svg) no-repeat center center;
	}

	#agentur-galerie .arrow,
	#news .arrow,
	.showDetail .arrow {
		width: 20px;
		background-image: url(../imgLayout/whiteArrows.svg);
	}
}

.arrow:hover {
	opacity: 1;
}

#arbeiten .prevTeaser, #arbeiten .nextTeaser {
	top: 276px;

}

.arrow.prevTeaser,
.prevSlide {
	left:0px;
	background-position: -45px center;
}

.arrow.nextTeaser,
.nextSlide {
	right:0;
	background-position: 166px center;
}

@media only screen and (max-width: 1100px) {
	.arrow.nextTeaser,
	.nextSlide {
		right:0;
		background-position: 0px center;
	}

	.arrow.prevTeaser,
	.prevSlide {
	left:0px;
	background-position: -20px center;
}
}

.slider_controls  {
	min-width: 200px;
	position: absolute;
	top:435px;
	left:0;
	float: left;
	z-index: 100;
}

.slider_controls li {
	width: 8px;
	height: 8px;
	background: url('../imgLayout/gallery_dot.png') no-repeat center center;
	float: left;
	margin: 0 8px 0 0;
	cursor: pointer;
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);
}

.slider_controls li:hover,
.slider_controls li.active {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}



.infostream{
	position:absolute;
	top:0;
	left: 0;
	height: 470px;
	width: 930px;
}



.detailSlideshowContainer {
	overflow:hidden;
}


.kategorie,
.titel .value p,
.beschreibung .value,
.logoInfostream,
.logodetail {
	left:720px;
	width: 210px;
	position:absolute;
}


.kategorie {
	font-size: 14px;
	font-family: "AdobeGaramondProRegular";
	font-style: italic;
	top:5px;
	letter-spacing: 0.9px;
	color: #ddd;
}

.titel .value p {
	font-size: 16px;
	line-height: 19px;
	width: 100%;
	bottom: 330px;
	font-family: Helvetica, Arial, sans-serif;
	text-align: left;
	color:#d1d3d4;
}

#arbeiten .titel .value p {
	bottom: 310px;
}

.beschreibung .value {
	width: 100%;
	top: 170px;
}

.beschreibung .value p,
.beschreibung .value table {
	font-size: 10px;
	line-height: 15px;
	margin: 0 0 9px 0;
	color: #d1d3d4;
	text-align: left;
	width:210px;
}

.logoInfostream,
.logodetail {
	bottom:15px;
	width: 210px;
	height:35px;
	opacity: .8;
}

.logoInfostream {
	bottom:41px;
}

.close,
.impr-close {
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter: alpha(opacity=80);
	font-family: "AdobeGaramondProRegular";
	font-size: 11px;
	background-image: url('../imgLayout/close.png');
	background-repeat: no-repeat;
	background-position: right center;
	cursor: pointer;
	width: 49px;
	text-align: left;
	display: inline-block;
	color: #fff;
	height: 14px;
	line-height: 14px;
	position: absolute;
	right:-22px;
	top:3px;
	z-index:500;
}

.impr-close {
	color:#6d6e71;
	right:10px;
	top: 10px;
}

.impr-close:hover
.close:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}


/* Arbeiten */
#arbeiten .ce_text,
#services .ce_text,
#karriere .ce_text {
	padding-top: 26px;
}

#arbeiten .info {
	display:none;
}

.arbeiten_intro {
	padding-top:30px;
}

.teaserWrapper {
	width:100%;
	height:1152px;
	position: relative;
	margin-top: 10px;
	-webkit-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	overflow:visible;
}

.teaserSlider {
	width:930px;
	height:342px;
	position: relative;
	overflow:hidden;
	margin: 0 auto;
	left: 0;
	top: 0;
	z-index: 100;
}

.teaserSlideWrapper {
	width:1860px;
	position:absolute;
	left:0;
	top:0;
	-webkit-transition: 0.3s ease-in-out all;
	-moz-transition: 0.3s ease-in-out all;
	-ms-transition: 0.3s ease-in-out all;
	transition: 0.3s ease-in-out all;
}

.arbeitenTeaser {
	background: url(../imgLayout/projects_raster.png) no-repeat;
	float:left;
	width: 930px;
	height: 342px;
}

.arbeitenTeaser .item {
	width:231px;
	height:170px;
	float:left;
	overflow: hidden;
	position: relative;
	margin: 1px 1px 0 0;
}

.arbeitenTeaser .field {
	position: absolute;
	top:0;
	left:0;
}

.arbeitenTeaser .item .bildteaser {
	opacity:0;
	-webkit-transition: 0.3s ease-in-out all;
	-moz-transition: 0.3s ease-in-out all;
	-ms-transition: 0.3s ease-in-out all;
	transition: 0.3s ease-in-out all;
	cursor: pointer;
}

.arbeitenTeaser .item:hover .bildteaser {
	opacity:1;
}

.arbeitenTeaser .field.neuesprojekt {
	position: absolute;
	left: auto;
	top: auto;
	right:0;
	bottom:0;
	width:58px;
	height:58px;
	background: url(../imgLayout/neuesButton.png) no-repeat;
	color: transparent;
	display:block;
	cursor: pointer;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

.arbeitenTeaser .item:hover .neuesprojekt {
	opacity:0;
}



#arbeiten .ce_text {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	position: relative;
}

.arbeitenDetailWrapper {
	width: 100%;
	background: url('../imgLayout/gallery_bg.jpg') center top repeat;
	color: #ddd;
	cursor: default;
	z-index:255;
	display:block;
	float:left;
	margin-right:930px;
	height:0;
	-webkit-transition: height 0.2s ease-in-out;
	-ms-transition: height 0.2s ease-in-out;
	-moz-transition: height 0.2s ease-in-out;
	transition: height 0.2s ease-in-out;
	position: relative;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}


.arbeitenDetailWrapper.showDetail {
	height:470px;

}

.error {
	display:none;
}

.arbeitenDetailWrapper .item {
	position: relative;
	width: 930px;
	height:470px;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.hideUp {
	top:-320px;
}

.closeTrigger {
	width:100%;
	height: 880px;
	background: rgba(255,255,255, 0.5);
	position: absolute;
	top:0;
	left:0;
	z-index:200;
	display:none;
}

/* ############### Slideshows */
.slideshow {
	height: 0;
	position: relative;
	-webkit-transition: height .4s ease-in-out;
	-moz-transition: height .4s ease-in-out;
	-ms-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	}

.slideshow.active {
	height: 470px;
}

.ajax-data  {
	display:none;
	width:930px;
	height:450px;
	position:absolute;
	top:15px;
}


.ajax-loader {
	width: 55px;
	height: 55px;
	background: url(../imgLayout/ajax-loader.png) no-repeat center center;
	animation: rotating 3s linear infinite;
	-webkit-animation: rotating 3s linear infinite;
	-moz-animation: rotating 3s linear infinite;
	-o-animation: rotating 3s linear infinite;
	margin: 195px auto 400px auto;
	opacity: .5;
}

@keyframes rotating {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotating {
    from{
        -moz-transform: rotate(0deg);
    }
    to{
        -moz-transform: rotate(360deg);
    }
}

@-o-keyframes rotating {
    from{
        -o-transform: rotate(0deg);
    }
    to{
        -o-transform: rotate(360deg);
    }
}

/* Arbeiten Hinweis Footer */

#arbeiten .ce_text.arbeiten-hinweis {
	position:absolute;
	top: 830px;
	width: 940px;
	height:20px;
	left: 50%;
	margin-left: -470px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
}

#arbeiten .ce_text.arbeiten-hinweis p {
	color: #939598;
	font-size: 10px;
	text-align: center;
}


/* Agentur */
#agentur {
	overflow:hidden;
}

#agentur .cloud-big {
	z-index: 190;
}

#agentur .balloon-red {
z-index: 185;
}

.sprite.balloon-pink {
	background-image: url("../imgLayout/balloon_pink.png");
	z-index: 198;
}

#agentur .balloon-green {
	z-index: 195;
	background-image: url("../imgLayout/balloon_green.png");
}

.sprite.balloon-purple {
	background-image: url("../imgLayout/balloon_purple.png");
	z-index: 197;
}

.circle {
	text-align: center;
	background: url(../imgLayout/about_circle.png) no-repeat center center;
	height:530px;
	position: absolute;
	top:50px;
	width:100%;
	padding-top: 280px;
	z-index: 200;
}

.circle img {
	margin-bottom:40px;
}

.circle p {
	color:#d1d3d4;
	z-index: 210;
}



/* KeyTip */

.keyTip {
	position:absolute;
	left:0;
	top: 120px;
	width:700px;
	height:70px;
	background: rgba(255, 255, 255, 0.8) url(../imgLayout/navigate.png) center center no-repeat;
	display:none;
	padding-top:120px;
	font-size: 16px;
	line-height: 19px;
	font-family: Helvetica, Arial, sans-serif;
	text-align: center;
	color: #6d6e71;
}


/* Services */
#services {
	z-index:260;
}

.services_intro {
}

.service_bullet {
	float:left;
	width: 250px;
	margin:30px;
}

.service_bullet figure {
	margin-bottom: 30px;
}

.services_footer {
	position: absolute;
	top: 810px;
	width: 980px;
}

.services_footer p {
	font-size:10px;
	line-height:13px;
}

/* Karriere */

#karriere {
	height: 840px;
}

.sprite.laptop {
	background-image: url("../imgLayout/laptop.png");
	z-index: 199;
}

.sprite.balloon-red-small {
	background-image: url("../imgLayout/balloon_red_small.png");
	z-index: 198;
}

#karriere hr {
	background: #858585;
	margin: 0 0 20px 0;
}


.karriere_schnellspur {
	width: 240px;
	right: 0;
	top: 235px;
	position: absolute;
	overflow:hidden;
	height:580px;
}

.karriere_schnellspur .container {
	background: url('../imgLayout/cloth.jpg');
	min-width: 200px;
	min-height: 400px;
	position: relative;
	z-index: 600;
	box-shadow: 1px 1px 2px #AAA;
}



.karriere_schnellspur figure {
	text-align: center;
}

.karriere_schnellspur h2 {
	font-family: "AdobeGaramondProRegular";
	font-size: 14px;
}

.karriere_schnellspur p {
	border-bottom: 1px solid #858585;
	padding:5px 0 14px 0;
	margin:0;
	font-size: 9px;
	line-height: 14px;

}


#karriere .karriere_schnellspur .ce_text {
	padding-top:0;
}

#karriere .karriere_schnellspur .ce_text.karriere_title {
	border-bottom: 1px solid #858585;
	height: 50px;
	margin: 0 16px 0 16px;
	padding-top: 20px;
}

.jobTitle,
.karriere_intro {
	margin: 0 16px 0 16px;
}

#karriere .karriere_schnellspur .ce_text.karriere_intro  {
	padding-top:9px;
}

.karriere_intro p {
	font-size: 10px;
}

.karriere_intro p.em {
	padding-bottom: 10px;
	font-weight: bold;
}

.jobTitle h2 {
	font-size: 14px;
	line-height: 17px;
	margin: 14px 0 0px 0;
	font-family: "AdobeGaramondProRegular";
	text-align: center;
}

.jobTitle p {

	margin: 0 0 px 0;
}


/* Footer */

#footer {
	width: 100%;
	height: 36px;
	color: #fff;
	line-height: 36px;
	background: url('../imgLayout/footer_bg.jpg') top center;
	z-index: 9999;
	font-size: 11px;
	overflow: hidden;
}

#footer .inside {
	margin: 0 auto;
	min-width: 930px;
	width: 930px;
	position: relative;
}

#footer .copyright,
#footer .impressum_link ,
#footer .footer-fb {
	position: absolute;
}

#footer .copyright {
	left: 0;
}

#footer .copyright p,
#footer .impressum_link p {
	font-size: 11px;
	color: #fff;
	line-height: 36px;
}

#footer .impressum_link {
	text-align: center;
	width: 200px;
	left: 380px;
	cursor: pointer;
}

#footer .footer-fb {
	right: 0;
	top: 4px;
	height: 30px;
	width: 200px;
	text-align: right;
}

#impressum {
	position: fixed;
	top:50px;
	left:0;
	z-index: 901;
	/* display: none; */
	width: 450px;
	height: 600px;
	background: url('../imgLayout/cloth.jpg');
	box-shadow: 1px 1px 2px #aaa;
	display:none;
	overflow: hidden;

}

#impressum p {
	text-align: left;
}

#impressum h3 {
	margin: 30px 0 10px 0;
}

.vertical-scroll-content {
	position:relative;
}

.vertical-scroll {
	position: absolute;
	top:40px;
	left:20px;
	width: 410px;
	height: 520px;
	border-top: 1px solid #858585;
	border-bottom: 1px solid #858585;
	overflow-y:scroll;
	overflow-x: hidden;
}

.win .vertical-scroll {
	overflow-y:hidden;
	overflow-x: hidden;
}

.verticalSroll {
		cursor: pointer;
		width: 100%;
		z-index: 333;
		background-image: url('../imgLayout/buttons.png');
		background-repeat: no-repeat;
		background-position: center top;
		height: 30px;
		position: absolute;
		opacity: 0.8;
		-moz-opacity: 0.8;
		-webkit-opacity: 0.8;
		filter: alpha(opacity=80);
}

.mac .verticalSroll {
	display:none;
}

.verticalSroll:hover {
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter:alpha(opacity=100);
}

.verticalSroll.scrollBottom {
	background-position: center bottom;
	bottom:0;

}

.impr_overlay {
	width:100%;
	height: 100%;
	position: fixed;
	z-index: 850;
	background: rgba(0,0,0,.5);
	top:0;
	left:0;
	display: none;
}