h1 {
  font-family: 'Raleway', sans-serif;
  text-align:center;
  }

img.logo {
  margin-right:auto;
  margin-left:auto;
  width:100px;
  display: block;
}

body {
      margin: 0;
      padding: 0;
  }

* {
  font-family: 'Raleway', sans-serif;
  box-sizing: border-box;
}

body, html {
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
}

.timeline {
width: 100vw;
height: 400px;
overflow-x: auto;
overflow-y: hidden;
cursor: grab;
scrollbar-width: none;
display: flex;
align-items:center;
margin-left: -16em;
}

.timeline:active {
cursor: grabbing;
}

.timeline::-webkit-scrollbar {
display: none;
}

.scroller {
display: flex;
width: 300vw;
}

.mes {
    display: flex;
    flex-direction: column;
    border-right: 1px solid white;
    flex-wrap: nowrap;
    user-select: none;
  }

  .mes .nombre {
    min-width: 150px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 4px;
    color: black;
    font-size: 15px;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    padding:0;
  }

  .enero { background-color: #f2b705; }     /* amarillo */
  .febrero { background-color: #f2b705; }
  .marzo { background-color: #f5425d; }      /* rojo rosado */
  .abril { background-color: #ff623a; }      /* naranja */
  .mayo { background-color: #f2b705; }
  .junio { background-color: #f5425d; }
  .julio { background-color: #ff623a; }
  .agosto { background-color: #f2b705; }
  .septiembre { background-color: #f5425d; }
  .octubre { background-color: #ff623a; }
  .noviembre { background-color: #f2b705; }
  .diciembre { background-color: #f5425d; }

  .january { background-color: #f2b705; }     /* amarillo */
  .february { background-color: #f2b705; }
  .march { background-color: #f5425d; }      /* rojo rosado */
  .april { background-color: #ff623a; }      /* naranja */
  .may { background-color: #f2b705; }
  .june { background-color: #f5425d; }
  .july { background-color: #ff623a; }
  .august { background-color: #f2b705; }
  .september { background-color: #f5425d; }
  .october { background-color: #ff623a; }
  .november { background-color: #f2b705; }
  .december { background-color: #f5425d; }

   .dias {
     color: white;
    display: flex;
    justify-content: space-around;
    padding: 2px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 10px;
    background-color: #000000;
  }

  .dia {
      display: block;
      margin: 6px;
      text-align: center;
      line-height: 12px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 12px;
  }

  #anyo{
    width:100lvw;
    height:80px;
    text-align:center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    user-select: none;
    margin-top: -100px;
  }

.resaltado {
color:#f5425d;
font-weight: bold;
position:relative;
overflow:visible;
}

.resaltado.libertadvcf {
color:#ff5a07;
}

.resaltado .info {
position:absolute;
top:-130px;
left:40px;
width:300px;
text-align: left;

}

.resaltado.down .info {
position:absolute;
top:100px !important;
left:40px;
width:300px;
text-align: left;

}

.resaltado .info h3 {
margin:3px;
font-size: 23.4px;
  color: #ff5a07;
}

.resaltado .info p {
font-family: 'Raleway', sans-serif;
color:white;
font-size:17px;
margin:3px;
margin-top: 10px;
line-height: 20px;
}

.resaltado .info strong {
font-family: 'Raleway', sans-serif;
margin-left:3px;
margin-bottom: 0;
display: block;
color:white;
font-weight:bold;
font-size:28px;
}

.resaltado .info h3 + strong {
  margin-top: 6px;
  font-size: 18px;
}

.resaltado .info small {  
font-family: 'Raleway', sans-serif;  
display: block;
color:white;
font-size:13px;
margin-left:3px;
margin-top: 7px;
}


.resaltado:after {
content: "";
position: absolute;
top: -100px;
right: -20px;
width: 50px;
height: 50px;
background-color: #ff5a07; 
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
/* SVG embebido como background-image */
display: inline-block;
vertical-align: middle;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path class='fa-secondary' opacity='.4' d='M258.1 134.5c0 9.8 6.1 19 15.8 22.6l59.7 21.7c-5.1 14.1-10.3 28.2-15.4 42.3c-7.3 20.1-14.6 40.1-21.9 60.1c-2.4 6.7-4.9 13.4-7.3 20.2c-4.5 12.5 1.9 26.2 14.3 30.8s26.2-1.9 30.8-14.3l44.6-122.6 60.6 22c12.5 4.5 26.2-1.9 30.8-14.3L508.4 97.7c4.5-12.5-1.9-26.2-14.3-30.8l-60.6-22 4.6-12.7c4.5-12.5-1.9-26.2-14.3-30.8c-2.7-1-5.5-1.5-8.2-1.5c-9.8 0-19 6.1-22.6 15.8l-4.6 12.7L328.7 6.7c-12.5-4.5-26.2 1.9-30.8 14.3L259.6 126.3c-1 2.7-1.5 5.5-1.5 8.2z' fill='white'/><path class='fa-primary' d='M318.3 221.2l-28.8-10.8c-9.7-3.7-18.4-9.6-25.4-17.4L235 160.2c-18.2-20.5-44.3-32.2-71.8-32.2l-27.7 0c-36.4 0-69.6 20.5-85.9 53.1L3.4 273.7c-7.9 15.8-1.5 35 14.3 42.9s35 1.5 42.9-14.3L80 263.5 80 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-128 20.2 0L192 407.5l0 72.4c0 17.7 14.3 32 32 32s32-14.3 32-32l0-72.4c0-9.9-2.3-19.7-6.8-28.6L216 312.4l0-77.3 .3 .3C230.1 251 247.5 263 267 270.3l29.3 11 21.9-60.1zM144 96a48 48 0 1 0 0-96 48 48 0 1 0 0 96z' fill='white' /></svg>");
background-repeat: no-repeat;
background-position: center;
background-size: 30px;
}

.resaltado.twitter:after {
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z' fill='white'/></svg>");
}

.resaltado.libertadvcfradio:after {
background-image:url("../../images/LibertadVCFRadio.png");
background-size: contain;
}

.resaltado.libertadvcf:after {
background-image:url("../../images/LibertadVCF.png");
background-size: contain;
background-color: black; 
}
.resaltado.valenciacf:after {
background-image:url("../../images/valenciacf.png");
background-size: contain;
background-color: white;
border: none; 
}


.resaltado.down:after{
top: 100px;
right: -16px; 
background-color: white;
}


.resaltado:before {
content: "";
position: absolute;
width:2px;
height:45px;
background-color: black;
top: calc(-100px + 52px);
right: 4px;
border:solid 1px white;
}

.resaltado.down:before {
content: "";
position: absolute;
width:2px;
height:78px;
background-color: black;
top: 20px;
right: 8px;
border:solid 1px white;
}

#contenido {
display:none;
/*  background-image:url(content/manifestacion_background.jpg);*/
background-repeat: no-repeat;
width:100%;
height:549px;
background-color: black;
margin-top:80px;
position:relative;
border-top:solid 8px #ff5a07; 
margin-left: -16em;
width: 100vw;
}

#contenido .superposicion {
/* background-image:url(content/manifestacion_javi.png);*/
background-repeat: no-repeat;
width:763px;
height:841px;
margin-top:80px;
position:absolute;
top: -255px;
left: 271px;

pointer-events: none;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1;
}

#contenido h2 {
color: white;
font-weight: bold;
width: 600px;
float: right;
font-size:50px;
text-align: right;
padding-right: 100px;
padding-top: 50px;

opacity: 0;
transform: translateY(10px);
transition: opacity 0.8s ease, transform 0.8s ease;
position: relative;
z-index: 2;
clear: both;
    margin-bottom: 10px;
}

#contenido p {
opacity: 0;
color: white;
font-weight: normal;
width: 600px;
float: right;
font-size:20px;
text-align: right;
padding-right: 100px;
text-align: justify;
transform: translateY(10px);
transition: opacity 0.8s ease, transform 0.8s ease;
position: relative;
z-index: 2;
clear: both;
}

#contenido .links a {
color: white;
font-weight: normal;
width: 600px;
float: right;
font-size:20px;
text-align: right;
padding-right: 100px;

transform: translateY(10px);
transition: opacity 0.8s ease, transform 0.8s ease;
position: relative;
z-index: 2;
clear: both;
}

#contenido .links a.libertadvcf{
background-image: url(../../images/LibertadVCFRadio.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin-right: 100px;
}

.year-nav {
float:right;
margin-right:20px;  
}

#contenido .superposicion.radio_superposicion {
width:1265px;
height:769px;
top: -226px;
left: -2px;
}

#contenido .superposicion.rrss_superposicion
{
  width: 546px;
  height: 654px;
  top: -182px;
  left: 326px;
}

#contenido .superposicion.valenciacf_superposicion {
  width: 1199px;
  height: 505px;
  top: -185px;
  left: 162px;
}


#contenido .superposicion.libertadvcf_superposicion {
  width: 408px;
  height: 408px;
  top: -222px;
  left: 131px;
}

#contenido .superposicion.legal_superposicion {
   width: 1150px;
  height: 590px;
  top: -140px;
  left: 101px;
}

#contenido .superposicion.celta_superposicion {
  width: 1063px;
  height: 752px;
  top: -216px;
  left: 285px;
}


.year-nav {
display: flex;
flex-direction: row;
flex-wrap:nowrap;
align-items: center;
justify-content: space-around;
width:350px;
}

.year-nav a {
color:white;
text-decoration: none;
font-weight: bold;
padding: 0;
margin: 0;
text-decoration:none;
border-bottom: none;
}

.year-nav a.active{
font-size:30px;
}

.mes-nav {
float: right; 
margin-right: 20px;
display: flex;
flex-direction: row;
flex-wrap:nowrap;
align-items: center;
justify-content: space-around;
width:1000px;
clear: both;
margin-top:10px;
}

.mes-nav  a {
color:white;
text-decoration: none;
font-weight: bold;
padding: 0;
margin: 0;
font-size: 12px;
border: solid 1px #ffffff33;
padding: 5px;
padding-right:10px;
padding-left:10px;
border-radius: 5px;
position:relative;
}

.mes-nav  .contador-bullet {
content: counter(item);
counter-increment: item;
width: 17px;
height: 17px;
border-radius: 50%;
background-color: orangered; 
border: solid 2px black;
outline: black;
color: black;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
position:absolute;
right: -10px;
bottom: -10px;
}

.scroll-x {
width: 100%;
height: 50px;
overflow-x: scroll;   /* permite scroll horizontal */
overflow-y: hidden;   /* evita scroll vertical */
white-space: nowrap;  /* evita que se rompa en varias líneas */

/* Ocultar scrollbar en distintos navegadores */
scrollbar-width: none;      /* Firefox */
-ms-overflow-style: none;   /* IE y Edge antiguo */
}

.scroll-x::-webkit-scrollbar {
display: none; /* Chrome, Safari y Opera */
}


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

    .nota {
      display: none;
    }

    .year-nav {
      width: 100%;
      margin-right: 0;
    }

    .mes-nav {
      width: 100%;
    }

    .timeline {
        margin-left: -1.9em;
    }

    #contenido {
      background-image: none !important;
    }

   #contenido .superposicion  {
     background-image: none !important;
     display: none;
   }

   #contenido h2 {
    font-size: 1.5em;
   }

     #contenido {
      margin-left:0;
     }

     .timeline {
          min-height: 12em;
          height: auto;
          align-items: self-end;
          margin-bottom: 2em;
      }

    #contenido {
        background-repeat: no-repeat;
        width: 100%;
        height: auto;
        background-color: black;
        margin-top: 0;
        position: relative;
        border-top: 0;
        margin-left: 0;
    }

  #contenido h2 {
      float:none;
      padding-right: 0;
      padding-top: 0;
      margin-bottom: 0; 
      width: auto;
      text-align:left;
      font-size: 1.1em;
      font-weight: bold;
  }

  #contenido p {
      width: auto;
      float: none;
      font-size: 1em;
      text-align: left;
      padding-right: 0;
      text-align: justify;
  }

  #contenido .links {
    display: none;
  }

  .mes-nav {
    float: none;
  }


}