html,body{
    font-family: 'Lato', sans-serif;
}

#mobile-wrapper{
    background: #f1f1f1 !important;
}

#global-header h2{
    font-family: 'Lora', serif;
    color: #1e73be !important;
    text-transform: none;
}

#global-header.light #paid-disclaimer span{
    color: #000;
}

#global-header.light #wsjcs-logo{
    border-left: solid 1px #999;
}

#vcp__hero h1{
    font-family: 'Lora', serif;
    font-size: 3.5em;
    text-transform: none;
}

#vcp__hero h2{
    color: black;
    font-size: 1.2em;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    padding-top: 0.5em;
}

#vcp__footer h1{
    font-family: 'Lora', serif;
    font-size: 2.2em;
}

#vcp__supplemental_row .cta-basic{
    font-weight: 300;
}

#vcp__supplemental .vcp__supplemental_row.cta-basic h2{
    font-weight: 300;
}

/*tiny phones*/
@media only screen and (max-width : 320px){
    #vcp__hero h1{
        font-size: 3em;
    }

    #vcp__chapter_select .vcp__chapter_button.w-image h3{
        font-size: 0.85em;
    }
}

@media only screen and (max-width : 600px){
    #vcp__hero{
        padding: 30px 0;
        position: relative;
        height: auto;
    }

    #vcp__hero h1{
        z-index: 2;
    }

    #vcp__hero h2{
        font-weight: 400;
        z-index: 2;
        max-width: 90%;
        margin: 0 auto;
    }

    #vcp__hero::before{
        content: ' ';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 50%;
        z-index: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0));
    }
    
    #vcp__chapters_list::after{
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        width: 10%;
        content: ' ';
        background: linear-gradient(to left, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0));
    }

    #vcp__chapter_select.w-image .owl-next, #vcp__chapter_select.w-image .owl-prev{
        background: rgba(173,214,234,0.5);
    }
    .owl-prev.disabled, .owl-next.disabled{
        display: block;
        opacity: 0.5;
    }

    #vcp-half-background{
        background-size: 200% !important;
    }

    #vcp__footer{
        padding: 30px 0;
    }

    #partner-logo{
        height: 70%;
    }

}

@media only screen and (min-width : 768px){

    #vcp__hero h2{
        font-size: 1.5em;
    }

    #vcp__hero h1{
        font-size: 4.5em;
    }
}

@media only screen and (min-width : 992px){
    #vcp__hero h2{
        font-size: 2em;
    }

    #vcp__hero h1{
        font-size: 6.2em;
    }

    #global-header.light #paid-disclaimer span{
        color: #999;
    }
}