:root
{
	--accent:rgb(120,146,164);
	--accent-fade:rgba(120,146,164,.5);
	/* --accent-alt:rgb(219,185,161); */
	--accent-alt:rgb(184,145,117);

	--page-bg:#ffffff;
	--page-text:#000000;
	
	--page-width:1440px;
	
	/* --menu-select:.15s ease; */
	--menu-select:.15s cubic-bezier(.07,.83,.63,1);
	--menu-deselect:.4s ease;
	
	--media-move:1.3s cubic-bezier(.07,.83,.63,1) 0s;
	--media-bg:rgba(120,146,164,.25);
	/* --media-thumb-bg:rgba(219,185,161,.25); */
	--media-thumb-bg:rgba(184,145,117,.25);

	--media-caption-bg:rgba(219,185,161,.65);
}

html
{
	overflow-x:hidden;
	overflow-y:scroll;

}

body
{
	margin:0;
	padding:0;
	
	font-family:'ITCFranklinGothicStd-Book', sans-serif;
	font-size:16px;
	line-height:21px;
	font-weight:normal;
	font-style:normal;

	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);
}

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(--page-text);
}
a:hover
{
	text-decoration:none;
}
.text-accent
{
	color:var(--accent);
}
.text-accent-alt
{
	color:var(--accent-alt);
}


/* layout */

#page-centered
{
	width:var(--page-width);
	max-width:100%;
	margin:50px auto;
}

#page-content
{
	position:relative;
	float:right;
	width:50%;
	padding-top:50px;
	/* background-color:rgba(250,0,0,.05); */
}
#page-divider
{
	min-height:calc(100vh - 50px);
	height:100%;
	top:0;
	position:fixed;
	width:30px;
	transform:translateX(-50%);
	background-color:var(--accent-fade);
	z-index:1;
	
	pointer-events:none;
}
#page-divider-horizontal
{
	position:fixed;
	left:0;
	top:142px;
	height:30px;
	width:100vw;
	background-color:var(--accent-alt);
	opacity:.4;
}
.horizontal #page-divider,
.vertical #page-divider-horizontal
{
	display:none;
}
#language
{
	position:absolute;
	right:35%;
	top:0;
	z-index:1000;
}
#language .social
{
	float:right;
	margin-left:5px;
}
#language .social:last-child
{
	margin-left:15px;
}

#page-detail
{
	position:fixed;
	left:0;
	top:50px;
	width:calc(50% - 480px - 15px);
	height:calc(100vh - 50px);
	background-position:50% 0;
	background-size:cover;
	z-index:-1;
}

#page-feature
{
	position:fixed;
	left:0;
	top:50vh;
	width:50%;
	padding-left:calc(50% - 480px);
	padding-right:30px;
}


#page-feature .accent,
#page-feature .accent-alt
{
	font-size:39px;
	line-height:47px;
}


/* menu */

#page-menu
{
	position:fixed;
	
	left:50%;
	transform:translateX(-480px);
	
	top:50px;
	z-index:1000;
}
#page-menu ul
{
	margin:0;
	padding:0;
	list-style:none;
}

.menu
{
	font-size:58px;
	line-height:70px;
	
}

.menu li
{
	position:relative;
	padding-right:10px;

	cursor:pointer;
}
.menu li a
{
	display:block;
	transition:
		transform var(--menu-deselect) 0s,
		font-size var(--menu-deselect) 0s;
		
}
.menu li.selected > a,
.menu li:hover > a
{
	transform:translateX(40px);
	transition:
		transform var(--menu-select) 0s,
		font-size var(--menu-select) 0s;

/* 
	padding-left:40px;
	transition:padding var(--menu-select) 0s;
 */
}
.menu li a
{
	text-decoration:none;
}
.menu li.selected > a,
.menu li:hover > a
{
	color:var(--accent);
}

.menu .path,
.menu .close,
.menu .open
{
	display:none;
}

/* 
.menu li.selected > a
{
	text-decoration:underline;
}
 */

.section-menu
{
	position:absolute;
	left:100%;
	top:calc(58px - 23px);
	font-size:23px;
	line-height:28px;
	
	white-space:nowrap;
}
.section-menu.projects
{
	left:53%;
	top:calc(58px - 15px);
}
.section-menu a
{
	transform-origin: 0 50%;
}


.section-menu li.selected > a,
.section-menu li:hover > a
{
	transform:translateX(20px) scale(1.26);
	text-decoration:underline;
	color:var(--text);
	
/* 
	font-size:29px;
	line-height:28px;
 */
}

#page-menu .item-menu
{
	padding-left:20px;
}

