ul,li {list-style: none; padding:0; margin:0; line-height: 200%;}
a {text-decoration: none;}

.input-toggler{ display: none;}
.menu-toggler{position: fixed; right: 0px; top: 0px; width:50px; height: 50px; background: rgba(0,0,0, 0.5);; z-index: 100; display: flex; justify-content:center; align-items:center; flex-direction:column; cursor: pointer;}

.menu-toggler-line{width: 50%; height:3px; background:beige; margin: 1 0 5px 0px; position: relative; transition: all .5s ease-out;}

.input-toggler:checked ~ .menu-toggler .menu-toggler-line {top: 5px; translateY:100px;  transform:rotate(45deg);}

.input-toggler:checked ~ .menu-toggler .menu-toggler-line:nth-child(2) {display: none;}

.input-toggler:checked ~ .menu-toggler .menu-toggler-line:nth-child(3) {top: -5px; translateY:10; transform:rotate(135deg);}

.nav{ width: 100%; height: 100%; background:rgba(0,0,0, 0.8);}
.nav ul{ width: 100%;}
.nav ul li{ width: 100%; text-align: center;}
.nav ul li a{display: inline-block; font-size: 36px; color: #fff; text-transform: uppercase;}

.sidebar {position: absolute; top: 0; height: 100vh; width: 100%; background:#000; opacity: 0.5;

	display: flex;
	justify-content: center;
	align-items: center;
	transform: translateY(-100%);
	transition: all 0.1s ease-in-out;
	}

.menu-link {color: #aaa; font-family: "Bodoni Moda", serif; font-size: 8vmin; line-height: 10vmin; -webkit-transition: all .25s ease-out; transition: all .25s ease-out;}
.menu-link:hover, .menu-link:focus, .menu-link:active {color: beige;}

.input-toggler:checked ~ .sidebar {transform: translateX(0%); opacity: .98; position: fixed;}