
.progress{
  height: 30px !important;
}

.prog_p {
  padding: 0 0 !important;
  margin: 0 0 !important;
  text-align:left;
  font-family: proxima nova light, Arial, Helvetica, sans-serif;
  font-size: 14px;
  /*color: #000000 !important;*/
  

}

/*.progress-bar{
  background-color: #ff4da6 !important;
}*/

.prog1{
  background-color: #55565b;
  
}

.prog2{
  background-color: #75767b;
}

.prog3{
  background-color: #828388;
}

.prog4{
  background-color: #919297;
}

.prog5{
  background-color: #ADAEB3;
}

/*.skills_sec {
  font-family: proxima nova light, Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: #000000 !important;
  font-weight: bold;
  padding-top: 4%;
  
}

.skills_container{
  margin-left: -20% !important;
}
*/


#data-beg{
  width:10%;
  -webkit-animation-name: bar_beg; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: bar_beg;
  animation-duration: 2s;
}


#data-fam{
  width:50%;
  -webkit-animation-name: bar_fam; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: bar_fam;
  animation-duration: 2s;
}
#data-int{
  width:70%;
  -webkit-animation-name: bar_int; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: bar_int;
  animation-duration: 2s;
}
#data-pro{
  width:80%;
  -webkit-animation-name: bar_pro; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: bar_pro;
  animation-duration: 2s;
}
#data-exp{
  width:100%;
  -webkit-animation-name: bar_exp; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  animation-name: bar_exp;
  animation-duration: 2s;
}



/*Expansion of bar chart bars*/
/* Safari 4.0 - 8.0 */
@-webkit-keyframes bar_exp {
    from {width: 0;}
    to {width: 100%;}
}

@-webkit-keyframes bar_pro {
    from {width: 0;}
    to {width: 80%;}
}

@-webkit-keyframes bar_int {
    from {border: 0;}
    to {border: 70%;}
}

@-webkit-keyframes bar_fam {
    from {width: 0;}
    to {width: 50%;}
}

@-webkit-keyframes bar_beg {
    from {width: 0;}
    to {width: 30%;}
}
/* Standard syntax */
@keyframes bar_exp{
    from {width: 0;}
    to {width: 100%;}
}

@keyframes bar_pro{
    from {width: 0;}
    to {width: 80%;}
}

@keyframes bar_int{
    from {border: 0;}
    to {border: 70%;}
}

@keyframes bar_fam{
    from {width: 0;}
    to {width: 50%;}
}

@keyframes bar_beg{
    from {width: 0;}
    to {width: 30%;}
}
