*{/*ESTILOS GENERALES*/
    box-sizing: border-box;
    text-decoration: none;/*QUITARLE LAS DECORACIONES POR DEFECTO.SUBRAYADOS ETC*/
    margin: 0px;/*PARA TODA LA PAGINA NO TENGA MARGENES*/
    padding: 0px;/*PARA TODA LA PAGINA NO TENGA MARGENES INTERIORES*/
    font-family: sans-serif;/*TIPO DE LETRAS PARA TODA LA PAGINA*/
}

#container{/*LA CAJA PRINCIPAL QUE CONTIENE TODO LO DE LA PAGINA WEB/<div id="container">*/
width: 90%;/*OCUPARA ESE ANCHO DEL TOTAL DEL BODY*/
height: auto;/*ALTURA AUTOMATICA*/
margin: 0px auto;/*MARGEN PARA QUE SE CENTRE EL CONTENIDO*/
border: 1px solid rgba(225,225 ,226 ,0.8 );/*BORDE DE LA CAJA TIPO SOLIDO CON ESE COLOR GRIS ECHO CON RGBA*/
box-shadow: 0px 0px 10px #ccc;/*SOMBRA A LA CAJA*/
margin-top: 40px;/*MARGEN SUPERIOR PARA QUE SE SEPARE DE ARRIBA*/
margin-bottom: 40px;/*MARGEN PARA QUE SE SEPARE DE ABAJO*/
min-height: 600px;/*ALTURA MINIMA DE LA CAJA/AL PONER HEIGHT AUTO PARA QUE YA BAJE A 600PX MINIMO*/

}

#header{/*CAJA PRINCIPAL DE LA CABECERA  DONDE VOY A UTILIZAR display:flex QUE CONTIENE 2 CAJAS <div id="logo"> y <div id="menu"  */

display: flex;/*SE USA EN LA CAJA PRINCIPAL QUE CONTIENE LOS ELEMENTOS <div> DONDE QUIERO QUE SEAN FLEXIBLES/AHORA SE PONEN EN LINEA LOS DIV*/
flex-direction: row;/*SE PONDRAN EN LA DIRECCION QUE TIENEN POR DEFECTO*/
flex-wrap: wrap;/*TODO LO QUE INTENTE SALIR DE LA CAJA <header> SE PONGA DEBAJO,NO SE SALGA NADA DE LA CAJA,LA CAJA ENBUELVE LOS DIV*/
align-items: center;/*PARA CENTRARLO VERTICALMENTE,EN VEZ DE HACER UN text-align:center */

height: 120px;/*LE PONGO UNA ALTURA A LA CAJA HEADER PARA QUE SE CENTRE CON EL align-items VERTICALMENTE*/
border-bottom:1px solid rgba(225,225 ,226 ,0.8 ); /*BORDE POR LA PARTE DE ABAJO DE LA CAJA*/

}

.logo{/*ESTILO A LA CAJA <div class="logo"> QUE ESTA DENTRO DEL HEADER*/
    flex-basis: 65%;/*ANCHO A LA CAJA ESTILO FLEXBOX*/
    flex-grow: 1;/*CUANDO LA PANTALLA SE REDUZCA OCUPARAN TODO EL ANCHO,CUANDO NO QUEPAN LOS ELEMENTOS.
    AHORA CADA ELEMENTO OCUPA EL MISMO ESPACIO DE LA CAJA (header)SE ADAPTAN POR IGUAL A TODA LA CAJA*/
    
    padding: 10px;/*MARGEN INTERIOR*/
    margin-left:20px ;/*MARGEN IZQUIERDO PARA QUE NO ESYE PEGADA A LA CAJA*/
    color:black;/*COLOR DE LAS LETRAS*/
    text-shadow: 1px 1px 0px #ccc;/*SOMBRA DE LAS LETRAS*/
    text-transform: uppercase;/*COMBERTIR LAS LETRAS EN MAYUSCULAS,EN EL HTML LAS TENIA EN MINUSCULAS*/
    font-family:Helvetica;/*TIPO DE LETRA*/
    font-style: italic;/*ESTILO DE LAS LETRAS*/
    font-weight: 900;/*ANCHO DE LAS LETRAS*/
    font-size: 35px;/*TAMAÑO DE LAS LETRAS*/

}

