.offcanvas-header {
    
    padding: 0;
}
.offcanvas-top.navoffcanvas {
    height: 100vh !important;
    max-height: 100vh;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out !important;
    will-change: transform;
   
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
   
    -webkit-perspective: 1000;
    perspective: 1000;
    
    -webkit-transform: translate3d(0, -100%, 0);
    visibility: visible !important;
}

.offcanvas-top.navoffcanvas.show {
    transform: translateY(0);
}


.offcanvas.hiding, 
.offcanvas.show, 
.offcanvas.showing {
    visibility: visible;
}


.offcanvas-backdrop.fade.show ~ .offcanvas.hiding {
    transform: translateY(-100%) !important;
    transition: transform 0.7s ease-in-out !important;
}

.offcanvas-top .offcanvas-body {
    height: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
}

.navoffcanvas .offcanvas-header .btn-close {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 1050;
}


.navoffcanvas .row .col-12 img, 
.navoffcanvas .nitem,
.navoffcanvas #nfooter {
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}