#offcanvas-sidebar{
width:280px;
height:100%;
position:fixed;
top:0;
overflow-x:hidden;
overflow-y:auto;
transition:all 400ms ease;


}

#page-wrap{
background:
#fff;
transition:all 400ms ease
}

#offcanvas-navicon{
margin-top:155px;
position:fixed;
top:8px;
right:0;
z-index:102;
height:48px;
width:48px;
padding:10px 6px;
background:rgba(255,255,255,0.5);
border-radius:50%;
transition:all 400ms ease
}

#offcanvas-navicon:after,
#offcanvas-navicon:before,
#offcanvas-navicon span{
	display:block;
	content:'';
	display:block;
	height:4px;
	margin:4px;
	border-radius:2px;
	transition:all 400ms ease;
	background-color: #333333;
}

#offcanvas-navicon:hover{
cursor:pointer
}
.offcanvas-open 
#offcanvas-navicon:before{
transform:translate3d(0, 8px, 0) rotate(135deg)
}
.offcanvas-open 
#offcanvas-navicon:after{
transform:translate3d(0, -8px, 0) rotate(-135deg);
}
.offcanvas-open 
#offcanvas-navicon span{
transform:scale(0)
}

#offcanvas-sidebar{
	padding-top:100px;
	background-image: url(../images/escheresque_@2X.jpg);
	background-repeat: repeat;
	z-index:100000;
}

#offcanvas-sidebar h4{
margin:24px 0 0;
color:#333333;
padding:8px 16px
}

#offcanvas-sidebar h4 a{
margin:-8px -16px
}

#offcanvas-sidebar ul{
width:250px;
margin:0;
list-style-type:none;
padding:0
}

#offcanvas-sidebar li{
}

#offcanvas-sidebar a{
display:block;
padding:8px 16px;
color:#333333;
text-decoration:none;
transition:all 0.25s ease
}

#offcanvas-sidebar a:hover{
color:#ccc;
cursor:pointer
}

#offcanvas-sidebar ul ul{
display:none;
position:absolute;
float:right;
margin-top:-41px;
margin-left:280px
}

#offcanvas-sidebar div{
transition:all 400ms ease
}

#offcanvas-sidebar.offcanvas-child-open>div{
margin-left:-280px
}

#offcanvas-sidebar.offcanvas-child-open>div .offcanvas-child-visible{
display:block
}
.offcanvas-child-link{
position:absolute;
display:inline-block;
width:44px;
height:40px;
margin-top:-40px;
margin-left:206px;
border-left:1px solid #999;
padding:6px 16px;
background:#111;
color:#aaa;
text-decoration:none;
transition:all 0.25s ease
}
.offcanvas-child-link:hover{
color:#ccc;
background:#444;
cursor:pointer
}
.offcanvas-child-back-link{
position:absolute;
display:block;
width:100%;
margin-top:-42px;
border-top:1px solid #999;
padding:8px 16px;
color:#aaa;
text-decoration:none;
transition:all 0.25s ease
}
.offcanvas-child-back-link:hover{
color:#ccc;
background:#444;
cursor:pointer
}
body 
#offcanvas-navicon{
right:8px
}
body 
#offcanvas-sidebar{
right:0;
z-index:101;
margin-right:-280px
}
body.offcanvas-open 
#page-wrap{
margin-left:-280px;
margin-right:280px
}
body.offcanvas-open 
#offcanvas-sidebar{
margin-right:0
}