AnonymousFox

/home/develito/www/plugins/system/t3/base-bs3/less/off-canvas.less

/**
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         http://t3-framework.org
 * @credits       Mary Lou - http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
 *------------------------------------------------------------------------------
 */

//
// VARIABLES & MIXINS
// ------------------

// Prevent Bootstrap Upgrading errors
@import "../bootstrap/less/variables.less";

// Prevent Bootstrap Upgrading errors
@import "../bootstrap/less/mixins.less";

// T3 Base variables
@import "variables.less";

// T3 Base mixins
@import "mixins.less";

//
// OFF-CANVAS
// -------------------------------------

// Toggle Button
// -------------------
.off-canvas-toggle {
  z-index: 100;
}

// The Wrapper
// -------------------
html,
body {
  height: 100%;
}

.noscroll {
  position: fixed;
  overflow-y: scroll;
  width: 100%;
}

.t3-wrapper {
  // Need a background (Usually @body-bg). Otherwise the sidebar will overlap.
  background: @body-bg;
  position: relative;
  left: 0;
  z-index: 99;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  overflow: visible;

&::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background: rgba(0,0,0,0.2);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    z-index: 100;
  }
}

.t3-mainnav-android {
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	&::after {
		-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
		transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
	}
}

.off-canvas-open {
  .t3-wrapper::after {
    width: 100%;
    height: 10000px;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .t3-mainnav-android::after {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
}

// The Sidebar
// -------------------
.t3-off-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  visibility: hidden;
  width: @t3-off-canvas-width;
  height: 100%;

overflow: hidden;
  
  -webkit-transition: all 0.5s;
  transition: all 0.5s;

&::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    content: '';
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
}

.off-canvas-right.t3-off-canvas {
  display: none;
}
.off-canvas-right .off-canvas-right.t3-off-canvas {
  display: block;
}

html[dir="ltr"] .off-canvas-right.t3-off-canvas {
  left: auto;
  right: 0;
}

.off-canvas-open {
  .t3-off-canvas::after {
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  }

.off-canvas-current {
    visibility: visible;
  }

.t3-off-canvas {
    overflow-y: auto;
  }
}

//
// OFF-CANVAS CONTENT STYLES
// -------------------------------------

.t3-off-canvas {

// Generic
  // -----------------------------------
  background: @t3-off-canvas-background;
  color: @t3-off-canvas-text-color;

// Header
  // -----------------------------------
  .t3-off-canvas-header {
    background: @t3-off-canvas-header-background;
    color: @t3-off-canvas-header-text-color;
    padding: @padding-base-vertical @padding-base-horizontal;

// Title
    h2 {
      margin: 0;
    }

}

// Close Button
  .close {
  }

// Body
  // ----------------------------------
  .t3-off-canvas-body {

padding: @padding-base-vertical @padding-base-horizontal;

// Links
    // ------------
    a {
      color: @t3-off-canvas-link-color;

&:hover,
      &:focus {
        color: @t3-off-canvas-link-hover-color;
      }

&:focus {
        .tab-focus();
      }
    }

// Navigations
    // ------------
    .nav {
    }

// Dropdown Menu
    // Always show Dropdown Menu in Off-Canvas Sidebar
    .dropdown-menu {
      position: static;
      float: none;
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      .box-shadow(none);
    }

// Modules
    // ------------
    .t3-module {
    }

// End Off-Canvas Body
  }

// End Off-Canvas Content Styles
}

//
// OFF-CANVAS EFFECTS
// -------------------------------------

// Effect 1: Slide in on top
// -------------------------
.off-canvas-effect-1.t3-off-canvas {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.off-canvas-effect-1.off-canvas-open .off-canvas-effect-1.t3-off-canvas {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.off-canvas-effect-1.t3-off-canvas::after {
  display: none;
}

// off-canvas on right side
.off-canvas-right.off-canvas-effect-1.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

// Effect 2: Reveal
// ----------------
.off-canvas-effect-2.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0);
  transform: translate3d(@t3-off-canvas-width, 0, 0);
}

.off-canvas-effect-2.t3-off-canvas {
  z-index: 1;
}

.off-canvas-effect-2.off-canvas-open .off-canvas-effect-2.t3-off-canvas {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.off-canvas-effect-2.t3-off-canvas::after {
  display: none;
}

// off-canvas on right side
.off-canvas-right.off-canvas-effect-2.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0);
  transform: translate3d(-@t3-off-canvas-width, 0, 0);
}

