@font-face {
  font-family: 'Saira';
  src: url(/assets/fonts/Saira/Saira-VariableFont_wdth\,wght.ttf);
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}
.lightboxOverlay,.lightbox {
  z-index: 99999 !important;
}
a-scene .a-enter-vr-button {display: none!important}
@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.loader,.loader::after{box-sizing:border-box;width:48px;height:48px;border-radius:50%}
.loader{display:inline-block;border-top:4px solid #d1cfc7;border-right:4px solid transparent;animation:rotation 1s linear infinite}
.loader::after{content:"";position:absolute;left:0;top:0;border-bottom:solid #952A2E;border-left:4px solid transparent}
.loader-container {position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.fade-out-loader{opacity:0;transition:opacity .3s ease-in-out}
body {
  visibility: hidden;
  margin: 0;
  font-family: 'Saira', sans-serif;
}
body.visible {
  visibility: visible;
}
#img-fondo {
height: 100%;
position: fixed;
top: 0;
width: 100%;
background-size: cover;
background-position: center;
background-image: url('assets/rosario2.jpg');
transition: opacity 0.7s ease;
pointer-events: none;
user-select: none;
}
#pantalla-carga {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed; 
  width: 100vw;
  height: 100vh;
  transition: opacity 0.7s ease;
  z-index: 10010;
}  
#pantalla-carga.fade-out{
  opacity:0; 
  pointer-events: none;
}
#titulo-principal {
  position: absolute;
  filter: drop-shadow(0 0 0.35rem #444443c0);
  user-select: none;
  margin: 0 0 1rem 0; 
}
#titulo-principal img {
  margin-top: -3rem;
  width: 850px;
  max-width: 100%;
  pointer-events: none;
}
#boton-comenzar {
top: 75%;
padding: 0.7em 1.5em;
font-size: 1.2em;
background-color: #000000;
color: #ffffff;
border: none;
user-select: none;
position: absolute;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
#boton-comenzar.fade-in {
opacity: 1;
}
#boton-comenzar:hover{background-color:#952A2E;color:#d1cfc7;}
#toggle0,#toggle1, #toggle2{ /*oculta el checkbox*/
display:none
}
.boton-ui {
position: fixed;
background: none;
width: 35px;
height: 35px;
transition: transform .3s;
cursor: pointer;
justify-content: center;
border: 0;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.button-toggle{
top: 17px;
left: 15px;
}
.button-toggle img {
width: 25px;
height: 25px;
pointer-events: none; 
}
.button-toggle:hover {
  transform: scale(1.125);
}
.container-menu {
transition: width ease .1s, height ease .1s;
background: #84877fec;
top: 0.625rem;
left: 0.625rem;
position: fixed;
overflow-y:auto;
border: 2.5px solid #2a2e23e7;
opacity: 0;
pointer-events: none;
}
.container-menu::-webkit-scrollbar {
display: none;
}
.menu-abierto {
opacity: 1;
pointer-events: auto;
width: 18.75rem;
height: 32.125rem;
padding: 1.875rem 1.875rem 1.875rem 1.650rem;
}
.menu-cerrado {
pointer-events: auto;
opacity: 1;
width: 30px;
height: 30px;
border: 0;
background: transparent;
}
.nav {
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin: 15px
}
.nav-abierto {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.nav-cerrado {
opacity: 0;
pointer-events: none;
visibility: hidden
}
.nombre {
  margin: 0 0 0 23px;
  text-align: center;
  border-radius: .2em;
  width: 85%;
  color: #fff;
  font-size: 14px;
  background: #2A2E23;
}
.dummy-content {
  pointer-events: auto;
text-align: left;
left: 4px;
color: #ffffff;
border-radius: .2em;
cursor: auto;
transition: background-color .3s ease;
position: relative;
}
.pop-up {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16.25rem;
  background: rgba(0, 0, 0, 0.938);
  color: white;
  z-index: 10050;
  padding: 1em;
  border-radius: .2em;
  text-align: center;
}
#contador-marcadores {
background: #952A2E;
font-size: 1em;
display: none;
}
#fullscreen-button {
top:  15px;
right:  15px;
border:  0;
display: flex;
flex-direction: column;
}
#fullscreen-button:hover {
  transform: scale(1.125);
}
a-scene video {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  z-index: -2 !important;
}
@media screen and (max-width: 414px) {
#img-fondo{
background-image: url('assets/07ea3b36d3e4a1b1288ff8f44d54df01.jpg');
background-size: 500px;
height:100%;
top: 0;
left: 0;
background-size: cover;
background-position: center;
}
#pantalla-carga{
background: rgba(0, 0, 0, 0);
}
#titulo-principal{
background: rgba(0, 0, 0, 0);
transform: rotate(-20deg);
margin-top: -10rem;
}
#titulo-principal img {
  margin: 0 auto;
  width: 250px;
}
}