* {
    margin: 0;
    padding: 0
}

.mobile {
    display: none
}

.border {
    border-bottom: none !important
}

.logo-div {
    height: 88px;
    display: none
}

@media (max-width:991px) {
    .menu-icon {
        display: none !important
    }
    nav ul li {
        display: block;
        width: 100%;
        padding: 0 !important;
        border-bottom: 1px solid #0e0d28
    }
    nav ul ul {
        display: none;
        position: absolute;
        top: 0 !important;
        background: 0 0 !important;
        padding: 0 !important;
        width: 100% !important
    }
    nav ul {
        margin: 0 0 !important
    }
    .nav-links li a:hover {
        color: #000 !important
    }
    .logo-div {
        height: 88px;
        display: none
    }
    .mobile {
        display: block
    }
    .nav-links li {
        background: #F2F2F2 !important;
        border-bottom: 1px solid #fff;
        line-height: 35px !important;
        width: 100%
    }
    .hs-menubar {
        width: 100%;
        height: 50px;
        line-height: 50px;
        color: #fff;
        position: relative;
        z-index: 999
    }
    .hs-menubar.sticky {
        position: relative;
        top: 10;
        left: 20
    }
    .hs-navigation {
        width: 270px;
        height: 100vh;
        background: #fff;
        position: fixed;
        top: 109px;
        left: -315px;
        z-index: 999;
        overflow: hidden;
        box-shadow: 1px 2px 4px rgba(0, 0, 0, .3)
    }
    .hs-navigation.open {
        left: -15px
    }
    .hs-navigation,
    .hs-navigation.open {
        transition: .6s;
        -webkit-transition: .6s;
        -moz-transition: .6s;
        overflow-y: scroll
    }
    .hs-menubar,
    .hs-navigation {
        font-family: Roboto, sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: 16px:
    }
    .hs-user {
        right: 50px;
        overflow: hidden
    }
    .hs-user img {
        width: 32px;
        height: 32px;
        transition: .3s
    }
    .hs-user img:hover {
        opacity: .8;
        -webkit-opacity: .8;
        -moz-opacity: .8;
        transform: scale(1.1);
        transition: .3s
    }
    .user-penal {
        width: 130px;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, .33);
        background: #fff;
        list-style: none;
        position: fixed;
        display: none;
        top: 50px;
        right: 10px;
        line-height: 1.5;
        z-index: 100
    }
    .user-penal li a {
        font-size: 12px;
        text-decoration: none;
        color: #666;
        display: block;
        padding: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: .3s
    }
    .user-penal li .zmdi {
        font-size: 16px;
        padding-right: 10px
    }
    .user-penal li a:hover {
        background: rgba(0, 0, 0, .1);
        transition: .3s
    }
    .grid-trigger:hover,
    .menu-trigger:hover,
    .more-trigger:hover,
    .search-trigger:hover {
        transition: .3s
    }
    .grid-trigger,
    .hs-user,
    .menu-trigger,
    .more-trigger,
    .search-trigger {
        position: absolute;
        top: 32px;
        color: #000;
        font-size: 40px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        line-height: 35px;
        border-radius: 50%;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
        transition: .3s;
        z-index: 100
    }
    .menu-trigger {
        left: 10px
    }
    .search-trigger {
        left: 50px
    }
    .grid-trigger {
        right: 90px
    }
    .more-trigger {
        right: 12px
    }
    .grid-items {
        width: 230px;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, .33);
        background: #fff;
        padding-top: 10px;
        position: fixed;
        right: 80px;
        top: 50px;
        text-align: center;
        display: none;
        z-index: 120
    }
    .grid-items li.grid {
        list-style: none;
        width: 60px;
        height: 60px;
        line-height: 60px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid rgba(0, 0, 0, .1);
        display: inline-block;
        box-sizing: border-box;
        margin: 2px;
        border-radius: 50%;
        font-size: 11px
    }
    li.more-btn {
        height: 32px;
        line-height: 32px;
        margin: 15px 15px 5px 15px;
        box-sizing: border-box;
        display: block;
        position: relative
    }
    li.more-btn a {
        text-decoration: none;
        background: #e41b17;
        color: #fff;
        font-size: 13px;
        display: block;
        cursor: pointer;
        border-radius: 20px
    }
    li.more-btn a:hover {
        opacity: .8;
        -webkit-opacity: .8;
        -moz-opacity: .8
    }
    .grid-title {
        border: 1px red solid
    }
    .brand-logo {
        display: block;
        text-align: center
    }
    .brand-logo img {
        width: 100px;
        height: auto;
        margin-top: 12px
    }
    @-webkit-keyframes ripple-out {
        from {
            opacity: 1;
            -webkit-opacity: 1
        }
        to {
            top: -12px;
            right: -12px;
            bottom: -12px;
            left: -12px;
            opacity: 0
        }
    }
    @keyframes ripple-out {
        from {
            opacity: 1;
            -webkit-opacity: 1
        }
        to {
            top: -12px;
            right: -12px;
            bottom: -12px;
            left: -12px;
            opacity: 0
        }
    }
    .ripple-out {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px transparent
    }
    .ripple-out:before {
        content: '';
        position: absolute;
        border: rgba(255, 255, 255, .3) solid 6px;
        border-radius: 50%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        animation: ripple-out .4s linear forwards;
        -webkit-animation: ripple-out .4s linear forwards
    }
    @-webkit-keyframes fadeInUp {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0)
        }
        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }
    }
    @keyframes fadeInUp {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0)
        }
        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }
    }
    .fadeInUp {
        animation: fadeInUp .4s ease forwards;
        -webkit-animation: fadeInUp .4s ease forwards
    }
    .dim-overlay {
        display: none
    }
    .dim-overlay:before {
        content: "";
        background-color: rgba(0, 0, 10, .4);
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        overflow: hidden;
        z-index: 2
    }
    .search-box {
        position: absolute;
        height: 50px;
        background: #555;
        white-space: nowrap;
        overflow: hidden;
        width: 0;
        top: 0;
        z-index: 500;
        left: 100px
    }
    .search-box button.search-submit,
    .search-box input[type=text] {
        padding: 6px;
        border: 0;
        outline: 0
    }
    .search-box input[type=text] {
        background: 0 0;
        color: rgba(255, 255, 255, .8)
    }
    .nav-controls {
        height: 36px;
        line-height: 36px;
        background: rgba(0, 0, 0, .12);
        text-align: right;
        display: none
    }
    .nav-controls .nav-fixed,
    .nav-controls .nav-full {
        background: rgba(0, 0, 0, .3);
        color: #fff;
        border-radius: 2px;
        width: 25px;
        height: 25px;
        text-align: center;
        line-height: 1;
        outline: 0;
        border: 0;
        margin: 0 3px
    }
    .nav-controls .nav-fixed:hover,
    .nav-controls .nav-full:hover {
        opacity: .8;
        -webkit-opacity: .8
    }
    .user-info {
        position: fixed;
        top: 50px;
        right: 30px;
        width: 230px;
        background: #fff;
        box-shadow: 1px 2px 6px rgba(0, 0, 0, .4);
        padding: 10px;
        text-align: center;
        line-height: 1;
        display: none
    }
    .user-info li {
        padding: 10px;
        list-style: none
    }
    .user-info .profile-pic img {
        width: 70px;
        height: 70px;
        border-radius: 50%
    }
    .user-info .user-name {
        font-size: 16px;
        color: #222
    }
    .user-info .user-bio {
        font-size: 11px;
        color: #555;
        padding-bottom: 0
    }
    .nav-links {
        list-style: none;
        font-size: 14px;
        color: rgba(255, 255, 255, .9)
    }
    .nav-links .its-parent,
    .nav-links li a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #000;
        font-size: 14px !important;
        font-weight: 400;
        letter-spacing: 0
    }
    .nav-links .its-parent:hover,
    .nav-links li a:hover {
        background: #F9D8D7;
        color: #000
    }
    .nav-links .icon {
        font-size: 18px;
        padding-right: 20px
    }
    .nav-links .has-child ul li a:before,
    .nav-links ul .its-parent:before {
        content: "--";
        display: inline-block;
        font-size: 10px;
        color: rgba(255, 255, 255, .4);
        position: relative;
        right: 10px;
        visibility: hidden
    }
    .nav-links .has-child ul li a:hover {
        background: #FABCBB !important
    }
    .nav-links .has-child ul li a:selected {
        background: #fff !important
    }
    .its-parent:after {
        content: "\e901";
        font-family: VDB !important;
        float: right;
        margin-right: 20px;
        transition: .4s;
        font-size: 16px
    }
    .icon-arrow_down:before {
        content: "\e901"
    }
    .icon-arrow_down.downed {
        background: #c6997c
    }
    .its-parent.downed {
        background: #fff;
        color: #000
    }
    .icon-arrow_down:after {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(360deg);
        transition: .4s;
        -webkit-transition: .4s;
        -moz-transition: .4s
    }
    .its-parent.downed:after {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(360deg);
        transition: .4s;
        -webkit-transition: .4s;
        -moz-transition: .4s
    }
    nav ul ul {
        display: none;
        position: unset;
        top: 35px;
        background: #fff;
        padding: 0
    }
    nav ul ul li {
        display: block;
        margin: 0;
        width: 100%;
        padding: 0 0 !important;
        text-align: left !important;
        color: #fff;
        background: #222139
    }
    nav ul ul li a {
        background-color: #B2B3B2;
        color: #000;
        padding: 5px 30px !important;
        display: block;
        font-size: 14px;
        text-transform: capitalize;
        letter-spacing: normal
    }


    nav ul ul li a:hover {
        background-color: #FABCBB;
        color: #000;}

    .font-icon {
        padding: 5px 29px 0 6px;
        font-size: 20px !important;
    }
}


@media screen and (max-width:736px){

    .hs-navigation{top: 72px !important;}
    .menu-trigger{top: 13px; left: 0px;}

}