@media all and (min-width:500px) {

	html, body{
		font-size: 11px;
		line-height: 1.2em;
		overflow: hidden;
		height: 100%;
		background: black;

	}

	div.page {
		height: 100%;
		position: absolute;
		overflow: hidden;
		top: 0;
		width: 100%;
		/* pointer-events: none; */
		/* transform: rotate(0deg); */
	}

	div.page div.content{
		cursor: grab;
	}

	div.page div.content:active{
		cursor: grabbing;
	}

	label.menu_button {
		right: 60px;
	}



	div.legal .close {
		/* right: calc(-50% + 2rem); */
		display: none;
		right: 60px;
		z-index: 2;
	}

	div.legal .menu.active .close {
		right: 60px;
		display: block;
	}

	input#menu:checked ~ .page.active{
		overflow: hidden;
	}

	h1 {
		left: 60px;
		top: 62px;
	}

	h1.desktop{
		display: block;
		transform: rotate(180deg) translateZ(0);
		right: 60px;
		bottom: 62px;
		left: auto;
		top: auto;
		cursor: pointer;
	}

	div.menu {
		height: 100vh;
		/* padding: 27px; */
		/* width: 50vw; */
		width: 50%;
		box-sizing: border-box;
		transition: left .5s ease-in;
		padding: 60px;
		overflow-y: auto;
		z-index: 2;
		min-height: auto;
	}

	div.imprint.menu {
		display: block;
	}

	div.imprint.menu .text{
		width: 100%;
		overflow: hidden;
	}

	div.menu::-webkit-scrollbar {
    width: .5rem;
	}

	div.menu::-webkit-scrollbar-track {
    background-color: #d8d8d8;
	}

	div.menu::-webkit-scrollbar-thumb {
    background-color: hsl(0, 0%, 55%);
	}


	input#menu:checked ~ .page.active div.menu,
	div.legal div.menu.active{
		left: 50%;
		height: 100%;
	}

	.menu .info p:before{
	  left: 60px;
	}

	.menu .info {
	  max-width: 25em;
	}

	.menu .about {
		font-size: 2.15rem;
		line-height: 2.5rem;
		/* letter-spacing: -.025em; */
		/* word-spacing: .10em; */
		margin-top: 2rem;
	}

	.legal .links{
		position: absolute;
		left: 60px;
		bottom: 60px;
		z-index: 2;
	}
}

@media (hover: hover) and (min-width:500px) {
	/*
	label.menu_button:hover {
		background-color: hsl(0,0%,30%);
	}
	input#menu:checked ~ label.menu_button:hover {
		background-color: hsl(0,0%,90%);
	}
	input#menu:checked ~ label.menu_button:hover ~ .page.active div.menu {
		left: 51%;
	}
	label.menu_button:hover ~ .page.active div.menu {
		left: 99%;
	}
	*/
}

@media all and (min-width:1000px) {

	.project .description {
		top: 60px;
		left: calc(50% + 80px);
		display: block;
		width: 327px;
	}

}