/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/
    - Class name prefixes are influenced by Namespaces article - http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
        - I would usually drop the .c- namespace since everything is an inferred component unless prefixed otherwise BUT using the c- namespace makes it much easier to search and replace since classes are more unique. A good example is if you wanted to call a class .article. Replacing that would be a nightmare because you'd also run into article elements.
    - If other class name prefixes are used then they are based on microformats
    - Class relationships are based on BEM structure
    - Order of CSS influenced by ITCSS - https://twitter.com/itcss_io
    - Layout snippets inspired by https://smolcss.dev/
    - Where CSS groups include framework names such as WordPress or Genesis it means HTML/CSS in this group is based on these solid frameworks

    For more information open `readme.css`

*/
:root {
    /* GROUP VARIABLES -- SPACING
    =================================================== */
    --spacing-s-x-x: 0.25rem;
    --spacing-s-x: 0.45rem;
    --spacing-s: 0.8rem;
    --spacing-s-1: 1.1rem;
    --spacing-s-2: 1.35rem;
    --spacing-m: 1.5rem;
    --spacing-l: 1.8rem;
    --spacing-l-static: 1.8rem;
    --spacing-l-1: 2.5rem;
    --spacing-l-1-static: 2.5em;
    --spacing-l-2: min(11.5vw, 4.2rem);
    --spacing-l-2-horizontal: min(7vw, 4.2rem);
    /* Smaller value for mobile */
    /* e.g. >> Home news archive */
    --spacing-l-3: min(15vw, 4.8rem);
    --spacing-l-3-horizontal: var(--spacing-l-1);
    --spacing-l-4: min(18vw, 7rem);
    --spacing-l-4-static: 7rem;
    /* or */
    /* --spacing-l-4: min(25vw, 9.5rem); */
    /* --spacing-vh-s: min(18vw, 15vh); */
    /* After 'too much empty space' feedback */
    --spacing-vh-s: min(18vw, 11vh);
    --spacing-vh-m: 25vh;
    --button-spacing-vertical: 1.1rem;
    /* e.g. >> /contact */
    --button-spacing-horizontal: 3rem;
    /* GROUP VARIABLES -- LAYOUT -- CONSTRAINTS -- MAX
    =================================================== */
    /* From lowest to highest value */
    --max-width-reading-short: 22rem;
    /* e.g. >> Home > hero columns on iPad */
    /* --max-width-reading: 35rem; */
    /* e.g. >> /legal-and-privacy */
    --max-width-reading: 45rem;
    /* e.g. >> /library */
    --max-width-reading-long: 41rem;
    --max-width-panel: 42rem;
    /* e.g. >> /online-gaming-platform-icore */
    --max-width-reading-columns: 53rem;
    /* --max-width-title: 53rem; */
    /* e.g. >> /about-us Headline */
    --max-width-title: 61rem;
    --max-width-1: calc(var(--max-width-2) - var(--spacing-l) * 2);
    --max-width-2: 82rem;
    --max-width-3: 103rem;
    /* GROUP VARIABLES -- LAYOUT -- Z-INDEX
    =================================================== */
    --z-index-below-pseudo-arrows: -2;
    --z-index-below-body: -1;
    --z-index-above-body: 1;
    --z-index-nav: 2;
    --z-index-cookie-popup: 3;
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME
    =================================================== */
    /* Dark to light */
    /* #EC1F30 */
    --colour-red: hsl(355deg 84% 52%);
    --colour-focus: var(--colour-red);
    --colour-red-hsl: 355deg 84% 52%;
    --colour-purple-retro: hsl(290deg 100% 25%);
    --colour-purple-retro-hsl: 290deg 100% 25%;
    /* #8635F7 */
    --colour-purple: hsl(265deg 92% 59%);
    --colour-purple-hsl: 267deg 92% 59%;
    --colour-blue: hsl(188deg 65% 48%);
    --colour-blue-grey: hsl(204deg 12% 76%);
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- GRAYSCALE
    =================================================== */
    --colour-black: black;
    /* AA compliant as grey text on white background. AAA is 595959 */
    --colour-grey-reading: hsl(0deg 0% 46%);
    --colour-grey: hsl(0deg 0% 70%);
    /* e.g. Mega menu border */
    --colour-grey-light-1: hsl(0deg 0% 86%);
    --colour-grey-light-2: hsl(0deg 0% 96%);
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME -- GRADIENTS
    =================================================== */
    --colour-gradient-red-dark: linear-gradient(135deg, var(--colour-red) 0%,var(--colour-black) 50%);
    --colour-gradient-shade: linear-gradient(35deg, hsl(0deg 0% 0% / 40%) 0%, transparent 100%);
    /* GROUP VARIABLES -- DECORATION -- TEXT -- FONTS
    =================================================== */
    /* 'gibson' is the offline version */
    --font-family-main: canada-type-gibson, gibson, sans-serif;
    --font-family-headline: canada-type-gibson, gibson, sans-serif;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- STYLES
    =================================================== */
    --font-family-main-style-1: normal;
    --font-family-main-style-2: italic;
    --font-family-headline-style-1: normal;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- WEIGHTS
    =================================================== */
    --font-family-main-weight-normal: 300;
    --font-family-main-weight-medium: 500;
    --font-family-main-weight-strong: 700;
    --font-family-headline-weight-normal: 700;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES
    =================================================== */
    /* Optimise line-height for reading */
    --font-size-reading-line-height: 1.5;
    
    /* Custom, 0.707em is too small */
    /* e.g. >> News */
    --font-size-s-x: 0.82em;

    /* Based on Perfect Fifth - https://type-scale.com/ */
    --font-size-s-x-x: 0.667rem;

    /* Outside type scale */
    --font-size-s: clamp(calc(1.3em * 0.85), 4vw, 1.4em);
    /* e.g. >> /content-distribution */
    --font-size-s-line-height: 1.3;
    /* -- */
    --font-size-s-1: clamp(1.2em, 4vw, 1.5em);
    --font-size-s-1-line-height: 1.35;

    /* e.g. >> Home > About Us text */
    --font-size-m: clamp(2.05em * 0.8, 5.9vw, 2.05em);
    /* e.g. >> /news/index news heading */
    --font-size-m-line-height: 1.18;
    --font-size-l: clamp(3.375em * 0.8, 5.9vw, 3.375em);
    /* e.g. >> /card-and-table-games */
    --font-size-l-line-height: 1.09;

    /* e.g. >> Home > Our Partners on iPhone 375px */
    --font-size-l-1: clamp(5.063em * 0.725, 6vw, 5.063em);
    /* e.g. >> /products/icore/online-gaming-platform */
    --font-size-l-1-headline: clamp(5.063em * 0.625, 8vw, 5.063em);
    --font-size-l-1-line-height: 1;
    --font-size-l-2: clamp(calc(7.594em * 0.55), 15vw, 7.594em);
    /* e.g. >> Home > Image with Text component */
    --font-size-l-2-line-height: 0.88;
    /* GROUP VARIABLES -- DECORATION -- ICONS -- SIZES
    =================================================== */
    /* e.g. >> /library */
    --icon-size-s-x: 1rem;
    /* e.g. Footer > social icons */
    --icon-size-s: 1.5rem;
    /* e.g. >> /library */
    --icon-size-m: 3.5rem;
    /* e.g. >> /about-us */
    --icon-size-l-1: 4.75rem;
    --icon-size-l-2: 6.75rem;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- OTHER
    =================================================== */
    --letter-spacing-s: 1px;
    /* Header nav */
    --letter-spacing-m: 1.8px;
    /* e.g. >> /about-us > eyebrow heading */
    --letter-spacing-l: 7px;
    /* GROUP VARIABLES -- DECORATION -- BORDER RADIUS
    =================================================== */
    --border-radius-s: 3px;
    --border-radius-m: 5px;
    --border-radius-l: 10px;
    /* GROUP VARIABLES -- DECORATION -- SEPARATORS -- BOX SHADOWS - ordered from light to dark variants
    =================================================== */
    --box-shadow-clean:
        0 2px 5px rgba(0, 0, 0, 0.04),
        0 2px 3px rgba(0, 0, 0, 0.07),
        0 1px 0 rgba(0, 0, 0, 0.08);
    --box-shadow-bold: 4px 4px 0px hsl(0deg 0% 0%);
    --box-shadow-s-light-b-3: 0 10px 9px hsla(0, 0%, 0%, 0.06);
    --box-shadow-s-focus: 7px 15px 40px hsla(0, 0%, 0%, 0.06), -7px 15px 40px hsla(0, 0%, 0%, 0.06);
    /* GROUP VARIABLES -- ANIMATIONS -- TRANSITIONS
    =================================================== */
    /* Molecules > Pagination > Perch > (Cross Pollinated) */
    --animation-transition-fast: all 0.15s ease-in-out 0s;
    /* GROUP VARIABLES -- OTHER
    =================================================== */
    --header-height: min(11.5vh, 6em);
    --nav-width: 19em;
    --filter: brightness(200%) contrast(125%);
}
/* --mq-root-variable-adjustments-1 */
@media (min-width: 450px) {
    :root {
        /* GROUP VARIABLES -- SPACING
        ===================================================  */
        --spacing-l: 3rem;
        --spacing-l-1: 3.5rem;
    }
}
/* --mq-root-variable-adjustments-2 */
@media (min-width: 730px) {
    :root {
        --spacing-m: 1.75rem;
        --spacing-l-3-horizontal: var(--spacing-l-3);
    }
}
/* --mq-text-bump-reduce-for-lower-resolution-displays */
/* Notes...

- Bear in mind users on smaller laptops do _not_ see things how you see things at a window width of 1440px. You can check exactly how they see it by going to System Preferences > Displays > Scaled
- See Targeting DPI in my wiki for more info

*/
/* --mq-slide-columns-1-after */
@media (min-width: 1024px) {
    :root {
        --font-size-paragraph-bump: 1.09rem;
    }
}
/* --mq-root-variable-adjustments-smaller-laptops-after to --mq-root-variable-adjustments-larger-laptops-before */
@media (min-width: 1025px) and (max-width: 1440px) {
    :root {
        /* Decrease */
        --font-bump: -0.09em;
        /* and possibly... */
        /* --font-size-l-4: calc(9.313em + 0.75em)!important; */
    }
}
/* --mq-text-bump-1-after */
@media (min-width: 1670px) {
    :root {
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
        =================================================== */
        /* Increase */
        --font-bump: 0.115vw;
    }
}
/* --mq-text-bump-2-after */
@media (min-width: 1800px) {
    :root {
        /* GROUP VARIABLES -- SPACING
        =================================================== */
        /* Decrease */
        --spacing-vh-m: 22vh;
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
        =================================================== */
        /* Increase */
        --font-bump: 0.15vw;
    }
}
/* --mq-text-bump-3-after */
@media (min-width: 2300px) {
    :root {
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
        =================================================== */
        /* Increase */
        --font-bump: 0.2vw;
    }
}




/* purgecss start ignore */
/* GROUP RESET / FRAMEWORK - Taken from html5boilerplate.com
=================================================== */
/* These are recommended rules so we don't want to lint them */
audio,canvas,iframe,img,svg,video {
    vertical-align: middle;
}
/* GROUP RESET / FRAMEWORK / NORMALISE - 2020-03-09 - https://necolas.github.io/normalize.css
=================================================== */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/* GROUP ELEMENTS / FRAMEWORK
=================================================== */
* {
    /* Prevent flickering.
    When you click a link or a button or a div that has a click function on it, 
    usually a grey box flickers. The below prevents that. Source: http://goo.gl/MZ4Dr5 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
    /* Don't do *::before, *::after - this has caused me performance problems before with flickering images */
    box-sizing: border-box;
}

/* =JFG. HTML default e.g. when we are separating lines with <br> like addresses in proposals */
html {
    /* Consider disabling this if you have pages that require lots of cmd + f https://css-tricks.com/downsides-of-smooth-scrolling/ */
    scroll-behavior: smooth;
    font-size: calc(1em + var(--font-bump));
    /* Opinion on this will differ depending on the font you choose. Do not carpet bomb line height with a * selector though */
    line-height: 1.5;
    /* Https://web.dev/accent-color/ */
    accent-color: var(--colour-red);
}

body {
    /* https://app.typographychecklist.com/ - 23. Use standard ligatures but avoid using discretionary ligatures in body text */
    font-feature-settings: "kern", "liga", "clig", "calt";
    font-family: var(--font-family-main);
    font-weight: var(--font-family-main-weight-normal);
    /* https://css-tricks.com/scrollbar-reflowing/ */
    scrollbar-gutter: stable both-edges;
}

/* Prevent images stretching too much */
/* =JFG. Use display:inline-block to prevent white space (read full answers here...) http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image */
img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* ::selection {
    background: light color;
    color: dark color;
} */

/* Reset */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
    margin-block-end: 0;
    margin-block-start: 0;
}

/* Reset */
figure {
    margin-inline-start: 0;
    margin-inline-end: 0;
}

figure img {
    /* Push the caption away from the image */
    margin-block-end: var(--spacing-s);
}

ul {
    padding-inline-start: 0;
}

li {
    padding-block-end: var(--spacing-s-x);
}

dl,
dt,dd,
th,
td {
    padding-block-end: var(--spacing-s);
}

p {
    padding-block-end: var(--spacing-s-1);
}

p,
ol,
ul {
    line-height: var(--font-size-reading-line-height);
}

main p,
main ol,
main ul {
    font-size: var(--font-size-paragraph-bump);
}

/* Nested lists */
ol ol,
ol ol li:last-child,
ul ul,
ul ul li:last-child {
    padding-block-end: 0;
}

p + ul {
    padding-block-start: var(--spacing-s);
}

strong {
    /* e.g. >> Home > About Us section */
    font-weight: var(--font-family-main-weight-medium);
}

/* Notes...

    Source - http://html5doctor.com/cite-and-blockquote-reloaded/

*/
/* HTML Example...

    <blockquote>
        <p>As my fellow HTML5 Doctor, Oli Studholme has showed, citations almost always appear as part of the quotation – it’s highly conventional.</p>
        <footer>
            — <cite><a href="http://www.brucelawson.co.uk/2013/on-citing-quotations-again/">Bruce Lawson</a></cite>
        </footer>
    </blockquote>

*/
blockquote {
    margin-inline-start: 0;
    margin-block-end: var(--spacing-m);
    padding-inline-start: var(--spacing-m);
    padding-block-start: var(--spacing-m);
    padding-block-end: var(--spacing-s);
}

blockquote p {
    quotes: "“" "”" "‘" "’";
}

blockquote p::before {
    content: open-quote;
}
blockquote p::after {
    content: close-quote;
}

blockquote cite {
    font-style: var(--font-family-main-style-1);
}

blockquote {
    border-inline-start: 3px solid var(--colour-red);
}
/* purgecss end ignore */




/* GROUP ELEMENTS / FRAMEWORK / HEADINGS
=================================================== */
h1,
.h1,
h1 a,
.h1 a,
h2,
.h2,
h2 a,
.h2 a,
h3,
.h3,
h3 a,
.h3 a {
    font-family: var(--font-family-headline);
    font-style: var(--font-family-headline-style-1);
    font-weight: var(--font-family-headline-weight-normal);
    /* https://app.typographychecklist.com/ 91 - Use discretionary ligatures and swashes in headlines */
    font-feature-settings: "kern", "liga", "clig", "calt", "dlig", "swsh";
    /* Default */
    /* text-transform: uppercase; */
    /* e.g. >> /products/score/connect > hero text */
    color: inherit;
    text-decoration-color: inherit;
}

h4,
.h4,
h4 a,
.h4 a {
    font-family: var(--font-family-headline);
    font-style: var(--font-family-headline-style-1);
    font-weight: var(--font-family-headline-weight-normal);
}

/* --- */

h1,
.h1 {
    font-size: var(--font-size-l-2);
    line-height: var(--font-size-l-2-line-height);
}

h2,
.h2 {
    /* e.g. >> Home > Our Partners */
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-line-height);
}

h3,
.h3 {
    /* e.g. >> Home > Latest News */
    font-size: var(--font-size-m);
    line-height: var(--font-size-m-line-height);
}

h4,
.h4 {
    font-size: var(--font-size-s-1);
    line-height: var(--font-size-s-1-line-height);
}

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

h6,
.h6 {
    font-size: var(--font-size-s-x-1);
    line-height: var(--font-size-s-x-1-line-height);
}
/* GROUP ELEMENTS / FRAMEWORK / HEADINGS / HIGH PRIORITY / VERTICAL SPACING
=================================================== */
h1,
.h1 {
    /* e.g. >> /about-us */
    /* e.g. >> /news-and-articles/comtrade-gaming-announces-first-us-platform-deal-with-g3-esports */
    padding-block-end: var(--spacing-l-2);
}

h2,
.h2 {
    /* e.g. >> /resource-library/how-genting-alderney-adopted-icore */
    padding-block-end: var(--spacing-l);
}

* + h1,
* + .h1,
/* e.g. Objects > Counters */
* > h1,
* > .h1,
* + h2,
* + .h2,
article + article {
    padding-block-start: var(--spacing-l);
}
/* GROUP ELEMENTS / FRAMEWORK / HEADINGS / LOW PRIORITY / VERTICAL SPACING
=================================================== */
h3,
.h3 {
    /* e.g. >> Home > News Archive */
    padding-block-end: var(--spacing-m);
}

/* e.g. >> Home */
h3.u-line-clamp.c-news-archive__title {
    padding-block-end: 0;
    margin-block-end: var(--spacing-m);
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    padding-block-end: var(--spacing-s-x-x);
}

* + h3,
* + .h3,
/* e.g. p followed by a div followed by an h3 */
* > h3,
* > .h3,
* + h4,
* + .h4,
/* e.g. p followed by a div followed by an h4 */
* > h4,
* > .h4 {
    padding-block-start: var(--spacing-s);
}
/* GROUP ELEMENTS / FRAMEWORK / HEADINGS / EXCEPTIONS / VERTICAL SPACING
=================================================== */
ul + h2,
ul + .h2 {
    padding-block-start: var(--spacing-s);
}

h1 + h2,
h1 + .h2,
.h1 + .h2,
h2 + h3,
hr + * {
    padding-block-start: 0;
}




/* GROUP ELEMENTS / FRAMEWORK / MAIN
=================================================== */
main:focus {
    outline: none;
}




/* GROUP ELEMENTS / FRAMEWORK / NAV
=================================================== */
/* Based on default WordPress theme CSS, but modified to improve accessibility */
nav {
    clear: both;
    display: block;
    width: 100%;
    font-weight: var(--font-family-main-weight-medium);
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    padding-inline: 0;
}

/* Disabled because it prevents positioning of the mega menu */
/* nav li {
    position: relative;
} */




/* GROUP ANIMATIONS
=================================================== */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.u-animated-fade-in {
    animation-name: fade-in;
    animation-duration: 1.5s;
}

/* e.g. use for a component that comes just after u-animated-fade-in */
.u-animated-fade-in-slow {
    animation-name: fade-in;
    animation-duration: 2.5s;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.u-animated-fade-in-up {
    animation-name: fade-in-up;
    animation-duration: 0.8s;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes wipe-out-up {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 100% 0);
  }
}

