@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Poppins:ital,wght@0,100;0,300;0,400;0,700;0,800;0,900;1,400&display=swap');

:root {
  --dark-color: #171717;
  --light-color: #b99a76;
  --main-color: #402c1a;
  --secondary-color: #241e18;
  --third-color: #1F3547;


  --booking_background: #E6DFCB;
  --booking_foreground: #171717;

  --hex-booking-logo-color1: invert(0%) sepia(10%) saturate(3206%) hue-rotate(202deg) brightness(94%) contrast(82%);
  --hex-booking-logo-color2: invert(100%) sepia(5%) saturate(1380%) hue-rotate(292deg) brightness(82%) contrast(89%);
  --hex-logo-blue: invert(17%) sepia(15%) saturate(1726%) hue-rotate(165deg) brightness(93%) contrast(91%);

  /*--hex-white: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%); */

  --hex-white: invert(71%) sepia(59%) saturate(215%) hue-rotate(352deg) brightness(81%) contrast(84%);

  /*
      https://codepen.io/sosuke/pen/Pjoqqp
      Convierte un código de color RGB a formato hex
  */

  --hex-dark-color: invert(6%) sepia(7%) saturate(7%) hue-rotate(333deg) brightness(102%) contrast(94%);
  --hex-light-color: invert(98%) sepia(77%) saturate(245%) hue-rotate(327deg) brightness(92%) contrast(94%);
  --hex-main-color: invert(19%) sepia(74%) saturate(2960%) hue-rotate(354deg) brightness(104%) contrast(81%);
  --hex-secondary-color: invert(100%) sepia(5%) saturate(1380%) hue-rotate(292deg) brightness(82%) contrast(89%);
  --hex-disabled-color: invert(84%) sepia(0%) saturate(0%) hue-rotate(104deg) brightness(97%) contrast(96%);
  --hex-allergens-color: invert(66%) sepia(0%) saturate(25%) hue-rotate(224deg) brightness(96%) contrast(89%);

  --hex-black-dark-color: invert(100%) sepia(0%) saturate(0%) hue-rotate(140deg) brightness(101%) contrast(102%);
  --hex-black-light-color: invert(100%) sepia(0%) saturate(1%) hue-rotate(329deg) brightness(99%) contrast(102%);
  --hex-black-main-color: invert(19%) sepia(74%) saturate(2960%) hue-rotate(354deg) brightness(104%) contrast(81%);
}

body { font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal; }

h1,h2,h3,h4,h5{   font-family: "Italiana", sans-serif;font-weight: 400; font-style: normal; }



img.logo-header {
  /*filter: none;*/
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
  width: 100%; max-width: 240px;
}

/*
.col-ico-menu:hover img.logo-header{
  filter: none;
}*/

.menu-logo img{
  max-width: 200px;
}

.buttonGrid-item a{ color: var(--light-color); }
.buttonGrid-item a:hover{ color: var(--main-color); }

.set-background-head{
  background-color: var(--secondary-color);
}

.set-background-head img.main_ico_bars{
  /*filter: var(--hex-light-color);*/ width: 60px;
}

.footer-social-icons a:hover img{
  filter: var(--hex-main-color);
}

.main_logo_topbar{
  max-width: 240px;
  filter: var(--hex-light-color);
}

.set-background-head img.main_logo_topbar{
  max-width: 240px;
}


.menu-logo img {
  max-width: 250px;
	filter: var(--hex-dark-color);
}

.main_ico_bars {
	filter: var(--hex-main-color);
}

.floating_content{
	background-color: var(--secondary-color);	
}


/* 2024 */

@media(max-width: 991px){
  .hide-on-mobile{ display: none; }
}

.btn{ margin-bottom: 10px; }

.dark-color{ background-color: var(--dark-color); color: var(--light-color); }
.secondary-color{ background-color: var(--secondary-color); color: var(--light-color); }
.color-2{ background-color: var(--secondary-color); color: var(--light-color); }
.color-3{ background-color: var(--third-color); color: var(--light-color); }

#menu_principal{ width: 100vw; background-color: var(--main-color); padding-top: 15px; padding-bottom: 15px; padding-left: 75px; padding-right: 75px; transition: all .8s ease; }

#menu_principal.sticky{ position: fixed; top: 0px; z-index: 999; padding-top: 0px; padding-bottom: 0px; }

