@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');

@font-face {
	font-family: "N Haas Grotesk TX Pro";
	src: url("/assets/NHaasGroteskTXPro-65Md.ttf") format("truetype");
	font-weight: 600;
	font-display: swap;
}

* {
	box-sizing: border-box;
}

:root {
	--color-1: #E30613;
	--color-2: #FFF8F2;
	--color-3: #000000;
	--base-mg: clamp(.5rem, 1vw, 1.5rem);
	--padding-lr: calc(var(--base-mg) * 1.5);
}

html {
	scroll-behavior: smooth;
	background: #E30613
}

body {
	font-family: 'N Haas Grotesk TX Pro';
	background: var(--color-2);
	color: var(--color-1);
	cursor: url('/assets/cursors/default.png'), auto;
	font-size: clamp(.675rem, 1vw, 1rem);
}

::selection {
	background: var(--color-1);
	color: var(--color-2)
}

h1, h2, h3, h4 {
	margin-bottom: 0
}

p {
	font-weight: normal;
	margin-top: 0;
}

hr {
	border-color: var(--color-1);
	color: var(--color-1);
	background: var(--color1)
}

.policies {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin-top: var(--base-mg);
}

.policies a {
	display: inline-block
}

.full-red {
	background: var(--color-1);
	color: var(--color-2)
}

.full-red ::selection {
	background: var(--color-2);
	color: var(--color-1)
}

a {
	cursor: url('/assets/cursors/pointer.png'), auto;
	text-decoration: none;
	color: inherit
}

a {
	transition: opacity 0.3s;
}

a:hover {
	color: var(--color-3)
}

a.cta {
	padding: calc(var(--base-mg) / 6) calc(var(--base-mg) / 2);
	border: calc(var(--base-mg) / 8) solid;
	border-radius: calc(var(--base-mg) * 3)
}

#start-2.full-red a {
	text-decoration: underline
}

.full-red a:hover {
	color: inherit
}

.cta.fs-1 {
	padding: calc(var(--base-mg) / 3) var(--base-mg);
}

a.cta:hover {
	background: var(--color-1);
	color: var(--color-3);
	opacity: 1 !important
}

a.cta-2 {
	color: var(--color-2)
}

.container {
	min-height: 100vh;
	max-width: 1250px;
	padding: calc(var(--base-mg) * 5) var(--padding-lr);
}

#nav {
	width: 100%;
	position: fixed;
	top: 0;
	padding: calc(var(--base-mg) * .667) var(--padding-lr);
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1000;
}

#nav.on-red {
	color: var(--color-2)
}

#nav.on-red a:hover {
	color: var(--color-3)
}

#nav.on-red a.cta:hover {
	background: var(--color-2)
}

#nav.no-logo .logo {
	visibility: hidden
}

.logo {
	width: clamp(10rem, 14vw, 14rem);
	display: block
}

.logo svg {
	width: 100%;
}

#nav ul {
	display: flex;
	gap: var(--base-mg);
	list-style: none;
	align-items: center;
	margin: 0;
	padding: 0
}

#nav ul a {
	text-decoration: none;
	font-size: clamp(1.5rem, 2vw, 2.25rem);
	font-weight: 500;
}

.container.only-h {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	margin: 0 auto
}

.fs-1 {
	font-size: clamp(1.125rem, 3vw, 3.5rem);
	line-height: 1;
	margin: 0;
	margin-bottom: calc(var(--base-mg) * 3);
	letter-spacing: -1px;
}

#legal-area, #brands-h {
	margin-top: calc(var(--base-mg) * 4)
}

.fs-1.no-mg {
	margin-bottom: 0
}

.fs-2 {
	font-size: clamp(.75rem, 1.8vw, 1.875rem);
	margin: 0
}

#start {
	text-align: center;
	position: relative
}

#start .container {
	position: relative;
	z-index: 2
}

.video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.75)
}

#start-2 {
	text-align: center;
}

article .fs-1 {
	margin: 0
}

article {
	margin-bottom: var(--base-mg)
}

#brand-swiper {
	margin: calc(var(--base-mg) * -10) 0 calc(var(--base-mg) * -4)
}

#brand-swiper .swiper-wrapper {
	cursor: url('/assets/cursors/grab.png'), auto;
	align-items: center;
}

.brand {
	width: clamp(4rem, 10vw, 8rem) !important;
	margin: 0 calc(var(--base-mg) * 4)
}

.brand img {
	width: 100%;
	display: block;
}

#bs-world {
	display: flex;
	align-items: center;
	gap: calc(var(--base-mg) * 3);
	margin-top: calc(var(--base-mg) * 3);
}

.bs-world {
	width: calc(20% - (((var(--base-mg) * 3)) * 5) / 4);
	max-width: fit-content;
	height: calc(var(--base-mg) * 12);
	display: block;
	margin: 0 auto
}

.bs-world[alt="BSK"] {
	padding: 0 calc(var(--base-mg) * .75);
}

.bs-world[alt="BSS"],
.bs-world[alt="FBS"] {
	margin-left: calc(var(--base-mg) * 2);
}

#more {
	margin-top: calc(var(--base-mg) * 4)
}

#footer .container {
	max-width: unset;
	min-height: auto;
	padding-top: calc(var(--base-mg) * 3);
	padding-bottom: calc(var(--base-mg) * .667)
}

#footer-email {
	text-align: center;
	margin-bottom: calc(var(--base-mg) * .667)
}

#footer-email .fs-1 {
	font-size: clamp(2rem, 6vw, 6rem);
}

#footer-legal {
	display: flex;
	justify-content: space-between	
}

#footer-legal,
.policies {
	line-height: 1.375
}

#footer-legal p:nth-child(2) {
	text-align: right
}

#footer p {
	margin: 0
}

.fade-out{animation:fade-out 1s ease-out both}
@keyframes fade-out{0%{opacity:1}100%{opacity:0}}

@media (max-width: 1024px) {	
	#nav {
		position: absolute;
		justify-content: center
	}
	
	#nav ul {
		display: none
	}
	
	.container {
		min-height: unset;
	}
	
	#start .container {
		min-height: 75vh
	}
	
	#bs-world {
		gap: calc(var(--base-mg) * 2);
		margin-top: calc(var(--base-mg) * 2)
	}
	
	.bs-world {
		width: calc(20% - (((var(--base-mg) * 2)) * 5) / 4)
	}
	
	.bs-world[alt="BSR"] {
		padding: 0 calc(var(--base-mg) * .75)
	}
}