#socials
{
	display:flex;
	position:absolute;
	top:calc(100vh - 50px - 40px);
	
}
#socials a
{
	/* color:var(--accent-fade); */
	margin-right:8px;
}
#socials a:hover
{
	color:var(--accent);
}


/* content */

#page-content p
{
	position:relative;
	margin-right:30px;
	z-index:2;
}
#page-content > p:first-of-type
{
	margin-top:-14px; /* match baseline of Soda menu item */
}
#page-content > h1:first-of-type
{
	margin-top:-20px; /* match baseline of Soda menu item */
}
#page-content > .inline-media + p,
#page-content > h1 + p,
#page-content > .inline-media + h1
{
	margin-top:1rem !important;
}

h1
{
	font-size:23px;
	line-height:30px;
	font-weight:normal;
}
.accent
{
	font-size:23px;
	color:var(--accent);
}
.accent-alt
{
	font-size:23px;
	color:var(--accent-alt);
}

.inline-media
{
	position:relative;
	margin-left:30px;
	margin-bottom:15px;
	max-width:80%;
	background-color:var(--media-bg);
	z-index:0;
	
	transition:transform var(--media-move);
}
.inline-media.small
{
	max-width:30%;
}

.inline-media-thumb
{
	display:none;
}

.inline-media > .media,
.inline-media > .embed
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.inline-media iframe
{
	width:100% !important;
	height:100% !important;
}
.inline-media .caption
{
	opacity:0;
	position:absolute;
	bottom:15px;
	min-height:30px;
	width:100%;
	padding:5px 15px;

	background-color:var(--media-caption-bg);
	
	transition:
		transform var(--media-move);
		/* opacity .1s linear 0s; */
		
	transform:translateX(30px);

	font-size:13px;
	line-height:20px;
	/* color:white; */
}
.inline-media .caption.player
{
	bottom:45px;
}
.inline-media:hover:not(.small) .caption
{
	opacity:1;
	/* transform:translateX(30px); */
}

.inline-media.portrait.move.move-left
{
	transform:translateX(-30px);
}
.inline-media.move.move-left
{
	transform:translateX(-60px);
}
.inline-media.move.move-right
{
	transform:translateX(40px);
}


/* lists */

.project
{
	display:block;
	position:relative;
	margin:0 0 30px 30px;
	text-decoration: none;
	transition:transform var(--media-move);
}
.project .header
{
	display:inline-block;
	position:relative;
	width:100%;
	background-color:var(--media-thumb-bg);
	z-index:-1;
}
.project .thumb
{
	display:inline-block;
	position:absolute;
	width:100%;
	height:100%;
}
.project .text
{
	display:inline-block;
}
.project .title
{
	position:relative;
	display:inline-block;
	color:var(--accent-alt);
	
	transition:transform var(--menu-deselect) 0s;
	transform-origin:0 75%;
}
.project .short
{
	display:block;
}
.expertise .project .short
{
	display:none;
}


.small .project,
.medium .project
{
	display:flex;
	width:90%;
	align-items: flex-start;
}

.small .project .header
{
	flex-basis:28%;

}
.small .project.portrait .header
{
	flex-basis:22%;

}
.small .project .text
{
	flex-basis:72%;
	padding-left:15px;
}

.small .project .header,
.small .project .text
{
	transition:transform var(--menu-deselect) 0s;
}

.small .project:hover .header
{
	transform:scale(1.15);
	transition:transform var(--menu-select) 0s;

}
.small .project:hover .text
{
	transform:translateX(20px);
	transition:transform var(--menu-select) 0s;
}

.small .project.portrait.move.move-left
{
	transform:translateX(-30px);
}
.small .project.move.move-left
{
	transform:translateX(-60px);
}
.small .project.move.move-right
{
	transform:translateX(40px);
}





.medium .project .header
{
	flex-basis:65%;
}
.medium .project.portrait .header
{
	flex-basis:35%;
}
.medium .project .text
{
	flex-basis:35%;
	padding-left:15px;
}

.medium .project .title,
.medium .project .short
{
	transition:transform var(--menu-deselect) 0s;
	transform-origin:0 0;
}


.medium .project:hover .title
{
	transform:translateX(20px) scale(1.26);
	transition:transform var(--menu-select) 0s;
	text-decoration:underline;

}
.medium .project:hover .short
{
	transform:translateY(10px);
	transition:transform var(--menu-select) 0s;
}

/* 
.medium .project:hover .text
{
	transform:translateX(20px);
	transition:transform var(--menu-select) 0s;
}
 */




.medium .project.portrait.move.move-left
{
	transform:translateX(-30px);
}
.medium .project.move.move-left
{
	transform:translateX(-60px);
}
.medium .project.move.move-right
{
	transform:translateX(40px);
}




.large .project
{
	width:80%;
}
.large .project .header
{
	flex-basis:100%;
}

