@media (max-width: 787px) {
  
  .off-canvas-enabled body {
    background: #121212;
  }
  .off-canvas-enabled body .zen-container {
    margin: 0;
    padding-left: 20px !important;
  }
  .off-canvas #paneltrigger a {
    color: #fff;
  }
  .off-canvas #paneltrigger a:hover {
    color: #7030A0;
  }
  .off-canvas #navwrap button {
    color: #fff;
  }
  .off-canvas #navwrap button:hover {
    color: #7030A0;
  }
  #off-canvas-nav {
    
  }
  #off-canvas-nav .t3-mainnav {
    
    
  }
  #off-canvas-nav .t3-mainnav [class^="icon-"] {
    background: none;
  }
  #off-canvas-nav .t3-mainnav .mega-inner {
    padding: 0 !important;
  }
  #off-canvas-nav .t3-mainnav .moduletable {
    
    padding: 10px;
    
    color: #333;
  }
  #off-canvas-nav .t3-mainnav .moduletable h1,
  #off-canvas-nav .t3-mainnav .moduletable h2,
  #off-canvas-nav .t3-mainnav .moduletable h3,
  #off-canvas-nav .t3-mainnav .moduletable h4,
  #off-canvas-nav .t3-mainnav .moduletable h5,
  #off-canvas-nav .t3-mainnav .moduletable h6,
  #off-canvas-nav .t3-mainnav .moduletable blockquote {
    color: #333;
  }
  #off-canvas-nav .t3-mainnav .nav-collapse {
    float: left;
    width: 100%;
  }
  #off-canvas-nav .t3-mainnav .nav-collapse li.active a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  #off-canvas-nav .t3-mainnav .nav-collapse li a {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    margin: 0;
    padding: 12px;
    text-align: left !important;
  }
  #off-canvas-nav .t3-mainnav ul > li {
    
    
  }
  #off-canvas-nav .t3-mainnav ul > li .separator {
    float: left;
    width: 100%;
    text-align: left;
    color: #fff;
  }
  #off-canvas-nav .t3-mainnav ul > li a,
  #off-canvas-nav .t3-mainnav ul > li .separator {
    
    border-bottom: 1px solid #0d0d0d;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    
    padding: 11px 20px;
    
    background: #121212;
    color: #fff;
    
    
  }
  #off-canvas-nav .t3-mainnav ul > li a:hover,
  #off-canvas-nav .t3-mainnav ul > li .separator:hover {
    color: #7030A0;
  }
  #off-canvas-nav .t3-mainnav ul > li a:after,
  #off-canvas-nav .t3-mainnav ul > li .separator:after {
    display: none;
  }
  #off-canvas-nav .t3-mainnav ul > li a.active > a,
  #off-canvas-nav .t3-mainnav ul > li .separator.active > a {
    background: #121212;
    color: #7030A0;
  }
  #off-canvas-nav .t3-mainnav ul > li ul {
    margin: 0;
  }
  #off-canvas-nav .t3-mainnav ul > li ul li {
    padding: 0 !important;
    
    
  }
  #off-canvas-nav .t3-mainnav ul > li ul li a {
    background: #232323;
    
    color: #999;
    
    padding: 6px 0 6px 20px !important;
    
    border-bottom: 0;
  }
  #off-canvas-nav .t3-mainnav ul > li ul li a:hover {
    background: none;
  }
  #off-canvas-nav .t3-mainnav ul > li ul li.active > a {
    color: #7030A0 !important;
  }
  #off-canvas-nav .t3-mainnav ul > li ul li li {
    
  }
  #off-canvas-nav .t3-mainnav ul > li ul li li a {
    border: 0;
    padding: 6px 0 6px 50px !important;
  }
}