*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,900);

/* ******************************************************
	Basic Styling
*********************************************************/


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

#codeconSkills {
    font-size: 20px;
    height: auto;


}
.codeconSkillbar {
    width: 90%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(17, 17, 17, 0.080);
    margin: 10px auto;
}

#codeconHTML {
    animation: Animate-HTML 4s;
    -webkit-animation: Animate-HTML 4s;
    -moz-animation: Animate-HTML 4s;
    -o-animation: Animate-HTML 4s;
    width: 70%;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: #ea8564;
}

@keyframes Animate-HTML {
    from {
    width: 10px;
    }
    to {
        width: 70%
    }

}

@-webkit-keyframes Animate-HTML {
    from {
    width: 10px;
    }
    to {
        width: 70%
    }
}

@-moz-keyframes Animate-HTML {
    from {
    width: 10px;
    }
    to {
        width: 70%
    }
}

@-o-keyframes Animate-HTML {
    from {
    width: 10px;
    }
    to {
        width: 70%
    }
}

#codeconCSS {
    animation: Animate-CSS 5s;
    -webkit-animation: Animate-CSS 5s;
    -moz-animation: Animate-CSS 5s;
    -o-animation: Animate-CSS 5s;
    width: 55%;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: #55a69f;
}
@keyframes Animate-CSS {
    from {
    width: 10px;
    }
    to {
        width: 55%
    }
}

@-webkit-keyframes Animate-CSS {
    from {
    width: 10px;
    }
    to {
        width: 55%
    }
}

@-moz-keyframes Animate-CSS {
    from {
    width: 10px;
    }
    to {
        width: 55%
    }
}

@-o-keyframes Animate-CSS {
    from {
    width: 10px;
    }
    to {
        width: 55%
    }
}

#codeconjQuery {
    animation: Animate-jQuery 5s;
    -webkit-animation: Animate-jQuery 5s;
    -moz-animation: Animate-jQuery 5s;
    -o-animation: Animate-jQuery 5s;
    width: 40%;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: #99856d;
}

@keyframes Animate-jQuery {
    from {
    width: 10px;
}
to {
    width: 40%}
}

@-webkit-keyframes Animate-jQuery {
    from {
    width: 10px;
}
to {
    width: 40%}
}

@-moz-keyframes Animate-jQuery {
    from {
    width: 10px;
}
to {
    width: 40%}
}

@-o-keyframes Animate-jQuery {
    from {
    width: 10px;
}
to {
    width: 40%}
}

#codeconJS {
    animation: Animate-JS 4s;
    -webkit-animation: Animate-JS 4s;
    -moz-animation: Animate-JS 4s;
    -o-animation: Animate-JS 4s;
    width: 15%;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: #c44e45;
}

@keyframes Animate-JS {
    from {
    width: 10px;
    }
    to {
        width: 15%
    }
}

@-webkit-keyframes Animate-JS {
    from {
    width: 10px;
    }
    to {
        width: 15%
    }
}

@-moz-keyframes Animate-JS {
    from {
    width: 10px;
    }
    to {
        width: 15%
    }
}

@-o-keyframes Animate-JS {
    from {
    width: 10px;
    }
    to {
        width: 15%
    }
}

#codeconPY {
    animation: Animate-PY 4s;
    -webkit-animation: Animate-PY 4s;
    -moz-animation: Animate-PY 4s;
    -o-animation: Animate-PY 4s;
    width: 40%;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: #5aa669;
}

@keyframes Animate-PY {
    from {
    width: 10px;
    }
    to {
        width: 40%
    }
}

@-webkit-keyframes Animate-PY {
    from {
    width: 10px;
    }
    to {
        width: 40%
    }
}

@-moz-keyframes Animate-PY {
    from {
    width: 10px;
    }
    to {
        width: 40%
    }
}

@-o-keyframes Animate-PY {
    from {
    width: 10px;
    }
    to {
        width: 40%
    }
}

#codeconC {
    animation: Animate-C 4s;
    -webkit-animation: Animate-C 4s;
    -moz-animation: Animate-C 4s;
    -o-animation: Animate-C 4s;
    width: 30%;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: #970cc1;
}

