.event_star { cursor: pointer }

.star_in,
.star_in i {
  display: inline-block;
  height: 17px;
  background-image: url('../img/start.png');
  background-repeat: no-repeat;
  font-size: 0
}

.star_in {
  background-position: 0 0;
  width: 85px
}

.star_in i {
  background-position: 0 -17px;
  overflow: hidden
}

.star_in[data-starnum="0"] i { width: 0 }
.star_in[data-starnum="0.1"] i { width: 1.7px }
.star_in[data-starnum="0.2"] i { width: 3.4px }
.star_in[data-starnum="0.3"] i { width: 5.1px }
.star_in[data-starnum="0.4"] i { width: 6.8px }
.star_in[data-starnum="0.5"] i { width: 8.5px }
.star_in[data-starnum="0.6"] i { width: 10.2px }
.star_in[data-starnum="0.7"] i { width: 11.9px }
.star_in[data-starnum="0.8"] i { width: 13.6px }
.star_in[data-starnum="0.9"] i { width: 15.3px }

.star_in[data-starnum="1.0"] i { width: 17px }
.star_in[data-starnum="1.1"] i { width: 18.7px }
.star_in[data-starnum="1.2"] i { width: 20.4px }
.star_in[data-starnum="1.3"] i { width: 22.1px }
.star_in[data-starnum="1.4"] i { width: 23.8px }
.star_in[data-starnum="1.5"] i { width: 25.5px }
.star_in[data-starnum="1.6"] i { width: 27.2px }
.star_in[data-starnum="1.7"] i { width: 28.9px }
.star_in[data-starnum="1.8"] i { width: 30.6px }
.star_in[data-starnum="1.9"] i { width: 32.3px }

.star_in[data-starnum="2.0"] i { width: 34px }
.star_in[data-starnum="2.1"] i { width: 35.7px }
.star_in[data-starnum="2.2"] i { width: 37.4px }
.star_in[data-starnum="2.3"] i { width: 39.1px }
.star_in[data-starnum="2.4"] i { width: 40.8px }
.star_in[data-starnum="2.5"] i { width: 42.5px }
.star_in[data-starnum="2.6"] i { width: 44.2px }
.star_in[data-starnum="2.7"] i { width: 45.9px }
.star_in[data-starnum="2.8"] i { width: 47.6px }
.star_in[data-starnum="2.9"] i { width: 49.3px }

.star_in[data-starnum="3.0"] i { width: 51px }
.star_in[data-starnum="3.1"] i { width: 52.7px }
.star_in[data-starnum="3.2"] i { width: 54.4px }
.star_in[data-starnum="3.3"] i { width: 56.1px }
.star_in[data-starnum="3.4"] i { width: 57.8px }
.star_in[data-starnum="3.5"] i { width: 59.5px }
.star_in[data-starnum="3.6"] i { width: 61.2px }
.star_in[data-starnum="3.7"] i { width: 62.9px }
.star_in[data-starnum="3.8"] i { width: 64.6px }
.star_in[data-starnum="3.9"] i { width: 66.3px }

.star_in[data-starnum="4.0"] i { width: 68px }
.star_in[data-starnum="4.1"] i { width: 69.7px }
.star_in[data-starnum="4.2"] i { width: 71.4px }
.star_in[data-starnum="4.3"] i { width: 73.1px }
.star_in[data-starnum="4.4"] i { width: 74.8px }
.star_in[data-starnum="4.5"] i { width: 76.5px }
.star_in[data-starnum="4.6"] i { width: 78.2px }
.star_in[data-starnum="4.7"] i { width: 79.9px }
.star_in[data-starnum="4.8"] i { width: 81.6px }
.star_in[data-starnum="4.9"] i { width: 83.3px }

.star_in[data-starnum="5.0"] i { width: 85px }


.star_animate i {
  -webkit-transition: width .3s;
  transition: width .3s
}

.star_big,
.star_big i {
  display: inline-block;
  height: 29px;
  background-image: url('../img/start.png');
  background-repeat: no-repeat;
  font-size: 0
}

.star_big {
  background-position: 0 -62px;
  width: 145px
}

.star_big i {
  background-position: 0 -91px;
  overflow: hidden
}

.star_big[data-starnum="0"] i { width: 0 }
.star_big[data-starnum="0.1"] i { width: 2.9px }
.star_big[data-starnum="0.2"] i { width: 5.8px }
.star_big[data-starnum="0.3"] i { width: 8.7px }
.star_big[data-starnum="0.4"] i { width: 11.6px }
.star_big[data-starnum="0.5"] i { width: 14.5px }
.star_big[data-starnum="0.6"] i { width: 17.4px }
.star_big[data-starnum="0.7"] i { width: 20.3px }
.star_big[data-starnum="0.8"] i { width: 23.2px }
.star_big[data-starnum="0.9"] i { width: 26.1px }

.star_big[data-starnum="1.0"] i { width: 29px }
.star_big[data-starnum="1.1"] i { width: 31.9px }
.star_big[data-starnum="1.2"] i { width: 34.8px }
.star_big[data-starnum="1.3"] i { width: 37.7px }
.star_big[data-starnum="1.4"] i { width: 40.6px }
.star_big[data-starnum="1.5"] i { width: 43.5px }
.star_big[data-starnum="1.6"] i { width: 46.4px }
.star_big[data-starnum="1.7"] i { width: 49.3px }
.star_big[data-starnum="1.8"] i { width: 52.2px }
.star_big[data-starnum="1.9"] i { width: 55.1px }

