.skill-col h2 {
  font-size: 2.7em;
  font-weight: normal;
  padding: 10px 0 16px 0;
  margin: 0 0 30px;
  text-align:center;
  background:#000;
  border-radius:2px;
}
.skill-col h2.Programming {
  border: 1px solid #2187e7;  
  box-shadow: 0px 0px 50px -8px #2187e7;
  color:#2187e7;
  text-shadow: 1px 1px 5px #000, 0 0 10px #2187e7, 0 0 20px #2187e7;
}
.skill-col h2.tools {
  border: 1px solid #9ACD32;  
  box-shadow: 0px 0px 50px -8px #9ACD32;
  color: #9ACD32;
  text-shadow: 1px 1px 5px #000, 0 0 10px #9ACD32, 0 0 20px #9ACD32;
}

.skill-col h2.techniques {
  border: 1px solid #FF4500;  
  box-shadow: 0px 0px 50px -8px #FF4500;
  color: #FF4500;
  text-shadow: 1px 1px 5px #000, 0 0 10px #FF4500, 0 0 20px #FF4500;
}

.skill-col {
  width: 23%;
  margin: 0 5%;
  position: relative;
  float: left;
  font-size: 12px;
  line-height: 2em;
  padding: 5% 0;
} 
/*.skill-col { width:101%; }*/
.skill { 
  list-style:none; 
  padding-top:30px;
}

.skill li { 
  margin-bottom:70px; 
  background:#030303; 
  height:6px; 
  border-radius:3px; 
  border-left:1px solid #111; 
  border-top:1px solid #111; 
  border-right:1px solid #333; 
  border-bottom:1px solid #333;  
}

.skill li em { 
  position:relative; 
  font-style: normal;
  font-size: 14px;
  text-align: center;
  color: var(--first);
  top:-28px;
}

.blueline { 
  height: 3px; 
  margin: 2px 0; 
  background: #2187e7; 
  position: absolute;
  box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.6);
}
.greenline { 
  height: 3px; 
  margin: 2px 0; 
  background: #9ACD32; 
  position: absolute;
  box-shadow: 0px 0px 10px 1px rgba(173, 255, 47,0.4);
}
.redline { 
  height: 3px; 
  margin: 2px 0; 
  background: #FF4500; 
  position: absolute;
  box-shadow: 0px 0px 10px 1px rgba(255, 69, 0,0.4);
}

.titulo      { opacity:1;  animation:titulo 5s ease-out;     }

/*programacion*/
.pct100 { width:100%;  animation:pct100 2s ease-out;}
.pct95  { width:95%;  animation:pct95 2s ease-out;}
.pct90  { width:90%;  animation:php90 2s ease-out;}
.pct85  { width:85%;  animation:pct85 2s ease-out;}
.pct80  { width:80%;  animation:pct80 2s ease-out;}
.pct75  { width:75%;  animation:pct75 2s ease-out;}
.pct70  { width:70%;  animation:pct70 2s ease-out;}
.pct65  { width:65%;  animation:pct65 2s ease-out;}
.pct60  { width:60%;  animation:pct60 2s ease-out;}
.pct55  { width:55%;  animation:pct55 2s ease-out;}
.pct50  { width:50%;  animation:pct50 2s ease-out;}
.pct45  { width:45%;  animation:pct45 2s ease-out;}
.pct40  { width:40%;  animation:pct40 2s ease-out;}
.pct35  { width:35%;  animation:pct35 2s ease-out;}
.pct30  { width:30%;  animation:pct30 2s ease-out;}
.pct25  { width:25%;  animation:pct25 2s ease-out;}
.pct20  { width:20%;  animation:pct20 2s ease-out;}
.pct15  { width:15%;  animation:pct15 2s ease-out;}
.pct10  { width:10%;  animation:pct10 2s ease-out;}
.pct5  { width:5%;  animation:pct5 2s ease-out;}
.pct0  { width:0%;  animation:pct0 2s ease-out;}


@keyframes titulo      { 0% { opacity:0; } 100% { opacity:1; }  }

/*programacion*/
@keyframes python        { 0% { width:0px; } 100% { width:95%; }  }
@keyframes clang         { 0% { width:0px; } 100% { width:85%; }  }
@keyframes php         { 0% { width:0px; } 100% { width:70%; }  }
@keyframes javascript  { 0% { width:0px; } 100% { width:50%; }  }
@keyframes jquery      { 0% { width:0px; } 100% { width:30%; }  }

/*plataformas*/
@keyframes wordpress   { 0% { width:0px; } 100% { width:80%; }  }
@keyframes prestashop  { 0% { width:0px; } 100% { width:60%; }  }
@keyframes joomla      { 0% { width:0px; } 100% { width:40%; }  }
@keyframes blogger     { 0% { width:0px; } 100% { width:70%; }  }
@keyframes tridion      { 0% { width:0px; } 100% { width:60%; }  }

/*programas*/
@keyframes dreamweaver { 0% { width:0px; } 100% { width:90%; }  }
@keyframes illustrator { 0% { width:0px; } 100% { width:30%; }  }
@keyframes photoshop   { 0% { width:0px; } 100% { width:70%; }  }
@keyframes premiere    { 0% { width:0px; } 100% { width:50%; }  }
@keyframes flash       { 0% { width:0px; } 100% { width:60%; }  }

/*media queries*/
@media (max-width: 1200px){
  h2 {font-size:2.2em;}
}
@media (max-width: 980px){
  h2 {font-size:1.8em;}
}
@media (max-width: 767px){
  h2 {font-size:1.4em;}
}
@media (max-width: 580px){
  h2 {font-size:1.1em; padding:10px 0;}
}
@media (max-width: 480px){ 
  h2 {font-size:2.2em; padding: 10px 0 15px 0;}
  .skill-col {width: 90%;}
}

body #bmc-iframe {  
    height: 80% !important;
    width: 20% !important;
    min-width: 300px !important;
    min-height: 500px !important;
    max-width: 420px;
    max-height: 620px;  }