@charset "utf-8"
/* CSS Document */

	html, body {margin:0; padding:0;}

body {height:2000px; font-family: 'Lato', sans-serif;
}

@font-face { font-family: 'cross';
             src: url(' ../fonts/cross.svg') format('svg');}
#calltoaction{position: absolute; z-index:1; bottom:auto; top: 35%; position: fixed; width: 340px; right:0; height: 55px; background-color: #3987bf; box-shadow: -2px 1px 6px rgba(48,48,48,0.3); display: none; transition:all 0.6;}
@media screen and (max-width: 992px) {
#calltoaction{position: absolute; z-index:1; bottom: 20px; top: auto; position: fixed; width: 340px; right:0; height: 55px; background-color: #3987bf; box-shadow: -2px 1px 6px rgba(48,48,48,0.3); display: none; transition:all 0.6;}}
@media screen and (max-width: 468px) {
#calltoaction{position: absolute; z-index:1; bottom: 20px; top: auto; position: fixed; width: 280px; right:0; height: 55px; background-color: #3987bf; box-shadow: -2px 1px 6px rgba(48,48,48,0.3); display: none; transition:all 0.6;}}


.abstand{padding-top:  40px;}
@media screen and (max-width: 992px) {.abstand{padding-top:  0px;}}

#myBackground
{
	background-image: url('../images/head.jpg');
	-moz-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
	background-position: 50% 50%;
}

@media only screen and (max-width: 1024px)
{
	#myBackground
	{
		min-height: 800px;
		background-image: url('../images/head_1024.jpg');
	}
}

@media only screen and (max-width: 768px)
{
	#myBackground
	{
		background-image: url('../images/head_768.jpg');
	}
}

@media only screen and (max-width: 640px)
{
	#myBackground
	{
		min-height: 600px;
	}
}
@media only screen and (max-width: 502px)
{
	#myBackground
	{
		background-image: url('../images/head_502.jpg');
	}
}
@media only screen and (max-width: 368px)
{
	#myBackground
	{
		min-height: 500px;
		background-image: url('../images/head_368.jpg');
	}
}

.center {
    position: absolute;
    left: 0;
    top: 27%;
    width: 100%;
    font-family: "kepler-std-display",serif;
	font-style: normal;
	font-weight: 300;
	font-size: 58px; 
	text-align: center; 
	color:#2f80bc; 
	letter-spacing: 6px;
}
@media screen and (max-width: 992px){
	.center {
    position: absolute;
    left: 0;
    top: 27%;
    width: 100%;
    font-family: "kepler-std-display",serif;
	font-style: normal;
	font-weight: 300;
	font-size: 52px; 
	text-align: center; 
	color:#2f80bc; 
	letter-spacing: 6px;
	}}

#center_1{margin-top: -80px; margin-right:-600px;}
@media screen and (max-width: 992px){#center_1{margin-top: -70px; margin-right:-500px;}}
@media screen and (max-width: 712px){#center_1{margin-top: -60px; margin-right:-20px;}}
@media screen and (max-width: px){#center_1{margin-top: -70px; margin-right:-500px;}}

@media screen and (max-width: 991px){
#image{
	width: 421px;
	height:571px;
	padding: 0;
	margin: 0;
    text-align: center;
}
	}

#bottom{margin-bottom: 120px;}

@media screen and (max-width: 991px){
	
#bottom{
	margin-bottom: 50px;
}
	
	}


h4 {font-family: "kepler-std-display",serif; font-style: normal; font-weight: 300; font-size: 47px; text-align: center; color: #fff; letter-spacing: 3px;}
h2 {font-family: "kepler-std-display",serif; font-style: normal; font-weight: 300; font-size: 47px; text-align: center; color: #3e4547; letter-spacing: 3px;}
h7{font-family: "kepler-std-display",serif; font-style: normal; font-weight: 300; font-size: 17px; line-height: 22px; float: left; letter-spacing: 1px; width: 280px; padding-top: 6px; padding-left: 30px; color: #fff;}
@media screen and (max-width: 468px){h7{font-family: "kepler-std-display",serif; font-style: normal; font-weight: 300; font-size: 13px; line-height: 22px; float: left; letter-spacing: 1px; width: 220px; padding-top: 6px; padding-left: 30px; color: #fff;}}
h1 {font-family: "proxima-nova",sans-serif; font-style: normal; font-weight: 300; font-size: 20px; color: #3e4547; line-height: 24px;}
h6 {font-family: "kepler-std-display",serif; font-style: normal; font-weight: 300; font-size: 37px; text-align: center; color: #3e4547; letter-spacing: 3px; margin: 0 auto; padding: 0; padding-left: 50px; padding-right: 50px; padding-top: 160px; color: #fff;}
@media screen and (max-width: 992px){h6 {font-family: "kepler-std-display",serif; font-style: normal; font-weight: 300; font-size: 37px; text-align: center; color: #3e4547; letter-spacing: 3px; margin: 0 auto; padding: 0; padding-left: 50px; padding-right: 50px; padding-top: 130px; color: #fff;}}
@media screen and (max-width: 768px){h6 {font-family: "kepler-std-display",serif; font-style: normal; font-weight: 300; font-size: 36px; text-align: center; color: #3e4547; letter-spacing: 3px; margin: 0 auto; padding: 0; padding-left: 50px; padding-right: 50px; padding-top: 140px; color: #fff;}}
@media screen and (max-width: 568px){h6 {font-family: "kepler-std-display",serif; font-style: normal; font-weight: 300; font-size: 35px; text-align: center; color: #3e4547; letter-spacing: 3px; margin: 0 auto; padding: 0; padding-left: 50px; padding-right: 50px; padding-top: 70px; color: #fff;}}
@media screen and (max-width: 468px){h6 {font-family: "kepler-std-display",serif; font-style: normal; font-weight: 300; font-size: 31px; text-align: center; color: #3e4547; letter-spacing: 3px; margin: 0 auto; padding: 0; padding-left: 50px; padding-right: 50px; padding-top: 60px; color: #fff;}}
@media screen and (max-width: 368px){h6 {font-family: "kepler-std-display",serif; font-style: normal; font-weight: 300; font-size:28px; text-align: center; color: #3e4547; letter-spacing: 3px; margin: 0 auto; padding: 0; padding-left: 50px; padding-right: 50px; padding-top: 25px; color: #fff;}}
	
	

h1{
	font-size: 17px;
}
	
	}

h3 {font-family: "proxima-nova",sans-serif; font-style: normal; font-weight: 300; font-size: 20px; color: #fff; line-height: 24px;}
@media screen and (max-width: 800px){
	
	

h3{
	font-size: 17px;
}
	
	}

.linie { border :none; border-top: 1px solid #6b89a2; background-color:#6b89a2; height: 1px; width: 60px; margin-top: 20px;}
.linie_full { border :none; border-top: 1px solid #CDCDCD; background-color:#6b89a2; width: 100%; margin-top: 20px;}
.linie_lr { border :none; border-top: 1px solid #6b89a2; background-color:#6b89a2; height: 1px; width: 90px; margin-top: 20px;}
.linie_lr_w { border :none; border-top: 1px solid #fff; background-color:#fff; height: 1px; width: 90px; margin-top: 15px; margin-bottom: 0;}


#container_referenzen{max-width: 1000px; margin: 0 auto; padding:0; text-align: center;}

#bg_ref{
	background-image: url(../images/background_ref.png);
	width: auto;
	height: auto;
	position: relative;
	background-repeat: no-repeat;
	background-position: right;
}

#leiste{position: absolute; z-index:1; top: 0; position: fixed; width: 100%; height: 91px; transition:all 0.6s; background-color:rgba(48,48,48,0.2);}
@media screen and (max-width: 800px){
#leiste{position: absolute; z-index:1; top: 0; position: fixed; width: 100%; height:70px; transition:all 0.6s; background-color:rgba(48,48,48,0.2);}}
@media screen and (max-width: 639px){
#leiste{position: absolute; z-index:1; top: 0; position: fixed; width: 100%; height:91px; transition:all 0.6s; background-color:rgba(48,48,48,0.2);}}










/* 
  style.css
  
  CSS Contact Form
  
  v1.1
  
  Created by eucalyptuss
  Copyright 2012 Mikolaj Dobrucki. All rights reserved.
*/

#content { /* background */
 margin-top: 20px;
/* decoration */
}

#content, .form input, .form textarea, .form select, .form .tooltip, .form .bubble, .box {
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
}

.box, .form .tooltip, .form .bubble {
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.8) inset;  
 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.8) inset;
 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.8) inset;
}

/*
   ===============================
   =========== FIELDS ============
   =============================== 
*/

.form input, .form textarea, .form select {
 color: #000;
/* decoration */
 border: solid 2px #999;
 background: -moz-linear-gradient(top, #f8f8f8, #fff  30px);
 background: -o-linear-gradient(top, #f8f8f8, #fff  30px);
 background: -webkit-linear-gradient(top, #f8f8f8, #fff  30px);
 background: -ms-linear-gradient(top, #f8f8f8, #fff  30px);
 background-color: #fff;
}

.form p { position: relative; } /* neccessery to make tooltips working */ 

.form input { width: 250px; } .form select { width: 264px } .form textarea { width: 500px; height: 150px; } /* dementions of the fields */

.form label {
  color: #999;
  width: 200px;
  display: inline-block;
}

.form label span { color: red; } /* red mark on required fields */

.form .text label {
 float: left;
 margin-right: 4px;
 line-height: 30px;
}


input:focus, textarea:focus { /* focus effects */
 border: solid 2px #aaa;
 background: -webkit-linear-gradient(top, #f0f0f0, #fafafa  30px);
 background: -o-linear-gradient(top, #f0f0f0, #fafafa  30px);
 background: -moz-linear-gradient(top, #f0f0f0, #fafafa  30px);
 background: -ms-linear-gradient(top, #f0f0f0, #fafafa  30px);
}

.form .error-input { /* error state */
 border: solid 2px #eb5339;
 -moz-box-shadow: 0 0 6px 1px #fccac2;
 -webkit-box-shadow: 0 0 6px 1px #fccac2;
 box-shadow: 0 0 6px 1px #fccac2;
}

/*
   ===============================
   ======== SUBMIT BUTTON ========
   =============================== 
*/

.submit input { /* normal state */
 height: 40px;
 width: 120px;
 margin-left: 400px;
/* backgorund */
 background: -webkit-linear-gradient(#6c8aa3, #6c8aa3);
 background: -moz-linear-gradient(#6c8aa3, #6c8aa3);
 background: -o-linear-gradient(#6c8aa3, #6c8aa3);
 background: -ms-linear-gradient(#6c8aa3, #6c8aa3);
 background-color: #ccc;
/* shadows and highlights */
/* border */
 border: 1px solid #fff;
 color: #fff;
}

@media screen and (max-width: 1200px){
	
	.submit input { /* normal state */
 height: 40px;
 width: 120px;
 margin-left: 300px;
/* backgorund */
 background: -webkit-linear-gradient(#6c8aa3, #6c8aa3);
 background: -moz-linear-gradient(#6c8aa3, #6c8aa3);
 background: -o-linear-gradient(#6c8aa3, #6c8aa3);
 background: -ms-linear-gradient(#6c8aa3, #6c8aa3);
 background-color: #ccc;
/* shadows and highlights */
/* border */
 border: 1px solid #fff;
 color: #fff;
}
}

@media screen and (max-width: 992px){
	
	.submit input { /* normal state */
 height: 40px;
 width: 120px;
		float: right;
 margin-right: 80px;
		margin-bottom: 50px;
/* backgorund */
 background: -webkit-linear-gradient(#6c8aa3, #6c8aa3);
 background: -moz-linear-gradient(#6c8aa3, #6c8aa3);
 background: -o-linear-gradient(#6c8aa3, #6c8aa3);
 background: -ms-linear-gradient(#6c8aa3, #6c8aa3);
 background-color: #ccc;
/* shadows and highlights */
/* border */
 border: 1px solid #fff;
 color: #fff;
}
}

@media screen and (max-width: 768px){
	
	.submit input { /* normal state */
 height: 40px;
 width: 120px;
 margin-left: 70%;
		margin-bottom: 25px;
/* backgorund */
 background: -webkit-linear-gradient(#6c8aa3, #6c8aa3);
 background: -moz-linear-gradient(#6c8aa3, #6c8aa3);
 background: -o-linear-gradient(#6c8aa3, #6c8aa3);
 background: -ms-linear-gradient(#6c8aa3, #6c8aa3);
 background-color: #ccc;
/* shadows and highlights */
/* border */
 border: 1px solid #fff;
 color: #fff;
}
}

.submit input:hover { /* hover state */
 background: -webkit-linear-gradient(#6c8aa3, #8a99a5);
 background: -moz-linear-gradient(#6c8aa3, #8a99a5);
 background: -o-linear-gradient(#6c8aa3, #8a99a5);
 background: -ms-linear-gradient(#6c8aa3, #8a99a5);
 background-color: #6c8aa3;
}

.submit input:active { /* active state */
 background: -webkit-linear-gradient(#6c8aa3, #8a99a5);
 background: -moz-linear-gradient(#6c8aa3, #8a99a5);
 background: -o-linear-gradient(#6c8aa3, #8a99a5);
 background: -ms-linear-gradient(#6c8aa3, #8a99a5);
 background-color: #6c8aa3;
}

/*
   ===============================
   =========== TOOLTIP ===========
   =============================== 
*/

.form .tooltip:before { /* triangle's border */
 border: solid 8px red;
 border-color: transparent #4d8fcb transparent transparent;
 content: '';
 position: absolute;
 right: 216px;
 bottom: 6px;
}
 
.form .tooltip:after { /* triangle */
 border: solid 7px red;
 border-color: transparent #d0e4f4 transparent transparent;
 content: '';
 position: absolute;
 right: 216px;
 bottom: 7px;
}

.form .tooltip {
 width: 200px;
 padding: 8px;
 padding-top: 9px;
 margin-left: 10px;
 font: normal 12px/12px arial, helvetica, sans-serif;
/* position */
 position: absolute;
 bottom:0;
 left: 468px;
 display: none;
/* background */
 background: #d0e4f4;
/* shadows and highlights */
 -webkit-box-shadow: 0 -2px 2px #bbd9f1 inset;  
 -moz-box-shadow: 0 -2px 2px #bbd9f1 inset;  
 box-shadow: 0 -2px 2px #bbd9f1 inset;
/* border */
 border: 1px solid #4d8fcb;
}

form p:hover .tooltip { display: block; }  /* viseable on hover */

/*
   ===============================
   ======== ERROR BUBBLE =========
   =============================== 
*/

.form .bubble:before { /* triangle's border */
 border: solid 8px red;
 border-color: transparent #eb5339 transparent transparent;
 content: '';
 position: absolute;
 right: 216px;
 bottom: 6px;
 }
 
.form .bubble:after { /* triangle's */
 border: solid 7px red;
 border-color: transparent #fccac2 transparent transparent;
 content: '';
 position: absolute;
 right: 216px;
 bottom: 7px;
}

.form .bubble { /* main part of a tooltip */
 width: 200px;
 padding: 8px;
 padding-top: 9px;
 margin-left: 100px;
 font: bold 12px/12px arial, helvetica, sans-serif;
 position: absolute;
 bottom:0;
 left: 468px;
/* background */
 background: #fccac2;
/* shadows and highlights */
 -webkit-box-shadow: 0 -2px 2px #fcb7ac inset;  
 -moz-box-shadow: 0 -2px 2px #fcb7ac inset;  
 box-shadow: 0 -2px 2px #fcb7ac inset;
/* border */
 border: 1px solid #eb5339;
}

/*
   ===============================
   ===== NOTIFICATION BOXES ======
   =============================== 
*/

.box {
 min-width: 100px;
 padding: 20px 50px;
 margin-bottom: 20px;
 font: normal 12px/12px arial, helvetica, sans-serif;
}

.box strong { margin-right: 10px; }


.edit {
/* background */
 background: url(../img/edit.png), #ffeaa8;
 background-position: 10px center;
 background-repeat: no-repeat;
 background-color: #ffeaa8; /* for IE */
/* shadows and highlights */
 -webkit-box-shadow: 0 -2px 2px #ffe285 inset;  
 -moz-box-shadow: 0 -2px 2px #ffe285 inset;  
 box-shadow: 0 -2px 2px #ffe285 inset;
/* border */
 border: 1px solid #f9b416;
}


.error {
/* background */
 background: url(../img/error.png), #fccac2;
 background-position: 10px center;
 background-repeat: no-repeat;
 background-color: #fccac2; /* for IE */
/* shadows and highlights */
 -webkit-box-shadow: 0 -2px 2px #fcb7ac inset;  
 -moz-box-shadow: 0 -2px 2px #fcb7ac inset;
 box-shadow: 0 -2px 2px #fcb7ac inset;
/* border */
 border: 1px solid #eb5339;
}

#name{width: 550px;  padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#vorname{width: 550px; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#telefon{width: 550px; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#email{width: 550px; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#text{width: 550px; padding-top: 240px; padding-bottom: 25px; height: 0px; padding-left: 10px;}

@media screen and (max-width: 1200px){
#name{width: 450px;  padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#vorname{width: 450px; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#telefon{width: 450px; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#email{width: 450px; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#text{width: 450px; padding-top: 240px; padding-bottom: 25px; height: 0px; padding-left: 10px;}		
}

@media screen and (max-width: 992px){
#name{width: 100%;  padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#vorname{width: 100%; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#telefon{width: 100%; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#email{width: 100%; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}	
#text{width: 100%; padding-top: 240px; padding-bottom: 25px; height: 0px; padding-left: 10px;}		
}

@media screen and (max-width: 768px){
#name{width: 100%;  padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#vorname{width: 100%; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#telefon{width: 100%; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#email{width: 100%; padding-top: 30px; padding-bottom: 5px; padding-left: 10px;}
#text{width: 100%; padding-top: 240px; padding-bottom: 25px; height: 0px; padding-left: 10px;}		
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #626262;
  font-size: 14px;
  font-family: Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
  letter-spacing: 0.5px;
 
}
::-moz-placeholder { /* Firefox 19+ */
  color: #626262;
  font-size: 14px;
  font-family: Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
  letter-spacing: 0.5px;	
	
}
:-ms-input-placeholder { /* IE 10+ */
  color: #626262;
  font-size: 14px;
  font-family: Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";	
  letter-spacing: 0.5px;	
}
:-moz-placeholder { /* Firefox 18- */
  color: #626262;
  font-size: 14px;
  font-family: Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";	
  letter-spacing: 0.5px;	
}


#footer{
	width: 100%;
	height: 310px;
	background-color: #3a3a3a;
	margin: 0;
}
@media screen and (max-width: 992px){
	#footer{
	width: 100%;
	height: 350px;
	background-color: #3a3a3a;
	margin: 0;
}}

@media screen and (max-width: 768px){
	#footer{
	width: 100%;
	height: 310px;
	background-color: #3a3a3a;
	margin: 0;
}}

#footer_logo{
	padding-top: 40px; float: left; position: relative;
}

#footer_social{
	width: 150px; height: 35px; margin-top: 50px; margin-right: 50px; position: relative; float: right;
}

@media screen and (max-width: 768px){
#footer_social{
	width: 150px; height: 35px; margin-top: 50px; margin-right: 20px; position: relative; float: right;
}}

@media screen and (max-width: 410px){
#footer_social{
	width: 120px; height: 35px; margin-top: 50px; margin-left:0; margin-right: 0px; position: relative; float: right;
}}

#footer_text1{
	width: 100%; float: left; font-family:Helvetica Neue; font-weight: 200; font-size: 14px; color: #9b9999;  line-height: 24px; margin-top: 50px;
}

#footer_text1{
	width: 100%; float: left; font-family:Helvetica Neue; font-weight: 200; font-size: 14px; color: #9b9999;  line-height: 24px; margin-top: 50px;
}


#header2{width:100%; height:220px; background-color:#3986be; text-align: center; padding-top:1px; color: #fff; box-shadow: 0px 3px 6px hsla(300,15%,25%,0.3) inset;}
#header2_ueb{font-family: kepler-std-display,serif; font-style: normal; font-weight: 100;  font-size:51px; margin-top: 19px; letter-spacing: 3px;}
#header2_tex{font-family: proxima-nova,sans-serif; font-style: normal; font-weight: 300; font-size:29px; margin-top: 10px; margin-bottom: -10px;}
#header2_subueb{font-family: kepler-std-display,serif; font-style: normal; font-weight: 100;  font-size:41px; letter-spacing: 3px; margin: 0;}
@media screen and (max-width: 980px){
#header2_ueb{font-family: kepler-std-display,serif; font-style: normal; font-weight: 100;  font-size:47px; margin-top: 19px; letter-spacing: 3px;}
#header2_tex{font-family: proxima-nova,sans-serif; font-style: normal; font-weight: 300; font-size:25px; margin-top: 10px; margin-bottom: -10px;}
#header2_subueb{font-family: kepler-std-display,serif; font-style: normal; font-weight: 100;  font-size:37px; letter-spacing: 3px; margin: 0;}}
@media screen and (max-width: 566px){
#header2_ueb{font-family: kepler-std-display,serif; font-style: normal; font-weight: 100;  font-size:43px; margin-top: 19px; letter-spacing: 3px;}
#header2_tex{font-family: proxima-nova,sans-serif; font-style: normal; font-weight: 300; font-size:21px; margin-top: 10px; margin-bottom: -10px;}
#header2_subueb{font-family: kepler-std-display,serif; font-style: normal; font-weight: 100;  font-size:33px; letter-spacing: 3px; margin: 0;}}
@media screen and (max-width: 368px){
#header2_ueb{font-family: kepler-std-display,serif; font-style: normal; font-weight: 100;  font-size:39px; margin-top: 19px; letter-spacing: 3px;}
#header2_tex{font-family: proxima-nova,sans-serif; font-style: normal; font-weight: 300; font-size:17px; margin-top: 10px; margin-bottom: -10px;}
#header2_subueb{font-family: kepler-std-display,serif; font-style: normal; font-weight: 100;  font-size:29px; letter-spacing: 3px; margin: 0;}
#header2{width:100%; height:180px; background-color:#3986be; text-align: center; padding-top:1px; color: #fff; box-shadow: 0px 3px 6px hsla(300,15%,25%,0.3) inset;}}

#portolio{}

#bg-portfolio{
	background-color:#3986be;
	position: absolute;
	width: 100%;
	height: 415px;
	box-shadow: 0px 6px 10px hsla(300,15%,25%,0.3) inset;	
}

@media screen and (max-width: 613px){
#bg-portfolio{
	background-color:#3986be;
	position: absolute;
	width: 100%;
	height: 615px;
	box-shadow: 0px 6px 10px hsla(300,15%,25%,0.3) inset;	
	}}

@media screen and (max-width: 690px){
#bg-portfolio{
	background-color:#3986be;
	position: absolute;
	width: 100%;
	height: 615px;
	box-shadow: 0px 6px 10px hsla(300,15%,25%,0.3) inset;	
	}}

@media screen and (max-width: 430px){
#bg-portfolio{
	background-color:#3986be;
	position: absolute;
	width: 100%;
	height: 815px;
	box-shadow: 0px 6px 10px hsla(300,15%,25%,0.3) inset;	
	}}


#portfolio_abstand_l-r{padding: 0 0 0 0;}
@media screen and (max-width: 992px){#portfolio_abstand_l-r{padding: 0 40px 0 40px;}}


#portfolio-abstand{padding-top:50px;
}

#pf-t-left{padding-left: 0; padding-right: 10px;}
#pf-t-right{padding-right: 0; padding-left: 10px;}

@media screen and (max-width: 1200px){
#pf-t-left{padding-left: 10px; padding-right: 10px;}
#pf-t-right{padding-right: 10px; padding-left: 10px;}
}



.num{font-family: "proxima-nova",sans-serif; font-style: normal; font-weight: 600; font-size: 17px; color: #3e4547; line-height: 21px; color: #3986be; float: left; width: 30px;}
.pun{font-family: "proxima-nova",sans-serif; font-style: normal; font-weight: 300; font-size: 17px; color: #3e4547; line-height: 21px; color: #000; float: left; width: 520px; padding-bottom:10px;}
@media screen and (max-width: 1200px){.pun{font-family: "proxima-nova",sans-serif; font-style: normal; font-weight: 300; font-size: 17px; color: #3e4547; line-height: 21px; color: #000; float: left; width: 420px; padding-bottom:10px;}}
@media screen and (max-width: 992px){.pun{font-family: "proxima-nova",sans-serif; font-style: normal; font-weight: 300; font-size: 17px; color: #3e4547; line-height: 21px; color: #000; float: left; width: 670px; padding-bottom:10px;}}
@media screen and (max-width: 768px){.pun{font-family: "proxima-nova",sans-serif; font-style: normal; font-weight: 300; font-size: 17px; color: #3e4547; line-height: 21px; color: #000; float: left; width: 570px; padding-bottom:10px;}}
@media screen and (max-width: 590px){.pun{font-family: "proxima-nova",sans-serif; font-style: normal; font-weight: 300; font-size: 17px; color: #3e4547; line-height: 21px; color: #000; float: left; width: 370px; padding-bottom:10px;}}
@media screen and (max-width: 431px){.pun{font-family: "proxima-nova",sans-serif; font-style: normal; font-weight: 300; font-size: 17px; color: #3e4547; line-height: 21px; color: #000; float: left; width: 290px; padding-bottom:10px;}}
@media screen and (max-width: 400px){.pun{font-family: "proxima-nova",sans-serif; font-style: normal; font-weight: 300; font-size: 17px; color: #3e4547; line-height: 21px; color: #000; float: left; width: 250px; padding-bottom:10px;}}

.pntest{margin:0;}
@media screen and (max-width: 768px){.pntest{width: 600px; margin: 0 auto; padding: 0;}}
@media screen and (max-width: 590px){.pntest{width: 400px; margin: 0 auto; padding: 0;}}
@media screen and (max-width: 431px){.pntest{width: 340px; margin: 0 auto; padding: 0;}}
@media screen and (max-width: 400px){.pntest{width: 300px; margin: 0 auto; padding: 0;}}

#ueberuns_text{hyphens: auto; text-align: justify; margin-left:40px;}
@media screen and (max-width: 992px){#ueberuns_text {hyphens: auto; text-align: justify; margin-left:40px; margin-right: 40px;}}
@media screen and (max-width: 767px){#ueberuns_text {hyphens: auto; text-align: justify; margin: 0;}}

#icons_left{width: 100%;}
#icons_right{width: 100%;}
@media screen and (max-width: 992px){#icons_left{width: 100%; padding-left: 80px; padding-right: 0px;}#icons_right{width: 100%; padding-left: 0px; padding-right: 80px;}}
@media screen and (max-width: 639px){#icons_left{width: 100%; padding-left:0; padding-right:0;}#icons_right{width: 100%; padding-left:0; padding-right:0;}}

#abstand_gruende{padding-top:60px;}
@media screen and (max-width: 992px){#abstand_gruende{padding-top:0;}}


#auto{color:#000; }

.parallax-window {
    min-height: 400px;
    background: transparent;
}