/* -- PRELOADER -- */

#Preloader {
	position: fixed;
	z-index: 10002;
	top: 0;
	left: 0;
	width: 100vW;
	height: 100vH;
	background-color: #999;
	background-image: url('../images/preloader-transparent-white.gif');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 5rem;
}



/* -- HTML -- */

body {
	background: rgb(255,255,255);
	font-family: "MaharamNeue-Regular", sans-serif;
}

strong {
	font-family: "MaharamNeue-Medium", sans-serif;
}

p {
	font-size: 1rem;
	line-height: 1.45;
	text-align: left;
	margin-bottom: 1.45rem;
	
}

p.white {
	color: #FFFFFF;
}

p a {
	font-family: "MaharamNeue-Medium", sans-serif;
	text-decoration: none;
	color: #0075BF !important;
	color: #EC008C !important;
	border-bottom: 2px solid transparent;
}

p a.title {
	color: #EC008C !important;
	color: #0075BF !important;
	color: #EC008C !important;
}

.screen {
	display: block;
	width: 100vw;
	height: auto;
	background-color: #FFF;
}

.screen-width {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0;
	text-align: center;
}

.site-width {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding-right: 2rem;
	padding-left: 2rem;
	font-size: 0;
	margin: 0 auto;
}

.left-side {
	position: sticky;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 50vH;
}

.right-side {
	position: absolute;
	z-index: 9;
	top: 0;
	right: 2rem;
	width: calc(100% - 4rem);
	height: 100%;
}

.bumper-slides-container {
	position: absolute;
	top: 1rem;
	left: 0;
	width: 100%;
	height: 100%;
}

.bumper-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	opacity: 0;
	transition: all 1s ease;
}

.bumper-slide.active {
	opacity: 1;
	transition: all 1s ease;
}

.bumper-slide-image {
	width: 100%;
	height: 100%;
	font-size: 0;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
	
.bumper-texts {
	display: block;
	padding-top: 50vH;
}
	
.bumper-text-container {
	position: relative;
	display: block;
	height: 100vH;
}

.bumper-text-container.double {
	height: 200vH;
}

.bumper-text-wrapper {
	position: sticky;
	top: 50%;
	display: block;
	width: 100%;
}

.bumper-text-wrapper p {
	padding-top: 2rem;
	padding-bottom: 1.45rem;
	margin-bottom: 0;
}

.play-button-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6rem;
	height: 6rem;
}

a.play-button {
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.33);
	background-image: url('../images/icon/play-white.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%;
	border-radius: 50%;
	transition: all .25s ease;
}

a.play-button:hover {
	background-color: rgba(0,0,0,1.0);
}


#BertjanPotSlideImage1 {
	background-image: url('../images/mask-3x2.jpg');
}

#BertjanPotSlideImage2 {
	background-image: url('../images/Resting_Pods_for_Nike-10-Studio_Bertjan_Pot.jpg');
}

#BertjanPotSlideImage3 {
	background-image: url('../images/Crafty-Lights-group-SBP.jpg');
}

#BertjanPotSlideImage4 {
	background-image: url('../images/video-thumb.jpg');
}

#TwistShakeSlideImage1 {
	background-image:url('../images/twist_all_1._3x2.jpg');
}

#TwistShakeSlideImage2 {
	background-image:url('../images/twist_8.jpg');
}

#TwistShakeSlideImage3 {
	background-image:url('../images/shake_all_1_3x2.jpg');
}

#TwistShakeSlideImage4 {
	background-image:url('../images/shake_1.jpg');
}

#HustleFlossSlideImage1 {
	background-image:url('../images/maharam15_set02_img03_v04-3x2.jpg');
}

#HustleFlossSlideImage2 {
	background-image:url('../images/hustle_008_detail.jpg');
}

#HustleFlossSlideImage3 {
	background-image:url('../images/floss_002_detail.jpg');
}

#HustleFlossSlideImage4 {
	background-image:url('../images/rug.jpg');
}

.triggers {
	position: absolute;
	top: 0;
	right: 0;
	width: 4.5rem;
	height: 100%;
}

.trigger {
	position: static;
	display: block;
	left: 0;
	width: 1rem;
}