.logo h1{/*ESTILO AL HIJO DE <div class="logo"> <h1>*/


    font-family:Helvetica;/*TIPO DE LETRA*/
    font-style: italic;/*ESTILO DE LAS LETRAS*/
    font-weight: 900;/*ANCHO DE LAS LETRAS*/
    font-size: 35px;/*TAMAÑO DE LAS LETRAS*/


}

#menu{/*ESTILO A LA CAJA <nav id="menu">*/
flex-grow: 1;/*CUANDO LA PANTALLA SE REDUZCA OCUPARAN TODO EL ANCHO,CUANDO NO QUEPAN LOS ELEMENTOS.
AHORA CADA ELEMENTO OCUPA EL MISMO ESPACIO DE LA CAJA (header)SE ADAPTAN POR IGUAL A TODA LA CAJA (SE AJUSTEN CUANDO SEA NECESARIO)*/
flex-basis: 30%;/*ANCHO FLEXBOX DEL 30%*/

height: 100%;/*ALTURA,DEL 100% DE LA CAJA <header>*/
padding-right:20px;/*PARA SEPARAR EL #menu EN SI,UN POCO, DE LA PARTE DERECHA*/
}

#menu > ul{/*ESTILO AL HIJO DE <header id="menu">  <ul>*/
   

    display: flex;/*PARA QUE LAS <li> DE DENTRO SE PONGAN UNA AL LADO DE LA OTRA,EN LINEA,COMO SI FUERA UN FLOAT.
     -SE COLOCAN EN HORIZONTAL POR DEFECTO Y OCUPAN EL 100% DEL ANCHO DE LA PANTALLA,*/
    flex-direction: row;/*LOS ELEMENTOS <li> SE PONDRAN EN FILA DESDE LA IZQUIERDA*/
    flex-wrap: wrap;/*SI SALE ALGO DE LA CAJA EN LUGAR DE QUE SE QUEDE FUERA DE LA CAJA LO PONGA DEBAJO.*/
    align-items: center;/*PARA CENTRARLO VERTICALMENTE,EN VEZ DE HACER UN text-align:center*/
    justify-content: space-between;/*PERMITE QUE AHIGA UN ESPACIO ENTRE CADA ELEMENTO PERO PERO EL 1º Y EL ULTIMO LOS COLOQUE PEGADOS 
    AL INICIO Y AL FINAL*/
     
    list-style: none;/*QUITARLE LAS DECORACIONES A LAS LISTAS <li>,LOS PUNTOS QUE TRAE POR DEFECTO*/
    height: 100%;/*OCUPE EL 100% D EL LA ALTURA DE LA CAJA <nav>*/
}

#menu a{/*ESTILO A LOS ENLACES QUE ESTAN DENTRO DE <li> DENTRO DE <ul> Y DENTRO DE <nav>*/
    text-transform: uppercase;/*PARA QUE LAS LETRAS SE PONGAN EN MAYUSCULAS*/
    color:#ccc ;/*COLOR DE LAS LETRAS*/
    padding: 15px;/*MARGEN INTERIOR*/

    /*box-sizing: border-box;PARA QUE AL HACERLE EL padding LA CAJA NO MODIFIQUE SU TAMAÑO SIGA IGUAL*/

}

