/*FUENTES*//*IMPORTANTE:los estilos se cierran con punto y coma ; / y para compartir estilos se separa con una coma , */

@font-face{ /*SIRVE PARA INSERTAR FUENTES DESDE FUERA/Y EL NOMBRE DE LA font-  LO ASOCIO A LAS font- DE LAS class  o  id */
    font-family: nevis; /*EL NOMBRE DE LA FUENTE QUE QUEREMOS*/
    src:url("fonts/nevis.eot"), /*LA URL DEL SITIO DONDE ESTA LA FUENTE (LA CARPETA Y EL NOMBRE)*//*NOTA:(SEPARO CON COMAS , */
    url("fonts/nevis.eot?#iefix") format("embedded-opentype"),/*PONGO (? # iefix )POR SI NO CARGA LA FUENTE*/
    /*PONGO EL RESTO DE FORMATOS QUE TENGO GUARDADOS*/
    url("fonts/nevis.woff") format("woff"),
    url("fonts/nevis.ttf") format("ttf"),
    url("fonts/nevis.svg") format("svg");/*NOTA:EL ULTIMO LO CIERRO CON PUNTO Y COMA ;*/

/*POR SI ACASO NO CARGA BIEN LA FUENTE EN INTERNET,SUPUESTAMENTE ARREGLA LA VISUALIZACION DE LA FUETE DENTRO DE INTERNET)*/
/*PONGO TODOS LOS FORMATOS QUE TENGO GUARDADOS EN LA CARPETA*/
font-weight: normal;
font-style: normal; /*LE INDICO  CON OTRAS FUENTES QUE VA A SER NORMAL*/

}


@font-face{ /*SIRVE PARA INSERTAR FUENTES  .*/
font-family:"fajala"; /* NOMBRE DE LA FUENTE QUE QUEREMOS*/
 src:url("fonts/FjallaOne-Regular.ttf")format("truetype");/*format ES PARA PONER EL FORMATO QUE LE QUIERO PONER*/
  /*LA URL DEL SITIO DONDE ESTA LA FUENTE (LA CARPETA Y EL NOMBRE)*//*NOTA:(SEPARO CON COMAS , */ 
font-weight: normal;
font-style: normal; /*LE INDICO  CON OTRAS FUENTES QUE VA A SER NORMAL*/
/*POR SI ACASO NO CARGA BIEN LA FUENTE EN INTERNET,SUPUESTAMENTE ARREGLA LA VISUALIZACION DE LA FUETE DENTRO DE INTERNET)*/
/*PONGO TODOS LOS FORMATOS QUE TENGO GUARDADOS EN LA CARPETA*/

}


@font-face{ /*SIRVE PARA INSERTAR FUENTES DESDE FUERA/Y EL NOMBRE DE LA font-  LO ASOCIO A LAS font- DE LAS class  o  id */
    font-family:icons; /*EL NOMBRE DE LA FUENTE QUE QUEREMOS*/
    src:url("fonts/websymbols-regular-webfont.svg#WebSymbolsRegular"), /*LA URL DEL SITIO DONDE ESTA LA FUENTE (LA CARPETA Y EL NOMBRE)*//*NOTA:(SEPARO CON COMAS , */
    url("fonts/websymbols-regular-webfont.eot");
     src:url("fonts/websymbols-regular-webfont.eot?#iefix")format("embedded-opentype"),
    url("fonts/websymbols-regular-webfont.woff") format("woff"), 
    url("fonts/websymbols-regular-webfont.ttf") format("ttf")format("truetype");
    /*NOTA:EL ULTIMO LO CIERRO CON PUNTO Y COMA ;*/

/*POR SI ACASO NO CARGA BIEN LA FUENTE EN INTERNET,SUPUESTAMENTE ARREGLA LA VISUALIZACION DE LA FUETE DENTRO DE INTERNET)*/
/*PONGO TODOS LOS FORMATOS QUE TENGO GUARDADOS EN LA CARPETA*/
font-weight: normal;
font-style: normal; /*LE INDICO  CON OTRAS FUENTES QUE VA A SER NORMAL*/
/*NOTA:AHORA PUEDO USAR LOS ICONOS QUE YO QUIERO EN HTML,VOY A PONER UN ICONO DE DOCUMENTO EN CADA ENTRADA*/
}


