#header{
    height: 175px;
    width: 100%;
    background-color: rgb(37, 71, 172);
    margin-left: auto;
    margin-right: auto;
}
#section{
    height: 1360px;
    width: 900px; 
    background-color: rgb(4, 34, 78);
    margin-left: auto;
    margin-right: auto;
}
#footer{
    height: 60px;
    width: 100%;
    background-color: rgb(37, 71, 172);
    margin-left: auto;
    margin-right: auto;
}
#ContHeader{
    height: 175px;
    width: 900px;
    background-color: rgb(14, 58, 116);
    margin-left: auto;
    margin-right: auto;
}
#logo{
    height: 100px;
    width: 100px;
    margin-left: 50px;
    margin-right: 10px;
    margin-top: 40px;
    float: left;
}
#titulo{
    height: 50px;
    width: 300px;
    margin-left: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    float: left;
}
#tradu{
    height: 50px;
    width: 400px;
    margin-top: 30px;
    text-align: right;
    float: left;
}
#Menu{
    height: 62px;
    width: 550px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    float: left;
}
#cajasMenu{
    height: 62px;
    width: 120px;
    margin-left: 10px;
    margin-right: auto;
    float: left;
}
#ContFooter{
    height: 60px;
    width: 900px;
    background-color:rgb(14, 58, 116);
    margin-left: auto;
    margin-right: auto;
}
#footerBox1{
    height: 25px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#footerBox2{
    height: 15px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
#box1{
    height: 80px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    float: left
}
#boxSiglas{
    height: 350px;
    width: 350px;
    margin-left: 100px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-top: 30px;
    float: left
}
#boxSigSiglas{
    height: 340px;
    width: 300px;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-top: 30px;
    float: left;
}
.sigla{
    height: 20px;
    width: 20px;
    margin-left: 100px;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 25px;
    float:left;
}
.siglaGrande{
    height: 40px;
    width: 20px;
    margin-left: 100px;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 25px;
    float:left;
}
.significado{
    height: 20px;
    width: 190px;
    margin-left: 30px;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 25px;
    float:left;
}
.significadoGrande{
    height: 40px;
    width: 190px;
    margin-left: 30px;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 25px;
    float:left;
}
#boxLogo{
    height: 400px;
    width: 275px; 
    margin-left: 100px;;
    margin-right: auto;
    margin-top: 15px;
    float: left;
}
#significadoLogo{
    height: 400px;
    width: 350px; 
    margin-left: 100px;
    margin-right: auto;
    margin-top: 15px;
    float: left;
}
/* general */
.justificado{
  text-align: justify;
}
body{
    margin: 0;
    background-image: url("pato.gif");
}
h1{
    font-size: 45px;
    line-height: 10px;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.center{
    text-align: center;
}
.grande{
    font-size: 120%;
}
.chico{
    font-size: 70%;
}
#copyright{
    margin-top: 40px;
    text-align: center;
}
h4,h2{
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
h5{
    color: white;
    margin: 0;
    padding: 0;
}
p{
    color: white;
}
a{
    color: inherit;
    text-decoration: none;
}
ul{
    color: white;
}
hr {
    border: 1px solid #c0aeae;
    margin: 20px auto;
    width: 90%;
}
a:hover{
    text-decoration: underline;
}
#logo:hover{
    transform: scale(1.05);
}

/*propuestas*/
#section2{
    height: 1230px;
    width: 900px; 
    background-color: rgb(4, 34, 78);
    margin-left: auto;
    margin-right: auto;
}

#contSection2{
    height: 1230px;
    width: 750px;
    margin-left: 75px;
    margin-right: auto;
    float:left;
}

/*candidatos*/
#section3{
    height: 2780px;
    width: 900px; 
    background-color: rgb(4, 34, 78);
    margin-left: auto;
    margin-right: auto;
}

.candidato{
    height: 400px;
    width: 275px; 
    margin-left: 100px;;
    margin-right: auto;
    float: left;
}

.info{
    height: 400px;
    width: 350px; 
    margin-left: 30px;
    margin-right: auto;
    float: left;
}

.boleta{
  height: 350px;
  width: 250px; 
  margin-left: 40px;
  margin-right: auto;
  float: left;
}

/*carta organica*/

#contSection4{
    height: 800px;
    width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.cero{
    margin: 0;
}
.cero2{
    margin: 0;
}

ol{
    color:white;
}

#section4{
    height: 880px;
    width: 900px; 
    background-color: rgb(4, 34, 78);
    margin-left: auto;
    margin-right: auto;
}

