/*  
Theme Name: Reactivem Xàtiva
Description: Un tema desarrollado para Ajuntament de Xàtiva
Author: W. Wallace
Version: 1.88
*/

body {margin: 0; padding: 0; font-family: 'Inter Tight', sans-serif; font-size: calc(16px + 0.25vw); line-height: 140%;}
p {font-size: calc(16px + 0.25vw); line-height: 140%; margin: 0; padding: 0 0 26px 0;}
a {text-decoration: none;}

.qlwapp-description-container p { font-size: calc(12px + 0.25vw); line-height: 140%; padding-top: 7.5px; padding-bottom:2.5px;}
.qlwapp-description-container em { font-size: calc(12px + 0.25vw); line-height: 140%;}
#qlwapp .qlwapp-box {
    padding-bottom: 16px !important;
}
iframe {
    position: relative;
    top: -70px;
    border: none;
    display: block;
}
.iframe {
    height: 75vh;
    width: 100%;
    display: inline-block;
    overflow: hidden;
}
img {border-radius: 2px;}

#header { position: absolute; width: 100%; margin: 0 auto; color: #fff;}
.header {max-width: 1600px; width: 90vw; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; padding-top: 50px; }
.header > div:first-of-type {grid-column: 1 / 3;}
.header > div:last-of-type {grid-column: 3 / 13; justify-self: flex-end;}