/*ESTILOS GENERALES*/

*{ /*SELECTOR GENERAL*/
   
    padding: 0px; 
    margin: 0px;  
}

body{     
  
                /*NOTA:PARA SUBIR DE NIVEL,DE (CARPETA STYLES.CSS )A (CARPETA MAQUETACION-1),PONEMOS ANTES DOS PUNTOS Y BARRA*/
    background-image: url("../img/paven.png");/*PONER IMAGEN DE FONDO*/
}

a{/*ESTILOS GENERALES  A LOS ENLACES*/
    color:#529125;/*COLOR A LAS LETRAS DE LOS ENLACES*/
    text-decoration:none;/*QUITAR LA DECORACION QUE TRAE POR DEFECTO*/
}

a:hover{ /*(PSEUDOCLASE)ESTILO A LOS ENLACES CUANDO PASO POR ENCIMA CON EL RATON*/
    color:#070a05; /*COLOR A LAS LETRAS DE LOS ENLACES*/
    }


/*a:visited{ 
    color:#529125;ç*/ /*(PSEUDOCLASE)ESTILO CUANDO VISITO EL ENLACE*/




/*FORMULARIOS*/ 
/*estilos a todos los input*//*NOTA:PARA COMPARTIR ESTILOS LOS SEPARO ENTRE COMAS Y ESPACIO*/
input[type="text"],
input[type="email"],  
input[type="password"],
select{
    border:1px solid #c9c9c9c9;
    box-shadow: 0px 0px #ccc inset;/*SOMBRA DE LA CAJA,INTERIOR*/
    background: white;
    padding: 1px;/*MARGEN INTERIOR*/
    padding-top: 2px;/*MARGEN INTERIOR SUPERIOR*/
    padding-bottom: 2px;/*MARGEN INTERIOR INFERIOR*/
    color: gray;/*COLOR A LA LETRA*/

}



select{
    transition:all 300ms;/*TRANSICION A TODAS LAS PROPIEDADES CON TIEMPO(CUANDO PASO POR ENCIMA CON EL RATON*/
    -webkit-transition: 300ms;
    -moz-transition:all 300ms;
    -ms-transition:all 300ms;
    -o-transition:all 300ms;
    -webkit-transition:all 300ms;
}

.red{ /*SELECTOR DE CLASE PARA DARLE ESTILO A LAS LETRAS DEL H3*/
color:red !important; /*LE PONGO EL (!IMPORTANT),PARA QUE SE SOBREESCRIBA CON LOS OTROS ESTILOS MAS ESPECIFICOS QUE TENIA EL H3,
}

.blue{/*SELECTOR DE CLASE PARA DARLE ESTILO A LAS LETRAS DEL H3*/
 color: blue !important;
}


.icon{/*ESTILOS A TODOS LOS <span class="icon"> ICONOS DELANTE DE LOS PARRAFOS <p>*/
    font-family: icons;/*AHORA PONGO EL TIPO DE FUENTE DE icons */
    float: left;/*PARA QUE ME LO FLOTE A LA IZQUIERDA Y SE QUEDE AL LADO DEL TEXTO*/
    margin-right: 5px;/*PARA QUE ME LO SEPARE UN POCO DEL TEXTO POR LA DERECHA*/
    margin-top: -1px;/*MARGEN SUPERIOR DE MENOS UN PX*/

}




/*INPUT CON PSEUDOCLASE "FOCUS"(ESTILO CUANDO ENTRE DENTRO DEL FORMULARIO) */

input[type="text"]:focus,/*NOTA:PARA COMPARTIR ESTILOS LOS SEPARO ENTRE COMAS*/
input[type="email"]:focus,
input[type="password"]:focus,
select:focus{
    border: 1px solid #70b231;/*BORDE VERDE CUANDO ENTRE DENTRO DEL FORMULARIO*/
    color:black;/*COLOR DE LETRAS NEGRO CUANDO ENTRE EN EL FORMULARIO*/
}

  /*INPUT DE BOTONES*/

