@font-face { font-family: 'Futura';
			font-style:normal; 
			font-weight: normal; 
             src: url('../fonts/Futura Medium.otf') format('opentype');
             font-display: swap;
             }
@font-face { font-family: 'Futura';
			font-style:bold; 
			font-weight: bold; font-display: swap;
             src: url('../fonts/futura heavy font.ttf');}
@font-face { font-family: 'FontAwesome';
			font-style:normal; 
			font-weight: normal; font-display: swap;
             src: url('../fonts/fa-solid-900.ttf');}  
body, html {
    font-family: 'Futura', sans-serif;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    color: #fff;
    height: 100% !important;
    font-size: 16px;
    margin: 0;
    letter-spacing: 0.1em;
    background: #e3e3e3;
}
body {
	max-width: 1980px;
    width: 100%;
    overflow-x: hidden;
    margin: 0 auto;
}
.content-box-gallery{
	position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
	background:#e3e3e3 !important;
}
h1 {
	font-weight: 700;
}
h1 strong {
	font-weight: 900;
}
h2 {
    margin: 0;
    color: #fff;
    font-weight: 400;
    margin-bottom: 0;
    font-size: 3.1em;
}
h3 {
	color:  #fff;
	font-size: 1.6em;
	font-weight: 400;
}
h4 {
    color: #fff;
    font-size: 1.33em;
    font-weight: 400;
    margin-bottom: 0.75em;
}
h5 {
	text-transform: uppercase;
	font-weight: 700;
	line-height: 20px;
}
a {color: #fff; text-decoration: none;}
a:hover, a:focus {text-decoration: none;color: #000;}

ul, ol {
	list-style: none;
	margin:0;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {
	display: inline-block;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
ul, ol {
	padding: 0;
	webkit-padding: 0;
	moz-padding: 0;
}
hr {
    height: 4px;
    width: 100%;
    text-align: center;
    position: relative;
    background: #fff;
    margin: 0 auto;
    border: 0;
}

img { max-width:100%; height:auto;}

.static, .referenzen .active {
    position: absolute;
    background: #313569;
    max-width: 100%;
    top: 0;
    left: 0;
    padding-right: 1.5em;
    box-sizing: border-box;
}

.static{z-index:150;}
.active{z-index:100;}
.static:hover {
  opacity:0;
}
.wrapper {padding: 0.5em 1.5em;}
.inner-wrapper {padding: 0.5em 1.5em;}

/* HEADER */
.start #header{display:none;}
.home #content{padding:1em 0;}
.home .bx-wrapper .bx-caption span {display:none !important;}
.home .logo-overlay {
    display: block;
    position: fixed;
    top: 0;
    left:0;
    height: 100%;
    width: 100%;
    z-index: 1000;
}
#header{
	position: fixed;
	z-index: 100;
    background: #313569;
    float: left;
    width: 100%;
    max-width: 1980px;
    
}
#header #menu .wrapper{background:#fff;}
#header .wrapper{position:relative;padding:0 1.5em;background-image: url(../img/Webdesign_Header_wuerfel.png);background-repeat: no-repeat;background-position: right;}
.bg-start img{
    position: absolute;
    bottom: 0;
}
.header-padding {
    padding-top: 126.984px;
}
#logo {max-width: 350px;display: inline-block;}
#language {display: none;position: absolute;right: 0;padding: 1em 1.5em;}

#beta-left {float: left;}
#beta-right {float: right;position: absolute;right: 0.5em;top: 0.5em;}
.betabox {font-size: 1.8em;color: #34386b;line-height: 44px;}

iframe{border: 0;}

/* INDEX.HTML */
span.betonen {
    font-size: 2.1em;
    font-style: italic;
    margin-right:0.25em;
}
.start-content {padding: 1.5em 1em;box-sizing: border-box;}
/* SUBPAGE */
.content-box {
    padding: 0 4.5em;
}

.popup-start#popup {
    width: 100%;
    max-width: 640px;
    position: fixed;
    z-index: 105;
    padding: 0;
    left: 50%;
    top: 50%;
    overflow: auto;
    background-color: rgb(0,0,0);
    margin-top: -320px;
    margin-left: -320px;
    box-sizing: border-box;   
    padding: 1.5em 0.5em;
}

.popup-start img#img-ecommerce {margin: auto;display: block;width: 80%;max-width: 640px;}

.popup-start span.closeimg {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.popup-start .closeimg:hover,.popup-start .closeimg:focus {color: #bbb;text-decoration: none;cursor: pointer;}

/* START */
#start{
	position:relative;
	z-index:5;
	height: 100vh;
    overflow: auto;
}
.start-text {
    position: absolute;
    z-index: 10;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.start-text .text-box h1 {
    font-weight: 300;
    font-size: 44px;
    margin: 0.125em;
}
/*
#bg-video {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index:5;
    min-width: 100%; 
    min-height: 100%;
}*/
video {
    max-width: 100%;
    height: auto;
}
#bg-video {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
}

.start-text .text-box {color: #fff;font-size: 2.8em;text-align: center;position: absolute;bottom: 1em;top: auto; max-width: 100%;box-sizing: border-box;left: 0;right: 0;background: #313569;line-height: 1.2em;}

#menu {
    background-color: #fff;
}
#menu .wrapper { padding: 0.25em 1.5em;max-width: 1600px; margin: 0 auto;}
#menu ul {color: #313569;margin: 0 auto;text-align: center;font-size: 1.33em;}
#menu ul li {display: inline;padding: 0.5em 1.5em 0.5em 0;box-sizing: border-box;}
#menu ul li a {color:#313569;}
li:not(:first-child)::before {
    content: "\25FC  ";
    padding-right: 1.5em;
}
ol li:not(:first-child)::before {
    content: "";
    padding-right: 0;
}

.logo-box {top: 10%;left: 0;right: 0;margin-top: -110px;text-align: center;width: 66.66%;position: absolute;margin: 0 auto;}

.linkbox p {font-size: 2em;text-align: center;color: #fff;line-height: 0.8;}

.linkbox p a{color:#fff;}
.linkbox p a:hover{color:#aaa;}
a.example {
    padding: 0.5em 1em;
    color: #313569;
    margin: 0 1.5em;
    background: #fff;
}
a:hover.example {
    background: #666;
}
p.example-menu{
	padding-top: 1.5em;
}
/* CONTENT */
.headbox { max-width: 66.66%;margin: 0 auto;}
.headbox h2{text-align:center;font-size: 2em;}
.textbox {max-width: 66.66%;margin: 0 auto;text-align: center;}
#content {
    padding: 3em 0 1.5em;
    background: #e3e3e3;
    z-index: 10;
    position: relative;
    height:100%;
}
.subpage #content {
    min-height: 100vh;
}   

#content.subpage.modelviewer{
	padding:0;
}

#content.subpage {
    padding: 5em;
    text-align:center;
}


/*scan-druck*/
.scan-druck .content-box {padding: 0 4.5em;}
.scan-druck #box-1 {margin-bottom: 2.5em;}
.scan-druck #box-2-1 {
    width: 40%;
    float: left;
    padding-right: 1em;
    box-sizing: border-box;
}
.scan-druck #pic1{padding:0;}
.scan-druck #box-2-2 {margin-left: 40%;}
.scan-druck #box-2-2 .box-text { padding: 0 0.75em;}
.scan-druck #box-2 {margin-bottom: 2.5em;}
#box-2-1-2 .box-image {width: 100%;float: left;}
#box-2-1-1 {margin-bottom: 1.5em;}
#box-2-1-1 .box-image {float: left;box-sizing:border-box;}
#box-2-1-1 .box-image#pic1-left {width:50%;padding-right:0.75em;}
#box-2-1-1 .box-image#pic1-right {margin-left:50%;padding-left:0.75em;float: none;}

/* ar-vr */
.ar-vr #box-1 {
    margin-bottom: 2.5em;
}
.ar-vr .box-2 {
    padding: 0;
}
.ar-vr .box-2 .c-2 .c-1#b-2-2-1 {
    margin-bottom: 1.75em;
}
.ar-vr .box-2 .c-1 {
    width: 40%;
    float: left;
    box-sizing: border-box;
    padding-right: 0.75em;
}
.ar-vr .box-2 #b-2-1-2 {
    padding-right: 0;
}
.ar-vr .box-2 .c-2{padding-right:0.75em;}
.ar-vr .box-2 #b-2-1-2 {
    padding-left: 0.75em;
    box-sizing: border-box;
    margin-left: 50%;
}
.ar-vr #b-2-2-1-1 {
	padding-right:0.75em;
}
.ar-vr #b-2-2-1-2 {
    padding-left: 0.75em;
    padding-right: 0;
}
.ar-vr .box-2 #b-2-1-1 {
    padding-right: 0.75em;
    width: 50%;
}
.ar-vr .box-2 .c-2 {
    margin-left: 40%;
    padding-left: 0.75em;
    padding-right:0;
}
.ar-vr .box-2 #b-2-2-2 {
    padding-left: 0;
}
.ar-vr .box-2 .c-2 .c-1,.ar-vr .box-2 .c-2 .c-2 {width:100%;margin-left:0;}
.ar-vr .box-2 #b-2-2-1-1 {
    width: 50%;
    float: left;
}
.ar-vr .box-2  #b-2-1-1 {
    padding-right: 0.75em;
}
.ar-vr #b-2-2-1-2 {
    width: auto;
    margin-left: 50%;
}
.ar-vr .box-6 .box-image {
    text-align: center;margin-bottom: 2.5em;
}
.ar-vr .box-4 .c-1 {width: 50%;float: left;padding-right: 1.5em;box-sizing: border-box;}
.ar-vr .box-4 .c-2 { margin-left: 50%;padding-left: 1.5em;box-sizing: border-box;}