#menu a{ /*ESTILO A LOS ENLACES QUE ESTAN DENTRO DE <li> DENTRO DE <ul> Y DENTRO DE <nav> /HAGO DOS IGUALES PORQUE CON TRANSITION SE MUEVEN
    LOS COMENTARIOS*/
    transition: all 300ms; /*UNA TRANSICION  DE ESE TIEMPO PARA CUANDO  HAGA UN :hover CAMBIE EL ESTILO A ESA VELOCIDAD DE 300ms*/
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
}
#menu a:hover{/*USO LA SUBCLASE :hover PARA CUANDO PASE POR ENCIMA CON EL RATON CAMBIE EL ESTILO*/
background: #ccc;/*COLOR DEL FONDO DE LA CAJA DEL ENLACE, PARA QUE CAMBIE A GRIS CUANDO PASE POR ENCIMA CON EL RATON*/
color:white;/*COLOR A LAS LETRAS DEL ENLACE PARA QUE CAMBIEN A BLANCO CUANDO LE PASE POR ENCIMA CON EL RATON*/

}

#content{/*ESTILO A LA CAJA PRINCIPAL <section id="content">QUE TIENE DENTRO LA CAJA <aside id="aside"> Y  <div id="projects">*/
    display: flex;/*LAS CAJAS DE DENTRO LAS GENERALES (<aside> Y <projects>)SE PONGA UNA AL LADO DE LA OTRA EN HORIZONTAL
     -SE COLOCAN EN HORIZONTAL POR DEFECTO Y OCUPAN EL 100% DEL ANCHO DE LA PANTALLA,*/
    justify-content: space-between;/*PERMITE QUE AHIGA UN ESPACIO ENTRE CADA ELEMENTO PERO PERO EL 1º Y EL ULTIMO LOS COLOQUE PEGADOS 
    AL INICIO Y AL FINAL*/
  
    padding-top: 20px;/*MARGEN INTERIOR POR LA PARTE DE ARRIBA*/
    padding-bottom: 20px;/*MARGEN INTERIOR POR LA PARTE DE ABAJO*/
}

#projects{/*ESTILO A LA CAJA <div id="projects"> QUE CONTIENE DENTRO LAS CAJAS <article class="  " >*/
 display: flex;/*LAS CAJAS DE DENTRO LAS GENERALES (<article>)SE PONGA UNA AL LADO DE LA OTRA EN HORIZONTAL
  -SE COLOCAN EN HORIZONTAL POR DEFECTO Y OCUPAN EL 100% DEL ANCHO DE LA PANTALLA,*/
 flex-flow: row wrap;/*ES COMO SI METIERA (FLEX-DIRECTION:ROW)(FLEX-WRAP:WRAP)TODO A LA IZ Y LO QUE SOBRESALGA DE LA CAJA LO COLOQUE ABAJO*/
 justify-content: space-between;/*PERMITE QUE AHIGA UN ESPACIO ENTRE CADA ELEMENTO PERO PERO EL 1º Y EL ULTIMO LOS COLOQUE PEGADOS 
 AL INICIO Y AL FINAL*/  
 flex-basis: 80%;/*ANCHO DE FLEXBOX QUE OCUPE EL 80% DE LA CAJA PRINCIPAL <div id="container"> */

 
}

.project{/*ESTILO A LAS CAJAS <article class="project">*/
    flex-grow: 1;/*CUANDO LA PANTALLA SE REDUZCA OCUPARAN TODO EL ANCHO,CUANDO NO QUEPAN LOS ELEMENTOS.(SE AJUSTEN CUANDO SEA NECESARIO)*/
    flex-basis: 250px;/*ANCHO FLEXBOX*/

    margin-right: 20px;/*MARGEN DERECHO*/
    margin-bottom: 25px;/*MARGEN INFERIOR*/
    border:1px solid #ccc;

}

.project img{/*ESTILO A LA <img> QUE ESTA DENTRO DE LA CAJA <article class="project"> > <div class="image-wrap">*/

 width: 100%;/*QUE LA IMAGEN OCUPE EL 100% DE LA CAJA <div class="image-wrap">*/
}

.project-info a{/*ESTILO AL ENLACE <a> QUE ESTA DENTRO DE LA CAJA <div class="project-info"> */
    
    font-size: 16px;
    color:black;
    transition:all 300ms ;/*TRANSICION A TODO DE ESE TIEMPO, DE UN ESTILO QUE LE DEA CON :HOVER CUANDO PASE POR ENCIMA CON EL RATON*/
    -webkit-transition:all 300ms ;
    -moz-transition:all 300ms ;
    -ms-transition:all 300ms ;
    -o-transition:all 300ms ;
}