// Effect 3: Push
// --------------
.off-canvas-effect-3.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0);
  transform: translate3d(@t3-off-canvas-width, 0, 0);
}

.off-canvas-effect-3.t3-off-canvas {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.off-canvas-effect-3.off-canvas-open .off-canvas-effect-3.t3-off-canvas {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.off-canvas-effect-3.t3-off-canvas::after {
  display: none;
}

// off-canvas on right side
.off-canvas-right.off-canvas-effect-3.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0);
  transform: translate3d(-@t3-off-canvas-width, 0, 0);
}

.off-canvas-right.off-canvas-effect-3.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

// Effect 4: Slide along
// ---------------------
.off-canvas-effect-4.off-canvas-open .t3-wrapper,
.off-canvas-effect-4.off-canvas-open .t3-mainnav-android {
  -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0);
  transform: translate3d(@t3-off-canvas-width, 0, 0);
}

.off-canvas-effect-4.t3-off-canvas {
  z-index: 1;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

.off-canvas-effect-4.off-canvas-open .off-canvas-effect-4.t3-off-canvas {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.off-canvas-effect-4.t3-off-canvas::after {
  display: none;
}

// off-canvas on right side
.off-canvas-right.off-canvas-effect-4.off-canvas-open .t3-wrapper,
.off-canvas-right.off-canvas-effect-4.off-canvas-open .t3-mainnav-android {
  -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0);
  transform: translate3d(-@t3-off-canvas-width, 0, 0);
}

.off-canvas-right.off-canvas-effect-4.t3-off-canvas {
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0);
}

// Effect 5: Reverse slide out
// ---------------------------
.off-canvas-effect-5.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0);
  transform: translate3d(@t3-off-canvas-width, 0, 0);
}

.off-canvas-effect-5.t3-off-canvas {
  z-index: 1;
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0);
}

.off-canvas-effect-5.off-canvas-open .off-canvas-effect-5.t3-off-canvas {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

// off-canvas on right side
.off-canvas-right.off-canvas-effect-5.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0);
  transform: translate3d(-@t3-off-canvas-width, 0, 0);
}

.off-canvas-right.off-canvas-effect-5.t3-off-canvas {
  z-index: 1;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

// Effect 6: Rotate pusher
// -----------------------
body.off-canvas-effect-6 {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

.off-canvas-effect-6 .t3-wrapper {
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: auto;
  overflow: hidden;
}

.off-canvas-effect-6.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0) rotateY(-15deg);
  transform: translate3d(@t3-off-canvas-width, 0, 0) rotateY(-15deg);
}

.off-canvas-effect-6.t3-off-canvas {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.off-canvas-effect-6.off-canvas-open .off-canvas-effect-6.t3-off-canvas {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.off-canvas-effect-6.t3-off-canvas::after {
  display: none;
}

.off-canvas-right.off-canvas-effect-6 .t3-wrapper {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.off-canvas-right.off-canvas-effect-6.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0) rotateY(15deg);
  transform: translate3d(-@t3-off-canvas-width, 0, 0) rotateY(15deg);
}

.off-canvas-right.off-canvas-effect-6.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

// Effect 7: 3D rotate in
// ----------------------
body.off-canvas-effect-7 {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}

.off-canvas-effect-7 .t3-wrapper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.off-canvas-effect-7.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0);
  transform: translate3d(@t3-off-canvas-width, 0, 0);
}

