.rating {
    border: none;
    float: left;
    direction: ltr;
    margin-top:-20px;
}

.rating > input { display: none; }
.rating > label:before {
    margin: 5px;
    font-size: 25px;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
    font-weight:bold;
}

.rating > .half:before {
    content: "\f089";
    position: absolute;
}
.rate {
    padding-top:20px;
}
.rating > label {
    color: #ddd;
    float: right;
    margin-top: 10px;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label {
    color: #FFD700;
    cursor: pointer;
} /* hover previous stars in list */

    .rating > input:checked + label:hover, /* hover current star when changing rating */
    .rating > input:checked ~ label:hover,
    .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
    .rating > input:checked ~ label:hover ~ label {
        color: #a58400;
       cursor:pointer;
       
    }