h3 {
    color:darkgrey;
    margin-left:20px;
    margin-top:20px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: lighter;
}


.rate-area1 {
    float:left;
    border-style: none;

}

.rate-area1:not(:checked) > input {
    position:absolute;
    clip:rect(0,0,0,0);
}

.rate-area1:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:100%;  
    color:lightgrey;
    text-shadow:1px 1px #bbb;
}

.rate-area1:not(:checked) > label:before {
    content: '★ ';
}

.rate-area1 > input:checked ~ label {
    color: gold;
    text-shadow:1px 1px #c60;
    font-size:100% !important;
}


.rate-area1 > input:checked + label:hover,
.rate-area1 > input:checked + label:hover ~ label,
.rate-area1 > input:checked ~ label:hover,
.rate-area1 > input:checked ~ label:hover ~ label,
.rate-area1 > label:hover ~ input:checked ~ label {
    color: gold;
    text-shadow: 1px 1px goldenrod;   
    
}

.rate-area1 > label:active {
    position:relative;
    
}