/* navigation from left */
div[data-role="complex-navigation"] { 
    margin-left: -75%;
    
    z-index: 10000;
    overflow: hidden; overflow-y: auto;
    display: block;
    position: fixed; top: 0; left: 0;
    min-width: 50%; width: 75%; max-width: 75%;
    min-height: 1px; height: 100vh;
    transition: all 0.2s linear 0s;
    background: #000;
}
div[data-role="complex-navigation"].v {
    margin-left: 0;
}
div[data-role="complex-navigation-trigger"] {
    display: none;

    z-index: 9999;
    position: relative;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
div[data-role="complex-navigation-trigger"] i {
    transition: all 0.2s linear 0s;
}
div[data-role="complex-navigation-trigger"].m i {
    /*transform: rotate(90deg);*/
}
div[data-role="complex-navigation-shadow"] {
    display: none;
    z-index: 9997;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.75);
}



/* fixed navigation at the bottom of the browser */
div[data-role="complex-navigation-bottom"] {
    display: none;
    z-index: 10000; /* 10000 or 9996 if should be under complex-navigation */
    position: fixed;
    bottom: 0; left: 0;
    width: 100%; height: auto;
}
div[data-role="complex-navigation-bottom"] .cnb-menu {
    z-index: inherit;
    position: relative;
    display: block; width: 100%; height: 50px;
    margin: 0; padding: 0; list-style: none outside none;
    background: #f00000;
}
div[data-role="complex-navigation-bottom"] .cnb-menu .cnb-item {
    display: flex; align-items: center; justify-content: center;
    float: left; vertical-align: top;
    height: 50px;
    border-right: 1px solid rgba(255,255,255,0.3);
    cursor: pointer;
}
div[data-role="complex-navigation-bottom"] .cnb-menu .cnb-item:last-of-type { border-color: transparent; }

div[data-role="complex-navigation-bottom"] .cnb-menu.cnb-1 .cnb-item { width: 100%; }
div[data-role="complex-navigation-bottom"] .cnb-menu.cnb-2 .cnb-item { width: 50%; }
div[data-role="complex-navigation-bottom"] .cnb-menu.cnb-3 .cnb-item { width: 33.333334%; }
div[data-role="complex-navigation-bottom"] .cnb-menu.cnb-4 .cnb-item { width: 25%; }
div[data-role="complex-navigation-bottom"] .cnb-menu.cnb-5 .cnb-item { width: 20%; }
div[data-role="complex-navigation-bottom"] .cnb-menu .cnb-item,
div[data-role="complex-navigation-bottom"] .cnb-menu .cnb-item i { color: #fff; }
div[data-role="complex-navigation-bottom"] .cnb-menu .cnb-item a {
	display: flex; width: 100%; height: 50px;
	align-items: center; justify-content: center;
}
div[data-role="complex-navigation-bottom"] .cnb-menu .cnb-item.a { background: rgba(0,0,0,0.15); }

div[data-role="complex-navigation-bottom"] .cnb_addon {
    display: block;
    z-index: 9995;
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 50px;
    transition: all 0.2s linear 0s;
    background: #E91E63;
}
div[data-role="complex-navigation-bottom"] .cnb_addon.v { margin-bottom: 50px; box-shadow: 0px -5px 15px rgba(0,0,0,0.4); }


@media screen and (max-width: 992px) {
	div[data-role="complex-navigation-trigger"] { display: flex; }
	div[data-role="complex-navigation-bottom"] { display: block; }
}

@media screen and (max-width: 768px) {
	body { padding-bottom: 50px; }
	
}