
/*///////////////////////////////////////////////////
    // Skill Bars \\ 
///////////////////////////////////////////////////*/
.skillBar {
    margin-bottom:26px;
    margin-bottom: 1.66em;
  }
  .skillBarContainer {
    width: 100%;
    height:26px;
    height: 1.66em;
    background: #e6eae3;
    background: rgb(30,130,103);
    background: rgba(30,130,103,.2);
    overflow: hidden;
    border-radius:5px;
  }
  .skillBarValue {
    height: 1.66em;
    float: left;
    background:#1e8267;
    background: rgb(30,130,103);
    background: rgba(30,130,103,.75);
  }
  /* Allowed values for the css skill bars */
  .value-00  { width: 0;    }
  .value-10  { width: 10%;  }
  .value-20  { width: 20%;  }
  .value-30  { width: 30%;  }
  .value-40  { width: 40%;  }
  .value-50  { width: 50%;  }
  .value-60  { width: 60%;  }
  .value-70  { width: 70%;  }
  .value-80  { width: 80%;  }
  .value-90  { width: 90%;  }
  .value-100 { width: 100%; }
  
  /*///////////////////////////////////////////////////
      // Animation \\ 
  ///////////////////////////////////////////////////*/
  @-webkit-keyframes slideIn {
    0% { width: 0; }
    25% { width:100%; }
    100% { width: normal; }
  }
  @-moz-keyframes slideIn {
    0% { width: 0; }
    25% { width:100%; }
    100% { width: normal; }
  }
  @-ms-keyframes slideIn {
    0% { width: 0; }
    25% { width:100%; }
    100% { width: normal; }
  }
  @-o-keyframes slideIn {
    0% { width: 0; }
    25% { width:100%; }
    100% { width: normal; }
  }
  @keyframes slideIn {
    0% { width: 0; }
    25% { width:100%; }
    100% { width: normal; }
  }
  .skillBarValue {
    -webkit-animation: slideIn 2s;
    -moz-animation: slideIn 2s;
    -o-animation: slideIn 2s;
    animation: slideIn 2s;
  }