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% }
html { height:100% }
body { position: relative; min-height: 100% }

.sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close { cursor: pointer; }
.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}