﻿:root {
    /* BASE WRAPPER VARIABLES ------------------------------------ */
    --site-full-width: 1800px;
    --section-max-width: 1440px;
    --content-max-width: 1440px;
    --site-padding-lr: 3rem;
    --site-padding: 20px;

    /* BASE GRID VARIABLES ------------------------------------ */
    --container-padding: 2rem;
    --max-width: 1440px;
    --gap: 3rem;
    --gap-tight: 2rem;
    --gap-tighter: 1.5rem;
    --setfixposcontent: 68px;
    --leftside-content-gap: 3rem;

    /* CONTENT BLOCK VARIABLES ------------------------------------ */
    --contentblockgap: 6rem;
    --contenttopspacer: 60px;
    --contentendspacer: 60px;
    --contenttopspacer-tight: 40px;
    --contentendspacer-tight: 40px;

    /* SUBANNER VARIABLES ------------------------------------ */
    --subbanner-height: 285px;
    --subbanner-height-tight: 185px;
    --subbanner-contentimg-height: 340px;

    /* HEADER VARIABLES ------------------------------------ */
    --header-h-full:  108px;  /* utility 32 + nav row 76 */
    --header-h-small:  80px;  /* utility 0  + nav row 80 */

    /* FONT SIZE VARIABLES ------------------------------------ */
    --wrap-heading-fsize: 44px;
    --wrap-heading-lheight: 1;

    --wrap-eyebrow-fsize: 18px;
    --wrap-eyebrow-lheight: 1;

    --section-p: 20px;
    --section-p-lheight: 1.4;

    --support-fsize: 20px;
    --support-lheight: 1.4;

    /* FONT SIZE VARIABLES ------------------------------------ */
    --img-radius: 12px;
    --card-radius: 12px;
	--button-radius: 50px;

    /* BRAND COLOR VARIABLES ------------------------------------ */

    /* ===== TWISTED MAC BRAND COLORS ===== */

	/* Orange - PANTONE 4010 C */
	--orange-tint-hue: 237, 143, 91;
	--orange-tint: #ED8F5B;      /* Tint 1  */

	--orange-hue: 231, 106, 36;
	--orange: #E76A24;           /* Core    */

	--orange-shade-hue: 116, 53, 18;
	--orange-shade: #743512;     /* Shade 2 */

	--orange-dark-hue: 58, 27, 9;
	--orange-dark: #3A1B09;      /* Shade 3 */

	/* Blue - PANTONE 2189 C */
	--blue-tint-hue: 64, 102, 122;
	--blue-tint: #40667A;        /* Tint 1  */

	--blue-hue: 0, 51, 78;
	--blue: #00334E;             /* Core    */

	--blue-shade-hue: 0, 26, 39;
	--blue-shade: #001A27;       /* Shade 2 */

	--blue-dark-hue: 0, 13, 20;
	--blue-dark: #000D14;        /* Shade 3 */

	/* Lite Blue - PANTONE 291 C */
	--lite-blue-tint-hue: 179, 215, 240;
	--lite-blue-tint: #B3D7F0;   /* Tint 1  */

	--lite-blue-hue: 153, 202, 235;
	--lite-blue: #99CAEB;        /* Core    */

	--lite-blue-shade-hue: 77, 101, 118;
	--lite-blue-shade: #4D6576;  /* Shade 2 */

	--lite-blue-dark-hue: 38, 51, 59;
	--lite-blue-dark: #26333B;   /* Shade 3 */

	/* Mid Blue - PANTONE 7692 C */
	--mid-blue-tint-hue: 64, 128, 165;
	--mid-blue-tint: #4080A5;    /* Tint 1  */

	--mid-blue-hue: 0, 85, 135;
	--mid-blue: #005587;         /* Core    */

	--mid-blue-shade-hue: 0, 43, 68;
	--mid-blue-shade: #002B44;   /* Shade 2 */

	--mid-blue-dark-hue: 0, 21, 34;
	--mid-blue-dark: #001522;    /* Shade 3 */


	/* Red - PANTONE 3516 C */
	--red-tint-hue: 232, 104, 76;
	--red-tint: #E8684C;         /* Tint 1  */

	--red-hue: 224, 54, 16;
	--red: #E03610;              /* Core    */

	--red-shade-hue: 112, 27, 8;
	--red-shade: #701B08;        /* Shade 2 */

	--red-dark-hue: 56, 14, 4;
	--red-dark: #380E04;         /* Shade 3 */


	/* Yellow - PANTONE 136 C */
	--yellow-tint-hue: 254, 206, 111;
	--yellow-tint: #FECE6F;      /* Tint 1  */

	--yellow-hue: 253, 189, 63;
	--yellow: #FDBD3F;           /* Core    */

	--yellow-shade-hue: 127, 95, 32;
	--yellow-shade: #7F5F20;     /* Shade 2 */

	--yellow-dark-hue: 63, 47, 16;
	--yellow-dark: #3F2F10;      /* Shade 3 */

	/* Cream */
	--cream-tint-hue: 255, 250, 240;
	--cream-tint: #FFFAF0;       /* Tint 1  */

	--cream-hue: 255, 247, 230;
	--cream: #FFF7E6;            /* Core    */

	--cream-shade-hue: 128, 124, 115;
	--cream-shade: #807C73;      /* Shade 2 */

	--cream-dark-hue: 64, 62, 58;
	--cream-dark: #403E3A;       /* Shade 3 */

    /* Body Text */
    --body-text-hue: 31, 37, 41;
    --body-text: #333333;
    --black-hue: 0, 0, 0;
    --white-hue: 255, 255, 255;
    --white: #ffffff; 
    --light-mode: #ffffff;
    --dark-mode: #000000;
    --form-border: #cccccc;

    /* FONT VARIABLES ------------------------------------ */
	--font-default: brandon-grotesque, sans-serif;
	--font-happy: "Happy Season", serif;
	--font-slab: campaign-slab, serif;
	--font-script: thirsty-script, cursive;

	/* INDUSTRY INC DISPLAY ------------------------------------ */
	--font-inc-base: industry-inc-base, sans-serif;
	--font-inc-3d: industry-inc-3d, sans-serif;
	--font-inc-bevel: industry-inc-bevel, sans-serif;
	--font-inc-bevel-fill: industry-inc-bevel-fill, sans-serif;
	--font-inc-cutline: industry-inc-cutline, sans-serif;
	--font-inc-detail: industry-inc-detail, sans-serif;
	--font-inc-detail-fill: industry-inc-detail-fill, sans-serif;
	--font-inc-in-n-out: industry-inc-in-n-out, sans-serif;
	--font-inc-inline: industry-inc-inline, sans-serif;
	--font-inc-inline-stroke: industry-inc-inline-stroke, sans-serif;
	--font-inc-outline: industry-inc-outline, sans-serif;
	--font-inc-stencil: industry-inc-stencil, sans-serif;
}

