#header.stick-on-top {
    box-sizing: border-box;
    width: 100%;
  	
    z-index: 21;
    background-repeat: no-repeat;
    background-position: center;
}



#header {
    min-height: 400px;
 	height:100%;
    background-repeat: no-repeat;
    background-position: top;
  	background-size: cover;
}

#mainnav .navbar-inner {
   float: none;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: barlow;  
    font-size: 28px;
    /*position:sticky;
    top: 0;
  z-index: 10;*/
}

#mainnav .navbar-inner > li {
    float: none;
    display: inline-block;
}

/*Wichtig für Sticky Navbar, nicht Nabar-inner Element sondern mainnav.stick-on-top ist die Navbar, durch postion und top wird es oben beliben*/
#mainnav.stick-on-top {
/* min-height: 200px;*/
  background-repeat: no-repeat;
    background-position: center;
  background-size : cover;
  position: sticky;
  top:0;
}

#mainnav .navbar-inner {
 /* padding-left: 170px;*/

}

.flex-container {
  display: flex;
  background-color: #ffffff;
  flex-wrap: wrap;
}

.flex-container > div {
  background-color: #ffffff;
  margin: 30px;
  padding: 10px;
  font-size: 30px;
  border: #8c8a8a;
  border-style: ridge;
  border-width: thick;
  border-radius: 10px;
  flex : 14;
}

.top-sl.grey-bg {
    background-color: #000000;
    color: #ffffff;
}

.left {
    float: left;
    width: 50%;
}
.middle {
  float: middle;
  width: auto;
}
.right {
    float: right;
    width: 50%;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    .left, 
    .right {
        float: none;
        width: auto;
    }
   #header {
  	min-height: 40px;
     max-height: 70px;
   background-size : cover;
     padding-top : 0px;
     padding-bottom: 0px;
     border-bottom: 0px;
  }
  #mainnav .navbar-inner {
  	padding-left: 0px;
	}
  
  .flex-container > div {
	
  /*word-wrap:break-word;*/
  max-width:250px;
  min-width:150px;
}
}

/* Carousel fuer Reviews */
.carousel-item.active, .carousel-item-next, .carousel-item-prev {
  display: block;
}
.carousel-inner {
  min-height: 300px;
  border: 1px solid #fff;
  border-radius: 30px;
  background-color: #bbbbbb;
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
  
  #header {
  	min-height: 140px;
    
   background-size : cover;
     padding-top : 0px;
     padding-bottom: 0px;
     border-bottom: 0px;
  }
  #mainnav .navbar-inner {
  	padding-left: 0px;
	}
  
}
/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  #header {
  	min-height: 200px;
    
   background-size : cover;
     padding-top : 0px;
     padding-bottom: 0px;
     border-bottom: 0px;
  }
  #mainnav .navbar-inner {
  	padding-left: 0px;
	}
  
}
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
   #header {
  	min-height: auto;
    
   background-size : cover;
     padding-top : 0px;
     padding-bottom: 0px;
     border-bottom: 0px;
  }
  #mainnav .navbar-inner {
  	padding-left: 0px;
	}
  
}