html, body, [data-canvas=container], [data-off-canvas] {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
} [data-canvas] {
z-index: 1;
}
[data-canvas=container] {
width: 100%;
height: 100%;
overflow-y: auto;
position: relative;
background-color: white; -webkit-overflow-scrolling: touch; }
[data-canvas=container]:before, [data-canvas=container]:after {
clear: both;
content: '';
display: table;
} [data-off-canvas] {
display: none;
position: fixed;
overflow: hidden;
overflow-y: auto;
background-color: black; color: white; -webkit-overflow-scrolling: touch; }
[data-off-canvas*=" top"] {
width: 100%;
height: 255px;
top: 0;
}
[data-off-canvas*=" right"] {
width: 255px;
height: 100%;
top: 0;
right: 0;
}
[data-off-canvas*=" bottom"] {
width: 100%;
height: 255px;
bottom: 0;
}
[data-off-canvas*=" left"] {
width: 255px;
height: 100%;
top: 0;
left: 0;
}
[data-off-canvas*=" reveal"] {
z-index: 0;
}
[data-off-canvas*=" push"] {
z-index: 1;
}
[data-off-canvas*=" overlay"] {
z-index: 9999;
}
[data-off-canvas*=" shift"] {
z-index: 0;
} [data-canvas], [data-off-canvas] {
-webkit-transform: translate( 0px, 0px );
-ms-transform: translate( 0px, 0px );
transform: translate( 0px, 0px );
-webkit-transition: -webkit-transform 300ms, -webkit-filter 300ms;
transition:         transform 300ms, filter 300ms;
-webkit-backface-visibility: hidden; }
[data-off-canvas*=" shift"][data-off-canvas*=" top"] {
-webkit-transform: translate( 0px, 50% );
transform: translate( 0px, 50% );
}
[data-off-canvas*=" shift"][data-off-canvas*=" right"] {
-webkit-transform: translate( -50%, 0px );
transform: translate( -50%, 0px );
}
[data-off-canvas*=" shift"][data-off-canvas*=" bottom"] {
-webkit-transform: translate( 0px, -50% );
transform: translate( 0px, -50% );
}
[data-off-canvas*=" shift"][data-off-canvas*=" left"] {
-webkit-transform: translate( 50%, 0px );
transform: translate( 50%, 0px );
} @media print {
[data-canvas] {
-webkit-transform: translate( 0px, 0px ) !important;
-ms-transform: translate( 0px, 0px ) !important;
transform: translate( 0px, 0px ) !important;
}
[data-off-canvas] {
display: none !important;
}
}html,
html.ocs-initialized {
overflow: hidden;
overflow-y: auto;
}
body,
[data-canvas=container],
.ocs-initialized [data-canvas=container] {
overflow: initial; height: auto;
min-height: 100vh;
} html.ocs-scroll-lock {
overflow-y: hidden;
}
html.ocs-scroll-lock.ocs-scroll-fixed {
position: fixed;
overflow-y: scroll;
}
html.ocs-scroll-lock.ocs-scroll-fixed body {
position: relative;
} .admin-bar [data-canvas=container] {
min-height: -webkit-calc( 100vh - 32px );
min-height: -moz-calc( 100vh - 32px );
min-height: calc( 100vh - 32px );
}
@media screen and (max-width: 782px) {
.admin-bar [data-canvas=container] {
min-height: -webkit-calc( 100vh - 46px );
min-height: -moz-calc( 100vh - 46px );
min-height: calc( 100vh - 46px );
}
}
@media screen and (max-width: 600px) {
html.ocs-sidebar-active #wpadminbar {
display: none;
height: 0;
}
} .ocs-legacy [data-canvas] {top: 0; right: 0; bottom: 0; left: 0;}
.ocs-legacy [data-canvas],
.ocs-legacy [data-off-canvas] {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: -webkit-transform 300ms, -webkit-filter 300ms, top 300ms, bottom 300ms, left 300ms, right 300ms, clip-path 0ms;
-moz-transition: -moz-transform 300ms, filter 300ms, top 300ms, bottom 300ms, left 300ms, right 300ms, clip-path 0ms;
-o-transition: -o-transform 300ms, filter 300ms, top 300ms, bottom 300ms, left 300ms, right 300ms, clip-path 0ms;
transition: transform 300ms, filter 300ms, top 300ms, bottom 300ms, left 300ms, right 300ms, clip-path 0ms;
} .ocs-trigger {cursor: pointer;} [data-off-canvas] {
overscroll-behavior: contain;
-ms-scroll-chaining: none;
} [data-off-canvas*=" top"][data-off-canvas*=" reveal"],
[data-off-canvas*=" top"][data-off-canvas*=" shift"],
[data-off-canvas*=" bottom"][data-off-canvas*=" reveal"],
[data-off-canvas*=" bottom"][data-off-canvas*=" shift"] {
z-index: 1;
}  .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 30%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 15%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 45%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 30%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 15%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 45%;
}
@media (max-width: 480px) { .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 60%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 35%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 85%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 40%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 20%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 60%;
}
}
@media (min-width: 481px) { .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 50%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 30%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 70%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 40%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 20%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 60%;
}
}
@media (min-width: 768px) { .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 40%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 25%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 55%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 35%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 20%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 55%;
}
}
@media (min-width: 992px) { .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 30%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 15%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 45%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 30%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 15%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 45%;
}
}
@media (min-width: 1200px) { .ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
width: 25%;
}
.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
width: 10%;
}
.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
width: 40%;
}
.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
height: 25%;
}
.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
height: 10%;
}
.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
height: 40%;
}
}