* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

html {
    overflow-x: hidden;
}

body {
    overflow: hidden;
}

/* ==========================================================================
   Hooks
   ========================================================================== */

:root {

    /* width */
    --mcg-max-width: 1920px;
    --mcg-max-width2: 1440px;

    --dxp-site-max-width: 100%;
    --dxp-s-section-columns-max-width: 100%;
    --dxp-c-section-columns-max-width: 100%;
    --dxp-c-l-max-content-width: 100%;
    --dxp-c-max-content-width: 100%;

    /* branding */
    --mcg-green: #34D3BD; /* Bright Teal */
    --mcg-green-light: #7BE6D6; /* Soft Teal Tint */
    --mcg-green-lighter: #E5FAF7;
    --mcg-green-even-lighter: #EDF8F4;
    --mcg-blue-light: #4A6F75; /* Muted Slate Blue */
    --mcg-blue: #0E4F56; /* Deep Teal */
    --mcg-blue-dark: #16484A;
    --mcg-blue-darker: #083A40; /* Gardian Dark Teal */
    --mcg-dark: #2B3F42; /* Charcoal Teal */
    --mcg-darker: #164849;
    --mcg-white: #ffffff;
    --mcg-orange: #FD7F20; /* Signal Orange */
    --mcg-yellow: #FACC15;
    --mcg-gray: #9AA6AC; /* Neutral Mid Gray */
    --mcg-gray-dark: #9CA3AF;
    --mcg-gray-darker: #767676;
    --mcg-gray-light: #E6ECEF; /* Cool Light Gray */
    --mcg-gray-lighter: #F0F5F4;
    --mcg-cream: #FAF9F7;  /* Soft Warm White */
    --mcg-red: #E5533D;
    
    /* fonts */
    --font-regular-12: 400 12px / 16px "Poppins";
    --font-regular-14: 400 14px / 20px "Poppins";
    --font-regular-16: 400 16px / 150% "Poppins";
    --font-regular-18: 400 18px / 28px "Poppins";
    --font-regular-20: 400 20px / 28px "Poppins";
    --font-regular-24: 400 24px / 32px "Poppins";
    --font-regular-36: 400 36px / 40px "Poppins";
    --font-regular-56: 400 56.43px / 65.5px "Poppins";

    --font-medium-16: 500 16px / 24px "Poppins Medium";
    --font-medium-24: 500 24px / 130% "Poppins Medium";

    --font-raleway-medium-18: 500 18px / 28px "Raleway Medium";

    --font-semi-bold-12: 600 12px / 14px "Poppins SemiBold";
    --font-semi-bold-14: 600 14px / 20px "Poppins SemiBold";
    --font-semi-bold-16: 600 16px / 24px "Poppins SemiBold";
    --font-semi-bold-18: 600 18px / 150% "Poppins SemiBold";
    --font-semi-bold-20: 600 20px / 130% "Poppins SemiBold";
    --font-semi-bold-24: 600 24px / 130% "Poppins SemiBold";
    --font-semi-bold-48: 600 48px / 56px "Poppins SemiBold";
    --font-semi-bold-72: 600 72px / 80px "Poppins SemiBold";

    --font-bold-12: 700 12px / 14px "Poppins Bold";
    --font-bold-14: 400 14px / 20px "Poppins Bold";
    --font-bold-16: 700 16px / 24px "Poppins Bold";
    --font-bold-18: 700 18px / 28px "Poppins Bold";
    --font-bold-20: 700 20px / 28px "Poppins Bold";
    --font-bold-24: 700 24px / 32px "Poppins Bold";
    --font-bold-36: 700 36px / 40px "Poppins Bold";
    --font-bold-60: 700 60px / 60px "Poppins Bold";
    --font-bold-90: 700 90px / 92.8px "Poppins Bold";

    --font-raleway-bold-42: 600 42px / 100% "Raleway Bold";

    --font-extra-bold-90: 800 60px / 60px "Poppins ExtraBold";

    /* general hooks */
    --dxp-g-brand: var(--mcg-green);
    --dxp-s-section-columns-max-width: 1280px;
    --dxp-c-link-text-color: var(--mcg-green);
    --dxp-c-link-text-color-hover: var(--mcg-green);
    --dxp-c-link-text-color-focus: var(--mcg-green);

    /* header hooks */
    --dxp-c-header-container-spacing-block-start: 0;
    --dxp-c-header-container-spacing-block-end: 0;
    --dxp-c-header-container-spacing-block-start-mobile: 0;
    --dxp-c-header-container-spacing-block-end-mobile: 0;
    --dxp-c-header-container-spacing-inline-start: 0;
    --dxp-c-header-container-spacing-inline-end: 0;
    --dxp-c-header-container-spacing-inline-start-mobile: 0;
    --dxp-c-header-container-spacing-inline-end-mobile: 0;

    /* footer hooks */
    --dxp-c-footer-container-spacing-block-start: 0;
    --dxp-c-footer-container-spacing-inline-end: 0;
    --dxp-c-footer-container-spacing-block-end: 0;
    --dxp-c-footer-container-spacing-inline-start: 0;
    --dxp-c-footer-container-spacing-block-start-mobile: 0;
    --dxp-c-footer-container-spacing-inline-end-mobile: 0;
    --dxp-c-footer-container-spacing-block-end-mobile: 0;
    --dxp-c-footer-container-spacing-inline-start-mobile: 0;

    /* misc hooks */
    --dxp-c-hr-margin-block-start: 0;
    --dxp-c-hr-margin-block-end: 0;

}

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
    font-family: "Poppins";
    src: url("/sfsites/c/resource/mycarguardian/font/Poppins/Poppins-Regular.ttf") format("truetype"),
        url("/resource/mycarguardian/font/Poppins/Poppins-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins Medium";
    src: url("/sfsites/c/resource/mycarguardian/font/Poppins/Poppins-Medium.ttf") format("truetype"),
        url("/resource/mycarguardian/font/Poppins/Poppins-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins SemiBold";
    src: url("/sfsites/c/resource/mycarguardian/font/Poppins/Poppins-SemiBold.ttf") format("truetype"),
        url("/resource/mycarguardian/font/Poppins/Poppins-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins Bold";
    src: url("/sfsites/c/resource/mycarguardian/font/Poppins/Poppins-Bold.ttf") format("truetype"),
        url("/resource/mycarguardian/font/Poppins/Poppins-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins ExtraBold";
    src: url("/sfsites/c/resource/mycarguardian/font/Poppins/Poppins-ExtraBold.ttf") format("truetype"),
        url("/resource/mycarguardian/font/Poppins/Poppins-ExtraBold.ttf") format("truetype");
}

@font-face {
    font-family: "Raleway";
    src: url("/sfsites/c/resource/mycarguardian/font/Raleway/Raleway-Regular.ttf") format("truetype"),
        url("/resource/mycarguardian/font/Raleway/Raleway-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Raleway Medium";
    src: url("/sfsites/c/resource/mycarguardian/font/Raleway/Raleway-Medium.ttf") format("truetype"),
        url("/resource/mycarguardian/font/Raleway/Raleway-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Raleway Bold";
    src: url("/sfsites/c/resource/mycarguardian/font/Raleway/Raleway-Bold.ttf") format("truetype"),
        url("/resource/mycarguardian/font/Raleway/Raleway-Bold.ttf") format("truetype");
}

.regular { font-family: "Poppins" !important; }
.medium { font-family: "Poppins Medium" !important; }
.semi-bold { font-family: "Poppins SemiBold" !important; }
.bold { font-family: "Poppins Bold" !important; }
.extra-bold { font-family: "Poppins ExtraBold" !important; }

/* ==========================================================================
   h1 to h6
   ========================================================================== */

h1 {
    width: 100%;
    font: var(--font-semi-bold-72);
    font-size: clamp(42px, 6vw + 1.5rem, 72px);
    line-height: clamp(48px, calc((10 / 9) * (6vw + 1.5rem)), 80px);
}

h1 {
    width: 100%;
    font: var(--font-semi-bold-72);
    font-size: clamp(42px, 6vw + 1.5rem, 72px);
}
@media (max-width: 475px) {
    h1 { line-height: 56px; }
}

h2 { font: var(--font-regular-36); }
h3 { font: var(--font-bold-24); }
h4 { font: var(--font-bold-20); }
h5 { font: var(--font-semi-bold-18); }
h6 { font: var(--font-regular-14); }

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    white-space: normal;
}

p { font: var(--font-regular-16); color: var(--mcg-dark); }
p.p-18 { font: var(--font-regular-18); color: var(--mcg-dark); }


:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).left { text-align: left; }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).center { width: 100%; text-align: center; }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).right { text-align: right; }

b {
    font: var(--font-bold-16);
}

i { font: var(--font-regular-12); color: var(--mcg-gray); font-style: normal; }


/* ==========================================================================
   Font colors
   ========================================================================== */

:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).white { color: var(--mcg-white); }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).green { color: var(--mcg-green); }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).gray { color: var(--mcg-gray); }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).gray-light { color: var(--mcg-gray-light); }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).blue { color: var(--mcg-blue); }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).blue-light { color: var(--mcg-blue-light); }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).blue-dark  { color: var(--mcg-blue-dark); }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).blue-darker { color: var(--mcg-blue-darker); }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).dark  { color: var(--mcg-dark); }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).darker { color: var(--mcg-darker); }
:is(h1, h2, h3, h4, h5, h6, p, div, span, mark).orange { color: var(--mcg-orange); }

