/*
 * Style tweaks
 * --------------------------------------------------
 */
@media screen and (max-width: 1200px) {
    html,
    body {
        overflow-x: hidden; /* Prevent scroll on narrow devices */
    }
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 1200px) {
    .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-left {
        left: 0;
    }

        .row-offcanvas-right.active {
            /* right: 100%; */
            -webkit-transform: translateX(calc(-100% + 61px));
               -moz-transform: translateX(calc(-100% + 61px));
                    transform: translateX(calc(-100% + 61px));
            /* right: calc(100% - 61px); */
            /* -webkit-transform: translateX(calc((100% - 61px) * -1));
               -moz-transform: translateX(calc((100% - 61px) * -1));
                    transform: translateX(calc((100% - 61px) * -1)); */
        }

        .row-offcanvas-left.active {
            left: 100%;
            margin-left: -61px !important;
            /* left: calc(100% - 61px); */
            /* -webkit-transform: translateX(calc(100% - 61px));
               -moz-transform: translateX(calc(100% - 61px));
                    transform: translateX(calc(100% - 61px)); */
        }

    .sidebar-offcanvas {
        display: none;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        /* padding-right: 61px; */
        padding-left: 61px;
    }

        .row-offcanvas-right
        .sidebar-offcanvas {
            right: -100%;
        }

        .row-offcanvas-left
        .sidebar-offcanvas {
            left: -100%;
            margin-left: 61px;
        }
}