.rating-area:not(:checked) > input {
	display: none;
}

@media (min-width: 768px){
    .rating-area {
        overflow: hidden;
        width: calc(2.7vw * 5);
        margin: 0 auto;
    }
}

@media (min-width: 768px){
    .rating-area:not(:checked) > label {
        float: right;
        width: 2.7vw;
        padding: 0;
        cursor: pointer;
        font-size: 2.5vw;
        line-height: 32px;
        color: lightgrey;
        text-shadow: 1px 1px #bbb;
    }
}
@media (max-width: 767px){
    .rating-area {
        overflow: hidden;
        width: calc(6vw * 5);;
        margin: 0 auto;
    }
}
@media (max-width: 767px){
    .rating-area:not(:checked) > label {
        float: right;
        width: 6vw;
        padding: 0;
        cursor: pointer;
        font-size: 5vw;
        line-height: 35px;
        color: lightgrey;
        text-shadow: 1px 1px #bbb;
    }
}

.rating-area:not(:checked) > label:before {
	content: '★';
}
.rating-area > input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px #c60;
}
.rating-area:not(:checked) > label:hover,
.rating-area:not(:checked) > label:hover ~ label {
	color: gold;
}
.rating-area > input:checked + label:hover,
.rating-area > input:checked + label:hover ~ label,
.rating-area > input:checked ~ label:hover,
.rating-area > input:checked ~ label:hover ~ label,
.rating-area > label:hover ~ input:checked ~ label {
	color: gold;
	text-shadow: 1px 1px goldenrod;
}
.rate-area > label:active {
	position: relative;
}



.rating-result span {
	padding: 0;
	font-size: 1vwax;
	line-height: 1;
	color: lightgrey;
	text-shadow: 1px 1px #bbb;
}
.rating-result > span:before {
	content: '★';
}
.rating-result > span.active {
	color: gold;
	text-shadow: 1px 1px #c60;
}