input[type="submit"],  /*NOTA:PARA COMPARTIR ESTILOS LOS SEPARO ENTRE COMAS*/
input[type="button"],
input[type="reset"],
button{
    display: block;/*PARA QUE SE FORME UN BLOQUE PARA MANIPULARLO COMO QUERAMOS*/
    width: 60px;/*ANCHO*/
    padding: 3px;/*MARGEN INTERIOR*/
    background-color: #70b231;/*FONDO COLOR VERDE*/
    border: 1px solid green;/*BORDE TIPO SOLIDO VERDE*/
    cursor: pointer;/*CUANDO PASE POR ENCIMA CON EL RATON,ME PONGA EL CURSOR EN FORMA DE DEDO QUE VA A CURSAR*/
}
button{    
    border-radius: 2px;/*BORDE REDONDEADO*/    
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px;     
    -ms-border-radius: 2px;    
    -o-border-radius: 2px;    
}   

  /* PESUDOCLASE :HOVER  A TODOS LOS BOTONES*//*ESTILO CUANDO PASE POR ENCIMA*/

  input[type="submit"]:hover, /*NOTA:PARA COMPARTIR ESTILOS LOS SEPARO ENTRE COMAS*/
  input[type="button"]:hover,
  input[type="reset"]:hover,
  button:hover{
    box-shadow: 0px 0px 2px gray;/*SOMBRA EN LA CAJA CON 2PX DE DIFUMINADO CUANDO PASE POR ENCIMA*/  
  }
 
/* PESUDOCLASE :ACTIVE  A TODOS LOS BOTONES*//*ESTILO CUANDO ESTE PULSANDO EL BOTON*/

input[type="submit"]:active, /*NOTA:PARA COMPARTIR ESTILOS LOS SEPARO ENTRE COMAS*/
input[type="button"]:active,
input[type="reset"]:active,
button:active{
   box-shadow: 0px 0px 3px gray inse;/*SOMBRA A LA CAJA POR DENTRO CON 3PX DE DIFUMINADO*/
   text-shadow: 0px 0px 1px #ccc t;/*SOMBRA EN LAS LETRAS, CUANDO PULSE ENCIMA*/

}



/*CABECERA*/

#header{ /*ID DE CABECERA*/
    display: flex;
    flex-direction: column;
   
    width: 78%; /*ANCHO DEL 100%*/
    min-height: 250px;/*ALTURA*/
    margin: 0px auto;/*PARA QUE ME CENTRE ESE DIV*/
    

}

#header a{ /*ESTILO AL ENLACE DE HEADER*/
    text-decoration: none;/*PARA QUE LE QUITE LOS ESTILOS AL ENLACE(EJEM:EL SUBRAYADO*/

}

#header #logotipo{ /*ESTILO AL id="logotipo QUE ESTA DENTRO DE id="header"*/
    max-width: 770px;/*ANCHO DE LA CAJA DE LOGOTIPO*/
    margin: 0px auto; /*CENTRAR LA CAJA DE LOGOTIPO*/
    padding-top: 20px;/* MARGEN INTERIOR*/

}

#header #logotipo img{ /*ESTILO A LA (img) QUE ESTA DENTRO DE id="logotipo" QUE ESTA DENTRO DE id="header" */
    display: block; /* PARA QUE SE COMPORTE COMO UN BLOQUE*/
    text-align: center;/*TEXTO EN EL CENTRO*/
    margin: 0px auto;/* PARA QUE SE CENTRE*/
    width: 160px;/*ANCHO*/

}

#header h1{ /*ESTILO AL <h1> QUE ESTA DENTRO DEL id="header" */
    text-align: center;/*TEXTO ALINEADO EN EL CENTRO*/
    font-size: 40px;/*TAMAÑO DE LAS LETRAS*/
    font-family:"nevis"; /*LE INDICO LA FAMILIA AL <h1> DE LA FUENTE QUE TENGO GUARDADA*/
    letter-spacing: 4px;/*ESPACIO ENTRE LAS LETRAS*/
    margin-top: 10px; /*MARGEN SUPERIOR*/
    text-shadow: 0px 2px 1px #333333;/*SOMBRA EN EL TEXTO*/

    
}

