.barras {
    width: 100%;
    margin: 5px auto;
}
.header .barras {
    width: 100%;
}
.barras.empty .valor-nivel {
    color: #333333;
}

.barra {
    width: 100%;
    height: 25px;
    background: #e7e7e7;
}
@media screen and (max-width: 480px) {
    .barra {
        height: 18px;
    }
}
.header .barra {
    width: 100%;
}

.barra-nivel {
    height: 25px;
    background: #7daed3;
    width: 1px;
    line-height: 25px;
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    transition: width 1s ease;
}
@media screen and (max-width: 480px) {
    .barra-nivel {
        height: 18px;
        line-height: 18px;
    }
}

.valor-nivel {
    line-height: 25px;
    color: #fff;
    margin-left: 10px;
    position: relative;
    font-size: 16px;
    font-weight: bold;
}
@media screen and (max-width: 480px) {
    .valor-nivel {
        line-height: 18px;
        font-size: 14px;
    }
}