@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); /* Definicin de variables de color */
:root {
    /* fons blocs principals */
    /* fons */
    --f-body: #d6b496;
    /*body*/
    --f-caps: #d6b496;
    /*capsalera*/
    --f-menu1: #424e59;
    /*menu*/
    --f-menu2: #424e59;
    /*submenu b*/
    --f-menu3: #424e59;
    /*submenu c...*/
    --f-main: #d6b496;
    /*main*/
    --f-mainb: #d6b496;
    /*main blocs*/
    --f-button: #07376A;
    /*butons*/
    --f-foot: #424e59;
    /*footer*/
    /* text */
    --txt-body: #424e59;
    --txt-caps: #424e59;
    --txt-menu1: #fff;
    --txt-menu2: #fff;
    --txt-menu3: #fff;
    --txt-main: #000;
    --txt-mainb: #424e59;
    --txt-button: #fff;
    --txt-foot: #fff;
    /* links */
    --lk-txt-body: #424e59;
    --lk-txt-caps: #000;
    --lk-txt-menu1: #fff;
    --lk-txt-menu2: #fff;
    --lk-txt-menu3: #fff;
    --lk-txt-main: #000;
    --lk-txt-mainb: #424e59;
    --lk-txt-button: #fff;
    --lk-txt-foot: #fff;
    /* fons links */
    --lk-f-body: #003e53;
    --lk-f-caps: #003e53;
    --lk-f-menu1: #003e53;
    --lk-f-menu2: #424e59;
    --lk-f-menu3: #003e53;
    --lk-f-main: #003e53;
    --lk-f-mainb: #003e53;
    --lk-f-button: #424e59;
    --lk-f-foot: #003e53;
    /* link hovers */
    --lk-txt-h-body: #e71753;
    --lk-txt-h-caps: #000;
    --lk-txt-h-menu1: #424e59;
    --lk-txt-h-menu2: #003e53;
    --lk-txt-h-menu3: #FFCF11;
    --lk-txt-h-main: #FFCF11;
    --lk-txt-h-mainb: #424e59;
    --lk-txt-h-button: #003e53;
    --lk-txt-h-foot: #003e53;
    /* fons hovers */
    --lk-f-h-body: #ffffff;
    --lk-f-h-caps: #4d4d4d;
    --lk-f-h-menu1: #d6b496;
    --lk-f-h-menu2: #ecc875;
    --lk-f-h-menu3: #424e59;
    --lk-f-h-main: #424e59;
    --lk-f-h-mainb: #CC6633;
    --lk-f-h-button: #CC6633;
    --lk-f-h-foot: #ffffff;
    /* especials */
    --e1: #f0d6d6;
    --e2: #fff;
    /* caixes */
    --bor-main: #fff;
    --bor-table: #424e59;
    --bor-foot: #fff;
}
  .box_expositor,.box_representant
{

    border: thin solid var(--menu-1);


}
.personatges figcaption a {
    font-size: 2.5em;
    font-weight: bold;
    color: var(--f-menu1);
    text-shadow: 1px 0 var(--bor-main), -1px 0 var(--bor-main), 0 1px var(--bor-main), 0 -1px var(--bor-main), 1px 1px var(--bor-main), -1px -1px var(--bor-main), 1px -1px var(--bor-main), -1px 1px var(--bor-main);
}

.wrap_mobile {
    background-color: var(--f-caps);
}

.change_svg {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7463%) hue-rotate(53deg) brightness(112%) contrast(101%);
}

.svg {
    filter: brightness(0) saturate(100%) invert(100%) sepia(76%) saturate(1%) hue-rotate(162deg) brightness(103%) contrast(101%);
}

.weather_ico {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7463%) hue-rotate(53deg) brightness(112%) contrast(101%);
}

.cookie_svg {
    invert(100%) sepia(2%) saturate(10%) hue-rotate(336deg) brightness(102%) contrast(106%)}

#idiomes {
    background-color: var(--f-menu1);
}