@keyframes wipe-in-down {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes slide-in-left {
    0% {
        /* Changed from Dan Eden. Does not use translate3D */
        transform: translateX(100%);
        visibility: visible;
    }

    100% {
        transform: translateX(0%);
    }
}
@keyframes slide-out-right {
    0% {
        /* Changed from Dan Eden. Does not use translate3D */
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}




/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV
=================================================== */
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MODIFIER CLASSES
=================================================== */
/* Notes...

    Examples of nav modifier classes
    ------------

    .js__collapsedUntilNavOpened
    You almost always want this. If we have JS then the nav is hidden until toggled open.
    The menu appears on larger screens

*/
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / SPACING
=================================================== */
.js--navIsOpen .c-nav-mobile-button {
    margin-bottom: 0;
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / CURRENT PAGE
=================================================== */
/* Ancestors and Parents of Current Page */
/* nav */
.current-menu-ancestor > a span {
    color: rgba(var(--colour-turquoise-rgb),0.5);
}




/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / (CROSS POLLINATED)
=================================================== */
/* HTML Example...

    <button class="c-nav-mobile-button u-js-only">
        <span class="c-nav-icon">
            <!-- Animate this when closed -->
            include 'img/svg/nav.php';
        </span>
    </button>

*/
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / BUTTON
=================================================== */
/* purgecss start ignore */
/* button*/
.c-nav-mobile-button {
    padding: var(--spacing-m);
    /* =JFG. Cancel any default button value */
    margin-inline-end: 0;

    font-size: 1.7em;
    /* Make sure it's dead center */
    line-height: 0;

    background: white;
    border-radius: 50px;
}

/* --mq-nav-opens-before */
@media (max-width: 1249px) {
    .c-nav-mobile-button,
    .c-site-header__nav {
        position: fixed;
        z-index: var(--z-index-nav);
    }

    .c-nav-mobile-button {
        right: var(--spacing-s-x);
    }

    .c-site-header__nav {
        right: calc(var(--spacing-l) - 1em);
    }

    .c-site-header__nav {
        top: var(--header-height);
    }

    /* Not while the mega menu is closing otherwise you get animation glitches */
    .js--navHasBeenOpened:not(.js--megaMenuIsClosing) .c-site-header__nav {
        animation: 0.9s cubic-bezier(.25, 1, .30, 1) wipe-out-up both;
    }
    /* Not while the mega menu is closing otherwise you get animation glitches */
    .js--navIsOpen:not(.js--megaMenuIsClosing) .c-site-header__nav {
        animation: 0.9s cubic-bezier(.25, 1, .30, 1) wipe-in-down both;
    }
}

/* Custom to --mq-nav-full-before */
@media (min-width: 1024px) and (max-width: 1249px) {
    .c-nav-mobile-button {
        /* Optically aligned */
        right: calc(var(--spacing-m) + 0.35em);
    }
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / CLOSED STATE
=================================================== */
/* If we have JS then this is hidden until toggled open. The menu appears on larger screens */
/* for nav.js__collapsedUntilNavOpened */
/* --mq-nav-opens-before */
@media (max-width: 1249px) {
    .js:not(.js--navHasBeenOpened) .js__collapsedUntilNavOpened {
        display: none;
    }
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / OPEN STATE
=================================================== */
/* Since we're initially setting an opacity we should make sure animation is supported before doing this */
@supports (animation-name: fade-in) {
    /* --mq-nav-opens-before */
    @media (max-width: 1249px) {
        .js .c-site-header__nav li {
            opacity: 0;
        }

        .js--navIsOpen .c-site-header__nav li {
            animation-name: fade-in;
            animation-duration: 0.9s;
            animation-fill-mode: forwards;
        }
        /* Staggered animation */
        .c-site-header__nav li {
            /* Default i.e. after 4th */
            animation-delay: calc(0.025s * 8);
        }
        .c-site-header__nav li:nth-child(1) {
            /* Need to give it at least a tiny bit (not 0s) otherwise blips on iOS */
            animation-delay: calc(0.025s * 1);
        }
        .c-site-header__nav li:nth-child(2) {
            animation-delay: calc(0.025s * 2);
        }
        .c-site-header__nav li:nth-child(3) {
            animation-delay: calc(0.025s * 4);
        }
        .c-site-header__nav li:nth-child(4) {
            animation-delay: calc(0.025s * 6);
        }
    }
}

.js--navIsOpen .js__collapsedUntilNavOpened {
    display: block;
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / OPEN STATE / SVG ANIMATIONS
=================================================== */
.c-nav-line {
    transition: 0.25s ease-in-out;
    transform-origin: center;
}

.js--navIsOpen .c-nav-line--1 {
    opacity: 0;
    transition: 0.1s;
}

.js--navIsOpen .c-nav-line--2 {
    transform: rotate(45deg) translate(0.5px);
}

.c-nav-line--3 {
    opacity: 0;
}

.js--navIsOpen .c-nav-line--3 {
    opacity: 1;
}

.js--navIsOpen .c-nav-line--3 {
    transform: rotate(-45deg) translate(-0.5px);
}

.js--navIsOpen .c-nav-line--4 {
    opacity: 0;
}
/* purgecss end ignore */




/* GROUP COMPONENTS / SCREENSHOT
=================================================== */
/* Notes...

    Screenshot of product screen e.g. >> /products/gcore/card-and-table-games

*/
.c-screenshot {
    border-radius: var(--border-radius-l);
}




/* GROUP ELEMENTS / FRAMEWORK / SVGs
=================================================== */
/* purgecss start ignore */
/* https://twitter.com/andybelldesign/status/1098915626050117633 */
:is(svg, [src*=".svg"]) {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
/* purgecss end ignore */

:is(h1, h2, h3, h4, h5, h6, p) svg {
    vertical-align: baseline;
    margin-right: var(--spacing-s-x);
}

/* Notes...

    - use a span to ensure first-child/last-child selector works e.g.

    <div class="btn">
        <a href="">
            <span>Some text</span>
            <svg />
        </a>
    </div>

*/
a > svg:first-child:not(:last-child) {
    margin-right: var(--spacing-s-2);
}

a > svg:last-child:not(:first-child) {
    margin-left: var(--spacing-s-2);
    margin-right: 0;
}

.c-btn a > svg:first-child:not(:last-child) {
    margin-right: var(--spacing-s);
}

.c-btn a > svg:last-child:not(:first-child) {
    margin-left: var(--spacing-s);
    margin-right: 0;
}

.c-btn svg {
    font-size: 1.1em;
}




/* GROUP ELEMENTS / FRAMEWORK / TEXT / LINK STYLES {/ LINKS }
=================================================== */
/* Notes...

    - Link styles are stored as group selectors rather than scattered, since we have multiple properties here.
    - Do not put transitions on all links, it makes keyboard navigation feel slower. Instead, use transition animations on an individual basis e.g. skip-to-content

*/

/* Default */
a,
button {
    text-decoration-skip-ink: auto;
    /* e.g. >> Home > News Archive */
    color: var(--colour-red);
    font-weight: var(--font-family-main-weight-medium);
    text-underline-position: under;
    /* e.g. >> /products/score/gaming-systems-management > Related tab link colour */
    text-decoration-color: hsla(var(--colour-red-hsl) / 20%);
}

/* .u-link-style-1 a, */
/* Components > Framework > Entry > Entry Content */
.s-entry-content a {
    text-decoration: none;
    /* color: var(--colour-turquoise); */
}
/* GROUP ELEMENTS / FRAMEWORK / TEXT / LINK STYLES {/ LINKS} / ACCESSIBILITY / FOCUS
=================================================== */
/* .u-link-style-custom-1:focus a, */
a:focus,
summary:focus,
.c-btn a:focus,
button:focus,
[type="submit"]:focus,
/* Elements > Framework > Forms */
[type="text"]:focus,
[type="email"]:focus,
[type="tel"]:focus,
[type="url"]:focus,
[type="file"]:focus,
textarea:focus,
.c-site-header__nav .c-mega-menu :is(button, a):focus {
    outline: 4px solid var(--colour-red);
}

.c-site-header__nav :is(button, a):focus {
    outline-color: white;
}

.c-nav-mobile-button:focus svg {
    outline: none;
}

/* Elements > Framework > Forms */
[type="text"]:focus,
[type="email"]:focus,
textarea:focus {
    /* Light colour here */
    background: seashell;
}

p a:focus {
    /* Offset for text */
    outline-offset: 5px;
}

nav :is(a, button):focus {
    /* Increase */
    outline-offset: 10px;
    border-radius: 0;
}

/* Mega Menu */
.c-site-header__nav .c-mega-menu :is(button, a):focus {
    outline-offset: 0;
}
/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / TEXT / LINK STYLES {/ LINKS} / ACCESSIBILITY / FOCUS -- remove for mouse
=================================================== */
/* purgecss start ignore */
/* Notes...

    Remove Focus Styles for Mouse Users
    -----------------------------------
    - You can use https://github.com/WICG/focus-visible to cancel focus styles for mouse users
    [1] Add it like this - <script src="js/focus-visible.js" async></script>

*/
/* Native for browsers that support it - https://caniuse.com/#search=focus-visible
https://twitter.com/LeaVerou/status/1045836563505188867 */
:focus:not(:focus-visible),
:focus:not(:focus-visible) * {
    outline: none!important;
}
/* purgecss end ignore */
/* GROUP ELEMENTS / FRAMEWORK / TEXT / LINK STYLES {/ LINKS} / ACCESSIBILITY / HOVER
=================================================== */
a:hover {
    text-decoration-color: hsla(var(--colour-red-hsl) / 50%);
}

/* Notes...

    - Use "u-link-style-custom" prefix then these are pretty much rare/1 off
    - Still include them in this group so we can see all link styles for easy maintenance

*/
.s-entry-content a:hover,
.u-link-style-custom-1:hover a {
    color: var(--colour-grey-reading);
}




/* GROUP ELEMENTS / IFRAMES / RESPONSIVE VIDEO
=================================================== */
/* Notes...

    - Responsive video wrapper
    - Source - https://css-tricks.com/fluid-width-video/

*/
/* HTML Example...

    <div class="o-responsive-video"> <-- Used to handle max-width
        <div class="o-responsive-video__inner-wrapper">
            iframe or video element

*/
.o-responsive-video {
    max-width: var(--max-width-1);
    margin-left: auto;
    margin-right: auto;
    padding-block: var(--spacing-vh-s);
}

.o-responsive-video__inner-wrapper {
    position:relative;
    
    margin-left: auto;
    margin-right: auto;
    padding-block-start: 56.25%;
}

.o-responsive-video__inner-wrapper iframe,
.o-responsive-video__inner-wrapper video {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

/* Custom */
@media (min-width: 1200px) {
    .o-responsive-video {
        padding-inline-start: var(--spacing-l);
        padding-inline-end: var(--spacing-l);
    }
}

.o-responsive-game-video {
    padding-block: var(--spacing-m);
}

@media (min-width: 1200px) {
    .o-responsive-game-video {
        padding-inline-start: 0;
        padding-inline-end: 0;
    }
}


/* GROUP PLUGIN / CLOUDFLARE TURNSTILE
=================================================== */
/* Notes...

	- URL example: /get-more-info

*/
/* purgecss ignore */
.cf-turnstile iframe {
    width: 100%!important;
    margin-block-start: var(--spacing-s-2);
}




/* GROUP OBJECTS / ICON WITH TEXT
=================================================== */
/* HTML Example...

    <div class="o-icon-with-text">
        <img src="/img/svg/phone.svg" alt="phone" />
        <a href="tel://+380681605200">+38 (0) 6 81 60 5200</a>
    </div>
    <div class="o-icon-with-text">
        <img src="/img/svg/email.svg" alt="phone" />
        <span><a href="mailto:gaming@comtrade.com">gaming@comtrade.com</a></span>
    </div>


*/
/* e.g. /contact */
.o-icon-with-text {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
}




/* GROUP OBJECTS / IMAGE WITH TEXT
=================================================== */
/* Notes...

    e.g. Image used with step counters on /online-gaming-platform-icore.php

*/
/* HTML Example...

    <div class="o-image-with-text o-image-with-text--leaning">
        <div class="o-image-with-text__image">
            <img/>
        </div>
        <div class="o-image-with-text__text">
            Some text or components here
        </div>
   </div>

*/
/* Modifiers...

    .o-image-with-text--reversed <-- flip
    .o-image-with-text--leaning <-- left-leaning e.g. when the right-hand side has steps
    .o-image-with-text__image--flush-outer <-- left image e.g. /gcore-game-engine

*/
.o-image-with-text {
    position: relative;
    /* e.g. >> /mobile-games */
    max-width: var(--max-width-2);
    margin-inline: auto;
    /* e.g. >> /online-gaming-platform-icore */
    /* Above u-dots-motif */
    z-index: var(--z-index-above-body);

    display: grid;
    row-gap: var(--spacing-l);

    /* e.g. >> /mobile-games */
    padding-inline: var(--spacing-l);
}

.o-image-with-text__image {
    display: grid;
    justify-content: center;
    align-items: center;
    /* e.g. >> /card-and-table-games */
    gap: var(--spacing-l);
}

.o-image-with-text__text > p {
    /* When it's not in a .c-step e.g. >> /gcore-game-engine */
    max-width: var(--max-width-reading-short);
}

.o-image-with-text__image :is(img, picture) {
    max-width: min(100%, 25rem);
}

/* e.g. >> /mobile-games */
.o-image-with-text__image--flush-outer,
.o-image-with-text--reversed .o-image-with-text__image--flush-inner {
    justify-content: start;
}

/* e.g. >> /mobile-games */
.o-image-with-text--reversed .o-image-with-text__image--flush-outer {
    justify-content: end;
    justify-items: end;
}

[class*="o-image-with-text__image--flush-"] :is(img, picture) {
    /* e.g. >> /gcore-game-engine */
    max-width: min(100%, 33rem);
}

/* Custom */
@media (max-width: 1023px) {
    .o-image-with-text__text {
        display: grid;
        place-items: center;
    }
}

/* Custom */
@media (min-width: 1024px) {
    .o-image-with-text {
        grid-template-columns: 1fr 1fr;
    }

    .o-image-with-text__text {
        /* In case there is no .o-image-with-text__image */
        /* e.g. >> /gcore-game-engine */
        grid-column-start: 2;
    }

    .o-image-with-text--leaning {
        /* e.g. >> /online-gaming-platform-icore */
        grid-template-columns: 0.825fr 1fr;
    }

    .o-image-with-text--reversed .o-image-with-text__image {
        order: 2;
        grid-column: 2 / 3;
    }

    .o-image-with-text--reversed  .o-image-with-text__text {
        order: 1;
        grid-column: 1 / 2;
    }
}




/* GROUP OBJECTS / FRAMEWORK / (NON CORE) / SLIDE
=================================================== */
/* Notes...

	- Used to introduce hero-like text, occupying most of the screen vertically
	- Use an additional component class to handle the decoration

*/
/* HTML Example...

    .o-slide

*/
/* Modifiers...

    .o-slide--full-width <-- needed for .c-logos
    .o-slide--compressed <-- compressed e.g. /about-us, /contact
    .o-slide--compressed-t-1 <-- compressed top e.g. /get-more-info
    .o-slide--compressed-t-2 <-- compressed top more
    .o-slide--compressed-b-1 <-- compressed bottom e.g. /library
    .o-slide--compressed-b-2 <-- compressed bottom more e.g. /about-us
    .o-slide--compressed-b-totally <-- compressed bottom none e.g. /crm-for-casino-operators
    .o-slide--compressed-followed-by-pulled-up-component <-- compressed e.g. /about-us

*/
/* GROUP OBJECTS / FRAMEWORK / (NON CORE) / SLIDE / SPACING
=================================================== */
.o-slide {
    padding-block-end: var(--spacing-vh-s);
    padding-block-start: var(--spacing-vh-s);
}

.o-slide.u-logomark-motif {
    margin-block-start: var(--spacing-vh-l);
}

.o-slide .o-hero-buttons {
    /* So everything is still centered */
    padding-block-end: 0;
}

.o-slide > * {
    /* e.g. >> /gs2-protocol-stacks */
    padding-block-end: var(--spacing-l-2);
}

.o-slide > *:last-child {
    /* e.g. when marketing-text is at the bottom of a slide */
    padding-block-end: 0;
}

.o-slide--compressed,
.o-slide--compressed-followed-by-pulled-up-component {
    padding-block: var(--spacing-l-4);
}

.o-slide--compressed-followed-by-pulled-up-component {
    /* e.g. >> /about-us */
    padding-block-end: calc(var(--spacing-vh-s) + var(--spacing-l-1));
}

.o-slide--compressed-t-none {
    /* e.g. >> /products/icore/crm-for-casino-operators */
    padding-block-start: 0;
}

.o-slide--compressed-t-1 {
    /* e.g. >> /get-more-info */
    padding-block-start: var(--spacing-l-3);
}

.o-slide--compressed-t-2 {
    /* e.g. >> /score-g2s-and-s2s-protocol-stacks */
    padding-block-start: var(--spacing-m);
}

.o-slide--compressed-b-1 {
    padding-block-end: var(--spacing-l-4);
}

.o-slide--compressed-b-2 {
    padding-block-end: var(--spacing-l-2);
}

.o-slide--compressed-b-3 {
    /* e.g. >> /news-and-articles */
    padding-block-end: var(--spacing-m)!important;
}

.o-slide--compressed-b-totally {
    padding-block-end: 0!important;
}




/* GROUP OBJECTS / FRAMEWORK / (NON CORE) / HERO BUTTONS { / BUTTON HERO}
=================================================== */
/* Notes...

    - Used to separate buttons in a blocked space

*/

/* Modifiers...

    .o-hero-buttons--left <- align left e.g. you might use this for hero buttons below a map
    .o-hero-buttons--compressed-b

*/

/* HTML Example...

    <div class="o-hero-buttons">
        <div class="c-btn">
            <a href="">
                Some button
            </a>
        </div>
    </div>

*/
/* Ideally, once gap is supported */
.o-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--spacing-m);
}

.o-hero-buttons {
    padding: var(--spacing-l-3) var(--spacing-l-1);
    text-align: center;
}

.o-hero-buttons .c-btn {
    margin-inline-end: 0;
}

.o-hero-buttons--left {
    justify-content: flex-start;
}

/* --mq-max-width-reading-before */
@media (max-width: 37em) {
    .o-hero-buttons {
        text-align: left;
        padding-inline-start: var(--spacing-l);
    }
}
/* GROUP OBJECTS / FRAMEWORK / (NON CORE) / HERO BUTTONS { / BUTTON HERO} / SPACING MODIFICATIONS
=================================================== */
.o-hero-buttons--compressed-b,
/* e.g. >> Home */
section > .o-hero-buttons:last-child {
    padding-block-end: 0;
}

.o-hero-buttons + h2 {
    padding-block-start: var(--spacing-s);
}

h2 + .o-hero-buttons {
    /* e.g. >> /products/icore/online-gaming-platform */
    padding-block-start: 0;
}

.s-entry-content .o-hero-buttons {
    padding: var(--spacing-l) 0; /* e.g. >> /about-us/compliance-and-ethics */
}




/* GROUP OBJECTS / DOUBLE COLUMNS
=================================================== */
/* Notes...

	- e.g. Used inside .o-image-with-text >> /mobile-games
	- Double columns on higher MQs

*/
/* HTML Example...

    .o-double-columns
        .o-double-columns__column

*/
/* GROUP OBJECTS / DOUBLE COLUMNS / LAYOUT
=================================================== */
.o-double-columns {
    display: grid;
    /* Prevent overflow on screens less than px value */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    column-gap: var(--spacing-l);
}

.o-double-columns__column {
    /* e.g. >> /card-and-table-games */
    max-width: 23rem;
}
/* GROUP OBJECTS / DOUBLE COLUMNS / SPACING
=================================================== */
.o-double-columns :is(h2, h3) {
    /* Decrease */
    padding-block-end: var(--spacing-m);
}

/* Custom */
@media (max-width: 1599px) {
    .o-double-columns__column + .o-double-columns__column img:only-child {
        /* Mobile */
        /* e.g. >> /mobile-games */
        padding-block-start: var(--spacing-l);
    }
}
/* GROUP OBJECTS / DOUBLE COLUMNS / DECORATION
=================================================== */
.o-double-columns :is(h2, h3) {
    font-size: var(--font-size-s-1);
}





/* GROUP COMPONENTS / SLIDE TEXT
=================================================== */
/* Notes...

    - e.g. /about-us

*/
/* HTML Example...

    <div class="o-slide o-slide--compressed-followed-by-pulled-up-component">
        <div class="c-slide-text c-slide-text--centered c-slide-text--centered-with-motif">
            <h2 class="c-section-heading">Comtrade Group</h2>
            <p>We are a part of the Comtrade Group, a large international IT solutions and services provider.</p>
            <p>Ever since we launched our first gaming software project in 2001, we strive to ensure a high quality service to our clients from all over the world.</p>
        </div>
    </div>

*/
/* Modifiers...

    .c-slide-text--centered-with-motif e.g. /about-us
    .c-slide-text--long-form e.g. /blog/single

*/
/* GROUP COMPONENTS / SLIDE TEXT / LAYOUT
=================================================== */
.c-slide-text {
    max-width: var(--max-width-1);
    margin-inline: auto;
}

.c-slide-text :is(h1, h2, h3) {
    /* e.g. >> /online-gaming-platform-icore */
    max-width: var(--max-width-reading-long);
}

.c-slide-text p {
    max-width: var(--max-width-reading-long);
}

.c-slide-text--centered > * {
    margin-inline: auto;
}

.c-slide-text--centered-with-motif p {
    margin-inline: unset;
}

.c-slide-text--long-form h1 {
    /* e.g. >> /news-and-articles/comtrade-gaming-inspires-innovation-and-is-sharing-knowledge-among-future-it-professionals */
    max-width: var(--max-width-title);
}

/* Custom */
@media (min-width: 1024px) {
    .c-slide-text--centered-with-motif {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }

    .c-slide-text--centered-with-motif :is(h2, h3) {
        grid-column: 1 / -1;
        text-align: center;
    }

    .c-slide-text--centered-with-motif p {
        grid-column: 4 / 6;
    }
}
/* GROUP COMPONENTS / SLIDE TEXT / SPACING
=================================================== */
.c-slide-text {
    padding-block-end: var(--spacing-l);
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
}

.c-slide-text :is(h1, h2, h3) {
    padding-block-start: 0;
}

.c-slide-text :is(h2, h3):last-child {
    /* Decrease e.g. >> /news/index */
    padding-block-end: var(--spacing-m);
}

.c-slide-text p:last-child {
    /* e.g. >> /products/score/server-based-gaming */
    padding-block-end: 0;
}

.c-slide-text p:first-of-type:not(:last-of-type) {
    margin-block-end: var(--spacing-s);
}

.c-slide-text .c-btn {
    /* e.g. >> /resource-library/how-genting-alderney-adopted-icore */
    padding-block-start: var(--spacing-l-1);
    margin-block-end: 0;
}
/* GROUP COMPONENTS / SLIDE TEXT / DECORATION
=================================================== */
.c-slide-text :is(h1, h2, h3) {
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-line-height);
}

.c-slide-text p {
    font-size: var(--font-size-s);
    line-height: var(--font-size-s-line-height);
    font-weight: var(--font-family-main-weight-medium);
}

/* e.g. >> /products/gcore/the-game-engine */
.c-slide-text p ~ p {
    font-weight: var(--font-family-main-weight-normal);
}

/* e.g. >> /about-us but not /products/gcore/the-game-engine */
.c-slide-text--centered-with-motif p ~ p {
    font-size: unset;
    font-weight: var(--font-family-main-weight-normal);
    width: 85%;
}




/* GROUP COMPONENTS / SLIDE TEXT COLUMNS
=================================================== */
/* Notes...

    - e.g. /online-gaming-platform-icore
    - Similar to .c-slide-text but with columns

*/
/* HTML Example...

    <div class="c-slide-text-columns">
        <div class="c-slide-text-columns__column">
            <p>Operators are now able to attract and reward players with omni-channel bonus and loyalty campaigns that increase the attractiveness of their offering and allowing for a customized player experience.</p>
            <p>iCore Engage delivers the following key business benefits:</p>
            <ul>
                <li>Effective steering of a player’s lifecycle by responding to the player’s gambling activity in an online or multi-channel setting and delivering promotions while players are still engaged in gameplay. This also ensures increased average player spending.</li>
                <li>Cross-selling between products and channels regardless of the content supplier by attracting and rewarding the player’s migration. This allows for better optimization of returns from marketing investments.</li>
            </ul>
        </div>
        <div class="c-slide-text-columns__column">
            <ul>
                <li>High personalization and optimization of web and mobile portals with central product configuration and content management. This enables enriched customer experience.</li>
                <li>Protection of an operator’s investments into existing eWallet solutions by non-intrusively integrating with the existing system, application infrastructure, and player-data.</li>
            </ul>
            <p><strong>To learn more, read a datasheet. To read about our CRM extension for casino operators, read our product datasheet</strong></p>
        </div>
    </div>

*/
/* Modifiers...

    .c-slide-text-columns--3 <-- more compact and three across e.g. /game-testing
    .c-slide-text-columns--inline-start <-- i.e. float left

*/
/* GROUP COMPONENTS / SLIDE TEXT COLUMNS / LAYOUT
=================================================== */
.c-slide-text-columns {
    position: relative;
    /* Above dots e.g. >> /online-gaming-platform-icore */
    z-index: var(--z-index-above-body);

    max-width: var(--max-width-reading-columns);
    margin-inline: auto;

    display: grid;
    /* Prevent overflow on screens less than px value */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19em), 1fr));
    gap: var(--spacing-l-1);
}

.c-slide-text-columns--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13em), 1fr));
    /* e.g. >> /services/operational-support */
    max-width: var(--max-width-1);
}

/* e.g. >> /resource-library/live-casino-software-gcore */
.c-slide-text-columns--inline-start {
    margin-inline-start: 0;
}
/* GROUP COMPONENTS / SLIDE TEXT COLUMNS / SPACING
=================================================== */
.c-slide-text-columns {
    --left-padding: 2.4rem;
    padding-inline: var(--spacing-l);
}