/* ==========================================================================
   Positions
   ========================================================================== */

div.relative, span.relative, p.relative, img.relative, svg.relative, section.relative, h1.relative, h2.relative, h3.relative, h4.relative { position: relative; }
div.absolute, span.absolute, p.absolute, img.absolute, svg.absolute, section.relative, h1.absolute, h2.absolute, h3.absolute, h4.absolute{ position: absolute; }
div.center, span.center, p.center { display: flex; justify-content: center; align-items: center; }
div.centered, span.centered, p.centered, img.centered, svg.centered { position: absolute; top: 50%; transform: translate(0, -50%); }

/* ==========================================================================
   Paragraphs
   ========================================================================== */

section {
    width: 100%;
    /* min-height: 470px; */
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
}

section.padding-80 { padding: 80px; }
@media (max-width: 768px) {
    section.padding-80 { padding: 40px; }
}
@media (max-width: 475px) {
    section.padding-80 { padding: 40px 20px; }
}

section.no-min-height { min-height: 0; }
section.bg { 
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}
section.bg.cover { 
    background-size: cover;
}

.container {
    width: 100%;
    min-width: 0;
    max-width: var(--mcg-max-width);
}

.container.small {
    max-width: var(--mcg-max-width2);
}

.container.full { width: 100%; height: 100%; }
.container.center { display: grid; justify-content: center; }

