/*FUENTES*/
/*PARA IMPORTAR LAS FUENTES QUE TENEMOS GUARDADAS Y AL USARLAS QUE LAS RECOZCA EL ORDENADOR,Y NAVEGADORES,
LAS VAMOS A PONER TODAS CON @font-face */

@font-face{ /*LE INDICO LOS DATOS DE LA PRIMERA FUENTE*/

font-family:"TrebuchetMS"; /*NOMBRE DE LA FUENTE QUE TENGO GUARDADA*/
src:url(fonts/TrebuchetMS.ttf);/*LE PONGO LA URL DE DONDE ESTA ESTA FUENTE*//*NOTA:DENTRO DEL PARENTESIS,ES OPCIONAL QUE TENGA COMILLAS*/
font-weight: normal;/*LE INDICO QUE EL ANCHO DE LA FUENTE VA A SER NORMAL*/
font-style: normal;/* LE INDICO QUE EL ESTILO VA A SER NORMAL*/
}
    
    
@font-face{ /*LE INDICO LOS DATOS DE LA SEGUNDA  FUENTE*/

font-family:"BebasNeue"; /*NOMBRE DE LA FUENTE QUE TENGO GUARDADA*/
src:url(fonts/BebasNeue.otf);/*LE PONGO LA URL DE DONDE ESTA ESTA FUENTE*/
font-weight: normal;/*LE INDICO QUE EL ANCHO DE LA FUENTE VA A SER NORMAL*/
font-style: normal;/* LE INDICO QUE EL ESTILO VA A SER NORMAL*/
}


@font-face{/*LE INDICO LOS DATOS DE LA TERCERA FUENTE*/

font-family:"WebSymbolsRegular";/*NOMBRE DE LA FUENTE QUE TENGO GUARDADA*//*NOTA:DENTRO DEL PARENTESIS,ES OPCIONAL QUE TENGA COMILLAS*/
src:url("fonts/fonts/websymbols-regular-webfont.eot");/*LE PONGO LA URL DE DONDE ESTA ESTA FUENTE*/
src:url("fonts/fonts/websymbols-regular-webfont.eot?@#iefix")format("embedded-opentype"),/*TODOS LOS FORMATOS(format) DE ESA FUENTE,UNA COMA Y OTRA URL*/
/*LE INDICO PONIENDOLE A MAYORES EL ?@#iefix QUE ES PARA EL INTERNET EXPLORER.. */
url("fonts/fonts/websymbols-regular-webfont.woff") format("woff"),
url("fonts/fonts/websymbols-regular-webfont.ttf")format("truetype")
url("fonts/fonts/websymbols-regular-webfont.svg#WebSimbolsRegular")format("svg");/*LE PONGO A MAYORES EL NOMBRE DE LA FUENTE #WebSimbolsRegular*/
/*NOTA:SE PONE TODOS LOS FORMATOS GUARDADOS EN LA CARPETA QUE TENGA ESAs FUENTEs PARA QUE ASI LO LEAN TODOS LOS NAVEGADORES*/

font-weight: normal;/*LE INDICO QUE EL ANCHO DE LA FUENTE ES NORMAL*/
font-style: normal;/*LE INDICO QUE EL ESTILO DE LA FUENTE TAMBIEN ES NORMAL*/

}


/* ESTILOS GENERALES */

*{ /*ESTILOS GENERALES*/
 margin:0px;/* PARA QUE SE RESETEN Y PODER DARLE UNOS MARGENES REALES*/
 padding: 0px;
 box-sizing: border-box;
}

body{
    background: url("../maquetacion-2/img/recursos-maquetacion-2-master-css-victor-robles/img/pattern.png");/*IMAGEN GUARDADA DE FONDO/AL ESTAR LA CARPETA IMG FUERA DE LA CARPETA CSS LE PONEMOS DELANTE ../  */
   

}

 /*.clearfix{/*ESTILO A LA CAJA .CLEARFIX
    clear:both;
    float:none;  
 }*/

/* CABECERA */

#header{ /*CAJA PRINCIPAL DE LA CABECERA <header id="header"> */
    width: 100%; /*ANCHO DE LA CAJA DEL <header> DEL 100% */
    height: 70px;/* ALTURA DE LA CAJA*/
    background-color: black ;/*COLOR DEL FONDO*/
    font-family: BebasNeue; /*ESTILO DE LA LETRA,LA QUE TENIA IMPORTADA*/
    color: white;
   
    flex-wrap: wrap;
   
   

}
#wrap-1{/*ESTILO A LA CAJA QUE ESTA DENTRO DEL HEADER, EL <div class="wrap">*/
    flex-basis: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
   
}


#logo{ /*ESTILO A LA CAJA QUE ESTA DENTRO DE wrap   <div id="logo"> */
flex-wrap: wrap;
display: flex;
flex-direction: row;
flex-basis:20%;/*ANCHO DE LA CAJA*/
background: #37bcf9;
text-align: center;/*PARA QUE EL TEXTO DE LA CAJA SE CENTRE*/
margin-top: 8px; /*MARGEN SUPERIOR*/
margin-left: 20px;/*MARGEN IZQUIERDO, PARA SIEMPRE TENGA ESE MARGEN POR DEFECTO*/
letter-spacing: 1px;/* ESPACIO ENTRE LAS LETRAS*/
cursor: pointer; /* CUANDO ME PONGA ENCIMA DEL LOGO APAREZCA EL DEDITO DE PULSAR*/
overflow: hidden; /*TODO LO QUE SALGA FUERA DEL LOGO SE VA A OCULTAR/SIRVE TAMBIEN PARA LA ANIMACION QUE SALGA DESAPAREZCA Y VUELVA A APARECER*/
}
#logo{ transition:all 300ms ; -webkit-transition:all 300ms ; -moz-transition:all 300ms ; -ms-transition:all 300ms ; -o-transition:all 300ms ;
}/*TRANSICION A TODO AL PASAR POR ENCIMA Y CON TIEMPO*/


#logo:hover{
   border-radius:2px ;
   -webkit-border-radius:2px ;
   -moz-border-radius:2px ;
   -ms-border-radius:2px ;
   -o-border-radius:2px ;
   color:black;
   background-color: #ccc;
}

