/*  ============= WEB BROWSER RESETS ============ */
* { margin: 0; padding: 0; border: none }
*, *::before, *::after { box-sizing: border-box }
html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline;
scroll-behavior: smooth; scroll-padding-top: 20px }
body { line-height: 1.5; min-height: 100vh }

@media (max-width: 767px ) { body { text-rendering: optimizeSpeed } }
@media (min-width: 768px ) { body { text-rendering: optimizeLegibility } }
img { width: 100%; height: auto; display: block }

/* ============ CUSTOM PROPERTIES ============  */

:root {
    /* Nicer than default sans-serif font */
    --font-sans: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial, sans-serif;
    --font-serif: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
    --font-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --global-font: var(--font-sans);

    /* Color variables */
    --black-000: #000000;
    --white-000: #ffffff;
    --trans-000: transparent;

    --slate-050: #ECEFF1;
    --slate-100: #CFD8DC;
    --slate-200: #B0BEC5;
    --slate-300: #90A4AE;
    --slate-400: #78909C;
    --slate-500: #607D8B;
    --slate-600: #546E7A;
    --slate-700: #455A64;
    --slate-800: #37474F;
    --slate-900: #263238;

    --gray-050: #F9FAFB;
    --gray-100: #f7fafc;
    --gray-200: #edf2f7;
    --gray-300: #e2e8f0;
    --gray-400: #cbd5e0;
    --gray-500: #a0aec0;
    --gray-600: #718096;
    --gray-700: #4a5568;
    --gray-800: #2d3748;
    --gray-900: #1a202c;

    --red-050: #FEF2F2;
    --red-100: #fff5f5;
    --red-200: #fed7d7;
    --red-300: #feb2b2;
    --red-400: #fc8181;
    --red-500: #f56565;
    --red-600: #e53e3e;
    --red-700: #c53030;
    --red-800: #9b2c2c;
    --red-900: #742a2a;

    --orange-050: #FFF7ED;
    --orange-100: #fffaf0;
    --orange-200: #feebc8;
    --orange-300: #fbd38d;
    --orange-400: #f6ad55;
    --orange-500: #ed8936;
    --orange-600: #dd6b20;
    --orange-700: #c05621;
    --orange-800: #9c4221;
    --orange-900: #7b341e;

    --amber-050: #FFFBEB;
    --amber-100: #FEF3C7;
    --amber-200: #FDE68A;
    --amber-300: #FCD34D;
    --amber-400: #FBBF24;
    --amber-500: #F59E0B;
    --amber-600: #D97706;
    --amber-700: #B45309;
    --amber-800: #92400E;
    --amber-900: #78350F;

    --yellow-050: #FEFCE8;
    --yellow-100: #fffff0;
    --yellow-200: #fefcbf;
    --yellow-300: #faf089;
    --yellow-400: #f6e05e;
    --yellow-500: #ecc94b;
    --yellow-600: #d69e2e;
    --yellow-700: #b7791f;
    --yellow-800: #975a16;
    --yellow-900: #744210;

    --lime-050: #F7FEE7;
    --lime-100: #ECFCCB;
    --lime-200: #D9F99D;
    --lime-300: #BEF264;
    --lime-400: #A3E635;
    --lime-500: #84CC16;
    --lime-600: #65A30D;
    --lime-700: #4D7C0F;
    --lime-800: #3F6212;
    --lime-900: #365314;

    --green-050: #F0FDF4;
    --green-100: #f0fff4;
    --green-200: #c6f6d5;
    --green-300: #9ae6b4;
    --green-400: #14f195;
    --green-500: #48bb78;
    --green-600: #38a169;
    --green-700: #2f855a;
    --green-800: #276749;
    --green-900: #22543d;

    --teal-050: #F0FDFA;
    --teal-100: #CCFBF1;
    --teal-200: #99F6E4;
    --teal-300: #5EEAD4;
    --teal-400: #2DD4BF;
    --teal-500: #14B8A6;
    --teal-600: #0D9488;
    --teal-700: #0F766E;
    --teal-800: #115E59;
    --teal-900: #134E4A;

    --cyan-050: #ECFEFF;
    --cyan-100: #CFFAFE;
    --cyan-200: #A5F3FC;
    --cyan-300: #67E8F9;
    --cyan-400: #22D3EE;
    --cyan-500: #06B6D4;
    --cyan-600: #0891B2;
    --cyan-700: #0E7490;
    --cyan-800: #155E75;
    --cyan-900: #164E63;

    --sky-050: #F0F9FF;
    --sky-100: #E0F2FE;
    --sky-200: #BAE6FD;
    --sky-300: #7DD3FC;
    --sky-400: #38BDF8;
    --sky-500: #0EA5E9;
    --sky-600: #0284C7;
    --sky-700: #0369A1;
    --sky-800: #075985;
    --sky-900: #0C4A6E;

    --blue-050: #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-300: #93C5FD;
    --blue-400: #60A5FA;
    --blue-500: #3B82F6;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --blue-800: #1E40AF;
    --blue-900: #1E3A8A;

    --indigo-050: #EEF2FF;
    --indigo-100: #E0E7FF;
    --indigo-200: #C7D2FE;
    --indigo-300: #A5B4FC;
    --indigo-400: #818CF8;
    --indigo-500: #6366F1;
    --indigo-600: #4F46E5;
    --indigo-700: #4338CA;
    --indigo-800: #3730A3;
    --indigo-900: #312E81;

    --purple-050: #FAF5FF;
    --purple-100: #F3E8FF;
    --purple-200: #E9D5FF;
    --purple-300: #D8B4FE;
    --purple-400: #C084FC;
    --purple-500: #A855F7;
    --purple-600: #9333EA;
    --purple-700: #7E22CE;
    --purple-800: #6B21A8;
    --purple-900: #581C87;

    --fuchsia-050: #FDF4FF;
    --fuchsia-100: #FAE8FF;
    --fuchsia-200: #F5D0FE;
    --fuchsia-300: #F0ABFC;
    --fuchsia-400: #E879F9;
    --fuchsia-500: #D946EF;
    --fuchsia-600: #C026D3;
    --fuchsia-700: #A21CAF;
    --fuchsia-800: #86198F;
    --fuchsia-900: #701A75;

    --pink-050: #FDF2F8;
    --pink-100: #FCE7F3;
    --pink-200: #FBCFE8;
    --pink-300: #F9A8D4;
    --pink-400: #F472B6;
    --pink-500: #EC4899;
    --pink-600: #DB2777;
    --pink-700: #BE185D;
    --pink-800: #9D174D;
    --pink-900: #831843;

    --rose-050: #FFF1F2;
    --rose-100: #FFE4E6;
    --rose-200: #FECDD3;
    --rose-300: #FDA4AF;
    --rose-400: #FB7185;
    --rose-500: #F43F5E;
    --rose-600: #E11D48;
    --rose-700: #BE123C;
    --rose-800: #9F1239;
    --rose-900: #881337;

    --brown-050: #EFEBE9;
    --brown-100: #D7CCC8;
    --brown-200: #BCAAA4;
    --brown-300: #A1887F;
    --brown-400: #8D6E63;
    --brown-500: #795548;
    --brown-600: #6D4C41;
    --brown-700: #5D4037;
    --brown-800: #4E342E;
    --brown-900: #3E2723;

    --trend-050: #fff4d9;
    --trend-100: #fdd0bb;
    --trend-200: #fea8b3;
    --trend-300: #d4eee6;
    --trend-400: #bde5fe;
    --trend-500: #0000fe;
    --trend-600: #400c3e;
    --trend-700: #2c4763;
    --trend-800: #1f364d;
    --trend-900: #0e2439;

    /* Spacing variables */
    /* --max-width: 1920px; */
    --max-content-width: 1920px;
    --spacing-xs: 2.5%;
    --spacing-s: 5%;
    --spacing-m: 10%;
    --spacing-l: 15%;
    --spacing-xl: 20%;

    --overlay-opacity: 0.3;
    --overlay-color: rgba(255, 0, 0, var(--overlay-opacity));
    --overlay-trans: transparent;
}

/* Global font */
body { font-family: var(--global-font) }

nav, header, section, footer { position: relative; display: block; overflow: hidden }
header, section { max-width: 1920px; margin-left: auto; margin-right: auto; }
header, section, footer { overflow: hidden }


/* Last element at bottom of parent section or column */
section *:last-child, footer *:last-child { margin-bottom: 0 !important }
div[class^='col-'] p:last-child,
div[class^='col-'] li:last-child { margin-bottom: 0 }

.container-text, .container-btn { position: relative }

@media (min-width: 768px) { header.cols-2-half { padding: 0 } }
@media (max-width: 767px) { header.cols-2-half { padding: 0 9% 0 9% } }

section.w-1536px.cols-2-half { max-width: 1536px; margin-right: auto; margin-left: auto }
section.w-1320px.cols-2-half { max-width: 1320px; margin-right: auto; margin-left: auto }
section.w-1140px.cols-2-half { max-width: 1140px; margin-right: auto; margin-left: auto }


/* Padding around content */
@media (min-width: 1025px) { section { padding: 5% 4% 5% 4% } }
@media (min-width: 768px) and (max-width: 1024px) { section { padding: 5% 6% } }
@media (max-width: 767px) { section { padding: 32px 9% 42px 9% } }

@media (min-width: 768px) { section.cols-2-half { padding: 0 } }


/* ============== HEADER BLOCKS ================ */

header.desktop-min-height-500px { min-height: 500px }
header.desktop-min-height-60vh { min-height: 60vh }
header.desktop-min-height-70vh { min-height: 70vh }
header.desktop-min-height-80vh { min-height: 80vh }
header.desktop-min-height-90vh { min-height: 90vh }
header.desktop-min-height-100vh { min-height: 100vh }

@media (min-width: 768px)  {
    header:not(.hero-bg), header:not(.cols-2-half) { padding: 5% 5% }
    header.cols-2-half { padding: 0 0 0 0 }
}
@media (max-width: 767px) {
    header:not(.hero-bg), header:not(.cols-2-half) { padding: 32px 5% }
    header.cols-2-half { padding: 32px 5% 32px 5% }
}

/* Padding around header with background image or video */
@media (min-width: 768px) { header.hero-bg { padding-left: 4%; padding-right: 4% } }
@media (max-width: 767px) { header.hero-bg { padding-left: 6%; padding-right: 6% } }


/* ========= SECTIONS: GLOBAL SETTINGS ======== */

/* menu: light theme */

nav.theme-light, nav.theme-light ul.links-wrapper.active { background-color: var(--gray-300) }

