@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: #E8E0D0;
    /*body*/
    --f-caps: #E8E0D0;
    /*capsalera*/
    --f-menu1: #2b1b00;
    /*menu*/
    --f-menu2: #2b1b00;
    /*submenu b*/
    --f-menu3: #2b1b00;
    /*submenu c...*/
    --f-main: #E8E0D0;
    /*main*/
    --f-mainb: #E8E0D0;
    /*main blocs*/
    --f-button: #2B1B00;
    /*butons*/
    --f-foot: #424e59;
    /*footer*/
    /* text */
    --txt-body: #2b1b00;
    --txt-caps: #2b1b00;
    --txt-menu1: #e8e0d0;
    --txt-menu2: #fff;
    --txt-menu3: #fff;
    --txt-main: #000;
    --txt-mainb: #424e59;
    --txt-button: #e8e0d0;
    --txt-foot: #fff;
    /* links */
    --lk-txt-body: #424e59;
    --lk-txt-caps: #000;
    --lk-txt-menu1: #e8e0d0;
     --lk-txt-menu1080: #2b1b00;
    --lk-txt-menu2: #fff;
    --lk-txt-menu3: #e8e0d0;
    --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: #2B1B00;
    --lk-f-foot: #003e53;
    /* link hovers */
    --lk-txt-h-body: #e71753;
    --lk-txt-h-caps: #000;
    --lk-txt-h-menu1: #A31E28;
     --lk-txt-h-menu1080: #A31E28;
    --lk-txt-h-menu2: #2b1b00;
    --lk-txt-h-menu3: #FFCF11;
    --lk-txt-h-main: #7D0600;
    --lk-txt-h-mainb: #a31e28;
    --lk-txt-h-button: #e8e0d0;
    --lk-txt-h-foot: #003e53;
    /* fons hovers */
    --lk-f-h-body: #ffffff;
    --lk-f-h-caps: #4d4d4d;
    --lk-f-h-menu1: #E8E0D0;
    --lk-f-h-menu2: #d1a333;
    --lk-f-h-menu3: #2b1b00;
    --lk-f-h-main: #e8e0d0;
    --lk-f-h-mainb: #CC6633;
    --lk-f-h-button: #027D8C;
    --lk-f-h-foot: #ffffff;
    /* especials */
    --e1: #f0d6d6;
    --e2: #a31e28;
    /* caixes */
    --bor-main: #fff;
    --bor-table: #424e59;
    --bor-foot: #fff;
}


  .box_expositor,.box_representant
{

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


}
option{
    
    color: var( --txt-menu1)
    
}
.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 , .svg, .weather_ico, .cookie_svg{

    
filter: brightness(0) saturate(100%) invert(95%) sepia(10%) saturate(332%) hue-rotate(345deg) brightness(93%) contrast(94%);


}



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


/* Animacions*/

@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); }
}


@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 */
}

@keyframes mecerYGirar {

  0%   { transform: rotate(0deg) translateX(0); }
  15%  { transform: rotate(0.7deg) translateY(1px); }
  30%  { transform: rotate(0deg) translateX(0); }
  45%  { transform: rotate(-0.7deg) translateX(-1px); }
  60%  { transform: rotate(0deg) translateX(0); }

  97%  { transform: rotate(0deg) translateX(0); }

  100% {
    transform: rotate(1turn) translateX(0);
  }
}


@keyframes Girar {



 


    100%{  transform: rotate(1turn) translateX(0);}
 
}




}


}

.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;
}

nav svg, nav svg:visited {
	fill: var(--lk-txt-menu1);
}
nav a:hover > svg, nav svg:hover {
	fill: var(--lk-txt-h-menu1);
}
@media screen and (min-width: 768px) {
   
   #imatge-capsalera {

	height: 270px;
      width:300px;
        margin-top: 0;
        left: 267px;
        /* Using the background-image and
	its related properties to add
	the SVG content */
        background-image: url("https://liberisliber.com//images/maquetacio_web/2026/imatge-capsalera.png");
        background-size: 270px auto;

} 
    .wrap_mobile header picture,.wrap_mobile header picture img {
    display: block;
    position: absolute;
    top: 5px;
    left: -9px;
    width: auto;
    height: 254px;
}
    
  .data_capsalera,.data_capsalera_ca,.data_capsalera_es,.data_capsalera_en {

    width: 170px;
    top: 90px;
    right:268px;

}  
    .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;
    }

   
    #logo_new{
        position: absolute;
        height: 250px;
        width: 350px;
        top: 10px;
        left: -50px;
        display: inline-flex;
  
        
                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: 1em;
    width:427px;
    top: 35px;
    right: 2%;
    left: auto;
    rotate:5deg   ; 
        
                 padding-left:0;
    border-left: initial
   
}
     .festfira_ca{
        top:21px;
      
        left:auto;
        width: 344px;
        left: 56%;
    }   .festfira_es{
        top:8px;
      
        left:auto;
        width: 320px;
        left: 58%;
    }    
    .festfira_en{
        top:8px;
      
        left:auto;
        width: 320px;
        left: 58%;
    }

