/*----------------sprite with stars-----------------*/

.rating {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.review-stars input {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;

  width: 22px;
  height: 20px;

  position: absolute;
  top: 0;
  z-index: 0;
}

.review-stars input:checked ~ label {
  background-position: 0 -20px;
  height: 20px;
  width: 22px;
}

.review-stars label {
  background-position: 0 0;
  height: 20px;
  width: 21px;
  float: right;
  cursor: pointer;
  margin-right: 10px;

  position: relative;
  z-index: 1;
}

.review-stars label:hover,
.review-stars label:hover ~ label {
  background-position: 0 -20px;
  height: 20px;
  width: 22px;
}

.review-stars input:checked ~ label,
.review-stars label,
.review-stars label:hover,
.review-stars label:hover ~ label {
  background: url('/static/img/star.png') no-repeat;
}

.small .review-stars input:checked ~ label,
.small .review-stars label,
.small .review-stars label:hover,
.small .review-stars label:hover ~ label {
  background: url('/static/img/star-small.png') no-repeat;
}

.review-stars {
  /*fix floating problems*/
  overflow: hidden;
  zoom: 1;
  /*end of fix floating problems*/

  position: relative;
  float: left;
}

.review-stars input {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;

  width: 22px;
  height: 20px;

  position: absolute;
  top: 0;
  z-index: 0;
}

.small .review-stars input {
  width: 11px;
  height: 10px;
}

.review-stars input:checked ~ label {
  background-position: 0 -20px;
  height: 20px;
  width: 22px;
}

.small .review-stars input:checked ~ label {
  background-position: 0 -10px;
  height: 10px;
  width: 11px;
}

.review-stars label {
  background-position: 0 0;
  height: 20px;
  width: 21px;
  float: right;
  cursor: pointer;
  margin-right: 10px;
  position: relative;
  z-index: 1;
}

.review-stars label:hover,
.review-stars label:hover ~ label {
  background-position: 0 -20px;
  height: 20px;
  width: 22px;
}

.small .review-stars label {
  background-position: 0 0;
  height: 10px;
  width: 11px;
  margin-right: 2px;
  margin-bottom: 0;
}

.small .review-stars label:hover,
.small .review-stars label:hover ~ label {
  background-position: 0 -10px;
  height: 10px;
  width: 11px;
}

.review-stars #star-0 {
  left: 0px;
}
.review-stars #star-1 {
  left: 0px;
}
.review-stars #star-2 {
  left: 32px;
}
.review-stars #star-3 {
  left: 64px;
}
.review-stars #star-4 {
  left: 96px;
}
.review-stars #star-5 {
  left: 128px;
}

.small .review-stars #star-0 {
  left: 0px;
  top: 0px;
}
.small .review-stars #star-1 {
  left: 0px;
  top: 0px;
}
.small .review-stars #star-2 {
  left: 13px;
  top: 0px;
}
.small .review-stars #star-3 {
  left: 26px;
  top: 0px;
}
.small .review-stars #star-4 {
  left: 39px;
  top: 0px;
}
.small .review-stars #star-5 {
  left: 52px;
  top: 0px;
}