/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.pfp-content{

}
.pfp-content h2{
    margin-top:0px;
}
.pfp-content .box{
    padding:0;
}
.pfp-content .videos{
    background: transparent;
    padding-top:0;
}
.pfp-content .videos .headline{
    padding:9px;
    text-transform: uppercase;
    font-size:26px;
    font-weight:700;
    text-align: center;
    background: #A50C12;
    width:100%;
    display: inline-block;
}
.pfp-content .videos iframe{
    margin:20px 0;
}
.pfp-content .videos .headline i{
    margin-left:10px;
}
.pfp-content .content .card{
    width: 100%;
    float: left;
    clear: both;
    margin: 0 0 30px 0;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}
.pfp-content .content .card a{
    color: black;
}
.pfp-content .content .card img{
    width:40%;
    height:160px;
    float: left;
}
.pfp-content .content .card .title {
    float: left;
    font-size:16px;
    font-weight:700;
    margin-left:10px;
    width:50%;
}
.pfp-content .content .card .excerpt{
    font-size:14px;
    line-height:22px;
    margin-left:10px;
    float: left;
    width:55%;
}

.pfp-content .sponsor .heading{
    color: #000;
    font-weight: 700;
    background: repeating-linear-gradient(-55deg, #fff, #fff 3px, #f1f1f1 3px, #f1f1f1 6px);
    text-align: center;
    padding: 20px;
    margin: 50px 0 10px;
    font-size: 26px;
}

.pfp-content .sponsor img{
    margin:0 auto;
    display:block;
    max-width:85%;
}

@media only screen and (max-width: 991px) {

    .pfp-content .sponsor .heading {
        width:60%;
        float: left;
        font-size:16px;
    }
    .pfp-content .sponsor img{
        max-width: 120px;
        float: right;
    }
    .pfp-content .content .card img{
        height:200px;
        float: left;
    }
    .pfp-content .content .card img, .pfp-content .content .card .title, .pfp-content .content .card .excerpt {
        width:100%;
        margin-left:0px;
    }

    .pfp-content .videos{
        clear: both;
    }
}