.project-info a:hover{/*ESTILO AL ENLACE <a> PARA CUANDO PASE POR ENCIMA CON EL RATON,CON LA SUBCLASE :HOVER*/
    color:green;/*COLOR DE LAS LETRAS*/

}


.project-info p{/*ESTILO AL ENLACE <p> QUE ESTA DENTRO DE LA CAJA <div class="project-info"> */
    color:gray;/*COLOR DE LAS LETRAS*/
    font-size: 16px;/*TAMAÑO DE LAS LETRAS*/

}

#aside{/*ESTILO A LA CAJA <aside id="aside"> */
    display: flex;/*AHORA TODOS SUS ELEMENTOS DE DENTRO SERAN FLEXBOX(FLOTARAN EN LINEA,PERO ESTA SOLO TIENE UNA CAJA,QUEDARA IGUAL)*/
    flex-direction: column;/*LOS ELEMENTOS DE DENTRO SE PODRAN EN COLUMNA,SINO POR DEFECTO SE PONDRIAN EN LINEA AL TENER display:flex*/
    flex-wrap: wrap;/*SI SALE ALGO DE LA CAJA EN LUGAR DE QUE SE QUEDE FUERA DE LA CAJA LO PONGA DEBAJO.*/
    flex-basis: 15%;/*ANCHO FLEXBOX*/

    margin-right: 30px;/*MARGEN DERECHO*/
    padding: 15px;/*MARGEN INTERNO*/
}

#aside h2{/*ESTILO AL h2 QUE ESTA DENTRO DE LA CAJA <aside id="aside"> */
    display: block;/*PARA QUE ACTUE COMO UN BLOQUE,Y PODER MANIPULARLO COMO QUERAMOS*/
    width: 100%;/*QUE OCUPE TODO EL ANCHO DE LA CAJA*/
    font-size: 18px;/*TAMAÑO DE LAS LETRAS*/
    font-weight: 100;/*ANCHO DE LAS LETRAS*/
    color:#444;/*COLOR DE LAS LETRAS*/
    padding-bottom: 10px;/*MARGEN INTERIOR POR LA PARTE DE ABAJO*/
    margin-bottom: 20px;/*MARGEN DE ESA CAJA DE H2 POR LA PARTE DE ABAJO*/
    border-bottom:1px solid rgba(225,225 ,226 ,0.8 );/*BORDE POR LA PARTE DE ABAJO, TIPO SOLIDO CON ESE COLOR GRIS ECHO CON RGBA*/ 
    text-align: center;/*PARA QUE ME CENTRE EL TEXTO SOBRE SU CAJA*/

}

#aside ul{/*ESTILO A LA CAJA DE LISTA DESORDENADA <ul> QUE ESTA DENTRO DE <aside id="aside">*/
    list-style: none;/*QUITARLE LOS PUNTITOS QUE TRAE POR DEFECTO*/

}

#aside ul li{/*ESTILO A LAS LISTAS <li> QUE ESTAN DENTRO DE LA CAJA <ul> Y DENTRO DE LA CAJA <aside id="aside">*/
   padding-bottom: 20px;/*MARGEN INTERIOR POR LA PARTE DE ABAJO*/
}

#aside a{/*ESTILO A LOS ENLACES <a> QUE ESTAN DENTRO DE LAS LISTAS <li> */
    display: block;/*PARA QUE ACTUE COMO UN BLOQUE,Y PODER MANIPULARLO COMO QUERAMOS*/
    text-align: center;/*ALINEAR EL TEXTO EN EL CENTRO*/
    padding: 20px;/*MARGEN INTERIOR GENERAL*/
    background: #eee;/*COLOR DEL FONDO DEL ENLACE*/
    color:#444;
    text-transform: uppercase;/*COMBERTIR LAS LETRAS EN MAYUSCULAS,EN EL HTML LAS TENIA EN MINUSCULAS*/
}

