/*   
Theme Name: Anna
Description: Un tema desarrollado para LaBase
Author: W.Wallace
Version: 1.99
*/



@font-face {
    font-family: Batusa;
    src: url(https://annamanantialdeleyenda.es/wp-content/themes/anna/fonts/batusa.otf) format('otf'),
    url(https://annamanantialdeleyenda.es/wp-content/themes/anna/fonts/batusa.woff2) format('woff2'),
    url(https://annamanantialdeleyenda.es/wp-content/themes/anna/fonts/batusa.woff) format('woff');
  }
  html {-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
    font-smooth: always; text-rendering: optimizeLegibility; margin: 0; padding: 0;}
  body {margin: 0; padding: 0; font-family: Batusa, serif; font-weight: 400;}
  a {text-decoration: none; color: inherit;}
  #header {}
  .header {width: 90%; padding: 0 5% 0 5%; max-width: 1400px; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; margin: 32px auto; align-items: center;}
  .header > div:first-of-type {grid-column: span 2;}
  .header > div:nth-of-type(2) {grid-column: span 8; justify-self: flex-end;}
  .header > div:last-of-type {grid-column: span 2; justify-self: flex-end;}
  .menu {list-style: none; margin: 0; padding: 0; display: inline; display: grid; column-gap: 20px; grid-auto-flow: column;}
  .entradas {display: flex; column-gap: 8px;}
  .menu a {text-decoration: none; color: inherit;}
  .menu a:hover {color:#C06F1C;}

  #footer {background-image: url(https://annamanantialdeleyenda.es/wp-content/themes/anna/imatges/anna_footer_back.svg); background-position: 85% center; background-repeat: no-repeat; background-size: 50%;}
  .footer {width: 90%; padding: 0 5% 0 5%; max-width: 1400px; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; margin: 0 auto 0 auto; align-items: center; padding-bottom: 64px; padding-top: 32px;}
  .footer > div:first-of-type {grid-column: span 12; text-align: center;}
  .footer > div:last-of-type {grid-column: span 12; justify-self: center; }
    .l-f {display: flex; align-content: center; align-items: center; column-gap: 20px; width: max-content; margin: 0 auto; }
  #mapa {background-color: #D7AD00;}
  .mapa {width: 90%; padding: 92px 5% 92px 5%; max-width: 1400px; display: grid; grid-template-columns: repeat(1,1fr); margin: 0 auto;  }
  .mapa h2 {font-size: 36px; line-height: 120%; font-weight: 400; text-align: center; color: #fff; padding: 0; margin: 0; max-width: 75%; margin: 0 auto; letter-spacing: -0.05vw;}
   h3 {font-size: calc(18px + 0.75vw); line-height: 120%; font-weight: 400; text-align: center; color: #fff; padding: 0; margin: 0;}
  .mapa > div:last-of-type {grid-column: span 12;}

  .iframe {height: 75vh;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    }
  iframe {position: relative;
    top: -70px;
    border: none;
    display: block;}
  #hero {background-image: url(https://annamanantialdeleyenda.es/wp-content/themes/anna/imatges/anna_hero_back.jpg); background-size: cover; background-position: center center;}
  .hero {width: 90%; padding: 0 5% 0 5%; max-width: 1400px; display: grid; grid-template-columns: repeat(1,1fr); margin: 0 auto; align-items: center; height: calc(100vh - var(--header-height) - 64px);}
  .hero h1 {font-size: calc(48px + 3vw); line-height: 90%; font-weight: 400; text-align: center; color: #fff; padding: 0; margin: 0; letter-spacing: -0.25vw;}

  #natura {background-color: #439DA9; margin-top: -80px;}
  .natura {width: 90%; padding: 92px 5% 92px 5%; max-width: 1400px; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; margin: 0 auto; align-items: center;}
  .seccion {grid-column: span 12; display: grid; justify-items: center; row-gap: 32px;}
  .seccion h3, .mapa h3 {font-size: calc(24px + 0.75vw); line-height: 120%; font-weight: 400;}
  #naturas {background-color: #439DA9;}
  .naturas {width: 100%; padding: 0 0 92px 0;  display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; margin: 0 0 0 auto; align-items: center;}
  .naturas-items {grid-auto-flow: column; grid-column: span 12;
    display: grid;
    column-gap: 32px;
    overflow-x: scroll; padding-left: 5%;}
  .naturas-item {min-width: 35vw;}
  .naturas-item:first-of-type {}
  .naturas-item:last-of-type {padding-right: 5%; }
  .naturas-item p {max-width: 80%; color: #fff; margin-bottom: 16px;}
  .naturas-item h3 {text-align: left; margin-top: 16px;}
  .naturas-item img {width: 100%; aspect-ratio: 4/3; object-fit: cover;}
  .ubicacion {position: relative; padding-left: 32px;}
  .entradas {position: relative; padding-left: 48px;}

  .ubicacion::before {content: url(https://annamanantialdeleyenda.es/wp-content/themes/anna/imatges/anna_ubicacion.svg); position: absolute; margin-left: -32px; margin-top: 4px;}

  .extras {display: flex; column-gap: 32px; padding-bottom: 0px;}

  #leyenda {background-color: #C06F1C;}
  .leyenda {width: 90%; padding: 92px 5% 92px 5%; max-width: 1400px; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; margin: 0 auto; align-items: center;}

  #leyendas {background-color: #C06F1C;}
  .leyendas {width: 90%; padding: 0 5% 144px 5%; max-width: 1400px; display: grid; grid-template-columns: repeat(1,1fr); margin: 0 auto;  }
  .leyendas > div:first-of-type {grid-column: span 12;}
  .leyendas > div:first-of-type img {width: 100%; aspect-ratio: 16 /9; object-fit: cover;}
  .leyendas p {max-width: 80%; color: #fff; margin-bottom: 16px;}
  .leyendas h3 {text-align: left; margin-top: 16px;}
  .leyendas > div:nth-of-type(2) {display: grid; grid-column: span 12; grid-template-columns: 1fr 1fr; column-gap: 32px;  padding-top: 92px; }
  .leyendas > div:nth-of-type(2) > div {display: grid; }
  .leyendas > div:nth-of-type(2) > div:first-of-type {display: grid; grid-template-columns: repeat(6,1fr); column-gap: 32px; row-gap: 92px; }
  .leyendas > div:nth-of-type(2) > div:first-of-type > div:first-of-type {grid-column: span 6;}
  .leyendas > div:nth-of-type(2) > div:first-of-type > div:first-of-type > img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
  .leyendas > div:nth-of-type(2) > div:first-of-type > div:last-of-type {grid-column: span 5;}
  .leyendas > div:nth-of-type(2) > div:first-of-type > div:last-of-type > img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}

  .leyendas > div:nth-of-type(2) > div:last-of-type {display: grid; grid-template-columns: repeat(6,1fr); column-gap: 32px; row-gap: 92px;}
  .leyendas > div:nth-of-type(2) > div:last-of-type > div:first-of-type {grid-column: 2 / span 5;}
  .leyendas > div:nth-of-type(2) > div:last-of-type > div:first-of-type > img {width: 100%; aspect-ratio: 3 / 4; object-fit: cover;}
  .leyendas > div:nth-of-type(2) > div:last-of-type > div:last-of-type {grid-column: span 6;}
  .leyendas > div:nth-of-type(2) > div:last-of-type > div:last-of-type > img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}

  #sendas {background-color: #6EB478;}
  .sendas {width: 90%; padding: 92px 5% 144px 5%; max-width: 1400px; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; row-gap: 92px; margin: 0 auto; align-items: center;}
  .sendas > div {grid-column: span 6;}
  .sendas > div:last-of-type {grid-column: 8 / span 5;}
  .sendas > div:last-of-type img { aspect-ratio: 3 / 4; object-fit: cover;}
  .sendas > div:first-of-type img {width: unset;}
  .sendas img {width: 100%;}
  .sendas p {max-width: 80%; color: #fff; margin-bottom: 16px;}
  .sendas h3 {text-align: left; margin-top: 16px;}
  .sendas > div:first-of-type h3 {text-align: center;}

  #gastro {background-color: #D7AD00;}
  .gastro {width: 90%; padding: 92px 5% 32px 5%; max-width: 1400px; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; margin: 0 auto; align-items: center;}
  #gastros {background-color: #D7AD00;}
  .gastros {width: 100%; padding: 0 0 92px 0;  display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; margin: 0 0 0 auto; align-items: center;}
  .gastros-items { grid-template-columns: repeat(12, 1fr); grid-column: span 12;
    display: grid;
    justify-items: center; }
  .gastros-item {grid-column: span 3;  display: grid; justify-items: center; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 32px; padding-bottom: 64px; width: 100%;}
  .gastros-items > div:not(:nth-child(4n)),
  .gastros.items > div:not(:nth-child(4n+4)) {
    border-right: 1px solid rgba(255,255,255,0.2);
  }
  .gastros-items > div:nth-last-child(-n+4) {
    border-bottom: unset;
  }
  .gastros p {color: #fff;}
  .gastros h3 {font-size: calc(18px + 0.25vw); line-height: 120%;}
  .gastros .extras {padding-top: 16px;}
  .gastros-items h3, .gastros-items .extras {padding-left: 5%; padding-right: 5%;}
  .info::before {content: url(https://annamanantialdeleyenda.es/wp-content/themes/anna/imatges/anna_info.svg); position: absolute; margin-left: -32px; margin-top: 10px;}
  .telefono::before {content: url(https://annamanantialdeleyenda.es/wp-content/themes/anna/imatges/anna_telefono.svg); position: absolute; margin-left: -32px; margin-top: 10px;}
  .telefono {position: relative; padding-left: 24px;}
  .info {position: relative; padding-left: 24px;}

  #hostel {background-color: #2B80C8;}
  .hostel {width: 90%; padding: 92px 5% 32px 5%; max-width: 1400px; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; margin: 0 auto; align-items: center;}
  #hostels {background-color: #2B80C8;}
  .hostels {width: 100%; padding: 0 0 92px 0;  display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; margin: 0 0 0 auto; align-items: center;}
  .hostels-items { grid-template-columns: repeat(12, 1fr); grid-column: span 12;
    display: grid;
    justify-items: center; }
  .hostels-item {grid-column: span 3;  display: grid; justify-items: center; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 32px; padding-bottom: 64px; width: 100%;}
  .hostels-items > div:not(:nth-child(4n)),
  .hostels.items > div:not(:nth-child(4n+4)) {
    border-right: 1px solid rgba(255,255,255,0.2);
  }
  .hostels-items > div:nth-last-child(-n+4) {
    border-bottom: unset;
  }
  .hostels p {color: #fff;}
  .hostels h3 {font-size: calc(18px + 0.25vw); line-height: 120%;}
  .hostels .extras {padding-top: 32px;}
  .hostels-items h3, .hostels-items .extras {padding-left: 5%; padding-right: 5%;}
  .info::before {content: url(https://annamanantialdeleyenda.es/wp-content/themes/anna/imatges/anna_info.svg); position: absolute; margin-left: -32px; margin-top: 10px;}
  .telefono::before {content: url(https://annamanantialdeleyenda.es/wp-content/themes/anna/imatges/anna_telefono.svg); position: absolute; margin-left: -32px; margin-top: 10px;}
  .telefono {position: relative; padding-left: 24px;}
  .info {position: relative; padding-left: 24px;}

  @media only screen and (max-width: 1480px) {


    
    .hostels-item, .gastros-item {grid-column: span 4;  display: grid; justify-items: center; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 32px; padding-bottom: 64px; width: 100%;}
    .hostels-items > div:not(:nth-child(3n)),
    .hostels.items > div:not(:nth-child(3n+3)),
    .gastros-items > div:not(:nth-child(3n)),
    .gastros.items > div:not(:nth-child(3n+3))  {
      border-right: 1px solid rgba(255,255,255,0.2);
    }
    .hostels-items > div:nth-last-child(-n+3),   .gastros-items > div:nth-last-child(-n+3) {
      
      border-bottom: unset;
  }
  .col3 {display: none;}
}

@media only screen and (max-width: 1024px) {


    
  .hostels-item, .gastros-item {grid-column: span 6;  display: grid; justify-items: center; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 32px; padding-bottom: 64px; width: 100%;}
  .hostels-items > div:not(:nth-child(3n)),
  .hostels.items > div:not(:nth-child(3n+3)),
  .gastros-items > div:not(:nth-child(3n)),
  .gastros.items > div:not(:nth-child(3n+3))  {
    border-right: 1px solid rgba(255,255,255,0.2);
  }
  .hostels-items > div:nth-last-child(-n+3),   .gastros-items > div:nth-last-child(-n+3) {
    
    border-bottom: unset;
}
.col2, .col3 {display: none;}
.naturas-item {
  min-width: 55vw;
}

}

@media only screen and (max-width: 890px) {
  .leyendas > div:nth-of-type(2) {

    grid-template-columns: 1fr;
    column-gap: unset;

}

.leyendas > div:nth-of-type(2) > div:first-of-type > div:last-of-type {
  grid-column: span 12;
}
.leyendas > div:nth-of-type(2) > div:last-of-type > div:first-of-type {
  grid-column: span 12;
}
.leyendas > div:nth-of-type(2) > div:last-of-type > div:last-of-type {
  grid-column: span 12;
}
.leyendas > div:nth-of-type(2) > div:last-of-type {
  padding-top: 92px;
}
.leyendas > div:nth-of-type(2) > div:first-of-type > div:first-of-type {
  grid-column: span 12;
}
.sendas > div {
  grid-column: span 12;
}
.sendas > div:last-of-type {
  grid-column: span 12;
}
.header > div:first-of-type {
  grid-column: span 12;
  justify-self: center;
  }
  .header > div:nth-of-type(2) {
    grid-column: span 12;
    justify-self: center;
    padding-top: 16px;
}
.header > div:last-of-type {
  grid-column: span 12;
  justify-self: center;
  margin-top: 16px;
}
.entradas {
  padding-left: unset;
}
.footer > div:first-of-type {
  grid-column: span 12;
  justify-self: center;
}
.footer > div:last-of-type {
  grid-column: span 12;
  justify-self: center;
  padding-top: 16px;
}
.l-f {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  align-items: center;
  column-gap: 20px;
  row-gap: 20px;
  width: max-content;
  margin: 0 auto;
  justify-content: center;
  justify-items: center;
}
.l-f img:first-of-type {height: 48px;}
.l-f img:last-of-type {height: 32px;}
}




@media only screen and (max-width: 480px) {

  .leyendas > div:nth-of-type(2) > div:first-of-type {

    column-gap: unset;
  
  }
  .leyendas > div:nth-of-type(2) > div:first-of-type {
  
    column-gap: unset;
  
  }
  .sendas {
  
    column-gap: unset;
  
  }
  .leyendas > div:nth-of-type(2) > div:last-of-type {
  
    column-gap: unset;
  
  }
  .hostels, .gastros, .hostel, .gastro, .leyenda, .natura, .footer, .naturas, .header {column-gap: unset;}
  .footer .menu {grid-auto-flow: row;}
  .naturas-item {
    min-width: 75vw;
  }
    .hostels-item, .gastros-item {
        grid-column: span 12;

    }
    .gastros, .hostels {

      align-items: unset;
  }
  .menu {
    
    column-gap: unset;
    grid-auto-flow: row;
    justify-items: center;
    row-gap: 16px;
    width: 100%;
}
  .header .menu li {
      border-bottom: 1px solid rgba(0,0,0,0.2);
      width: 100%;
      text-align: center;
  }

    .header > div:nth-of-type(2) {
        grid-column: span 12;
        justify-self: center;
        padding-top: 16px;
        width: 100%;
    }

}