/* 

https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp 

TEXTATTRIBUTE: .text-left , -right, -center, -justfiy, -uppercase

BILDATTRIBUTE: .rounded, rounded-circle, img-thumbnail

FLOAT:			float-left, float-right

ZENTRIERT:		class="mx-auto d-block"

RESPONSIVE IMAGES : class="img-fluid"

FLOAT:					float-left, float-right

margin 1-5				m-5, mit positon : mb-5 z.B. für Bottom
padding 1-5				p-5


SCHATTEN:				"shadow bg-white"

KEIN ABSTAND in .rows	"no-gutters"




Clip-Path-Maker: https://bennettfeely.com/clippy/


*/


.hr-trenner 	{border-bottom: 1px solid #DDD; background-color: #FFF; padding: 0px; margin: 0px;}









.map-container{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}




/* Snippet für Anchor-Links Positions-Korrektur */


.offset {
    height: 10vw;
}

/* START SNIPPET */
section {
    padding-top: 10vw;
    margin-top: -10vw;
}
/* END SNIPPET */















textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(100, 100, 100, 0.9);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(100, 100, 100, 0.9);
  outline: 0 none;
}

.error {color: #f00 !important; font-weight: bold !important;}


/* Individualisierung Rangeslider Hausplanungen-Beispiele 

https://htmlstream.com/preview/front-v2.0.1/documentation/plugins/range-slider.html#how-to-use
http://ionden.com/a/plugins/ion.rangeSlider/skins.html

*/

.irs--big .irs-bar {
  background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%);
  border-top: 1px solid #AAA;
  border-bottom: 1px solid #CCC;
}