@media screen and (min-width: 768px) {  /* -- 768px -- */

	p {
		font-size: 1.125rem;
	}
	
	.site-width {
		padding-right: 2rem;
		padding-left: 2rem;
	}
	
	.left-side {
		height: 66vH;
	}

	.right-side {
		position: absolute;
		top: 0;
		right: 2rem;
		width: 50%;
		height: 100%;
	}
	
	.bumper-slides-container {
		position: absolute;
		top: 1rem;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.bumper-text-container {
		position: relative;
		display: block;
		height: 100vH;
	}
	
	.bumper-text-wrapper {
		position: sticky;
		top: 66%;
		display: block;
		width: 100%;
	}
	
	.bumper-text-wrapper p {
		padding-top: 2rem;
		padding-bottom: 1.45rem;
		margin-bottom: 0;
	}
	
}

@media screen and (min-width: 1023px) {  /* -- 1024px -- */

	p a.title:hover {
		border-bottom: 2px solid #EC008C;
		border-bottom: 2px solid #EC008C;
	}
	
	.site-width {
		padding-right: 2.75rem;
		padding-left: 2.75rem;
	}
	
	.left-side {	
		position: sticky;
		top: 0;
		left: 0;
		width: calc(((100% - 11rem) / 12) * 8 + 7rem);
		height: 100vH;
		padding-right: 0;
	}

	.right-side {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(((100% - 11rem) / 12) * 4 + 3rem);
		height: 100%;
		vertical-align: top;
	}
	
	.bumper-slides-container {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 3 /2;
	}
	
	.bumper-texts {
		display: block;
		padding-top: 50vH;
		padding-right: 2.75rem;
	}
	
	.bumper-text-container {
		position: relative;
		display: block;
		height: 100vH;
	}
	
	.bumper-text-wrapper {
		position: sticky;
		top: 50%;
		display: block;
		width: 100%;
	}
	
	.bumper-text-wrapper p {
		padding-top: 0;
		padding-bottom: 1.45rem;
		margin-bottom: 0;
	}
	
	p {
		font-size: 1rem;
	}
	
	p a {
		transition: all 0.25s ease;
	}

	p a:hover {
		border-bottom: 2px solid #EC008C;
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */

	.site-width {
		width: 100rem;
		padding-right: 3rem;
		padding-left: 3rem;
	}
	
	p {
		font-size: 1.25rem;
	}
	
}

@media screen and (min-width: 2080px) {

	.site-width {
		width: 130rem;
	}
	
}







/* -- HEADER -- */

header {
	position: absolute;
	z-index: 10000;
	width: 100vw;
	height: 5rem;
}

.header-width {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100rem;
	height: 100%;
	padding-right: 2rem;
	padding-left: 2rem;
	font-size: 0;
	margin: 0 auto;
}

.logo-wrapper {
	position: absolute;
	top: 50%;
	left: 2rem;
	z-index: 11000;
	display: inline-block;
	width: 7rem;
	transform: translateY(-50%);
}

.logo-wrapper a.logo {
	display: inline-block;
	width: 100%;
}

.logo-wrapper a.logo .logo-style {
	fill: #FFFFFF;
}



@media screen and (min-width: 768px) {  /* -- 768px -- */

	
	
}

@media screen and (min-width: 1024px) {  /* -- 1024px -- */

	header {
		height: 7rem;
	}
	
	.header-width {
		padding-right: 2rem;
		padding-left: 2rem;
	}
	
	.logo-wrapper {
		left: 2rem;
		width: 7rem;
		transition: all 0.25s ease;
	}

	.logo-wrapper a.logo .logo-style {
		transition-property: fill;
		transition-duration: 0.25s;
		transition-timing-function: linear;
		transition: all 0.25s ease;
	}
	
	.logo-wrapper a.logo:hover .logo-style {
		fill: #EC008C;
	}
	
}

@media screen and (min-width: 1300px) {  /* -- 1300px -- */

	.logo-wrapper a.logo .logo-style {
		fill: #FFF;
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */

	header {
		height: 9rem;
	}
	
	.header-width {
		padding-right: 3rem;
		padding-left: 3rem;
	}
	
	.logo-wrapper {
		left: 3rem;
		width: 8rem;
	}
	
}

@media screen and (min-width: 2080px) {

	.header-width {
		padding-right: 4rem;
		padding-left: 4rem;
	}
	
	.logo-wrapper {
		left: 4rem;
		width: 8rem;
	}
	
}










/* -- SIDEBAR -- */

.sidebar {
	display: none;
	position: fixed;
	z-index: 10001;
	display: none;
	right: 1.5rem;
	top: 0;
	/*transform: translateY(-50%);*/
}

.navigation-wrapper {
	position: relative;
	display: inline-block;
	padding: 1rem 0;
}

.scroll-to-list {
	position: relative;
	display: inline-block;
}

.scroll-to-list .link-wrapper {
	position: relative;
	min-width: 1rem;
	height: 1.375rem;
}

a.scroll-to-link {
	display: block;
	cursor: pointer;
    transition: all 0.5s ease;
}

a.scroll-to-link .destination {
	position: absolute;
	z-index: 1;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	width: 8rem;
	height: 2rem;
	/*background-color: rgba(255,255,255,1.0);*/
    transition: all 0.25s ease;
}

a.scroll-to-link:hover .destination {
	display: inline-block;
	opacity: 1;
}

a.scroll-to-link .dot {
	position: absolute;
	z-index: 2;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background-color: #999;
    transition: all 0.25s ease;
}

a.scroll-to-link.active .dot {
	background-color: #EC008C !important;
}

a.scroll-to-link:hover .dot {
	background-color: #EC008C !important;
}

a.scroll-to-link .destination p {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	right: 1.25rem;
	display: block;
	font-family: "MaharamNeue-Medium", sans-serif;
	font-size: 0.875rem;
	color: #EC008C;
	text-indent: 0;
	text-align: right;
	white-space: nowrap;
	line-height: 1.1;
    transition: all 0.5s ease;
}

a.scroll-to-link.active .destination p {
	color: #EC008C;
    transition: all 0.25s ease;
}

.slideshow-holder {
	width: 100%;
	height: 100%;
}

p.colorways {
	color: rgba(0,0,0,0.25);
}

p.colorways span.selected {
	color: rgba(0,0,0,1.0);
}

@media screen and (min-width: 768px) {  /* -- 768px -- */

	
	
}

@media screen and (min-width: 1024px) {  /* -- 1024px -- */
	
}

@media screen and (min-width: 1300px) {  /* -- 1300px -- */

	.sidebar {
		position: fixed;
		z-index: 10001;
		display: inline-block;
		right: 3rem;
		top: 0;
	}

	a.scroll-to-link .dot {
		width: 0.75rem;
		height: 0.75rem;
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */

	a.scroll-to-link .dot {
		width: 0.75rem;
		height: 0.75rem;
	}
	
}

@media screen and (min-width: 2080px) {

	.sidebar {
		right: 3.5rem;
		top: 0;
	}
	
}









/* -- INTRO SCREEN -- */

.opening {
	position: relative;
	display: block;
	width: 100vw;
	height: 100vh;
	background-image:url('../images/opening-mobile.jpg');
	background-repeat: no-repeat;
	background-position: bottom center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: #e5e3df;
}

.contraining-box-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 80%;
	/*background-color: rgba(0,0,0,0.125);*/
}

.constraining-box {
	position: absolute;
	top: 50%;
	left: 0rem;
	transform: translateY(-50%);
	width: 50%;
	height: 50%;
	/*background-color: rgba(0,0,0,0.125);*/
}

#ConstrainingBox1 {
	z-index: 1;
}

#ConstrainingBox2 {
	z-index: 2;
}

.circle {
	position: absolute;
	display: none;
	width: 6rem; 
	height: 6rem;
	transform: translate(-50%,-50%);
	/*transform-origin: 100% center;
	animation: rotate 3s linear reverse infinite;*/
	/*background-color: rgba(0,0,0,0.125);*/
}

.kite {
	display: none;
}

.circle p {
	position: absolute;
	display: inline-block;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -38%);
	font-family: "SuisseIntlMono-Regular-WebXL", sans-serif;
	text-align: center;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 0;
}