.ar-vr .box-7{margin-bottom:2.5em;}
.ar-vr .box-7 .box-image {box-sizing: border-box;width:33.33%;float:left;}

.ar-vr .box-7 #b7-left {padding-right: 0.25em;}
.ar-vr .box-7 #b7-center {width:33.33%;padding: 0 0.25em;}
.ar-vr .box-7 #b7-right {padding-left: 0.25em;}
.ar-vr .box-3, .ar-vr .box-5, .ar-vr .box-6 { margin-bottom: 2.5em;}
.ar-vr .box-7 #b7-center .top {
    padding-bottom: 0.125em;
}
.ar-vr .box-7 #b7-center .bottom {
    padding-top: 0.125em;
}

.ar-vr .bx-wrapper {
    float: right;
    background-color: #313569;
}

  /* the slides */
  .ar-vr .ar-slider .box-image {
    margin: 0 27px;
  }
  /* the parent */
 .ar-vr .ar-slider  {
    margin: 0 -27px;
  }
.box-1 .textbox, .box-3 .textbox {font-size:1.33em;line-height: 1.5;}
.box-2 .image-box#image-left{ float: left;}

#image-right {margin-left: 50%;}
.start #content .wrapper {padding: 0.5em 1.5em;max-width: 1600px;margin: 0 auto;}
.box-2 {padding: 0 4.5em 0;width:100%;box-sizing:border-box;}
.box-2 #image-center {float: left;position: relative;height:380px;}
.box-2 p.example-menu { font-size: 1.2em;padding-top: 0; position: absolute;top: 50%;left: 50%;margin-top: -18px; margin-left: -90px;}
.box-2 .image-box {width: 33.33%;padding: 0 1.5em;box-sizing: border-box;text-align: center;}
.box-2 .image-box#image-right, .box-4 .image-box#image-right {margin-left: 66.66%;float: none;}

