@media screen and (min-width: 1001px) and (max-width: 2000px) {

    h1
    {
        color: red;
    }

/*second menu navigator*/

    .system_nav-menu ul{
        background-color: #262525;
        /*background-color: #cc4608;*/
        /*margin see the gap with page html background */
        /*padding see the gap with div background*/
        padding:10px;
        border-style: solid;
        border-color: #141414;
        /*border-color: #cc4608;*/
        border-width: 1px;
        border-radius: 12px;
        z-index: 1;
    }

    /*div.nav-menu ul{
        margin: 0;
        padding: 0;

    }*/

    .system_nav-menu ul li{
        
        /*float left make it float in line*/
        /*s display: inline;*/

        /*last version*/
        /*list-style: none;
        float: left;*/
        

        /*now*/
        display: inline-block;
        position: relative;
        padding: 0.5px 8px;

    }

    .system_nav-menu ul li a{
        text-decoration: none;
        color: #9d9d9d;
        /*color: #f2f2f2;*/
        padding: 8px;
        background-color: #262525;
        /*background-color: #cc4608;*/
        font-size: 90%;
        font-weight: bold;

    }

    .system_nav-menu ul li a:hover{
        color: #ffffff;
        background-color: #212120;
        /*background-color: #ba3d03;*/
        padding: 7px 8px;
    }

    .system_nav-menu ul ul{
        display: none;
        /*position absolute display in block*/
        position: absolute;
        margin: 6px 0px 0px 0px;
        padding: 0px 0px 0px 10px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
    }

    .system_nav-menu ul ul li{
        width: 200px;
        padding: 5px 0px;

    }

   

    .system_nav-menu ul li:hover ul{
        display: block;
        /*z-index: 999999;*/
    }

    .system_menu-trigger{
        display: none;
    }
}


@media screen and (min-width: 0px) and (max-width: 1000px)
{
    .system_icon_menu{
        width: 35px;
        height: 2px;
        background-color: #ffffff;
        margin: 6px 0;
        /*text-align: right;*/
    }

    .system_nav-menu {
        display: none;
        background-color: #262525;
        /*background-color: #cc4608;*/
        

        /*margin see the gap with page html background */
        /*padding see the gap with div background*/

        padding: 0px;
        border-style: solid;
        /*border-color: #141414;*/
        border-color: #262525;
        border-width: 1px;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;

    }

    .system_nav-menu ul li{
        list-style: none;
        /*float: none;*/
        border-bottom : 0.5px solid #B5B3A5;
        /*padding: 8px;*/
        padding: 25px;
    }

    .system_nav-menu ul li:last-child{
        border-bottom: none;

    }

    .system_nav-menu ul li a:link,
    .system_nav-menu ul li a:visited{
        /*show in square display block work with padding*/
        /*display: block;
        font-size: 90%;
        padding: 10px;
        color: #e6e6e6;
        text-decoration: none;
        font-weight: bold;*/

    }

    .system_nav-menu ul li a{
        text-decoration: none;
        color: #ffffff;
        /*font-size: 90%;*/
        font-size: 35px;
        font-weight: bold;
    }


    .system_nav-menu ul li a:hover{
        /*color: #ffffff;
        background-color: #000000;
        padding: 5 ;*/
    }

    .system_nav-menu ul ul{
        display: none;

    }

    .system_nav-menu ul li:hover ul{
        display: block;
    }

    .system_nav-menu ul li:active ul{
        display: block;
    }



    .system_menu-trigger{
        /*display (none: disappear, block: show as block, inine shows in ine)*/
        display: block;
        background-color: #262525;
        
        padding: 25px;
        text-align: right;
        cursor: pointer;
        font-size: 83%;
        border-top-right-radius: 12px;
        border-top-left-radius: 12px;
        /*align-content: right;*/
    }

    .system_nav-expanded{
        display:block;
    }
}