main {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
}

.menu {
	margin-left: 40px;
	margin-top: 50px;
	
	font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
	display: none;
	
}
.menu .menu-faketrigger {
	position: absolute;
	z-index: 1000;
	width: 70px;
	height: 70px;
	opacity: 0;
	cursor: pointer;
	
}

.menu .menu-faketrigger:checked ~ .menu-list span{
	background-color: #232323;
	
}

.menu .menu-faketrigger:checked ~ .menu-list span:nth-child(1){
	transform-origin: 0% 0%;
	transform: rotate(45deg) scaleX(1.25);
}
.menu .menu-faketrigger:checked ~ .menu-list span:nth-child(2){
	opacity: 0;
}
.menu .menu-faketrigger:checked ~ .menu-list span:nth-child(3){
	transform-origin: 0% 100%;
	transform: rotate(-45deg) scaleX(1.25);
}

.menu .menu-list {
    position: absolute;
	z-index: 999;
	width: 70px;
	height: 70px;
}

.menu .menu-list span {
	display: block;
	width: 70px;
	height: 10px;
	margin-bottom: 19px;
	background-color: #CDCDCD;
	border-radius: 5px;
	transition: all ease .2s;
	
}

.menu ul {
	position: absolute;
	z-index: 998;
	left: 0;
	top: 0;
	width: 400px;
	height: calc(100vh - 100px);
	padding-top: 200px;
	
	background-color: #EDEDED;
	margin-left: -400px;
	transition: all ease .2s;
	
}

.menu .menu-faketrigger:checked ~ ul{
	margin-left: 0px;
}

.menu ul li {
	padding: 30px 30px;
	
	
}

.menu ul li a{
	text-decoration: none;
	color: #303442;
	font-size: 70px;
	transition: all ease .3s;
}

.menu ul li a:hover{
	color: #999;
}


@media screen and (max-width: 1015px){
	
	
/* TUDO QUE SERÁ EXIBIDO */
	.menu  {
		display: block;
	}
	
	
}