#header h1{
    transition: all 300ms; /*TRANSICION CON TIEMPO CUANDO PASO POR ENCIMA CON EL RATON*/
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
}

#header h1:hover{ /*ESTILO A <h1> CUANDO PASO POR ENCIMA CON EL RATON*/

text-shadow: 0px 2px 1px #333333,0px 0px 4px  #70b231;/*SOMBRA CUANDO PASO POR ENCIMA CON EL RATON*/
}

#header h1 a{ /*ESTILO AL <a> QUE ESTA DENTRO DE <h1>   QUE ESTA DENTRO DEL id="header" */

color: #70b231;/*COLOR DE LAS LETRAS*/

}


/*MENU DE NAVEGACION*/

#menu{ /*ESTILO AL id="nav" */
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 80%; /*ANCHO DEL 100% */
    background-color: #333333;/*COLOR DEL FONDO*/
    color:white;/*COLOR DE LAS LETRAS*/
    min-height: 40px;/*ALTURA DEL BLOQUE DEL MENU*/
    font-family: sans-serif;/*FORMA DE LAS LETRAS*/
    font-size: 14px;/*TAMAÑO DE LAS LETRAS*/
    box-shadow: 0px 0px 2px #9d2d2d;/* SOMBRA DE LA CAJA DE <nav> */


}

   /*## ESTILO A LOS HIJOS ##*/

.listas{ /*ESTILO A LA LISTA DESORDENADA <ul> QUE ESTA DENTRO DEL MENU <nav> */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around;
    width: 100%;
    list-style: none; /* QUITAR EL ESTILO A LAS LISTAS QUE TRAE POR DEFECTO*/
    text-decoration: none;/*QUITAR LA DECORACION AL TEXTO QUE TRAE POR DEFECTO*/
    /*margin: 0px auto;/* MARGEN CERO AUTOMATICO*/
    width: 1090px;/*ANCHO DE LA LISTA*/

}

#menu > ul > li{ /*ESTILO AL PRIMER HIJO <li>,HIJO DE <ul> QUE ES EL HIJO DE <nav> (NOTA:SE PONE ENTRE ELLOS UN ESPACIO Y UN MAYOR QUE > )*/
    line-height: 40px; /*ALTURA DE LA LINEA*/
 
    border-right: 1px solid gray;/* BORDE DERECHO,TIPO SOLIDO COLOR GRIS*/

}
@media(max-width:750px){
    #menu > ul > li{

        border: 0px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}


#menu > ul > li{/*ESTILO AL PRIMER HIJO <li>,HIJO DE <ul> QUE ES EL HIJO DE <nav> (NOTA:SE PONE ENTRE ELLOS UN ESPACIO Y UN MAYOR QUE > )*/
    transition: all 300ms;/*TRANSICION RAPIDA DE 300MS A LOS BLOQUES DE <li> */
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
}


#menu > ul > li > a{ /*ESTILO A LOS ENLACES <a> QUE ESTA DENTRO DEL BLOQUE DE <li> QUE ESTA DENTRO DE <ul> Y QUE ESTA DENTRO DEL <nav> */ 
    display: block;/*FORMAR UN BLOQUE*/
    color:white;
    text-decoration: none;/*QUITAR LA DECORACION AL TEXTO QUE TRAE POR DEFECTO*/
    padding-left: 20px;/*MARGEN INTERIOR IZQUIERDO*/
    padding-right: 20px;/*MARGEN INTERIOR DERECHO*/

}


#menu > ul > li > a:first-child{ /*ESTILO AL PRIMER HIJO DE <a> (PRIMER ENLACE DE LA LISTA)USO LA PSEUDOCLASE :first-child(PRIMER HIJO) */
    border-left:1px solid gray; /*BORDE IZQUIERDO TIPO  SOLIDO GRIS*/

}