.off-canvas-effect-7.t3-off-canvas {
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  transform: translate3d(-100%, 0, 0) rotateY(-90deg);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.off-canvas-effect-7.off-canvas-open .off-canvas-effect-7.t3-off-canvas {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
  transform: translate3d(-100%, 0, 0) rotateY(0deg);
}

// off-canvas on right side
body.off-canvas-effect-7.off-canvas-right {
  -webkit-perspective-origin: 100% 50%;
  perspective-origin: 100% 50%;
}

.off-canvas-right.off-canvas-effect-7.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0);
  transform: translate3d(-@t3-off-canvas-width, 0, 0);
}

.off-canvas-right.off-canvas-effect-7.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
  transform: translate3d(100%, 0, 0) rotateY(90deg);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.off-canvas-right.off-canvas-effect-7.off-canvas-open .off-canvas-right.off-canvas-effect-7.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0) rotateY(0deg);
  transform: translate3d(100%, 0, 0) rotateY(0deg);
}

// Effect 8: 3D rotate out
// -----------------------
body.off-canvas-effect-8 {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}

.off-canvas-effect-8 .t3-wrapper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.off-canvas-effect-8.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0);
  transform: translate3d(@t3-off-canvas-width, 0, 0);
}

.off-canvas-effect-8.t3-off-canvas {
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg);
  transform: translate3d(-100%, 0, 0) rotateY(90deg);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.off-canvas-effect-8.off-canvas-open .off-canvas-effect-8.t3-off-canvas {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
  transform: translate3d(-100%, 0, 0) rotateY(0deg);
}

.off-canvas-effect-8.t3-off-canvas::after {
  display: none;
}

// off-canvas on right side
body.off-canvas-effect-8.off-canvas-right {
  -webkit-perspective-origin: 100% 50%;
  perspective-origin: 100% 50%;
}

.off-canvas-right.off-canvas-effect-8.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0);
  transform: translate3d(-@t3-off-canvas-width, 0, 0);
}

.off-canvas-right.off-canvas-effect-8.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg);
  transform: translate3d(100%, 0, 0) rotateY(-90deg);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.off-canvas-right.off-canvas-effect-8.off-canvas-open .off-canvas-right.off-canvas-effect-8.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0) rotateY(0deg);
  transform: translate3d(100%, 0, 0) rotateY(0deg);
}

// Effect 9: Scale down pusher
// ---------------------------
body.off-canvas-effect-9 {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

.off-canvas-effect-9 .t3-wrapper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.off-canvas-effect-9.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(0, 0, -@t3-off-canvas-width);
  transform: translate3d(0, 0, -@t3-off-canvas-width);
}

.off-canvas-effect-9.t3-off-canvas {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.off-canvas-effect-9.off-canvas-open .off-canvas-effect-9.t3-off-canvas {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.off-canvas-effect-9.t3-off-canvas::after {
  display: none;
}

// off-canvas on right side
.off-canvas-right.off-canvas-effect-9.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

// Effect 10: Scale up
// -------------------
body.off-canvas-effect-10 {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}

.off-canvas-effect-10.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0);
  transform: translate3d(@t3-off-canvas-width, 0, 0);
}

.off-canvas-effect-10.t3-off-canvas {
  z-index: 1;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, -@t3-off-canvas-width);
  transform: translate3d(0, 0, -@t3-off-canvas-width);
}

.off-canvas-effect-10.off-canvas-open .off-canvas-effect-10.t3-off-canvas {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

// off-canvas on right side
body.off-canvas-effect-10.off-canvas-right {
  -webkit-perspective-origin: 100% 50%;
  perspective-origin: 100% 50%;
}

.off-canvas-right.off-canvas-effect-10.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0);
  transform: translate3d(-@t3-off-canvas-width, 0, 0);
}

