:root {
    --transition-duration: 1.5s; 
    --transition-duration-intro: .5s;
    --transition-base-delay-clip: 0s;
	--transition-base-delay-clip-services: 0s;
    --details-line-appear: 0;
    --credits-width: 0px;
	--credits-height: 0px;
    --details-height: 0px;
	--services-box-delay-1: .5s; /* defaults */
	--services-box-delay-2: 1s;
	--services-box-delay-3: 1.5s;
	--services-box-delay-4: 2s;
	--additional-delay: 0.15s;
	--shadow-h-offset: 0.15vw;
	--shadow-v-offset: 0.09vw;
	--shadow-blur: 0.72vw;
	--font-size: calc(13px + 2.5 * ((100vw - 992px) / 908));
	--plus-size: calc(17px + 6 * ((100vw - 992px) / 908));
	--neg-bottom-margin: calc(var(--font-size) * -1.5);
}
:nth-child(1) { --nth-child: 1 }
:nth-child(2) { --nth-child: 2 }
:nth-child(3) { --nth-child: 3 }
:nth-child(4) { --nth-child: 4 }
:nth-child(5) { --nth-child: 5 }
:nth-child(6) { --nth-child: 6 }
:nth-child(7) { --nth-child: 7 }
:nth-child(8) { --nth-child: 8 }
:nth-child(9) { --nth-child: 9 }
:nth-child(10) { --nth-child: 10 }
html {
    background-color: #f9f9f9;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
    overflow-y: hidden;
    top: 0;
    left: 0;
    overscroll-behavior-y: none;
}
html.presentation-mode {
	scrollbar-width: none;
}
html.presentation-mode button,
html.presentation-mode #pagination,
html.presentation-mode .title,
html.presentation-mode #scroll-icon {
	display: none;
}
body {
    position: relative;
    margin: 0;
    height: 100%;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
	overflow-y: hidden;
}
*, *:before, *:after {
  box-sizing: border-box;
}
.marker {
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    visibility: hidden;
}
.marker#start {
    left: 3%;
}
.marker#end {
    right: 3%;
}
.page {
    position: relative; 
    display: flex;
    margin: 0;
    width: 100vw;
	min-width: 100vw;
    height: 100%;
	max-height: 100vh;
    background-repeat: no-repeat, repeat;
    background-size: contain;
    background-position: center center;
	justify-content: center;
	overflow: hidden; /* TEST */
}
.column {
	flex: 1;
}
#services-container {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	overflow-y: scroll;
}
#credits-container,
#services-container {
	pointer-events: none;
}
[data-credits='on'] #credits-container,
[data-services='on'] #services-container {
	pointer-events: auto;
}
.services {
	position: relative; 
	display: flex;
	justify-content: center;
	/* defaults */
	padding: 0 15vw;
	gap: 10vw;
}
#page-0 {
	justify-content: flex-end;
	align-items: center;
	display: none;
}
.chapter-start #page-0 {
	display: flex;
}
.background,
.shrinkable-bg {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat, repeat;
    background-size: contain;
    background-position: center center;
    transition: transform var(--transition-duration) ease-out;
}
.shrinkable-bg {
    transition-duration: .315s;
}
.me-in-view .background {
    transform: none !important;
}
.image-columns-wrapper {
    position: relative; 
    display: flex;
    margin: 0;
    width: 100%;
	max-height: 100vh;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	row-gap: 0.9vw;
	column-gap: 0.9vw;
	padding: 45px;
	transform: scale(0.82);
}
.image-column {
	position: relative; 
    width: 24vw;
    height: 19vw;
	background-color: #f4f4f4;
    background-repeat: no-repeat, repeat;
    background-size: cover;
    background-position: center center;
	flex-grow: 1;
	transition: opacity var(--transition-duration-intro) ease-out,
				transform var(--transition-duration-intro) ease-out;
	opacity: 0;
}
.image-columns-wrapper.perspective {
    perspective: 360vw;
}
.nav-ready .perspective .image-column {
    transform: rotateX(27deg)
               rotateY(-3deg)
               rotateZ(30deg)
               translate(calc(var(--nth-child) * -1.5vw),calc(var(--nth-child) * -1vw));
    box-shadow: 0.5px 0.5px 0 0 #68727d,
				calc(var(--nth-child) * var(--shadow-h-offset)) calc(var(--nth-child) * var(--shadow-v-offset)) calc(var(--nth-child) * var(--shadow-blur)) 0 rgba(0, 0, 0, calc(0.36 - var(--nth-child) / 19));
	border-radius: 0.360vw;
    z-index: var(--nth-child);
}
.image-column.empty {
	background-color: transparent;
}
#intro.out .image-column {
	opacity: 0;
}
.empty-column {
	flex-grow: 1;
	position: relative;
}
.bg-lazy {
      transition: all var(--transition-duration-intro) ease-out;
}
.bg-loading {
    opacity: 0;
    transform: translateX(50%); /* default */
}
button {
	display: block;
    height: 45px;
    width: 45px;
	top: 50%; /* needs to be added for Safari bug with flex */
	margin-top: -22.5px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: fixed;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s ease-in-out .315s,
				opacity .315s;
}
button.active {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s ease-in-out 0s,
				opacity .315s;
}
#previous {
    left: 0;
}
#next {
    right: 0;
}
.arrow {
    fill: #111;
    height: 22px;
    width: auto;
	transition: fill .315s ease-in-out;
}
[data-theme='dark'] .arrow {
    fill: white;
}
[data-theme='light'] .arrow {
    fill: #111;
}
#scroll-icon {
    position: fixed;
    bottom: 5%;
	margin-bottom: -35px;
    left: 50%;
	margin-left: -20px;
    width: 40px;
    height: 70px;
    border-radius: 25px;
    z-index: 15;
	opacity: 0;
    transform: scale(0.5);
    transition: opacity .315s ease-in-out;
}
[data-page-in-view='0'] #scroll-icon.visible,
[data-page-in-view='1'] #scroll-icon.visible {
    opacity: 1;
}
#scroll-icon.destroy {
    opacity: 0 !important;
}
#scroll-icon.neg {
    box-shadow: inset 0 0 0 1px rgba(255,255,255, 0.5);
}
#scroll-icon.neg .arrows-mini {
	fill: white;
}
#scroll-icon.pos {
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.36);	
}
#scroll-icon:before {
    content: '';
    position: absolute;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    top: 8px;
    border-radius: 4px;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
}
#scroll-icon.neg:before {
    background: white;
}
#scroll-icon.pos:before {
    background: black;
}
.arrows-mini {
	position: absolute;
	width: 100px;
	margin-left: -50px;
	left: 50%;
	top: 50%;
	margin-top: -18.5px;
	fill: #111;
}
.touch #scroll-icon {
    box-shadow: none;	
}
.touch #scroll-icon:before {
    content: none;
}
.touch #scroll-icon:after {
    content: '';
	background: url('images/hand-black.png');
	width: 42px;
  	height: 42px;
  	display: block;
	position: absolute;
	top: 50%;
	margin-top: -1px;
	left: 50%;
	margin-left: -21px;
	background-size: cover;
}
.touch #scroll-icon.neg:after {
    background: url('images/hand-white.png');
	background-size: cover;
}
@keyframes scroll {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(46px);
    }
}
#chapter-title {
	position: fixed;
	pointer-events: none;
}
h1 {
	font-family: "Poppins Thin";
	font-weight: 100;
	font-size: calc(27px + 15 * ((100vw - 992px) / 908));
	letter-spacing: calc(0px - 1.5 * ((100vw - 992px) / 908)); 
	padding: 1.5vw;
	align-self: flex-end;
	transition: all .5s ease-in-out;
	opacity: 0;
}
p:not(:last-child):not(.no-padding) {
	padding-bottom: 1.5em;
}
[data-page-in-view='0'] h1 {
	transform: translateX(25%);
}
.nav-ready[data-page-in-view='0'] h1 {
	opacity: 1;
}
.credits,
.details,
.services,
.photo-info-wrap {
    font-family: "Poppins Extralight";
    font-weight: 200;
    font-size: var(--font-size);
    line-height: 1.77em;
    letter-spacing: calc(0.5px - 0.23 * ((100vw - 992px) / 908)); 
}
.color {
	color: rgb(217, 199, 153);
}
.uppercase {
	text-transform: uppercase;
}
.credits,
.details {
    position: fixed;
    /* defaults */
    left: 5vw;
    bottom: 10vh;
    min-width: 28.333%;
    max-width: calc(100vw - 90px);
	-webkit-user-select: none;
			user-select: none;
}
#details p {
	position: absolute;
	top: 0;
	left: 0;
	padding-top: 1.5em;
}
.title {
	font-family: "Poppins Light";
    font-weight: 300;
	text-transform: uppercase;
    font-size: calc(9px + 3 * ((100vw - 992px) / 648));
    line-height: 1.75em;
    letter-spacing: calc(1.5px - 0.14 * ((100vw - 992px) / 648));
    position: fixed;
	left: 3vh;
    top: 3vh;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
	transition: all .315s ease-in-out;
}
#next-title {
	right: 3vh;
    left: auto;
	clip-path: inset(0 0 0 100%);
}
.nav-ready[data-page-in-view='0'] .title:not(.multipage),
.nav-ready[data-page-in-view='1']:not(.chapter-start) .title:not(.multipage) {
	clip-path: inset(0) !important;
	opacity: 1;
}
.title .chapter {
	font-family: "Poppins";
    font-weight: 400;
}
.pagination {
	font-family: "Poppins Light";
	font-weight: 300;
	font-size: 9px;
	position: fixed;
    right: 1.5vh;
	bottom: 1.5vh;
	opacity: 0;
	transition: opacity 0.315s ease-in-out,
				color 0.315s ease-in-out;
}
.pagination p {
    opacity: 0.5;
}
.pagination p #current-page-display {
    font-family: "Poppins";
}
.pagination.visible {
    opacity: 1;
}
[data-page-in-view='0'] .pagination {
    opacity: 0;
}
.credits p,
.details p,
.services p,
.pagination p,
.title p,
.photo-info p {
    margin: 0;
}
.pagination p span {
    display: inline-block;
	min-width: 9px;
	text-align: center;
}
#credits-container {
    display: flex;
    align-items: center;
}
.credits p,
.details p,
.services p,
.photo-info-wrap p {
	opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: opacity .315s ease-out,
				clip-path .315s ease-out;  
}
[data-credits='on'] .credits p {
    clip-path: inset(0);
    opacity: 1;
}
[data-credits='on'] .credits p {
    transition-delay: calc(var(--nth-child)*var(--transition-base-delay-clip));
}
@media (min-width: 541px){
    [data-services='on'] .services .column:nth-child(1) p {
        transition-delay: calc(var(--nth-child)*var(--transition-base-delay-clip-services));
    }
    [data-services='on'] .services .column:nth-child(2) p {
        transition-delay: calc(var(--services-box-delay-1) + var(--additional-delay) + var(--nth-child)*var(--transition-base-delay-clip-services));
    }
    [data-services='on'] .services .column:nth-child(3) p {
        transition-delay: calc(var(--services-box-delay-2) + 2*var(--additional-delay) + var(--nth-child)*var(--transition-base-delay-clip-services));
    }
    [data-services='on'] .services .column:nth-child(4) p {
        transition-delay: calc(var(--services-box-delay-3) + 3*var(--additional-delay) + var(--nth-child)*var(--transition-base-delay-clip-services));
    }
    [data-services='on'] .services .column:nth-child(5) p {
        transition-delay: calc(var(--services-box-delay-4) + 4*var(--additional-delay) + var(--nth-child)*var(--transition-base-delay-clip-services));
    }
    [data-services='on'] .services-wrap p {
        clip-path: inset(0);
        opacity: 1;
    }
}
.name {
    font-family: "Poppins Light";
}
a {
    text-decoration: none;
    color: inherit; 
}
.icon-link,
.icon-prev,
.icon-next {
    display: inline-block;
    font-family: 'AZ';
	font-style: normal;
    transform: translateY(.1em);
}
.icon-link {
    padding-right: 3px;
}
.icon-link:before {		
    content: "\e9cf";
}
.icon-prev:before {		
    content: "\e922";
}
.icon-next:before {		
    content: "\e923";
}
.plus {
	width: var(--plus-size);
	height: var(--plus-size);
	position: absolute;
	left: 0.9vw;
	top: 0.9vw;
	transition: all .315s ease-in-out;
	cursor: pointer;
	z-index: 10;
}
.plus.center {
	top: 50%;
	transform: translateY(-50%);
}
.plus.bottom {
	bottom: 0.9vw;
	top: auto;
}
.plus.inline {
    position: relative;
	top: 0;
    left: 0;
}
#details {
	padding-top: 1.5em;
	opacity: 0;
	transition: opacity .315s ease-in-out;
    min-width: var(--credits-width);
}
[data-credits='on'] #details {
    transition-delay: calc(var(--details-line-appear) * var(--transition-base-delay-clip)); /* 5th line */
    opacity: 1;
}
#credits-container.open #details p {
	opacity: 1;
	clip-path: inset(0);
	transition-delay: 0s;
}
#credits-container.open #details .plus {
	transform: translateY(var(--details-height))
			   rotate(45deg);
}
#credits-container.slide-up #details p {
	padding-top: 0;
	padding-bottom: 1.5em;
}
#credits-container.slide-up .credits-wrap {
	transition: transform .315s ease-in-out;
}
#credits-container.slide-up.open .credits-wrap {
	transform: translateY(calc(var(--details-height)*-1));
}
#credits-container.slide-above #details {
	transition: opacity .315s ease-in-out 0s,
				transform .315s ease-in-out;
}
[data-credits='on'] #credits-container.slide-above #details {
	transition: opacity .315s ease-in-out calc(var(--details-line-appear) * var(--transition-base-delay-clip)), 
				transform .315s ease-in-out;
}
#credits-container.slide-above.open #details {   
	transform: translateY(calc(var(--credits-height)*-1));
}
#credits-container.slide-above.open #credits p {
	opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition-delay: 0s;
}
#credits-container.slide-above.open #details .plus {
	transform: translate(-9%, var(--details-height))
			   rotate(45deg);
}
.photo-info-container {
	width: 28.333%;
	max-width: calc(100vw - 90px);
	position: absolute;
	right: 5vw;
	bottom: 10vh;
	padding-bottom: calc(1.5em + var(--plus-size));
	opacity: 0;
	transition: opacity .315s ease-in-out,
				transform .315s ease-in-out;
	-webkit-user-select: none;
			user-select: none;
	margin-bottom: calc(var(--neg-bottom-margin) - var(--plus-size));
}
.me-in-view.photo-info .photo-info-container {
	opacity: 1;
	transition-delay: var(--transition-duration);
}
.photo-info-wrap {
	transform: translateY(100%);
	transition: transform .315s ease-in-out;
}
.photo-info.open .photo-info-wrap {
	transform: none; /*translateY(calc(var(--plus-size) + var(--font-size)/2))*/
}
.photo-info.open .photo-info-wrap p:nth-child(2) {
	transition-delay: 0.75s;
}
.photo-info.open .photo-info-wrap p {
	opacity: 1;
    clip-path: inset(0);  
}
.photo-info.open .plus {
	transform: rotate(45deg);
}

