@charset "UTF-8";
/* CSS Document */

/* 
##############################################################################
Programming // Der Hersteller // www.der-hersteller.de
Design // FREIRAUM K KOMMUNIKATIONSDESIGN // www.freiraum-k.de
##############################################################################
*/



/* body
############################################################################*/
html {
  height: 101%;
}
body {
	font: 62.5%/1.5em 'crimson_textroman', Georgia, "Times New Roman", Times, serif;
	color: rgb(75,75,77);
	background-image: url(../img/bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	background-attachment: fixed;
}




/* typosatz
############################################################################*/
h1, h2, h3, h4, h5, h6 {
}

.inner.default h1 {
	font-family: 'DINOT', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 1.65em;
	line-height: 1.4em;
	margin-bottom: 1.3em;
	color: rgb(120,36,30);
}
.inner.default h2 {
	font-family: 'DINOT', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 1.65em;
	line-height: 1.4em;
	margin-bottom: 1.3em;
}
.inner.taetigkeitsbereiche h2 {
	font-size: 1.8em;
	line-height: 1.4em;
	margin-bottom: 1.3em;
	color: rgb(120,36,30);
}
.inner.taetigkeitsbereiche h2 + ul {
	margin-top: -1.1em;
}
.inner.default h3 {
	font-family: 'DINOT', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 1.65em;
	line-height: 1.4em;
	margin-bottom: 0.3em;
}
.inner.default h4 {	
	font-size: 1.8em;
	line-height: 1.4em;
	color: rgb(120,36,30);
}
h5 {	
}

.inner.taetigkeitsbereiche p,
.inner.taetigkeitsbereiche ul,
.inner.default p,
.inner.default ul,
.inner.default table {
	font-size: 1.8em;
	line-height: 1.4em;
	margin-bottom: 1.3em;
}
.inner.taetigkeitsbereiche ul {
	color: rgb(141,112,48);
	list-style-image: url(../img/ul-dot.png);
	margin-left: 2.5em;
}
.inner.default ul {
	list-style-image: url(../img/ul-dot-default.png);
	margin-left: 2.5em;
}

.inner.default table tr td.absatz {
	padding-top: 1em;
}
.inner.default table tr td:first-child {
	font-family: 'DINOT', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 0.85em;
	padding-right: 2em;
}

/* home | buero */
blockquote p {
	font-size: 2.3em;
	line-height: 1.4em;
	margin-bottom: 0.8em;
}
.inner.buero .pre p {
	font-size: 1.8em;
	line-height: 1.9em;
	margin-bottom: 1.2em;
}
blockquote em {
	font-size: 1.5em;
}
.inner.buero .pre p em {
	font-size: 1.5em;
}
blockquote p span,
.inner.buero .pre p span {
	display: block;
}
blockquote footer,
.inner.buero .pre h2 {
	font-family: 'DINOT', Helvetica, Arial, sans-serif;
	font-size: 1.4em;
	line-height: 1.4em;
	color: rgb(120,36,30);
	text-transform: uppercase;
}
.inner.buero .pre h2 {
	margin-top: 5.8em;
}

hr {
	border-top: 1px dashed rgb(75,75,77);
	border-left: none;
	border-right: none;
	border-bottom: none;
	margin: 5em 0 3.3em 0;
}


/* class
############################################################################*/
.left {float: left;}
.right {float: right;}
.clear {clear: both;}

.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

.nowrap {white-space: nowrap;}
.color-beige {color: rgb(141,112,78) !important;}
.color-rot {color: rgb(120,36,30) !important;}
.color-grau {color: rgb(75,75,77) !important;}



/* layout
############################################################################*/
#wrapper {
}
#content {
	padding-top: 15em;
	padding-bottom: 3em;
}



/* main
############################################################################*/
#main {
	padding: 0 2em 0 2em;
}
#main img {
	max-width: 100%;
	height: auto;
}
#main a {
	color: rgb(75,75,77);
	text-decoration: none;
}
#main a:hover,
#main a:active {
	color: rgb(120,36,30);
	-webkit-transition:0.2s linear;  
   	-moz-transition:0.2s linear;  
   	-o-transition:0.2s linear;  
   	transition:0.2s linear;
}