/* tablet */
@media screen and (min-width: 600px) and (max-width: 1023px){
  li{
    max-width: 400px
  }
  #footer,#contFooter{
    width:600px
  }
  #header,#contHeader{
    width:600px;
    height:500px
  }
  #section,#section2,#section3,#section4,#contSection2,#contSection4 #ContHeader, #ContFooter, #box1, #footerBox1, #footerBox2{
    width:580px
  } 
  #section{
    height:auto
  }
  #section2,#contSection2,#section4,#contSection4{
    height:auto;
    overflow:hidden
  }
  #Menu{
    margin-bottom:0
  }
  #section3{
    height:3130px
  }
  #contSection4{
    height:1500px;
    margin-left:60px
  }
  #header, #ContHeader{
    height:220px
  }
  #tradu{
    width: 50px
  }
  #boxSiglas{
    height: 280px
  }
  hr{
    width:500px
  }
  .center{
    max-width:580px
  }
  p,h4{
    max-width:500px;
    font-size: 20px;
  }
  #boxSigSiglas{
    height:auto;
    margin-left:110px;
  }
  #significadoLogo{
    height:auto
  }
  img{
    max-width: 550px
  }
  .candidato{
    height:300px;
    margin: 0;
  }
  .info{
    width:200px
  }
  h1{
    line-height: 1.1;
  }
  .boleta{
    margin-bottom:10px;
    margin-left:30px
  }
}
/*celular*/
@media screen and (max-width: 599px){
  #logo{
    display:none
  }
  p{
    font-size:16px;
    max-width:90%
  }
  li{
    max-width:80%
  }
  h1{
    text-align:center;
    max-width:85%
  }
  h4{
    font-size:25px;
    margin-left:10%;
    margin-top:0px;
    width:100%
  }
  li{
    max-width: 250px
  }
  #footer,#contFooter,#titulo{
    width:100%;
  }
  #Menu{
    width:100%;
    margin-top:30px
  }
  #tradu {
  position: absolute; /* Permite posicionar el elemento en relación con el contenedor padre */
  top: 10px; 
  right: 10px; 
  width: auto; 
  margin: 0; 
  }
  #cajasMenu{
    width:45%;
    margin-left:0px;
    margin-right:0px;
  }
  #section,#section2,#section3,#section4,#contSection2,#contSection4, #ContFooter, #box1, #footerBox1, #footerBox2{
    width:95%;
  } 
  #section3,#section,#section4,#contSection4,#section2,#contSection2{
    height:auto;
    overflow: hidden;
  }
  #contSection2 li,#contSection2 p{
    max-width:80%
  }
  h2{
    max-width:90%
  }
  #header,#ContHeader{
    background-color: rgb(14, 58, 116);
    height:42%;
    width:100%
  }
  hr{
    width:85%
  }
  .center{
    max-width:95%
  }
  h1{
    line-height: 1.1;
  }
  IMG{
    max-width:70%;
    max-height:70%
  }
  .candidato, .info {
    width: 100%; /* Asegura que cada elemento ocupe todo el ancho disponible */
    margin: 10px 0; /* Añade un poco de espacio entre los elementos */
    float: none; /* Desactiva el flotado para que los elementos no se alineen en horizontal */
    text-align: center; /* Centra el contenido dentro de cada elemento */
    height:auto
  }

  .candidato img, .info img {
    max-width: 80%; /* Ajusta el tamaño máximo de las imágenes */
    height: auto; /* Mantiene la proporción de las imágenes */
  }

  .info {
    padding: 10px; /* Añade un poco de espacio alrededor del texto */
    margin-top:5px;
    margin-bottom:5px;
    margin-left:0
  }
  .siglaGrande,.sigla{
    display:none
  }
  .significadoGrande,.significado,.cero{
    text-align:center;
  }
  .cero2{
    display:none
  }
  iframe{
    width:100%;
    height:auto
  }
  #box1{
    width:100%;
    text-align:center
  }
  #boxSiglas{
    width:100%;
    text-align:center;
    margin-left:16%;
    margin-bottom:0;
    height:auto;
  }
  #boxSigSiglas{
    width:100%;
    margin-top:0;
    margin-left:5%;
    height:auto
  }
  #boxSigSiglas li{
    max-width:90%;
  }
  #boxLogo{
    width:100%;
    margin-left:5%;
    margin-bottom:0;
    height:auto
  }
  #boxLogo IMG{
    max-width:90%;
    height:auto
  }
  #significadoLogo{
    width:100%;
    margin-left:10%;
    margin-top:0;
    height:auto
  }
  #contSection4{
    margin-top:5%
  }
  #contSection4 li,#contSection2 li{
    max-width:100%
  }
  #contSection2{
    margin-left:10%
  }
  .boleta{
    width:100%;
    height:auto;
    margin-bottom:5%;
    margin-left:15%
  }
  #section4 h4{
    max-width:80%;
    text-align:left
  }
  #section4 .cero{
    margin-left:10%
  }
}