:root
{
	--page-bg:rgb(255,255,255);
	--header-bg:rgba(242,242,242,.8);
	--menu-bg:rgba(242,242,242,.8);
	--page-text:rgb(28,28,28);
	--accent:rgb(255,0,187);
	
	--curve:cubic-bezier(.23,.34,.18,1);

/* 
	--page-transition:.6s var(--curve) 0s;
	
	--page-off:.7s var(--slide-curve) 0s;
	--page-on:.3s var(--slide-curve) .4s;
 */

	--slide-curve:cubic-bezier(.47,-0.01,.4,1);

	
	--red:#A9132A; /* rgb(200, 41, 48); */
	--green:#578D67; /* rgb(87,161,103); */
	--blue:#4154FC; /* rgb(76, 133, 183); */
	
	
	--directors:var(--red);
	--photographers:var(--green);
	--film-tv:var(--blue);
	--white:#ffffff;/* var(--page-bg) */;

	--fade-color-transition:1s var(--curve) 0s;
	
	
	--blur:8px;
	--blur-speed:2.4s;
	--blur-delay:0s;
	--blur-reset:.2s;
	
	--fade-speed:1s;
	
	--gradient-length:80vh;
}

html
{
	height:100%;
	/* scroll-behavior: smooth; */
}
html.has-gallery
{
	overscroll-behavior-x: contain;
}
body
{
	margin:0;
	padding:0;
	
	font-family:GT-Zirkon,sans-serif;
	font-size:16px;
	line-height:1.3;
	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;
}
.uc
{
	text-transform: uppercase;
}
em,
.italic
{
	/* font-family: freight-big-pro, serif; */
}
.mono,
.tag
{
	font-family:CenturySchoolbook, monospace;
}

a
{
	color:var(--page-text);
	text-decoration: none;
}
.accent,
.text-accent
{
	color:var(--accent);
}
ul
{
	margin:0;
	padding:0;
	list-style:none;
}
h1
{
	line-height:.9;
}

/* 40 deg slash */

.keyword::before,
body:not(.transition):not(.has-touch) .list-item:hover::before,
.list-item.selected::before,
.grid-item .project::before,
body:not(.transition):not(.has-touch) .page-work .related a[href]:hover::before,
.page-work .filter .title::before,
.related .type::after,
.ui-autocomplete .rel::before
{
	content:'';
	width:1em;
	height:1px;
	background-color:var(--page-text);
	position:absolute;
	left:0em;
	top:calc(1.2em/2);
	transform:rotate(-40deg);
}

/* intro */

#intro
{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:2000;
	background-color:var(--page-bg);
	
	transition:opacity .25s ease 0s;
}
#intro.off
{
	opacity:0;
}

#intro video
{
	width:100%;
	height:100%;
	object-fit: cover;
}

/* header menu */

.mobile-only
{
	display:none;
}
header
{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	
	padding:10px 15px;
	z-index:1000;

	pointer-events:none;

	transition:transform .3s var(--curve) 0s;
}
header.off
{
	transform:translateY(-150%);
}
header a
{
	pointer-events: all;
}

nav
{
	display:flex;
	justify-content: space-between;
	font-size:14px;
}
nav > *:not(:first-child),
nav section > *:not(:first-child)
{
	margin-left:25px;
}
nav a
{
	display:inline-block;
	transition:transform .1s ease 0s;
}
nav a.home span /* we keep the written '100prcnt' here to set the logo width */
{
	height:0;
	overflow:hidden;
}
nav a.home img
{
	width:50px;
	pointer-events:none;
}

nav a.selected span
{
	pointer-events:all;
}
nav a span
{
	display:block;
	padding:0 3px;
	
	transform-origin:100% 0%;
	transition:transform .1s ease 0s;
	pointer-events:none;
	
	/* background-color:var(--page-bg); */
}
body:not(.transition) header:not([class^="page-section"]) nav span
{
	text-shadow:1px 1px 0 rgba(255,255,255,.3);
}

nav a.selected:not(.home) span
{
	transform:rotate(-40deg);
	transition:none;
	
	background-color:var(--page-bg);
	
/* 
	background-color:var(--page-text);
	color:var(--page-bg);
 */
}
nav a:hover span
{
	/* background-color:var(--page-bg); */
}
.page-section-directors nav a.selected span
{
	background-color: var(--directors);
}
.page-section-photographers nav a.selected span
{
	background-color: var(--photographers);
}
.page-section-film-tv nav a.selected span
{
	background-color:var(--film-tv);
}

body.transition nav a.selected span
{
	background-color:transparent;
}
nav section
{
	flex-grow:2;
	display:flex;
	justify-content:flex-start;;
}

