.menu-container:after,.menu-container:before {content:"";display:table;clear:both}
.menu-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}

.menu-modal {
    z-index:3;
    display:none;
    padding-top:100px;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:rgb(0,0,0);
    background-color:rgba(0,0,0,0.7)
}
.menu-modal-content {
    margin:auto;
    color:#fff;
    background-color:rgba(0, 0, 0, 0.7);
    position:relative;
    padding:0;
    outline:0;
    width:600px
}
@media (max-width:439px) and (min-width: 299px) {
    .menu-modal-content{margin:0 10px;width:auto!important}
    .menu-modal{padding-top:15px}
}

@media (max-width:474px) and (min-width: 440px) {
    .menu-modal-content {margin:0 35px;width:auto!important }
    .menu-modal{padding-top:15px}
    ul li a:after {
        content: " "attr(data-prim) " ";
        font-size: 10px;
        font-style: italic;
        color: teal;
    }
}

@media (max-width:524px) and (min-width: 475px) {
    .menu-modal-content {margin:0 35px;width:auto!important }
    .menu-modal{padding-top:15px}
    ul li a:after {
        content: " "attr(data-prim) " ";
        font-size: 12px;
        font-style: italic;
        color: pink;
    }
}

@media (max-width:574px) and (min-width: 525px) {
    .menu-modal-content {margin:0 35px;width:auto!important }
    .menu-modal{padding-top:15px}
    ul li a:after {
        content: " "attr(data-prim) " ";
        font-size: 12px;
        font-style: italic;
        color: orange;
    }
}

@media (max-width:884px) and (min-width: 575px) {
    .menu-modal-content {margin:0 45px;width:auto!important }
    .menu-modal{padding-top:15px}
    ul li a:after {
        content: " "attr(data-prim) " ";
        font-size: 16px;
        font-style: italic;
        color: yellow;
    }
}
@media (max-width:999px) and (min-width: 885px) {
    .menu-modal-content {margin:0 50px;width:auto!important }
    ul li a:after {
        content: " "attr(data-prim) attr(data-sec)" ";
        font-size: 16px;
        font-style: italic;
        color: green;
    }
}
@media screen and (min-width: 1000px) {
    .menu-modal-content{width:900px}
    ul li a:after {
        content: " "attr(data-prim) attr(data-sec)" ";
        font-size: 18px;
        font-style: italic;
        color: #999999;
    }
}

.menu-attr {color:#fff!important;background-color:rgba(43, 0, 145, 0.7)!important}
.menu-card-4{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.menu-close-topright{position:absolute;right:0;top:0;padding-top:0px;padding-right:15px}
.menu-close-topright:hover {color: rgba(43, 0, 145, 0.7)!important;cursor: pointer}

ul {
    list-style-type: none;
    font-size: 26px;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}