#logo .gear{ /*ESTILO AL <span class="gear"> QUE ESTA DENTRO DEL <div id="logo">/*ESTILO AL LOGOTIPO S */
    display: block;/*PARA QUE SE COMPORTE COMO UN BLOQUE*/
    float: left; /*PARA QUE SE FLOTE A LA IZQUIERDA*/
    font-size: 30px; /*PARA DARLE TAMAÑO AL LOGOTIPO*/
    margin-top: 8px; /*MARGEN SUPERIOR*/
    margin-left: 26px;/*MARGEN IZQUIERDO*/

    /*ANIMACIÓN 1º PASO PARA VINCULAR Y DARLE INSTRUCCIONES GENERALES*/
    animation-name: rotate-gear;/*NOMBRE DE LA ANIMACION PARA VINCULARLA EN EL @KEYFRAMES*/
    animation-duration: 2s;/*VELOCIDAD DE DURACION DE LA ANIMACION*/
    animation-iteration-count: infinite;/*QUE LA ANIMACION SEA INFINITA(NO PARE)*/
    animation-timing-function: linear;/*PARA QUE LA ANIMACION SIEMPRE TENGA LA MISMA VELOCIDAD*/

}
/*2º PASO CREAR LA ANIMACION CON @keyframes*/
@keyframes rotate-gear{/*VINCULAMOS EL @KEYFRAMES CON LAS INSTRUCCIONES DEL 1º PASO*/
    /*NOTA:USAMOS DOS KEYFRAMES: FROM{}  Y TO{}  PORQUE ES UNA ANIMACION MUY SENCILLA
    FROM:EMPEZAMOS DESDE
    TO:HASTA*/
    from{/*DESDE*/
        transform: rotateZ(0deg);/*EMPEZAMOS CON UNA ROTACION DE 0 GRADOS*/
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
    }
    to{ /*HASTA*/
       transform: rotateZ(360deg);/*ACABAMOS CON UNA ROTACION DE 360 GRADOS*/
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
    }

  }

    /*CUANDO PASE POR EL DIV DEL LOGO VA A HACER UN HOVER AL GEAR,LOGO DE ENGRANAJE(UNA ANIMACION)*/
 #logo:hover .gear{
    animation: fromBellow 500ms linear;/*NOMBRE DE ANIMACION,DURACION,Y QUE TENGA LA MISMA VELOCIDAD*/
    -webkit-animation: fromBellow 500ms linear;
}
@keyframes fromBellow{
 0%{/*EMPIEZA EN EL PUNTO 0*/
    transform: translateY(0%);/*VA A EMPEZAR EN EL PUNTO 0% DE LA LINEA Y DESDE ARRIBA VERTICALMENTE*/
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
}
50%{/*CUANDO LLEGE AL 50% DE LA ANIMACION (AL 50% SE MARCHA)*/
    transform:translateY(200%) ;/*SE VA A MOVER DE LA LINEA Y VERTICALMENTE HACIA ABAJO,SIGNO (+) HASTA EL PUNTO 200% FUERA DEL GEAR Y DESAPAREZCA*/
    -webkit-transform:translateY(200%) ;
    -moz-transform:translateY(200%) ;
    -ms-transform:translateY(200%) ;
    -o-transform:translateY(200%) ;
}
100%{/*CUANDO LLEGE AL 100% DE LA ANIMACION (AL 100% VUELVE)*/
    transform: translateY(0%);/*VOLVERA VERTICALMENTE AL PUNTO 0*/
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
}


}



#logo h3{ /*ESTILO AL TITULO h3 QUE ESTA DENTRO DE LA CAJA DE <div id="logo"> JUNTO CON EL LOGOTIPO */
    display: block;/*PARA QUE SE COMPORTE COMO UN BLOQUE*/
    float: right; /*PARA QUE FLOTE A LA DERECHA*/
    margin-right:20px; /*NOTA IMPORTANTE:AL ESTAR FLOTADO A LA DERECHA EL MARGEN SE LO TENGO QUE PONER POR LA DERECHA*/
    font-size: 40px; /*TAMAÑO DE LAS LETRAS*/
    margin-top: 5px;/*MARGEN SUPERIOR*/
}
#logo h3{ transition:all 300ms ; -webkit-transition:all 300ms ; -moz-transition:all 300ms ; -ms-transition:all 300ms ; -o-transition:all 300ms ; }

#logo:hover h3{/*CUANDO PASE POR LOGO HARA UN HOVER A H3*/
    animation:fromRight 300ms linear ;/*NOMBRE PARA VINCULAR/VELOCIDAD DE DURACION/MISMA VELOCIDAD SIEMPRE*/
    -webkit-animation:fromRight 300ms linear ;
}
@keyframes fromRight{

    from{/*DESDE*/
        transform: translateX(200%);/*SE MOVERA EN HORIZONTAL 200% A LA DERECHA,SIGNO(+)SALDRA DE LA CAJA POR LA DERECHA*/
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
    }
    to{/*hasta*/
        transform:translateX(0%) ;/*VOLVERA A SU ESTADO ORIGINAL EN EL PUNTO 0*/
        -webkit-transform:translateX(0%) ;
        -moz-transform:translateX(0%) ;
        -ms-transform:translateX(0%) ;
        -o-transform:translateX(0%) ;
    }
}


#menu{ /*ESTILO A LA CAJA DEL <nav> MENU QUE ESTA DENTRO DEL <header>*/
    width: 75%;
    display: flex;
   flex-direction: row;
    height: 70px;/*ALTURA DE LA CAJA*/
    background:transparent;/*COLOR DEL FONDO TRANSPARENTE,SE VE EL FONDO QUE TIENE POR DEBAJO*/
}
#menu ul{
    display: flex;
    flex-direction: row;
    flex-basis: 100%;
    justify-content: space-around;
}

#menu ul li{ /*ESTILO A LAS LISTAS DE LA CAJA DE ul */
    font-size: 24px;/*TAMAÑO DE LAS LETRAS*/
    display:block;/*LAS LISTAS FORMAN UN BLOQUE Y LAS LISTAS SE PONEN EN LINEA HORIZONTAL.MISMA FUNCION QUE EL (FLOAT)*/
    margin: 0px 20px 0px 20px; /*MARGEN:ARRIBA/ABAJO/IZQUIERDA/DERECHA */
    letter-spacing: 1px;/*ESPACIO ENTRE LAS LETRAS*/
    line-height: 70px; /*ALTURA DE LA LINEA*/
}

