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

/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * Programming // Der Hersteller // www.der-hersteller.de                        *
 * Layout // Tanja Hordes                                                                 *
 *                                                                               *
 * ----------------------------------------------------------------------------- */




html {
	height: 101%;
}
body {
	font: 62.5%/1.5em 'robotolight', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: rgb(0,0,0);
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * TYPOSATZ                                                                      *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	padding: 0;
	margin: 0;
}
#projekte h1,
#kontakt h1,
#zertifikate h1,
.declaration h1 {
	font-family: 'robotomedium';
	font-size: 3em;
	line-height: 1.1em;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 1.2em;
}
#ueber-uns h1 {
	font-family: 'robotobold';
	font-size: 19em;
	line-height: 1.1em;
	letter-spacing: 0.01em;
	text-align: center;
	text-transform: uppercase;
	color: rgb(0,152,203);
	margin-bottom: 0.25em;
}
#leistungen h2,
.declaration h2 {
	font-family: 'roboto_slabregular';
	font-size: 2.4em;
	line-height: 1.1em;
	font-style: italic;
	letter-spacing: 0.05em;
	margin-bottom: 0.5em;
}
#ueber-uns h2 {
	font-family: 'robotomedium';
	font-size: 4.8em;
	line-height: 1.1em;
	letter-spacing: 0.05em;
}
#leistungen h3 {
	font-family: 'robotomedium';
	font-size: 4.8em;
	line-height: 1.1em;
	letter-spacing: 0.05em;
}
h4 {	
}
h5 {	
}
p, .declaration #main ul, .declaration #main ol {
	font-size: 2.1em;
	line-height: 1.5em;
	margin: 0 0 1.5em 0;
}
.declaration #main ul {
	list-style: disc;
}
.declaration #main ul li {
	margin-bottom: 0.7em;
}
.declaration #main ol li {
	margin-bottom: 1.5em;
}
i, em {
}
b, strong {
	font-weight: normal;
	font-family: 'robotomedium';
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * 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-blue {color: rgb(0,152,203);}

.sc-content {
	margin-top: 6.5em;
}
.sc-content h2 {
	margin-top: 2.5em;
}



/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * CONTAINER                                                                     *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#wrapper {
	position: relative;
}
#container {
}
#content {
}



/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * HEADER                                                                        *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#header {
	position: relative;
	display: table;
	width: 100%;
	height: 100vh;
	background-image: url(../img/haeder-bg.jpg);
	background-position: center center;
  	background-repeat: no-repeat;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}
.declaration #header {
	height: auto;
	background-image: none;
}
#header .header-top {
	position: fixed;
	width: 100%;
	padding: 0 6.5em 1em 8em;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
	z-index: 999;
}
#header .header-bottom {
	position: relative;
	display: table-cell;
	vertical-align: bottom;
	padding: 15em 0 2em 0;
	text-align: center;
	z-index: 99;
}
#header.small .header-top {
	background: rgb(242,242,242);
}
#header .logo {
	display: block;
	float: left;
	margin-bottom: 0;
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
}
#header.large .logo {
	width: 26.5em;
	margin-top: 3.3em;
}
#header.small .logo {
	width: 15em;
	margin-top: 1em;
}
#header h1 {
	display: inline-block;
	margin: 0 0 1em 20%;
	padding: 0;
	color: rgb(0,152,203);
	font-size: 8em;
	line-height: 1em;
	text-align: left;
}
#header h1 span {
	display: block;
}
#header h1 span.line-01,
#header h1 span.line-02 {
	font-family: 'roboto_slabregular';
	font-style: italic;
}
#header h1 span.line-02 {
	padding-left: 0.7em;
}
#header h1 span.line-03 {
	font-family: 'robotobold';
}
#header .scroll-down {
	display: block;
}
#header .scroll-down img {
	width: 3em;
}



