/** 
 * main.css
 * 
 * 1. General HTML tags
 * 2. Masthead area
 * 3. Main content and sidebar
 * 4. Footer
 * 5. Media queries for responsive layout
 * 
 */
 
 @import url("reset.css");


/*********************************************************************
 * 1. General HTML tags
 *
 */

* {
	box-sizing: border-box; 
}

img {
	max-width: 100%; 
}

blockquote {
	margin-left: 0;
	padding-left: 1.5em;
	padding-right: 2em; 
	border-left: 4px solid #ddd; 
	font-style: italic; 
	color: #777; 
}

pre, code {
	background: #eee; 
	border: 1px solid #ddd; 
}

pre {
	font-size: 14px; 
	line-height: 1.4em;
	padding: 1em;
	border-left: 4px solid #ddd; 
}

/*********************************************************************
 * 2. Masthead area
 *
 */


form.search {
	float: right; 
	margin: 0;
	width: 30%; 
}
	form.search input {
		margin: 0;
		padding: 0.25em 0.5em;
		border: 1px solid #ccc; 
		width: 100%; 
	}
	form.search button {
		display: none; 
	}

.breadcrumbs {
	clear: both;
    background: #d8dee1;
	min-width: 960px;
}
.breadcrumbs div {
	width: 960px;
	margin: 0 auto;
	line-height: 50px;
}

	.breadcrumbs span:after {
		content: ">";
		color: #999; 
		padding-left: 0.5em;
		padding-right: 0.25em; 
	}
	.breadcrumbs span:last-child:after { 
		content: "";
	}
	

/*********************************************************************
 * 3. Main content and sidebar
 *
 */


.align_left {
	/* for images placed in rich text editor */ 
	float: left;
	margin: 0 1em 0.5em 0; 
	position: relative;
	top: 0.5em;
	max-width: 50%; 
}

.align_right {
	/* for images placed in rich text editor */ 
	float: right;
	margin: 0 0 0.5em 1em;
	max-width: 50%; 
}

.align_center {
	/* for images placed in rich text editor */ 
	display: block;
	margin: 1em auto; 
	position: relative;
	top: 0.5em;
}

figure {
	display: table;
	width: 1px;
	margin: 1em 0;
}

figure img {
	display: table-row;
	margin-bottom: 0.5em;
}

figure figcaption {
	display: table-row;
	font-size: smaller;
	color: #777;
	line-height: 1.4em;
}



body {
	background: #ebedee;
	border-top: 10px solid #8e1d37;
	font-size: 87.5%; /* Base font size: 14px */
	font-family: Calibri Light, Calibri, sans-serif;
	color: #354a54;
	min-width: 960px;
}

header, section, footer {
	display: block;
	width: 100%;
	overflow: auto;
	min-width: 960px;
}

.wrapper {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}

header {
	margin: 45px 0 0 0;
	height: 150px;
	overflow: hidden;
}

header img {float:right; margin-right: 55px;}

header nav {
	width: 520px;
	float: left;
	margin-top: 65px;
}

header nav ul {
	margin: 0;
	text-align: justify;
	text-align-last: justify;
}

header nav li {
	font-family: Trajan W08 Regular;
	display: inline-block;
	margin-right: 20px;
	font-size: .9em;
	text-transform: uppercase;
}

header nav li.current a { 
	color:#8e1d37;
}


header nav ul:after {
	content: "";
	display: inline-block;
	width: 100%;
}


header nav li:last-child {margin-right: 0}

header nav li a {
	color: #354a54;
	text-decoration: none;
}

footer {
	background: #8e1d37;
	color: #fff;
	padding: 50px 0 10px 0;
}
footer h3, footer p, footer a { color: #fff}

footer h3 span.small {
    font-family: Calibri Light, Calibri, sans-serif;
    text-transform: none;
    font-size: 14px;
}

footer .links {float: left; margin-right: 100px; margin-bottom: 40px; margin-top: 10px;}

footer #copyright {
	width: 100%;
	clear:both;
	text-align: center;
	margin-bottom: 15px;
}


