@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}


@font-face{
	font-family:'BMWTypeNext-Bold';
	src:url('../custom-ix/fonts/BMWTypeNext-Bold.woff2') format('woff2');
	font-weight:Bold;
	font-style:normal;
}

@font-face{
	font-family:'BMWTypeNext-Light';
	src:url('../custom-ix/fonts/BMWTypeNext-Light.woff2') format('woff2');
	font-style:normal;
}

* {   
 	padding: 0; margin: 0; 
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	ms-box-sizing: border-box;
	box-sizing: border-box;
}


html{
	height:100%;
}

body {
	height: 100%; margin:0px;
	-ms-user-select: none;
	font-size:10px; /* davon abgeleitet, werden alle anderen Fontgr��en in % dargestellt */
	font-family: BMWTypeNext-Light, Arial, sans-serif;
	font-weight:normal;
	font-style: normal;
	line-height:18px;
	overflow:hidden;
	background-color:#FFFFFF;
}



/* ################################### Color Classes */


.fgWhite {	color:#FFFFFF;	}

.fgLightGrey {	color:#707070;	}

.fgDarkGrey {		color:#282828;	}

.fgLightBlue { color:#0066B1; }

.bgWhite {	background-color:#FFFFFF;	}

.bgBlack {		background-color:#000000;	}

.bgButtons { 				background-color:transparent; }


/* ################################### Link Classes */

a {
	text-decoration:none;
	font-weight:normal;
	color:#262626;
}

/* ################################### Font-size Classes */

h1, h2, h3, h5, p{
	color:#262626;
	font-family: BMWTypeNext-Light;
	padding:0px;
	font-weight:normal;
	font-style: normal; 
	line-height:100%;
	margin:0px;
	margin-bottom:5px;
}

h1 {
	color:#262626;
	font-family: BMWTypeNext-Light;
	font-size: 34px;
	margin-top:10px;
	margin-bottom:5px;
    line-height:140%;
    /*
color:#5f5f5f;
*/
}

h2{
	font-size: 25px;
}




hr {
	margin-right:3%;
	border:2px solid #DDD;
	margin-top:10px;
	margin-bottom:10px;
}

.mbottom{
	margin-bottom: 18px!important;
}

#wrongOrientation {
	position:absolute;
	left:0px;top:0px;
	width:100%;height:100%;
	overflow:hidden;
	z-index:15000;
	background-color:#000000;
/*	background-image:url(../media/wrongorientation.png);*/
	background-image:url(custom-ix/content/media/wrongorientation.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	display:none;
}

/* ################################### preloader / SplashScreen */


		#preloader {
		    width:100%;
			height:100%;
		    /*background-image:url(../media/preloader-1.gif);*/
		    /*background-size:cover;*/
		    background-position:center center;
		    background-repeat:no-repeat;
		    margin-top:-10px;
		}
		#versionInfo {
            position:absolute;
            bottom:5px;
            right:10px;
            width:auto;
            height:20px;
            font-size:10px;
            color:#bbb;
		}


/* ################################### MainAppView Scene */

		#app {
            position:absolute;
            top:0px;left:0px;
            width:100%;height:100%;
            background-color:#000000;
            overflow:hidden;
            display:none;		
		}

		#logobg{
            position:absolute;
            top:-110px; left:5%;
            width:244px;height:100px;
            z-index:2000;
            display: none;
            padding:27px 20px;
            overflow:hidden;
		}

		#logo{
				width:204px;height:70px;
				background-position:center center;
				background-repeat:no-repeat;
                background-size:contain;
		}
		
		#scene {
				position:absolute;
				/*top:92px;left:0px;*/
				top:0px; left:0px;
                width: 100%; height: 100%;
				/*width:100vw; height:calc(100vw * 0.5625);*/
        /*        width: 1920px; height: 1080px;
        */
				overflow:hidden;
		}

		.sceneContainer {
				top:0px;left:0px;
				width:100%;height:auto;
				/*
background-color:#ffffff;
*/
				overflow:hidden;
				opacity:0;
		}
		
				.sceneContainer img{
						width:100%;
						height:auto;
                        overflow:hidden;
				}

				.sceneLayer {
						position:absolute;
						top:0px;left:0px;
						width:100%;height:auto;
                        overflow:hidden;
				}

				.sceneLayer img{
						width:100%;
						height:auto;
                        overflow:hidden;

				}
				
				.hotSpotLayer {
						position:absolute;
						width:40px;height:40px;
						background-position:center center;
						background-repeat:no-repeat;
						cursor:pointer;
						z-index:500;
				}


                #sceneVid{

                }

 /*               video {
                    width:100%;
                    height: 100% !important;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
*/
                video{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    min-width: 100%;
                    min-height: 100%;
					width: 80%; 
                }

				.videoInnerHotspot{
					position: relative;
					left: unset;
					top: unset;
					transform: unset;
					min-width: unset;
					min-height: unset;
					width: 80%;
					height: auto;
				}

                .baseVidHS{
                   position:absolute;
                   top:50%;left:50%;
                   min-width:50px;min-height:50px;
                   padding-left:24px;
                   background-position:top left;
				   				 background-repeat:no-repeat;
                   cursor:pointer;
                   display:none;
                   z-index:501;
                   /*border:1px solid #fff; */
                }

                        .baseVidHSText{
                            width:auto;height:auto;
                            /*background-color:#fff;
                            color:#222;
                            */
                            color:#ffffff;
                            font-size:18px;
                            padding:11px 28px;
                            cursor:pointer;
                            text-shadow: 1px 1px 3px #404040;
                            white-space:nowrap;

                        }

                #intro, #outro{
                    position:absolute;
                    top:0px;
                    left:0px;
                    width:100%;height:100%;
                    z-index:500;
                    overflow:hidden;
                }

                #outro {
                    width:105%;height:105%;
                    background-color:#000000;
                    display:none;
                    color:#ffffff;
                }

                #introBG{
                    position:absolute;
                    top:0px;
                    left:0px;
                    width:100%;height:100%;
                    background-color:#000000;