nav .search
{
	position:relative;
	user-select:none;
	cursor:text;
	min-width:50px;
	transition:min-width .3s var(--curve) 0s;
	pointer-events:all;
}
nav .search .bg
{
	background-color:var(--page-bg);
	position:absolute;
	right:-15px;
	top:-10px;
	height:100vh;
	width:calc(100% + 30px);
	
	transform:translateX(100%);
	transition:transform .3s var(--curve) 0s;
}
nav .search input
{
	display:none;
	position:absolute;
	left:-15px;
	top:0;
	width:calc(100% + 30px);
	border:none;
	padding:0 10px;
	background-color:transparent;
	
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	outline:none;

	font-family:GT-Zirkon,sans-serif;
	font-size:13.8px;
	line-height:18px;
}

nav .search.active
{
	min-width:220px;
}
nav .search.active input,
nav .search.active .bg
{
	display:block;
	transform:none;
}
.ui-widget
{
	font-family:GT-Zirkon,sans-serif;
	font-size:14px;
	pointer-events:all;
	text-transform: none;
}
.ui-widget.ui-widget-content
{
	border:none;
}
.ui-widget-content
{
/* 
	-webkit-backdrop-filter:blur(15px);
	backdrop-filter:blur(15px);
	background-color:var(--menu-bg);
 */
}
.ui-autocomplete > .keyword
{
	margin:15px 5px 1px 15px;
	opacity:.6;
}
.ui-menu .ui-menu-item
{
}
.ui-menu .ui-menu-item-wrapper
{
	padding:2px 15px;
}
.ui-widget-content .ui-state-active
{
	border-color:transparent;
	background-color:var(--page-text);
	color:var(--page-bg);
}
.ui-widget-content .ui-state-active .keyword::before
{
	background-color: var(--page-bg);
}


/* base layout */

body.transition
{
	overflow:hidden;
}
.page
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	min-height:100%;
	padding:80px 0px 40px 0px;
	
	transition:transform .5s var(--curve) 0s;
}
.page.prev
{
	position:fixed;
	/* each page-type may have custom transition */
}
.page.next
{
	/* off screen next page */
	visibility:hidden;
	transform:translateY(100vh);
}

/* page specific transitions */

.page[data-section]
{
	/* blur reveal section page */
	transition:filter .4s var(--curve) 0s;
}
.page[data-section].next
{
	transform:none;
	filter:blur(10px);
}
.page[data-section].off
{
	/* slide up section page */
	transition:transform .5s ease-in .1s;
	transform:translateY(-100%);
	height:calc(100vh + var(--gradient-length));
}
.page.page-section-directors.off
{
	background: linear-gradient(var(--directors),var(--directors) 100vh, transparent);
}
.page.page-section-photographers.off
{
	background: linear-gradient(var(--photographers),var(--photographers) 100vh, transparent);
}
.page.page-section-film-tv.off
{
	background: linear-gradient(var(--film-tv),var(--film-tv) 100vh, transparent);
}
.page.page[data-section-item]:not(.landing)
{
	transition-duration:.6s;
}
.page[data-work-item].prev
{
	/* transition-duration: 2s; */
}
.page[data-work-item].prev .thumbs-list
{
/* 
	transform: translateY(calc(-100% + 100vh));
	transition-duration:2s;
 */
}
.page-home.restore,
.page-work.restore 
{	
	/* visit from history */ /* TODO find out why work grid restore is diff from sectonItem restore! */
	/* transition:none; */
}
.page-work:not([data-work-item])
{
	transition-delay:.2s;
}
.page-work[data-work-item].prev:not(.color)
{
	/* transform:translateY(-100vh); */
	/* transform:translateY(-100%); */
	/* transition-delay:0s; */
}
.page-work[data-work-item].prev:not(.color) > *
{
	transform:translateY(calc(-100% - 40px));
	transition:transform .5s var(--curve) 0s;
}
.page-home:not(.landing),
.page-about:not(.landing),
.page-news:not(.landing),
.page-stories:not(.landing)
{
	transition-delay:.4s;
}
.page-work + .page-home
{
	/* transition-delay:.4s; */
}
.page.page-work[data-work-item].prev .grid-item:not(.in-view)
{
	display:none;
}
.page.page-work[data-work-item].next
{
	transform:translateY(calc(100vh + 60px)); /* push page down extra so media observer is not triggered */
}


/* 
.row.reveal-reverse
{
	background-color:rgba(250,250,0,.1);
}
 */



.focussed
{
	position:fixed !important;
	z-index:999;
}
.focussed.remove
{
	opacity:0;
	transition:opacity .1s ease 0s !important;
}

.color-transition
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.color-transition.remove
{
	opacity:0;
	transition:opacity var(--fade-color-transition);
}


/* media grid */

.grid
{
	position:relative;
	width:100%;
	padding:0 5px;

	/* background-color:var(--page-bg); */
	z-index:100;
}
body:not(.transition):not(.is-scrolling) .grid
{
	overflow:hidden;
}
.row
{
	display:flex;
}