#Base1 {
	width: 1px; 
	height: 1px;
	background-color: rgba(0,0,0,0);
}

#kite1a {
}

#kite1b {
	transform: translate(39px,-70px);
}

#kite1c {
	transform: translate(117px,-90px);
}

#kite1d {
	transform: translate(175px,-105px);
}

#kite1e {
	transform: translate(220px,-120px);
}

#kite1f {
	transform: translate(266px,-133px);
}

#kite1g {
	transform: translate(305px,-143px);
}

#kite2a {
	transform: translate(0px,70px);
}

#kite2b {
	transform: translate(98px,40px);
}

#kite2c {
	transform: translate(175px,25px);
}

#kite1a p {
	font-size: 8.5rem;
	color: #02947e;
	color: #006960;
	color: #EC008C;
	color: #8F2E99;
}

#kite1b p {
	font-size: 7rem;
	color: #02947e;
	color: #5a9b31;
	color: #f07541;
	color: #A826B2;
}

#kite1c p {
	font-size: 6rem;
	color: #02947e;
	color: #d1732a;
	color: #f39719;
	color: #CC2992;
}

#kite1d p {
	font-size: 5rem;
	color: #02947e;
	color: #7b8678;
	color: #EA5A4F;
	color: #EC008C;
}

#kite1e p {
	font-size: 4rem;
	color: #02947e;
	color: #006960;
	color: #fde908;
	color: #F23071;
}