/* e.g. >> /score-connect */
.c-slide-text-columns__column :is(h2, h3):not(:first-child),
.c-slide-text-columns ul,
.c-slide-text-columns p {
    padding-inline-start: var(--left-padding);
}

.c-slide-text-columns ul {
    /* e.g. >> /game-content-development */
    padding-block-end: var(--spacing-s);
}

.c-slide-text-columns li {
    padding-block-end: var(--spacing-s-1);
}

.c-slide-text-columns :is(h2, h3) {
    padding-block-end: var(--spacing-m);
}

.c-slide-text-columns :is(h2, h3):first-child {
    /* Not e.g. >> /score-connect */
    padding-block-start: 0;
    /* e.g. >> /igaming-platform */
    padding-block-end: var(--spacing-l);
}

.c-slide-text-columns :is(h2, h3):first-child ~ p {
    /* e.g. >> /score-server-based-gaming */
    /* e.g. >> /mobile-games */
    padding-inline-start: 0;
}

.c-slide-text-columns :is(p, ul) + p:last-child strong {
    display: inline-block;
    /* Increase */
    /* e.g. >> /score-central-control-system */
    padding-block-start: var(--spacing-s-1);
}

/* Custom */
@media (min-width: 1100px) {
    /* e.g. >> /score-central-control-system */
    .c-slide-text-columns :is(h2, h3):only-child {
        position: relative;
        /* Pull over to the left a little */
        right: var(--spacing-l-4);
    }
}
/* GROUP COMPONENTS / SLIDE TEXT COLUMNS / DECORATION
=================================================== */
/* e.g. NOT >> /score-central-control-system */
.c-slide-text-columns :is(h2, h3):not(:only-child) {
    font-size: var(--font-size-s);
    line-height: var(--font-size-s-line-height);
    text-transform: none;
    font-weight: var(--font-family-main-weight-medium);
}

/* e.g. >> /score-central-control-system */
.c-slide-text-columns :is(h2, h3):only-child {
    font-size: var(--font-size-s-1);
    line-height: var(--font-size-s-1-line-height);
}

.c-slide-text-columns ul li {
    list-style: none;
    position: relative;
}

.c-slide-text-columns li::before {
    --size: 1.5rem;

    content: "";
    position: absolute;
    top: 0.05rem;
    left: calc(0% - var(--left-padding));
    width: var(--size);
    height: var(--size);
    background-image: url(/img/svg/check.svg);
    background-repeat: no-repeat;
}




/* GROUP COMPONENTS / SLIDE COLUMNS
=================================================== */
/* Notes...

	- Used inside a slide

*/
/* HTML Example...

    <div class="o-slide">
        <div class="o-slide__inner">
            <div class="c-slide-columns">
                <div class="c-slide-columns__column">
                    <h2 class="c-slide-columns__heading">About Us</h2>
                </div>
                <div class="c-slide-columns__column">
                    <p>In the omni-channel world of gaming, the mobile casino has become a standard. To retain the players, an online casino should be able to provide a high-quality mobile games.</p>
                </div>
            </div>
        </div>
    </div>

*/
/* GROUP COMPONENTS / SLIDE COLUMNS / LAYOUT
=================================================== */
.c-slide-columns {
    max-width: var(--max-width-1);
    margin-inline-start: auto;
    margin-inline-end: auto;

    display: grid;
    gap: var(--spacing-l-2);
}

/* --mq-slide-columns-1-before */
@media (max-width: 1023px) {
    .c-slide-columns {
        max-width: var(--max-width-panel);
    }
}

/* --mq-slide-columns-1-after */
@media (min-width: 1024px) {
    .c-slide-columns {
        grid-template-columns: 40fr 60fr;
    }
}
/* GROUP COMPONENTS / SLIDE COLUMNS / SPACING
=================================================== */
.c-slide-columns {
    padding-inline: var(--spacing-l);
}

.c-slide-columns__heading {
    padding-block-end: 0;
}
/* GROUP COMPONENTS / SLIDE COLUMNS / DECORATION
=================================================== */
.c-slide-columns__heading {
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-1-line-height);
    letter-spacing: var(--letter-spacing-m);
}

.c-slide-columns p {
    font-size: var(--font-size-s-1);
    line-height: var(--font-size-s-1-line-height);
}




/* GROUP COMPONENTS / SLIDE COLUMNS SMALL
=================================================== */
/* Notes...

	- Used inside a slide
	- Similar to slide colums but used for paragraphs e.g. /about-us

*/
/* HTML Example...

    <div class="o-slide o-slide--compressed-b-1 u-dots-motif u-dots-motif--top-right">
        <div class="o-slide__inner">
            <div class="c-slide-text c-slide-text--long-form">
                <h1>{{ title }}</h1>
            </div>
            <div class="c-slide-columns-s c-slide-columns-s--with-lead">
                <div class="u-animated-fade-in c-slide-columns-s__inner">
                    <picture class="c-slide-columns-s__hero-image" />
                    {{ bio }}
                </div>
            </div>
        </div>
    </div>

*/
/* GROUP COMPONENTS / SLIDE COLUMNS SMALL / LAYOUT
=================================================== */
.c-slide-columns-s {
    max-width: var(--max-width-2);
    margin: auto;
}

.c-slide-columns-s__inner {
    max-width: var(--max-width-reading-columns);
    margin: auto;
}

/* --mq-slide-columns-1-before */
@media (max-width: 1023px) {
    .c-slide-columns-s {
        max-width: var(--max-width-panel);
    }
}

/* Custom */
@media (min-width: 600px) {
    .c-slide-columns-s__inner {
        column-count: 2;
        column-gap: var(--spacing-l);
        column-width: 6rem;
    }
}
/* GROUP COMPONENTS / SLIDE COLUMNS SMALL / SPACING
=================================================== */
.c-slide-columns-s {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
}

.c-slide-columns + .c-slide-columns-s {
    padding-block-start: var(--spacing-l);
}

.c-slide-columns-s img {
    padding-block-start: var(--spacing-m);
    margin-block-end: var(--spacing-l);
}

.c-slide-columns-s__hero-image img {
    padding-block-start: 0;
}
/* GROUP COMPONENTS / SLIDE COLUMNS SMALL / DECORATION
=================================================== */
.c-slide-columns-s {
    color: var(--colour-grey-reading);
}

.c-slide-columns-s--with-lead p:first-child,
.c-slide-columns-s--with-lead .c-slide-columns-s__hero-image + p {
    /* e.g. >> /news-and-articles/comtrade-gaming-inspires-innovation-and-is-sharing-knowledge-among-future-it-professionals */
    color: black;
    font-weight: var(--font-family-main-weight-medium);
}

.c-slide-columns-s__hero-image img {
    box-shadow: var(--box-shadow-s-light-b-3);
}




/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / LOGOS
=================================================== */
/* Notes...

    - Crop tightly around the logo, the crop doesn't really matter; flexbox will center them
        + You could start with a logo canvas size of 188 (about 375px / 2) so that the logo images do not need to be resized by the browser on mobile
    - If you are going to greyscale the logos then make them all black vectors (same shade)

*/
/* HTML Example...

    <div class="c-logos">
        <div class="c-logos__item">
            <img src="img/logos/google.svg" alt="Google" />
        </div>
    </div>

*/
/* purgecss start ignore */
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / LOGOS / LAYOUT
=================================================== */
.c-logos {
    --column-size: 7.5em;
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--column-size)), 1fr));
    grid-gap: var(--spacing-m) var(--spacing-l-3);
    max-width: var(--max-width-1);
    margin: auto;
}

.c-logos > * {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 6rem;
    min-height: 6rem;
}

.c-logos img {
    width: initial;   
    max-height: 3.25rem;
}

.c-logos [src*=".svg"] {
    min-height: 3rem;
}

.c-logos div {
    /* Needed to make SVGs appear */
    width: 100%;
}

/* --mq-slide-columns-1-before */
@media (max-width: 1023px) {
    .c-logos {
        max-width: var(--max-width-panel);
    }
}

/* Custom */
@media (min-width: 500px) {
    .c-logos {
        /* Decrease */
        --column-size: 6em;
        /* e.g. >> home -> clients */
        /* Custom so that logos fit all the way across */
        grid-gap: var(--spacing-l) 7.3em;
    }

    .c-logos img {
        /* Increase */
        max-width: 9.5rem;
    }
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / LOGOS / SPACING
=================================================== */
.c-logos {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
    padding-block-start: var(--spacing-m-2);
}

/* Exceptions... */
/*.c-hero-block__strapline ~ * {*/
    /* e.g. >> Home */
    /*padding-block-start: var(--spacing-s-1);*/
/*}*/
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / LOGOS / DECORATION
=================================================== */
.c-logos__item img {
    /* filter: grayscale(100%) opacity(80%); */
    filter: grayscale(100%);
}

/* Other exceptions */
/* p + .c-logos {
    padding-block-start: var(--spacing-l);
}  */
/* purgecss end ignore */




/* GROUP COMPONENTS / HERO COLUMNS
=================================================== */
/* Notes...

	- Coloured 3 columns e.g. Home page

*/
/* HTML Example...

    <div class="u-panel-white">
        <section class="c-hero-columns">
            <div class="c-hero-columns__column">
                <svg/>
                <h2 class="c-hero-columns__title">iGaming Platform</h2>
                <p class="c-hero-columns__text">
                    iCore is an online gaming platform for enterprise-level operators who need to manage omni-channel gaming and products.
                </p>
            </div>
            <div class="c-hero-columns__column">
                <svg/>
                <h2 class="c-hero-columns__title">iGaming Platform</h2>
                <p class="c-hero-columns__text">
                    iCore is an online gaming platform for enterprise-level operators who need to manage omni-channel gaming and products.
                </p>
            </div>
            <div class="c-hero-columns__column">
                <svg/>
                <h2 class="c-hero-columns__title">iGaming Platform</h2>
                <p class="c-hero-columns__text">
                    iCore is an online gaming platform for enterprise-level operators who need to manage omni-channel gaming and products.
                </p>
            </div>
        </section>
   </div>

*/
/* Modifiers...

    .c-hero-columns--pull-up <-- e.g. /Home, pull up over the .c-image-with-text

*/
/* GROUP COMPONENTS / HERO COLUMNS / LAYOUT
=================================================== */
.c-hero-columns {
    display: grid;
    text-align: center;
    gap: var(--spacing-l);
    margin: auto;
    max-width: var(--max-width-2);
}

.c-hero-columns__column {
    position: relative;
    width: 100%;
    max-width: var(--max-width-panel);
    margin-inline-start: auto;
    margin-inline-end: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-hero-columns__text {
    flex-basis: 33%;
}

.c-hero-columns__column > * {
    width: calc(100% - var(--spacing-l) * 2);
    /* width: 75%; */
    max-width: var(--max-width-reading);
}

/* Custom */
@media (min-width: 1024px) {
    .c-hero-columns {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Custom to --mq-nav-full-before */
@media (min-width: 1024px) and (max-width: 1249px) {
    .c-hero-columns {
        /* Decrease */
        gap: var(--spacing-m);
    }
}

.c-hero-columns--pull-up .c-hero-columns__column {
    top: calc(0% - var(--spacing-l-4));
}
/* GROUP COMPONENTS / HERO COLUMNS / SPACING
=================================================== */
.c-hero-columns {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
}

.c-hero-columns__column {
    padding-block-start: var(--spacing-l);
    padding-block-end: var(--spacing-m);
}

.c-hero-columns--block-equal .c-hero-columns__column {
    /* e.g. >> /products/score/g2s-and-s2s-protocol-stacks */
    padding-block-start: var(--spacing-l);
    padding-block-end: var(--spacing-l);
}

.c-hero-columns__title {
    padding-block: var(--spacing-m);
    padding-block-start: var(--spacing-s-1);
}

.c-hero-columns__title:first-child {
    /* e.g. >> /careers */
    padding-block-start: 0;
}

.c-hero-columns__column > .c-hero-columns__title:only-child {
    /* e.g. >> /score-g2s-and-s2s-protocol-stacks */
    padding-block-end: 0;
}
/* GROUP COMPONENTS / HERO COLUMNS / DECORATION
=================================================== */
.c-hero-columns__column {
    background: white;
    border-radius: var(--border-radius-l);
    /* box-shadow: var(--box-shadow-s-light-b-3); */
    box-shadow: var(--box-shadow-s-focus);
}

.c-hero-columns__title {
    font-size: var(--font-size-s-1);
    letter-spacing: var(--letter-spacing-s);
}

.c-hero-columns a {
    text-decoration: none;
    color: var(--colour-black);
    font-weight: var(--font-family-main-weight-normal);
}

.c-hero-columns__text {
    /* Decrease */
    line-height: var(--font-size-s-line-height);
}

.c-hero-columns__column svg {
    --color1: var(--colour-red);
    color: var(--colour-red);
    font-size: var(--icon-size-l-2);
}

.c-hero-columns__column p + svg:last-child {
    margin-inline: unset;
    margin-block-start: var(--spacing-m);
    font-size: 1.75em;
}

/* .c-hero-columns__column:nth-child(2) svg {
    color: var(--colour-blue);
}

.c-hero-columns__column:nth-child(3) svg {
    color: black;
} */




/* GROUP COMPONENTS / HERO TEXT
=================================================== */
/* Notes...

	- e.g. >> /online-gaming-platform-icore

*/
/* HTML Example...

    <div class="c-hero-text">
        <h2>Comtrade Gaming iCore, The Enterprise Gaming Platform delivers the following key business benefits</h2>
    </div>

*/
/* GROUP COMPONENTS / HERO TEXT / LAYOUT
=================================================== */
.c-hero-text > * {
    max-width: var(--max-width-title);
    margin-inline: auto;
    text-align: center;
}
/* GROUP COMPONENTS / HERO TEXT / SPACING
=================================================== */
.c-hero-text {
    padding-block: var(--spacing-vh-s);
}

.c-hero-text > * {
    padding-inline: var(--spacing-l);
}

.c-hero-text *:last-child {
    padding-block-end: 0;
}
/* GROUP COMPONENTS / HERO TEXT / DECORATION
=================================================== */
.c-hero-text {
    background: var(--colour-red);
    color: white;
}

.c-hero-text :is(h2) {
    font-size: var(--font-size-m);
    line-height: var(--font-size-m-line-height);
}

.c-hero-text p {
    /* e.g. >> /card-and-table-games */
    font-size: var(--font-size-s-1);
    font-weight: var(--font-family-main-weight-medium);
    line-height: var(--font-size-m-line-height);
}

.c-hero-text a {
    text-decoration-thickness: 1px;
    text-underline-offset: -0.15rem;
    text-decoration-color: hsl(0deg 0% 100% / 50%);
}

.c-hero-text a:hover {
    text-decoration-color: hsl(0deg 0% 100% / 80%);
}





/* GROUP COMPONENTS / STATS BAR
=================================================== */
/* Notes...

	- e.g. /about-us

*/
/* HTML Example...

*/
/* Modifiers...

    .c-stats-bar--pull-up <-- pull up e.g. /about-us

*/
/* GROUP COMPONENTS / STATS BAR / LAYOUT
=================================================== */
.c-stats-bar {
    max-width: var(--max-width-title);
    margin-inline: auto;

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-l-4);

    text-align: center;
}

.c-stats-bar * {
    padding: 0;
}

.c-stats-bar__stat {
    /* display: grid; */ /* Safari doesn't like grid in this instance */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: var(--spacing-s-x-x);
}

.c-stats-bar__stat :is(h3) {
    order: 1;
    width: 90%;
    margin-inline: auto;
}

.c-stats-bar--pull-up {
    transform: translate(0%, -5%);
}

/* --mq-stats-bar-breakpoint-1-before */
@media (max-width: 499px) {
    .c-stats-bar {
        margin-inline: var(--spacing-m);
        margin-block-end: var(--spacing-l);
    }
}

/* --mq-stats-bar-breakpoint-1-after */
@media (min-width: 500px) {
    .c-stats-bar {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .c-stats-bar--pull-up {
        /* Increase */
        transform: translate(0%, -50%);
    }

    .c-stats-bar--pull-up + .o-slide,
    /* e.g. >> /about-us */
    .c-stats-bar--pull-up + [class*="u-width-max-"] .o-slide {
        /* e.g. >> /careers */
        /* e.g. >> /about-us */
        padding-block-start: var(--spacing-l-3);
    }
}
/* GROUP COMPONENTS / STATS BAR / SPACING
=================================================== */
.c-stats-bar {
    padding: var(--spacing-m);
}
/* GROUP COMPONENTS / STATS BAR / DECORATION
=================================================== */
.c-stats-bar {
    background: white;
    border-radius: var(--border-radius-l);
    box-shadow: var(--box-shadow-s-focus);
}

.c-stats-bar__stat {
    position: relative;
}

.c-stats-bar__stat:not(:last-child)::after {
    content: "";
    position: absolute;
    transform: translate(-50%);
}

.c-stats-bar__stat :is(h3) {
    font-size: calc(var(--font-size-s) - 0.15em);
    text-transform: initial;
    font-weight: var(--font-family-main-weight-normal);
}

.c-stats-bar__stat p {
    font-size: var(--font-size-m);
    line-height: var(--font-size-m-line-height);
    font-weight: var(--font-family-main-weight-strong);
}

/* --mq-stats-bar-breakpoint-1-before */
@media (max-width: 499px) {
    .c-stats-bar__stat:not(:last-child)::after {
        width: 5%;
        bottom: calc(0% - var(--spacing-l-4) / 2);
        left: 50%;
        border-block-end: 1px solid var(--colour-grey);
    }
}

/* --mq-stats-bar-breakpoint-1-after */
@media (min-width: 500px) {
    .c-stats-bar__stat:not(:last-child)::after {
        right: calc(0% - var(--spacing-l-4) / 2);
        height: 100%;
        border-inline-end: 1px solid var(--colour-grey);
    }
}





/* GROUP COMPONENTS / FEATURE COLUMNS
=================================================== */
/* Notes...

	- e.g. /about-us > We Strive To

*/
/* HTML Example...

    <div class="c-feature-columns">
        <div class="c-feature-columns__column">
            <img src="/img/svg/laptop.svg" alt="laptop" />
            <h3>Value A</h3>
            <p>Perfect omni-channel & multi-product gaming environments</p>
        </div>
        <div class="c-feature-columns__column">
            <img src="/img/svg/cloud-disk.svg" alt="cloud disk" />
            <h3>Value B</h3>
            <p>Engage your players with superior service and incentives</p>
        </div>
        <div class="c-feature-columns__column">
            <img src="/img/svg/head-target.svg" alt="head target" />
            <h3>Value C</h3>
            <p>Manage & standardize open gaming environments</p>
        </div>
    </div>

*/
/* Modifiers...

    .c-feature-columns--s <-- e.g. /about-us
    .c-feature-columns--align-start <-- text-align: left; e.g. /careers
    .c-feature-columns--5 <-- rare occasion when columns happen to be 5 and the client would like them on a single row e.g. /careers > Values

*/
/* GROUP COMPONENTS / FEATURE COLUMNS / LAYOUT
=================================================== */
.c-feature-columns {
    /* e.g. >> /careers > Values */
    max-width: var(--max-width-2);
    margin: auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-m);
    /* e.g. >> /careers */
    height: 100%;

    text-align: center;
}

.c-feature-columns__column {
    flex-basis: 20%;
    min-width: 17em;
}

/* e.g. >> /about-us */
.c-feature-columns picture {
    display: block;
    /* Try to make the images more equal */
    height: 5em;
    display: grid;
    justify-content: center;
}

.c-feature-columns img {
    max-height: 5.5rem;
    width: auto;
}

.c-feature-columns--align-start {
    text-align: left;
}

/* purgecss start ignore */
/* Custom */
@media (min-width: 1100px) {
    .c-feature-columns--5 {
        flex-wrap: unset;
    }

    .c-feature-columns--5 .c-feature-columns__column {
        min-width: unset;
    }
}
/* purgecss end ignore */

/* e.g. >> /careers */
.o-carousel .c-feature-columns__column {
    flex-basis: 100%;
}

/* Custom */
@media (min-width: 1150px) {
    .o-carousel .c-feature-columns {
        flex-wrap: nowrap;
    }

    .o-carousel .c-feature-columns__column {
        flex-basis: 33.333%;
    }
}
/* GROUP COMPONENTS / FEATURE COLUMNS / SPACING
=================================================== */
.c-feature-columns {
    padding-inline: var(--spacing-l);
}

.c-feature-columns__column {
    /* e.g. >> /mobile-games */
    padding: var(--spacing-l);
}

.c-feature-columns__column :is(h2, h3) {
    padding-block-end: var(--spacing-s-1);
}

.c-feature-columns__column :is([src*="svg"], svg) {
    margin-block-end: var(--spacing-s-1);
}

.c-feature-columns__column > *:last-child {
    padding-block-end: 0;
}

/* e.g. >> /about-us */
.c-feature-columns picture {
    padding-block-end: var(--spacing-m);
}

.o-carousel .c-feature-columns {
    /* Prevent box-shadow being clipped e.g. >> /careers (swipe across to a different slide with a different height) */
    padding-block-end: var(--spacing-l);
}
/* GROUP COMPONENTS / FEATURE COLUMNS / DECORATION
=================================================== */
.c-feature-columns__column {
    background: white;
    color: var(--colour-black);
    border-radius: var(--border-radius-l);
    box-shadow: var(--box-shadow-s-focus);
}

.c-feature-columns__column :is(h2, h3) {
    font-size: var(--font-size-s-1);
}

.c-feature-columns__column :is([src*="svg"], svg) {
    font-size: var(--icon-size-l-1);
    color: var(--colour-red);
}

.c-feature-columns--s p {
    /* e.g. >> /about-us */
    font-size: var(--font-size-s-x);
}

.c-feature-columns a {
    text-decoration: none;
    color: var(--colour-black);
    font-weight: var(--font-family-main-weight-normal);
}



/* GROUP COMPONENTS / GAME CARDS
=================================================== */
/* Notes...

    URL example
    -----------
    /games

    What does it do?
    ----------------
    Layout games in a card-like manner

*/
/* HTML Example...

    <div class="o-slide o-slide--full-width c-slide">
        <div class="o-slide__inner">
            <div class="c-game-cards">
                {{ collection:games as='posts' limit='3' }}
                    {{ posts }}
                        {{ partial:games/show_in_list }}
                        which produces...
                        <div class="c-game-cards__item">
                            <a href="/games/red-beard-treasures">
                                <span class="c-game-cards-item-info__release-date">
                                    Released March 2025
                                </span>
                                <picture>
                                    <img/>
                                </picture>
                            </a>
                        </div>
                    {{ /posts }}
                {{ /collection:games }}
            </div>
        </div>
    </div>

*/
.c-game-cards {
    --card-radius: 15px;
    display: grid;
    /* Prevent overflow on screens less than em or px value */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr));
    gap: var(--spacing-s-1);
    max-width: var(--max-width-2);
    margin-inline: auto;
    padding-inline: var(--spacing-s-2);
    padding-block-end: var(--spacing-l-3);
}
.c-game-cards img {
    border-radius: var(--card-radius);
    filter:
        contrast(105%)
        saturate(1.04)
    ;
}
.c-game-cards__item {
    position: relative;
}
.c-game-cards-item-info {
    position: absolute;
    z-index: var(--z-index-above-body);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s-1);
    justify-content: space-between;
    padding-inline: var(--spacing-s);
    inline-size: 100%;
    padding-block-start: var(--spacing-s);
    &::before {
        position: absolute;
        z-index: var(--z-index-below-body);
        content: '';
        inset: 0;
        top: 0;
        background: linear-gradient(to bottom, hsl(0deg 0% 0% / 30%) 0%,transparent 100%);
        border-radius: var(--card-radius);
    }
}
.c-game-cards-item-info__release-date {
    z-index: var(--z-index-above-body);
    padding: var(--spacing-s-x-x) var(--spacing-s-1);
    background: var(--colour-red);
    box-shadow: var(--box-shadow-bold);
    color: white;
    border-radius: var(--border-radius-l);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-s);
}
.c-game-cards-item-info__flags {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    /* Flag */
    svg {
        font-size: 1.85em;
        border-radius: var(--border-radius-m);
        border: 1px solid white;
        box-shadow: var(--box-shadow-bold);
        height: unset;
    }
    .c-game-cards-item-info:not(:has(.c-game-cards-item-info__release-date)) & {
        /* Only pull the flags right if there's no date */
        margin-inline-start: auto;
    }
}
/* Custom */
@media (min-width: 375px) and (max-width: 499px) {
    .c-game-cards {
        grid-template-columns: 1fr 1fr;
    }
}
/* GROUP COMPONENTS / GAME CARDS / MQs
=================================================== */
/* Custom */
@media (min-width: 1200px) {
    .c-game-cards {
        padding-inline: var(--spacing-l-3);
        gap: var(--spacing-m);
    }
}




