/* source: https://codepen.io/matchboxhero/pres/VYNejG */
/* convert: http://www.cssportal.com/scss-to-css/ */

.button:link, .button:visited, .button:active, .button:hover {
    color: white;
    text-decoration: none;
}

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

.button--social-icon {
    vertical-align: middle;
    padding-right: 8px;
}

.button--social-login {
    margin-bottom: 12px;
    margin-right: 12px;
    line-height: 26px;
    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--yahoo {
    width: auto;
    display: inline-block;
    border: 0 none;
    margin-top: 8px;
    vertical-align: middle;
}

.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--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--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--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;
}