hr[class*='percent-'] {
    position: relative;
    opacity: 1;
    color: #ccc;
}
hr[class*='percent-']::after {
    content: '';
    height: 3px;
    top: calc(50% - 1.5px);
    position: absolute;
    background-color: #58c4c4;
}
hr.percent-100::after {
    width: 100%;
}
hr.percent-100.dh-animate::after {
    animation: hr-percent-100 2.5s ease;
}
@keyframes hr-percent-100 {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}
hr.percent-95::after {
    width: 95%;
}
hr.percent-95.dh-animate::after {
    animation: hr-percent-95 2.5s ease;
}
@keyframes hr-percent-95 {
    from {
        width: 0%;
    }
    to {
        width: 95%;
    }
}
hr.percent-90::after {
    width: 95%;
}
hr.percent-90.dh-animate::after {
    animation: hr-percent-95 2.5s ease;
}
@keyframes hr-percent-95 {
    from {
        width: 0%;
    }
    to {
        width: 95%;
    }
}
hr.percent-85::after {
    width: 85%;
}
hr.percent-85.dh-animate::after {
    animation: hr-percent-85 2.5s ease;
}
@keyframes hr-percent-85 {
    from {
        width: 0%;
    }
    to {
        width: 85%;
    }
}
hr.percent-80::after {
    width: 80%;
}
hr.percent-80.dh-animate::after {
    animation: hr-percent-80 2.5s ease;
}
@keyframes hr-percent-80 {
    from {
        width: 0%;
    }
    to {
        width: 80%;
    }
}
hr.percent-75::after {
    width: 75%;
}
hr.percent-75.dh-animate::after {
    animation: hr-percent-75 2.5s ease;
}
@keyframes hr-percent-75 {
    from {
        width: 0%;
    }
    to {
        width: 75%;
    }
}
hr.percent-70::after {
    width: 70%;
}
hr.percent-70.dh-animate::after {
    animation: hr-percent-70 2.5s ease;
}
@keyframes hr-percent-70 {
    from {
        width: 0%;
    }
    to {
        width: 70%;
    }
}
hr.percent-65::after {
    width: 65%;
}
hr.percent-65.dh-animate::after {
    animation: hr-percent-65 2.5s ease;
}
@keyframes hr-percent-65 {
    from {
        width: 0%;
    }
    to {
        width: 65%;
    }
}
hr.percent-60::after {
    width: 60%;
}
hr.percent-60.dh-animate::after {
    animation: hr-percent-60 2.5s ease;
}
@keyframes hr-percent-60 {
    from {
        width: 0%;
    }
    to {
        width: 60%;
    }
}
hr.percent-55::after {
    width: 55%;
}
hr.percent-55.dh-animate::after {
    animation: hr-percent-55 2.5s ease;
}
@keyframes hr-percent-55 {
    from {
        width: 0%;
    }
    to {
        width: 55%;
    }
}
hr.percent-50::after {
    width: 50%;
}
hr.percent-50.dh-animate::after {
    animation: hr-percent-50 2.5s ease;
}
@keyframes hr-percent-50 {
    from {
        width: 0%;
    }
    to {
        width: 50%;
    }
}
hr.percent-45::after {
    width: 45%;
}
hr.percent-45.dh-animate::after {
    animation: hr-percent-45 2.5s ease;
}
@keyframes hr-percent-45 {
    from {
        width: 0%;
    }
    to {
        width: 45%;
    }
}
hr.percent-40::after {
    width: 40%;
}
hr.percent-40.dh-animate::after {
    animation: hr-percent-40 2.5s ease;
}
@keyframes hr-percent-40 {
    from {
        width: 0%;
    }
    to {
        width: 40%;
    }
}
hr.percent-35::after {
    width: 35%;
}
hr.percent-35.dh-animate::after {
    animation: hr-percent-35 2.5s ease;
}
@keyframes hr-percent-35 {
    from {
        width: 0%;
    }
    to {
        width: 35%;
    }
}
hr.percent-30::after {
    width: 30%;
}
hr.percent-30.dh-animate::after {
    animation: hr-percent-30 2.5s ease;
}
@keyframes hr-percent-30 {
    from {
        width: 0%;
    }
    to {
        width: 30%;
    }
}
hr.percent-25::after {
    width: 25%;
}
hr.percent-25.dh-animate::after {
    animation: hr-percent-25 2.5s ease;
}
@keyframes hr-percent-25 {
    from {
        width: 0%;
    }
    to {
        width: 25%;
    }
}
hr.percent-20::after {
    width: 20%;
}
hr.percent-20.dh-animate::after {
    animation: hr-percent-20 2.5s ease;
}
@keyframes hr-percent-20 {
    from {
        width: 0%;
    }
    to {
        width: 20%;
    }
}
hr.percent-15::after {
    width: 15%;
}
hr.percent-15.dh-animate::after {
    animation: hr-percent-15 2.5s ease;
}
@keyframes hr-percent-15 {
    from {
        width: 0%;
    }
    to {
        width: 15%;
    }
}
hr.percent-10::after {
    width: 10%;
}
hr.percent-10.dh-animate::after {
    animation: hr-percent-10 2.5s ease;
}
@keyframes hr-percent-10 {
    from {
        width: 0%;
    }
    to {
        width: 10%;
    }
}
hr.percent-5::after {
    width: 15%;
}
hr.percent-5.dh-animate::after {
    animation: hr-percent-15 2.5s ease;
}
@keyframes hr-percent-15 {
    from {
        width: 0%;
    }
    to {
        width: 15%;
    }
}