/* ==========================================FONTS==========================================================*/

@font-face {
    font-family: "TrebuchetMS";
    src: url('fonts/TrebuchetMS.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "BebasNeue";
    src: url('fonts/BebasNeue.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "WebSymbolsRegular";
    src: 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('truetype'), url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* ======================================= GENERAL STYLES ====================================================*/

* {
    margin: 0em;
    padding: 0em;
}

body {
    background: url("../img/pattern.png");
}

a {
    text-decoration: none;
}

*:focus {
    outline: none;
}

textarea:focus,
input:focus {
    outline: none;
}

.wrap {
    width: 53.125em;
    margin: 0em auto;
}

.gear,
.icon {
    font-family: "WebSymbolsRegular";
}

.clearfix {
    clear: both;
    float: none;
}


/* ========================================== HEADER =======================================================*/

#header {
    width: 100%;
    height: 3.125em;
    background-color: black;
    color: white;
    font-family: "BebasNeue";
}

#logo {
    float: left;
    width: 135px;
    /* height: 2.1875em; */
    background-color: #37bcf9;
    margin-top: 7px;
    margin-left: 0.9375em;
    text-align: center;
    letter-spacing: 0.0625em;
    cursor: pointer;
    overflow: hidden;
    transition: all 300ms;
}

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

#logo .gear {
    display: block;
    float: left;
    font-size: 20px;
    margin-top: 6px;
    margin-left: 14px;
    animation-name: rotate-gear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    /* Siempre tendrá la misma velocidad */
    animation-timing-function: linear;
}

@keyframes rotate-gear {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}


/* Cuando haga hover en el logo sucederá la siguiente animación */

#logo:hover .gear {
    /* animation-name = fromBellow, animation-duration=500ms, animation-timing-function= linear */
    animation: fromBellow 500ms linear;
}

@keyframes fromBellow {
    /* Lo hacemos desaparecer y aparecer de nuevo */
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(200%);
    }
    100% {
        transform: translateY(0%);
    }
}

#logo h3 {
    display: block;
    float: right;
    margin-top: 5px;
    margin-right: 47px;
    font-size: 26px;
    transition: all 300ms;
}


/* Cuando se haga hover en el logo se aplica la animación 'fromRight' al h3 del logo*/

#logo:hover h3 {
    animation: fromRight 3s linear;
}

@keyframes fromRight {
    0% {
        transform: translateX(0%);
    }
    25% {
        transform: translateX(100%);
    }
    50% {
        transform: translateX(270%);
    }
    75% {
        transform: translateY(350%);
    }
    76% {
        transform: translateX(-300%);
    }
    100% {
        transform: translateX(0%);
    }
}

#menu {
    float: right;
    background-color: transparent;
    /* margin-top: 15px;
    margin-right: 140px; */
}

#menu ul li {
    display: inline-block;
    font-size: 18px;
    margin: 0px 15px 0px 15px;
    letter-spacing: 1px;
    line-height: 55px;
    /*
     display: inline-block;
    font-size: 18px; 
    margin-left: 30px; 
    */
}

#menu ul li a {
    display: block;
    text-decoration: none;
    color: white;
    transition: all 200ms;
    /* text-decoration: none;
    color: white; */
}

#menu ul li a:hover {
    color: #37bcf9;
    transform: scale(1.2, 1.2);
}


/* ========================================== INFO ZONE =======================================================*/

#banner {
    width: 94.5%;
    height: 68px;
    border: 7px solid white;
    box-shadow: 0px 0px 2px gray;
    background: url("../img/bakbaner.png");
    background-position: -636px -227px;
    margin: 15px auto;
    overflow: hidden;
    animation: backBanner 10s linear;
}

@keyframes backBanner {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: -636px -227px;
    }
}

#banner h1 {
    display: block;
    width: 550px;
    font-family: "BebasNeue";
    color: white;
    font-size: 27px;
    font-weight: normal;
    letter-spacing: 2px;
    text-shadow: 2px 2px 1px black;
    text-align: center;
    margin: 20px auto;
    animation: showText 10s linear;
}


/* Se realiza 1vez cada vez que se recargue la página */

@keyframes showText {
    0% {
        /* transform: translateX(-600%);
        scale: (5, 5); */
        /* Se oculta el texto y se multiplica el tamaño por 5, además opacidad será 1, será visible*/
        transform: translateX(-500%) scale(4, 4);
        opacity: 1;
    }
    50% {
        transform: translateX(500%) scale(4, 4);
        opacity: 1;
    }
    75% {
        transform: translateX(-500%) scale(4, 4);
        text-shadow: none;
        /* Se va desvaneciendo el texto poco a poco*/
        color: transparent;
        opacity: 0;
    }
    100% {
        /* Vuelve a su estado normal que hemos definido en #banner h1{} */
        transform: translateX(0%) scale(1, 1);
        text-shadow: 2px 2px 1px black;
        color: white;
        opacity: 1;
    }
}