/*                    background-image:url(../custom-gs/content/media/background-blue.jpg);
                    background-position:center center;
				    background-repeat:no-repeat;
                    background-size:cover;
  */                  display:none;
                }

                #introScreen, #outroScreen{
                   position:absolute;
                   top:40%;
                   left:50%;
                   width:500px;height:350px;
                   margin-left:-250px;
                   text-align:center;
                }

                #outroText {
                    cursor:pointer;
                }

                .intro {
                    display:none;
                    color:#ffffff;
                }

                .intro h2{
                    font-size: 180%;
					color: white;
                }


                #introText {
                    cursor:pointer;
                }


                .playBTN{
                    position: relative;
                    left: 48%;
                    top: 48%;
                    z-index: 9;
                    
                }
                #clickInfo {
                    position:absolute;
                    bottom:10%;
                    left:50%;
                    width:300px;
                    margin-left:-150px;
                    font-size:180%;
                    line-height:140%;
                    color:#ffffff;
                    z-index:500;
                    text-align:center;
                    background-repeat:no-repeat;
                    background-position:top center;
                    background-image:url(../custom-ix/content/media/sym-touch.png);
                    padding-top:94px;
                    display:none;

                }

/* ################################### MainAppView Navtabs */

#prevScene {
			position:absolute;
			bottom:46%;left:-25px;
			width:22px;height:60px;
			background-color:#fff;
			background-position:center center;
			background-repeat:no-repeat;
			background-image:url('../media/sym-prev.png');
			cursor:pointer;
			z-index:499;
}

#nextScene {
			position:absolute;
			bottom:46%;right:-25px;
			width:22px;height:60px;
			/*background-color:#9143a9;*/
			background-color:#fff;
			font-size:140%;
			background-position:center center;
			background-repeat:no-repeat;
			background-image:url('../media/sym-next.png');
			cursor:pointer;
			z-index:499;
}

				
#imprint {
			position:absolute;
			bottom:-24px;right:0px;
			width:auto;height:24px;
			background-color:#000;
			/*background-color:#9143a9;*/
			color:#ffffff;
			font-size:140%;
			padding-left:15px;
			padding-right:15px;
			padding-top:3px;
			text-transform:uppercase;
			cursor:pointer;
			z-index:499;
}