// Effect 11: Scale and rotate pusher
// ----------------------------------
body.off-canvas-effect-11 {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

.off-canvas-effect-11 .t3-wrapper {
  height: auto;
  overflow: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.off-canvas-effect-11.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
  transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}

.off-canvas-effect-11.t3-off-canvas {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.off-canvas-effect-11.off-canvas-open .off-canvas-effect-11.t3-off-canvas {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.off-canvas-effect-11.t3-off-canvas::after {
  display: none;
}

// off-canvas on right side
.off-canvas-right.off-canvas-effect-11.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(-100px, 0, -600px) rotateY(20deg);
  transform: translate3d(-100px, 0, -600px) rotateY(20deg);
}

.off-canvas-right.off-canvas-effect-11.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

// Effect 12: Open door
// --------------------
body.off-canvas-effect-12 {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

.off-canvas-effect-12 .t3-wrapper {
  height: auto;
  overflow: hidden;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.off-canvas-effect-12.off-canvas-open .t3-wrapper {
  -webkit-transform: rotateY(-10deg);
  transform: rotateY(-10deg);
}

.off-canvas-effect-12.t3-off-canvas {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.off-canvas-effect-12.off-canvas-open .off-canvas-effect-12.t3-off-canvas {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.off-canvas-effect-12.t3-off-canvas::after {
  display: none;
}

// off-canvas on right side
.off-canvas-right.off-canvas-effect-12 .t3-wrapper {
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.off-canvas-right.off-canvas-effect-12.off-canvas-open .t3-wrapper {
  -webkit-transform: rotateY(10deg);
  transform: rotateY(10deg);
}

.off-canvas-right.off-canvas-effect-12.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

// Effect 13: Fall down
// --------------------
body.off-canvas-effect-13 {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}

.off-canvas-effect-13.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0);
  transform: translate3d(@t3-off-canvas-width, 0, 0);
}

.off-canvas-effect-13.t3-off-canvas {
  z-index: 1;
  opacity: 1;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.off-canvas-effect-13.off-canvas-open .off-canvas-effect-13.t3-off-canvas {
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-speed: 0.2s;
  transition-speed: 0.2s;
}

// off-canvas on right side
body.off-canvas-effect-13.off-canvas-right {
  -webkit-perspective-origin: 100% 50%;
  perspective-origin: 100% 50%;
}

.off-canvas-right.off-canvas-effect-13.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0);
  transform: translate3d(-@t3-off-canvas-width, 0, 0);
}

// Effect 14: Delayed 3D rotate
// ----------------------------
body.off-canvas-effect-14 {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}

.off-canvas-effect-14 .t3-wrapper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.off-canvas-effect-14.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0);
  transform: translate3d(@t3-off-canvas-width, 0, 0);
}

.off-canvas-effect-14.t3-off-canvas {
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg);
  transform: translate3d(-100%, 0, 0) rotateY(90deg);
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.off-canvas-effect-14.off-canvas-open .off-canvas-effect-14.t3-off-canvas {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
  transform: translate3d(-100%, 0, 0) rotateY(0deg);
}

// off-canvas on right side
body.off-canvas-effect-14.off-canvas-right {
  -webkit-perspective-origin: 100% 50%;
  perspective-origin: 100% 50%;
}

.off-canvas-right.off-canvas-effect-14.off-canvas-open .t3-wrapper {
  -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0);
  transform: translate3d(-@t3-off-canvas-width, 0, 0);
}

.off-canvas-right.off-canvas-effect-14.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg);
  transform: translate3d(100%, 0, 0) rotateY(-90deg);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.off-canvas-right.off-canvas-effect-14.off-canvas-open .off-canvas-right.off-canvas-effect-14.t3-off-canvas {
  -webkit-transform: translate3d(100%, 0, 0) rotateY(0deg);
  transform: translate3d(100%, 0, 0) rotateY(0deg);
}

//
// Fallback for old IE (<IE10)
// that don't support 3D transforms
// -----------------------------------------------------
.old-ie {
  .t3-off-canvas {
    z-index: 100!important;
    left: -@t3-off-canvas-width;
  }
}

html[dir="ltr"] .off-canvas-right.old-ie {
  .t3-off-canvas {
    right: -@t3-off-canvas-width;
    left: auto;
  }
}

//
// Fix conflict with modal
// -----------------------------------------------------
.modal-open .t3-wrapper {
  position: static;
}