@media screen and (max-width: 1100px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .row-offcanvas-right {
    right: 0;
  }
  .row-offcanvas-right .sidebar-offcanvas {
    right: -53%;
  }
  .row-offcanvas-right.active {
    right: 60%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .row-offcanvas-right .sidebar-offcanvas {
    right: -58%;
  }
  .row-offcanvas-right.active {
    right: 85%;
  }
}
@media screen and (max-width: 428px) {
  .row-offcanvas-right .sidebar-offcanvas {
    right: -58%;
  }
  .row-offcanvas-right.active {
    right: 85%;
  }
}
@media screen and (max-width: 393px) {
  .row-offcanvas-right .sidebar-offcanvas {
    right: -55%;
  }
  .row-offcanvas-right.active {
    right: 85%;
  }
}