.wrapinmodal p {
  position: absolute;
  font: .8em sans-serif;
  top: 50%;
  left: 20px;
  margin: 0 auto;
  color: #000;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  letter-spacing: 1px;
}

.wrapinmodal {
  position: relative;
  width: 100%;
  font-size: 10px;
  color: whitesmoke;
  height: 15px;
  margin: 5px auto;
  padding: 0;
  background: #444;
  border-radius: 5px;
  -webkit-transition: .5s ease;
  -moz-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s .15s ease;
}
.wrapinmodal .textstar {
  position: fixed;
}

.wrapinmodal .bar {
  height: 15px;
  border-radius: 5px;
  transition: .25s ease;
}

/*.wrap:hover .bar {
  background: rgba(255,255,255, 1);
  cursor: pointer;
}

.wrap:hover {
  width: 600px;
  background: #555;
}
*/

.rating5 {
  width: <?=$reqPersenRating5."%"?>;
  background: steelblue;
  -webkit-animation: rating5 2.5s;
  -moz-animation: rating5 2.5s;
  -o-animation: rating5 2.5s;
  animation: rating5 2.5s;
}

.rating4 {
  width: <?=$reqPersenRating4."%"?>;
  background: gold;
  -webkit-animation: rating4 2s;
  -moz-animation: rating4 2s;
  -o-animation: rating4 2s;
  animation: rating4 2s;
}

.rating3 {
  width: <?=$reqPersenRating3."%"?>;
  background: #F1C;
  -webkit-animation: rating3 2.1s;
  -moz-animation: rating3 2.1s;
  -o-animation: rating3 2.1s;
  animation: rating3 2.1s;

}

.rating2 {
  width: <?=$reqPersenRating2."%"?>;
  background: crimson;
  -webkit-animation: rating2 1.8s;
  -moz-animation: rating2 1.8s;
  -o-animation: rating2 1.8s;
  animation: rating2 1.8s;
}

.rating1 {
  width: <?=$reqPersenRating1."%"?>;
  background: limegreen;
  -webkit-animation: rating1 2.9s;
  -moz-animation: rating1 2.9s;
  -o-animation: rating1 2.9s;
  animation: rating1 2.9s;
}

.wrapinmodal span {
  position: absolute;
  right: 0px;
  display: block;
  float: right;
  padding-right: 15px;
  color: #fbfbfb;
  line-height: 15px;
  -webkit-animation: span 2s 1.7s forwards;
  -moz-animation: span 2s 1.7s forwards;
  -o-animation: span 2s 1.7s forwards;
  animation: span 2s 1.7s forwards;
  opacity: 0;
}

.desc {
  display: none;
  box-sizing: border-box;
  padding: 10px;
  width: 600px;
  background: #333;
  border-radius: 10px;
  margin: 0 auto;
}

.desc p {
  color: white;
  margin: 0 auto;
}

/*          in view kritik saran        */

.wrap p {
  position: absolute;
  font: .8em sans-serif;
  top: 50%;
  left: 20px;
  margin: 0 auto;
  color: #000;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  letter-spacing: 1px;
}

.wrap {
  position: relative;
  width: 100%;
  height: 30px;
  margin: 25px auto;
  padding: 0;
  background: #444;
  border-radius: 5px;
  -webkit-transition: .5s ease;
  -moz-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s .15s ease;
}

.bar {
  height: 30px;
  border-radius: 5px;
  transition: .25s ease;
}

.wrap span {
  position: absolute;
  right: 0px;
  display: block;
  float: right;
  padding-right: 15px;
  color: #fbfbfb;
  line-height: 30px;
  -webkit-animation: span 2s 1.7s forwards;
  -moz-animation: span 2s 1.7s forwards;
  -o-animation: span 2s 1.7s forwards;
  animation: span 2s 1.7s forwards;
  opacity: 0;
}

  /* Keyframes

  -------------------- */
  
  /* rating5

  --------- */

  @-webkit-keyframes rating5 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating5."%"?>; }
  }
  @-moz-keyframes rating5 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating5."%"?>; }
  }
  @-o-keyframes rating5 {
    from { width:  0%; } 
    to { width:   <?=$reqPersenRating5."%"?>; }
  }
  @keyframes rating5 {
    from { width:  0%; } 
    to { width:   <?=$reqPersenRating5."%"?>; }
  }

  /* rating4
  --------- */
  @-webkit-keyframes rating4 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating4."%"?>; }
  }
  @-moz-keyframes rating4 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating4."%"?>; }
  }
  @-o-keyframes rating4 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating4."%"?>; }
  }
  @keyframes rating4 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating4."%"?>; }
  }

  /* rating3
  --------- */
  @-webkit-keyframes rating3 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating3."%"?>; }
  }
  @-moz-keyframes rating3 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating3."%"?>; }
  }
  @-o-keyframes rating3 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating3."%"?>; }
  }
  @keyframes rating3 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating3."%"?>; }
  }

  /* rating2
  --------- */
  @-webkit-keyframes rating2 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating2."%"?>; }
  }
  @-moz-keyframes rating2 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating2."%"?>; }
  }
  @-o-keyframes rating2 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating2."%"?>; }
  }
  @keyframes rating2 {
    from { width:  0%; }
    to   { width: <?=$reqPersenRating2."%"?>; }
  }

  /* rating1
  --------- */
  @-webkit-keyframes rating1{
    from { width:  0%; }
    to   { width: <?=$reqPersenRating1."%"?>; }
  }
  @-moz-keyframes rating1{
    from { width:  0%; }
    to   { width: <?=$reqPersenRating1."%"?>; }
  }
  @-o-keyframes rating1{
    from { width:  0%; }
    to   { width: <?=$reqPersenRating1."%"?>; }
  }
  @keyframes rating1{
    from { width:  0%; }
    to   { width: <?=$reqPersenRating1."%"?>; }
  }


  @-webkit-keyframes span {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @-moz-keyframes span {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @-o-keyframes span {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes span {
    from { opacity: 0; }
    to   { opacity: 1; }
  }