#menu ul li a{ /*ESTILO A LOS ENLACES DENTRO DE LAS LISTAS*/
    display: block;/*PARA QUE SE COMPORTEN COMO UN BLOQUE*/
    color:white;/*COLOR DE LAS LETRAS*/
    text-decoration: none;/*ELIMINA LOS DECORADOS QUE TENGA POR DEFECTO*/
}
#menu ul li a{ transition:all 200ms ; -webkit-transition:all 200ms ; -moz-transition:all 200ms ; -ms-transition:all 200ms ; -o-transition:all 200ms ; }

#menu ul li a:hover{/* ESTILO PARA CUANDO PASE POR ENCIMA CON EL RATON*/
    color:#37bcf9;/*COLOR DE LAS LETRAS*/
}
#menu ul li a:hover{ transform:scale(1.2, 1.2) ; -webkit-transform:scale(1.2, 1.2) ; -moz-transform:scale(1.2, 1.2) ; -ms-transform:scale(1.2, 1.2) ; -o-transform:scale(1.2, 1.2) ;
}/*PERMITE MODIFICAR LA ESCALA LA ROTACION.MODIFICA TEXTOS O ELEMENTOS DEL CSS SIN QUE AFECTEN A LA MAQUETACION EN GENERAL SIN QUE NADA SE MUEVA */
/*PORQUE ES UNA TRANSFORMACION,ES ALGO QUE ES ESTATICO EN LA POSICION EN LA QUE ESTA,Y SIMPLEMENTE LE AUMENTAMOS LA ESCALA PERO NO DEFORMA EL 
RESTO DEL CSS*/
/*transform:escale(1.2, 1.2); AUMENTA EL TAMAÑO AL PASAR POR ENCIMA PERO NO DEFORMA EL RESTO DE LA MAQUETACION*/

.gear, .icon{/*COMPARTO LAS CLASES,A ESTE FON-FAMILY PARA PONERLE LOS SIMBOLOS A TODOS LOS ICONOS*/
    font-family:"WebSymbolsRegular";/*AHORA YA PUEDO USAR LA FUENTE YA INPORTADA Y PONERLA EL LA <span class="gear">S<span>*/
}

/* BANNER */

#banner{
    /*ESTILO A LA CAJA <div id="banner">*/ 
    display: flex;
    width:75%; /*ANCHO*/
    height: 100px;/*ALTO*/
    border:10px solid rgb(231, 224, 224); /*BORDE TIPO SOLIDO*/
   box-shadow: 0px 0px 2px gray; /*SOMBRA A LA CAJA*/
  background: url(img/recursos-maquetacion-2-master-css-victor-robles/img/bakbaner.png);
    background-position: -200px -200px; /*MOVER LA POSICION DEL FONDO,LO MUEVO CON LOS PX MAS MENOS SEGUN DONDE QUIERA*/
   margin:20px auto; /*MARGEN 20PX AUTOMATICO,SECENTRA CON 20PX DEMARGEN POR TODOS LOS LADOS*/
   overflow: hidden;/*QUE TODO LO QUE SALGA FUERA DE LA CAJA SE OCULTE,Y SIRVE PARA LAS ANIMACIONES QUE SE OCULTEN AL MOVERSE HACIA FUERA*/
}
#banner{
    animation: backBanner 10s linear; /*NOMBRE PARA VINCULAR CON EL KEYFRAMES/DURACION DE ANIMACION/QUE TENGA LA MISMA VELOCIDAD SIEMPRE*/
   -webkit-animation: backBanner 10s linear;
    -webkit-animation: backBanner 10s linear;
    animation-iteration-count: infinite;/*QUE LA ANIMACION SEA INFINITA*/
}
@keyframes backBanner{

    0%{
        background-position: 0px 0px;/*AL ABRIR LA PAGINA SE PONDRA EN EL PUNTO CERO QUE TRAE LA IMAGEN POR DEFECTO*/
    }
    100%{
        background-position: -200px -200px;/*DESPUES AL FINAL SE PONDRA EN EL -200 DONDE ESTABA AL PRINCIPIO,CUANDO SE LO PUSE AL BANNER*/
    }
}

#banner h1{/*ESTILO A TITULO <h1> QUE ESTA DENTRO DE LA CAJA <div id="banner">*/
width:850px;/*ANCHO*/
display: block;/*PARA QUE SE COMPORTE COMO UNA CAJA Y PODER MODIFICARLA COMO QUERAMOS*/
font-family:"BebasNeue";/*TIPO DE LETRAS*/
color:white;/*COLOR DE LAS LETRAS*/
font-size:30px;/*TAMAÑO DE LAS LETRAS*/
letter-spacing: 2px;/*ESPACIO ENTRE LAS LETRAS*/
margin: 35px auto;/*PARA QUE SE CENTRE CON ESOS PX EN TODOS LOS LADOS*/
font-weight: normal;/*ANCHO DE LA FUENTE,NORMAL*/
text-shadow: 2px 2px 1px black;
}
#banner h1{
    animation: showText 10s linear;/*NOMBRE PARA VINCULAR/VELOCIDAD DE DURACION/MISMA VELOCIDAD SIEMPRE*/
    -webkit-animation: showText 10s linear;
}
@keyframes showText{
    0%{/*EMPEZARA EN HORIZONTAL DESDE LA IZ SIGNO(-) EN UN LADO OCULTO PORQUE TIENE LA CAJA UN OVERFLOW HIDDEN/SE MULTIPLICARA EL TAMAÑO POR 5*/
      transform: translateX(-600%) scale(5,5);
      -webkit-transform: translateX(-600%) scale(5,5);
      -moz-transform: translateX(-600%) scale(5,5);
      -ms-transform: translateX(-600%) scale(5,5);
      -o-transform: translateX(-600%) scale(5,5);
      opacity: 1;/*QUE ESTARA VISIBLE*/
    }
    50%{
      /*SE MOVERA AL PUNTO +600,AL LADO CONTRARIO DE DONDE EMPEZO EN EL -600*/
      transform: translateX(600%) scale(5,5);
      -webkit-transform: translateX(600%) scale(5,5);
      -moz-transform: translateX(600%) scale(5,5);
      -ms-transform: translateX(600%) scale(5,5);
      -o-transform: translateX(600%) scale(5,5);
      opacity: 1;/*QUE ESTARA VISIBLE*/ 
         
    }/*SE MOVERA AL PUNTO -600,AL LADO CONTRARIO DE DONDE TERMINO EN EL +600 (PERO CON MENOS OPACIDAD CASI OCULTO,COMO UNA SOMBRA)*/
    75%{
      transform: translateX(-600%) scale(5,5);
      -webkit-transform: translateX(-600%) scale(5,5);
      -moz-transform: translateX(-600%) scale(5,5);
      -ms-transform: translateX(-600%) scale(5,5);
      -o-transform: translateX(-600%) scale(5,5);
      opacity: 0;/*QUE ESTARA OCULTO*/
      text-shadow: none;/*QUITARLE LA SOMBRA DE LAS LETRAS*/ 
      color:transparent;
}
     
    100%{/*AL FINAL */
        transform: translateX(0%) scale(1,1);/*VOLVEMOS A LA POSICION ORIGINAL POR DEFECTO Y AL TAMAÑO TAMBIEN*/
        -webkit-transform: translateX(0%) scale(1,1);
        -moz-transform: translateX(0%) scale(1,1);
        -ms-transform: translateX(0%) scale(1,1);
        -o-transform: translateX(0%) scale(1,1);
        opacity: 1;/*OPACIDAD VISIBLE POR DEFECTO*/
        text-shadow: 2px 2px 1px black;/*MISMA SOMBRA EM LAS LETRAS QUE TENIA*/
    }

}


