@import url("https://use.typekit.net/jms5ltw.css");

* {
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
	-webkit-appearance: none;

	font-family: "neue-haas-grotesk-display", sans-serif;
/*	font-weight: 400;*/
	font-style: normal;

/*	transform-style: preserve-3d;*/
}

*:focus {
	outline: none;
}

:root {
	--black: #0F1414;
	--white: #FFF;
	--offwhite: #F8F8F5;

	--lime:#dcff23;
	--blue:#3223FA;
	--pink:#ff6efa;
	--red: #fa1941;
	--softpink:#ffc3ff;


	--ease-outexpo: cubic-bezier(0.16, 1, 0.3, 1);
}

.loading-screen {
   position: fixed;
   top: 0%;
   left: 0%;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background-color: var(--lime);
    z-index: 10000;
/*    visibility: hidden;*/
    opacity: 1;
}

.load-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1000;
    pointer-events: none;
}

html {
	scroll-behavior: smooth;
}

body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-size: 1.6vw;
	line-height: 2.4vw;
	font-weight: normal;
	scroll-behavior: smooth;

	color: var(--black);
	letter-spacing: -0.02em;

/*	transform-style: preserve-3d;
	perspective: 32vw;
	perspective-origin: center;
	overflow: auto;*/

/*	background: url('_images/_bg-gradient.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;*/
}

a {
	text-decoration: none;
	color: currentColor;
}

/* BACKGRUONDS  */

.bg-white {
	background-color: white;
	color: var(--black);
}

.bg-offwhite {
	background-color: var(--offwhite);
	color: var(--black);
}

.bg-black {
	background-color: var(--black);
	color: var(--offwhite);
}

.bg-lime {
	background-color: var(--lime);
	color: var(--black);
}

.bg-blue {
	background-color: var(--blue);
	color: var(--lime);
}

.bg-red {
	background-color: var(--red);
	color: var(--black);
}

.bg-pink {
	background-color: var(--pink);
	color: var(--black);
}

.bg-softpink {
	background-color: var(--softpink);
	color: var(--red);
}

/* BUTTONS */

h1, h2, h3, h4, h5 {
	padding: 0;
	margin: 0;
	font-weight: 400;
}

/* BASE */

.page__base {
	position: relative;
	width: calc(100% - 6.4vw - 2.4vw);

	padding: 6.4vw;
	padding-top: 0vw;
	padding-right: 2.4vw;
	padding-bottom: 2.4vw;
}

.page__base--sidebar {
	position: absolute;
		top: 0vw;
		left: 0.8vw;

	mix-blend-mode: difference;
}

.page-type--home .page__base--sidebar {
	mix-blend-mode: normal;
}

.logo__sidebar {
	position: relative;
	height: 8vw;
}

.page__base--sidebar img {
	width: auto;
	height: 100%;
}

.page__header {
	position: relative;
	width: 100%;

	display: flex;

	padding-top: 3.2vw;
}

.logo__header {
	position: relative;
	width: 50%;

	padding-bottom: 3.2vw;
}

.logo__header img {
	width: auto;
	height: 8vw;
	margin-left: -5.6vw;
}

.main__nav {
	position: relative;
	width: 50%;
}

.main__nav--items {
	position: relative;
	list-style-type: none;
	padding: 0;
	margin: 0;

	padding-top: 0.4vw;
/*	padding-right: ;*/

	display: flex;
	justify-content: end;
}

.main__nav--items li {
	padding-left: 2.4vw;
}

.section {
	position: relative;
	width: calc(100% - 6.4vw - 2.4vw);

	padding: 6.4vw;
/*	padding-top: 0vw;*/
	padding-right: 2.4vw;
	padding-bottom: 2.4vw;
}

.grid__project {
	position: relative;
	width: 100%;

	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
	gap: 2.4vw;
}

.col--2 {
	grid-column: span 2;
}

.col--3 {
	grid-column: span 3;
}

.col--4 {
	grid-column: span 4;
}

.col--5 {
	grid-column: span 5;
}

.col--6 {
	grid-column: span 6;
}

.col--7 {
	grid-column: span 7;
}

.col--8 {
	grid-column: span 8;
}

.col--10 {
	grid-column: span 10;
}

.col--12 {
	grid-column: span 12;
}

[class^="col--"] img {
    width: 100%;
    height: auto;
    border-radius: 0.4vw;
}

.project--photo {
	transform: translateY(-3.2vw);
}