nav.theme-light ul.links-wrapper li a:link,
nav.theme-light ul.links-wrapper li a:visited { color: #000 }
nav.theme-light ul.links-wrapper li a:focus,
nav.theme-light ul.links-wrapper li a:hover,
nav.theme-light ul.links-wrapper li a:active { color: var(--gray-600) }

nav.theme-light ul.links-wrapper li a.btn-solid:link,
nav.theme-light ul.links-wrapper li a.btn-solid:visited {
    color:#fff; border: solid 2px #000;
    background-color: #000 }
nav.theme-light ul.links-wrapper li a.btn-solid:focus,
nav.theme-light ul.links-wrapper li a.btn-solid:hover,
nav.theme-light ul.links-wrapper li a.btn-solid:active {
    color:#fff; border: solid 2px var(--gray-700);
    background-color: var(--gray-700) }

/* menu: dark theme */
nav.theme-dark, nav.theme-dark ul.links-wrapper.active { background-color: #000 }

nav.theme-dark ul.links-wrapper li a:link,
nav.theme-dark ul.links-wrapper li a:visited { color: #fff }
nav.theme-dark ul.links-wrapper li a:focus,
nav.theme-dark ul.links-wrapper li a:hover,
nav.theme-dark ul.links-wrapper li a:active { color: var(--gray-500) }

nav.theme-dark ul.links-wrapper li a.btn-solid:link,
nav.theme-dark ul.links-wrapper li a.btn-solid:visited {
    color:#000; border: solid 2px #fff;
    background-color: #fff }
nav.theme-dark ul.links-wrapper li a.btn-solid:focus,
nav.theme-dark ul.links-wrapper li a.btn-solid:hover,
nav.theme-dark ul.links-wrapper li a.btn-solid:active {
    color:#000; border: solid 2px var(--gray-400);
    background-color: var(--gray-400) }


.theme-light .cols-background div[class^="col-"] {
    background-color: var(--gray-200);
}

.theme-dark .cols-background div[class^="col-"] {
    background-color: var(--gray-800);
}

/* Section: Light theme */
.theme-light { background-color: var(--white-000) }
.theme-light .col-1-badge { color: #fff; background-color: #000 }
.theme-light h1, .theme-light h2, .theme-light h3,
.theme-light .col-1 h3.in-col-1,
.theme-light p, .theme-light li { color: var(--black-000) }
.theme-light .col-1 h3 { color: var(--slate-700); }

.theme-light .btn-solid:link,
.theme-light .btn-solid:link,
.theme-light .btn-solid:visited {
    color:            var(--white-000);
    background-color: var(--black-000);
    border-color:     var(--black-000);
}

.theme-light .btn-solid:focus,
.theme-light .btn-solid:hover,
.theme-light .btn-solid:active {
    color:            var(--white-000);
    background-color: var(--slate-700);
    border-color:     var(--slate-700);
}

.theme-light .btn-outline:link,
.theme-light .btn-outline:visited {
    color:            var(--black-000);
    background-color: transparent;
    border-color:     var(--black-000);
}

.theme-light .btn-outline:focus,
.theme-light .btn-outline:hover,
.theme-light .btn-outline:active {
    color:            var(--white-000);
    background-color: var(--slate-700);
    border-color:     var(--slate-700);
}

.theme-light .btn-plain:link,
.theme-light .btn-plain:visited {
    color:            var(--black-000);
    background-color: transparent;
}

.theme-light .btn-plain:focus,
.theme-light .btn-plain:hover,
.theme-light .btn-plain:active {
    color:            var(--slate-400);
}

/* Section: Dark theme */
.theme-dark { background-color: var(--black-000) }
.theme-dark .col-1-badge { color: #000; background-color: #fff }

/* .theme-dark h1, .theme-dark h2, .theme-dark h3,
.theme-dark p, .theme-dark li { color: var(--slate-050) } */
.theme-dark h1, .theme-dark h2, .theme-dark h3,
.theme-dark p, .theme-dark li { color: var(--white-000) }
.theme-dark .col-1 h3.in-col-1,
.theme-dark .col-1 h3 { color: var(--slate-100); }

.theme-dark .btn-solid:link,
.theme-dark .btn-solid:visited {
    color:            #000;
    background-color: var(--white-000);
    border-color:     var(--white-000);
}

.theme-dark .btn-solid:focus,
.theme-dark .btn-solid:hover,
.theme-dark .btn-solid:active {
    color:            var(--white-000);
    background-color: var(--slate-600);
    border-color:     var(--slate-600);
}

.theme-dark .btn-outline:link,
.theme-dark .btn-outline:visited {
    color:            var(--white-000);
    background-color: transparent;
    border-color:     var(--white-000);
}

.theme-dark .btn-outline:focus,
.theme-dark .btn-outline:hover,
.theme-dark .btn-outline:active {
    color:            var(--white-000);
    background-color: var(--slate-600);
    border-color:     var(--slate-600);
}

.theme-dark .btn-plain:link,
.theme-dark .btn-plain:visited {
    color:            var(--white-000);
    background-color: transparent;
}

.theme-dark .btn-plain:focus,
.theme-dark .btn-plain:hover,
.theme-dark .btn-plain:active {
    color:            var(--slate-400);
}



/* ================== BUTTON PAIRS ================ */

header > .container-btn,
section > .container-btn,
.col-2.col-text .container-btn {
    display: flex; flex-direction: row; flex-wrap: wrap; row-gap: 30px;
}

.col-3 > .container-btn {
    display: flex; flex-direction: row; flex-wrap: wrap; row-gap: 20px;
}

header > .container-btn a.btn,
section > .container-btn a.btn,
.col-2.col-text .container-btn,
.col-3 .container-btn {
    margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0 !important
}

@media (min-width: 768px) {
    header > .container-btn,
    section > .container-btn,
    .col-2.col-text .container-btn { column-gap: 48px }
    .col-3 > .container-btn { column-gap: 24px }
}

@media (max-width: 767px) {
    header > .container-btn,
    section > .container-btn,
    .col-2.col-text .container-btn { column-gap: 30px }
    .col-3 .container-btn { column-gap: 16px }
}

/* Buttons: left-aligned */
header:not(.text-center-desktop) .container-btn:not(.text-center-desktop) .container-btn,
section:not(.text-center-mobile) .container-btn:not(.text-center-mobile) .container-btn { justify-content: flex-start }

/* ================ NAV' ================ */

nav {
    width: 100%; max-width: 1920px; margin-left: auto; margin-right: auto;
    padding: 0 4%;
    position: relative;
    min-height: 72px;
    overflow: visible;
}

.container-menu {width: 100%; display: flex; align-items: center }
@media (min-width: 768px) { nav .brand { margin-top: 16px } }

ul.links-wrapper { list-style-type: none }


ul.links-wrapper li a:not(.btn) {
    display: block;
    margin-right: 20px;
    font-size: calc(17px + (19 - 17) * ((100vw - 320px)/(1140 - 320)));
    font-weight: 400;
    background-color: transparent;
    transition: .5s ease-in-out;
    margin-top: 20px
}

ul.links-wrapper.links-bold li a:not(.btn) {
    font-weight: 700;
}

ul.links-wrapper li a:link:not(.btn),
ul.links-wrapper li a:visited:not(.btn) { text-decoration: none; color: #000 }

ul.links-wrapper li a:focus:not(.btn),
ul.links-wrapper li a:hover:not(.btn),
ul.links-wrapper li a:active:not(.btn) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
    color: var(--gray-700);
}

@media (min-width: 768px) {
    ul.links-wrapper li { margin-right: 20px }
    ul.links-wrapper li:last-child { margin-right: 0 }
}

@media (max-width: 767px) {
    ul.links-wrapper.active li:first-child { margin-top: -30px }
    ul.links-wrapper.active li:last-child  { margin-bottom: 20px }
}

/* CTA button */
#btn-cta {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    padding: 5px 20px;
}

#btn-cta.btn-outline { background-color: transparent }

a#btn-cta > *:nth-child(2) { margin-left: 8px; margin-right: 0 }

@media (min-width: 767px) { a#btn-cta { margin-top: 16px } }
@media (max-width: 767px) { a#btn-cta { margin-top: 24px; margin-bottom: 12px } }

/* Hamburger icon */
.nav-toggle {
    height: 40px;
    position: absolute;
    right: 16px;
    top: 16px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px
}

.nav-toggle .bar-1,
.nav-toggle .bar-2,
.nav-toggle .bar-3 {
    width: 24px; height: 2px;
    margin: 7px 4px;
    transition: 0.4s;
}

/* Hamburger icon */
nav.theme-light .nav-toggle { background: #fff }
nav.theme-dark .nav-toggle  { background: #000 }

.nav-toggle .bar-1,
.nav-toggle .bar-2,
.nav-toggle .bar-3 {
    width: 24px; height: 2px;
    margin: 7px 4px;
    transition: 0.4s;
    background-color: #000;
}

nav.theme-light .nav-toggle .bar-1,
nav.theme-light .nav-toggle .bar-2,
nav.theme-light .nav-toggle .bar-3 { background: #000 }

nav.theme-dark .nav-toggle .bar-1,
nav.theme-dark .nav-toggle .bar-2,
nav.theme-dark .nav-toggle .bar-3 { background: #fff }

.change .bar1 { transform: rotate(-45deg) translate(-9px, 6px) }
.change .bar2 { opacity: 0 }
.change .bar3 { transform: rotate(45deg) translate(-8px, -8px) }


/* =========  DESKTOP ========= */

@media (min-width: 768px) {
    .container-menu { justify-content: initial }
    .container-menu-links { margin-left: auto }
    nav ul.links-wrapper { display: flex; }
    .nav-toggle { display: none }
    nav ul.links-wrapper .btn-shadow {
        box-shadow: 3.6px 3.6px 5.3px hsl(0deg 0% 0% / 0.42);
    }
}

/* =========  MOBILE ========= */

@media (max-width: 767px) {
    .container-menu {
        justify-content: space-between;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .nav-toggle { display: block }
    .container-menu-cta { padding-right: 64px }

    ul.links-wrapper {
        visibility: hidden; opacity: 0; z-index: -1; transform: translateY(-100%);
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        /* position: absolute; */
        position: fixed;
        top: 72px; right: 0; left: 0;
        /* min-width: 100%; */
        /* max-height: 100%; */
        text-align: left;
        font-size: calc(17px + (18 - 17) * ((100vw - 320px)/(1920 - 320)));
        /* background-color: var(--gray-300); */
        padding: 32px 0 10px 40px;
    }

    ul.links-wrapper.active {
        visibility: visible; opacity: 1; z-index: 99; transform: translateY(0);
        display: block;
        overscroll-behavior: contain;
        overscroll-behavior-y: contain;
        overflow-x: hidden;
        overflow-y: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Safari on mobiles */
    }

    .flyout-menu.flyout-menu-is-closed {
        right: -99999px; /* hides flyout menu */
    }

    .flyout-menu.flyout-menu-is-open {
        right: 0; /* displays flyout menu */
        overscroll-behavior: contain;
        overscroll-behavior-y: contain
    }
}

/* On mobiles, prevent scrolling outside menu */
.no-scroll { overflow: hidden }

.menu-drop-shadow {
    /* box-shadow: 8px 8px 10px #888 !important; */
    box-shadow: 8px 8px 10px var(--gray-500)
}

/* Sticky menu */
.menu-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 99999 }
.header-after-menu-sticky { margin-top: 72px; padding-top: 72px }

.header-after-menu-sticky.hero-bg { margin-top: 0; padding-top: 144px }

/* ================ HEADER 'HERO BLOCK' ================ */

header.w-1536px { max-width: 1536px; margin-right: auto !important; margin-left: auto }

header.w-1320px { max-width: 1320px; margin-right: auto !important; margin-left: auto }

header.w-1140px { max-width: 1140px; margin-right: auto !important; margin-left: auto }

header { display: flex; flex-direction: column; justify-content: space-around }

@media (min-width: 768px) { header > .container-btn { margin-top: 48px } }
@media (max-width: 767px) { header > .container-btn { margin-top: 48px; margin-bottom: 32px } }

header .container-text .badge {
    font-weight: 700; display: block; padding: 4px 20px;
    font-size: 100%; letter-spacing: 2px; width: fit-content;
    margin-left: auto; margin-right: auto;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px)/(1920 - 320)));
}

.theme-light .container-text .badge { color: #fff; background-color: #000 }
.theme-dark  .container-text .badge { color: #000; background-color: #fff }

header .container-text .badge.corners-soft { border-radius: 16px}
@media (min-width: 768px) { header .container-text .badge { margin-bottom: 32px } }
@media (max-width: 767px) { header .container-text .badge { margin-bottom: 24px } }

/* ELEMENTS: Headings */
@media (min-width: 768px) {
    header:not(.text-center-desktop) .container-text .badge { margin-left: 0; margin-right: 0 }

    header:not(.text-center-desktop) .container-text {
        margin-left: 0; margin-right: 0;
    }
    header:not(.text-center-desktop) > .container-btn.text-center-desktop,
    header.text-center-desktop > .container-btn.text-center-desktop { justify-content: center }
    header.text-center-desktop > .container-btn { justify-content: center }
    header:not(.text-center-desktop) > .container-btn { justify-content: flex-start }
    header .container-text.w-50 { width: 50% }
    header.text-center-desktop .container-text.w-50 {
        margin-left: auto; margin-right: auto; text-align: center }
    header .container-btn.w-50 { width: 50% }
    header .container-text.text-start-50 { margin-left: 50% }
    header .container-btn.text-start-50 { margin-left: 50% }
}

@media (max-width: 767px) {
    header .container-text .badge { margin-left: auto; margin-right: auto }
    header:not(.text-center-mobile) .container-text .badge { margin-left: 0; margin-right: 0 }
    header:not(.text-center-mobile) .container-text { margin-left: 0; margin-right: 0 }
    header.text-center-mobile > .container-text {
        margin-left: auto; margin-right: auto; text-align: center;
    }
    header:not(.text-center-mobile) > .container-btn.text-center-mobile,
    header.text-center-mobile > .container-btn.text-center-mobile { justify-content: center }
    header:not(.text-center-mobile) > .container-btn { justify-content: flex-start }
    header.text-center-mobile > .container-btn { justify-content: center }
}

header h1 { font-size: calc(44px + (90 - 44) * (100vw - 320px) / (1920 - 320)); line-height: 1.2 }
header h1.h1-text-long {
    font-size: calc(32px + (72 - 32) * (100vw - 320px) / (1920 - 320)); line-height: 1.2;
    letter-spacing: -1px;
}

header h2 { font-size: calc(22px + (34 - 22) * (100vw - 320px) / (1920 - 320));
    font-weight: 500; line-height: 1.3; margin-top: 24px
}

header h1.text-shadow { text-shadow: 2px 2px 2px var(--gray-800) }
header h2.text-shadow { text-shadow: 1px 1px 1px var(--gray-800) }

@media (min-width: 1025px) {
    header h1 { letter-spacing: -2px; line-height: 1.1 }
    header h2 { letter-spacing: -1px; }
}

@media (max-width: 1024px) {
    header h1 { letter-spacing: -1px; }
    header h2 { letter-spacing: 0; line-height: 1.4 }
}


/* == 50% text width desktop == */
@media (min-width: 768px) {
    header .container-text.w-50,
    header .container-btn.w-50  { width: 50% }

    header.text-center-desktop .container-text.w-50,
    header.text-center-desktop .container-btn.w-50 {
        width: 50%; justify-content: center;
        margin-left: auto; margin-right: auto
    }
    header .container-text.w-50 h1 { letter-spacing: -1px }
    header .container-text.w-50 h2 { letter-spacing: 0 }
}

/* ===== Vertical spacing between heading and sub-heading ==== */

/* Biggest screens */
@media (min-width: 2561px) {
    header h1 { margin-bottom: 1.25% }
    header .text-long h1 { margin-bottom: 2.5% }
    header .container-text.w-50 h1,
    header .container-text.w-50 .text-long h1 { margin-bottom: 4% }
}

/* Bigger screens */
@media (min-width: 1921px) and (max-width: 2560px) {
    header h1 { margin-bottom: 1.25% }
    header .text-long h1 { margin-bottom: 2.5% }
    header .container-text.w-50 h1,
    header .container-text.w-50 .text-long h1 { margin-bottom: 4% }
}

/* Modern desktops/laptops */
@media (min-width: 1441px) and (max-width: 1920px) {
    header h1 { margin-bottom: 1.25% }
    header .text-long h1 { margin-bottom: 2.5% }
    header .container-text.w-50 h1,
    header .container-text.w-50 .text-long h1 { margin-bottom: 3% }
}

/* Regular desktops/laptops */
@media (min-width: 1025px) and (max-width: 1440px) {
    header h1 { margin-bottom: 1.25% }
    header .text-long h1 { margin-bottom: 2.5% }
    header .container-text.w-50 h1 { margin-bottom: 5% }
}

/* Tablets: Landscape */
@media (min-width: 811px) and (max-width: 1024px) {
    header h1 { margin-bottom: 1.25% }
    header .text-long h1 { margin-bottom: 2.5% }
    header .container-text.w-50 h1,
    header .container-text.w-50 .text-long h1 { margin-bottom: 8% }
    header .badge + .text-long { margin-top: 7% }
}

/* Smaller Tablets: Portrait */
@media (min-width: 600px) and (max-width: 810px) {
    header h1 { margin-bottom: 1.25% }
    header .text-long h1 { margin-bottom: 2.5% }
    header .badge + .text-long { margin-top: 9% }
}

/* Mobiles wide */
@media (min-width: 413px) and (max-width: 599px) {
    header h1 { margin-bottom: 5% }
    header .text-long h1 { margin-bottom: 6%; line-height: 1.2 }
    header .badge + .text-long { margin-top: 11% }
}

/* Mobiles narrow */
@media (max-width: 412px) {
    /* header:not)_ h1 { margin-top: 32px; margin-bottom: 5% } */
    header .text-long h1 { margin-bottom: 6%; line-height: 1.2 }
    header .badge + .text-long { margin-top: 14% }
}

/* Start text 50% horizontally */
@media (min-width: 811px) {
    header.text-start-center .badge { margin-left: 49.25% }
    header.text-start-center .container-text,
    header.text-start-center > .container-btn { margin-left: 50% }
}

header .col-text h1 span.highlight,
header .container-text h1 span.highlight { color: var(--gray-600); }


/* =========== 'HERO BLOCK': SINGLE-COLUMN VISUAL ========== */

/* Height and horizontal/vertical padding */
@media (min-width: 768px) { header > figure { margin-top: 56px; overflow: visible } }
@media (max-width: 767px) { header > figure { margin-top: 42px; overflow: visible } }


/* Video widths on desktops/laptops only */
@media (max-width: 1920px) {
    /* left-aligned */
    header.figure-width-100 > figure { width: 130% }
    /* center-aligned */
    header.text-center-desktop.figure-width-100 > figure {
        width: 130%; margin-left: -15%; margin-right: -15%
    }
}

@media (min-width: 768px) {
    header:not(.text-center-desktop) figure { margin-left: 0; margin-right: 0 }
    header.text-center-desktop figure { margin-left: auto; margin-right: auto }
}

@media (max-width: 767px) {
    header:not(.text-center-mobile) figure { margin-left: 0; margin-right: 0 }
    header.text-center-mobile figure { margin-left: auto; margin-right: auto }
}

header figure.w-80 { width: 80% }
header figure.w-50 { width: 60% }
header figure.w-120 { width: 120%; margin-left: -10%; margin-right: -10% }

@media (min-width: 768px) { header figure.w-120 { margin-bottom: -6% } }
@media (max-width: 767px) { header figure.w-120 { margin-bottom: -12% } }

/* ====== 'HERO BLOCK': FULL WIDTH IMAGE/VIDEO ====== */

/* Default colours */
.hero-bg { display: flex; flex-direction: column; justify-content: space-around }


/* ====== Stacking order (Z-INDEX) of 'hero block' elements ====== */

/* Text IN FRONT of overlay and full-width image */

header .badge,
header .container-text,
header .container-btn { z-index: 3 }

/* Full-width image/video BEHIND text and BEHIND overlay */
header .container-media {
    position: absolute; z-index: 1;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
}

/* Full-width image BEHIND text and BEHIND overlay */
header .container-media {
    position: absolute; z-index: 1;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
}

/* Image/video completely FILLS hero block */
header .container-media {
    display: flex; justify-content: center; align-items: center; overflow: hidden
}

header .container-media * {
    position: absolute; height: 100%; width: 100%; object-fit: cover;
}

@media (max-width: 768px) {
    header.hero-bg .container-media.push-to-right * { object-position: 10% center }
    header.hero-bg .container-media.pull-to-left * { object-position: 82% center }
}

/* On mobiles, only left side of image visible. */
@media (max-width: 767px) {
    header .container-media.show-left { justify-content: flex-start }
}

/* On mobiles, only right side of image visible. */
@media (max-width: 767px) {
    header .container-media.show-right { justify-content: flex-end }
}

/* Headings */
/* .hero-bg h1, .hero-bg h2 { color: #fff } */

/* Overlay BEHIND text and IN FRONT of full-width image */
.hero-bg .container-overlay {
    position: absolute; z-index: 2;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: linear-gradient(rgba(0,0,0,var(--overlay-opacity)),rgba(0,0,0,var(--overlay-opacity)));
}


/* =============  HERO BLOCK: TWO-COLUMN LAYOUT ============ */

header.cols-2-half .col-2.col-text,
header.cols-2-half .col-2.col-visual,
header.cols-2-half .col-2.col-visual figure { margin-bottom: 0 !important }
header.cols-2-half .col-2.col-text h1 {
    font-size: calc(36px + (58 - 36) * ((100vw - 320px) / (1140 - 320)));
    margin-bottom: 10px;
}

header.cols-2-half .col-2.col-text h2 {
    font-size: calc(22px + (24 - 22) * ((100vw - 320px) / (1140 - 320)));
    letter-spacing: 0;
}

@media (max-width: 767px) {
    header.cols-2-half .col-2.col-text h2 { font-size: calc(20px + 0.390625vw) }
    header.cols-2-half.text-center-mobile .container-btn {
        justify-content: center;
    }
    header.cols-2-half.text-center-mobile .col-2.col-text .badge {
        margin-left: auto;
        margin-right: auto;
    }
}


/* =============  SECTION LAYOUT ============ */

@media (min-width: 768px) {
section.w-800px > div.container-btn,
section.w-800px > figure,
section.w-800px > h1,
section.w-800px > h2,
section.w-800px > h3,
section.w-800px > p,
section.w-800px > ul { max-width: 800px; margin-right: auto; margin-left: auto }

section.w-960px > div.container-btn,
section.w-960px > figure,
section.w-960px > h1,
section.w-960px > h2,
section.w-960px > h3,
section.w-960px > p,
section.w-960px > ul { max-width: 960px; margin-right: auto; margin-left: auto }

section.w-1024px > div.container-btn,
section.w-1024px > figure,
section.w-1024px > h1,
section.w-1024px > h2,
section.w-1024px > h3,
section.w-1024px > p,
section.w-1024px > ul { max-width: 1024px; margin-right: auto; margin-left: auto }

section.w-1140px.cols-2-half,
section.w-1140px > .flex-cols-2,
section.w-1140px > .flex-cols-3,
section.w-1140px > .flex-cols-4,
section.w-1140px > div.container-btn,
section.w-1140px > figure,
section.w-1140px > h1,
section.w-1140px > h2,
section.w-1140px > h3,
section.w-1140px > p,
section.w-1140px > ul { max-width: 1140px; margin-right: auto; margin-left: auto }

section.w-1320px.cols-2-half,
section.w-1320px > .flex-cols-2,
section.w-1320px > .flex-cols-3,
section.w-1320px > .flex-cols-4,
section.w-1320px > figure,
section.w-1320px > h1,
section.w-1320px > h2,
section.w-1320px > h3,
section.w-1320px > p,
section.w-1320px > ul { max-width: 1320px; margin-right: auto; margin-left: auto }

section.w-1536px.cols-2-half,
section.w-1536px > .flex-cols-2,
section.w-1536px > .flex-cols-3,
section.w-1536px > .flex-cols-4,
section.w-1536px > figure,
section.w-1536px > h1,
section.w-1536px > h2,
section.w-1536px > h3,
section.w-1536px > p,
section.w-1536px > ul { max-width: 1536px; margin-right: auto; margin-left: auto }

section.w-1536px.cols-2-half,
section.w-1536px > .flex-cols-2,
section.w-1536px > .flex-cols-3,
section.w-1536px > .flex-cols-4,
section.w-1536px > figure,
section.w-1536px > h1,
section.w-1536px > h2,
section.w-1536px > h3,
section.w-1536px > p,
section.w-1536px > ul { max-width: 1536px; margin-right: auto; margin-left: auto }

}

/* Badge */
section > div.badge {
    font-weight: 700; display: block; padding: 4px 20px;
    letter-spacing: 2px; width: fit-content;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px)/(1920 - 320)));
}

section > div.badge.corners-soft {
    border-radius: 16px; padding-left: 14px; padding-right: 14px
}

@media (min-width: 900px) {
    section.w-800px > div.badge { margin-left: calc((100% - 800px)/2);  margin-right: 0 }
    section.w-800px > figure { margin-left: calc((100% - 800px)/2);  margin-right: 0 }
}

@media (min-width: 1040px) {
    section.w-960px > div.badge { margin-left: calc((100% - 960px)/2);  margin-right: 0 }
    section.w-960px > figure { margin-left: calc((100% - 960px)/2);  margin-right: 0 }
}

@media (min-width: 1124px) {
    section.w-1024px > div.badge { margin-left: calc((100% - 1024px)/2); margin-right: 0 }
    section.w-1024px > figure { margin-left: calc((100% - 1024px)/2);  margin-right: 0 }
}
@media (min-width: 1240px) {
    section.w-1140px > div.badge { margin-left: calc((100% - 1140px)/2); margin-right: 0 }
    section.w-1140px > figure { margin-left: calc((100% - 1140px)/2);  margin-right: 0 }
}

@media (min-width: 768px) {
    section > div.badge { margin-bottom: 48px }
    section.text-center-desktop > div.badge { margin-left: auto; margin-right: auto }
}

@media (max-width: 767px) {
    section > .badge { margin-bottom: 32px }
    section.text-center-mobile > div.badge { margin-left: auto; margin-right: auto }
}

/* Illustrations */
@media (min-width: 768px) {
    section:not(.text-center-desktop) > figure:not(.text-center-desktop) {
        text-align: left;
    }
    section.w-800px.text-center-desktop > figure,
    section.w-800px > figure.text-center-desktop,
    section.w-960px.text-center-desktop > figure,
    section.w-960px > figure.text-center-desktop,
    section.w-1024px.text-center-desktop > figure,
    section.w-1024px > figure.text-center-desktop
    section.w-1140px.text-center-desktop > figure,
    section.w-1140px > figure.text-center-desktop {
        text-align: center;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 1024px) {
    section > figure { margin-bottom: 38px }
    section.w-800px > figure.figure-desktop-width-80 { width: calc(800px * 0.8) }
    section.w-800px > figure.figure-desktop-width-50 { width: calc(800px * 0.5) }
    section.w-960px > figure.figure-desktop-width-80 { width: calc(960px * 0.75) }
    section.w-960px > figure.figure-desktop-width-50 { width: calc(960px * 0.5) }
    section.w-1024px > figure.figure-desktop-width-80 { width: calc(1024px * 0.75) }
    section.w-1024px > figure.figure-desktop-width-50 { width: calc(1024px * 0.5) }
    section.w-1140px > figure.figure-desktop-width-80 { width: calc(1140px * 0.7) }
    section.w-1140px > figure.figure-desktop-width-50 { width: calc(1140px * 0.4) }
}

@media (min-width: 768px) and (max-width: 1023px) {
    section > figure { margin-bottom: 38px }
    section.w-800px > figure.figure-desktop-width-80 { width: calc(800px * 0.65) }
    section.w-800px > figure.figure-desktop-width-50 { width: calc(800px * 0.4) }
    section.w-960px > figure.figure-desktop-width-80 { width: calc(960px * 0.5) }
    section.w-960px > figure.figure-desktop-width-50 { width: calc(960px * 0.35) }
    section.w-1024px > figure.figure-desktop-width-80 { width: calc(1024px * 0.5) }
    section.w-1024px > figure.figure-desktop-width-50 { width: calc(1024px * 0.4) }
    section.w-1140px > figure.figure-desktop-width-80 { width: calc(1140px * 0.45) }
    section.w-1140px > figure.figure-desktop-width-50 { width: calc(1140px * 0.4) }
}

@media (max-width: 767px) {
    section > figure { margin-bottom: 24px }
    section > figure.figure-mobile-width-80 { width: 80% }
    section > figure.figure-mobile-width-50 { width: 50% }
    section:not(.text-center-mobile) > figure:not(.text-center-mobile) {
        text-align: left;
    }
    section.w-800px.text-center-mobile > figure,
    section.w-800px > figure.text-center-mobile,
    section.w-960px.text-center-mobile > figure,
    section.w-960px > figure.text-center-mobile,
    section.w-1024px.text-center-mobile > figure,
    section.w-1024px > figure.text-center-mobile
    section.w-1140px.text-center-mobile > figure,
    section.w-1140px > figure.text-center-mobile {
        text-align: center;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

section.fig-shadow > figure { overflow: visible }

section > figure.img-circle img { border-radius: 50% }

@media (min-width: 768px) {
    section > figure > .cols-img-textbox { left: 36px }
    section > figure > .cols-img-h4 {
        bottom: 20px; left: 36px;
        line-height: 1.2;
        font-size: calc(28px + (36 - 28) * ((100vw - 320px) / (1140 - 320)))
    }
}

section.fig-shadow > figure { overflow: visible }


@media (min-width: 768px) {
    section > figure > .cols-img-textbox { left: 36px }
    section > figure > .cols-img-h4 {
        bottom: 20px; left: 36px;
        line-height: 1.2;
        font-size: calc(28px + (36 - 28) * ((100vw - 320px) / (1140 - 320)))
    }
}

/* Heading */
section > h2 {
    font-weight: 700; line-height: 1.15; letter-spacing: -1px; margin-bottom: 14px;
    font-size: calc(28px + (56 - 28) * ((100vw - 320px) / (1920 - 320)));
}

@media (min-width: 768px) { section > h2 { margin-bottom: 20px } }
@media (max-width: 767px) { section > h2 { margin-bottom: 12px } }

section > h2 span.highlight { color: var(--gray-600); }

/* H2 heading underlines */
section > h2.heading-underline { position: relative }

section > h2.heading-underline:after {
    content:''; position: absolute; top: 100%; left: 0; right: 0;
    width: 6ch; height: 6px; background-color: var(--gray-600);
}

@media (min-width: 768px) {
    section > h2.heading-underline { margin-bottom: 72px }
    section > h2.heading-underline:after { margin-top: 24px; margin-bottom: 24px }
}

@media (max-width: 767px) {
    section > h2.heading-underline { margin-bottom: 52px }
    section > h2.heading-underline:after { margin-top: 18px; margin-bottom: 24px }
}

/* Sub-heading */
@media (min-width: 768px) { section > h3 { margin-top: 48px } }
@media (max-width: 767px) { section > h3 { margin-top: 32px } }

@media (min-width: 768px) {
    section > h3 { font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1140 - 320))) }
}

/* Paragraphs */
section > p {
    line-height: 1.6; margin-bottom: 16px;
	font-size: calc(17px + (23 - 17) * ((100vw - 320px) / (1920 - 320)));
}

section > p.deckhead {
    font-size: calc(20px + (26 - 20) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 20px;
}

/* Lists */
section > ul { margin-left: 0; margin-bottom: 18px }
section > ul li {
	font-size: calc(17px + (23 - 17) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    section > ul li { margin-left: 20px; padding-left: 20px }
}

@media (max-width: 767px) {
    section > ul li { margin-left: 16px; padding-left: 8px; margin-bottom: 10px }
}

/* Font Awesome */
@media (min-width: 768px) { section > ul.fa-ul li { margin-left: 30px; padding-left: 20px } }
@media (max-width: 767px) { section > ul.fa-ul li { margin-left: 24px; padding-left: 8px } }


/* Buttons */
@media (min-width: 768px) {
    section > .container-btn { margin-top: 40px }
    section:not(.text-center-desktop) > .container-btn.text-center-desktop,
    section.text-center-desktop > .container-btn.text-center-desktop { justify-content: center }
    section.text-center-desktop > .container-btn { justify-content: center }
    section:not(.text-center-desktop) > .container-btn { justify-content: flex-start }
}

@media (max-width: 767px) {
    section > .container-btn { margin-top: 32px }
    section:not(.text-center-mobile) > .container-btn.text-center-mobile,
    section.text-center-mobile > .container-btn.text-center-mobile { justify-content: center }
    section:not(.text-center-mobile) > .container-btn { justify-content: flex-start }
    section.text-center-mobile > .container-btn { justify-content: center }
}


/* =============  UPPER SINGLE COLUMN LAYOUT ============ */

.col-1 { width: 100% }

@media (min-width: 1200px) {
    .col-1 { padding-top: 0; padding-bottom: 5% !important }
    .col-1.text-center { margin: -2% auto 0 auto }
    .col-1:not(.text-center) { margin: -2% 0 0 0; padding-left: 0 }

    /* Default widths */
	.col-1.text-center {
        padding-left:  calc((100% - 800px)/2);
        padding-right: calc((100% - 800px)/2);
	}

    .col-1:not(.text-center) { padding-right: calc(100% - 800px) }

    .col-1.text-center.col-1-width-960px {
        padding-left:  calc((100% - 960px)/2);
        padding-right: calc((100% - 960px)/2);
    }

    .col-1.text-center.col-1-width-1140px {
        padding-left:  calc((100% - 1140px)/2);
        padding-right: calc((100% - 1140px)/2);
    }

    .col-1.col-1-width-960px:not(.text-center) { padding-right: calc(100% - 960px) }
    .col-1.col-1-width-1140px:not(.text-center) { padding-right: calc(100% - 1140px) }
}

/* Tablets and smaller desktops */
@media (min-width: 1025px) and (max-width: 1199px ) {
    .col-1 { margin-top: -2%; padding: 0 0 4% 0 }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .col-1.text-center { margin-top: -1.5%; padding: 0 5% 5% 5% }
    .col-1:not(.text-center) { margin-top: -1.5%; padding: 0 5% 5% 0 }
}

/* Mobiles */
@media (max-width: 768px) {
    .col-1.text-center { margin-top: -1.5%; padding: 0 5% 42px 5% }
    .col-1:not(.text-center) { margin-top: -1.5%; padding: 0 5% 42px 0 }
}

/* .col-1: content inside */
.col-1-badge {
    font-weight: 700; display: block; padding: 2px 10px;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px)/(1920 - 320)));
    letter-spacing: 2px;
    width: fit-content;
}

.col-1-badge.corners-soft { border-radius: 16px; padding-left: 14px; padding-right: 14px }
.badge.corners-soft { border-radius: 18px; padding-left: 14px; padding-right: 14px }

.col-1.text-center .col-1-badge { margin-left: auto; margin-right: auto }
div[class*="flex-cols-"].text-center .badge { margin-left: auto; margin-right: auto }


@media (min-width: 768px) { .col-1-badge { margin-bottom: 32px } }
@media (max-width: 767px) { .col-1-badge { margin-bottom: 24px } }

/* Single column layouts only */
@media (min-width: 768px) {
    .col-1 h3.in-col-1 {
        font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1140 - 320)));
    }
}

@media (min-width: 1025px) {
    .col-1 h3.in-col-1 { margin-top: 27px; }
}

/* Paragraphs AND lists */
.col-1 p, .col-1 ul li {
	font-size: calc(17px + (21 - 17) * ((100vw - 320px) / (1140 - 320)));
}

.col-1 p { line-height: 1.6; margin-bottom: 16px }

.col-1 p.standfirst {
    font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1140 - 320)));
    margin-bottom: 20px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .col-1 ul { margin-bottom: 18px }
    .col-1 ul li { margin-left: 20px; margin-bottom: 14px; padding-left: 10px }
}

/* Font Awesome */
.col-1 ul.fa-ul { margin-left: 14px !important; margin-bottom: 18px }
.col-1 ul.fa-ul li { margin-bottom: 14px }

@media (min-width: 768px) {
    .col-1 ul.fa-ul li { margin-left: 20px !important; padding-left: 10px !important}
}

@media (max-width: 767px) {
    /* .col-1 ul.fa-ul > li { margin-left: 16px !important; padding-left: 8px  !important}  */
}

/* All viewports: Paragraphs and lists */
.col-1 p:last-child,
.col-1 ul li:last-child { margin-bottom: 0 }

/* Align elements */
@media (min-width: 768px) {
    .col-1.text-center-desktop > .col-1-badge,
    .col-1.text-center-desktop > h2, section.text-center-desktop > h3
    .col-1.text-center-desktop > ul {
        text-align: center; margin-left: auto; margin-right: auto
    }
}

@media (max-width: 767px) {
    .col-1.text-center-mobile > .col-1-badge,
    .col-1.text-center-mobile > h2, .col-1.text-center-mobile > h3,
    .col-1.text-center-mobile ul {
        text-align: center; margin-left: auto; margin-right: auto
    }
}


/* Visual */
figure { position: relative }


/* =========== 2, 3 AND 4 COLUMN RESPONSIVE LAYOUTS ======== */

.col-2, .col-3, .col-4 { position: relative; /* overflow: visible */ }

/* Desktop */
@media (min-width: 768px) {
    .col-2, .col-3, .col-4 { display: flex; flex-direction: column }
    .flex-cols-2, .flex-cols-3, .flex-cols-4 {
        display: flex; flex-direction: row; flex-wrap: wrap;
    }

    /* row gaps: default */
    .flex-cols-2 { row-gap: 70px }
    .flex-cols-3 { row-gap: 50px }
    .flex-cols-4 { row-gap: 40px }

    /* row gaps */
    .flex-cols-2.rows-gap-1,
    .flex-cols-3.rows-gap-1,
    .flex-cols-4.rows-gap-1 { row-gap: 0 }

    .flex-cols-2.rows-gap-2 { row-gap: 40px }
    .flex-cols-2.rows-gap-3 { row-gap: 70px }
    .flex-cols-2.rows-gap-4 { row-gap: 80px }

    .flex-cols-3.rows-gap-2 { row-gap: 25px }
    .flex-cols-3.rows-gap-3 { row-gap: 50px }
    .flex-cols-3.rows-gap-4 { row-gap: 75px }

    .flex-cols-4.rows-gap-2 { row-gap: 20px }
    .flex-cols-4.rows-gap-3 { row-gap: 40px }
    .flex-cols-4.rows-gap-4 { row-gap: 60px }
}

/* Mobiles */
@media (max-width: 767px) {
    .col-2, .col-3, .col-4 {
        display: block; max-width: 400px;
        margin-left: auto; margin-right: auto;
        margin-bottom: 42px;
    }
}

/* Headings for upper blocks in 2, 3 and 4-column sections */
.col-1 > h2 {
    font-weight: 700; line-height: 1.15; letter-spacing: -1px; margin-bottom: 14px;
    font-size: calc(28px + (48 - 28) * ((100vw - 320px) / (1140 - 320)));
}

.col-1 > h2 span.highlight { color: var(--gray-600); }

/* Headings for upper blocks in 2, 3 and 4-column sections
Typically after h2 heading */
.col-1 > h3 {
    font-weight: 400; line-height: 1.4;
    font-size: calc(19px + (24 - 19) * ((100vw - 320px) / (1140 - 320)));
}

/* Sub-heading for column and within single column layout */
section > h3,
.col-2 h3,
.col-1 > a.col-3-h3,
.col-2 a.col-2-h3 {
    font-weight: 700; line-height: 1.15; margin-bottom: 6px
}

/* Desktops */
@media (min-width: 768px) {
    .col-2 p, .col-2 ul,
    .col-3 p, .col-3 ul, .col-4 p, .col-4 ul { flex-grow: 1 }

    .col-2 p, .col-3 p, .col-4 p    { margin-bottom: 16px }
    .col-2 li, .col-3 li, .col-4 li { margin-bottom: 12px }

    .col-2 ul, .col-3 ul, .col-4 ul { margin-bottom: 18px }
    .col-2 ul.fa-ul, .col-3 ul.fa-ul, .col-4 ul.fa-ul { margin-left: 8px; margin-bottom: 18px }
    .col-2 ul.fa-ul li, .col-3 ul.fa-ul li, .col-4 ul.fa-ul li { margin-bottom: 14px }

    .col-2 figure { width: 100%; margin-bottom: 18px }
    .col-3 figure, .col-4 figure {
        width: 100%; margin-bottom: 26px;
        overflow: visible;
    }
}

@media (min-width: 768px) {
    .col-2.col-text .container-btn { margin-top: 40px }
}

@media (max-width: 767px) {
    .col-2.col-text .container-btn { margin-top: 32px }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .col-3 figure, .col-4 figure { margin-bottom: 18px }
}

/* Mobiles */
@media (max-width: 767px) {
    .col-2, .col-3, .col-4 {
        width: 100%; display: block; max-width: 400px;
        margin-left: auto; margin-right: auto;
        margin-bottom: 42px;
    }

    .col-2.col-text { margin-bottom: 0  !important }

    .cols-padding .col-2, .cols-padding .col-3, .cols-padding .col-4 {
        padding: 18px 18px 22px 18px;
    }

    .cols-padding .col-2 figure,
    .cols-padding .col-3 figure,
    .cols-padding .col-4 figure {
        margin-top: -18px;
        width: calc(100% + 36px);
        margin-left: calc(-18px);
        margin-right: calc(-18px);
    }

    .flex-cols-2.cols-padding > .col-2 figure.cols-fig-padding,
    .flex-cols-3.cols-padding > .col-3 figure.cols-fig-padding,
    .flex-cols-4.cols-padding > .col-4 figure.cols-fig-padding {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        overflow: hidden
    }

    /* Main heading for header or sub-heading for section */
    .col-2 h1, .col-2 h2,
    .col-3 h2, .col-4 h2 { font-size: calc(28px + 0.390625vw) }
    .col-2 h1, .col-2 h2 { line-height: 1.2 }

    /* Sub-heading withn text */
    .col-1 h3.in-col-1, .col-2 h3, .cols-2-half .col-2 h3,
    .col-3 h3, .col-4 h3,
    .col-1 .col-2 a.col-2-h3, .cols-2-half a.col-2-h3,
    .col-3 a.col-3-h3, .col-4 a.col-4-h3 { font-size: calc(22px + 0.390625vw) }

    /* Text content */
    div[class^="col-"] p,
    div[class^="col-"] li { font-size: calc(16px + 0.390625vw) }
    div[class^="col-"] p, div[class^="col-"] ul { margin-bottom: 16px }
    div[class^="col-"] li { margin-left: 15px; padding-left: 8px; margin-bottom: 14px }

    div[class^="col-"] ul.fa-ul li { margin-left: -14px; padding-left: 6px }
    div[class^="col-"] ul li span.fa-li { transform: translateY(1px) }

    div[class^="col-"] figure { margin-bottom: 18px }
    div[class^="col-"] figure.icon i[class^='fa'] { margin-top: 10px; margin-bottom: 18px }
    div[class^="col-"] figure.icon i[class^='la'] { margin-top: 6px; margin-bottom: 18px }

}

section.w-1536px.cols-2-half { max-width: 1536px; margin-right: auto; margin-left: auto }
section.w-1320px.cols-2-half { max-width: 1320px; margin-right: auto; margin-left: auto }
section.w-1140px.cols-2-half { max-width: 1140px; margin-right: auto; margin-left: auto }

@media (min-width: 768px) { section.cols-2-half { padding: 0 } }


section figure.figure-overlay::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(12deg, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.15) 52%, rgba(0, 0, 0, 0) 70%);
    z-index: 3;
}

