body{
	font-family:Tahoma,Geneva,sans-serif;
	font-weight:400;
	overflow:hidden
	}

.container{
	min-width:100%;
	min-height:100%;
	display:block;
	position:relative
	}

.menu{
	width:40px;
	height:40px;
	display:block;
	position:relative
	}

.list,.intro{
	height:100%;
	top:0;
	display:flex;
	position:fixed;
	align-items:center;
	flex-flow:column wrap;
	justify-content:center;
	z-index:-1;
	transition:all .75s ease
	}

.list{
	background:#26d07c;
	width:120px;
	left:-120px;
	opacity:0
	}

.list span{
	background:#fff;
	width:100px;
	margin:5px 0;
	padding:10px 0;
	text-align:center;
	border-radius:4px
	}

.intro{
	width:100%;
	padding:0 8px;
	left:0;
	text-align:center
	}

.btn{
	background:#000;
	width:40px;
	height:40px;
	top:10px;
	left:10px;
	display:block;
	position:absolute;
	border-radius:50%
	}

.btn:before,
.btn:after{
	background:#fff;
	width:20px;
	height:2px;
	left:10px;
	display:block;
	position:absolute;
	content:"";
	transition:all .75s ease
	}
	
.btn:before{top:16px}
.btn:after{bottom:16px}

.menu:focus-within .list{left:0;opacity:1}
.menu:focus-within .intro{width:calc(100% - 120px);left:120px}
.menu:focus-within .btn:before{transform:rotate(45deg) translate(2px,2px)}
.menu:focus-within .btn:after{transform:rotate(-45deg) translate(2px,-2px)}