/* GROUP COMPONENTS / PROFILE CARDS
=================================================== */
/* Notes...

	- e.g. /about-us > Management
	- Very similar to feature columns

*/
/* HTML Example...

    <section class="o-slide">
        <div class="o-slide__inner">
            <h2 class="c-section-heading">Management</h2>
            <div class="c-profile-cards">
                <div class="c-profile-cards__column">
                    <img src="/img/about-us/management/veselin-jevrosimovi.jpg" alt="Veselin Jevrosimovi" />
                    <h3>Veselin Jevrosimovi</h3>
                    <p>Owner and Chairman of the Board of Comtrade Group, founded in Serbia more than 25 years ago</p>
                    <a href="/" class="c-profile-cards__link-icon"><?php include 'img/svg/chevron-right.php'; ?></a>
                </div>
                <div class="c-profile-cards__column">
                    <img src="/img/about-us/management/ales-gornjec.jpg" alt="Ales Gornjec" />
                    <h3>Ales Gornjec</h3>
                    <p>Joined Comtrade in 1996 (Hermes Softlab at the time) as software developer and project manager</p>
                    <a href="/" class="c-profile-cards__link-icon"><?php include 'img/svg/chevron-right.php'; ?></a>
                </div>
                <div class="c-profile-cards__column">
                    <img src="/img/about-us/management/steven-valentine.jpg" alt="Steven Valentine" />
                    <h3>Stev</h3>
                    <p>Steven Valentine, Director of Interactive joined Comtrade at the start of 2010 as UK Sales Manager, responsible for</p>
                    <a href="/" class="c-profile-cards__link-icon"><?php include 'img/svg/chevron-right.php'; ?></a>
                </div>
            </div>
        </div>
    </section>

*/
/* Modifiers...

    .c-profile-cards--s e.g. /gaming-systems-management-score

*/
/* GROUP COMPONENTS / PROFILE CARDS / LAYOUT
=================================================== */
.c-profile-cards {
    position: relative;
    z-index: var(--z-index-above-body);

    max-width: var(--max-width-title);
    margin: auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-l-1) var(--spacing-m);
}

.c-profile-cards__column {
    position: relative;
    flex-basis: 30%;
    min-width: 17em;
}

.c-profile-cards__link-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
}

/* Custom */
@media (min-width: 1200px) {
    .c-profile-cards--s {
        /* Increase */
        max-width: var(--max-width-2);
        /* Decrease */
        column-gap: var(--spacing-s);
    }

    .c-profile-cards--s .c-profile-cards__column {
        /* Decrease */
        flex-basis: 19.15%;
        min-width: 14em;
    }
}
/* GROUP COMPONENTS / PROFILE CARDS / SPACING
=================================================== */
.c-profile-cards {
    padding-inline: var(--spacing-l);
}

.c-profile-cards__column {
    padding-block-end: var(--spacing-l);
}

.c-profile-cards__column :is(h2, h3) {
    padding-block-start: 2.3rem;
    padding-block-end: var(--spacing-s);
}

.c-profile-cards__column :is(h3, p) {
    /* padding-inline: var(--spacing-l); */
    padding-inline-start: 2.5rem;
    padding-inline-end: 2.5rem;
}

.c-profile-cards__column p:last-of-type {
    padding-block-end: 0;
}

.c-profile-cards__column .c-profile-cards__link-icon {
    padding: var(--spacing-s)!important;
}

/* Custom */
@media (min-width: 1200px) {
    .c-profile-cards--s .c-profile-cards__column img {
        /* Decrease */
        margin-block-end: var(--spacing-s);
    }
}
/* GROUP COMPONENTS / PROFILE CARDS / DECORATION
=================================================== */
.c-profile-cards__column {
    background: white;
    box-shadow: var(--box-shadow-s-focus);
}

.c-profile-cards__column :is(h2, h3) {
    font-size: var(--font-size-s-1);
}

.c-profile-cards__column [src*="svg"] {
    font-size: var(--icon-size-l-1);
}

.c-profile-cards__link-icon {
    background: var(--colour-grey);
    color: white;
    font-size: var(--icon-size-s-x);
}

/* Custom */
@media (min-width: 768px) {
    .c-profile-cards__column p {
        font-size: 0.88em;
    }
}




/* GROUP COMPONENTS / CONTACT CARDS
=================================================== */
/* Notes...

	- e.g. /contact

*/
/* HTML Example...

    <div class="c-contact-cards">
        <div class="c-contact-cards__card">
            <h2>Steven Valentine</h2>
            <div class="c-contact-cards__card__text">
                <div class="o-icon-with-text">
                    <?php include 'img/svg/phone.php'; ?>
                    <a href="">CCO</a>
                </div>
                <div class="o-icon-with-text">
                    <?php include 'img/svg/email.php'; ?>
                    <a href="tel://+380681605200">steven.valentine@comtrade.com</a>
                </div>
            </div>
        </div>
        <div class="c-contact-cards__card">
            <h2>Steven Valentine</h2>
            <div class="c-contact-cards__card__text">
                <div class="o-icon-with-text">
                    <?php include 'img/svg/phone.php'; ?>
                    <a href="">CCO</a>
                </div>
                <div class="o-icon-with-text">
                    <?php include 'img/svg/email.php'; ?>
                    <a href="tel://+380681605200">nika.music@comtrade.com</a>
                </div>
            </div>
        </div>
    </div>

*/
/* GROUP COMPONENTS / CONTACT CARDS / LAYOUT
=================================================== */
.c-contact-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: var(--max-width-3);
    margin-inline: auto;
    column-gap: var(--spacing-l);
    row-gap: var(--spacing-m);
}

.c-contact-cards__card {
    flex-basis: 32em;

    display: flex;
    align-items: center;
    gap: var(--spacing-l);
}

.c-contact-cards__card :is(h2, h3) {
    flex-basis: 33.333%;
}

.c-contact-cards__card__text {
    display: grid;
    gap: var(--spacing-s);
}

/* Custom */
@media (max-width: 599px) {
    .c-contact-cards__card {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* GROUP COMPONENTS / CONTACT CARDS / SPACING
=================================================== */
.c-contact-cards {
    padding-inline: var(--spacing-l);
}

.c-contact-cards__card {
    padding: var(--spacing-m);
}

.c-contact-cards__card > * {
    padding: 0;
}
/* GROUP COMPONENTS / CONTACT CARDS / DECORATION
=================================================== */
.c-contact-cards__card {
    background: white;
    box-shadow: var(--box-shadow-s-focus);
}

.c-contact-cards__card :is(h2, h3) {
    font-size: var(--font-size-s-1);
}

.c-contact-cards__card svg {
    font-size: var(--icon-size-s);
    color: var(--colour-black);
}

.c-contact-cards__card a {
    font-weight: var(--font-family-main-weight-normal);
    text-decoration: none;
    color: initial;
}





/* GROUP COMPONENTS / QUOTE
=================================================== */
/* Notes...

	- Uses Flickity

*/
/* HTML Example...

    <div class="c-quote">
        <div class="o-carousel">
            <div class="c-quote__image-with-quote"> <-- if image is present
                <picture> <-- optional
                    <img/>
                </picture>
                <blockquote>
                    <p>Comtrade Gaming, with their expertise in the field of gaming systems management, helped us to connect our machines to the Federal Computing Centre. Furthermore, with this solution we will be able to bring our products to new markets. This definitely is one of the best investments into the future.</p>
                    <footer>
                        <cite>Anja Bajc</cite>
                    </footer>
                </blockquote>
            </div>
        </div>
    </div>

*/
/* GROUP COMPONENTS / QUOTE / LAYOUT
=================================================== */
.c-quote__image-with-quote {
    --image-width: 7em;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-l);
}

.c-quote__image-with-quote img {
    max-width: var(--image-width);
}

/* Custom */
@media (min-width: 768px) {
    .c-quote__image-with-quote {
        display: grid;
        grid-template-columns: var(--image-width) 1fr;
        max-width: 67rem;
        margin-inline: auto;
    }
}
/* GROUP COMPONENTS / QUOTE / SPACING
=================================================== */
.c-quote {
    padding-block-start: var(--spacing-vh-s);
    padding-block-end: var(--spacing-vh-s);
}

.c-quote blockquote {
    margin: 0;
    padding: 0;
}

.c-quote :is(p, footer) {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
    max-width: 60rem;
    margin: auto;
}

.c-quote .flickity-page-dots {
    /* Push dots away */
    margin-block-start: var(--spacing-l);
}

.c-quote__image-with-quote {
    padding-inline: var(--spacing-l);
}

.c-quote__image-with-quote :is(p, footer) {
    padding-inline: 0;
}
/* GROUP COMPONENTS / QUOTE / DECORATION
=================================================== */
.c-quote {
    background: var(--colour-gradient-red-dark);
    color: white;
}

.c-quote blockquote {
    border: 0;
}

/* purgecss start ignore */
.c-quote .flickity-button svg {
    color: white;
}
/* purgecss end ignore */

.c-quote .o-carousel-cell p,
.c-quote .o-carousel-cell footer {
    font-size: var(--font-size-s);
    line-height: var(--font-size-s-line-height);
}

.c-quote .o-carousel-cell footer {
    font-weight: var(--font-family-main-weight-medium);
}

.c-quote__image-with-quote img {
    border-radius: 50%;
}

/* Custom */
@media (min-width: 768px) {
    .c-quote .o-carousel-cell p,
    .c-quote .o-carousel-cell footer {
        font-size: var(--font-size-s-1);
        line-height: var(--font-size-s-1-line-height);
    }
}






/* GROUP COMPONENTS / FRAMEWORK / SKIP LINKS
=================================================== */
/* .u-screen-reader*/
.skip-to-content:focus {
    position: fixed!important;
    z-index: var(--z-index-above-body);
    top: 0;
    left: 0;
    padding: var(--spacing-s-1) var(--spacing-l);
    font-size: var(--font-size-s-x);
    color: var(--colour-grey);
    outline: none;
    /* Looks better on Skip to Content */
    text-underline-position: auto;
}




/* GROUP COMPONENTS / FRAMEWORK / BUTTONS
=================================================== */
/* Notes...

    Wrap the .c-btn around the a href instead of the other way around because this is the most valid HTML.
    http://stackoverflow.com/questions/5320404/wrap-link-a-around-div

    <div class="btn">
        <a href>
        </a>
    </div>

*/

/* anchor instead of just .c-btn because the browser focusses on the a element, which is the background color we want to change 
should be...
*/
.c-btn a,
/* For when you add a button with JS and it doesn't have an anchor */
.js--btn,
/* Components > Framework > Nav */
button,
/* Override form background default */
/* e.g. Components > Framework > Comments */
[type="submit"] {
    display: inline-block;
    /* I've found it more stable to use pxls rather than ems. */
    --button-spacing: var(--button-spacing-vertical) var(--button-spacing-horizontal);
    padding: var(--button-spacing);
    /* margin-right: 1rem; Don't do this because if the button is centered it will not be centered correctly */
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
    text-decoration: none;
    cursor: pointer;
    /* =JFG. Hover states with a slight delay, but focus without any because keyboard users want quick feedback. Do not use 'all' because it resizes slowly when resizing the browser window */
    transition: background-color 0.2s ease 0s;
}

/* Not .c-btn + .c-btn in case a button is next to a different tag such as <p/> */
.c-btn,
button {
    margin-right: 1rem;
}

.c-btn:last-child {
    margin-right: 0;
}

.c-btn {
    position: relative;
    display: inline-block;
    /* Components > Framework > Forms > Layout */
    margin-block-end: 1.25rem;
}

.c-btn a {
    /* e.g. icons in buttons */
    display: flex;
    align-items: center;
    text-align: left;
    /* e.g. >> /news-and-articles/single > pagination */
    gap: var(--spacing-m);
}

.c-btn svg {
    position: relative;
    /* e.g. >> /news-and-articles/single > pagination */
    top: -0.08em;
}
/* purgecss start ignore */
.c-btn [href*=".pdf"] {
    gap: var(--spacing-s-2); /* e.g. >> /about-us/compliance-and-ethics */
}
.c-btn [href*=".pdf"] svg {
    font-size: 1.4em; /* e.g. >> /about-us/compliance-and-ethics */
}
/* purgecss end ignore */

button,
[type="search"],
[type="submit"] {
    /* =JFG. Cancel default button appearance */
    -webkit-appearance: none!important;
    border: none;
}

button {
    /* =JFG. Cancel default button appearance */
    background: none;
}

button svg {
    font-size: 1.15em;
    /* To combat -apple-system-blueinput on iOS 15 */
    color: initial;
}
/* GROUP COMPONENTS / FRAMEWORK / BUTTONS / TYPES
=================================================== */
.c-btn__left svg,
/* a*/
.c-btn__right svg {
    position: relative;
    /* Pagination Button e.g. right arrow inside button moves forward */
    transition: var(--animation-transition-fast);
}

/* Molecules > Pagination > Perch > (Cross Pollinated) */
/* a*/
.c-btn__left svg {
    right: 0;
}

/* Molecules > Pagination > Perch > (Cross Pollinated) */
/* a*/
.c-btn__left:hover svg {
    right: 5px;
}

/* Molecules > Pagination > Perch > (Cross Pollinated) */
/* a*/
.c-btn__right svg {
    left: 0;
}

/* Molecules > Pagination > Perch > (Cross Pollinated) */
/* a*/
.c-btn__right:hover svg {
    left: 5px;
}

/* 1 */
.c-btn--1 a,
button.c-btn--1,
/* e.g. Components > Framework > Forms > Layout */
.c-form [type="submit"] {
    background: var(--colour-red);
    color: white;
    border-radius: 50px;
}


/* 2 */
.c-btn--2 a,
button.c-btn--2 {
    /* e.g. >> /contact */
    background: white;
    color: var(--colour-black);
    border-radius: 50px;
}

/* 3 */
.c-btn--3 a {
    /* e.g. >> /news-and-articles/comtrade-gaming-inspires-innovation-and-is-sharing-knowledge-among-future-it-professionals */
    background: white;
    border-radius: 50px;
    border: 3px solid var(--colour-red);
}

/* e.g. Cookies */
button.c-btn--4 {
    background: var(--colour-grey-light-2);
    color: black;
}

/* Info button */
/* HTML Example...

    <section class="c-news-archive u-panel-dark">
        <div class="u-animated-fade-in-up">
        <a href="/get-more-info" class="c-info-button">Get More Info</a>
    </div>
        ...

    OR

    <div class="c-info-button-wrapper">
        <div class="u-animated-fade-in-up">
        <a href="/get-more-info" class="c-info-button">Get More Info</a>
    </div>
    </div>

*/
/* Sometimes this is needed when it's not inside an .o-slide. It's needed as a reference for the absoluetly positioned .c-info-button */
.c-info-button-wrapper {
    position: relative;
}
.c-info-button {
    position: absolute;
    top: 0;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    --button-spacing: var(--button-spacing-vertical) var(--button-spacing-horizontal);
    padding: var(--button-spacing);
    background: var(--colour-red);
    color: white;
    border-radius: 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
    font-size: var(--font-size-s-x);
    box-shadow: var(--box-shadow-s-focus);
}
/* Custom */
@media (max-width: 499px) {
    .c-info-button {
        min-width: 17em;
    }
}
/* GROUP COMPONENTS / FRAMEWORK / BUTTONS / ACCESSIBILITY / HOVER
=================================================== */
/* These should be slightly different to focus states. Subtle effects such as changing the background color from blue to darkblue are best for hover. We want to gently suggest rather than pop out (opposite of focus states).

    - Consider darkening the background color slightly e.g. blue to darkblue
    - Here is a good example...
    https://material-components.github.io/material-components-web-catalog/#/component/button

*/

/* 1 */
/* .c-btn--background-transition-example a:hover {
    background-color: var(--colour-brown-dark);
} */

/* 3 */
.c-btn--3 a:hover {
    color: var(--colour-red);
}
/* GROUP COMPONENTS / FRAMEWORK / BUTTONS / ACCESSIBILITY / FOCUS
=================================================== */
/* e.g. Components > Framework > Forms > Layout */
.c-form [type="submit"]:focus {
    /* e.g. >> /get-more-info */
    outline-color: black;
}




/* GROUP COMPONENTS / FRAMEWORK / SITE LOGO
=================================================== */
.c-site-logo svg {
    width: 100%;
    max-width: min(52vw, 15em);
    height: 100%;
    /* max-height: 2.5em; */
    /* font-size: 1.6em; */
}

/* --mq-nav-full-after to --mq-nav-safe-to-use-full-mask-before */
@media (min-width: 1250px) and (max-width: 1584px) {
    .c-site-logo svg #comtrade,
    .c-site-logo svg #gaming {
        display: none;
    }
}




/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER
=================================================== */
/* HTML Example...

    .c-site-header-wrapper
        .c-site-header
            .c-site-header__logo
            .c-site-header__nav

*/
/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER / LAYOUT
=================================================== */
.c-site-header-wrapper {
    position: absolute;
    width: 100%;
}

.c-site-header {
    display: flex;
    height: var(--header-height);
    align-items: center;
    max-width: var(--max-width-3);
    margin: auto;
}

.c-site-header__site-logo {
    display: flex;
    flex-basis: 100%;
}

.c-site-header__nav ul {
    justify-content: flex-end;
    gap: 1.8em;
}

/* --mq-nav-full-before */
@media (max-width: 1249px) {
    .c-site-header-wrapper {
        /* e.g. pull mobile nav above position:relative; text e.g. on this page >> /products/score/server-based-gaming */
        z-index: var(--z-index-nav);
    }
    .c-site-header__nav {
        width: var(--nav-width);
    }
}

/* --mq-nav-full-after */
@media (min-width: 1250px) {
    .c-site-header__nav ul {
        flex-direction: row;
        align-items: center;
        /* Increase */
        gap: var(--spacing-l);
    }

    .c-site-header__site-logo {
        /* Decrease */
        flex-basis: 25%;
    }

    .c-nav-mobile-button {
        /* =JFG. Hide the toggle button now that nav is always visible */
        display: none;
    }
}
/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER / SPACING
=================================================== */
.c-site-header {
    padding-inline-start: var(--spacing-m);
    padding-inline-end: var(--spacing-m);
}

.c-site-header__nav {
    padding: var(--spacing-l-1) var(--spacing-l);
}

.c-site-header__nav li {
    padding-block-end: 0;
}

.c-site-header__nav button {
    padding: unset;
    margin: unset;
}

/* Custom to --mq-nav-full-before */
@media (min-width: 1024px) and (max-width: 1249px) {
    .c-site-header {
        /* Increase */
        padding-inline-start: var(--spacing-l);
        padding-inline-end: var(--spacing-l);
    }
}

/* --mq-nav-full-after */
@media (min-width: 1250px) {
    .c-site-header__nav {
        padding: unset;
        margin: unset;
    }
}
/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER / DECORATION
=================================================== */
.c-site-header-wrapper {
    background: white;
}

.c-site-logo,
.c-site-header__nav a,
/* I.e. Alpine JS products button */
.c-site-header__nav button,
/* Components > Search > Livewire > Decoration */
.c-livewire-search #search::-webkit-input-placeholder,
.c-livewire-search #search::placeholder {
    text-decoration-line: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
    color: white;
    position: relative;
    z-index: 2;
    font-size: 0.88em;
}

/* Custom to --mq-nav-full-before */
@media (min-width: 768px) and (max-width: 1249px) {
    .c-nav-mobile-button {
        /* Increase */
        font-size: 2em;
    }

    .c-site-logo {
        font-size: 1.1rem;
    }
}

/* --mq-nav-full-before */
@media (max-width: 1249px) {
    .c-site-header {
        /* Pull above red mask */
        background: white;
        position: relative;
        z-index: var(--z-index-above-body);
    }

    .c-site-header__nav {
        background: black;
        border-radius: var(--border-radius-l);
    }
}




