html, body{
	min-height: 100%;
	padding: 0;
	margin: 0;
	font-size: 10px;
	line-height: 1.2em;
	/* font-family: Inter; */
	font-family: friends-regular, Helvetica Neue, Helvetica, Arial, sans-serif;
	overflow-x: hidden;
}

html{
	/* width: 100vw; */
	/* overflow: hidden; */

}

body {
	/* width: 100vw; */
	/* position: relative; */
	/* overflow: hidden; */
	/* overflow: hidden; */
	/* width: 100vw; */
}

/* ELEMENTS */

h1 {
	font-size: 2rem;
	line-height: 1.15em;
	/* font-family: Inter; */
	font-family: 'friends-regular';
	font-weight: 500;
	position: absolute;
	left: 25px;
	top: 60px;
	/* letter-spacing: -.015em; */
	margin: 0;
	user-select: none;
	z-index: 2;
	transform: translateZ(0);
}

h1 strong{
	display: block;
	font-family: 'friends-ultrabold';
	/* font-weight: 700; */
	font-weight: normal;
}

h1.desktop{
	display: none;
}

a {
	text-decoration: none;
	color: inherit;
}

p {
	margin: 0 0 1rem 0;
}

p:last-child {
	margin: 0 0 0 0;
}

ul {
	margin: 0;
	padding-inline-start: 16px;
}

.legal ul {
	margin: 0 0 1rem 1rem;
}

a:hover {
	text-decoration: underline;
}



/* PAGE */

div.page {
	height: 75vh;
	position: relative;
	/* overflow: hidden; */
	/* overflow-x: hidden; */
	/* overflow-y: visible; */

	/* pointer-events: none; */
	/* z-index: auto; */
	z-index: 1;
	transform: rotate(0deg);
}

body.desktop div.page{
	transition: transform 2s ease-in-out;
}

div.page.inactive {
	transform: rotate(180deg);
	pointer-events: none;
	z-index: 0;
}

div.page.inactive:nth-of-type(1) {
	transform: rotate(-180deg);
}

div.page div.content{
	opacity: 1;
	transition: opacity 2s ease-in-out;
	pointer-events: all;
	z-index: 1;
}

div.page.inactive div.content{
	opacity: 0;
}



/* MENU */

input#menu {
	display: none;
}

label.menu_button {
	position: fixed;
	top: 56px;
	right: 2rem;
	background: black;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	transition: background-color .5s ease-out;
	cursor: pointer;
	z-index: 2;
}

input#menu:checked ~label.menu_button {
	background: white;
	background-image: url(button_close.svg?ver=1);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%;
}

div.menu {
	position: absolute;
	left: 100%;
	top: 0;
	min-height: 100%;
	width: 100vw;
	background: #d8d8d8;
	transition: left .75s ease-in;
	z-index: 1;
	padding: 136px 27px 27px 27px;
	box-sizing: border-box;
	display: flex;
  flex-direction: column;
  justify-content: space-between;
}

div.legal div.menu {
	z-index: 2;
	/* height: auto; */
  /* min-height: 100%; */
	height: 100%;
	overflow: auto;
	position: fixed;
	/* padding-top: 27px; */
}

input#menu:checked ~ .page.active{
	/* overflow-y: visible; */
}

input#menu:checked ~ .page.active div.menu,
div.legal div.menu.active {
	left: 0;
}

div.legal .close {
	position: fixed;
	right: calc(-100% + 2rem);
	top: 56px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: white;
	background-image: url(button_close.svg?ver=1);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%;
	cursor: pointer;
	transition: right .75s ease-in;
}

div.legal .menu.active .close {
	right: 2rem;
}


/* CONTENT */

.menu .info {
	font-family: courier_prime_web;
  border-left: solid 1px black;
  padding-left: 10px;
	margin-left: 20px;
}

.menu .text {
	font-family: courier_prime_web;
}

.menu .info p:before{
	content: "→";
	position: absolute;
  left: 27px;
	width: 8px;
	overflow: hidden;
	text-indent: -5px;
}

.menu .about {
	margin-top: 2rem;
	font-size: 2rem;
	line-height: 2.3rem;
	/* letter-spacing: -.03em; */
	letter-spacing: .01em;
  /* word-spacing: 0; */
}

.menu .info img {
	width: 11rem;
  margin-top: 2rem;
  mix-blend-mode: multiply;
  display: block;
}

.content {
	height: 100%;
}

.project {
	position: relative;
	height: 100%;
	/* all: reset; */
}

.project .description {
	position: absolute;
	z-index: 4;
	padding-left: 10px;
	border-left: solid 1px black;
	white-space: normal;
	font-family: courier_prime_web;
	display: none;
	text-shadow: 1px 1px 0 hsla(0,0%,100%,.15);
}

.project .media {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.project .media > img,
.project .media > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.legal {
	/* display: none; */
}

.legal .links {
	display: flex;
}

.legal a {
	font-family: courier_prime_web;
	display: inline-block;
	cursor: pointer;
}

.legal a:nth-of-type(n+2)::before {
	content: "•";
	display:inline-block;
	margin-right: 5px;
	padding-left: 5px;

}

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

	.page:nth-of-type(2) .menu:after {
	    content: "";
	    position: absolute;
	    width: 90%;
	    height: 1rem;
	    background: white;
	    top: 2rem;
	    left: 5%;
	}
	.page:nth-of-type(2) {
    padding-top: 1rem;
	}
	.legal .links {
		margin: 2rem 0;
		justify-content: center;
	}
}