/* HIRAKU CUSTOMIZED STYLES */
.js-hiraku-offcanvas .js-hiraku-offcanvas-sidebar {
  width: 350px; }

.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar {
  /* TODO: add customized scrollbar */
  overflow-y: auto;
  /* disable scroll */ }
/* MENU OVERFLOWS CONTENT */
.js-hiraku-offcanvas-body-right .js-hiraku-header-fixed {
  margin-left: -70%; }

.js-hiraku-offcanvas-body-left .js-hiraku-header-fixed {
  margin-left: 70%; }

.js-hiraku-offcanvas-body-right {
  left: 0; }

.js-hiraku-offcanvas-body-left {
  left: 0; }

.js-hiraku-offcanvas-active {
  background: rgba(0, 0, 0, .9); }
  .js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar {
    background-color: #fff; }

.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar-left.active {
  transition: margin-left 0.5s cubic-bezier(0.68, 0.15, 0.23, 1); }
/* END MENU OVERFLOWS CONTENT */
@media screen and (max-width: 412px) {
  .js-hiraku-offcanvas .js-hiraku-offcanvas-sidebar {
    width: calc(100% - 62px);
    /*62px - width of close button*/ } }
/**
 * Off Canvas
 * TODO: what this code for?
 * --------------------------------------------------
 */
@media screen and (min-width: 768px) {
  .js-hiraku-offcanvas {
    background: none;
    display: block;
    position: static; }

  .js-hiraku-offcanvas .js-hiraku-offcanvas-sidebar {
    margin-left: 0;
    position: static;
    width: auto; } }