#menu > ul > li:hover{ /*ESTILO A LOS ELEMENTOS DE <li>(LOS BLOQUES DE LOS ENLACES DE <a>) CUANDO PASE POR ENCIMA CON EL RATON*/
    background-color: #70b231;/*COLOR AL FONDO*/
    box-shadow: 0px 0px 4px green inset;/*SOMBRA A LA CAJA/4PX DE DIFUMINADO/VERDE/SOMBRA INTERIOR DENTRO DEL ELEMENTO*/
}


/*MENU DESPLEGABLE*/  /* EL SUBMENU */

#menu > ul > li > ul{ /*ESTILO A LA CAJA <ul> QUE ES HIJO DE <li> A SU VEZ DENTRO DE <ul> QUE ESTA DENTRO DE <nav>(OCULTAMOS LA <ul> DE <li>) */
    display: none; /*OCULTAMOS EL MENU DESPLEGABLE*//*EL SUBMENU,SOLO QUE SEA VISIBLE CUANDO PASAMOS POR ENCIMA CON EL RATON con hover*/
    position: absolute;/*POSICION ABSOLUTA PARA QUE NO DESFIGURE LA ESTRUCTURA DEL SITIO WEB CUANDO SE OCULTE,LAS OTRAS CAJAS DE ADAPTAN SU LUGAR*/
   /* color: white;/*COLOR DE LAS LETRAS*/
    /*text-align: left;/*TEXTO ALINEADO A LA IZQUIERDA*/
    width: 140px;/*ANCHO DEL CAJA <ul> Y DENTRO ESTAN LOS ENLACES DE <li>*/
    box-shadow: 0px 2px 2px gray;/*SOMBRA DE LA CAJA*/
    z-index: 1;/*PARA QUE SE DESTAQUE SOBRE CUALQUIER TIPO DE ELEMENTO/AL TENER EL (1 )SE PONDRA ENCIMA DE CUALQUIER ELEMENTO*/
}

#menu > ul > li:hover > ul{/*ESTILO hover AL SUBMENU <ul> CUANDO PASO POR <LI> DE LA CAJA DE <UL>.SOLO CUANDO PASO POR ENCIMA CON EL RATON(un hover) */
    display: block; /*HACEMOS QUE LA CAJA <ul> SEA UN BLOQUE Y APAREZCA(QUE SE VEA ,YA NO TIENE DISPLAY NONE*/

}

#menu > ul > li:hover > ul > li{ /*ESTILO AL HIJO DE <ul> QUE ES LA CAJA <li> DEL SUBMENU*//*SOLO CUANDO PASO POR ENCIMA CON EL RATON(un hover) */
    background-color: #f2f1f0;/*FONDO CAJA DE <li> */
    border-bottom: 1px solid #D6D6D6;/*BORDE INFERIOR*/
    padding: 8px;/*MARGEN INTERIOR*/
    line-height: 25px;/*ALTURA DE LINEA(PARA QUE LO CENTRE VERTICALMENTE)*/
    font-size: 13px;/*TAMAÑO DE LAS LETRAS*/
} 
#menu > ul > li:hover > ul > li{/*ESTILO AL SUBMENU  HIJO DE <ul> QUE ES LA CAJA <li> DEL SUBMENU*//*SOLO CUANDO PASO POR ENCIMA CON EL RATON(un hover) */
    transition: all 300ms; /*TIEMPO DE TRANSICION CUANDO PASO POR ENCIMA*/
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
}  




#menu > ul > li:hover > ul > li > a{/*ESTILO A LOS ENLACES DEL SUBMENU <a>*/
    color:#9d2d2d;/*COLOR A LAS LETRAS DE LOS ENCALES DEL SUBMENU*/
    text-decoration: none;/*LE QUITAMOS LA DECORACION QUE TENIA POR DEFECTO,EJEM:TRAIA UNA RAYA POR DEBAJO,*/
    

}
#menu > ul > li:hover > ul > li{ /*ESTILO A LA CAJA DEL SUBMENU <li> CUANDO PASE POR ENCIMA CON EL RATON*/
    box-shadow: 0px 0px 10px rgb(56, 129, 56) inset;/*SOMBRA INTERIOR*/
    background-color: #c4c7c2;/* COLOR DEL FONDO DE LA CAJA DE <li>*/

}


/*### CONTENIDO DE BARRA LATERAL #####*/

