#off-canvas-nav {
    display: none
    }
@media (max-width: 767px) {
    .off-canvas {
        width: 100%;
        overflow-x: hidden;
        position: relative
        }
    .off-canvas body {
        width: 100%;
        overflow-x: hidden;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box
        }
    .off-canvas body > * {
        left: 0;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
        -webkit-transition: -webkit-transform 500ms ease;
        -moz-transition: -moz-transform 500ms ease;
        -o-transition: -o-transform 500ms ease;
        transition: transform 500ms ease;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden
        }
    .off-canvas #t3-mainnav .nav-collapse, .off-canvas #ja-mainnav .nav-collapse {
        display: none
        }
    .off-canvas #off-canvas-nav {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        z-index: 1;
        background: none
        }
    .off-canvas #off-canvas-nav .t3-mainnav {
        margin: 0;
        position: absolute;
        left: 0;
        top: 0;
        width: 250px;
        -webkit-transform: translatex(-100%);
        -moz-transform: translatex(-100%);
        -o-transform: translatex(-100%);
        transform: translatex(-100%)
        }
    .off-canvas #off-canvas-nav .t3-mainnav .nav-collapse {
        height: auto;
        background: none
        }
    .off-canvas-enabled body > * {
        -webkit-transform: translatex(250px);
        -moz-transform: translatex(250px);
        -o-transform: translatex(250px);
        transform: translatex(250px)
        }
    .off-canvas-enabled #t3-mainnav {
        display: block
        }
    }