body {
	 font-family: 'Open Sans', sans-serif;
	 font-weight: 100;
     margin: 0;
//     background: url('./images/abendhimmel web.jpg') center center fixed;
	 background-repeat: no-repeat;
	 background-size: cover;
//	overflow: hidden;	/* To remove the scrollbars */
	overflow-x: hidden;	/* only vertical scrollbar shown */
//	padding-top:50px;	/* offset body to start after navbar */
}
canvas { 
	display:block; 
	width: 100%; 	/* this sets canvas width to its column - instead of screen width !*/
	height: 100%; 	/* ??? */
	overflow: hidden;
} 
nav {
//	color: #fff;
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
	padding-top: 20px;
	padding-bottom: 20px;
}


.navbar {
//   background-color: transparent;
background-color: rgba(0, 10, 60, 0.7); 
//   background: transparent;
   border-color: transparent;
   color: #fff;
}

.navbar-default  .navbar-brand { 
	color: #5af; 
	font-size: 18px;	// just small enough so navbar doesn't get split into 2 lines at medium aspect ratio...
	font-weight: 600;
}
.navbar-default  .navbar-nav > li > a { 
	color: #fff; 
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
//	text-transform: uppercase;
}
//.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
//  color: #fff;
//  background-color: transparent;
//}


.navbar-default .navbar-brand:focus {
   outline: 0;
	color: #5af;
}

.navbar-default .navbar-brand:hover {
   outline: 0;
	color: #5af;
	font-weight: 600;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:active,
.navbar-default .navbar-nav > li > .active-nav
{
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	outline: 0;			// get rid of dotted border
}

.navbar li { color: #fff; } 

.hdg {
/* overlay canvas */
position: absolute;		
width: 100%;
	color: #fff;
	padding-top: 60px;
	font-size: 32px;
	font-weight: 600;
}

.hdg2 {
/* overlay canvas */
position: absolute;		
width: 100%;
	color: #fff;
	padding-top: 120px;
	font-size: 20px;
	font-weight: 600;
}

.section-hdg {
	font-size: 28px;
	font-weight: 400;
// background-color: rgba(80, 150, 255, 0.1); 
background-color: rgba(255, 255, 55, 0.5); 
}

.section-content {
	padding-bottom: 120px;
}

.project-title {
	font-size: 24px;
	font-weight: 400;
	padding-bottom: 30px;
}

.section-hr {
	width: 100%; 
	color: white; 
	height: 1px;
	padding-bottom: 60px;
}

.cubetgt {
	display: block; 
	position: relative; 
	top: -90px; 
	visibility: hidden;
}

.spacer {
	padding-bottom: 60px;
}

.negative {
//	color: #fff;
}

.centered {
//	display: inline-block;
	text-align: center;
}

.kbb-txt {
    padding-left: 20px;
	font-size: 18;
}

.ffoptik {
	color: #5af;
}
.footer {
	font-size: 14;
}
#imprint, #disclaimer {
	display: none;
	font-size: 12;
}

@media screen and (min-aspect-ratio: 16/10) {
.kbb-txt {
    padding-left: 13%;
    padding-right: 13%;
	font-size: 20;
}
.hdg {
    position: relative;
    width: 100%;
    color: #fff;
    padding-top: 60px;
    font-size: 32px;
    font-weight: 600;
    z-index: 2;
}


.hdg2 {
    position: relative;
    width: 100%;
    color: #fff;
    padding-top: 120px;
    font-size: 20px;
    font-weight: 600;
}


.kbb-top {
    position: fixed;
    top: 0px;
}

.carousel {
    background: transparent;
    height: 500px;
    z-index: 1;
}

.carousel-inner{
//	  -webkit-transform-style: preserve-3d;
//  -moz-transform-style: preserve-3d;
//  transform-style: preserve-3d;
}

.carousel .item img{
    margin: 0 auto; /* Align slide image horizontally center */
}

.item{
	position: relative;
	height: 100%;
}

.carousel-img{
	position: absolute;
	top: 50%;
//	transform: translateY(-50%);
	left: 50%;
	transform: translate(-50%, -50%);
}

.carousel-caption{
	color: #000;
}

.caption-top{
	top: 50px;
	bottom: auto;
}

.carousel-control{
    background: transparent;
	color: #777;
}

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

.bs-example{
//	margin: 20px;
}

/* @media screen and (min-width: 480px) {
*/
@media screen and (min-aspect-ratio: 16/9) {
    #posViewer {
		visibility:hidden;
    }
}

#posViewer {
	background:transparent;
//	border-style:hidden;
	border:none;
	outline:none;
	float:right;
}

/*
#all {
	min-width: 50px;
}
*/