section#content {padding-bottom: 75px}

.index section#content {padding-bottom: 45px}

.leftDiv {
	float: right;
	width: 350px;
}

.leftDiv h1 {margin-bottom: 40px;}
.leftDiv h2 {margin-bottom: 1em}

.strategie .leftDiv p {
	font-size: 1.1em;
}

img.intro {
	margin-bottom: 45px;
}


.leftDiv img {
	margin-bottom: 25px;
}

.rightDiv h3 {
	  font-family: Calibri Light, Calibri, sans-serif;
}

.rightDiv {
	float: left;
	width: 520px;
}

#koepfe {
	width: 100%;
	height: 290px;
	margin-bottom: 30px;
}

#koepfe p {
	text-align: right;
	color: #95a6b0;
	font-size: 1em;
	font-style: italic;
	padding-right: 5px;
}

#carousel {
	margin-top: 40px;
	padding: 0 0 50px 0;
	background: url(../media/referenzenschatten.html) no-repeat -50px 100px;
}

#carousel .container {
	height: 150px; 
	background: #f3f4f5; 
	padding: 0 60px;
}

#carousel a.btn {
	display: block;
	height: 31px;
	width: 30px;
	position: absolute;
	margin-top: 55px;
	z-index: 200;
	opacity: .5;
}

#carousel a.btn:hover {opacity: 1}

#carousel a.prev {
	margin-left: -40px;
}

#carousel a.next {
	margin-top: -81px;
	margin-left: 415px;
}

#referenz .item{
        padding: 0px;
        margin: 20px 10px 10px 10px;
    }

.teasernav{
	width: 30%;
    height: 180px;
    float: left;
    margin-left: 5%;	
}

.teasernav:nth-child(3n+1) { margin-left:0 }

.teasernav img { width: 100%; height: auto; }
.teasernav a {text-decoration:none; font-size: 0.8em;}
.teasernav p { line-height:1em; margin-top: 5px;}

.projekte .teasernav {
	width: 47.5%;
	margin-right: 5%;
	margin-left: 0;
	height: auto;
	margin-bottom: 30px;
}

.projekte .teasernav:nth-child(even) {
	margin-right: 0;
}

.kopf {
	width: 240px;
	height: 280px;
	float: left;
	margin-left: 40px;	
}
.kopf:nth-child(2n+1) { margin-left:0 }
.kopf img { width: 240px; height: auto; }
.kopf p {margin: 0; font-size: 100%}
.kopf a {text-decoration:none}
.kopf .name {
	font-family: Trajan W08 Regular;
	font-size: 1.1em;
	color: #8e1d37;	
	margin-top: 5px;
}

.kopf .schwerpunkt {
	font-family:Calibri;
		font-style: italic;

	color: #95a6b0;
}

.partner{
	width: 100%;
	height: 120px;
	float: left;
}

.partner img { float:left; width: 175px; height: auto; }
.partner p {margin: 0; font-size: 100%}

.partner .name {
	font-family: Trajan W08 Regular;
	font-size: 1.1em;
	color: #8e1d37;	
	margin-top: 5px;
	margin-left:45px;
	float:left;
	width:300px;
}


.partner .schwerpunkt {
	font-family:Calibri;
	font-style: italic;
	float:left;
	color: #95a6b0;
	width:300px;
	margin-left:45px;
}


#single_image img {
    margin-top: 20px;
}

.contentpic {width: 100%; height: 250px;}
.unternehmen .contentpic {height: Auto;}



/* Headings */
 
