﻿.wrapper{
	position:relative;
	overflow-x:hidden;
}
.menu{
position:fixed;
left:0;
top:0;
width:16%;
height:100vh;
display:block;
background-color:#7359ff;
z-index:99;
transition:0.5s;
transform:translateX(-100%);
}
.menu_active{
transform:translateX(0%);	
}
.menu-list{
	margin-top:60px;
	margin-left:30px;
	display:block;
	
}
.menu-list a{
	display:block;
	margin-left:10px;
	text-decoration:none;
	color:#fff;
	font-weight:300;
	padding:5px 0px;
}
.menu-list label{
	display:block;
	text-decoration:none;
	color:#fff;
	text-transform:uppercase;
	font-weight:700;
}
.menu-btn{
width:50px;
height:50px;
background:transparent;
position:absolute;
right:-50px;
top:50px;
cursor:pointer;
z-index:99;
}
.menu-btn-items{
	width:50px;
	height:50px;
	background:transparent;
	position:relative;
}
.menu-btn-items span,
.menu-btn-items span::before,
.menu-btn-items span::after{
	position:absolute;
	top:50%;
	margin-top:-1px;
	left:50%;
	margin-left:-10px;
	width:20px;
	height:2px;
	background-color:#7359ff;
}
.menu-btn-items span::before,
.menu-btn-items span::after	{
	content:'';
	transition:0.5s;
}
.menu-btn-items span::before{
transform:translateY(5px);

}
.menu-btn-items span::after{

transform:translateY(-5px);

}
.menu_btn_items_active span::before{
width:10px;
transform:rotate(-35deg);
transform-origin:left bottom;
}
.menu_btn_items_active span::after{
width:10px;
transform:rotate(35deg);
transform-origin:left top;
}

/*Форматирование таблицы под мобильные устройства*/

@media screen and (max-width: 1024px) {
	.menu{
		width:30%;
	}	
}

@media screen and (max-width: 900px) {
	.menu{
		width:50%;
	}	
}
@media screen and (max-width: 600px) {
	.menu{
		width:50%;
	}	
}