.pushbar.opened{
display: block;
}

html.pushbar_locked{
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
}


.pushbar_locked .pushbar_main_content.pushbar_blur{
	filter:blur(15px);
}
.pushbar{
	z-index: 1000;
	position: fixed;
	will-change: transform;
	overflow-y: auto;
	transition:transform 0.5s ease;
	will-change: transform;
}
.pushbar_overlay{
	z-index: -999;
	position: fixed;
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 100vh;
	top: 0;
	left: 0;
    will-change: opacity;
    transition:opacity 0.5s ease;
    opacity:0;
    will-change: opacity;
	background: #3c3442;
}
html.pushbar_locked .pushbar_overlay{
	opacity:0.8;
	z-index: 999;
    transition:opacity 0.5s ease;
}


.pushbar.from_left{
	bottom: 0;
	left: 0;
	width:470px;
	max-width:99%;
	height: 220px;
	transform: translateZ(0) translateX(-100%);
}

.pushbar.from_left dl{
	width:190px;
	margin:0;
	padding:30px 20px 0;
	font-family:Hannari,serif;
	font-size:13px;
	font-weight:bold;
	text-shadow:0 0 5px #ffffff;
	-webkit-transition:text-shadow 0.5s;
	transition:text-shadow 0.5s;
}

.pushbar.from_left dl:hover{
	text-shadow:0 0 5px #ffd700;
}

.pushbar.from_left dt{
	clear:both;
	float:left;
}

.pushbar.from_right{
	top: 0;
	right: 0;
	width:450px;
	max-width: 100%;
	height:220px;
	/*min-height: 200px;*/
	transform: translateZ(0) translateX(100%);

}

.pushbar.from_right ul{
	list-style:none;
}

.pushbar.from_right a{
	display:block;
	width:130px;
	height:30px;
	float:right;
	clear:right;
	padding:10px 10px;
	text-align:right;
	text-shadow:0 0 5px #ffffff;
	-webkit-transition:text-shadow 0.5s;
	transition:text-shadow 0.5s;
	font-family:Hannari,serif;
}

.pushbar.from_right a:hover{
	text-shadow:0 0 5px #ffd700
}



.pushbar.opened{
   transform: translateX(0px) translateY(0px);
}