#menu_principal.content-menu{ position: fixed; top: 0px; z-index: 999; padding-top: 10px; padding-bottom: 10px; }

#menu_principal ul { overflow-x:hidden; white-space:nowrap; height:2em; width:100%; display:inline; }

#menu_principal li { display:inline; margin: 10px; text-transform: uppercase; font-family: var(--title-font); font-size: 1rem; font-weight: 400; }

#menu_principal a { color: var(--light-color); }
#menu_principal a:hover{ color: var(--dark-color);  }

#menu_principal .logo img { filter: var(--hex-white); width: 100%; max-width: 200px; }

#menu_principal #logo_themile_sticky { display: none; }
#menu_principal #logo_themile_sticky { height: 80px; }

.menu-desktop{ display: inline-block; width: 100%; overflow: hidden; overflow-y: scroll;  }

#menu_principal li.active { font-weight: bold; border-width: 0px; border-bottom-width: 4px; border-style: solid; border-color: var(--light-color); }

#button_menu_mobile{ position: absolute; top: 50%; right: 20px; transform: translateY(-50%); cursor: pointer; display: none; }

#button_menu_mobile_close{ position: absolute; top: 20px; right: 20px; cursor: pointer; }
#button_menu_mobile_close img { width: 40px; }

#button_menu_mobile img{ width: 40px; filter: var(--hex-logo-blue); }
#button_menu_mobile:hover img { filter: var(--hex-black-dark-color); }

#menu_principal_mobile { position: fixed; left: 100vw; width: 100vw; top: 0px; height: 100vh; background-color: var(--main-color); color: var(--secondary-color); display: none; transition: all .5s ease; z-index: 9999; text-align: center; padding: 20px; padding-top: 60px; overflow: hidden; overflow-y: scroll; }

#menu_principal_mobile.showed{ left: 0px; }

#logo_mobile{ width: 100%; max-width: 260px;}
#logo_b21_mobile{ width: 100%; max-width: 160px; margin-top: 20px;}

.menu_mobile_list{ padding-top: 60px; }

.menu_mobile_list a { color: var(--dark-color); }

.menu_mobile_list li { font-size: 1.5rem; text-transform: uppercase; margin-bottom: 20px; font-weight: 700; line-height: 100%; }

@media (max-width: 1080px){
  .logo{ text-align: center; }
  #menu_principal_mobile { display: inline; }
  #button_menu_mobile{ display: inline; }
}

@media (max-width: 767px){
  #menu_principal{ padding-left: 20px; padding-right: 20px; }
}


.footer{ background-color: var(--dark-color); }


#header_info{ width: 100vw; height: 100vh; overflow: hidden; background-position: center; background-size: cover; position: relative; color: var(--light-color); background-color: var(--dark-color); }

#header_info #image_hover{ position: absolute; width: 80vw; max-width: 600px; margin-left: 0px; opacity: 1; z-index: 5; }
#image_hover img { width: 100%; object-fit: contain; }
#header_info #image_hover.center{ top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
#header_info #image_hover.center-bottom{ bottom: 100px; left: 50%; transform: translateX(-50%); text-align: center; }

#image_hover #header_button{ margin-top: 60px; }


#header_info #image_hover.animation-on-load{ transition: all 1s ease; }
#header_info #image_hover.animation-on-load.hidden{ opacity: 0;  transform: translate(-50%,-50%); }

#header_info .image { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

#header_info .image img { width: 100%; height: 100%; object-fit: cover; }

.info{ position: absolute; width: 30%; color: var(--light-color); z-index: 5; }

.info.bottom-left{ left: 60px; bottom: 60px; text-align: left; }

.info.bottom-right{ right: 60px; bottom: 60px; text-align: right; }

.icon_info{ position: absolute; }
.icon_info img{ width: 20px; filter: var(--hex-black-main-color);}
.info-no-desktop { text-align: center; margin-top: 20px; display: none; }
#header_info #image_hover .info-no-desktop img{ width: 20px; filter: var(--hex-black-main-color); }

.info.bottom-left .icon_info{ left: 0px; }
.info.bottom-right .icon_info{ right: 0px; }