.project--photo-thumb {
	position: relative;
	width: 100%;
	padding-bottom: 100%;
}

.project--photo-thumb img {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;
	border-radius: 1.6vw;

	object-fit: cover;
}

.project__content img {
	width: 100%;
	height: auto;
}

/* HERO */

/* CASES */

.grid__cases {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, [col-start] 1fr);
	gap: 2.4vw;
/*	padding-top: 2.4vw;*/
}

.case__card {
	position: relative;
	width: 100%;
	padding-bottom: 66.67%;

	border-radius: 1.6vw;
	overflow: hidden;

	background-color: black;
	transform-style: preserve-3d;
}

.case__card--box {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

	transform-style: preserve-3d;
	perspective: 32vw;
	transition: all 0.4s;

/*    perspective-origin: center 3.2vw;*/
}

.case__card--box-left, .case__card--box-right {
	position: absolute;
	width: calc(6 * 3.2vw );
	height: calc(100% - 0vw);
	/* left: 0; */
	top: 0vw;
}

.case__card--box-top, .case__card--box-bottom {
	position: absolute;
	width: calc(100% - 0vw);
	height: calc(6 * 3.2vw );
	/* top: 50px; */
	left: 0vw;
}

.case__card--box-left {
	transform: rotateY(90deg);
	left: 0;
	transform-origin: left;
}

.case__card--box-right {
	transform: rotateY(-90deg);
	right: 0;
	transform-origin: right;
}

.case__card--box-top {
	transform: rotateX(-90deg);
	top: 0;
	transform-origin: top;
}

.case__card--box-bottom {
	transform: rotateX(90deg) translateY( calc(6 * 3.2vw ) );
	bottom: 0;
	transform-origin: bottom;

	font-size: 3.2vw;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;

	transition: all 0.4s;
}

.case__card--box-back img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case__card--box-back {
	position: absolute;
	top: 0;
	left: 0;
	transform: rotateY(180deg) translateZ( calc(0 * 3.2vw ) );
	/* transform-origin: top left; */
	width: 100%;
	height: 100%;
	/* border-radius: 3.2vw; */
	/* border: 2px solid var(--bonkers-green); */
	opacity: 1;
	/* transition: all 0.2s ease; */
	transition: all 0.4s;
}

.case__card:hover .case__card--box {
/*	perspective-origin: center 3.2vw;*/
}

.case__card:hover .case__card--box-back {
	transform: rotateY(180deg) translateZ( calc(6 * 3.2vw ) );
}

.case__card:hover .case__card--box-bottom {
	transform: rotateX(90deg) translateY( calc(0 * 3.2vw ) );
}

.case__card--thumb {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;
}

.case__card--thumb img {
	position: relative;
	width: 100%;
	height: 100%;

	object-fit: cover;
}

.case__card--title {
	position: absolute;
		top: 50%;
		left: 50%;

	width: 100%;
	height: 100%;

	transform: translate(-50%, -40%) scale(1);
	border-radius: 1.6vw;
	opacity: 1;

	transition-property: transform, background-color, color;
	transition-duration: 0.4s, 0.4s, 0.4s;
	transition-timing-function: var(--ease-outexpo), var(--ease-outexpo), var(--ease-outexpo);
	transition-delay: 0s, 0s, 0.2s;

	display: flex;
	flex-flow: column;
	justify-content: start;

	background-color: rgba(0, 0, 0, 0);
	color: rgba(255, 255, 255, 0);
}

.case__card:hover .case__card--title {
	transform: translate(-50%, -50%) scale(1);
	background-color: rgba(0, 0, 0, 1);
	color: rgba(255, 255, 255, 1);
	opacity: 1;
}

.case__card--tag--title {
	font-size: 2.8vw;
	line-height: 2.8vw;

	padding-left: 1.6vw;
	padding-top: 1.6vw;

	font-weight: 600;
}

.case__card--tag--type {
	font-size: 1.6vw;
	line-height: 2vw;

	padding-left: 1.6vw;
	padding-bottom: 1.6vw;

	opacity: 0.8;
}

.page__hero {
	position: relative;
	width: 100%;

	grid-column: span 2;

	border-radius: 1.6vw;
}

.page__hero h1 {
	font-size: 7.2vw;
	line-height: 7.2vw;
	font-weight: 600;
}

.case__card--bio {
	grid-column: span 2;
	font-size: 2.2vw;
	line-height: 3.2vw;

	padding-right: 3.2vw;
	padding-bottom: 1.6vw;
}

