body {
    overflow-x: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch
}

@media (max-width: 991.98px) {
    [canvas=container], [off-canvas], body, html {
        height: auto;
        margin: 0;
        padding: 0;
        box-sizing: border-box
    }

    [canvas] {
        z-index: 1
    }

    [canvas=container] {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        position: relative;
        background-color: #fff;
        box-shadow: 0 8px 0 0 #fff, 0 -8px 0 0 #fff, 8px 0 8px -4px rgba(0, 0, 0, .2), -8px 0 8px -4px rgba(0, 0, 0, .2);
        -webkit-overflow-scrolling: touch
    }

    [canvas=container]:after, [canvas=container]:before {
        clear: both;
        content: '';
        display: table
    }

    [off-canvas] {
        display: none;
        position: fixed;
        overflow: hidden;
        overflow-y: auto;
        background-color: #495057;
        color: #fff;
        -webkit-overflow-scrolling: touch
    }

    [off-canvas*=top] {
        width: 100%;
        height: 256px;
        top: 0
    }

    [off-canvas*=right] {
        width: 256px;
        height: 100%;
        top: 0;
        right: 0
    }

    [off-canvas*=bottom] {
        width: 100%;
        height: 256px;
        bottom: 0
    }

    [off-canvas*=left] {
        width: 256px;
        height: 100%;
        top: 0;
        left: 0
    }

    [off-canvas*=reveal] {
        z-index: 0
    }

    [off-canvas*=push] {
        z-index: 1
    }

    [off-canvas*=overlay] {
        z-index: 9999
    }

    [off-canvas*=shift] {
        z-index: 0
    }

    [canvas], [off-canvas] {
        transform: translate(0, 0);
        transition: transform .3s;
        -webkit-backface-visibility: hidden
    }

    [off-canvas*=shift][off-canvas*=top] {
        transform: translate(0, 50%)
    }

    [off-canvas*=shift][off-canvas*=right] {
        transform: translate(-50%, 0)
    }

    [off-canvas*=shift][off-canvas*=bottom] {
        transform: translate(0, -50%)
    }

    [off-canvas*=shift][off-canvas*=left] {
        transform: translate(50%, 0)
    }
}

@media print and (max-width: 991.98px) {
    [canvas] {
        transform: translate(0, 0) !important
    }

    [off-canvas] {
        display: none !important
    }
}

nav.offcanvas .navbar-toggler {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: .25rem;
    background-size: 100% 100%;
    border: 0;
    border-radius: 0
}

nav.offcanvas .navbar-toggler.navbar-toggle-offcanvas-right .navbar-toggler-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-top: -.25rem;
    margin-left: -.25rem;
    background-size: 1.875rem;
    background-position: center center;
    /*background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgba(255, 255, 255, 0.5)' d='M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E")*/
    color: #000000;
}

@media (max-width: 991.98px) {
    .offcanvas-desktop {
        display: none
    }

    main.container {
        margin-top: 2.5rem
    }
}

@media (min-width: 992px) {
    [canvas=mobile], [off-canvas] {
        display: none
    }

    main.container {
        margin-top: 3.75rem
    }
}