section.cream { background-color: var(--mcg-cream); }
section.gray { background-color: var(--mcg-gray); }
section.gray-light { background-color: var(--mcg-gray-light); }
section.blue-light { background-color: var(--mcg-blue-light); }
section.blue { background-color: var(--mcg-blue); }
section.blue-dark { background-color: var(--mcg-blue-dark);}
section.blue-darker { background-color: var(--mcg-blue-darker); }
section.dark { background-color: var(--mcg-dark); }
section.darker { background-color: var(--mcg-darker); }
.overflow-hidden { overflow: hidden; }

article {
    width: 100%;
    height: auto;
    padding: 32px;
    background-color: var(--mcg-white);
    border: 1px solid var(--mcg-gray-light);
    border-radius: 12px;
    text-align: left;
    margin-bottom: 30px;
}

aside {
    width: 388px;
    height: min-content;
    padding: 33px;
    background-color: var(--mcg-white);
    border: 1px solid var(--mcg-gray-light);
    border-radius: 12px;
    text-align: left;
}
@media (max-width: 768px) {
    aside {
        width: 100%;
        min-width: 0;
    }
}

mark {
    width: 100%;
    display: block;
    margin: 24px auto;
    background-color: var(--mcg-green-lighter);
    border-radius: 8px;
    padding: 16px;
}

mark.relative { position: relative; }
mark.border { border: 1px solid var(--mcg-green); }
mark.left { text-align: left; }
mark.padding-left-24 { padding-left: 24px; }
mark.padding-24 { padding: 24px; }
mark.margin-0 { margin: 0; }