.wrap_mobile header {
    position: relative;
    top: 0;
    left: 0;
    width: 20%;
    height: 270px;
}

.wrap_mobile header picture,.wrap_mobile header picture img {
    display: block;
    position: absolute;
    top: -10px;
    left: -5px;
    width: auto;
    height: 157px;
}

.festfira_ca,.festfira_es,.festfira_en {
    display: block;
    position: fixed;
    width: 250px;
    top: -2000px;
    right: 15%;
    left: auto;
    rotate: 10deg;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1em;
}

.data_capsalera,.data_capsalera_ca,.data_capsalera_es,.data_capsalera_en {
    display: block;
    position: fixed;
    width: 110px;
    top: -2000px;
    right: 30px;
    left: auto;
    rotate: -10deg;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.8em
}
@keyframes mecer {
  0%   { transform: rotate(0deg) translateX(0); }
  25%  { transform: rotate(0.7deg) translateY(1px); }
  50%  { transform: rotate(0deg) translateX(0); }
  75%  { transform: rotate(-0.7deg) translateX(-1px); }
  100% { transform: rotate(0deg) translateX(0); }
}

/* Animación de temblor */

@keyframes tembleque {
  0%   { transform: translate(0,0) rotate(0deg); }
  0.1%   { transform: translate(-2px, 0) rotate(-2deg); }
  0.2%   { transform: translate(2px, 0) rotate(2deg); }
  0.3%   { transform: translate(-2px, 0) rotate(-1deg); }
 0. 4%   { transform: translate(2px, 0) rotate(1deg); }
      0.5%   { transform: translate(-2px, 0) rotate(-2deg); }
 0.6%   { transform: translate(2px, 0) rotate(2deg); }
  0.7%   { transform: translate(-2px, 0) rotate(-1deg); }
 0.8%   { transform: translate(2px, 0) rotate(1deg); }
  0.9%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(0,0) rotate(0deg); } /* quieto hasta reiniciar */
}



.fitxa_editorial > figure:nth-child(1) > a:nth-child(1) > img:nth-child(1), #colaboradors_ampli img{
    
    background-color: white;
    padding: 8px;
    border-radius: 10px
}
.fons_svg{
    background-color: white;
padding: 8px;
}
@media screen and (min-width: 768px) {
    
    .box_inline{
        
        
        border: thin solid var(--txt-body);
    }
    #logo {
        position: absolute;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
    }
    

    form .svg {
        filter: invert(1);
        -webkit-filter: invert(1);
    }

    #idiomes {
        background-color: transparent;
    }

    body {
        /* The image used */
        /*! background-image: url("https://liberisliber.com/images/maquetacio_web/2025/fons_blur.jpg"); */
        /* Full height */
        /*! background-color: #02112a !important; */
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .wrap_mobile {
        /*! background-image: url(https://liberisliber.com/images/maquetacio_web/2024/capsalera-web.jpg); */
        background-size: auto 500px;
        background-position: 35% 40%;
        background-repeat: no-repeat;
        background-color: var(--color-1);
    }

    #deco_img {
        background-image: url("https://liberisliber.com//images/maquetacio_web/2025/Liberisliber-2025.svg");
        background-size: auto 90%;
        background-position: 100% 100%;
        z-index: 2;
    }

    main {
        /*! background-image: url(https://liberisliber.com/images/maquetacio_web/2025/fons-bottom.svg); */
        background-size: 100%;
        background-position: bottom;
        background-repeat: no-repeat;
    }

    .wrap_mobile header:before {
        position: absolute;
        height: 250px;
        width: 590px;
        top: 10px;
        left: -10px;
        display: inline-flex;
        content: '';
        /* Using the background-image and
	its related properties to add
	the SVG content */
        background-image: url("https://liberisliber.com//images/maquetacio_web/2026/logo-new.svg");
        background-size: 300px auto;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 0px 0px;
        
                animation: tembleque 24s infinite;
  animation-delay: 10s;       /* espera antes del primer temblor */
  animation-iteration-count: infinite;
  animation-play-state: running;
        
        
    }
    .wrap_mobile header :hover {
        

        
    }
    .festfira_ca, .festfira_es, .festfira_en {
        
    position: fixed;   
    font-size:1.1em;
    width: 456px;
    top: 40px;
    right: -2%;
    left: auto;
    rotate:5deg    
   
}
    
    .festfira_en{
        width: 420px;
        right: 17%
    }

