@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,900');



/*
|--------------------------------------------------------------------------
| General
|--------------------------------------------------------------------------
*/
html,/**/
body {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 200;
	font-size: 18px;
	color: #000;
	height: 100%;
}

h1 {
	font-weight: 900;
	text-transform: uppercase;
	color: #978f8b;
	font-size: 125%;
	margin: 50px 0;
}

h2 {
	font-weight: 900;
	text-transform: uppercase;
	color: #978f8b;
	font-size: 125%;
	margin: 0 0 50px;
}

h3 {
	font-weight: 900;
	text-transform: uppercase;
	color: #978f8b;
	font-size: 100%;
	margin: 25px 0;
}

p {
	margin-bottom: 30px;
}

a,
a:hover {
	color: #978f8b;
	font-weight: 900;
}

.content-grey a,
.content-grey a:hover {
	color: #fff;
}

img {
	max-width: 100%;
}

a.toplink {
	width: 40px;
	height: 40px;
	position: fixed;
	bottom: 0;
	right: 15px;
	background-image: url(/art/arrow-up.jpg);
	background-size: cover;
	z-index: 5;
	display: none;
}

@media(min-width: 768px) {
	html,
	body {
		font-size: 20px;
	}
	h1,
	h2 {
		font-size: 180%;
	}
}

@media(min-width: 992px) {
	a.toplink {
		width: 63px;
		height: 63px;
	}
}

@media(min-width: 1200px) {
	html,
	body {
		font-size: 24px;
	}
}

@media(min-width: 1800px) {
	html,
	body {
		font-size: 30px;
	}
}
/*
|--------------------------------------------------------------------------
| bootstrap-overwritings
|--------------------------------------------------------------------------
*/
@media(min-width: 1800px) {
	.container {
		width: 1470px;
	}
}


/*
|--------------------------------------------------------------------------
| header
|--------------------------------------------------------------------------
*/
.header {
	padding: 20px 0 20px;
	position: fixed;
	width: 100%;
	top: 0;
	float: left;
	background: #fff;
	z-index: 2;
}

.logo {
	position: relative;
	z-index: 1;
}

.header-home {
	position: static;
}

.header-home.fixed-top {
	position: fixed;
	z-index: 2;
}

.arrow-down {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 31px 31.5px 0 31.5px;
	border-color: #f4f4f4 transparent transparent transparent;
	position: absolute;
	top: 0;
	left: 50%;
}

.arrow-down.scrollup {
	display: inline-block;
}

/*@media(min-width: 768px) {*/
	.navi-active .header {
		z-index: 4;
		background: transparent;
	}

	.navi-active .menu-button a.navi-button {
		background-image: url(/art/close2.jpg);
	}
/*}*/

@media(min-width: 992px) {
	.header {
		padding: 70px 0 50px;
	}
}



/*
|--------------------------------------------------------------------------
| content
|--------------------------------------------------------------------------
*/
.wrapper {
	position: relative;
	/*display: flex;*/
}

.content-wrap {
	padding-top: 80px;
}

.content {
	padding: 50px 0;
}

.content-grey {
	background: #978f8b;
	color: #fff;
}

.content-grey h1,
.content-grey h2 {
	color: #fff;
}

.content-home-top {
	text-align: center;
}

@media(min-width: 768px) {
	.content-grey,
	.content-home-top,
	.content {
		text-align: center;
	}
	
	.content-wrap {
		padding-top: 94px;
	}
}

@media(min-width: 992px) {
	.content-wrap {
		padding-top: 184px;
	}
}



/*
|--------------------------------------------------------------------------
| content home
|--------------------------------------------------------------------------
*/
.content-home-top {
	color: #978f8b;
	background: #f4f4f4;
	padding: 50px 0;
	text-transform: uppercase;
}

.content-home-top h2 {
	font-weight: 200;
}

img.banner {
	width: 100%;
	padding: 50px 0;
}

.content-home {
	position: relative;
}

.content-home .container {
	position: relative;
	z-index: 1;
}

.content-home .home-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background: url(/art/Pattern_web_2.jpg);
	opacity: 0.5;
}



/*
|--------------------------------------------------------------------------
| content leistungen
|--------------------------------------------------------------------------
*/
.leistung {
	text-align: left;
}

.img-leistung {
	position: absolute;
	z-index: 1;
	width: 396px;
	transition: all 0.5s ease-in-out;
	margin-bottom: 30px;
	-webkit-filter: grayscale(1); /* Webkit */
	filter: gray; /* IE6-9 */
	filter: grayscale(1); /* W3C */
}

