.mobile-sidebar {
  margin-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  height: 100%;
  width: 290px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
  transform: translateX(-100%);
  transition: transform 0.2s ease-in-out;
  background: var(--porto-body-bg);
}
.mobile-sidebar.sidebar {
  position: fixed;
  padding-top: 0;
  padding-bottom: 0;
}
.mobile-sidebar .sidebar-toggle {
  display: block;
  background: var(--porto-body-bg);
}
.mobile-sidebar > [data-plugin-sticky] {
  height: 100%;
}
.mobile-sidebar .widget {
  margin-top: 0;
}
.mobile-sidebar .sidebar-content {
  display: block;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}
.mobile-sidebar .sidebar-content::-webkit-scrollbar {
  width: 5px;
}
.mobile-sidebar .sidebar-content::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background: var(--porto-gray-2);
}
.column2-right-sidebar .mobile-sidebar,
.column2-wide-right-sidebar .mobile-sidebar,
.mobile-sidebar.right-sidebar {
  right: 0;
  left: auto;
  transform: translateX(100%);
}
html.sidebar-opened body > :not(.mfp-bg):not(.mfp-wrap) {
  z-index: 0;
}
html.sidebar-opened .mobile-sidebar {
  z-index: 9000;
  transition: transform 0.3s;
  transform: translateX(0);
}
html.sidebar-opened .mobile-sidebar .sidebar-toggle i:before {
  content: "\f00d";
}
html.sidebar-opened .page-wrapper {
  left: 260px;
  overflow: visible;
}
html.sidebar-opened #header.sticky-header .header-main.sticky {
  left: 260px;
}
html.sidebar-opened.sidebar-right-opened
  #header.sticky-header
  .header-main.sticky,
html.sidebar-opened.sidebar-right-opened .page-wrapper {
  left: -260px;
}