@font-face {
    font-family: "Happy Season";
    src: url("/fonts/happy-season.woff2") format("woff2"),
         url("/fonts/happy-season.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Happy Season";
    src: url("/Themes/Default/Content/fonts/happyseason-light.woff2") format("woff2"),
         url("/Themes/Default/Content/fonts/happyseason-light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Happy Season";
    src: url("/Themes/Default/Content/fonts/happyseason-regular.woff2") format("woff2"),
         url("/Themes/Default/Content/fonts/happyseason-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Happy Season";
    src: url("/Themes/Default/Content/fonts/happyseason-medium.woff2") format("woff2"),
         url("/Themes/Default/Content/fonts/happyseason-medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Happy Season";
    src: url("/Themes/Default/Content/fonts/happyseason-semibold.woff2") format("woff2"),
         url("/Themes/Default/Content/fonts/happyseason-semibold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Happy Season";
    src: url("/Themes/Default/Content/fonts/happyseason-bold.woff2") format("woff2"),
         url("/Themes/Default/Content/fonts/happyseason-bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Happy Season";
    src: url("/Themes/Default/Content/fonts/happyseason-extrabold.woff2") format("woff2"),
         url("/Themes/Default/Content/fonts/happyseason-extrabold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Happy Season";
    src: url("/Themes/Default/Content/fonts/happyseason-black.woff2") format("woff2"),
         url("/Themes/Default/Content/fonts/happyseason-black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}