/* BOX MODELL * * * * * * * * */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* Nicolas Gallagher's micro clearfix */
.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }


html {
font: 100%/1.5 Arial;
	margin-top: 1rem;
}

h1{font-family:Arial;font-size:4.5rem;font-weight:normal;line-height:1.1;padding:0;margin:0; color:#fff;}
h2{font-family:Arial;font-size:2.25rem;font-weight:bold;line-height:1.1;padding:0;margin:0;}
h3{font-family:Arial;font-size:1.25rem;font-weight:bold;line-height:1.1;padding:0;margin:0;}
h4{font-family:Arial;font-weight:normal;line-height:1.4;margin:0;}
p{font-family:Arial;font-size:1.125rem;line-height:1.4;padding:0;margin:0}

ul {
	padding: 0;
	margin:0 0 0 15px;
}
li {font-size:1.125rem;}
.aufzaehl {list-style-type:disc;}


/* SPALTEN * * * * * * * * */

.span_1 {
	width:16.6666666667%;
}
.span_2 {
	width:33.333333333333%;
}
.span_3 {
	width:50.0%;
}
.span_4 {
	width:66.6666666667%;
}
.span_5 {
	width:83.3333333333%;
}
.span_6 {
	width:100%;
}
/* RASTER * * * * * * * * */

.wrapper {
	margin: 0 auto; /* Zentriert das Layout */
	max-width: 1200px; /* Definiert die maximale Gesamtbreite des Layouts */
}

.row {
	/* [disabled]background: #ddd; */
}

.example .row{
	background: none;
}

/*--------------------------------------------------------------------------------------------------------------------*\

                                                       Navigation

\*--------------------------------------------------------------------------------------------------------------------*/

.btn {
  cursor: pointer; }

.btn-yellow {
	background-color: #dadad9;
	transition: all 0.2s linear;
}

.btn-yellow:hover {
  background-color: #fff;
  transition: all 0.2s linear; }
  
.nav-bar {
	width: 100%;
	height: 90px;
	max-height: 90px;
	position: fixed;
	margin: 0;
	top: 0;
	z-index: 100;}
.nav-bar .btn {
    position: absolute;
    display: block;
    width: 90px;
    height: 90px; }
	
/*---------------------------------------------Button ouverture du sider----------------------------------------------*/
.nav-bar .btn span {
  position: relative;
  width: 60px;
  height: 8px;
  display: block;
  top: 50%;
  left: 50%;
  background-color: #275984;
  transform: translatey(-4px) translatex(-30px) scale(0.6);
  -webkit-transform: translatey(-4px) translatex(-30px) scale(0.6) rotate(0);
  -moz-transform: translatey(-4px) translatex(-30px) scale(0.6) rotate(0);
  -o-transform: translatey(-4px) translatex(-30px) scale(0.6 rotate(0));
  -ms-transform: translatey(-4px) translatex(-30px) scale(0.6) rotate(0); }

.nav-bar .btn span:before {
  position: absolute;
  content: '';
  width: 60px;
  height: 8px;
  background-color: #275984;
  transform: translatey(-18px);
  -webkit-transform: translatey(-18px);
  -moz-transform: translatey(-18px);
  -o-transform: translatey(-18px);
  -ms-transform: translatey(-18px); }

.nav-bar .btn span:after {
  position: absolute;
  content: '';
  width: 60px;
  height: 8px;
  background-color: #275984;
  transform: translatey(15px);
  -webkit-transform: translatey(18px);
  -moz-transform: translatey(18px);
  -o-transform: translatey(85px);
  -ms-transform: translatey(18px); }

.nav-bar .btn.open span {
  background-color: rgba(39, 89, 132, 0);
  -webkit-transform: translatey(-4px) translatex(-30px) scale(0.6) rotate(-180deg);
  -moz-transform: translatey(-4px) translatex(-30px) scale(0.6) rotate(-180deg);
  -o-transform: translatey(-4px) translatex(-30px) scale(0.6) rotate(-180deg);
  -ms-transform: translatey(-4px) translatex(-30px) scale(0.6) rotate(-180deg); }

.nav-bar .btn.open span:before {
  transform: translatey(0) rotate(-45deg);
  -webkit-transform: translatey(0) rotate(-45deg);
  -moz-transform: translatey(0) rotate(-45deg);
  -o-transform: translatey(0) rotate(-45deg);
  -ms-transform: translatey(0) rotate(-45deg); }

.nav-bar .btn.open span:after {
  transform: translatey(0) rotate(45deg);
  -webkit-transform: translatey(0) rotate(45deg);
  -moz-transform: translatey(0) rotate(45deg);
  -o-transform: translatey(0) rotate(45deg);
  -ms-transform: translatey(0) rotate(45deg); }

.nav-bar .btn span,
.nav-bar .btn span:before,
.nav-bar .btn span:after,
.nav-bar .btn.open span,
.nav-bar .btn.open span:before,
.nav-bar .btn.open span:after {
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease; }

/*--------------------------------------------------------------------------------------------------------------------*\

                                                       SIDER

\*--------------------------------------------------------------------------------------------------------------------*/
.side-bar {
	height: 100%;
	width: 30%;
	position: fixed;
	left: 0;
	top: 90px;
	z-index: 100;
	padding-top:100px;
	background-color: rgba(22,65,147,0.85);
	transform: translatex(-100%);
	-webkit-transform: translatex(-100%);
	-o-transform: translatex(-100%);
	-moz-transform: translatex(-100%);
	-ms-transform: translatex(-100%);
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}

.side-bar.open {
  transform: translatex(0);
  -webkit-transform: translatex(0);
  -o-transform: translatex(0);
  -moz-transform: translatex(0);
  -ms-transform: translatex(0);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease; }


.sider-btn {
  display: block;
  padding:10px 0 10px 0;
  width: 100%;
  font-size:1.5rem;
  text-decoration: none;
  cursor: pointer;
  color: #ededed;
  text-align: center;
  transition: all 0.2s linear; }

.sider-btn:hover {
  color: #426c91;
 background-color: rgba(210,213,228,1.00);
  transition: all 0.2s linear; }


.column{
	float: left; /* floaten der Spalten */
	padding-left: 1%; /* Abstand zwischen den Spalten */
	padding-right: 1%;
	margin-bottom: 0rem;
}


.column span{
	display: block;	
}
.dblue {color: rgba(22,65,147,1.00);}
.bgdblue {background-color: rgba(22,65,147,1.00);}
.bgdrot {background-color: rgba(160,7,29,1.00);}
.bgdgelb {background-color: rgba(214,163,61,1.00);}
.bgweiss {background-color: #fff;}
.weiss {color: #fff;}

.einltext {padding: 20px 0 0 40px; font-size:1.125rem;}

.logosize { width:100%; margin-bottom:25px;}

.blockheight {height:400px;}
.blockhpic {height:400px;}

.willkommen {padding:120px 0 0 6%;}
.padtext {padding:40px;}
.leistungsan {padding:170px 0 0 6%;}
.referenzen {padding:170px 0 0 6%;}
.gutachter {padding:170px 0 0 4%;}
.ref1text {padding:40px;}
.ref2text {padding:40px;}
.imp1text {padding:40px;}
.imp2text {padding:165px 40px 40px 40px;}
.fpad {padding:10px 0;}
.tleft {text-align:left;}
.tright {text-align:right;}
.disclaim {font-size:0.85rem;}

a.linside {text-decoration:none;color:rgba(160,7,29,1.00); font-weight:bold;}
a.linside:hover, a.linside:active {
	color:rgba(22,65,147,1.00);
	padding-bottom:1px;
	border-bottom: 1px solid rgba(22,65,147,1.00);
         }
		 
a.footnav {text-decoration:none;color:#fff;}
a.footnav:hover, a.footnav:active {
	color:rgba(214,163,61,1.00);
	padding-bottom:3px;
	border-bottom: 1px solid rgba(214,163,61,1.00);
         }
.mfoot {margin-bottom:50px;}

/* Bilder * * * * * * * * */
.whaus{background-image:url(../images/whaus.jpg); background-repeat:no-repeat; background-position:center center; background-size: auto 100%; background-color:#fff;}
.wschluessel{background-image:url(../images/schluessel.jpg); background-repeat:no-repeat; background-position:center center; background-size: auto 100%; background-color:#fff;}
.wreferenz{background-image:url(../images/rechner.jpg); background-repeat:no-repeat; background-position:center center; background-size: auto 100%; background-color:#fff;}

/* MEDIA QUERIES * * * * * * * * */
@media screen and (max-width: 1340px){
.einltext {padding: 20px 0 0 100px; font-size:1.125rem;}
}
@media screen and (max-width: 1200px){
h2{font-family:Arial;font-size:2rem;font-weight:bold;line-height:1.1;padding:0;margin:0;}

}
@media screen and (max-width: 1024px){
h1{font-family:Arial;font-size:3.75rem;font-weight:normal;line-height:1.1;padding:0;margin:0; color:#fff;}
.einltext {padding: 10px 0px 30px 100px; font-size:1.75rem;}

	.span_1, .span_2, .span_3, .span_4, .span_5, .span_6 {width: 100%;}
	.side-bar {width: 100%; }
	.logosize { width:80%; margin-left:90px;}
	.padtext {padding:40px 40px 40px 100px;}
	.willkommen {padding:40px 0 40px 100px;}
	.leistungsan {padding:40px 0 40px 100px;}
	.referenzen {padding:40px 0 40px 100px;}
	.gutachter {padding:40px 0 40px 100px;}
	.blockheight {height:auto;}
	.blockhpic {height:370px;}
	.ref1text {padding:40px 40px 0 100px;}
.ref2text {padding:0 40px 40px 100px;}
.imp1text {padding:40px 40px 0 100px;}
.imp2text {padding:20px 40px 40px 100px;}
.tleft {text-align:center;}
.tright {text-align:center;}

	.wschluessel{background-image:url(../images/schluessel.jpg); background-repeat:no-repeat; background-position:center center; background-size: 100% auto; background-color:#fff;}
	.wreferenz{background-image:url(../images/rechner.jpg); background-repeat:no-repeat; background-position:center center; background-size: 100% auto; background-color:#fff;}
	.sider-btn {font-size:3rem;}
}

@media screen and (max-width:640px) {
	.side-bar {width: 100%; }
	.einltext {padding: 0 0 10px 100px; font-size:1.25rem;}
	.blockhpic {height:310px;}
}

@media screen and (max-width:480px) {
h1{font-family:Arial;font-size:2rem;font-weight:normal;line-height:1.1;padding:0;margin:0; color:#fff;}
.side-bar {width: 100%; }
.einltext {padding: 0 0 10px 100px; font-size:1rem;}
.blockhpic {height:250px;}
}

@media screen and (max-width:450px) {
.einltext {padding: 0 0 10px 100px; font-size:0.85rem;}
}