/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * NAVIGATION                                                                    *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#nav {
	float: right;
}
#nav > ul {
	padding: 0;
	margin: 0;
}
#nav > ul > li {
	display: inline-block;
	margin-right: 7.5em;
}
#nav > ul > li:last-child {
	margin-right: 0;
}
#nav > ul > li > a {
	display: block;
	font-family: 'robotomedium';
	font-size: 1.5em;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(0,0,0);
	padding-top: 1em;
	border-top: 8px solid transparent;
}
#nav > ul > li.current a {
	color: rgb(0,152,203);
	border-top: 8px solid rgb(0,152,203);
}
#nav > ul > li > a:hover,
#nav > ul > li > a:active,
#nav > ul > li > a.current,
#nav > ul > li.current-menu-item > a {
	color: rgb(0,152,203);
	border-top: 8px solid rgb(0,152,203);
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
}
#open-nav {
	display: none;
	position: fixed;
	right: 0.5em;
	top: 1.5em;
	padding: 1em;
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
}
#open-nav.transparent {
	background: none;
}
#open-nav.background {
	background: rgb(242,242,242,0.8);
}
#open-nav a {
	float: right;
	font-family: 'robotomedium';
	font-size: 1.5em;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(0,0,0);
}
#open-nav a:hover,
#open-nav a:active,
#open-nav a:focus {
	color: rgb(0,152,203);
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
}
#open-nav img {
	width: 2.8em;
}
a.close-nav {
	display: inline-block;
	font-family: 'robotomedium';
	font-size: 2em;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(0,0,0);
	margin: 1.5em 0 0 1.5em;
}
a.close-nav:hover,
a.close-nav:active,
a.close-nav:focus {
	color: rgb(0,152,203);
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
}

#responsive-nav.toggle {
	width: 28em;
}
#responsive-nav {
	position: fixed;
	width: 0em;
	height: 100%;
	top: 0;
	right: 0;
	overflow-x: hidden;
	background: rgba(242,242,242,0.9);
	-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 {
	padding: 1.5em 0 4em 3em;
	list-style: none;
	width: 25em;
}
#responsive-nav ul > li {
	margin-bottom: 1.5em;
}
#responsive-nav ul > li > a {
	font-family: 'robotomedium';
	font-size: 1.5em;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(0,0,0);
}
#responsive-nav > ul > li.current a {
	color: rgb(0,152,203);
}
#responsive-nav ul > li > a:hover,
#responsive-nav ul > li > a:active,
#responsive-nav ul > li > a.current,
#responsive-nav ul > li.current-menu-item > a {
	color: rgb(0,152,203);
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
}

#sub-nav {
	float: right;
	margin-top: 10.8em;
}
#sub-nav > ul {
	padding: 0;
	margin: 0;
}
#sub-nav > ul > li {
	display: inline-block;
	margin-right: 2em;
}
#sub-nav > ul > li:last-child {
	margin-right: 0;
}
#sub-nav > ul > li > a {
	font-family: 'robotoregular';
	text-decoration: none;
	color: rgb(255,255,255);
	font-size: 2.1em;
}
#sub-nav > ul > li > a:hover,
#sub-nav > ul > li > a:active,
#sub-nav > ul > li > a.current,
#sub-nav > ul > li.current-menu-item > a {
	text-decoration: underline;
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * MAIN                                                                          *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
.declaration #main {
	padding: 24em 0 12em 0;
}
#main a {
	color: rgb(0,0,0);
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
}
#main img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;
}
#main img.large {
	width: 100%;
}
.inner {
	position: relative;
	padding: 0 2em;
	z-index: 99;
}
.inner .col {
	width: 50%;
}
.inner .col.left {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 4em;
}
section {
	position: relative;
	padding-top: 6em;
}
section.bg-grey {
	background: rgb(242,242,242);
}
section span.anchor {
	position: absolute;
	width: 100%;
	height: 100%;
	top: -4em;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}

/* leistungen */
#leistungen .inner {
	margin-top: 6em;
}
#leistungen .inner.first {
	margin-top: 0;
}
.slider {
	margin-top: 8em;
}
.slider img {
	width: 100%;
}