/* =============  TWO COLUMN LAYOUT ============ */

.flex-cols-2 { column-gap: 5% } /* default */
.col-2 { flex-basis: 47.5% } /* default */

.flex-cols-2.cols-gap-1 { column-gap: 0 }
.flex-cols-2.cols-gap-2 { column-gap: 2% }
.flex-cols-2.cols-gap-3 { column-gap: 5% }
.flex-cols-2.cols-gap-4 { column-gap: 8% }

.cols-gap-1 .col-2 { flex-basis: 50% }
.cols-gap-2 .col-2 { flex-basis: 49% }
.cols-gap-3 .col-2 { flex-basis: 47.5% }
.cols-gap-4 .col-2 { flex-basis: 46% }

/* Elements */
.col-2 p { line-height: 1.6 }
.col-2 li { line-height: 1.5 }


/* Desktops */
@media (min-width: 1025px) {
    .flex-cols-2 > .col-2 h3,
    .flex-cols-2 > .col-2 a.col-2-h3 {
        font-size: calc(24px + (36 - 24) * ((100vw - 768px) / (1920 - 768)));
    }
    .flex-cols-2 > .col-2 p,
    .flex-cols-2 > .col-2 ul li {
        font-size: calc(18px + (23 - 18) * ((100vw - 768px) / (1920 - 768)));
    }
    .flex-cols-2 > .col-2 ul li {  margin-left: 18px; padding-left: 12px }
    .flex-cols-2 > .col-2 ul.fa-ul li { margin-left: 22px; padding-left: 10px }
    .flex-cols-2 > .col-2 ul.fa-ul li span.fa-li { transform: translateY(2px) }
    .flex-cols-2 > .col-2 figure { margin-bottom: 32px }
    .flex-cols-2.cols-padding > .col-2 { padding: 30px 32px 38px 32px }
    .flex-cols-2.cols-padding > .col-2 figure {
        margin-top: -30px;
        width: calc(100% + 64px);
        margin-left: calc(-32px);
        margin-right: calc(-32px);
    }

    .flex-cols-2.cols-padding > .col-2 figure.cols-fig-padding {
        margin-top: 0; margin-left: 0; margin-right: 0; width: 100%; overflow: hidden;
    }
    /* .flex-cols-2 > .col-2 .container-btn { margin-top: 24px } */
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .flex-cols-2 > .col-2 h3,
    .flex-cols-2 > .col-2 a.col-2-h3 { font-size: 25px }
    .flex-cols-2 > .col-2 p,
    .flex-cols-2 > .col-2 ul li { font-size: 19px }
    .flex-cols-2 > .col-2 ul li { margin-left: 18px; padding-left: 8px }
    .flex-cols-2 > .col-2 ul.fa-ul li { margin-left: 22px }
    .flex-cols-2 > .col-2 figure { margin-bottom: 20px }
    .flex-cols-2.cols-padding > .col-2 { padding: 20px 22px 28px 22px }
    .flex-cols-2.cols-padding > .col-2 figure {
        margin-top: -20px;
        width: calc(100% + 44px);
        margin-left: calc(-22px);
        margin-right: calc(-22px);
    }
    .flex-cols-2.cols-padding > .col-2 figure.cols-fig-padding {
        margin-top: 0; margin-left: 0; margin-right: 0; width: 100%; overflow: hidden
    }

    .flex-cols-2 > .col-2 .container-btn { margin-bottom: -20px !important}
    .flex-cols-2 > .col-2 .container-btn { margin-top: 24px }
}

