.barra {
    float: left;
    width: 150px;
    height: 30px;
    background: #ebebeb;
    margin-top: 10px;
    position: relative;
}

.barra .bg {
    float: left;
    height: 30px;
    width: 30%;
    background: linear-gradient(to bottom, #fee24f, #f4bb2f);
}

.estrelas input[type=radio] {
    display: none;
}

.estrelas label{
    margin-bottom:0px;
}

.estrelas label i.fa:before {
    content: '\f005';
    color: #FC0;
}

.estrelas input[type=radio]:checked~label i.fa:before {
    color: #CCC;
}