@media screen and (max-width: 900px) {
    #menubar {
        margin-bottom: 33px;
        position: relative;
        height: 40px;
        background: #1f1f1f
    }
}

#menubar .inner-bar, #menubar .inside-padding {
    height: 100%;
    box-sizing: border-box
}

#menubar #mobile-bar {
    display: none !important
}

#menubar #mobileNav {
    display: none;
    justify-content: center;
    align-items: center;
    display: none;
    color: #fff;
    width: 120px;
    height: 100%;
    float: right;
    background: #1f1f1f;
    width: 100%;
    padding: 5px;
    box-sizing: border-box
}

@media screen and (max-width: 900px) {
    #menubar #mobileNav {
        display: flex
    }
}

#menubar #mobileNav span {
    display: block;
    padding-left: 10px
}

@media screen and (max-width: 600px) {
    #menubar #mobileNav span {
        display: none
    }
}

#menubar #mobileNav:focus {
    box-shadow: none;
    outline: none;
    background: #060606;
    box-shadow: inset 0 0 0 2px #fff;
}

    #menubar #mobileNav:hover span, #menubar #mobileNav:focus span {
        background: transparent !important;
        color: #fff !important
    }

#menubar #mobileNav .hamburger {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer
}

    #menubar #mobileNav .hamburger .bar, #menubar #mobileNav .hamburger .bar:before, #menubar #mobileNav .hamburger .bar:after {
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        content: "";
        -webkit-transform: rotate(0);
        transform: rotate(0);
        pointer-events: none;
        background-color: #fff
    }

    #menubar #mobileNav .hamburger .bar {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

        #menubar #mobileNav .hamburger .bar, #menubar #mobileNav .hamburger .bar:before, #menubar #mobileNav .hamburger .bar:after {
            transition: top .2s .2s,left .1s,background-color .2s .1s,-webkit-transform .2s;
            transition: top .2s .2s,left .1s,transform .2s,background-color .2s .1s;
            transition: top .2s .2s,left .1s,transform .2s,background-color .2s .1s,-webkit-transform .2s
        }

            #menubar #mobileNav .hamburger .bar:before, #menubar #mobileNav .hamburger .bar:after {
                -webkit-transform: rotate(0);
                transform: rotate(0)
            }

            #menubar #mobileNav .hamburger .bar:before {
                top: .5rem
            }

            #menubar #mobileNav .hamburger .bar:after {
                top: -0.5rem
            }

#menubar #mobileNav.expanded .hamburger .bar {
    background-color: transparent !important
}

    #menubar #mobileNav.expanded .hamburger .bar:before, #menubar #mobileNav.expanded .hamburger .bar:after {
        top: 0;
        transition: background-color .2s,top .2s,left .2s,-webkit-transform .2s .15s;
        transition: background-color .2s,top .2s,left .2s,transform .2s .15s;
        transition: background-color .2s,top .2s,left .2s,transform .2s .15s,-webkit-transform .2s .15s;
        background-color: red !important
    }

    #menubar #mobileNav.expanded .hamburger .bar:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    #menubar #mobileNav.expanded .hamburger .bar:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

#menubar .mobile-nav-items {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background: #313131;
    display: none;
    border-top: 1px solid rgba(0,0,0,.3);
    padding: 10px 0;
    z-index: 999999
}

@media screen and (min-width: 901px) {
    #menubar .mobile-nav-items {
        display: none !important
    }
}

#menubar .mobile-nav-items * {
    box-sizing: border-box
}

#menubar .mobile-nav-items ul {
    margin: 0;
    padding: 0
}

    #menubar .mobile-nav-items ul li {
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        position: relative
    }

        #menubar .mobile-nav-items ul li a {
            display: block;
            padding: 10px 20px;
            background: #313131;
            font-weight: 600;
            font-size: 16px;
            color: #fff;
            width: 100%
        }

            #menubar .mobile-nav-items ul li a:hover, #menubar .mobile-nav-items ul li a:focus, #menubar .mobile-nav-items ul li a.expanded {
                text-decoration: none
            }

        #menubar .mobile-nav-items ul li .subnav-items {
            width: 100%;
            display: none
        }

            #menubar .mobile-nav-items ul li .subnav-items li {
                position: relative
            }

                #menubar .mobile-nav-items ul li .subnav-items li a {
                    border-right: 1px solid rgba(255,255,255,.5);
                    font-weight: 400
                }

                #menubar .mobile-nav-items ul li .subnav-items li:after {
                    position: absolute;
                    content: "";
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 1px;
                    background: rgba(255,255,255,.5)
                }

            #menubar .mobile-nav-items ul li .subnav-items.level1 {
                background: #242424
            }

                #menubar .mobile-nav-items ul li .subnav-items.level1 > li > a {
                    background: #242424
                }

                    #menubar .mobile-nav-items ul li .subnav-items.level1 > li > a:not(.subnav) {
                        padding-left: 30px
                    }

            #menubar .mobile-nav-items ul li .subnav-items.level2 {
                background: #181818
            }

                #menubar .mobile-nav-items ul li .subnav-items.level2 li a {
                    background: #181818
                }

                    #menubar .mobile-nav-items ul li .subnav-items.level2 li a:not(.subnav) {
                        padding-left: 50px
                    }

        #menubar .mobile-nav-items ul li.has-child a {
            width: calc(100% - 40px);
            border-right: 1px solid rgba(0,0,0,.3)
        }

        #menubar .mobile-nav-items ul li.has-child .subnav {
            width: 40px;
            height: 44px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            border: none
        }

            #menubar .mobile-nav-items ul li.has-child .subnav:before {
                font-family: "Fontawesome" !important
            }

        #menubar .mobile-nav-items ul li:after {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: rgba(0,0,0,.3)
        }