.cbp-hrmenu {
    width: 100%;
}

    /* general ul style */
    .cbp-hrmenu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    /* first level ul style */
    .cbp-hrmenu > ul,
    .cbp-hrmenu .cbp-hrsub-inner {
        margin: 0 auto;
        padding: 0;
    }

        .cbp-hrmenu > ul > li {
            display: inline-block;
        }

            .cbp-hrmenu > ul > li > a {
                font-weight: 700;
                padding: 1em 2em;
                color: #999;
                display: inline-block;
            }

                .cbp-hrmenu > ul > li > a:hover {
                    color: #47a3da;
                }

            .cbp-hrmenu > ul > li.cbp-hropen a,
            .cbp-hrmenu > ul > li.cbp-hropen > a:hover {
                color: #fff;
                background: #47a3da;
            }

    /* sub-menu */
    .cbp-hrmenu .cbp-hrsub {
        display: none;
        position: absolute;
        background: #fff;
        width: 100%;
        left: 0;
        top: 100%;
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0.25, #CF2B3E), color-stop(0.3, #699ECF), color-stop(1, #3F94C9)) !important;
        background-image: -webkit-linear-gradient(180deg, #cf2b3d 25%, #699ecf 30%, #3f93c9 100%), -webkit-linear-gradient(180deg, #cf2b3d 25%, #699ecf 30%, #3f93c9 100%) !important;
        background-image: -moz-linear-gradient(180deg, #cf2b3d 25%, #699ecf 30%, #3f93c9 100%), -moz-linear-gradient(180deg, #cf2b3d 25%, #699ecf 30%, #3f93c9 100%) !important;
        background-image: -o-linear-gradient(180deg, #cf2b3d 25%, #699ecf 30%, #3f93c9 100%), -o-linear-gradient(180deg, #cf2b3d 25%, #699ecf 30%, #3f93c9 100%) !important;
        background-image: linear-gradient(to right, #cf2b3d 25%, #699ecf 30%, #3f93c9 100%), linear-gradient(to right, #cf2b3d 25%, #699ecf 30%, #3f93c9 100%) !important;
        -moz-background-size: 100% 1px !important;
        background-size: 100% 1px !important;
        background-position: bottom !important;
        background-repeat: no-repeat !important;
    }

.cbp-hropen .cbp-hrsub {
    /*display: block;*/
    padding-bottom: 2.5em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
    width: 24.7%;
    float: left;
    padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
    content: " ";
    display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
    clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a, .cbp-hrmenu .cbp-hrsub-inner > div a:focus {
    line-height: 2em;
    color: #000;
    text-decoration: none;
}

    .cbp-hrmenu .cbp-hrsub-inner > div a.vd-ctg {
        text-transform: lowercase;
    }

        .cbp-hrmenu .cbp-hrsub-inner > div a.vd-ctg span {
            display: block;
        }

            .cbp-hrmenu .cbp-hrsub-inner > div a.vd-ctg span:first-letter {
                text-transform: uppercase;
            }

.cbp-hrsub h4 {
    color: #699ecf;
    padding: 2em 0 0.6em;
    margin: 0;
    font-size: 150%;
    font-weight: 400;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) {

    .cbp-hrmenu {
        font-size: 80%;
    }
}

@media screen and (max-width: 1047px) {

    .cbp-hrmenu {
        font-size: 120%;
        border: none;
    }
}

@media screen and (max-width: 36em) {
    .cbp-hrmenu .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}