.case__card--bio p {
	padding: 0;
	margin: 0;
	width: 50%;
}

.case__card--banner {
	position: relative;
	width: 100%;
	padding-bottom: 25%;

/*	grid-column: span 2;*/

	border-radius: 1.6vw;
	overflow: hidden;
}

.case__card--banner-quo {

}

.section__quo, .section__brands {
	padding-top: 2.4vw;
}

.section__cases {
	padding-top: 2.4vw;
}

.case__card--banner-quo h2 {
	position: absolute;
		top: 50%;
		left: 50%;

	width: 80%;

	text-align: center;
	font-size: 6.4vw;
	line-height: 6.4vw;

	transform: translate(-50%,-50%);
}

.case__card--banner-brands {

}

.case__card--banner-brands h2 {
	position: absolute;
		top: 50%;
		left: 50%;

	width: 80%;

	text-align: center;
	font-size: 6.4vw;
	line-height: 6.4vw;
	color: #fa1941;

	transform: translate(-50%,-50%);
}

.case__card--team {
	position: relative;
	width: 100%;
	padding-bottom: 66.67%;

	border-radius: 1.6vw;
	overflow: hidden;
}

.case__card--team img {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.case__card--dunk {
	position: relative;
	width: calc(100% + 4vw);
	margin: 0 -2vw;

	margin-top: -1.6vw;
	margin-bottom: -1.6vw;

	font-weight: 900;
	text-align: center;
	text-transform:uppercase;

	grid-column: span 2;
	pointer-events: none;
}

.headline-p1 {
	font-size: 31.6vw;
	line-height: 28vw;
	font-weight: 900;

	margin-left: -2.2vw;
}

.headline-p2 {
	font-size: 12.8vw;
	line-height: 8vw;
	font-weight: 900;
}

.headline-p3 {
	font-size: 13.2vw;
	line-height: 18vw;
	font-weight: 900;

	transform: scale(1, 1.5);
}

.case__card--teamup {
	position: relative;
/*	width: 100%;*/
	padding: 2.4vw;
	padding-top: 2vw;
	padding-left: 0;

	font-size: 4vw;
	line-height: 5vw;

	grid-column: span 1;

	border-radius: 1.6vw;

/*	border: 1px solid rgba(255, 255, 255, 0.1);*/
}

.case__card--teamup a {
	position: absolute;
		left: 0vw;
		bottom: 2.4vw;

/*	width: calc(100% - 3.2vw);*/

	border-radius: 5vw;	
	border: 1px solid var(--offwhite);
	text-decoration: none;

	padding: 0 1.6vw;
	padding-right: 5.6vw;
	line-height: 4.8vw;
	font-size: 3.2vw;

	background: url('_images/_icon—arrow-white.svg'), url('_images/_icon—arrow-white.svg');
	background-repeat: no-repeat;
	background-size: 1.6vw, 1.6vw;
	background-position: right 2vw center, right 5.6vw top 5.6vw;

	transition: all 0.4s var(--ease-outexpo);
}

.case__card--teamup:hover a {
	background: url('_images/_icon—arrow-white.svg') url('_images/_icon—arrow-white.svg');
	background-repeat: no-repeat;
	background-size: 1.6vw 1.6vw;
	background-position: right -3.2vw top -3.2vw, right 2vw center;
}

.case__card--followus {
	position: relative;
/*	width: 100%;*/
	padding: 2.4vw;
	padding-top: 2vw;

	font-size: 4vw;
	line-height: 5vw;

	grid-column: span 1;

	border-radius: 1.6vw;
}

.case__card--followus h3 {
	width: 50%;
}

.case__card--followus {
	background-image: url('_images/_icon—arrow-white.svg');
	background-repeat: no-repeat;
	background-size: 2.4vw;
	background-position: right 3.2vw bottom 3.2vw;

	transition: all 0s var(--ease-outexpo);
}

.case__card--followus:hover {
	background-position: right -3.2vw top -3.2vw;
}

#box_k {
	position: absolute;
		bottom: 3.2vw;
		right: 3.2vw;

	width: 2.4vw;
	height: 2.4vw;

	pointer-events: none;
	opacity: 0;

	transform-origin: center;
}

.case__card--followus:hover #box_k {
	opacity: 1;
}

/* PROJECT PAGE */