.grid-item
{
	flex-grow:2;
  font-size: 12px;
  padding: 0 10px 60px 10px;
}
.grid-item figure
{
	margin:0;
	width:100%;
	transform:translateY(60vh);
	transition:transform .8s var(--curve) 0s;
}

body.transition .row.reveal-reverse .grid-item:not(.loaded) figure /* TODO verify this rule! */
{
	/* transition:none; */
}

body.transition .row.reveal-reverse .grid-item
{
	visibility:hidden;
}
.row.reveal-reverse .grid-item:not(.loaded) figure
{
	transform:translateY(-120vh);
}
.grid-item.loaded figure
{
	transform:none;
}

.grid-item figcaption
{
	margin-top:5px;
}
/* 
.grid-item figcaption .type
{
	position:relative;
	transition:padding .2s ease 0s;
	padding-right:1.1em;
}
.grid-item:hover figcaption .type
{
	padding-left:1.1em;
	padding-right:0;
	transition:none;
}
.grid-item figcaption .type
{
	position:relative;
}
 */
	
.grid-item .project
{
	position:relative;
	margin:0 .5em;
	padding-left:1.3em;
	font-weight:500;
}

.grid-item .project::before
{
	top:.5em;
}

.grid-item .media
{
	width:100%;
	background-size:cover;

	background-color:rgba(0,0,0,.1);
	
	
}
.grid-item .media > * 
{
	pointer-events:none; /* passthrough clicks on vimeo */
}
.media
{
	background-size:cover;
	/* background-color:rgba(242,242,242,.8) !important; */
	background-position:50% 50%;
}
.gallery .media
{
	background-color:transparent !important;
}

.media.focussed.blur,
.slide .media.blur
{
	filter:blur(10px);
	opacity:0;
	transition:
		filter .5s ease 0s,
		opacity .2s ease .2s;
}

/* use less horizontal space for portraits on a row */

.grid-item.portrait,
.grid-item.placeholder
{
	flex-grow:1;
}
.grid-item.placeholder
{
	/* flex-basis:15%; */
}

.page.prev:not(.color):not([data-work-item]) .grid-item.in-view figure,
.page[data-story-item].prev .display.in-view figure,
.page[data-story-item].prev section.in-view .media
{
	transform:translateY(-240vh);
	transition-duration:1.4s;
}

.page.page-work[data-work-item]:not(.prev):not(.landing)
{
	transition-delay:.45s;
}
.page.page-work[data-work-item].back,
.page.page-work[data-work-item].forward
{
	transition-delay:.1s !important;
}

.page[data-section-item].prev:not(.color) > *:not(.grid),
.page-about.prev:not(.color) > *:not(.grid),
.page-about.prev:not(.color) .about-footer,
.page[data-story-item].prev h1,
.page[data-story-item].prev h2,
.page[data-story-item].prev p,
.page[data-story-item].prev span
{
	opacity:0;
	transition:opacity .2s ease 0s;
/* 
	filter:blur(10px);
	transition:
		filter .5s ease 0s,
		opacity .2s ease .2s;
 */
}
.page[data-story-item].prev .story-media
{
	background-color:transparent !important;
	transition:background-color .2s ease 0s;
}
.page[data-story-item].prev .infinite-list
{
	overflow-y:visible;
}





/* overview (list) pages */

.page[data-section]
{
	padding:80px;
}
.page.page-section-directors
{
	background-color: var(--directors);
}
.page.page-section-photographers
{
	background-color: var(--photographers);
}
.page.page-section-film-tv
{
	background-color:var(--film-tv);
	overflow-x:hidden;
}



.overview
{
	position:relative;
	display:flex;
	align-items: stretch;
	
	min-height:calc(100vh - 160px);
}
.overview .preview
{
	position:relative;
	flex-grow:1;
	/* background-color:rgba(0,0,0,.1); */
}
.page-section-photographers .overview .preview
{
	margin:0 20px;
}
.overview .preview img
{
	position:absolute;
	background-color:transparent;
	
	transition:opacity .15s ease 0s;
	max-width:560px;
}
.overview .preview img.portrait
{
	max-height:560px;
}

.overview .list
{
	flex-shrink:0;
	display:flex;
}
.overview .list-items
{
	width:100%;
	margin:100px 0;
}
.overview .list-items .selected
{
	visibility:hidden;
}
.overview .list-items.two-column
{
	columns:2;
}

.overview .list-item
{
	display:block;
	position:relative;
	padding-right:2.1em;
	transition:padding .2s ease 0s;

	font-size:20px;
}
body:not(.transition):not(.has-touch) .overview .list-item:hover,
.overview .list-item.selected
{
	padding-left:1.1em;
	padding-right:1em;
	transition:none;
}
.overview .list-item::before
{
	height:2px;
	top:calc(1.3em/2 - 1px);
}



/* item pages */

.page .head,
.page .body
{
	width:80%;
	margin:auto;
	display:flex;
	/* justify-content: space-between; */
}