#aside a{/*ESTILO A LOS ENLACES <a> QUE ESTAN DENTRO DE LAS LISTAS <li> */
    transition: all 300ms;/*TRANSICION A TODO DE ESE TIEMPO, DE UN ESTILO QUE LE DEA CON :HOVER CUANDO PASE POR ENCIMA CON EL RATON*/
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
}

#aside a:hover{/*ESTILO A LOS ENLACES <a> PARA CUANDO PASE POR ENCIMA CON EL RATON USANDO LA SUBCLASE :hover*/
    background: #444;/*COLOR DEL FONDO DEL ENLACE CUANDO PASE POR ENCIMA CON EL RATON*/
    color:#eee;/*COLOR DE LAS LETRAS DEL ENLACE CUANDO PASE POR ENCIMA CON EL RATON*/

}


#footer{/*ESTILO A LA CAJA <footer id="footer">*/
    display: flex;/*AHORA ES UN CONTENEDOR FLEXBOX Y SUS CAJAS DE DENTRO SE PONDRAN EN LINEA HORIZONTAL
     -SE COLOCAN EN HORIZONTAL POR DEFECTO Y OCUPAN EL 100% DEL ANCHO DE LA PANTALLA,*/
    flex-flow: row wrap;/*ES COMO SI METIERA (FLEX-DIRECTION:ROW)(FLEX-WRAP:WRAP)TODO A LA IZ, Y LO QUE SOBRESALGA DE LA CAJA LO COLOQUE ABAJO*/
    justify-content: flex-end;/*EL CONTENIDO SE VA A PONER AL FINAL DEL ANCHO DE LA PANTALLA,SE VA EL CONTENIDO HACIA LA DERECHA.
    NOTA:EN LA class="info" USO text-align:rigth; PARA MOVERLA HACIA LA DERECHA,*/
    align-items: center;/*LOS ELEMENTOS DE DENTRO SE QUEDARAN EN EL MEDIO DE ALTURA DE LA CAJA ,EN EL MEDIO DE LA ALTURA DE LAYOUT.*/

    height: 120px;/*ALTURA DE LA CAJA*/
    border-top:1px solid rgba(225,225 ,226 ,0.8 );/*BORDE POR LA PARTE DE ARRIBA, TIPO SOLIDO CON ESE COLOR GRIS ECHO CON RGBA*/ 

}

#footer .logo{/*ESTILO A LA CAJA <div class="logo">,LE PONEMOS ANTES LA id="footer" PARA QUE NO CAMBIE LOS ESTILOS DE LA OTRA class="logo"
     DEL HEADER*/
    opacity:0.5;/*PARA QUE SEAN LAS LETRAS MAS TRANSPARENTES*/
    flex-basis: auto;/*ANCHO AUTOMATICO PARA QUE NO LO MODIFIQUE NADA*/
    flex-grow: 1;/*CUANDO LA PANTALLA SE REDUZCA OCUPARAN TODO EL ANCHO,CUANDO NO QUEPAN LOS ELEMENTOS.
    AHORA CADA ELEMENTO OCUPA EL MISMO ESPACIO DE LA CAJA (footer)SE ADAPTAN POR IGUAL A TODA LA CAJA (SE AJUSTEN CUANDO SEA NECESARIO)*/
    order:2;/*CAMBIO LA POSICION DEL LOGO,CAMBIO LA POSICION DE LAS CAJAS,AHORA EL LOGO DE SEGUNDA CAJA Y INFO DE PRIMERA.*/

    text-align: right;/*MUEVO EL TEXTO HACIA LA DERECHA DE TODO.*/
    margin-right: 20px;/*MARGEN DERECHO*/
    
}