mark span { padding-left: 24px; font: var(--font-semi-bold-14); color: var(--mcg-dark); }
mark b { font: var(--font-semi-bold-14); color: var(--mcg-dark); }
mark p { font: var(--font-regular-14); color: var(--mcg-gray); }
mark i { font: var(--font-regular-12); color: var(--mcg-gray); font-style: normal; }

mark.split {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

mark.space {
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.frame {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.frame.blue { background-color: var(--mcg-blue); }
.frame.orange { background-color: var(--mcg-orange); }
.frame.green { background-color: var(--mcg-green); }
.frame.size-48 { width: 48px; height: 48px; }

.line {
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.line.green {
    background-color: #E5FAF7;
    border-radius: 12px;
}

.line.border {
    border-bottom: 1px solid var(--mcg-gray-light);
}

.line.gap-16 {
    gap: 16px;
}

hr {
    border: none;
    border-bottom: 1px solid var(--mcg-gray-light);
}

.capitalize { text-transform: capitalize; }

.width-1232 { width: 1232px; }
.width-896 { width: 896px; }

/* ==========================================================================
   2 columns
   ========================================================================== */

.two-equal-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 64px;
    padding: 0 24px;
}
.two-equal-columns .column {
    flex: 1 1 0;
    min-width: 0;
}
.two-equal-columns .column img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .two-equal-columns .column {
        flex-basis: 100%;
    }
}

.one-column-with-sidebar {
    width: 1232px;
    display: flex;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
}
@media (max-width: 1232px) {
    .form {
        width: 100%;
        min-width: 0;
    }
}
.one-column-with-sidebar .column {
    flex: 1;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.bar {
    width: auto;
    display: grid;
    grid-auto-flow: column;
    column-gap: 0;
    row-gap: 0;
    column-gap: 16px;
} @media (max-width: 475px) {
    .bar {
        grid-auto-flow: row;
        row-gap: 16px;
    }
}

.bar.left { justify-content: left; }
.bar.center { justify-content: center; }
.bar.right { justify-content: right; }

.bar.full { width: 100%; }
.bar.flex { display: flex; }
.bar.space { justify-content: space-between; }

.bar.end { align-items: end; }
.bar.centered { position: absolute; top: 50%; transform: translate(0, -50%); }
.bar.first { z-index: 10; }

.bar.vertical-on-mobile { flex-direction: row; grid-auto-flow: row; }
.bar.vertical-on-mobile button:nth-child(1) { order: 1; }
.bar.vertical-on-mobile button:nth-child(2) { order: 2; }
@media (max-width: 475px) {
    .bar.vertical-on-mobile { flex-direction: column; grid-auto-flow: column; row-gap: 8px; }
    .bar.vertical-on-mobile button:nth-child(1) { order: 2; }
    .bar.vertical-on-mobile button:nth-child(2) { order: 1; }
}

.bar.bar-80 {
    grid-auto-flow: column;
    margin-top: clamp(24px, 5vw + 8px, 80px);
    margin-bottom: clamp(24px, 5vw + 8px, 80px);
    padding: 0;
}
@media (max-width: 475px) {
    .bar.bar-80 {
        flex-direction: column;
        padding: 0 8px;
    }
    .bar.bar-80 button.mcg {
        width: 100%;
    }
}

button.mcg {
    width: min-content;
    /* min-width: 75px; */
    height: 48px;
    border-radius: 8px;
    padding: 0 40px;
    font: var(--font-bold-18);
    border: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    text-transform: capitalize;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    /* box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1); */
    position: relative;
}

/* button.mcg span {
    padding-left: 8px;
} */

button.orange {
    background-color: var(--mcg-orange);
    color: var(--mcg-white)
}

button.blue {
    background-color: var(--mcg-blue);
    color: var(--mcg-white)
}

button.white {
    background-color: var(--mcg-cream);
    color: var(--mcg-blue);
    border: 1px solid var(--mcg-blue);
}

button.green {
    background: linear-gradient(90deg, var(--mcg-green) 0%, var(--mcg-green-light) 100%);
    color: var(--mcg-darker);
}

button.gray {
    background-color: var(--mcg-gray);
    color: var(--mcg-white);
}

button.transparent {
    font: var(--font-regular-16);
    color: var(--mcg-gray);
    background-color: transparent;
    border: 1px solid var(--mcg-gray-light);
    box-shadow: none
}

button.height-35 { height: 35px; }
button.height-36 { height: 36px; }
button.height-50 { height: 50px; }
button.height-58 { height: 58px; }
button.height-60 { height: 60px; }
button.height-62 { height: 62px; }

button.wide { width: 100% !important; }
button.bold-16 { font: var(--font-bold-16); }

button.small { padding: 0 12px; font: 600 12px / 28px "Poppins SemiBold"; }
@media (max-width: 475px) {
    button.small {
        width: 100%;
    }
}

button.no-shadow { box-shadow: none; }

button.big {
    height: 60px;
    min-width: 277px;
}

button.bigger {
    height: 60px;
    min-width: 330px;
}

button img, 
button svg {
    vertical-align: middle;
}

/* ==========================================================================
   Input
   ========================================================================== */

input.default {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    
    background-color: var(--mcg-white);
    border: 1px solid var(--mcg-gray-light);
    border-radius: 12px;
    
    font: var(--font-regular-16);
    color: var(--mcg-dark);
}

input.default::placeholder {
    font: var(--font-regular-16);
    color: var(--mcg-gray-dark);
}

input.default:hover,
input.default:focus {
    border: 1px solid var(--mcg-gray);
}
input.default:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--mcg-gray), 0.15);
}

