/**Navegación principal**/
ul.menu-horizontal {
  background: none;
  color: white;
  display: flex;
  align-items:center;
  padding-left:0 !important;
}
ul.menu-horizontal li {
    background: none;
    border-bottom: 0px;
    margin-left: 10px;
    padding-top: 0;
    padding: 0 8px;
    transition:.5s all;
    border-bottom:2px solid transparent;
}
ul.menu-horizontal li:hover{
    border-color:#fff;
}
ul.menu-horizontal li a {
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.035em;
}
ul.menu-horizontal>li>a{
  min-height:24px;
  display:block; 
}
.menu-horizontal .fa-home{
    font-size:24px !important;
}
ul.menu-horizontal li.VillaBlue a {
  color: var(--color-metge) !important;
}
ul.menu-horizontal li.VillaBlue a:hover {
  color: white !important;
  background: var(--color-metge) !important;
}
ul.menu-horizontal li.azulMarino a {
  color: rgb(0, 51, 132) !important;
}
ul.menu-horizontal li.azulMarino a:hover {
  color: white !important;
  background: rgb(0, 51, 132) !important;
}
ul.horizontal{
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
/*pantone*/
ul.menu-horizontal li.pantone a {
  color: var(--color-natura) !important;
}
ul.menu-horizontal li.pantone a:hover {
  color: white !important;
  background: var(--color-natura) !important;
}
/*ul.menu-horizontal li a:hover {
  color: var(--color-corpo);
  text-shadow: 0 0 8px rgb(0 0 0 / 40%);
}*/
ul.menu-horizontal li:first-child {
  margin-left: 0px;
}
.container-menu {
  display: flex;
  align-items: center;
  margin-top: 9px;
}
/**Menu burger**/
#site-menu li,
#site-menu p {
  padding:5px 0;
  margin: 0px;
  color: #000000;
  text-decoration: none;
  text-transform: none;
  list-style: none;
  text-align: right;
  transition: all 0.5s;
  font-size: calc(20px + (20 - 18) * ((100vw - 300px) / (1600 - 300)));
}

#site-menu p:hover {
  display: block;
  color: var (--color-corpo);
  transition: all 0.5s;
}
.site-menu .drop-down button, .menu-horizontal li button{
    background: transparent;
    color: #fff;
    border: none;
    box-shadow: none;
    font-weight:600;
    font-size:16px;
}
.drop-down button~ul{
    display:none;
}
.menu-horizontal li button{
    display: flex;
    align-items: center;  
}
.site-menu button i, .menu-horizontal button i{
    font-size:14px;
}
.site-menu button i:before, .menu-horizontal button i:before{
    width:24px;
    height:24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* hides toggle handler */
.burguer-menu [type="checkbox"]:checked,
.burguer-menu [type="checkbox"]:not(:checked) {
  /*display: none;*/
  position:absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* menu button & animation */
.menu-button {
  position: relative;
  left: 0px;
  top: -2px;
  z-index: 100;
  display: block;
  width: 50px;
  height: 50px;
  outline: none;
  cursor: pointer;
  transition: 0.5s ease-in-out;
  background:transparent;
  border:none;
}
.menu-button:hover .line:nth-child(2) {
  width: 30%;
}
.menu-button .line {
  position: relative;
  left: 15%;
  width: 70%;
  height: 3px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.5s ease;
  display: block;
}

/*.menu-button .line:nth-child(1) {
  top: 35%;
}
*/
.menu-button .line:nth-child(2),.menu-button .line:nth-child(3) {
  margin-top:5px;
}


/* animate background of lines */
.menu-button:hover .line::after {
  transform: translateX(0);
}

.menu-button .line::after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: rgba(255, 255, 255, 1);
  transform: translateX(100%);
  transition: all 0.25s ease;
}

/*#menu-toggle:checked + .menu-button .line::after {
  background: var(--color-corpo);
}

#menu-toggle:checked + .menu-button {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

#menu-toggle:checked + #menu-button .line:nth-child(1) {
  transform: translateY(5px) rotate(45deg); }

#menu-toggle:checked + #menu-button .line:nth-child(2) {
  transform: scaleX(0);
  opacity: 0;
}

#menu-toggle:checked + #menu-button .line:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg); /* -45deg*/
}
*/
body.menu-open .container-menu .menu-button .line::after {
  background: var(--color-corpo);
}
/*body.menu-open .container-menu .menu-button {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}*/
body.menu-open .container-menu #menu-button .line:nth-child(1) {
  transform: translateY(5px) rotate(45deg); 
}
body.menu-open .container-menu #menu-button .line:nth-child(2){
  transform: scaleX(0);
  opacity: 0;
}
body.menu-open .container-menu #menu-button .line:nth-child(3){
  transform: translateY(-11px) rotate(-45deg);
}