ul#menu-main {list-style: none; padding: unset; margin: unset; display: grid; grid-template-columns: repeat(3,max-content); column-gap: 32px; justify-content: flex-end; justify-items: flex-end; }
ul#menu-main li a {text-decoration: none; color: inherit; padding: unset; color: #000;}
ul#menu-main li a:hover {color: #D73E1A;}
.current_page_item a {color: #fff !important;}
#hero { background-image: url("https://unaxativaperatu.es/wp-content/themes/xativa/imagenes/portada.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.hero { max-width: 1600px; width: 90vw; min-height: 100vh; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); align-content: center; align-items: center;}
.hero > div {grid-column: 1 / 9; }

.claim {font-size: calc(36px + 2vw); line-height: 100%; font-weight: bold; color: #fff; margin-bottom: 30px;}
.button { color: #fff; position: relative; padding-top: 32px;}
.button::after { content: url("https://unaxativaperatu.es/wp-content/themes/xativa/imagenes/button-down.svg"); padding-left: 8px; position: absolute; padding-top: 2px;}
.button:hover {color: #D73E1A;}
a > .button {width: max-content;}
.button {width: max-content;}
#info { padding: calc(40px + 3vw) 0 calc(40px + 3vw) 0;}
.info {max-width: 1600px; width: 90vw; margin: 0 auto;  display: grid; grid-template-columns: repeat(12,1fr); align-content: flex-start; align-items: flex-start; column-gap: 32px;}
.info > div:first-of-type {grid-column: 1 / 7 ;}
.info > div:last-of-type {grid-column: 7 / 13 ;}
.highlight {font-size: calc(20px + 1vw); line-height: 120%; font-weight: bold; padding-bottom: 32px; }
.highlight a {color: inherit;}
#info img {width: 100%; display: block;}

#bons { background-color: #ffffff; padding: calc(40px + 3vw) 0 32px 0;}
.bons {max-width: 1600px; width: 90vw; margin: 0 auto;  display: grid; grid-template-columns: repeat(12,1fr); align-content: flex-start; align-items: flex-start; column-gap: 32px; row-gap: 64px;}

#default { background-color: #ffffff; padding: calc(40px + 3vw) 0 32px 0;}
.default {max-width: 1600px; width: 90vw; margin: 0 auto;  display: grid; grid-template-columns: 1fr; align-content: flex-start; align-items: flex-start; column-gap: 32px; }

.bons > div {grid-column: span 6;}
.highlight {font-size: calc(20px + 1vw); line-height: 120%; font-weight: bold; padding-bottom: 32px; }
#bons img {width: 100%; display: block; padding-bottom: 32px;}
.button-right { color: #000; position: relative; }
a.button-right { color: inherit; text-decoration: none;}
.button-right::after { content: url("https://unaxativaperatu.es/wp-content/themes/xativa/imagenes/button-right.svg"); padding-left: 8px; position: absolute; padding-top: 2px;}
.button-right:hover {color: #D73E1A;}
.filete {border-top: 1px solid #f3f3f3}

#patros { background-color: #ffffff; padding: calc(40px + 3vw) 0 calc(40px + 3vw) 0;}
.patros {max-width: 1600px; width: 90vw; margin: 0 auto;  display: grid; grid-auto-flow:column; align-content: center; align-items: center; justify-content: center; justify-items: center; column-gap: 64px;}
#patros img {width: 100%; display: block; }

#footer {background-color: #ffffff; padding: 32px 0 96px 0;}
.footer { max-width: 1600px; width: 90vw; margin: 0 auto;  display: grid; grid-template-columns: max-content 2fr max-content; align-content: center; align-items: flex-end; column-gap: 32px;}
.footer > div:last-of-type {justify-content: flex-end; justify-items: flex-end; display: grid;}
.footer > div:nth-of-type(2) {justify-content: center; justify-items: center; display: grid; grid-template-columns: max-content max-content max-content; column-gap: 48px;}
.rrss {position: relative;}
.rrss::after { content: url("https://unaxativaperatu.es/wp-content/themes/xativa/imagenes/link.svg"); padding-left: 8px; position: absolute; }
.footer a {color: inherit; text-decoration: none;}
.footer a:hover {text-decoration: underline;}

#hero-bons { background-image: url("https://unaxativaperatu.es/wp-content/themes/xativa/imagenes/bonoss.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.button-bons { color: #D73E1A; position: relative; background-color: #fff; padding: 16px 56px 16px 32px; width: max-content; border-radius: 32px; margin-top: 32px; margin-bottom: 32px; }
.button-bons::after { content: url("https://unaxativaperatu.es/wp-content/themes/xativa/imagenes/button-right.svg"); padding-left: 8px; padding-right: 32px; position: absolute; padding-top: 2px;}
.button-bons-right { color: #fff; position: relative; }
.button-bons-right::after { content: url("https://unaxativaperatu.es/wp-content/themes/xativa/imagenes/button-bons.svg"); padding-left: 8px; position: absolute; padding-top: 2px;}

.botones {display: grid; grid-template-columns: repeat(3,max-content); column-gap: 56px;}

#video { background-color: #f3f3f3; padding: calc(40px + 3vw) 0 calc(40px + 3vw) 0;}
.video {max-width: 1600px; width: 90vw; margin: 0 auto;  display: grid; grid-template-columns: repeat(1,1fr); align-content: flex-start; align-items: flex-start; column-gap: 32px;}
.video img {width: 100%;}


#soltero { background-color: #ffffff; padding: calc(40px + 3vw) 0 32px 0; }
.soltero {max-width: 1600px; width: 90vw; margin: 0 auto;  display: grid; grid-template-columns: repeat(1,1fr); align-content: flex-start; align-items: flex-start; column-gap: 32px;}
.soltero p {font-size: calc(16px + 0.5vw); line-height: 140%;}

#altres { background-color: #ffffff; padding: calc(40px + 3vw) 0 16px 0; }
.altres {max-width: 1600px; width: 90vw; margin: 0 auto;  display: grid; grid-template-columns: repeat(1,1fr); align-content: flex-start; align-items: flex-start; column-gap: 32px;}
.altres .highlight {font-size: calc(24px + 1vw); line-height: 130%;}
.destacada {aspect-ratio: 16/9; object-fit: cover;}
.wp-block-image img {aspect-ratio: 16/9; object-fit: cover; width: 100%;}
.filtros {
    row-gap: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  }
  input:is([type="button"], [type="submit"], [type="reset"]) {border: 0; font-size: calc(16px + 0.25vw); background-color: #D73E1A; color: #fff; border-radius: 32px; padding: 4px 16px 4px 16px; cursor: pointer;}
  
@media only screen and (max-width: 1280px) {
    .footer {
        grid-template-columns: 1fr;
    }
    .footer > div:nth-of-type(2) {
        justify-content: flex-start;
        justify-items: flex-start;
    }
    .footer > div:last-of-type {
        justify-content: flex-start;
        justify-items: flex-start;

    }
  }

  @media only screen and (max-width: 980px) {
    .hero > div {
        grid-column: 1 / 13;
    }
    .info > div:first-of-type {
        grid-column: 1 / 13;
    }
    .info > div:last-of-type {
        grid-column: 1 / 13;
    }
    #info img {
        width: 100%;
        display: block;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        margin-top: 64px;
    }
    .bons > div {
        grid-column: span 12;
    }
    .patros {
        grid-auto-flow: unset;
        grid-template-columns: repeat(3,1fr);

        column-gap: 32px;
        row-gap: 64px;
    }
    #patros {

        padding: 64px 0 64px 0;
    }
    .botones {

        grid-template-columns: repeat(1,max-content);
        row-gap: 8px;

    }
    .hero {

        padding-bottom: 10vh;
    }

  }

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

    .patros {

        grid-template-columns: repeat(1,1fr);

        column-gap: unset;
        row-gap: 64px;
    }
    #patros {
        background-color: #ffffff;
        padding: 32px 0 96px 0;
    }
    .header > div:first-of-type {
        grid-column: 1 / 13;
    }
    .header > div:last-of-type {
        grid-column: 1 / 13;
        justify-self: flex-start;
    }
    .header {row-gap: 16px;}
  }
@media only screen and (max-width: 680px) { 
.info, .bons {

    column-gap: unset;
}
    .header > div:first-of-type {
        grid-column: unset;
    }
	.footer > div:nth-of-type(2) {

    grid-template-columns: 1fr;

}
.header {padding-top: 25px; }
ul#menu-main {

    grid-template-columns: unset;
    column-gap: unset;
    justify-content: unset;
    justify-items: unset;
}
.claim {
    margin-top: 200px !important;
}
ul#menu-main li a {

    font-weight: 700 !important;
}
}
  @media only screen and (max-height: 680px) {
  .hero > div {margin-top: 64px;}
  .hero > div {margin-top: 200px;}
  }