.large .project.portrait
{
	width:60%;
}
.large .project .text
{
	margin:0 -30px 0 30px;
}
/* 
.large .project .header
{
	transition:transform var(--menu-deselect) 0s;
	transform-origin: 0 50%;
}
.large .project:hover .header
{
	transform:scale(1.05);
	transition:transform var(--menu-select) 0s;
}
 */
.large .project .title
{
	transform-origin:0 0;
}
.large .project:hover .title
{
	text-decoration:underline;

	transform:translateX(20px) scale(1.26);
	transition:transform var(--menu-select) 0s;
}
.large .project .short
{
	display:block;
	transition:transform var(--menu-deselect) 0s;
}
.large .project:hover .short
{
	transform:translateY(6px);
	transition:transform var(--menu-select) 0s;
}



.large .project.portrait.move.move-left
{
	transform:translateX(-30px);
}
.large .project.move.move-left
{
	transform:translateX(-60px);
}
.large .project.move.move-right
{
	transform:translateX(40px);
}


@media (max-width:985px)
{
	#page-menu
	{
		left:10px;
		transform:translateX(0);
	}
	#page-feature
	{
		left:10px;
	}
	#page-detail
	{
		display:none;
	}
}

/* single column layout */

@media (max-width:800px)
{
	#page-divider
	{
		left:50%;
	}
	#page-menu
	{
		left:0;
		top:0;
		width:100%;
		/* height:50px; */
		overflow:hidden;
		background:rgba(255,255,255,1) linear-gradient(var(--accent-fade),var(--accent-fade)) no-repeat 50%;
		background-size:30px 100%;
		
		transition:
			background-color var(--menu-deselect) 0s,
			max-height  var(--menu-deselect) 0s;
	}
	#page-centered.horizontal #page-menu
	{
		background-image:none;
	}
	
	#page-menu:not(.expanded)
	{
		max-height:65px !important;
	}
	#page-menu.expanded
	{
		background-color:rgba(255,255,255,1);
		z-index:1000;
	}
	#page-menu ul
	{
		padding:5px 15px;
	}

	.menu
	{
		
		font-size:52px;
		line-height:60px;
	}
	.section-menu
	{
		position:relative;
		left:30px;
		top:0;
	}
 
	.section-menu.projects
	{
		left:30px;
		top:auto;
	}

	.section-menu .item-menu
	{
		display:none;
	}


	.menu li.selected > a
	{
		transform:translateX(20px);
	}
	.menu li:hover:not(.selected) > a
	{
		transform:none;
		color:black;
	}
	
	.menu .path
	{
		display:block;
		position:absolute;
		font-size:16px;
		top:28px;
		left:125px;
		color:var(--accent);
		line-height:24px;
	}

	#page-menu:not(.expanded) .open,
	#page-menu.expanded .close
	{
		position:absolute;
		display:block;
		top:0;
		right:0;
	}
	
	#page-menu:not(.expanded) li.selected .open,
	#page-menu.expanded li.selected .close
	{
		right:10px;
	}
	
	#page-menu:not(.expanded) .open
	{
		top:18px;
	}
	
	#socials
	{
		top:22px;
		right:40px;
	}
	#socials a
	{
		color:var(--accent);
		margin-right:10px;
	}

	#language
	{
		right:15px;
		top:-50px;
	}
	
	#language .social
	{
		display:none;
	}
	
	#page-feature
	{
		display:none;
	}
	
	#page-content
	{
		margin-top:120px;
		width:100%;
		padding:0 15px;
		float:none;
	}
	#page-content.project
	{
		margin-left:0;
	}
	#page-content > p:first-of-type,
	#page-content > h1:first-of-type
	{
		margin-top:0;
	}

	.inline-media
	{
		margin-left:30px;
	}
	
	/* transforms */

	.portrait.move.move-left
	{
		transform:translateX(-15px) !important;
	}
	.move.move-left
	{
		transform:translateX(-30px) !important;
	}
	.move.move-right
	{
		transform:translateX(20px) !important;
	}


	/* lists */

	.small .project
	{
		margin-left:7%;
		width:86%;
	}
	.small .project .header
	{
		flex-basis: 47.5%;
	}
	.small .project.portrait .header
	{
		flex-basis: 32.5%;
	}

	.medium .project
	{
		display:block;
		margin-left:10%;
		width:80%;
	}
	.medium .project .header,
	.medium .project.portrait .header
	{
		flex-basis:100%;
	}

 
	.large .project
	{
		margin-left:5%;
		width:90%;
	}
	.large .project.portrait
	{
		margin-left:10%;
		width:80%;
	}
	.large .project .text
	{
		margin: 0 -15px 0 15px;
	}
}