/* animate menu in */

/*#menu-toggle:checked + #menu-button + #site-menu {
  animation: menu-open .8s ease both !important;
}*/
#site-menu.open{
    display:block;
    animation: menu-open .8s ease both !important;
}
#site-menu.open ul > li{
  display: block;
  /*animation: menu-txt-open .5s ease both;*/
}
/*#menu-toggle:checked + #menu-button + #site-menu ul > li,
#site-menu p {
  display: block;
  animation: menu-txt-open 1s ease both;
}
*/
#site-menu {
  position: absolute;
  z-index: 2;
  width: 0px;
  margin-top: 0;
  height: 100vh;
  left: 0px;
  top: 0;
  left: 0;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-corpo);
  animation: menu-closed 0.3s both;
  transition: 0.2s;
  display:none;
}

#site-menu-titles {
  position: absolute;
  top: 10%;
  left: auto;
  right: 33%;
  width: auto;
  padding: 0;
  background: none;
}
.logo-menu {
  margin-bottom: 4vh;
}
.logo-menu img {
  margin-top: -5%;
  position: relative;
  max-width: 140px;
  height: auto;
}
ul#site-menu-titles li .logo-menu a:hover {
  margin-left: 0px !important;
}
ul#site-menu-titles li {
  border-bottom: 0;
  background: none;
  line-height:1.1em;
}
ul#site-menu-titles li a {
  font-family: var(--font-titles);
  color: white;
  font-size: 32px;
  transition: 0.5s all;
  font-weight:400;
}
 ul#site-menu-titles li button{
     padding-right:0;
     font-weight:400;
 }
ul#site-menu-titles a, ul#site-menu-titles li button{
  font-weight:400;
  transition:.5s all;
}
ul#site-menu-titles a:hover,ul#site-menu-titles button:hover{
    font-weight:700 !important;
}
ul#site-menu-titles li.hoteles p a,
ul#site-menu-titles li.level-horizontal p a,
ul#site-menu-titles li button,
ul#site-menu-titles li a{
  font-family: var(--font-txt);
  font-size: 21px;
  letter-spacing: 0.525px;
  font-weight:inherit;
}
ul#site-menu-titles li.hoteles p a{
    font-size:18px;
}
ul#site-menu-titles li.hoteles p {
  line-height: 27px;
}
ul#site-menu-titles li.level-horizontal p a {
  margin-left: 20px;
}