/* 2-column: button pairs */
.flex-cols-2 .col-2 .container-btn {
    display: flex; flex-direction: row; flex-wrap: wrap; row-gap: 30px; justify-content: flex-start;
    margin-bottom: 1px !important
}

.flex-cols-2 .col-2 .container-btn > a.btn {
    margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0 !important
}

@media (min-width: 768px) {
    .flex-cols-2 .col-2 .container-btn { margin-top: 20px; column-gap: 48px }
    .flex-cols-2 .col-2 .container-btn.text-center-desktop {
        justify-content: center !important
    }
}

@media (max-width: 767px) {
    .flex-cols-2 .col-2 .container-btn { margin-top: 32px; column-gap: 30px }
    .flex-cols-2 .col-2 .container-btn.text-center-mobile {
        justify-content: center !important
    }
}

/* Font Awesome: Larger and smaller icons */
.flex-cols-2 > .col-2 figure.icon i[class^='fa'] { font-size: 116px }
.flex-cols-2 > .col-2 figure.icon.icon-small i[class^='fa'] { font-size: 80px; }

/* Light Awesome: Larger and smaller icons */
.flex-cols-2 > .col-2 figure.icon i[class^="la"] { font-size: 150px }
.flex-cols-2 > .col-2 figure.icon.icon-small i[class^="la"] { font-size: 110px }