.card {
    float: left;
    width: 140px;
    height: 205px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 2px #ddd;
    background: white;
    overflow: hidden;
    margin: 14px;
    margin-top: 40px;
    cursor: pointer;
    transition: all 300ms;
}

.card:hover {
    background: black;
}

.card:last-child {
    margin-right: 0px;
    margin-bottom: 50px;
}

.card .icon {
    display: block;
    width: 100%;
    height: 88px;
    font-size: 35px;
    line-height: 81px;
    text-align: center;
    margin: 0px auto;
    transition: all 300ms;
}


/* Animación de icon cuando hagamos hover sobre la tarjeta */

.card:hover .icon {
    font-size: 50px;
    color: #37bcf9;
    animation: showIcon 300ms linear;
}

@keyframes showIcon {
    from {
        transform: translateY(-200%);
    }
    to {
        transform: translateY(0%);
    }
}

.card .category {
    width: 100%;
    height: 37px;
    font-family: "TrebuchetMS";
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #00538c;
    transition: all 300ms;
}


/*Cuando se haga hover en la tarjeta se aplica la animación al texto de la categoría*/

.card:hover .category {
    color: white;
    animation: showCategory 400ms linear;
}

@keyframes showCategory {
    from {
        transform: translateY(-300%);
        color: black;
    }
    to {
        transform: translateY(0%);
        color: white;
    }
}

.card .description {
    font-family: "TrebuchetMS";
    text-align: center;
    font-size: 11px;
    color: #0370b9;
    transition: all 300ms;
}


/*Cuando se haga hover en la tarjeta se aplica la animación al texto description */

.card:hover .description {
    color: white;
    animation: showDescription 400ms linear;
}

@keyframes showDescription {
    from {
        transform: translateX(-300%);
        color: black;
    }
    to {
        transform: translateX(0%);
        color: white;
    }
}


/*  como yo la hice: quedó bien
#cards {
    float: left;
    width: 100%;
    font-family: "TrebuchetMS";
    color: #00538c;
    margin-top: 50px;
}

.card {
    float: left;
    width: 17.5%;
    height: 205px;
    background: white;
    margin: 0px 9px;
    box-shadow: 0px 0px 2px #ccc;
    overflow: hidden;
    text-align: center;
}

.card:first-child {
    margin-left: 14px;
}

.card .icon {
    margin-top: 10px;
    font-size: 33px;
}

.category {
    font-weight: bold;
    font-size: 14px;
    margin-top: 35px;
}

.description {
    font-size: 11px;
    margin-top: 20px;
} */


/* ========================================== SIDEBAR =======================================================*/

#sidebar {
    float: right;
    width: 23.7%;
    min-height: 1070px;
    font-family: "TrebuchetMS";
    margin: 0px 16px;
}

#sidebar h3 {
    display: block;
    width: auto;
    height: 30px;
    line-height: 30px;
    background: url('../img/pxgray.png'), white;
    box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
    font-family: "BebasNeue";
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 2px;
    padding-left: 15px;
    margin-top: 30px;
    margin-bottom: 15px;
}

#sidebar h3:first-child {
    margin-top: 0px;
}


/* Metemos el input "text" y el button con la lupa dentro de la caja #search que tendrá apariencia de input
text */


/*   Buscar */

#search {
    width: 84%;
    height: 21px;
    margin: 10px auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 1px 1px 4px #ccc inset;
}

#sidebar input[type="text"] {
    width: 75%;
    height: 21px;
    border: none;
    padding-left: 5px;
    border-radius: 5px;
    background-color: transparent;
    color: #ccc;
    transition: all 300ms;
}

#sidebar input[type="text"]:focus {
    color: #555;
}

#sidebar input[type="button"] {
    height: 21px;
    cursor: pointer;
    font-size: 14px;
    background-color: transparent;
    border: none;
    border-left: 1px solid #ccc;
    color: #555;
    padding-left: 7px;
}


/* Fin buscar */


/* cajas */

.aside-box {
    width: 90%;
    height: 200px;
    margin: 0px auto;
    margin-top: 20px;
    padding-top: 2px;
    background: white;
    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;
}


/* input caja Login*/

#login input[type="email"],
#login input[type="password"] {
    display: block;
    width: 81%;
    height: 21px;
    margin: 0px auto;
    margin-top: 20px;
    padding-left: 21px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px #ccc inset;
    border-radius: 5px;
    color: gray;
}