/*WRAP QUE CONTIENE LA SECCION Y EL ASIDE  */
#wrap{
    width: 100%;
    display: flex;
    flex-direction:column;
    margin-left: 15px;
}

#info{/*CAJA DE SECCION GENERAL DE LAS TARJETAS*/
    width: 97%;
   
}
.wrap-2{
    display: flex;
    flex-direction: row;
    
    justify-content: space-between;
    width: 97%;
}


/*TARJETAS*/ 
#card{/*caja DIV donde estan las tarjetas*/
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
   justify-content: space-between;

}
.card{ /*ESTILO A LAS CAJAS DE LAS TARJETAS <div class="card">  */
  
    width:16%;/*ANCHO*/
    height: 305px;/*ALTO*/
    border: 1px solid #ccc;/*BORDE TIPO SOLIDO GRIS*/
    box-shadow: 1px 1px 2px #ddd;/*SOMBRA A LA CAJA*/
    overflow: hidden;/*TODO LO QUE SOBRESALGA DE LA CAJA QUE SE OCULTE/TAMBIEN SIRVE PARA QUE LA ANIMACION QUE SE SALGA DESAPAREZCA*/
    margin: 15px;/*MARGEN A TODOS LOS LADOS DE LA CAJA*/
    margin-top: 40px;/*MARGEN SUPERIOR*/
    background: rgb(210, 205, 205);/*COLOR DEL FONDO */
    cursor: pointer;/*PARA QUE CUANDO PASE POR ENCIMA CON EL RATON SE PONGA EL DEDO,COMO UN ENLACE*/

}
.card{
    transition: all 300ms;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
}

.card:hover{
    background: black;
}


.card .icon{/*ESTILO A TODOS LOS  <p class="icon"> QUE ESTAN DENTRO DE LAS CAJAS <div class="card"> */ 
display: block; /*PARA QUE SE COMPORTE COMO UNA CAJA */
width:100%; /*ANCHO */
height: 130px;/*ALTO*/
font-size: 50px;/*TAMAÑO DE LAS LETRAS,EN ESTE CASO DE LOS ICONOS*/
line-height: 110px;/*ALTURA DE LA LINEA,*/
text-align: center;/*TEXTO ALINEADO EN EL CENTRO*/
margin:0px auto;/*PARA QUE SE CENTRE EN LA CAJA*/
}
.card .icon{
    transition: all 300ms;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
}

.card:hover .icon{
    font-size: 70px;
    color:#37bcf9;
    animation: showIcon 300ms linear;/*NOMBRE PARA VINCULAR/VELOCIDAD DE DURACION/MISMA VELOCIDAD SIEMPRE*/
    -webkit-animation: showIcon 300ms linear;
}
@keyframes showIcon{
    from{
        transform: translateY(-200%);  /*QUE SE SALGA VERTICALMENTE DESDE LA IZQUIERDA SIGNO (-) DE LA CAJA*/
      -webkit-transform: translateY(-200%);
        -moz-transform: translateY(-200%);
        -ms-transform: translateY(-200%);
        -o-transform: translateY(-200%);
        -webkit-transform: translateY(-200%);
}
    to{
        transform: translateY(0%);/*DE VUELTA AL PUNTO ORIGINAL*/
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
    }
}



.card .category{ /*ESTILO A TODOS LOS <h2 class="category"> QUE ESTAN DENTRO DE <div class="card"> */
width: 100%;/*ANCHO DEL 100%*/
height: 50px;/*ALTO*/
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;/*TIPO DE LETRAS*/
font-size: 21px;
font-weight: bold;/*PARA QUE EL TEXTO SE PONGA EN NEGRITA.(PESO DE LA FUENTE)*/
text-align: center;/*ALINEAR EL TEXTO EN EL CENTRO DE LA CAJA*/
color:#00538c/*COLOR DE LA LETRA*/
}
.card .category{
    transition: all 300ms;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
}
.card:hover .category{
    color:white;
    animation: showCategory 400ms linear;/*NOMBRE PARA VINCULAR/VELOCIDAD DE DURACION/MISMA VELOCIDAD SIEMPRE*/
    -webkit-animation: showCategory 400ms linear;
}
@keyframes showCategory{
    from{
        transform: translateY(-300%);/*SALE UN POCO MAS HACIA ARRIBA SIGNO (-) QUE EL ICONO VERTICALMENTE*/
        -webkit-transform: translateY(-300%);
        -moz-transform: translateY(-300%);
        -ms-transform: translateY(-300%);
        -o-transform: translateY(-300%);
        color:black;/*CAMBIARA A COLOR NEGRO*/
    }
    to{
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        color:white;/*CUANDO LLEGE A SU POSICION ABITUAL TRANSICIONARA A COLOR BLANCO*/
}
}


