.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: -57%;
}
.row-offcanvas-right.active {
  right: 40%;
}
.sidebar-offcanvas {
  position: absolute;
  width: 100%;
}
@media screen and (max-width: 1919px) {
.row-offcanvas-right .sidebar-offcanvas {
  right: -63%;
}
}
@media screen and (max-width: 1366px) {
  .row-offcanvas-right.active {
    right: 50%;
  }
}
@media screen and (max-width: 1059px) {
  .row-offcanvas-right.active {
    right: 60%;
  }
}
@media screen and (max-width: 900px) {
  .row-offcanvas-right.active {
    right: 70%;
  }
}
@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: -55%;
  }
  .row-offcanvas-right.active {
    right: 78%;
  }
}
@media screen and (max-width: 393px) {
  .row-offcanvas-right .sidebar-offcanvas {
    right: -55%;
  }
  .row-offcanvas-right.active {
    right: 82%;

  }
}