.data_capsalera_ca, .data_capsalera_es, .data_capsalera_en {

    width: 110px;
    top: 50px;
    right: 80px;
 
}
    
    .data_capsalera_en{
        
        width: 130px
    } 
    
    


    #deco1 {
        position: absolute;
        height: 210px;
        width: 390px;
        margin-top: 60%;
        right: -180px;
        /* Using the background-image and
	its related properties to add
	the SVG content */
        /*! background-image: url("https://liberisliber.com//images/maquetacio_web/2025/branca-4.svg"); */
        background-size: 250px auto;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 0px 0px;
        transform-origin: bottom right; /* punto de giro en la base de la rama */
        animation: mecer 7s ease-in-out infinite alternate;

    }
    #deco2 {
        position: absolute;
        height: 250px;
        width: 250px;
        top:450px;
        left: -120px;
        display: inline-flex;
        content: '';
        /* Using the background-image and
	its related properties to add
	the SVG content */
        /*! background-image: url("https://liberisliber.com//images/maquetacio_web/2025/branca-5.svg"); */
        background-size: 250px auto;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 0px 0px;
        
        transform-origin: bottom left; /* punto de giro en la base de la rama */
        animation: mecer 8s ease-in-out infinite alternate;

    }
    

    main:before {
        position: absolute;
        height: 450px;
        width: 590px;
        top: auto;
        right: -400px;
        display: inline-flex;
        content: '';
        /* Using the background-image and
	its related properties to add
	the SVG content */
        /*! background-image: url("https://liberisliber.com//images/maquetacio_web/2025/branca-1.svg"); */
        background-size: 250px auto;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 0px 0px;
        
                transform-origin: bottom right; /* punto de giro en la base de la rama */
        animation: mecer 6s ease-in-out infinite alternate;

    }

    main:after {
        position: absolute;
        height: 750px;
        width: 190px;
        top: 30%;
        left: 80px;
        display: inline-flex;
        rotate:-10deg;
        content: '';
        /* Using the background-image and
	its related properties to add
	the SVG content */
        /*! background-image: url("https://liberisliber.com//images/maquetacio_web/2025/branca-3.svg"); */
        background-size: 150px auto;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 0px 0px;
        
                transform-origin: bottom left; /* punto de giro en la base de la rama */
        animation: mecer 7s ease-in-out infinite alternate;

    }


}