#kite1f p {
	font-size: 3rem;
	color: #02947e;
	color: #1e6399;
	color: #ebe202;
	color: #D84169;
}

#kite1g p {
	font-size: 2rem;
	color: #02947e;
	color: #006960;
	color: #CC3E4F;
}

#kite2a p {
	font-size: 8.5rem;
	color: #02947e;
	color: #006960;
	color: #7eb931;
	color: #6db311;
	color: #1F7C6F;
	color: #1F7C6F;
}

#kite2b p {
	font-size: 6.5rem;
	color: #02947e;
	color: #5a9b31;
	color: #27a737;
	color: #4d9353;
}

#kite2c p {
	font-size: 5rem;
	color: #02947e;
	color: #d1732a;
	color: #23ab78;
	color: #13875c;
	color: #6db311;
}

@media screen and (min-width: 768px) {  /* -- 768px -- */

	
	
}

@media screen and (min-width: 1300px) {  /* -- 1300px -- */

	.opening {
		background-image:url('../images/opening.jpg');
	}

	.kite {
		position: absolute;
		display: inline-block;
		text-align: center;
	}
	
	.circle {
		display: inline-block;
		position: absolute;
		width: 6rem; 
		height: 6rem;
		transform: translate(-50%,-50%);
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */

	
	
}

@media screen and (min-width: 2080px) {

	
	
}


/* -- GENERAL SCREENS -- */





.screen-background {
	display: block;
	width: 100%;
	height: auto;
	background-color: #FFF;
}

.centered-container {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	transform: (-50%, -50%);
}

.h10p {           /* -- 10 slices -- */
	height: 10%;
}

.h12p {           /* -- 8 slices -- */
	height: 12.5%;
}

.h14p {           /* -- 7 slices -- */
	height: 14.28571428571428%;
}

.h16p {           /* -- 6 slices -- */
	height: 16.666666%;
}

.h20p {           /* -- 5 slices -- */
	height: 20%;
}

.h25p {           /* -- 4 slices -- */
	height: 25%;
}

.h33p {           /* -- 3 slices -- */
	height: 33.333333%;
}

.h50p {           /* -- 2 slices -- */
	height: 50%;
}

.h100p {           /* -- 1 slice -- */
	height: 100%;
}

.h50 {
	height: 50vh;
}

.h100 {
	height: 100vh;
}

.h150 {
	height: 150vh;
}

.h200 {
	height: 200vh;
}

.h300 {
	height: 300vh;
}

.h400 {
	height: 400vh;
}

.h500 {
	height: 500vh;
}

.h600 {
	height: 600vh;
}

.h700 {
	height: 700vh;
}

.h800 {
	height: 800vh;
}

.h900 {
	height: 900vh;
}

.h1000 {
	height: 1000vh;
}

.h1100 {
	height: 1100vh;
}

.h-essay {
	height: 200vh;
}

.h-video {
	height: 75vh;
}

.sticky {
	position: sticky;
	top: 0px;
}

.product-hero {
	position: relative;
	display: block;
	width: 100vw;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: #e5e3df;
	overflow: hidden;
	}
	
.twist-hero {
	background-image: url('../images/twist_all_1.jpg');	
	background-position: top center;
}

.shake-hero {
	background-image: url('../images/shake_all_1-small.jpg');	
	background-position: center center;
}

.twist-shake-hero-a {
	background-image: url('../images/twist-hero-1.jpg');
	background-position: center center;
}

.twist-shake-hero-b {
	background-image: url('../images/shake-hero-1.jpg');
	background-position: center center;
}

.hustle-floss-hero-a {
	background-image: url('../images/hustle-hero-2.jpg');
	background-position: center center;
}

.hustle-floss-hero-b {
	background-image: url('../images/floss-hero-2.jpg');
	background-position: center center;
}

.pot-hero {
	background-image: url('../images/Maharam_Bertjan_0602.jpg');
	background-position: bottom center;
}

.pot-hero-2 {
	background-image: url('../images/Maharam_Bertjan_0056-small.jpg');
	background-position: bottom center;
}

.pot-hero-3 {
	background-image: url('../images/Maharam_Bertjan_0828.jpg');
	background-position: center center;
}

.pot-hero-final {
	background-image: url('../images/Maharam_Bertjan_0804-tall.jpg');
	background-position: bottom center;
}

.products-hero {
	background-image: url('../images/board.jpg');
	background-position: center center;
}

.text-element-container {
	position: sticky;
}

.text-element-wrapper {
	position: relative;
	display: block;
	height: 100vH;
}

.text-element {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.image-element-container {
	position: sticky;
	padding-left: 3rem;
	padding-right: 3rem;
}

.image-element-wrapper {
	position: relative;
	display: block;
	height: 100vH;
	width: 100%;
}

.image-element-image {
	position: absolute;
	width: 100%;
	opacity: 0;
    transition: all 0.5s ease;
}

.image-element-image.active {
	opacity: 1;
}


.coda {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5rem;
	border-top: 0.625px solid #999;
}

.coda-wrapper {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
}

.coda p {
	font-size: 0.75rem;
	color: #AAAAAA;
	text-align: center;
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {  /* -- 768px -- */

	.h-essay {
		height: 100vh;
	}
	
	.h-video {
		height: 100vh;
	}
	
	.pot-hero-2 {
		background-image: url('../images/Maharam_Bertjan_0056-medium.jpg');
	}
	
}

@media screen and (min-width: 1024px) {  /* -- 1024px -- */

	.coda {
		height: 3rem;
	}
	
}

@media screen and (min-width: 1300px) {  /* -- 1600px -- */

	.pot-hero {
		background-image: url('../images/Maharam_Bertjan_0332.jpg');
		background-position: top center;
	}
	
	.pot-hero-2 {
		background-image: url('../images/Maharam_Bertjan_0056.jpg');
	}
	
	.pot-hero-final {
		background-image: url('../images/Maharam_Bertjan_0804.jpg');
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */
	
	.shake-hero {
		background-image: url('../images/shake_all_1-large.jpg');	
	}
	
	.coda {
		height: 5rem;
	}
	
	.coda p {
		font-size: 0.875rem;
	}
	
}

@media screen and (min-width: 2080px) {

	.coda {
		height: 5rem;
	}
	
}

/* -- SPECIFIC SCREENS -- */


#Twist1 {
	background-image: url('../images/oxbow-hero.jpg');
	background-repeat: no-repeat;background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: rgba(0,0,0,0.125);
}

#Screen2 {
	background-color: #FFFFFF;
	background-image: url('../images/Maharam_Bertjan_0332.jpg');
	background-repeat: no-repeat;background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: rgba(0,0,0,0.125);
}

#IntroTextScreen {
	background-color: #FFFFFF;
}

#Screen8 {
	background-color: rgba(0,0,0,0.125);
}