input.default:disabled {
    background-color: var(--mcg-gray-lightest);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ==========================================================================
   Checkboxes
   ========================================================================== */

.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--mcg-gray-light);
    border-radius: 4px;
    margin: 0;
    flex-shrink: 0;
    background: var(--mcg-white);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
}

.checkbox.darker input[type="checkbox"] {
    border: 1px solid var(--mcg-gray-darker);
}

.checkbox.small input[type="checkbox"] {
    width: 13px;
    height: 13px;
}

.checkbox input[type="checkbox"]:checked {
    background: var(--mcg-green) url("data:image/svg+xml;base64,PHN2ZyAKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgIHdpZHRoPSIxMSIKICAgIGhlaWdodD0iMTIiCiAgICB2aWV3Qm94PSIwIDAgMTEgMTIiCiAgICBmaWxsPSJub25lIgo+CiAgICA8cGF0aCAKICAgICAgICBkPSJNMTAuMjgxNCAyLjQ3MDdDMTAuNTc0NCAyLjc2MzY3IDEwLjU3NDQgMy4yMzk0NSAxMC4yODE0IDMuNTMyNDJMNC4yODE0NSA5LjUzMjQyQzMuOTg4NDggOS44MjUzOSAzLjUxMjcgOS44MjUzOSAzLjIxOTczIDkuNTMyNDJMMC4yMTk3MjcgNi41MzI0MkMtMC4wNzMyNDIyIDYuMjM5NDUgLTAuMDczMjQyMiA1Ljc2MzY3IDAuMjE5NzI3IDUuNDcwN0MwLjUxMjY5NSA1LjE3NzczIDAuOTg4NDc3IDUuMTc3NzMgMS4yODE0NSA1LjQ3MDdMMy43NTE3NiA3LjkzODY3TDkuMjIyMDcgMi40NzA3QzkuNTE1MDQgMi4xNzc3MyA5Ljk5MDgyIDIuMTc3NzMgMTAuMjgzOCAyLjQ3MDdIMTAuMjgxNFoiIAogICAgICAgIGZpbGw9IndoaXRlIgogICAgLz4KPC9zdmc+") no-repeat center;
    background-size: 12px;
    border-color: var(--mcg-green);
}

.checkbox.small input[type="checkbox"]:checked {
    background-size: 8px;
}

/* ==========================================================================
   Images
   ========================================================================== */

/* flip image horizontally */
img.flip.horizontal, svg.flip.horizontal { -webkit-transform: scaleX(-1); transform: scaleX(-1); }

/* flip image vertically */
img.flip.vertical, svg.flip.vertical { -webkit-transform: scaleY(-1); transform: scaleY(-1); }

