body {
    background-color: #FFFAFA;
    color: black; 
    margin:0;
    padding:0;
    font-family: 'Roboto', sans-serif;
  }
  .video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    
}


li.cabecera {
    display: inline;
    float: left;
  }
ul.cabecera {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ed2024;
  }
li.cabecera a {
    display: block;
    color: #FFFAFA; 
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  li.cabecera a:hover {
    background-color: #111;
  }
.active {
  background-color: #04AA6D;
}

h1 {color: #ed2024; line-height: 1.25; margin: 0 0 10px; font-size: 40px; font-weight: bold; }
h2 {color: black; line-height: 1.0; margin: 0 0 10px; font-size: 20px; font-weight: normal;}
h3 {color: black; line-height: 1.0; margin: 0 0 10px; font-size: 27px; font-weight: bold; margin-top: 29px;margin-bottom: 20px;}
p { color: #bab6b6;  font-size: 16px; font-weight: 300; line-height: 1.5625; margin-bottom: 15px; }

.content_index {
  margin-top:400px;

  position: absolute;

  left: 50%;
  transform: translate(-50%, -50%);
  
}

.content_donate {
  margin-top:540px;

  position: absolute;

  left: 50%;
  transform: translate(-50%, -50%);
  
}
.content_funding {
  margin-top:500px;

  position: absolute;

  left: 50%;
  transform: translate(-50%, -50%);
  
}
.content_tshirt {
  margin-top:720px;

  position: absolute;

  left: 50%;
  transform: translate(-50%, -50%);
  
}
.content_littleledgers {
  margin-top:650px;

  position: absolute;

  left: 50%;
  transform: translate(-50%, -50%);
  
}
.content {
  margin-top:30%;

  position: absolute;

  left: 50%;
  transform: translate(-50%, -50%);
  
}
.titulo {
  display: flex;
  align-items: center;
}
.imagen {
  width: 300px; /* Ajusta el ancho según tus necesidades */
  height: auto; /* Para mantener la proporción original de la imagen */
  margin-right: 0px; /* Espacio entre la imagen y el texto */
}
.div_imagen_center{
  text-align: center;
}
.imagen_center {
  width: 300px; /* Ajusta el ancho según tus necesidades */
  height: auto; /* Para mantener la proporción original de la imagen */
  margin-right: 0px; /* Espacio entre la imagen y el texto */
  display: inline-block;
}
.imagen_qr {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.imagen_footer {
  width: 50px; /* Ajusta el ancho según tus necesidades */
  height: auto; /* Para mantener la proporción original de la imagen */
  margin-bottom: 3px; /* Espacio entre la imagen y el texto */
  margin-right: 10px;
}

.textologo {
  flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
  color: black;  
  font-size: 100px; 
  font-weight: 1000;
  font-weight: bolder;
}
.textfooter {
  flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
  color: #fffafad5;  
  font-size: 15px; 
  font-weight: bold;

}
#rcorner {
    border-radius: 25px;
    background: white;
    border: 2px solid #121212;
    padding: 20px; 
    width: 825px;
    height: auto;  
    transition: background-color 0.3s;
    overflow: hidden;
  }
  #rcorner:hover {
    background-color: white; /* #FFFAFA Cambia el color de fondo al pasar el ratón por encima */
  }
  #rcorner ul {
    font-weight: normal;  /* Cambia el tipo de marcador de lista dentro de #rcorner */
  }
  
  #rcorner li {
    font-weight: normal; /* Texto en negrita para los elementos de la lista dentro de #rcorner */
    margin-bottom: 8px;
     }

footer {

  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #000;
  color: #FFFAFA;
  padding: 3px;
  width: 100%;
  text-align: left; /* Alinea el texto a la izquierda */
  display: flex; /* Utiliza flexbox para alinear la imagen y el texto en línea */
  align-items: center;
  }
  .footer-icons a {
    text-decoration: none; /* Elimina la subrayado predeterminado de los enlaces */
    color: hsl(0, 0%, 100%); /* Establece el color del enlace */
    transition: background-color 0.3s;
   
}

.footer-icons a:hover {
    color: hsl(0, 0%, 44%); /* Mantiene el mismo color al hacer hover */
}


.pushable {
  margin-left: 5px;
  margin-top: 40px;
  background: black;
  border-radius: 12px;
  border: 2px solid hsl(0, 0%, 0%);
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  
}
#enlacesinsub{
  text-decoration: none;
  color: black;
}
#enlacesinsub:hover{
  text-decoration: none;
  color: black;
}
#enlacesinsub:visited{
  text-decoration: none;
  color: black;
}
.front {

  display: block;
  padding: 12px 30px;
  border-color: #000000;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 12px;
  font-size: 1.25rem;
  background: white;
  color: black;
  transform: translateY(-6px);
  transition: background-color 0.3s;
  
}

.pushable:active .front {
  transform: translateY(-4px);
  
}

.pushable:hover .front {
  background: #FFFAFA;
  
}
@media screen and (max-width: 2956px) {
  .content_funding {
      margin-top: 500px; /* Puedes ajustar este valor según tus necesidades */
  }
}
@media screen and (max-width: 2717px) {
  .content_funding {
      margin-top: 500px; /* Puedes ajustar este valor según tus necesidades */
  }
}
@media screen and (max-width: 2056px) {
  .content_funding {
      margin-top: 500px; /* Puedes ajustar este valor según tus necesidades */
  }
}
@media screen and (max-width: 1719px) {
  .content_littleledgers {
      margin-top: 675px; /* Puedes ajustar este valor según tus necesidades */
  }
}
@media screen and (max-width: 1611px) {
  .content_funding {
      margin-top: 500px; /* Puedes ajustar este valor según tus necesidades */
  }
}