.nullpadding { padding: 0px; }

.row-flex, .row-flex > div[class*='col-'] { display: -webkit-flex; /* für Safari */
											display: -ms-flexbox; /* IE 10 */
											display: flex; /* alle anderen */
											-webkit-flex-direction: row; /* Standard */ 
											flex-direction: row; /* Standard */ 
											-webkit-flex-wrap: wrap; 
											flex-wrap: wrap; 
											align-items: stretch; }

/* Farbverhalten CONTAINER und COLS etc. */
.coloring { background-color: #FFFFFF; }
.coloring2 { background-color: #96c11f; }
.coloring3 { background-color: #d4007f; }
.coloring4 { background-color: #F3F3F3; }


/* GRID 5er BOXEN Modell */
.col-xs-15 { width: 100%; float: left; position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }

/* Breadcrump */
.breadcrumb { padding: 8px 0px; margin-bottom: 0px; list-style: none; background-color: #ffffff; border-radius: 0px; }
.breadcrumb > li + li:before { /* Trenner */
  padding: 0 5px;
  color: #CCCCCC;
  content: "/\00a0";
}
.breadcrumb > .active { color: #96c11f; text-decoration: none; } /* Linkfarbe aktives Breadcrump */

/* ABSTAND DER BOXEN ZUEINANDER */
.abstand { margin-bottom: 30px; }

/* BLENDEFFEKT BEI CAROUSEL */
.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 20;
}
/* BLENDEFFEKT BEI CAROUSEL */

/* MOGLICHES BOXMODELL */
.box { width: 100%; background-color: #FFFFFF; padding: 15px; border: 1px solid #cccccc; }
.box:hover { background-color: #f6f6f6; border: 1px solid #cccccc; }



/* Extra-kleine Geräte (Smartphones, weniger als 768px (col-xs-)) */
/* Kein Media-Query, weil dies der Standard in Bootstrap ist */
.glyph { font-size: 64px; text-align: center; line-height: 64px; color: #5b5b5d; }

.zeigen { width: 40%; display: block; float: right; text-align: right; margin-top: 10px; }
#myCarousel { display: none; }

.balken { display: none; }
.header { display: none; }

.text-window { text-align: center; }

.ausrichten { text-align: center; }
.ausrichten2 { text-align: center; }

.logo img { width: 40%; height: auto; padding-top: 20px; padding-bottom: 20px; }
.no { display: none; } /* Nur auf Desktop sichtbar, RESPONSIVE nicht */

.border { background-color: #FFFFFF; border: 1px solid #d6dee0; padding: 30px; width: 100%; margin-bottom: 20px; }
.border:hover { background-color: #efefef; }

.form-control { color: #555; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; }
.form-control:focus { border-color: #d4007f; outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(212, 0, 127, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(212, 0, 127, .6); }



/* Kleine Geräte (Tablets, 768px und breiter (col-sm-)) */
@media (min-width: 768px) { 
/* GRID 5er BOXEN Modell */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 { width: 20%; float: left; position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }

.glyph { font-size: 40px; text-align: right; line-height: 40px; color: #5b5b5d; }

.zeigen { display: none; }
#myCarousel { display: block; }

.carousel .item { height: 300px; }
.carousel-control { 
		height: 300px; 
		margin-top: 0px; 
		width: 15%;
		color: #FFF;
		text-shadow: 0 1px 1px rgba(0,0,0,.4);
		filter: alpha(opacity=50); 
		opacity: .5; 
		background-color: transparent; 
		border: 0px; 
		z-index: 2; }

.balken { display: block; }
.header { 
	display: block;
	position: relative;
	height: 300px;
    background-attachment: scroll;
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover; 
	z-index: 1; } 
.sliderbereich { width: 85%; min-width: 768px; position: relative; margin: 0 auto; }

.text-window { text-align: left; }

.ausrichten { text-align: left; }
.ausrichten2 { text-align: right; }
	
.logo img { width: 100%; max-width: 150px; height: auto; padding-top: 20px; padding-bottom: 20px; }
.no { display: block; } /* Nur auf Desktop sichtbar, RESPONSIVE nicht */

.scroll-top-wrapper { /* TO-TOP-BUTTON | nur in DESKTOP Ansicht sichtbar*/
		position: fixed;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		text-align: center;
		z-index: 99999999;
		background-color: #777777;
		color: #eeeeee;
		width: 50px;
		height: 48px;
		line-height: 48px;
		right: 30px;
		bottom: 30px;
		padding-top: 2px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		}
.scroll-top-wrapper:hover { background-color: #888888; }
.scroll-top-wrapper.show { visibility:visible; cursor:pointer; opacity: 1.0; }
.scroll-top-wrapper i.fa { line-height: inherit; }

.form-control { height: 24px; padding: 2px 6px; font-size: 12px; }
.btn { padding: 2px 6px; font-size: 12px; }
  
}



/* Mittlere Geräte (Desktop-PCs, 992px und breiter (col-md-)) */
@media (min-width: 992px) { 
.glyph { font-size: 58px; text-align: right; line-height: 58px; }

.carousel .item { height: 380px; }
.carousel-control { 
		height: 380px; 
		width: 10%;
 }
	
.header { height: 380px; }
.sliderbereich { width: 85%; min-width: 992px; position: relative; margin: 0 auto; }
		
.logo img { width: 100%; max-width: 190px; height: auto; padding-top: 20px; padding-bottom: 20px; }

.form-control { height: 34px; padding: 6px 12px; font-size: 14px; }
.btn { padding: 6px 12px; font-size: 14px; }

}



/* Große Geräte (Desktop-PCs, 1200px und breiter (col-lg-)) */
@media (min-width: 1200px) { 
.glyph { font-size: 64px; text-align: right; line-height: 64px; }

.carousel .item { height: 500px; }
.carousel-control { 
		height: 500px; 
		width: 15%;
 }
		
.header { height: 500px; }
.sliderbereich { width: 85%; min-width: 1200px; position: relative; margin: 0 auto; }
		
.logo img { width: 100%; max-width: 220px; height: auto; padding-top: 20px; padding-bottom: 20px; }
}