/*créditos al canal  https://www.youtube.com/watch?v=ys2kaK8HgnA */
/* hice algunas mejoras */
body {
  font-family:"MS Serif, New York, serif";
  color: rgba(232, 235, 236, 0.938); /*color en el texto del body*/
  font-size: 1.2rem; /*tamaño de las letras*/
  line-height: 1.6em; /* interlineado */
  margin: 0;
  /*background-color: #00BFFF;*/






 /* background-color:rgba(0, 195, 255, 0.9);*/






  /*background-color:#3498db;*/



 /* background:"imagen1.jpg";*/

  
  /*background:linear-gradient(top, maroon, black);
  background:-webkit-linear-gradient(top,  maroon, black);
  background:-moz-linear-gradient(top,  maroon,  black);
  background:-o-linear-gradient(top,  maroon,  black);
  background:-ms-linear-gradient(top,  maroon,black);*/
  

}

h1 {
  font-size: 2rem;
  line-height: 1.3em;
}

/* parrafos */
p {
  margin-bottom: 1.6em; /*margen inferior funciona como enter entre parrafos*/
}

.container2 {
  width: 70%;
  height: 500px;
  max-width: 850px;
  background-image:url(LOG-MINGA1.png);
  background-position-x: center;
  background-size: cover;
  font-family:"Times New Roman";
  font-size: 3rem; /*tamaño de las letras*/

  margin: 0 auto;
  /*background-size: contain;*/
}
.container1 {
  width:80%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  color: rgb(3, 42, 73);
}
.container3 {
  width: 80%;
  max-width:850px;
  margin: 0 auto;
  text-align: center;
  color: rgb(3, 42, 73);
  font-size: 2rem; /*tamaño de las letras*/
}


.container4 {
  width: 75%;
  height: auto;
  max-width: 750px;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(3, 42, 73);
  text-align: justify;
}



.container5 {

  width: 75%;
  max-width: 750px;
  color: rgb(3, 42, 73);
  font-size: 1.2rem; /*tamaño de las letras*/
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
  
  margin: 0 auto;
}
.container {
  width: 85%;
  height: auto;
  max-width: 850px;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  
  
}







.header {
  
  background-image: url("fondo1.jpg");
  /*background: rgb(3, 42, 73);*/
  color: white;
  padding: 2rem 0; /*para el alto del header*/

  /* hacer el menu fijo */
  /* si deseamos que no sea fijo, simplemente eliminamos lo que está debajo*/
  
  /*position: fixed;
  left: 0;
  top: 0;*/
  /* ocuapamos todo el ancho */
  /*right:0;*/


}

.header a {
  color: rgb(255, 255, 255); /*color de texto*/
  text-decoration: none;
}

.logo-nav-container {
  display: flex;
  justify-content: space-between;
  /* lo alineamos al centro */
  align-items: center;

  flex-wrap: wrap;
}

/* logo */
.logo {
  letter-spacing: 15px;
  font-size: 1.3em;
}

.menu-icon span {
  margin-right: 5px; /*para espaciar el icono del texto*/
}
/*-----------------------------------------------------------------------------------*/
.menu-icon {
  display: none;
}

.menu-icon {
  background:#7f8c8d;
  color:#fff;
  font: size 1em;
  margin: 10px;
  padding: 5px 0px;
  text-align: center;
  width: 100px;
  text-decoration: none;
  box-shadow: 0px 3px 0px #373c3c; /*color de fondo*/
}

/*colores en los botones*/
.menu-icon.blue {
  background: #3498db;
  box-shadow: 0px 3px 0px #266792;
}

/*efectos en los botones*/
.menu-icon {
  border-radius: 30px;
}

.menu-icon:hover {

  padding-top: 3px;
  box-shadow: 0px 0px 0px;
}


/*----------------------------------------------------------------------------------*/


/* todos los "ul" que esten dentro de "navigation" */
.navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation ul li {
  /* uno al lado del otro */
  display: inline-block;
}

/* los enlaces dentro del menu */
.navigation ul li a {
  display: block;
  padding: 0.5rem 1rem;
  transition: all 0.2s linear;
  border-radius: 5px;
}

.navigation ul li a:hover {
  background: #cc4444;
}


.main {
  padding-top: 1rem; /*para separar el header con el body, esto pertenece a bienvenidos*/

}



.main1 {
  padding-top: 7.5rem; /*para separar el header con el body, esta es de la marquesina*/
  height: 650px;
  width:auto /*esto pone al 100% el ancho de página web*/
  
  
}


.main2 {
  padding-top: 0.1rem; /*para separar el header con el body*/
  
}

/*PIE DE PAGINA*/
.footer {
  background:rgb(3, 42, 73);
  padding: 1rem 0;
  text-align: center;
  margin-top: 6rem;
  font-size: 10px;
 
}


.menu-link{
    color: black;
}

.fb{
    color: blue;
}
/* REPONSIVE */
/* todas las caracteristicas que se mostraran a continuancion seran cuando tenga un ancho maximo de 767px */

@media only screen and (max-width: 767px) {
    .menu-icon{
        display: block;
        cursor: pointer;
    }

    .navigation{
        width: 100%;
    }
    .navigation ul{
        display: block;
    }
    .navigation ul.show{ /*para mantener oculto el menu a momento de igresar*/
        display: none;
    }
      
    .navigation ul li {
        display: block;
      }
      
      /* los enlaces dentro del menu */
      .navigation ul li a {
        display: block;
        padding: 0.5rem 1rem;
        transition: all 0.2s linear;
        border-radius: 5px;
      }
      
      .navigation ul li a:hover {
        background: #cc4444;
      }
}