.img-leistung:hover {
	-webkit-filter: grayscale(0); /* Webkit */
	filter: -; /* IE6-9 */
	filter: grayscale(0); /* W3C */
}

.img-leistung1 {		
	top: -26px;
	left: 189px;
}

.img-leistung2 {		
	top: 324px;
	left: 396px;
	width: 398px;		
}

.img-leistung3 {
	top: 676px;
	left: 189px;
	width: 400px;
	filter: grayscale(0);
	opacity: 0.5;
}

.img-leistung3:hover {
	opacity: 1;
}

.img-leistung4 {		
	top: 1164px;
	left: 396px;
	width: 400px;
}

.content-leistung-wrap {
	position: relative;
}

.content-leistung-wrap .leistung-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background: url(/art/Pattern_web_3.jpg);
	opacity: 0.5;
}

.content-leistung-wrap .content-leistung {
	position: relative;
	z-index: 1;
}

@media(max-width: 767px) {
	.leistung-img img {
		width: 50%;
	}
}

@media(min-width: 992px) {
	.content-leistungen {
		background: url(/art/bg-leistungen-ohne-bilder.png);
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: center;
		margin-top: 150px;
		position: relative;
		z-index: 1;
	}

	.leistung {
		height: 350px;
		overflow: hidden;
		margin-bottom: 50px;
		z-index: 0;
	}

	.leistung.leistung1 {
		padding-left: 150px;
	}

	.leistung.leistung2 {
		padding-right: 150px;
	}

	.leistung.leistung3 {
		padding-left: 150px;
		margin-top: -30px;
		margin-bottom: 80px;
	}

	.leistung.leistung4 {
		padding-right: 120px;
		height: 400px;
		margin-bottom: 0;
	}
}

@media(min-width: 1200px) {
	.img-leistung1 {
		left: 289px;
	}

	.img-leistung2 {
		left: 496px;
	}

	.img-leistung3 {
		left: 289px;
	}

	.img-leistung4 {
		left: 496px;
	}
}

@media(min-width: 1800px) {
	.img-leistung1 {
		left: 438px;
	}

	.img-leistung2 {
		left: 646px;
	}

	.img-leistung3 {
		left: 438px;
	}

	.img-leistung4 {
		left: 646px;
	}
}

@media(min-width: 768px) and (max-width: 991px) {
	.leistung {
		margin-top: 70px;
	}
}

.title-icon {
	height: 1.36em;
	margin-right: 5px;
	margin-top: -4px;
}

@media(min-width: 768px) {
	.title-icon {
		margin-top: -8px;
		margin-right: 10px;
	}
}


/*
|--------------------------------------------------------------------------
| content ueber uns
|--------------------------------------------------------------------------
*/
.box-row {
	margin: 0;
}

.box {
	padding: 0;
}

.box img {
	width: 100%;
}

.ueber-uns-text {
	text-align: left;
}

@media(min-width: 992px) {
	.ueber-uns-text {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding: 0 15px;
		overflow: hidden;
		color: #fff;
	}
}

.ueber-uns-text h3 {
	color: #fff;
}



/*
|--------------------------------------------------------------------------
| content kontakt
|--------------------------------------------------------------------------
*/
.content-kontakt {
	position: relative;
}

.content-kontakt .kontakt-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background: url(/art/Pattern_web_1.jpg);
	opacity: 0.5;
}

.content-kontakt .container {
	position: relative;
	z-index: 1;
}



/*
|--------------------------------------------------------------------------
| navigation
|--------------------------------------------------------------------------
*/
.menu-button a.navi-button {
	color: #978f8b;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 75%;
	line-height: 40px;
	height: 40px;
	float: right;
	text-decoration: none;
	padding-right: 50px;
	background-image: url(/art/menue.jpg);
	background-repeat: no-repeat;
	background-position: right;
	background-size: auto 100%;
}

.navigation {
	width: 80%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #978f8b;
	text-align: center;
	text-transform: uppercase;
	z-index: 3;
	opacity: 1;
	transition: 0.5s all ease-in-out;
}

.navigation.invisible {
	opacity: 0;
}

.navigation-close {
	background: url(/art/close2.jpg);
	background-size: cover;
	background-size: auto 100%;
	height: 40px;
	width: 40px;
	position: absolute;
	right: 15px;
	top: 20px;
}

.navigation-close.fixed {
	position: fixed;
}

