*{
   --headerHeight: 94px;
}
header.header {
   height: var(--headerHeight);
}
#pano{
   width: 100%;
   height: calc(100% - var(--headerHeight) - 76px);
}


.logospie img {max-height: 36px}

@media screen and (max-width: 900px) {
   *{
      --headerHeight: 70px;
   }
}

footer .d-flex{
   flex-direction: row !important;
}

@media (max-width: 992px){
   .container, .container-lg, .container-md, .container-sm{
      max-width: 100% !important;
   }
}

@media screen and (max-width: 800px) {
   .logospie img{
      max-height: 50px;
   }
}
@media screen and (max-width: 650px) {
   .logospie img{
      max-height: 40px;
   }
}
@media screen and (max-width: 500px) {
   .logospie img{
      max-height: 25px;
   }
}


footer{
   z-index: 100;
   position: absolute; 
}

#hsOpened{
   --hsSize: 42px;

   display: none;
   flex-direction: row;
   align-items: center;
   justify-content: center;

   position: fixed;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;

   /* background: rgba(0, 0, 0, 0.5); */

   pointer-events: all;
   /* user-select: all; */

}

#hsOpened.opened{
   display: flex;
}

#hs{
   width: var(--hsSize);
   height: var(--hsSize);
   /* background-image: url("../imgs/hotspot-alt@2x-sombra-rotado.png"); */
   background-image: url("../imgs/hotspot-alt@2x-sombra.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   transform-origin: center;
   transform:  translateY(8px) rotate(45deg);


   cursor: pointer;
}

@media screen and (max-width: 900px) {
   #hs{
      transform: translateY(-30px) rotate(45deg);
   }

   .msg_modelo3d {display: none!important;}

   .torrepuertamovil {width: 124px!important;}
}

#hsDiv{
   position: absolute;
   width: calc(50% - 1vh - var(--hsSize)/2);
   left: auto;
   right: 1vh;
   padding: calc(5px + 1vw) calc(5px + 1vh);
   background-color: #00000099;
   border-radius: 15px 0 0 15px;
   border: solid 2px white;

   transition: all 1s ease;
   opacity: 0;

   max-height: calc(100vh - 4px - 132px - 350px);
   overflow: auto;
   
}

#hsDiv.opened{
   opacity: 1;

}

#hsTitle{
   font-family: "EB Garamond", serif;
   font-size: 1.2em;
   font-weight: bold;
   
}

#hsContent {
   font-size: 14px;
   font-family: Montserrat, sans-serif;
   
}

.oculto {display: none;}


.language-selected {
   border: solid 4px #00266C;
   padding: 2px;
   pointer-events: none;}


   #txt-intro {padding: 5%; width: 80%; margin: auto; text-align: justify;}


   @media screen and (max-width: 768px) {
      #txt-intro{
         width: 95%; text-align: left;
      }
   }

   .msg_masInfo, .msg_visit {margin-right: 20px;}


   /* =========  MODAL DE MÁS IINFORMACIÓN  ======= */


    .modal {
      display: none; 
      position: fixed; 
      z-index: 101; 
      padding-top: 100px; 
      left: 0;
      top: 0;
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: rgba(0,0,0,0.5); /* Black background with opacity */
      transform: translateY(-50%);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .transicionar {
      opacity: 1;
      transform: translateY(0);
    }

    /* Modal content box */
    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      margin-bottom: 40px;
      border: 1px solid #888;
      width: 50%;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }


    @media screen and (max-width: 768px) {
      .modal-content {
         width: 85%; 
      }

      .modal { padding-top: 134px;}

   }
    /* Close button (X) */
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
      display: block;
border: solid 2px;
width: 28px;
height: 28px;
border-radius: 14px;
text-align: center;
line-height: 21px;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
    }




    @media screen and (max-width: 768px) {
      .d-none-toto {position: fixed;
         top: 5px;
         right: 5px;}
      
      .torrepuertamovil {width: 124px!important;}

   }