@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif;
  margin: 0;
}

body {
	font-family: 'Roboto', sans-serif;
	height: 100%;
	font-size: 120%;
	letter-spacing: 2px;
	line-height: 20px;
	color: #3c3c3b;
	text-align: center;	
}

a {
	color: #006533;	
}

a:hover {
	color: #3c3c3b;	
	text-decoration: none;
}

.headline {
	border-top: 1px solid #7a6958;
	position: relative;
	margin: 50px auto;
	width: 60%;
	top: 25px;
	margin-bottom: 30px;
}

.headline span {
	color: #7a6958;
	font-size: 160%; 
	text-align: center; 
	padding: 2px 10px; 
	background: #fff; 
	width: 300px;
	margin: 0 auto; 
	display: block; 
	position: relative; 
	top: -15px; 
	text-transform: uppercase;
}

.headline-white {
	border-top: 1px solid #FFF;
	position: relative;
	margin: 50px auto;
	width: 40%;
	top: 25px;
	margin-bottom: 30px;
}

.headline-white span {
	color: #FFF;
	font-size: 160%; 
	text-align: center; 
	padding: 2px 10px; 
	background: #7a6958; 
	width: 300px;
	margin: 0 auto 100px; 
	display: block; 
	position: relative; 
	top: -15px; 
	text-transform: uppercase;
}

h2 {
	color: #006533;
	text-transform: uppercase;
	font-size: 200%;
}

h3 {
	font-size: 140%;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 600;
	margin: 15px 0 0 0;	
}

h4 {
	font-size: 120%;
	text-transform: uppercase;
	margin: 5px 0 15px 0;
}

/* METANAVI */
.metanavi {
	position: fixed;
	top: 0;	
	background-color: #FFF;
	width: 100%;
	z-index: 9999;
	letter-spacing: 0;	
}

.top-panel {
	float: right;
	height: 30px;	
	border-bottom: 1px solid #7a6958);
	
}

.meta-contact {
	float: right;	
	margin-left: 3em;
	margin-top: 5px;
	font-size: 120%;
}
/* METANAVI ENDE */

/* NAVIGATION */

.navbar-default {
	background-color: #FFF;
	border-top: 0.2px solid #e7e7e7;
	border-color: hsla(114, 102, 89, 0.2);	
	height: 100px;
	margin-top: 30px;
	z-index: 10000;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background-color: transparent;	
}

.navbar-nav {
	float: right;	
}

.nav li {
	padding: 25px 0 25px 50px;	
}

.nav li a {
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 3px;
		
}

/*.active-menu {
  	transition: 0.3s ease;
  	text-decoration: none;
  	border-bottom: 4px solid #FFF;
 	padding: 20px 0;
  	margin: 0 20px;
}

.active-menu:hover {
	border-bottom: 1px solid #3c3c3b;
	border-bottom-width: 5px;
	padding: 6px 0;	
}

*/

.mynav li a {
	padding: 8px 0;
}

.mynav li a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 4px;
	background: #006533;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	transform: translateY(30px);
}

.mynav li a:hover::after,
.mynav li a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}



/* NAVIGATION ENDE */

/* SLIDESHOW */

.owl-carousel {
 	position: relative;
 	height: 100%;
 	height: 638px;
 	margin-top: 100px;
}

.owl-carousel .owl-slide {
  	background-repeat: no-repeat;
  	background-size: cover;
  	background-position: center center;
}

.owl-carousel div:not(.owl-controls) {
  height: 100%;
}