/* Font Awesome: Vertical spacing */
@media (min-width: 768px) {
    .flex-cols-2 > .col-2 figure.icon i[class^='fa'] { margin-top: 24px; margin-bottom: 0 }
}
@media (max-width: 767px) {
    .flex-cols-2 > .col-2 figure.icon i[class^='fa'] { margin-top: 0; margin-bottom: 18px }
}

/* Light Awesome: Vertical spacing */
.flex-cols-2 > .col-2 figure.icon i[class^="la"] { margin-top: 0; margin-bottom: -12px }



/* =============  THREE COLUMN LAYOUT ============ */

@media (min-width: 768px) {
    .flex-cols-3 { column-gap: 5% } /* default */
    .col-3 { flex-basis: 30% } /* default */

    .flex-cols-3.cols-gap-1 { column-gap: 0 }
    .flex-cols-3.cols-gap-2 { column-gap: 2% }
    .flex-cols-3.cols-gap-3 { column-gap: 5% }
    .flex-cols-3.cols-gap-4 { column-gap: 8% }

    .cols-gap-1 .col-3 { flex-basis: 33.3% }
    .cols-gap-2 .col-3 { flex-basis: 32% }
    .cols-gap-3 .col-3 { flex-basis: 30% }
    .cols-gap-4 .col-3 { flex-basis: 28% }
}

/* Elements */
.col-3 h3, .col-3 a.col-3-h3 {
    font-weight: 700; line-height: 1.15; margin-bottom: 6px
}
.col-3 h3 + a.btn { margin-top: 20px }

.col-3 p { line-height: 1.4 }
.col-3 p + a.btn { margin-top: 8px }
.col-3 li { line-height: 1.35 }


/* Desktops */
@media (min-width: 1025px) {
    .col-3 h3, .col-3 a.col-3-h3 {
        font-size: calc(20px + (30 - 20) * ((100vw - 768px) / (1920 - 768)));
    }

    .col-3 p, .col-3 ul li {
        font-size: calc(17px + (20 - 17) * ((100vw - 768px) / (1920 - 768)));
    }

    .col-3 ul li { margin-left: 16px; padding-left: 6px }
    .col-3 ul.fa-ul li { margin-left: 20px; padding-left: 11px }
    .col-3 ul.fa-ul li span.fa-li { transform: translateY(2px) }
    .flex-cols-3.cols-padding .col-3 { padding: 20px 20px 28px 20px }
    .flex-cols-3.cols-padding .col-3 figure {
        margin-top: -20px;
        width: calc(100% + 40px);
        margin-left: calc(-20px);
        margin-right: calc(-20px);
    }
    .flex-cols-3.cols-padding .col-3 figure.cols-fig-padding {
        margin-top: 0; margin-left: 0; margin-right: 0; width: 100%; overflow: hidden
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
   .col-3 h3, .col-3 a.col-3-h3 {
        font-size: calc(19px + (22 - 19) * ((100vw - 768px) / (1024 - 768)))
    }
    .col-3 p { font-size: calc(16px + (18 - 16) * ((100vw - 768px) / (1024 - 768))) }
    .col-3 ul li {
        font-size: calc(16px + (17 - 16) * ((100vw - 768px) / (1024 - 768)));
        margin-bottom: 6px; margin-left: 15px; padding-left: 4px
    }
    .col-3 ul.fa-ul li { margin-left: 20px; padding-left: 4px }
    .col-3 ul li span.fa-li i { font-size: 90% }
    .flex-cols-3.cols-padding .col-3 { padding: 16px 16px 20px 16px }
    .flex-cols-3.cols-padding .col-3 figure {
        margin-top: -16px;
        width: calc(100% + 32px);
        margin-left: calc(-16px);
        margin-right: calc(-16px);
    }

    .flex-cols-3.cols-padding .col-3 figure.cols-fig-padding {
        margin-top: 0; margin-left: 0; margin-right: 0; width: 100%; overflow: hidden
    }
}

/* Font Awesome */
.col-3 figure.icon i[class^='fa'] { font-size: 116px }
.col-3 figure.icon.icon-small i[class^='fa'] { font-size: 80px; }

/* Light Awesome */
.col-3 figure.icon i[class^='la'] {
    font-size: 150px; margin-bottom: -24px !important
}
.col-3 figure.icon.icon-small i[class^='la'] {
    font-size: 110px; margin-bottom: -24px !important
}

/* Icons: Vertical spacing */
@media (min-width: 801px) {
    .col-3 figure.icon i[class^='fa'] { margin-top: 32px; margin-bottom: 0 }
    .col-3 figure.icon i[class^='la'] { margin-top: 12px; margin-bottom: 0 }
}

@media (min-width: 768px) and (max-width: 800px) {
    .col-3 figure.icon i[class^='fa'] { margin-top: 6px; margin-bottom: 18px }
    .col-3 figure.icon i[class^='la'] { margin-top: -10px; margin-bottom: 18px }
}



/* ============= FOUR COLUMN LAYOUT ============ */

.flex-cols-4 { column-gap: 3% } /* default */
.col-4 { flex-basis: 22.75% } /* default */

.flex-cols-4.cols-gap-1 { column-gap: 0 }
.flex-cols-4.cols-gap-2 { column-gap: 2% }
.flex-cols-4.cols-gap-3 { column-gap: 3% }
.flex-cols-4.cols-gap-4 { column-gap: 4% }

.cols-gap-1 .col-4 { flex-basis: 25% }
.cols-gap-2 .col-4 { flex-basis: 23.5% }
.cols-gap-3 .col-4 { flex-basis: 22.75% }
.cols-gap-4 .col-4 { flex-basis: 22% }

/* Elements */
.col-4 p { line-height: 1.4 }
.col-4 li { line-height: 1.35 }
.col-4 p + a.btn { margin-top: 8px }
.col-4 h3 + a.btn { margin-top: 14px }

/* Desktops */
@media (min-width: 1025px) {
    .col-4 h3, .col-4 a.col-4-h3 {
        font-size: calc(18px + (26 - 18) * ((100vw - 768px) / (1920 - 768)))
    }
    .col-4 p, .col-4 ul li {
        font-size: calc(15px + (20 - 15) * ((100vw - 768px) / (1920 - 768)))
    }
    .col-4 ul li { margin-left: 15px; padding-left: 2px }
    .col-4 ul.fa-ul li { margin-left: 18px; padding-left: 2px }
    .col-4 ul.fa-ul li span.fa-li { transform: translateY(2px) }
    .col-4 ul li span.fa-li i { font-size: 90% }
    .col-4 figure { margin-bottom: 16px }
    .flex-cols-4.cols-padding > .col-4 { padding: 15px 16px 22px 16px }
    .flex-cols-4.cols-padding > .col-4 figure {
        margin-top: -15px;
        width: calc(100% + 32px);
        margin-left: calc(-16px);
        margin-right: calc(-16px);
    }

    .flex-cols-4.cols-padding .col-4 figure.cols-fig-padding {
        margin-top: 0; margin-left: 0; margin-right: 0; width: 100%; overflow: hidden
    }

    .w-1536px .col-4 h3,
    .w-1536px .col-4 a.col-4-h3 {
        font-size: calc(19px + (24 - 19) * ((100vw - 1025px) / (1536 - 1025)))
    }
    .w-1536px .col-4 p,
    .w-1536px .col-4 ul li {
        font-size: calc(16px + (18 - 16) * ((100vw - 1025px) / (1920 - 1025)))
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .col-4 h3, .col-4 a.col-4-h3  { font-size: 19px }
    .col-4 p, .col-4 ul li {
        font-size: calc(16px + (17 - 16) * ((100vw - 768px) / (1024 - 768)))
    }
    .col-4 ul li {
        line-height: 1.3; margin-bottom: 6px; margin-left: 13px; padding-left: 6px
    }
    .col-4 ul.fa-ul li { margin-left: 20px; padding-left: 4px }
    .col-4 ul.fa-ul > li { margin-left: 18px; padding-left: 2px }
    .col-4 ul li span.fa-li i { font-size: 90% }
    .col-4 figure { margin-bottom: 16px }
    .flex-cols-4.cols-padding .col-4 { padding: 15px 12px 18px 12px }

    .flex-cols-4.cols-padding .col-4 figure {
        margin-top: -15px; margin-left: -12px; margin-right: -12px;
    }
    .flex-cols-4.cols-padding .col-4 figure {
        margin-top: -15px;
        width: calc(100% + 24px);
        margin-left: calc(-12px);
        margin-right: calc(-12px);
    }

    .flex-cols-4.cols-padding .col-4 figure.cols-fig-padding {
        margin-top: 0; margin-left: 0; margin-right: 0; width: 100%; overflow: hidden
    }
}

/* Font Awesome: Larger and smaller icons */
.col-4 figure.icon i[class^='fa'] { font-size: 84px }
.col-4 figure.icon.icon-small i[class^='fa'] { font-size: 64px; }

/* Light Awesome: Larger and smaller icons */
.col-4 figure.icon i[class^='la'] { font-size: 110px }
.col-4 figure.icon.icon-small  i[class^='la'] { font-size: 80px }

/* Icons Awesome: Vertical spacing */
.col-4 figure.icon i[class^='la'] { margin-bottom: -12px !important }

@media (min-width: 801px) {
    .col-4 figure.icon i[class^='fa'] { margin-top: 32px; margin-bottom: 0 }
    .col-4 figure.icon i[class^='la'] { margin-top: 20px }
}

@media (min-width: 768px) and (max-width: 800px) {
    .col-4 figure.icon i[class^='fa'] { margin-top: 6px; margin-bottom: 0 }
    .col-4 figure.icon i[class^='la'] { margin-top: 0 }
}

.fig-shadow .col-4 figure { overflow: visible }


/* ========== 3 AND 4 COLUMNS TO 2 COLUMNS ON MOBILE ====================== */

/* Mobiles */
@media (max-width: 767px) {
    .mobile-col-2.flex-cols-3, .mobile-col-2.flex-cols-4 {
        display: flex; flex-direction: row; flex-wrap: wrap;
        justify-content: flex-start; align-content: flex-start;
        column-gap: 8%;
        row-gap: 42px;
    }

    .flex-cols-3.mobile-col-2 .col-3,
    .flex-cols-4.mobile-col-2 .col-4 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: flex-start;
        flex-basis: 46%;
        margin-top: 0; margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .mobile-col-2.cols-padding .col-3,
    .mobile-col-2.cols-padding .col-4 { padding: 14px 12px 16px 12px }

    /* Elements */
    .flex-cols-3.mobile-col-2 .col-3 .badge,
    .flex-cols-4.mobile-col-2 .col-4 .badge {
        margin-bottom: 14px;
        font-weight: 700;
        letter-spacing: 1px;
        font-size: 12px;
        padding: 3px 10px;
    }

    .flex-cols-3.mobile-col-2 .col-3 figure,
    .flex-cols-4.mobile-col-2 .col-4 figure { margin-bottom: 14px }

    .mobile-col-2.cols-padding .col-3 figure,
    .mobile-col-2.cols-padding .col-4 figure {
        margin-top: -14px;
        width: calc(100% + 24px);
        margin-left: calc(-12px);
        margin-right: calc(-12px);
    }


    .mobile-col-2 .col-3 h3, .mobile-col-2 .col-4 h3,
    .mobile-col-2 .col-3 .col-3-h3, .mobile-col-2 .col-4 .col-4-h3 {
        font-size: calc(18px + (26 - 18) * ((100vw - 320px) / (1140 - 320)));
    }

    .mobile-col-2 .col-3 p, .mobile-col-2 .col-3 ul,
    .mobile-col-2 .col-4 p, .mobile-col-2 .col-4 ul { flex-grow: 1 }


    .mobile-col-2 .col-3 p, .mobile-col-2 .col-3 li,
    .mobile-col-2 .col-4 p, .mobile-col-2 .col-4 li {
        font-size: calc(15px + (20 - 15) * ((100vw - 320px) / (1140 - 320)))
    }
    .mobile-col-2 div[class^="col-"] ul li span.fa-li i { font-size: 90% }
    .mobile-col-2 .col-3 li, .mobile-col-2 .col-4 li { margin-bottom: 6px }

    .mobile-col-2 .col-3 a.btn,
    .mobile-col-2 .col-4 a.btn { padding: 8px 11px; font-size: 15px }
    .mobile-col-2 .col-3 a.btn-small,
    .mobile-col-2 .col-4 a.btn-small { padding: 6px 10px; font-size: 14px }

}

/* ============= TWO COLUMNS, HEADER & SECTION: HALF TEXT AND BLEEDING VISUAL ============ */

/* All viewports */
.cols-2-half { position: relative }
.cols-2-half .col-2.col-visual figure { overflow: visible }

/* badge */
.cols-2-half .col-2.col-text .badge {
    font-weight: 700; display: block; padding: 2px 10px;
    letter-spacing: 2px;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px)/(1920 - 320)));
    width: fit-content;
}