.page .head
{
	position:sticky;
	
	top:40px;
	z-index:-1;
	height:80vh;

	flex-direction:column;
	justify-content: center;

	text-align:center;
	/* margin-top:340px; */
	
	/* background-color:rgba(250,250,0,.1); */
}

.page[data-section-item] .head
{
	position:fixed;
	left:10%;
}

.page[data-section-item] .grid
{
	margin-top:80vh;
}

.page[data-section-item] .body
{
	margin:120px auto;
}
.page[data-section-item] .contact
{
	padding:40px 40px 0 0;
	text-align:right;
	font-size:14px;
}
.page[data-section-item] .contact a:hover
{
	text-decoration: underline;
}

.page .head.section-item
{
	transition:opacity .1s ease 0s;
}
.page .head.section-item.off
{
	opacity:0;
	
}


.page .body
{
	align-items: center;
}
.page h1
{
	font-family:CenturySchoolbook, monospace;
	font-weight:normal;
	font-size:80px;
	margin:0;
	
	text-transform: uppercase;

}
.page-work h1
{
	font-size:2rem;
}


.page .head .keywords
{
	margin-top:10px;
	font-size:12px;
}
.keyword
{
	/* display:block; */
	position:relative;
	padding-left:1.2em;
	
}
.head .keyword:not(:first-child)
{
	margin-left:1.5em;
}


.body h2
{
	font-weight:normal;
	font-size:1rem;
	flex-basis:40%;
}
.body .text
{
	flex-basis:60%;
}

.page .back-to-top
{
	position:fixed;
	
	display:inline-block;
	
	left:50%;
	top:10px;
	height:60px;

	/* transform:translate(-64%,0); */ 
	transform:translate(-50%,0);
	
	font-size:14px;
	
	transition:transform .3s var(--curve) 0s;
	
	z-index:999; /* below menu */
}
.page .back-to-top span
{
	display:block;
	transform-origin:100% 0;
	transform:rotate(-40deg);
	transform:none;
	padding:0 3px;
	
	background-color:var(--page-bg);
}
.page .back-to-top.off
{
	transform:translate(-64%,-150px);
	transform:translate(-50%,-80px);
}
body.transition .back-to-top, /* TODO make it appear with transition on page.restore */
.page.prev .back-to-top
{
	display:none;
}


/* work filter */

.filter
{
	position:relative;
	/* top:40px; */
	margin:0px 0 100px 0;
	padding:0px 40px;

	display:flex;
	flex-wrap: wrap;
/*
	align-items: flex-start;
 */

	font-size:14px;
	
	transition: opacity .15s ease 0s;

	/* overflow:hidden; */
}
.filter.off,
.page.prev .filter
{
	opacity:0;
	/* height:0 !important; */
/* 
	opacity:0;
	pointer-events: none;
 */
}
body.transition .page.restore .filter
{
	transition-duration:0s;
}

.filter .title
{
	display:inline-block;
	display:none;
	
	position:relative;
	margin-left:2px;
	margin-bottom:1em;
	padding-left:1.2em;

	opacity:.6;

	font-size:12px;
	
	/* text-transform: uppercase; */
}
.filter .title span
{
	/* opacity:.5; */
}
.filter-tags
{
	margin-left:120px;
	flex-grow:1;
	
}
.filter-tags section
{
	columns:auto 11rem;
	max-width:50rem;
}

/* 
.filter .wrap
{
  display:grid;
  grid-template-rows:1fr;
	transition:grid-template-rows .5s var(--curve) 0s;
}
.filter .wrap section
{
  overflow:hidden;
}
 */

.filter.collapsed
{
	/* z-index:200; */
	/* opacity:0; */
	/* transform:translateY(-150%); */
}
.filter.collapsed .wrap
{
	grid-template-rows: 0fr;
}

.filter .list-item
{
	display:block;
	position:relative;
	margin-left:1.2em;
	
	transition:padding .2s ease 0s;
	padding-right:2.2em;
	
	/* background-color:rgba(250,250,0,.1); */
	white-space:nowrap;
}
body:not(.transition):not(.has-touch) .filter .list-item:not(.selected):hover
/* .filter .list-item.selected */
{
	padding-left:1.2em;
	padding-right:1em;
	transition:none;
}
.filter .list-item.selected::before,
.filter .list-item.selected:hover::before
{
	left:-1.2em !important;
}
.filter .list-item.selected:hover::before
{
	/* transform:rotate(40deg); */
}

body:not(.has-touch) .filter .list-item.selected:not(.all):hover::after
{
	content:'';
	width:1em;
	height:1px;
	background-color:var(--page-text);
	position:absolute;
	left:-1.2em;
	top:calc(1.2em/2);
	transform:rotate(40deg);
}

.filter .no-result
{
	width:100%;
	padding:80px 15px;
}


/* work  */