#footer .info{/*ESTILO A LA CAJA <div ="class="info">,LE PONEMOS ANTES LA id="footer" PARA QUE NO CAMBIE LOS ESTILOS DE LA OTRA class="info"
     DEL HEADER*/
   flex-grow: 1;/*CUANDO LA PANTALLA SE REDUZCA OCUPARAN TODO EL ANCHO,CUANDO NO QUEPAN LOS ELEMENTOS.
   AHORA CADA ELEMENTO OCUPA EL MISMO ESPACIO DE LA CAJA (footer)SE ADAPTAN POR IGUAL A TODA LA CAJA (SE AJUSTEN CUANDO SEA NECESARIO)*/
   
   order:1;/*CAMBIO LA POSICION DEL LOGO,CAMBIO LA POSICION DE LAS CAJAS,AHORA INFO DE SEGUNDA CAJA Y LOGO DE PRIMERA.*/

   margin-left: 20px;/*MARGEN IZQUIERDO*/
   color:#444;/*COLOR DE LAS LETRAS*/

}

/*## RESPONSIVE ##
NOTA:USAMOS RESPONSIVE PARA AJUSTAR ALGUNOS ELEMENTOS QUE CON FLEXBOX SE QUEDAN MAL PUESTOS AL REDUCIR DEMASIADO.*/
 /*NOTA:PUEDO COPIAR ESTILOS DE ARRIBA Y PEGARLOS AQUI E IR MODIFICANDO,O DESDE LA HERRAMIENTA INSPECCIONAR DE FIREFOX*/ 

@media(max-width:1334px){/*ESTILOS DESDE EL 0px AL 1334px*/

    #header{
        text-align: center;/*EL TEXTO SE ALINIE EN EL CENTRO AL REDUCIR LA PANTALLA*/
    }
   

    #menu > ul{/*ESTILO A LA CAJA <ul> QUE ESTA DENTRO DE LA CAJA <nav id="menu">*/
        margin-top: 20px;/*MARGEN PARA QUE SE SEPARE DE LA PARTE DE ARRIBA DEL HEADER*/
        align-items: flex-start;/*SE PONDRAN LOS ELEMENTOS DE DENTRO EN LA PARTE DE ARRIBA DE LA CAJA LAYOUT.*/
        justify-content: space-evenly;/*SIMILAR AL SPACE-AROUND PERO MAS COMPRIMIDO TODAVIA.ESPECIE DE CENTRADO Y ESPACIADO.*/
    }

}