.cols-2-half .col-2.col-text .badge.corners-soft {
    border-radius: 16px; padding-left: 14px; padding-right: 14px
}

/* Lists */
.cols-2-half .col-2-text ul.fa-ul li span.fa-li { transform: translateY(2px) }

/* Desktops */
@media (min-width: 768px) {
    /* section */
	.cols-2-half { display: flex; flex-direction: row; flex-wrap: wrap }
    /* Both columns */
	.cols-2-half .col-2.col-text,
    .cols-2-half .col-2.col-visual {
        display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center;
        max-width: 50%; padding-top: 5%; padding-bottom: 5%
    }

     /* Text column */
    .cols-2-half .col-2.col-text {
        padding-left: 5%;
        padding-right: 5%
    }

    .cols-2-half.flex-row-reverse .col-2.col-text {
        padding-left: 2.5%;
        padding-right: 5%;
        order: 2;
    }

    /* Visual column */
    .cols-2-half .col-2.col-visual {
        padding-left: 2.5%;
        padding-right: 7.5%
    }

    .cols-2-half.flex-row-reverse .col-2.col-visual {
        padding-left: 5%;
        padding-right: 5%;
        order: 1;
    }

    /* visual bleed: outside edge */
    .cols-2-half .col-2.col-visual.desktop-bleed-outside {
        padding-right: 0; min-width: 50%
    }
    .cols-2-half.flex-row-reverse .col-2.col-visual.desktop-bleed-outside {
        padding-left: 0; min-width: 50%
    }

    /* visual bleed: all edges */
    .cols-2-half .col-2.col-visual.desktop-bleed-all,
    .cols-2-half.flex-row-reverse .col-2.col-visual.desktop-bleed-all {
        padding: 0; min-width: 50%; overflow: hidden
    }

    .cols-2-half .col-2.col-visual.desktop-bleed-all figure,
    .cols-2-half.flex-row-reverse .col-2.col-visual.desktop-bleed-all figure {
        position: absolute; top: 0; bottom: 0; overflow: hidden;
    }

    .cols-2-half .col-2.col-visual.desktop-bleed-all figure { left: 0; right: 0 }

    .cols-2-half.flex-row-reverse .col-2.col-visual.desktop-bleed-all figure { left: 0; right: 50% }

    .cols-2-half .col-2.col-visual.desktop-bleed-all figure *,
    .cols-2-half.flex-row-reverse .cols-2-half .col-2.col-visual.desktop-bleed-all figure * {
        width: 100%; max-width: 100%; height: 100%; display: inline-block;
        object-fit: cover; object-position: center;
    }

    /* Text column */
    .cols-2-half .col-1-badge { margin-bottom: 32px }
    .cols-2-half .col-2.col-text p, .cols-2-half .col-2.col-text ul { flex-grow: 0 }

    .cols-2-half .col-2 h2 {
        font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (1140 - 320)));
        margin-bottom: 20px; letter-spacing: -1px; line-height: 1.2
    }

    .cols-2-half .col-2 h3 {
        font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1140 - 320)));
        margin-top: 32px;
    }

    /* Paragraphs and lists */
    .cols-2-half  .col-2 p, .cols-2-half .col-2 li {
        font-size: calc(17px + (20 - 17) * ((100vw - 320px) / (1140 - 320)));
    }

    .cols-2-half .col-2 p { margin-bottom: 16px }

    .cols-2-half .col-2 li {
        margin-bottom: 12px; margin-left: 20px; padding-left: 12px;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Text column */
    .cols-2-half .col-2.col-text { padding-left: 4%; padding-right: 4% }
     /* Visual column */
    .cols-2-half .col-2.col-visual { padding-left: 0; padding-right: 4% }

    /* Rows reversed */
	.cols-2-half.flex-row-reverse .col-2.col-text {
        padding-left: 4%; padding-right: 4%; order: 2;
    }
    .cols-2-half.flex-row-reverse .col-2.col-visual {
        padding-left: 4%; padding-right: 0; order: 1;
    }
}

/* Mobiles */
@media (max-width: 767px) {
    .cols-2-half {
        display: flex; flex-direction: column; flex-wrap: nowrap;
        justify-content: flex-start; gap: 32px;
    }

    /* default: visual column above text column */
    .cols-2-half .col-2.col-text { order: 2 }
    .cols-2-half .col-2.col-visual { order: 1 }

    /* Text column */
    .cols-2-half .col-1-badge { margin-bottom: 20px }

    .cols-2-half > .col-2.col-text > h2 { margin-bottom: 16px }
    .cols-2-half > .col-2.col-text > h3 { margin-top: 14px }

    /* Visual column */
    .cols-2-half .col-2.col-visual.mobile-bleed-edges {
        padding-left: 0 !important; padding-right: 0 !important;
        text-align: center; width: 120%; margin-left: -10%; margin-right: -10%;
    }
}

/* /////////////////////////////////////////////////////////////// */
/* //////////////// COLLECTION OF UTLITY CLASSES ///////////////// */
/* /////////////////////////////////////////////////////////////// */

/* Centre horizontally all the things */
.text-center {
    text-align: center !important;
    margin-left: auto; margin-right: auto
}

.text-shadow { text-shadow: 2px 2px var(--gray-800) }


/* Column effects */
.theme-light div[class*="flex-cols-"].cols-shadows div[class^='col-'] {
    box-shadow: rgba(0, 0, 0, 0.2) 14px 14px 14px 0
}

.theme-dark div[class*="flex-cols-"].cols-shadows div[class^='col-'] {
    box-shadow: rgba(255, 255, 255, 0.4) 14px 14px 14px 0
}

.theme-light div.flex-cols-2.cols-shadows div.col-2 {
    box-shadow: rgba(0, 0, 0, 0.2) 12px 16px 16px 0
}

.theme-dark div.flex-cols-2.cols-shadows div.col-2 {
    box-shadow: rgba(255, 255, 255, 0.4) 14px 16px 16px 0
}