.data_capsalera_ca, .data_capsalera_es, .data_capsalera_en {

    width: 110px;
    top: 67px;
    right: 80px;
    font-size: 0.8em;
         padding-left:0;
    border-left: initial
}
    .data_capsalera_ca{
        
        width: 107px;
        right: auto;
        left: 72%;    
    } 
          .data_capsalera_es{
        
        width: 130px;
        right: auto;
        left: 72%;    
    } 
      
    .data_capsalera_en{
        
        width: 130px;
        right: auto;
        left: 72%;    
    } 
    
    


    #deco1 {
        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/2026/bola-paper.png");*/
        background-size: 250px auto;
        transform-origin:center; /* punto de giro en la base de la rama */
        animation:Girar  63s  infinite forwards; 

    }
    #deco2 {
        height: 250px;
        width: 250px;
        top:450px;
        left: -120px;
        /* 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;
        
        transform-origin: bottom left; /* punto de giro en la base de la rama */
        animation: mecer 8s ease-in-out infinite alternate;

    }
    

    main:before {
        height: 450px;
        width: 590px;
        top: auto;
        right: -400px;
        /* 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;
        
                transform-origin: bottom right; /* punto de giro en la base de la rama */
        animation: mecer 6s ease-in-out infinite alternate;

    }

    main:after {
        height: 750px;
        width: 190px;
        top: 30%;
        left: 80px;
        rotate:-10deg;
        /* 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;
        
                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 picture,.wrap_mobile header picture img {
    display: block;
    position: absolute;
    top: 5px;
    left: -9px;
    width: auto;
    height: 254px;
           
                   transform-origin: bottom right; /* punto de giro en la base de la rama */
        animation: mecer 12s ease-in-out infinite alternate;

}
    #imatge-capsalera {

	height: 270px;
      width:300px;
        margin-top: 0;
        right: 600px;
        /* Using the background-image and
	its related properties to add
	the SVG content */
        background-image: url("https://liberisliber.com//images/maquetacio_web/2026/imatge-capsalera.png");
        background-size: 270px auto;

} 
    
    #logo_new {
        position: absolute;
        height: 320px;
        
        top: -20px;
        left: -30px;
        display: inline-flex;
    
    }

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

        right: auto;

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

        width:503px;
        top: 139px;
        left: 550px;
        
        rotate: 5deg;
      
    }
   .festfira_es {
 
        width:550px;
        top: 137px;
         left: 550px;
        
        rotate: 5deg;
      
    }
    
   .festfira_en {
 
        width:630px;
        top: 112px;
  left: 811px;
        rotate: 5deg;
      font-size:  1.5em
    }    
  .data_capsalera,.data_capsalera_ca,.data_capsalera_es,.data_capsalera_en {

    width: 280px;
    top: -21px;
    left: 553px;
    font-size: 1em  

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

        font-family: "Lato", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 1em;
    }
    
    .data_capsalera_ca{       
        width: 374px;
        top: -10px;
        left: 537px;
        right: auto;
        rotate: -4deg;
    
    }
    .data_capsalera_es{       
        width: 154px;
        top: 20px;
        right: 30px;
        left: auto;
        rotate: -10deg;
    
    }
        .data_capsalera_en{       
        width: 334px;
        top: 29px;
        left: 545px;
        right: auto;
        rotate: -1deg;
    
    }
    #deco1 {

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

        rotate:50deg;

        background-size: 250px auto;


    }

    main:before {
        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) {

    
    .sticky{
        /*! height: 80px; */
        /*! background-color: transparent; */
        /*! color: brown; */
          /*! background-image: url("https://liberisliber.com//images/maquetacio_web/2026/paper-art-h.png"); */
        background-size: 100% auto;
        background-repeat: repeat-x;
       background-origin:  padding-box;
        background-position: 100% -80px;
        
    }
 nav svg, nav svg:visited {
	fill: var(--lk-txt-menu1080);
}
nav a:hover > svg, nav svg:hover {
	fill: var(--lk-txt-h-menu1080);
}   
  .data_capsalera,.data_capsalera_ca,.data_capsalera_es,.data_capsalera_en {

    width: 171px;
    top: 25px;
    right: 161px;
      left: auto;
    font-size: 1.2em  

} 
     .data_capsalera_en{
        
        width: 130px;
        right: auto;
        left: 72%;
         
    }   
 #imatge-capsalera {

	   height: 520px;
       width: 520px;
        margin-top: 280px;
        left:160px;
         right: auto;
       rotate: 30deg;
         /* Using the background-image and
	its related properties to add
	the SVG content */
     background-image: url("https://liberisliber.com//images/maquetacio_web/2026/imatge-capsalera3.png");
        background-size: 520px auto;
        transform-origin: top left; /* punto de giro en la base de la rama */
        animation: mecer 12s ease-in-out infinite alternate;
        z-index: 0
}     
     .wrap_mobile header picture,.wrap_mobile header picture img {
    display: block;
    position: absolute;
    top: -5px;
    left: -9px;
    width: auto;
    height: 454px;
}   
    #logo_new {
        height: 844px;
        width: 589px;
        top: -87px;
        left: -30px;
        rotate: -4deg;
        background-size: 760px auto;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 0px 0px;
    }
    #deco1 {
        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/2026/bola-paper.png");
        background-size: 250px auto;
        transform-origin:center; /* punto de giro en la base de la rama */
        /*! animation: mecerYGirar  13s ease-in-out infinite forwards; */

    }
    #deco2 {
        height: 650px;
        width: 650px;
        top:450px;
        left: -120px;

        background-image: url("https://liberisliber.com//images/maquetacio_web/2026/paper-art.png");
        background-size: 650px auto;
        
        transform-origin: bottom left; /* punto de giro en la base de la rama */
        animation: mecer 8s ease-in-out infinite alternate;

    }
    
        #deco3 {
        position: fixed;
        height: 523px;
        width: 435px;
        bottom:100px;
       top:auto;
        right: -120px;
        display: inline-flex;
            rotate: -10deg;
        content: '';

        background-image: url("https://liberisliber.com//images/maquetacio_web/2026/formiga.png");
        background-size: 450px 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;

    }
    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: 12%;
        left: auto;
        rotate: 3deg;

        font-size: 2em;
    }
        .festfira_es {

        width: 878px;
        top: 50px;
        right: 13%;
        left: auto;
        rotate: 3deg;

        font-size: 2em;
    }


    .data_capsalera_ca,.data_capsalera_es,.data_capsalera_en {

        width: 210px;
        top: 0;
        left: auto;
        right: 195px;
        rotate: -8deg;
        font-size: 1.2em;
        font-weight: 600
    }

        .data_capsalera_ca{       
        width: 247px;
       left: 689px;
            font-size: 1.8em;
            text-align: center;
                   transform-origin: bottom left; /* punto de giro en la base de la rama */
        animation: mecer 3s ease-in-out infinite alternate;

       
            top:0;
    }
        .data_capsalera_es{       
        width: 195px;
       right: 195px;
    }
            .data_capsalera_en{       
        width: 195px;
       right: 195px;
    }
    #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: 942px;
        width: 340px;
        bottom:550px;
        left: -30px;
        top:auto;
        /*! 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;
 
    }
   #logo_new {
        height: 830px;
        width: 760px;
        top: -90px;
        left: -30px;
        rotate: -4deg;
        background-size: 560px auto;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 0px 0px;
    }
 
        #imatge-capsalera {

width: 600px;
            height: 600px;
        margin-top: 0;
        right: auto;
        /* Using the background-image and
	its related properties to add
	the SVG content */
   
        background-size: 580px auto;

        background-position:50px 0px;

}     
   
    
         .wrap_mobile header picture,.wrap_mobile header picture img {
    display: block;
    position: absolute;
    top: -5px;
    left: -9px;
    width: auto;
    height: 484px;
}   
                  
    
    
       .data_capsalera_ca,.data_capsalera_es,.data_capsalera_en {

        width: 410px;
        top: 650px;
        right: auto;
        left: 270px;
        rotate: -5deg;
        font-size: 2.5em
    }
 
        .festfira_ca {

        width: 779px;
        top: 60px;
        right: 8%;
        left: auto;
        rotate: 3deg;

        font-size: 2.1em;
    }
}