#navtab {
			position:absolute;
			bottom:-24px;left:5%;
			width:auto;height:24px;
			background-color:#0066B1;
    		color:#ffffff;
			font-size:140%;
			padding-left:25px;
			padding-right:15px;
			padding-top:3px;
			text-transform:uppercase;
			background-image:url('../media/sym-plus.png');
			background-position:left center;
			background-repeat:no-repeat;
			cursor:pointer;
			z-index:500;
}

#showHStab {
			position:absolute;
			bottom:-24px;right:5%;
			width:auto;height:24px;
			background-color:#555555;
    		color:#ffffff;
			font-size:140%;
			padding-left:15px;
			padding-right:15px;
			padding-top:3px;
			text-transform:uppercase;
 		    background-position:left center;
background-repeat:no-repeat;
			cursor:pointer;
			z-index:500;
}

#navpreviews {
			position:absolute;
			bottom:-2000px;left:0;
			width:100%;height:100%;
			background-color:#000000;
			color:#ffffff;
			z-index:600;
}

    .navChapters {
		position:relative;
        width:20%;height:100%;
        max-height:100%;
        display:inline-block;
        margin-right:-4px;  /* bei inline-block gibt es sonst abstände zwischen den Bildern */
		background-color:#000000;
        cursor:pointer;
    }
	.navChapterImg{
		height:100%;
		background-repeat:no-repeat;
        background-position:center center;
        background-size:cover;
		opacity:0.4;
	}
	.chapterText{
		position:absolute;
		left:520px;
		width:80%;
		opacity:0;
	}

    .navChapters .text1{

		bottom:18%;
		font-size:300%;
	}
	.navChapters .text2{
		bottom:14%;
		font-size:180%;
	}

/*#navpreviews {
			position:absolute;
			bottom:0px;right:-600px;
			width:30%;height:100%;
			background-color:#000000;
			overflow:auto;
			color:#ffffff;
			z-index:500;	
}

			#navpreviews img{
				width:85%;
				height:auto;
				float:left;
				padding-left:15px;
				padding-top:15px;
				cursor:pointer;
			}*/
			
			#navpreviews img{
				width:24%; width:100%;
				height:auto;
			/*	float:left;
				padding-left:15px;
				padding-top:15px;
				padding-bottom:15px;
			*/	cursor:pointer;
			
			}


			#navclose {
				position:absolute;
				top:0px;right:0px;
				width:21px;height:21px;
				margin:12px 12px;
				background-image:url(../custom-ix/content/media/sym-close-black.png);
				background-position:center center;
				background-repeat:no-repeat;
				cursor:pointer;
				z-index:501;
			}

/* ################################### MainAppView Content */
				
#contentContainer{
		position:absolute;
		bottom:0px;right:0px;
		width:0%;height:100%;
		background-color:#FFFFFF;
		z-index:600;
		overflow-x:hidden;
		/*overflow-y:scroll;*/
		-webkit-overflow-scrolling: touch;
}

#contentClose {
		position:fixed;
		top:0px;right:0px;
		width:21px;height:21px;
		margin:20px 20px;
		background-image:url(../custom-ix/content/media/sym-close.png);
		background-position:center center;
		background-repeat:no-repeat;
		cursor:pointer;
		z-index:501;
		display:none;		
}

#contentInner {

}

#contentWrapperBottom {
		position:absolute;
		left:0px;
		width:100%;height:auto;
		bottom:0px;
}

#contentWrapperTop {
		position:absolute;
		left:0px;
		width:100%;height:auto;
		min-height:2000px;
		top:0px;
}


