@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700);

.button {
    width: auto;
    display: inline-block;
    padding: 0 18px 0 6px;
    border: 0 none;
    border-radius: 5px;
    text-decoration: none;
    transition: all 250ms linear;
}

    .button:hover {
        text-decoration: none;
    }

.button--social-login {
    margin-bottom: 12px;
    margin-right: 12px;
    color: white;
    height: 50px;
    line-height: 46px;
    position: relative;
    text-align: left;
}

    .button--social-login .icon {
        margin-right: 12px;
        font-size: 24px;
        line-height: 24px;
        width: 42px;
        height: 24px;
        text-align: center;
        display: inline-block;
        position: relative;
        top: 4px;
    }

        .button--social-login .icon:before {
            display: inline-block;
            width: 40px;
        }

        .button--social-login .icon:after {
            content: "";
        }

.button--Facebook {
    background-color: #4b70ab;
    border: 1px solid #3b5988;
}

    .button--Facebook .icon {
        border-right: 1px solid #3b5988;
    }

        .button--Facebook .icon:after {
            border-right: 1px solid #6b8bbe;
        }

    .button--Facebook:hover {
        background-color: #436499;
    }

.button--Linkedin {
    background-color: #0087be;
    border: 1px solid #00638b;
}

    .button--Linkedin .icon {
        border-right: 1px solid #00638b;
    }

        .button--Linkedin .icon:after {
            border-right: 1px solid #00abf1;
        }

    .button--Linkedin:hover {
        background-color: #0075a5;
    }

.button--Google {
    background-color: #3f85f4;
    border: 1px solid #0f66f1;
}

    .button--Google .icon {
        border-right: 1px solid #0f66f1;
    }

        .button--Google .icon:after {
            border-right: 1px solid #6fa4f7;
        }

    .button--Google:hover {
        background-color: #2776f3;
    }

.button--Twitter {
    background-color: #3b94d9;
    border: 1px solid #257abc;
}

    .button--Twitter .icon {
        border-right: 1px solid #257abc;
    }

        .button--Twitter .icon:after {
            border-right: 1px solid #66abe1;
        }

    .button--Twitter:hover {
        background-color: #2988d2;
    }

.button--Yahoo {
    background-color: #500095;
    border: 1px solid #350062;
}

    .button--Yahoo .icon {
        border-right: 1px solid #350062;
    }

        .button--Yahoo .icon:after {
            border-right: 1px solid #6b00c8;
        }

    .button--Yahoo:hover {
        background-color: #42007c;
    }

.button--Openid {
    background-color: #f78c40;
    border: 1px solid #f56f0f;
}

    .button--Openid .icon {
        border-right: 1px solid #f56f0f;
    }

        .button--Openid .icon:after {
            border-right: 1px solid #f9a971;
        }

    .button--Openid:hover {
        background-color: #f67d28;
    }

.button--Googleplus {
    background-color: #dd4b39;
    border: 1px solid #c23321;
}

    .button--Googleplus .icon {
        border-right: 1px solid #c23321;
    }

        .button--Googleplus .icon:after {
            border-right: 1px solid #e47365;
        }

    .button--Googleplus:hover {
        background-color: #d73925;
    }

.button--Dropbox {
    background-color: #007de1;
    border: 1px solid #0061ae;
}

    .button--Dropbox .icon {
        border-right: 1px solid #0061ae;
    }

        .button--Dropbox .icon:after {
            border-right: 1px solid #1597ff;
        }

    .button--Dropbox:hover {
        background-color: #006fc8;
    }

.button--Github {
    background-color: #333;
    border: 1px solid #1a1a1a;
}

    .button--Github .icon {
        border-right: 1px solid #1a1a1a;
    }

        .button--Github .icon:after {
            border-right: 1px solid #4d4d4d;
        }

    .button--Github:hover {
        background-color: #262626;
    }

.button--Bitbucket {
    background-color: #205081;
    border: 1px solid #163758;
}

    .button--Bitbucket .icon {
        border-right: 1px solid #163758;
    }

        .button--Bitbucket .icon:after {
            border-right: 1px solid #2a69aa;
        }

    .button--Bitbucket:hover {
        background-color: #1b436d;
    }

.button--Soundcloud {
    background-color: #f50;
    border: 1px solid #c40;
}

    .button--Soundcloud .icon {
        border-right: 1px solid #c40;
    }

        .button--Soundcloud .icon:after {
            border-right: 1px solid #f73;
        }

    .button--Soundcloud:hover {
        background-color: #e64d00;
    }

.button--Spotify {
    background-color: #2ebd59;
    border: 1px solid #249446;
}

    .button--Spotify .icon {
        border-right: 1px solid #249446;
    }

        .button--Spotify .icon:after {
            border-right: 1px solid #4bd374;
        }

    .button--Spotify:hover {
        background-color: #29a84f;
    }

.button--Microsoft {
    background-color: #00a4ef;
    border: 1px solid #0081bc;
}

    .button--Microsoft .icon {
        border-right: 1px solid #0081bc;
    }

        .button--Microsoft .icon:after {
            border-right: 1px solid #23baff;
        }

    .button--Microsoft:hover {
        background-color: #0093d6;
    }

.button--Flickr {
    background-color: #ff0084;
    border: 1px solid #cc006a;
}

    .button--Flickr .icon {
        border-right: 1px solid #cc006a;
    }

        .button--Flickr .icon:after {
            border-right: 1px solid #ff339d;
        }

    .button--Flickr:hover {
        background-color: #e60077;
    }