/*
Theme Name: Oscar Farell
Description: Crack en Finanzas
Author: Saul Chávez(programación) Víctor Martínez(diseño gráfico)
Author URI: https://verticeasociados.com/
Version: 4.0
Tested up to: 6.4
Requires at least: 3.0
Requires PHP: 5.2.4
Tags: blog, two-columns, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu, flexible-header, featured-images, footer-widgets, featured-image-header, block-patterns
Text Domain: oscarfarell
-------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;500;600;700;800;900&display=swap');
/*
    font-family: 'Montserrat', sans-serif;    
*/
@font-face {
    font-family: 'Akzidenz-Grotesk BQ';
    src: url('fonts/AkzidenzGroteskBQ-Ext.woff2') format('woff2'),
        url('AkzidenzGroteskBQ-Ext.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Akzidenz-Grotesk BQ';
    src: url('fonts/AkzidenzGroteskBQ-BoldExt.woff2') format('woff2'),
        url('AkzidenzGroteskBQ-BoldExt.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Akzidenz-Grotesk';
    src: url('fonts/AkzidenzGroteskBQ-XBdCnd.woff2') format('woff2'),
        url('AkzidenzGroteskBQ-XBdCnd.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Infamous';
    src: url('fonts/Infamous-Regular.woff2') format('woff2'),
        url('Infamous-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root{
    --azul: #3fa9f5;
    --gris1: #333232;
    --gris2: #444343;
}
body{
    margin: 0 auto;
}
.tope{
    position: relative;
    width: 100%;
    height: 119px;
}
header{
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 120px;
    top: 0px;
    left: 0px;
    background-color: #000;
}
header div{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 200px;
    height: 100px;
    margin-top: 10px;
    background-position: center center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-image: url(images/logo.png);
}
header ul{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 75%;
    padding:0px;
    margin: 0px;
    list-style: none;
    text-align: center;
    padding-top: 10px;
}
header a{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
    font-size: 11px;
    color: #FFF;
    font-family: 'Akzidenz-Grotesk BQ';
    font-weight: 400;
    width: 24%;
    text-align: center;
}
header li:hover{
    color: #000;
    background-color: #FFF;
}
#inicio{
    position: relative;
    width: 100%;
    height: 37vw;
    background-image: url(images/banner.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
#inicio h2{
    position: absolute;
    top: 13vw;
    color: #FFF;
    font-size: 1.2vw;
    letter-spacing: .6vw;
    font-family: 'Akzidenz-Grotesk BQ';
    left: 55%;
}
#inicio h3{
    position: absolute;
    top: 7vw;
    font-size: 5vw;
    line-height: 1;
    letter-spacing: .6vw;
    font-family: 'Akzidenz-Grotesk BQ';
    font-family: 'Montserrat', sans-serif;
    left: 48%;
    font-weight: 900;
    text-align: right;
    color: var(--gris1);
}
#inicio h3 span:nth-child(2){
    color: var(--gris2);
}
#inicio h3 span:nth-child(4){
    color: #FFF
}
#inicio h4{
    position: absolute;
    top: 24vw;
    color: #FFF;
    font-size: 2.5vw;
    line-height: 1;
    letter-spacing: .6vw;
    font-family: 'Infamous';
    left: 43%;
}
#quien-soy{
    position: relative;
    width: 100%;
    padding-bottom: 5vw;
}
#quien-soy article{
    position: relative;
    width: 75%;
    padding-left: 12.5%;
    padding-right: 12.5%;
    background-color: var(--azul);
    font-family: 'Akzidenz-Grotesk';
    font-size: 3vw;
    padding-top: 4vw;
    padding-bottom: 7vw;
}
#quien-soy p{
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: .9vw;
    line-height: 1.5;
    padding-top: 2vw;
    width: 40%;
    padding-right: 2.5%;
    padding-left: 8.5%;
    font-family: 'Akzidenz-Grotesk BQ';
    font-family: 'Montserrat', sans-serif;
}
#quien-soy img{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 40%;
    margin-top: -5vw;
    font-family: 'Akzidenz-Grotesk BQ';
}
#videos{
    position: relative;
    width: 100%;
    margin-bottom: 3vw;
}
#videos h3{
    position: relative;
    text-align: center;
    font-family: 'Akzidenz-Grotesk';
    font-size: 2vw;
}
#videos > section{
    border-top: solid 1px #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}
