.offcanvas-menu {
    background-color: #0b4456;
    color: #ffffff;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li a:focus, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:focus{
    color:#fff;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a, .offcanvas-menu .offcanvas-inner .sp-module ul > li span{
    color:#fff;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a{
    color:#fff;
}

.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li > a:before, .offcanvas-menu .offcanvas-inner .sp-module ul.menu-child > li > a:before{
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    height: 2px;
    background-color: #ffffff;
    transform: translateY(-50%);
    transition: 0.3s;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler:focus, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler:focus{
  color:#fff;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler{
    color:#fff;
}

/*offcanvas-bar*/
.icon-bar > span {
    display: block;
    width: 100%;
    border-bottom: 2px solid #fff;
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 50%;
    left: 0;
}
/*close-offcanvas */
.close-offcanvas > span {
    color: #ffffff;
    margin-top: 7px;
    margin-left: 8px;
    margin-right: 8px;
}
.close-offcanvas {
    position: absolute;
    top: 28px;
    right: 15px;
    z-index: 1;
    width: 30px;
    height: 30px;
    border: 2px solid #ffffff;
    border-radius: 100%;
}