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;
}
}