@charset "UTF-8";
body, html {height: 100%}


/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

.header_black {background-color: #000; padding-top: 25px}
.header_black-gradient {background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 90%); padding-top: 25px; position: absolute; width: 100%; z-index: 10; height: 300px}
.logo {width: 150px; position:absolute; right: 50%; margin-right: -75px; top: 8px; }
.header {font-family: "Roboto", Helvetica, Arial, "sans-serif"; text-transform: uppercase; letter-spacing: 0.1rem; height: 55px; }
.header li {list-style-type: none;}
.header a {text-decoration: none;}

.subnavi {text-align: center;}

.subnavi li a {color: #fff;font-size: 1.2rem;}
.subnavi li a.rex-current, .subnavi li a:hover
{color: #fff; } 
.sprache {position: absolute; 
right: 20px; }
.sprache ul{display: block;}
.sprache li{display: inline;}
.sprache li a {color: #ccc; font-size: 1.2rem;} 
.sprache li a.rex-current {display: none;} 
.sprache li a.rex-current, .sprache li a:hover {color: #fff; } 

.navi {text-align: center;}
 .navi ul{font-size: 1.4rem;  display: block;}  
.navi ul li {margin-bottom: 20px}
.navi ul li a {color: #fff; position: relative;letter-spacing: 0.2rem }

.navi ul li a:hover, .navi ul li a.rex-current {color: #fff;}

@media (min-width: 400px) {
    .sprache {right: 0; }
}

@media (min-width: 750px) {
    .logo {width: 200px; margin-right: -100px; top: 20px; right: inherit; left: 0 }
.header {height: 175px; }
    .sprache li a.rex-current {display: inline;} 
.subnavi {position: absolute;
right: 0;top: 0;
margin-right: 80px;
    text-align: right;
}
    .subnavi li a {color: #ccc;}
    .subnavi li a.rex-current, .subnavi li a:hover
{color: #fff; } 
    .navi {margin-top: 100px;}
    .navi ul{display: flex;
justify-content: space-between;}
    
    .navi ul li a {color: #ccc; }
    .navi li:first-child {margin-left: 0}
.navi ul li {margin-bottom: 0px}
    
    .navi li a.rex-current:before, .navi li a:hover:before {
    border-bottom: 2px solid #fff;
    width: 70px;
    margin-right: -35px;
}
    
 .navi li a:before {
    content: "";
    position: absolute;
    bottom: -20px;
    right: 50%;
    margin-right: 0px;
    width: 0px;
    border-bottom: 2px solid transparent;
    transition: margin-right 0.5s, width 0.5s;
    webkit-transition: margin-right 0.5s, width 0.5s;
	 z-index: 100
}

    
}


@media (min-width: 1100px) {
    
    .navi ul{display: block;}
    
    .navi ul li {display: inline; margin-left: 30px;}
    
    .logo {top: 80px; }
    
    .navi {text-align: right; margin-top: 80px;}
/*.navi li:first-child {position: absolute;left: 0; margin-left: 0}
.navi li:nth-child(2){position: absolute;left: 77px}
.navi li:nth-child(3){position: absolute;left: 203px}   */ 
}


.menu-button{
	display: block;
	height: 20px;
	width: 30px;
	z-index: 2000;
	position: fixed;
    margin-top: 5px;
}
@media (min-width: 750px) {
.menu-button{
	display: none;
}
}

#nav-toggle { position: absolute;}

#nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 0px;
  height: 1px;
  width: 25px;
  background: #fff;
  position: absolute;
  display: block;
  content: '';
}
#nav-toggle span:before {
  top: -6px; 
}
#nav-toggle span:after {
  bottom: -6px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 200ms ease-in-out;
}
#nav-toggle.active span {
  background-color: transparent;
    
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;background: #fff;
}
#nav-toggle.active span:before {
  -webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
#nav-toggle.active span:after {
  -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
}

.overlay {
	height: 100%;
	width: 100%;
	background-color: #000;
	position: fixed;
	z-index: 200;
	opacity: 0.0;
	visibility:hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
    right: 0;
    top:0;
    display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
	}
	
.overlay.open {
	visibility:visible;
	opacity: 0.95;
	-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
	}
	
@media (min-width: 750px) {
	.overlay {
	background-color: transparent;
	position: inherit;
	opacity: 1.0;
	visibility:visible;
        display: block;
	}
	
	.overlay.open {
	visibility:visible;
	opacity: 1.0;}
	}



.slider-wrap {
	position: relative;
margin-right: auto;
	margin-left: auto;
	height: calc(100% - 55px)
}

@media (min-width: 550px) {
   .slider-wrap {
	height: 100%
} 
    
}
#slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;
	height: 100%;
}
#slider .slide {
	position: absolute;
	left: 100%;
	width: 100%;
	height: 100%;
	background-size:cover;
	background-position: center center;
	background-repeat: no-repeat;
	margin-right: auto;
	margin-left: auto;
	-webkit-transition: left 500ms ease;
	-moz-transition: left 500ms ease;
	-ms-transition: left 500ms ease;
	-o-transition: left 500ms ease;
	transition: left 500ms ease;
	text-align: center;
	vertical-align: middle;
	-ms-behavior: url(backgroundsize.min.htc);
}

/* Hold Transitions - REQUIRED for looping */
    #slider.no-transition .slide {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}
/* Animations */
    #slider .slide.old {
	left: -100%;
}
#slider .slide.visible {
	left: 0;
}
#slider .slide.next {
	left: 100%;
}

