/*.ratings {*/
/*    position: absolute;*/
/*    top: 30%;*/
/*    font-size: x-large;*/
/*}*/
.clap-btn,
.heart-btn,
.like-btn {
    display: inline-block;
    Cursor: pointer;
    width: 80px;
    height: 80px;
}

.clap-btn {
    background: url('../images/claps.png') no-repeat 0 50%;
    background-size: 900%;
    float: left;
}

.heart-btn {
    background: url('../images/heart.png') no-repeat 0 50%;
    background-size: 2900%;
    float: left;
}

.like-btn {
    background: url('../images/like.png') no-repeat 0 50%;
    background-size: 200%;
    float: left;
}

.clap-active,
.heart-active,
.like-active {
    animation-name: animate;
    animation-duration: .8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.clap-active {
    animation-timing-function: steps(8);
}
.heart-active {
    animation-timing-function: steps(28);
}
.like-active {
    animation-timing-function: steps(1);
}
@keyframes animate {
    0%   { background-position: left;  }
    50%  { background-position: right; }
    100% { background-position: right; }
}
.ratings-wrapper {
    height: 80px;
    display: inline-block;
}
.num-ratings {
    float: left;
    padding-top: 30px;
    padding-bottom: 30px;
}