/* ******************************************************
	Animated Skills Bar
*********************************************************/

#codeconSkills {
    font-size: 20px;
    height: auto;
    margin: 0 auto;
    padding: 0px;
    width: 85%;
    border-radius: 15px;
}

.codeconSkillbar {
    width: 90%;
    height: 30px;
    position: relative;
    background: rgba(17, 17, 17, .3);
    margin: 20px auto;
    border-radius: 15px;
}
#codeconHTML {
    width: 80%;
    animation-duration: : Animate-HTML 7s;
    -webkit-animation: Animate-HTML 7s;
    -moz-animation: Animate-HTML 7s;
    -o-animation: Animate-HTML 7s;
    height: 30px;
    position: absolute;
    background-color: #404040;
    border-radius: 15px;
}
@keyframes Animate-HTML {
    from {
    width: 0px;
}
to {
    width: 80%}
}@-webkit-keyframes Animate-HTML {
    from {
    width: 0px;
}
to {
    width: 80%}
}@-moz-keyframes Animate-HTML {
    from {
    width: 0px;
}
to {
    width: 80%}
}@-o-keyframes Animate-HTML {
    from {
    width: 1px;
}
to {
    width: 80%}
}
#codeconCSS {
    animation: Animate-CSS 5s;
    -webkit-animation: Animate-CSS 5s;
    -moz-animation: Animate-CSS 5s;
    -o-animation: Animate-CSS 5s;
    width: 70%;
    height: 30px;
    position: absolute;
    background-color: #404040;
    border-radius: 15px;
}
@keyframes Animate-CSS {
    from {
    width: 0px;
}
to {
    width: 70%}
}@-webkit-keyframes Animate-CSS {
    from {
    width: 0px;
}
to {
    width: 70%}
}@-moz-keyframes Animate-CSS {
    from {
    width: 0px;
}
to {
    width: 70%}
}@-o-keyframes Animate-CSS {
    from {
    width: 0px;
}
to {
    width: 70%}
}
#codeconjQuery {
    animation: Animate-jQuery 5s;
    -webkit-animation: Animate-jQuery 5s;
    -moz-animation: Animate-jQuery 5s;
    -o-animation: Animate-jQuery 5s;
    width: 40%;
    height: 30px;
    position: absolute;
    background-color: #404040;
    border-radius: 15px;
}
@keyframes Animate-jQuery {
    from {
    width: 0px;
}
to {
    width: 40%}
}@-webkit-keyframes Animate-jQuery {
    from {
    width: 0px;
}
to {
    width: 40%}
}@-moz-keyframes Animate-jQuery {
    from {
    width: 0px;
}
to {
    width: 40%}
}@-o-keyframes Animate-jQuery {
    from {
    width: 0px;
}
to {
    width: 40%}
}
#codeconJS {
    animation: Animate-JS 4s;
    -webkit-animation: Animate-JS 4s;
    -moz-animation: Animate-JS 4s;
    -o-animation: Animate-JS 4s;
    width: 50%;
    height: 30px;
    position: absolute;
    background-color: #404040;
    border-radius: 15px;
}
@keyframes Animate-JS {
    from {
    width: 0px;
}
to {
    width: 50%}
}@-webkit-keyframes Animate-JS {
    from {
    width: 0px;
}
to {
    width: 50%}
}@-moz-keyframes Animate-JS {
    from {
    width: 0px;
}
to {
    width: 50%}
}@-o-keyframes Animate-JS {
    from {
    width: 0px;
}
to {
    width: 50%}
}

#codeconC {
    animation: Animate-C 4s;
    -webkit-animation: Animate-C 4s;
    -moz-animation: Animate-C 4s;
    -o-animation: Animate-C 4s;
    width: 30%;
    height: 30px;
    position: absolute;
    background-color: #404040;
    border-radius: 15px;
}
@keyframes Animate-C {
    from {
    width: 0px;
}
to {
    width: 30%}
}@-webkit-keyframes Animate-C {
    from {
    width: 0px;
}
to {
    width: 30%}
}@-moz-keyframes Animate-C {
    from {
    width: 0px;
}
to {
    width: 30%}
}@-o-keyframes Animate-C {
    from {
    width: 0px;
}
to {
    width: 30%}
}

#codeconPHP {
    animation: Animate-PHP 4s;
    -webkit-animation: Animate-PHP 4s;
    -moz-animation: Animate-PHP 4s;
    -o-animation: Animate-PHP 4s;
    width: 50%;
    height: 30px;
    position: absolute;
    background-color: #404040;
    border-radius: 15px;
}
@keyframes Animate-PHP {
    from {
    width: 0px;
}
to {
    width: 50%}
}@-webkit-keyframes Animate-PHP {
    from {
    width: 0px;
}
to {
    width: 50%}
}@-moz-keyframes Animate-PHP {
    from {
    width: 0px;
}
to {
    width: 50%}
}@-o-keyframes Animate-PHP {
    from {
    width: 0px;
}
to {
    width: 50%}
}
#codeconSQL {
    animation: Animate-HTML 5s;
    -webkit-animation: Animate-HTML 5s;
    -moz-animation: Animate-HTML 5s;
    -o-animation: Animate-HTML 5s;
    width: 80%;
    height: 30px;
    position: absolute;
    background-color: #404040;
    border-radius: 15px;
}
@keyframes Animate-SQL {
    from {
    width: 1px;
}
to {
    width: 40%}

to {
    width: 80%}
}@-webkit-keyframes Animate-SQL {
    from {
    width: 1px;
}
to {
    width: 80%}
}@-moz-keyframes Animate-SQL {
    from {
    width: 1px;
}
to {
    width: 80%}
}@-o-keyframes Animate-SQL {
    from {
    width: 1px;
}
to {
    width: 80%}
}

.codeconSkillArea {
    z-index: 1;
    float: left;
    //position: absolute;
    margin-top: 7px;
    margin-left: 15px;
    text-shadow: none;
    color: #fff;
    //font-family: Lato-Regular, sans-serif;
    font-size: 18px;
}
.PercentText {
    z-index: 3;
    padding-right: 15px;
    margin-top: 7px;
    float: right;
    text-shadow: none;
    color: #fff;
    //font-family: Lato-Regular, sans-serif;
    font-size: 18px;
}