*, *::before, *::after {box-sizing: border-box;}

html {
   height: 100%;
}

body {
   height: 100%;
   background-color: #FFF9EF;
   position: relative;
   font-family: 'amifer';
   font-weight: 400;
}

.fm-arpona{
   font-family: 'arpona' !important;
}

.fw-extrabold{
   font-weight: 800 !important;
}

.fs-7 {font-size: .95rem;}
.fs-8 {font-size: .8rem;}
.fs-9 {font-size: .7rem;}


.text-yellow{
   color: #E7B251 !important;
}

.text-gray{
   color: #4B4B4B !important;
}

.btn-outline-gray {
   color: #4B4B4B;
   border-color: #4B4B4B;
   border-width: 2px;
   font-weight: 500;
   padding: 0.75rem 2rem;
}

.btn-outline-gray:hover {
   background-color: #4B4B4B;
   border-color: #4B4B4B;
   color: #FFF9EF;
}

.btn-outline-yellow {
   color: #E7B251;
   border-color: #E7B251;
   border-width: 2px;
   font-weight: 500;
   padding: 0.75rem 2rem;
}

.btn-outline-yellow:hover {
   background-color: #E7B251;
   border-color: #E7B251;
   color: #1E1E1E;
}

.hotel .cama, .restaurante .cafe{
   transition: all 0.3s ease;
}
.hotel:hover .cama, .restaurante:hover .cafe{
   scale:  1.15 !important;
}


.btn-cta{
   font-size: clamp(0.8rem, 2vw, 1rem) !important;
}

.fs-title {
   font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.bg-dark{
   background-color: #1E1E1E !important;
}


/* Slide effect */   
@media (min-width: 1024px) {      
   .hotel{
      height: 100%;
      width: 50%;
      flex: 0 0 50%;
   }
   
   .restaurante{
      height: 100%;
      width: 50%;
      flex: 0 0 50%;
   }
   
   .content-wrapper {
      padding: 3rem;
   }
}

/* Responsive - Accordion/Click layout */
@media (max-width: 1023.8px) {
   
   .container-fluid {
      flex-direction: column !important;
   }
   .description {
      display: none;
   }
   
   .hotel, .restaurante {
      width: 100% !important;
      height: 50% !important;
   }
   
   .content-wrapper {
      padding: 2rem;
      max-height: 100%;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
   }
   
   .hotel .cama {
      width: 100% !important;
      height: auto !important;
      left: 0 !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
   }
}