/* vertical alignment */
img.top, svg.top { vertical-align: top; }
img.middle, svg.middle { vertical-align: middle; }
img.bottom, svg.bottom { vertical-align: bottom; }

img.block, svg.block { display: block; }
img.relative, svg.relative { position: relative; }
img.absolute, svg.absolute { position: absolute; }

svg.size-12 { width: 12px; height: 12px; }
svg.size-14 { width: 14px; height: 14px; }
svg.size-16 { width: 16px; height: 16px; }
svg.size-18 { width: 18px; height: 18px; }
svg.size-20 { width: 20px; height: 20px; }
svg.size-24 { width: 24px; height: 24px; }
svg.size-30 { width: 30px; height: 30px; }
svg.size-36 { width: 36px; height: 36px; }
svg.size-48 { width: 48px; height: 48px; }
svg.size-128  { width: 128px; height: 128px; }

svg.white path { fill: var(--mcg-white); }
svg.gray path { fill: var(--mcg-gray); }
svg.gray-light path { fill: var(--mcg-gray-light); }
svg.green path { fill: var(--mcg-green); }
svg.orange path { fill: var(--mcg-orange); }
svg.yellow path { fill: var(--mcg-yellow); }
svg.blue-light path { fill: var(--mcg-blue-light); }
svg.blue path { fill: var(--mcg-blue); }
svg.blue-dark path { fill: var(--mcg-blue-dark); }
svg.blue-darker path { fill: var(--mcg-blue-darker); }
svg.dark path { fill: var(--mcg-dark); }
svg.darker path { fill: var(--mcg-darker); }
svg.red path { fill: var(--mcg-red); }

svg.desktop-95, img.desktop-95 { width: 95px; height: 95px; } 
svg.desktop-64, img.desktop-64 { width: 64px; height: 64px; }
svg.desktop-48, img.desktop-48 { width: 48px; height: 48px; }
svg.desktop-24, img.desktop-24 { width: 24px; height: 24px; }
svg.desktop-16, img.desktop-16 { width: 16px; height: 16px; }
svg.desktop-8, img.desktop-8 { width: 8px; height: 8px; }
@media (max-width: 768px) {
    svg.tablet-64, img.tablet-64 { width: 64px; height: 64px; }
    svg.tablet-48, img.tablet-48 { width: 48px; height: 48px; }
    svg.tablet-24, img.tablet-24 { width: 24px; height: 24px; }
    svg.tablet-16, img.tablet-16 { width: 16px; height: 16px; }
    svg.tablet-8, img.tablet-8 { width: 8px; height: 8px; }
}
@media (max-width: 475px) {
    svg.mobile-64, img.mobile-64 { width: 64px; height: 64px; }
    svg.mobile-48, img.mobile-48 { width: 48px; height: 48px; }
    svg.mobile-24, img.mobile-24 { width: 24px; height: 24px; }
    svg.mobile-16, img.mobile-16 { width: 16px; height: 16px; }
    svg.mobile-8, img.mobile-8 { width: 8px; height: 8px; }
}

/* ==========================================================================
   Errors
   ========================================================================== */

input.default.input-error,
input.default.input-error:hover,
input.default.input-error:focus {
    border: 1px solid var(--mcg-red);
}

.error {
    padding-top: 2px;
    padding-left: 16px;
    color: var(--mcg-red);
    font: var(--font-regular-12);
}

/* ==========================================================================
   Padding & margin
   ========================================================================== */

/* Padding */
div.padding-top-0,    p.padding-top-0,    span.padding-top-0    { padding-top: 0; }
div.padding-left-0,   p.padding-left-0,   span.padding-left-0   { padding-left: 0; }
div.padding-right-0,  p.padding-right-0,  span.padding-right-0  { padding-right: 0; }
div.padding-bottom-0, p.padding-bottom-0, span.padding-bottom-0 { padding-bottom: 0; }
div.padding-0, p.padding-0, span.padding-0 { padding: 0; }

