/* Sidebar-Styles OffCanvas
   Quelle: http://www.aidanzealley.com/offcanvas/
                            */
html.offcanvas {
    overflow: hidden; }

body {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: #6f6f6e}

.offcanvas body {
    overflow: hidden; }

.animatedSlide {
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    -ms-transition-property: -ms-transform;
    -ms-transition-duration: 0.3s;
    -ms-transition-timing-function: ease-out;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 0.3s;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -o-transition-property: -o-transform;
    -o-transition-duration: 0.3s;
    -o-transition-timing-function: ease-out; }

.no-csstransforms3d .animatedSlide {
    transition: left 0.3s ease-out, right 0.3s ease-out;
    -ms-transition: left 0.3s ease-out, right 0.3s ease-out;
    -moz-transition: left 0.3s ease-out, right 0.3s ease-out;
    -webkit-transition: left 0.3s ease-out, right 0.3s ease-out;
    -o-transition: left 0.3s ease-out, right 0.3s ease-out; }

.paddedLight {
    padding-right: 1.2em;
    padding-bottom: 1.2em;
    padding-left: 1.2em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

.offcanvas .scrollableArea {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch; }

/* Styles for both sidebars */
.offcanvas .sidebarLeft, .offcanvas .sidebarRight {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 300px; }
.offcanvas .sidebarLeft .shutLeft, .offcanvas .sidebarLeft .shutRight, .offcanvas .sidebarRight .shutLeft, .offcanvas .sidebarRight .shutRight {
    display: block; }

.offcanvas .sidebarLeft .shutLeft {
    left: 0; }

.offcanvas .sidebarRight {
    right: 0;
    transform: translate3d(7em, 0, 0);
    -ms-transform: translate3d(7em, 0, 0);
    -moz-transform: translate3d(7em, 0, 0);
    -webkit-transform: translate3d(7em, 0, 0);
    -o-transform: translate3d(7em, 0, 0); }

/* Main central area styles */
.page {
    word-wrap: break-word;
    position: relative;
    z-index: 500; }
.page .scrollableArea {
    position: absolute;
    bottom: 0;}

.offcanvas .page {
    width: 100%;
    height: 100%; }

.no-js .page {
    float: left;
    width: 60%; }

/* Slid styles */
.page.slidRight {
    transform: translate3d(300px, 0, 0);
    -ms-transform: translate3d(300px, 0, 0);
    -moz-transform: translate3d(300px, 0, 0);
    -webkit-transform: translate3d(300px, 0, 0);
    -o-transform: translate3d(300px, 0, 0); }

.page.slidLeft {
    transform: translate3d(-300px, 0, 0);
    -ms-transform: translate3d(-300px, 0, 0);
    -moz-transform: translate3d(-300px, 0, 0);
    -webkit-transform: translate3d(-300px, 0, 0);
    -o-transform: translate3d(-300px, 0, 0); }

.no-csstransforms3d .page.slidLeft {
    left: -300px; }

.sidebarLeft.slidRight, .sidebarRight.slidLeft {
    transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0); }

.no-csstransforms3d .sidebarRight.slidLeft {
    right: 0; }