div[class*="cols-borders-width-"] > div[class^="col-"] { border-style: solid }
.theme-light div[class*="cols-borders-width-"] > div[class^="col-"] { border-color: #000 }
.theme-dark  div[class*="cols-borders-width-"] > div[class^="col-"] { border-color: #fff }

.cols-borders-width-1 div[class^='col-'] { border-width: 1px }
.cols-borders-width-2 div[class^='col-'] { border-width: 2px }
.cols-borders-width-3 div[class^='col-'] { border-width: 3px }
.cols-borders-width-4 div[class^='col-'] { border-width: 4px }

.cols-corners-soft div[class^='col-']:not(.col-1) { border-radius: 18px }
.cols-corners-soft div[class^='col-']:not(section) { border-radius: 18px; overflow: hidden }

/* Fancy Image Effects */
.figure-shadow, .img-shadow {
    filter: drop-shadow(8px 8px 10px var(--gray-500));
}

.figure-border, .img-border {
    border: solid 2px var(--gray-700);
}

/* .cols-corners-soft {
    border-radius: 15px;
} */

section.fig-corners-soft figure img,
section.fig-corners-soft .col-2 figure img,
section.fig-corners-soft .col-3 figure img,
section.fig-corners-soft .col-4 figure img {
    border-radius: 15px;
}

@media (min-width: 768px) {
    section.fig-shadow figure,
    section.fig-shadow .col-2 figure,
    section.fig-shadow .col-3 figure,
    section.fig-shadow .col-4 figure {
        filter: drop-shadow(10px 10px 4px rgb(160, 174, 192, 0.45));
    }
}

@media (max-width: 767px) {
    section.fig-shadow figure,
    section.fig-shadow .col-2 figure,
    section.fig-shadow .col-3 figure,
    section.fig-shadow .col-4 figure {
        filter: drop-shadow(6px 6px 4px rgb(160, 174, 192, 0.75))
    }
}

.img-rotate-clock  figure img { transform: rotate(1deg) }
.img-rotate-cclock figure img { transform: rotate(-1deg) }

.img-rounded { border-radius: 50% } /* Square images only */

.col-3.img-circle figure,
.col-4.img-circle figure { text-align: center; }

.col-2.col-visual.img-circle figure img,
.col-2.img-circle figure img,
.col-3.img-circle figure img,
.col-4.img-circle figure img {
    border-radius: 50%;
    margin-left: auto; margin-right: auto;
}

.col-2.col-visual.img-circle figure img { width: 80% }
.flex-cols-2 > .col-2.img-circle figure img { width: 70% }
.col-3.img-circle figure img { width: 80% }
.col-4.img-circle figure img { width: 70% }

@media (min-width: 768px) {
    .flex-cols-2 > .col-2.img-circle figure { margin-bottom: 42px }
    .col-3.img-circle figure,
    .col-4.img-circle figure { margin-bottom: 26px }
    .flex-cols-2.cols-background.cols-padding .col-2.img-circle figure img {
        margin-top: 42px
    }
    .flex-cols-3.cols-background.cols-padding .col-3.img-circle figure img,
    .flex-cols-4.cols-background.cols-padding .col-4.img-circle figure img { margin-top: 20px }
}

@media (max-width: 768px) {
    .flex-cols-2.cols-background.cols-padding .col-2.img-circle figure,
    .flex-cols-3.cols-background.cols-padding .col-3.img-circle figure,
    .flex-cols-4.cols-background.cols-padding .col-4.img-circle figure {
        margin-bottom: 28px;
    }

    .flex-cols-2.cols-background.cols-padding .col-2.img-circle figure img,
    .flex-cols-3.cols-background.cols-padding .col-3.img-circle figure img,
    .flex-cols-4.cols-background.cols-padding .col-4.img-circle figure img {
        margin-top: 12px;
    }
}

/* Icons as illustrations */
div[class^='col-'] figure.icon {
    display: block; line-height: 1.4;
    color: var(--gray-600);
    margin-bottom: 30px
}

/* Icons centre-aligned */
div[class^='col-'] figure.icon {
    text-align: center; ; width:100%;
}

/* Icons left-aligned */
div[class^='col-'] figure.icon-left { text-align: left }
.cols-padding div[class^='col-'] figure.icon-left i { margin-left: 22px }

@media (max-width: 767px) {
    div[class^='col-'] figure.icon {
        padding-top: 18px; width:100%;
    }
}

/* Video - files */
.container-video-file {
    position: relative; overflow: hidden;
}

.container-video-file video { width: 100%; height: auto }

/* Video - YouTube */
.container-video-yt {
    overflow: hidden; position: relative; width: 100%; margin-bottom: 32px;
}

.container-video-yt::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.container-video-yt iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ========== COLUMN BADGES ============= */

div[class*="flex-cols-"] div[class^='col-'] .badge,
.col-2.col-text .badge {
    margin-bottom: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 4px 14px;
    width: fit-content;
}

@media (min-width: 768px) { header .col-2.col-text .badge { margin-bottom: 42px } }
@media (max-width: 767px) { header .col-2.col-text .badge { margin-bottom: 32px } }

section .col-2.col-text .badge { margin-bottom: 24px }

div.flex-cols-3 div.col-3 .badge { font-size: 80% }
div.flex-cols-4 div.col-4 .badge { font-size: 72% }

.theme-light .badge { color: #fff; background-color: #000 }
.theme-dark  .badge { color: #000; background-color: #fff }

/* =========== COLUMN IMAGE OVERLAYS ============ */
.col-3 figure.figure-overlay { position: relative; }
.col-3 figure.figure-overlay::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* background: linear-gradient(180deg, rgba(33,37,41,0),rgba(33,37,41,0.65)); */
    /* background-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,.85) 100%); */
    background-image: linear-gradient(12deg, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.15) 52%, rgba(0, 0, 0, 0) 70%);
    z-index: 3;
}

/* Top left text */
figure .cols-img-textbox {
    position: absolute; top: 16px; left: 16px;
    background-color: var(--red-700); color: #fff; letter-spacing: 2px;
    letter-spacing: 2px; font-size: 96%; font-weight: 700;
    padding: 2px 8px; width: fit-content; z-index: 4;
}

@media (min-width: 1025px) {
    figure .cols-img-textbox {
        font-size: 85%;
        top: 16px; left: 16px;
        font-weight: 700;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    figure .cols-img-textbox {
        font-size: 80%;
        top: 12px; left: 12px;
        font-weight: 700;
    }
}

@media (max-width: 767px) {
    figure .cols-img-textbox {
        font-size: 80%;
        top: 12px; left: 12px;
        font-weight: 700;
    }
}

@media (max-width: 767px) {
    .mobile-col-2 .col-3 figure.figure-overlay::after,
    .mobile-col-2 .col-4 figure.figure-overlay::after {
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    }
}

figure .cols-img-textbox.corners-soft {
    border-radius: 16px; padding-left: 14px; padding-right: 14px
}

@media (max-width: 767px) {
    .mobile-col-2 .col-3 .figure-overlay .cols-img-h4,
    .mobile-col-2 .col-4 .figure-overlay .cols-img-h4 { display: none }
}

figure .cols-img-h4 {
    position: absolute; bottom: 0; left: 16px;
    color: #fff; letter-spacing: 1px;
    font-size: 112%; font-weight: 700;
    padding-bottom: 12px; padding-right: 14px;
    text-shadow: 2px 1px 0 #000;
    z-index: 4; line-height: 1.25;
}


/* ============ Hyperlinks in text =========== */

a:not(.btn):link, a:not(.btn):visited {
    text-decoration: underline; transition: all 0.2s linear;
}

@media (min-width: 768px) {
    a:not(.btn):link, a:not(.btn):visited {
        text-decoration-thickness: 2px; text-underline-offset: 7px;
    }
}

@media (max-width: 767px) {
    a:not(.btn):link, a:not(.btn):visited {
        text-decoration-thickness: 1.5px; text-underline-offset: 5px;
    }
}

/* .theme-light a:not(.btn):link, .theme-light a:not(.btn):visited { color: var(--blue-700) }
.theme-dark  a:not(.btn):link, .theme-dark a:not(.btn):visited  { color: var(--sky-400)  }

.theme-light a:not(.btn):focus, .theme-light a:not(.btn):hover, .theme-light a:not(.btn):active,
.theme-dark a:not(.btn):focus,  .theme-dark a:not(.btn):hover,  .theme-dark a:not(.btn):active {
    color: var(--red-500)
} */

/* Column h3 sub-headings as hyperlinks */
a.col-2-h3, a.col-3-h3, a.col-4-h3 {
    display: block;
    text-decoration: underline; transition: all 0.2s linear;
}

.theme-light div[class^='col-'] a.col-[class^='col-']:link,
.theme-light div[class^='col-'] a.col-[class^='col-']:visited { color: var(--sky-600) }
.theme-dark  div[class^='col-'] a.col-[class^='col-']:link,
.theme-dark  div[class^='col-'] a.col-[class^='col-']:visited { color: var(--sky-600)  }

.theme-light div[class^='col-'] a.col-[class^='col-']:focus,
.theme-light div[class^='col-'] a.col-[class^='col-']:hover,
.theme-light div[class^='col-'] a.col-[class^='col-']:active { color: var(--red-400) }

/* H3 hyperlinks */
@media (min-width: 768px) {
    .col-2 a.col-2-h3, .col-3 a.col-3-h3, .col-4 a.col-4-h3 {
        margin-bottom: 16px;
        text-decoration-thickness: 2px; text-underline-offset: 9px;
    }
}

@media (max-width: 767px) {
    a.col-2-h3, a.col-3-h3, a.col-4-h3 {
        text-decoration-thickness: 1.5px; text-underline-offset: 5px;
    }
}

/* .theme-light div[class^='col-'] a.col-2-h3:link,
.theme-light div[class^='col-'] a.col-2-h3:visited { color: var(--blue-700) }
.theme-light div[class^='col-'] a.col-2-h3 { text-decoration-color: var(--blue-700) } */

/* .theme-light div[class^='col-'] a.col-3-h3:link,
.theme-light div[class^='col-'] a.col-3-h3:visited { color: var(--blue-700) }
.theme-light div[class^='col-'] a.col-3-h3 { text-decoration-color: var(--blue-700) } */

.theme-light div[class^='col-'] a[class^='col-']:link,
.theme-light div[class^='col-'] a[class^='col-']:visited {
    color: var(--blue-700);
    text-decoration-color: var(--blue-700);
}

.theme-light div[class^='col-'] a[class^='col-']:focus,
.theme-light div[class^='col-'] a[class^='col-']:hover,
.theme-light div[class^='col-'] a[class^='col-']:active {
    color: var(--blue-500);
    text-decoration-color: var(--blue-500);
}

.theme-dark div[class^='col-'] a[class^='col-']:link,
.theme-dark div[class^='col-'] a[class^='col-']:visited {
    color: var(--sky-500);
    text-decoration-color: var(--sky-500);
}

.theme-dark div[class^='col-'] a[class^='col-']:focus,
.theme-dark div[class^='col-'] a[class^='col-']:hover,
.theme-dark div[class^='col-'] a[class^='col-']:active {
    color: var(--sky-300);
    text-decoration-color: var(--sky-300);
}

/* =============== BUTTONS: REAL AND FAUX ============== */

.btn:not(.btn-plain), button {
    font-family: var(--font-sans); line-height: 1.5; text-decoration: none;
    cursor: pointer; user-select: none; white-space: nowrap;
    font-weight: 600; transition: all 0.3s linear;
    position: relative; border-style: solid; border-width: 2px;
    display: inline-block;  width: fit-content;
}

/* button content */
.btn span, button span { display: inline-block }
.btn i, button i { align-self: center; color: inherit; display: inline-block; font-size: 102% }

/* button styles */
.btn-soft { border-radius: 12px; }
.btn-pill { border-radius: 50px }

.btn-block {
    display: block; width: 98% !important;
    text-align: center; margin-right: 4px !important;
    margin-left: 0 !important
}

.theme-light .btn-plain,
.theme-dark .btn-plain {
    margin-top: 8px;
    padding: 0; font-weight: 700;
    text-decoration: underline !important;
    font-family: var(--font-sans); line-height: 1.5;
    cursor: pointer; user-select: none; white-space: nowrap;
    font-weight: 600; transition: all 0.3s linear;
    position: relative; border-style: none; border-width: 0;
    display: inline-block;  width: fit-content;
}

.btn-plain:focus,
.btn-plain:hover,
.btn-plain:active {
    text-decoration: none
}

.container-btn .btn-plain { padding-top: 12px }

@media (min-width: 768px) {
    .theme-light .btn-plain, .theme-light .btn-plain:link, .theme-light .btn-plain:visited {
        text-decoration-thickness: 2px !important; text-underline-offset: 7px;
    }
}

@media (max-width: 767px) {
    .btn-plain:link, .btn-plain:visited {
        text-decoration-thickness: 1.5px; text-underline-offset: 5px;
    }
}

.container-btn .btn-shadow,
div[class*='col-'] .btn-shadow {
    box-shadow: 3.6px 3.6px 5.3px hsl(0deg 0% 0% / 0.42);
    margin-bottom: 8px !important
}

.btn-uppercase { text-transform: uppercase; letter-spacing: 1.5px }

/* Button sizes */
.btn { padding: 10px 18px; font-size: 18px }

.btn > *:nth-child(2), button > *:nth-child(2) { margin-left: 14px; margin-right: 0 }

.btn-small { padding: 6px 12px;  font-size: 16px }
.btn-small i { font-size: 13px }
.btn-small > *:nth-child(2) { margin-left: 10px; margin-right: 0 }

.btn-large { padding: 14px 26px; font-size: 18px }
.btn-large.btn-plain { font-size: 20px }
.btn-large > *:nth-child(2) { margin-left: 16px; margin-right: 0 }

@media (max-width: 767px) {
    .mobile-col-2 a.btn { padding: 10px 15px; font-size: 16px }
    .mobile-col-2 a.btn-small { padding: 6px 10px;  font-size: 14px}
    .mobile-col-2 a.btn-small i { font-size: 12px }
    .mobile-col-2 a.btn-large { padding: 14px 22px; font-size: 16px }
}

.text-center.flex-cols-3 .col-3 a.btn,
.text-center.flex-cols-4 .col-4 a.btn {
    text-align: center; margin-left: auto; margin-right: auto
}

/* ================== CONTACT FORM =============== */

/* == Contact form container == */

/* All screens */
#contact-form {
    background-color: var(--gray-200);
}

/* Desktop */
@media (min-width: 1024px) {
	#contact-form {
		margin: 1% 6% 0 6%;
		padding: 4% 6% 1% 6%
	}
}

/* Smaller screens and tablet */
@media (min-width: 768px) and (max-width: 1023px) {
	#contact-form {
		padding: 5% 8% 5% 8%;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto
    }
}

/* Small screens */
@media (max-width: 767px) {
	#contact-form {
        padding: 5% 9% 8% 9%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
	}
}

/* Upper Label */
#contact-form .col-1-badge {
    width: 100%;
    font-weight: bold; display: block;
    font-size: calc(15px + (17 - 15) * ((100vw - 320px)/(1140 - 320)));
    text-transform: uppercase;
    letter-spacing: 6px; /* word-spacing: 120%; */
    margin-bottom: 28px;
}

/* Heading */
#contact-form h2 {
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 3%;
	font-size: calc(25px + (48 - 25) * ((100vw - 320px) / (1920 - 320)));
}

/* Text */
#contact-form p {
    font-weight: normal;
	line-height: 1.5;
	margin-bottom: 7%;
	font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
}

#contact-form p a:hover, #contact-form p a:active {
    background-color: var(--gray-400);
}

#contact-form .flex-row { display: flex; justify-content: space-between }

#contact-form label, #contact-form input, #contact-form textarea {
	display: block;
}