.box-3 {padding: 0; width:100%;box-sizing:border-box;}
.box-3 .image-box {width: 50%;padding: 0 1.5em;box-sizing: border-box; text-align: center;margin: 0 auto;}

.box-4 {padding: 0;width: 100%;box-sizing: border-box;margin-bottom: 2.5em;}
.box-4 .image-box {width: 33.33%;padding: 0 2.5em;box-sizing: border-box;text-align: center;float: left;}
.box-4 .textbox {font-size: 1.2em;padding: 1.5em 0 0.5em 0;text-align: center;color: #fff;}

.box-5 {padding: 0;width: 100%;box-sizing: border-box;}
.box-5 .image-box {width: 33.33%;padding: 0 2.5em;box-sizing: border-box;text-align: center;float: left;}
.box-5 .textbox {font-size: 1.2em;padding: 1.5em 0 0.5em 0;text-align: center;color: #fff;}
.box-5 .image-box {margin-left: 15%;}
.box-5  #image-right { margin-left: 50%;margin-right: 15%;float: none;}
.box-5 .image-box#image-center{position: absolute;}
.box-5 .static {max-width:100%;}
.referenzen .box-2{padding: 1.5em 4.5em 1.5em;}
.referenzen .box-6 .cbox.c4 { padding-left: 0.5em; padding-right: 0;}
.referenzen .bx-wrapper{max-width:100% !important;background: #313569;}

.referenzen .obj-slider {

}
.referenzen .bx-viewport {

}
/*REFERENZEN */
.referenzen .cbox {
    float: left;
    width: 25%;
    box-sizing: border-box;
    position:relative;
}
#loading-overlay {background: #fff;position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;z-index:500;}
			
			.loading-overlay-hidden {display: none !important;}
			#loading-bar {position: relative;width: 25em;height: 1em;border-radius: 0.25em;background-color: black;border: 1px solid grey;display: inline-flex;}
			#loading-bar_circle .loader {
			  border: 16px solid #f3f3f3; /* Light grey */
			  border-top: 16px solid #313569; /* Blue */
			  border-radius: 50%;
			  width: 120px;
			  height: 120px;
			  animation: spin 2s linear infinite;
			}
			#loading-bar_circle span#loading-text {
			    padding: 0 0.5em;
			    position: absolute;
			    font-size: 1.5em;
			    line-height: 150px;
			    width: auto;
			    margin-left: 40px;
			    color: #aaa;
			}
			#loading-bar_circle {position: relative;}
			@keyframes spin {
			  0% { transform: rotate(0deg); }
			  100% { transform: rotate(360deg); }
			}
.anwendung4 #content {
    padding: 0;
}
.cbox.c2 .static, .cbox.c2 .active, .cbox.c3 .static, .cbox.c3 .active {
    padding: 0 0.25em;
}

.box-4 .cbox.c3 .static, .box-4 .cbox.c3 .active{
	padding:0 0 0 0.5em;
}

.cbox.c1, .cbox.c1 .static, .cbox.c1 .active {
    padding-right: 0.5em;
}
.cbox.c4 {
    padding: 0 1.5em 0 1.25em;
}

/* COOKIE */
#cookieNote #showless, #cookieNote .long{display:none;}
#cookieNote a#showless,#cookieNote a#showmore {color: #022d5a;font-weight: bold;}

#cookieNote {
    position: fixed;
    top: auto;
    left: 0px;
    bottom:0px;
    width: 100%;
    z-index: 105;
    text-align: left;
    font-weight: normal;
    font-size: 16px;
    color: #022d5a;
    background-color: #fff;
    padding: 8px 0 8px 0;
    text-align: center;
    /* border-bottom: 1px solid #022d5a; */
    border-top: 1px solid #022d5a;
    display: none;
}

#cookieNote span.dismiss {
    cursor:pointer;
    position: absolute;
    right: 10px;
    top: 8px;
    width: 18px;
    height: 18px;
    display: block;
    text-indent: -9999px;
    background: url(../../img/close.png) no-repeat 0 0;
}

.notify {
    padding: 0 1.5em;
    box-sizing: border-box;
    max-width: 1600px;
    margin: 0 auto;
    font-size: 14px;
}

span.cookie-button a {
    padding: 0.25em 1.5em;
    background: #313569;
    text-decoration: none;
    height: 30px;
    line-height: 30px;
}

#cookieNote a {color: #022d5a;text-decoration:none;}
#cookieNote .cookie-button a {color: #fff;text-decoration:none;}
.cookie-button, .cookie-info {display: inline-block;padding: 0 0.5em;}

.subpage #content span.cookie-button a {background: #aaa;}

.referenzen .box-5 .cbox {
    float: left;
    width: 33.33%;
    box-sizing: border-box;
    min-height: 345px;
    position:relative;
}
.referenzen .box-5 .cbox .static, .referenzen .box-5 .cbox .active{
	padding-left: 0.5em;
	padding-right:0;
}
.referenzen .box-5 .cbox.c3 {
    padding-left: 0.5em;
    padding-right:0;
}

.referenzen .box-6 .cbox {
    float: left;
    width: 25%;
    box-sizing: border-box;
    min-height: 345px;
    position:relative;
}
.referenzen .box-6 .cbox.c2 {
    padding: 0 0.25em 0 0.25em;
}
.referenzen .box-6 .cbox.c3{
    padding: 0 0.25em 0 0.25em;
}
.referenzen .box-5 .cbox.c1, .referenzen .box-5 .cbox.c1 .static, .referenzen .box-5 .cbox.c1 .active{
	padding-left:0;
	padding-right:0.5em;
}
.referenzen .box-5 .cbox.c2 .static, .referenzen .box-5 .cbox.c2 .active {
    padding-left: 0.25em;
    padding-right: 0.25em;
}
.referenzen .box-6 .cbox.c4, .referenzen .box-6 .cbox.c4 .static, .referenzen .box-6 .cbox.c4 .active {
    padding-left: 0.5em;
    padding-right:0;
}
.referenzen .box-6 .cbox.c3, .referenzen .box-6 .cbox.c3 .static, .referenzen .box-6 .cbox.c3 .active {
    padding-left: 0.5em;
    padding-right:0;
}
.image-row .box-image {
    float: left;
    max-width: 50%;
    box-sizing: border-box;
}
#pic1 {
    padding-right: 0.5em;
}
#pic2 {
    padding-left: 0.5em;
}
.anwendungen .box {margin-bottom:1.5em;}