@media screen and (min-width: 768px) {  /* -- 768px -- */

	
	
}

@media screen and (min-width: 1024px) {  /* -- 1024px -- */

	
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */

	
	
}

@media screen and (min-width: 2080px) {

	
	
}










/* -- SCREEN 1 -- */

.screen1image1 {
	position: absolute;
	
}




/* -- ESSAY & BIO-- */

.bio-text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin-top: 50vH;
	padding-top: 2rem;
}

.bio-text p {
	font-family: "MaharamNeue-Regular", sans-serif;
	font-size: 1rem !important;
	line-height: 1.45;
	color: #000;
	margin-bottom: 0;
}

.bio-text p a.site-link {
	font-family: "MaharamNeue-Medium", sans-serif;
	color: #EC008C;
	padding-bottom: 1px;
	border-bottom: 2px solid transparent;
    transition: all 0.25s ease;
}

.bio-text p a.site-link:hover {
	border-bottom: 2px solid #EC008C;
}

.head-on-bottom {
	background-image: url('../images/head.png');
	background-repeat: no-repeat;
	background-size: 20rem 30rem;
 	background-position: bottom right;
	background-color: #FFFFFF;
}

.essay-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -40%);
	width: 100%;
	padding: 0 2rem;
	opacity: 0;
    transition: all 1s ease;
}

