.skills-bar-container {
  position: relative;
  width: 80%;
 
  list-style: none;
}
.skills-bar-container li {
  position: relative;
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}
.skills-bar-container li .progressbar-title {
  color: #000;
}
.skills-bar-container li .progressbar-title h3 {
  display: inline-block;
}
.skills-bar-container li .progressbar-title .percent {
  position: absolute;
  right: 5px;
}
.skills-bar-container li .bar-container {
  background: #555;
  position: relative;
  width: 100%;
  height: 5px;
  margin-top: 5px;
  display: block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}
.skills-bar-container li .bar-container .progressbar {
  position: absolute;
  width: 0%;
  height: 100%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.skills-bar-container li .bar-container #progress-html {
  -webkit-animation-name: progress-html;
  animation-name: progress-html;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.skills-bar-container li .bar-container #progress-css {
  -webkit-animation-name: progress-css;
  animation-name: progress-css;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}
.skills-bar-container li .bar-container #progress-javascript {
  -webkit-animation-name: progress-javascript;
  animation-name: progress-javascript;
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
}
.skills-bar-container li .bar-container #progress-php {
  -webkit-animation-name: progress-php;
  animation-name: progress-php;
  -webkit-animation-delay: 2.8s;
  animation-delay: 2.8s;
}
.skills-bar-container li .bar-container #progress-angular {
  -webkit-animation-name: progress-angular;
  animation-name: progress-angular;
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

.progressred {
  background-color: #c0392b;
}

.progressblue {
  background-color: #1199ff;
}

.progresspurple {
  background-color: #9b59b6;
}

.progressorange {
  background-color: #ffa500;
}

.progressgreen {
  background-color: #27ae60;
}

@-webkit-keyframes progress-html {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes progress-css {
  0% {
    width: 0%;
  }
  100% {
    width: 90%;
  }
}
@-webkit-keyframes progress-javascript {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}
@-webkit-keyframes progress-php {
  0% {
    width: 0%;
  }
  100% {
    width: 55%;
  }
}
@-webkit-keyframes progress-angular {
  0% {
    width: 0%;
  }
  100% {
    width: 65%;
  }
}
@-moz-keyframes progress-html {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes progress-css {
  0% {
    width: 0%;
  }
  100% {
    width: 90%;
  }
}
@-moz-keyframes progress-javascript {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}
@-moz-keyframes progress-php {
  0% {
    width: 0%;
  }
  100% {
    width: 55%;
  }
}
@-moz-keyframes progress-angular {
  0% {
    width: 0%;
  }
  100% {
    width: 65%;
  }
}
@keyframes progress-html {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes progress-css {
  0% {
    width: 0%;
  }
  100% {
    width: 90%;
  }
}
@keyframes progress-javascript {
  0% {
    width: 0%;
  }
  100% {
    width: 70%;
  }
}
@keyframes progress-php {
  0% {
    width: 0%;
  }
  100% {
    width: 55%;
  }
}
@keyframes progress-angular {
  0% {
    width: 0%;
  }
  100% {
    width: 65%;
  }
}


.rating {
   margin-top:30px;
  
  float: left;
  width: 40%;
  margin-right:10px;
  text-align: center;
}

.rating-num {
  color: #333333;
  font-size: 50px;
  font-weight: 100;
}

.rating-stars {
  font-size: 1.5em;
  color: #E3E3E3;
 
}
.rating-stars .active {
  color: #737373;
}
.inner {

  background-color: white;
  overflow: hidden;
  position: relative; 
   border: 1px #E6E6E6 solid;
   border-radius: 3px;
}


.rating-users {
  font-size: 12px;
  color:#333333;
}

.histo {
 margin-top:30px;
  float: left;
  width: 55%;
  font-size: 13px;
  color:#333333;
}

.histo-star {
  float: left;
  padding: 3px;

}

.histo-rate {
  width: 100%;
 display:block;
  clear: both;
}

.bar-block {
 
  color: black;
   
  
  float: left;
  width: 75%;
 
}

.bar {
padding-left:10px;
 text-align:left;
   height:25px;
  display: block;
 
}

#bar-five {
 
  background-color: #9FC05A;
}

#bar-four {
 
  background-color: #ADD633;
}

#bar-three {
 
  background-color: #FFD834;
}

#bar-two {
 
  background-color: #FFB234;
}

#bar-one {
 
  background-color: #FF8B5A;
}



.rate {
padding:15px;
  height: 30px;
}

.rate:not(:checked) > input {

 display:none;
}

.rate:not(:checked) > label {


  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 35px;
  color: #ccc;
}

.rate:not(:checked) > label:before { content: '★ '; }

.rate > input:checked ~ label { color: #ffc700; }

.rate:not(:checked) > label:hover, .rate:not(:checked) > label:hover ~ label { color: #deb217; }

.rate > input:checked + label:hover, .rate > input:checked + label:hover ~ label, .rate > input:checked ~ label:hover, .rate > input:checked ~ label:hover ~ label, .rate > label:hover ~ input:checked ~ label { color: #c59b08; }