.anwendungen .hexa {
    width: 15%;
    float: left;
}
.anwendungen .hexa.mobil{
	display:none;
}
.anwendungen .text-box {
    width: 85%;
    float: left;
    padding: 0 1.5em;
    box-sizing: border-box;
}
.overlay-text {
    background: #6359b7b8;
    padding: 0.05em 1.5em 1em;
    position: fixed;
    top: 66.66%;
    width: 100%;
    z-index:1001;
    box-sizing:border-box;
    max-width: 1980px;
}
.anwendungen .image-box {
    text-align: center;
}
/* SUBPAGE */ 
.cols {max-width: 1600px;margin: 0 auto;padding: 1.5em 0;}
.col-1 {width: 66.66%;float: none;margin: 0 auto;}
.col-2 {margin-left: 66.66%;}
.cols h2{margin: 0;color: #fff;font-weight: 400;font-size: 2.1em;padding-left: 1em;line-height: 1;}
.cols hr {margin-top: 1em;}

.portfolio .col-1, .portfolio .col-2 {width:100%;margin:0;float:none;}
.portfolio .col-1 {margin-bottom:1.5em;}
.portfolio .col-2 .sketchfab-embed-wrapper {float:left;padding: 1.5em;}

.material-example-image {display: inline-block;margin-bottom: 2.5em;}

.material-example-image .sketchfab-embed-wrapper {float: left;padding: 0 3.7em 0 0;box-sizing: border-box;}
.material-example-image .sketchfab-embed-wrapper#last-example{padding:0;}
.cbox{
	min-height: 345px;
	margin-bottom:1.5em;
}

.box-text#scan-video {text-align:center;}

.box-qr {
    width: 50%;
    float: left;
}
.qr, .link-to-app {}
.qr{max-width:200px;padding:1.5em;box-sizing:border-box;}
.link-to-app {max-width:200px;padding:1.5em;box-sizing:border-box;margin: auto 0;}
.qr-codes {width: 500px; margin: 0 auto;}
.seperator {
    display: table;
    width: 100%;
    padding: 0;
    background-color: #e5e5e5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height: 130px;
    background: url(../img/Wuerfel_Background.jpeg) local no-repeat center center; background-size: cover;
}

.box-text h3, .box-text h4, .box-header h3{font-weight:bold;}

.mobile-nav {
    display: none;
}

.mobile-nav li:not(:first-child)::before {
    display:none;
}

.box-form input{width:50%;}
.box-form input[type="checkbox"],input[type="submit"]{width:auto;}
.box-form input[type="submit"] {padding: 0.5em 1.5em;}
.box-form input#subject {width:100%;box-sizing:border-box;}
.box-form textarea {
    width: 100%;
    height: 150px;box-sizing:border-box;
}
.box-form h3{margin-bottom:0.5em;}
.box-form .half{width:50%;float: left;}
.half-right {width: 50%;margin-left: 50%;padding-left: 1.5em;box-sizing:border-box;}

.kontakt-mobil {display:none;}
.grecaptcha-badge {
    bottom: 100px !important;
}
/* FOOTER */
#footer {box-sizing:border-box;max-width: 1980px;z-index:100;background: #fff;color: #313569;font-size: 1em;height: 50px;background-image: url(../img/fussleiste_cubes.jpg);background-repeat: no-repeat;background-position: center;letter-spacing: 0.05em;position: fixed;bottom: 0;width: 100%;}
#footer a {color: #fff;text-decoration:underline;}
#footer a.mail{text-descoration:none;}
#footer a:hover {color: #666;}
#footer #footer-left {width: 20%;float: left;padding: 0.5em 1.5em;box-sizing: border-box;position:relative;}
#footer #footer-center {width: 60%;padding: 0;box-sizing: border-box;position:relative;float: left;}
#footer #footer-right {width: 20%;padding: 0;box-sizing: border-box;position:relative;float: left;}
.footer-logo-box { width: 150px; padding: 0 1.5em;position: absolute;top: 0;}
#footer #footer-center ul li,#footer #footer-right ul li, #footer #footer-center ul li ol{display:inline;}
#footer #footer-center ul li ol li{display:block;}
#footer #footer-center ul li {padding: 0em 1.5em 0em 0;box-sizing: border-box;position:relative;}

#footer #footer-center ul li img {
    max-width: 25px;
    max-height: 25px;
}
#social-media {
    text-align: center;
}

#social-media li:not(:first-child)::before {
    content: "\25FC ";
    padding-right: 1.5em;
    position: relative;
    top: -10px;
}
#footer #footer-center ul li ol { position: absolute;width: 300px;top: -0.5em;}
#footer a{color: #313569;text-decoration:none;}
#footer a:hover{color: #aaa;}


#footer #footer-right li:not(:first-child)::before {
    content: "\25FC ";
    padding-right: 0.5em;
}

.clear {display: block;clear: both;}

.subpage .content-box {max-width: 1600px;margin: 0 auto;padding: 0;}

