@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-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 264 32'%3E%3Cdefs%3E%3Cstyle%3E.cls-1{fill:none;stroke:%23000;stroke-width:2px;}%3C/style%3E%3C/defs%3E%3Ctitle%3EMIO-x-ADIDAS%3C/title%3E%3Cg id='Component_1' data-name='Component 1'%3E%3Cg id='Group_4' data-name='Group 4'%3E%3Cpath id='Path_9' data-name='Path 9' d='M260.15,2.7a2.76,2.76,0,0,1,2.71,2.81v0a2.71,2.71,0,0,1-5.41,0A2.76,2.76,0,0,1,260.1,2.7Zm0,.39a2.36,2.36,0,0,0-2.34,2.38v.09a2.33,2.33,0,0,0,2.33,2.34h0a2.42,2.42,0,0,0,2.35-2.34,2.46,2.46,0,0,0-2.35-2.47Zm.62,2.47c.13,0,.49.1.49.62V7h-.49V6.67c0-.62-.13-.88-.49-.88h-.61V7h-.49V3.94h1a1,1,0,0,1,1.1.87c0,.37-.25.75-.49.75Zm-1.1-1.11V5.3h.49c.23,0,.61-.13.61-.36a.52.52,0,0,0-.49-.49h-.61'/%3E%3Cpath id='Path_10' data-name='Path 10' d='M253.48,31.21c5.18,0,9.5-2.08,9.5-7.26,0-3-2.08-4.94-5.43-5.82s-7.88-.72-7.88-3c.23-1.47,1.6-1.85,3.68-1.85,3.22,0,3.35,1.72,3.48,2.85h5.3c-.38-4.06-3.7-6.92-9-6.92-5.56,0-8.76,3-8.76,6.8a5.74,5.74,0,0,0,3,5.17,22.67,22.67,0,0,0,5.43,1.5c2.32.23,4.43.49,4.56,2.08,0,1.11-1.11,2.48-3.58,2.48-3.58,0-4.33-2-4.33-3.33h-5.54c.1,4.3,3.69,7.27,9.61,7.27'/%3E%3Cpath id='Path_11' data-name='Path 11' d='M230.28,31.21a11.31,11.31,0,0,0,6.18-1.85v1.37h5.31V9.5h-5.31v1.6a10.34,10.34,0,0,0-6.18-1.85,11,11,0,0,0-.21,22h.21Zm-5.9-11a6.27,6.27,0,0,1,6.16-6.18,6.12,6.12,0,0,1,0,12.23,6.25,6.25,0,0,1-6.16-6.05'/%3E%3Cpath id='Path_12' data-name='Path 12' d='M212.28,2.21V11.1A11,11,0,1,0,206,31.21a11.78,11.78,0,0,0,6.29-1.85v1.37h5.17V2.21Zm-12.21,18a6.1,6.1,0,1,1,6.15,6.05h-.12a6.24,6.24,0,0,1-6-6.05'/%3E%3Cpath id='Path_13' data-name='Path 13' d='M187.6,30.73h5.18V9.5H187.6Zm0-23.21h5.18V2.21H187.6V7.52'/%3E%3Cpath id='Path_14' data-name='Path 14' d='M173.41,31.21a12.17,12.17,0,0,0,6.29-1.85v1.37H185V2.21h-5.3V11.1a11.06,11.06,0,1,0-6.29,20.11Zm-6-11a6.17,6.17,0,1,1,6.28,6.05,6.28,6.28,0,0,1-6.28-6.05'/%3E%3Cpath id='Path_15' data-name='Path 15' d='M149,31.21a12.25,12.25,0,0,0,6.42-1.85v1.37h5.17V9.5h-5.18v1.6A11.44,11.44,0,0,0,149,9.25a11,11,0,0,0,0,22Zm-5.92-11a6.17,6.17,0,1,1,6.28,6.05h-.23a6.24,6.24,0,0,1-6-6.05'/%3E%3C/g%3E%3C/g%3E%3Cg id='Group_5' data-name='Group 5'%3E%3Cellipse id='Ellipse_1' data-name='Ellipse 1' cx='67.38' cy='16.21' rx='14.98' ry='15'/%3E%3Crect id='Rectangle_8' data-name='Rectangle 8' x='38.3' y='1.79' width='6.79' height='28.84'/%3E%3Cpath id='Path_1' data-name='Path 1' d='M1,1.7V30.64H29.81V1.7l-14.4,8.41Z'/%3E%3C/g%3E%3Cg id='Group_6' data-name='Group 6'%3E%3Cline id='Line_1' data-name='Line 1' class='cls-1' x1='102.5' y1='12.71' x2='117.5' y2='27.71'/%3E%3Cline id='Line_2' data-name='Line 2' class='cls-1' x1='117.5' y1='12.71' x2='102.5' y2='27.71'/%3E%3C/g%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: 174px;
    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; }*/

}