@charset "UTF-8";

    /* Chrome, Safari, Opera */
    @-webkit-keyframes follow-animation {
        from {
            background: white;
            color: #3399FF;
            width: 90px;
            left: 50px;
        }

        to {
            background: #2EB82E;
            border-color: #2EB82E;
            color: #ffffff;
            width: 100px;
            left: 35px;
        }
    }

    @-webkit-keyframes unfollow-animation {
        from {
            background: #2EB82E;
            color: #ffffff;
            width: 100px;
            left: 35px;
        }

        to {
            background: white;
            border-color: #3399FF;
            color: #3399FF;
            width: 90px;
            left: 50px;
        }
    }
    /* Standard syntax */
    @keyframes follow-animation {
        from {
            background: white;
            color: #3399FF;
            width: 85px;
            left: 50px;
        }

        to {
            background: #2EB82E;
            border-color: #2EB82E;
            color: #ffffff;
            width: 100px;
            left: 35px;
        }
    }

    @keyframes unfollow-animation {
        from {
            background: #2EB82E;
            color: #ffffff;
            width: 100px;
            left: 35px;
        }

        to {
            background: white;
            border-color: #3399FF;
            color: #3399FF;
            width: 90px;
            left: 50px;
        }
    }

.btnFollow {
    -webkit-appearance: none;
}
.btnApprove {
    -webkit-appearance: none;
}

.btnFollow:after {
    color: #3399FF;
    font-family: "Helvetica";
    font-size: 10pt;
    /*background-color: #ffffff;*/
    border: 1px solid;
    border-color: #3399FF;
    border-radius: 3px;
    /*position: absolute;*/
    top: 50px;
    left: 50px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    padding: 5px 15px;
    content: '+ Follow';
    -webkit-animation: unfollow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-animation-fill-mode: forwards;
    animation: unfollow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
}

.btnApprove:after {
    color: #3399FF;
    font-family: "Helvetica";
    font-size: 10pt;
    background-color: #ffffff;
    border: 1px solid;
    border-color: #3399FF;
    border-radius: 3px;
    /*position: absolute;*/
    top: 50px;
    left: 50px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    padding: 5px 15px;
    content: '+ Approve';
    -webkit-animation: unfollow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-animation-fill-mode: forwards;
    animation: unfollow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
}


.btnFollow:checked:after {
    content: 'Following';
    -webkit-animation: follow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-animation-fill-mode: forwards;
    animation: follow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
}

    .btnApprove:checked:after {
        content: 'Approved';
        -webkit-animation: follow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        -webkit-animation-fill-mode: forwards;
        animation: follow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation-fill-mode: forwards;
    }