body{
    direction: rtl;
    text-align: right;
}
.menu-responsive-menu{
        background: #efefef;

}
.res-menu-item{
        border-bottom: 1px solid #eeeeee;
}
.res-menu-item > a > img {
    width: 20px;
    margin-left: 7px;
} 
.responsive-box {
    position: absolute;
    right: 5px;
    top: 0px;
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    place-content: center;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    border-radius: 0px;
    padding: 3px 7px;
    border-radius: 0;
    -o-transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out;
    background-color: #63ba00;
}.bar1, .bar2, .bar3 {
    width: 28px;
    height: 1px !important;
    background: #fff;
    margin: 8px 0;
    transition: 0.4s;
}.cart-icon , .connect a span.icon{
    background: url(img/cart-icon.png) no-repeat center;
    float: right;
    border: 1px solid #63ba00;
    width: 33px;
    height: 33px;
    position: relative;
    margin-left: 10px;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
}.cart-icon span {
    background-color: #63ba00;
    font-family: opensanshebrewextrabold;
    width: 34px;
    text-align: center;
    position: absolute;
   right: 7px;
    top: -7px;
    line-height: normal;
    color: #fff;
    font-size: 13px;
    padding: 0 0 1px;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
}

/** Responsive Menu **/
.change.bar1 {
    -webkit-transform: rotate(-45deg) translate(-7px, 6px);
    transform: rotate(-45deg) translate(-7px, 6px);
  
    opacity: 1;
}
.change.bar2 {opacity: 0;}
.change.bar3 {
    -webkit-transform: rotate(45deg) translate(-7px, -6px);
    transform: rotate(45deg) translate(-7px, -6px);
 
    opacity: 1;
}
#responsive-menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    z-index: 9999;
    overflow: hidden !important;
    transition: 0.5s linear all;
    display: block;
        transform: translateX(100%);
}
#responsive-menu-overlay{
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
 height: calc(100% - 60px) !important;
    background: #efefef;
    transition: 0.1s linear all;
    overflow-y: auto;
    overflow-x: hidden;
        box-shadow: 0 0 12px rgba(0,0,0,0.14);   
         max-width: 100%;
         padding-top: 55px;
         padding-bottom: 15px;
}
.res-logo{
    background:#fff;
}
#menu-responsive-menu .mega-menu{
    opacity: 1;
}
#menu-responsive-menu {
    list-style-type: none;
    padding-right: 0;
    margin-top: 0;
    text-align: right;
    direction: rtl;
    margin-bottom: 0;
    padding:0;
}
#menu-responsive-menu > li{
       padding-top: 0;
    padding-bottom: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
}
.res-menu .col-sm-12 ul li {
    padding-bottom: 1rem;
    position: relative;
}
.res-menu .col-sm-12 > ul > li > a {
    color: #000;
    font-size: 16px;
    font-weight: 300;
        padding: 10px;
}.first-level-items > li > a,.second-level-menu > li > a{
    font-size: 16px;
    position: relative;
}.second-level-menu > li {
    padding-bottom: 10px !important;
}
#menu-responsive-menu .mega-menu-items h4::after{
    content: "";
    width: 25px;
    height: 15px;
    color: #1a88e2;
    position: absolute;
    top: 8px;
    bottom: auto;
    left: 8px;
    background-image: url(images/add.svg);
    background-repeat: no-repeat;
    background-position: right;
    transition: 0.1s linear all;
    background-size: 15px;
    opacity: 1;
}   
#menu-responsive-menu .mega-menu-items {
    position: relative;
}
#menu-responsive-menu .sub-menu{
    list-style-type: none;
    display: none;
    transition: 0.2s linear all;
    padding: 0px 10px 0px 15px;
    border-bottom: 1px solid #1a88e2;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}