.subpage .box {padding: 1.5em 0 0;text-align: center; max-width: 1200px;margin: 0 auto;font-size: 1.4em;}
.subpage .box#textbox {text-align:left;}
.example #footer {
    display: none;
}
        body.example {
				background-color: #fff;
				color: #333;
				margin: 0 0 0 0;
				padding: 0 0 0 0;
				border: none;
				cursor: default;
				position:fixed;
			}
			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a {
				color: #333;
				font-weight: bold;
				text-decoration: underline;
				cursor: pointer
			}
			#glFullscreen {
				width: 100%;
				height: 100vh;
				min-width: 640px;
				min-height: 360px;
				position: relative;
				overflow: hidden;
				z-index: 0;
			}
			#example {
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-color: #fff;
			}
			#feedback {
				color: darkorange;
			}
			span#loading-text {
			    padding: 0 0.5em;
			    position: absolute;
			    top: 0;
			    left: 0;
			}
			#dat {
				user-select: none;
				position: absolute;
				left: 0;
				top: 0;
				z-Index: 200;
				padding: 6em 0;
    			box-sizing: border-box;
    			max-width: 100%;
    			touch-action: none;
			}
			.example .subpage{
				max-width:100%;
				margin:0 auto;
			}
			#loading-overlay {
			  position: absolute;
			  width: 100%;
			  height: 100%;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  z-index:500;
			}
			
			.loading-overlay-hidden {display: none !important;}
			#loading-bar {position: relative;width: 25em;height: 1em;border-radius: 0.25em;background-color: black;border: 1px solid grey;display: inline-flex;}
			#progress {background-color: #75b800;height: inherit;border-radius: inherit;width: 5%;}

.cols h2 {
    padding-left: 0;
    text-align: center;
}
.box-text {
    text-align: justify;
    font-size: 1.2em;
}

.col-1 .box-text#desc {margin-bottom: 2.5em;}

.box-text h3, .box-text h4, .box-header h3 {
    text-align: center;
}
#solutions .col-1 {
    float: none;
    margin: 0 auto;
}
#services .example-preview {float: left;padding: 0 1.5em;box-sizing: border-box; width: 33.33%;position: relative;}
#services .example-preview#holz {padding: 0 0.75em;}
#services .example-preview#textil {padding-left: 0;}
#services .example-preview#leder {padding-right: 0;}
#services .material-box {position: relative;}
#examples .box-text {
    text-align: center;
}

.home .mobile .bx-wrapper {
    display: none;
}

.example-preview {
    float: left;
    padding: 1.5em 0.75em;
    box-sizing: border-box;
    position: relative;
}
.referenzen .example-preview {
    width:20%;
    padding:0 0.75em;
}
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    display: flex;
    width: 100px;
    height: 100px;
    border: 0;
    border-radius: 50px;
    text-align: center;
    line-height: 100px;
    color: #fff;
    background: rgba(0,0,0,.75);
    outline: none;
    transition: all .15s;
}
.play-button .fa-play, .play-button .label {
    position: absolute;
    top: 0;
    height: 100px;
    line-height: 100px;
}
.play-button .fa-play {
    display: block;
    left: 31px;
    width: 50px;
    font-size: 50px;
}
.subpage.sketchfab .sketchfab-embed-wrapper {
    text-align: center;
}
#content.subpage.sketchfab {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}
.product-preview a{color:#1f1f1f;}
.product-preview {
    width: 50%;
    display: block;
    padding: 2.5em;
    box-sizing: border-box;
    text-align: center;
    margin: auto;
}
#preview-container.hide {
    display:none;
}
span.product-title {
    text-align: center;
    width: 100%;
    display: block;
    padding: 1.5em 0;
    color:#1f1f1f;
}
.content-box-gallery {
    max-width: 1960px;
    margin: 0 auto;
}
.product-preview a:hover {
    color: #0041c0;
}
#content.subpage.sketchfab  iframe {
        max-width: 100% !important;

    }