.card .description{ /*ESTILO A TODOS LOS <p class="description"> QUE ESTAN DENTRO DE <div class="card"> */
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;/*TIPO DE LETRAS*/
    text-align: center;/*TEXTO ALINEADO EN EL CENTRO*/
    color:#057bca;/*COLOR DE LA LETRA*/
    font-size: 15px;/*TAMAÑO DE LAS LETRAS*/
    padding: 10px;
}
.card .description{
    transition: all 300ms;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
}
.card:hover .description{
    color:white;
    animation: showDescription 400ms linear; /*NOMBRE PARA VINCULAR/VELOCIDAD DE DURACION/MISMA VELOCIDAD SIEMPRE*/
   -webkit-animation: showDescription 400ms linear;
   
}
@keyframes  showDescription{
    from{
        transform: translateX(-300%);/*SE MOVERA HORIZONTALMENTE DESDE LA IZQUIERDA (-) FUERA DE LA CAJA A -300%*/
        -webkit-transform: translateX(-300%);
        -moz-transform: translateX(-300%);
        -ms-transform: translateX(-300%);
        -o-transform: translateX(-300%);
        color:black;/*TRANSICIONARA A COLOR NEGRO*/
    }
    to{
        transform: translateX(0%);/*VOLVERA HORIZONTALMENTE A SU PUNTO DE PARTIDA ORIGINAL*/
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        color:white;/*TRANSICIONARA A COLOR BLANCO*/
    }

}

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

#lateral{ /*ESTILO A LA LA ID DE <aside id="lateral"> */ 
    display: inline-flex;
    flex-direction: column;
    width:20%;/*ANCHO DE LA CAJA*/
    min-height:1200px ;/*ANCHO MINIMO DE 1200PX*/
    font-family:'Trebuchet MS' ;/*TIPO DE FUENTE DE LETRA*/
    order:2;
    
    

}

aside h3{/*ESTILO A LOS h3 DEL aside */
    display: block; /*la caja de h3 que se comporten como un bloque,para manipularlos como queramos*/
    width: auto;/*ANCHO DE LA CAJA AUTOMATICO*/
    height: 45px;/*ALTURA DE LA CAJA*/
    line-height: 49px;/*ALTURA DE LINEA*/
    background: url(img/recursos-maquetacion-2-master-css-victor-robles/img/pxgray.png), white;/*FONDO DE UNA IMAGEN GUARDADA A LAS CAJAS DE h3*/
    box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f,2px 3px 0px #393d3f,3px 4px 0px #393d3f;/*CERRAMOS CON PUNTO Y COMA*/
    /*SOMBRA DE LA CAJA/ PUEDO REPETIR LA SOMBRA PARA HACER EFECTO DE 3D,ESTA ES LA FORMA DE HACER UN EFECTO DE SOMBRAS 3D*/
    font-family: "BebasNeue";/*TIPO DE LETRA/UNA QUE TENGO GUARDADA*/
    font-weight: normal;/*ANCHO DE LA FUENTE/NORMAL*/
    letter-spacing: 2px;/* ESPACIO ENTRE LAS LETRAS*/
    padding-left: 15px;/*MARGEN INTERIOR IZQUIERDO*/
    margin-top: 30px ;/*MARGEN SUPERIOR*/
    margin-bottom: 15px;/*MARGEN INFERIOR*/
 

}

aside h3:first-child{/*ESTILO AL PRIMER HIJO,AL PRIMER h3 DEL id=aside*/
    margin-top: 0px;/*LE QUITAMOS A ESTE ELENTO EL MARGEN POR ARRIBA*/
}

#search{/*ESTILO A LA CAJA <div id="search"> */
    width: 90%;/*ANCHO DE ESA CAJA DEL 90% */
    height: 30px;/*ALTURA */
    margin: 10px auto;/*MARGEN,PARA QUE SE SEPARE DE LOS LADOS Y SE CENTRE */
    background-color: white;/*COLOR DEL FONDO DE LA CAJA id="search" */
    border:1px solid #ccc;
    box-shadow: 1px 1px 4px #ccc inset;/*SOMBRA A LA CAJA,LE PONGO UN (inset) PARA QUE  PAREZCA QUE ESTA UNDIDO EN LA CAJA */
    }
#search{ border-radius:5px ; -webkit-border-radius:5px ; -moz-border-radius:5px ; -ms-border-radius:5px ; -o-border-radius:5px ;
}

#lateral input[type="text"]{/*ESTILO A LOS INPUT TIPO TEXTO DE LA IDE LATERAL*/
width: 85%;/*ANCHO DE LA CAJA*/
height: 30px;/*ALTURA DE LA CAJA*/
border:none;/*PARA QUITARLE EL BORDE,PARA QUE SE INTEGRE TOTALMENTE CON EL DISEÑO,CON EL CAMPO EN SI.*/
padding-left: 5px;/*MARGEN INTERIOR IZQUIERDO*/
background-color: transparent;/*PARA QUE NO TENGA COLOR DE FONDO*/
color:#ccc;/*COLOR DE LETRA*/
}
#lateral input[type="text"]{ transition:all 300ms ; -webkit-transition:all 300ms ; -moz-transition:all 300ms ; -ms-transition:all 300ms ; -o-transition:all 300ms ;}
/*TRANSICION A TODO EL IMPUT CON TIEMPO PARA QUE CUANDO CAMBIE ALGUN ESTILO, LO HAGA PROGRESIVO CON EL TIEMPO QUE PUSE*/
#lateral input[type="text"]{ border-radius:5px ; -webkit-border-radius:5px ; -moz-border-radius:5px ; -ms-border-radius:5px ; -o-border-radius:5px ; }
#lateral input[type="text"]:focus{/*LE PONGO A IMPUT LA PSEUDOCLASE :focus PARA CUANDO ESCRIBA DENTRO DEL INPUT. LAS LETRAS CAMBIEN DE COLOR*/
color:#555;
}

#lateral input[type="buton"],
#lateral input[type="submit"]{/*ESTILO A LOS INPUT TIPO BOTON Y SUBMIT DE LA IDE LATERAL,PUEDO DAR ESTILOS A VARIOS ID SEPARANDO CON COMAS*/
height: 30px;/*ALTURA */
cursor:pointer;/*QUE SALGA LA MANO CON DEDITO CUANDO PASE POR ENCIMA CON EL RATON*/
background-color: transparent;/*PARA QUE NO TENGA COLOR DE FONDO*/
font-size: 16px;/*TAMAÑO DE LAS LETRAS*/
border-color: transparent;/*FONDO TRASPARENTE*/
border:none;/*PARA QUITARLE EL BORDE,PARA QUE SE INTEGRE TOTALMENTE CON EL DISEÑO,CON EL CAMPO EN SI.*/
border-left: 1px solid #ccc;/*BORDE IZQUIERDO*/
color:#555;/*COLOR DE LAS LETRAS*/
padding: 6px;/*MARGEN INTERIOR*/
}