div.padding-top-8,    p.padding-top-8,    span.padding-top-8    { padding-top: 8px; }
div.padding-left-8,   p.padding-left-8,   span.padding-left-8   { padding-left: 8px; }
div.padding-right-8,  p.padding-right-8,  span.padding-right-8  { padding-right: 8px; }
div.padding-bottom-8, p.padding-bottom-8, span.padding-bottom-8 { padding-bottom: 8px; }
div.padding-8, p.padding-8, span.padding-8 { padding: 8px; }

div.padding-top-16,    p.padding-top-16,    span.padding-top-16    { padding-top: 16px; }
div.padding-left-16,   p.padding-left-16,   span.padding-left-16   { padding-left: 16px; }
div.padding-right-16,  p.padding-right-16,  span.padding-right-16  { padding-right: 16px; }
div.padding-bottom-16, p.padding-bottom-16, span.padding-bottom-16 { padding-bottom: 16px; }
div.padding-16, p.padding-16, span.padding-16 { padding: 16px; }

div.padding-top-24,    p.padding-top-24,    span.padding-top-24    { padding-top: 24px; }
div.padding-left-24,   p.padding-left-24,   span.padding-left-24   { padding-left: 24px; }
div.padding-right-24,  p.padding-right-24,  span.padding-right-24  { padding-right: 24px; }
div.padding-bottom-24, p.padding-bottom-24, span.padding-bottom-24 { padding-bottom: 24px; }
div.padding-24, p.padding-24, span.padding-24 { padding: 24px; }

div.padding-top-32,    p.padding-top-32,    span.padding-top-32    { padding-top: 32px; }
div.padding-left-32,   p.padding-left-32,   span.padding-left-32   { padding-left: 32px; }
div.padding-right-32,  p.padding-right-32,  span.padding-right-32  { padding-right: 32px; }
div.padding-bottom-32, p.padding-bottom-32, span.padding-bottom-32 { padding-bottom: 32px; }
div.padding-32, p.padding-32, span.padding-32 { padding: 32px; }

div.padding-top-40,    p.padding-top-40,    span.padding-top-40    { padding-top: 40px; }
div.padding-left-40,   p.padding-left-40,   span.padding-left-40   { padding-left: 40px; }
div.padding-right-40,  p.padding-right-40,  span.padding-right-40  { padding-right: 40px; }
div.padding-bottom-40, p.padding-bottom-40, span.padding-bottom-40 { padding-bottom: 40px; }
div.padding-40, p.padding-40, span.padding-40 { padding: 40px; }

div.padding-top-68,    p.padding-top-68,    span.padding-top-68    { padding-top: 68px; }
div.padding-left-68,   p.padding-left-68,   span.padding-left-68   { padding-left: 68px; }
div.padding-right-68,  p.padding-right-68,  span.padding-right-68  { padding-right: 68px; }
div.padding-bottom-68, p.padding-bottom-68, span.padding-bottom-68 { padding-bottom: 68px; }
div.padding-68, p.padding-68, span.padding-68 { padding: 68px; }

div.padding-top-80,    p.padding-top-80,    span.padding-top-80    { padding-top: 80px; }
div.padding-left-80,   p.padding-left-80,   span.padding-left-80   { padding-left: 80px; }
div.padding-right-80,  p.padding-right-80,  span.padding-right-80  { padding-right: 80px; }
div.padding-bottom-80, p.padding-bottom-80, span.padding-bottom-80 { padding-bottom: 80px; }
div.padding-80, p.padding-80, span.padding-80 { padding: 80px; }

div.padding-top-104,    p.padding-top-104,    span.padding-top-104    { padding-top: 104px; }
div.padding-left-104,   p.padding-left-104,   span.padding-left-104   { padding-left: 104px; }
div.padding-right-104,  p.padding-right-104,  span.padding-right-104  { padding-right: 104px; }
div.padding-bottom-104, p.padding-bottom-104, span.padding-bottom-104 { padding-bottom: 104px; }
div.padding-104, p.padding-104, span.padding-104 { padding: 104px; }

/* Margin */
div.margin-top-0,    p.margin-top-0,    span.margin-top-0    { margin-top: 0; }
div.margin-left-0,   p.margin-left-0,   span.margin-left-0   { margin-left: 0; }
div.margin-right-0,  p.margin-right-0,  span.margin-right-0  { margin-right: 0; }
div.margin-bottom-0, p.margin-bottom-0, span.margin-bottom-0 { margin-bottom: 0; }
div.margin-0, p.margin-0, span.margin-0 { margin: 0; }

