[sidebarjs-backdrop],
[sidebarjs] {
    top   : 0;
    left  : 0;
    width : 100%;
    height: 100%;
}

[sidebarjs].sidebarjs--left,
[sidebarjs].sidebarjs--left [sidebarjs-container] {
    -webkit-transform: translate(-100%, 0);
    transform        : translate(-100%, 0);
}

[sidebarjs].sidebarjs--right,
[sidebarjs].sidebarjs--right [sidebarjs-container] {
    -webkit-transform: translate(100%, 0);
    transform        : translate(100%, 0);
}

[sidebarjs].sidebarjs--left [sidebarjs-container] {
    -webkit-box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
    box-shadow        : 2px 0 4px rgba(0, 0, 0, 0.2);
}

[sidebarjs].sidebarjs--right [sidebarjs-container] {
    -webkit-box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
    box-shadow        : -2px 0 4px rgba(0, 0, 0, 0.2);
    margin-left       : auto;
}

[sidebarjs-backdrop] {
    position          : absolute;
    background        : #000;
    opacity           : 0;
    -webkit-transition: opacity 0.3s ease;
    transition        : opacity 0.3s ease;
    will-change       : opacity;
}

[sidebarjs-container] {
    position             : relative;
    z-index              : 1;
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
    width                : 100%;
    max-width            : 100vw;
    height               : 100%;
    background           : #fff;
    -webkit-transition   : -webkit-transform ease 0.3s;
    transition           : -webkit-transform ease 0.3s;
    transition           : transform ease 0.3s;
    transition           : transform ease 0.3s, -webkit-transform ease 0.3s;
    will-change          : transform;
}

[sidebarjs] {
    position          : fixed;
    z-index           : 1010;
    -webkit-transition: -webkit-transform 0s ease 0.3s;
    transition        : -webkit-transform 0s ease 0.3s;
    transition        : transform 0s ease 0.3s;
    transition        : transform 0s ease 0.3s, -webkit-transform 0s ease 0.3s;
}

[sidebarjs].sidebarjs--is-visible {
    -webkit-transform : translate(0, 0);
    transform         : translate(0, 0);
    -webkit-transition: -webkit-transform 0s ease 0s;
    transition        : -webkit-transform 0s ease 0s;
    transition        : transform 0s ease 0s;
    transition        : transform 0s ease 0s, -webkit-transform 0s ease 0s;
}

[sidebarjs].sidebarjs--is-visible [sidebarjs-container] {
    -webkit-transform: translate(0, 0);
    transform        : translate(0, 0);
}

[sidebarjs].sidebarjs--is-moving {
    -webkit-transition: none;
    transition        : none;
    -webkit-transform : translate(0, 0);
    transform         : translate(0, 0);
}

[sidebarjs].sidebarjs--is-moving [sidebarjs-container],
[sidebarjs].sidebarjs--is-moving [sidebarjs-backdrop] {
    -webkit-transition: none;
    transition        : none;
}

@media (min-width: 1024px) {
    [sidebarjs-container] {
        width:28%;
    }
  }