.owl-carousel div.owl--text .city {
  position: absolute;
  bottom: 10em;
  left: 7em;
  width: auto;
  height: 3em;
  padding: 0.8em 2em 1em 2em;
  background: rgb(4,104,57);
  color: #FFF;
  font-size: 160%;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.owl-carousel div.owl--text .info {
  position: absolute;
  bottom: 7em;
  left: 8em;
  width: auto;
  max-width: 750px;
  height: auto;
  min-height: 80px;
  padding: 1em;
  font-size: 140%;
  background: #FFF;
  letter-spacing: 3px;
}

.owl-carousel div.owl--text .arrow {
	background-image: url(../gfx/next.png);
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-color: #FFF;
	background-position: center;
	position: absolute;
	bottom: 9.8em;
 	left: 885px;
  	width: 75px;
  	height: 81px;
  	margin-left: 10px;
}

.btn-default {
	border: none;	
}

.btn-default:hover {
	background-color: transparent;	
}


.owl-carousel .owl-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}
.owl-carousel .owl-controls .owl-buttons div {
  position: absolute;
  top: 0;
  bottom: 0;
  display: inline-block;
  zoom: 1;
  margin: 0;
  width: 50px;
  height: 30px;
  line-height: 25px;
  text-align: center;
  font-size: .9em;
  border-radius: 3px;
  color: #FFF;
  background: #000;
  opacity: .6;
  text-transform: capitalize;
}
.owl-carousel .owl-controls .owl-buttons .owl-prev {
	display: block;
	background: url(../gfx/w_prev.png) no-repeat;
	background-size: 50px 50px;
	background-position: center center;
	height: 50px;
	width: 50px;
  	left: 10px;
}
.owl-carousel .owl-controls .owl-buttons .owl-next {
	display: block;
	background: url(../gfx/w_next.png) no-repeat;
	background-size: 50px 50px;
	background-position: center center;
	height: 50px;
	width: 50px;
 	right: 10px;
}

/* SLIDESHOW ENDE */

/* CONTENT */

#about {
	-webkit-column-count: 2;
	-webkit-column-gap: 25px;
	-moz-column-count: 2;
	-moz-column-gap: 25px;
	column-count: 2;	
	column-gap: 25px;
	margin: 50px 0 100px 0;
}

.leistungen, .detail-firstrow, .kontakt, .kontakt {
	margin: 130px 0 0 0;
}

.leistungen, .projektleiter, .detail-firstrow, .detail-secondrow, .kontakt {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;	
} 


.leistungen p, .leistungen h4, .ref-detail {
	padding: 0 5% 0 5%;
}

.projektleiter p, .projektleiter h4, .detail-secondrow p, .detail-firstrow .col-md-4 p, .detail-firstrow .col-md-4 h4 {
	padding: 0 10% 0 10%;	
}

.detail-secondrow h4 {
	padding: 10% 0 0 10%;;	
}

.detail-secondrow .col-md-4, .detail-firstrow .col-md-4, .detail-firstrow .col-md-8, .container-fluid {
	padding: 0;	
	margin: 0;
}

.detail-firstrow {
	display: table;
	background-color: #006533;
	color: #FFF;
}

.table-row {
	display: table-row;	
}

.ref-detail, .firstrow-pic {
	display: table-cell;
	vertical-align: middle;
	float: none;	
}


.beschreibung {
	background-color: #F3F3F3;
	padding: 2%;	
}

.beschreibung .col-md-4 {
	padding-left: 4%;	
}

.kontaktfrom {
	background-color: #7a6958;	
	padding: 0 0 100px 0;
}

.kontaktdetail {
	font-size: 120%;
	line-height: 38px;
	margin: 25px 0 0 0;	
}

.kontaktdetail span{
	margin-right: 15px;
}

input, textarea {
	width: 100%;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #FFF;
	padding: 5px;
	margin-bottom: 25px;
	color: #FFF;
	font-size: 140%;
	line-height: 28px;	
}

input[type="button"] {
	background: url(../gfx/next.png) no-repeat;
	background-size: 25px 25px;
	background-position: right;
	background-color: #FFF;
	color: #7a6958;
	text-transform: uppercase;
	text-align: left;
	-webkit-transition: ease-in-out all .5s;
	-moz-transition: ease-in-out all .5s;
	transition: ease-in-out all .5s;
	border: none;
}

input[type="button"]:hover {
	background: url(../gfx/w_next.png) no-repeat;
	background-size: 25px 25px;
	background-position: right; 
	background-color: transparent;
	color: #FFF;
	text-transform: uppercase;
	text-align: left;
	border: none;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #FFF;
	text-transform: uppercase;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #FFF;
   text-transform: uppercase;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #FFF;
   text-transform: uppercase;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #FFF;
   text-transform: uppercase;
}

/* CONTENT ENDE */

/* QUOTE HOMEPAGE */



#clients-outer {
	margin-top: 80px;
	margin-bottom: 100px;
	border: 1px solid #7a6958;
	height: 275px;
	
}