.page-work[data-work-item]
{
	display:flex;
	padding:0 40px;
	align-items: flex-start;
	flex-wrap: wrap;
	
	/* align-items: center; */
	
	/* background-color:rgba(250,250,0,.2); */
}

.page-work article
{
	position:sticky;
	top:40px;
	margin-top:40px;
	flex-basis:80%;
}
.page-work.prev article
{
	/* position:absolute; */
}

.page-work article > section
{
	min-height:calc(100vh - 40px);
	/* min-height:100vh; */
	display:flex;
	align-items:center;
}

.page-work aside
{
	padding-top:101px; /* one px below the observer root margin */
	width:125%; /* span full width of article */
	
	/* background-color:rgba(250,250,0,.1); */
	
	display:flex;
	justify-content: space-between;
}
aside > div
{
	width:40%;
}
aside > div:last-child
{
	/* margin-right:-15px; */
}
aside .grid
{
	margin:20px -15px;
	width:calc(100% + 30px);
	/* background-color:rgba(250,0,0,.1); */
}
aside > div:first-child .grid
{
	margin-left:-15px;
}
aside .grid-item
{
	flex-basis:calc(100% / 3);
	flex-grow:0;
}
aside .grid-item figcaption
{
	display:flex;
	flex-direction: column;
}
aside .grid-item .project
{
	margin:0;
}
aside .related-by-rel .related,
aside .related-by-rel span.type
{
	display:none;
}

aside .keyword,
.page-about .keyword
{
	opacity: .6;
  font-size: 14px;
}
aside .keyword + a
{
	margin-top:.6rem;
}

.page-work .text
{
	flex-basis:30%;
}
.page-work .display
{
	flex-basis:70%;
}

.page-work .text .related
{
	margin:.6em 0 2.5em 0;
}
.page-work .text .related .type::after
{
	display:inline-block;
	position:relative;
	margin-left:5px;
	top:auto;
	transform-origin:0 100%;
}
.page-work .text p a
{
	color:var(--green);
}
.page-work .related a
{
	display:block;
	position:relative;
	font-size:14px;
	
	transition:padding .2s ease 0s;
}
body:not(.transition):not(.has-touch) .page-work .related a[href]:hover
{
	padding-left:1.1em;
	transition:none;
}
.page-work .contact
{
	margin-top:2.5em;
	font-size:14px;
}
.page-work .contact a:hover
{
	text-decoration:underline;
}

.page-work .display figure
{
	position:relative;
	width:85%;
	margin:auto;
}
.page-work .display figure.portrait
{
	width:65%;
}
.page-work .display figure .media
{
	margin:auto;
	transform:translateY(60vh);
	transition:transform .6s var(--curve) 0s;
	background-size:cover;
	max-height:calc(100vh - 60px);
	
	will-change: transform;
}
.page-work .display figure.loaded .media
{
	transform:none;
}

.thumbs-list
{
	flex-basis:20%;
	
	display:flex;
	flex-direction: column;
	justify-content: center;
	
	/* min-height:calc(100vh - 40px); */
	min-height:calc(100vh + 40px);
	
	/* margin-bottom:300px; */
	
	transition:transform .6s var(--curve) 0s;
}
.thumbs-list section
{
	display:flex;
	justify-content: flex-end;
	text-align:right;
}
.thumbs-list .media
{
	cursor:pointer;
}

.infinite-list
{
	overflow:scroll;
	scrollbar-width: none;
	
	display:flex;
}
.infinite-list::-webkit-scrollbar
{
	display:none;
}
.infinite-list section
{
	width:200px;
	flex-shrink:0;
}

.page-section-film-tv .infinite-list
{
	align-items: flex-end;

	position:absolute;
	top:100vh;
	transform:translateY(-100%);
	left:0;
	width:100%;
	
	transition:
		transform 1s var(--curve) .6s,
		filter .2s var(--curve) 0s,
		opacity .1s ease .1s;
		
	/* border:1px dotted white; */
}
.page-section-film-tv.landing .infinite-list
{
	/* transition-delay:0s; */
}
.page-section-film-tv.off .infinite-list
{
	filter:blur(10px);
	opacity:0;
}

.page-section-film-tv .infinite-list.off
{
	/* transform:translate(calc(100% + 101px),-100%); */
}

.gallery
{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	
	z-index:2000;
	
	/* background-color:var(--header-bg); */
	background-color:rgba(242,242,242,.7);
	
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	
	transition:all 1s ease 0s;
	
	overflow:hidden;
	
	overscroll-behavior-x: contain;
}

.page.prev .gallery
{
	display:none;
}
.gallery.off
{
	pointer-events:none;
	-webkit-backdrop-filter:none;
	backdrop-filter:none;
	background-color:transparent;
}
.gallery.off .slides
{
	transform:translateY(calc(100vh + 200px));
	transition:none;
	scroll-behavior:auto;
}
.gallery.off .slides.off
{
	transform:none;
}

