/* @preserve
* offside-js 1.4.0 26-03-2018
* Minimal JavaScript kit without library dependencies to push things off-canvas using just class manipulation
* https://github.com/toomuchdesign/offside.git
*
* by Andrea Carraro
* Available under the MIT license @endpreserve
*/

/* custom code to remove transition animation */
.offside,
.overlay {
  transition: none !important;
}

:root {
  /* Define the width of the offside element as a CSS variable */
  --offside-width: 360px;
}

@media(max-width: 1000px) {
  :root {
    --offside-width: 320px;
  }
}

@media(max-width: 350px) {
  :root {
    --offside-width: 280px;
  }
}

/* Off-canvas element CSS */
.offside {
  position: fixed; /* Does not play well with some old browsers (see: README) */
  width: var(--offside-width); /* Use the CSS variable */
  height: 100%;
  top: 0;
  z-index: 9999;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
}

/* Left off-canvas elements default status: out of the page */
.offside,
.offside--left {
  left: calc(-1 * var(--offside-width)); /* Use the CSS variable with calc for negative values */
}

/* Right off-canvas elements default status: out of the page */
.offside--right {
  left: auto;
  right: calc(-1 * var(--offside-width)); /* Use the CSS variable with calc for negative values */
}

/*
* Left off-canvas element is open:
* - off-canvas element slides in
* - container elements slides out
*/
.offside--left.is-open,
.offside-js--is-left .offside-sliding-element {
  -webkit-transform: translate3d(var(--offside-width), 0, 0); /* Use the CSS variable */
  transform: translate3d(var(--offside-width), 0, 0); /* Use the CSS variable */
}

/*
* Right off-canvas element is open:
* - off-canvas element slides in
* - container elements slides out
*/
.offside--right.is-open,
.offside-js--is-right .offside-sliding-element {
  -webkit-transform: translate3d(calc(-1 * var(--offside-width)), 0, 0); /* Use the CSS variable with calc for negative values */
  transform: translate3d(calc(-1 * var(--offside-width)), 0, 0); /* Use the CSS variable with calc for negative values */
}

/* Elements Transitions */
.offside-js--interact .offside,
.offside-js--interact .offside-sliding-element {
  -webkit-transition: -webkit-transform 125ms cubic-bezier(.16, .68, .43, .99);
  transition: transform 125ms cubic-bezier(.16, .68, .43, .99);
  
  /* improves performance issues on mobile */
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

/* Body overflow */
.offside-js--init {
  overflow-x: hidden;
}

/* Fallback movements for browser not supporting CSS 3d Transitions */
/* Modernizr false negative csstransforms3d fix, reset CSS 3d Transitions */
.no-csstransforms3d .offside {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.no-csstransforms3d .offside-sliding-element {
  overflow-x: hidden;
  position: relative;
}

/* Element is open: off-canvas element slides in */
.no-csstransforms3d .offside--left.is-open {
  left: 0;
}

.no-csstransforms3d .offside--right.is-open {
  right: 0;
}

/* Element is open: container elements slide out */
.no-csstransforms3d > .offside-js--is-left .offside-sliding-element {
  right: calc(-1 * var(--offside-width)); /* Use the CSS variable with calc for negative values */
}

.no-csstransforms3d > .offside-js--is-right .offside-sliding-element {
  left: calc(-1 * var(--offside-width)); /* Use the CSS variable with calc for negative values */
}