/*
 * Style tweaks
 * --------------------------------------------------
 */
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}


/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 991px) {
  .row-offcanvas {
    position: relative;
    right: 0;
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .sidebar-offcanvas {
    height: 100%;
  }

  /*
  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }
  */

  .row-offcanvas-right.active.menu {
    -webkit-transform: translateX(-310px);
       -moz-transform: translateX(-310px);
        -ms-transform: translateX(-310px);
         -o-transform: translateX(-310px);
            transform: translateX(-310px);
  }

  .row-offcanvas-right.active.filter {
    right: 310px;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -310px;
  }

  .row-offcanvas-right.active .sidebar-offcanvas, .row-offcanvas-right.active .categoryBox {
        -webkit-transition: visibility 0s linear, opacity 0s linear, right .25s ease-out;
           -moz-transition: visibility 0s linear, opacity 0s linear, right .25s ease-out;
                transition: visibility 0s linear, opacity 0s linear, right .25s ease-out;
  }

  .row-offcanvas-right.active.menu .sidebar-offcanvas {
        visibility: visible;
        opacity: 1;
  }

  .row-offcanvas-right.active.filter .categoryBox {
        visibility: visible;
        opacity: 1;
        right: 30px;
  }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 310px;
        z-index: 200;
        opacity: 0;
        visibility: hidden;
        display: block;
        -webkit-transition: visibility 0s linear .25s, opacity 0s linear .25s;
           -moz-transition: visibility 0s linear .25s, opacity 0s linear .25s;
                transition: visibility 0s linear .25s, opacity 0s linear .25s;
    }

    .categoryBox {
        position: fixed;
        top: 0;
        right: -280px;
        width: 310px;
        z-index: 200;
        height: 100vh;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        box-shadow: -15px 0 45px rgba(0, 0, 0, 0.4);
        z-index: 5000;
        -webkit-transition: visibility 0s linear .25s, opacity 0s linear .25s, right .25s ease-out;
           -moz-transition: visibility 0s linear .25s, opacity 0s linear .25s, right .25s ease-out;
                transition: visibility 0s linear .25s, opacity 0s linear .25s, right .25s ease-out;
    }
}

@media (max-width: 380px) {
  .row-offcanvas-right.active.menu {
    -webkit-transform: translateX(-295px);
       -moz-transform: translateX(-295px);
        -ms-transform: translateX(-295px);
         -o-transform: translateX(-295px);
            transform: translateX(-295px);
  }


    .row-offcanvas-right.active.filter {
      right: 295px;
    }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -295px;
  }

  .sidebar-offcanvas {
      width: 295px;
  }

  .categoryBox {
      width: 295px;
      /*right: -265px*/
  }
}