#contact-form label {
	font-size: calc(17px + (19 - 17) * ((100vw - 320px) / (1920 - 320)));
	font-weight: normal;
	margin-bottom: 8px;
	/* display: flex; */
	align-items: baseline;
    display: inline-block;
    cursor: pointer;
}

#contact-form label span {
	font-weight: normal;
	margin-bottom: 8px;
	display: flex;
	align-items: baseline;
    display: none
}

#contact-form [type="text"],
#contact-form [type="email"],
#contact-form textarea {
    font-family: var(--sans-serif);
    width: 100%; background-color: var(--white-000);
    font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)))
}

#contact-form ::placeholder {
    background-color: var(--white-000)
}

#contact-form input, #contact-form textarea {
	padding: 10px 12px;
	border: 2px solid var(--black-000);
	border-radius: 5px;
}

#contact-form textarea {
    overflow: hidden;
    overflow-wrap: break-word;
    resize: horizontal;
    min-height: 163px;
}

#contact-form input:focus,
#contact-form textarea:focus {
	border: 2px solid var(--white-000);
}

#contact-form.flex-row .item-btn { width: 26% }

#contact-form #btn-submit {
	float: right;
    background-color: var(--black-000);
    color: var(--white-000);
	font-weight: bold;
    padding: 12px 28px;
    font-size: 18px;
    border: solid 2px var(--black-000);
    cursor: pointer;
    outline: none
}

#contact-form #btn-submit:hover,
#contact-form #btn-submit:active {
    background-color: var(--gray-700);
    color: var(--white-000);
}

#contact-form #btn-submit i {
	font-size: 104%
}

/* Big screens */
@media (min-width: 1024px) {
	#contact-form .flex-row { flex-direction: row; text-align: left; margin-bottom: 6% }
	#contact-form .flex-row .item-name,
	#contact-form .flex-row .item-email { width: 47% }
	#contact-form .flex-row .item-textarea { width: 64% }
	#contact-form .flex-row .item-btn { width: 30%; align-self: flex-end }
    #contact-form .contact-form-upper { padding-bottom: 48px }
}

/* Smaller screens */
@media (max-width: 1023px) {
	#contact-form .flex-row {
        flex-direction: column;
        text-align: center;
    }
    #contact-form label {
        margin-top: 20px;
    }

    .container-contact-form p {
        margin-bottom: 12px;
    }

	#contact-form [type="text"],
	#contact-form [type="email"],
	#contact-form textarea { margin-bottom: 20px }
    #contact-form #btn-submit { margin-top: 20px }
    #contact-form .contact-form-upper { padding-bottom: 12px }
}


/* ================== FOOTER =============== */

footer.theme-dark  { background-color: var(--trend-800) }
footer.theme-light { background-color: var(--white-000) }

/* Padding */
@media (min-width: 768px) { footer { padding: 3% 8% 4% 8% } }
@media (max-width: 767px) { footer { padding: 8% 8% 6% 8% } }

@media (min-width: 1025px) and (max-width: 1199px ) { footer { padding: 3% 10% 7% 10% } }
@media (min-width: 768px)  and (max-width: 1024px)  { footer { padding: 5% 5% 6% 5% } }
@media (max-width: 767px)                           { footer { padding: 8% 7% 12% 7% } }



/* Footer headings */
footer h2 {
   font-weight: 700;
   font-size: calc(26px + (48 - 26) * ((100vw - 320px)/(1920 - 320)));
   margin: 0 auto 16px auto;
   color: var(--white-000);
}

footer h3 {
    font-weight: normal;
    font-style:  italic;
    color: var(--gray-300);
    margin: 0 auto 20px auto;
    font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1920 - 320)));
}

/* Footer text links and icon links */
footer ul.footer-links,
footer ul.footer-icons {
    list-style-type: none;
    margin: 0 auto 48px auto
}

footer ul.footer-links li,
footer ul.footer-icons li {
    display: inline-block;
    margin: 0 32px 0 0;
}

footer ul.footer-links li:last-child,
footer ul.footer-icons li:last-child {
    margin-right: 0;
}

/* Footer text links */
footer ul.footer-links li a:link,
footer ul.footer-links li a:visited {
    font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1920 - 320)));
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
    text-decoration-color: var(--white-000);
    color: var(--white-000);
    transition: all 0.2s linear;
}

footer ul.footer-links li a:hover,
footer ul.footer-links li a:active  {
    text-decoration-color: transparent;
    background-color: transparent;
}

/* Footer icons */
footer ul.footer-icons li a:any-link i {
    text-decoration: none !important;
    font-size: calc(22px + (36 - 22) * ((100vw - 320px)/(1920 - 320)));
    color: var(--white-000);
    border-bottom-width: 0;
    transition: all 0.2s linear;
}

:is(footer ul.footer-icons li a:focus i, footer ul.footer-icons li a:hover i, footer ul.footer-icons li a:active i) {
    text-decoration: none;
    border-bottom-width: 0;
    border-bottom-color: transparent !important;
    text-decoration-thickness: 0;
    text-underline-offset: 0;
    color: var(--white-000);
}

/* Privacy and legal link */
footer p.privacy a:link, footer p.privacy a:hover {
    font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1920 - 320)));
    text-decoration: underline;
    text-decoration-thickness: auto;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
    text-decoration-color: var(--white-000);
    color: var(--white-000);
    transition: all 0.2s linear;
}

footer p.privacy a:hover, footer p.privacy a:active {
    text-decoration-color: transparent;
    background-color: transparent;
}


/* Footer-1 */
.footer-1 { text-align: center; margin-left: auto; margin-right: auto }

/* Footer-2 */
.footer-2 { text-align: left; margin: 0 }



/* ============ UTILITY CLASSES ============== */

/* @media (min-width:768px) { .flex-row-reverse { flex-direction: row-reverse } } */

@media (max-width:767px) { .flex-column-reverse { flex-direction: column-reverse } }

/* Horozontal alignment */
.text-center { text-align: center; margin-left: auto; margin-right: auto }
@media (min-width: 768px) { .text-center-desktop {
    text-align: center; margin-left: auto; margin-right: auto  }
}
@media (max-width: 767px) { .text-center-mobile  {
    text-align: center; margin-left: auto; margin-right: auto }
}

figure.figure-width-full {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* =========== ANIMATIONS ============= */

/* Animations - content on scroll */
.reveal-slide-up, .reveal-slide-down {
    position: relative; opacity: 0; transition: 1s all ease;
}

.reveal-slide-from-left, .reveal-slide-from-right {
    position: relative;
    opacity: 0;
    transition: 1s all ease;
}

.reveal-slide-up    { transform: translateY(150px) }
.reveal-slide-down  { transform: translateY(-150px) }

@media (min-width: 768px) {
    .reveal-slide-from-left  { transform: translateX(-450px) }
    .reveal-slide-from-right { transform: translateX(450px) }
}

@media (max-width: 768px) {
    .reveal-slide-from-left  { transform: translateX(150px) }
    .reveal-slide-from-right { transform: translateX(-150px) }
}

.reveal-slide-up.active,
.reveal-slide-down.active {
    transform: translateY(0); opacity: 1
}

.reveal-slide-from-left.active,
.reveal-slide-from-right.active {
    transform: translateX(0); opacity: 1
}

.reveal-fade-in { opacity: 0 }
.reveal-fade-in.active {
    animation: reveal-fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both
}

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

.reveal-scale-in { opacity: 0 }
.reveal-scale-in.active {
    animation: reveal-scale-in 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes reveal-scale-in {
    0%   { transform: scale(0); opacity: 1 }
    100% { transform: scale(1); opacity: 1 }
}

/* Animations - header on page load */
.reveal-slide-up-header {
    animation: reveal-slide-up-header 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.reveal-slide-from-left-header {
    animation: reveal-slide-from-left-header 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.reveal-slide-from-right-header {
    animation: reveal-slide-from-right-header 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.reveal-scale-in-header {
    animation: reveal-scale-in 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.reveal-fade-in-header {
    animation: reveal-fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both
}

@keyframes reveal-slide-up-header {
    0% {
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes reveal-slide-from-left-header {
    0% {
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes reveal-slide-from-right-header {
    0% {
        transform: translateX(1000px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
         opacity: 1;
    }
}

.slide-in-left-desktop, .slide-in-right-desktop {
    position: relative;
    opacity: 0;
    transition: 1s all ease;
}

@media (min-width: 768px) {
    .slide-in-right-desktop  {
        animation: slide-in-right-desktop 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    .slide-in-left-desktop {
        animation: slide-in-left-desktop 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
}

@keyframes slide-in-right-desktop {
    0% {
        transform: translateX(450px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left-desktop {
    0% {
        transform: translateX(-450px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}




.fig-corners-soft img { border-radius: 15px }

.theme-light .fig-shadows-box img {
    /* offset-x | offset-y | blur-radius | color */
    box-shadow: 8px 8px 8px var(--gray-500);
    overflow: visible;
}

.theme-dark .fig-shadows-box img {
    box-shadow: 8px 8px 8px var(--gray-600);
    overflow: visible;
}

@media (min-width: 768px) {
    .col-2 figure.fig-shadows-box, .col-2 figure.fig-shadows-trans { margin-bottom: 34px }
    .col-3 figure.fig-shadows-box, .col-3 figure.fig-shadows-trans,
    .col-4 figure.fig-shadows-box, .col-4 figure.fig-shadows-trans { margin-bottom: 26px }
}

@media (max-width: 767px) {
    div[class^="col-"] figure.fig-shadows-box,
    div[class^="col-"] figure.fig-shadows-trans { margin-bottom: 22px }
}

.theme-light .fig-shadows-trans img {
    /* offset-x | offset-y | blur-radius | color */
    filter: drop-shadow(8px 8px 8px var(--gray-500));
}

.theme-dark .fig-shadows-trans img {
    filter: drop-shadow(8px 8px 8px var(--gray-600));
}

@media (min-width: 768px) {
    header > figure.fig-shadows-box,
    .col-2 figure.fig-shadows-box,
    .col-2 figure.fig-shadows-trans { margin-bottom: 28px }
}

@media (max-width: 767px) {
    div[class^="col-"] figure.fig-shadows-box { margin-bottom: 22px }
}

figure.photos-zoom { overflow: hidden }
figure.photos-zoom img { transition: transform .5s ease }
figure.photos-zoom:hover img { transform: scale(1.15) }

figure.photos-brightness img {
    transition: transform 2s, filter 0.75s ease-in-out;
    filter: brightness(80%);
}

figure.photos-brightness:hover img {
    filter: brightness(105%);
}

/* H1 heading underlines */
/* h1.heading-underline,
h2.heading-underline { position: relative; display: inline-block } */

h1.heading-underline { margin-bottom: 64px }
h1.heading-underline:after { height: 10px; margin-top: 22px }

@media (min-width: 768px) { h1.heading-underline { margin-bottom: 72px } }
@media (max-width: 768px) { h1.heading-underline { margin-bottom: 54px } }

header.text-center-desktop h1.heading-underline:after,
header.text-center-mobile  h1.heading-underline:after {
    margin-left: auto; margin-right: auto;
}

header:not(.text-center-desktop) h1.heading-underline:after,
header:not(.text-center-mobile)  h1.heading-underline:after {
    margin-left: 0; margin-right: 0;
}

/* H2 heading underlines */
/* h1.heading-underline:after,
h2.heading-underline:after {
    content:'';
    position:absolute; top: 100%;
    /* left:0; right:0; */

    /* width: 40%; height: 6px; background-color: var(--gray-600);
} */

/* Single column - H2 heading underlines */
@media (min-width: 768px) {
    h1.heading-underline,
    h2.heading-underline { margin-bottom: 72px }
}

@media (max-width: 767px) {
    h1.heading-underline,
    h2.heading-underline { margin-bottom: 52px }
}

/* Column 2-half - H2 heading underlines (no centering) */
@media (min-width: 768px) {
    .col-2.col-text h1.heading-underline,
    .col-2.col-text h2.heading-underline { margin: 0 0 52px 0 }
    .col-2.col-text h1.heading-underline:after,
    .col-2.col-text h2.heading-underline:after { width: 32%; margin: 18px 0 12px 0 }
}

@media (max-width: 767px) {
    .col-2.col-text h1.heading-underline,
    .col-2.col-text h2.heading-underline { margin: 0 0 52px 0 }
    .col-2.col-text h1.heading-underline:after,
    .col-2.col-text h2.heading-underline:after { width: 40%; margin: 18px 0 12px 0 }
}

/* Column 2/3/4 - H2 heading underlines */
@media (min-width: 768px) {
    .col-1:not(.text-center) > h2.heading-underline { margin: 0 0 12px 0 }
    .col-1.text-center > h2.heading-underline { margin: 0 auto 12px auto }
    .col-1:not(.text-center) > h2.heading-underline:after { margin: 24px 0 60px 0 }
    .col-1.text-center > h2.heading-underline:after { margin: 24px auto 60px auto }
    /* Col 3 under H2 bottom border */
    .col-1 h2.heading-underline + h3 { margin-top: 42px }
}

@media (max-width: 767px) {
    .col-1:not(.text-center) > h2.heading-underline { margin: 0 0 12px 0 }
    .col-1.text-center > h2.heading-underline { margin: 0 auto 12px auto }
    .col-1:not(.text-center) > h2.heading-underline:after { margin: 24px 0 72px 0 }
    .col-1.text-center > h2.heading-underline:after { margin: 24px auto 72px auto }
    /* Col 3 under H2 bottom border */
    .col-1 h2.heading-underline + h3 { margin-top: 42px }
}