div.margin-top-8,    p.margin-top-8,    span.margin-top-8    { margin-top: 8px; }
div.margin-left-8,   p.margin-left-8,   span.margin-left-8   { margin-left: 8px; }
div.margin-right-8,  p.margin-right-8,  span.margin-right-8  { margin-right: 8px; }
div.margin-bottom-8, p.margin-bottom-8, span.margin-bottom-8 { margin-bottom: 8px; }
div.margin-8, p.margin-8, span.margin-8 { margin: 8px; }

div.margin-top-16,    p.margin-top-16,    span.margin-top-16    { margin-top: 16px; }
div.margin-left-16,   p.margin-left-16,   span.margin-left-16   { margin-left: 16px; }
div.margin-right-16,  p.margin-right-16,  span.margin-right-16  { margin-right: 16px; }
div.margin-bottom-16, p.margin-bottom-16, span.margin-bottom-16 { margin-bottom: 16px; }
div.margin-16, p.margin-16, span.margin-16 { margin: 16px; }

div.margin-top-24,    p.margin-top-24,    span.margin-top-24    { margin-top: 24px; }
div.margin-left-24,   p.margin-left-24,   span.margin-left-24   { margin-left: 24px; }
div.margin-right-24,  p.margin-right-24,  span.margin-right-24  { margin-right: 24px; }
div.margin-bottom-24, p.margin-bottom-24, span.margin-bottom-24 { margin-bottom: 24px; }
div.margin-24, p.margin-24, span.margin-24 { margin: 24px; }

div.margin-top-32,    p.margin-top-32,    span.margin-top-32    { margin-top: 32px; }
div.margin-left-32,   p.margin-left-32,   span.margin-left-32   { margin-left: 32px; }
div.margin-right-32,  p.margin-right-32,  span.margin-right-32  { margin-right: 32px; }
div.margin-bottom-32, p.margin-bottom-32, span.margin-bottom-32 { margin-bottom: 32px; }
div.margin-32, p.margin-32, span.margin-32 { margin: 32px; }

div.margin-top-40,    p.margin-top-40,    span.margin-top-40    { margin-top: 40px; }
div.margin-left-40,   p.margin-left-40,   span.margin-left-40   { margin-left: 40px; }
div.margin-right-40,  p.margin-right-40,  span.margin-right-40  { margin-right: 40px; }
div.margin-bottom-40, p.margin-bottom-40, span.margin-bottom-40 { margin-bottom: 40px; }
div.margin-40, p.margin-40, span.margin-40 { margin: 40px; }

div.margin-top-68,    p.margin-top-68,    span.margin-top-68    { margin-top: 68px; }
div.margin-left-68,   p.margin-left-68,   span.margin-left-68   { margin-left: 68px; }
div.margin-right-68,  p.margin-right-68,  span.margin-right-68  { margin-right: 68px; }
div.margin-bottom-68, p.margin-bottom-68, span.margin-bottom-68 { margin-bottom: 68px; }
div.margin-68, p.margin-68, span.margin-68 { margin: 68px; }

div.margin-top-80,    p.margin-top-80,    span.margin-top-80    { margin-top: 80px; }
div.margin-left-80,   p.margin-left-80,   span.margin-left-80   { margin-left: 80px; }
div.margin-right-80,  p.margin-right-80,  span.margin-right-80  { margin-right: 80px; }
div.margin-bottom-80, p.margin-bottom-80, span.margin-bottom-80 { margin-bottom: 80px; }
div.margin-80, p.margin-80, span.margin-80 { margin: 80px; }

div.margin-top-100,    p.margin-top-100,    span.margin-top-100    { margin-top: 100px; }
div.margin-left-100,   p.margin-left-100,   span.margin-left-100   { margin-left: 100px; }
div.margin-right-100,  p.margin-right-100,  span.margin-right-100  { margin-right: 100px; }
div.margin-bottom-100, p.margin-bottom-100, span.margin-bottom-100 { margin-bottom: 100px; }
div.margin-100, p.margin-100, span.margin-100 { margin: 100px; }