@media screen and (max-width: 991px) {
    ol.rule {
        display: none;
        visibility: hidden;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1091px) {
    li.rule {
        width: 30px;
        font-size: 15px;
    }
}
@media only screen and (min-width: 1092px) and (max-width: 1191px) {
    li.rule {
        width: 35px;
        font-size: 15px;
    }
}
@media only screen and (min-width: 1192px) and (max-width: 1293px) {
    li.rule {
        width: 40px;
        font-size: 15px;
    }
}
@media only screen and (min-width: 1294px) and (max-width: 1393px) {
    li.rule {
        width: 45px;
        font-size: 16px;
    }
}
@media only screen and (min-width: 1394px) and (max-width: 1495px) {
    li.rule {
        width: 50px;
        font-size: 16px;
    }
}
@media only screen and (min-width: 1496px) and (max-width: 1596px) {
    li.rule {
        width: 55px;
        font-size: 16px;
    }
}
@media only screen and (min-width: 1597px) and (max-width: 1696px) {
    li.rule {
        width: 60px;
        font-size: 16px;
    }
}
@media only screen and (min-width: 1697px) and (max-width: 1796px) {
    li.rule {
        width: 65px;
        font-size: 18px;
    }
}
@media only screen and (min-width: 1797px) and (max-width: 1896px) {
    li.rule {
        width: 70px;
        font-size: 18px;
    }
}
@media only screen and (min-width: 1897px) and (max-width: 1996px) {
    li.rule {
        width: 75px;
        font-size: 20px;
    }
}
@media only screen and (min-width: 1897px) and (max-width: 1920px) {
    li.rule {
        width: 75px;
        font-size: 20px;
    }
}