.panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow:auto;
  -webkit-transition: visibility 0s 0.6s;
  -moz-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;
  z-index:3000 !important;
  text-align:left;
}

.panel::after, 
.panel .mask{
  /* overlay layer */
  position: absolute;
  display:inline-block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background 0.3s 0.3s;
  -moz-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}
.panel.is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.panel.is-visible::after, 
.panel.is-visible .mask {
  -webkit-transition: background 0.3s 0s;
  -moz-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
  z-index:2000;
}

.panel-container {
  position: fixed;
  width: 100% !important;
  height: 100%;
  top: 0;
  overflow-y:auto; 
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;

}

.panel-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  width:100%;
  min-height: 100%;
  overflow: auto !important;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch !important;
  background:#121427;
}

.panel-content .inner {
	padding:30px;
}

.panel-content p {
	font-size:22px !important;
	line-height:25px;
}

.panel .btn_x {
	width:23px;
	height:23px;
	position:absolute;
	top:30px;
	right:30px;
	background:url('../img/x.png') 0 2px no-repeat; 
}

.from-right .panel-container {
  right: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.from-left .panel-container {
  left: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.is-visible .panel-container {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s;
}


.mask {
	visibility:hidden;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
.mask.is-visible {
/* 
  background:rgba(57,6,189, 0.5); 
 */
  background:rgba(39, 32, 218, 0.5); 
 -webkit-transition: background 0.3s 0s;
  -moz-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
  z-index:2000;
  visibility:visible;
}

@media only screen and (min-width: 768px) {
  .panel-container {
    width: 100%;
  }
  
}
@media only screen and (min-width: 1170px) {
  .panel-container {
    width: 100%;
  }
  
  .panel-content .inner {
  	padding:70px;
  }	
  
}