/* ----------------------------------------------------------------------------- *
 *                       Styles                       *
 * ----------------------------------------------------------------------------- */

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/* ----------------------------------------------------------------------------- */


/* Raster */

.row {width:auto; }
.row:before, .row:after {content:''; display:table;}
.row:after {clear:both;}
.row .row {margin-left:-1em; margin-right:-1em;}
.container {max-width:1100px; margin:0 auto; }
.container-small {max-width:750px; margin:0 auto; }
.padding-t {padding-top: 7rem;}
.padding-v {padding-top: 3rem; padding-bottom: 3rem;}
.padding-vv {padding-top: 7rem; padding-bottom: 14rem;}
.padding-b {padding-bottom: 7rem;}
.margin-v {margin-top: 1.5em; margin-bottom: 1.5em;}
.margin-b {margin-bottom: 7rem;}
.columns {float:left; padding-left: 1.5em; padding-right: 1.5em; }
.columns-basic {float:left;}
.push {float:right;}
.border {padding: 10px; border:1px gray solid; margin-right: 20px; margin-bottom:10px; border-radius:200px;}
.border-grey {border:1px gray solid;}
.border-left {padding-left: 20px; border-left:1px gray solid;  }
.trenner {border-bottom: 1px silver solid; width:80%; text-align:center; margin:0 auto;}
.trenner-color {border-bottom: 3px #AA1A17 solid; width:100%;  }
.equal-height {display:flex; flex-wrap:wrap;}
.wrap {flex-wrap:wrap;}
.nowrap {flex-wrap:nowrap;}
.align-center {  display:flex; flex-wrap: wrap; align-content:center; }
.align-bottom {  display:flex; flex-wrap: wrap; align-content:flex-end;}
.top {margin:0;}
hr {width: 60%; text-align:center; border:none; border-top: 2px red dotted;}
.center {text-align:center;}
.right {text-align:right;}
.flex-container {  display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-item {  display: -webkit-flex; display: -ms-flex; display: flex; }
.zentriert-v {position: relative; top:50%; -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}



/* Small */
@media screen and (max-width:600px) {
	.small-040 {width:40%;}
	.small-050 {width:50%;}
	.small-060 {width:60%;}
	.small-075 {width:75%;}
	.small-100 {width:100%;}
	
	.small-offset-010 {margin-left:10%;}
	.small-offset-020 {margin-left:20%;}
	.small-offset-050 {margin-left:50%;}
	
	.small-padding-v	{padding-top: 1.0rem; padding-bottom: 1.0rem;}
	.small-display {	display:none;}

}

/* Medium */
@media screen and (min-width:600px) /*and (max-width:1000px)*/ {
	.medium-010 {width:10%;}
	.medium-015 {width:15%;}
	.medium-016 {width:16.66667%;}
	.medium-025 {width:25%;}
	.medium-030 {width:30%;}
	.medium-033 {width:33.333333%;}
	.medium-040 {width:40%;}
	.medium-050 {width:50%;}
	.medium-060 {width:60%;}
	.medium-066 {width:66.66667%;}
	.medium-083 {width:83.333333%;}
	.medium-100 {width:100%;}

	.medium-offset-016 {margin-left:16.66667%;}
	.medium-offset-033 {margin-left:33.333333%;}
	.medium-offset-040 {margin-left:40%;}
	.medium-offset-050 {margin-left:50%;}
	.medium-offset-066 {margin-left:66.66667%;}
	.medium-offset-083 {margin-left:83.333333%;}	
	
	.medium-display {	display:none;}
	.medium-margin-v	{margin-top: 1.0em; margin-bottom: 1.0em;}

}

/* Large */
@media screen and (min-width:1000px) {
	.large-010 {width:10%;	}
	.large-015 {width:15%;	}
	.large-016 {width:16.66%;	}
	.large-020 {width:20%;	}
	.large-020-m {width:18.1%;	}
	.large-025 {width:25%;	}
	.large-030 {width:30%;	}
	.large-030-m	{width:30%; margin-left:5%;	margin-right:5%;}
	.large-033 {width:33.333333%;	}
	.large-040 {width:40%;	}
	.large-050 {width:50%;	}
	.large-060 {width:60%;	}
	.large-066 {width:66.666666%;	}
	.large-070 {width:70%;	}
	.large-090 {width:90%;	}
	.large-100 {width:100%;}
		
	.large-offset-005 {margin-left:5%;}
	.large-offset-010 {margin-left:10%;}
	.large-offset-015 {margin-left:15%;}
	.large-offset-020 {margin-left:20%;}

	.large-offset-033 {margin-left:33.333333%;}
	.large-offset-066 {margin-left:66.666666%;}	
	
	.large-display {display:none;}
}


/* ----------------------------------------------------------------------------- *
 *                       Aufbau                                                  *
 * ----------------------------------------------------------------------------- */
 


/* Footer */     
footer {	position:relative; }
.footerfond1:before {width: 0;   height: 0;  border-left: 0 solid transparent;  border-right: 2000px solid transparent;  border-bottom: 300px solid grey; 
					content:" " ; display:block; position:absolute; z-index:1; bottom: 0;}
.footerfond1 {	min-height:300px;    position:relative; bottom: 0;}

.footerfond2:before {width: 0;   height: 0;  border-left: 2000px solid transparent;  border-right: 0 solid transparent;  border-bottom: 300px solid #AA1A17; 
					content:" " ; display:block; position:absolute; z-index:2}
.footerfond2 {	min-height:300px;    position:relative;}

.footertext {  text-align: left;  position: relative;  bottom:0;  left: 0%;  transform: translate(0%, 00%) rotate(-10deg);  color: white; z-index:3; border:thin lime solid; }


/* ----------------------------------------------------------------------------- *
 *                             Bildauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
.logo {	width: 70%;height: auto; text-align:center;}
@media screen and (max-width:600px) {	.logo {	width: 80%;	height: auto; margin-top:1.6rem; margin-bottom:1.6rem;}    }
@media screen and (min-width:600px) and (max-width:1000px) {   .logo { width: 80%; height: auto;}    }
@media screen and (min-width:1000px) and (max-width:1500px) {   .logo { width: 70%; margin-bottom: 3rem;}    }


.img {width:100%; height:auto;}

.putz {background-image: url("../images/Putz.jpg"); background-position: top;
  background-repeat: repeat; background-size: 100%; height:auto;}

.parkett {background-image: url("../images/240_F_94997623_tmbSCtSuUtUU04QcmgwipNFBAD2rZunI.jpg"); background-position: center;
  background-repeat: repeat; background-size: cover; height:100%;}

.designbelag {background-image: url("../images/Designbelag.jpg"); background-position: center;
  background-repeat: no-repeat; background-size: cover; heigth:auto;}

.tapete {background-image: url("../images/Wohnraum.jpg"); background-position: left top;
  background-repeat: no-repeat; background-size: 100%; height:auto; padding-top:5rem;padding-bottom:23rem;}
@media screen and (max-width:600px) {.tapete {background-position: right top; background-size: cover; height:auto;}   }
@media screen and (min-width:600px) and (max-width:710px) { .tapete {background-position: center top; background-size: cover; height:auto;}    }
@media screen and (min-width:710px) and (max-width:1000px) { .tapete {background-position: center top; background-size: cover; height:auto;}    }
@media screen and (min-width:1000px) and (max-width:1500px) {  .tapete {background-position: center top; background-size: cover; height:auto;}    }
@media screen and (min-width:1500px) and (max-width:1715px) {  .tapete {background-position: center top; background-size: cover; height:80%;}    }


/* ----------------------------------------------------------------------------- * 
 *                          Styles für Formulare                                 *
 * ----------------------------------------------------------------------------- */

fieldset {border: 1px solid #FFF;}
legend {color: #FFF;  font-size: 1.375em;  padding: 0 0.5em;}
.formset { margin: 0.5em 0;}
.formset label, .formset input, .formset textarea { display: inline-block;}
.formset label {width: 100%; padding-right: 2%;}
.formset input, .formset textarea {width: 100%;  border: 1px solid #FFF; padding: 0.2em;}
.submit-btn {float: right; border: 1px solid #2E3640; padding: 0.4em; color: #fff; background: #FFF; margin-right: 2.5%;}
input[type=number]:out-of-range {border-color: red;}

/* Positionierung der Required * in em */
em{ left: 98%;}

/* ----------------------------------------------------------------------------- *
 *                              480px / 16px/em = 30em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 30em) {
    .formset label { width: 34%;  text-align: right;  }
    .formset input, .formset textarea { width: 62%;   }
    em{ left: 32.5%;  }
}


/* ----------------------------------------------------------------------------- *
 *                              Akkordeon                          *
 * ----------------------------------------------------------------------------- */
 .accordion {color: #000E2B;	cursor: pointer;	border: none;	text-align: left; outline: none;	font-size: 2rem;	transition: 0.4s;  background-color: #ccc; }
 .active, .accordion:hover {	background-color: #ccc;  }
   .accordion:after {	content: '\002B';	color: #777;	font-weight: bold;	float: right;	margin-left: 5px;  }
    .active:after {	content: "\2212";  }
  .panel {	padding: 10px 10px;	display: none;	background-color: #FFF;	overflow: hidden;  }




/* ----------------------------------------------------------------------------- *
 *                             Teaser              *
 * ----------------------------------------------------------------------------- */


.teaser-start-image {  background-image: url("../images/nachtexpress-wiehl_bg.jpg");  height: 50%;  background-position: center;  background-repeat: no-repeat;  background-size: cover;  position: relative;}

@media screen and (max-width:600px) {	.teaser-start-image {height: 25%; margin-left:-0%}   }
@media screen and (min-width:600px) and (max-width:1000px) { .teaser-start-image { height:25%; margin-left:0%}  }
														
  
.parallax-anlagenbau {background-image: url("../images/anlagenbau.jpg"); height: 25%; background-attachment: fixed; background-position: center; background-repeat: no-repeat;  background-size: cover;} 

@media only screen and (max-device-width: 1366px) {
    .parallax-anlagenbau {background-attachment: scroll;    }
}

/* ----------------------------------------------------------------------------- *
 *                            Tabelle                                      *
 * ----------------------------------------------------------------------------- */

table {    border-collapse: collapse;    border-spacing: 0;    width: 100%;    border: 1px solid #ddd;}
th, td {    text-align: center;    padding: 16px; }
th:first-child, td:first-child {    text-align: left;}
tr:nth-child(even) {    background-color: #f2f2f2}
.fa-check {    color: #AA1A17;}
.fa-remove {    color: silver;}




/* ----------------------------------------------------------------------------- *
 *                            Team                                     *
 * ----------------------------------------------------------------------------- */


.team-column {float: left;	width: 20%;	margin-bottom: 16px;	padding: 0 8px;  }
@media screen and (max-width: 650px) {	.team-column {	  width: 100%;	  display: block;	}
}
  @media screen and (max-width: 650px) {	.team-column {	  width: 100%;	  display: block;	}
  }
  
  .team-card {	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  }
    .team-container-vcard {	padding: 0 16px;  }
    .team-container-vcard::after, .row::after {	content: "";	clear: both;	display: table;  }
    .team-title {	color: grey;  }

  .portrait-container {	float:left; position: relative;	width:20%; }
  @media screen and (min-width:600px) and (max-width:1000px) {	.portrait-container {	  	width:33%;	 	}}
  @media screen and (max-width:600px) {	.portrait-container {	  	width:100%;		}}
  .text-container {	float:left; position: relative;	width:20%; text-align: center;	color: #FFF; }
  @media screen and (min-width:600px) and (max-width:1000px) {	.text-container {	  	width:33%;	 	}}
  @media screen and (max-width:600px) {	.text-container {	  	width:100%;		}}
    .portrait {	opacity: 1;	display: block;	width: 100%;	height: auto;	transition: .5s ease;	backface-visibility: hidden;  }
	.bg {opacity: 1;	display: block;	width: 100%;	height: auto;	transition: .5s ease;	backface-visibility: hidden;}
    .middle {	width:60%; transition: .5s ease;	opacity: 0;	position: absolute;	top: 80%;	left: 50%;	transform: translate(-80%, -50%);	-ms-transform: translate(-80%, -50%);	text-align: center;  }
	.middle-text {color: #FFF; line-height:2.4rem; width:80%; position: absolute;	top: 50%;	left: 50%;	transform: translate(-50%, -50%);	text-align: center;  }
    .portrait-container:hover .image {	opacity: 0.3;  }
    .portrait-container:hover .middle {	opacity: 1;  }
    .text {	background-color: #013B63;	color: white;	font-size: 16px;	padding: 16px 32px;  }
  

  /* ----------------------------------------------------------------------------- *
 *                           Slideshow                                 *
 * ----------------------------------------------------------------------------- */
.mySlides {display: none;}
/* Slideshow container */
.slideshow-container {  position: relative;  margin: auto;}
.active {  background-color: #717171;}
/* Fading animation */
.fade {  -webkit-animation-name: fade;  -webkit-animation-duration: 5s;  animation-name: fade;  animation-duration: 5s;}

@-webkit-keyframes fade {  from {opacity: .2}   to {opacity: 1}}

@keyframes fade {  from {opacity: .2}   to {opacity: 1}}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {  .text {font-size: 11px} }





 /* ----------------------------------------------------------------------------- *
 *                           Transition-Effekt Icon                                *
 * ----------------------------------------------------------------------------- */

@keyframes imgFadeIn {0% {opacity: 0;} 100% {opacity: 1;}}

.bildeinblenden {animation: imgFadeIn 1s;}




/* ----------------------------------------------------------------------------- *
 *                           Timeline                                *
 * ----------------------------------------------------------------------------- */

/* The actual timeline (the vertical ruler) */
.timeline {  position: relative;  max-width: 1200px;  margin: 0 auto;}

.timeline::after {  content: '';  position: absolute;  width: 6px;  background-color: white;
  top: 0;  bottom: 0;  left: 50%;  margin-left: -3px;}

/* Container around content */
.timeline-container {  padding: 10px 50px;  position: relative;  background-color: inherit;  width: 50%;}

/* The circles on the timeline */
.timeline-container::after {  content: '';  position: absolute;  width: 25px;  height: 25px;  right: -17px;
  background-color: white;  border: 4px solid #FF9F55;  top: 15px;  border-radius: 50%;  z-index: 1;}

/* Place the container to the left */
.timeline-left {  left: 0;}

/* Place the container to the right */
.timeline-right {  left: 50%;}

/* Add arrows to the left container (pointing right) */
.timeline-left::before {  content: " ";  height: 0;  position: absolute;  top: 22px;  width: 0;  z-index: 1;
  right: 40px;  border: medium solid white;  border-width: 10px 0 10px 10px;  border-color: transparent transparent transparent white;}

/* Add arrows to the right container (pointing left) */
.timeline-right::before {  content: " ";  height: 0;  position: absolute;  top: 22px;  width: 0;  z-index: 1;  left: 40px;
  border: medium solid white;  border-width: 10px 10px 10px 0;  border-color: transparent white transparent transparent;}

/* Fix the circle for containers on the right side */
.timeline-right::after {  left: -16px;}

/* The actual content */
.content {  padding: 5px 20px;  background-color: white;  position: relative;  border-radius: 6px;}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {  /* Place the timelime to the left */
  .timeline::after {  left: 31px;  }
  
  /* Full-width containers */
  .timeline-container {  width: 100%;  padding-left: 70px;  padding-right: 25px;  }
  
  /* Make sure that all arrows are pointing leftwards */
  .timeline-container::before {  left: 60px;  border: medium solid white;  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;  }

  /* Make sure all circles are at the same spot */
  .timeline-left::after, .timeline-right::after {  left: 15px;  }
  
  /* Make all right containers behave like the left ones */
  .timeline-right {  left: 0px;  }
}