/*big screen*/
div.stars-review {
    width: auto;
    display: inline-block;
}

input.star-review { display: none; }

label.star-review {
    float: right;
    padding: 10px;
    font-size: 36px;
    color: #FD4;
    transition: all .2s;
}

input.star-review:checked ~ label.star-review:before {
    content: '\f005';
    color: #FD4;
    transition: all .25s;
}

input.star-review-10:checked ~ label.star-review:before {
    color: #FE7;
    text-shadow: 0 0 20px #952;
}

input.star-review-1:checked ~ label.star-review:before { color: #F62; }

input.star-review-2:checked ~ label.star-review:before { color: #F62; }

label.star-review:hover { transform: rotate(-15deg) scale(1.3); }

label.star-review:before {
    content: '\f006';
    font-family: FontAwesome;
}

/*small screen*/
div.stars-review-small {
    width: auto;
    display: inline-block;
}

input.star-review-small { display: none; }

label.star-review-small {
    float: right;
    padding: 2px;
    font-size: 32px;
    color: #FD4;
    transition: all .2s;
}

input.star-review-small:checked ~ label.star-review-small:before {
    content: '\f005';
    color: #FD4;
    transition: all .25s;
}

input.star-review-small-10:checked ~ label.star-review-small:before {
    color: #FE7;
    text-shadow: 0 0 20px #952;
}

input.star-review-small-1:checked ~ label.star-review-small:before { color: #F62; }

input.star-review-small-2:checked ~ label.star-review-small:before { color: #F62; }

label.star-review-small:hover { transform: rotate(-15deg) scale(1.3); }

label.star-review-small:before {
    content: '\f006';
    font-family: FontAwesome;
}

@media (max-width: 331px) {
    label.star-review-small {
        float: right;
        padding: 2px;
        font-size: 30px;
        color: #444;
        transition: all .2s;
        padding-right: 14px !important;
    }
}

@media (max-width: 331px) {
    label.star-review-small {
        float: right;
        padding: 2px;
        font-size: 30px;
        color: #444;
        transition: all .2s;
        padding-right: 14px !important;
    }
}

@media (max-width: 303px) {
    label.star-review-small {
        float: right;
        padding: 2px;
        font-size: 25px;
        color: #444;
        transition: all .2s;
        padding-right: 10px !important;
    }
}

@media (max-width: 265px) {
    label.star-review-small {
        float: right;
        padding: 2px;
        font-size: 26px;
        color: #444;
        transition: all .2s;
        padding-right: 7px !important;
    }

    label.star-review-small-1 {
        float: right;
        padding: 2px;
        font-size: 26px;
        color: #444;
        transition: all .2s;
        padding-right: 7px !important;
        padding-left: 0px !important;
    }

}

@media (max-width: 241px) {
    label.star-review-small {
        float: right;
        padding: 2px;
        font-size: 22px;
        color: #444;
        transition: all .2s;
        padding-right: 6px !important;
        padding-left: 0px !important;
    }

    label.star-review-small-1 {
        float: right;
        padding: 2px;
        font-size: 22px;
        color: #444;
        transition: all .2s;
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
}

@media (max-width: 217px) {
    label.star-review-small {
        float: right;
        padding: 2px;
        font-size: 18px;
        color: #444;
        transition: all .2s;
        padding-right: 4px !important;
    }

    label.star-review-small-1 {
        float: right;
        padding: 2px;
        font-size: 18px;
        color: #444;
        transition: all .2s;
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
}