@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700');

html {
  background: #f4f4f4;
}


.barra {
	font-size: 20px;
	margin-bottom: 25px;
	font-weight:normal;
	color: #FFF;
  }
h2 {
  font-size: 24px;
  margin-bottom: 25px;
  font-weight: 700;
}

.skills{
  width:inherit;
  position:relative;
  float:left;
  
  padding:30px 0;
  ul { 
    list-style-type: none; 
    padding-left: 0px!important;
    padding-top:30px;
    & > li { 
      margin-bottom:50px; 
      background:#dedede; 
      height:6px;
      & em {
        font-size: 18px;
        position:relative; 
        top:-30px;
		   color:#FFF ;
       font-style: normal;
      }
      & span { 
        height: inherit;
        background-color: #eeeeee;
        background: linear-gradient(90deg, #ff3333, #fa0015);
        position:absolute;
      }
    }
  }

  .nueve { 
    width:90%;  
    animation:html5 2s ease-out;
  }
  .ocho { 
    width:80%;
    animation:css3 2s ease-out; 
  }
  .siete{ 
    width:70%;  
    animation:js 2s ease-out;
  }
  .seis { 
    width:60%;  
    animation:jquery 2s ease-out;
  }
  .cinco { 
    width:50%;  
    animation:wordpress 2s ease-out;
  }
  .cien { 
    width:95%;  
    animation:html5 2s ease-out;
  }


  @keyframes html5 { 
    0%  { width:0px;} 
    100%{ width:90%;}  
  }
  @keyframes css3 {
    0%  { width:0px;} 
    100%{ width:80%;}  
  }
  @keyframes js {
    0%  { width:0px;}
    100%{ width:50%;}
  }
  @keyframes jquery {
    0%  { width:0px;}
    100%{ width:60%;}
  }
  @keyframes wordpress {
    0%  { width:0px;}
    100%{ width:50%;}
  }
  @keyframes magento {
    0%  { width:0px;}
    100%{ width:60%;}
  }
  @keyframes photoshop {
    0%  { width:0px;} 
    100%{ width:90%;}  
  }
  @keyframes illustrator {
    0%  { width:0px;} 
    100%{ width:80%;}  
  }
}