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

/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * Programming // Der Hersteller // www.der-hersteller.de                        *
 * Layout // BÜRO PETIT // bueropetit.de                                         *
 *                                                                               *
 * ----------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * GLOBALS                                                                       *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
html {
	height: 101%;
}
body {
	font: 62.5%/1.5em 'roboto_condensedlight', Helvetica, Arial, sans-serif;
	color: rgb(0,0,0);
}

a {
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
}
a, a:active, a:link, a:visited {
    color: inherit;
    text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

figure {
	margin: 0;
	padding: 0;
}

.left {float: left;}
.right {float: right;}
.clear {clear: both;}

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

.mobile-only {display: none !important}
.nowrap {white-space: nowrap;}
.uppercase {text-transform: uppercase;}
.align-center {text-align: center;}

.box-sizing {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.hyphens {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
.flex {
	display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.color-red {color: rgb(193,31,35);}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * TYPOSATZ                                                                      *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, p, ul {
	font-weight: normal;
	margin: 0;
	padding: 0;
}

#main h1,
#main h2 {
	font-family: 'BebasNeueRegular';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 2.35em;
	line-height: 1.4em;
	letter-spacing: 0.23em;
	margin-bottom: 1.35em;
}
#main h1.sign:before,
#main h2.sign:before {
  	content: " ¬ ";
	margin: 0 0.1em 0 0;
	font-size: 1em;
	line-height: 1.4em;
}
#main p + h2,
#main p + h3,
#main ul + h2,
#main ul + h3 {
	margin-top: 2.75em;
}
#main h3,
#anfahrt h3 {
	font-family: 'roboto_condensedregular';
	font-size: 2.25em;
	line-height: 1.5em;
	margin-bottom: 1.35em;
}
#main h4 {	
	font-family: 'roboto_condensedregular';
	font-size: 2.25em;
	line-height: 1.5em;
	margin-bottom: 0;
}
h5 {	
}
#main p, #main ul,
#anfahrt p, #anfahrt ul {
	font-size: 2.25em;
	line-height: 1.5em;
	margin-bottom: 1.35em;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
#main ul li,
#anfahrt ul li {
	padding-left: 1em;
    position: relative;
}
#main ul li:before,
#anfahrt ul li:before {
	content: "▸";
	position: absolute;
	left: 0;
	font-size: 1.1em;
}
#footer p {
	font-size: 1.9em;
	line-height: 1.5em;
	letter-spacing: 0.01em;
}
i, em {
	font-style: normal;
	font-family: 'roboto_condensedlight_italic';
}
b, strong {
	font-weight: normal;
	font-family: 'roboto_condensedregular';
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * CONTAINER                                                                     *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#wrapper {
}
#container {
}
#content {
}
.inside {
	position: relative;
	margin: 0 auto;
	width: 160em;
	padding: 0 3em;
}
#imagefilm, #anfahrt {display: none;}
#anfahrt img {
	max-width: 100%;
	height: auto;
	border: 2px solid rgb(44,41,45);
}
#anfahrt figure {
	margin-bottom: 4em;
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * HEADER                                                                        *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#header {
	position: relative;
	width: 100%;
}
#header img {
	display: block;
	margin: 0;
	max-width: 100%;
	height: auto;
}

#header-scroll {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: rgb(44,41,45);
	z-index: 999;
	display: flex;
    justify-content: center;
  	align-items: center;
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
	overflow: hidden;
}
#header.large #header-scroll {
	height: 0em;
}
#header.small #header-scroll {
	height: 7.4em;
}
#header-scroll .logo {
	margin: 0 auto;
	width: 14em;
}
#header-scroll .arrow {
	position: absolute;
	width: 3em;
	right: 3em;
	top: 2.95em;
}

#header-top {
	position: relative;
	width: 100%;
	height: 75em;
  	background-repeat: no-repeat;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}
#header-top.bg-firma {
	background-image: url(../images/header-index.jpg);
	background-position: center center;
}
#header-top.bg-verfahren {
	background-image: url(../images/header-verfahren.jpg);
	background-position: center -12em;
}
#header-top.bg-qualitaet {
	background-image: url(../images/header-qualitaet.jpg);
	background-position: center center;
}
#header-top .inside {
	padding-top: 5em;
}
#header-top .logo {
	margin: 0 auto;
	width: 29.4em;
}
#header-top .button {
	position: absolute;
	right: -2.5em;
	top: 20em;
	z-index: 99;
}
#header-top .button img {
	display: block;
	margin: 0;
	width: 24em;
}