#content{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: auto;
    max-width: 1250px;/*EL ANCHO DE LA CAJA DE CONTENIDO*/
    /*min-height: 1110px;/*ALTURA MINIMA DE LA CAJA DE CONTENIDO(SCROOL CON 1110PX)*/
   
}
@media(max-width:900px){

   #content{ 
    flex-direction:column ;
  
   }

   #aside{
    display: flex;
    flex-direction: row;
    width:80%;
   
   
   
   }
  
   .sectionone{
    width:50%;
   }
   .sectiontwo{
    width:50%;
   }
  
  


   #sections{
    margin:auto;
    width: 80%;
   }

}

@media(max-width:550px){
    #aside{
        display: flex;
        flex-direction:column;
        justify-content: center;
        margin: auto;
        width:80%;
    }

     
   .sectionone{
    width:100%;
   }
   .sectiontwo{
    width:100%;
   }
}
/*##  BARRA LATERAL  ###*/

#aside{ /*COMPARTIR LAS DOS id SEPARO CON UNA COMA Y ESPACIO*/
    /*clear: both;*/ /*""IMPORTANTE"" PARA QUE FLOTEN UNO DEBAJO DEL OTRO.SI NO FLOTARIAN A LA IZQUIERDA UNO AL LADO DEL OTRO EN HORIZONTAL*/
    /*NOTA:LO VOY A CAMBIAR DE SITIO PORQUE SINO NO ME FLOTA LA SECTION*/
    /*ESTE clear:both;  SE LO VOY A PONER A LA #frase SOLO,PORQUE SINO LA SECCION AL FLOTAR NO SUBE,
    Y LA <aside id="frase"> DEL HTML LO PONGO DEBAJO DE LA <section> PARA QUE LA SECTION FLOTE ARRIBA A LA DERECHA
    Y LA <aside id="frase"> SE QUEDE DEBAJO DEL <aside> */
    min-width: 200px;/*ANCHO DE LA CAJA*/
    max-height:1100px;
    margin: 30px;/*MARGEN DE LA CAJA POR TODOS LOS LADOS*/
    background-color: white;/*FONDO A LA CAJA DE ASIDE*/
    border: 1px solid #ccc;/*BORDE DE LA CAJA DE ASIDE TIPO SOLIDO */
    box-shadow: 0px 2px 2px #ccc;/*SOMBRA A LA CAJA DE ASIDE*/
    font-family: sans-serif;/*TIPO DE LETRAS*/
}



#aside .widget{/* TODAS LAS CAJAS CON LA CLASE WIDGET*/
    display: block;/*SE CONVIERTE EN UN BLOQUE*/
    width: 180px;/*ANCHO DE LA CAJA DE WIDGET*/
    margin-top: 20px;
    margin: 5px auto;/*MARGEN AUTOMATICO PARA QUE SE CENTRE SOLO*/
    padding-left: 10px;/*MARGEN INTERIOR*/
    padding-right: 10px;
    font-size: 14px;/*TAMAÑO DE LAS LETRAS*/
    border-bottom:1px dashed #333;/*BORDE INFERIOR PUNTEADO*/
}
#aside .widget:last-child{ /*ESTILO A LA CAJA DE WIDGET, PERO AL ULTIMO HIJO,LA CAJA DEL ULTIMO WIDGET*/
    margin-bottom: 20px;/*MARGEN INFERIOR*/

}


#aside h3{ /*LE DAMOS ESTILO A TODOS LOS TITULOS <h3> */
    display: block;/*CONVERTIR EN UN BLOQUE*/
    color:#333333;/*COLOR DE LAS LETRA*/
    width: 100%;/*QUE OCUPE EL 100% DE SU CAJA*/
    text-align: center;/*PARA QUE SE CENTREN LAS LETRAS*/
    padding-bottom: 2px;/*PARA QUE TENGA UN MARGEN INTERIOR POR ABAJO*/
    background: #c4c7c2;/*COLOR DE FONDO*/
    border: 1px solid #ccc;/*BORDE SOLIDO GRIS*/
    border-left: none;/*PARA QUE LE QUITE EL BORDE POR LA IZQUIERDA*/
    border-right: none;/*PARA QUE LE QUITE EL BORDE POR LA DERECHA*/ 
    margin-bottom: 15px;/*MARGEN INFERIOR*/ 

   }