#login input[type="email"]:focus,
#login input[type="password"]:focus {
    color: #555;
    box-shadow: 1px 1px 1px grey inset;
}


/* Esta vez posicionamos los simbolos del candado y del usuario dentro del input en vez de crear un div que
tenga la misma apariencia que el input como hicimos antes. Jugamos con el padding, el ancho de los input email
y password y la posición absoluta de los simbolos */

#login #user,
#login #lock {
    display: block;
    text-align: center;
    position: absolute;
    margin-left: 10px;
    margin-top: 3px;
    height: 21px;
    font-size: 14px;
}

#login #lock {
    margin-left: 12px;
    margin-top: 24px;
    font-size: 17px;
}


/* Botones Enviar y Reset del Login */

#login input[type="submit"],
#login input[type="reset"] {
    text-align: center;
    width: 38%;
    height: 25px;
    margin-top: 20px;
    margin-left: 7%;
    margin-bottom: 20px;
    color: white;
    background: linear-gradient(to bottom, #3eb8e5 0%, #2ca0ca 100%);
    border: 1px solid #156785;
    border-radius: 0px;
    cursor: pointer;
    font-size: 12px;
    font-family: "TrebuchetMS";
    font-weight: lighter;
    transition: all 300ms;
}

#login input[type="submit"]:hover,
#login input[type="reset"]:hover {
    box-shadow: 0px 0px 3px gray;
}

#login a {
    display: block;
    font-size: 12px;
    margin-left: 12px;
    color: #555;
}

#login a:hover {
    text-decoration: underline;
    color: #2f78bc;
}


/* Redes sociales*/

#social-sponsors {
    margin-top: 30px;
}

#social a {
    display: block;
    color: #333;
    text-decoration: none;
    font-size: 30px;
    margin-top: 9px;
    margin-left: 10px;
}


/*overlay: capa oulta */

#social .overlay {
    display: block;
    height: 15px;
    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;
    padding: 5px;
    margin-left: 56px;
    margin-top: -32px;
    cursor: pointer;
    /* Como va a estar oculto le aplicamos el transform aquí y así hará efecto que aparece desde la izq */
    transform: translateX(-65%);
    /* opacidad cero para que no se vea */
    opacity: 0;
    /* Tardará 400ms en ir a la posicion translateX(0%) y en volver cuando quitemos el ratón */
    transition: all 400ms;
}

#social div:hover .overlay {
    transform: translateX(0%);
    opacity: 1;
}

#sponsors {
    background: #00538c;
    color: white;
    border: 5px white;
    text-shadow: 2px 2px 1px black;
    box-shadow: 0px 0px 5px white inset;
    font-size: 4.6vw;
    line-height: 1.5em;
    text-align: center;
    font-family: "BebasNeue";
    height: auto;
}


/* Cajas Redes Sociales y Colaboradores en responsive - Estará visible solo en las vistas responsive
 a partir de 600px */

#social-sponsor-responsive {
    margin: 0px auto;
    width: 100%;
    display: none;
}

#social-responsive,
#sponsor-responsive {
    float: left;
    width: 40%;
    margin-left: 7%;
}

#social-responsive h3,
#sponsor-responsive h3 {
    display: block;
    width: 90%;
    height: 30px;
    line-height: 30px;
    background: url('../img/pxgray.png'), white;
    box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
    font-family: "BebasNeue";
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 2px;
    padding-left: 15px;
    margin-top: 0px;
    margin-bottom: 15px;
}

.sponsor-box-responsive {
    width: 90%;
    margin: 0px auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 2px;
    background: #00538c;
    border: 5px white;
    box-shadow: 0px 0px 5px white inset;
    height: 200px;
}

.sponsor-box-responsive p {
    color: white;
    font-size: 8vw;
    line-height: 10vh;
    text-shadow: 2px 2px 1px black;
    text-align: center;
    font-family: "BebasNeue";
}

.aside-box-responsive {
    width: 90%;
    height: 200px;
    margin: 0px auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 2px;
    background: white;
    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;
}

#social-responsive a {
    display: block;
    color: #333;
    text-decoration: none;
    font-size: 30px;
    margin-top: 9px;
    margin-left: 10px;
}

#social-responsive .overlay {
    display: block;
    height: 15px;
    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;
    padding: 5px;
    margin-left: 56px;
    margin-top: -32px;
    cursor: pointer;
}


/* Fin cajas RRSS y Colaboradores*/


/* ====================================== ARTICLES SECCION ===================================================*/

#articles {
    /* width: 548px; */
    width: 65%;
    float: left;
}