/* projekte */
#projekte{
	padding-bottom: 1.5em;
}
.projekt {
	position: relative;
	margin-bottom: 2.5em;
}
.white-background {
	position: absolute;
	width: 80.3125%; /* 1028/1280 */
	background: rgb(255,255,255);
}
.varia-01 .white-background {
	top: 0;
	left: 0;
	bottom: 0;
}
.varia-02 .white-background {
	top: 3.6em;
	right: 0;
	bottom: 33%;
}
.projekt-inner {
	position: relative;
	margin: 0 13.671875%; /* 175/1280 */
	padding-bottom: 3.6em;
}
.varia-01 .projekt-inner {
	padding-top: 3.6em !important;
}
.projekt-inner h2 {
	font-size: 2.1em;
	line-height: 1.5em;
	margin: 0 0 1.5em 0;
}
.projekt-inner h2 + p {
	margin-top: -1.5em;
}
.projekt-inner p {
	padding-left: 1.6em;
	background: url(../img/icon-stahl.png) left 0.3em no-repeat;
	background-size: 1em;
}
figure, figcaption {
	margin: 0;
	padding: 0;
}
.projekt-images {
	margin-bottom: 1.8em;
}
.projekt-images .large {
	width: 66.12903225806451%; /* 615/930 */
}
.projekt-images .small {
	width: 31.93548387096774%; /* 297/930 */
}
.varia-01 .projekt-images img.top {
	margin-bottom: 6.223175965665236% !important;
}
.varia-02 .projekt-images img.top {
	margin-bottom: 1.9313304721030045% !important;
}
#projekte p.trigger {
	font-family: 'robotomedium';
	font-size: 3em;
	line-height: 1.1em;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}
#projekte p.trigger span {
	padding-left: 1.6em;
	background-size: 1.1em;
}
#projekte p.trigger.open {
	color: rgb(0,152,203);
}
#projekte p.trigger.closed:hover,
#projekte p.trigger.closed:active,
#projekte p.trigger.closed:focus {
	color: rgb(0,152,203);
	-webkit-transition:0.4s linear;  
   	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;    
   	-o-transition:0.4s linear;  
   	transition:0.4s linear;
}
#projekte p.trigger.closed:hover span,
#projekte p.trigger.closed:active span,
#projekte p.trigger.closed:focus span {
	background: url(../img/arrow-more-hover.png) left 0.2em no-repeat;
	padding-left: 1.6em;
	background-size: 1.1em;
}
#projekte p.trigger.closed span {
	background: url(../img/arrow-more.png) left 0.2em no-repeat;
	padding-left: 1.6em;
	background-size: 1.1em;
}
#projekte p.trigger.open span {
	background: url(../img/arrow-more-down.png) left 0.2em no-repeat;
	padding-left: 1.6em;
	background-size: 1.1em;
}
#projekte .toggle-container {
	display: none;
	margin: 0;
}