/* GROUP COMPONENTS / SITE HEADER / MEGA MENU
=================================================== */
/* purgecss start ignore */
/* Notes...

	- 

*/
/* HTML Example...

    <header class="c-site-header">
        <div class="c-site-header__site-logo">
            <div class="c-site-logo"></div>
        </div>
        <button class="c-nav-mobile-button js__nav-mobile-button u-js-only" />
        <nav aria-label="Main navigation" class="c-site-header__nav js__collapsedUntilNavOpened">
            <ul>
                <li class="c-mega-menu-parent"> <-- THIS is needed to control some z-index
                    <button class="js__megaMenuButton">
                        Products
                    </button>
                    <ul class="c-mega-menu"> <-- HERE
                        <li>
                            <ul class="c-mega-menu__column">
                                <li><h2 class="c-mega-menu__title">iCore</h2></li>
                                <li><a href="">Online Gaming Platform</a></li>
                                <li><a href="">Bonusing</a></li>
                                <li><a href="">CRM for Casino Operators</a></li>
                            </ul>
                            <ul class="c-mega-menu__column">
                                <li><h2 class="c-mega-menu__title">sCore</h2></li>
                                <li><a href="">Online Gaming Platform</a></li>
                                <li><a href="">Bonusing</a></li>
                                <li><a href="">CRM for Casino Operators</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">News</a>
                </li>
                <li>
                    <a href="">About Us</a>
                </li>
                <li>
                    <a href="">Etc.</a>
                </li>
            </ul>
        </nav>
    </header>

*/
/* GROUP COMPONENTS / SITE HEADER / MEGA MENU / LAYOUT
=================================================== */
/* nav ul ul*/
.c-mega-menu {
    position: fixed;
    z-index: var(--z-index-nav);
    width: calc(99% - var(--nav-width) - var(--spacing-l));
    max-width: var(--max-width-3);

    display: unset;
    /* Disable by default unless it's open otherwise it can get in the way. */
    pointer-events: none;
}

.c-mega-menu > li {
    display: grid;
    /* Prevent overflow on screens less than px value */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    row-gap: var(--spacing-l-2);
    column-gap: var(--spacing-s-1);
}

.c-mega-menu__column {
    display: unset;
    position: relative;
}

.c-mega-menu__column a {
    /* So padding is effective */
    display: inline-block;
}

.js__megaMenuCloseButton {
    position: absolute!important;
    top: var(--spacing-m);
    right: var(--spacing-m);
}

.js--megaMenuIsOpen .c-mega-menu {
    pointer-events: unset;
}

/* Custom */
@media (max-width: 1023px) {
    .c-mega-menu {
        overflow: scroll;
        overscroll-behavior-y: contain;
        height: calc(85vh - var(--spacing-s) * 2);
        top: var(--spacing-s);
        right: 0;
    }
}

/* --mq-nav-tablet-before */
@media (max-width: 767px) {
    .c-mega-menu {
        width: 90%;
    }

    /* Hide the immediate site header menu when the Mega Menu is open. This is slightly hacky but needed because of fixed positioning and not being able to set z-index */
    .js--megaMenuIsOpen .c-site-header__nav > ul > li:not(.c-mega-menu-parent),
    .js--megaMenuIsOpen .c-livewire-search {
        z-index: var(--z-index-below-body);
    }
}

/* --mq-nav-tablet-after */
@media (min-width: 768px) {
    .c-mega-menu {
        right: calc(var(--nav-width) + var(--spacing-l));
    }
}
    

/* Custom to --mq-nav-full-before */
@media (min-width: 1024px) and (max-width: 1249px) {
    .c-mega-menu {
        right: calc(var(--nav-width) + var(--spacing-l));
    }
}

/* --mq-nav-full-after */
@media (min-width: 1250px) {
    .c-mega-menu {
        width: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: var(--header-height);
    }
}

.no-js .c-site-header__nav {
    position: absolute;
}

/* Hide but still enable users to tab through */
.no-js .c-mega-menu {
    /* START SCREEN READER TEXT
    --------------------------- */
    clip: rect(1px, 1px, 1px, 1px);

    position: absolute!important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    /* END SCREEN READER TEXT
    ------------------------- */
}
/* GROUP COMPONENTS / SITE HEADER / MEGA MENU / SPACING
=================================================== */
.c-mega-menu {
    padding: var(--spacing-l-1) var(--spacing-l);
}

.c-mega-menu__title {
    padding-block-end: var(--spacing-m);
}

.c-mega-menu__column a {
    /* Not padding because this affects the focus offset centering */
    margin-block-end: var(--spacing-s-x);
    margin-block-end: 0.6rem;
}
/* GROUP COMPONENTS / SITE HEADER / MEGA MENU / DECORATION
=================================================== */
.c-mega-menu {
    background: white;
    box-shadow: var(--box-shadow-s-focus);
    border-radius: var(--border-radius-l);
}

.c-mega-menu__title {
    font-size: var(--font-size-s);
    text-transform: unset;
    font-weight: var(--font-family-main-weight-medium);
    letter-spacing: unset;
}

.c-mega-menu a {
    color: var(--colour-grey-reading);
    font-weight: var(--font-family-main-weight-normal);
    font-size: unset;
    line-height: 1.45;
    text-transform: unset;
    letter-spacing: unset;
}

.js__megaMenuCloseButton svg {
    font-size: var(--icon-size-s);
}

/* --mq-nav-full-after */
@media (min-width: 1250px) {
    .c-mega-menu {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .c-mega-menu__column:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 0;
        right: var(--spacing-l-1);
        height: 100%;
        border-left: 1px solid var(--colour-grey-light-1);
    }
}
/* GROUP COMPONENTS / SITE HEADER / MEGA MENU / ANIMATIONS
=================================================== */
.js:not(.js--megaMenuHasBeenOpened) .c-mega-menu {
    display: none;
}

.js--megaMenuIsOpen.js--navIsOpen .c-site-header__nav {
    animation: none;
}

.js--megaMenuIsOpen .c-mega-menu {
    animation-name: slide-in-left;
    animation-duration: 0.35s;
    animation-fill-mode: both;
}

.js--megaMenuHasBeenOpened:not(.js--megaMenuIsOpen) .c-mega-menu {
    animation-name: slide-out-right;
    animation-duration: 0.35s;
    animation-fill-mode: both;
}

.js .c-mega-menu__column li {
    opacity: 0;
}

.js--megaMenuIsOpen .c-mega-menu__column li {
    animation-name: fade-in;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
    max-width: 15rem;
}

/* Staggered animation */
.c-mega-menu__column li:nth-child(1) {
    /* Need to give it at least a tiny bit (not 0s) otherwise blips on iOS */
    animation-delay: calc(0.035s * 1);
}
.c-mega-menu__column li:nth-child(2) {
    animation-delay: calc(0.035s * 2);
}
.c-mega-menu__column li:nth-child(3) {
    animation-delay: calc(0.035s * 4);
}
.c-mega-menu__column li:nth-child(4) {
    animation-delay: calc(0.035s * 6);
}
.c-mega-menu__column li:nth-child(5) {
    animation-delay: calc(0.035s * 8);
}
.c-mega-menu__column li:nth-child(6) {
    animation-delay: calc(0.035s * 10);
}
.c-mega-menu__column li:nth-child(7) {
    animation-delay: calc(0.035s * 12);
}

/* --mq-nav-tablet-after */
@media (min-width: 768px) {
    .js--megaMenuIsOpen .c-mega-menu {
        animation-name: fade-in;
    }

    .js--megaMenuHasBeenOpened:not(.js--megaMenuIsOpen) .c-mega-menu {
        animation-name: fade-out;
    }
}
/* purgecss end ignore */



/* GROUP COMPONENTS / FRAMEWORK / NAV / CURRENT PAGE
=================================================== */
.c-site-header__nav .current-menu-item {
    text-decoration: underline;
}

.c-mega-menu .current-menu-item {
    text-underline-offset: 0.125em;
    text-decoration-color: hsl(0deg 0% 0% / 20%);
}



/* GROUP COMPONENTS / NAV / SECTION NAV
=================================================== */
/* Notes...

    URL example
    -----------
    /games

    What does it do?
    ----------------
    Pill-like navigation so people can select different filters

*/
/* HTML Example...

*/
.c-section-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-m);
    flex-direction: row;
    justify-content: center;
    align-items: center;

    padding-block: var(--spacing-m);

    font-size: var(--font-size-s-1);
}
.c-section-nav a {
    text-decoration: none;
    color: var(--colour-black);
}
.c-section-nav .o-current-nav {
    color: var(--colour-red);
}
.c-section-nav li {
    padding-block-end: 0;
}



/* GROUP COMPONENTS / STARKER FRAMEWORK / IMAGE WITH TEXT
=================================================== */
/* Notes...

	- Image with text overlaid on top
	   - Optionally art direct or change the image orientation using the picture element
	   - Add loading="lazy" if the image is further down the page

*/
/* HTML Example...

    <div class="c-image-with-text">
        <div class="c-image-with-text__text">
            <h2>Headline</h2>
            <p>Or paragraph</p>
        </div>
        <picture>
            <source srcset="
                https://picsum.photos/750/500.webp 750w,
                https://picsum.photos/500/333.webp 1000w,
                https://picsum.photos/768/512.webp 1536w,
                https://picsum.photos/1024/683.webp 2048w,
                https://picsum.photos/1440/960.webp 2880w,
                https://picsum.photos/1680/1120.webp 3360w"

                type="image/webp" sizes="100vw"
            >

            <source srcset="
                https://picsum.photos/750/500 750w,
                https://picsum.photos/500/333 1000w,
                https://picsum.photos/768/512 1536w,
                https://picsum.photos/1024/683 2048w,
                https://picsum.photos/1440/960 2880w,
                https://picsum.photos/1680/1120 3360w"

                type="image/jpeg" sizes="100vw"
            >

            <img src="/" width="3456" height="2304" alt="Some alt text here" class="c-image-with-text__image">
        </picture>
    </div>

*/
/* Modifiers...

    .c-image-with-text--bw <-- greyscale
    .c-image-with-text--centered
    .c-image-with-text--clear-text <-- e.g. white text that's not affected by the mask e.g. /gcore-game-engine
    .c-image-with-text--followed-by-pulled-up-component <-- e.g. /home .c-image-with-text followed by .c-hero-columns--pull-up
    .c-image-with-text--s <-- smaller banner e.g. product page banners
    .c-image-with-text--title-s <-- shorter title e.g. /home 'Technology behind gaming'
    .c-image-with-text--image-above-mask <-- this sets the mask height to the header height, essentially creating the illusion that the image is above the mask

*/
/* GROUP COMPONENTS / STARKER FRAMEWORK / IMAGE WITH TEXT / LAYOUT
=================================================== */
.c-image-with-text {
    position: relative;
    --height: min(50rem, 75vh);
    /* Half */
    --top: 50%;
}

.c-image-with-text,
.c-header-mask {
    overflow-x: hidden;
}

.c-image-with-text--s {
    --height: 80vh;
    /* Half */
    --top: 40%;
}

.c-image-with-text__image {
    width: 100%;
    height: var(--height);
    object-fit: cover;
    object-position: 50% 0%!important; /* Override focus, which I think we should just use for mobile e.g. >> /games */
}

.c-image-with-text__text {
    position: absolute;
    top: calc(50% + var(--header-height) / 2);
    transform: translateY(-50%);

    width: 100%;

    text-align: center;
}

.c-image-with-text__text small {
    display: inline-block;
}

.c-image-with-text__text :is(h1, h2) {
    max-width: var(--max-width-title);
    margin: auto;
}

.c-image-with-text--centered {
    text-align: center;
}

.c-image-with-text__image {
    position: relative;
    z-index: var(--z-index-below-body);
}

.c-image-with-text--bw .c-image-with-text__image {
    filter: grayscale(100%) contrast(115%);
}

/* Landscape devices */
@media (min-aspect-ratio: 1680/1150) {
    .c-image-with-text,
    .c-header-mask {
        --height: 79vh;
    }
    .c-image-with-text--followed-by-pulled-up-component {
        --height: 85vh;
    }

    .c-image-with-text--s {
        --height: 60vh;
    }
}
/* GROUP COMPONENTS / STARKER FRAMEWORK / IMAGE WITH TEXT / SPACING
=================================================== */
.c-image-with-text__text {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
}

.c-image-with-text__text small {
    padding-block-start: var(--spacing-s-1);
}

/* Make sure default padding doesn't affect centering */
.c-image-with-text__text > *:first-child {
    padding-block-start: 0;
}

.c-image-with-text__text > *:first-child {
    padding-block-end: 0;
}
/* GROUP COMPONENTS / STARKER FRAMEWORK / IMAGE WITH TEXT / DECORATION
=================================================== */
@supports (pointer-events: none) {
    .c-image-with-text::before {
        content: "";
        pointer-events: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        height: calc(var(--height) - var(--header-height));
        width: 100%;
        background: var(--colour-gradient-shade);
    }
}

.c-image-with-text--image-above-mask::after {
    --height: var(--header-height);
}

@supports (pointer-events: none) {
    .c-image-with-text::after,
    .c-header-mask::after {
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: var(--height);
        width: 100%;

        /* mix-blend-mode: color-burn; */
        /* mix-blend-mode: color; */
        /* mix-blend-mode: overlay; */
        /* mix-blend-mode: multiply; */
        mix-blend-mode: darken;

        background-image: url("/img/svg/mask-cover-top-more.svg");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .c-image-with-text--no-mask::after,
    .c-header-mask::after {
        /* Pseudo clip the mask to the header */
        height: var(--header-height);
    }
}

@media (orientation: portrait) {
    @supports (pointer-events: none) {
        .c-image-with-text::after,
        .c-header-mask::after {
            background-image: url("/img/svg/mask-portrait.svg");
        }
    }
}

/* --mq-nav-safe-to-use-full-mask-before */
@media (min-width: 1585px) {
    @supports (pointer-events: none) {
        .c-image-with-text::after,
        .c-header-mask::after {
            background-image: url("/img/svg/mask.svg");
        }
    }
}

.c-image-with-text__text :is(h1, h2, h3, p) {
    color: white;
    font-size: var(--font-size-l-1-headline);
    line-height: var(--font-size-l-1-line-height);
    letter-spacing: var(--letter-spacing-m);
}

/* Modifier added in the CMS e.g. https://comtrade.wip/cp/collections/pages/entries/f2366949-90e6-4f15-8315-e144bd97c983 */
.c-image-with-text--uppercase :is(h1, h2, h3, p) {
    text-transform: uppercase;
}

/* Custom */
@media (max-width: 499px) {
    .c-image-with-text--title-s .c-image-with-text__text :is(h1, h2, h3, p) {
        /* e.g. Home headline on an iPad and also on mobile with the word "Technology" */
        --font-size-l-1-headline: clamp(5.063em * 0.55, 8vw, 5.063em);
    }
}

.c-image-with-text--clear-text .c-image-with-text__text {
    /* e.g. >> /gcore-game-engine */
    z-index: var(--z-index-above-body);
}




/* GROUP COMPONENTS / GAME BANNER
=================================================== */
/* Notes...

	- Background banner with game artwork overlaid
	   - This is a deviation of the .c-image-with-text component

*/
/* HTML Example...

    <header class="c-game-banner">
        <h1 class="u-screen-reader-text"></h1>
        <div class="c-game-banner__breadcrumbs">Back to Games</div>
        <picture></picture>
        <div class="c-game-banner__illustration-text__stats">
            <dl>
                <div>
                    <dt>RTP</dt>
                    <dd>Very High</dd>
                </div>
                <div>
                    <dt>Volatility</dt>
                    <dd>96.5%</dd>
                </div>
            </dl>
        </div>
    </header>

*/
.c-game-banner {
    position: relative;
    --cap: 40rem;
    --gap: min(6vw, var(--spacing-l-4));

    --height: min(var(--cap), 100vmin);
    /* Half */
    --top: 50%;
    --min-height: 26rem;
    /* Custom */
    @media (max-height: 499px) {
        --min-height: 33rem;
    }
    margin-block-end: var(--spacing-l-2);
}

.c-game-banner > picture {
    & img {
        min-height: var(--min-height);
    }
}

.c-game-banner__breadcrumbs {
    background: hsl(0deg 0% 0% / 40%);
    border-top-right-radius: var(--border-radius-l);
    border-bottom-right-radius: var(--border-radius-l);
    color: white;
    position: absolute;
    z-index: var(--z-index-above-body);
    top: 15vh;
    padding: var(--spacing-s) var(--spacing-m);
    font-weight: var(--font-family-main-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-s);
    font-size: var(--font-size-s-x);
}

.c-game-banner__breadcrumbs a {
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
}

.c-game-banner::after {
    --height: var(--header-height);
}

.c-game-banner__inner-wrapper {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: var(--max-width-2);
    left: 50%;
    transform: translateX(-50%);
    height: calc(100% - var(--header-height));
    contain: paint;

    display: grid;
    gap: var(--gap);
}

.c-game-banner__illustration {
    height: calc(100% - var(--header-height));
    height: 100%;
    display: grid;
    align-items: end;
    justify-content: center;
}

.c-game-banner__illustration img {
    position: absolute;
    bottom: 0;
    left: 0;
    max-height: 90%;
    width: unset;
}

.c-game-banner__illustration-text {
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: var(--spacing-l-3);
}

.c-game-banner__illustration-text__stats {
    display: flex;
    gap: var(--spacing-s-1);
}

.c-game-banner__illustration-text__stats dl {
    display: flex;
    justify-content: center;
    gap: var(--spacing-s-1);
    padding: 0;
    margin: 0;
}

.c-game-banner__illustration-text__stats dl div,
.c-game-banner__download {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-m) var(--spacing-s);
    background: hsl(0deg 0% 100% / 80%);
    backdrop-filter: blur(10px);
    border-top-left-radius: var(--border-radius-l);
    border-top-right-radius: var(--border-radius-l);
}
/* Custom */
@media (min-width: 500px) {
    .c-game-banner__illustration-text__stats dl div,
    .c-game-banner__download {
        width: 8rem;
    }
}

.c-game-banner__download {
    justify-content: center;
    font-size: var(--font-size-s);
    line-height: var(--font-size-s-line-height);
    text-decoration: none;
    background: var(--colour-red);
    color: white;
}

.c-game-banner__illustration-text__stats dt {
    text-transform: uppercase;
    font-size: var(--font-size-s-x);
    font-weight: var(--font-family-main-weight-medium);
    padding-block-end: 0;
}

.c-game-banner__illustration-text__stats dd {
    margin: 0;
    font-weight: var(--font-family-main-weight-medium);
    font-size: var(--font-size-s);
    line-height: var(--font-size-s-line-height);
    padding-block-end: 0;
}

.c-game-banner__illustration-text picture {
    max-width: 65%;
    max-height: 50%;
}

@supports (pointer-events: none) {
    .c-game-banner::before {
        content: "";
        pointer-events: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        height: calc(var(--height) - var(--header-height));
        min-height: calc(var(--min-height) - var(--header-height));
        width: 100%;
        background: var(--colour-gradient-shade);
    }
}

@supports (pointer-events: none) {
    .c-game-banner::after,
    .c-header-mask::after {
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: var(--header-height);
        width: 100%;

        mix-blend-mode: darken;

        background-image: url("/img/svg/mask-cover-top-more.svg");
        background-repeat: no-repeat;
        background-size: cover;
    }
}
/* GROUP COMPONENTS / GAME BANNER / MQs
=================================================== */
@media (orientation: portrait) {
    .c-game-banner {
        --cap: 35rem; /* Decrease */
    }
    @supports (pointer-events: none) {
        .c-game-banner::after,
        .c-header-mask::after {
            background-image: url("/img/svg/mask-portrait.svg");
        }
    }
}

/* Custom */
@media (max-width: 767px) {
    .c-game-banner__illustration {
        display: none;
    }
    .c-game-banner__illustration-text {
        align-items: center;
        gap: var(--spacing-l);
    }
}
/* Custom */
@media (min-width: 768px) {
     .c-game-banner__inner-wrapper {
        grid-template-columns: 1fr 1fr;
    }   
}
/* --mq-nav-safe-to-use-full-mask-after */
@media (min-width: 1585px) {
    @supports (pointer-events: none) {
        .c-game-banner::after,
        .c-header-mask::after {
            background-image: url("/img/svg/mask.svg");
        }
    }
}



/* GROUP COMPONENTS / GAME INFO
=================================================== */
/* Notes...

    URL example
    -----------
    /games/sweet-treasures

    What does it do?
    ----------------
    Lays out game info

*/
/* HTML Example...

*/
.c-game-info {
    --gap: min(6vw, var(--spacing-l-4));

    max-width: var(--max-width-2);
    margin-inline: auto;
    padding-inline: var(--spacing-l);
    padding-block-end: var(--spacing-l-3);

    display: grid;
    gap: var(--spacing-l-3) var(--gap);
}
/* Custom */
@media (min-width: 768px) {
    .c-game-info {
         grid-template-columns: 1fr 1fr;
    }
}
.c-game-info__tabular div:has(svg) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s-x-x) var(--spacing-s-x);
}
.c-game-info__tabular div:has(svg) span {
    display: flex;
    align-items: center;
    gap: var(--spacing-s-x);
}
.c-game-info__tabular div:has(svg) + div {
    font-size: var(--font-size-s-x);
    line-height: var(--font-size-s-x-line-height);
    margin-top: var(--spacing-s-x-x);
    font-weight: var(--font-family-main-weight-normal);
}
.c-game-info__tabular svg {
    font-size: var(--icon-size-s);
    border-radius: 7px;
}
.c-game-info__tabular h2 {
    color: var(--colour-red);
}

.c-game-info table {
    --border-radius: 10px;
    /* min-width: 580px; */
    border-spacing: 0;
    width: 100%;
    font-size: 1.1em;
}

.c-game-info table th, .c-game-info table td {
    padding: var(--spacing-s);
}

.c-game-info table td:first-child {
    padding-inline-start: 0;
}

.c-game-info table td:not(:first-child) {
    font-weight: var(--font-family-main-weight-medium);
}

.c-game-info table thead th {
    border-block-end: 1px solid black;
}

.c-game-info table th {
    background: var(--color-primary-text);
    color: white;
    text-transform: uppercase;
    text-align: left;
    font-size: var(--font-size-s-4);
    letter-spacing: 1px;
}

.c-game-assets {
    margin-top: var(--spacing-s);
    padding-inline: 0 !important;
}

/* GROUP TABLES / (MODIFICATIONS) / STRIPED
=================================================== */
table > tbody > tr:nth-child(even) > td {
    background-color: #f8f8f8;
    position: relative;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}
table > tbody > tr:nth-child(even) > td::before {
    content: '';
    position: absolute;
    z-index: var(--z-index-below-body);
    left: -0.75em;
    height: 100%;
    top: 0;
    background-color: #f8f8f8;
    width: 1rem;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}