/*
        #camImg {
            -webkit-transform:translate3d(0,0,0);
        }

*/
		.cElem {
				position:relative;
				width:900px;
				left:50%;
    		margin-left:-450px;	
		}

		.cElem1014 {
				position:relative;
				width:1024px;
				left:50%;
    		margin-left:-512px;	
 		}
		
		
		.topHeadLine {
				padding-top:75px;
				padding-bottom:75px;
		}

		.contentBlockCenter {
				text-align:center;
		}
		
		.contentBlock {
					padding:50px 0px 50px 0px;
		}

		.fullBlackWrapper{
				width:100%;
				height:auto;
				background-color:#000000;
				padding-top:50px;
				padding-bottom:50px;
				
		}

		.contentBlock table {
					border:none;
					width:100%;
		}

		.contentBlock table td{
					width:50%;
					max-width:400px;
					padding-right:20px;
					padding-left:20px;
					padding-bottom:80px;
		}

		.contentBlock table td h2{
					margin-top:20px;
					margin-bottom:20px;
		}

		.contentBlock table td h3{
					text-align:justify;
		}

		.fabrics {
				max-width:440px;
		}
		
		.content {
				
		}

                .inPic {
                    color:#ffffff;
                    font-family: 'BMWTypeNext-Bold', Arial, Helvetica, sans-serif;
	                font-weight:normal;
                    font-size:160%;
                    line-height:200%;
                    bottom:150px;
                }

                        .inPic h5 {
                            font-size:200%;
                        }

				.fullWidth {
/*						position:absolute;
						top:0px !important;
						left:0px;
						width:100%;height:auto;
						overflow:auto;
*/
						
				}

						.fullWidth .imgfull{
								width:100%;
								height:auto;
						}
						
						.fullWidth h2 {
							font-size:180%;
							line-height:140%;
                            font-family: BMWTypeNext-Bold, Arial;
						}
				
						.fullWidth h3{
							font-size:140%;
							line-height:140%;
						}
										
						.fullWidth p {
							font-size:120%;
							line-height:170%;
						}
						


                .content .scrollContainer {
                    width:100%;
                    min-height:30%;
                    max-height:35%;
                    overflow-x:hidden;
                    overflow-y:auto;
                    margin-top:5%;
                    margin-bottom:10%;

                }



                .matContainer {
                    width:40%;
                    height:auto;
                    float:left;
                    margin:15px 20px 0px 0px !important;
                }

                        .matContainer img{
                            width:100%;
                            height:auto;
                            margin: 0px 0px 0px 0px !important;
                        }



				.content .smallWidth {
						margin:20px 50px;
				}
		
						.content .smallWidth img{
								width:80%;
								height:auto;
								margin: 0;
						}

						.content .smallWidth h1 {

							margin-bottom: 0;
						}
				
						.content .smallWidth h2 {
							font-size:23px;
							line-height:140%;
							width: 80%;
							margin-bottom: 12px;
						}
				
						.content .smallWidth h3{
							font-size:23px;
							line-height:140%;
							width: 80%;
							margin-bottom: 12px;
						}
										
						.content .smallWidth p {
							font-size:18px;
							line-height:170%;
							width: 80%;
							margin-top: 12px;
							margin-bottom: 24px;
						}
						
						.content .link {
								font-weight:bold;
								background-image:url(../custom-ix/content/media/sym-more.png);
								background-repeat:no-repeat;
								background-position:left center;
								padding-left:35px;
								padding-top:4px;
								padding-bottom:4px;		
								margin-top:28px;	
								cursor:pointer;				
						}
						
						.content .inactive {
								opacity:0.2;
						}

						.content .active {
								opacity:1;
						}
						
						.content .imgChangeSel {
								cursor:pointer;
						}

.projectsClearFix {
	clear:both;
}

/*################################### NU ##############*/
.vidBG{
    background: linear-gradient(90deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0));
	position: absolute;
	right: 0;
	top: 0;
    width: 100%;
    height: 100%;
        
}
.vidGradientBG{
    bottom: 0;
    right: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}









@media screen and (max-width: 1024px){
	  body { 			font-size:8px; 	line-height:20px;	}
	  .content .smallWidth img { margin:20px 0px; }
	  .content .link { margin-top:20px; }
	  .content .smallWidth { margin: 35px; }

      .scrollContainer {
          max-height:25%;min-height:20%;margin-bottom:5%;
      }

      .matContainer {
          width:98% !important;
      }

      .inPic {  bottom:75px;    }
}

@media screen and (max-width: 1000px){
/*
        #preloader, #app {
			display:none;
		}

		#wrongOrientation {
			display:block;
		}

*/
}

@media screen and (orientation:portrait){
		#preloader, #app {
			display:none;
		}

		#wrongOrientation {
			display:block;
		}
}