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

.myskills {
    margin: auto;
    position: relative;
    padding: 30px 0;
    width: 70%;
    color: #ffffff;
}
.myskills ul {
    list-style: none;
    padding-top: 30px;
}
.myskills ul > li {
    margin-bottom: 50px;
    background: #ffffff;
    height: 6px;
}
.myskills ul > li em {
    font-size: 18px;
    position: relative;
    top: -30px;
}
.myskills ul > li span {
    height: inherit;
    background-color: #94c245;
    background: linear-gradient(90deg, #76b82a, #aecd60);
    position: absolute;
}
.myskills .html5 {
    width: 90%;
    animation: html5 2s ease-out;
}
.myskills .css3 {
    width: 80%;
    animation: css3 2s ease-out;
}
.myskills .js {
    width: 50%;
    animation: js 2s ease-out;
}
.myskills .jquery {
    width: 60%;
    animation: jquery 2s ease-out;
}
.myskills .wordpress {
    width: 50%;
    animation: wordpress 2s ease-out;
}
.myskills .magento {
    width: 60%;
    animation: magento 2s ease-out;
}
.myskills .photoshop {
    width: 90%;
    animation: photoshop 2s ease-out;
}
.myskills .illustrator {
    width: 80%;
    animation: illustrator 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%;
    }
}