/* AnchorZone: Fonts */

@font-face {
    font-family: "lato";
    src: url("/fonts/lato/Lato-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "lato";
    src: url("/fonts/lato/Lato-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "lato";
    src: url("/fonts/lato/Lato-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "lato";
    src: url("/fonts/lato/Lato-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "lato";
    src: url("/fonts/lato/Lato-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

.font-12 { font-size: 12px }
.font-14 { font-size: 14px }
.font-16 { font-size: 16px }
.font-18 { font-size: 18px }
.font-20 { font-size: 20px }
.font-22 { font-size: 22px }
.font-24 { font-size: 24px }
@media (min-width: 575px) {
    .font-sm-12 { font-size: 12px }
    .font-sm-14 { font-size: 14px }
    .font-sm-16 { font-size: 16px }
    .font-sm-18 { font-size: 18px }
    .font-sm-20 { font-size: 20px }
    .font-sm-22 { font-size: 22px }
    .font-sm-24 { font-size: 24px }
}
@media (min-width: 768px) {
    .font-md-12 { font-size: 12px }
    .font-md-14 { font-size: 14px }
    .font-md-16 { font-size: 16px }
    .font-md-18 { font-size: 18px }
    .font-md-20 { font-size: 20px }
    .font-md-22 { font-size: 22px }
    .font-md-24 { font-size: 24px }
}
@media (min-width: 992px) {
    .font-lg-12 { font-size: 12px }
    .font-lg-14 { font-size: 14px }
    .font-lg-16 { font-size: 16px }
    .font-lg-18 { font-size: 18px }
    .font-lg-20 { font-size: 20px }
    .font-lg-22 { font-size: 22px }
    .font-lg-24 { font-size: 24px }
}
@media (min-width: 1200px) {
    .font-xl-12 { font-size: 12px }
    .font-xl-14 { font-size: 14px }
    .font-xl-16 { font-size: 16px }
    .font-xl-18 { font-size: 18px }
    .font-xl-20 { font-size: 20px }
    .font-xl-22 { font-size: 22px }
    .font-xl-24 { font-size: 24px }
}

/* AnchorZone: Colors */

:root {
    --txt-darker: #222222;
    --txt-dark: #414141;
    --txt-reg: #555555;
    --green-400: #0EC965;
    --green-500: #14B059;
    --green-700: #12512B;
    --bronze-300: #f8d02f;
    --bronze-400: #D7C000;
}

.bg-green-400 { background-color: var(--green-400) }
.hover-bg-green-400:hover { background-color: var(--green-400) !important }
.bg-green-500 { background-color: var(--green-500) }
.hover-bg-green-700:hover { background-color: var(--green-700) !important }
.bg-bronze-400 { background-color: var(--bronze-400) }
.bg-black { background-color: black }
.bg-txt-darker { background-color: var(--txt-darker) }

.hover-bg-transparent:hover { background-color: transparent}

.txt-white { color: white }
.hover-txt-white:hover { color: white !important }
.txt-black { color: black }
.txt-dark { color: var(--txt-dark) }
.txt-darker { color: var(--txt-darker) }
.hover-txt-darker:hover { color: var(--txt-darker) !important }
.txt-reg { color: var(--txt-reg) }
.txt-bronze-400 { color: var(--bronze-400) }
.hover-txt-green-500:hover { color: var(--green-500) !important }
.hover-txt-bronze-300:hover { color: var(--bronze-300) !important }


.border-green-500 { border-color: var(--green-500) }
.border-bronze-400 { border-color: var(--bronze-400) }


/* AnchorZone: Resets */

body,
div,
span,
object,
iframe,
blockquote,
pre,
a,
abbr,
acronym,
address,
code,
del,
dfn,
em,
img,
q,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
input {
    margin: 0;
    padding: 0;
    border: 0;
}

a {
    transition: color 300ms, background-color 300ms, border-color 300ms;
}

a:focus {
    outline: none;
}

/* AnchorZone: Layouts and Header Styling */
.d-none-important { display: none !important }
.hover-no-underline:hover { text-decoration: none }
.line-height-normal { line-height: normal }

.border-2 {
    border-width: 2px;
    border-style: solid;
}

body {
    font-family: lato, sans-serif;
    color: var(--txt-reg);
    font-size: 18px;
    line-height: 1.33;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--txt-darker);
}

.ignore-last-margin > *:last-child {
    margin-bottom: 0 !important;
}

@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 1200px;
    }
}

.section-spacer-xs {
    height: 24px;
}

.section-spacer, .section-spacer-lg, .section-spacer-sm {
    height: 40px;
}

@media only screen and (min-width: 768px) {
    .section-spacer-xs {
        height: 40px;
    }
    .section-spacer {
        height: 80px;
    }
    .section-spacer-lg {
        height: 105px;
    }
}

.hdr-reg, .hdr-small, .hdr-display-left, .hdr-display-center {
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.hdr-display-left {
    padding: 8px 0 8px 16px;
    border-left: 4px solid var(--green-400);
    line-height: normal;
}

.hdr-display-center {
    width: 100%;
    margin-bottom: 32px;
    text-align: center;
}

.hdr-display-center::after {
    content: "";
    display: block;
    width: 92px;
    height: 4px;
    background-color: var(--green-400);
    margin: 0 auto;
    margin-top: 4px; /* optional spacing from header */
}

.hdr-display-center--bronze::after {
    background-color: var(--bronze-400);
}

@media (min-width: 768px) {
    .hdr-reg, .hdr-display-left, .hdr-display-center {
        font-size: 32px;
    }

    .hdr-small {
        font-size: 24px;
    }
}

.gray-texture-bg {
    background: url(/images/gray-texture-bg.webp) #efefef top / contain;
}

/* flexbox gaps */
.gap-2 { gap: 8px }
.gap-3 { gap: 16px }
.gap-4 { gap: 24px }
@media (min-width: 576px) {
    .gap-sm-2 { gap: 8px }
    .gap-sm-3 { gap: 16px }
    .gap-sm-4 { gap: 24px }
}
@media (min-width: 768px) {
    .gap-md-2 { gap: 8px }
    .gap-md-3 { gap: 16px }
    .gap-md-4 { gap: 24px }
}
@media (min-width: 992px) {
    .gap-lg-2 { gap: 8px }
    .gap-lg-3 { gap: 16px }
    .gap-lg-4 { gap: 24px }
}
@media (min-width: 1200px) {
    .gap-xl-2 { gap: 8px }
    .gap-xl-3 { gap: 16px }
    .gap-xl-4 { gap: 24px }
}

/* AnchorZone: CTA Styling */

.cta-link-green {
    color: var(--txt-darker);
    background-color: var(--green-400);
    border: 2px solid var(--green-400);
}

.cta-link-green__svg-fill {
    fill: var(--txt-darker);
    transition: fill 300ms;
}

.cta-link-green:hover {
    color: white;
    background-color: var(--green-700);
    border: 2px solid var(--green-700);
    text-decoration: none;
}

.cta-link-green:hover .cta-link-green__svg-fill {
    fill: white;
}

.cta-link-white {
    color: var(--txt-darker);
    border: 2px solid var(--txt-darker);
    background-color: white;
}

.cta-link-white:hover {
    color: var(--txt-darker);
    background-color: var(--bronze-400);
    text-decoration: none;
}

/* AnchorZone:  Collapse Functionality without needing bootstrap */
.collapseWrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s;
}

.collapseWrapper.is-open {
    grid-template-rows: 1fr;
}

.collapseInner {
    overflow: hidden;
    grid-row: 1 / span 2;
}