.ratio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    width: 100%;
    color: #000;
    margin-bottom: 20px;
}
.ratio .item {
    text-align: center;
    font-weight: bold;
    height: 2.7em;
    line-height: 2.7em;
    font-size: 92%;
}
.ratio .beginner {
    background: #B1E6F6;
}
.ratio .middle {
    background: #007ab7;
    color: #fff;
}
.ratio .advanced {
    background: #053a86;
    color: #fff;
}
.ratio .ski {
    background: #B1E6F6;
}
.ratio .bord {
    background: #007ab7;
    color: #fff;
}
.ratio .others {
    background: #053a86;
    color: #fff;
}

.w25 {
    width: 25%;
}
.w30 {
    width: 30%;
}
.w70 {
    width: 70%;
}