.aside-box{ /*ESTILO A LAS CAJAS QUE LLEVAN LA class="aside-box" */
    width: 85%; /*ANCHO */
    height: 240px;/*ALTURA */
    margin:0 auto; /*MARGEN PARA QUE SE CENTRE TODO */
    margin-top: 20px;/*MARGEN POR ARRIBA */
    padding-top:2px ;/*MARGEN INTERIOR SUPERIOR */
    background-color: white;/*COLOR DEL FONDO*/
    border:1px solid black;
    box-shadow:0px 0px 1px rgba(0, 0, 0, 0.3), 0px 3px 7px rgba(0, 0, 0, 0.3), 0px 1px white inset,0px -3px 2px rgba(0, 0, 0, 0.3)inset;
    /*SOMBRAR POR FUERA Y POR DENTRO PARA HACER EFECTO 3D*/
    /*EL EL DIFUMINADO LE METO UN COLOR CON INSET(ES UNA SOMBRA INTERIOR) ,SOMBRA A LA CAJA ,DISTINTOS EJES */
     

}

#login input[type="email"], 
input[type="password"]{/*ESTILO AL <input type="email" Y <input type="password" QUE ESTA DENTRO DE <div id="login"*/
display: block;/*   PARA QUE SE COMPORTE COMO UN BLOQUE Y PODER MANIPULARLO COMO QUERAMOS*/
margin: 0 auto; /*MARGEN 0 AUTO PARA QUE SE CENTRE TODO*/
width:85%; /*ANCHO*/
height:  30px;/*ALTURA*/
border:1px solid #ccc;/*BORDE TIPO SOLIDO*/
box-shadow: 1px 1px 1px #ccc inset;/*SOMBRA DE LA CAJA INSET=INTERIOR*/
margin-top: 20px;/*MARGEN SUPERIOR*/
padding-left: 30px;/*MARGEN INTERIOR IZQUIERDO*/
box-sizing: border-box;/*PARA QUE NO MODIFIQUE EL TAMAÑO DE LA CAJA AL METER UN PADDING*/

}

#login input[type="email"],  /*ESTILOAL<inputtype="email"Y<inputtype="password"QUEESTADENTRODE<divid="login"*/
input[type="password"]{
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -ms-border-radius:5px;
  -o-border-radius:5px;
}


#login input[type="email"]:focus, /*SUBCLASE PARA DAR ESTILO AL PULSAR DENTRO DEL INPUT*/
input[type="password"]:focus{

    color:#555;
    box-shadow: 1px 1px 1px gray inset;/*SOMBRA A LA CAJA INTERIOR CON INSET*/


}

#login #user{/*<label id="user"class="icon">U</label><!--ESTILO A id="user"/CON LA LETRA U class="icon"PARA QUE SE VEA EL LOGOTIPO-->*/
 display: block;/*QUE SEA UN BLOQUE Y PODER MANIPULARLO COMO QUIERA*/
 text-align: center;/*PARA QUE SE CENTRE EL ELEMENTO*/
 position: absolute;/*PARA PODER MOVERLO DONDE A MI ME INTERESE Y QUE EL HUECO QUE DEJE LAS OTRAS CAJAS SE ADAPTEN Y OCUPEN SU HUECO*/
 margin-left: 25px;
 margin-top: 6px;
 height: 30px;

}

#login #password{/*<label id="password" class="icon">w</label><!--USO id="password" PARA DARLE ESTILO EN CSS A LABEL CON EL LOGOTIPO W*/
    display: block;/*QUE SEA UN BLOQUE Y PODER MANIPULARLO COMO QUIERA*/
    text-align: center;/*PARA QUE SE CENTRE EL ELEMENTO*/
    position: absolute;/*PARA PODER MOVERLO DONDE A MI ME INTERESE Y QUE EL HUECO QUE DEJE LAS OTRAS CAJAS SE ADAPTEN Y OCUPEN SU HUECO*/
    margin-left: 25px;
    margin-top: 25px;
    height: 30px;
    font-size: 20px;/*TAMAÑO DE LA FUENTE(ICONO)EN ESTE CASO*/
   
}
/*COMPARTIMOS STILOS A LOS BOTONES*/
#login input[type="submit"],
#login input[type="button"],
#login input[type="reset"],
#login button{

    margin-left: 20px;
    text-align: center;/*PARA QUE SE CENTRE EL TEXTO QUE ESTA DENTRO DE LOS BOTONES*/
    width: 95px;
    height: 35px;
    margin-top: 20px;
    margin-bottom: 20px;
    color:white;
    background: linear-gradient(to bottom, #3eb8e5 0%, #2ca0ca 100%);/*TECNICA PARA HACER UN DEGRADADO(un agradiente/
    to bottom=DESDE ABAJO
    color
    0%=DESDE 0%
    color
    100%=HASTA ARRIBA 100%*/
    border: 1px solid #156785;
    cursor: pointer;
    font-size: 15px;
    font-family: "trebuchetMS";
    font-weight: lighter;/*ANCHO DE LA FUENTE */
    
}
#login input[type="submit"],
#login input[type="button"],
#login input[type="reset"],
#login button{
    border-radius:0px ;
    -webkit-border-radius:0px ;
    -moz-border-radius:0px ;
    -ms-border-radius:0px ;
    -o-border-radius:0px ;
}

/*LE HACEMOS UN HOVER A TODOS LOS BOTONES*/
#login input[type="submit"]:hover,
#login input[type="button"]:hover,
#login input[type="reset"]:hover,
#login button:hover{
     box-shadow: 0px 0px 3px gray;
     transition:all 300ms ;
     -webkit-transition:all 300ms ;
     -moz-transition:all 300ms ;
     -ms-transition:all 300ms ;
     -o-transition:all 300ms ;
}

#login a{/*ESTILO A LOS ENLACES DEL FORMULARIO #LOGIN*/
 display: block; /*PARA MANEJARLO COMO QUIERA COMO POR EJEMPLO UN MARGIN */
 font-size: 14px;
text-decoration: none;
margin-left: 18px;/*PARA QUE SE APLIQUE EL MARGIN TIENE QUE ESTAR EN DISPLAY BLOCK*/
color:#555;
}

#login a:hover{
   text-decoration: underline;/*UNA LINEA POR DEBAJO DE LA PALABRA*/
   color:#2f78bc;
    
}