#aside li{
    margin-top: 8px;/*MARGEN SUPERIOR*/
    margin-bottom: 5px;/*MARGEN INFERIOR*/
    margin-left: 20px;/*MARGEN IZQUIERDO*/
    list-style: square;/*LE DA ESTILO A LOS PUNTOS DE LA LISTA(EN ESTE CASO SERAN CUADRADITOS*/
}



/*#### FORMULARIOS BARRA LATERAL  ##### */

/*NOTA:PARA COMPARTIR ESTILOS,SEPARO ENTRE COMAS*/

#aside div label,      /*ESTILO AL NOMBRE QUE ESTA DENTRO DE LABEL*/
#aside div input[type="text"],
#aside div input[type="email"],/*ESTILO A LOS TYPOS DE INPUTS*/
#aside div input[type="password"],
#aside div a{ /*ESTILO A LOS ENLACES*/

    display: block;/*PARA PODER MOVER TODO Y MANIPULARLO COMO QUIERA*/
    width: 95%;/*ANCHO DEL 95%*/
    margin-top: 2px;/*MARGEN SUPERIOR*/
    margin-bottom: 2px;/*MARGEN INFERIOR*/
}

/*ESTILO A LOS BOTONES*/
#aside div input[type="submit"]{

    margin-top: 5px;
    margin-bottom: 10px;
}

/*ESTILO A TODOS LOS INPUT Y LABEL*/
#aside input,
#aside label{

    margin: 0px auto;/*PARA QUE SE CENTRE TODO*/
    text-align: center;/*PARA CENTRAR EL TEXTO*/
}



/*####    SECCIONES  #####*/

#sections{ /*CAJA GENERAL DEL <div id="sections"> DONDE ESTAN TODAS LAS SECTIONS*/
   display: flex;
   flex-direction: column;
    width: 75%;/*ANCHO TOTAL DE LA CAJA*/
    font-family: sans-serif Arial, Helvetica;/*TIPO DE LETRAS*/
    margin-right: 20px;/*MARGEN DERECHO*/


}
@media(max-width:1240px){
    #sections{
        max-width: 70%;
        margin: 0 auto;
    }
}

#sections .titulo{ /*ESTILO AL LA CLASE DE H2 .titulo*/
    font-family: "fajala";/*NOMBRE DE LA FUENTE DEL @font-face */
    font-size: 24px;/*TAMAÑO DE LAS LETRA*/
    font-weight: normal;
    letter-spacing: 1px;/*PARA SEPARAR LAS LETRAS*/
    text-align: center;/*PARA QUE ME ALINIE EL TEXTO CENTRADO*/
    padding-top:20px ;/*MARGEN INTERIOR SUPERIOR*/
    margin-top: -10px;/*MARGEN SUPERIOR*/
    padding-bottom: 10px;/*MARGEN INTERIOR INFERIOR*/
    border-bottom:1px solid #ccc ;/*BORDE DE LA CAJA  POR DEBAJO*/
    color:#529125;

}
.color{ /*ESTILO A LA CLASE (COLOR) DENTRO DE LA <class="titulo color">*/
    color:#529125; ;
}

