.offside,
.overlay {
transition: none !important;
}
:root { --offside-width: 360px;
}
@media(max-width: 1000px) {
:root {
--offside-width: 320px;
}
}
@media(max-width: 350px) {
:root {
--offside-width: 280px;
}
} .offside {
position: fixed; width: var(--offside-width); height: 100%;
top: 0;
z-index: 9999;
overflow: auto;
-webkit-overflow-scrolling: touch; } .offside,
.offside--left {
left: calc(-1 * var(--offside-width)); } .offside--right {
left: auto;
right: calc(-1 * var(--offside-width)); } .offside--left.is-open,
.offside-js--is-left .offside-sliding-element {
-webkit-transform: translate3d(var(--offside-width), 0, 0); transform: translate3d(var(--offside-width), 0, 0); } .offside--right.is-open,
.offside-js--is-right .offside-sliding-element {
-webkit-transform: translate3d(calc(-1 * var(--offside-width)), 0, 0); transform: translate3d(calc(-1 * var(--offside-width)), 0, 0); } .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); -webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
} .offside-js--init {
overflow-x: hidden;
}  .no-csstransforms3d .offside {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.no-csstransforms3d .offside-sliding-element {
overflow-x: hidden;
position: relative;
} .no-csstransforms3d .offside--left.is-open {
left: 0;
}
.no-csstransforms3d .offside--right.is-open {
right: 0;
} .no-csstransforms3d > .offside-js--is-left .offside-sliding-element {
right: calc(-1 * var(--offside-width)); }
.no-csstransforms3d > .offside-js--is-right .offside-sliding-element {
left: calc(-1 * var(--offside-width)); }