@font-face {
    font-family: 'adineue PRO Bold Web';
    src: url('adineuePRO-BoldWeb.woff2') format('woff2'),
        url('adineuePRO-BoldWeb.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'AdihausDIN';
    src: url('AdihausDIN-Regular.woff2') format('woff2'),
        url('AdihausDIN-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
* {
  box-sizing: border-box;
}
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%;
	font: inherit;
	vertical-align: baseline;
}

html, body{ overflow: hidden; }
body{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently*/
}
.container-logo{ position: fixed; background-color: transparent; padding-top: 29px; top: 0; padding-left: 29px; left: 0; width: 100%;}
.header-logo{ position: relative; width: 264px; height:32px; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg class='logo-mio' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 141.73 53.86'%3E%3Cellipse class='fill-logo' cx='115.26' cy='26.93' rx='25.9' ry='25.92'%3E%3C/ellipse%3E%3Crect class='fill-logo' x='65.02' y='2.01' width='11.74' height='49.83'%3E%3C/rect%3E%3Cpath class='fill-logo' d='M.58,1.85v50h49.8v-50L25.48,16.39Z'%3E%3C/path%3E%3C/svg%3E");} 
.header-text{ position: fixed; right: 20px; top: 35px; width: 155px; }
.text-uppercase{ text-transform: uppercase; }
.regular{ font-family: 'AdihausDIN'; font-size: 14px; line-height: 17px; color: #767677 }
.bold{ font-family: 'adineue PRO Bold Web'; font-size: 30px; line-height: 36px; color: #000000;}
.choose-products, .choose-products-bg{ position:fixed; bottom: 0px; left: 0; width: 100%; /* background-color: transparent; */ background: rgba(255,255,255,0.95); /*transform: translateY(100%); transition: all 0.3s linear;*/ text-align: center; height: 150px; padding-top: 20px; padding-bottom: 20px; z-index: 2;}
/*.choose-products.active, .choose-products-bg.active{ bottom:150px;}*/
.choose-products-bg{ z-index: 1; background: rgba(255,255,255,0.95);}
.product{ position: relative; overflow: visible; background-color: #E6E6E6; margin-left: 10px; margin-right: 10px; border-radius: 100%; width:110px; height: 110px; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; }
.product.active::after{ content: ""; display: block; position: absolute; right: 0; top: 0; width: 24px; height: 24px;  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E.cls-1{fill:none;stroke:%23fff;}%3C/style%3E%3C/defs%3E%3Ctitle%3ECHECK%3C/title%3E%3Ccircle id='Ellipse_11' data-name='Ellipse 11' cx='12' cy='12' r='12'/%3E%3Cpath id='Path_16' data-name='Path 16' class='cls-1' d='M5.14,13.12l4.5,4.68,10-10.53'/%3E%3C/svg%3E");}
#dat-gui{
  top: 120px!important;
}

#Viewer3D{ height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100vw; }
#loaderContainer {
  position: fixed;
  z-index: 2;
  top:0;
  left: 0;
  background-color: rgb(240,240,240);
  height: 100vh; height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  /*top: 30%;
  left: 50%;
  */
}
.loader-container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#loadingLabel {
  color: rgb(65, 65, 65);
  font-size: 2rem;
  position: relative;
}
#loadingLabel img{
display: block;
margin: 0 auto;
margin-bottom: 30px; 
}
.lds-roller {
  position: relative;
  width: 64px;
  height: 64px;
  z-index: 2; display: block; margin: 0 auto;
  margin-top: 30px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #aaaaaa;
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 533px) {
  .hidden-mobile{ display: none; }
  /*.choose-products.active, .choose-products-bg.active{ bottom: calc(25vw + 8px); }*/
  .choose-products, .choose-products-bg{ padding-left:5px; padding-right: 5px; padding-top: 10px; padding-bottom: 10px; /* height: calc(25vw - 10px); */ height: auto; bottom: 0px; }
  .product {
    display: block;
    float: left;
    /*
    width: calc(25vw - 12px);
    height: calc(25vw - 12px);
    */
    width: calc(25% - 10px);
    padding-bottom: calc(25% - 10px);
    height: 0px;
    margin-left: 5px; 
    margin-right: 5px;
  }
  .container-logo{ position: absolute; padding-top: 14px; top: 0; padding-left:0px; left: 0; width: 100%; background-color: rgba(240,240,240,0.9); padding-bottom: 10px;}
  .header-logo {
    width: 56px;
    height: 21px;
    margin: 0 auto;
    display: block;

  }
  .header-text{
    padding-top: 15px;
    width: 100%;
    text-align: center;
    border-top: 1px solid #E6E6E6;
    top: 45px;
    right: 0;
  }
  .bold{ font-size: 21px; line-height: 25px }
  .regular{ font-size:11px line-height:13px; }
  #dat-gui{ top: 145px !important }
  /*.product.active::after{ width: 15px; height: 15px; }*/

}