.essay-container.active {
	transform: translate(-50%, -50%);
	opacity: 1;
}

.essay {
	position: relative;
}

.essay p {
	font-family: "SuisseWorks-Book-WebS", sans-serif;
	font-size: 0.875rem;
	line-height: 1.35;
	text-align: left;
	color: #000;
	margin-bottom: 1rem;
}

.essay p span.initial {
	font-family: "SuisseWorks-Book-WebXL", sans-serif;
	font-size: 2rem;
	line-height: 0.75;
}

p.byline {
	font-family: "MaharamNeue-Regular", sans-serif;
	font-size: 0.875rem !important;
	margin-top: 2rem;
	margin-bottom: 0;
}

p.byline span {
	font-family: "MaharamNeue-Medium", sans-serif;
}

.quotes-container {
	position: absolute;
	display: none;
	z-index: -1;
	top:0;
	left: 0;
	width: 10rem;
	transform: translate(-33%, -33%);
}

#Quotes {
	fill: #e2eeca;
}

@media screen and (min-width: 768px) {  /* -- 768px -- */
	
	.bio-text {
		position: absolute;
		top: 66%;
		left: 0;
		width: 100%;
		margin-top: 0;
		padding-top: 2rem;
	}
	
	.bio-text p {
		font-size: 1.125rem !important;
	}
	
	.essay-container {
		width: 100%;
		padding-right: 6rem;
		padding-left: 6rem;
	}
	
	.essay p {
		font-size: 1rem;
	}
	
}

@media screen and (min-width: 1023px) {  /* -- 1024px -- */
	
	.bio-text {
		margin-top: -2rem;
		padding-top: 0;
		padding-right: 4rem;
		top: 50%;
	}
	
	.bio-text p {
		font-size: 1rem !important;
	}
	
	.essay-container {
		width: 46rem;
		padding: 0;
	}
	
	.essay p {
		font-size: 1.125rem;
	}
	
}



@media screen and (min-width: 1300px) {  /* -- 1300px -- */
	
	.bio-text {
		padding-right: 4rem;
	}
	
	.bio-text p {
		font-size: 1rem !important;
	}
	
	.essay-container {
		width: 46rem;
		padding: 0;
	}
	
	.essay p {
		font-size: 1.125rem;
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */
	
	.bio-text p {
		font-size: 1.25rem !important;
	}
	
	.essay-container {
		width: 75rem;
		padding-top: 18rem;
		padding-bottom: 18rem;
	}
	
	.essay p {
		font-size: 1.25rem;
	}
	
	.essay p span.initial {
		font-size: 3.5rem;
	}
	
	p.byline {
		font-size: 1.125rem !important;
		margin-top: 2.125rem;
	}
	
}

@media screen and (min-width: 2080px) {
	
	.head-on-bottom {
		background-size: 20rem 30rem;
	 	background-position: bottom right -4rem;
	}
	
	.bio-text p {
		font-size: 1.25rem !important;
	}
	
	.essay-container {
		width: 65rem;
		padding-top: 8rem;
		padding-bottom: 8rem;
	}
	
	.essay p {
		font-size: 1.75rem;
	}
	
	.essay p span.initial {
		font-size: 4rem;
	}
	
	p.byline {
		font-size: 1.125rem !important;
		margin-top: 2.125rem;
	}
	
}





/* -- INTRODUCTION -- */

.intro-text-container {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
}

.intro-text-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -25%);
	width: 100%;
	opacity: 0;
	transition: all 1s;
}

.intro-text-wrapper.active {
	transform: translate(-50%, -50%);
	opacity: 1;
}

p.intro-text {
	font-family: "SuisseWorks-Regular-WebXL", sans-serif;
	font-size: 1.875rem;
	line-height: 1.25;
	text-align: left;
	margin-bottom: 0;
	padding-bottom: 0;
}

p.intro-text strong {
	font-family: "SuisseWorks-Medium-WebXL", sans-serif !important;
}

p.intro-text a {
	font-family: "SuisseWorks-Regular-WebXL", sans-serif !important;
}

@media screen and (min-width: 768px) {  /* -- 768px -- */

	.intro-text-wrapper {
		width: 34rem;
		padding: 0;
	}
	
	.intro-text-wrapper {
	}
	
	p.intro-text {
		font-size: 2rem;
	}
	
}