#articles h2 {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 56px;
    font-family: "BebasNeue";
    font-size: 28px;
    font-weight: normal;
    letter-spacing: 2px;
    text-align: center;
    background: url('../img/pxgray.png'), white;
    box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
    margin: 0px auto;
    margin-bottom: 15px;
}

#articles article {
    width: 96.5%;
    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 {
    display: block;
    font-size: 16px;
    margin: 3px;
}

#articles article h4 a {
    color: #00538c;
}

#articles article h4 a:hover {
    text-decoration: underline;
}

#articles .data {
    float: right;
    background: #393d3f;
    color: white;
    height: 18px;
    line-height: 18px;
    margin: -10px;
    padding: 4px;
    font-size: 10px;
    border-radius: 0px 0px 0px 5px;
}

#articles .data span {
    margin: 5px;
}

#articles article p {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 12px;
}

#blog {
    height: 100px;
    margin-top: 60px;
    line-height: 100px;
    text-align: center;
    transition: all 1s;
}

#blog a {
    display: block;
    font-family: 'BebasNeue';
    font-size: 40px;
    letter-spacing: 3px;
    color: #00538c;
    transition: all 1s;
}

#blog:hover {
    background: #333;
    border: 7px solid #37bcf9;
    border-radius: 100px;
    box-shadow: 0px 0px 7px gray;
    animation: blink 10s infinite linear;
}

#blog:hover a {
    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;
}

@keyframes blink {
    0% {
        border: 7px solid #37bcf9;
    }
    25% {
        border: 7px solid green;
    }
    50% {
        border: 7px solid yellow;
    }
    75% {
        border: 7px solid white;
    }
    100% {
        border: 7px solid #37bcf9;
    }
}


/* Cómo lo he hecho yo antesd e ver el video. Ha quedado bien
#articles {
    width: 548px;
    float: left;
}

#articles h2 {
    display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 28px;
    line-height: 56px;
    background: url('../img/pxgray.png'), white;
    box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
    font-family: "BebasNeue";
}

#articles article,
#articles #blog {
    width: 535px;
    border: 1px solid #ccc;
    background: white;
    margin: 40px auto;
    box-shadow: 1px 1px 1px #ccc;
}

#articles #blog {
    height: 102px;
    text-align: center;
    font-size: 52px;
    font-family: 'BebasNeue';
    line-height: 107px;
}

#articles #blog a {
    color: #00538c;
}

#articles article .data {
    display: block;
    float: right;
    background: #393d3f;
    color: white;
    font-family: "TrebuchetMS";
    border-radius: 0px 0px 0px 5px;
    font-size: 10px;
    padding: 7px;
}

#articles article h4 {
    margin-top: 10px;
    margin-left: 10px;
}

#articles article h4 a {
    font-family: 'TrebuchetMS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 16px;
    color: #00538c;
    padding-top: 10px;
}

#articles article p {
    font-family: 'TrebuchetMS';
    font-size: 12px;
    padding: 10px;
} */


/* ========================================== FOOTER =======================================================*/

#footer {
    width: 100%;
    height: 320px;
    background: black;
    color: white;
    overflow: hidden;
}

#footer .footerBox {
    float: left;
    width: 28%;
    height: 200px;
    margin-top: 28px;
    margin: 4%;
    text-align: center;
    color: white;
    font-family: 'TrebuchetMS';
}

#footer .footerBox:first-child {
    margin-left: 0px;
}

#footer .footerBox:last-child {
    margin-right: 0px;
}

#footer a {
    color: #37bcf9;
    transition: all 300ms;
}

#footer h5 {
    display: block;
    background: url('../img/pxgray.png'), white;
    height: 37px;
    letter-spacing: 2px;
    text-align: center;
    font-family: 'BebasNeue';
    font-size: 25px;
    color: black;
    line-height: 41px;
    border-radius: 5px;
    margin-bottom: 12px;
}

#footerMenu ul {
    text-align: left;
    margin: 15px;
    font-size: 17px;
}

#footerMenu ul li {
    margin-top: 10px;
    padding: 5px;
    border-bottom: 1px solid #ccc;
}

#footerMenu ul li a {
    display: block;
    height: 30px;
    transition: all 300ms;
}

#footerMenu ul li:hover a {
    padding-left: 40px;
    color: white;
    width: 100%;
}

#footer iframe {
    width: 100%;
    height: 203px;
    margin-top: 10px;
    border-radius: 5px;
    border: 5px solid white;
    box-shadow: 0px 0px 5px gray;
}

#imgHTML {
    width: 146px;
}

#footer img {
    margin-bottom: 15px;
}

#footer #browsers img {
    width: 29px;
}

#copyright {
    font-size: 15px;
}