.naranja{
    color:#529125;;/*ESTILO A LA CLASE (NARANJA) DENTRO DE LA <class="titulo naranja">*/
}


   



    


    #sections section{ /*ESTILO A TODAS LAS CAJAS <section> QUE ESTAN DENTRO DE LA CAJA   <div id="sections">  */
     margin-top: 40px;/*MARGEN SUPERIOR*/
     background-color: white;/*COLOR DEL FONDO*/
     border: 1px solid #ccc;/*BORDE TIPO SOLIDO COLOR GRIS CLARO*/
     box-shadow: 0px 0px 4px #c9c9c9;/*SOMBRA DE LA CAJA */
     color:#333333;/*COLOR DE LAS LETRAS*/
     font-size: 16px;/*TAMAÑO DE LAS LETRAS*/
     overflow: hidden;/*TODO LO QUE SALGA DE LAS SECCIONES QUE SE OCULTE*/


    }

    #sections .article{ /*ESTILO A TODAS LAS <article class="article"> QUE ESTAN DENTRO DE LA CAJA   <div id="sections">  */
        margin: 10px;/*MARGEN DE 10PX*/
        margin-top: 20px;/*MARGEN SUPERIOR*/
        margin-bottom: 20px;/*MARGEN INFERIOR*/


    }

    #sections .date{/*ESTILO A TODAS LAS <span class="date">  QUE ESTAN DENTRO DE LA CAJA   <div id="sections">  */
        color:gray;/*COLOR A LAS LETRAS*/
        font-size: 14px;/*TAMAÑO DE LAS LETRAS*/


    }

#sections .stickerone, /*ESTILO A LAS <img class="estickerone"> <img class="estickertwo"> QUE ESTA DENTRO DE LA CAJA <section id="sections"> */
    .stickertwo   
    { 
        position: absolute;/*PARA PODER MOVERLOS LIBREMENTE SIN AFECTAR AL RESTO*/
        margin-top: -18px;/*MARGEN SUPERIOR EN NEGATIVO,PARA QUE SE PONGAN JUSTO DONDE YO QUIERO*/
        z-index: 0;/*PARA QUE TENGAN ESA POSICION DE CAPA POR AHORA*/

    }

    #sections .stickertwo{/*ESTILO A LA <img class="estickertwo"> QUE ESTA DENTRO DE LA CAJA <section id="sections"> */
        margin-left:860px ;/*PARA QUE SE MUEVA A LA DERECHA AL SITIO QUE YO QUIERO*/

    }

    #sections .stickerone{/*ESTILO A LA <img class="estickerone"> QUE ESTA DENTRO DE LA CAJA <section id="sections"> */
        margin-left:25px ;/*PARA QUE SE MUEVA A LA DERECHA AL SITIO QUE YO QUIERO*/

    }

     
#frase{ 
    flex-wrap: wrap;
    max-width: 50%;
    padding: 5px;
    min-width: 17%;
    margin-top: 20px;
    background: transparent;
    border: 1px solid #ccc;/*BORDE DE LA CAJA DE ASIDE TIPO SOLIDO */
    box-shadow: 0px 2px 2px #ccc;/*SOMBRA A LA CAJA DE ASIDE*/
    font-family: sans-serif;/*TIPO DE LETRAS*/

}




    #history{/*ESTILO A LA CAJA  <div id="history">*/
       
        max-height:150px;
        font-family: sans-serif;
       align-items: center;
       background: transparent;
    }

    .enlace{
     line-height: 120px;
        
    }

    #aside-botton{
     display: flex;
     flex-direction: row;
     margin-top: 20px;
     width:78%;
     background: transparent;
     
     margin: 0 auto;
     justify-content: space-around;
     margin-bottom: 10px;

    }

    @media(max-width:540px){
        #aside-botton{
            display: flex;
            flex-direction: column;
        }
    }

   

    /*###### FOOTER (PIE DE PAGINA) ###### */

    #footer{/*ESTILO A LA CAJA <footer id="footer"> */
        width: 80%;/*ANCHO DEL CIEN POR CIEN DE LA PANTALLA*/
        margin: 0px auto;/*CERO MARGEN AUTOMATICO*/
        text-align: center;/*TEXTO ALIENADO EN EL CENTRO*/
        margin-top:0px;/*MARGEN SUPERIOR*/
        background-color: #333333;/*COLOR AL FONDO*/
        
        padding-top: 10px;/*MARGEN INTERIOR,SUPERIOR*/
        padding-bottom: 10px;/*MARGEN INTERIOR, INFERIOR*/
        color: white;/*COLOR DE LAS LETRAS*/
        font-family: sans-serif;/*TIPO DE LETRAS*/
        font-size: 14px;/*TAMAÑO DE LAS LETRAS*/
        box-shadow: 0px 0px 2px gray;/*SOMBRA A LA CAJA*/


    }

    /*RESPONSIVE*/