.star_big[data-starnum="2.0"] i { width: 58px }
.star_big[data-starnum="2.1"] i { width: 60.9px }
.star_big[data-starnum="2.2"] i { width: 63.8px }
.star_big[data-starnum="2.3"] i { width: 66.7px }
.star_big[data-starnum="2.4"] i { width: 69.6px }
.star_big[data-starnum="2.5"] i { width: 72.5px }
.star_big[data-starnum="2.6"] i { width: 75.4px }
.star_big[data-starnum="2.7"] i { width: 78.3px }
.star_big[data-starnum="2.8"] i { width: 81.2px }
.star_big[data-starnum="2.9"] i { width: 84.1px }

.star_big[data-starnum="3.0"] i { width: 87px }
.star_big[data-starnum="3.1"] i { width: 89.9px }
.star_big[data-starnum="3.2"] i { width: 92.8px }
.star_big[data-starnum="3.3"] i { width: 95.7px }
.star_big[data-starnum="3.4"] i { width: 98.6px }
.star_big[data-starnum="3.5"] i { width: 101.5px }
.star_big[data-starnum="3.6"] i { width: 104.4px }
.star_big[data-starnum="3.7"] i { width: 107.3px }
.star_big[data-starnum="3.8"] i { width: 110.2px }
.star_big[data-starnum="3.9"] i { width: 113.1px }

.star_big[data-starnum="4.0"] i { width: 116px }
.star_big[data-starnum="4.1"] i { width: 118.9px }
.star_big[data-starnum="4.2"] i { width: 121.8px }
.star_big[data-starnum="4.3"] i { width: 124.7px }
.star_big[data-starnum="4.4"] i { width: 127.6px }
.star_big[data-starnum="4.5"] i { width: 130.5px }
.star_big[data-starnum="4.6"] i { width: 133.4px }
.star_big[data-starnum="4.7"] i { width: 136.3px }
.star_big[data-starnum="4.8"] i { width: 139.2px }
.star_big[data-starnum="4.9"] i { width: 142.1px }

.star_big[data-starnum="5.0"] i { width: 145px }

.star_small,
.star_small i {
  display: inline-block;
  height: 14px;
  background-image: url('../img/start.png');
  background-repeat: no-repeat;
  font-size: 0
}

.star_small {
  background-position: 0 -34px;
  width: 70px
}

.star_small i {
  background-position: 0 -48px;
  overflow: hidden
}

.star_small[data-starnum="0"] i { width: 0 }
.star_small[data-starnum="0.1"] i { width: 1.4px }
.star_small[data-starnum="0.2"] i { width: 2.8px }
.star_small[data-starnum="0.3"] i { width: 4.2px }
.star_small[data-starnum="0.4"] i { width: 5.6px }
.star_small[data-starnum="0.5"] i { width: 7px }
.star_small[data-starnum="0.6"] i { width: 8.4px }
.star_small[data-starnum="0.7"] i { width: 9.8px }
.star_small[data-starnum="0.8"] i { width: 11.2px }
.star_small[data-starnum="0.9"] i { width: 12.6px }

.star_small[data-starnum="1.0"] i { width: 14px }
.star_small[data-starnum="1.1"] i { width: 15.4px }
.star_small[data-starnum="1.2"] i { width: 16.8px }
.star_small[data-starnum="1.3"] i { width: 18.2px }
.star_small[data-starnum="1.4"] i { width: 19.6px }
.star_small[data-starnum="1.5"] i { width: 21px }
.star_small[data-starnum="1.6"] i { width: 22.4px }
.star_small[data-starnum="1.7"] i { width: 23.8px }
.star_small[data-starnum="1.8"] i { width: 25.2px }
.star_small[data-starnum="1.9"] i { width: 26.6px }

.star_small[data-starnum="2.0"] i { width: 28px }
.star_small[data-starnum="2.1"] i { width: 29.4px }
.star_small[data-starnum="2.2"] i { width: 30.8px }
.star_small[data-starnum="2.3"] i { width: 32.2px }
.star_small[data-starnum="2.4"] i { width: 33.6px }
.star_small[data-starnum="2.5"] i { width: 35px }
.star_small[data-starnum="2.6"] i { width: 36.4px }
.star_small[data-starnum="2.7"] i { width: 37.8px }
.star_small[data-starnum="2.8"] i { width: 39.2px }
.star_small[data-starnum="2.9"] i { width: 40.6px }

.star_small[data-starnum="3.0"] i { width: 42px }
.star_small[data-starnum="3.1"] i { width: 43.4px }
.star_small[data-starnum="3.2"] i { width: 44.8px }
.star_small[data-starnum="3.3"] i { width: 46.2px }
.star_small[data-starnum="3.4"] i { width: 47.6px }
.star_small[data-starnum="3.5"] i { width: 49px }
.star_small[data-starnum="3.6"] i { width: 50.4px }
.star_small[data-starnum="3.7"] i { width: 51.8px }
.star_small[data-starnum="3.8"] i { width: 53.2px }
.star_small[data-starnum="3.9"] i { width: 54.6px }

.star_small[data-starnum="4.0"] i { width: 56px }
.star_small[data-starnum="4.1"] i { width: 57.4px }
.star_small[data-starnum="4.2"] i { width: 58.8px }
.star_small[data-starnum="4.3"] i { width: 60.2px }
.star_small[data-starnum="4.4"] i { width: 61.6px }
.star_small[data-starnum="4.5"] i { width: 63px }
.star_small[data-starnum="4.6"] i { width: 64.4px }
.star_small[data-starnum="4.7"] i { width: 65.8px }
.star_small[data-starnum="4.8"] i { width: 67.2px }
.star_small[data-starnum="4.9"] i { width: 68.6px }

.star_small[data-starnum="5"] i { width: 70px }


@media(max-width: 567px){
  .star_big{
    transform: scale(0.6) translate(50px, -10px);
  }
}