/*REDES SOCIALES*/

#social{/*  <div id="social"*/
    height: 190px;

}

#social a{/*ESTILOS A LOS ENLACES DE LA CAJA DE LAS REDES SOCIALES #SOCIAL*/
    display: block;
    text-decoration: none;
    color:#333;
    font-size: 30px;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 20px;

}
#social .overlay{/*ESTILO A LOS PARRAFOS DEL div id="social" DE LA REDES SOCIALES*/
    display: block;/*SE COMPORTE COMO UN BLOQUE Y PODER MOVERLO COMO QUERAMOS*/
    height: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0px 0px 1px #ccc;
    border:3px solid white;
    box-shadow: 0px 0px 4px #ccc;
    background: #F4F7FE;
    position: absolute;/*PARA MOVERLO DONDE QUERAMOS Y LAS OTRAS CAJAS SE ADAPTEN Y OCUPEN SU ESPACIO VACIO*/
    padding: 5px;
    margin-left: 70px;
    margin-top: -52px;/*PARA QUE SE PONGA ENCIMA AL LADO DE LOS ICONOS*/
    cursor: pointer;/*QUE EN EL RATON APAREZCA EL DEDITO COMO UN ENLACE*/
    opacity: 0;/*DESPUES DE MOVERLO Y PONERLO ENCIMA DE LOS ICONOS LO OCULTAMOS PARA QUE APAREZCA CON UN :HOVER*/

}
#social .overlay{
    transform: translateX(-80%);/*LO PONEMOS A LA  IZQUIERDA POR SER SIGNO (-) SIN SALIR DE LA CAJA,JUSTO ENCIMA DEL ICONO*/
    -webkit-transform: translateX(-80%);
    -moz-transform: translateX(-80%);
    -ms-transform: translateX(-80%);
    -o-transform: translateX(-80%);

    transition:all 400ms ;
    -webkit-transition:all 400ms ;
    -moz-transition:all 400ms ;
    -ms-transition:all 400ms ;
    -o-transition:all 400ms ;
}
#social div:hover .overlay{/*CUANDO PASE POR ENCIMA DE LOS DIV, DE  div id="social" DARA ESTILO A LOS <p class="overlay" */
    opacity: 1;/*HAGO QUE APAREZCA*/
    transform: translateX(0%);/*SE COLOQUE EN EL PUNTO 0,A LA DERECHA DE LOS ICONOS/DEL -80% APARECERA Y SE MOVERA A LA DERECHA EL 0%*/
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);

    transition:all 300ms ;
    -webkit-transition:all 300ms ;
    -moz-transition:all 300ms ;
    -ms-transition:all 300ms ;
    -o-transition:all 300ms ;
}

/*ARTICULOS*/

#articles{/*<section id="articles"><!--CAJA QUE CONTIENE TODOS LOS ARTICULOS-->  */
  
    float:left;/*FLOTE LA CAJA DE LOS ARTICLES A LA IZQUIERDA*/
    width: 75%;
    order: 1;

}


#articles h2{

    display: block;
    width: 100%;
    height: 75px;
    line-height: 75px;/*PARA QUE EL TEXTO SE QUEDE CENTRADO*/
    text-align: center;/*PARA QUE SE CENTRE EL TEXTO*/
    font-family: "BebasNeue";
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 2px;
    background: url('../maquetacion-2/img/recursos-maquetacion-2-master-css-victor-robles/img/pxgray.png') white;/*DETRAS DE ESTE 
    FONDO UN FONDO WHITE DE CONTRASTE*/
    box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 15px;

}

#articles article{/*ESTILO A LOS ARTICULOS DENTRO DE LA CAJA ARTICLES*/
    
    width: 100%;
    height: auto;
    border:1px solid #ccc;
    margin: 40px auto;
    padding: 10px;
    font-family: "TrebuchetMS";
    background: white;
    color:black;
    box-shadow:1px 1px 2px #ddd;

}

#articles article h4{/*ESTILO A LOS H4 DE LOS ARTICULOS*/

    display: block;
    font-size: 23px;
    margin: 3px;

}

#articles article h4 a{/*ESTILO A LOS ENLACES DE LOS H4*/

    text-decoration: none;
    color:#00538c;

}

#articles article h4 a:hover{/*ESTILO A LOS ENLACES DE LOS H4*/

    text-decoration: underline;/*QUE APAREZCA UN SUBRAYADO POR DEBAJO DEL ENLACE*/

}

#articles .data{/*ESTILO A LAS FECHAS*/
   
    float:right;
    background: #393d3f;
    color:white;
    height: 30px;
    line-height: 30px;/*MISMA ALTURA DE LINEA QUE LA ALTURA PARA QUE SE QUEDE CENTRADO EN ALTURA*/
    margin: -10px;/*PARA QUE SUBA HACIA ARRIBA Y NO AHIGA ESE PEQUEÑO MARGEN ARRIBA*/
    padding: 4px;
    font-size: 13px;

}
#articles .data{
     border-radius:0px 0px 0px 5px ;/*SOLO BORDE REDONDO EN LA PARTE INFERIOR IZQUIERDA*/
     -webkit-border-radius:0px 0px 0px 5px;
     -moz-border-radius:0px 0px 0px 5px;
     -ms-border-radius:0px 0px 0px 5px;
     -o-border-radius:0px 0px 0px 5px;
}

#articles .data span{/*ESTILO A LOS SPAN DE DATA*/
     margin: 6px;

}

#articles .article p{/*ESTILO A LOS PARRAFOS DE LOS ARTICLE*/

    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 15px;



}

/*BOTON DE IR AL BLOG*/

#blog{/*<article id="blog">  */
  
height: 100px;
margin-top: 60px;
line-height: 60px;/*SE CENTRE VERTICALMENTE*/
text-align: center;/*SE CENTRE HORIZONTALMENTE*/

}
#blog{
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
}

#blog a{/*ESTILO AL ENLACE DEL BLOG*/
    font-family: "BebasNeue";
    font-size: 40px;
    letter-spacing: 3px;
    color:#00538c;
    text-decoration: none;
    display: block;/*AL PONER DISPALY BLOCK,TODA LA CAJA VA A SER CLIKABLE*/

}
#blog a{
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
}
 