/* GROUP COMPONENTS / GAME PREVIEW
=================================================== */
/* Notes...

    URL example
    -----------
    /games/sweet-treasures

    What does it do?
    ----------------
    Lays out game screenshot previews

*/
/* HTML Example...

*/
.c-game-preview {
    width: 80%;
    max-width: 61rem;
    margin-inline: auto;
    padding-block-end: var(--spacing-l-2);
    &:has(+ .c-game-coming-soon-image) {
        padding-block-end: var(--spacing-s-x-x);
    }
    &:has(.c-btn, + .c-game-coming-soon-image) {
        padding-block-end: var(--spacing-l);
    }

    text-align: center;
}
.c-game-preview img {
    width: 100%;
    border: 10px solid var(--colour-black);
    border-radius: 50px;
    margin-block-end: var(--spacing-l);
}
.c-game-preview .c-btn {
    margin-block-end: 0;
}
/* Custom */
@media (max-width: 599px) {
    .c-game-preview {
        width: 75%;
        max-width: 20rem;
    }
}
.c-game-coming-soon-image {
    max-width: 9rem;
    margin-inline: auto;
    padding-block-end: var(--spacing-l-2);
    img {
        border-radius: var(--border-radius-l);
    }
}
/* GROUP COMPONENTS / GAME SCREENSHOTS
=================================================== */
/* Notes...

    URL example
    -----------
    /games/sweet-treasures

    What does it do?
    ----------------
    Lays out game info

*/
/* HTML Example...

*/
.c-game-screenshots {
    max-width: var(--max-width-2);
    margin-inline: auto;
    padding-inline: var(--spacing-l);
}
.c-game-screenshots .h3 {
    color: var(--colour-red);
}
.c-game-screenshots__screenshots {
    display: grid;
    /* Prevent overflow on screens less than em or px value */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24em), 1fr));
    gap: var(--spacing-m);
    padding-block: var(--spacing-l);
    position: relative;
}
.c-game-screenshots__screenshots::before {
    content: '';
    position: absolute;
    z-index: var(--z-index-below-body);
    inset: 0;
    background: var(--colour-grey-light-2);
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-inline: -50vw;
}
.c-game-screenshots__screenshots figcaption {
    text-align: center;
    font-size: 1.1em;
}



/* GROUP COMPONENTS / HEADER MASK / (CROSS POLLINATED)
=================================================== */
/* Notes...

    - The header mask is used when you're not using an image with text but just want to use a header mask on its own e.g. contact page
    - This is mostly cross-pollinated with GROUP COMPONENTS / STARKER FRAMEWORK / IMAGE WITH TEXT

*/
/* HTML Example...

    <body>
        </header> <-- standard header

        <header class="c-header-mask c-contact-map"> <-- instead of .c-image-with-text
            <div class="c-contact-map__map"></div>
            <div class="c-contact-map__text"></div>
        </header>

        <main/>
        <footer/>
    </body>

*/
.c-header-mask .o-slide {
    /* e.g. >> /get-more-info */
    padding-block-start: calc(var(--spacing-vh-s) + var(--header-height) + 0.5em);
    /* e.g. >> /products/gcore/the-game-engine */
    padding-block-end: var(--spacing-vh-s);
}

.c-header-mask .c-slide-text {
    padding-block-end: 0;
}




/* purgecss start ignore */
/* GROUP COMPONENTS / SEARCH / LIVEWIRE
=================================================== */
/* GROUP COMPONENTS / SEARCH / LIVEWIRE / LAYOUT
=================================================== */
/* .c-livewire-search {
    max-width: var(--max-width-2);
    margin: auto;
} */

.c-livewire-search {
    z-index: var(--z-index-above-body);
}

.c-livewire-search > div {
    position: relative;
}

/* Search Icon */
.c-livewire-search > div > div {
    display: flex;
    position: absolute;
    top: 50%;
    left: var(--spacing-s-1);
    transform: translate(0, -50%);
}

/* Search box */
.c-livewire-search #search {
    /* e.g. mobile */
    width: 100%;
}

/* Search results */
.c-livewire-search #search + div {
    position: absolute;
    z-index: 1;
    top: 5rem;
    left: 0;
    transform: initial;
}
.c-livewire-search #search + div a {
    display: block;
}
/* GROUP COMPONENTS / SEARCH / LIVEWIRE / SPACING
=================================================== */
.c-livewire-search #search {
    padding: 0.95rem 3.8rem;
    padding-inline-end: 1.5rem;
    margin-block-end: 0;
}

.c-livewire-search a,
/* No Results Box, i.e. not a link */
.c-livewire-search #search + div > div:first-child > *:not(a) {
    padding: var(--spacing-s) var(--spacing-s-1);
}

.c-livewire-search svg {
    margin-inline-start: var(--spacing-s-x);
}

/* --mq-nav-full-before */
@media (max-width: 1249px) {
    .c-livewire-search {
        margin-block-start: var(--spacing-s);
    }
}
/* GROUP COMPONENTS / SEARCH / LIVEWIRE / DECORATION / (CROSS POLLINATED)
=================================================== */
.c-livewire-search {
    --colour-focus: black;
}

/* Search Box */
.c-livewire-search #search {
    border: 3px solid white;
    background: transparent;
    border-radius: var(--border-radius-l);
    border-radius: 50px;
    font-weight: var(--font-family-main-weight-medium);
}

/* "search text" */
.c-livewire-search #search,
.c-livewire-search #search::-webkit-input-placeholder,
.c-livewire-search #search::placeholder {
    color: white;
    opacity: 1;
}

.c-livewire-search #search + div * {
    font-size: 0.95rem!important;
}

/* Search Results */
.c-livewire-search #search + div {
    background: white;
    /* box-shadow: var(--box-shadow-clean); */
    border-radius: var(--border-radius-l);
}

.c-livewire-search #search + div a {
    text-decoration: none;
}

.c-livewire-search svg {
    color: white;
    font-size: 1.2em;
}

/* -- */
.c-livewire-search a {
    color: black;
    text-transform: none;
    letter-spacing: unset;
}
/* GROUP COMPONENTS / SEARCH / LIVEWIRE / ACCESSIBILITY
=================================================== */
:focus-visible {
    /* outline: -webkit-focus-ring-color auto 1px; */
    outline: white auto 4px;
}

/* Hidden search box */
.c-livewire-search > [type="search"] {
    /* outline: -webkit-focus-ring-color auto 1px; */
    /* Hide this  */
    display: none;
}

/* The 'cancel' cross */
::-webkit-search-cancel-button {
    /* Make it white */
    filter: grayscale(100%) contrast(500%) invert(1);
}
/* GROUP COMPONENTS / SEARCH / LIVEWIRE / ACCESSIBILITY / FOCUS
=================================================== */
.c-livewire-search {
    caret-color: white;
}

.c-livewire-search a:focus {
    background-color: var(--colour-focus);
    color: white;
    outline: none;
}

.c-livewire-search a:first-child {
    border-top-right-radius: var(--border-radius-l);
    border-top-left-radius: var(--border-radius-l);
}

.c-livewire-search a:last-child {
    border-bottom-right-radius: var(--border-radius-l);
    border-bottom-left-radius: var(--border-radius-l);
}
/* GROUP COMPONENTS / SEARCH / LIVEWIRE / ACCESSIBILITY / HOVER
=================================================== */
.c-livewire-search a:hover {
    background: hsl(0deg 0% 95%);
    color: var(--colour-black);
}
/* purgecss end ignore */



/* purgecss start ignore */
/* GROUP COMPONENTS / SEARCH / SECTION NAV SEARCH
=================================================== */
/* GROUP COMPONENTS / SEARCH / SECTION NAV SEARCH / LAYOUT
=================================================== */
.c-section-nav-search > div {
    position: relative;
}

.c-section-nav-search form {
    display: flex;
}

/* Search Icon */
/* .c-section-nav-search > div > div {
    display: flex;
    position: absolute;
    top: 50%;
    left: var(--spacing-s-1);
    transform: translate(0, -50%);
}
 */
/* GROUP COMPONENTS / SEARCH / SECTION NAV SEARCH / SPACING
=================================================== */
.c-section-nav-search [type="search"],
.c-section-nav-search [type="submit"] {
    padding: 0.5rem 1.5rem;
}

.c-section-nav-search [type="search"] {
    padding: 0.5rem 1.5rem;
    padding-inline-end: 1.5rem;
    margin-block-end: 0;
    /* font-size: var(--font-size-s-x); */
}

/* .c-section-nav-search svg {
    margin-inline-start: var(--spacing-s-x);
} */
/* GROUP COMPONENTS / SEARCH / SECTION NAV SEARCH / DECORATION / (CROSS POLLINATED)
=================================================== */
.c-section-nav-search {
    --colour-focus: black;
}

.c-section-nav-search * {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-s);
}

.c-section-nav-search [type="search"] {
    border: 3px solid var(--colour-red);
}

/* Search Box */
.c-section-nav-search [type="search"] {
    background: transparent;
    border-radius: var(--border-radius-l);
    border-radius: 50px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    font-weight: var(--font-family-main-weight-medium);
    max-width: 13rem;
}

/* "search text" */
.c-section-nav-search [type="search"],
.c-section-nav-search [type="search"]::-webkit-input-placeholder,
.c-section-nav-search [type="search"]::placeholder {
    color: white;
    color: var(--colour-black);
    opacity: 1;
}

.c-section-nav-search [type="submit"] {
    padding-inline: 1rem 1.45rem;
    border-radius: 50px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: var(--colour-red);
    color: white;
    letter-spacing: var(--letter-spacing-s);
    margin-inline-end: 0;
}

/* .c-section-nav-search svg {
    color: white;
    font-size: 1.2em;
} */

/* GROUP COMPONENTS / SEARCH / SECTION NAV SEARCH / ACCESSIBILITY
=================================================== */
.c-section-nav form :focus-visible {
    /* outline: -webkit-focus-ring-color auto 4px; */
    outline: unset;
}
/* purgecss end ignore */




/* GROUP COMPONENTS / SECTION HEADING
=================================================== */
.c-section-heading {
    text-align: center;
    /* e.g. >> /about-us > Comtrade Group*/
    padding-block-end: var(--spacing-l-3);
}

.c-section-heading--b-s {
    /* e.g. >> Home */
    /* e.g. >> /about-us > Management */
    padding-block-end: var(--spacing-l-1);
}




/* GROUP COMPONENTS / EYEBROW HEADING
=================================================== */
/* Notes...

	- e.g. /about-us

*/
/* HTML Example...

    <section class="o-slide">
        <div class="o-slide__inner">
            <h2 class="c-eyebrow-headline">We Strive To</h2>
        </div>
    </section>

*/
/* GROUP COMPONENTS / EYEBROW HEADING / LAYOUT
=================================================== */
.c-eyebrow-heading {
    text-align: center;
}
/* GROUP COMPONENTS / EYEBROW HEADING / SPACING
=================================================== */
.c-eyebrow-heading {
    /* e.g. >> /about-us */
    /* e.g. >> /score-g2s-and-s2s-protocol-stacks */
    padding-inline: var(--spacing-l);
    padding-block-end: var(--spacing-l-2);
}

.c-eyebrow-heading + .c-profile-cards {
    /* e.g. >> /score-g2s-and-s2s-protocol-stacks */
    padding-block-start: var(--spacing-s-1);
}
/* GROUP COMPONENTS / EYEBROW HEADING / DECORATION
=================================================== */
.c-eyebrow-heading {
    /* e.g. >> /gcore-game-engine */
    font-size: var(--font-size-s);
    font-weight: var(--font-family-main-weight-normal);
    letter-spacing: var(--letter-spacing-l);
    text-transform: uppercase;
}




/* GROUP COMPONENTS / EYEBROW PARAGRAPH
=================================================== */
/* Notes...

   - e.g. >> /online-gaming-platform-icore
   - Similar to heading e.g. positioning, etc.

*/
/* HTML Example...

    <section class="o-slide">
        <div class="o-slide__inner">
            <p class="c-eyebrow-paragraph">All of this is possible due to iCore’s seamless wallet which records all player activity, giving the operator full control in steering every player’s life-cycle in the right direction.</p>
        </div>
    </section>

*/
/* Modifiers...

    .c-eyebrow-paragraph--l
    .c-eyebrow-paragraph--left-aligned

*/
.c-eyebrow-paragraph {
    max-width: var(--max-width-reading);
    margin-inline: auto;
}
/* GROUP COMPONENTS / EYEBROW HEADING / LAYOUT
=================================================== */
.c-eyebrow-paragraph {
    text-align: center;
}
/* GROUP COMPONENTS / EYEBROW HEADING / SPACING
=================================================== */
.c-eyebrow-paragraph {
    padding-inline: var(--spacing-l);
    padding-block-end: var(--spacing-l-2);
}

.c-eyebrow-paragraph:last-child {
    /* e.g. >> /score-g2s-and-s2s-protocol-stacks */
    padding-block-start: var(--spacing-l-4);
    padding-block-end: 0;
}

.c-eyebrow-paragraph + .c-slide-text-columns {
    /* e.g. >> /igaming-platform */
    padding-block-start: var(--spacing-m);
}
/* GROUP COMPONENTS / EYEBROW HEADING / MODIFIERS
=================================================== */
/* e.g. >> /gaming-systems-management-score */
.c-eyebrow-paragraph--l {
    max-width: var(--max-width-reading-long);
    font-size: var(--font-size-s);
}

.c-eyebrow-paragraph--left-aligned {
    text-align: left;
}





/* GROUP COMPONENTS / INFOGRAPH
=================================================== */
/* HTML Example...

    <div class="o-slide o-slide--compressed-t-1 o-slide--compressed-b-1">
        <div class="o-slide__inner">
            <div class="c-infographic">
                <img src="/img/products/online-gaming-platform-icore/icore.jpg" alt="iCore flow diagram" />
            </div>
        </div>
    </div>

*/
/* Modifiers...

    .c-infographic--inline-start <-- i.e. float left
    .c-infographic--l <-- /products/gcore/the-game-engine

*/
/* img*/
.c-infographic {
    box-sizing: content-box;
    max-width: calc(var(--max-width-reading-columns));
    margin-inline: auto;
    /* e.g. >> /resource-library/how-genting-alderney-adopted-icore */
    padding-inline: var(--spacing-l);
    text-align: center;
}

.c-infographic + .s-entry-content {
    /* e.g. >> /resource-library/how-genting-alderney-adopted-icore */
    /* e.g. >> /resource-library/casino-monitoring-system-austria */
    padding-block-start: var(--spacing-l-2);
}

.c-infographic--inline-start {
    margin-inline-start: 0;
    /* e.g. >> /resource-library/casino-monitoring-system-austria */
    text-align: left;
}

/* e.g. >> /products/gcore/the-game-engine */
.c-infographic--l {
    box-sizing: border-box;
    max-width: var(--max-width-1);
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
}



/* GROUP COMPONENTS / FOOTER IMAGE
=================================================== */
/* picture*/
.c-footer-image img {
    /* e.g. >> /about-us */
    width: 100%;
}





/* GROUP SCOPE / FRAMEWORK / ENTRY / ENTRY CONTENT
=================================================== */
/* Notes...

    - Based on WordPress Genesis Entry Content but tailored for neutral frameworks

*/
/* GROUP SCOPE / FRAMEWORK / ENTRY / ENTRY CONTENT / LAYOUT
=================================================== */
.s-entry-content {
    max-width: var(--max-width-reading);
}
/* GROUP SCOPE / FRAMEWORK / ENTRY / ENTRY CONTENT / SPACING
=================================================== */
.s-entry-content {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
    /* e.g. >> /resource-library/how-genting-alderney-adopted-icore */
    padding-block-end: var(--spacing-l-2);
}

.s-entry-content :is(ol, ul) {
    padding-inline-start: 0.8rem;
}

.s-entry-content p + :is(ol, ul) {
    padding-block-start: var(--spacing-s);
    padding-block-end: var(--spacing-m);
}

.s-entry-content li :is(ol, ul) {
    /* e.g.

    <ul>
        <li>something</li>
        <li>something else
            <ol> <-- we don't want this to have extra padding

    */
    padding-inline: 0;
    padding-block-start: 0;
}

.s-entry-content li {
    /* e.g. ul li */
    padding-inline-start: var(--spacing-s-x-x);
}

/* Bard wraps <li> text in a <p> tag */
.s-entry-content li p:only-child {
    padding-block-end: 0;
}

.s-entry-content > .h1 {
    padding-block-start: 0;
}

/* e.g. when we have .s-entry-child divs following each other with blocks */
.s-entry-content:last-child,
/* e.g. cancel the last p tag from adding to the VERTICAL SPACING */
.s-entry-content > *:last-child {
    padding-block-end: 0;
}

/* e.g. an img output wrapped in a figure element */
.s-entry-content figure {
    margin: 0;
}
/* GROUP SCOPE / FRAMEWORK / ENTRY / ENTRY CONTENT / DECORATION
=================================================== */
/* e.g. an img output wrapped in a figure element */
/* .s-entry-content figure {
    
} */




/* GROUP UTILITIES / FRAMEWORK
=================================================== */
.qa-test {
    border: 3px solid red!important;
}

/* Images without alt tags */
/* img[alt=""],
img:not([alt]) {
    border: 5px dashed red;
} */

/* Components > Framework > Nav */
.no-js .u-js-only {
    display: none!important;
}

/* Text meant only for screen readers. */
/* Components > Framework > Nav */
.u-screen-reader-text {
    /* START SCREEN READER TEXT
    --------------------------- */
    clip: rect(1px, 1px, 1px, 1px);

    position: absolute!important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    /* END SCREEN READER TEXT
    ------------------------- */
}

/* Needed if the text should be visible on keyboard focus */
.u-screen-reader-text:focus {
    clip: auto!important;

    z-index: 100000; /* Above WP toolbar. */
    display: block;
    top: 0;
    left: 0;

    width: auto;
    height: auto;
}
/* GROUP UTILITIES / FRAMEWORK / (NON CORE)
=================================================== */
.u-link-style-none,
.u-link-style-none * {
    font-weight: inherit;
    text-decoration: none;
    color: inherit;
    border-bottom: 0;
}

.u-line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Change this line if you want. In this case it trimmed the text to 3 lines. */
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.u-line-clamp--3 {
    /* Trimmed the second tile to four lines. */
    -webkit-line-clamp: 3;
}
/* GROUP UTILTIES / FRAMEWORK / (NON CORE) / ANIMATIONS / KEYFRAMES
=================================================== */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translate3d(0, 5vh, 0);
    }
    
    75%, 100% {
        opacity: 1;
        transform: none;
    }
}
/* GROUP UTILITIES
=================================================== */
.u-accent-colour {
    color: var(--colour-red);
}
/* GROUP UTILITIES / DYNAMIC FONT SIZES
=================================================== */
/* Custom */
@media (max-width: 409px) {
    .u-font-size-l-1--long {
        font-size: calc(var(--font-size-l-1) - 0.5em);
    }
}
/* GROUP UTILITIES / FRAMEWORK / LAYOUT / CONSTRAINTS / MAX
=================================================== */
[class*="u-width-max-"] {
    max-width: var(--max-width-reading);
    margin-inline: auto;
}

.u-width-max-1 {
    max-width: var(--max-width-1);
}
/* GROUP UTILITIES / DECORATION
=================================================== */
.u-freeform-case {
    /* e.g. >> /gcore-game-engine when you want to type gCORE rather than GCORE */
    text-transform: none!important;
}

.u-logomark-motif {
    position: relative;
}

.u-logomark-motif::before {
    content: "";
    position: absolute;
    top: -1em;
    left: 50%;
    transform: translateX(-50%);
    height: 3em;
    width: 3em;
    background-image: url("/img/svg/logomark.svg");
    background-repeat: no-repeat;
}
/* GROUP UTILITIES / DECORATION / DOTS MOTIF
=================================================== */
/* HTML Example...

    <div class="o-slide u-logomark-motif">
        <div class="o-slide__inner">
            <div class="c-slide-columns">
                <div class="c-slide-columns__column">
                    <h2 class="c-slide-columns__heading u-dots-motif u-dots-motif--heading"><span>About <br/>Us</span></h2>
                </div>
                <div class="c-slide-columns__column">
                    <p>In the <strong>omni-channel</strong> world of gaming, the <strong>mobile casino</strong> has become a standard. To retain the players, an online casino should be able to provide a high-quality mobile games.</p>
                </div>
            </div>
        </div>
    </div>

*/
/* e.g. >> Home > About Us */
.u-dots-motif {
    position: relative;
}

.u-dots-motif::after {
    content: "";
    position: absolute;
    background-image: url("/img/svg/textures/dots.svg");
    background-size: 100%;
    background-repeat: no-repeat;
}

.u-dots-motif--white::after,
.u-panel-red.u-dots-motif::after {
    filter: brightness(500%);
}
/* GROUP UTILITIES / DECORATION / DOTS MOTIF / HEADING
=================================================== */
.u-dots-motif--heading::after {
    pointer-events: none;
    top: calc(0% - var(--spacing-l));
    left: calc(0% - var(--spacing-l) * 2);
    width: 100%;
    height: calc(100% + var(--spacing-l) * 2);
    background-size: 50% 100%;
}

.u-dots-motif--heading * {
    /* Pull the text above the dots */
    /* position: relative; */
    z-index: var(--z-index-above-body);
}

/* --mq-slide-columns-1-before */
@media (max-width: 1023px) {
    .u-dots-motif--heading {
        margin-block-start: var(--spacing-l);
        margin-block-end: var(--spacing-l-1);
    }
}
/* GROUP UTILITIES / DECORATION / DOTS MOTIF / TOP RIGHT
=================================================== */
/* e.g. >> /about-us */
.u-dots-motif--top-right::after {
    --size: min(25vw, 14em);

    top: var(--spacing-l-1);
    right: var(--spacing-l-1);
    width: var(--size);
    height: var(--size);
}

/* Custom */
@media (max-width: 1099px) {
    .u-dots-motif-top-right::after {
        /* e.g. >> /about-us > mobile */
        max-height: 10vh;
    }
}
/* GROUP UTILITIES / DECORATION / DOTS MOTIF / BOTTOM LEFT
=================================================== */
/* e.g. >> /about-us */
.u-dots-motif--bottom-left::after {
    --size: min(25vw, 14em);

    bottom: var(--spacing-l-1);
    left: var(--spacing-l-1);
    width: var(--size);
    height: var(--size);
}

/* Custom */
@media (max-width: 1099px) {
    .u-dots-motif-bottom-left::after {
        /* e.g. >> /about-us > mobile */
        max-height: 10vh;
    }
}
/* GROUP UTILITIES / DECORATION / DOTS MOTIF CENTER
=================================================== */
/* e.g. >> /about-us */
.u-dots-motif--center::after {
    --size: min(25vw, 14em);

    top: 65%;
    right: calc(50% + var(--size) / 2 + var(--spacing-l));
    transform: translate(50%, -50%);
    width: var(--size);
    height: var(--size);
}
/* GROUP UTILITIES / DECORATION / PANELS
=================================================== */
[class*="u-panel-"] {
    /* e.g. >> /news/index */
    position: relative;
}

.u-panel-dark {
    background: var(--colour-black);
    /* e.g. >> /game-content-development */
    color: white;
}

.u-panel-red {
    background: var(--colour-red);
    /* e.g. >> /gcore-game-engine */
    color: white;
}

.u-panel-grey {
    background: var(--colour-grey-light-2);
}

.u-panel-grey-light {
    /* e.g. footer */
    background: var(--colour-grey-light-2);
}