@media screen and (min-width: 1199px) {
    .wrap_mobile header::before {
        position: absolute;
        height: 280px;
        width: 590px;
        top: 20px;
        left: -10px;
        display: inline-flex;
        content: '';
        /* Using the background-image and
	its related properties to add
	the SVG content */
        background-image: url("https://liberisliber.com//images/maquetacio_web/2026/logo-new.svg");
        background-size: 300px auto;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 0px 0px;
    }

      .festfira_ca, .festfira_es, .festfira_en {
        display: block;
        position: fixed;

        left: auto;

        font-family: "Lato", sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 1.6em;
    }
      .festfira_ca {

        width:550px;
        top: 100px;
        right: 17%;
        left: auto;
        rotate: 5deg;
      
    }
   .festfira_es {
 
        width:550px;
        top: 40px;
        right: 15%;
        left: auto;
        rotate: 5deg;
      
    }
    
   .festfira_en {
 
        width:530px;
        top: 40px;
        right: 17%;
        left: auto;
        rotate: 5deg;
      
    }    

.data_capsalera_ca, .data_capsalera_es, .data_capsalera_en  {
        display: block;
        position: fixed;

        font-family: "Lato", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1.1em
    }
    
    .data_capsalera_ca{       
        width: 150px;
        top: -10px;
        right: 50px;
        left: auto;
        rotate: -10deg;
    
    }
    .data_capsalera_es{       
        width: 154px;
        top: 20px;
        right: 30px;
        left: auto;
        rotate: -10deg;
    
    }
        .data_capsalera_en{       
        width: 170px;
        top: 20px;
        right: 50px;
        left: auto;
        rotate: -10deg;
    
    }
    #deco1 {

        height: 210px;
        width: 390px;
        margin-top: 900px;
        right: -30px;

        rotate:50deg;

        background-size: 250px auto;


    }

    main:before {
        position: absolute;
        height: 250px;
        width: 590px;
        top: auto;
        right: -400px;

        
        background-size: 250px auto;
      
                transform-origin: bottom right; /* punto de giro en la base de la rama */
        animation: mecer 6s ease-in-out infinite alternate;

    }

    main:after {

        height: 350px;
        width: 200px;
        top: 800px;
        left: -15px;

        rotate:-5deg;
      
        background-size: 200px auto;
      
                transform-origin: bottom left; /* punto de giro en la base de la rama */
        animation: mecer 7s ease-in-out infinite alternate;

    }

    #deco2 {
       
        height: 250px;
        width: 240px;
        top:450px;
        left: -80px;


        background-size:250px auto;
    
        
        transform-origin: bottom left; /* punto de giro en la base de la rama */
        animation: mecer 8s ease-in-out infinite alternate;

    }

            
            
}

@media screen and (min-width: 1919px) {
    .wrap_mobile header::before {
        height: 630px;
        width: 760px;
        top: 0px;
        left: -30px;
        rotate: -4deg;
        background-size: 560px auto;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 0px 0px;
    }

    nav {
        background-color: transparent;
        justify-content: right;
    }

    nav:before {
        height: 1px;
        width: 50px;
        /*background-color: var(--f-menu3);*/
        border-bottom: 2px dashed var(--f-menu3);
        content: '';
    }

    nav:after {
        height: 1px;
        width: 200px;
        /*background-color: var(--f-menu3);*/
        border-bottom: 2px dashed var(--f-menu3);
        content: '';
    }

    #idiomes, #div_idiomes svg:hover ~ #idiomes, #idiomes:hover {
        position: absolute;
        top: -280px;
        /*! right: 0; */
        left: initial!important;
        /*! width: 100px; */
        padding: 10px;
        background-color: transparent;
        justify-content: flex-start;
    }

    .festfira_ca {

        width: 750px;
        top: 50px;
        right: 20%;
        left: auto;
        rotate: 3deg;

        font-size: 2.2em;
    }
        .festfira_es {

        width: 950px;
        top: 50px;
        right: 10%;
        left: auto;
        rotate: 3deg;

        font-size: 2.2em;
    }


    .data_capsalera_ca,.data_capsalera_es,.data_capsalera_en {

        width: 210px;
        top: 350px;
        right: auto;
        left: 170px;
        rotate: -5deg;
        font-size: 1.5em
    }

        .data_capsalera_en{       
        width: 240px;
       
    }

    #deco1 {
      
        height: 450px;
        width: 590px;
        margin-top: 800px;
        right: -170px;
       rotate:initial;
        background-size: 450px auto;

    }

    main:before {
       
        height: 450px;
        width: 590px;
        top: auto;
        right: -180px;
        
        background-size: 450px auto;
                             

    }

    main:after {
       
        height: 750px;
        width: 350px;
        top: 850px;
        left: -100px;
       
        rotate:10deg;

        background-size: 350px auto;
       

    }

    #deco2 {
      
        height: 300px;
        width: 340px;
        top:650px;
        left: -20px;

        /*! background-image: url("https://liberisliber.com//images/maquetacio_web/2025/branca-5.svg"); */
        background-size: 350px auto;
        

    }
}

@media screen and (min-width: 2500px) {
    nav:before {
        height: 1px;
        width: 100px;
 
    }
}