.carousel-cell {
  width: 100%; /* full width */
  height: 300px; /* height of carousel */
  margin-right: 10px;

}

.quoteimg {
	position: relative;
	width: 100px;
	height: 100px;
	left: 45%;
	
}

.quote {
	font-size: 160%;
	letter-spacing: 3px;
	padding: 50px 10% 0 10%;	
}

.quotename {
	font-size: 100%;
	text-transform: uppercase;
	letter-spacing: 3px;
	float: right;
	margin: 30px 15% 0 0;
}

.flickity-page-dots {
  bottom: 0px;
}

.flickity-prev-next-button {
	display: none;	
}

@media screen and (max-width: 468px) {
		#clients-outer {
			height: 385px;	
		}
		
		.flickity-viewport {
			height: 410px !important;
		}
		
		.quoteimg {
			left: 36%;
		}
		
		.quote {
			text-align: center;	
		}
		
		.quotename {
			text-align: center;	
			float: none;
			margin: 0;
			margin-top: 30px;
		}
		
		
}


/* QUOTE HOMEPAGE ENDE */

/* PARTNER */

.partner {
	text-align: center;
	margin: 50px 0 0 0;
}

.partner img{
	width: 200px;
	height: auto;
	margin: 0 auto;
}

.partner span {
	margin-bottom: 15px;
	
}

/* PARTNER ENDE */

/* REFERENZEN */

.referenzen {
	position: relative;
	overflow: hidden;
	background: #777;
	
}

.referenzen:nth-child(1), .referenzen:nth-child(1) {
	margin: 0 0 30px 0;	
}

figure figcaption {
	position: absolute;	
	top: 0;
	left: 0;
	padding: 2em 0 0 4em;
}

figure h2 {
	font-size: 180%;
	color: #FFF;	
}

figure h2 span {
	font-weight: 600;	
}

figcaption p {
	color: #FFF;
	background: #006533;
	margin: 5px 0;
	padding: 5px 15px 5px 15px;	
	-webkit-transition: ease-in-out .5s all;
	transition: ease-in-out .5s all;
	-webkit-transform: translate3d(-400px,0,0);
	transform: translate3d(-400px,0,0); 
}


figure:hover figcaption p {
	color: #FFF;
	background: #006533;
	margin: 5px 0;
	padding: 5px 15px 5px 15px;	
	-webkit-transform: translate3d(0px,0,0);
	transform: translate3d(0px,0,0);
}

.referenzen-arrow {
	float: right; 
	width: 40px;
	margin: -44px -48px 0 0;
}

figcaption p:nth-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;	
}

figcaption p:nth-child(2) {
	-webkit-transition-delay: .05s;	
	transition-delay: .1s;
}

figure img {
	-webkit-transition: ease-in-out .5s;
	transition: ease-in-out .5s;	
}

figure:hover img {
	cursor: pointer;
	-webkit-transform: scale(1.1);	
	transform: scale(1.1);
	opacity: 0.7;
}



/* REFERENZEN ENDE */

/* FOOTER */

footer {
	border-top: 0.8px solid #e7e7e7;	
}

footer p {
	float: left;
	margin-top: 5px;	
}

footer ul {
	float: right;
	margin-top: 5px;	
}

footer ul li {
	list-style: none;	
}


/* FOOTER ENDE */

