/*!
  THEME NAME: TIBrent
  THEME URI: https://tibrent.com
  DESCRIPTION: TIBrent Custom Theme
  VERSION: 1.0.0
  AUTHOR: TIBrent
*/

@charset "UTF-8";

/* Reset */
*, ::before, ::after { border-width: 0; border-style: solid; border-color: #e5e7eb; }
html { line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-family: sans-serif; font-feature-settings: normal; font-variation-settings: normal; }
body { line-height: inherit; margin: 0; }
hr { height: 0; color: inherit; border-top-width: 1px; }
abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; -webkit-text-decoration: inherot; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
small { font-size: 80%; }
sub,
sup { line-height: 0; position: relative; font-size: 75%; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
button, .button, input, optgroup, select, textarea { line-height: inherit; margin: 0; padding: 0; font-family: inherit; font-size: 100%; font-weight: inherit; color: inherit; }
button, .button, select { text-transform: none; }
button, .button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
summary { display: list-item; }
blockquote, dl, dd, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, hr, .hr, figure, p, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ol, ul, menu { margin: 0; padding: 0; list-style: none; }
textarea { resize: vertical; }
input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: #9ca3af; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
video { object-fit: contain; overflow-clip-margin: content-box; overflow: clip; }
[hidden] { display: none; }
article, aside, details, figcaption, figure, footer, header, img, hgroup, main, menu, nav, section, video { display: block; }
*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *::after, *::before, input[type=search] { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
* { margin: 0; padding: 0; }

/* fonts */
@font-face {
	font-family: 'Soehne Mono';
	font-display: swap;
	font-weight: 400;
	font-style: normal;
	src: url('https://tibrent.com/assets/fonts/soehne-mono-leicht.woff2') format('woff2'),
		 url('https://tibrent.com/assets/fonts/soehne-mono-leicht.woff') format('woff'),
		 url('https://tibrent.com/assets/fonts/soehne-mono-leicht.ttf') format('truetype');
}

@font-face {
	font-family: 'Druk';
	font-display: swap;
	font-weight: 700;
	font-style: normal;
	src: url('https://tibrent.com/assets/fonts/DrukTextWide-Bold.woff2') format('woff2'),
		 url('https://tibrent.com/assets/fonts/DrukTextWide-Bold.woff') format('woff'),
		 url('https://tibrent.com/assets/fonts/DrukTextWide-Bold.ttf') format('truetype');
}

/* Roots Bloody Roots ---------------------------------------------*/
:root {
	/* font-family */
	--font-text: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif;
	--font-detail: 'Soehne Mono';
	--font-header: 'Druk';

	/* line-height */
	--leading-none: 1;
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-relaxed: 1.625;

	/* letter-spacing */
	--tracking-tight: -0.02rem;
	--tracking-normal: 0rem;
	--tracking-widest: .12rem;

	/* font-weight */
	--font-thin: 100;
	--font-extralight: 200;
	--font-light: 300;
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;
	--font-black: 900;

	/* font-size */
	--text-xs: clamp(10px, calc(10px + (12 - 10) * ((100vw - 375px) / (1600 - 375))), 12px);
	--text-sm: clamp(12px, calc(12px + (14 - 12) * ((100vw - 375px) / (1600 - 375))), 14px);
	--text-base: clamp(16px, calc(16px + (20 - 16) * ((100vw - 1600px) / (2000 - 1600))), 20px);
	--text-lg: clamp(16px, calc(16px + (18 - 16) * ((100vw - 375px) / (1600 - 375))), 18px);
	--text-xl: clamp(18px, calc(18px + (20 - 18) * ((100vw - 375px) / (1600 - 375))), 20px);
	--text-2xl: clamp(20px, calc(20px + (24 - 20) * ((100vw - 375px) / (1600 - 375))), 24px);
	--text-3xl: clamp(24px, calc(24px + (30 - 24) * ((100vw - 375px) / (1600 - 375))), 30px);
	--text-4xl: clamp(28px, calc(28px + (44 - 28) * ((100vw - 375px) / (1600 - 375))), 44px);
	--text-5xl: clamp(32px, calc(32px + (48 - 32) * ((100vw - 375px) / (1600 - 375))), 48px);
	--text-6xl: clamp(36px, calc(36px + (60 - 36) * ((100vw - 375px) / (1600 - 375))), 60px);
	--text-7xl: clamp(40px, calc(40px + (72 - 40) * ((100vw - 375px) / (1600 - 375))), 72px);
	--text-8xl: clamp(44px, calc(44px + (96 - 44) * ((100vw - 375px) / (1600 - 375))), 96px);
	--text-9xl: clamp(48px, calc(48px + (128 - 48) * ((100vw - 375px) / (1600 - 375))), 128px);
	--text-10xl: clamp(54px, calc(54px + (160 - 54) * ((100vw - 375px) / (1600 - 375))), 160px);

	/* fluid-spacer */
	--space-xs: clamp(12px, calc(12px + (16 - 12) * ((100vw - 375px) / (1600 - 375))), 16px);
	--space-s: clamp(20px, calc(20px + (32 - 20) * ((100vw - 375px) / (1600 - 375))), 32px);
	--space-m: clamp(30px, calc(30px + (48 - 30) * ((100vw - 375px) / (1600 - 375))), 48px);
	--space-l: clamp(50px, calc(50px + (80 - 50) * ((100vw - 375px) / (1600 - 375))), 80px);
	--space-xl: clamp(80px, calc(80px + (128 - 80) * ((100vw - 375px) / (1600 - 375))), 128px);
	--space-2xl: clamp(130px, calc(130px + (208 - 130) * ((100vw - 375px) / (1600 - 375))), 208px);

	/* color */
	--ti-color-white: #FFF;
	--ti-color-darkgray: #141414;
	--ti-color-black: #000;
	--ti-color-midgray: #555;
	--ti-color-orange-main: #FF683F;
	--ti-color-orange-secondary: #E26F4D;
	--ti-color-pink-main: #F58A7E;
	--ti-color-green: rgba(213, 255, 145, 1);
	--ti-color-lightgray: #AAA;

	/* easing */
	--linear: cubic-bezier(0.250,0.250,0.750,0.750);
	--ease: cubic-bezier(0.250,0.100,0.250,1.000);
	--ease-in: cubic-bezier(0.420,0.000,1.000,1.000);
	--ease-out: cubic-bezier(0.000,0.000,0.580,1.000);
	--ease-in-out: cubic-bezier(0.420,0.000,0.580,1.000);
	--ease-in-quad: cubic-bezier(0.550,0.085,0.680,0.530);
	--ease-in-cubic: cubic-bezier(0.550,0.055,0.675,0.190);
	--ease-in-quart: cubic-bezier(0.895,0.030,0.685,0.220);
	--ease-in-quint: cubic-bezier(0.755,0.050,0.855,0.060);
	--ease-in-sine: cubic-bezier(0.470,0.000,0.745,0.715);
	--ease-in-expo: cubic-bezier(0.950,0.050,0.795,0.035);
	--ease-in-circ: cubic-bezier(0.600,0.040,0.980,0.335);
	--ease-in-back: cubic-bezier(0.600,-0.280,0.735,0.045);
	--ease-out-quad: cubic-bezier(0.250,0.460,0.450,0.940);
	--ease-out-cubic: cubic-bezier(0.215,0.610,0.355,1.000);
	--ease-out-quart: cubic-bezier(0.165,0.840,0.440,1.000);
	--ease-out-quint: cubic-bezier(0.230,1.000,0.320,1.000);
	--ease-out-sine: cubic-bezier(0.390,0.575,0.565,1.000);
	--ease-out-expo: cubic-bezier(0.190,1.000,0.220,1.000);
	--ease-out-circ: cubic-bezier(0.075,0.820,0.165,1.000);
	--ease-out-back: cubic-bezier(0.175,0.885,0.320,1.275);
	--ease-in-out-quad: cubic-bezier(0.455,0.030,0.515,0.955);
	--ease-in-out-cubic: cubic-bezier(0.645,0.045,0.355,1.000);
	--ease-in-out-quart: cubic-bezier(0.770,0.000,0.175,1.000);
	--ease-in-out-quint: cubic-bezier(0.860,0.000,0.070,1.000);
	--ease-in-out-sine: cubic-bezier(0.445,0.050,0.550,0.950);
	--ease-in-out-expo: cubic-bezier(1.000,0.000,0.000,1.000);
	--ease-in-out-circ: cubic-bezier(0.785,0.135,0.150,0.860);
	--ease-in-out-back: cubic-bezier(0.680,-0.550,0.265,1.550);

	/* global */
	--ti-content: '';
	--ti-content-email: 'Copy Email';
	--ti-content-drag: 'Drag';
	--ti-content-left: '>';
	--ti-content-right: '<';
	--ti-img-indent: -9999rem;
	--ti-translate-x: 0;
	--ti-translate-y: 0;
	--ti-rotate: 0;
	--ti-skew-x: 0;
	--ti-skew-y: 0;
	--ti-scale-x: 1;
	--ti-scale-y: 1;
	--cursor-time: .2s;
	--cursor-ease: ease-in-out;
	--animation-duration: 0.5s;
	--animation-delay: 0s;
	--transition-time: .4s;
	--tear-bg-image: url('../svg/footer-tear.svg');
}

@media (min-width: 768px) {
	:root {
		--container-width: min(calc(100vw - 120px), 1280px);
	}
}
@media (min-width: 1600px) {
	:root {
		--container-width: min(calc(1280px + (2400 - 1600) * (100vw - 1600px) / (2400 - 1600)), 1600px);
	}
}

:root {
	/* columns */
	--column-1: calc(var(--container-width) * 0.08333333333333333 - (var(--spacing-m) * 0.9166666666666666));
    --column-2: calc(var(--container-width) * 0.16666666666666666 - (var(--spacing-m) * 0.8333333333333334));
    --column-3: calc(var(--container-width) * 0.25 - (var(--spacing-m) * 0.75));
    --column-4: calc(var(--container-width) * 0.3333333333333333 - (var(--spacing-m) * 0.6666666666666666));
    --column-5: calc(var(--container-width) * 0.4166666666666667 - (var(--spacing-m) * 0.5833333333333334));
    --column-6: calc(var(--container-width) * 0.5 - (var(--spacing-m) * 0.5));
    --column-7: calc(var(--container-width) * 0.5833333333333334 - (var(--spacing-m) * 0.4166666666666667));
    --column-8: calc(var(--container-width) * 0.6666666666666666 - (var(--spacing-m) * 0.3333333333333333));
    --column-9: calc(var(--container-width) * 0.75 - (var(--spacing-m) * 0.25));
    --column-10: calc(var(--container-width) * 0.8333333333333334 - (var(--spacing-m) * 0.16666666666666666));
    --column-11: calc(var(--container-width) * 0.9166666666666666 - (var(--spacing-m) * 0.08333333333333333));
    --column-12: calc(var(--container-width) * 1 - (var(--spacing-m) * 0));

    /* spacing */
	--spacing-xxl: max(130px, calc(130px + (260 - 130) * ((100vw - 375px) / (1600 - 375))));
	--spacing-xl: max(80px, calc(80px + (160 - 80) * ((100vw - 375px) / (1600 - 375))));
	--spacing-l: max(50px, calc(50px + (100 - 50) * ((100vw - 375px) / (1600 - 375))));
	--spacing-m: max(30px, calc(30px + (60 - 30) * ((100vw - 375px) / (1600 - 375))));
	--spacing-s: max(20px, calc(20px + (40 - 20) * ((100vw - 375px) / (1600 - 375))));
	--spacing-xs: max(10px, calc(10px + (20 - 10) * ((100vw - 375px) / (1600 - 375))));
}

@media (min-width: 1600px) {
	:root {
		--spacing-xxl: min(325px, calc(260px + (325 - 260) * ((100vw - 1600px) / (2000 - 1600))));
		--spacing-xl: min(200px, calc(160px + (200 - 160) * ((100vw - 1600px) / (2000 - 1600))));
		--spacing-l: min(125px, calc(100px + (125 - 100) * ((100vw - 1600px) / (2000 - 1600))));
		--spacing-m: min(75px, calc(60px + (75 - 60) * ((100vw - 1600px) / (2000 - 1600))));
		--spacing-s: min(50px, calc(40px + (50 - 40) * ((100vw - 1600px) / (2000 - 1600))));
		--spacing-xs: min(25px, calc(20px + (25 - 20) * ((100vw - 1600px) / (2000 - 1600))));
	}
}

:root {
	/*fonts */
	--font-size--h1: max(42px, calc(42px + (64 - 42) * ((100vw - 375px) / (1600 - 375))));
	--font-size--h2: max(36px, calc(36px + (48 - 36) * ((100vw - 375px) / (1600 - 375))));
	--font-size--h3: max(30px, calc(30px + (36 - 30) * ((100vw - 375px) / (1600 - 375))));
	--font-size--h4: max(24px, calc(24px + (30 - 24) * ((100vw - 375px) / (1600 - 375))));
	--font-size--h5: max(21px, calc(21px + (24 - 21) * ((100vw - 375px) / (1600 - 375))));
	--font-size--h6: max(18px, calc(18px + (21 - 18) * ((100vw - 375px) / (1600 - 375))));
	--font-size--text-regular: max(18px, calc(18px + (21 - 18) * ((100vw - 375px) / (1600 - 375))));
	--font-size--text-s: max(15px, calc(15px + (18 - 15) * ((100vw - 375px) / (1600 - 375))));
	--font-size--text-xs: max(14px, calc(14px + (15 - 14) * ((100vw - 375px) / (1600 - 375))));
	--font-size--text-xxs: max(12px, calc(12px + (12 - 12) * ((100vw - 375px) / (1600 - 375))));
	--font-size--blockquote-l: max(30px, calc(30px + (42 - 30) * ((100vw - 375px) / (1600 - 375))));
	--font-size--blockquote-s: max(24px, calc(24px + (30 - 24) * ((100vw - 375px) / (1600 - 375))));
	--font-size--overline-l: max(21px, calc(21px + (24 - 21) * ((100vw - 375px) / (1600 - 375))));
	--font-size--overline-m: max(15px, calc(15px + (18 - 15) * ((100vw - 375px) / (1600 - 375))));
	--font-size--overline-s: max(14px, calc(14px + (15 - 14) * ((100vw - 375px) / (1600 - 375))));
	--font-size--link-l: max(18px, calc(18px + (20 - 18) * ((100vw - 375px) / (1600 - 375))));
	--font-size--link-m: max(15px, calc(15px + (18 - 15) * ((100vw - 375px) / (1600 - 375))));
	--font-size--link-s: max(14px, calc(14px + (15 - 14) * ((100vw - 375px) / (1600 - 375))));
	--line-height--l: 1.6;
	--line-height--m: 1.4;
	--line-height--s: 1.2;
	--line-height--xs: 1;
	--font-family--regular: var(--font-text);
	--font-family--mono: var(--font-detail);
	--font-weight--regular: 400;
	--font-weight--bold: 700;
	--font-weight--black: 900;
}

@media (min-width: 1600px) {
	:root {
		--font-size--h1: min(84px, calc(64px + (84 - 64) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--h2: min(64px, calc(48px + (64 - 48) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--h3: min(48px, calc(36px + (48 - 36) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--h4: min(36px, calc(30px + (36 - 30) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--h5: min(30px, calc(24px + (30 - 24) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--h6: min(24px, calc(21px + (24 - 21) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--text-regular: min(24px, calc(21px + (24 - 21) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--text-m: min(24px, calc(21px + (24 - 21) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--text-s: min(21px, calc(18px + (21 - 18) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--text-xs: min(18px, calc(15px + (18 - 15) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--text-xxs: min(15px, calc(12px + (15 - 12) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--blockquote-l: min(48px, calc(42px + (48 - 42) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--blockquote-s: min(36px, calc(30px + (36 - 30) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--overline-l: min(30px, calc(24px + (30 - 24) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--overline-m: min(21px, calc(18px + (21 - 18) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--overline-s: min(18px, calc(15px + (18 - 15) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--link-l: min(24px, calc(20px + (24 - 20) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--link-m: min(20px, calc(18px + (20 - 18) * ((100vw - 1600px) / (2000 - 1600))));
		--font-size--link-s: min(18px, calc(15px + (18 - 15) * ((100vw - 1600px) / (2000 - 1600))));
	}
}

:root {
	/* container */
	--container-width: calc(100vw - 60px);
	--content-width: calc((var(--font-size--text-regular) * 34.38) + 60px);
}

/* animations ---------------------------------------------*/
/* keyframes */
@keyframes spin {
	to {
		transform: rotate(1turn)
	}
}

@keyframes spinner {
	0% {
		transform: rotate(0deg)
	}
	100% {
		transform: rotate(360deg)
	}
}

@keyframes pageLoad {
	0%, 100% {
		transform: scale(1)
	}
	50% {
		transform: scale(1.04)
	}
}

@keyframes bounceText {
	0%, 100% {
		transform: translateY(0)
	}
	40% {
		transform: translateY(-5px)
	}
}

@keyframes bounce {
	from, 20%, 53%, 80%, to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0)
	}
	40%, 43% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, 30px, 0)
	}
	70% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, 15px, 0)
	}
	90% {
		transform: translate3d(0, 4px, 0)
	}
}

@keyframes riseUp {
	0% {
		transform: translate3D(-50%, 100%, 0);
		opacity: 0
	}
	100% {
		transform: translate3D(-50%, 0%, 0);
		opacity: 1
	}
}

@keyframes rising {
	0% {
		transform: translate3D(0, 100%, 0);
		opacity: 0
	}
	100% {
		transform: translate3D(0, 0%, 0);
		opacity: 1
	}
}

@keyframes drop-it {
	0% {
		transform: translateY(-5vh);
		opacity: 0
	}
	100% {
		transform:translateY(0);
		opacity: 1
	}
}

@keyframes fade-in {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

@keyframes fade-out {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}

@keyframes fadeInUp {
	0% {
		transform: translateY(20%);
		opacity: 0
	}
	100% {
		transform: translateY(0);
		opacity: 1
	}
}

@keyframes fadeInSplit {
    0% {
        height: 0
    }

    100% {
        height: 100vh
    }
}

@keyframes noiseAnimation {
    0% {
        transform: translate(0)
    }
    10% {
        transform: translate(-5%,-5%)
    }
    20% {
        transform: translate(-10%,5%)
    }
    30% {
        transform: translate(5%,-10%)
    }
    40% {
        transform: translate(-5%,15%)
    }
    50% {
        transform: translate(-10%,5%)
    }
    60% {
        transform: translate(15%)
    }
    70% {
        transform: translateY(10%)
    }
    80% {
        transform: translate(-15%)
    }
    90% {
        transform: translate(10%,5%)
    }
    to {
        transform: translate(5%)
    }
}

@keyframes zoom-fade {
	from {
		transform: scale(1.3, 1.3);
		opacity: 0
	}
	to {
		transform:scale(1, 1);
		opacity: 1
	}
}

@keyframes scrolling-title-left {
	0% {
		transform: translate3d(0, 0, 0)
	}
	99.999% {
		transform: translate3d(-100%, 0, 0)
	}
	100% {
		transform: translate3d(0, 0, 0)
	}
}

@keyframes dropDownBTN {
	0% {
		transform: translateY(-150%);
		opacity: 0
	}
	100% {
		transform: translateY(0);
		opacity: 1
	}
}

@keyframes gradient-one {
	0% {
		opacity: 1
	}
	50% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@keyframes gradient-two {
	0% {
		opacity: 0
	}
	50% {
		opacity: 1
	}
	to {
		opacity: 0
	}
}

@keyframes moveWave {
	0% {
		transform: translateX(0)
	}
	100% {
		transform: translateX(-2.188rem);
	}
}

@keyframes draw-on {
	100% {
		stroke-dashoffset: 0;
	}
}

/*animation classes */
.animation-delay-1 {
	animation-delay: 0s !important
}

.animation-delay-2 {
	animation-delay: 0.12s !important
}

.animation-delay-3 {
	animation-delay: 0.18s !important
}

.animation-delay-4 {
	animation-delay: 0.24s !important
}

.animation-delay-5 {
	animation-delay: 0.3s !important
}

.animation-delay-6 {
	animation-delay: 0.36s !important
}

.animation-delay-7 {
	animation-delay: 0.42s !important
}

.animation-delay-8 {
	animation-delay: 0.48s !important
}

.animation-delay-9 {
	animation-delay: 0.54s !important
}

.animation-delay-10 {
	animation-delay: 0.6s !important
}

.animation-delay-11 {
	animation-delay: 0.66s !important
}

.animation-delay-12 {
	animation-delay: 0.72s !important
}

.animation-delay-13 {
	animation-delay: 0.78s !important
}

.animation-delay-14 {
	animation-delay: 0.84s !important
}

.animation-delay-15 {
	animation-delay: 0.9s !important
}

.animation-delay-16 {
	animation-delay: 0.96s !important
}

.animation-delay-17 {
	animation-delay: 1.02s !important
}

.animation-delay-18 {
	animation-delay: 1.08s !important
}

.animation-delay-19 {
	animation-delay: 1.14s !important
}

.animated {
	animation-fill-mode: both;
	animation-duration: .5s
}

.fade-in {
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	animation-name: fade-in
}

.fade-out {
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	animation-name: fade-out
}

.fadeInUp {
	animation-name: fadeInUp;
	animation-delay: .2s
}

html {
	padding: 0;
	scroll-behavior: smooth;
	ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-font-feature-settings: 'kern' off;
	font-feature-settings: 'kern' off;
	font-kerning: none;
	font-feature-settings: normal;
	font-variation-settings: normal;
}

html, body {
	height: -webkit-fill-available;
	min-height: 100vh;
	margin: 0;
	overflow-x: hidden;
}

body {
	line-height: var(--line-height--l);
	color: var(--ti-color-white);
	background: var(--ti-color-darkgray);
	font-family: var(--font-family--regular);
	font-weight: 500;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	hyphens: none;
	font-variant-ligatures: common-ligatures;
	overscroll-behavior-y: contain; 
}

::-moz-selection {
	background: var(--ti-color-pink-main);
	color: var(--ti-color-black);
}
::selection {
	background: var(--ti-color-pink-main);
	color: var(--ti-color-black);
}

button,
.button {
	border: none;
	background: none;
	outline:0;
	font-family: var(--font-family--regular);
}

a,
button {
	-webkit-text-decoration: none;
	text-decoration: none;
	color: inherit;
	transition: all var(--animate-duration-fast) var(--animate-style--link) var(--animate-delay--link);
	-webkit-appearance: none!important;
	outline: none;
}

a:focus-visible,
button:focus-visible {
	outline: 0;
}

a:not(:disabled),
.link:not(:disabled),
button:not(:disabled),
.buttona:not(:disabled) {
	cursor: pointer;
}

.link {
	font-weight: var(--font-weight--bold);
	font-size: var(--font-size--link-m);
	border: none;
}

a.link {
	color: var(--color--actionable);
	text-transform: capitalize;
}

a.link:hover {
	color: var(--color--actionable-minus-minus);
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
	line-height: var(--line-height--xs);
	margin:0 0 var(--spacing-s);
	font-family: var(--font-header);
	font-weight: var(--font-weight--black);
	color: var(--ti-color-orange-main);
}

h1,
.h1 {
	font-size: var(--font-size--h1);
}

h2,
.h2 { 
	font-size: var(--font-size--h2);
}

h3,
.h3 {
	margin: 0 0 var(--spacing-xs);
	font-size: var(--font-size--h3);
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
	line-height: var(--line-height--s);
	margin: 0 0 var(--spacing-xs);
	font-weight: var(--font-weight--bold);
	color: var(--ti-color-pink-main);
}

h4,
.h4 {
	font-size: var(--font-size--h4);
}

h5,
.h5 {
	font-size: var(--font-size--h5);
}

h6,
.h6 {
	font-size: var(--font-size--h6);
}

img {
	width: 100%;
	max-width: 100%;
	display: inline-block;
    vertical-align: middle;
    border: 0;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

/* position */
.relative {
  position: relative;
}

.absolute {
	position: absolute;
}

.fixed {
	position: fixed;
}

.sticky {
	position: sticky;
}

.static {
	position: static;
}

/* flex */
.flex {
	display: flex;
}

.flex-stack {
  flex-direction: column;
}

.flex-stack {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.flex-spread {

}

.flex-gap {
	margin-bottom: 1rem;
}

.flex-end {
	align-items: flex-end;
}

/* top gradient */
.top-gradient {
	width: 100vw;
	height: 20vh;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 0;
	background: linear-gradient(var(--ti-color-darkgray) 0, rgba(20, 20, 20, 0) 100%);
}

@media (max-width: 768px) {
	.top-gradient {
		z-index: 1;
	}
}

/* btn */
.btn-holder {
	--delay: .7s;
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	transform: translateY(-150%);
	transition: transform var(--transition-time) var(--ease-out-back) var(--delay);
}

@media (max-width: 768px) {
	.btn-holder {
		width: 100vw;
		right: 0;
		left: 0;
		display: flex;
		justify-content: center;
	}
}

.animate-in .btn-holder {
	transform: translateY(0);
}

.btn {
	width: fit-content;
	line-height: 1.1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
    padding: 1rem 2.8rem;
    text-align: center;
    color: var(--ti-color-orange-main);
    background-color: transparent;
    white-space-collapse: collapse;
	text-wrap: nowrap;
    transition: background-color .5s cubic-bezier(.455, .03, .515, .955);
    border: 1px solid var(--ti-color-orange-main);
	background-color: rgba(20, 20, 20, .4);
    overflow: hidden;
    border-radius: 4rem;
}

@media (max-width: 768px) {
	.btn {
		background-color: var(--ti-color-darkgray);
	}
}

.btn::after,
.btn::before {
    position: absolute;
    top: 0;
    padding-top: 1rem;
}

.btn::before {
    content: '';
    width: 100%;
    height: 200%;
    left: 0;
    z-index: 1;
    border-radius: 200%;
    background-color: var(--ti-color-orange-main);
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.25, .46, .45, .94),border-radius .5s cubic-bezier(.25, .46, .45, .94), width .5s cubic-bezier(.25, .46, .45, .94);
    transition-delay: .2s;
}

.btn:hover::before {
    transform: translateY(0) scaleX(2);
    border-radius: 0;
    transition-delay: 0s;
}

.btn::after {
    content: attr(data-text);
    width: calc(100% - 4rem + 2px);
    height: calc(100% - 2rem);
    left: calc(2rem - 1px);
    z-index: 2;
    color: var(--ti-color-black);
    transform: translateY(200%);
    transition: transform .25s cubic-bezier(.25, .46, .45, .94);
    transition-delay: 0s;
}

.btn:hover::after {
    transform: translateY(0);
    transition-delay: .2s;
}

.btn__span {
    display: block;
    transform: translateY(0);
    transition: transform .25s cubic-bezier(.25, .46, .45, .94);
    transition-delay: .2s;
}

.btn:hover .btn__span {
    transform: translateY(-200%);
    transition-delay: 0s;
}

/* main */
.main-content {
	max-width: 60vw;
	height: 100vh;
	z-index: 1;
	justify-content: space-evenly;
	align-items: flex-start;
	padding-left: 5vw;
}

@media (max-width: 768px) {
	.main-content {
		--margin-top: 6rem;
		--margin-bottom: 12rem;
		width: 100vw;
		max-width: unset;
		height: calc(100vh - (var(--margin-top) + var(--margin-bottom)));
		z-index: 0;
		align-items: center;
		justify-content: space-between;
		margin-top: var(--margin-top);
		margin-bottom: var(--margin-bottom);
		padding-left: 0;
	}
}

@media (max-width: 768px) {
	.content-top {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}

.content-holder {
	flex: 1;
	justify-content: center;
	margin-left: 4rem;
	font-family: var(--font-detail);
    font-size: var(--text-base);
    font-weight: 400;
    letter-spacing: 0;
}

@media (max-width: 768px) {
	.content-holder {
		display: none;
		margin-left: 0;
	}
}

.content-h1-holder {
	width: 100%;
	position: relative;
	display: block;
	overflow: hidden;
}

.content-h1 {
	width: 100%;
	white-space: nowrap;
}

.content-h1 svg {
	height: 4.313rem;
	transform: translateX(-1.75rem);
}

.content-h1 svg path {
	--time: 1s;
	stroke: var(--ti-color-white);
	stroke-width: 1px;
	stroke-dasharray: 37.5rem; /* 600px , 37.5em */
	stroke-dashoffset: 37.5rem; /* 600px , 37.5em */
	fill: none;
	animation: draw-on var(--time) var(--ease-in-circ) forwards var(--ligature-delay);
}

.content-h1 svg path:nth-child(1) {
	--ligature-delay: 0s
}

.content-h1 svg path:nth-child(2) {
	--ligature-delay: .16s
}

.content-h1 svg path:nth-child(3) {
	--ligature-delay: .33s
}

.content-h1 svg path:nth-child(4) {
	--ligature-delay: .5s
}

.content-h1 svg path:nth-child(5) {
	--ligature-delay: .66s
}

.content-h1 svg path:nth-child(6) {
	--ligature-delay: .83s
}

.content-h1 svg path:nth-child(7) {
	--ligature-delay: 1s
}

.content-h1 svg path:nth-child(8) {
	--ligature-delay: 1.16s
}

.content-h1 svg path:nth-child(9) {
	--ligature-delay: 1.33s
}

.content-h1 svg path:nth-child(10) {
	--ligature-delay: 1.5s
}

.content-h1 svg path:nth-child(11) {
	--ligature-delay: 1.66s
}

.content-h1 svg path:nth-child(12) {
	--ligature-delay: 1.83s
}

.content-h1 svg path:nth-child(13) {
	--ligature-delay: 2s
}

.overlay-home {
	justify-content: center;
	padding-bottom: .75rem;
}

@media (max-width: 768px) {
	.overlay-home {
		margin-left: 0;
		padding-bottom: 0;
	}
}

.overlay-valign {
    text-transform: none;
    text-align: left;
}

@media (max-width: 768px) {
	.overlay-valign {
		text-align: center;
	}
}

[data-animated-letter] {
	opacity: 0;
	transition: opacity .4s linear;
}

.letter-shown {
	opacity: 1;
}

.content-bottom {
	--time: .5s;
	--delay: .4s;
	--opacity-delay: .5s;
	--opacity-time: .6s;
	opacity: 0;
	transform: translateY(50%);
	transition: transform var(--time) var(--ease-out-back) var(--delay), opacity var(--opacity-time) linear var(--opacity-delay);
}

.animate-in .content-bottom {
	opacity: 1;
	transform: translateY(0);
}

.hr-wave {
	width: 9.375rem; /* 150px */
	height: .625rem; /* 10px */
	position: relative;
	display: block;
	margin: 1rem 0;
	overflow: hidden;
}

.hr-wave-svg {
	width: 18.438rem;
	height: .438rem;
	animation: moveWave 2s linear infinite running;
}

.hr-wave-svg-wrap {
	stroke-dashoffset: 0;
    transition: opacity .5s ease, stroke-dashoffset 2s .25s ease;
}

.hr-wave-svg_path {
	transform: translateX(-3.75rem);
}

.resume-holder a {
	position: relative;
	display: inline-block;
	padding-bottom: .3rem;
	color: var(--ti-color-orange-main);
	text-transform: uppercase;
	overflow: hidden;
	transition: color var(--transition-time) linear;
}

.resume-holder a:hover {
	color: var(--ti-color-orange-secondary);
}

.resume-holder a::after {
	content: '';
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateX(-100%);
	background-color: var(--ti-color-orange-main);
	transition: transform var(--transition-time) ease-out, background var(--transition-time) linear;
}

.resume-holder a:hover::after {
	transform: translateX(0);
	background-color: var(--ti-color-orange-secondary);
}

.logo-holder {
	width: 21.438rem;
	aspect-ratio: 1/1;
	position: relative;
	justify-content: center;
	align-items: center;
}

@media (max-width: 768px) {
	.logo-holder {
		margin-bottom: 2rem;
	}
}

.logo-icon,
.logomark-svg {
	width: 18.75rem;
	aspect-ratio: 15/13;
}

.logo-icon {
	mask: url('../img/clip-mask.png');
	mask-size: 1800% 100%;
	mask-position: 0% 50%;
	transition: all 1s ease-out;
}

.animate-in .logo-icon {
	mask-position: 100% 50%;
}

.logomark-svg {
	display: block;
}

/* spinner */
.spinner {
	--delay: .3s;
	--spinner-speed: 6s;
	width: 21.438rem;
	aspect-ratio: 1/1;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity var(--transition-time) var(--ease-out-back) var(--delay);
	animation: spin var(--spinner-speed) infinite linear;
}

.animate-in .spinner {
	opacity: 1;
}

/* footer */
footer {
	width: 100vw;
}

footer::before {
	--tear-scale-y: 1;
	--delay: .8s;
	content: var(--ti-content);
	width: 100%;
    aspect-ratio: 1476/67;
	position: absolute;
	bottom: 2.95rem;
	right: -.1rem;
    left: -.1rem;
    z-index: 1;
    background-image: var(--tear-bg-image);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translateY(200%);
    transition: transform var(--transition-time) var(--ease-out-quad) var(--delay);
}

.animate-in footer::before {
	transform: translateY(0);
}

.footer-cover {
	--time: .5s;
	width: 100vw;
	height: 3rem;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ti-color-black);
	opacity: 0;
	transition: opacity var(--time) linear;
}

.footer-cover span {
	line-height: 3rem;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ti-color-orange-main);
}

.footer-holder.pausable:hover .footer-cover {
	opacity: 1;
}

/* txt marquee */
.txt-marquee {
	height: 3rem;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
}

.scrolling-text-pp {
	width: 100vw;
	position: relative;
	overflow: hidden;
}

.scrolling-text-pp.size-size01 {
	--delay: .3s;
	--time: 1s;
	height: 3rem;
	background-size: 35px 35px;
	background-color: var(--ti-color-black);
	transform: translateX(-100%);
	transition: transform var(--time) var(--ease-out-expo) var(--delay);
}

.animate-in .scrolling-text-pp.size-size01 {
	transform: translateX(0);
}

.scrolling-text-pp.size-size01 .scrolling-text {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-40%);
}

.scrolling-text-row {
	--delay: .7s;
	--time: .8s;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--time) var(--ease-in-expo) var(--delay);
}

.animate-in .scrolling-text-row {
	opacity: 1;
}

.scrolling-text-item {
	display: flex;
	flex-shrink: 0;
	white-space: nowrap;
	align-items: center;
	animation-name: scrolling-title-left;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-play-state: running;
	animation-fill-mode: forwards;
	font-weight: 700;
	pointer-events: none;
	user-select: none;
}

.footer-holder.pausable:hover .scrolling-text-item  {
  /* animation-play-state: paused; */
}

.scrolling-text-item span {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-weight: inherit;
	text-transform: uppercase;
	vertical-align: baseline;
}

/* social */
.follow {
}

.social-nav {
	display: flex;
}

.social-nav a {
	min-width: 1.5rem;
	max-width: 1.688rem;
	height: 1.5rem;
	position: relative;
	display: block;
	font-size: 0;
	opacity: 0;
	transition-duration: var(--transition-time);
	transition-timing-function: var(--ease-is-quint);
	transition-property: opacity;
}

.social-nav a:nth-child(1) {
	transition-delay: .2s;
}

.social-nav a:nth-child(2) {
	transition-delay: .3s;
}

.social-nav a:nth-child(3) {
	transition-delay: .4s;
}

.social-nav a:nth-child(4) {
	transition-delay: .5s;
}

.social-nav a:nth-child(5) {
	transition-delay: .6s;
}

.social-nav a:nth-child(6) {
	transition-delay: .7s;
}

.social-nav a:nth-child(7) {
	transition-delay: .8s;
}

.animate-in .social-nav a {
	opacity: 1;
}

.social-nav>:not([hidden])~:not([hidden]) {
    --ti-space-x-reverse: 0;
    margin-right: calc(1rem*var(--ti-space-x-reverse));
    margin-left: calc(1rem*(1 - var(--ti-space-x-reverse)));
}

.social-nav svg {
	width: 1.5rem;
    max-width: 100%;
    height: 1.5rem;
	position: absolute;
    top: 0;
    left: 0;
    display: block;
    object-fit: cover;
    transition: all .3s linear;
}

@media (min-width: 1025px) {
	.social-nav a:hover path {
		fill: var(--ti-color-white);
	}
}

/* aside */
aside {
	--delay: .3s;
	width: auto;
	height: auto;
	position: fixed;
	bottom: 6vw;
	right: 1.5vw;
	z-index: 5;
	align-items: center;
	justify-content: flex-start;
	transform: translateX(100%);
	transition: transform var(--transition-time) var(--ease-out-back) var(--delay);
}

@media (max-width: 768px) {
	aside {
		width: 100vw;
		left: 0;
		right: 0;
		bottom: 10rem;
	}
}

.animate-in aside {
	transform: translateX(0);
}

/* hover tag */
.hover-tag {
	width: auto;
	position: absolute;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 3rem;
	padding: .1rem .5rem;
	border: 1.5px solid var(--ti-color-lightgray);
    background-color: rgba(20, 20, 20, .5);
    border-radius: .25rem;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -200%);
	transition: opacity .2s linear;
	will-change: opacity;
}

.hover-tag > span {
	line-height: var(--leading-tight);
	padding-top: 1px;
    color: var(--ti-color-lightgray);
    text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	font-size: .75rem; /* 12px , .75em */
	font-family: var(--font-header);
	font-weight: var(--font-semibold);
	word-wrap: normal;
	white-space: nowrap;
}

/* cover */
.cover {
	width: 100vw;
	height: 100vh;
	position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999998;
	background: var(--ti-color-darkgray);
	border-radius: 0;
	transform: scale(1);
	transition: all .4s cubic-bezier(0.85, 0, 0.15, 1);
}

.animate-in .cover {
	border-radius: 500vw;
    transform: scale(.001);
}

/* cursor */
@media (min-width: 1025px) {
	html,
	html * {
	  cursor: none !important;
	}
}

@media (max-width: 1024px) {
  html,
  html * {
    cursor: auto !important;
  }
}

.cursor {
	width: 1rem;
	aspect-ratio: 1;
	position: fixed;
	left: 0;
	z-index: 999999999;
	transform: translate(-50%, -50%);
	border: 1px solid var(--ti-color-white);
	/*mix-blend-mode: difference; */
	backdrop-filter: invert() hue-rotate(180deg);
	border-radius: 100%;
	pointer-events: none;
	user-select: none;
	transition: width var(--cursor-time) var(--cursor-ease), height var(--cursor-time) var(--cursor-ease), background-color var(--cursor-time) var(--cursor-ease), border-color var(--cursor-time) var(--cursor-ease);
	background-color: var(--ti-color-white);
}

@media (max-width: 1024px) {
	.cursor {
		display: none !important;
	}
}

.cursor .inner {
	  display: none;
}

.cursor.active {
	width: 3.438rem; /* 55px */
	background-color: rgba(255, 255, 255, 0);
}

.cursor.cursor-top.active {
	--bg-color: var(--ti-color-orange-main);
	width: 4.5rem;
	display: flex;
	background: var(--bg-color);
	border-color: var(--bg-color);
	mix-blend-mode: normal;
}

.cursor.cursor-top.active .inner {
	--txt-color: var(--ti-color-black);
	width: 100%;
	line-height: .9rem;
	display: block;
	margin: auto;
	padding-left: .25rem;
	padding-right: .25rem;
	text-align: center;
	color: var(--txt-color);
	font-size: .75rem;
	font-weight: 500;
	text-transform: uppercase;
}

.cursor.cursor-ext.active {
	--bg-color: transparent;
	width: 4.5rem;
	background: var(--bg-color);
	border-color: var(--ti-color-orange-main);
	border-width: 3px;
	mix-blend-mode: normal;
	backdrop-filter: unset;
}

/* noise */
.noise {
	--noise-opacity: .7;
	width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    margin-left: 0px;
    opacity: var(--noise-opacity);
    pointer-events: none;
    overflow: hidden;
}

.noise::after {
	--noise-opacity: .9;
	--noise-steps: 4;
	--noise-time: 1s;
    content: var(--ti-content);
    width: 200%;
    height: 200%;
    position: absolute;
    top: -50%;
    left: -50%;
    display: block;
    pointer-events: none;
    opacity: var(--noise-opacity);
    background-image: url('../img/noise.png');
    will-change: transform;
    animation: noiseAnimation var(--noise-time) steps(var(--noise-steps)) infinite;
}

.w-embed::before,
.w-embed::after {
    content: ' ';
    display: table;
    grid-column-start: 1;
    grid-row-start: 1;
    grid-column-end: 2;
    grid-row-end: 2;
}

.w-embed:after {
    clear: both
}