:root
{
	--page-bg:#ffffff;
	--page-text:#000000;
	--accent:rgb(255,0,187);
	
	--curve:cubic-bezier(.23,.34,.18,1);
	
	--content-start:580; /* 2x290 */
}

html
{
	height:100%;
}

body
{
	margin:0;
	padding:0;
	
	font-family:'minion-pro',serif;
	font-size:20px;
	line-height:calc(32/24);
	font-weight:normal;
	font-style:normal;

	background-color:var(--page-bg);
	color:var(--page-text);
	
	min-height:100%;
}
body *
{
	box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.is-hidden
{
	display:none !important;
}
.no-pointer-events
{
	pointer-events:none;
}
.pointer-events
{
	pointer-events:all;
}
.no-transition
{
	transition:none !important;
}
.no-scrollbar
{
	scrollbar-width: none; /* FF */
	-ms-overflow-style: none; /* Edge */
}
.no-scrollbar::-webkit-scrollbar
{
	display: none;
}	
.flex-break
{
	flex-basis:100%;
	height:0;
}
.clear:after
{
	content:'';
	display:table;
	clear:both;
}
.full-width
{
	width:100% !important;
}
a
{
	color:var(--page-text);
	text-decoration: none;
}
.accent,
.text-accent,
.page .text a,
figcaption a
{
	color:var(--accent);
}
ul
{
	margin:0;
	padding:0;
	list-style:none;
}
h1
{
	font-weight:normal;
}

/* background and title */

#placeholder
{
	position:absolute;
	left:0;
	top:30px;
	width:100%;
	font-weight:normal;
	font-size:18px;
	text-align:center;
}
#page-bg
{
	position:fixed;
	left:0;
	top:0;
	height:100vh;
	right:0;
	
	background:var(--page-bg) url(../media/oli-bg.jpg) no-repeat 50% 50%;
	background-size:cover;
	
	transform:scale(1); /* this eliminates the background resize on mobile Safari */
}
#page-lan
{
	display:none;

	position:fixed;
	right:14px;
	top:16px;
	font-size:21px;
	z-index:1001;
}
#page-lan a
{
	padding:6px;
}
#page-title
{
	position:fixed;
	margin:0;
	top:50%;
	width:100%;
	text-align:center;
	transform:translateY(-50%);

	font-weight:normal;
	font-size:32px;
}
#page-title.off
{
	opacity:0;
	transition:opacity .2s ease 0s;
}

/* menu */

#page-menu
{
	position:fixed;
	left:50%;
	top:50%;
	margin:-400px 0 0 -400px;
	width:800px;
	height:800px;
	
	transition:all .4s var(--curve) 0s;

	z-index:1000;
}
#page-menu.collapsed
{
	left:-335px;
	top:-335px;
	margin:0;
	
	transform:scale(.1);
	
	cursor:pointer;
}
#page-menu.bottom
{
	top:auto;
}
#page-menu.bottom.collapsed
{
	top:auto;
	bottom:-335px !important;
}

.menu
{
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	height:120px;
	width:240px;
	
	transform-origin:0% 50%;
	
	background-color:white;
	font-size:19px;
	
	cursor:pointer;
	user-select:none; 	
}
.menu .label
{
	position:absolute;
	padding:3px 4px;
	pointer-events:none;
}
.menu.blank .label
{
	display:none;
}
#page-menu:not(.blank) .menu
{
	/* box-shadow: 1px 1px 20px rgba(0,0,0,.06); */
}
.menu.left .label /* left side of menu: place label on opposite side */
{
	position:absolute;
	bottom:0;
	right:0;
	transform:rotate(180deg);
}
#page-menu.blank .menu .label,
#page-menu.collapsed .menu .label,
#page-menu.collapsed h1
{
	display:none;
}
body:not(.is-touch) #page-menu.collapsed:hover .menu:not(.active)
{
	background-color:white;
	transition-delay:0s !important;
}
#page-menu.collapsed .menu
{
	background-color:black;
	transition-delay: .2s;
}

#page-menu .menu.active,
body:not(.is-touch) #page-menu.collapsed .menu:not(.blank):hover
{
	background-color:var(--accent);
}
body:not(.is-touch):not(.is-scrolling) .menu:hover
{
	background-color:black;
	color:white;
}


/* content */

.page
{
	position:relative;
}
#page-menu + .page
{
	margin-top:calc(100vh + (var(--content-start) * 1px));
}
.title
{
	font-size:55px;
	text-align:center;
	position:sticky;
	top:30px;
	z-index:100;
}
.content
{
	display:flex;
	justify-content: center;
	margin-bottom:290px;
}

.text
{
	max-width:660px;
	width:calc(50% - 30px);
	padding:30px;
	
	background-color:var(--page-bg);
	min-height:100vh;
}
.text p
{
	text-indent: 30px;
}
.text p.small
{
	font-size:16px;
}
.media
{
	max-width:660px;
	width:calc(50% - 30px);
}
.media figure
{
	position:sticky;
	display:block;
	margin:-120px 0 30px 0;
}
.page:not(.right) .media figure
{
	max-width:100% !important; /* allow overlapping text block */
}
.media figure img
{
	display:block;
	width:100%;
}
.media figcaption
{
	display:none;
	position:absolute;
	left:0;
	top:calc(100% + 0px);
/* 
	position:absolute;
	left:calc(100% + 20px);
	bottom:5px;
	width:120px;
 */
	
	background-color:var(--page-bg);
	padding:5px;
	
	font-size:14px;
}
.media figcaption p:first-child
{
	display:inline;
}
.media figcaption p
{
	margin:0;
}

.media figure:hover figcaption
{
	display:inline-block;
}
.media figcaption::before
{
	display:inline-block;
	content:url('../media/caption-arrow-up.svg');
	margin-right:4px;
	margin-bottom:1px;
}

/* hover focus */
:not(.is-touch) .text:hover,
:not(.is-touch) .media figure:hover,
.media figure.focus
{
	z-index:1;
}


/* smallscreen layout */

@media (max-width:600px)
{
	#page-title
	{
		position:absolute;
		left:50%;
		transform:translate(-50%,-50%);
		width:80vw;

		font-size:60px;
	}

	#page-menu.collapsed
	{
		transform:scale(.15);
	}

	.menu.left .label
	{
		right:auto;
	}

	.content
	{
		flex-wrap: wrap;
	}
	.page.right .content
	{
		flex-wrap: wrap-reverse;
	}
	
	.media,
	.text
	{
		width:calc(100% - 60px);
	}
	.text
	{
		padding:25px;
	}
	
	.media figure
	{
		max-width:100% !important;
	}
	.media figure:first-child
	{
		margin-top:30px;
	}
}