#menubar { display:block; padding: 0; margin: 0; width:100%; z-index: 999;
           border-radius: 8px; background-color: #ddd; position: abolute; top:0; left: 0;
           }
    
#mob_menu{ display: block; cursor: pointer; background-color:#bb3e3f }
 
    
.hb1, .hb2, .hb3{
    height: 5px; width: 30px; margin: 6px;
    background-color: black;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .hb1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;}

.change .hb2 {opacity: 0;}

.change .hb3 { -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
                transform: rotate(45deg) translate(-8px, -8px) ;                }

.top_menu_item{display: none;}

#menubar li a{ display: block;text-decoration: none;
            text-align: center;
            font-size: 1.5em;
            position: relative;
            width:100%;
            padding: 5px 10px 12px 10px;
            background-color: #dd5f5f; color: #fff; border-bottom: solid 1px #fff}
            
menubar li a:visited{background-color:#dd5f5f; color: #fff;}
    
#menubar li a:hover{background-color: #aaa; color:  #dd5f5f;}

#menubar ul{ list-style: none; margin: none; padding: none;  padding-left: 0;z-index: 3;}


#menubar ul ul{
       display: none; padding: 0;
       transition:height 1.4s ease-in-out;
        -moz-transition:height 1.4s ease-in-out;
        -webkit-transition:height 1.4s ease-in-out;
        -o-transition:height 1.4s ease-in-out
    }
#menubar ul ul{
        padding: 0;
    }
#menubar ul ul li{ background-color:#aaa ; color: #dd5f5f; }
#menubar li:hover > ul{display:  block;
                         -moz-transition:height 1.4s ease-in-out;-webkit-transition:height 1.4s ease-in-out;
                        -o-transition:height 1.4s ease-in-out }

/* top level items */
#menubar>ul>li{  #menubar>ul>li}
 
#menubar>ul>li>a{  border-right: 1px solid #ddd; background-color: #bb3e3f; }
/*#menubar ul ul li{ background-color: #00ff00; }*/
#menubar >ul>li> a:hover{background-color: #bb3e3f; color:  #fff;}
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
@media only screen and (min-width: 675px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}s
   
    #menubar {
        float:left;
        display:block;
        padding: 0;
        margin: 0;
        width:100%;
        border-radius: 8px;
        background-color: #ddd;
    }
    #menubar ul{ list-style: none; margin: none; padding: none; display: inline-block;}

    #menubar li:hover > ul{display:  block;}
    
    #menubar li a{ display: inline-block;text-decoration: none;
            text-align: left;
            font-size: 1em;
            position: relative;
            width:100%;
            padding: 5px 10px 12px 10px;
            background-color: #bb3e3f; color: #fff;}
            
    #menubar li a:visited{background-color: #bb3e3f; color: #fff;}
    
    #menubar li a:hover{background-color: #bb3e3f; color: #aaa;}
    
    #menubar ul ul{
        position: absolute; display: none; padding: 0;
    }
    #menubar ul ul li{ background-color: #cc4f50; position:relative; border-bottom:  1px solid #ddd;}
    
    #menubar ul ul ul {
        position: absolute;
        top: 0px;
    }
    
    /*TOP LEVEL ITEMS*/
     .top_menu_item{
        display: block; 
    }
    #mob_menu{display: none;  }
    
    #menubar>ul{padding-left:0; margin: 0;}
    
    #menubar>ul>li{ float:left; border-right: 1px solid #ddd; }
    
    #menubar>ul>li>a{width:auto;padding: 5px 10px 12px 10px;}
    
    #menubar a[aria-haspopup="true"]::after{
        content: '';
        display: block; width: 0px; height: 0px;
        position: absolute;
        top:16px; right:15px;
        border-left: 6px solid #ff;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
    }
    #menubar >ul > li> a[aria-haspopup="true"]::after{
         top:auto; right:20px; bottom:0px; left:auto;
        border-left: 6px solid transparent;
        border-top: 6px solid #fff;
        border-right: 6px solid transparent;
    }
}