#header-bottom {
	position: absolute;
	z-index: 99;
	width: 100%;
	top: 75em;
}

#header-banner {
	position: relative;
	margin: 0 auto;
	width: 192em;
	margin-top: -29em;
	z-index: 9;
}
#header-banner .widescreen {
	display: block;
}
#header-banner .fullwidth {
	display: none;
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * NAVIGATION                                                                    *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#nav {
	position: absolute;
	top: 5em;
	right: 3em;
}
#nav ul {
}
#nav ul > li {
	font-family: 'BebasNeueRegular';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline;
	margin-right: 6.5em;
}
#nav ul > li:last-child {
	margin-right: 0;
}
#nav ul > li > a {
	font-size: 2.8em;
	line-height: 1em;
	letter-spacing: 0.23em;
	color: rgb(0,0,0);
}
#nav ul > li > a:hover,
#nav ul > li > a:active,
#nav ul > li > a:focus,
#nav ul > li > a.current,
#nav ul > li.current-menu-item > a,
#nav ul > li.current-page-ancestor > a {
	color: rgb(193,31,35);
}

#sub-nav {
	position: relative;
	z-index: 99;
}
#sub-nav ul {
	display: inline-block;
	background: rgb(193,31,35);
	padding: 1.55em 1.75em 1.55em 1.75em;
}
#sub-nav ul > li {
	font-family: 'BebasNeueRegular';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline;
	margin-right: 8.5em;
}
#sub-nav ul > li:last-child {
	margin-right: 0;
}
#sub-nav ul > li > a {
	font-size: 2.35em;
	line-height: 1em;
	letter-spacing: 0.23em;
	color: rgb(255,255,255);
}
#sub-nav ul > li > a:hover,
#sub-nav ul > li > a:active,
#sub-nav ul > li > a:focus,
#sub-nav ul > li > a.current,
#sub-nav ul > li.current-menu-item > a,
#sub-nav ul > li.current-page-ancestor > a {
	text-decoration: underline;
}

#footer-nav {
}
#footer-nav ul {
	text-align: center;
}
#footer-nav ul > li {
	font-family: 'BebasNeueRegular';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	display: inline-block;
}
#footer-nav > ul > li:before {
  	content: " | ";
	margin: 0 0.7em 0 0.6em;
	font-size: 2em;
	line-height: 1.15em;
}
#footer-nav > ul > li:first-child:before {
  	content: "";
	margin: 0;
}
#footer-nav ul > li > a {
	font-size: 2em;
	line-height: 1.15em;
	letter-spacing: 0.2em;
}
#footer-nav ul > li > a:hover,
#footer-nav ul > li > a:active,
#footer-nav ul > li > a:focus,
#footer-nav ul > li > a.current,
#footer-nav ul > li.current-menu-item > a,
#footer-nav ul > li.current-page-ancestor > a {
	color: rgb(193,31,35);
}

/* responsive-nav */
.open-nav {
	display: none;
	padding: 1.1em 1.35em 1.1em 1.35em;
	color: rgb(255,255,255);
	background-color: rgb(193,31,35);
	z-index: 99;
}
.close-nav {
	position: absolute;
	left: 3em;
	top: 3em;
}
.close-nav img {
	width: 23px;
}
.toggle-button {
	font-family: 'BebasNeueRegular';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: rgb(255,255,255);
	font-size: 2em;
	line-height: 1.15em;
	letter-spacing: 0.2em;
}
.open-nav .toggle-button {
	background-image: url(../images/hamburger.png);
	background-image: url(../images/hamburger.svg);
	background-repeat: no-repeat;
	background-position: left 3px;
	background-size: 23px 15px;
	padding-left: 1.8em;
}
.open-nav .toggle-button:hover,
.open-nav .toggle-button:active,
.open-nav .toggle-button:focus {
	text-decoration: underline;
}