h1, h2, h3, h4 {
	font-family: Trajan W08 Regular;
	font-weight: normal;
	line-height: 1.3;
	margin-top: 1em;
	margin-bottom: .5em;
	text-transform:uppercase;
	color: #8e1d37;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, .rightDiv h3:first-child { margin-top: 0; }

h1 {font-size: 1.7em}	/* 34px vorher 2.6em*/
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */

.rightDiv h3 {
  font-size: 1.2em;
  border-bottom: 1px solid #ccc;
  margin-top: 35px;
}

h4 {font-size: 1.286em}	/* 18px */

h5 {
	font-family: Calibri Light, Calibri, sans-serif;
	font-size: 1em;
	font-style: italic;
	margin-top: 25px;
	margin-bottom: 0px;
	color: #95a6b0;
}
h6 {font-size: 1em}	/* 14px */

 
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a {
	color: #8e1d37;
	padding: 0 1px;
	text-decoration: underline;
}
a:hover, a:active {
	opacity: .8;
	text-decoration: none;
}
 
/* Paragraphs */
p {
	font-size: 1.286em;
	line-height: 1.4em;
	margin-bottom: .5em;
}
* p:last-child {margin-bottom: 0;}

p.overview {
	margin-top: 45px;
}
 
strong, b {font-weight: bold;}
em, i {font-style: italic;}
 
::-moz-selection {background: rgba(255,255,255,.8); color: #888;}
::selection {background: rgba(255,255,255,.8); color: #888;}
 
/* Lists */
ul {
	list-style: outside disc;
	margin: 1em 0 1.5em 1.5em;
}

li {
	font-size: 1.286em;
	line-height: 140%;
	color: #8e1d37;
}
 
ol {
	list-style: outside decimal;
	margin: 1em 0 1.5em 1.5em;
}
 
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
 
/* Quotes */
blockquote {font-style: italic;}
cite {}
 
q {}


.baustelle header {
	width: 295px;
	height: auto;
	margin-right:auto;
	margin-left: auto;
	margin-top:	 10%;
}
.baustelle header.impressum { }


.baustelle .wrapper {
	width: auto;
}

.baustelle header img { float: none; margin-bottom: 45px; }

.baustelle .footer { width: 100%; position:absolute; bottom: 15px;}
.baustelle .footer p { text-align: center; font-size: 13px;}

.img3col img {
	width: 30%; 
	margin-right: 5%;
}
.img3col img:last-child {
	margin-right: 0;
}

.teaser {
	border-radius: 50%;
    width: 100%;
    padding-bottom: 100%;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+26,edf1f1+100 */

background: #ffffff; /* Old browsers */

background: -moz-radial-gradient(center, ellipse cover,  #ffffff 26%, #edf1f1 100%); /* FF3.6+ */

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(26%,#ffffff), color-stop(100%,#edf1f1)); /* Chrome,Safari4+ */

background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 26%,#edf1f1 100%); /* Chrome10+,Safari5.1+ */

background: -o-radial-gradient(center, ellipse cover,  #ffffff 26%,#edf1f1 100%); /* Opera 12+ */

background: -ms-radial-gradient(center, ellipse cover,  #ffffff 26%,#edf1f1 100%); /* IE10+ */

background: radial-gradient(ellipse at center,  #ffffff 26%,#edf1f1 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#edf1f1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

p.teaser {
    display: block;
    width: 100%;
    background-color: #d8dee1;
    height: 110px;
    text-align: center;
    position: relative;
}

p.teaser:hover {
    background: #8e1d37;
    color: #fff;
}

p.teaser:hover a {
    color: #fff;
}

p.teaser a.info {
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
	padding: 0 5px;
	width: 100%;
}


@media print {
   body {
      color: #000;
	  background: #fff;
	  max-width: 100%;
   }
   
   #content { width: 100%; }
   
  	#content img {
	   border: 1px solid #888;
	}
   
    @page {
      margin: 2cm;
   }
   
   .rightDiv { width: 58%; }
   .leftDiv { width: 34%; }
   footer {
   	background: #fff;
	border-top: 1px solid #8e1d37;
   }
   footer h3, footer p, footer a {
    color: #aaa;
}
   footer .wrapper {
}
}