@import url("http://fonts.googleapis.com/css?family=Antic+Slab");

/*
	eckwe.green: rgb(137,228,70);
*/
html {
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
}

body {
	max-width: 1200px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9em;
	color: #29220A;
	margin: 0 auto;
	padding-bottom: 0;
	text-align: left;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	-webkit-overflow-scrolling: touch;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	color: #222;
	font-family: 'Antic Slab', serif;
	line-height: 1.2em;
	padding: 0em 1.7em;
}

h1 {
	font-size: 3.5em;
	letter-spacing: 0.01em;
	color: rgb(112, 98, 89);
}

h2 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 2.8em;
	line-height: 1.1em;
	margin-top: 0.2em;
	color: rgb(112, 98, 89);
	padding: 0;
}

h3 {
	margin-top: 1.1em;
	padding: 0 0 0.2em 2.1em;
	font-size: 2.8em;
	margin-bottom: 0;
	line-height: 1.3em;
}

h4 {
	color: rgba(50, 43, 36, .9);;
	font-size: 1.8em;
}

a {
	color: #0083e8;
}

a#agentur {
	margin: 100px 0 0 0;
}

b, strong {
	font-weight: 600;
}

samp {
	display: none;
}

p {
	margin: 0 0 0.8em 0;
	shape-inside: outside-shape;
	font-size: 0.9em;
	font-weight: 300;
}

.info p {
	margin: 0 0 0.25em 0;
}

.fliesstext {
	padding: 0 0 0 6.1em;
}

p.zoom-text {
	color: rgba(50, 43, 36, .9);;
	font-weight: 400;
	margin-top: 1em;
}

#navigation {
	max-width: 1200px;
	margin: auto;
	text-align: right;
	background: rgba(255, 255, 255, 0.95);
	z-index: 50;
}

#navigation.is-stuck {
	top: 0;
	position: fixed;
	width: 100%;
	max-width: 1200px;
}

#navigation a {
	display: inline-block;
	padding: .8em .8em;
	text-decoration: none;
	color: dimgray;
	transition: color .5s ease;
}

#header {
	max-width: 1200px;
	height: 500px;
	padding: 0;
	background: url("../images/head-bg-gross.jpg") no-repeat top;
	z-index: 51;
}

#header.is-stuck {
	position: fixed;
	top: 0;
	width: 100%;
}

.pagewrapper {
	-webkit-overflow-scrolling: touch;
}

#header-folgeseite {
	position: relative;
	height: 140px;
	overflow: hidden;
}

#logocontainer, .logocontainer_shadow {
	position: fixed;
	top: 0px;
	width: 100%;
	max-width: 1200px;
	z-index: 51;
}

.logowrapper {
	position: relative;
	margin: 0;
	text-align: right;
	transition: all .25s;
	z-index: 50;
}

#logo {
	position: relative;
	float: right;
	height: 140px;
	margin: 0;
	z-index: 25;
}

#logo.shrinked {
	height: 90px;
	padding: 0 5px 0 0;
}

.teaser {
	margin: 0 2.5em;
}

.teaser .stage, .teaser .stage .details.viz, .logowrapper, .navwrapper {
	position: relative;
	height: 100%;
	max-height: 519px;
	overflow: hidden;
	text-align: right;
	cursor: pointer;
}

.logowrapper {
	width: 93.5%;
}

.navwrapper {
	width: 86%;
}

.details {
	margin: 0;
}

.teaser .details .gallery_stripe, .teaser .details .description {
	position: relative;
	width: 100%;
	clear: both;
}

.mapinline {
	margin: 0 auto;
	height: 500px;
}

.bold {
	font-weight: bold;
}

li {
	list-style-type: none;
	margin: 0;
}

ul {
	line-height: 1.1em;
	font-weight: 400;
}

.footer, .datenschutz, .impressum {
	background-color: rgb(112, 98, 89);
}

.philosophie {
    margin: 150px auto 100px auto;
}

.philosophie h2 {
	font-size: 18px;
    line-height: 1.3em;
    margin: 1em 5.5em;
}

.zweispalter {
	max-width: 100%;
	margin: 50px auto;
}

.zweispalter-folgeseite {
	max-width: 1020px;
	margin: 50px auto;
}

.logos_customer {
	padding: 5% 0;
}

.textover {
	opacity: 1;
	position: absolute;
	right: 0;
	bottom: 2.5em;
	padding: 10px 35px;
	z-index: 5;
	text-align: left;
	margin: 0;
	background: rgba(255, 255, 255, 0.8);
}

