html,body,#sb-site,.sb-slidebar {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}

html,body {
width:100%;
overflow-x:hidden
}

html {
height:100%
}

body {
min-height:100%
}

#sb-site {
width:100%;
position:relative;
z-index:1;
background-color:#fff
}

.sb-slidebar {
height:100%;
overflow-y:auto;
position:fixed;
top:0;
z-index:0;
visibility:hidden;
background-color:#222
}

.sb-left {
left:0
}

.sb-right {
right:0
}

html.sb-static .sb-slidebar,.sb-slidebar.sb-static {
position:absolute
}

.sb-slidebar.sb-active {
visibility:visible
}

.sb-slidebar.sb-style-overlay {
z-index:9999
}

.sb-slidebar {
width:30%
}

.sb-width-thin {
width:15%
}

.sb-width-wide {
width:45%
}

@media (max-width: 480px) {
.sb-slidebar {
width:70%
}

.sb-width-thin {
width:55%
}

.sb-width-wide {
width:85%
}
}

@media (min-width: 481px) {
.sb-slidebar {
width:55%
}

.sb-width-thin {
width:40%
}

.sb-width-wide {
width:70%
}
}

@media (min-width: 768px) {
.sb-slidebar {
width:40%
}

.sb-width-thin {
width:25%
}

.sb-width-wide {
width:55%
}
}

@media (min-width: 992px) {
.sb-slidebar {
width:30%
}

.sb-width-thin {
width:15%
}

.sb-width-wide {
width:45%
}
}

@media (min-width: 1200px) {
.sb-slidebar {
width:20%
}

.sb-width-thin {
width:5%
}

.sb-width-wide {
width:35%
}
}

.sb-slide,#sb-site,.sb-slidebar {
-webkit-transition:-webkit-transform 400ms ease;
-moz-transition:-moz-transform 400ms ease;
-o-transition:-o-transform 400ms ease;
transition:transform 400ms ease;
-webkit-transition-property:-webkit-transform,left,right;
-webkit-backface-visibility:hidden
}

.sb-hide {
display:none
}