.irs--big .irs-from,
.irs--big .irs-to,
.irs--big .irs-single {

  background: linear-gradient(to bottom, #CCC 0%, #DDD 100%);
  color: #333;

}

.irs--big .irs-grid-text {
  color: #333;
}


.irs--big .irs-grid-pol {
  background-color: #333;
}

.irs--big .irs-handle {
  width: 20px;
  height: 20px;
top: 30px;
}

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


.claim {
	position: relative;
	top: 20px;
	background: #28a745;
	color: #FFF;
	font-size: 38px;
	font-weight: bold;
	line-height: 50px;
	padding: 5px;
	border: 5px solid #FFF;
}


@media (max-width: 767px) {.claim {font-size: 18px; line-height: 44px; padding: 2px;}}

@media (max-width: 767px) {.navbar-brand img {width: 75%;}}
@media (max-width: 767px) {.navbar-brand {width: 75%;}}

.inhaltsverzeichnis				{list-style-type: none; font-size: 20px; line-height: 26px; color: #000;}
a.inhaltsverzeichnis:link 		{text-decoration: none; font-size: 20px; line-height: 26px; color: #000; font-weight: 300; color: #333;} 
a.inhaltsverzeichnis:visited 	{text-decoration: none; color: #000;} 
a.inhaltsverzeichnis:active 	{text-decoration: none; color: #000;} 
a.inhaltsverzeichnis:hover 		{text-decoration: none; color: #000;}




.footer-background {
background:url('../bilder/slider/footer-background.jpg');
box-shadow: inset 0 0 0 1000px rgba(227, 3, 14, 0.9);
border-top: 4px solid #FFF;
}








body {background-color: #000; font-family: 'PT Sans', sans-serif;}
body {font-family: 'Roboto Condensed', sans-serif;}

.bg_ci				{background-color: #fcf1b1;}
.bg_claim 			{background-color: #ebe22f;}
.bg_ci_highlight	{background-color: #f9e15b;}
.bg_ci_highlight1	{background-color: #fae581;}
.bg_ci_highlight2	{background-color: #fcb815;}
.bg_ci_highlight3	{background-color: #fdcb08;}

.border_usp		{border: 1px solid #CCC;}


.bg_rot				{background-color: #ed1d25; opacity: 0.9;}

.bg_gruen_tab		{background-color: #bfd630;}


.img-grey			{  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);}


/* Footer */

.bg_footer-top		{background-color: #222222;}
.bg_footer-bottom	{background-color: #111111;}
.footer_lp_0		{border-bottom: 1px solid #666;}
.footer_lp_l		{border-right: 1px solid #666; }
.footer_lp_2		{}
.footer_lp_3		{border-left: 1px solid #666; }

.bg_rot				{background-color: #e3000f; opacity: 1.0;}
.bg_lightgrey		{background-color: #F3F3F3;}
.bg_middlegrey		{background-color: #E3E3E3;}
.bg_darkgrey		{background-color: #333;}


.bg_fff				{background-color: #fff;}
.bg_f5f5f5			{background-color: #f5f5f5;}
.bg_eee				{background-color: #eee;}
.bg_ddd				{background-color: #ddd;}
.bg_333				{background-color: #333;}
.bg_777				{background-color: #777;}
.bg_111				{background-color: #111;}
.bg_000				{background-color: #000;}

.txt_ci				{color: #fcf1b1;}
.txt_ci2			{color: #fdcb08;}
.txt_weiss			{color: rgba(255, 255, 255, 0.9);}
.txt_schwarz		{color: rgba(95, 95, 95, 1.0);}
.txt_gruen			{color: rgba(33, 166, 54, 0.9);}
.txt_999			{color: #999;}
.txt_555			{color: #555;}
.txt_rot			{color: #e3000f;}
.txt_000			{color: #222;}
.txt_fff			{color: #FFF;}

.section 			{margin-top: 200px;}

.outline			{color: #EEE; text-shadow: 0 0 15px black;}

.active				{color: #000;}

.outline			{text-shadow: 0 0 2px #000;}
.uppercase			{text-transform: uppercase;}

.center				{text-align: center;}
.justify			{text-align: justify;}
.links				{text-align: left;}
.rechts				{text-align: right;}

.bold				{font-weight: bold;}
.normal				{font-weight: 400;}

.margin-navbar		{margin-top: 45px;}
.margin-0			{margin: 0px;}
.margin-1			{margin: 1vw;}
.margin-2			{margin: 2vw;}

.margin-top-0		{margin-top: 0vw;}
.margin-top-1vw		{margin-top: 1vw;}
.margin-top-2vw		{margin-top: 2vw;}
.margin-top-3vw		{margin-top: 3vw;}
.margin-top-4vw		{margin-top: 4vw;}

.row-grau			{background-color: #F5F5F5;}
.row-gruen			{background-color: rgba(40,167,69,0.9)}
.row-weiss			{background-color: #FFFFFF;}

.row-border			{border-top: 1px solid #DDD; border-bottom: 1px solid #DDD;}
.row-padding		{padding-top: 2vw; padding-bottom: 2vw;}

.padding-fluid		{padding-left: 14vw; padding-right:14vw;}
@media (max-width: 767px) {.padding-fluid {padding-left: 10vw; padding-right: 10vw;}}



.float_left			{float: left;}

.border-sb-sem		{border-top: 5px solid #F5F5F5; }
.border-1			{border: 1px solid #DDD;}


.tab_quartal 		{width: 100%; background-color: #f9e15b; font-size: 36px; line-height: 40px; padding: 8px; font-weight: bold;}
.tab_datum   		{width: 100%; background-color: #fae581; font-size: 22px; line-height: 26px; padding: 8px; margin-top: 10px;}
.tab_verfuegbar   	{width: 100%; background-color: #fae581; font-size: 18px; line-height: 22px; padding: 8px; }
.tab_margin			{margin-bottom: 26px;}


.video-container	{border: 1px solid #CCC; padding: 3px;}


.padding-0			{padding: 0px;}
.padding-1			{padding: 1vw;}
.padding-2			{padding: 2vw;}
.padding-3			{padding: 3vw;}
.padding-4			{padding: 4vw;}
.padding-5			{padding: 5vw;}
.padding-6			{padding: 6vw;}
.padding-7			{padding: 7vw;}

.padding-all-4		{padding: 4vw;}
.padding-2px		{padding: 2px;}
.padding-5px		{padding: 5px;}

.padding-left1		{padding-left: 1vw;}
.padding-left2		{padding-left: 2vw;}
.padding-left3		{padding-left: 3vw;}
.padding-left4		{padding-left: 4vw;}
.padding-left5		{padding-left: 5vw;}
.padding-left6		{padding-left: 6vw;}
.padding-left7		{padding-left: 7vw;}

.padding-right1		{padding-right: 1vw;}
.padding-right2		{padding-right: 2vw;}
.padding-right3		{padding-right: 3vw;}
.padding-right4		{padding-right: 4vw;}
.padding-right5		{padding-right: 5vw;}
.padding-right6		{padding-right: 6vw;}
.padding-right7		{padding-right: 7vw;}

.padding-top0		{padding-top: 0px;}
.padding-top1		{padding-top: 1vw;}
.padding-top2		{padding-top: 2vw;}
.padding-top3		{padding-top: 3vw;}
.padding-top4		{padding-top: 4vw;}
.padding-top5		{padding-top: 5vw;}
.padding-top6		{padding-top: 6vw;}
.padding-top7		{padding-top: 7vw;}
.padding-top8		{padding-top: 8vw;}
.padding-top9		{padding-top: 9vw;}

.padding-bottom0		{padding-bottom: 0px;}
.padding-bottom1		{padding-bottom: 1vw;}
.padding-bottom2		{padding-bottom: 2vw;}
.padding-bottom3		{padding-bottom: 3vw;}
.padding-bottom4		{padding-bottom: 4vw;}
.padding-bottom5		{padding-bottom: 5vw;}
.padding-bottom6		{padding-bottom: 6vw;}
.padding-bottom7		{padding-bottom: 7vw;}
.padding-bottom8		{padding-bottom: 8vw;}
.padding-bottom9		{padding-bottom: 9vw;}

.margin-top0			{margin-bottom: 0;}
.margin-bottom0			{margin-bottom: 0;}

.margin-bottom1			{margin-bottom: 1vw;}
.margin-bottom2			{margin-bottom: 2vw;}
.margin-bottom3			{margin-bottom: 3vw;}
.margin-bottom4			{margin-bottom: 4vw;}
.margin-bottom5			{margin-bottom: 5vw;}
.margin-bottom6			{margin-bottom: 6vw;}
.margin-bottom7			{margin-bottom: 7vw;}
.margin-bottom8			{margin-bottom: 8vw;}
.margin-bottom9			{margin-bottom: 9vw;}
.margin-feature-box		{margin: 16px;}
.margin-bottom-5px		{margin-bottom: 5px;}

.margin-navbar		{margin-top: 45px;}
.margin-0			{margin: 0px;}
.margin-top1		{margin-top: 1vw;}
.margin-top2		{margin-top: 2vw;}
.margin-top3		{margin-top: 3vw;}
.margin-top4		{margin-top: 4vw;}
.margin-all-10		{margin: 10px;}




.border-header		{border-bottom:4px solid #e3000f;}

.font-9				{font-size: 90px; line-height: 100px;}
.font-8				{font-size: 74px; line-height: 80px;}
.font-7				{font-size: 60px; line-height: 68px;}
.font-6				{font-size: 48px; line-height: 56px;}
.font-5				{font-size: 42px; line-height: 48px;}
.font-4				{font-size: 36px; line-height: 40px;}
.font-3				{font-size: 32px; line-height: 38px;}
.font-2				{font-size: 28px; line-height: 34px;}
.font-15			{font-size: 24px; line-height: 30px;}
.font-1				{font-size: 22px; line-height: 26px;}
.font-p				{font-size: 20px; line-height: 26px;}
.font-header		{font-size: 16px; line-height: 20px;}
.font-small			{font-size: 14px; line-height: 20px;}
.font-pricetab		{font-size: 16px; line-height: 20px;}


.line-9				{line-height: 90px;}
.line-8				{line-height: 72px;}
.line-7				{line-height: 60px;}
.line-6				{line-height: 48px;}
.line-5				{line-height: 40px;}
.line-4				{line-height: 36px;}
.line-3				{line-height: 32px;}
.line-2				{line-height: 28px;}
.line-15			{line-height: 24px;}
.line-1				{line-height: 1px;}
.line-p				{line-height: 18px;}


.hypens				{-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}

.hyphens				{-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
.column2			{column-count: 2; column-gap: 50px;}
@media (max-width: 767px) {.column2 {column-count: 1; column-gap: 50px;}}

.td_usp				{vertical-align: top; padding-right: 15px;}








/*
 * Bootstrap Cookie Alert by Wruczek
 * https://github.com/Wruczek/Bootstrap-Cookie-Alert
 * Released under MIT license
 */
.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #333;
    background-color: rgba(220, 220, 220, 0.95);
	border-top: 2px solid #BBB;
}

.cookiealert.show {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {
color: #FFF; font-weight: bold; text-decoration: none;
}

.cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
}


/* Anfahrt */

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}




/* Auszeichnungen Pinterest-Like */


.pinwand_row {
 -moz-column-width: 14em;
 -webkit-column-width: 14em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 
  
}

.pinwand_item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 

}

.pinwand_well {
 position:relative;
 display: block;
 text-align: center;
 padding-bottom: 1em;
}



/* Chart für Heiz- und Betriebskosten */



.chart {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 300px;
  margin: 0 auto;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%);
  background-size: 100% 50px;
  background-position: left top;
}
.chart li {
  position: relative;
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.chart span {
  margin: 0 1em;
  display: block;
  background: rgba(209, 236, 250, 0.75);
  animation: draw 6s ease-in-out;
}
.chart span:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 5px 1em 0;
  display: block;
  text-align: center;
  content: attr(title);
  word-wrap: break-word;
}

@keyframes draw {
  0% {
    height: 0;
  }
}



















.ebene2 {
position: relative;
width: 100%;
border-bottom: 1px dashed #999999;
}
.ebene2 span.datum {
position: absolute;
bottom: 0;
right: 0;
font-size: .5em;
background-color: #E9E9E9;
color: black;
padding: 2px 7px 0 7px;
}







.big-letter-text {position: absolute; left: 60%; bottom: 0; width: 100%; text-align: center; line-height: 3.3vw; font-size: 13vw; opacity: 0.12;
				  z-index: 2; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-weight: bold; }




















/* Abstand zur Berechnung des Anchor-Links von oben */


#bericht:before { 
  display: block; 
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
}

/* Weiches Scrollen zu Anchor-Links */

html {
  scroll-behavior: smooth;
}

.lightbox {
  position:fixed;
  top:-100%;
  bottom:100%;
  left:0;
  right:0;
  background:rgba(161,4,52,.8);
  z-index:501;
  opacity:0;
}

.lightbox img {
	position:absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  max-width:0%;
  max-height:0%;
}

#lightbox-controls {
  position:fixed;
  height:70px;
  width:70px;
  top:-70px;
  right:0;
  z-index:502;
  background:rgba(0,0,0,.1);
}

#close-lightbox {
  display:block;
  position:absolute;
  overflow:hidden;
  height:50px;
  width:50px;
  text-indent:-5000px;
  right:10px;
  top:10px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

#close-lightbox:before {
	content:'';
  display:block;
  position:absolute;
  height:0px;
  width:3px;
  left:24px;
  top:0;
  background:white;
  border-radius:2px;
  -webkit-transition: .5s .5s ease-in-out;
  -moz-transition: .5s .5s ease-in-out;
  -ms-transition: .5s .5s ease-in-out;
  -o-transition:.5s .5s ease-in-out;
  transition:.5s .5s ease-in-out;
}

#close-lightbox:after {
	content:'';
  display:block;
  position:absolute;
  width:0px;
  height:3px;
  top:24px;
  left:0;
  background:white;
  border-radius:2px;
  -webkit-transition: .5s 1s ease-in-out;
  -moz-transition: .5s 1s ease-in-out;
  -ms-transition: .5s 1s ease-in-out;
  -o-transition:.5s 1s ease-in-out;
  transition:.5s 1s ease-in-out;
}

.lightbox:target {
  top:0%;
  bottom:0%;
  opacity:1;
}

.lightbox:target img {
  max-width:100%;
  max-height:100%;
}

.lightbox:target ~ #lightbox-controls {
  top:0px;
}

.lightbox:target ~ #lightbox-controls #close-lightbox:after {
  width:50px;
}

.lightbox:target ~ #lightbox-controls #close-lightbox:before {
  height:50px;
}

@-webkit-keyframes wiggle {
	0% {
	  -webkit-transform:rotate(2deg);
  }
  20% {-webkit-transform:rotate(-2deg);}
  40% {-webkit-transform:rotate(2deg);}
  60% {-webkit-transform:rotate(-2deg);}
  80% {-webkit-transform:rotate(2deg);}
	100% {-webkit-transform:rotate(-2deg);}
}





/* Pfeile USPs Startseite */

.usp-arrow {position: relative; background: #ffdd00; height: 80px; top: 00px; margin: 1.0vw;}
.usp-arrow:after, .usp-arrow:before {right: 50%; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none;}
.usp-arrow.left:after, .usp-arrow.nachlinks:before {right: 100%;}
.usp-arrow.right:after, .usp-arrow.nachrechts:before {left: 100%;}
.usp-arrow.left:after {border-color: transparent; border-right-color: #ccc; border-width: 40px;}
.usp-arrow.left:before, .usp-arrow.nachrechts:before {border-color: transparent; border-width: 40px;}
.usp-arrow.right:after, .usp-arrow.nachrechts:before { border-left-color: #ffdd00;}

.v2 {background: #fcb815; }
.v2.right:after, .v2.nachrechts:before { border-left-color: #fcb815;}

.usp-arrow-txt1 {font-size: 40px; color: #F00; font-weight: bold; text-align: left; padding-left: 10px; line-height: 80px; float: left; text-transform: uppercase;}

@media only screen and (min-width: 100px) and (max-width: 567px) {	.usp-arrow-txt1	{font-size: 16px;}}
@media only screen and (min-width: 568px) and (max-width: 1100px) {	.usp-arrow-txt1	{font-size: 26px; }}
@media only screen and (min-width: 1101px) and (max-width: 1400px) {	.usp-arrow-txt1	{font-size: 30px;}}

/* Pfeile Baukosten Ausbaustufen */

.ausbaustufen_pfeil_1 {position: relative; background: #ffdd00; height: 80px; top: 00px; margin: 1.0vw;}
.ausbaustufen_pfeil_1:after, .ausbaustufen_pfeil_1:before {right: 50%; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none;}
.ausbaustufen_pfeil_1.left:after, .ausbaustufen_pfeil_1.left:before {right: 100%; top: 20px; left: -40px;}
.ausbaustufen_pfeil_1.right:after, .ausbaustufen_pfeil_1.right:before {left: 100%;}
.ausbaustufen_pfeil_1.left:after {border-color: transparent; border-right-color: #ffdd00; border-width: 40px;}
.ausbaustufen_pfeil_1.left:before, .ausbaustufen_pfeil_1.right:before {border-color: transparent; border-width: 40px;}
.ausbaustufen_pfeil_1.right:after, .ausbaustufen_pfeil_1.right:before { border-left-color: #ffdd00;}

.ausbaustufen_pfeil_2 {position: relative; background: #fdcb08; height: 80px; top: 00px; margin: 1.0vw;}
.ausbaustufen_pfeil_2:after, .ausbaustufen_pfeil_2:before {right: 50%; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none;}
.ausbaustufen_pfeil_2.left:after, .ausbaustufen_pfeil_2.left:before {right: 100%; top: 20px; left: -40px;}
.ausbaustufen_pfeil_2.right:after, .ausbaustufen_pfeil_2.right:before {left: 100%;}
.ausbaustufen_pfeil_2.left:after {border-color: transparent; border-right-color: #fdcb08; border-width: 40px;}
.ausbaustufen_pfeil_2.left:before, .ausbaustufen_pfeil_2.right:before {border-color: transparent; border-width: 40px;}
.ausbaustufen_pfeil_2.right:after, .ausbaustufen_pfeil_2.right:before { border-left-color: #fdcb08;}

.ausbaustufen_pfeil_3 {position: relative; background: #fcb815; height: 80px; top: 00px; margin: 1.0vw;}
.ausbaustufen_pfeil_3:after, .ausbaustufen_pfeil_3:before {right: 50%; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none;}
.ausbaustufen_pfeil_3.left:after, .ausbaustufen_pfeil_3.left:before {right: 100%; top: 20px; left: -40px;}
.ausbaustufen_pfeil_3.right:after, .ausbaustufen_pfeil_3.right:before {left: 100%;}
.ausbaustufen_pfeil_3.left:after {border-color: transparent; border-right-color: #fcb815; border-width: 40px;}
.ausbaustufen_pfeil_3.left:before, .ausbaustufen_pfeil_3.right:before {border-color: transparent; border-width: 40px;}
.ausbaustufen_pfeil_3.right:after, .ausbaustufen_pfeil_3.right:before { border-left-color: #fcb815;}


.ausbaustufen_text_1a {font-size: 32px; color: #000; font-weight: bold; text-align: left; padding-left: 3px; line-height: 80px; float: left; text-transform: uppercase;}
.ausbaustufen_text_1b {font-size: 32px; color: #F00; font-weight: bold; text-align: left; padding-left: 3px; line-height: 80px; float: left; }
.ausbaustufen_text_2a {font-size: 32px; color: #F00; font-weight: bold; text-align: left; padding-left: 3px; line-height: 32px; padding-top: 12px; text-transform: uppercase;}
.ausbaustufen_text_2b {font-size: 12px; color: #000; font-weight: bold; text-align: left; padding-left: 3px; line-height: 16px; margin-top: 0px;  }
.ausbaustufen_text_3a {font-size: 32px; color: #F00; font-weight: bold; text-align: right; padding-left: 3px; line-height: 32px; padding-top: 12px; }
.ausbaustufen_text_3b {font-size: 12px; color: #000; font-weight: bold; text-align: right; padding-left: 3px; line-height: 16px; }

.ausbaustufen_step1		{background-color: #ffdd00;}
.ausbaustufen_step2		{background-color: #fdcb08;}
.ausbaustufen_step3		{background-color: #fcb815;}

@media (max-width: 800px) {
	
.ausbaustufen_text_1a	{font-size: 16px;}
.ausbaustufen_text_1b 	{font-size: 16px;}

.ausbaustufen_text_2a	{font-size: 24px;}
.ausbaustufen_text_2b 	{font-size: 16px;}

.ausbaustufen_text_3a	{font-size: 24px;}
.ausbaustufen_text_3b 	{font-size: 16px;}
}



/* Hausplanungsbeispiele Pfeile */

.feature_haus {position: relative; background: #ffdd00; height: 50px; top: 00px; margin: 1.0vw;}
.feature_haus:after, .feature_haus:before {right: 50%; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none;}
.feature_haus.left:after, .feature_haus.left:before {right: 100%; top: 20px; left: -25px;}
.feature_haus.right:after, .feature_haus.right:before {left: 100%;}
.feature_haus.left:after {border-color: transparent; border-right-color: #ffdd00; border-width: 25px;}
.feature_haus.left:before, .feature_haus.right:before {border-color: transparent; border-width: 25px;}
.feature_haus.right:after, .feature_haus.right:before { border-left-color: #ffdd00;}

.feature_text {font-size: 26px; color: #333; font-weight: bold; text-align: right; padding-right: 10px; line-height: 50px;}






/* Mega-Menü-Link: https://codepen.io/JakubHonisek/pen/xXaYqg */

.megamenu-li 		{position: static;}

.megamenu 			{position: absolute; width: 100%;	left: 0; right: 0; padding: 15px;}

.dropdown-menu 		{border-top: 1px solid #DDD; border-left: 0px; border-right: 0px; border-bottom: 0px; border-radius: 0px; margin-top: 0px; background-color: #FFF;}
.menu-text			{font-size: 16px; padding-left: 4px;}


.dropdown-item				{text-decoration: none; color: #333; font-weight: 700; white-space: nowrap;font-size: 16px; padding-top: 1px; padding-bottom: 1px;}
.dropdown-item-large		{text-decoration: none; color: #333; font-weight: 700; white-space: nowrap;font-size: 20px;}




/* change the color of active or hovered links 
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
    color: #21a636;
} 
*/

.navbar-light .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 1.0) !important;
}

.navbar-light:hover .navbar-nav:hover .nav-link:hover {
    color: rgba(227, 3, 14, 1) !important;  transition: 0.5s;
}

.navbar-light:active .navbar-nav:active .nav-link:active {
    color: rgba(227, 3, 14, 1) !important;
}

.navbar-light:focus .navbar-nav:focus .nav-link:focus {
    color: rgba(227, 3, 14, 1) !important;
}

.navbar-light:link .navbar-nav:link .nav-link:link {
    color: rgba(227, 3, 14, 1)!important;
}

.navbar-light:active:focus .navbar-nav:active:focus .nav-link:active:focus {
    color: rgba(227, 3, 14, 1) !important;
}

.navbar-light:active .navbar-nav:active .nav-link:active {
    color: rgba(227, 3, 14, 1) !important;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,255,255);
} 







.senden-btn	 				{background-color: rgba(227, 3, 14, 0.9); border: 2px solid #111; border-radius: 5px; padding: 6px 15px 6px 15px; color: #FFF; text-decoration: none;}
.senden-btn:link			{background-color: rgba(227, 3, 14, 0.9); border: 2px solid #111; color: #FFF; text-decoration: none;}
.senden-btn:visited			{background-color: rgba(227, 3, 14, 0.9); border: 2px solid #111; color: #FFF; text-decoration: none;}
.senden-btn:active			{background-color: rgba(227, 3, 14, 0.9); border: 2px solid #111; color: #FFF; text-decoration: none;}
.senden-btn:hover 			{background-color: rgba(227, 3, 14, 0.9); border: 2px solid #111; box-shadow: 15px #CCC; border-radius: 5px; color: #FFF; text-decoration: none;}
.senden-btn:active:focus 	{background-color: rgba(227, 3, 14, 0.9); border: 2px solid #111; color: #FFF; text-decoration: none;}
.senden-btn:active			{background-color: rgba(227, 3, 14, 0.9); border: 2px solid #111; color: #FFF; text-decoration: none;}














a.dropdown-item				{display: inline;}

.navbar-nav > li {
  font-size: 18px;
  }
.dropdown-menu {
    font-size: 14px; background-color: rgba(255, 255, 255, 0.95); border-bottom: 1px solid #CCC;}
  }


.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}




.dropdown-item:hover	{background-color: transparent; color: #21a636;}
.dropdown-item			{padding-left: 2px;}






/* Blend-Effekt für Mega-Menü */












/* Anweisungen für Cards, u.a. Menü-Seiten */

.card-body			{background-color: #F7F7F7;}
.stretched-link		{border: 1px solid #F00;}






/* Animation für Mega-Menü */


.dropdown .dropdown-menu{
    -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) alternate both;
            animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) alternate both;
}
@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-10deg);
            transform: rotateX(-10deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-10deg);
            transform: rotateX(-10deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
























/* Box für include-Banner */

.banner-box			{border-left: 1px solid #EEE; border-right: 1px solid #EEE; border-bottom: 1px solid #EEE; border-top: 5px solid #28a745;
 }



/* progressbar für Energieeffizienz */

.progress-effizienz {background-image: linear-gradient(to left, red, yellow, green);}

.progress			{height: 50px; font-size: 16px; color: #333; background-color: #F5F5F5; border-radius: 0px 0px 0px 0px; margin-bottom: 8px;}
.progress1			{background-image: linear-gradient(to right, #ff0100 99%, #ff0100); color: #EEE; font-size: 11px; }
.progress2			{background-image: linear-gradient(to right, #ff1900 99%, #ff1900); color: #EEE; font-size: 11px; }
.progress3			{background-image: linear-gradient(to right, #ff9100 99%, #ff9100); color: #EEE; font-size: 11px; }
.progress4			{background-image: linear-gradient(to right, #fefe00 99%, #fefe00); color: #777; font-size: 11px; }
.progress5			{background-image: linear-gradient(to right, #b7db00 99%, #b7db00); color: #666; font-size: 11px; }
.progress6			{background-image: linear-gradient(to right, #77bb00 99%, #77bb00); font-size: 11px; }
.progress7			{background-image: linear-gradient(to right, #4fa700 99%, #4fa700); font-size: 11px; }
.progress8			{background-image: linear-gradient(to right, #038100 99%, #038100); font-size: 11px; }

.progress-meter {min-height: 30px;border-bottom: 2px solid rgb(160, 160, 160); margin-bottom: 10px; background-image: linear-gradient(to left, red, yellow, green);}

.progress-meter > .meter {position: relative;float: left;min-height: 15px;	border-width: 0px;	border-style: solid;	border-color: rgb(160, 160, 160);}

.progress-meter > .meter-left {border-left-width: 2px; width: 10%;}

.progress-meter > .meter-right {float: right;border-right-width: 2px;}

.progress-meter > .meter-right:last-child {border-left-width: 2px;}

.progress-meter > .meter > .meter-text {position: absolute;	display: inline-block;	bottom: 20px;width: 100%;font-weight: 400;	font-size: 0.85em;
										color: rgb(120, 120, 120);	text-align: left;}

.progress-meter > .meter.meter-right > .meter-text {text-align: right;}







li.technische-daten			{list-style-type: square; color: #28a745; font-size: 26px;}


.btn-ci							{background-color: #FFF; border: 1px solid #CCC;}
.btn-ci:hover					{background-color: #F5F5F5; border: 1px solid #CCC;}


.pfeil-bsh		{height: 100%; transform: skew(-10deg); margin-left: -6%; border: 100% solid #FFF;}
.pfeil-txt		{line-height: 90px; font-size: 3vw; padding-right: 2vw;} 


.row-flex {
  display: flex;
  flex-wrap: wrap;
}


/* Anweisungen für BSH-Standard-Submit-Button */

.bsh-btn	 			{background-color: rgba(33, 166, 54, 0.9); border: 2px solid #AAA; border-radius: 5px; padding: 6px 15px 6px 15px; color: #FFF; text-decoration: none;}
.bsh-btn:link			{background-color: rgba(33, 166, 54, 0.9); border: 2px solid #AAA; color: #FFF; text-decoration: none;}
.bsh-btn:visited		{background-color: rgba(33, 166, 54, 0.9); border: 2px solid #AAA; color: #FFF; text-decoration: none;}
.bsh-btn:active			{background-color: rgba(33, 166, 54, 0.9); border: 2px solid #AAA; color: #FFF; text-decoration: none;}
.bsh-btn:hover 			{background-color: rgba(33, 166, 54, 1.0); border: 2px solid #AAA; box-shadow: 15px #CCC; border-radius: 5px; color: #FFF; text-decoration: none;}
.bsh-btn:active:focus 	{background-color: rgba(33, 166, 54, 1.0); border: 2px solid #AAA; color: #FFF; text-decoration: none;}
.bsh-btn:active			{background-color: rgba(33, 166, 54, 0.9); border: 2px solid #AAA; color: #FFF; text-decoration: none;}





.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}



/* Hovereffekt für Gallery-Teaser auf Startseite */


.gallery_hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #000;
  cursor: pointer;
}

.gallery_hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding-top: 9vw;
  background-color: rgba(0, 0, 0, 0.1);
}

.gallery_hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

}

.gallery_hovereffect:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transform: scaleY(1.1);
  transform: scale(1.05);
}

.gallery_hovereffect h4 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 3vw;
  font-weight: bold;
  overflow: hidden;
  padding: 0;
  background-color: transparent;}
}

.gallery_hovereffect h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}

.gallery_hovereffect:hover h2:after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.gallery_hovereffect a, .gallery_hovereffect p {
  color: #FFF;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
  font-size: 24px;
  text-decoration: none;


}

.gallery_hovereffect:hover a, .gallery_hovereffect:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

























/* Zweierblock mit schrägem Balken / Pfeil analog Broschüre */

.block-schraeg1 {height: 200px; background: #fcf1b1; position: relative; padding: 0px;margin: 0px;}
.block-schraeg1:before { width: 0; content: ''; position: absolute; bottom: 0; 	right: 0; 	border-bottom: 200px solid #f9e15b; border-left: 40px solid #fcf1b1; }

.block-schraeg2 {height: 200px; background: #f9e15b; position: relative; padding: 0px;margin: 0px;}
.block-schraeg2:before { width: 0; content: ''; position: absolute; bottom: 0; 	right: 0; 	border-bottom: 200px solid #f9e15b; border-left: 40px solid #fcf1b1; }

@media (max-width: 767px) {
.block-schraeg1:before { border-left: 40px solid #fcf1b1; border-bottom: 200px solid #FFF;}
.block-schraeg2:before { border-left: 40px solid #f9e15b; border-bottom: 200px solid #FFF;}	
}

@media (min-width: 768px) {
.block-schraeg2:before { border-left: 40px solid #f9e15b; border-bottom: 200px solid #f9e15b;}	
}


/* Toggle-Switch  */


.custom-control-label::before {background-color: #ed1d25; border: #ed1d25 solid 1px; box-shadow: 0px;}
.custom-switch .custom-control-label::after {background-color: #FFF; border: #EEE solid 1px; box-shadow: 0px;}
.custom-control-input:checked~.custom-control-label::before {background-color: #28a745; border: #28a745 solid 1px; box-shadow: 0px;}




/* Animation div drehen */

.rotate360 { animation: spin 10s linear infinite;}
@keyframes spin{100%{  transform: rotate(360deg)}}


/* Animation div Zoom */

.zoom-in-out { animation: zoomy 5s linear infinite;}
@keyframes zoomy{0% { transform:rotate(0) scale(1) }
0% { transform:rotate(0) scale(1) }
25% { transform:rotate(0) scale(1.1) }
50% { transform:rotate(0) scale(1.3) }
75% { transform:rotate(0) scale(1.1) }
100% { transform:rotate(0) scale(1) }}


/* Animation 3er Block */

.animation-step1 
{ animation: step1 8s linear infinite;}
@keyframes step1{0% { transform: scale(1) }
0% { transform:scale(1) }
10% { transform:scale(1) }
20% { transform:scale(1.07)}
30% { transform:scale(1)}
40% { transform:scale(1) }
50% { transform:scale(1) }
60% { transform:scale(1) }
70% { transform:scale(1) }
80% { transform:scale(1) }
90% { transform:scale(1) }
100% { transform:scale(1) }
}

.animation-step2 
{ animation: step2 8s linear infinite;}
@keyframes step2{0% { transform:scale(1) }
0% { transform:scale(1) }
10% { transform:scale(1) }
20% { transform:scale(1) }
30% { transform:scale(1) }
40% { transform:scale(1.) }
50% { transform:scale(1.07) }
60% { transform:scale(1) }
70% { transform:scale(1) }
80% { transform:scale(1) }
90% { transform:scale(1) }
100% { transform:scale(1) }
}

.animation-step3 
{ animation: step3 8s linear infinite;}
@keyframes step3{0% { transform:scale(1);}
0% { transform:scale(1);}
10% { transform:scale(1) }
20% { transform:scale(1)}
30% { transform:scale(1) }
40% { transform:scale(1)}
50% { transform:scale(1)}
60% { transform:scale(1)}
70% { transform:scale(1) }
80% { transform:scale(1.07)}
90% { transform:scale(1) }
100% { transform:scale(1)}
}






/* Zweierblock mit schräger Anbindung */

.test1 {
        background-color: orange;
        color: white;
        margin-bottom: 50px;
        padding: 15px;
        position: relative;
        text-align: center;
        text-decoration: none;
    }

    .test1:after {
        background-color: inherit;
        clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        content: '';
        height: 50px;
        left: 0;
        position: absolute;
        right: 0;
        top: 100%;
    }





/* Anweisungen für Image Zoomer */

.image_zoom_in 					{-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; 
								 transition: all 0.5s ease-in-out; width: 100%; -ms-transform: scale(1.00); 
								 -moz-transform: scale(1.00); -webkit-transform: scale(1.00);  -o-transform: scale(1.00);  
								 transform: scale(1.00);}

.image_zoom_in:hover,  
.image_zoom_in:active,   
.image_zoom_in:focus 			{/**adjust scale to desired size, add browser prefixes**/ -ms-transform: scale(1.10); 
								 -moz-transform: scale(1.10); -webkit-transform: scale(1.10);  -o-transform: scale(1.10);  
								 transform: scale(1.10); position:relative; z-index:100;}	



/* Anweisungen für Image Zoomer */

.image_border					{border: 1px solid #BBB; padding: 2px;}
.img_border					{border: 1px solid #BBB; padding: 2px;}
.img-border					{border: 1px solid #BBB; padding: 2px;}
.img-padding				{padding: 3px;}
.img-shadow					{/* * box-shadow: versatzt_nach_RECHTS versatzt_nach_UNTEN Härte Farbe; */
							 box-shadow: 5px 5px 5px #BBB;}



/* Anweisungen für USPs bei Hausbeispielen */


.usp_gelb-weiss					 			{position: relative;}
.usp_gelb-weiss img 						{display: block; width: 100%; height: auto; border: 1px solid #BBB; padding: 2px; margin: 0vw; 
											text-align: center; }
.usp_gelb-weiss span 						{position: absolute; height: 98%; bottom: 50%; left: 1%; width: 98%; color: #FFF; font-size: 2.0vw;
											text-align: center; height: 2.5vw; line-height: 2.5vw; font-weight: 400; background: transparent; 
											/* Fallback IE 6-8 */ background-color: rgba(255, 255, 255, 0.0);}
.usp_gelb-weiss:hover 						{background: -webkit-filter: brightness(1.05); filter: brightness(1.05);}
.usp_gelb-weiss								{background: -webkit-filter: brightness(0.95); filter: brightness(0.95);}

.usp_gruen-weiss					 		{position: relative;}
.usp_gruen-weiss img 						{display: block; width: 100%; height: auto; border: 1px solid #BBB; padding: 2px; margin: 0vw; 
											text-align: center;}
.usp_gruen-weiss span 						{position: absolute; height: 98%; bottom: 50%; left: 1%; width: 98%; color: #FFF; font-size: 2.0vw;
											text-align: center; height: 2.5vw; line-height: 2.5vw; font-weight: 400; background: transparent; 
											/* Fallback IE 6-8 */ background-color: rgba(255, 255, 255, 0.0);}
.usp_gruen-weiss:hover 						{background: -webkit-filter: brightness(1.05); filter: brightness(1.05);}


.usp_rot-weiss						 		{position: relative;}
.usp_rot-weiss img 							{display: block; width: 100%; height: auto; border: 1px solid #BBB; padding: 2px; margin: 0vw; 
											text-align: center;}
.usp_rot-weiss span 						{position: absolute; height: 98%; bottom: 50%; left: 1%; width: 98%; color: #FFF; font-size: 2.0vw;
											text-align: center; height: 2.5vw; line-height: 2.5vw; font-weight: 400; background: transparent; 
											/* Fallback IE 6-8 */ background-color: rgba(255, 255, 255, 0.0);}
.usp_rot-weiss:hover 						{background: -webkit-filter: brightness(1.05); filter: brightness(1.05);}



/* Anweisungen für alle Formularfelder */

.help-block 	{padding-left: 12px; font-size: 14px; color: #AAA;}





/* Anweisungen für Formularanpassungen */

.switch2 label input[type=checkbox]:checked+.lever:after {
            background-color: red;
        }












/* Anweisungen für Content-Link */

.link-rot				{text-decoration: none; color: rgba(227, 3, 14, 0.9); font-weight: 700; white-space: nowrap;}
a.link-rot:link 		{text-decoration: none; color: rgba(227, 3, 14, 0.9); font-weight: 700;} 
a.link-rot:visited 		{text-decoration: none; color: rgba(227, 3, 14, 0.9);} 
a.link-rot:active 		{text-decoration: none; color: rgba(227, 3, 14, 0.9);} 
a.link-rot:hover 		{text-decoration: none; color: rgba(227, 3, 14, 0.7);}

.link-schwarz				{text-decoration: none; color: rgba(0, 0, 0, 0.9); font-weight: 700; white-space: nowrap;}
a.link-schwarz:link 		{text-decoration: none; color: rgba(0, 0, 0, 0.9); font-weight: 700;} 
a.link-schwarz:visited 		{text-decoration: none; color: rgba(0, 0, 0, 0.9);} 
a.link-schwarz:active 		{text-decoration: none; color: rgba(0, 0, 0, 0.9);} 
a.link-schwarz:hover 		{text-decoration: none; color: rgba(0, 0, 0, 0.7);}





.link-telefon				{text-decoration: none; white-space: nowrap; color: #333;}
a.link-telefon:link 		{text-decoration: none; color: #555;} 
a.link-telefon:visited 		{text-decoration: none; color: #333;} 
a.link-telefon:active 		{text-decoration: none; color: #333;} 
a.link-telefon:hover 		{text-decoration: none; color: #333;}


/* Formatierungen für Footer /-Links) */

.ol-link-footer 			{ list-style-type: none;  margin: 0;  padding: 0;  }
.link-footer				{text-decoration: none; white-space: nowrap; color: #FFF; font-weight: 400; }
a.link-footer:link 			{text-decoration: none; color: #FFF; font-weight: 400;} 
a.link-footer:visited 		{text-decoration: none; color: #FFF; font-weight: 400;} 
a.link-footer:active 		{text-decoration: none; color: #FFF; font-weight: 400;} 
a.link-footer:hover 		{text-decoration: none; color: #EEE; font-weight: 400;}


.link-modal					{text-decoration: none; white-space: nowrap; color: #FFF; font-weight: 400; }
a.link-modal:link 			{text-decoration: none; color: #FFF; font-weight: 400;} 
a.link-modal:visited 		{text-decoration: none; color: #FFF; font-weight: 400;} 
a.link-modal:active 		{text-decoration: none; color: #FFF; font-weight: 400;} 
a.link-modal:hover 		{text-decoration: none; color: #EEE; font-weight: 400;}



/* Service-Box für oberen Footer */

.service-box				{border: 1px solid #666; border-radius:5px; padding: 5px; text-align: center; line-height: 60px;}



/* Anweisungen für Objekt-Fader-Animation */

@keyframes flickerAnimation {

  25%  { opacity:0.5;}
  50%  { opacity:1;}
  75%  { opacity:0.5;}
  100% { opacity:1;}
}
@-o-keyframes flickerAnimation{

  25%  { opacity:0.5;}
  50%  { opacity:1;}
  75%  { opacity:0.5;}
  100% { opacity:1;}
}
@-moz-keyframes flickerAnimation{

  25%  { opacity:0.5;}
  50%  { opacity:1;}
  75%  { opacity:0.5;}
  100% { opacity:1;}
}
@-webkit-keyframes flickerAnimation{

  25%  { opacity:0.5;}
  50%  { opacity:1;}
  75%  { opacity:0.5;}
  100% { opacity:1;}
}
.object-fader {
   -webkit-animation: flickerAnimation 4s infinite;
   -moz-animation: flickerAnimation 4s infinite;
   -o-animation: flickerAnimation 4s infinite;
    animation: flickerAnimation 4s infinite;
}

.object-fader-size {font-size: 8vw;padding-bottom: 5vw;}

@media (max-width: 767px) {.object-fader-size {font-size: 17vw; padding-bottom: 7vw;}}




/* Bild mit Textlayer Centered Bottom */

.piclayer		 				{position: relative;}

.piclayer img 					{display: block; width: 100%; padding: 0px;}

.piclayer span 					{position: absolute; bottom: 00%; left: 0%; width: 100%; color: #EEE; font-size: 1.5vw;
								text-align: center; height: 5vw; line-height: 2.0vw; padding-left: 0.5vw;
								background: transparent; /* Fallback IE 6-8 */ 
								padding-right: 0.5vw; padding-top: 0.3vw; background-color: rgba(0, 0, 0, 0.6);}
.piclayer		 				{font-size: 1.0vw; }	


.piclayer_klein		 			{position: relative;}

.piclayer_klein img 			{display: block; width: 100%; padding: 0px;}

.piclayer_klein span 			{position: absolute; bottom: 0%; left: 0%; width: 100%; color: #EEE; font-size: 28px;
								text-align: center; height: 60px; line-height: 60px; padding-left: 3px;
								background: transparent; /* Fallback IE 6-8 */ 
								padding-right: 3px; padding-top: 3px; background-color: rgba(0, 0, 0, 0.4);}
.piclayer_klein		 			{font-size: 28px; }	



@media screen and (max-width: 799px){
								.piclayer_klein span {height: 60px; font-size: 28px; text-align: left; line-height: 60px; font-weight: normal; text-align: center;}
								}





/* Anweisungen für Breadcrumb */


.link-breadcrumb				{text-decoration: none; color: #333;}
a.link-breadcrumb:link 			{text-decoration: none; color: #333;} 
a.link-breadcrumb:visited 		{text-decoration: none; color: #333;} 
a.link-breadcrumb:active 		{text-decoration: none; color: #21a636;} 
a.link-breadcrumb:hover 		{text-decoration: none; color: #21a636;}
a.link-breadcrumb::before 		{content: '';}

.breadcrumb-dot .breadcrumb-item+.breadcrumb-item::before {content: "›"; color: #333;}

.link-breadcrumb-active					{text-decoration: none; color: #28a745;}
a.link-breadcrumb-active:link 			{text-decoration: none; color: #28a745;} 
a.link-breadcrumb-active:visited 		{text-decoration: none; color: #28a745;} 
a.link-breadcrumb-active:active 		{text-decoration: none; color: #28a745;} 
a.link-breadcrumb-active:hover 			{text-decoration: none; color: #28a745;}


.breadcrumb {padding: 0px; margin: 0xp; padding-top: 12px;}

@-webkit-keyframes flash {
0%, 100%, 50% {
opacity: 1;
}
25%, 75%{
opacity: 0;
}
}
@keyframes flash {
0%, 100%, 50% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
}





/* Anweisungen für Carousel */

.layerbox {position: relative; margin: 0 auto;}

.layerbox .layertext {
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 100%; /* Full width */
  padding: 20px; /* Some padding */
}

.brighter:link 		{background: -webkit-filter: brightness(0.90); filter: brightness(0.90); transition: all 0.5s ease;}
.brighter:hover 		{background: -webkit-filter: brightness(1.10); filter: brightness(1.10); transition: all 0.5s ease;}

/* Anweisungen für Carousel 

.carousel-caption 	{position: relative;  left: 0%;  right: 0%;  bottom: 0px;  z-index: 10;  padding-top: 0px;  padding-bottom: 0px;  color: #000; 
					text-shadow: none;}

.carousel 			{position: relative;}

.controllers 		{position: absolute; top: 0px;}

.carousel-control.left, .carousel-control.right {background-image: none;}

*/

.carousel-caption				{width: 50%; padding-left: 1%; height: 100%; left: 50%; bottom: 0%; background: rgba(0, 0, 0, 0.7); margin: 0px;
								display: flex;  align-items: center;  justify-content: left;}

.carousel-flex					{ }

 

.carousel-indicators			{padding-bottom: 50px;}
.carousel-indicators-off		{display: none;}

.carousel-textwindow-head  		{color: #EEE; font-size: 66px; line-height: 70px;}
.carousel-textwindow-sub		{color: #EEE; font-size: 33px; line-height: 45px;}
.carousel-textwindow-content	{color: #EEE; font-size: 22px; line-height: 28px;}

.carousel-item {
    transition: transform 1.5s ease-in-out;
}



/* Carousel-Fade-Version anpassen */

.carousel.carousel-fade .carousel-item {
display: block; opacity: 0; transition: opacity ease-out 1.7s; left: 0; top: 0; position: absolute;}

.carousel.carousel-fade .carousel-item.active {
opacity: 1 !important;}

.carousel.carousel-fade .carousel-item:first-child {
top: auto; position: relative; transition: opacity ease-out 1.7s;}

.carousel.carousel-fade .carousel-item:second-child {
top: auto; position: relative; transition: opacity ease-out 1.7s;}

.carousel img {
opacity: 1.0; filter: alpha(opacity=100);}





/* FAQ-Style */

/* 	https://codepen.io/moso/pen/vKGxMx */



.faq-nav {
  flex-direction: column;
  margin: 0 0 32px;
  border-radius: 2px;
  border: 1px solid #ddd;
  box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
}
.faq-nav .nav-link {
  position: relative;
  display: block;
  margin: 0;
  padding: 13px 16px;
  background-color: #fff;
  border: 0;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  color: #616161;
  transition: background-color .2s ease;
}
.faq-nav .nav-link:hover {
  background-color: #f6f6f6;
}
.faq-nav .nav-link.active {
  background-color: #f6f6f6;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.87);
}
.faq-nav .nav-link:last-of-type {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom: 0;
}
.faq-nav .nav-link i.mdi {
  margin-right: 5px;
  font-size: 18px;
  position: relative;
}

.tab-content {
  box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
}
.tab-content .card {
  border-radius: 0;
}
.tab-content .card-header {
  padding: 15px 16px;
  border-radius: 0;
  background-color: #f6f6f6;
}
.tab-content .card-header h5 {
  margin: 0;
}
.tab-content .card-header h5 button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.87);
  text-align: left;
  white-space: normal;
}
.tab-content .card-header h5 button:hover, .tab-content .card-header h5 button:focus, .tab-content .card-header h5 button:active, .tab-content .card-header h5 button:hover:active {
  text-decoration: none;

}
.tab-content .card-body p {
  color: #616161;

}
.tab-content .card-body p:last-of-type {
  margin: 0;
}

.accordion > .card:not(:first-child) {
  border-top: 1px solid #dfdfdf;
}

.collapse.show .card-body {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  background-color: #FFF;
}


































/* Anweisungen für responsive Bubble */









.speech {
  position: relative;
  font-size: 18px;
  background: #f9e15b;
  color: #333;
  border-radius: 5px;
  padding: 30px;
  max-width: 100%;
}

.bottom:after {
  /* [THESE WILL CREATE THE TRIANGLE] */
  content: '';
  border: 20px solid transparent;
  border-top-color: #a53d38;
  border-bottom: 0;
  /* [THESE WILL POSITION THE TRIANGLE] */
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -20px;
}

.top:after {
  content: '';
  border: 20px solid transparent;
  border-bottom-color: #a53d38;
  border-top: 0;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -20px;
}

.left:after {
  content: '';
  border: 20px solid transparent;
  border-right-color: #f9e15b;
  border-left: 0;
  position: absolute;
  left: -20px;
  top: 45%;
  margin-top: -20px;
}

.right:after {
  content: '';
  border: 20px solid transparent;
  border-left-color: #a53d38;
  border-right: 0;
  position: absolute;
  right: -20px;
  top: 50%;
  margin-top: -20px;
}

.half:after {
  content: '';
  border: 20px solid transparent;
  border-right: 20px solid #a53d38;
  border-top: 20px solid #a53d38;
  position: absolute;
  bottom: -20px;
  right: 80%;
} 



.test-dotted					{border-top: 2px dotted #CCC; border-bottom: 2px dotted #CCC;}




/* Anweisungen für Parallax-Effekt */


.parallax-bauherrenportal			{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/bauherrenportal-2018.jpg);}

.parallax-buch		 			{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/freiheit-und-lebensqualitaet.jpg);}

.parallax-sonnenhimmel		 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/sonnenhimmel.jpg);}

.parallax-heiz-und-betriebsk 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/solar-und-windkraft.jpg);}

.parallax-bio-passivhaus	 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/informationszentrum.jpg);}
								
.parallax-energieerzeugung	 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/solar-mover-frontal.jpg);}
 
.parallax-niedrigenergiehaus 	{background: url(../bilder/teaser-fullsize/sonnenpark-st-alban.jpg);}
	
.parallax-technische-daten	 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/technische-daten.jpg);}

.parallax-haus-im-haus		 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/haus8-und-9-musterhauspark.jpg);}

.parallax-hausbeispiele		 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/hausbeispiele.jpg);}

.parallax-sonnenpark1		 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/sonnenpark-st-alban.jpg);}
								
.parallax-sonnenpark2		 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/sonnenpark-ostansicht.jpg);}								
								
.parallax-windrad			 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/solar-und-windkraft.jpg);}								

.parallax-solarmover		 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/musterhauspark-pv-solar-mover.jpg);}	

.parallax-energieeffizienz	 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/energieeffizienz.jpg); background-size: contain;}	


.parallax-selbstbauseminare	 	{background: linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								-webkit-linear-gradient(-300deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
								url(../bilder/teaser-fullsize/selbstbauseminar.jpg); background-size: contain;}	





.parallax {min-height: 350px;background-attachment: fixed;background-size: cover;background-position: 50% 50%; padding-top: 3vw; 
padding-bottom: 6vw; font-weight: bold;}

.parallax p {font-size: 40px;color:#f5f5f5;text-align: center;line-height: 60px;}
.parallax h1 {color: rgba(255, 255, 255, 0.9);font-size: 110px;text-align: center;padding-top: 60px;line-height: 100px; font-weight: bold;}








.jumbotron{margin-bottom: 0;}






.bg-image {
  /* The image used */
  background-image: url("photographer.jpg");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}





/* Anweisungen für Back-to-Top */

.back-to-top {cursor: pointer; position: fixed; bottom: 20px; right: 20px; display:none; font-size: 36px; color: #CCC;
				background-color: transparent; border: 1px solid #CCC;}


a.back-to-top:link 			{background-color: transparent; border: 0px solid #FFF;} 
a.back-to-top:visited 		{background-color: transparent; border: 0px solid #FFF;} 
a.back-to-top:active 		{background-color: transparent; border: 0px solid #FFF;} 
a.back-to-top:hover 		{background-color: transparent; color: #222; border: 0px solid #FFF;}




/* Anweisungen für Side-Navigation (Icon-Bar linke Seite) */

@media (max-width: 767px) {
	
	a.ib_anruf:link {padding: 0px;}
	a.ib_probewohnen:link {padding: 0px;}
	a.ib_infomaterial:link {padding: 0px;}
	a.ib_kontaktformular:link {padding: 0px;}
	

	/* display: none !important;}*/ }

.icon-bar-social {z-index: 99999; position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}

.icon-bar-social a { display: block; text-align: center; padding: 10px; transition: all 0.3s ease; font-size: 28px;}
.icon-bar-social a:hover {background-color: #333; color: #FFF;}

.icon-bar-bsh a { display: block; text-align: center; padding: 10px; transition: all 0.3s ease; font-size: 28px;}
.icon-bar-bsh a:hover {background-color: #333; color: #FFF;}

.ib_infomaterial 		{background: #f9e15b;color: #FFF; opacity: 0.9; border-bottom: 2px solid #FFF;}
.ib_kontaktformular		{background: #ed1d25;color: #FFF; opacity: 0.9; border-bottom: 2px solid #FFF;}
.ib_probewohnen 			{background: #21a636; color: #FFF; opacity: 0.9; border-bottom: 2px solid #FFF;}
.ib_anruf 				{background: #84c2f8; color: #FFF;opacity: 0.9;}





/* Anweisung für Timeline */


.main-timeline{
    position: relative;
    padding: 40px 0;
}
.main-timeline:before{
    content: '';
    background-color: #fcb815;
    height: 100%;
    width: 6px;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    top: 0;
}
.main-timeline:after{
    content: '';
    display: block;
    clear: both;
}
.main-timeline .timeline{
    color: #333;
    width: 50.1%;
    float: left;
    position: relative;
}
.main-timeline .timeline:before,
.main-timeline .timeline:after{
    content: '';
    background-color: #fcb815;
    height: 2px;
    width: 4vw;
    position: absolute;
    right: 42px;
    top: 34px;
}
.main-timeline .timeline:after{
    height: 10px;
    width: 10px;
    border-radius: 50%;
    top: 30px;
    right: 120px;
}
.main-timeline .timeline-content{
    color: #333;
    padding: 10px 150px 0 0;
    display: block;
    position: relative;
}
.main-timeline .timeline-content:hover{
    color: #333;
    text-decoration: none;
}
.main-timeline .timeline-year{
    background-color: #fcb815;
	color: #FFF;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    line-height: 70px;
    height: 70px;
    width: 70px;
    box-shadow: 0 0 0px #000 inset,0 0 0 10px #fff;
    border-radius: 50%;
    position: absolute;
    right: -35px;
    top: 0;
}
.main-timeline .title{
    font-size: 25px;
    font-weight: 600;
    margin: 0 0 5px 0;
}
.main-timeline .title i{
    font-size: 35px;
    margin-top: 5px;
    margin-left: 5px;
}
.main-timeline .description{
    font-size: 15px;
    letter-spacing: 1px;
}
.main-timeline .timeline:nth-child(even){ float: right; }
.main-timeline .timeline:nth-child(even):before{
    right: auto;
    left: 42px;

}
.main-timeline .timeline:nth-child(even):after{
    right: auto;
    left: 120px;

}
.main-timeline .timeline:nth-child(even) .timeline-content{ padding: 10px 0 0 150px; }
.main-timeline .timeline:nth-child(even) .timeline-year{
    right: auto;
    left: -32px;

}
@media only screen and (max-width:990px){
    .main-timeline .timeline:before{ display: none; }
    .main-timeline .timeline:after{ display: none;  }
    .main-timeline .timeline-content{  }
    .main-timeline .timeline:nth-child(even):after{ display: none;  }
    .main-timeline .timeline:nth-child(even) .timeline-content{ display: none; }
}
@media only screen and (max-width:767px){
    .main-timeline:before{
        transform: translateX(0);
        left: 15px;
    }
    .main-timeline .timeline{
        width: 100%;
        margin-bottom: 30px;
    }
    .main-timeline .timeline:before,
    .main-timeline .timeline:nth-child(even):before{
        left: 80px;

    }
    .main-timeline .timeline:after,
    .main-timeline .timeline:nth-child(even):after{
        left: 120px;


    }
    .main-timeline .timeline-year,
    .main-timeline .timeline:nth-child(even) .timeline-year{
        left: 0;
    }
    .main-timeline .timeline-content{ padding: 10px 0 0 80px; }
    .main-timeline .title{ font-size: 20px; }
    .main-timeline .title i{ font-size: 25px; }
	
}