#responsive-nav.toggle {
	width: 28em;
}
#responsive-nav {
	display: none;
	position: fixed;
	width: 0em;
	height: 100%;
	top: 0;
	left: 0;
	overflow-x: hidden;
	background: rgba(193,31,35,1);
	-webkit-transition:0.5s ease;  
   	-moz-transition:0.5s ease;  
   	-o-transition:0.5s ease;  
   	transition:0.5s ease;
	z-index: 999;
}
#responsive-nav ul {
	width: 28em;
	padding: 9em 3em 6em 3em;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#responsive-nav ul > li {
	margin-bottom: 3em;
}
#responsive-nav ul > li.imagefilm-mobile {
	display: none;
}
#responsive-nav ul > li:before {
  	content: " ¬ ";
	margin: 0 0.3em 0 0;
	font-size: 2em;
	line-height: 1.4em;
	color: rgb(255,255,255);
}
#responsive-nav ul > li > ul {
	padding: 0 0 0 2.2em;
	margin-top: 1em;
}
#responsive-nav ul > li > ul > li {
	margin-bottom: 1em;
}
#responsive-nav ul > li > ul > li:before {
	content: "";
	margin: 0;
}
#responsive-nav ul > li > a {
	font-family: 'BebasNeueRegular';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: rgb(255,255,255);
	font-size: 2em;
	line-height: 1.15em;
	letter-spacing: 0.2em;
}

#responsive-nav ul > li > a:hover,
#responsive-nav ul > li > a:active,
#responsive-nav ul > li > a:focus,
#responsive-nav ul > li > a.current,
#responsive-nav ul > li.current-menu-item > a,
#responsive-nav ul > li.current-page-ancestor > a {
	text-decoration: underline;
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * MAIN                                                                          *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#main {
	position: relative;
	padding: 4em 0 8em 0;
	z-index: 9;
}
#main img {
	max-width: 100%;
	height: auto;
}
#main a {
	text-decoration: underline;
}
#main a:hover,
#main a:active,
#main a:focus {
	color: rgb(193,31,35);
}
#main a.no-decoration {
	text-decoration: none;
}
#main span.spacer {
	display: inline-block;
	width: 4em;
}
.small-content {
	width: 80em;
}

.flex-content {
	display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.flex-content .item {
	width: 31.25%;
}

ul.tool-pics {
	display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-top: 3.3em;
}
ul.tool-pics li {
	padding-left: 0 !important;
	width: 30.4%;
	margin-bottom: 2.4%;
}
ul.tool-pics li:before {
	content: "" !important;
}

p.table {
	display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
p.table span.jahr {
	display: block;
	width: 12%;
}
p.table span.text {
	display: block;
	width: 87%;
}

p.pruefung {
	display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
p.pruefung span.bezeichnung {
	display: block;
	width: 30%;
}
p.pruefung span.text {
	display: block;
	width: 68%;
}

ul.referenzen li {
	padding-left: 0 !important;
	margin-bottom: 1.8em;
}
ul.referenzen li:before {
	content: "" !important;
}

.ansprechpartner {
	display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 2em;
}
.ansprechpartner.margin-top {
	margin-top: 6.4em;
}
.ansprechpartner figure {
	/*margin-right: 2em;*/
    width: 26.6%; /* 133/500 */
}
.ansprechpartner p {
	margin-top: 0.8em;
    width: 69.39999999999999%; /* 347/500 */
}
.ansprechpartner a {
	text-decoration: none !important;
}





/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * FOOTER                                                                        *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#footer {
	width: 100%;
	color: rgb(255,255,255);
}
#footer-top {
	height: 37em;
	background-position: center center;
  	background-repeat: no-repeat;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}
#footer-top.var-01 {
	background-image: url(../images/footer-top-var01.jpg);
}
#footer-top.var-02 {
	background-image: url(../images/footer-top-var02.jpg);
}
#footer-middle {
	padding: 4.3em 0 3.6em 0;
	background-image: url(../images/footer-middle.jpg);
	background-position: center center;
  	background-repeat: no-repeat;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}
#footer-middle .inside {
	display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
#footer-middle .inside span.item {
	display: block;
}
#footer-middle .inside a:hover,
#footer-middle .inside a:active,
#footer-middle .inside a:focus {
	color: rgb(226,225,225);
}
#footer .logo {
	display: block;
	margin: 0;
	width: 25.7em;
	margin-top: 1.8em;
}
#footer-bottom {
	background: rgb(44,41,45);
	padding: 2.5em 0;
}