.u-panel-white {
    background: white;
}

.u-panel-gradient-dark {
    background: var(--colour-gradient-red-dark);
    color: white;
}




/* GROUP / GREENSOCK {/ GSAP}
=================================================== */
.js .js__GSAPfadeIn,
.js .js__GSAPlogos {
    opacity: 0;
}

.js .js__GSAPcard,
.js .js__GSAPcard-s {
    opacity: 0;
    transform: translateY(100px);
}

.js .js__GSAPfadeInRight {
    opacity: 0;
    transform: translateX(-100px);
}
.js .js__GSAPfadeLeft {
    opacity: 0;
    transform: translateX(100px);
}




/* GROUP UTILITIES / ANIMATION / IO FRAMEWORK (Authored by me)
=================================================== */
/* Notes...

    - My own mini framework that operates similar to [AOS](https://michalsnik.github.io/aos/) but much simpler
    - See `script.js` under `GROUP SCROLL TRIGGER WITH INTERSECTION OBSERVER` for the script, below are CSS examples to go with this

    Using a Hidden Trigger
    ----------------------
    - If you need to place a hidden trigger at the bottom of the page you can use :has in combination with something like this `<div data-io-repeat data-io-hidden-trigger style="position: absolute; height:90vh;"></div>`
        - data-io-hidden-trigger doesn't do anything; it's just an object you can test for like so: [data-io-hidden-trigger][data-io-seen]
        see readme.css for more info

*/

/* purgecss start ignore */
/* If they're ok with animation */
@media (prefers-reduced-motion: no-preference) {
    /* Defaults */
    :where([data-io], [data-io-repeat]),
    :where([data-io], [data-io-repeat]) > svg {
        /* We can't apply data attributes directly to inline SVGs in Statamic, so you could wrap a div around it like this: <div data-io-repeat data-io--slit-reveal>{{ svg src='motif' class='c-small-motif u-animated-motif-slit' }}</div> */
        --io-duration: 1s;
        --io-delay: 0.4s;
        --io-stagger: 0.1s;

        animation-fill-mode: both;
        animation-delay: var(--io-delay);
        animation-duration: var(--io-duration);
    }

    /* When an item is followed by another item then add a default delay */
    [data-io][class*="__"] + [data-io][class*="__"] {
        animation-delay: calc(var(--io-delay) + var(--io-stagger));
    }
    [data-io][class*="__"] + [data-io][class*="__"]:nth-child(2) {
        animation-delay: calc(var(--io-delay) + var(--io-stagger) * 2);
    }
    [data-io][class*="__"] + [data-io][class*="__"]:nth-child(3) {
        animation-delay: calc(var(--io-delay) + var(--io-stagger) * 3);
    }
    [data-io][class*="__"] + [data-io][class*="__"]:nth-child(4) {
        animation-delay: calc(var(--io-delay) + var(--io-stagger) * 4);
    }
    /* etc. */

    /* Delays */
    [data-io--delay],
    [data-io--delay]::before {
        /* Add a custom delay like this: <div data-io data-io--delay style="--io-delay: 5s"></div> */
        /* Or in Antlers data-io--delay{{ index < 6 ?= ' style="--io-delay: 0.{{ index | multiply(2) }}s"' }} */
        /* 1.5s if --io-delay is not defined */
        animation-delay: var(--io-delay, 1.5s)!important;
    }
    /* GROUP UTILITIES / ANIMATION / IO FRAMEWORK / FADES
    =================================================== */
    .js :where([data-io--fade-in], [data-io--fade-in-up], [data-io--slide-up-and-fade-in]) {
        /* Start off with a 0 opacity (rather than hidden) so browsers can still "see" the element. You'll need 1%, 100% { opacity: 1; } on each keyframe to make them appear immediately, unless you're using a fade anyway */
        opacity: 0;
    }
    /* Fade in up */
    .js [data-io--fade-in-up][data-io-seen] {
        --io-delay: 0.1s;
        --io-duration: 1s;
        animation-name: fade-in-up;
        animation-timing-function: var(--animation-timing-function-linear-out-slow-in);
    }
}
/* purgecss end ignore */


/* GROUP PLUGINS / COOKIE CONSENT
=================================================== */
/* https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.0.1/dist/cookieconsent.css */
#cc-main {
    background: transparent;
    color: var(--cc-primary-color);
    font-family: var(--cc-font-family);
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.15;
    position: relative;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    position: fixed;
    z-index: var(--cc-z-index)
}

#cc-main :after,#cc-main :before,#cc-main a,#cc-main button,#cc-main div,#cc-main h2,#cc-main input,#cc-main p,#cc-main span {
    all: unset;
    box-sizing: border-box
}

#cc-main .pm__badge,#cc-main button {
    all: initial;
    box-sizing: border-box;
    color: unset;
    visibility: unset
}

#cc-main .pm__badge,#cc-main a,#cc-main button,#cc-main input {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 100%;
    line-height: normal;
    margin: 0;
    outline: revert;
    outline-offset: 2px;
    overflow: hidden
}

#cc-main table,#cc-main tbody,#cc-main td,#cc-main th,#cc-main thead,#cc-main tr {
    all: revert;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit
}

:root {
    --cc-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --cc-modal-border-radius: .5rem;
    --cc-btn-border-radius: .4rem;
    --cc-modal-transition-duration: .25s;
    --cc-link-color: var(--cc-btn-primary-bg);
    --cc-modal-margin: 1rem;
    --cc-z-index: 2147483647;
    --cc-bg: #fff;
    --cc-primary-color: #2c2f31;
    --cc-secondary-color: #5e6266;
    --cc-btn-primary-bg: #30363c;
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
    --cc-btn-primary-hover-bg: #000;
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg);
    --cc-btn-secondary-bg: #eaeff2;
    --cc-btn-secondary-color: var(--cc-primary-color);
    --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg);
    --cc-btn-secondary-hover-bg: #d4dae0;
    --cc-btn-secondary-hover-color: #000;
    --cc-btn-secondary-hover-border-color: #d4dae0;
    --cc-separator-border-color: #f0f4f7;
    --cc-toggle-on-bg: var(--cc-btn-primary-bg);
    --cc-toggle-off-bg: #667481;
    --cc-toggle-on-knob-bg: #fff;
    --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg);
    --cc-toggle-enabled-icon-color: var(--cc-bg);
    --cc-toggle-disabled-icon-color: var(--cc-bg);
    --cc-toggle-readonly-bg: #d5dee2;
    --cc-toggle-readonly-knob-bg: #fff;
    --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
    --cc-section-category-border: var(--cc-cookie-category-block-bg);
    --cc-cookie-category-block-bg: #f0f4f7;
    --cc-cookie-category-block-border: #f0f4f7;
    --cc-cookie-category-block-hover-bg: #e9eff4;
    --cc-cookie-category-block-hover-border: #e9eff4;
    --cc-cookie-category-expanded-block-bg: transparent;
    --cc-cookie-category-expanded-block-hover-bg: #dee4e9;
    --cc-overlay-bg: rgba(0,0,0,.65);
    --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
    --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);
    --cc-footer-bg: var(--cc-btn-secondary-bg);
    --cc-footer-color: var(--cc-secondary-color);
    --cc-footer-border-color: #e4eaed;
    --cc-pm-toggle-border-radius: 4em
}

#cc-main.cc--rtl {
    direction: rtl
}

#cc-main .cm__title,#cc-main a,#cc-main b,#cc-main em,#cc-main strong {
    font-weight: 600
}

#cc-main button>span {
    pointer-events: none
}

#cc-main .cc__link,#cc-main a {
    background-image: linear-gradient(currentColor,currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    font-weight: 600;
    position: relative;
    transition: background-size .25s,color .25s ease
}

#cc-main .cc__link:hover,#cc-main a:hover {
    background-size: 100% 1px;
    color: var(--cc-primary-color)
}

#cc-main .cc__link {
    color: var(--cc-link-color)
}

#cc-main .cm__desc,#cc-main .pm__body {
    overscroll-behavior: auto contain;
    scrollbar-width: thin
}

@media screen and (min-width: 640px) {
    #cc-main ::-webkit-scrollbar,#cc-main ::-webkit-scrollbar-thumb,#cc-main ::-webkit-scrollbar-track {
        all:revert
    }

    #cc-main ::-webkit-scrollbar-thumb {
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background: var(--cc-toggle-readonly-bg);
        border: .25rem solid var(--cc-bg);
        border-radius: 1rem
    }

    #cc-main ::-webkit-scrollbar-thumb:hover {
        background: var(--cc-toggle-off-bg)
    }

    #cc-main ::-webkit-scrollbar {
        background: transparent;
        width: 12px
    }
}

html.disable--interaction.show--consent,html.disable--interaction.show--consent body {
    height: auto!important;
    overflow: hidden!important
}

@media (prefers-reduced-motion) {
    #cc-main {
        --cc-modal-transition-duration: 0s
    }
}

.cc--darkmode {
    --cc-bg: #161a1c;
    --cc-primary-color: #ebf3f6;
    --cc-secondary-color: #aebbc5;
    --cc-btn-primary-bg: #c2d0e0;
    --cc-btn-primary-color: var(--cc-bg);
    --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
    --cc-btn-primary-hover-bg: #98a7b6;
    --cc-btn-primary-hover-color: #000;
    --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg);
    --cc-btn-secondary-bg: #242c31;
    --cc-btn-secondary-color: var(--cc-primary-color);
    --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg);
    --cc-btn-secondary-hover-bg: #353d43;
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: var(--cc-btn-secondary-hover-bg);
    --cc-separator-border-color: #222a30;
    --cc-toggle-on-bg: var(--cc-btn-primary-bg);
    --cc-toggle-off-bg: #525f6b;
    --cc-toggle-on-knob-bg: var(--cc-btn-primary-color);
    --cc-toggle-off-knob-bg: var(--cc-btn-primary-color);
    --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color);
    --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color);
    --cc-toggle-readonly-bg: #343e45;
    --cc-toggle-readonly-knob-bg: #5f6b72;
    --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
    --cc-section-category-border: #1e2428;
    --cc-cookie-category-block-bg: #1e2428;
    --cc-cookie-category-block-border: var(--cc-section-category-border);
    --cc-cookie-category-block-hover-bg: #242c31;
    --cc-cookie-category-block-hover-border: #232a2f;
    --cc-cookie-category-expanded-block-bg: transparent;
    --cc-cookie-category-expanded-block-hover-bg: var(--cc-toggle-readonly-bg);
    --cc-overlay-bg: rgba(0,0,0,.65);
    --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
    --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);
    --cc-footer-bg: #0c0e0f;
    --cc-footer-color: var(--cc-secondary-color);
    --cc-footer-border-color: #060809
}

.cc--darkmode #cc-main {
    color-scheme: dark
}

#cc-main .cm {
    background: var(--cc-bg);
    border-radius: var(--cc-modal-border-radius);
    box-shadow: 0 .625em 1.875em rgba(0,0,2,.3);
    display: flex;
    flex-direction: column;
    max-width: 24rem;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    transform: translateY(1.6em);
    visibility: hidden;
    z-index: 1
}

#cc-main .cm--top {
    top: var(--cc-modal-margin)
}

#cc-main .cm--middle {
    top: 50%;
    transform: translateY(calc(-50% + 1.6em))
}

#cc-main .cm--bottom {
    bottom: var(--cc-modal-margin)
}

#cc-main .cm--center {
    left: var(--cc-modal-margin);
    margin: 0 auto;
    right: var(--cc-modal-margin);
    width: unset
}

#cc-main .cm--left {
    left: var(--cc-modal-margin);
    margin-right: var(--cc-modal-margin)
}

#cc-main .cm--right {
    margin-left: var(--cc-modal-margin);
    right: var(--cc-modal-margin)
}

#cc-main .cm__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative
}

#cc-main .cm__btns,#cc-main .cm__links {
    padding: 1rem 1.3rem;
    width: unset
}

#cc-main .cm__texts {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0 0
}

#cc-main .cm__desc,#cc-main .cm__title {
    padding: 0 1.3rem
}

#cc-main .cm__title {
    font-size: 1.05em
}

#cc-main .cm__title+.cm__desc {
    margin-top: 1.1em
}

#cc-main .cm__desc {
    color: var(--cc-secondary-color);
    font-size: .9em;
    line-height: 1.5;
    max-height: 40vh;
    overflow-x: visible;
    overflow-y: auto;
    padding-bottom: 1em
}

#cc-main .cm__btns {
    border-top: 1px solid var(--cc-separator-border-color);
    display: flex;
    flex-direction: column;
    justify-content: center
}

#cc-main .cm__btn-group {
    display: grid;
    grid-auto-columns: minmax(0,1fr)
}

#cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group {
    margin-top: .375rem
}

#cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group {
    margin-bottom: .375rem;
    margin-top: 0
}

#cc-main .cm--inline .cm__btn+.cm__btn {
    margin-left: .375rem;
    margin-top: 0
}

#cc-main .cm--inline.cm--flip .cm__btn+.cm__btn {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: .375rem
}

#cc-main .cm--inline.cm--flip .cm__btn-group+.cm__btn-group {
    margin-bottom: .375rem;
    margin-right: 0
}

#cc-main .cm--wide .cm__btn+.cm__btn,#cc-main .cm--wide .cm__btn-group+.cm__btn-group {
    margin-left: .375rem;
    margin-top: 0
}

#cc-main .cm--wide.cm--flip .cm__btn+.cm__btn,#cc-main .cm--wide.cm--flip .cm__btn-group+.cm__btn-group {
    margin-bottom: 0;
    margin-right: .375rem
}

#cc-main .cm--bar:not(.cm--inline) .cm__btn-group--uneven,#cc-main .cm--wide .cm__btn-group--uneven {
    display: flex;
    flex: 1;
    justify-content: space-between
}

#cc-main .cm--bar:not(.cm--inline).cm--flip .cm__btn-group--uneven,#cc-main .cm--wide.cm--flip .cm__btn-group--uneven {
    flex-direction: row-reverse
}

#cc-main .cm__btn {
    background: var(--cc-btn-primary-bg);
    border: 1px solid var(--cc-btn-primary-border-color);
    border-radius: var(--cc-btn-border-radius);
    color: var(--cc-btn-primary-color);
    font-size: .82em;
    font-weight: 600;
    min-height: 42px;
    padding: .5em 1em;
    text-align: center
}

#cc-main .cm__btn:hover {
    background: var(--cc-btn-primary-hover-bg);
    border-color: var(--cc-btn-primary-hover-border-color);
    color: var(--cc-btn-primary-hover-color)
}

#cc-main .cm__btn--secondary {
    background: var(--cc-btn-secondary-bg);
    border-color: var(--cc-btn-secondary-border-color);
    color: var(--cc-btn-secondary-color)
}

#cc-main .cm__btn--secondary:hover {
    background: var(--cc-btn-secondary-hover-bg);
    border-color: var(--cc-btn-secondary-hover-border-color);
    color: var(--cc-btn-secondary-hover-color)
}

#cc-main .cm__btn--close {
    border-radius: 0;
    border-bottom-left-radius: var(--cc-btn-border-radius);
    border-right: none;
    border-top: none;
    display: none;
    font-size: 1em;
    height: 42px;
    min-width: auto!important;
    overflow: hidden;
    padding: 0!important;
    position: absolute;
    right: 0;
    top: 0;
    width: 42px
}

#cc-main .cm__btn--close svg {
    stroke: var(--cc-btn-primary-color);
    transform: scale(.5);
    transition: stroke .15s ease
}

#cc-main .cm__btn--close:hover svg {
    stroke: var(--cc-btn-primary-hover-color)
}

#cc-main .cm__btn--close.cm__btn--secondary svg {
    stroke: var(--cc-btn-secondary-color)
}

#cc-main .cm__btn--close.cm__btn--secondary:hover svg {
    stroke: var(--cc-btn-secondary-hover-color)
}

#cc-main .cm__btn--close+.cm__texts .cm__title {
    padding-right: 3rem
}

#cc-main .cm--inline .cm__btn-group {
    grid-auto-flow: column
}

#cc-main .cm__footer {
    background: var(--cc-footer-bg);
    border-top: 1px solid var(--cc-footer-border-color);
    color: var(--cc-footer-color);
    padding: .4em 0 .5em
}

#cc-main .cm__links {
    display: flex;
    flex-direction: row;
    padding-bottom: 0;
    padding-top: 0
}

#cc-main .cm__link-group {
    display: flex;
    flex-direction: row;
    font-size: .8em;
    width: 100%
}

#cc-main .cm__link-group>*+* {
    margin-left: 1.3rem
}

#cc-main .cm--flip .cm__btn:last-child {
    grid-row: 1
}

#cc-main .cm--inline.cm--flip .cm__btn:last-child {
    grid-column: 1
}

#cc-main .cm--box .cm__btn--close {
    display: block
}

#cc-main .cm--box.cm--flip .cm__btns {
    flex-direction: column-reverse
}

#cc-main .cm--box.cm--wide {
    max-width: 36em
}

#cc-main .cm--box.cm--wide .cm__btns {
    flex-direction: row;
    justify-content: space-between
}

#cc-main .cm--box.cm--wide .cm__btn-group {
    grid-auto-flow: column
}

#cc-main .cm--box.cm--wide .cm__btn {
    min-width: 120px;
    padding-left: 1.8em;
    padding-right: 1.8em
}

#cc-main .cm--box.cm--wide.cm--flip .cm__btns {
    flex-direction: row-reverse
}

#cc-main .cm--box.cm--wide.cm--flip .cm__btn:last-child {
    grid-column: 1
}

#cc-main .cm--cloud {
    max-width: 54em;
    width: unset
}

#cc-main .cm--cloud .cm__body {
    flex-direction: row
}

#cc-main .cm--cloud .cm__texts {
    flex: 1
}

#cc-main .cm--cloud .cm__desc {
    max-height: 9.4em
}

#cc-main .cm--cloud .cm__btns {
    border-left: 1px solid var(--cc-separator-border-color);
    border-top: none;
    max-width: 23em
}

#cc-main .cm--cloud .cm__btn-group {
    flex-direction: column
}

#cc-main .cm--cloud .cm__btn {
    min-width: 19em
}

#cc-main .cm--cloud.cm--flip .cm__btn-group,#cc-main .cm--cloud.cm--flip .cm__btns {
    flex-direction: column-reverse
}

#cc-main .cm--cloud.cm--inline .cm__btn-group {
    flex-direction: row
}

#cc-main .cm--cloud.cm--inline .cm__btn {
    min-width: 10em
}

#cc-main .cm--cloud.cm--inline.cm--flip .cm__btn-group {
    flex-direction: row-reverse
}

#cc-main .cm--bar {
    border-radius: 0;
    left: 0;
    margin: 0;
    max-width: unset;
    opacity: 1;
    right: 0;
    transform: translateY(0);
    width: 100vw;
    --cc-modal-transition-duration: .35s
}

#cc-main .cm--bar.cm--top {
    top: 0;
    transform: translateY(-100%)
}

#cc-main .cm--bar.cm--bottom {
    bottom: 0;
    transform: translateY(100%)
}

#cc-main .cm--bar .cm__body,#cc-main .cm--bar .cm__links {
    margin: 0 auto;
    max-width: 55em;
    width: 100%
}

#cc-main .cm--bar .cm__body {
    padding: .5em 0 .9em
}

#cc-main .cm--bar .cm__btns {
    border-top: none;
    flex-direction: row;
    justify-content: space-between
}

#cc-main .cm--bar .cm__btn-group {
    grid-auto-flow: column
}

#cc-main .cm--bar:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar:not(.cm--inline) .cm__btn-group+.cm__btn-group {
    margin-left: .375rem;
    margin-top: 0
}

#cc-main .cm--bar .cm__btn {
    min-width: 120px;
    padding-left: 2em;
    padding-right: 2em
}

#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn-group+.cm__btn-group {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: .375rem
}

#cc-main .cm--bar.cm--flip .cm__btns {
    flex-direction: row-reverse
}

#cc-main .cm--bar.cm--flip .cm__btn:last-child {
    grid-column: 1
}

#cc-main .cm--bar.cm--inline .cm__body,#cc-main .cm--bar.cm--inline .cm__links {
    max-width: 74em
}

#cc-main .cm--bar.cm--inline .cm__body {
    flex-direction: row;
    padding: 0
}

#cc-main .cm--bar.cm--inline .cm__btns {
    flex-direction: column;
    justify-content: center;
    max-width: 23em
}

#cc-main .cm--bar.cm--inline.cm--flip .cm__btns {
    flex-direction: column-reverse
}

#cc-main .cc--anim .cm,#cc-main .cc--anim.cm-wrapper:before {
    transition: opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease
}

#cc-main .cc--anim .cm__btn,#cc-main .cc--anim .cm__close {
    transition: background-color .15s ease,border-color .15s ease,color .15s ease
}

.disable--interaction #cc-main .cm-wrapper:before {
    background: var(--cc-overlay-bg);
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 0
}

.show--consent #cc-main .cc--anim .cm {
    opacity: 1;
    transform: translateY(0);
    visibility: visible!important
}

.show--consent #cc-main .cc--anim .cm--middle {
    transform: translateY(-50%)
}

.show--consent #cc-main .cc--anim .cm--bar {
    transform: translateY(0)
}

.show--consent #cc-main .cc--anim.cm-wrapper:before {
    opacity: 1;
    visibility: visible
}

#cc-main.cc--rtl .cm__btn--close {
    border-bottom-left-radius: unset;
    border-bottom-right-radius: var(--cc-btn-border-radius);
    left: 0;
    right: unset
}

#cc-main.cc--rtl .cm__btn--close+.cm__texts .cm__title {
    padding-left: 3rem!important;
    padding-right: 1.3rem
}

#cc-main.cc--rtl .cm--inline .cm__btn+.cm__btn {
    margin-left: 0;
    margin-right: .375rem
}

#cc-main.cc--rtl .cm--inline.cm--flip .cm__btn+.cm__btn {
    margin-left: .375rem;
    margin-right: 0
}

#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn-group+.cm__btn-group,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn-group+.cm__btn-group {
    margin-left: 0;
    margin-right: .375rem
}

#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar.cm--flip .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide.cm--flip .cm__btn+.cm__btn {
    margin-left: .375rem;
    margin-right: 0
}

#cc-main.cc--rtl .cm__link-group>*+* {
    margin-left: 0;
    margin-right: 1.3rem
}

