body {
  padding: 50px;
  background-image: url("../img/bg.jpg");

background-attachment: fixed;
}

.logo {
display: block;
margin-top: 5px;
width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.logo2 {
display: block;
margin-top: 20px;
width: 150px;
    margin-left: auto;
    margin-right: auto;
}


#content {
	min-width: 300px;
	max-width: 400px;
	margin: 0 auto;
	padding: 15px;
background: rgba(255,255,255,0.4);
-webkit-box-shadow: 10px 10px 50px #000000;
   -moz-box-shadow: 10px 10px 50px #000000;
   box-shadow: 10px 10px 50px #000000;
   
   webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
}

h1 {
font-family: Arial;
font-size: 25px;
text-align: center;
}

h2 {
font-family: Arial;
font-size: 20px;
text-align: center;
margin-bottom: 2px;
}

h3 {
	font-family: Arial;
font-size: 18px;
margin-bottom: 2px;
}

p {
font-family: Arial;
font-size: 14px;
text-align: center;
}

.texte {
margin: 0 auto;
min-width: 250px;
max-width: 380px;
}

textarea {
 width: 100%;
height: 100px;
}

input {
width: 100%;

}

input[type="submit"] {
width: 100%;
height: 40px;
font-family: Arial;
font-size: 15px;
cursor: pointer;
}

form .stars, form .stars2, form .stars3, form .stars4, form .stars5, form .stars6 {
  background: url("../img/stars.png") repeat-x 0 0;
  width: 150px;
  margin: 0 auto;
}


form .stars input[type="radio"], form .stars2 input[type="radio"], form .stars3 input[type="radio"], form .stars4 input[type="radio"], form .stars5 input[type="radio"], form .stars6 input[type="radio"] {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}


form .stars input[type="radio"].star-5:checked ~ span, form .stars2 input[type="radio"].star2-5:checked ~ span, form .stars3 input[type="radio"].star3-5:checked ~ span, form .stars4 input[type="radio"].star4-5:checked ~ span, form .stars5 input[type="radio"].star5-5:checked ~ span, form .stars6 input[type="radio"].star6-5:checked ~ span {
  width: 100%;
}
form .stars input[type="radio"].star-4:checked ~ span, form .stars2 input[type="radio"].star2-4:checked ~ span, form .stars3 input[type="radio"].star3-4:checked ~ span, form .stars4 input[type="radio"].star4-4:checked ~ span, form .stars5 input[type="radio"].star5-4:checked ~ span, form .stars6 input[type="radio"].star6-4:checked ~ span {
  width: 80%;
}
form .stars input[type="radio"].star-3:checked ~ span, form .stars2 input[type="radio"].star2-3:checked ~ span, form .stars3 input[type="radio"].star3-3:checked ~ span, form .stars4 input[type="radio"].star4-3:checked ~ span, form .stars5 input[type="radio"].star5-3:checked ~ span, form .stars6 input[type="radio"].star6-3:checked ~ span {
  width: 60%;
}
form .stars input[type="radio"].star-2:checked ~ span, form .stars2 input[type="radio"].star2-2:checked ~ span, form .stars3 input[type="radio"].star3-2:checked ~ span, form .stars4 input[type="radio"].star4-2:checked ~ span, form .stars5 input[type="radio"].star5-2:checked ~ span, form .stars6 input[type="radio"].star6-2:checked ~ span {
  width: 40%;
}
form .stars input[type="radio"].star-1:checked ~ span, form .stars2 input[type="radio"].star2-1:checked ~ span, form .stars3 input[type="radio"].star3-1:checked ~ span, form .stars4 input[type="radio"].star4-1:checked ~ span, form .stars5 input[type="radio"].star5-1:checked ~ span, form .stars6 input[type="radio"].star6-1:checked ~ span {
  width: 20%;
}


form .stars label, form .stars2 label, form .stars3 label, form .stars4 label, form .stars5 label, form .stars6 label {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0!important;
  padding: 0!important;
  text-indent: -999em;
  float: left;
  position: relative;
  z-index: 10;
  background: transparent!important;
  cursor: pointer;
}



form .stars label:hover ~ span, form .stars2 label:hover ~ span, form .stars3 label:hover ~ span, form .stars4 label:hover ~ span, form .stars5 label:hover ~ span, form .stars6 label:hover ~ span {
  background-position: 0 -30px;
}
form .stars label.star-5:hover ~ span, form .stars2 label.star2-5:hover ~ span, form .stars3 label.star3-5:hover ~ span, form .stars4 label.star4-5:hover ~ span, form .stars5 label.star5-5:hover ~ span, form .stars6 label.star6-5:hover ~ span {
  width: 100% !important;
}
form .stars label.star-4:hover ~ span, form .stars2 label.star2-4:hover ~ span, form .stars3 label.star3-4:hover ~ span, form .stars4 label.star4-4:hover ~ span, form .stars5 label.star5-4:hover ~ span, form .stars6 label.star6-4:hover ~ span {
  width: 80% !important;
}
form .stars label.star-3:hover ~ span, form .stars2 label.star2-3:hover ~ span, form .stars3 label.star3-3:hover ~ span, form .stars4 label.star4-3:hover ~ span, form .stars5 label.star5-3:hover ~ span, form .stars6 label.star6-3:hover ~ span {
  width: 60% !important;
}
form .stars label.star-2:hover ~ span, form .stars2 label.star2-2:hover ~ span, form .stars3 label.star3-2:hover ~ span, form .stars4 label.star4-2:hover ~ span, form .stars5 label.star5-2:hover ~ span, form .stars6 label.star6-2:hover ~ span {
  width: 40% !important;
}
form .stars label.star-1:hover ~ span, form .stars2 label.star2-1:hover ~ span, form .stars3 label.star3-1:hover ~ span, form .stars4 label.star4-1:hover ~ span, form .stars5 label.star5-1:hover ~ span, form .stars6 label.star6-1:hover ~ span {
  width: 20% !important;
}




form .stars span, form .stars2 span, form .stars3 span, form .stars4 span, form .stars5 span, form .stars6 span {
  display: block;
  width: 0;
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  background: url("../img/stars.png") repeat-x 0 -60px;
  -webkit-transition: -webkit-width 0.5s;
  -moz-transition: -moz-width 0.5s;
  -ms-transition: -ms-width 0.5s;
  -o-transition: -o-width 0.5s;
  transition: width 0.5s;
}