#videos > section:last-child{
    border-bottom: solid 1px #ccc;
}
#videos article{
    width: 27%;
    height: 30vw;
    border-left: solid 1px #ccc;
    padding-top: 3vw;
    padding-bottom: 1vw;
}
#videos article > div{
    position: relative;
    width: 100%;
    height: 17vw;
    background-position: center center;
    background-size: cover;
    background-color: #F00;
}
#videos article:last-child{
    border-right: solid 1px #ccc;
}
#videos article h2{
    position: relative;
    width: 85%;
    padding-left: 7.5%;
    padding-right: 7.5%;
    font-size: 1vw;
    font-family: 'Akzidenz-Grotesk BQ';
}
#videos article p{
    position: relative;
    width: 85%;
    padding-left: 7.5%;
    padding-right: 7.5%;
    font-size: .8vw;
    font-family: 'Montserrat', sans-serif;
}
#videos article > p:nth-child(4){
    font-weight: 800;
}
footer{
    position: relative;
    width: 100%;
    background-color: var(--azul);
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-size: 13%;
    background-position: 5% center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5vw;
    padding-bottom: 5vw;
}
footer ul{
    position: relative;
    font-family: 'Montserrat', sans-serif; 
    color: #FFF;
    font-size: 1vw;
    list-style: none;
    padding: 0px;
    margin: 0px;
    width: 20%;
    padding-left: 30%;
}
footer li{
    line-height: 1.5;
}
footer form{
    position: relative;
    width: 30%;
    padding-left: 10%;
    padding-right: 10%;
}
footer form p{
    color: #FFF;
    font-size: 1vw;
    font-family: 'Montserrat', sans-serif; 
    width: 80%;
}
footer input[type=email]{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 65%;
    height: 2.4vw;
    border:0px;
    font-family: 'Montserrat', sans-serif; 
    font-size: 1vw;
}
footer input[type=submit]{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 30%;
    margin-left: 1%;
    height: 2.5vw;
    border:0px;
    font-family: 'Montserrat', sans-serif; 
    font-size: 1vw;
    color: #FFF;
    background-color: #192136;
}
iframe.video{
    position: relative;
    width: 70%;
    padding-left: 15%;
    padding-right: 15%;
    background-color: #000;
    height: 39vw;
    padding-top: 5vw;
    padding-bottom: 5vw;
}
#quotesWidgetTicker{
    width: 80%;
    margin-left: 10%;
    margin-top: 7vw;
    margin-bottom: 7vw;
}
#quotesWidgetTicker iframe{
    border: solid 1px #ccc;
}

a{
    text-decoration: none;
    color: inherit;
}
.hamburger{
    z-index: 99 !important;
    display: none !important;
}
.hamburger-inner{
    margin-top: 0px !important;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after{
    background-color: #FFF !important;
}
.entrada{
    display: flex;
    justify-content: center;
    padding-top: 5vw;
    padding-bottom: 3vw;
}

@media (max-width: 480px){
    header ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background-color: #000;
        left: 0px;
        top: 120px;
        padding-top: 15vw;
        display: none;
    }
    header li{
        text-align: center;
    }
    header a{
        width: 100%;
        font-size: 5vw;
        font-weight: 800;
        line-height: 15vw;
        text-align: left;
    }
    .hamburger{
        display: block !important;
        right: 5vw !important;
        top: 7vw !important;
    }
    #quien-soy article{
        font-size: 7vw;
        padding-top: 10vw;
        padding-bottom: 10vw;
    }
    #quien-soy p{
        padding-right: 12.5%;
        width: 75%;
        font-size: 4vw;
    }
    #quien-soy img{
        width: 100%;
        margin-top: 0px;
    }
    #videos h3{
        font-size: 7vw;
    }
    #videos > section{
        flex-direction: column;
    }
    #videos article{
        width: 75%;
        height: 100vw;
    }
    #videos article > div{
        height: 40vw;
    }
    #videos article h2{
        font-size: 4vw;
    }
    #videos article p{
        font-size: 3.5vw;
    }
    footer{
        background-position: center 10vw;
        padding-top: 28vw;
        background-size: 25%;
    }
    footer ul{
        display: none;
    }
    footer form{
        width: 80%;
    }
    footer input[type=email], footer input[type=submit]{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        height: 8vw;
        font-size: 4vw;
    }
    footer input[type=submit]{
        width: 40%;
        margin-left: 30%;
        margin-right: 30%;
        margin-top: 2vw;
    }
    footer form p {
        color: #FFF;
        font-size: 4vw;
        font-family: 'Montserrat', sans-serif;
        width: 80%;
        margin-left: 10%;
    }
    iframe{
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
    .wp-block-embed {
        margin: 0 0 1em;
        width: 100%;
        margin: 0px;
    }
}
#primary, #secondary{
    display:none;
}