@media (max-width: 767px) {
        .mainnavi .top-menu {
                display: none;
        }
        .mainnavi .top-menu-title {
                text-transform: uppercase;
                color: #576e88;
                display: block;
                padding: 6px 20px;
                position: relative;
                border-radius: 10px;
                position: absolute; top: 10px; right: 0;
                background-color:#fff;
        }
        #header .mainnavi {
                float: none;
        }
        #header .mainnavi ul li {
                float: none;
                position: relative;
        }
        #header .mainnavi .mod_navigation ul {
                margin: 0;
        }
        .mainnavi .level_1 {
                text-align: left;
        }
        .mainnavi .level_1 a.sibling {
        color: #fff;
        }
        .mainnavi .active::after {background-color: #8aa1bb;}
        
        .mainnavi .top-menu-title.active{color:#fff;}
        
        
        .mainnavi .top-menu-title:after {
                display: block;
                font-family: "FontAwesome";
                content: "\f0c9 ";
                position: absolute;
                right: 0px;
                top: 20px;
                font-size: 25px;
                text-align: center;
                padding: 3px 7px;
        }

        .mainnavi { position: initial; }

        #header .mod_navigation ul {
                clear: both;
                position: relative;
                z-index: 100;
        }
                
        .top-menu {
                background: rgba(0, 0, 0, .4);
                padding-top: 15px !important;
                padding-bottom: 15px !important;
        }

        #header .mod_navigation.mainnavi .top-menu {
                max-height: 350px;
                background: #2d150e;
        }

        
        .mainnavi .top-menu-title:after {cursor: pointer;}
}