@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@font-face { font-family: 'Suzuki'; src: url('../fonts/Suzuki-Regular.otf'), url('../fonts/Suzuki-Regular.otf') format('otf'), url('../fonts/Suzuki-Regular.otf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Suzuki'; src: url('../fonts/Suzuki-Bold.otf'), url('../fonts/Suzuki-Bold.otf') format('otf'), url('../fonts/Suzuki-Bold.otf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Suzuki'; src: url('../fonts/Suzuki-Headline.otf'), url('../fonts/Suzuki-Headline.otf') format('otf'), url('../fonts/Suzuki-Headline.otf') format('truetype'); font-weight: 900; }

/*
https://clamp-generator.netlify.app/
	Default Rem Value (px): 16
	Minimum Viewport Width (px): 360
	Maximum Viewport Width (px): 1920

	h1: 40px, 70px
	h2: 35px, 50px
	h3: 30px, 40px
	h4: 25px, 35px
	h5: 20px, 30px
	h6: 18px, 25px

	normal: 16px, 18px
	$small: 14px, 16px
	x-small: 12px, 14px
	xx-small: 11px, 12px

*/

:root {

	--white: #ffffff;
	--black: #000000;
	
	--gray-100: #f8f9fa;
	--gray-200: #e9ecef;
	--gray-300: #dee2e6;
	--gray-400: #ced4da;
	--gray-500: #adb5bd;
	--gray-600: #6c757d;
	--gray-700: #495057;
	--gray-800: #343a40;
	--gray-900: #212529;

	--fs-normal: clamp(1rem, 0.128vw + 0.971rem, 1.125rem);
	--fs-small: clamp(0.875rem, 0.128vw + 0.846rem, 1rem);
	--fs-x-small: clamp(0.75rem, 0.128vw + 0.721rem, 0.875rem);
	--fs-xx-small: clamp(0.688rem, 0.064vw + 0.673rem, 0.75rem);
	--h1: clamp(3.438rem, 2.244vw + 2.933rem, 5.625rem);
	--h2: clamp(2.188rem, 0.962vw + 1.971rem, 3.125rem);
	--h3: clamp(1.875rem, 0.641vw + 1.731rem, 2.5rem);
	--h4: clamp(1.563rem, 0.641vw + 1.418rem, 2.188rem);
	--h5: clamp(1.25rem, 0.641vw + 1.106rem, 1.875rem);
	--h6: clamp(1.125rem, 0.449vw + 1.024rem, 1.563rem);
	--bs-font-sans-serif: "Open Sans", sans-serif;
	--bs-body-color: var(--white);
	--bs-body-bg: var(--black);
}

.form-control::placeholder { color:var(--white);}

body { overflow: auto; overflow-x: hidden; }

a { border: none; }
a:active{ outline: none !important; }
a:hover { color: inherit; }
a:focus { outline-color: var(--gray-900) !important; outline-width: 2px; outline-offset: 3px; }
a:focus-visible { outline-color: var(--gray-900) !important; outline-style: solid; }

.ff-suzuki { font-family: 'Suzuki'; }
.fw-bolder { font-weight: 900 !important; }
.fw-semibold { font-weight: 600; }

.fs-normal { font-size: var(--fs-normal); }
.fs-small { font-size: var(--fs-small); }
.fs-x-small { font-size: var(--fs-x-small); }
.fs-xx-small { font-size: var(--fs-xx-small); }

h1, .h1 { font-size: var(--h1); }
h2, .h2 { font-size: var(--h2); }
h3, .h3 { font-size: var(--h3); }
h4, .h4 { font-size: var(--h4); }
h5, .h5 { font-size: var(--h5); }
h6, .h6 { font-size: var(--h6); }

.text-black { color: var(--black) !important; }
.text-white { color: var(--white) !important; }
.text-gray-100 { color: var(--gray-100) !important; }
.text-gray-200 { color: var(--gray-200) !important; }
.text-gray-300 { color: var(--gray-300) !important; }
.text-gray-400 { color: var(--gray-400) !important; }
.text-gray-500 { color: var(--gray-500) !important; }
.text-gray-600 { color: var(--gray-600) !important; }
.text-gray-700 { color: var(--gray-700) !important; }
.text-gray-800 { color: var(--gray-800) !important; }
.text-gray-900 { color: var(--gray-900) !important; }

.bg-black { background: var(--black) !important; }
.bg-white { background: var(--white) !important; }
.bg-gray-100 { background: var(--gray-100) !important; }
.bg-gray-200 { background: var(--gray-200) !important; }
.bg-gray-300 { background: var(--gray-300) !important; }
.bg-gray-400 { background: var(--gray-400) !important; }
.bg-gray-500 { background: var(--gray-500) !important; }
.bg-gray-600 { background: var(--gray-600) !important; }
.bg-gray-700 { background: var(--gray-700) !important; }
.bg-gray-800 { background: var(--gray-800) !important; }
.bg-gray-900 { background: var(--gray-900) !important; }

.btn-black { background: var(--black) !important; }
.btn-white { background: var(--white) !important; }
.btn-gray-100 { background: var(--gray-100) !important; }
.btn-gray-200 { background: var(--gray-200) !important; }
.btn-gray-300 { background: var(--gray-300) !important; }
.btn-gray-400 { background: var(--gray-400) !important; }
.btn-gray-500 { background: var(--gray-500) !important; }
.btn-gray-600 { background: var(--gray-600) !important; }
.btn-gray-700 { background: var(--gray-700) !important; }
.btn-gray-800 { background: var(--gray-800) !important; }
.btn-gray-900 { background: var(--gray-900) !important; }

.btn {
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-padding-y: 0.6rem;
	--bs-btn-font-family: Suzuki, Arial, sans-serif;
	--bs-btn-font-size: 1.15rem;
	--bs-btn-font-weight: 700;
	--bs-btn-line-height: 1.3;
	--bs-btn-border-radius: 3rem;
	text-transform: uppercase;
}

.btn-close {top:10px; right:10px; --bs-btn-close-color: #fff !important; --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); --bs-btn-close-opacity: 1; --bs-btn-close-hover-opacity: 1; --bs-btn-close-focus-shadow:none;}

.modal-backdrop.show { opacity: .99 !important; }

.logo { height: 70px; }

main.teaser .wrapper:before { position: absolute; left: 0px; top: 0px; width: 100%; height: 100vh; background: url('../img/background.jpg') no-repeat 50% 50%; background-size: cover; content: ''; }
main.teaser #ball{ pointer-events:none; }
main.teaser canvas { width: 100%; height: 100%; }
main.teaser .spacer{ height:300vh; }
main.teaser .content { padding: 0px 20px 7.5vh 20px; }

main.landing .row.gx-4 h2 { opacity: 1; transform: none; transition: opacity 0.5s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1); pointer-events: auto; display: block; }

@media only screen and (max-width: 640px) {
	main.teaser .wrapper:before { background-size: 360%; }
}

@media only screen and (min-width: 992px) {
	main.landing .row.gx-4 h2 { opacity: 0; transform: translateY(20px); pointer-events: none; display: none; }
	main.landing .row.gx-4 .show-h2 { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto; display: block; }
}