@media screen and (max-width: 640px) {
    #cc-main {
        --cc-modal-margin:.5em
    }

    #cc-main .cm {
        max-width: none!important;
        width: auto!important
    }

    #cc-main .cm__body {
        flex-direction: column!important;
        padding: 0!important
    }

    #cc-main .cm__btns,#cc-main .cm__desc,#cc-main .cm__links,#cc-main .cm__title {
        padding-left: 1.1rem!important;
        padding-right: 1.1rem!important
    }

    #cc-main .cm__btns {
        border-left: none!important;
        border-top: 1px solid var(--cc-separator-border-color)!important;
        flex-direction: column!important;
        max-width: none!important;
        min-width: auto!important
    }

    #cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group {
        margin: .375rem 0 0!important
    }

    #cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group {
        margin-bottom: .375rem!important;
        margin-top: 0!important
    }

    #cc-main .cm__btn-group {
        display: flex!important;
        flex-direction: column!important;
        min-width: auto!important
    }

    #cc-main .cm__btn {
        flex: auto!important
    }

    #cc-main .cm__link-group {
        justify-content: center!important
    }

    #cc-main .cm--flip .cm__btn-group,#cc-main .cm--flip .cm__btns {
        flex-direction: column-reverse!important
    }
}

#cc-main .pm-wrapper {
    position: relative;
    z-index: 2
}

#cc-main .pm {
    background: var(--cc-bg);
    border-radius: var(--cc-modal-border-radius);
    box-shadow: 0 .625em 1.875em rgba(0,0,2,.3);
    display: flex;
    flex-direction: column;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    visibility: hidden;
    width: 100%;
    width: unset;
    z-index: 1
}

#cc-main svg {
    fill: none;
    width: 100%
}

#cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header {
    padding: 1em 1.4em
}

#cc-main .pm__header {
    align-items: center;
    border-bottom: 1px solid var(--cc-separator-border-color);
    display: flex;
    justify-content: space-between
}

#cc-main .pm__title {
    align-items: center;
    display: flex;
    flex: 1;
    font-weight: 600;
    margin-right: 2em
}

#cc-main .pm__close-btn {
    background: var(--cc-btn-secondary-bg);
    border: 1px solid var(--cc-btn-secondary-border-color);
    border-radius: var(--cc-btn-border-radius);
    height: 40px;
    position: relative;
    transition: all .15s ease;
    width: 40px
}

#cc-main .pm__close-btn span {
    display: flex;
    height: 100%;
    width: 100%
}

#cc-main .pm__close-btn svg {
    stroke: var(--cc-btn-secondary-color);
    transform: scale(.5);
    transition: stroke .15s ease
}

#cc-main .pm__close-btn:hover {
    background: var(--cc-btn-secondary-hover-bg);
    border-color: var(--cc-btn-secondary-hover-border-color)
}

#cc-main .pm__close-btn:hover svg {
    stroke: var(--cc-btn-secondary-hover-color)
}

#cc-main .pm__body {
    flex: 1;
    overflow-y: auto;
    overflow-y: overlay
}

#cc-main .pm__section,#cc-main .pm__section--toggle {
    border-radius: var(--cc-btn-border-radius);
    display: flex;
    flex-direction: column;
    margin-bottom: .5em
}

#cc-main .pm__section--toggle .pm__section-desc-wrapper {
    border: 1px solid var(--cc-cookie-category-block-border);
    border-radius: var(--cc-btn-border-radius);
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: none;
    margin-top: 0!important;
    overflow: hidden
}

#cc-main .pm__section {
    border: 1px solid var(--cc-separator-border-color);
    padding: 1em;
    transition: background-color .25s ease,border-color .25s ease
}

#cc-main .pm__section:first-child {
    border: none;
    margin-bottom: 2em;
    margin-top: 0;
    padding: 0;
    transition: none
}

#cc-main .pm__section:not(:first-child):hover {
    background: var(--cc-cookie-category-block-bg);
    border-color: var(--cc-cookie-category-block-border)
}

#cc-main .pm__section-toggles+.pm__section {
    margin-top: 2em
}

#cc-main .pm__section--toggle {
    background: var(--cc-cookie-category-block-bg);
    border-top: none;
    margin-bottom: .375rem
}

#cc-main .pm__section--toggle .pm__section-title {
    align-items: center;
    background: var(--cc-cookie-category-block-bg);
    border: 1px solid var(--cc-cookie-category-block-border);
    display: flex;
    justify-content: space-between;
    min-height: 58px;
    padding: 1.1em 5.4em 1.1em 1.2em;
    position: relative;
    transition: background-color .25s ease,border-color .25s ease;
    width: 100%
}

#cc-main .pm__section--toggle .pm__section-title:hover {
    background: var(--cc-cookie-category-block-hover-bg);
    border-color: var(--cc-cookie-category-block-hover-border)
}

#cc-main .pm__section--toggle .pm__section-desc {
    margin-top: 0;
    padding: 1em
}

#cc-main .pm__section--toggle.is-expanded {
    --cc-cookie-category-block-bg: var(--cc-cookie-category-expanded-block-bg);
    --cc-cookie-category-block-border: var(--cc-cookie-category-expanded-block-hover-bg)
}

#cc-main .pm__section--toggle.is-expanded .pm__section-title {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

#cc-main .pm__section--toggle.is-expanded .pm__section-arrow svg {
    transform: scale(.5) rotate(180deg)
}

#cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper {
    display: flex
}

#cc-main .pm__section--expandable .pm__section-title {
    cursor: pointer;
    padding-left: 3.4em
}

#cc-main .pm__section--expandable .pm__section-arrow {
    background: var(--cc-toggle-readonly-bg);
    border-radius: 100%;
    display: flex;
    height: 20px;
    justify-content: center;
    left: 18px;
    pointer-events: none;
    position: absolute;
    width: 20px
}

#cc-main .pm__section--expandable .pm__section-arrow svg {
    stroke: var(--cc-btn-secondary-color);
    transform: scale(.5)
}

#cc-main .pm__section-title-wrapper {
    align-items: center;
    display: flex;
    position: relative
}

#cc-main .pm__section-title-wrapper+.pm__section-desc-wrapper {
    margin-top: .85em
}

#cc-main .pm__section-title {
    border-radius: var(--cc-btn-border-radius);
    font-size: .95em;
    font-weight: 600
}

#cc-main .pm__badge {
    align-items: center;
    background: var(--cc-btn-secondary-bg);
    border-radius: 5em;
    color: var(--cc-secondary-color);
    display: flex;
    flex: none;
    font-size: .8em;
    font-weight: 600;
    height: 23px;
    justify-content: center;
    margin-left: 1em;
    min-width: 23px;
    overflow: hidden;
    padding: 0 .6em 1px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: auto
}

#cc-main .pm__service-counter {
    background: var(--cc-btn-primary-bg);
    color: var(--cc-btn-primary-color);
    padding: 0;
    width: 23px
}

#cc-main .pm__service-counter[data-counterlabel] {
    padding: 0 .6em 1px;
    width: auto
}

#cc-main .section__toggle,#cc-main .section__toggle-wrapper,#cc-main .toggle__icon,#cc-main .toggle__label {
    border-radius: var(--cc-pm-toggle-border-radius);
    height: 23px;
    transform: translateZ(0);
    width: 50px
}

#cc-main .section__toggle-wrapper {
    cursor: pointer;
    position: absolute;
    right: 18px;
    z-index: 1
}

#cc-main .toggle-service {
    height: 19px;
    position: relative;
    right: 0;
    width: 42px
}

#cc-main .toggle-service .section__toggle,#cc-main .toggle-service .toggle__icon,#cc-main .toggle-service .toggle__label {
    height: 19px;
    width: 42px
}

#cc-main .toggle-service .toggle__icon {
    position: relative
}

#cc-main .toggle-service .toggle__icon-circle {
    height: 19px;
    width: 19px
}

#cc-main .toggle-service .section__toggle:checked~.toggle__icon .toggle__icon-circle {
    transform: translateX(23px)
}

#cc-main .pm__section--toggle:nth-child(2) .section__toggle-wrapper:after {
    display: none!important
}

#cc-main .section__toggle {
    border: 0;
    cursor: pointer;
    display: block;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0
}

#cc-main .section__toggle:disabled {
    cursor: not-allowed
}

#cc-main .toggle__icon {
    background: var(--cc-toggle-off-bg);
    box-shadow: 0 0 0 1px var(--cc-toggle-off-bg);
    display: flex;
    flex-direction: row;
    pointer-events: none;
    position: absolute;
    transition: all .25s ease
}

#cc-main .toggle__icon-circle {
    background: var(--cc-toggle-off-knob-bg);
    border: none;
    border-radius: var(--cc-pm-toggle-border-radius);
    box-shadow: 0 1px 2px rgba(24,32,3,.36);
    display: block;
    height: 23px;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform .25s ease,background-color .25s ease;
    width: 23px
}

#cc-main .toggle__icon-off,#cc-main .toggle__icon-on {
    height: 100%;
    position: absolute;
    transition: opacity .15s ease;
    width: 100%
}

#cc-main .toggle__icon-on {
    opacity: 0;
    transform: rotate(45deg)
}

#cc-main .toggle__icon-on svg {
    stroke: var(--cc-toggle-on-bg);
    transform: scale(.55) rotate(-45deg)
}

#cc-main .toggle__icon-off {
    opacity: 1
}

#cc-main .toggle__icon-off svg {
    stroke: var(--cc-toggle-off-bg);
    transform: scale(.55)
}

#cc-main .section__toggle:checked~.toggle__icon {
    background: var(--cc-toggle-on-bg);
    box-shadow: 0 0 0 1px var(--cc-toggle-on-bg)
}

#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-circle {
    background-color: var(--cc-toggle-on-knob-bg);
    transform: translateX(27px)
}

#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-on {
    opacity: 1
}

#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-off {
    opacity: 0
}

#cc-main .section__toggle:checked:disabled~.toggle__icon {
    background: var(--cc-toggle-readonly-bg);
    box-shadow: 0 0 0 1px var(--cc-toggle-readonly-bg)
}

#cc-main .section__toggle:checked:disabled~.toggle__icon .toggle__icon-circle {
    background: var(--cc-toggle-readonly-knob-bg);
    box-shadow: none
}

#cc-main .section__toggle:checked:disabled~.toggle__icon svg {
    stroke: var(--cc-toggle-readonly-knob-icon-color)
}

#cc-main .toggle__label {
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: -1
}

#cc-main .pm__section-desc-wrapper {
    color: var(--cc-secondary-color);
    display: flex;
    flex-direction: column;
    font-size: .9em
}

#cc-main .pm__section-desc-wrapper>:not(:last-child) {
    border-bottom: 1px solid var(--cc-cookie-category-block-border)
}

#cc-main .pm__section-services {
    display: flex;
    flex-direction: column
}

#cc-main .pm__service {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: .4em 1.2em;
    position: relative;
    transition: background-color .15s ease
}

#cc-main .pm__service:hover {
    background-color: var(--cc-cookie-category-block-hover-bg)
}

#cc-main .pm__service-header {
    align-items: center;
    display: flex;
    margin-right: 1em;
    width: 100%
}

#cc-main .pm__service-icon {
    border: 2px solid;
    border-radius: 100%;
    height: 8px;
    margin-left: 6px;
    margin-right: 20px;
    margin-top: 1px;
    min-width: 8px
}

#cc-main .pm__service-title {
    font-size: .95em;
    width: 100%;
    word-break: break-word
}

#cc-main .pm__section-desc {
    line-height: 1.5em
}

#cc-main .pm__section-table {
    border-collapse: collapse;
    font-size: .9em;
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-align: left;
    width: 100%
}

#cc-main .pm__table-caption {
    text-align: left
}

#cc-main .pm__table-caption,#cc-main .pm__table-head>tr {
    border-bottom: 1px dashed var(--cc-separator-border-color);
    color: var(--cc-primary-color);
    font-weight: 600
}

#cc-main .pm__table-tr {
    transition: background-color .15s ease
}

#cc-main .pm__table-tr:hover {
    background: var(--cc-cookie-category-block-hover-bg)
}

#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th {
    padding: .625em .625em .625em 1.2em;
    vertical-align: top
}

#cc-main .pm__footer {
    border-top: 1px solid var(--cc-separator-border-color);
    display: flex;
    justify-content: space-between
}

#cc-main .pm__btn-group {
    display: flex
}

#cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group {
    margin-left: .375rem
}

#cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group {
    margin-left: 0;
    margin-right: .375rem
}

#cc-main .pm__btn {
    background: var(--cc-btn-primary-bg);
    border: 1px solid var(--cc-btn-primary-border-color);
    border-radius: var(--cc-btn-border-radius);
    color: var(--cc-btn-primary-color);
    flex: auto;
    font-size: .82em;
    font-weight: 600;
    min-height: 42px;
    min-width: 110px;
    padding: .5em 1.5em;
    text-align: center;
    transition: background-color .15s ease,border-color .15s ease,color .15s ease
}

#cc-main .pm__btn:hover {
    background: var(--cc-btn-primary-hover-bg);
    border-color: var(--cc-btn-primary-hover-border-color);
    color: var(--cc-btn-primary-hover-color)
}

#cc-main .pm__btn--secondary {
    background: var(--cc-btn-secondary-bg);
    border-color: var(--cc-btn-secondary-border-color);
    color: var(--cc-btn-secondary-color)
}

#cc-main .pm__btn--secondary:hover {
    background: var(--cc-btn-secondary-hover-bg);
    border-color: var(--cc-btn-secondary-hover-border-color);
    color: var(--cc-btn-secondary-hover-color)
}

#cc-main .pm--box {
    height: calc(100% - 2em);
    left: var(--cc-modal-margin);
    margin: 0 auto;
    max-height: 37.5em;
    max-width: 43em;
    right: var(--cc-modal-margin);
    top: 50%;
    transform: translateY(calc(-50% + 1.6em))
}

#cc-main .pm--box.pm--flip .pm__btn-group,#cc-main .pm--box.pm--flip .pm__footer {
    flex-direction: row-reverse
}

#cc-main .pm--bar {
    border-radius: 0;
    bottom: 0;
    height: 100%;
    margin: 0;
    max-height: none;
    max-width: 29em;
    opacity: 1;
    top: 0;
    width: 100%;
    --cc-modal-transition-duration: .35s
}

#cc-main .pm--bar .pm__section-table,#cc-main .pm--bar .pm__table-body,#cc-main .pm--bar .pm__table-td,#cc-main .pm--bar .pm__table-th,#cc-main .pm--bar .pm__table-tr {
    display: block
}

#cc-main .pm--bar .pm__table-head {
    display: none
}

#cc-main .pm--bar .pm__table-caption {
    display: block
}

#cc-main .pm--bar .pm__table-tr:not(:last-child) {
    border-bottom: 1px solid var(--cc-separator-border-color)
}

#cc-main .pm--bar .pm__table-td {
    display: flex;
    justify-content: space-between
}

#cc-main .pm--bar .pm__table-td:before {
    color: var(--cc-primary-color);
    content: attr(data-column);
    flex: 1;
    font-weight: 600;
    min-width: 100px;
    overflow: hidden;
    padding-right: 2em;
    text-overflow: ellipsis
}

#cc-main .pm--bar .pm__table-td>div {
    flex: 3
}

#cc-main .pm--bar:not(.pm--wide) .pm__body,#cc-main .pm--bar:not(.pm--wide) .pm__footer,#cc-main .pm--bar:not(.pm--wide) .pm__header {
    padding: 1em 1.3em
}

#cc-main .pm--bar:not(.pm--wide) .pm__btn-group,#cc-main .pm--bar:not(.pm--wide) .pm__footer {
    flex-direction: column
}

#cc-main .pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group {
    margin: .375rem 0 0
}

#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__footer {
    flex-direction: column-reverse
}

#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group+.pm__btn-group {
    margin-bottom: .375rem;
    margin-top: 0
}

#cc-main .pm--bar:not(.pm--wide) .pm__badge {
    display: none
}

#cc-main .pm--bar.pm--left {
    left: 0;
    transform: translateX(-100%)
}

#cc-main .pm--bar.pm--right {
    right: 0;
    transform: translateX(100%)
}

#cc-main .pm--bar.pm--wide {
    max-width: 35em
}

#cc-main .pm--bar.pm--wide .pm__body,#cc-main .pm--bar.pm--wide .pm__footer,#cc-main .pm--bar.pm--wide .pm__header {
    padding: 1em 1.4em
}

#cc-main .pm--bar.pm--wide.pm--flip .pm__btn-group,#cc-main .pm--bar.pm--wide.pm--flip .pm__footer {
    flex-direction: row-reverse
}

#cc-main .pm-overlay {
    background: var(--cc-overlay-bg);
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1
}

#cc-main .cc--anim .pm,#cc-main .cc--anim .pm-overlay {
    transition: opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease
}

.show--preferences #cc-main .cc--anim .pm {
    opacity: 1;
    visibility: visible!important
}

.show--preferences #cc-main .cc--anim .pm--box {
    transform: translateY(-50%)
}

.show--preferences #cc-main .cc--anim .pm--bar {
    transform: translateX(0)
}

.show--preferences #cc-main .cc--anim .pm-overlay {
    opacity: 1;
    visibility: visible
}

#cc-main.cc--rtl .pm__service-header {
    margin-left: 1em;
    margin-right: 0
}

#cc-main.cc--rtl .pm__section-arrow {
    left: unset;
    right: 18px
}

#cc-main.cc--rtl .section__toggle-wrapper {
    left: 18px;
    right: unset;
    transform-origin: left
}

#cc-main.cc--rtl .toggle-service {
    left: 0
}

#cc-main.cc--rtl .pm__service-icon {
    margin-left: 20px;
    margin-right: 5px
}

#cc-main.cc--rtl .pm__section--toggle .pm__section-title {
    padding-left: 5.4em;
    padding-right: 1.2em
}

#cc-main.cc--rtl .pm__section--expandable .pm__section-title {
    padding-right: 3.4em
}

#cc-main.cc--rtl .pm__badge {
    margin-left: unset;
    margin-right: 1em
}

#cc-main.cc--rtl .toggle__icon-circle {
    transform: translateX(27px)
}

#cc-main.cc--rtl .toggle-service .toggle__icon-circle {
    transform: translateX(23px)
}

#cc-main.cc--rtl .section__toggle:checked~.toggle__icon .toggle__icon-circle {
    transform: translateX(0)
}

#cc-main.cc--rtl .pm__table-td,#cc-main.cc--rtl .pm__table-th {
    padding-left: unset;
    padding-right: 1.2em;
    text-align: right
}

#cc-main.cc--rtl .pm__table-td {
    padding-left: unset;
    padding-right: 1.2em
}

#cc-main.cc--rtl .pm__table-td:before {
    padding-left: 2em;
    padding-right: unset
}

#cc-main.cc--rtl .pm__btn+.pm__btn,#cc-main.cc--rtl .pm__btn-group+.pm__btn-group {
    margin-left: 0;
    margin-right: .375rem
}

#cc-main.cc--rtl .pm--flip .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip .pm__btn-group+.pm__btn-group {
    margin-left: .375rem;
    margin-right: 0
}

#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group {
    margin-left: 0
}

@media screen and (max-width: 640px) {
    #cc-main .pm {
        border-radius:0;
        bottom: 0;
        height: auto;
        left: 0;
        max-height: 100%;
        max-width: none!important;
        right: 0;
        top: 0;
        transform: translateY(1.6em)
    }

    #cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header {
        padding: .9em!important
    }

    #cc-main .pm__badge {
        display: none
    }

    #cc-main .pm__section-table,#cc-main .pm__table-body,#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th,#cc-main .pm__table-tr {
        display: block
    }

    #cc-main .pm__table-head {
        display: none
    }

    #cc-main .pm__table-tr:not(:last-child) {
        border-bottom: 1px solid var(--cc-separator-border-color)
    }

    #cc-main .pm__table-td {
        display: flex;
        justify-content: space-between
    }

    #cc-main .pm__table-td:before {
        color: var(--cc-primary-color);
        content: attr(data-column);
        flex: 1;
        font-weight: 600;
        min-width: 100px;
        overflow: hidden;
        padding-right: 2em;
        text-overflow: ellipsis
    }

    #cc-main .pm__table-td>div {
        flex: 3
    }

    #cc-main .pm__btn-group,#cc-main .pm__footer {
        flex-direction: column!important
    }

    #cc-main .pm__btn-group {
        display: flex!important
    }

    #cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group {
        margin: .375rem 0 0!important
    }

    #cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group {
        margin-bottom: .375rem!important;
        margin-top: 0!important
    }

    #cc-main .pm--flip .pm__btn-group,#cc-main .pm--flip .pm__footer {
        flex-direction: column-reverse!important
    }

    .show--preferences #cc-main .cc--anim .pm {
        transform: translateY(0)!important
    }
}
/* GROUP PLUGINS / COOKIE CONSENT / CUSTOM
=================================================== */
/* GROUP BLACK THEME
=================================================== */
.cc--elegant-black {
    --cc-bg: #000;
    --cc-primary-color: hsl(197 0% 95% / 1);
    --cc-secondary-color: hsl(200deg 0% 72.94%);

    --cc-btn-primary-bg: #ffffff;
    --cc-btn-primary-color: #000;
    --cc-btn-primary-hover-bg: hsl(200deg 0% 82.35%);
    --cc-btn-primary-hover-color: #000;

    --cc-btn-secondary-bg: rgba(255, 255, 255, 0.039);
    --cc-btn-secondary-color: var(--cc-primary-color);
    --cc-btn-secondary-border-color: #252729;
    --cc-btn-secondary-hover-bg: #252729;
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: #252729;

    --cc-cookie-category-block-bg: #101111;
    --cc-cookie-category-block-border: #1d1e1f;
    --cc-cookie-category-block-hover-bg: #151516;
    --cc-cookie-category-block-hover-border: #1d1e1f;
    --cc-cookie-category-expanded-block-hover-bg: #1d1e1f;
    --cc-cookie-category-expanded-block-bg: #101111;
    --cc-toggle-readonly-bg: #2f3132;
    --cc-overlay-bg: rgba(0, 0, 0, 0.9)!important;

    --cc-toggle-on-knob-bg: var(--cc-bg);
    --cc-toggle-readonly-knob-bg: var( --cc-cookie-category-block-bg);

    --cc-separator-border-color: #252729;

    --cc-footer-border-color: #212529;
    --cc-footer-bg: #000;
}

.cc--elegant-black #cc-main .cm,
.cc--elegant-black #cc-main .pm {
    border: 1px solid var(--cc-separator-border-color);
}
/* GROUP CUSTOM
=================================================== */
.pm {
    & button svg {
        height: unset;
    }
}

/* Tailwind inspired utility classes */
.text-white {
    color: #ffffff;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.text-center {
    text-align: center;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.max-w-prose {
    max-width: 70ch;
}

.\[\&_p\]\:pbe-0 p {
    padding-block-end: 0;
}

.\[\&_a\]\:text-white a {
    color: #ffffff!important;
    text-decoration: underline;
    text-decoration-color: #ffffff;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.uppercase {
    text-transform: uppercase;
}