.project--title h1 > * {
	font-size: 7.2vw;
	line-height: 7.2vw;
	font-weight: 600;
}

.project__hero {
	padding-top: 0;
	height: 42.85vw;
}

.project__hero--backdrop {
	position: fixed;
		top: 0;
		left: 0;

	width: 100%;

/*	transform-origin: center bottom;*/
/*	opacity: 0;*/
/*	height: 100%;*/
}

.project__hero--backdrop img {
	width: 100%;
	height: auto;
}

.project__hero--backdrop:before {
	content: "";
	position: absolute;
		left: 0;
		bottom: 0;

	width: 100%;
	height: 40%;

	background: linear-gradient(0deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
}

.project__hero--backdrop:after {
	content: "";
	position: absolute;
		left: 0;
		bottom: 0;

	width: 100%;
	height: 100%;

	background: linear-gradient(30deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
}

.project--services {
	/*display: flex;
	flex-flow: column;
	justify-content: end;*/

	font-size: 0.9vw;
	line-height: 1.4vw;
	letter-spacing: 0.02em;
	text-transform: uppercase;

	padding-top: 2vw;
/*	font-weight: 600;*/
/*	opacity: 0.8;*/

/*	align-self: end;*/
	color: #87ffa5;
}

.project--services span {
	font-weight: 400;
}

.project--services i {
	padding-right: 0.4vw;
	opacity: 0.8;
}

.project--bio {
	width: 90%;
}

.project--bio-intro {
	font-weight:600;
}

.project--bio-body {
	padding-top: 2.4vw;
	letter-spacing: 0;
}

.project__content img {
	transform-origin: center top;
}

.nav--next {
/*	text-align: right;*/
	font-size: 3.2vw;
}

.nav--next a {
	display: flex;
	align-items: center;
}

.nav--next i {
	transition: all 0.2s;
}

.nav--next i:first-of-type {
	margin-right: 0vw;

	transform: translateY(0.1vw);
	font-size: 0;
}

.nav--next:hover i:first-of-type {
	margin-right: 0.8vw;

	transform: translateY(0.1vw);
	font-size: inherit;
}

.nav--next i:last-of-type {
	margin-left: 0.8vw;

	transform: translateY(0.1vw);
}

.nav--next:hover i:last-of-type {
	margin-right: 0vw;

	transform: translateY(0.1vw);
	font-size: 0;
}

.nav--prev {
	font-size: 1.6vw;
	opacity: 0.4;
	transition: all 0.2s;
}

.nav--prev:hover {
	opacity: 0.6;
}

.nav--prev i {
	margin-right: 0.4vw;
	transform: translateY(0.1vw);
}

.pin-spacer {
	pointer-events: none;
}

.project__nav {
	padding-bottom: 6.4vw;
}

/*.playmakers div {
	position:relative;
	display: flex !important;
	align-items: center;
}

.playmakers div > div {
	transform-origin: center;
}*/

.obj-field {
	position: absolute;
		top: 0%;
		left: 0%;

	width: 100%;
	height: 100%;

	z-index: 0;

	overflow: hidden;
}

.obj-field img {
	position: absolute;
		top: 10%;
		left: 50%;

	width: 164vw;
	height: auto;

	transform: translate(-50%,-50%);
}

.section__footer {
	padding-top: 2.4vw;
	padding-bottom: 3.2vw;
}

@media screen and (max-width: 1200px) {



}

@media screen and (max-width: 1080px) {



}

@media screen and (max-height: 54vw){


}

@media screen and (max-width: 768px){

.main__nav {
	display: none;
}

.section {
	position: relative;
	width: calc(100% - 4.8vw - 4.8vw);
	padding: 4.8vw;
	/* padding-top: 0vw; */
	padding-right: 4.8vw;
	padding-bottom: 6.4vw;
}

.grid__cases {
	gap: 4.8vw;
}

.case__card--bio p {
	width: 90%;
}

.page__hero h1 {
	font-size: 12vw;
	line-height: 12vw;
	font-weight: 600;
}

.case__card--bio {
	font-size: 4.8vw;
	line-height: 5.6vw;
}

.case__card {
	grid-column: span 2;
}

.case__card--banner {
	padding-bottom: 80%;
}

.case__card--banner-quo h2 {
	font-size: 12vw;
	line-height: 12vw;
}

.case__card--teamup,
.case__card--followus {
	grid-column: span 2;
}

.case__card--teamup {
	padding-bottom: 12.8vw;
}

}