#main .inner {
	background: rgba(255,255,255,0.8);
	padding: 6em 10em 6em 10em;
}
#main .section {
	margin: 2.7em 0 2.7em 0;
}
h1 + .section {
	margin-top: 5em !important;
}
#main .indent {
	padding-left: 5em;
	margin-bottom: 1.3em;
}
#main .indent p {
	margin-bottom: 0;
}

/* home | buero */
.inner.home,
.inner.buero {
	padding: 13em 14em 13em 10em !important;
	min-height: 67em;
}
.inner.home img.left {
	margin: 0 2em 2em 2.8em;
}
.inner.home .responsive,
.inner.buero .responsive {
	display: none;
}
.inner.home .pre,
.inner.buero .pre {
	padding-top: 1.5em;
}
.inner.home .pre .home-01 {margin-left: 3.2em;}
.inner.home .pre .home-02 {margin-left: 2.5em;}
.inner.home .pre .home-03 {margin-left: 1.2em;}
.inner.home blockquote:first-child {
	margin-bottom: 13em;
}

.inner.buero .pre .buero-01 {margin-left: 3.9em;}
.inner.buero .pre .buero-02 {margin-left: 2.1em;}
.inner.buero .pre .buero-03 {margin-left: 1.4em;}
.inner.buero .pre .buero-04 {margin-left: 2.8em;}

/* taetigkeitsbereiche */
.inner.taetigkeitsbereiche {
	padding-right: 14em !important;
}

/* GoogleMaps */
.responsiveContainer {
  	position: relative;
  	padding: 0 0 50% 0;
	margin: 0 0 5.2em 0;
  	height: 0;
  	overflow: hidden;
	border: 3px solid rgb(141,112,78);
}
.responsiveContainer iframe {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
}



/* header
############################################################################*/
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 11em;
	background: rgb(141,112,78);
	z-index: 99;
}
#header .inner {
	position: relative;
	padding: 2.2em 2em 0 2em;
}



/* navigation
############################################################################*/
#nav {
	position: absolute;
	right: 2em;
	bottom: 0;
	height: 18px;
}
#nav ul {
}
#nav ul li {
	float: left;
}
#nav ul li span {
	float: right;
	display: block;
	width: 2.8em;
	height: 44px;
	border-bottom: 10px solid rgb(120,36,30);
}
#nav ul li a {
	float: left;
	display: block;
	height: 44px;
	font-family: 'DINOT', Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(255,255,255);
	border-bottom: 10px solid rgb(120,36,30);
}
#nav ul li a:hover,
#nav ul li a:active,
#nav ul li a.current {
	color: rgb(120,36,30);
	border-bottom: 10px solid transparent;
	-webkit-transition:0.2s linear;  
   	-moz-transition:0.2s linear;  
   	-o-transition:0.2s linear;  
   	transition:0.2s linear;
}
.line {
	position: absolute;
	height: 1em;
	width: 190em;
	background: rgb(120,36,30);
	z-index: 999;
}
.line.header-left {
	bottom: -2.6em;
	left: -190em;
}
.line.header-right {
	bottom: -2.6em;
	right: -190em;
}

a.toggle-nav {
	display: none;
}
a.toggle-nav {
	position: absolute;
	top: 6em;
	right: 2em;
	background: url(../img/menu-icon.png) no-repeat;
	font-family: 'DINOT', Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(255,255,255);
	padding: 0 0 0.2em 2.5em;
	z-index: 999;
}
a.toggle-nav:hover,
a.toggle-nav:active {
	color: rgb(120,36,30);
	background: url(../img/menu-icon-hover.png) no-repeat;
	-webkit-transition:0.2s linear;  
   	-moz-transition:0.2s linear;  
   	-o-transition:0.2s linear;  
   	transition:0.2s linear;
}


/* footer
############################################################################*/
#footer {
}