@media (max-width: 998px) {
	
		.nav li {
			padding: 20px 0 20px 0;	
		}
		
		.navbar-collapse {
			padding: 0;	
		}
		
		.navbar-nav {
			width: 100%;
			background-color: #FFF;
			margin: 5px 0 0 0;
			padding: 0;
			overflow: hidden;
		}
		
		
		.navbar-nav li a {
			text-align: center;	
		}
		
		.navbar-header {
			width: 100%;	
		}
		
		.navbar-toggle {
			border-radius: 0px;	
			/*margin-top: 22px; */
			padding: 14px 15px;
		}
		
		#navbar {
			margin-top: 26px;	
		}
		
		.hamburger {
			padding: 15px 15px;
			display: inline-block;
			cursor: pointer;
			transition-property: opacity, filter;
			transition-duration: 0.15s;
			transition-timing-function: linear;
			font: inherit;
			color: inherit;
			text-transform: none;
			background-color: transparent;
			border: 0;
			margin: 0;
			overflow: visible; 
  }
	
		.owl-carousel div.owl--text .city {
				  position: absolute;
				  bottom: 14em;
				  left: 6.7em;
				  width: auto;
				  height: 3em;
				  padding: 0.8em 2em 1em 2em;
				  background: rgb(4,104,57);
				  color: #FFF;
				  font-size: 120%;
				  letter-spacing: 3px;
				 text-transform: uppercase;
		}
		
		.owl-carousel div.owl--text .info {
			  position: absolute;
			  bottom: 7em;
			  left: 8em;
			  width: auto;
			  max-width: 360px;
			  height: auto;
			  min-height: 80px;
			  padding: 1em;
			  font-size: 100%;
			  background: #FFF;
			  letter-spacing: 3px;
		}
		
		.owl-carousel div.owl--text .arrow {
				background-image: url(../gfx/next.png);
				background-repeat: no-repeat;
				background-size: 25px 25px;
				background-color: #FFF;
				background-position: center;
				position: absolute;
				bottom: 7em;
				left: 450px;
				width: 75px;
				height: 120px;
				margin-left: 10px;
		}
		
		.quote {
			padding: 40px 2% 0 2%;	
		}
		
		.ref-detail, .firstrow-pic {
			display: block;	
		}
		
		.table-row .ref-detail {
			padding: 40px 0 40px 0;
		}
		
		.table-row {
			display: table-cell;
			width: 50%;	
		}
		
		.detail-secondrow .besonderheiten {
			padding-bottom: 40px;	
		}
		
		.beschreibung section:nth-child(1), section:nth-child(2) {
			margin-bottom: 40px;	
		}
		
		.referenzen {
			margin: 0 0 30px 0;
		}
		
		figure figcaption {
			padding: 1em 0 0 2em;
		}
		
		.detail-secondrow, .leistungen, .projektleiter, .kontakt {
			display: block;	
		}
		
		.projektleiter p, .projektleiter h4, .kontaktdaten {
			padding: 0 5% 0 5%;	
			text-align: center;
		}
		
		.leistungen h4 {
			padding-top: 2em;	
		}
}


@media screen and (max-width: 634px) {
		.owl-carousel div.owl--text .city {
				  position: absolute;
				  bottom: 8em;
				  left: 1em;
				  width: auto;
				  height: 3em;
				  padding: 0.8em 2em 1em 2em;
				  background: rgb(4,104,57);
				  color: #FFF;
				  font-size: 120%;
				  letter-spacing: 3px;
				 text-transform: uppercase;
		}
		
		.owl-carousel div.owl--text .info {
			display: none;
		}
		
		.owl-carousel div.owl--text .arrow {
				background-image: url(../gfx/next.png);
				background-repeat: no-repeat;
				background-size: 25px 25px;
				background-color: #FFF;
				background-position: center;
				position: absolute;
				bottom: 9.6em;
				left: 17em;
				width: 40px;
				height: 43px;
				margin-left: 10px;
		}
		
		#about {
			-webkit-column-count: 1;
			-moz-column-count: 1;
			column-count: 1;	
			margin: 50px 0 100px 0;
		}
		
		.headline, .headline-white {
			width: 100%;	
		}
		
		.owl-carousel {
			position: relative;
			height: 100%;
			height: 380px;
			margin-top: 100px;
		}
		
		.owl-carousel div.owl--text .city {
			  position: absolute;
			  bottom: 2em;
			  left: 1em;
			  width: 244px;
			  height: 3em;
			  padding: 0.7em 2em 1em 2em;
			  background: rgb(4,104,57);
			  color: #FFF;
			  font-size: 120%;
			  letter-spacing: 3px;
			  text-transform: uppercase;
	}
	
		.owl-carousel div.owl--text .arrow {
			background-image: url(../gfx/next.png);
			background-repeat: no-repeat;
			background-size: 30px 30px;
			background-color: #FFF;
			background-position: center;
			position: absolute;
			bottom: 2.4em;
			left: 254px;
			width: 38px;
			height: 43px;
			margin-left: 10px;
		}
	
}


@media (max-width: 360px) {
		.navbar-brand img {
			width: 160px;
			height: auto;
			margin-top: 10px;	
		}
}