/*Kunit 900*/
@font-face{
    font-family: 'Kanit';
    src: url('fonts/kanit-latin-900-normal.woff2') format('woff2'),
        url('fonts/kanit-latin-900-normal.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/*Kunit 900 Italic*/
@font-face{
    font-family: 'Kanit';
    src: url('fonts/kanit-latin-900-italic.woff2') format('woff2'),
        url('fonts/kanit-latin-900-italic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/*Kunit 600*/
@font-face{
    font-family: 'Kanit';
    src: url('fonts/kanit-latin-600-normal.woff2') format('woff2'),
        url('fonts/kanit-latin-600-normal.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/*Kunit 600 Italic*/
@font-face{
    font-family: 'Kanit';
    src: url('fonts/kanit-latin-600-italic.woff2') format('woff2'),
        url('fonts/kanit-latin-600-italic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/*Kunit 500*/
@font-face{
    font-family: 'Kanit';
    src: url('fonts/kanit-latin-500-normal.woff2') format('woff2'),
        url('fonts/kanit-latin-500-normal.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/*Kunit 500 Italic*/
@font-face{
    font-family: 'Kanit';
    src: url('fonts/kanit-latin-500-italic.woff2') format('woff2'),
        url('fonts/kanit-latin-500-italic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/*Nunito Sans 400*/
@font-face{
    font-family: 'Nunito Sans';
    src: url('fonts/nunito-sans-latin-400-normal.woff2') format('woff2'),
        url('fonts/nunito-sans-latin-400-normal.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/*Nunito Sans 400 Italic*/
@font-face{
    font-family: 'Nunito Sans';
    src: url('fonts/nunito-sans-latin-400-italic.woff2') format('woff2'),
        url('fonts/nunito-sans-latin-400-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root{
    /* COLOURS */
    --color-brand-1: #fff;
    --color-brand-1-rgb: 250 250 250;
    --color-brand-2: #101710;
    --color-brand-3: #2f442f;
    --color-brand-4: #e70b2c;
    --color-brand-text: #101010;
    --color-brand-alt-text: #fff;
    --color-shadow-rgb: 16 16 16;

    /*Apply colours to exisiting variables*/

    --color-header-bg: rgba(0,0,0,0.6);
    --color-header-sticky-bg: var(--color-brand-2);
    --color-header-link: var(--color-brand-text);
    --color-header-link-hover: var(--color-brand-3);

    --color-content-bg: var(--color-brand-1);
    --color-content-bg-rgb: var(--color-brand-1-rgb);
    --color-content-text:  var(--color-brand-text);
    --color-content-link: var(--color-brand-text);
    --color-content-link-hover: var(--color-brand-3);
    --color-content-heading: var(--color-brand-text);
    --color-content-heading-alt: var(--color-brand-3);
    --color-content-accent: var(--color-brand-3);
    --color-content-accent-alt: var(--color-brand-4);
    --color-content-secondary: var(--color-brand-2);
    --color-alt-content-bg: var(--color-brand-text);
    --color-alt-content-bg-alt: var(--color-brand-4);
    --color-alt-content-text: var(--color-brand-alt-text);
    --color-alt-content-heading: var(--color-brand-alt-text);
    --color-alt-content-link: var(--color-brand-alt-text);
    --color-alt-content-link-hover: var(--color-brand-3);

    --color-footer-bg: var(--color-brand-2);
    --color-footer-bg-alt: var(--color-brand-2);
    --color-footer-text: var(--color-brand-text);
    --color-footer-heading: var(--color-brand-text);
    --color-footer-link: var(--color-brand-text);
    --color-footer-link-hover: var(--color-brand-3);

    /* FONTS */

    --font-heading: 'Kanit', sans-serif;
    --font-heading-bold: 700;
    --font-heading-default: 500;
    --font-body: 'Nunito Sans', sans-serif;
    --font-decorative: "Bangers", system-ui;
    --font-decorative-2: "Sedgwick Ave Display", cursive;
    --font-decorative-3: "Racing Sans One", sans-serif;
}
#tab-h1-container{
    --hero-h1: 13.5cqw;
    --hero-h1-sub:6cqw;
    --hero-text-height:11cqw;
    --hero-h-line: 0.8;
}
#desk-h1-container{
    --hero-h1: 11cqw;
    --hero-h1-sub:3.3cqw;
    --hero-text-height:9.6cqw;
    --hero-h-line: 0.8;
}
.bg-vid-wrapper{
    --hero-h2:3.6cqw;
}
.bg-vid-wrapper .heading.hero{
    padding:0.25rem 0;
    font-family: var(--font-heading);
    font-weight: 900;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    font-style: italic;
    font-size: var(--hero-h1);
    line-height:var(--hero-h-line);
    color:#fff;
}
.multi-act-hero-text{
    /*--hero-text-height: calc(var(--hero-h1) * var(--hero-h-line));*/
    height: var(--hero-text-height);
    overflow:hidden;
    position:relative;
}
.multi-act-hero-text .inner{
    position:absolute;
    display:flex;
    flex-direction:column;
    top:0;
    left:0;
    right:0;
    transition: transform 0.3ms ease-in-out;
}
.bg-vid-wrapper .heading.hero{
    padding:0 !important;
    line-height:var(--hero-text-height);
}
.bg-vid-wrapper .heading.hero-sm{
    font-family: var(--font-heading);
    font-weight: 600;
    font-style: italic;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    font-size:var(--hero-h1-sub);
    line-height:var(--hero-h-line);
    color:#fff;
}
.bg-vid-wrapper .heading.hero-sub{
    font-family: var(--font-heading);
    font-weight: 600;
    font-style: italic;
    font-size:var(--hero-h2);
    line-height:100%;
    color:#fff;
}
.tear.white{
    filter:invert(1);
}
.tear.nav{
    filter: invert(7%) sepia(13%) saturate(1041%) hue-rotate(71deg) brightness(99%) contrast(96%);
}

.tear.accent{
    filter: invert(20%) sepia(34%) saturate(420%) hue-rotate(71deg) brightness(99%) contrast(91%);
}

@media screen and (max-width: 769px){
    .bg-vid-wrapper{
        --hero-h2:7cqw;
    }
}