@media screen and (min-width: 1023px) {  /* -- 1024px -- */

	.intro-text-wrapper {
		width: 41rem;
		padding: 0;
	}
	
	p.intro-text {
		font-size: 2.375rem;
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */

	.intro-text-wrapper {
		width: 60rem;
	}
	
	p.intro-text {
		font-size: 3.5rem;
	}
	
}

@media screen and (min-width: 2080px) {
	
	.intro-text-wrapper {
		width: 65rem;
	}
	
	p.intro-text {
		font-size: 3.75rem;
	}
	
	
}





/* -- VIDEO -- */

.video-container {
	position: relative;
	top: 50%;
	transform: translateY(-25%);
	width: 100%;
	margin: 0 auto;
	opacity: 0;
	transition: all 1s;
}

.video-container.active {
	transform: translateY(-50%);
	opacity: 1;
}

.video-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #000;
}

.video-overlay {
    position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding: 0;
	margin: 0;
	background-color: transparent;
	cursor: pointer;
	transition: all 0.25s;
}

.video-overlay::before {
	position: absolute;
	z-index: 101;
	content: url('../images/icon/play-white.svg');
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 5rem;
	height: 5rem;
	padding: 1.5rem;
	background-color: #EC008C;
	background-color: rgba(0,0,0,0.625);
	border-radius: 50%;
	transition: all 0.25s;
}

.video-overlay:hover::before {
	background-color: rgba(0,0,0,1);
	background-color: #EC008C;
	background-color: #000;
}

.video-wrapper-inline iframe, .video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
}

p.caption.videos {
	font-size: 0.75rem;
	color: #ABABAB;
	padding-top: 0.5rem;
}



/* -- GRID -- */

.grid-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 4rem);
	padding-bottom: 4rem;
}

.grid.index {
	display: grid;
	align-content: start;
	grid-gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 auto;
	transition: all 0.25s ease;
}

.grid.index .item {
	display: block;
	width: 100%;
	opacity: 0;
}

.grid.index .item a.item-link {
	display: block;
	cursor: pointer;
	overflow: hidden;
	/* box-shadow: 0 0 15px 0 rgba(0,0,0,.08); */
	text-align: left;
	color: #000000 !important;
	background-color: #FFFFFF;
	/* border-radius: 0 0 0.625rem 0.625rem; */
	transition: all 0.25s;
}

.grid.index .item a.item-link .image-wrapper {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 0;
}

.grid.index .item a.item-link .image-wrapper img.index-install {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	transition: all 0.25s;
	opacity: 0;
	transition: all 0.25s;
}

.grid.index .item a.item-link:hover .image-wrapper img.index-install {
	opacity: 1;
}

.grid.index .item a.item-link .image-wrapper img.index-color {
	position: static;
	width: 100%;
}

.grid.index .item a.item-link .description-wrapper {
	aspect-ratio: 2 / 1;
	padding: 1.125rem;
}

.grid.index .item a.item-link .description-wrapper .category-markers-wrapper {
	font-size: 0;
	display: block;
	margin-bottom: 0.5rem;
	text-align: left;
}

.grid.index .item a.item-link .description-wrapper .category-markers-wrapper p.eyebrow.category {
	display: inline-block;
	font-family: "MaharamNeue-Medium", sans-serif;
	font-size: 0.625rem;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	color: #000000;
	margin-right: 0.375rem;
	margin-bottom: 0;
	overflow: hidden;
	transition: all 0.25s;
}

.grid.index .item a.item-link:hover .description-wrapper .category-markers-wrapper p.eyebrow.category {
	color: #EC008C;
}

.grid.index .item a.item-link .description-wrapper h6.product-title {
	font-family: "MaharamNeue-Medium", sans-serif;
	font-size: 1.125rem;
	color: #000000 !important;
	transition: all 0.25s;
}

.grid.index .item a.item-link:hover .description-wrapper h6.product-title {
	color: #EC008C !important;
}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

#IndexGrid .item {
	animation: fadeOut .5s linear backwards;
}

#IndexGrid #IndexGridItem4 {
	animation-delay: 0s;
}

#IndexGrid #IndexGridItem3 {
	animation-delay: .25s;
}

#IndexGrid #IndexGridItem2 {
	animation-delay: .5s;
}

#IndexGrid #IndexGridItem1 {
	animation-delay: .75s;
}

#IndexGrid.active .item {
	animation: fadeIn .5s linear forwards;
}