.gallery .slides
{
	width:100%;
	height:100%;

	display: flex;

  overflow-x:scroll;
  overscroll-behavior-x:contain;
	scroll-snap-type: x mandatory;
	
	scroll-behavior: smooth;
	
	scrollbar-width:none;
	
	transition:transform .5s var(--curve) 0s;
}
.gallery .slides::-webkit-scrollbar
{
	display:none;
}
.gallery .slides.no-snap
{
	scroll-snap-type: none;
}

.gallery .slide
{
	flex-shrink:0;
	
	width:100%;
	height: 100%;
	padding:20px 40px;
	
	scroll-snap-align: center;
}
.gallery .media
{
	position:relative;
	top:50%;
	transform:translateY(-50%);
	margin:auto;
	
	max-height:100%;
}

.gallery .nav
{
	position:absolute;
	top:50%;
	transform:translateY(-60%);
	
	font-size:2rem;
	transition:opacity .2s ease 0s;
}
.gallery .nav.off
{
	opacity:0;
	pointer-events:none;
}
.gallery .nav.previous
{
	left:10px;
}
.gallery .nav.next
{
	right:10px;
}


/* about */

.page.page-about
{
	padding:80px 40px 40px 40px;
}
.page-about .body
{
	display:flex;
	width:100%;
	align-items:flex-start;
}
.page-about .text
{
	flex-basis:24%;
	min-width:240px;
}
.page-about .text a
{
	color:var(--green);
}
.page-about .body span.title
{
	font-size:14px;
}
.page-about .body > *
{
	transition:transform .6s var(--curve) .6s;
}
.page-about .body > .contact
{
	transition-delay:.7s;
	display:flex;
}
.page-about .body > .contact p
{
	margin-left:80px;
}
.page-about.next .body > *
{
	transform:translateY(100vh);
}
.page-about h1
{
	position:absolute;
	left:48vw;
	/* top:50vh; */
	top:500px;
	display:inline-block;
	font-size:2rem;
	transform:translate(-50%,-50%) rotate(-40deg);
	/* transform-origin: 100% 0; */
	max-width:900px;
	text-align:center;
	
	/* background-color:magenta; */
}
.page.page-about a:hover
{
	text-decoration:underline;
}
.page-about .grid
{
	position:absolute;
	top:220px;
	left:30px;
	right:30px;
	width:calc(100% - 60px);
	padding:0;
	/* width:60%; */
	
	padding-bottom:calc(800px + 40px); /* TODO set in js? */
	
	/* padding-bottom:calc(30vh + 600px); */
	
	transition:transform .6s var(--curve) .3s;
	
	pointer-events:none;
}
.page-about .grid figcaption
{
	pointer-events:all;
}
.page-about.next .grid
{
	transform:translateY(100vh);
}
.page-about .row
{
	/* justify-content: flex-end; */
}
.page-about .grid-item
{
	width:100%;
	flex-grow:0;
	flex-shrink:0;
	padding-bottom:20px;
	word-wrap:anywhere;
}
.about-footer
{
	position:absolute;
	bottom:18px;
	right:0;
	font-size:12px;
	opacity:.6;
	
	pointer-events:all;
}


/* news */

.page-news .grid-item
{
	flex-basis:calc(100% / 8);
	flex-grow:0;
}
.page-news .grid-item:not(:last-child)
{
	margin-right:40px;
}
.page-news .grid-item .project
{
	font-weight:normal;
	margin-left:0;
}
.page-news .grid-item:not(:hover) .project,
.page-stories .grid-item:not(:hover) .project
{
	padding-left:0;
	transition:padding .2s ease 0s;
}
.page-news .grid-item:not(:hover) .project::before,
.page-stories .grid-item:not(:hover) .project::before
{
	display:none;
}


/* stories */

.page-stories .grid-item
{
	flex-basis:50%;
	flex-grow:0;
}
.page-stories .grid-item .project
{
	margin-left:0;
}

.page-stories[data-story-item]
{
	padding:0 40px;
}

.page-stories h1
{
	position:relative;
	margin:8vh auto -0.4em auto;
	max-width:70%;

	text-align:center;
	font-size:100px;

	z-index:1;
}
.page-stories h2
{
	font-family: CenturySchoolbook, monospace;
	font-size:76px;
	font-weight:normal;
	line-height:.9;
	
	
	width:70%;
	text-align:center;
}

.page-stories h2 .rotate
{
	transform:rotate(-40deg);
	display:inline-block;
}

