/*skill bar*/
.bodyfont{
font-family: Helvetica, Arial, sans-serif;
}
@keyframes load{
from {
width: 0%
}
}
@-webkit-keyframes load{
from {
width: 0%
}
}
@-moz-keyframes load{
from {
width: 0%
}
}
@-o-keyframes load{
from {
width: 0%
}
}
.bar{
background-color: #EEE;
padding: 2px;
border-radius: 15px;
margin-bottom: 5px;
font-size: 20px;
color: #FFF;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.bar::before{
content:  attr(data-skill);
background-color: #22252C;
display: inline-block;
padding: 5px 0 5px 10px;
border-radius: inherit;
animation: load 2s 0s;
-webkit-animation: load 2s 0s;
-moz-animation: load 2s 0s;
-o-animation: load 2s 0s;
}
.bar.front::before{
background-color: #22252C;
}
.bar.back::before{
background-color: #22252C;
}
.bar.learning::before{
width: calc(20% - 10px);
}
.bar.basic::before{
width: calc(40% - 10px);
}
.bar.intermediate::before{
width: calc(60% - 10px);
}
.bar.advanced::before{
width: calc(80% - 10px);
}
.bar.expert::before{
width: calc(80% - 10px);
}