#community {
    text-align:center;
}

#community > div.header {
    background:rgba(255,255,255,0.2);
    padding:10px;
    margin-top:-7px;
    margin-bottom:35px;
}

#community > div.header > figure {
    position:relative;
    margin-bottom:23px;
}

#community > div.header > figure > img {
    display:block;
    width:100%;
    height:auto;
}

#community > div.header > figure > figcaption {
    position:absolute;
    z-index:2;
    bottom:0;
    left:0;
    width:100%;
    padding-top:120px;
    padding-bottom:22px;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.7)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=0 );
    font-size:24px;
    font-style:italic;
    font-weight:300;
}

#community > div.header > figure > figcaption > span {
    display:block;
    max-width:90%;
    margin:auto;
    line-height:32px;
}

#community > div.header > p {
    margin: 0;
    margin-bottom: 16px;
    line-height: 18px;
    font-size: 12px;
    font-family: Asap, inherit;
    text-align: justify;
}

#community > section > header {
    position:relative;
}

#community > section > header > h3 {
    max-width:28%;
    margin:auto;
    margin-bottom:14px;
    text-transform:uppercase;
    font-size:21px;
    font-weight:300;
}

#community > section > header > span.line {
    position:absolute;
    top:50%;
    margin-top:-1px;
    display:block;
    width:36%;
    height:1px;
    background-color:rgba(255,255,255,0.4);
}

#community > section > header > span.line.left {
    left:0;
}

#community > section > header > span.line.right {
    right:0;
}

#community > section > p {
    max-width:475px;
    margin:auto;
    margin-bottom:50px;
    line-height:15px;
    font-size:13px;
    font-family:Asap, inherit;
}

#community > section.impact {
    margin-bottom:50px;
}

#community > section.impact > div.list > article {
    width:25%;
    height:205px;
    float:left;
    margin-bottom:28px;
    font-size:13px;
    font-family:Asap, inherit;
}

#community > section.impact > div.list > article > div.image {
    max-width:92px;
    height:92px;
    border-radius:50%;
    overflow:hidden;
    margin:auto;
    margin-bottom:17px;
}

#community > section.impact > div.list > article > div.image > img {
    display:block;
    width:100%;
    height:auto;
}

#community > section.impact > div.list > article > h4 {
    text-transform:uppercase;
    margin:auto;
    margin-bottom:2px;
}

#community > section.impact > div.list > article > p {
    max-width:150px;
    margin:auto;
    line-height:17px;
}

#community > section.criteria {
    padding-bottom:50px;
    border-bottom:1px solid rgba(255,255,255,0.4);
}

#community > section.criteria > p {
    margin-bottom:70px;
}

#community > section.criteria > div.text > p {
    float:left;
    width:48%;
    margin:0;
    margin-right:4%;
    text-align:left;
    font-size:13px;
    font-family:Asap,inherit;
}

#community > section.criteria > div.text > p:last-child {
    margin-right:0;
}

#community > div.bottom {
    padding-top:35px;
}

#community > div.bottom > span {
    display:block;
    margin-bottom:10px;
    font-size:14px;
    font-style:italic;
    font-family:Asap,inherit;
}

#community > div.bottom > button {
    display:inline-block;
    width:250px;
}



@media (max-width:790px)
{
    
    #community > div.header {
        padding:20px;
    }

    #community > div.header > figure > figcaption {
        font-size:20px;
    }

    #community > div.header > figure > figcaption > span {
        line-height:26px;
    }

    #community > section > header > h3 {
        font-size:16px;
    }

    #community > section.impact > header > h3 {
        max-width:32%;
    }

    #community > section.impact > header > span.line {
        width:34%;
    }

    #community > section.criteria > header > h3 {
        max-width:18%;
    }

    #community > section.criteria > header > span.line {
        width:41%;
    }

    #community > section.impact {
        margin-bottom:20px;
    }
    
    #community > section.impact > div.list {
        max-width:375px;
        width:100%;
        margin:auto;
    }
    
    #community > section.impact > div.list > article {
        width:50%;
    }

    #community > section.criteria {
        padding-bottom:30px;
    }

    #community > section.criteria > p {
        margin-bottom:20px;
    }
    
}



@media (max-width:660px)
{
    
    #community > div.header {
        padding:5px;
    }

    #community > div.header > figure > figcaption {
        padding-top:45px;
        padding-bottom:8px;
        font-size:16px;
    }

    #community > div.header > figure > figcaption > span {
        line-height:22px;
    }

    #community > section.impact > header > h3 {
        max-width:60%;
    }

    #community > section.impact > header > span.line {
        width:20%;
    }

    #community > section.criteria > header > h3 {
        max-width:18%;
    }

    #community > section.criteria > header > span.line {
        width:41%;
    }

    #community > section.criteria > div.text > p {
        float:none;
        width:auto;
        margin-right:0;
        margin-bottom:30px;
    }

    #community > section.criteria > div.text > p:last-child {
        margin-bottom:0;
    }
}