.rating {
    position: relative;
    display: inline-block;
    min-width: 2.25em;
    padding: 0.25em;
    margin: 1em;
    color: rgba(0,0,0,0.3);
    font-size: 300%;
    background: #eee;
/* 
    box-shadow:
      0 0 0 0.5em #fff,
      0 1.5em 0 0.5em #fff,
      0 2em 0.5em 0.25em rgba(0,0,0,0.8);
*/
    font-size: 120%;
    text-align: center;
    color:#000;
    cursor: pointer;
    transition: all 100ms;
  }
  
  .rating.hide { color: rgba(0,0,0,0); }
  
  .rating:after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    width: 0; height: 0;
    margin-left: -0.25em;
    border: 0.25em solid transparent;
    border-top-color: #eee;
    z-index:10000;
  }
  
  .rating:before {
    position: absolute;
    top: 100%; left: 0;
    width: 100%;
    padding: 0.25em;
    margin-top: 0.156em;
    color: #eb0;
    font-size: 120%;
    text-align: center;
    z-index:10000;
  }
  
  .user-rating {
    position: absolute; z-index: 1;
    top: 100%; left: 50%;
    width: 6.55em;
    padding: 0.4em;
    font-size: 120%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
    box-shadow: #000;
    opacity: 1;
    transform-origin: 50%;
    transform: translateX(-50%) scale(1);
    transition: all 300ms cubic-bezier(.07,.77,.46,1.47);
    list-style: none;

    z-index:10000;
  }
  
  .user-rating.animate {
      opacity: 0;
      transform: translateX(-50%) scale(0);
  }
  
  .user-rating li {
    float: right;
    width: 1.15em;
    color: #ddd;
  }
  
  .user-rating i { transition: all 100ms cubic-bezier(.07,.77,.46,1.47); }
  
  .user-rating li:hover,
  .user-rating li:hover ~ li { color: #eb0; }
  .user-rating li:hover i,
  .user-rating li:hover ~ li i { transform: scale(1.1); }
  .user-rating li:active i,
  .user-rating li:active ~ li i { transform: scale(0.9) }