#article-social {
    margin: 0 10px 10px 10px;
    background-color: #fff;
    color: #fff;
    padding: 0 10px;
}

@media only screen and (min-width: 750px) {
    #article-social {
        background-color: #f5f5f5;
        color: #fff;
        padding: 0 10px;
        height: 45px;
        line-height: 45px;
    }
}

@media only screen and (min-width: 960px) {
    #article-social {
        padding: 0 15px;
    }
}

#article-social > h3 {
    margin-right: 10px;
    margin: 10px 10px 15px 0;
    color: #7c7c7c;
    font-size: 12px;
}

    #article-social > h3 > span {
        display: none;
    }

@media only screen and (min-width: 750px) {
    #article-social > h3 {
        float: left;
        margin-top: 0;
        margin-bottom: 0; 
    }
}

@media only screen and (min-width: 850px) {
    #article-social > h3 > span {
        display: inline;
    }
}

@media only screen and (min-width: 960px) {
    #article-social > h3 {
        margin-right: 15px;
    }
}

#article-social > ul {
    margin-bottom: 20px;
}

@media only screen and (min-width: 700px) {
    #article-social > ul {
        margin-bottom: 0; 
    }
}

@media only screen and (min-width: 750px) {
    #article-social > ul {
        float: left;
    }
}

#article-social > ul > li {
    float: left;
    margin-right: 5px;
    margin-bottom: 15px;
}

@media only screen and (min-width: 750px) {
    #article-social > ul > li {
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 960px) {
    #article-social > ul > li {
        margin-right: 10px;
    }
}

#article-social > ul > li:last-of-type {
    margin-right: 0;
}

#article-social > ul > li > a {
    padding: 5px;
    color: #fff;
    width: 30px;
    height: 30px;
}

#article-social > ul > li > a.is-facebook {
    background-color: #3d599b;
}

#article-social > ul > li > a.is-facebook:hover {
    background-color: #243b73;
}

#article-social > ul > li > a.is-twitter {
    padding-top: 6px;
    background-color: #00abee;
}

#article-social > ul > li > a.is-twitter:hover {
    background-color: #0094ce;
}

#article-social > ul > li > a.is-linked-in {
    padding-top: 5px;
    background-color: #007bb6;
}

#article-social > ul > li > a.is-linked-in:hover {
    background-color: #015e8b;
}

#article-social > ul > li > a.is-google-plus {
    padding-top: 5px;
    background-color: #d34836;
}

#article-social > ul > li > a.is-google-plus:hover {
    background-color: #ad3121;
}

#article-social > ul > li > a.is-email {
    padding-top: 5px;
    background-color: #666;
}

#article-social > ul > li > a.is-email:hover {
    background-color: #333;
}