ul#site-menu-titles li.level-horizontal p a:first-child {
  margin-left: 0;
}
@keyframes menu-open {
  100% {
    width: 100vw;
    height: 100vh;
  }
}
@keyframes menu-closed {
  0% {
    width: 100vw;
    height: 100vh;
  }
}
@keyframes menu-txt-open {
  0%,
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/**Submenu hoteles desktop**/
ul.drop-down-1 {
  background: none;
  float: none;
}
.drop-down {
  padding: 20px;
  position: relative;
}
ul.drop-down-1 li a {
  font-size: 18px !important;
  margin-right: -11px !important;
}
ul.drop-down-1 li a:hover {
  margin-right: 10px !important;
}
/*.drop-down.open::after {
  position: absolute;
  content: "\f107";
  font-family: fontawesome;
  color: white;
  font-weight: 9;
  font-size: 18px;
  background-color: transparent;
  top: 11px;
  z-index: 0;
  right: -8px;
  transition: all 0.3s;
}*/
/*#menu-toggle:checked + #menu-button + #site-menu ul.drop-down-1 > li {
  animation: menu-txt-open 0s ease both;
}
#site-menu.open ul.drop-down-1 > li{
    animation: menu-txt-open 0s ease both;
}*/
.drop-down.close {
  float: none;
}
/*.drop-down.close::after {
  position: absolute;
  content: "\f107";
  font-family: fontawesome;
  color: white;
  font-weight: 9;
  font-size: 20px;
  background-color: transparent;
  top: 11px;
  z-index: 0;
  right: -8px;
  transition: all 0.3s;
  transform: rotate(-180deg);
  background-color: transparent;
}*/
/**Imagenes menu principal desktop**/
ul.menu-images {
  position: relative;
  top: 0;
  right: 0;
  width: 30%;
  padding: 0;
  margin: 0px !important;
  float: right;
  background: none;
}
.imageMenu img {
  transition: 0.5s all;
  filter: brightness(0.8);
  width: 110%;
  height: 100%;
  object-fit: cover;
}

ul li.imageMenu.defaultImageMenu,
ul li.imageMenu.hotelesImageMenuActive,
ul li.imageMenu.villaImageMenuActive,
ul li.imageMenu.experienciasImageMenuActive,
ul li.imageMenu.destinosImageMenuActive,
ul li.imageMenu.careImageMenuActive,
ul li.imageMenu.blogImageMenuActive,
ul li.imageMenu.seguroImageMenuActive,
ul li.imageMenu.transferImageMenuActive {
  opacity: 1;
  height: 100vh;
}
ul li.imageMenu {
  top: 50%;
  position: absolute;
  right: 0;
  bottom: 0;
  height: auto;
  left: auto;
  padding: 0px;
  opacity: 0;
  transition: all 0.3s;
  width: 100%;
  padding: 0px !important;
  background: none !important;
}
/**Submenu Horizontal**/
.drop-down-menu.open {
  backdrop-filter: blur(8px);
  display: block;
  padding: 0;
  background: rgb(255 255 255 / 84%);
}
li.drop-down-father a.item-child:after {
  position: absolute;
  content: "\f107";
  font-family: fontawesome;
  color: white;
  font-weight: 9;
  font-size: 10px;
  background-color: transparent;
  top: 0;
  z-index: 0;
  right: -11px;
  transition: all 0.3s;
  height:100%;
}
li.drop-down-father a.item-child:hover.item-child:after {
  transform: rotate(-180deg);
}
.drop-down-menu.expe {
  min-width: 250px;
}
.drop-down-father {
  position: relative;
}
.drop-down-menu {
  display: none;
  position: absolute;
  background: aliceblue;
  display: none;
  min-width: 450px;
  overflow: hidden;
  padding: 10px 0;
  left: 0;
  top: 25px;
  left: -5px;
  padding: 0;
  border-radius: 0 0 3px 3px;
  min-width: 460px !important;
}
.drop-down-menu li a {
  background: none;
  border-radius: 2px;
  float: left;
  margin: 0px !important;
  font-size: 15px;
  margin: 1%;
  padding: 9px 28px;
  text-align: center;
  transition: background-position 0.2s ease;
  width: 100%;
  border-bottom: 1px solid rgb(236, 236, 234);
  font-size: 15px;
  letter-spacing: 0.6px;
}
.drop-down-menu ul li a {
  margin-left: 0px !important;
}
.drop-down-menu li {
  margin-left: 0px !important;
  padding-left: 0px !important;
  text-align: left !important;
}
.drop-down-menu li a {
  transition: 0.5s all;
  text-align: left;
  font-family: var(--font-txt);
  text-transform: none !important;
  color: var(--color-corpo) !important;
  font-size: 14px !important;
  padding: 12px 21px;
}
.drop-down-menu li a:hover {
  background: var(--color-corpo) !important;
  color: white !important;
  opacity: 1 !important;
}
ul.menu-horizontal li a img:not(ul.menu-horizontal li a img.icon-home) {
  max-width: 20px;
  margin-right: 7px;
}
ul.drop-down-menu.expe li a img {
  max-width: 18px;
  height: auto;
  margin-right: 6px;
  transition: all 0.3s ease-in-out 0s;
}
ul.menu-horizontal li a:hover img {
  filter: brightness(0) invert(1);
}
ul.drop-down-menu.expe li a:hover img {
  filter: brightness(0) invert(1);
  transform: rotate(360deg);
}
body.menu-open {
  overflow-y: hidden !important;
}
@media(max-width:1440px){
    ul.menu-horizontal li{
        margin-left:0;
    }
    .header .logo img{
        max-width:160px;
    }
}
 @media(max-width:1024px){
    ul.menu-horizontal{
        display:none;
    }
 }
 /*Menú mobile*/
 .menu-mobile ul{
     text-align:left;
 }
 .menu-mobile ul li{
    padding: 8px 5px;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
 }
 .menu-mobile ul li a{
     color:#fff;
     font-size:20px;
 }
 .menu-mobile ul.submenu-hoteles li a{
     font-size:18px;
 }
 .menu-mobile ul li a.open-submenu{
     display:flex;
     justify-content:space-between;
     align-items:center;
 }
 .menu-mobile ul li a.open-submenu i{
     font-size: 14px;
     padding:5px;
 }
 .menu-mobile .submenu-hoteles{
     display:none;
 }
 @media(min-width:768px) and (max-width:1024px){
    ul.horizontal{
        flex-wrap:wrap;
    }
    #site-menu-titles{
        right:23%;
    }
    ul.menu-images{
        width:20%;
    }
    ul#site-menu-titles li a{
        font-size:18px;
    }
}
 @media(min-width:768px){
     .menu-mobile{
         display:none;
     }
 }