header {
  /*min-width: 960px;*/
  position: fixed;
  z-index: 4000;
  top: 0;
  left: 0;
  right: 0;
  display: table;
  width: 100%;
  height: 50px;
  overflow: visible;
  background-color: #003057;
  -webkit-transition: padding 0.3s;
  -moz-transition: padding 0.3s;
  transition: padding 0.3s;
  border: none;

}
header element-middle {
  height: 60px;
  line-height: 60px;
}

nav {
  align-content: left;
}

@font-face {
  font-family: 'Raleway';
  src: url('/fuente/Raleway-Regular.ttf') format('truetype');
  src: url('/fuente/Raleway-Bold.ttf') format('truetype');
}

body {

    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: url('../imagenes/bg-wave-home.jpg') fixed;
    background-size: cover;
    background-position: center;
}

.centro {
  position: sticky;
margin-top: 425px;
    display: flex;
    align-items: center;
    justify-content: center;


}
.h1{
  font-family: 'Raleway', sans-serif; /* Utiliza la fuente Raleway */
  font-size: 36px;
  color: #003057;
  font-weight: bold;

}


.eleccion {
  font-family: 'Raleway', sans-serif; /* Utiliza la fuente Raleway */
  font-size: 26px;
  color: #003057;
  font-weight: bold;
  border-collapse: collapse; /* Elimina los bordes entre celdas */
  margin: 0 auto; /* Centra horizontalmente */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centra verticalmente y horizontalmente */
/*border-spacing: 100px;*/
vertical-align: middle;
/*text-align: center;*/
  width: 750px;
}

/* Estilos para las celdas de la tabla */
.eleccion td {
  padding: 10px; /* Espacio interno de 10px en las celdas */
border: none;
}
.eleccion a{
  font-family: 'Raleway', sans-serif; /* Utiliza la fuente Raleway */
    color: #003057;

}

.center {
  display: flex;
  justify-content: center;
  align-items: center;

}
/* Estilo para el botón del formulario */
.button-form {
  background-color: #0074cc; /* Color de fondo azul */
  color: #ffffff; /* Color de texto blanco */
  font-family: 'Raleway', sans-serif; /* Fuente Raleway */
  font-size: 20px; /* Tamaño de fuente 20px */
  font-weight: bold; /* Texto en negrita */
  border: none; /* Sin borde */
  border-radius: 10px; /* Esquinas redondeadas */
  padding: 10px 20px; /* Relleno interno para ajustar el tamaño del botón */
  cursor: pointer; /* Cambia el cursor al pasar el mouse */
}

/* Estilo para cuando el mouse está sobre el botón */
.button-form:hover {
  background-color: #0052a7; /* Cambia el color de fondo al pasar el mouse */
}

/* Estilo para cuando el botón está presionado */
.button-form:active {
  background-color: #003d81; /* Cambia el color de fondo al hacer clic */
}
input[type="text"],
input[type="email"]
{
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 20px;
}
input[type="checkbox"]
{
    width: 20px;
    height: 20px;
    border-radius: 50%; /* Para hacer las esquinas redondeadas y hacerlo cuadrado */
    border: 1px solid #000; /* Un borde opcional */
  }

  /* Estilo para el checkbox cuando está marcado */
  .checkbox:checked {
    background-color: #007bff; /* Cambia el color de fondo cuando está marcado */
    border: 1px solid #007bff; /* Cambia el color del borde cuando está marcado */
  }
  select {
      font-size: 20px; /* Tamaño de fuente */
      padding: 10px; /* Espaciado interno para mayor comodidad */
      width: 100%; /* Ancho del select */
      border: 1px solid #ccc;
      border-radius: 5px;
  }

  /* Estilo para las opciones dentro del select */
  option {
      font-size: 20px; /* Tamaño de fuente de las opciones */
  }
  @media (max-width: 768px) {
    .centro {
      position: sticky;
    margin-top: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    input[type="text"],
    input[type="email"] {
      width: 100%;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 15px;
    }
    input[type="checkbox"]
    {
        width: 15px;
        height: 15px;
        border-radius: 50%; /* Para hacer las esquinas redondeadas y hacerlo cuadrado */
        border: 1px solid #000; /* Un borde opcional */
      }

      .h1{
        font-family: 'Raleway', sans-serif; /* Utiliza la fuente Raleway */
        font-size: 26px;
        color: #003057;
        font-weight: bold;

      }
      .eleccion {
        font-family: 'Raleway', sans-serif; /* Utiliza la fuente Raleway */
        font-size: 16px;
        color: #003057;
        font-weight: bold;
        border-collapse: collapse; /* Elimina los bordes entre celdas */
        margin: 0 auto; /* Centra horizontalmente */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Centra verticalmente y horizontalmente */
      border-spacing: 100px;
      vertical-align: middle;
      /*text-align: center;*/
        width: 550px;
      }

      select {
          font-size: 15px; /* Tamaño de fuente */
          padding: 10px; /* Espaciado interno para mayor comodidad */
          width: 100%; /* Ancho del select */
          border: 1px solid #ccc;
          border-radius: 5px;
      }

      /* Estilo para las opciones dentro del select */
      option {
          font-size: 15px; /* Tamaño de fuente de las opciones */
      }

}
@media (max-width: 450px) {
  .centro {
    position: sticky;
  margin-top: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  nav {
    /*float: left;*/
    text-align: center;
  }


  input[type="text"],
  input[type="email"] {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
  }
  input[type="checkbox"]
  {
      width: 15px;
      height: 15px;
      border-radius: 50%; /* Para hacer las esquinas redondeadas y hacerlo cuadrado */
      border: 1px solid #000; /* Un borde opcional */
    }

    .h1{
      font-family: 'Raleway', sans-serif; /* Utiliza la fuente Raleway */
      font-size: 14px;
      color: #003057;
      font-weight: bold;

    }
    .eleccion {
      font-family: 'Raleway', sans-serif; /* Utiliza la fuente Raleway */
      font-size: 14px;
      color: #003057;
      font-weight: bold;
      border-collapse: collapse; /* Elimina los bordes entre celdas */
      margin: 0 auto; /* Centra horizontalmente */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* Centra verticalmente y horizontalmente */
    border-spacing: 1px;
    vertical-align: middle;
    /*text-align: center;*/
      width: 300px;
    }
    /* Estilos para las celdas de la tabla */
    .eleccion td {
      padding: 7px; /* Espacio interno de 10px en las celdas */
    border: none;
    }
    select {
        font-size: 14px; /* Tamaño de fuente */
        padding: 10px; /* Espaciado interno para mayor comodidad */
        width: 100%; /* Ancho del select */
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    /* Estilo para las opciones dentro del select */
    option {
        font-size: 14px; /* Tamaño de fuente de las opciones */
    }
}