.text_info{ color: #ffffff; text-transform: uppercase; font-size: .8rem; }
.info.bottom-left .text_info { padding-left: 35px; }
.info.bottom-right .text_info { padding-right: 35px; }

#header_button .btn-main { background-color: var(--light-color); }
#header_button .btn-main:hover { background-color: var(--main-color); color: var(--light-color); }

@media (max-width: 991px){
  #header_info{  }
  #header_info #image_hover.center-bottom{ bottom: 20px }
  .info { display: none; }
  .info-no-desktop { display: inherit; }
}


/*.section_19{ padding-top: 80px; padding-bottom: 80px;}*/

.section_19 { font-size: 1.2rem; }

.section_19.dark-color{ background-color: var(--dark-color); color: var(--light-color); }

.section_19 .text.order-1{ padding-right: 15%;  }

.section_19 .text.order-2{ padding-left: 15%;  }

h2 { color: var(--main-color); text-transform: uppercase; font-size: 3.4rem; line-height: 90%; }


.section_19 .image{ width: 100%; overflow: hidden; border-radius: 26px; }

.section_19 .image img{ width: 100%; }

.section_19 h2{ margin-bottom: 40px; color: var(--light-color); }


.section_19 .image.square { width: 100%; aspect-ratio: 1/1; }
.section_19 .image.square img { width: 100%; height: 100%; object-fit: cover; }

.section_19 .image.vertical { width: 100%; aspect-ratio: 2/2.5; }
.section_19 .image.vertical img { width: 100%; height: 100%; object-fit: cover; }

.section_19 .image.horizontal { width: 100%; aspect-ratio: 2.5/2; }
.section_19 .image.horizontal img { width: 100%; height: 100%; object-fit: cover; }


@media (max-width: 991px){
.section_19 .text.order-1{ padding-right: 0px; margin-bottom: 60px;  }

.section_19 .text.order-2{ padding-left: 0px; margin-top: 60px;  }  

}


.disordered-images{ position: relative; }
.section_19 .image-disordered{ position: absolute; overflow: hidden; }
.section_19 .image-disordered.image-1{ width: calc(65% - 40px); top: 30px; left: 0px; aspect-ratio: 2/3; }
.section_19 .image-disordered.images-others{ width: calc(35% - 20px); top: -120px; left: calc(65%);}

.section_19 .first-image{ border-radius: 20px;}
.section_19 .image-1{ border-radius: 20px;}
.section_19 .image-disordered .image-2{ width: 100%; aspect-ratio: 1 / 1.5; margin-bottom: 20px; border-radius: 20px; }
.section_19 .image-disordered .image-3{ width: 100%; aspect-ratio: 1 / 1.8; border-radius: 20px; }

.section_19 .image-disordered img{ width: 100%; object-fit: cover; }


@media (max-width: 981px){

.section_19 { padding-top: 20px; }
.section_19 .image-disordered{ position: relative; }
.section_19 .image-1{ margin-bottom: 20px; }
.section_19 .image-disordered.image-1{ width: calc(100%); top: initial; left: initial; aspect-ratio: 1 / 1; }
.section_19 .image-disordered.images-others{ width: calc(100%); top: initial; left: initial;}
}



.slider_cards{
  width: 100%; height: auto; overflow-x: scroll;
  overflow-y: hidden; white-space: nowrap; 
  scrollbar-width: none;
}

.card_item{
  width: calc(33.3333333% - 20px); aspect-ratio: 2/3; background-color: var(--booking_foreground); margin: 10px; display: inline-block; position: relative; cursor: pointer; background-position: center; background-size: cover;white-space: initial; transition: all .5s ease; border-radius: 20px;
}

.card_gradient{ position: absolute; z-index: 1; width: 100%; height: 100%; display: none;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%); border-radius: 20px;
}

.slider_cards.style-2 .card_gradient{
background: #C52B24;
background: linear-gradient(0deg,rgba(197, 43, 36, 1) 0%, rgba(255, 255, 255, 0) 80%);
display: inherit;
}

.card_info{ position: absolute; bottom: 40px; left: 40px; color: var(--main-color); width: calc(100% - 80px); transition: all .5s ease; z-index: 2; }

.card_title{ font-size: 2.4rem; font-weight: 400; text-transform: uppercase; line-height: 100%; font-family: "Italiana", sans-serif;font-weight: 400; font-style: normal;  }

.card_subtitle{ font-size: 1.2rem; text-transform: uppercase; line-height: 90%;  }