@keyframes Animate-C {
    from {
    width: 10px;
    }
    to {
        width: 30%
    }
}

@-webkit-keyframes Animate-C {
    from {
    width: 10px;
    }
    to {
        width: 30%
    }
}

@-moz-keyframes Animate-C {
    from {
    width: 10px;
    }
    to {
        width: 30%
    }
}

@-o-keyframes Animate-C {
    from {
    width: 10px;
    }
    to {
        width: 30%
    }
}

#codeconJAVA {
    animation: Animate-JAVA 4s;
    -webkit-animation: Animate-JAVA 4s;
    -moz-animation: Animate-JAVA 4s;
    -o-animation: Animate-JAVA 4s;
    width: 25%;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: #8e930c;
}

@keyframes Animate-JAVA {
    from {
    width: 10px;
    }
    to {
        width: 25%
    }
}

@-webkit-keyframes Animate-JAVA {
    from {
    width: 10px;
    }
    to {
        width: 25%
    }
}

@-moz-keyframes Animate-JAVA {
    from {
    width: 10px;
    }
    to {
        width: 25%
    }
}

@-o-keyframes Animate-JAVA {
    from {
    width: 10px;
    }
    to {
        width: 25%
    }
}

#codeconPHP {
    animation: Animate-PHP 4s;
    -webkit-animation: Animate-PHP 4s;
    -moz-animation: Animate-PHP 4s;
    -o-animation: Animate-PHP 4s;
    width: 40%;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: #5A69A6;
}

@keyframes Animate-PHP {
    from {
    width: 10px;
    }
    to {
        width: 40%
    }
}@-webkit-keyframes Animate-PHP {
    from {
    width: 10px;
    }
    to {
        width: 40%
    }
}

@-moz-keyframes Animate-PHP {
    from {
    width: 10px;
    }
    to {
        width: 40%
    }
}

@-o-keyframes Animate-PHP {
    from {
    width: 10px;
    }
    to {
        width: 40%
    }
}

#codeconSQL {
    animation: Animate-SQL 4s;
    -webkit-animation: Animate-SQL 4s;
    -moz-animation: Animate-SQL 4s;
    -o-animation: Animate-SQL 4s;
    width: 25%;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: #23b1db;
}

@keyframes Animate-SQL {
    from {
    width: 10px;
    }
    to {
        width: 25%
    }
}

@-webkit-keyframes Animate-SQL {
    from {
    width: 10px;
}
to {
    width: 25%}
}@-moz-keyframes Animate-SQL {
    from {
    width: 10px;
    }
    to {
        width: 25%
    }
}

@-o-keyframes Animate-SQL {
    from {
    width: 10px;
    }
    to {
        width: 25%
    }
}

#codeconVBNET {
    animation: Animate-VBNET 4s;
    -webkit-animation: Animate-VBNET 4s;
    -moz-animation: Animate-VBNET 4s;
    -o-animation: Animate-VBNET 4s;
    width: 35%;
    height: 35px;
    display: flex;
    align-items: center;
    background-color: #f8a51e;
}

@keyframes Animate-VBNET {
    from {
    width: 10px;
    }
    to {
        width: 35%
    }
}

@-webkit-keyframes Animate-VBNET {
    from {
    width: 10px;
    }
    to {
        width: 35%
    }
}

@-moz-keyframes Animate-VBNET {
    from {
    width: 10px;
    }
    to {
        width: 35%
    }
}

@-o-keyframes Animate-VBNET {
    from {
    width: 10px;
    }
    to {
        width: 35%
    }
}

.codeconSkillArea {
    z-index: 1;
    margin-left: 15px;
    text-shadow: none;
    color: #fff;
    font-family: Lato-Regular, sans-serif;
    font-size: 18px;
}
.PercentText {
    z-index: 3;
    padding-right: 15px;
    text-shadow: none;
    color: rgb(0, 0, 0);
    text-shadow: 0 1px 2px #fff;
    font-family: Lato-Regular, sans-serif;
    font-size: 18px;
}
.percentageHTML,.percentageHTML,.percentageHTML,
.percentageHTML,.percentageHTML,.percentageHTML{
}