#menu-responsive-menu .sub-menu li a {
    color: #1a88e2;
    font-size: 20px;
}
.scroll_bar{
    position: fixed;
    box-shadow: -4px -3px 10px 0px #000000;
    z-index: 9999;
    background: #fff;
    top: 0;
}.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #000;
	padding: 10px 2%;
    position: fixed;
    width: calc(100% - 4%);
    max-width: 100%;
    z-index: 999;
    box-shadow: 0 0 12px rgba(0,0,0,0.14);
    top: 0;
}.menu-header a {
    color: #fff !important;
}.menu-header a img {
    width: 18px;
}.menu-header .cart a ,.menu-header .connect a{
    display: flex;
    align-items: center;
    direction: ltr;
}
.row.res-menu ul {
    list-style-type: none;
    padding-right: 0;
}.res-menu-item > a {
    width: 80%;
    display: inline-block;
}.res-menu-item > .sub-menu-list,.first-level-btn  {
    display: inline-block;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.1);
       height: 48px;
    width: 50px;
    cursor: pointer;
    float: left;
}  .res-menu-item > .sub-menu-list .fa, .first-level-btn .fa, .go-back .fa{
    font-size: 25px;line-height: 50px;
}
.active-res-menu::before{
  content: "";
    display: block;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: -1;
    -o-transition: background-color 0.4s ease-out 0.5s, z-index 0.8s linear;
    transition: background-color 0.4s ease-out 0.5s, z-index 0.8s linear;
    width: 100%;
}
.first-level-items {
    margin-top: 0;
    padding-top: 0;
    background: #fff;
}ul.first-level-items > li {
    border-bottom: 1px solid #d7d7d7;
    margin-bottom: 0;
}.first-level-items li:last-child {
    border-bottom: 0;
}.fa {
    transition: 0.3s linear all;
}.active-item .fa {
    transform: rotate(180deg);
}.second-level-menu {
    position: fixed;
    background: #ffffff;
    height: calc(100% - 4%);
    top: 55px;
    width: 100%;
    max-width: 100%;
    bottom: 0;
    right: 0;
    left: 0;
    transition: 0.3s linear all;
    box-shadow: 0 0 12px rgba(0,0,0,0.14);
    overflow-y: auto;
    transform: translate3d(360px, 0, 0);
    z-index: 9999;
        height: max-content;
}
.slide-animation-in{
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: ma5-panelin;
}
@keyframes ma5-panelin{
    0% {
    -webkit-transform: translate3d(360px, 0, 0);
    transform: translate3d(360px, 0, 0);
}100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
}
.slide-animation-out{
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: ma5-panelout;
}
@keyframes ma5-panelout{
    0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}100% {
    -webkit-transform: translate3d(360px, 0, 0);
    transform: translate3d(360px, 0, 0);
}
}

.slide-animation-left{
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: ma5-paneleft;
}
@keyframes ma5-paneleft{
    0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}100% {
    -webkit-transform: translate3d(-360px, 0, 0);
    transform: translate3d(-360px, 0, 0);
}
}

.second-level-menu li{
    padding: 0 10px;
    padding-right: 10px !important;
}
.transzero{
transform: translateX(0);
}.last-level-title {
     text-align: center;
    background-color: rgb(99, 186, 0);
    cursor: pointer;
    display: block;
    position: relative;
    padding: 14px;
    margin-top: 0;
    position: sticky;
    top: 0;
    z-index: 99999;
    opacity: 1;
    color: #fff;
    margin-bottom: 0;
}.go-back {
       position: absolute;
    right: 8px;
    width: 50px;
    height: 50px;
    top: 0;
}
.go-back .fa{
        line-height: 50px;
            color: #fff;
}.second-level-menu li {
    padding-top: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
}.res-menu   a {
     text-decoration: none;
         color: #000;
}.first-level-btn{display: inline-block; height: 49px; position: relative; top: -11px; left: -10px; background: #63ba00;}
.first-level-btn .fa{
     line-height: 44px;
}.first-level-items li {
    display: block;
    clear: both;
    padding: 10px 10px;
}.first-level-items li .first-level-btn {
    transition: 1s linear all;
}
.first-level-items.active-list li .first-level-btn{
     opacity: 1;
}.active-res-menu .responsive-box{
    z-index: 9999;
}
.first-level-btn {
   display: inline-block;
    height: 48px;
    position: absolute;
    top: 0;
    left: 0;
    background: #63ba00;
    float: none;
    margin-left: 0;
    width: 22%;
}ul.menu-responsive-menu > li > a {
    font-size: 18px !important;
}.res-menu-item > a {
      display: flex;
    align-items: center;
}
/** Slide Effect Left **/

.second-level-menu{
     display: none;
         padding-top: 50px;
}
.second-level-menu.activated {
    top: 0;
    display: block;
    height: calc(100% - 0%);
    overflow-x: hidden;
    overflow-y: auto;
}

div#responsive-menu-overlay.overflow-hidden {
    overflow: hidden;
}
.second-level-menu{
    box-shadow: 0 0 0px rgb(0 0 0 / 14%);
}
.res-menu > .col-sm-12 {
    background: #fff;
}
.second-level-menu.activated{
    max-height: calc(100vh - 17vh);
    padding-bottom:30px;
}
.slide-animation-right{
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: ma5-paneright;
}
@keyframes ma5-paneright{
    0% {
   -webkit-transform: translate3d(-360px, 0, 0);
    transform: translate3d(-360px, 0, 0);
   
}100% {
      -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
}
.last-level-title {
    position: fixed;
    top: 0;
    width: 100%;
}
#responsive-menu-overlay.overflow-hidden{
    /*overflow: hidden !important;*/
    height: calc(100% - 0%) !important;
}

.first-level-items > li > a {
    width: 93%;
    display: inline-block;
}.second-level-menu > li > a {
    width: 93%;
    display: inline-block;
}
body.body-overflow.active-res-menu {
    overflow: hidden;
}