@media(max-width:646px){/*ESTILOS DESDE EL 0px AL 646px*/

    
    #content{/*ESTILO A LA CAJA PRINCIPAL <section id="content">QUE TIENE DENTRO LA CAJA <aside id="aside"> Y  <div id="projects">*/
    /*ESTA IGUAL QUE ANTES PERO LE METO EL flex-direction:colum; PARA QUE SE COMPORTE AHORA COMO UNA COLUMNA TODO*/
    display: flex;/*LAS CAJAS DE DENTRO LAS GENERALES (<aside> Y <projects>)SE PONGA UNA AL LADO DE LA OTRA EN HORIZONTAL*/
    justify-content: space-between;/*PERMITE QUE AHIGA UN ESPACIO ENTRE CADA ELEMENTO PERO PERO EL 1º Y EL ULTIMO LOS COLOQUE PEGADOS 
    AL INICIO Y AL FINAL*/
    flex-wrap: wrap;/*SI SALE ALGO DE LA CAJA EN LUGAR DE QUE SE QUEDE FUERA DE LA CAJA LO PONGA DEBAJO.*/
    flex-direction: column;/*LOS ELEMENTOS SE SITUAL EN FORMA VERTICAL*/
    padding-top: 20px;/*MARGEN INTERIOR POR LA PARTE DE ARRIBA*/
    padding-bottom: 20px;/*MARGEN INTERIOR POR LA PARTE DE ABAJO*/
   }


    #aside{/*ESTILO A LA CAJA <aside id="aside"> */
      margin-right: 0px;/*LE QUITO LOS MARGENES DERECHOS QUE TENIA*/
    }

   
    #aside ul{/*ESTILO A LA CAJA DE LISTA DESORDENADA <ul> QUE ESTA DENTRO DE <aside id="aside">*/
     display: flex;/*AHORA ES UN CONTENEDOR FLEXBOX Y SUS CAJAS DE DENTRO SE PONDRAN EN LINEA HORIZONTAL*/
     flex-flow: row wrap;/*ES COMO SI METIERA (FLEX-DIRECTION:ROW)(FLEX-WRAP:WRAP)TODO A LA IZ Y LO QUE SOBRESALGA DE LA CAJA LO COLOQUE ABAJO*/
     justify-content: space-between;/*PERMITE QUE AHIGA UN ESPACIO ENTRE CADA ELEMENTO PERO PERO EL 1º Y EL ULTIMO LOS COLOQUE PEGADOS*/ 

    }

    #aside ul li{/*ESTILO A LAS LISTAS <li> QUE ESTAN DENTRO DE LA CAJA <ul> Y DENTRO DE LA CAJA <aside id="aside">*/
        flex-grow: 1;/*CUANDO LA PANTALLA SE REDUZCA OCUPARAN TODO EL ANCHO,CUANDO NO QUEPAN LOS ELEMENTOS.(SE AJUSTEN CUANDO SEA NECESARIO)*/
        margin-left: 5px;/*MARGEN IZQUIERDO*/
        margin-right: 5px;/*MARGEN DERECHO*/
    }


    .project{/*ESTILO A LAS CAJAS <article class="project">*/
      margin-right: 10px;/*MARGEN DERECHO/AHORA LAS CAJAS SE REDUCIRAN A 2 FILAS*/
      margin-left: 10px;/*MARGEN IZQUIERDO/AHORA LAS CAJAS SE REDUCIRAN A 2 FILAS */

    }

    #footer .info {/*ESTILO A LA CAJA <div class="info"> QUE ESTA DENTRO DEL <footer>*/
     padding: 10px;
      flex-grow: 1; flex-grow: 1;/*CUANDO LA PANTALLA SE REDUZCA OCUPARAN TODO EL ANCHO,CUANDO NO QUEPAN LOS ELEMENTOS.
      AHORA CADA ELEMENTO OCUPA EL MISMO ESPACIO DE LA CAJA (footer)SE ADAPTAN POR IGUAL A TODA LA CAJA (SE AJUSTEN CUANDO SEA NECESARIO)*/

      order: 2;/*LE CAMBIO LA POSICION DE LA CAJA*/
      margin-left: 20px;/*MARGEN DERECHO*/
      color: #444;/*COLOR DE LAS LETRAS*/
      flex-basis: 100%;/*ANCHO FLEXBOX DEL 100% D ELA CAJA QUE OCUPA*/
      text-align: center;/*ALINEAR EL TEXTO EN EL MEDIO*/
      margin: 0px;/*QUITAR LOS MARGENES*/
    }

    
    #footer .logo {/*ESTILO A LA CAJA <div class="logo"> QUE ESTA DENTRO DEL <footer>*/
     flex-grow: 1; flex-grow: 1;/*CUANDO LA PANTALLA SE REDUZCA OCUPARAN TODO EL ANCHO,CUANDO NO QUEPAN LOS ELEMENTOS.
     AHORA CADA ELEMENTO OCUPA EL MISMO ESPACIO DE LA CAJA (footer)SE ADAPTAN POR IGUAL A TODA LA CAJA (SE AJUSTEN CUANDO SEA NECESARIO)*/

     order: 1;/*LE CAMBIO LA POSICION DE LA CAJA*/
     margin-left: 20px;/*MARGEN DERECHO*/
     color: #444;/*COLOR DE LAS LETRAS*/
     flex-basis: 100%;/*ANCHO FLEXBOX DEL 100% D ELA CAJA QUE OCUPA*/
     text-align: center;/*ALINEAR EL TEXTO EN EL MEDIO*/
     margin: 0px;/*QUITAR LOS MARGENES*/
    }


}