.card_text{ font-size: .9rem; color: var(--main-color); margin-top: 20px; display: none; line-height: 120%;  }

.slider_cards.style-2 .card_title { text-align: center; color: var(--light-color); font-family: "Poppins", sans-serif; font-weight: 800; }


.card_item:hover {  }
.card_item.hover .card_text{ display: inherit; }
.card_item:hover .card_gradient{ display: inherit; }

.control-slider{ position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; }
.control-slider.left{ left: 20px; }
.control-slider.right{ right: 20px; }
.control-slider img{ filter: var(--hex-main-color); width: 50px; }

@media (max-width: 990px) {
  .card_item{ width: calc(50% - 20px); }
}

@media (max-width: 767px) {
  .card_item{ width: calc(100% - 20px); }
}



.show-on-view{ opacity: 0; transition: all .6s ease; transform: translateX(-100px); }
.show-on-view.show { opacity: 1; transform: translateX(0px);}

.inside-header{ height: 60vh; }

.whatsapp{ transition: all 1s ease; }
#whatsapp_button{ opacity: 0; transition: all .6s ease; right: -200px;  }
#whatsapp_button.show{ opacity: 1; right: 20px;  }

@media(max-width: 991px){
  #whatsapp_button.show{ right: 10px;  }
}




.btn-menu { font-size: 1rem; background-color: var(--dark-color); border-width: 1px; border-style: solid; border-color: var(--light-color); color: var(--light-color); }
.btn-menu:hover { background-color: var(--main-color); color: var(--light-color); border-color: var(--main-color); }

.btn-booking{ font-size: 1rem; background-color: var(--main-color); border-width: 1px; border-style: solid; border-color: var(--main-color); color: var(--light-color); }
.btn-booking:hover { background-color: var(--light-color); color: var(--main-color); border-color: var(--light-color); }


.section-4.dark { background-color: var(--dark-color); }

.section-4.dark h1, .section-4.dark h2 { color: var(--light-color);  }
.section-4 h1.main-color { color: var(--main-color); }

.section-21.dark { background-color: var(--dark-color); }

.footer { background-color: var(--dark-color);  }


section.light{ background-color: var(--light-color); }

.text.order-1{ padding-right: 15%;  }

.text.order-2{ padding-left: 15%;  }

@media (max-width: 991px){
  .text.order-1{ padding-right: 0px; margin-bottom: 60px;  }

  .text.order-2{ padding-left: 0px; margin-top: 60px;  }  
}


.section_23{ position: relative; background-color: #ff0000; font-size: 1.2rem; }

.section_23 .image { position: absolute; z-index: 1; width: 50%; height: 100%; }

.section_23 .image.right { left: 50%; }

.section_23 .image img{ width: 100%; height: 100%; object-fit: cover; }

.section_23 .text.left { padding-left: 10%; }
.section_23 .text.right { padding-right: 10%; }

@media (max-width: 991px){
  .section_23 { text-align: center; }
  .section_23 .image{ display: none; }
  .section_19 .text.left, .section_23 .text.left { padding-left: 20px; padding-right: 20px; }
  .section_19 .text.right, .section_23 .text.right { padding-left: 20px; padding-right: 20px; }  
}


p.main-color { color: var(--main-color); font-size: 1rem; }

p.main-color img{ filter: var(--hex-main-color); }

.section_23 p.main-color img { width: 32px; }

.default_overlay{ position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; transform: translate(-50%,-50%); z-index: 3; opacity: .8;}

.default_overlay img { width: 100%; height: 100%; object-fit: cover; }

.videoShow{ position: absolute; z-index: 2; opacity: 1; width: 100%; height: 100%; }
.videoOverlay{ width: 100%; height: 100%; position: absolute; background-color: #000; top: 0px; left: 0px; opacity: .4; }

@media(max-width: 960px){
  h2 { font-size: 2.5rem; }
  #contact_content h2 { color: var(--light-color); }  
  .section_19 { font-weight: 400; }
  .section_19 h2, .section_23 h2 { font-size: 2.5rem; }
  .section_23{ font-weight: 400; }
  #cookies_message p { font-weight: 400; }
  .calendar-selectable-day { font-weight: 400; }
  #booking-screen h3, #booking-screen h5 { font-family: "Poppins", sans-serif;  }
}