@font-face{font-family:'AZO Sans';src:url('../../fonts/AZO_SANS.ttf') format('truetype');}

:root{--red:#682973;--white:#fff}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'AZO Sans',sans-serif;
  background:var(--red);
  color:var(--white);
  width:100vw;
  height:100vh;
  overflow:hidden;
}
button{font-family:inherit;border:none;background:none;cursor:pointer}

/* GRIGLIA ------------------------------------------------------------- */
#page{width:100vw;height:100vh;display:grid;grid-template-rows:1fr 100px;
      grid-template-columns:1fr 220px;grid-template-areas:"space1 space2" "space3 space3";
      transition:grid-template-columns .3s;}
#page.sidebar-hidden{grid-template-columns:1fr;grid-template-areas:"space1" "space3";}

/* SPACE 1 ------------------------------------------------------------- */
#space1{grid-area:space1;position:relative;display:flex;align-items:center;justify-content:center;
        background:var(--white);overflow:hidden;}
#space1.leftTop{align-items:flex-start;justify-content:flex-start;background:var(--red);}
#contentHolder{width:100%;height:100%}
#contentHolder video,#contentHolder iframe,#contentHolder img{width:100%;height:100%;
   object-fit:contain;background:inherit;touch-action:manipulation;}
/*#space1.leftTop video{object-position:left top;}*/
#space1 video{object-position:left top;}

#demoSpecialistBtn {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 998;
  cursor: pointer;
  height: 180px;
  width: auto;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Overlay video per 3D ------------------------------------------------ */
#videoOverlay{position:absolute;inset:0;display:none;z-index:999;background:var(--red);}
#videoOverlay video{width:100%;height:100%;object-fit:contain;background:inherit;}

/* Gallery arrows ------------------------------------------------------ */
.galleryArrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:2.4rem;
  background:rgba(0,0,0,.4);
  padding:0 .35rem;
  border-radius:.2rem;
  user-select:none;
  cursor:pointer;
  color:#fff;
  z-index:2147483647;
  pointer-events:auto;
  display:none;
}
#galPrev{left:10px}#galNext{right:10px}

/* SPACE 2 (sidebar) --------------------------------------------------- */
#space2{grid-area:space2;background:var(--red);display:none;flex-direction:column;overflow:hidden;}
#chaptersWrap{overflow-y:auto;padding:.4rem .2rem 0}
#sidebarTitle{font-size:.85rem;font-weight:bold;text-align:center;margin-bottom:.5rem;}
.sidebar-button{width:100%;display:flex;align-items:center;gap:.45rem;color:var(--white);
                font-size:.8rem;font-weight:bold;padding:.32rem .3rem;text-align:left;}
.sidebar-button img{height:30px;transition:.15s}
.sidebar-button.active img{height:40px}
.sidebar-button.active span{text-transform:uppercase;text-decoration:underline}
.g3dBtn img{height:42px;}
.g3dBtn.active img{height:52px;}
.g3dBtn{padding-left: 35px;}
.g3dBtn span{font-size:0.9rem;line-height:1.15;}
.g3dBtn.active span{font-size:1rem;text-decoration:underline;text-transform:uppercase;}

#bottomBtn{margin-top:auto;padding:.6rem 0;text-align:center;cursor:pointer}
#bottomBtn img{height:62px}
#bottomBtn span{display:block;font-size:.75rem;font-weight:bold;margin-top:.25rem;text-transform:uppercase}

/* SPACE 3 (menu) ------------------------------------------------------ */
#space3{
    grid-area:space3;
    background:var(--red);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 0 1.5rem;
}
.menu{display:flex;gap:1rem}
.menu-item{width:100px;text-align:center;cursor: pointer;}
.menu-item.active span{text-decoration:underline}
.menu-item img{width:100%;max-height:35px;object-fit:contain}
.menu-item span{display:block;font-size:.8rem;font-weight:bold;margin-top:.25rem}

#product-selector-wrap, #lingua-selector-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    color: var(--white);
}
#product-selector-wrap, #lingua-selector-wrap label {
    font-size: 1.0rem;
    font-weight: bold;
    text-transform: uppercase;
}
#product-selector, #lingua-selector {
    /*background-color: var(--red);
    color: var(--white);*/
	background-color: var(--white);
    color: var(--red);
    border: 1px solid var(--white);
    padding: 8px;
    font-family: inherit;
    font-weight: bold;
	font-size: 1.2rem;
    border-radius: 4px;
    cursor: pointer;
}
#footer-logo {
    height: 35px;
    width: auto;
}


::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:#666;border-radius:3px}
@media (max-width:768px){
  #space3{position:fixed;left:0;bottom:0;width:100%;height:auto;padding:.5rem;flex-wrap:wrap;justify-content:center;}
  #space1{height:calc(100vh - 120px);}
  .menu{flex-wrap:wrap;gap:.4rem;padding:.2rem .4rem;order:2;width:100%;justify-content:center;margin-top:.5rem;}
  .menu-item{width:20vw;max-width:80px;}
  .menu-item img{max-height:28px;}
  .menu-item span{font-size:.65rem;}
  #product-selector-wrap { order: 1; }
  #footer-logo { order: 3; margin-left:1rem;}
  #space2{position:fixed;top:0;right:0;height:100%;max-width:220px;
    transform:translateX(100%);transition:.3s;display:flex;}
  #space2.open{transform:translateX(0);}
}
@media (max-width:768px){
  #space2{position:fixed;top:0;right:0;height:100%;width:190px;
    transform:none !important;z-index:999;display:flex;}
  #space2 .sidebar-button img{height:26px;}
  #space2 .sidebar-button span{font-size:.7rem;}
  #space2 .sidebar-button.active img{height:32px;}
  #space2 .sidebar-button.active span{font-size:.8rem;}
}