.rating-box {
  color: #f0f0f0;
  /*text-shadow: 0px 1px 10px black;*/
  margin: 3rem auto;
  height: 3rem;
  width: 25rem;
}

.rating-star {
  font-size: 3rem;
  width: 3rem;
  height: 3rem;
  /*padding: 0 2rem;*/
  position: relative;
  display: block;
  float: left;
}

.full-star:before {
  color: #f2b01e;
  content: "\2605";
  position: absolute;
  left: 0;
  overflow: hidden;
}

.empty-star:before {
  content: "\2605";
  position: absolute;
  left: 0;
  overflow: hidden;
}

.half-star:before {
  color: #f2b01e;
  content: "\2605";
  width: 50%;
  position: absolute;
  left: 0;
  overflow: hidden;
}

.half-star:after {
  content: "\2605";
  position: absolute;
  left: 1.5rem;
  width: 50%;
  text-indent: -1.5rem;
  overflow: hidden;
}