/* ueber-uns */
img.non-parallax {
	display: none !important;
}
.parallax {
  	height: 45em;
  	background-position: center center;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	background-image: url(../img/team-img-parallax-01.jpg);
}
.zeitstrahl {
	padding: 6em 0 6em 0;
}
.zeitstrahl ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.zeitstrahl ul li {
	width: 52%;
	height: 42px;
	text-align: right;
	background: url(../img/zeitstrahl-li.png) right repeat-y;
}
.zeitstrahl ul li.top {
	height: 51px;
	background: url(../img/zeitstrahl-top.png) right top no-repeat;
}
.zeitstrahl ul li.bottom {
	height: 57px;
	background: url(../img/zeitstrahl-bottom.png) bottom right no-repeat;
}
.zeitstrahl .trigger {
	display: block;
	font-family: 'robotomedium';
	color: rgb(161,216,231) !important;
	font-size: 2.1em;
	line-height: 1.5em;
	height: 42px;
	padding-right: 58px;
	padding-top: 5px;
	cursor: pointer;
	background: url(../img/zeitstrahl-trigger.png) center right no-repeat;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.zeitstrahl .trigger:hover,
.zeitstrahl .trigger:active,
.zeitstrahl .trigger:focus {
	color: rgb(0,152,203) !important;
}
.zeitstrahl .trigger.trigger_active {
	font-family: 'robotobold';
	line-height: 1.2em;
	color: rgb(0,152,203) !important;
	padding-top: 0;
	padding-right: 98px;
	font-size: 3em;
	background: url(../img/zeitstrahl-trigger-active.png) center right no-repeat;
}
.zeitstrahl .toggle-container {
	position: absolute;
	width: 40%;
	right: 2em;
	bottom: 25%;
	text-align: left;
}
.zeitstrahl .toggle-container p {
	color: rgb(0,152,203);
	margin-left: 10%;
	margin-bottom: 1em;
}
.zeitstrahl .toggle-container p.roboto-slab {
	font-family: 'roboto_slabregular';
	font-style: italic;
	font-size: 2.4em;
	margin-bottom: 0;
}
.zeitstrahl .toggle-container p.uppercase {
	font-family: 'robotoregular';
	text-transform: uppercase;
	letter-spacing: 0.05em
}
.zeitstrahl .toggle-container p.uppercase b {
	font-size: 0.8em;
}

/* kontakt/zertifikate */
#kontakt {
	padding-bottom: 2.5em;
}
#zertifikate {
	padding-bottom: 6em;
}
#kontakt,
#zertifikate {
	text-align: center;
}
#kontakt p.roboto-slab,
#zertifikate p.roboto-slab {
	font-family: 'roboto_slablight';
	font-style: italic;
	font-size: 2.4em;
	margin-top: 2.2em;
}
#kontakt p.phone,
#kontakt p.mail,
#kontakt p.fax {
	font-family: 'robotobold';
	font-size: 3em;
	letter-spacing: 0.05em
}
#kontakt p.phone,
#kontakt p.mail {
	width: 50%;
}
#kontakt p.phone a {
	background-image: url(../img/icon-phone.png);
}
#kontakt p.mail a {
	background-image: url(../img/icon-mail.png);
}
#kontakt p.phone a,
#kontakt p.mail a {
	display: block;
	color: rgb(0,0,0);
	text-decoration: none;
	padding-top: 3.8em;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 74px;
}
#kontakt p.phone a:hover,
#kontakt p.phone a:active,
#kontakt p.phone a:focus,
#kontakt p.mail a:hover,
#kontakt p.mail a:active,
#kontakt p.mail a:focus {
	text-decoration: underline;
}
#kontakt p.fax {
	clear: both;
	margin-bottom: 1.8em;
}
#kontakt p.adress {
	font-family: 'robotomedium';
	font-size: 3em;
	letter-spacing: 0.05em
}
#zertifikate .box-zertifikate {
	margin-top: 9em;
}
#zertifikate p.zertifikat {
	width: 45%;
	font-size: 1.8em;
}
#zertifikate p.zertifikat a {
	display: inline-block;
	color: rgb(0,0,0);
	width: 30%;
	text-decoration: none;
	background-size: 100px;
	padding-top: 8.2em;
}
#zertifikate p.zertifikat.left a {
	float: right;
	background: url(../img/icon-zertifikat-produktionskontrolle.png) center top no-repeat;
	background-size: 100px;
}
#zertifikate p.zertifikat.right a {
	float: left;
	background: url(../img/icon-schweisszertifikat.png) center top no-repeat;
	background-size: 100px;
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * ASIDE                                                                         *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#aside {
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * FOOTER                                                                        *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#footer {
	width: 100%;
	background: rgb(0,152,203);
	color: rgb(255,255,255);
	letter-spacing: 0.05em;
	padding: 27.5em 0 3em 0;
}
#footer .inner {
}
.footer-left {
	float: left;
}
#footer p {
	font-family: 'robotomedium';
	margin: 0 0 1.8em 0;
}
#footer p.left {
	margin-right: 3.7em;
}
#footer p strong {
	font-family: 'robotoblack';
}
#footer p a {
	text-decoration: none;
	color: rgb(255,255,255);
}
#footer a:hover,
#footer a:active,
#footer a:focus {
	text-decoration: underline;
}