.menu-icon{
	width:30px;
	height:18px;
	position:relative;
	cursor:pointer;
	border-top:2px solid var(--white);
	border-bottom:2px solid var(--white);	
}
.menu-icon a{	 
	font-size:0;
	text-indent:-999999px;
}
.menu-icon a:hover{	 
}

.menu-icon:after{	
	width:20px;
	height:2px;
	background-color:var(--white);
	position:absolute;
	left:0;
	top:6px;
	content:'';
	transition: all 0.4s ease;
}

.menu-icon:hover:after{
	width:100%;
}

  
/***************************************/

.sidebar {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9990;
  max-width: 160px;
  background-image: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
  color:var(--white);	 
 /* box-shadow: 10px 0 30px rgba(0,0,0,0.15);*/
  transform: translateX(-100%);
  transition: all 0.3s cubic-bezier(0.35, 0.38, 0.07, 0.83);
  overflow: auto
}

.sidebar .close .btn-close {
	width:44px;
	height:44px;
	color:#fff;
	position:absolute;
	right:20px;
	top:20px;
	z-index:10;
	font-size:0;
	text-indent:-999999999px;
	
}
/*.sidebar .close .btn-close:hover{
	background-color:#EC297B;
}*/


.sidebar .close .btn-close:after, .sidebar .close .btn-close:before {
    width:44px;
    height:2px;
     -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
	position:absolute;
	left:0;
	top:22px;
	content:'';
	background-color:rgba(255, 255, 255 ,0.9);
	transition: all 0.4s ease;
}

.sidebar .close .btn-close:before{
 -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.sidebar .close .btn-close:hover:after, .sidebar .close .btn-close:hover:before{
	background-color:rgba(255, 255, 255 ,0.5);
	}

.sidebar.right {
  left: initial;
  right: 0;
 /* box-shadow: -10px 0 30px rgba(0,0,0,0.15);*/
  transform: translateX(100%)
}

.sidebar.right .close .btn-close {
	  }

.sidebar.active {
	transform: translateX(0) }
 
.sidebar .content {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	right:0;	
	padding:0;
	overflow:hidden !important;
	display:flex;
	justify-content: center;
	align-items: center;
	color:var(--white);
	flex-direction:column;
  
}

 

@media only screen and (max-width: 640px) {
 
	
.sidebar {
   max-width: 100% !important;
}
.sidebar .close .btn-close {	
	top:10px;	
}
.sidebar .content {
	padding:50px 0;
	overflow:auto !important;
}
}