body{
	max-width:358px;
	font-family:arial,halvatica,Sans-Serif;
}
h1{
text-align:center;
font-size:24px;
font-weight:bold;
margin-top:24px;
}
form{
	float:left;
	
	padding:12px;
}
.rating {
	margin:0 auto;
	width:192px;
	height:60px;
	position:relative;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
 .rating:not(:checked) > input {
    position:absolute;
    left:-9999px; 
    clip:rect(0,0,0,0);
} 

.rating input:required:invalid/* ,
.rating input:focus:invalid  */{
position:absolute;
left:0;
top:24px;
}


.rating:not(:checked) > label.star {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
 
}

.rating:not(:checked) > label.star:before {
   content: "\f005";
    font-family: FontAwesome;
}

.rating > input:checked ~ label.star {
    color: gold;

}

.rating:not(:checked) > label.star:hover,
.rating:not(:checked) > label.star:hover ~ label.star {
    color: gold;

}

.rating > input:checked + label.star:hover,
.rating > input:checked + label.star:hover ~ label.star,
.rating > input:checked ~ label.star:hover,
.rating > input:checked ~ label.star:hover ~ label.star,
.rating > label.star:hover ~ input:checked ~ label.star {
    color:  gold;

}

.rating > label.star:active {
    position:relative;
    top:2px;
    left:2px;
}


label.showLabelMsg{
	display:none;
	position:absolute;
	width:192px;
	height:18px;
	background:#fff;
	left:0px;
	top:40px;
	text-align:center;
	color:#666;

}


.rating > input:checked ~ label.showLabelMsg {
	display:block;
	color:#000;
	
}



.rating > input:checked ~ label.star1msg{
	z-index:1;	
}
.rating > input:checked ~ label.star2msg{
	z-index:2;
}
.rating > input:checked ~ label.star3msg{
	z-index:3;
}
.rating > input:checked ~ label.star4msg{
	z-index:4;
}
.rating > input:checked ~ label.star5msg{
z-index:5;
}

.rating > input:hover ~ label.star5msg{
display:block;
z-index:15;

}
 .rating > input:hover ~ label.star4msg{
display:block;
z-index:14;
}
.rating > input:hover ~ label.star3msg{
display:block;
z-index:13;
} 
.rating > input:hover ~ label.star2msg{
display:block;
z-index:12;
}
.rating > input:hover ~ label.star1msg{
display:block;
z-index:11;
} 

.rating > input:checked:hover ~ label.showLabelMsg,
.rating:hover label.showLabelMsg
{color:#999!important;}	


label.bigLabel{
	display:block;
	padding:12px 0 6px 0;
}
input#date,
input#name,
input#subject,
input.button,
textarea#review{
	width:100%;
	padding:6px;
	font-size:16px;
	box-sizing:border-box;
}

 input#subject{
	 margin-top:18px;
 }
 input#name,
textarea#review,
input.button{
	margin-top:6px;
}
#captchaWrapper{
	overflow:hidden;
	width:275px;

	
}
 .g-recaptcha{
	 transform:scale(0.78)
}