:root
{
	--blue:#0000ff;
	--white:#ffffff;
	--black:#000000;

	--page-bg:#ffffff;
	--page-width:1440px;
	--page-lineheight:19.2px;
	
	--header-height:115px;
	--offset:65px;
	--padding:22px;
	--shadow:-5px 4px 10px rgba(0,0,0,.4);
	--slide:transform .5s ease 0s;
	--pages-right:200px;
}

html
{
	overflow-x:hidden;
}

body
{
	margin:0;
	padding:0;
	
	font-family:frank-new, sans-serif;
	font-size:16px;
	line-height:var(--page-lineheight);

	image-rendering:-webkit-optimize-contrast;
	-webkit-text-size-adjust:100%;

	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	background-color:var(--page-bg);
	color:var(--page-text);

	min-height:100vh;

}

body *
{
	box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.is-hidden
{
	display:none !important;
}
.clear:after
{
	content:'';
	display:table;
	clear:both;
}
.full-width
{
	width:100% !important;
}
a
{
	color:var(--blue);
}
a.item,
a:hover
{
	text-decoration:none;
}
.blue a.item:hover
{
	color:var(--black);
/* 
	background-color:var(--white);
	color:blue;
 */
}
h1,
h2,
.large
{
	font-size:28px;
	line-height:40px;
}
h1.title
{
	margin-top:0;
}
h2
{
	margin:4px 0 0 0;
}

#header
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:var(--header-height);
}
#title
{
	display:inline-block;
	margin:35px 0 0 calc(10px + (2 * var(--offset)) + var(--padding));
	color:var(--blue);
	text-decoration:none;
	font-weight:500;
	line-height:22px;
}
#menu-toggle
{
	display:none;
	position:absolute;
	margin:1px -22px 0 0;
	right:calc(200px - var(--padding));
	top:35px;
}
#menu-toggle rect
{
	fill:var(--blue);
}
#menu-toggle:hover rect
{
	fill:var(--black);
}
#menu-toggle.collapsed .close,
#menu-toggle:not(.collapsed) .expand
{
	display:none;
}

#socials
{
	position:absolute;
	right:var(--padding);
	top:35px;
	display:flex;
	list-style:none;
	margin:0;
}
#socials li
{
	margin-left:9px;
	border:1px solid var(--blue);
	border-radius:50%;
	width:22px;
	height:22px;
}
#socials li a
{
	display:block;
}
#socials li path
{
	fill:var(--blue);
}
#socials li:hover
{
	border-color:var(--black);
}
#socials li:hover path
{
	fill:var(--black);
}

#page-menu
{
	position:sticky;
	top:0;
	float:right;
	margin-top:var(--header-height);
	width:200px;

	line-height:24px;
	overflow:hidden;
	
	background-color:var(--white);
	min-height:100vh;
	
	transition:transform .2s ease 0s;
}
#page-menu.collapsed
{
	transform:translateX(100%);
}
#page-menu ul
{
	margin:0;
	padding:var(--padding);
	list-style:none;
}
#page-menu li.header
{
	margin:5px calc(var(--padding) * -1);
	padding:0 var(--padding);
	background-color:var(--blue);
	color:var(--white);
}
#page-menu a
{
	display:block;
	text-decoration:none;
}
#page-menu a:hover
{
	color:var(--black);
}
#page-menu a.selected
{
	color:var(--black);
	font-weight:bold;
}

#pages,
#pages-shadow
{
	position:absolute;
	left:0;
	right:var(--pages-right);
	top:var(--header-height);
	height:100%;
	min-height:calc(100vh - var(--header-height));
	overflow:hidden;
	
	transition:right .2s ease 0s;
}
#pages.collapsed
{
	right:0;
}
#pages-shadow
{
	right:0;
	margin-top:-15px;
	height:auto;
	min-height:calc(100vh - var(--header-height) + 15px);
}
#shadow
{
	position:absolute;
	left:10px;
	top:15px;
	width:200%;
	height:100%;

	box-shadow:var(--shadow);
	
	will-change: transform; 
	transform:translate3d(calc(50% - var(--pages-right) + var(--padding)),0,0); /* left side of menu */
	transition:var(--slide);
}

section
{
	position:absolute;
	top:0;
	left:10px;
	padding:var(--padding);
	
	min-height:100%;
	width:calc(100% - (2 * var(--offset)) - 10px);

	box-shadow:var(--shadow);
	background-color:var(--white);
	color:var(--blue);

	will-change: transform; 
	transform:translate3d(calc(100% + 10px + (2 * var(--offset)) + var(--padding)),0,0); /* under menu */
	transition:var(--slide);
}
section:first-child
{
	box-shadow:none;
}
section.clickable
{
	cursor:pointer;
}
section.clickable *
{
	pointer-events:none;
}
section.off
{
	/* box-shadow:none; */
	/* opacity:0; */
	/* transform:translateX(100%); */
}
section.blue
{
	background-color:var(--blue);
	color:var(--white);
}
section.blue a
{
	color:var(--white);
}
section .page,
section .detail
{
	position:relative;
	max-width:610px;
	padding-bottom:var(--padding);
}
section .detail h1
{
	padding-right:100px;
}
section.item .page,
section.detail .page,
section:not(.item):not(.detail) .detail
{
	display:none;
}

section .item,
section .publication
{
	display:block;
	margin-bottom:calc(2 * var(--padding));
}
section .item h2:first-child
{
	margin:0;
}
section .detail a.back
{
}
section .detail a.back::before
{
	content:'<';
	position:absolute;
	left:-10px;
}
section .detail a.back.head
{
	position:absolute;
	right:0;
	top:10px;
}
section .lazy
{
	background-color:rgba(0,0,0,.05);
	padding-bottom:calc(9 / 16 * 100%);
}
section .publication
{
	display:flex;
	align-items: flex-start;
}
section .publication img
{
	width:240px;
	max-width:calc(240/610 * 100%);
	margin-right:10px;
}
section .publication h2
{
	font-size:16px;
	line-height:var(--page-lineheight);
}


/*	responsive layouts */
@media (max-width:1024px)
{
	:root
	{
		--offset:35px;
	}
}

@media (max-width:935px)
{
	#menu-toggle
	{
		display:block;
	}
}

@media (max-width:767px)
{
	:root
	{
		--offset:15px;
		--padding:15px;
		--pages-right:0px;
	}

	#page-menu
	{
		position:fixed;
		/* margin-top:0; */
		left:calc(100vw - 200px);
		height:100vh;
		overflow-y:auto;
		-webkit-overflow-scrolling: touch;
	}
	
	section .publication
	{
		flex-wrap: wrap;
	}
	section .publication img
	{
	}
}