/* queries */
@media (max-width: 991px){
	:root {
		--font-size: 13px;
		--plus-size: 17px;
	}
	h1 {
		font-family: "Poppins Extralight 150";
		font-weight: 150;
		font-size: 24px;
		letter-spacing: 0;
	}
	p:not(:last-child):not(.no-padding) {
		padding-bottom: 0.9em;
	}
	.photo-info-container {
		padding-bottom: 38.5px;
	}
	.services {
		padding: 45px;
		flex-direction: column;
	}
	.credits,
	.details,
	.services {
		font-family: "Poppins Light";
		font-weight: 300;
        font-size: 13px;
		letter-spacing: 0.5px;
    }
	.credits,
	.details {
		left: 45px !important;
    }
	.photo-info-container {
		width: 50%;
	}
	.name {
        font-family: "Poppins";
		font-weight: 400;
    }
	.title {
		font-family: "Poppins";
		font-weight: 400;
        font-size: 9px;
		letter-spacing: 1.5px;
    }
	.title .chapter {
		font-family: "Poppins Medium";
		font-weight: 500;
	}
}
@media (max-width: 540px){
	#services-container {
		align-items: flex-start;
	}
	.services, 
	.services .column {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding: 45px;
	}
	.services .column {
		display: flex;
		align-items: center;
	}
	[data-services='on'] .services[data-col-vis='col-1'] #services-col-1 p:nth-child(1) {
		transition-delay: 0.375s;
	}
	[data-services='on'] .services[data-col-vis='col-1'] #services-col-1 p:nth-child(2) {
		transition-delay: 0.75s;
	}
	[data-services='on'] .services[data-col-vis='col-1'] #services-col-1 p:nth-child(3) {
		transition-delay: 1.125s;
	}
	[data-services='on'] .services[data-col-vis='col-1'] #services-col-1 p:nth-child(4) {
		transition-delay: 1.5s;
	}
	[data-services='on'] .services[data-col-vis='col-2'] #services-col-2 p:nth-child(1),
	[data-services='on'] .services[data-col-vis='col-3'] #services-col-3 p:nth-child(1) {
		transition-delay: 0.25s;
	}
	[data-services='on'] .services[data-col-vis='col-2'] #services-col-2 p:nth-child(2),
	[data-services='on'] .services[data-col-vis='col-3'] #services-col-3 p:nth-child(2) {
		transition-delay: 0.5s;
	}
	[data-services='on'] .services[data-col-vis='col-2'] #services-col-2 p:nth-child(3),
	[data-services='on'] .services[data-col-vis='col-3'] #services-col-3 p:nth-child(3) {
		transition-delay: 0.75s;
	}
	[data-services='on'] .services[data-col-vis='col-2'] #services-col-2 p:nth-child(4),
	[data-services='on'] .services[data-col-vis='col-3'] #services-col-3 p:nth-child(4) {
		transition-delay: 1s;
	}
	[data-services='on'] .services[data-col-vis='col-2'] #services-col-2 p:nth-child(5),
	[data-services='on'] .services[data-col-vis='col-3'] #services-col-3 p:nth-child(5) {
		transition-delay: 1.25s;
	}
	[data-services='on'] .services[data-col-vis='col-2'] #services-col-2 p:nth-child(6),
	[data-services='on'] .services[data-col-vis='col-3'] #services-col-3 p:nth-child(6) {
		transition-delay: 1.5s;
	}
	[data-services='on'] .services[data-col-vis='col-1'] #services-col-1 p,
	[data-services='on'] .services[data-col-vis='col-2'] #services-col-2 p,
	[data-services='on'] .services[data-col-vis='col-3'] #services-col-3 p {
        clip-path: inset(0);
        opacity: 1;
    }
	.photo-info-container {
		width: 100%;
	}
}
@media (min-width: 1641px){
	.title {
        font-size: 12px;
		letter-spacing: 1.36px;
    }
}
@media (min-width: 1901px){
	:root {
		--font-size: 15.5px;
		--plus-size: 23px;
	}
	h1 {
		font-size: 41px;
		letter-spacing: -1.5px;
	}
	.credits,
	.details,
	.services {
		font-size: 15.5px;
		letter-spacing: 0.27px;
	}
}
@media (max-aspect-ratio: 1/1){
	:root {
		--shadow-h-offset: 0.24vh; /* *1.6(->vh) */
		--shadow-v-offset: 0.144vh;
		--shadow-blur: 1.152vh;
		--plus-size: calc(19px + 6 * ((100vw - 992px) / 908));
	}
	.image-columns-wrapper {
		transform: none;
	}
	.image-columns-wrapper.perspective {
		perspective: 450vh;
	}
    .nav-ready .perspective .image-column {
        border-radius: 0.450vh;
    }
}
@media (max-aspect-ratio: 1/1) and (max-width: 991px){
	:root {
		--plus-size: 19px;
	}
}

/* fonts */
@font-face {
    font-family: "Poppins Thin";
    src: url('fonts/poppins-v5-latin-100.woff2') format('woff2'),
         url('fonts/poppins-v5-latin-100.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: "Poppins Extralight 150";
    src: url('fonts/poppins-v5-latin-150.woff2') format('woff2'),
         url('fonts/poppins-v5-latin-150.woff') format('woff');
    font-weight: 150;
    font-style: normal;
}
@font-face {
    font-family: "Poppins Extralight";
    src: url('fonts/poppins-v5-latin-200.woff2') format('woff2'),
         url('fonts/poppins-v5-latin-200.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: "Poppins Light";
    src: url('fonts/poppins-v5-latin-300.woff2') format('woff2'),
         url('fonts/poppins-v5-latin-300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Poppins";
    src: url('fonts/poppins-v5-latin-regular.woff2') format('woff2'),
         url('fonts/poppins-v5-latin-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Poppins Medium";
    src: url('fonts/poppins-v5-latin-500.woff2') format('woff2'),
         url('fonts/poppins-v5-latin-500.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "AZ";
    src: url('fonts/AZ.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}