.play-button:focus, .play-button:hover {
    background-color: #1caad9;
    box-shadow: 0 0 10px #333;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
}
.play-button .label {
    left: 0;
    width: 100px;
    font-size: 14px;
    font-weight: 700;
    color: #1caad9;
    opacity: 0;
    transition: opacity .3s,-webkit-transform .3s;
    transition: opacity .3s,transform .3s;
    transition: opacity .3s,transform .3s,-webkit-transform .3s;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.fa-play:before {
    content: "\F04B";
    box-sizing:border-box;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* MOBILE */
@media screen and (max-width: 1800px){
	.material-example-image .sketchfab-embed-wrapper {padding: 0 1.5em 0 0;}
	.cbox{min-height: 320px;}
	#footer #footer-left, #footer #footer-right{width:25%;}
	#footer #footer-center { width: 50%;}
	#footer #footer-right{text-align:right; padding-right: 1.5em;}
	.footer-logo-box {left: 1.5em;}
	#footer {background-size: cover;}
	.scan-druck #box-2-1 { width: 43%;}
	.scan-druck #box-2-2 {margin-left: 43%;padding-left:0.5em;}
	#pic2{padding:0;}
}
@media screen and (max-width: 1540px){
	.material-example-image .sketchfab-embed-wrapper#last-example {padding-top: 1.5em;}
	.scan-druck #box-2-1 { width: 46%;}
	.scan-druck #box-2-2 {margin-left: 46%;}
}
@media screen and (max-width: 1440px){
	.start-text .text-box{font-size: 2.8em;}
	.box-4 .image-box{padding: 0 1.5em;}
	.inner-wrapper{padding: 0.5em 0;}
	.box-2 {padding: 0 1.5em; margin-bottom: 1.5em;}
	.box-3 {padding: 0 1.5em; margin-bottom: 1.5em;}
	.headbox h2 {margin-bottom: 1.5em;}
	.box-2 #image-center {height: 320px;}
	.box-2 .image-box {padding: 0;}
	
	#menu ul {font-size: 1.2em;}
	
	.start-text .text-box h1 {font-size: 1em;}
	.cbox, .referenzen .box-5 .cbox, .referenzen .box-4 .cbox, .referenzen .box-6 .cbox{min-height: 250px;}
	
}
@media screen and (max-width: 1200px){
	.logo-box {width: 100%;padding: 0 6em;box-sizing: border-box;}
	.start-text .text-box {font-size: 2.1em;}
	.headbox {max-width: 75%;}
	.textbox {max-width: 75%;}
	
	.portfolio .col-2 .sketchfab-embed-wrapper {float: none;padding: 1.5em;text-align: center;}
	
	.play-button .fa-play {
    display: block;
    left: 14px;
    width: 25px;
    font-size: 25px;
	}
	.play-button .fa-play, .play-button .label {
	    position: absolute;
	    top: 0;
	    height: 50px;
	    line-height: 50px;
	}
	.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    display: flex;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50px;
    text-align: center;
    line-height: 50px;}
    .flickity-page-dots{bottom:-40px !important;display: none !important;}
    .flickity-viewport{min-height:160px;}
    .cbox, .referenzen .box-5 .cbox, .referenzen .box-4 .cbox, .referenzen .box-6 .cbox{min-height: 200px;}
    #footer {background-size: contain;}
}
@media screen and (max-width: 1024px){
	.ar-vr .box-3 { padding: 0;}
	.logo-box {top: 40%;}
	.start-text .text-box {font-size: 1.8em;}
	.box-2 .image-box{padding:0;}
	.box-3 .image-box {width:75%; padding: 0;}
	.box-3{padding: 0 4.5em 0;}
	
	#content .inner-wrapper {padding: 0;}
	.box-2 {padding: 0 1.5em 3em;}
	
	.box-2 #image-center {height: 200px;}
	
	#menu ul {font-size: 1em;}
	
	.start-text .text-box {padding: 0.25em;}
	.material-example-image .sketchfab-embed-wrapper {padding: 1.5em 1.5em 0 0;text-align: center;}
	
	.referenzen .example-preview {width: 33.33%;}
	 .cbox, .referenzen .box-5 .cbox, .referenzen .box-4 .cbox, .referenzen .box-6 .cbox{min-height: 150px;}
	 #footer #footer-center { width: 40%;}
	 #footer #footer-left, #footer #footer-right {width: 30%;}
	 
	 .ar-vr .box-2 .c-1 {width: 100%;padding-right: 0;}
	 .ar-vr .box-2 .c-2 {margin-left: 0;padding-left: 0;padding-right: 0;}
	 .ar-vr .box-2 .c-2 .c-1#b-2-2-1 {margin-bottom: 1em;padding: 1.5em 0;}
	 .qr-codes {width: auto;margin: 0 auto;}
	 
	 .product-preview {width: 50%;}
}
@media screen and (max-width: 900px){
	.start-text .text-box {font-size: 1.6em;}
	.referenzen .cbox {float: left;width: 50%;}
	.cbox, .referenzen .box-6 .cbox {min-height: 300px;}
	.referenzen .box-4 .cbox {min-height: 278px;}
	.box-4 .cbox.c3 .static, .box-4 .cbox.c3 .active {padding: 0 0.5em 0 0;}
	.cbox.c2 .static, .cbox.c2 .active, .cbox.c3 .static, .cbox.c3 .active {padding: 0 0 0 0.5em;}
	
	.cbox, .referenzen .box-5 .cbox { min-height: 150px;}
	.referenzen .box-6 .cbox{width:50%;}
	.referenzen .box-6 .cbox.c3, .referenzen .box-6 .cbox.c3 .static, .referenzen .box-6 .cbox.c3 .active { padding-left: 0;padding-right: 0.5em;}
 	#footer #footer-center { width: 33.33%;}
	 #footer #footer-left, #footer #footer-right {width: 33.33%;}
}
@media screen and (max-width: 768px){
	#menu ul li {padding: 0.25em 0.75em 0.25em 0;}
	body{font-size:14px;}
	#menu ul {font-size: 0.75em;}
	#footer #footer-left{padding:0;}
	#footer #footer-right{padding:0;}
	#footer {font-size: 1em;}

	.box-4 .image-box {padding: 0 0.75em;}
	
	.headbox {max-width: 100%;}
	.textbox {max-width: 100%;}
	.box-5 .image-box {width: 33.33%;padding: 0 0.5em;}
	p.example-menu {padding-top: 0;}
	.box-2 {padding: 0 0.5em;}
	
	.portfolio .col-2 .sketchfab-embed-wrapper {float: none;text-align: center;}
	
	#solutions .col-1 {width:100%;float: none;}
	
	.col-1 { width: 50%;float: left;}
	.col-2 { margin-left:50%;}
	
	.play-button {position: absolute;top: 50%;left: 50%; margin-top: -25px; margin-left: -25px; display: flex; width: 50px; height: 50px; border: 0; border-radius: 50px;text-align: center;line-height: 100px;color: #fff;background: rgba(0,0,0,.75);outline: none;transition: all .15s;}
	.play-button .fa-play {display: block; left: 15px;width: 25px;font-size: 25px;}
	.play-button .fa-play, .play-button .label {position: absolute;top: 0;height: 50px;line-height: 50px;}
	#services .col-1 {width: 100%;float: none;}
	.material-example-image .sketchfab-embed-wrapper {float: left;padding: 0; box-sizing: border-box; margin-bottom: 2.5em;}
	.material-example-image .sketchfab-embed-wrapper#last-example{margin-bottom:0;}
	.material-example-image .sketchfab-embed-wrapper:nth-child(even) {float:right;}
	
	.popup-start#popup {width: 100%;max-width: 400px;top: 0;margin-top: 200px;padding: 1.5em 0;margin-left: -200px;}
	.popup-start span.closeimg {top: 0;right: 10px;font-size: 30px;}
	
	.cbox, .referenzen .box-6 .cbox {min-height: 260px;}
	.referenzen .box-4 .cbox {min-height: 236px;}
	.referenzen .box-5 .cbox {float: none; width: 100%;}
	.cbox, .referenzen .box-5 .cbox {min-height: 375px;}
	
	.box-4 .cbox.c3 .static, .box-4 .cbox.c3 .active {padding: 0 0.5em 0 0;}
	.cbox.c2 .static, .cbox.c2 .active, .cbox.c3 .static, .cbox.c3 .active {padding: 0 0 0 0.5em;}
	.referenzen .box-5 .cbox .static, .referenzen .box-5 .cbox .active {padding-left: 0;padding-right: 0;}
	.referenzen .box-5 .cbox.c2 .static, .referenzen .box-5 .cbox.c2 .active {padding-left: 0; padding-right: 0;}
	
	.referenzen .box-6 .cbox{width:50%;}
	.referenzen .box-6 .cbox.c3, .referenzen .box-6 .cbox.c3 .static, .referenzen .box-6 .cbox.c3 .active { padding-left: 0;padding-right: 0.5em;}
	#footer .wrapper {padding: 0.5em 1em;}
	
	.scan-druck #box-2-1 { width: 100%; float: none;}
	.scan-druck #box-2-2 { margin-left: 0;padding: 0;}
	.scan-druck #box-2-2 .box-text {padding: 1.5em 0;}
	#desc-bottom {margin-bottom: 2.5em;}
	.ar-vr .box-4 .c-1 { width: 100%; float: none;}
	.ar-vr .box-4 .c-2 {margin-left: 0;padding-left: 0;}
	
	.ar-vr .bx-wrapper {float: none;background-color: #313569; margin: 0 auto;}
	
	.ar-vr .box-7 #b7-left {width: 50%;}
	.ar-vr .box-7 #b7-center {width: 50%;padding-right: 0;}
	.ar-vr .box-7 #b7-right{width:100%; float:none;padding-left: 0;}
	
	.anwendungen .hexa {margin-top: 1.33em;width: 25%;}
	.anwendungen .text-box {width: 75%;}
	.col-1 {width: 100%;float: none;}
	#logo {max-width: 250px;}
	.menu-icon {
	    display: block;
	    cursor: pointer;
	    position: relative;
	    width: auto;
	    float: right;
	    margin: 0.5em 0;
	    padding: 1.25em 0;
	}
	.mobile-nav-toggle {
	    position: absolute;
	    right: 1.5em;
	    top: -0.5em;
	}
	.menu-icon .icon-line {
	    border-top: #aaa 1px solid;
	    margin-bottom: 0.5em;
	    width: 25px;
	}
	.mobile-main {
	    margin-bottom: 0;
	    padding: 0 0.5em !important;
	}
	.mobile-nav li {
	    text-align: center;
	    padding: 0.75em 1.5em;
	    margin: 0.25em 0;
	    border-top: 1px solid #545454;
	}
	.mobile-nav{display:block;}
	#menu{display:none;}
	.static {display: none !important;}
}
@media screen and (max-width: 750px){
	.material-example-image .sketchfab-embed-wrapper {float: none;}
}
@media screen and (max-width: 640px){	
	.box-2 {padding: 1.5em 0 0;margin-bottom: 1.5em;}
	.box-4 {padding: 1.5em 0 0;}
	#content {padding: 1.5em 0 0.5em;}
	.start-text .text-box{bottom: 1em;}
	.box-2 #image-center {height: 150px;}
	#dat{padding:0;touch-action: none;}
	.referenzen .example-preview {width: 50%;}
	
	.referenzen .cbox {float: none;width: 100%;}
	.referenzen .box-4 .cbox { min-height: 380px;}
	.cbox.c1, .cbox.c1 .static, .cbox.c1 .active{padding:0;}
	.cbox.c2 .static, .cbox.c2 .active, .cbox.c3 .static, .cbox.c3 .active {padding: 0;}
	.box-4 .cbox.c3 .static, .box-4 .cbox.c3 .active {padding: 0;}
	.referenzen .box-4 .cbox.c4 {min-height: 0;}
	.cbox, .referenzen .box-5 .cbox {min-height: 300px;}
	.referenzen .box-6 .cbox {width: 100%;min-height: 427px;}
	.referenzen .box-6 .cbox.c4, .referenzen .box-6 .cbox.c4 .static, .referenzen .box-6 .cbox.c4 .active {padding-left: 0;padding-right: 0;}
	.referenzen .box-6 .cbox.c3, .referenzen .box-6 .cbox.c3 .static, .referenzen .box-6 .cbox.c3 .active {padding-left: 0; padding-right: 0;}
	.referenzen .box-5 .cbox.c1, .referenzen .box-5 .cbox.c1 .static, .referenzen .box-5 .cbox.c1 .active {padding-left: 0;padding-right: 0;}
	
	.home .bx-wrapper {display: none;}
	.home .mobile .bx-wrapper {display: block;}
	
	#content.subpage.modelviewer{overflow-x: scroll !important;}
	.product-preview {width: 100%;}
}
@media screen and (max-width: 560px){
	.bx-wrapper .bx-caption span {color: #fff; font-family: Arial;display: block;font-size: .6em !important;padding: 0.5em !important;}
	.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {bottom: 10px !important;}
	.mobile-main{background: #313569;}
	#language {bottom: 0;}
	#footer #footer-left {width: 100%;float: none;}
	#footer #footer-right {width: 100%;margin-left: 0;}
	
	.logo-box {padding: 0 3em;}
	
	.start-text .text-box {font-size: 1em;bottom:0.75em;}
	
	.wrapper {padding: 0.5em 1em;}
	#beta-right{right: 1em;}
	.inner-wrapper {padding: 0.5em 0;}
	.headbox h2 {text-align: center;font-size: 2.1em;}
	
	.box-2 p.example-menu {font-size: 1em;margin-top: -18px;margin-left: -75px;}
	
	.footer-logo-box {
	    width: 150px;
	    padding: 0;
	    position: relative;
	    top: 0;
	    margin: 0 auto;
	    left: 0;
	}

	.example-preview {
		    float: left;
		    padding: 1em;
		    box-sizing: border-box;
		    width: 50%;
		    position: relative;
		}
	
	.menu-icon {
	    display: block;
	    cursor: pointer;
	    position: relative;
	    width: auto;
	    float: right;
	    margin: 0.5em 0;
	    padding: 1.25em 0;
	}
	.mobile-nav-toggle {
	    position: absolute;
	    right: 1.5em;
	    top: -0.5em;
	}
	.menu-icon .icon-line {
	    border-top: #aaa 1px solid;
	    margin-bottom: 0.5em;
	    width: 25px;
	}
	.mobile-main {
	    margin-bottom: 0;
	    padding: 0 0.5em !important;
	}
	.mobile-nav li {
	    text-align: center;
	    padding: 0.75em 1.5em;
	    margin: 0.25em 0;
	    border-top: 1px solid #545454;
	}
	.mobile-nav{display:block;}
	#menu{display:none;}
	
	#footer #footer-center {
	    width: 100%;
	    padding:0 1.5em;
	    box-sizing: border-box;
	    position: relative;
	    float: none;
	}
	#footer #footer-right {
	    float: none;
	}
	
	#footer #footer-right  ul{text-align: center;}
	.box-3 {padding: 0;}
	
	/*POPUP*/
	.popup-start#popup {max-width: 100%;width: 100%;top: 0;margin-top: 0;padding: 0;margin-left: 0;left: auto;}
	#footer{height:auto;position:relative;}
	.content-box , .scan-druck .content-box {padding: 0 1.5em;}
	.scan-druck #box-2-1 {width: 100%; float: none;padding-right: 0;box-sizing: border-box;}
	.scan-druck #box-2-2 {margin-left: 0;}
	
	.col-1 {width: 100%;float: none;}
	.box-2{padding:1.5em 1.5em 0 1.5em;}
	.cbox.c4 {padding: 0;float: none;width: 100%;}
	.ar-vr .box-4 .c-1 {width: 100%;float: none;text-align:center;}
	.qr, .link-to-app{max-width:100%;}
	.ar-vr .box-4 .c-1 {padding-right: 0;}
	.ar-vr .box-4 .c-2{margin:0 auto;padding:0;}
	.anwendungen h4 { margin-top: 0;width: 75%;width: 100%;}
	.anwendungen .hexa { margin-top:0; width: 50%;float: none;text-align: center;margin: 0 auto;}
	.anwendungen .text-box {width: 100%;}
	.anwendungen #content {min-height: 100%;}
	.anwendungen .box {margin-bottom: 1.5em;border-bottom: 1px solid white;padding-bottom: 1em;}
	.anwendungen .box#box-8, .anwendungen .box#box-1 {border-bottom: 0;}
	.overlay-text {padding:0.5em 1.5em;top: 50%;width: 100%;box-sizing: border-box;}
	#footer #footer-center ul li:last-child { padding-right: 0;}
	
	.box-form .half {width: 100%;}
	.box-form input {width: 100%;}
	#language {
	display:none;
    /*display: inline-block;*/
    position: relative;
     right: auto; 
    padding: 0.5em 0;
    text-align: right;
    width: 100%;
    box-sizing: border-box;}
    
    .box-5 .static {max-width: 100%;}
    .referenzen .box-6 .cbox {float: none;width: 100%;}
    .static {max-width: 100%;}
    .referenzen .box-4{padding:0;}
    .footer-padding{padding:0;}
    #footer {background-size: cover;}
    .ar-vr .box-2 .c-1 {width: 100%;}
    .ar-vr .box-2 .c-2 {margin-left: 0;padding-left: 0;padding-right: 0;}
    .ar-vr .box-2 .c-1 {width: 100%;margin-bottom: 1em;}
    .qr-codes {max-width: 100%;}
    .ar-vr .bx-wrapper { float: none;}
    .anwendungen .hexa.desktop {display: none;}
    .anwendungen .hexa.mobil {display: block;}
    .half-right { width: 100%;margin-left: 0; padding-left: 0;box-sizing: border-box;margin-bottom: 1.5em; display: none;}
    .kontakt-mobil {display:block;}
}
@media screen and (max-width: 480px){
	.linkbox p {font-size: 1.6em;}
	.box-2 #image-center { height: 90px;}
	
	.box-2 .image-box#image-left {float: none;width: 100%;margin-bottom: 1.5em;}
	.box-2 p.example-menu {font-size: 1.2em;padding-top: 0;position: relative;top: 0;left: 0;margin-top: 0; margin-left: 0;}
	.box-2 .image-box#image-right {margin-left: 0;float: none;width: 100%;}
	.box-2 #image-center {height: auto; width: 100%;margin-bottom: 1em;}
	
	.col-1, .col-2 {width: 100%;float: none;margin:0;}
	
	#footer #footer-center {padding: 0;}
	
	.image-row .box-image {float: none; max-width: none;}
	#pic1 {padding-right: 0;}
	#pic2 {padding-left: 0;}
	.referenzen .example-preview {width: 100%;}
	.flickity-page-dots{position:relative !important;bottom:-1.5em !important;}
	.referenzen .box-4 .cbox {min-height: 330px;}
	.referenzen .box-6 .cbox {min-height: 365px;}
}
@media screen and (max-width: 360px){
	.logo-box {padding: 0 1.5em;}
	.betabox {line-height: 1.2;}
	
	.start #content .wrapper {padding: 0.5em 0.5em;}
	.cols h2 {font-size: 1.6em;padding-left: 0;}
	.portfolio .col-2 .sketchfab-embed-wrapper {float: none;padding: 0.5em;}
	
	.box-image a img {padding-bottom: 0.75em;}
	
	.referenzen .box-6 .cbox {min-height: 260px;}
	.cbox, .referenzen .box-5 .cbox {min-height: 180px;}
	.referenzen .box-4 .cbox { min-height: 240px;}
	.scan-druck .box-image a img { padding-bottom: 0;}
}
@media screen and (max-width: 320px){
}