.page-stories .display figure .media
{
	margin:auto;

	transform:translateY(60vh);
	transition:transform .6s var(--curve) 0s;
	max-height:calc(70vh);
	
	will-change: transform;
	
}
.page-stories .display.loaded figure .media
{
	transform:none;
}
.page-stories aside,
.page-stories .meta
{
	width:100%;
	padding-top:100px;
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.page-stories aside .meta
{
	/* flex-basis:100%; */
	padding:0;
	margin-bottom:100px;
}
.page-stories aside .colophon:empty
{
	display:none;
}

.page-stories .intro
{
	margin:40px 0 80px 0;
	font-size:2rem;
	line-height:1;
}
.page-stories p
{
	width:70%;
	clear:both;
}
.page-stories p.right
{
	float:right;
}
.page-stories p.right + *
{
	clear:both;
}
.page-stories .interview-header
{
	width:55%;
	margin:100px auto;
	display:flex;
	justify-content: space-evenly;
}
.page-stories .interview-header h2
{
	font-size:38px;
}
.page-stories	p.interview
{
	position:relative;
	width:55%;
	margin-left:auto;
	margin-right:auto;
}
.page-stories	p.interview.alt
{
	padding-left:5%;
}
.page-stories	p.interview .rotate
{
	position:absolute; /* remove from flow */
	transform: translate(-100px,-50%) rotate(-40deg);
	top:50%;
}

.page-stories .cms-inline-media-thumb
{
	display:none;
}
.page-stories .story-media
{
	margin:0 -40px;
	padding:10px 15px;

	display:flex;
	align-items: flex-end;
}
.page-stories figure
{
	margin:0;
}
.page-stories .story-media.right
{
	justify-content:flex-end;
}
.page-stories .story-media section
{
	flex-basis:70%;
	flex-shrink:1;
	margin-right:15px;
}
.page-stories .story-media section.portrait
{
	flex-basis:50%;
}
.page-stories .story-media.right section
{
	margin-left:15px;
	margin-right:0;
}

.page-stories .story-media h2
{
	margin:0;
	flex-basis:25%;
	flex-shrink:0;
	
	text-transform: uppercase;
	text-align:left;
}
.page-stories .story-media h2:first-child
{
	text-align:right;
}
.page-stories .story-media + .story-media:not(.right)
{
	align-items: flex-start;
}
.page-stories .infinite-list
{
	margin:15vh -40px;
	height:60vh;
}
.page-stories .infinite-list section
{
	width:auto;
	height:100%;
	display:flex;
	align-items:center;
}

/* 
.page-stories .story-media .cms-inline-media.center
{
	margin:auto;
}
*/


/* responsive layouts */

@media (max-width:900px)
{
	/* overlay nav menu */

	header
	{
		height:100%;
		pointer-events:none;
	}
	nav.mobile-only
	{
		display:flex;
	}
	nav.mobile-only a.menu
	{
		transform:translateY(10px) rotate(-40deg);
	}

	body:not(.transition) nav.mobile-only a span
	{
		background-color:var(--page-bg);
	}
	.page-section-directors nav.mobile-only a span,
	.page-section-photographers nav.mobile-only a span,
	.page-section-film-tv nav.mobile-only a span
	{
		background-color:transparent !important;
	}
	nav.main
	{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		
		-webkit-backdrop-filter: blur(15px);
		backdrop-filter: blur(15px);

		
		background-color:var(--menu-bg);
		/* background-color:var(--page-bg); */
		
		transition:all .4s var(--curve) .2s;
	}
	header.page-section-directors nav.main,
	header.page-section-photographers nav.main,
	header.page-section-film-tv nav.main
	{
		background-color:var(--page-bg);
	}
	nav.main:not(.active)
	{
		opacity:0;
		-webkit-backdrop-filter:none;
		backdrop-filter:none;
		pointer-events: none;
	}
	nav.main.active
	{
		pointer-events:all;
		transition-delay:0s;
	}
	nav.main a.home
	{
		display:none;
	}
	
	/* fixed positioned and rotated menu items */
	
	nav.main a
	{
		position:absolute;
		font-size:16px;
		pointer-events:none;
	}
	nav.main a span
	{
		transform:none !important;
	}
	nav a.selected span
	{
		pointer-events:none;
	}
	nav.main.active a span
	{
		pointer-events:all;
		background-color:transparent !important;
	}
	nav.main a[data-page="directors"]
	{
		top:14vh;
		left:25%;
	}
	nav.main a[data-page="photographers"]
	{
		top:29vh;
		left:10%;
	}
	nav.main a[data-page="film-tv"]
	{
		top:35vh;
		right:18%;
	}
	nav.main a[data-page="work"]
	{
		top:47vh;
		left:40%;
	}
	nav.main a[data-page="about"]
	{
		top:60vh;
		left:21%;
	}
	nav.main a[data-page="stories"]
	{
		top:66vh;
		right:26%;
	}
	nav.main a[data-page="news"]
	{
		top:77vh;
		left:23%;
	}
	nav.main .search
	{
		display:none; /* TODO mobile search ui */
	
		position:absolute;
		top:78vh;
		left:35%;
		transform:rotate(40deg);
	}
	nav.main a[data-page="directors"],
	nav.main a[data-page="photographers"],
	nav.main a[data-page="about"],
	nav.main a[data-page="stories"]
	{
		transform:rotate(-40deg);
	}
	nav.main a[data-page="film-tv"],
	nav.main a[data-page="news"]
	{
		transform:rotate(40deg);
	}
	nav.main a[data-page="work"]
	{
		transform:none;
	}
	
	.overview
	{
		min-height:0;
	}
	.overview .list-items.two-column
	{
		columns:1;
	}
	
	.page .head,
	.page .body
	{
		width:100%;
		padding:0 15px;
		font-size:18px;
	}
	.page .body
	{
		display:block;
	}
	
	.page[data-section-item] .head
	{
		left:0;
	}
	
	.page h1
	{
		font-size:calc(95/800 * 100vw);
	}
	.page .head .keywords
	{
		margin-top:15px;
		display:flex;
		flex-direction:column;
		align-items: center;
		
	}
	.head .keyword
	{
		display:inline-block;
		margin-left:0 !important;
	}
	
	.page[data-section-item] .grid
	{
		margin-top:72vh;
	}
	.page[data-section-item] .body
	{
		margin-top:60px;
		padding-right:45px;
	}

	.filter
	{
		padding:10px 15px;
		overflow-x:auto;
		/* display:block;		 */
	}
	.filter-types
	{
		max-width:60%;
	}
	.filter-tags
	{
		margin-left:40px;
		max-width:calc(40% - 40px);
	}
	.filter-tags section
	{
		columns:4;
		width:50rem;
	}
	.filter .tag
	{
		line-height:1.5;
	}
	
	.page.page-work .grid
	{
		/* padding-top:100px; */
	}
	
	.page.page-about
	{
		padding:40px 15px;
		
	}
	.page-about h1
	{
	  position:relative;
	  left:auto;
	  top:auto;
	  margin:28vw 0;
	  transform:rotate(-40deg);
	  
	  font-size:calc(60/800 * 100vw);
	}
	.page-about .body
	{
		flex-direction:column;
	}
	.page-about .grid
	{
		position:relative;
		margin-top:-120px;
		left:auto;
		right:auto;
		width:100%;
		padding-bottom:180px;
	}
	.about-footer
	{
		bottom:0;
	}
	
	
	/* work item page: single column layout */
	
	.page-work[data-work-item]
	{
		display:block;
		padding:80px 15px 30px 15px;
	}
	.page-work article
	{
		position:relative;
		top:auto;
	}
	
	.page-work article section
	{
		display:block;
		/* margin-top:20px; */
	}
	
	.page.page-work aside
	{
		width:100%;
	}
	.page.page-work aside > div
	{
		width:calc(50% - 10px);
	}
	
	.page.page-work aside .grid .grid-item
	{
		flex-grow:1;
	}
	
	.page-work .display figure
	{
		width:100% !important;
	}
	.page-work .display figure .media 
	{
		max-height:none;
	}
	
	.page-work .thumbs-list
	{
		margin-bottom:80px;
		min-height:auto;
	}
	
	.page-work .thumbs-list section
	{
		margin-top:15px;
	}
	.page-work .thumbs-list section:first-child
	{
		display:none;
	}
	.page-work .thumbs-list section .media
	{
		position:relative;
	}
	
	.page-work[data-work-item].prev:not(.color)
	{
		transform:translateY(-100%);
	}
	.page-work[data-work-item].prev:not(.color) > *
	{
		transform:none;
	}

	.page-about .body > .contact
	{
		flex-wrap:wrap;
	}
	.page-about .body > .contact p
	{
		margin-left:0;
		flex-basis:100%;
	}
	
	.page-work .infinite-list
	{
		margin:40px 0 80px -15px;
		width:100vw;
		align-items: flex-end;
	}
	
	.page-news .grid-item
	{
		flex-basis:50%;
	}
	
	.page-stories[data-story-item]
	{
		padding:20px 15px 30px 15px;
	}
	.page-stories[data-story-item] .grid-item	
	{
		flex-grow:1;
	}

	.page-stories .intro,
	.page-stories h2
	{
		font-size:max(18px,5.2vw);
	}
	.page-stories .interview-header h2
	{
		font-size:max(19px,4.5vw);
	}
	.page-stories p,
	.page-stories p.interview,
	.page-stories .interview-header
	{
		width:85%;
	}
	.page-stories .interview-header
	{
		margin:60px auto;
	}
	.page-stories p.interview .rotate
	{
	  transform:translate(-160%,-50%) rotate(-40deg);
	}

	.page-stories .story-media
	{
		margin:0 -15px;
		padding:10px;
	}
  .page-stories .story-media section
  {
	  margin-right:5px;
  }
	.page-stories .story-media.right section 
	{
  	margin-left:5px;
  }
  .page-stories .story-media section.portrait
  {
  	flex-basis:70%;
  }
	.page-stories .infinite-list
	{
  	margin:5vh -15px;
	  height:35vh;
	}

	.page-stories aside > div
	{
		width:calc(50% - 10px);
	}

}