.menu-button a.navi-button:hover {
	cursor: pointer;
}

.content-overlay {
	width: 20%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	background: rgba(255,255,255,0.8);
	opacity: 1;
	transition: 0.5s all ease-in-out;
}

.content-overlay.invisible {
	opacity: 0;
}

.navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 80%;
	position: fixed;
	right: 0;
	z-index: 3;
}

.wrapper-home .navigation ul {
	
}

.wrapper-home .navigation ul.unfix {
	top: auto;
	right: auto;
	position: static;
	width: auto;
}

.navigation li a {
	width: 100%;
	float: left;
	padding: 10px;
	color: #fff;
	font-size: 125%;
	font-weight: 900;
}

.navigation li a.active {
	text-decoration: underline;
}

@media(min-width: 350px) {
	.navigation {
		width: 50%;
	}

	.navigation ul {
		width: 50%;
	}

	

	.content-overlay {
		width: 50%;
	}
}

@media(min-width: 768px) {
	.navigation li a {
		padding: 15px;
		font-size: 180%;
	}
}

@media(min-width: 992px) {
	.menu-button a.navi-button {
		line-height: 63px;
		height: 63px;
		padding-right: 73px;
	}

	.navigation-close {
		height: 63px;
		width: 63px;
	}	

	.navigation a {
		padding: 30px;
	}

	
}



/*
|--------------------------------------------------------------------------
| footer
|--------------------------------------------------------------------------
*/
.footer {
	padding: 20px 0;
	background: #978f8b;
	color: #fff;
	font-size: 66.666%;
	text-transform: uppercase;
}

.footer a {
	color: #fff;
}

.footer-icons {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 10px;
}

.footer-icons li {
	display: inline-block;
	margin-right: 10px;
}


/*
|--------------------------------------------------------------------------
| gallery
|--------------------------------------------------------------------------
*/
.logo-referenz {
	/*abstände auf mobilen Geräten*/
	padding: 0 30px;
	margin-bottom: 30px;
}

.pswp__button--arrow--left, 
.pswp__button--arrow--right {
	width: 63px !important;
	height: 63px !important;
	visibility: visible !important;
	display: block !important;
	opacity: 1 !important;
	z-index: 99999 !important;;
}

.pswp__button--arrow--left {
	background-image: url(/art/arrow-left.jpg) !important;
	left: 15px !important;
}

.pswp__button--arrow--right {
	background-image: url(/art/arrow-right.jpg) !important;
	right: 15px !important;
}

.pswp__button--arrow--left:before, 
.pswp__button--arrow--right:before {
	display: none !important;
}

/* definition Logos s/w - farbig*/
@media(min-width: 1px) {
	.logo-referenz .img-colored {
		display: none;
	}

	.logo-referenz:hover .img-bw {
		display: none;
	}

	.logo-referenz:hover .img-colored {
		display: inline-block;
	}
}

@media(min-width: 992px) {
	.logo-referenz {
		/*abstände auf desktop*/
		padding: 0 40px;
		margin-bottom: 40px;
	}
}

@media(max-width: 991px) {
	.pswp__button--arrow--left, 
	.pswp__button--arrow--right,
	.pswp__ui--idle .pswp__button--arrow--left,
	.pswp__ui--idle .pswp__button--arrow--right {
		opacity: 0.8 !important;
	}
}



/*
|--------------------------------------------------------------------------
| impressionen
|--------------------------------------------------------------------------
*/
.impression-row {
	margin: 0;
}

.impressions {
}

.impression-container {
}

.impression {
	position: relative;
	padding: 0;
}

.impression img {
	width: 100%;
	position: relative;
	background-color: #DDD;
}

.impression .shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	-webkit-box-shadow: inset 0px 0px 0px 5px rgba(255,255,255,1);
	-moz-box-shadow: inset 0px 0px 0px 5px rgba(255,255,255,1);
	box-shadow: inset 0px 0px 0px 5px rgba(255,255,255,1);
}




/*
|--------------------------------------------------------------------------
| overwrite tagbox css
|--------------------------------------------------------------------------
*/
.content-grey .tb_see_more_btn  {
    color: #fff;
    border-color: #fff;
}



/*
|--------------------------------------------------------------------------
| taggbox abstand vergrössern
|--------------------------------------------------------------------------
*/
.tb_sp_post_container {
    margin-left: -5px;
    margin-right: -5px;
}
.tb_sp_post_container .tb_sp_post_wrapper {
    padding: 5px !important;
}