ul.actions {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
li.next {
	right: 0px;
	width: 30%;
	position: absolute;
	z-index: 1;
	height: 100%;
	overflow:hidden;
}
li.prev {
	position: absolute;
	left: 0px;
	width: 30%;
	z-index: 1;
	height: 100%;
	overflow:hidden;
}

li.next a {
	top: 50%;
    right: 10px;
	cursor:pointer;
	position: absolute;
	height: 40px;
width: 30px;
	text-indent: -2000px;
	margin-top: -20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
    background-image: url(../images/pfeile.svg);
background-position: -30px center;
background-repeat: no-repeat;
background-size: 60px;
	
}
li.prev a {
    top: 50%;
	cursor:pointer;
	position: absolute;
	height: 40px;
width: 30px;
	text-indent: -2000px;
	margin-top: -20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
    background-image: url(../images/pfeile.svg);
background-position: 0px center;
background-repeat: no-repeat;
background-size: 60px;
}



.copy {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
    color: #fff;
    text-align: left;
}

.copy-box {
    position: absolute;
    left: 0;
    bottom: 40px;
    padding: 30px;
    background-color: rgba(0,0,0,0.60);
    margin-right: 20px;
margin-left: 20px;
}

.copy-box h5 {border-bottom: solid 1px #ccc; margin-bottom: 2rem; padding-bottom: 1rem; font-weight: 700}


@media (min-width: 400px) {
   .copy {width: 85%;}   
    .copy-box {
    margin-right: 0px;
margin-left: 0px;
}
}

@media (min-width: 550px) {
   .copy {width: 80%;}   
    
    .copy-box {
    width: 300px;
}

}

.schwarz {background-color: #000; color: #fff}

.schwarz p {color: #fff}

.grau {background-color: #f0f0f0;}
.weiss {background-color: #fff}
.schwarz, .grau, .weiss {padding-top: 50px; padding-bottom: 50px}

@media (min-width: 550px) {
    
.schwarz, .grau, .weiss {padding-top: 100px; padding-bottom: 100px}
}

.datum {color: #222; }
.monat {font-size: 1.6rem; color:#000; margin-bottom: 10px; padding-bottom: 10px}
.monat:after {border-bottom: 1px solid #000; content: "";
position: absolute; width: 40px; left: 20px; margin-top:30px}

@media (min-width: 400px) {
    .monat:after {left: 0;}
}
@media (min-width: 550px) {
    .monat:after {margin-top:10px}
}
@media (min-width: 1212px) {
    .monat:after {margin-top:30px}
}
.twelve h1, .twelve h2, .twelve h4,  .twelve p {text-align: center; margin-bottom: 4rem}
#referenzen .column:first-child, #referenzen .column:nth-child(3n+4) {margin-left: 0;}


.banner {height: calc(100% - 175px); width: 100%; display:block; background-repeat: no-repeat; background-size: cover; background-position: center center}

.bg-image {background-repeat: no-repeat; background-position: bottom left; background-size: cover; }


.produkt {text-align: center}
.produkt .column:first-child, .produkt .column:nth-child(3n+4) {margin-left: 0;}
.produkt .column:nth-child(1n+1) {margin-top: 50px;}

.gallery a {width: 48%; display: block; float:left; margin-left: 4%; margin-bottom: 4%}
.gallery a:first-child, .gallery a:nth-child(2n+3) {margin-left: 0; }


.gallery a img {width: 100%; heigth: auto}

@media (min-width: 550px)
{.gallery a {width: 30.6666666667%}
    .gallery a:nth-child(2n+3) {margin-left: 4%; }

.gallery a:first-child, .gallery a:nth-child(3n+4) {margin-left: 0; }
}


.carousel {height: 80%;width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 4%;
max-width: 1200px;}

.carousel-img {height:60%; text-align: center;  background-size: cover; position: relative; background-position: center center}

@media (min-width: 750px) {
    .carousel {height: 75%; }
    .carousel-img {height:100%; }   
}

.carousel .copy {
position: absolute;
width: 100%;
height: 40%;
margin: auto;
color: #fff;
text-align: left;
bottom: -40%
}

.carousel .copy-box {
position: relative;
left: 0;
width: auto;
padding: 20px;
background-color: rgba(0, 0, 0, 1);
    bottom: 0;
    margin-right: 0px;
margin-left: 0px;
}

.carousel .copy-box h5 {border-bottom: solid 1px #fff; margin-bottom: 2rem; padding-bottom: 1rem}


@media (min-width: 750px) {
    .carousel .copy {
position: relative;
width: 100%;
height: 100%;
top: 0;
max-width: 100%;
}

.carousel .copy-box {
position: absolute;
left: 40px;
    bottom: 40px;
padding: 30px;
    width: 300px;
background-color: rgba(0, 0, 0, 0.6);

}
   
}
#map-canvas {height: 500px}

@media (min-width: 1000px) {
  

}


#pager li {display: inline-block; list-style: none; margin-left: 0px; margin-right: 10px}
#pager li:before {content: ""}
#pager li a {display: block; color: #fff; background-color: #009EE0; padding: 0px 10px}
#pager li a:hover {text-decoration: none; background-color: #000; }


th {font-size: 16px}
td:last-child {text-align: right}

.footer {background-color: #000; padding-top: 50px; padding-bottom: 100px; color: #fff; text-align: center; font-size: 1.6rem}
.footer h2 {font-size: 1.8rem; margin-bottom: 1rem;}
.footer p {margin-bottom: 1rem; }
.footer span:after {white-space: pre; content:'\A';}
.footer span.dot:after {white-space: nowrap;}
.footer span.dot {display: none}
.footer a {color: #bbb}

@media (min-width: 600px) {
    .footer span:after {white-space: nowrap; content:'';}
.footer span.dot:after {white-space: nowrap; }
    .footer span.dot {display: inline}
}