/*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: #101010; /* BACKGROUND */
    --color-brand-1-rgb: 250 250 250; /* BACKGROUND */
    --color-brand-2: #df151f; /* FOOTER AND BORDERS */
    --color-brand-3: #efefef; /* SECONDARY BACKGROUND - SHOULD HAVE GOOD CONTRAST WITH SECONDARY TEXT */
    --color-brand-4: #df151f; /* ACCENT - BUTTONS ETC.. - SHOULD HAVE GOOD CONTRAST WITH MAIN AND SECONDARY BACKGROUNDS */
    --color-brand-text: #efefef; /* MAIN TEXT */
    --color-brand-alt-text: #101010; /* SECONDARY TEXT */
    --color-card: #232323; /* CARD BACKGROUND - USUALLY AN OFF SHADE OF MAIN BACKGROUND */
    --color-shadow-rgb: 16 16 16;
    --color-card-border: #575757;

    /*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;
}
.nav-icon-link:hover{
    filter: brightness(0) saturate(100%) invert(14%) sepia(66%) saturate(5861%) hue-rotate(350deg) brightness(96%) contrast(96%);
}
.tear.white{
    filter:invert(0%) sepia(12%) saturate(2488%) hue-rotate(138deg) brightness(99%) contrast(87%);
}
.tear.nav{
    filter: invert(98%) sepia(1%) saturate(192%) hue-rotate(30deg) brightness(113%) contrast(87%);
}

.tear.accent{
    filter: invert(98%) sepia(1%) saturate(192%) hue-rotate(30deg) brightness(113%) contrast(87%);
}

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

#wrap .btn.secondary .btn-title, #wrap .btn .btn-title{
    color:var(--color-footer-heading);
}

.nav-logo-img{
    padding: var(--space-2xs);
}

/* --- ARTISTIC BULLET OVERRIDE --- */
.art-bullet img:not(.equip-icon){
    filter: invert(85%) sepia(19%) saturate(6257%) hue-rotate(2deg) brightness(104%) contrast(102%);
}


/* --- DARK THEME OVERRIDES -- */
/* Important overrides */
.review-swiper .color-secondary,
.venue-card .heading:not(.age),
footer .heading,
footer a,
nav .heading,
.bg-vid-wrapper .heading,
.bg-accent .btn.secondary:hover .btn-title,
.page-hero .heading,
#redeem p,
#redeem span,
#product-terms .color-secondary,
#reviews .color-secondary,
.search-input{
    color:var(--color-content-text) !important;
}

.autocomplete2,
.select2-dropdown,
.search-input,
.select2-selection{
    background-color: var(--color-content-bg) !important;
    border-color:var(--color-card-border) !important;
}
.select2-selection__choice{
    background-color: var(--color-card) !important;
    border-color:var(--color-card-border) !important;
    color: var(--color-content-text) !important;
}
.groups-button.active .btn-title{
    color: var(--color-alt-content-text) !important;
}

/* Specificity overrides */
#redeem .inline-link.color-secondary{
    color:var(--color-content-text);
}
#redeem .inline-link.color-secondary:hover{
    color: var(--color-content-accent-alt);
}
.heading.age{
    color:var(--color-brand-alt-text);
}
.text-link img{
    filter: invert(1);
}
.bg-accent .text-link img{
    filter:unset !important;
}
#groups input{
    background-color: var(--color-card);
    border: 1px solid var(--color-card-border);
}
.tile, .venue-card{
    border:1px solid var(--color-card-border)
}
.btn.secondary.border{
    border: 1px solid var(--color-content-accent) !important;
    box-shadow: inset 0px 0px 0px 1px var(--color-content-accent) !important;
}
.btn.secondary.border:hover{
    outline: 2px solid var(--color-content-accent) !important;
    outline-offset: 2px;
}
footer.bg-secondary{
    background-color: var(--color-card);
}
nav .mobile-menu-btn .line{
    background-color: var(--color-content-accent);
}
nav #mob-menu.mob-menu{
    background-color: var(--color-content-bg);
}
.back-to-top{
    background-color: var(--color-card);
}
.back-to-top img{
    filter:invert(1);
}
.bg-accent .btn.secondary {
    background: var(--color-brand-1);
    border: 1px solid var(--color-brand-1);
}
.bg-accent .btn.secondary:hover{
    outline: 2px solid var(--color-brand-1);
    outline-offset: 2px;
}
.filter-button{
    border: unset;
}
.filter-button .filter-tick{
    background-color: var(--color-content-bg) !important;
}
.filter-button .filter-tick img{
    filter:unset !important;
}
.filter-button.active .filter-tick img{
    filter:invert(1) !important;
}