/* ----------
	zSlidePanel v1.       http://zetfolio.com/plugins/zSlidePanel
---------- */
.zSlidePanel-overlay,
.zSlidePanel,
.zSlidePanel *{
	box-sizing:border-box;
}


.zSlidePanel-overlay{
	background-color:rgba(0,0,0,0.6);
	opacity:0;
	
	overflow:auto;
	
	position:fixed;
	top:0;
	bottom:0;
	right:0;
	left:0;
	z-index:450;
}
.zSlidePanel{
	width:280px;
	background-color:#fff;
	border-right:1px solid #e3e3e3;
	
	position:fixed;
	top:0;
	bottom:0;
	z-index:500;
}

.zSlidePanel.left-panel{
	left:0;
	-wtransform:translateX(-100%);
	transform:translateX(-100%);
}
.zSlidePanel.right-panel{
	right:0;
	-wtransform:translateX(100%);
	transform:translateX(100%);
}

.zSlidePanel-body{
	width:100%;
	overflow:auto;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
}

.zSlidePanel .close-zSlidePanel{
	cursor:pointer;
	position:absolute;
	top:5px;
	right:-25px;
}

.zSlidePanel .close-zSlidePanel i{
	display:block;	
	width:20px;
	height:20px;
}
.zSlidePanel .close-zSlidePanel i::before,
.zSlidePanel .close-zSlidePanel i::after{
	width:100%;
	height:2px;
	background-color:#fff;
	
	content:"";
	position:absolute;
	top:9px;
	left:0;
	
	-webkit-transform-origin:center;
	transform-origin:center;
}
.zSlidePanel .close-zSlidePanel i::before{
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.zSlidePanel .close-zSlidePanel i::after{
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}



.zSlidePanel-overlay,
.zSlidePanel-overlay.opened{	
	-webkit-transition:opacity 0.3s ease;
	transition:opacity 0.3s ease;
}
.zSlidePanel,.zSlidePanel.opened{
	-webkit-transition:transform 0.3s ease;
	transition:transform 0.3s ease;
}


.zSlidePanel-opened .zSlidePanel-overlay{
	opacity:1;
}
.zSlidePanel-opened .zSlidePanel{
	-wtransform:translateX(0);
	transform:translateX(0);
}