@charset "UTF-8";



body {background-image: url("../images/header.png"); background-position: top right; background-size: 200%; background-repeat: no-repeat; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}

@media (min-width: 400px) {
body {background-position: top left; background-size: contain; background-repeat: no-repeat;}
}
.subnavi {}
.subnavi ul {text-align: center; margin: 10px 0 20px 0; }
.subnavi ul li {display: inline; margin-left: 12px; list-style-type: none; }
.subnavi ul li:first-child {margin-left: 0px; }
.subnavi ul li:before {content: none;}
.subnavi ul li a {text-decoration: none; font-size: 1.3rem; color: #999}
.subnavi ul li a:hover {color: #000}
.subnavi ul li a.rex-current {color: #c51a1b}

@media (min-width: 550px) {
.subnavi ul {text-align: right; margin: 10px 0 70px 0; }
.subnavi ul li {display: inline; margin-left: 20px; list-style-type: none; }
}

.logo {font-size: 3.2rem; color: #000; text-align: center;}
.logo a {text-decoration: none}
.rot {color: #c51a1b}

@media (min-width: 550px) {
.logo {float: left; text-align: center}
}

.navi {}
.navi ul {margin-top: 20px; text-align: center; }
.navi ul li {display: inline; margin-left: 12px; list-style-type: none;}
.navi ul li:first-child {margin-left: 0px; }
.navi ul li:before {content: none;}
.navi ul li a {text-decoration: none; font-size: 1.5rem; color: #999}
.navi ul li a:hover {color: #000}
.navi ul li a.rex-current {color: #c51a1b}

@media (min-width: 1000px) {
.sticky {position: fixed; top: 0; width: 100%; z-index: 100; background-color: #fff}
.sticky + .container {
  padding-top: 68px;
}
	.sticky + .banner {
  padding-top: 68px;
}
}

@media (min-width: 550px) {
	.navi ul {margin-top: 15px; text-align: right; }
	.navi ul li { margin-left: 30px; }


}

.start {margin-top: 40px}
.wrap {display: none}
.bilder {background-color: #f0f0f0; margin-top: 4%}
@media (min-width: 550px) {
	.start {margin-top: 120px}
.wrap {display: block}
	.bilder {background-color: transparent; margin-top: 0%}
}

@media (min-width: 1000px) {
.twelve.columns.intro-text {width: 48%}}
.wrap {position: relative; margin-top: 8%; }

@media (min-width: 1000px) {
	.wrap {margin-top: 4%; }
}
.grau {background-color: #e5e5e5; padding-bottom: 59%; position: absolute; height: 10px; top: 0; width: 100%; z-index: -1;
}

.start_left {margin-top: 8%}
.start_right {margin-top: 0%}

.startbild {margin-bottom: 8%; position: relative;}
.overlay {position: absolute;  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(197,26,27,1)); z-index: 20; width: 100%; height: 100%; text-align: center; top:0;
  transition: .5s ease;}
.startbild img {vertical-align: top;}

@media (min-width: 550px) {.start_right {margin-top: -8%}
}


@media (min-width: 1000px) {
.overlay {opacity: 0;}
.startbild:hover .overlay {
  opacity: 1;
	}}
.text {color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;
}
.text h3 {color: white}
.content .container {padding-top: 10%; padding-bottom: 10%}

.content .five.columns {width: 100%;}
.content .five.columns:nth-child(2) {margin-left: 0%}
.content .six.columns {width: 100%}
.content .offset-by-one {margin-left: 0%}
.content .offset-by-one-2 {margin-left: 0%}


@media (min-width: 1000px) {
.content .five.columns {width: 39.3333333333%;}
	.content .five.columns:nth-child(2) {margin-left: 4%}
	.content .six.columns {width: 48%}
	.content .offset-by-one-2 {margin-left: 12.66666666667%}
	.content .offset-by-one {margin-left: 8.66666666667%}
}

.hellgrau_start {background-color: #f7f7f7; margin-top: 0%; padding-top: 10%}
@media (min-width: 550px) {
.hellgrau_start {margin-top: -10%; }
}
@media (min-width: 1000px) {
	.offset {margin-left: 22%}}
.abstand_oben {margin-top: 8%}
.abstand_unten {margin-bottom: 8%}
.abstand {margin: 12% 0}
.competence {position: relative; background-position: center; background-size: cover; background-repeat: none; color: white}
.competence h3, .competence h6, .competence a {color: white;}
.competence a:hover {color: #ccc;}
.overlay_dark {background-color: rgba(0,0,0,0.75); position: absolute; width: 100%; height: 100%; top:0}
.competence .container {z-index:2}

.centered {text-align: center}
.icon {-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);}

.big {font-size: 6rem;  font-family: "Univia W01 Black", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal;  color: #c51a1b}



.banner {margin-top: 2%;}
.banner_text {width: 80%; text-align: center; padding: 10% 10%;  background-color: #f7f7f7; margin: 0}
.banner_bild {width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; padding-top: 100%}
@media (min-width: 550px) {
.banner_text {padding: 5% 10%;}
.banner_bild {padding-top: 60%}

}
@media (min-width: 1000px) {
	.banner {margin-top: 2% ;display: flex}
.banner_text {width: 30%; text-align: center; padding: 12% 10%;  background-color: #f7f7f7; margin: 2% 0}
.banner_bild {width: 50%; background-size: cover; background-position: center center; background-repeat: no-repeat; padding-top: 0}

}

.infotext .four.columns {width: 100%}
.infotext .eight.columns {width: 100%}
.infotext .columns {margin-left:0}

@media (min-width: 1000px) {
	.infotext .four.columns {width: 30.6666666667%}
.infotext .eight.columns {width:  65.3333333333%}
	.infotext .columns {margin-left:4%}
.infotext .columns:first-child {margin-left:0}
}

.hellgrau {background-color: #f7f7f7}

.referenzen {padding: 4% 0; border-bottom: 1px solid #ccc}
.referenzen h4 {margin-bottom: 3rem}
.referenzen h3 {margin-top: 3rem}
.referenzen:last-child {border-bottom: none}

.referenzen .four.columns {width: 100%}
.referenzen .eight.columns {width: 100%}
.referenzen .six.columns {width: 100%}
.referenzen .four.columns, .referenzen .eight.columns {margin-left: 0}

.accordion {
  color: #444; cursor: pointer; border: none;  margin-left: 0;  display: block; position: relative; padding-left: 20px
}

.accordion:before {
  position: absolute; content: '\002B'; left: 0; bottom: 0; 
}
.accordion.active:before {
  content: "\2212";
}

.panel { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;
}

.galerie a {display: block; width: 48%; margin-left: 4%; margin-bottom: 4%; float: left}
@media (max-width: 550px) {
	.galerie a:nth-child(2n+1) {margin-left: 0}}

@media (min-width: 550px) {
	.referenzen .four.columns {width: 48%}
	.referenzen .six.columns {width: 48%}
	.galerie a {width: 30.6666666667%;}
.galerie a:nth-child(3n+1) {margin-left: 0}
}

@media (min-width: 1000px) {
	.referenzen h3 {margin-top: 0rem}
	
	.accordion { margin-left: 34.6666666667%; margin-top: -60px; margin-bottom: 40px;
}
	
.referenzen .four.columns {width: 30.6666666667%}
.referenzen .eight.columns {width: 65.3333333333%}
.referenzen .eight.columns {margin-left: 4%}
}


.team div {width: 100%; margin-bottom: 4%}
.team img {margin-bottom: 20px}

.rot_fl {background-color: #c51a1b; color: #fff}
.rot_fl a {text-decoration: none; color: #fff}
.rot_fl h2 {margin-bottom: 3rem}

@media (min-width: 550px) {
    .team div {width: 48%; margin-left: 4%; float: left; }
    .team div:nth-child(2n+1) {margin-left: 0; clear: left}
}

@media (min-width: 1000px) {
    .team div {width: 30.666666667%; }
     .team div:nth-child(2n+1) {margin-left: 4%; clear: inherit}
    .team div:nth-child(3n+1) {margin-left: 0; clear: left}

}

#map-canvas {width: 100%; height: 600px}

.footer {background-color: #f0f0f0; padding: 8% 0 14%; font-size: 1.5rem; background-image: url("../images/raster-footer@2x.png"); background-position: bottom left; background-size: 200%; background-repeat: no-repeat; text-align: center}
.logo_kl { font-family: "Univia W01 Medium", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal;  font-size: 2rem; color: #000}
.footer a {text-decoration: none}
.footer ul {margin: 0; padding: 0}
.footer li {list-style-type: none; margin: 0; padding: 0 }
.footer ul li:before {content: none;}

@media (min-width: 550px) {
	.footer {background-size: contain; text-align: left}
	.adresse {padding-top: 3.7rem}
}