@media (max-width: 575.98px) {
  .offcanvas.offcanvas-end.vh-offcanvas {
    width: 100%;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .offcanvas.offcanvas-end.vh-offcanvas {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .offcanvas.offcanvas-end.vh-offcanvas {
    width: 75%;
  }
}

@media (min-width: 992px) {
  .offcanvas.offcanvas-end.vh-offcanvas {
    width: 50%;
  }
}

.offcanvas-end {
  width: 85%;
}

.vh-offcanvas-25 {
 width: 25%;
}

.vh-offcanvas-35 {
 width: 35%;
}

.vh-offcanvas-50 {
 width: 50%;
}

/* Bootstrap SM */
@media (max-width: 575.98px) {
  .offcanvas-end {
    width: 100%;
  }

  .vh-offcanvas-25 {
   width: 100%;
  }

  .vh-offcanvas-35 {
   width: 100%;
  }

  .vh-offcanvas-50 {
   width: 100%;
  }
}

/* Bootstrap MD */
@media (min-width: 576px) and (max-width: 767.98px) {
  .offcanvas-end {
    width: 100%;
  }

  .vh-offcanvas-25 {
   width: 100%;
  }

  .vh-offcanvas-35 {
   width: 100%;
  }

  .vh-offcanvas-50 {
   width: 100%;
  }
}


/* Bootstrap LG */
@media (min-width: 768px) and (max-width: 991.98px) {
  .offcanvas-end {
    width: 100%;
  }

  .vh-offcanvas-25 {
   width: 100%;
  }

  .vh-offcanvas-35 {
   width: 100%;
  }

  .vh-offcanvas-50 {
   width: 75%;
  }
}