#blog:hover{/*hover en la caja del blog*/
    background-color:black;
    border:10px solid #37bcf9;
    border-radius:240px ;

    -webkit-border-radius:240px ;
    -moz-border-radius:240px ;
    -ms-border-radius:240px ;
    -o-border-radius:240px ;
    box-shadow: 0px 0px 10px gray;

    animation:blinck 10s infinite linear ;  /*NOMBRE PARA VINCULAR/VELOCIDAD DE TIEMPO/QUE SEA INFINITO LA ANIMACION/MISMA VELOCIDAD SIEMPRE*/
  -webkit-animation:blick 10s infinite linear ;
    -webkit-animation:blinck 10s infinite linear ;
}
@keyframes blinck{/*LE VOY CAMBIANDO EL COLOR AL BORDE PARA QUE VALLA CAMBIANDO EN CADA TRAMO DE COLOR*/
    0%{
        border:10px solid #37bcf9;
    }
    25%{
        border:10px solid green;
    }
    50%{
        border:10px solid yellow;
    }
    75%{
        border:10px solid white;
    }
    100%{
        border:10px solid #37bcf9;
    }
}
    
#blog:hover a{/*hover en el enlace del blog*/
    color:white;
    text-shadow: 1px 1px 1px black,1px 2px 1px black,1px 3px 1px black,1px 4px 1px black,1px 5px 1px black,1px 6px 1px black; 
    /*SOMBRA 3D,LA DEL MEDIO LE VOY SUBIENDO 1PX A CADA TRAMO */

}


/*FOOTER*/

#footer{

    width: 100%;/*PARA QUE OCUPE TODO EL ANCHO DEL BODY*/
    height: 470px;
    background: black;
    color:white;
    display: block;/*PARA QUE LA ETIQUETA FOOTER SE COMPORTE COMO UN BLOQUE*/
    overflow: hidden;/*TODO LO QUE SE SOBRESALGA DE LA CAJA SE OCULTE*/
}
.wrap-3{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/*NOTA:LE DOY ESTILO A LAS CAJAS PRIMEROS HIJOS DEL WRAP(A TODOS LOS PRIMEROS DIV HIJOS*/
#footer .wrap-3 > div{

   float: left;
   width: 320px;/*320px DEL ANCHO DE LA CAJA FOOTER A CADA CAJA DIV*/
   height: 360px;
   margin: 40px;
   text-align: center;
   color:white;
   font-family: "Trebuchet";
}

footer a{ /*ESTILO A LOS ENLACES DEL FOOTER*/
   text-decoration: none;
    color:#37bcf9;
    transition:all 300ms ;
    -webkit-transition:all 300ms ;
    -moz-transition:all 300ms ;
    -ms-transition:all 300ms ;
    -o-transition:all 300ms ;
}

#footer h5{ /*ESTILO A LOS ENCABEZADOS DE LA PAGINA*/
   display: block;
    background: url(./img/recursos-maquetacion-2-master-css-victor-robles/img/pxgray.png), white; /*2ºFONDO SECUNDARIO WHITE*/
   height: 50px;
    letter-spacing: 2px;
    text-align: center;
    font-family: "BebasNeue";
    font-size: 40px;
    line-height: 50px;
    color:black;
    border-radius:5px ;
    -webkit-border-radius:5px ;
    -moz-border-radius:5px ;
    -ms-border-radius:5px ;
    -o-border-radius:5px ;
    margin-bottom: 15px;
}

#footer ul{/*ESTILO A LA CAJA DE LAS LISTAS DEL FOOTER*/
   text-align:left;/*ALINEADO A LA IZQUIERDA*/
   margin: 20px;
   font-size: 25px;
  
}

#footer ul li{/*ESTILO A LAS LISTAS DE LA CAJA UL*/
   
    margin-top: 10px;
    padding: 5px;
    border-bottom: 1px solid #ccc;
    
}

#footer ul li a{/*ESTILO A LOS ENLACES DE LAS LISTAS*/
    display: block;
    height: 40px;
    transition: all 300ms;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
  
}
#footer ul li:hover a{
    color:white;
    padding-left: 30px;/*CUANDO PASE POR ENCIMA SE MOVERA A LA DERECHA PORQUE TIENE MARGEN INTERIOR IZQUIERDO*/
}


#footer iframe{/*ESTILO AL MAPA DEL FOOTER*/
    width: 100%;/*QUE OCUPE EL 100% DE SU CAJA PADRE DIV*/
    height: 300px;
    margin-top: 10px;
    border-radius:5px ;
    -webkit-border-radius:5px ;
    -moz-border-radius:5px ;
    -ms-border-radius:5px ;
    -o-border-radius:5px ;
    border:5px solid white;
    box-shadow: 0px 0px 5px gray;
}

#footer img{/*ESTILO A LAS IMAGENES DEL FOOTER*/

    margin-bottom: 15px;
}

#footer #browsers img{/*ESTILO A LAS IMAGENES DE <p id="browsers"> */
    width: 45px;

}

/*RESPONSIVE*/

@media(max-width:1430px){
    #lateral{
        width:30%;
    }

 #articles{
        width:65%
    }
    #header{
        height: auto;
    }
    #logo{
        margin-right: 22px;
    }
    #wrap-1{
        height: auto;
        flex-direction: column;
    }
    #menu ul{
        justify-content:space-between;
    }
}




@media(max-width:910px){
    body{
        height:auto;
        
    }
    #footer{
        height: auto;
    }
    .wrap-3{
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

    }  
   
   
   
}

@media(max-width:958px){
    #lateral{
        width:35%;
    }

 #articles{
        width:60%
    }




}

@media(max-width:820px){
    #lateral{
        width:40%;
        margin-left: 15px;
    }
    #articles{
        width:55%;
    }
    #articles h2{
        font-size: 25px;
    }
      
     
       
    

}



@media(max-width:770px){
    #card{
        flex-direction: column;
        align-items: center;
    }
    #card .card{
        flex-grow: 1;
        width: 85%;
    }
}

@media(max-width:716px){
   
    #lateral{
        width:45%;
        margin-left: 15px;
    }
    #articles{
        width:50%;
    }
}


@media(max-width:642px){
   

    .wrap-2{
        flex-direction: column;
    }

    #lateral{
        width:90%;
      
    }
    #articles{
        width:90%;
    }
}

@media(max-width:594px){
    #header{
        height:350px;
        
    }

    #menu ul{
        align-items: center;
        flex-direction: column;
    }
}

@media(max-width:450px){

    .data{
        display: flex;
        flex-direction: column;
        width:170px;
      
    }
}