.textover.unviz {
	opacity: 0;
}

.trenner-braun {
	height: 90px;
	width: 100%;
	margin: auto;
	background-color: rgb(112, 98, 89);
}

.leistung {
	width: 86%;
}

.leistung ul {
	margin: 0;
}

.column, .columns {
	padding: 0.1em;
}

img {
	display: block;
}

.logos_customer img {
	display: block;
	width: 100%;
}

.img-zoom:hover .desc {
	opacity: 1;
}

.item {
	overflow: hidden;
}

.details, .title {
	display: none;
}

.details {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.details.viz, .scale_up .item .details {
	display: inline;
	height: auto;
	z-index: 3;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.leistung ul li {
	overflow: hidden;
	cursor: pointer;
}

.leistung .preselected .item .title {
	display: block;
	width: 100%;
	text-align: center;
}

ul {
	display: inline-block;
}

li.large-6.medium-5 {
	float: left;
	width: 49%;
	max-width: 508px;
	margin: 2px;
	z-index: 10;
}

li.large-6.medium-5 .item {
	width: 100%;
	overflow: hidden;
}

li.large-6.medium-5 .item>img {
	width: 100%;
}

.item .stage {
	max-width: 100%;
}

.item .img {
	width: 100%;
}

.leistung .preselected .item {
	position: relative;
}

.item.preselected {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 49;
	overflow: auto;
	max-width: 1020px;
}

.item.selected {
	visibility: hidden;
	position: absolute;
	overflow: hidden;
	top: 50%;
	opacity: 0;
	height: auto;
	max-width: 1020px;
	background: transparent;
}

.item.modal {
	visibility: visible;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	overflow: hidden;
	max-width: 1020px;
	z-index: 100;
}

.item.modal.shadow {
	-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
}

.scale_down {
	opacity: 0.5;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.scale_up {
	opacity: 1;
	-webkit-transition: transform .75s, opacity .75s;
	-moz-transition: transform .75s, opacity .75s;
	-ms-transition: transform .75s, opacity .75s;
	transition: transform .75s, opacity .75s;
}

.item.modal .stage, .item.selected .stage {
	width: 1020px;
	height: 660px;
	overflow: hidden;
	cursor: pointer;
}

.item.modal .stage>img:first-child, .item.selected .stage>img:first-child
	{
	opacity: 1;
	width: 100%;
	max-width: 1020px;
	height: 660px;
}

.item.modal .stage>img:last-child, .item.selected .stage>img:last-child
	{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	width: 100%;
	max-width: 1020px;
	height: 660px;
}

.teaser .lowviz, .item .lowviz {
	opacity: .45;
}

.teaser .viz .gallery_stripe, .teaser .viz .description {
	max-width: 1020px;
	margin: 0 4%;
}

.teaser .details.viz {
	display: inline;
}

.leistung .preselected .item .title {
	position: absolute;
	z-index: 4;
}

.item.selected .title h4, .leistung .preselected .item .title h4 {
	position: absolute;
	padding-top: 25%;
	display: inside;
	width: 100%;
	height: 100%;
	z-index: 5;
}

.leistung .preselected .item .stage>img {
	-webkit-transform: scale(1.08);
	-moz-transform: scale(1.08);
	-ms-transform: scale(1.08);
	transform: scale(1.08);
	opacity: .5;
	z-index: -1;
}

.gallery_stripe, .description {
	float: left;
	transition: height 1s ease;
}

.gallery_stripe {
	width: 100%;
	max-height: 90px;
	overflow: hidden;
	clear: both;
	background-color: rgb(138, 129, 122);
}

.selected .gallery_stripe, .selected .description, .teaser .viz .gallery_stripe,
	.teaser .viz .description {
	height: auto;
}

.gallery_stripe img {
	display: block;
	width: 140px;
	height: 90px;
	margin: 0;
	float: left;
}

.gallery_stripe .lowviz {
	cursor: pointer;
}

.description {
	width: 100%;
	padding: 30px 35px 40px;
	color: white;
	background-color: rgb(108, 98, 90);
	cursor: pointer;
}

.description h5 {
	margin: 0 0 15px 0;
	padding: 0;
	font-family: inherit;
	font-size: 20px;
	font-weight: bold;
	color: white;
	text-align: left;
}

.description p {
	float: left;
	width: 100%;
	padding-right: 25%;
	line-height: 20px;
	font-weight: 400;
	text-align: justify;
}

#overlay {
	opacity: 0;
	content: ' ';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
	background: transparent url("../images/overlay_grid.png") 0 0 repeat;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

#overlay.active {
	cursor: pointer;
	z-index: 50;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

#overlay.active {
	display: none;
	width: 0;
	height: 0;
}

.overlay_map {
	position: absolute;
	width: 100%;
	max-width: 1200px;
	height: 100%;
	max-height: 500px;
	margin: 0;
	padding: 0;
	z-index: 10;
	background: transparent url("../images/overlay_grid.png") 0 0 repeat;
	cursor: pointer;
}

.overlay_map>div {
	width: 60%;
	margin: 180px auto;
	padding: 50px;
	text-align: center;
	text-transform: uppercase;
	font-style: italic;
	font-size: 2.5em;
	font-weight: bold;
	opacity: .9;
	color: white;
	z-index: 9;
}

.kontakt_daten {
	padding: 25px 80px;
	color: rgb(112, 98, 89);
}

.footer, .impressum {
	padding: 25px 80px;
}

.kontakt_daten a {
	color: rgb(112, 98, 89);
}

.kontakt_daten p {
	line-height: 1.3em;
	padding: 0.2em 0;
}

.bold {
	font-weight: 600;
}

.green, #navigation a.green, .info h4 {
	font-weight: 600;
	color: rgb(138, 229, 70);
}

.info h4 {
	font-size: .9em;
}

.kontakt_daten .green {
	padding-right: 6px;
}

.footer p, .footer a, .datenschutz p, .impressum p {
	font-weight: 400;
	color: white;
}

.footer .right a:first-child {
	padding-right: 60px;
}

.footer p {
	margin: 0;
}

.datenschutz, .impressum {
	display: none;
	height: 0;
	text-align: right;
	transition: all .5s;
}

.datenschutz.viz, .impressum.viz {
	display: inline-block;
	height: auto;
	margin: 0;
	transition: all .5s;
}

.datenschutz {
	padding: 25px 215px 25px 80px;
}

.datenschutz h4, .impressum h4 {
	padding: 15px 0 5px 0;
	font-size: 1em;
	color: white;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.impressum a {
	color: white;
}

.row .row {
	margin: 0;
}

#logocontainer, #logo, .logocontainer_shadow, .logowrapper, .details,
	.textover, .stage img, .shrinked, .unviz, .viz, .lowviz {
	transition: all .25s;
}

t


@media ( max-width : 1024px) {
	#logo, #logo.shrinked {
		margin: 5px 30px 0 0;
	}
}

@media ( max-width : 780px) {
	h1 {
		font-size: 2.5em;
	}
	h2 {
		font-size: 2.2em;
		line-height: 1.0em;
	}
	p {
		font-size: 0.9em;
		line-height: 1.5em;
	}
	#header {
		position: relative;
		background: url("../images/head-bg-gross.jpg") no-repeat top;
	}
	#navigation a {
		display: block;
		color: dimgray;
		font-weight: 600;
		font-size: 0.8em;
		padding: .1em 10px;
		border-top: solid 1px rgba(0, 0, 0, 0.30);
	}
	.logowrapper {
		width: 97%;
	}
	.navwrapper {
		width: 94%;
	}
	.philosophie {
		margin: 50px auto;
	}
}

@media ( max-width : 768px) {
	#navigation {
		position: relative;
		background-color: #fff;
		border-bottom: solid 2px #666;
	}
	#logo.shrinked {
		padding: 0;
	}
	ul {
		font-size: 0.9em;
		font-weight: 400;
		line-height: 1.1em;
		margin-bottom: 0;
	}
	.leistung .preselected .item .title h4 {
		font-size: 1.5em;
		line-height: 1.1em;
	}
	.philosophie h2 {
		font-size: 16px;
	    line-height: 1.3em;
	    margin: 1em 4.4em;
	}
}

@media ( max-width : 650px) {
	h1 {
		font-size: 1.9em;
	}
	h2 {
		font-size: 1.6em;
		line-height: 0.9em;
	}
	.philosophie h2 {
		font-size: 14px;
    		margin: 0.75em 3.8em;
	}
}

@media ( max-width : 1199px) {
	.logowrapper {
		width: 97%;
	}
	.navwrapper {
		width: 93.5%;
	}
	.teaser .viz .gallery_stripe, .teaser .viz .description {
		margin: 0;
	}
	.teaser .stage .description p {
		padding-right: 10%;
	}
}

@media ( min-width : 1165px) {
	.teaser .stage {
		margin: 0 4%;
	}
}