@media screen and (min-width: 3830px) {
    
        nav:before {
        height: 1px;
        width: 100px;
 
    }
   #logo_new {
        height: 830px;
        width: 760px;
        top: -90px;
        left: -30px;
        rotate: -4deg;
        background-size: 560px auto;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: 0px 0px;
    }
 
        #imatge-capsalera {

width:1200px;
            height: 932px;
        top: -80px;
        right: auto;
        /* Using the background-image and
	its related properties to add
	the SVG content */
   
        background-size: 980px auto;

        background-position:50px 0px;

}     
   
    
         .wrap_mobile header picture,.wrap_mobile header picture img {
    display: block;
    position: absolute;
    top: -5px;
    left: -9px;
    width: auto;
    height: 500px;
}   
                  
    
    
       .data_capsalera_ca,.data_capsalera_es,.data_capsalera_en {

        width: 410px;
        top: 650px;
        right: auto;
        left: 270px;
        rotate: -5deg;
        font-size: 2.5em
    }
 
        .festfira_ca {

        width: 950px;
        top: 39px;
        right: 8%;
        left: auto;
        rotate: 3deg;

        font-size: 2.1em;
    }
    
    
           .data_capsalera_ca{       
        width: 307px;
       left: 742px;
            font-size: 1.8em;
            text-align: center;
                   transform-origin: bottom left; /* punto de giro en la base de la rama */
        animation: mecer 3s ease-in-out infinite alternate;

       
            top:68px;
    } 
    
}