* {
 /*  margin: 0;
  padding: 0; */
  font-family: arial;
} 

body { padding-top: 70px; }  /* para el sijado del menu */ 

body {
  background: #E6E6FA; /* #DCDCDC;  #6495ED; #F0F8FF; #323a46; */
 /*  font-family: arial; */

}

.encapsulador {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;  /* lo coloque despues */
  /* text-align: center;  */
  box-sizing:border-box;  /* probar quitandolo */
  
}

.azul {
color: blue;
}

.azulcentrado {
color: blue;
text-align: center;
}

.rojo {
color: #FF0000;
}

.resaltado {
  background-color: #FFFF00;
}

.label-amarillo {
  background-color: #FFFF00;
  color: #000;
}

mark {
  background-color: #FFFF00;
  color: #000;
}

.centrado {
  text-align: center;
}

    /*    */

section {
  /* display: block; */
  clear: both;  /* clear: none; */
  /* float: left;  */
  margin: 15px;
  padding: 5px;
  /* border: 2px solid #555; */
  width: 30%;   /*   width: 100px;  */
  height: auto; /*  height: 150px;  */
  /* font: 1em Arial, Helvetica, sans-serif; */
  box-sizing:border-box;
  /* overflow: hidden;  /* lo coloque despues */
}

section.centrado {
  text-align: center;
}


header {
  background: #E0FFFF; /* 70DBFF; /* 00CED1; /* #b3dced; #fff; */ 
  width: 100%;  
  max-width: 1000px;
  margin: 20px 0;    
  padding: 20px;   

}

header h1 {
  text-align: center;
  color: red;
}

header nav {
  background: #528fd5;
  overflow: hidden;

}

header nav ul {
  list-style: none;

}

header nav ul li {
  float: left;
}

header nav ul li a {
  padding: 10px 20px;  
  display: block;
  color: #fff;
  text-decoration: none;

}

header nav ul li a:hover {
  background: #ff0000;

}
  

header img {
  width: 100%;  
  height: auto;
}


h2 {
  width: 100%;
}

p.centrado {
  width: 100%;
  text-align: center;
}

.main {
  /* width: 100%; */
  background: #fff;  /*  #E6E6FA; */
  padding: 10px;
  /* float: left; */
  box-sizing:border-box;
 /* overflow: hidden;  /* lo coloque despues */
  display: -webkit-flex;
  display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}

/* agreado  */
.flexi01 {
  width: 100%;
  background: #fff;  /*  #E6E6FA; */
  /* padding: 10px; */
  /* float: left; */
  box-sizing:border-box;
 /* overflow: hidden;  /* lo coloque despues */
  display: -webkit-flex;
  display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}
/* hasta aqui agregado */

.lleno {
  width: 98%;
  background: #CCFFFF; /* #fff; */
  padding: 10px;
  float: left;
  box-sizing:border-box;
  margin: 5px;
  /*  padding-bottom: 1000px;   /* esto hace del mismo tamaño pero las pega, probar comentandolo */
 /*  margin-bottom: -1000px;  /* esto hace del mismo tamaño pero las pega, probar comentandolo */
}

.llenod {  
  background: #CCFFFF; /* #fff; */
}

.bloque {
  width: 32%;
  background: #CCFFFF; /* #fff; */
  padding: 10px;
  float: left;
  box-sizing:border-box;
  margin: 5px;
  /*  padding-bottom: 1000px;   /* esto hace del mismo tamaño pero las pega, probar comentandolo */
 /*  margin-bottom: -1000px;  /* esto hace del mismo tamaño pero las pega, probar comentandolo */
}

.bloqueinicial {
  width: 32%;
  background: #CCFFFF; /* #fff; */
  padding: 10px;
 /* float: none; */
  display: block;
  /* overflow: hidden;  /* lo coloque despues */
  box-sizing:border-box;
  margin: 5px;
  /*  padding-bottom: 1000px;   /* esto hace del mismo tamaño pero las pega, probar comentandolo */
 /*  margin-bottom: -1000px;  /* esto hace del mismo tamaño pero las pega, probar comentandolo */

}

.bloquesimple {
  width: 100%;
  background: #FFF; /* #fff; */
  padding: 40px;
  float: left;
  box-sizing:border-box;
  margin: 5px;
  /*  padding-bottom: 1000px;   /* esto hace del mismo tamaño pero las pega, probar comentandolo */
 /*  margin-bottom: -1000px;  /* esto hace del mismo tamaño pero las pega, probar comentandolo */
}

.bloquesimple h2 {
  text-align: center;
  color: red;
}

.noalineado {
   width: 100%;
  /*  clear: both;
  float: none;  */
 }


/*
.gallery {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}
.gallery li{
   display: -webkit-flex;
   display: flex;
}

*/ 
/* .column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}
*/

.main img {
  width: 100%;
  height: auto;
}


/* div {
  display: inline;
  float: left;
  margin: 1em;
  padding: .3em;
  border: 2px solid #555;
  width: 30%;   
  height: auto; 
  font: 1em Arial, Helvetica, sans-serif;
} */



.main img.centrada {
  width: 650px; /* 100%; */
  height: auto;
  margin: auto;
  display: block;
    
}

.centrada2 {
  width: 650px; /* 100%; */
  height: auto;
  margin: auto;
  display: block;
    
}



/*       nuevo footer inicio        */

/*    este lo agregue como foo ter y no clase ini01     */
footer {
    background: #222222 none repeat scroll 0 0;
    border-top: 4px solid #fcab0e;
    margin: 0;
    padding: 20px 0;
}

footer h4 {
    color: #fcab0e; 
    font-family: roboto;
    font-weight: bold;
    margin-bottom: 30px;
    text-transform: uppercase;
}

footer p {
    color: #ffffff;   /*   #fff; */
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 15px;
    text-align: justify;
}

/*    este lo agregue como foo ter y no clase fin01     */

.footer {
    background: #222222 none repeat scroll 0 0;
    border-top: 4px solid #fcab0e;
    margin: 0;
    padding: 20px 0;
}

.footer_dv {
    width: 100%;
}

.footer_dv h4 {
    color: #fcab0e; 
    font-family: roboto;
    font-weight: bold;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.footer_dv ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.footer_dv ul li:first-child {
    border-top: medium none;
    box-shadow: none;
}

.footer_dv ul li {
    border-top: 1px solid #000;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2);
    color: #f1f2f2;
    padding: 5px 0;
}

.footer_dv p {
    color: #ffffff;   /*   #fff; */
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 15px;
    text-align: justify;
}



/*       nuevo footer fin            */


@media  screen and (max-width: 800px) {
  .main {
    width: 100%;
  }
  
  .lleno {
    width: 100%;

    }

   .bloque {
    width: 100%;

    }

   .bloqueinicial {
    width: 100%;
  }


   /*  .bloque {
    width: 40%;
  }  */


}

@media  screen and (max-width: 400px) {
  .encapsulador {
    width: 100%;

  }

  .lleno {
    width: 100%;

    }

   .bloque {
    width: 100%;
  }
     .bloqueinicial {
    width: 100%;
  }