#IndexGrid.active #IndexGridItem1 {
	animation-delay: 0s;
}

#IndexGrid.active #IndexGridItem2 {
	animation-delay: .25s;
}

#IndexGrid.active #IndexGridItem3 {
	animation-delay: .5s;
}

#IndexGrid.active #IndexGridItem4 {
	animation-delay: .75s;
}

	
@media screen and (min-width: 768px) {  /* -- 768px -- */

	.grid-container {
		width: 50%;
	}
	
	.grid.index {
		grid-gap: 2rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		margin: 0 auto;
	}
	
	.video-container {
		width: 100%;
	}
	
}

@media screen and (min-width: 1023px) {  /* -- 1024px -- */

	.grid-container {
		width: 87.5%;
	}
	
	.grid.index {
		grid-gap: 1rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	.grid.index .item a.item-link .description-wrapper h6.product-title {
		font-size: 0.875rem;
	}
	
	.video-container {
		width: 50%;
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */

	.grid-container {
		width: 87.5%;
	}
	
	.grid.index {
		grid-gap: 1rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	.grid.index .item a.item-link .description-wrapper h6.product-title {
		font-size: 1rem;
	}
	
	.video-container {
		width: 50%;
	}
	
}

@media screen and (min-width: 2080px) {
	
	.grid-container {
	}
	
	.grid.index {
		grid-gap: 2rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	.grid.index .item a.item-link .description-wrapper h6.product-title {
		font-size: 1.125rem;
	}
	
	.video-container {
		width: 50%;
	}
	
	
}




/* -- PARALLAX -- */

.parallax {
	position: relative;
	top: 0;
	height: 100%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: #e5e3df;
}

.hero {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: rgba(0,0,0,0);
}

.cross-fader {
	opacity: 0;
	transition: all 1s;
}

.cross-fader.active {
	opacity: 1;
	transition: all .75s;
}


/* -- BORDERS -- */


.border {
	position: absolute;
	top: 0;
	width: 1rem;
	height: 100%;
	background-repeat: repeat-y;
	background-size: 100%;
}

.border.left {
	left: 0px;
}

.border.right {
	right: 0px;
}

.border.bl1 {
	background-image: url(../images/border-l1.svg);
}

.border.br1 {
	background-image: url(../images/border-r1.svg);
}

.border.bl2 {
	background-image: url(../images/border-l2.svg);
}

.border.br2 {
	background-image: url(../images/border-r2.svg);
}

.border.bl3 {
	background-image: url(../images/border-l3.svg);
}

.border.br3 {
	background-image: url(../images/border-r3.svg);
}

.border.bl4 {
	background-image: url(../images/border-l4.svg);
}

.border.br4 {
	background-image: url(../images/border-r4.svg);
}

.border.bl5 {
	background-image: url(../images/border-l5.svg);
}

.border.br5 {
	background-image: url(../images/border-r5.svg);
}

.border.bl6 {
	background-image: url(../images/border-l6.svg);
}

.border.br6 {
	background-image: url(../images/border-r6.svg);
}

.border.bl7 {
	background-image: url(../images/border-l7.svg);
}

.border.br7 {
	background-image: url(../images/border-r7.svg);
}

.border.bl8 {
	background-image: url(../images/border-l8.svg);
}

.border.br8 {
	background-image: url(../images/border-r8.svg);
}

.border.bl9 {
	background-image: url(../images/border-l9.svg);
}

.border.br9 {
	background-image: url(../images/border-r9.svg);
}

@media screen and (min-width: 768px) {  /* -- 768px -- */

	.border {
		width: 1rem;
	}
	
}

@media screen and (min-width: 1023px) {  /* -- 1024px -- */

	.border {
		width: 1.375rem;
	}
	
}

@media screen and (min-width: 1600px) {  /* -- 1600px -- */

	.border {
		width: 1.75rem;
	}
	
}

@media screen and (min-width: 2080px) {
	
	
	.border {
		width: 2rem;
	}
	
}


/* -- SLIDESHOW -- */

.cycle-slideshow {
	width: 100%;
	height: 100%;
}

.cycle-slide {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}




/* -- EXTRAS -- */

.relative {
	position: relative;
}

.bg-gradient {
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);
}

.bg-transparent {
	background-color: rgba(255,255,255,0);
}

.bg-white {
	background-color: #FFF;
}

.no-overflow {
	overflow: none;
}