@charset "utf-8";
/*
Theme Name: Sun Federal Credit Union
Author: Vibrant Brands
Author URI: https://vibrantbrands.com/
Description: A custom theme by Vibrant Brands
Version: 1.0
Text Domain: sunfcu
*/

:root {
    --blue: #001e62;
    --yellow: #ffce03;
    --orange: #e97423;
    --red: #d5292e;
    --teal: #61b0ba;

    --teal-ada: #067685;
    --orange-ada: #c75100;

    --cb: cubic-bezier(0.47, 1, 0.92, 1);

    --fa: "Font Awesome 6 Pro";
    --ubuntu: "Ubuntu", "Arial", sans-serif;
    --lato: "Lato", "Arial", sans-serif;

    --para-line-height: 1.5em;
    --para-font-size: 0.7em;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes choicesSlideIn {
    from {
        transform: translate3d(-20%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@-webkit-keyframes choicesSlideIn {
    from {
        transform: translate3d(-20%, 0, 0);
    }

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

.fade {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 0.6s var(--cb), transform 0.6s var(--cb);
}
.fade.fade_1 {
    transition-delay: 100ms !important;
}
.fade.fade_2 {
    transition-delay: 200ms !important;
}
.fade.fade_3 {
    transition-delay: 300ms !important;
}
.fade.fade_4 {
    transition-delay: 400ms !important;
}
.fade.fade_5 {
    transition-delay: 500ms !important;
}
.fade.fade_6 {
    transition-delay: 600ms !important;
}

.fade.fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

/* Reset */
* {
    box-sizing: border-box;
}
html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
blockquote,
pre,
a,
code,
em,
img,
strong,
sub,
sup,
var,
b,
u,
i,
center,
ol,
ul,
li,
fieldset,
form,
label,
legend,
article,
aside,
canvas,
figure,
figcaption,
footer,
header,
nav,
section,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: var(--lato);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ubuntu);
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

sup {
    font-size: 0.7em;
    position: relative;
    top: -0.5em;
}
a {
    color: inherit;
    text-decoration: none;
}
em {
    font-style: italic;
}

main {
    font-size: 24px;
}
.wrapper {
    --wrapper-padding: 60px;
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 var(--wrapper-padding);
    width: 100%;
}
#mnavbutton {
    display: none;
}

/* Skip to Main Content */
.main_content {
    height: 0;
    overflow: hidden;
    display: block;
    font-size: 0;
    text-transform: uppercase;
    line-height: 0;
    background: var(--yellow);
    color: var(--blue);
    font-weight: bold;
    letter-spacing: 1px;
}
.main_content:focus {
    font-size: 14px;
    line-height: 16px;
    height: 36px;
    padding: 10px 15px;
}

/* Button */
.button_wrap {
    /* display: inline-block; */
    flex-wrap: wrap;
    isolation: isolate;
    gap: 20px;
    display: flex;
    position: relative;
    overflow: hidden;
}

.button_wrap.center {
    justify-content: center;
}
.button_wrap.push_top {
    margin: 30px 0 0 0;
}
.button_wrap.push_bottom {
    margin: 0 0 30px 0;
}
.button_wrap.push_both {
    margin: 30px 0;
}
.button {
    background-color: var(--yellow);
    color: var(--blue);
    padding: 10px 25px;
    border-radius: 50px;
    border: 2px solid var(--blue);
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    position: relative;
    margin: 0 12px 0 0;
    transition: ease all 300ms;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}
.button:focus,
.button:hover {
    padding: 10px 37px 10px 25px;
    margin: 0 0 0 0;
    cursor: pointer;
    outline: none;
}
.button::after {
    content: "";
    background-color: inherit;
    display: block;
    position: absolute;
    left: 0;
    z-index: -1;
    border-radius: 50px;
    top: -2px;
    bottom: -2px;
    transform: translate(14px, 0);
    width: 100%;
    transition: ease all 300ms;
}
.button:focus:after,
.button:hover:after {
    transform: translate(2px, 0);
}
.button::before {
    content: "\f105";
    position: absolute;
    font-size: 12px;
    right: 16px;
    top: 50%;
    transform: translate(0, -50%);
    font-family: var(--fa);
    font-weight: 300;
    opacity: 0;
    transition: inherit;
    transition-delay: 50ms;
    transition-duration: 150ms;
}
.button:focus:before,
.button:hover:before {
    opacity: 1;
    right: 12px;
}

/* Solid */
.button.white::after,
.button.solid::after {
    transform: translate(12px, 0);
}
.button.white:focus:after,
.button.white:hover:after,
.button.solid:focus:after,
.button.solid:hover:after {
    transform: translate(0px, 0);
}

/* Color Variants */
.button.blue {
    background: white;
}
.button.blue:after {
    background-color: var(--blue);
    transform: translate(14px, 0);
}
.button.blue:focus:after,
.button.blue:hover:after {
    transform: translate(2px, 0);
}

.button.blue.solid {
    background: var(--blue);
    color: white;
}
.button.blue.solid:after {
    background-color: var(--yellow);
}

.button.blue.solid.withwhite {
    background: var(--blue);
    color: white;
}
.button.blue.solid.withwhite:after {
    background-color: white;
}

.button.white {
    background: white;
    /* border: 2px solid white; */
    border: none;
}
.button.white:after {
    background-color: var(--yellow);
    top: 0;
    bottom: 0;
}

.button.large {
    font-size: 20px;
    padding: 15px 40px;
    margin: 0 16px 0 0;
}
.button.large:focus,
.button.large:hover {
    padding: 15px 60px 15px 40px;
    margin: 0;
}
.button.large::after {
    transform: translate(18px, 0);
}
.button.large:focus:after,
.button.large:hover:after {
    transform: translate(2px, 0);
}
.button.large::before {
    font-size: 18px;
}
.button.large:focus:before,
.button.large:hover:before {
    right: 20px;
}

.button_wrap.full_width .button {
    width: 100%;
}

/* Choice Button */

[data-member][data-non-member] {
    overflow: none;
    transition: ease all 300ms;
    outline: none;
}
[data-member][data-non-member]:hover {
    cursor: pointer;
}
[data-member][data-non-member] .choices {
    display: flex;
    position: absolute;
    top: -2px;
    left: -2px;
    opacity: 0;
    max-width: calc(100vw - calc(var(--wrapper-padding) * 2));
    border-radius: 50px;
    z-index: 5000;
    background: var(--blue);
    gap: 2px;
    height: calc(100% + 4px);
    width: calc(100% + 4px);
    border: 2px solid #001e62;

    -webkit-animation-name: choicesSlideIn;
    animation-name: choicesSlideIn;
    opacity: 1;

    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.7, 0.57, 0.72, 0.97);

    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
[data-member][data-non-member] a.choice {
    padding: 10px 15px;
    background: white;
    color: var(--blue);
    border: 3px solid white;
    word-break: keep-all;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px 0 0 50px;
    position: relative;
    flex: 1 1 auto;
    align-content: center;
    text-align: center;
}
[data-member][data-non-member] a.choice:nth-child(2) {
    border-radius: 0 50px 50px 0;
}
[data-member][data-non-member] a.choice:focus {
    outline: none;
}

[data-member][data-non-member] a.choice:focus:after {
    content: "";
    display: block;
    width: 50%;
    height: 3px;
    background: var(--orange);
    position: absolute;
    bottom: 4px;
    left: 25%;
    border-radius: 3px;
}
[data-member][data-non-member] a.choice:active:after {
    display: none;
}
[data-member][data-non-member].button.transformed {
    width: 100%;
    color: var(--blue);
}
[data-member][data-non-member].button.transformed:hover:before,
[data-member][data-non-member].button.transformed:before {
    display: none;
}
[data-member][data-non-member].button.transformed:after,
[data-member][data-non-member].button.transformed:hover:after {
    background-color: var(--blue);
}

[data-member][data-non-member].button.transformed {
    margin: 0 0 0 0;
}
[data-member][data-non-member].button.transformed:after {
    transform: translate(0, 0);
}
.close_toggle_button {
    width: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    color: white;
    font-size: 16px;
    padding: 0 2px 0 0;
    -webkit-animation-name: fadeInOpacity;
    animation-name: fadeInOpacity;
    opacity: 1;

    animation-iteration-count: 1;
    animation-timing-function: ease-in;

    -webkit-animation-duration: 300ms;
    animation-duration: 300ms;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.close_toggle_button:focus::after {
    content: "";
    height: 24px;
    width: 24px;
    border: 1px solid white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 1px), -50%);
    border-radius: 50%;
}

.close_toggle_button:focus {
    outline: none;
}

/* Curve SVGs */
/* ---------------------------------------------- */
.curve_svg {
    position: absolute;
    left: 0;
    width: 100vw; /* Full width of viewport */
    height: 10vh; /* Adjustable height */
    pointer-events: none;
    transform: translateZ(0);
}
.curve_svg.top_curve {
    top: -1px;
} /* Position the Top Curve */
.curve_svg.bottom_curve {
    bottom: -1px;
} /* Position the Bottom Curve */

/* Aux Header */
/* ---------------------------------------------- */
header {
    /* position: relative;
    z-index:100; */
}
#aux {
    background-color: var(--blue);
}
#aux nav {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
#aux nav a,
#aux nav > span {
    position: relative;
    line-height: 1em;
    font-size: 13px;
    color: white;
    padding: 12px 24px;
    text-transform: uppercase;
    border-right: 1px solid #0d3c96;
    transition: ease all 300ms;
}
#aux nav a:hover {
    background-color: #0d3c96;
}
#aux nav a:last-child,
#aux nav > span:last-child {
    border: none;
    padding-right: 0;
}
span.nograb {
    pointer-events: none;
    user-select: none;
}
span.routing::selection,
span.routing::-moz-selection {
    background: var(--yellow);
    color: var(--blue);
}

/* Main Header */
#header_wrap {
    position: relative;
    background: white;
}
#header_inner {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    gap: 50px;
}
.header_nav_buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.header_nav_buttons .homepage {
    display: none;
}
.header_links {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-between;
    align-items: flex-end;
}

#header_inner #logo {
    height: 120px;
    flex: 0 1 200px;
    background-image: url("img/logo-blue.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}
#header_inner #logo h1 {
    text-indent: -9999px;
}

#header_inner nav {
    --padding-x: 10px;
    display: flex;
    position: relative;
    right: calc(var(--padding-x) * -1);
    justify-content: flex-end;
    gap: 5px;
}
#header_inner nav .nav_item_holder {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
    color: var(--blue);
    padding: 10px var(--padding-x);
    user-select: none;
    border-radius: 50px;
    transition: ease all 300ms;
    border: 1px solid transparent;
    font-weight: 700;
}
#header_inner nav .nav_item_holder[aria-selected="true"] {
    border-color: var(--blue);
}
#header_inner nav .nav_item_holder:hover {
    cursor: pointer;
    background: #eee;
}
#header_inner nav .nav_item_holder:focus {
    background: var(--yellow);
    outline: none;
}
#header_inner nav .nav_item_holder:active {
    background: transparent;
}

/* Main Menu */
/* ---------------------------------------------- */
#meganav {
    display: none;
    position: absolute;
    z-index: 5000;
    background: #fff8f3;
    width: 100%;
    padding: 50px 0;
    border-top: 1px solid var(--blue);
}
#meganav.show {
    display: block;
}
.mainnav_holder_pair {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}
.mainnav_holder_pair.show {
    display: grid;
}
#meganav section {
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    opacity: 0;

    animation-iteration-count: 1;
    animation-timing-function: var(--cb);

    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.link_header > a {
    border-bottom: 2px solid var(--orange);
    color: var(--orange);
    font-size: 1.2em;
    margin: 0 0 18px 0;
    padding: 0 0 8px 0;
    font-weight: 500;
    outline: none;
    display: block;
    font-family: var(--ubuntu);
}
.link_header > a:after {
    content: "\f105";
    position: absolute;
    top: 3px;
    left: -22px;
    opacity: 0;
    font-family: var(--fa);
    font-weight: 900;
    font-size: 15px;
    transition: ease all 300ms;
    transition-delay: 200ms;
}
.link_header > a:focus:after {
    opacity: 1;
    left: -15px;
}
.subnav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.link_header_more {
    display: none;
}
#meganav section .subnav a {
    position: relative;
    outline: none;
}
#meganav section .subnav a:before {
    content: "";
    width: 0px;
    height: 1px;
    background: var(--orange);
    display: block;
    position: absolute;
    left: 0;
    bottom: -4px;
    transition: var(--cb) all 500ms;
}
#meganav section .subnav a:hover:before {
    width: 30px;
}

#meganav section .subnav a:after {
    content: "\f105";
    position: absolute;
    top: 2px;
    left: -22px;
    opacity: 0;
    font-family: var(--fa);
    font-weight: 900;
    font-size: 13px;
    transition: ease all 300ms;
    transition-delay: 100ms;
}
#meganav section .subnav a:focus:after {
    opacity: 1;
    left: -15px;
}

.mainnav_holder_nav_promo {
    display: flex;
    background: #ffce03;
    border-radius: 25px;
    padding: 30px 40% 30px 30px;
    flex-direction: column;
    justify-content: center;
    position: relative;

    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    opacity: 0;

    animation-iteration-count: 1;
    animation-timing-function: var(--cb);

    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;

    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.mainnav_holder_nav_promo.blue {
    background: var(--blue);
}
.mainnav_holder_nav_promo.white {
    background: white;
}
.mainnav_holder_nav_promo.orange {
    background: #fcece1;
}
.mainnav_holder_nav_promo.red {
    background: #ffe7e7;
}
.mainnav_holder_nav_promo.teal {
    background: #efefef;
}

.mainnav_holder_nav_promo h2 {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--blue);
}
.mainnav_holder_nav_promo p {
    font-size: 0.9em;
    margin: 10px 0;
    color: var(--blue);
    line-height: 1.2em;
}
.mainnav_holder_nav_promo.blue h2 {
    color: white;
}
.mainnav_holder_nav_promo.blue p {
    color: white;
}
.mainnav_holder_nav_promo .button_wrap {
    margin: 8px 0 0 0;
}
.promo_bgimg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45%;
    z-index: -1;
    height: 100%;
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    border-radius: 0 25px 25px 0;
}

/* Homepage Sections */
/* ---------------------------------------------- */
#hero {
    background: gray;
    position: relative;
    min-height: 450px;
    padding-bottom: 10vh;
}
#hero .curve_svg {
    z-index: 50;
}
.home_hero_image {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
}
#home_login {
    position: relative;
    z-index: 60;
    padding: 90px 100px;
    display: flex;
    justify-content: flex-end;
    min-height: 500px;
}
.home_login_text_box {
    padding: 0 300px 0 0;
    background: #fffffff7;
    border-radius: 20px 100px 100px 20px;
    flex: 0 1 50vw;
    position: relative;
    max-width: 700px;
    display: flex;
}
.home_login_text_box_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.home_login_text_box_content_text {
    padding: 50px;
}
.home_login_text_box_content_text h2 {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--blue);
    margin: 0 0 20px 0;
}
.home_login_text_box_content_text h2 span {
    display: block;
    font-size: 1.7em;
    color: var(--orange);
}
.home_login_text_box_content_text p {
    font-size: var(--para-font-size);
    line-height: var(--para-line-height);
}

.home_login_bubble_link {
    padding: 25px 30px 20px 30px;
    font-size: 0.6em;
    color: var(--blue);
    background-color: var(--yellow);
    font-weight: 700;
    text-transform: uppercase;
    clip-path: ellipse(60% 128% at 31% 130%);
    transition: ease-out all 300ms;
    border-radius: 0 0 0 20px;
}
.home_login_bubble_link:hover {
    clip-path: ellipse(80% 100% at 20% 100%);
}

.form_round {
    width: 400px;
    height: 400px;
    background: var(--blue);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: -100px;
    transform: translate(0, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    padding: 70px;
}
.form_round:after {
    content: "";
    height: 90px;
    width: 90px;
    background: var(--yellow);
    border-radius: 50%;
    top: 0px;
    right: 0px;
    position: absolute;
    display: block;
}
.form_round:before {
    content: "";
    height: 40px;
    width: 40px;
    background: var(--orange);
    border-radius: 50%;
    top: 74px;
    right: 0px;
    position: absolute;
    display: block;
}
.form_round h3 {
    font-size: 1.2em;
    color: #fff;
    font-weight: 700;
}

/* Login Form */
/* ---------------------------------------------- */

#loginformmodal {
    margin: 15px 0;
}
.form_input_wrap {
    overflow: hidden;
    border-radius: 50px;
    margin: 0 0 10px 0;
}
.form_input {
    position: relative;
}
.form_input label {
    position: absolute;
    z-index: 2;
    display: block;
    top: 23px;
    color: var(--blue);
    line-height: 1.3em;
    left: 20px;
    right: 20px;
    font-size: 14px;
    font-weight: 700;
    user-select: none;
    pointer-events: none;
    transition: ease all 500ms;
    transform: translate(0, -50%);
}
.form_input input[type="text"],
.form_input input[type="password"] {
    appearance: none;
    border: none;
    width: 100%;
    display: block;
    padding: 20px 20px 5px 20px;
    line-height: 20px;
    outline: none;
    font-size: 15px;
    font-weight: bold;
}
.form_input input[type="text"]:focus,
.form_input input[type="password"]:focus {
    background-color: var(--yellow);
}
/* .form_input input[type="text"].error,
.form_input input[type="text"]:focus.error {
    background-color: #fff4f8;
} */
.form_input input[type="text"].has_text + label,
.form_input input[type="password"].has_text + label,
.form_input input[type="text"]:focus + label,
.form_input input[type="password"]:focus + label {
    transform: translate(0, -50%);
    top: 13px;
    font-size: 12px;
}
.form_input [type="submit"] {
    appearance: none;
    -webkit-appearance: none;
    line-height: 16px;
}

.login_form_footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    line-height: 0.7em;
}

.account_options {
    position: relative;
}
.account_options_links {
    display: none;
    top: 100%;
    right: 0;
    border-radius: 5px 0 5px 5px;
    background: var(--yellow);
    position: absolute;
    width: 160px;
    flex-direction: column;
    isolation: isolate;
}
.account_options_links.active {
    display: flex;
}
.account_options_links.active:after {
    content: "";
    position: absolute;
    display: block;
    pointer-events: none;
    background: var(--blue);
    height: 3px;
    width: 44px;
    right: -2px;
    top: -3px;
}
.account_options_links.active:before {
    content: "";
    position: absolute;
    display: block;
    pointer-events: none;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 1px solid var(--yellow);
    border-radius: 8px 0 8px 8px;
    background: var(--blue);
    z-index: -1;
}
.account_options_links a {
    font-size: 13px;
    line-height: 1em;
    padding: 10px 12px;
    text-transform: uppercase;
    font-weight: 500;
    transition: ease all 200ms;
    background: var(--yellow);
    border-bottom: 1px solid #e2bb17;
}
.account_options_links a:focus,
.account_options_links a:hover {
    background: #e2bb17;
    outline: none;
}
.account_options_links a:first-child {
    border-radius: 5px 0 0 0;
}
.account_options_links a:last-child {
    border: none;
    border-radius: 0 0 5px 5px;
}

.account_options_button {
    background-color: var(--yellow);
    color: var(--blue);
    padding: 10px 13px;
    border-radius: 50px;
    border: 2px solid var(--yellow);
    display: inline-block;
    font-weight: 700;
    font-size: 17px;
    position: relative;
    height: 37px;
    width: 37px;
}
.account_options_button:focus {
    outline: none;
}
.account_options_button.active:focus {
    background: #e2bb17;
    border-color: #e2bb17;
}
.account_options_button.active:after,
.account_options_button:focus:after {
    content: "";
    position: absolute;
    display: block;
    pointer-events: none;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px solid var(--yellow);
    border-radius: 50%;
}
.account_options_button.active:after {
    bottom: 0px;
    border: 1px solid var(--yellow);
    border-radius: 23px 23px 0 0;
    border-bottom: 1px solid #fff;
    z-index: -1;
}
.account_options_button i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.account_options_button.active {
    border-radius: 50px 50px 0 0;
}
.account_options_button:hover {
    cursor: pointer;
}

/* Promo Section */
/* ---------------------------------------------- */

.promos_inner h2 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--blue);
    text-align: center;
    margin: 0 0 20px 0;
}
.homepage_promos_4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 40px 0 10px 0;
}
a.homepage_promo {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 60px 30px 40px 30px;
    position: relative;
    -webkit-box-shadow: 0 0px 6px 1px #ddd;
    box-shadow: 0 0px 6px 1px #ddd;
    transition: ease all 300ms;
}
a.homepage_promo:nth-child(1) {
    --color: var(--blue);
    --bgcolor: #f1f3f6;
    background-color: var(--bgcolor);
    border: 1px solid var(--bgcolor);
}
a.homepage_promo:nth-child(2) {
    --color: var(--red);
    --bgcolor: #fcf3f4;
    background-color: var(--bgcolor);
    border: 1px solid var(--bgcolor);
}
a.homepage_promo:nth-child(3) {
    --color: var(--orange);
    --bgcolor: #fff8f3;
    background-color: var(--bgcolor);
    border: 1px solid var(--bgcolor);
}
a.homepage_promo:nth-child(4) {
    --color: var(--teal);
    --bgcolor: #f7fbfb;
    background-color: var(--bgcolor);
    border: 1px solid var(--bgcolor);
}
a.homepage_promo:hover {
    -webkit-box-shadow: 0 0px 6px 1px #aaa;
    box-shadow: 0 0px 6px 1px #aaa;
    border-color: var(--color);
}

a.homepage_promo h3 {
    font-size: 1em;
    margin: 0 0 17px 0;
    font-weight: 500;
    color: var(--blue);
}
a.homepage_promo p {
    font-size: var(--para-font-size);
    line-height: var(--para-line-height);
    margin: 0 0 25px 0;
}
a.homepage_promo .homepage_promo_link {
    font-size: 0.7em;
    line-height: 1.4em;
    color: #666;
    font-weight: 700;
    transition: ease all 200ms;
}
a.homepage_promo .homepage_promo_link:hover {
    color: var(--blue);
}
a.homepage_promo .homepage_promo_link i {
    color: var(--orange);
}

a.homepage_promo .dot {
    height: 60px;
    width: 60px;
    position: absolute;
    border-radius: 50%;
    top: -30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 30px;
    color: white;
    align-items: center;
    background-color: var(--color);
}
a.homepage_promo .dot:after {
    content: "";
    background-color: inherit;
    height: 30px;
    width: 30px;
    position: absolute;
    display: block;
    left: -40px;
    top: 15px;
    border-radius: 50%;
}
a.homepage_promo .dot:before {
    content: "";
    background-color: inherit;
    height: 15px;
    width: 15px;
    position: absolute;
    display: block;
    left: -65px;
    top: 23px;
    border-radius: 50%;
}

/* Products Section */
/* ---------------------------------------------- */

#product {
    background: var(--blue);
    position: relative;
    min-height: 300px;
    padding: 10vh 0;
}
.product_inner {
    display: flex;
    gap: 50px;
    align-items: center;
}
.product_graphic_section {
    flex: 0 1 50%;
    z-index: 50;
    padding: 0 0 0 50px;
    margin: 0 0 -70px 0;
}
.product_graphic_section_image {
    height: 500px;
    width: 500px;
    border-radius: 50%;
    position: relative;
    background-color: var(--orange);
    background-size: cover;
    background-position: center;
}
.product_graphic_section_image:before,
.product_graphic_section_image:after {
    content: "";
    display: block;
    z-index: 5;
    left: -50px;
    top: 40px;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    position: absolute;
    background-color: var(--yellow);
}
.product_graphic_section_image:before {
    height: 90px;
    width: 90px;
    left: -40px;
    top: 150px;
    z-index: 6;
    background-color: var(--teal);
}
.product_promo_text {
    flex: 0 1 50%;
    padding: 0 10% 0 0;
}
.product_promo_text h2 {
    font-size: 2em;
    color: var(--yellow);
    font-weight: 700;
    margin: 0 0 11px 0;
    line-height: 1.1em;
}
.product_promo_text p {
    color: white;
    font-size: 1em;
    line-height: 1.2em;
}

/* Home Rates */
#home_rates {
    min-height: 500px;
    background: #fff8f3;
    position: relative;
}
#home_rates:before,
#home_rates:after {
    content: "";
    display: block;
    z-index: 5;
    right: 50px;
    top: -30px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: absolute;
    background-color: var(--orange);
}
#home_rates:before {
    height: 60px;
    width: 60px;
    right: 110px;
    top: -60px;
    z-index: 4;
    background-color: var(--red);
}

#home_rates h2 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--blue);
    text-align: center;
    margin: 0 0 20px 0;
}
.home_rates_inner {
    padding: 40px 0;
}
.home_rates_quad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 10px 0;
}
.home_rates_quad_single {
    position: relative;
}
.home_rates_quad_single_circle {
    padding: 100% 0 0 0;
    position: relative;
}
.home_rates_quad_single_circle:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 20px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
}
.home_rates_quad_single:nth-child(1) .home_rates_quad_single_circle:after {
    border-color: #cfe2e2;
}
.home_rates_quad_single:nth-child(2) .home_rates_quad_single_circle:after {
    border-color: #f8d0ad;
}
.home_rates_quad_single:nth-child(3) .home_rates_quad_single_circle:after {
    border-color: #ffecab;
}
.home_rates_quad_single:nth-child(4) .home_rates_quad_single_circle:after {
    border-color: #b2b6c7;
}

.home_rates_quad_single h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    user-select: none;
}
.home_rates_product_title {
    font-size: 0.8em;
    text-transform: uppercase;
    color: #666;
    margin: 0 0 7px 0;
    font-weight: 500;
}
.home_rates_product_qualifier {
    font-size: 0.6em;
    color: var(--blue);
    margin: 0 0 5px 0;
    font-weight: 500;
}
.home_rates_product_rate {
    font-size: 1.5em;
    color: var(--blue);
    font-weight: 700;
}
.home_rates_product_rate sup {
    font-size: 14px;
    top: -16px;
}
.home_rates_quad_single .button_wrap {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 10px);
    position: absolute;
    z-index: 500;
}
.mobile_all_rates {
    display: none;
}

/* Resources */
#resources {
    background: #fff;
    position: relative;
    padding-top: 10vh;
}
.resources_inner {
    display: flex;
    gap: 10%;
    align-items: center;
    padding: 100px 0 7vw 0;
}
.resources_inner_graphics {
    flex: 0 1 60%;
    position: relative;
}
.resources_inner_text {
    flex: 0 1 40%;
    padding: 0 0 0 10%;
}
.resources_inner_text h2 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--blue);
    margin: 0 0 20px 0;
}
.resources_inner_text p {
    font-size: var(--para-font-size);
    line-height: var(--para-line-height);
    margin: 0 0 50px 0;
}
.resources_inner_graphic_image {
    position: relative;
    z-index: 5;
    background-color: var(--blue);
    background-size: cover;
    background-position: center;
    border-radius: 45px;
    height: 35vw;
    max-height: 500px;
}
.resources_inner_graphic_dot {
    position: absolute;
    z-index: 3;
    height: 150px;
    width: 150px;
    background-color: var(--yellow);
    border-radius: 50%;
    left: -20px;
    top: -90px;
}
.resources_inner_graphic_image:before,
.resources_inner_graphic_image:after {
    content: "";
    display: block;
    z-index: 5;
    left: -50px;
    top: 20px;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    position: absolute;
    background-color: var(--teal);
}
.resources_inner_graphic_image:before {
    height: 50px;
    width: 50px;
    left: -20px;
    top: 120px;
    z-index: 6;
    background-color: var(--orange);
}

/* Resource Slider */
.resource_slider_wrapper {
    position: relative;
    z-index: 3;
}
.resource_tiles {
    margin: 0 0 -110px 0;
    padding: 0 40px;
    position: relative;
}
.resource_slider_controls {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.resource_slider_controls > div {
    flex: 0 0 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 28px;
    color: #929292;
    transition: ease all 200ms;
}
.resource_slider_controls > div:hover {
    color: var(--orange);
    cursor: pointer;
}
#home_resources .item {
    display: block;
    border-radius: 15px;
    border: 1px solid var(--yellow);
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: space-between;
}
.resources_option_text {
    padding: 30px 30px 20px 30px;
}
#home_resources .item h3 {
    font-size: 0.9em;
    line-height: 1.3em;
    color: var(--blue);
    margin: 0 0 10px 0;
    font-weight: 700;
}
#home_resources .item p {
    font-size: 0.6em;
    line-height: 1.4em;
}
#home_resources .learn_more {
    padding: 25px 30px 20px 30px;
    font-size: 0.6em;
    color: var(--blue);
    background-color: var(--yellow);
    font-weight: 700;
    text-transform: uppercase;
    clip-path: ellipse(60% 128% at 31% 130%);
    transition: ease-out all 300ms;
}
#home_resources .item:hover .learn_more {
    clip-path: ellipse(80% 100% at 50% 100%);
}

/* Footer */
/* ---------------------------------------------- */

footer {
    position: relative;
    min-height: 400px;
    background-color: #001e62;
    padding: 10vh 0 50px 0;
    --footer-blue: #2b3990;
    font-size: 24px;
}
#footer_main {
    padding: 80px 0 30px 0;
}

.footer_flex {
    display: flex;
    gap: 50px;
    color: white;
}
.footer_flex_logo_social {
    display: flex;
    flex-direction: column;
}
.footer_logo {
    height: 100px;
    width: 180px;
    background-image: url("img/logo-white.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

#social {
    margin: 50px 0 0 0;
    display: flex;
    position: relative;
    left: -12px;
}
#social a {
    width: 40px;
    height: 40px;
    position: relative;
    border-radius: 50%;
    font-size: 18px;
    border: 1px solid transparent;
    transition: ease all 300ms;
}
#social a:focus,
#social a:hover {
    outline: none;
    color: #ffce03;
    border: 1px solid #2b3990;
}
#social a i {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

/* Footer Search */
#footer_search {
    border-radius: 50px;
    background: #001545;
    margin: 15px 0;
    position: relative;
    left: -2px;
}
#footer_search .form_area {
    display: flex;
    gap: 10px;
}
#footer_search #searchLabel i {
    font-size: 16px;
    color: var(--yellow);
}
#footer_search #searchLabel {
    padding: 0 0 0 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#footer_search input {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 11px;
    color: var(--yellow);
    flex: 1 0 auto;
    outline: none;
    border-radius: 0 50px 50px 0;
    transition: ease all 200ms;
}
#footer_search input:focus {
    background: #011032;
}

/* On Page Search */

#on_page_search {
    border-radius: 50px;
    border: 1px solid var(--blue);
    margin: 15px 0;
    max-width: 500px;
}
#on_page_search .form_area {
    display: flex;
    gap: 10px;
}
#on_page_search #searchLabel i {
    font-size: 16px;
    color: var(--yellow);
}
#on_page_search #searchLabel {
    padding: 0 0 0 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#on_page_search input {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 11px;
    color: var(--blue);
    font-weight: 700;
    flex: 1 0 auto;
    outline: none;
    border-radius: 0 50px 50px 0;
    transition: ease all 200ms;
}
#on_page_search input:focus {
    background: #f3f3f3;
}

/* Serp */
.serps {
    display: grid;
    gap: 40px;
}
.serp {
    display: block;
}
.serp .serp_header {
    font-size: 12px;
    color: #666;
    padding: 0 0 0 45px;
    position: relative;
    margin: 0 0 10px 0;
    min-height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.serp_header_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.serp_icon {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 0;
    top: 0;
    background: #eee;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.serp_icon.icon_vb_module_campaign {
    background: var(--orange);
}
.serp_icon.icon_page {
    background: var(--blue);
}
.serp_icon.icon_post {
    background: var(--teal);
}
.serp_icon.icon_job {
    background: var(--yellow);
}

.serp_icon:after {
    font-family: var(--fa);
    font-size: 16px;
    color: #fff;
}
.serp_icon.icon_vb_module_campaign:after {
    content: "\e31b";
}
.serp_icon.icon_page:after {
    content: "\f15c";
}
.serp_icon.icon_post:after {
    content: "\f0a1";
}
.serp_icon.icon_job:after {
    content: "\f0b1";
}

.thepage .serp h2 {
    margin: 0;
    font-size: 0.9em;
}
.thepage .serp h2:hover {
    text-decoration: underline;
}
.thepage .serp_main p {
    margin: 8px 0 0 0;
    font-size: 0.6em;
    max-width: 700px;
}

/* Footer Columns */
.footer_flex_col {
    padding: 40px 0 0 0;
}
.footer_flex_col h2 {
    font-size: 1em;
    font-weight: 700;
    margin: 0 0 15px 0;
}
.footer_flex_col p {
    font-size: 0.6em;
    line-height: 1.6em;
}
.footer_flex_col nav {
    display: flex;
    flex-direction: column;
    margin: 40px 0 0 0;
}
.footer_flex_col nav a {
    position: relative;
    font-size: 0.6em;
    line-height: 1.6em;
    padding: 6px 0;
    transition: ease all 300ms;
    align-self: flex-start;
}
.footer_flex_col nav a:focus {
    outline: none;
}
.footer_flex_col nav a:focus,
.footer_flex_col nav a:hover {
    color: var(--yellow);
}
.footer_flex_col nav a:after {
    content: "";
    width: 0%;
    height: 1px;
    background: var(--yellow);
    transition: ease all 300ms;
    bottom: -1px;
    left: 0;
    display: block;
}
.footer_flex_col nav a:focus:after,
.footer_flex_col nav a:hover:after {
    width: 100%;
}

#badges {
    margin: 30px 0 15px 0;
    display: flex;
    justify-content: flex-start;
    gap: 15px;
}
#badges .footer_badge img {
    width: auto;
    height: 50px;
    display: block;
}

#footer_lines {
    margin: 20px 0 40px 0;
    height: 150px;
    position: relative;
}
.footer_line {
    position: absolute;
    height: 30px;
    background: var(--footer-blue);
    width: 100%;
}
.footer_line:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-image: url("img/wave-overlay.png");
    /* background-size: auto 30px;
    background-repeat: repeat-x;
    background-image: url('data:image/svg+xml,%3Csvg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 324 85"%3E%3Cdefs%3E%3Cstyle%3E .st0 { fill: %23001e62; } %3C/style%3E%3C/defs%3E%3Cpath class="st0" d="M162,85H0V31c36.03,0,52.87,11.29,72.37,24.37,20.7,13.89,44.16,29.63,89.63,29.63Z"/%3E%3Cpath class="st0" d="M324,0C278.53,0,255.07,15.74,234.37,29.63c-19.5,13.08-36.34,24.37-72.37,24.37s-52.87-11.29-72.37-24.37C68.93,15.74,45.47,0,0,0h324Z"/%3E%3Cpath class="st0" d="M324,31v54h-162c45.47,0,68.93-15.74,89.63-29.63,19.5-13.08,36.34-24.37,72.37-24.37Z"/%3E%3C/svg%3E');
    background-position: top left; */
    background-size: auto 30px;
    background-repeat: repeat-x;

    /* background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 324 88"><defs><style> .st0 { fill: %23001e62; } </style></defs><path class="st0" d="M162,86v2H0v-56c36.03,0,52.87,11.29,72.37,24.37,20.7,13.89,44.16,29.63,89.63,29.63Z"/><path class="st0" d="M324,1c-45.47,0-68.93,15.74-89.63,29.63-19.5,13.08-36.34,24.37-72.37,24.37s-52.87-11.29-72.37-24.37C68.93,16.74,45.47,1,0,1V0h324v1Z"/><path class="st0" d="M324,32v56h-162v-2c45.47,0,68.93-15.74,89.63-29.63,19.5-13.08,36.34-24.37,72.37-24.37Z"/></svg>'); */
    /* background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 324 89.26"><defs><style> .st0 { fill: %23001e62; } </style></defs><path shape-rendering="crispEdges" class="st0" d="M162,85.99v9H0V31.99c36.03,0,52.87,11.29,72.37,24.37,20.7,13.89,44.16,29.63,89.63,29.63Z"/><path shape-rendering="crispEdges" class="st0" d="M324,.99c-45.47,0-68.93,15.74-89.63,29.63-19.5,13.08-36.34,24.37-72.37,24.37s-52.87-11.29-72.37-24.37C68.93,16.73,45.47.99,0,.99v-5h324V.99Z"/><path shape-rendering="crispEdges" class="st0" d="M324,31.99v63h-162v-9c45.47,0,68.93-15.74,89.63-29.63,19.5-13.08,36.34-24.37,72.37-24.37Z"/></svg>'); */

    background-position: top left;
}
.footer_line:before {
    z-index: 2;
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    box-sizing: border-box;
}
.footer_line:nth-child(1) {
    top: 0px;
}
.footer_line:nth-child(1):before {
    content: "";
    left: 30vw;
    width: 65vw;
    border-left: 15vw solid var(--orange);
    border-right: 15vw solid var(--orange);
}
.footer_line:nth-child(2) {
    top: 30px;
}
.footer_line:nth-child(3) {
    top: 60px;
    background: var(--yellow);
}
.footer_line:nth-child(4) {
    top: 90px;
}
.footer_line:nth-child(4):before {
    content: "";
    width: 25vw;
    left: 8vw;
    background: var(--red);
}
.footer_line:nth-child(5) {
    top: 120px;
}
.footer_line:nth-child(5):before {
    content: "";
    width: 15vw;
    left: 60vw;
    background: var(--teal);
}
.footer_line:nth-child(6) {
    top: 150px;
}
.footer_line:nth-child(6):before {
    content: "";
    width: 15vw;
    left: 20vw;
    background: var(--orange);
}

/* Disclosures */
/* ---------------------------------------------- */

#disclosures {
    margin: 60px 0;
}
#disclosure_holder {
    color: #768bba;
    padding: 40px 0;
    font-size: 14px;
    /* border-radius: 25px; */
    /* border: 1px solid var(--footer-blue); */
}
#disclosure_holder h2 {
    font-size: 1.4em;
    margin: 60px 0 20px 0;
    font-weight: 700;
}
#disclosure_holder h2:first-child {
    margin-top: 0;
}
#disclosure_holder p a {
    color: #61b0ba;
    text-decoration: underline;
    transition: ease all 300ms;
}
#disclosure_holder p a:hover {
    color: #fff;
}
#disclosure_holder p {
    margin: 0 0 20px 0;
}
#disclosure_holder ul,
#disclosure_holder ol {
    padding: 0 0 0 13px;
    margin: 0 0 20px 0;
}
#disclosure_holder li {
    margin: 0 0 8px 0;
}
#disclosure_holder strong {
    font-weight: bold;
}
#disclosure_holder p:last-child {
    margin: 0;
}

/* Sitewide alert */
/* ---------------------------------------------- */

#site_alert {
    padding: 20px 0;
    background: white;
    position: relative;
    color: var(--blue);
}
#site_alert .wrapper {
    position: relative;
}
.site_alert {
    padding: 0 50px 0 0;
}
.site_alert.has_icon {
    position: relative;
    /* padding: 0 50px; */
}
.hide_alert_x {
    position: absolute;
    top: 0;
    right: var(--wrapper-padding);
    padding: 0;
    font-size: 20px;
    line-height: 15px;
    transition: ease all 200ms;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 50;
    background: rgba(255, 255, 255, 0.2);
}
#site_alert.yellow .hide_alert_x {
    color: var(--blue);
}

#site_alert.red .hide_alert_x {
    color: white;
}

.hide_alert_x:focus,
.hide_alert_x:hover {
    border: 1px solid white;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.4);
}
.site_alert_icon {
    font-size: 40px;
    line-height: 1em;
}
.site_alert_content h2 {
    font-size: 20px;
    margin: 15px 0 0 0;
}
.site_alert_content p {
    margin: 15px 0;
}
a.alert_button {
    border-radius: 50px;
    padding: 15px 30px;
    background: transparent;
    border: 1px solid var(--blue);
    display: inline-block;
    user-select: none;
    transition: ease all 250ms;
    color: var(--blue);
}
#site_alert.yellow a.alert_button {
    border: 1px solid var(--blue);
    color: var(--blue);
}
#site_alert.red a.alert_button {
    border: 1px solid white;
    color: white;
}
a.alert_button:hover {
    background: rgba(255, 255, 255, 0.2);
}

#site_alert.yellow {
    background: var(--yellow);
}
#site_alert.yellow .site_alert_content h2,
#site_alert.yellow .site_alert_content p,
#site_alert.yellow .site_alert_icon {
    color: var(--blue);
}

#site_alert.red {
    background: var(--red);
}
#site_alert.red .site_alert_content h2,
#site_alert.red .site_alert_content p,
#site_alert.red .site_alert_icon {
    color: white;
}

@media (max-width: 600px) {
    .site_alert_content p {
        font-size: 14px;
    }
    .site_alert.has_icon {
        padding: 0;
    }
    .site_alert_icon {
        /* left: 20px; */
        /* top: 10px; */
        font-size: 40px;
        transform: none;
    }
}

/* Interior Templates */
/* ------------------------------------------ */
.int_header_image {
    max-height: 450px;
    min-height: 200px;
    height: 35vw;
    overflow: hidden;
    /* background-size: cover;
    background-position: center; */
    position: relative;
    background-color: var(--blue);
}
.int_header_image_canvas {
    position: absolute;
    width: 100%;
    /* width: 1500px; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    top: 0;
    left: 50%;
    height: 100%;
    transform: translate(-50%, 0);
}
.int_header_image_canvas:before,
.int_header_image_canvas:after {
    /* content: ""; */
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 200px;
    display: block;
    z-index: 2;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#001e62+0,001e62+100&1+8,0+100 */
    background: linear-gradient(to right, rgba(0, 30, 98, 1) 0%, rgba(0, 30, 98, 1) 8%, rgba(0, 30, 98, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.int_header_image_canvas:after {
    left: initial;
    right: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#001e62+0,001e62+100&0+0,1+92 */
    background: linear-gradient(to right, rgba(0, 30, 98, 0) 0%, rgba(0, 30, 98, 1) 92%, rgba(0, 30, 98, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#breadcrumb_links {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: #fafafa;
    border-radius: 31px;
    flex-wrap: wrap;
}
#breadcrumb_links span,
#breadcrumb_links a {
    position: relative;
    font-size: 0.6em;
    font-weight: 700;
    color: var(--blue);
    user-select: none;
}
#breadcrumb_links span:after,
#breadcrumb_links a:after {
    content: "\f0da";
    font-family: var(--fa);
    font-weight: 900;
    color: var(--orange);
    position: absolute;
    right: -10px;
    top: 56%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    font-size: 12px;
}
#breadcrumb_links span:last-child:after,
#breadcrumb_links a:last-child:after {
    display: none;
}
#breadcrumb_links span:before,
#breadcrumb_links a:before {
    content: "";
    display: block;
    transition: ease all 400ms;
    width: 0%;
    height: 1px;
    position: absolute;
    bottom: -3px;
    left: 0;
    background: var(--teal);
}
#breadcrumb_links a:hover:before {
    width: 100%;
}
.content_flex {
    display: flex;
    /* gap: 10vw; */
    gap: 90px;
    padding: 40px 0;
}
.content_flex section {
    order: 2;
    flex: 1 1 auto;
    padding: 0;
    min-width: 0;
}
.content_flex aside {
    order: 1;
    flex: 0 1 20%;
    min-width: 200px;
}
.content_flex aside nav {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    margin: 0 0 40px 0;

    position: sticky;
    top: 30px;
}
.content_flex aside nav h2 {
    color: var(--blue);
    padding: 12px;
    font-weight: 700;
    font-size: 1em;
    margin: 40px 0 0 0;
    border-bottom: 1px solid var(--yellow);
}
.content_flex aside nav h2:first-child {
    margin: 0;
}
.content_flex aside nav h2 i.fal {
    font-weight: 300;
}
.content_flex aside nav a {
    flex: 1 1 auto;
    padding: 10px 12px;
    font-size: 0.7em;
    position: relative;
}
.content_flex aside nav a:before {
    content: "";
    height: 3px;
    width: 6px;
    background: var(--orange);
    border-radius: 50px;
    position: absolute;
    display: block;
    left: 0px;
    top: 50%;
    transform: translate(0, -50%);
    transition: ease all 300ms;
}
.content_flex aside nav a.current:before,
.content_flex aside nav a:hover:before,
.content_flex aside nav a:focus:before {
    width: 12px;
    left: -6px;
}
.content_flex aside nav a.current:before {
    background: var(--blue);
}
.content_flex aside nav a:focus {
    text-decoration: underline;
    outline: none;
}
.content_flex aside nav a.parent {
    font-weight: 700;
    font-size: 1em;
    color: var(--blue);
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--yellow);
    font-family: var(--ubuntu);
}
.content_flex aside nav a.current {
    font-weight: 700;
    color: var(--blue);
}

aside nav .post_date {
    font-size: 14px;
    font-weight: 500;
    color: var(--blue);
    margin: 5px 0 0 0;
}
aside nav#categories span {
    display: inline-block;
    width: 25px;
    height: 24px;
    background: #eee;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
    color: var(--blue);
    position: relative;
    top: -2px;
    padding: 4px 0 0 0px;
}
.newpost {
    color: var(--red);
}

/* Membership Referral Layout */
.content_flex.member_referral_layout {
    gap: 50px;
}
.content_flex.member_referral_layout section {
    order: 1;
    flex: 1 0 50%;
    padding: 0;
}
.content_flex.member_referral_layout aside {
    order: 2;
    flex: 1 1 50%;
    min-width: 200px;
}

.thepage {
    padding: 40px 0;
}
.full_page_wrapper {
    max-width: 1200px;
}
.thepage.force_center {
    text-align: center !important;
    /* padding: 60px 0 0 0; */
}
.thepage.force_center h1 {
    margin: 0 0 20px 0;
}

.thepage h1 {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--blue);
    margin: 0 0 40px 0;
}
.thepage h2 {
    /* line-height: 1.1em;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--blue);
    margin: 35px 0 25px 0; */
    line-height: 1.1em;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--blue);
    margin: 75px 0 25px 0;
}
.thepage h3 {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--orange-ada);
    margin: 30px 0 15px 0;
}
.thepage h4 {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--blue);
    margin: 30px 0 10px 0;
}
.thepage h5 {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--blue);
    margin: 25px 0 8px 0;
}
.thepage h6 {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--blue);
    margin: 20px 0 8px 0;
}

.thepage p.no_top_margin,
.thepage h2.no_top_margin,
.thepage h3.no_top_margin,
.thepage h4.no_top_margin,
.thepage h5.no_top_margin,
.thepage h6.no_top_margin {
    margin-top: 0;
}

.thepage h1 + h2,
.thepage h1 + h3,
.thepage h1 + h4,
.thepage h1 + h5,
.thepage h1 + h6,
.thepage h1 + div,
.thepage h1 + ul,
.thepage h1 + ol,
.thepage h1 + p {
    margin-top: 0;
}

.thepage h1.has_tagline {
    margin: 0 0 5px 0;
}
.thepage h1.smaller {
    font-size: 1.4em;
}
.the_query {
    background: var(--yellow);
}

.thepage p.tagline {
    font-family: var(--ubuntu);
    color: var(--orange-ada);
    font-style: italic;
    font-weight: 500;
}
.thepage p.tagline + h2,
.thepage p.tagline + h3,
.thepage p.tagline + h4,
.thepage p.tagline + h5,
.thepage p.tagline + h6,
.thepage p.tagline + div,
.thepage p.tagline + ul,
.thepage p.tagline + ol,
.thepage p.tagline + p {
    margin-top: 0;
}

.thepage p,
.thepage li {
    font-size: var(--para-font-size);
    line-height: var(--para-line-height);
}
.thepage li li,
.thepage li li li {
    font-size: 16.8px;
}
.thepage p {
    margin: 0 0 25px 0;
}
.thepage li {
    margin: 0 0 11px 0;
}
.thepage li b,
.thepage p b,
.thepage li strong,
.thepage p strong {
    font-weight: 700;
}
.thepage li em,
.thepage p em {
    font-style: italic;
}
.thepage li a,
.thepage p a {
    color: var(--teal-ada);
}
.thepage li a:focus,
.thepage li a:hover,
.thepage p a:focus,
.thepage p a:hover {
    text-decoration: underline;
}
.thepage ol,
.thepage ul {
    margin: 0 0 30px 0;
    padding: 0 0 0 25px;
}
.thepage ul ul,
.thepage ul ul ul,
.thepage ul ol,
.thepage ul ul ol,
.thepage ol ol,
.thepage ol ol ol,
.thepage ol ul,
.thepage ol ul ul,
.thepage ol ol,
.thepage ol ol ul {
    margin: 15px 0;
}

.thepage hr.wp-block-separator {
    border: none;
    border-top: 1px solid var(--orange);
    margin: 70px 0;
}

#subpage_grid {
    position: relative;
    background-color: #e1f1f1;
    padding: 100px 0;
}
.subpage_grid_items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 20px 0;
}
.subpage_grid_item {
    min-height: 300px;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    padding: 40px;
    transition: ease all 300ms;
    background-color: var(--blue);
}
.post_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center;
}
.post_image:after {
    content: "";
    display: block;
    background: var(--blue);
    opacity: 0.9;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.subpage_grid_item h2 {
    color: var(--yellow);
    font-size: 1.2em;
    transition: ease all 300ms;
    font-weight: 700;
    position: relative;
    z-index: 4;
}
.subpage_grid_item p {
    font-size: 0.6em;
    color: white;
    margin: 20px 0 0 0;
    position: relative;
    z-index: 4;
}
.subpage_grid_item p::before {
    content: "";
    width: 25px;
    height: 1px;
    position: absolute;
    display: block;
    background: var(--yellow);
    top: -10px;
    left: 0;
}

.thepage > iframe {
    margin: 0 0 40px 0;
}

/* Columns */
@media (min-width: 782px) {
    .thepage h1 + .wp-block-columns > .wp-block-column > h2:first-child,
    .thepage h1 + .wp-block-columns > .wp-block-column > h3:first-child,
    .thepage h1 + .wp-block-columns > .wp-block-column > h4:first-child,
    .thepage h1 + .wp-block-columns > .wp-block-column > h5:first-child,
    .thepage h1 + .wp-block-columns > .wp-block-column > h6:first-child {
        margin-top: 0;
    }
}
@media (max-width: 781px) {
    .wp-block-columns {
        gap: 0em;
    }
    .thepage h1 + .wp-block-columns > .wp-block-column:first-child > h2:first-child,
    .thepage h1 + .wp-block-columns > .wp-block-column:first-child > h3:first-child,
    .thepage h1 + .wp-block-columns > .wp-block-column:first-child > h4:first-child,
    .thepage h1 + .wp-block-columns > .wp-block-column:first-child > h5:first-child,
    .thepage h1 + .wp-block-columns > .wp-block-column:first-child > h6:first-child {
        margin-top: 0;
    }
}

/* Image Block */
.wp-block-image.size-full {
    margin: 0 0 30px 0;
}

/* Embeds */
.wp-block-embed {
    margin: 0 0 30px 0;
}

/* Buttons */
.wp-block-buttons {
    margin: 0 0 30px 0;
}

/* Wallet / Apple Pay */
.card_badges {
    display: flex;
    margin: 0 0 30px 0;
    gap: 10px;
}
.card_badges .button {
    padding: 5px 25px;
}
.card_badges .button:focus,
.card_badges .button:hover {
    padding: 5px 37px 5px 25px;
}

.card_badges .button img {
    max-height: 26px;
    display: block;
}

/* Tables */
/* ------------------------------------------ */
.wp-block-table strong,
.wp-block-table b {
    font-weight: bold;
}
.wp-block-table {
}
.wp-block-table h2 {
}
.wp-block-table h3 {
}

.wp-block-table {
    background-color: initial;
    border-bottom: 1px solid #f0f0f0;
    border-collapse: inherit;
    border-spacing: 0;
    font-size: 0.8em;
    margin: 0 0 30px 0;
}
.wp-block-table tbody tr:nth-child(2n + 1) {
    background-color: #f5f8ff;
}
.wp-block-table td,
.wp-block-table th {
    border-color: #0000;
    padding: 0.6em;
    font-size: 14px;
}

/* Locations & Atms */
.branch-map {
    position: relative;
    width: 100%;
    height: 40rem;
}

/* Popups */
/* ------------------------------------------ */
.popup_overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    position: fixed;
    z-index: 59000;
    background: rgba(0, 30, 98, 0.92);
    -webkit-animation-name: fadeInOpacity;
    animation-name: fadeInOpacity;
    opacity: 1;

    animation-iteration-count: 1;
    animation-timing-function: ease-in;

    -webkit-animation-duration: 300ms;
    animation-duration: 300ms;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.popup_overlay.active {
    display: block;
}

.popup {
    z-index: 60000;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.popup.active {
    display: block;
}
.popup_close {
    position: absolute;
    top: -10px;
    right: -10px;
    height: 40px;
    width: 40px;
    background: var(--yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 50%;
    font-size: 16px;
    transition: ease all 300ms;
}
.popup_close:hover {
    cursor: pointer;
    font-size: 20px;
}

.popup_inner {
    background: var(--blue);
    border-radius: 30px;
    padding: 45px;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    max-width: 90vw;
    height: auto;
    width: 390px;
    border: #2f4fa1 1px solid;

    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    opacity: 1;

    animation-iteration-count: 1;
    animation-timing-function: ease-in;

    -webkit-animation-duration: 300ms;
    animation-duration: 300ms;

    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.popup_inner h2 {
    color: white;
    font-size: 2em;
    font-weight: 700;
}

/* Promo Pages */
#promo_header {
    position: relative;
    height: auto;
    overflow: hidden;
}
#promo_header.yellow {
    background: var(--yellow);
}

#promo_header .curve_svg {
    z-index: 6;
}
#promo_header .wrapper {
    position: relative;
}
.promo_content_holder {
    position: relative;
    z-index: 5;
    /* padding: 170px 0 290px 0; */
    padding: 12% 0 calc(10vh + 12%) 0;
    display: flex;
}
.promo_content_holder_inner {
    flex: 0 1 45%;
    min-width: 500px;
}
.promo_content_holder h1 {
    font-size: 2em;
    font-weight: 300;
    line-height: 1.2em;
    color: var(--blue);
}
.promo_content_holder h1 span.highlight {
    display: inline-block;
    font-weight: 700;
    position: relative;
    padding: 0 15px;
}
.promo_content_holder h1 span.highlight span {
    position: relative;
    z-index: 2;
}
.promo_content_holder h1 span #highlighter {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.promo_content_holder p {
    font-size: 1.4em;
    font-weight: 300;
    margin: 35px 0;
    line-height: 1.4em;
}
.background_foreground {
    position: absolute;
    z-index: 4;
    bottom: 0;
    right: -5%;
    /* background-color: #00ff0080; */
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    height: 90%;
    width: 40%;
}
.background_illustration {
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: -100px;
    width: 75%;
    height: 100%;
    /* background: #f3c60e; */
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
}

#promo_graphic {
    position: relative;
    padding: 4vw 0;
    text-align: center;
}
#promo_graphic h2 {
    color: var(--blue);
    font-size: 1.4em;
    margin: 0 0 25px 0;
    font-weight: 700;
}
#promo_graphic p {
    font-size: 0.8em;
    margin: 0 0 20px 0;
    line-height: 1.5em;
}
.promo_graphic_video_holder {
    display: flex;
    margin: 40px 0 60px 0;
    justify-content: center;
    padding: 0 10vw;
}
.promo_graphic_video_holder > div {
    flex: 1 0 auto;
}

#promo_tools {
    position: relative;
    background: var(--blue);
    padding: calc(10vh + 7vw) 0;
    text-align: center;
    color: white;
}
#promo_tools h2 {
    color: var(--yellow);
    font-size: 1.4em;
    margin: 0 0 25px 0;
    font-weight: 700;
}
#promo_tools p {
    font-size: 0.8em;
    margin: 0 0 20px 0;
    line-height: 1.5em;
}

.promo_tools_grid {
    display: flex;
    justify-content: center;
    gap: 35px;
    margin: 45px 0;
}
.promo_tools_grid_item {
    flex: 0 1 270px;
    padding: 15px;
    border-radius: 10px;
    transition: ease all 300ms;
    border: 1px solid transparent;
}
.promo_tools_grid_item:focus,
.promo_tools_grid_item:hover {
    outline: none;
    border: 1px solid var(--yellow);
    background: #032675;
}
.promo_tools_grid_item h3 {
    margin: 30px 0 0 0;
    font-weight: 500;
}
.promo_tools_grid_item_graphic {
    padding: 65% 0 0 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#promo_contact {
    padding: 1vw 0 80px 0;
}
.promo_contact_wrapper_inner {
    margin: 50px 0;
    border-radius: 50px 200px 200px 50px;
    padding: 0 440px 0 0;
    background: #fff8f3;
    position: relative;
    -webkit-box-shadow: 0 0 25px -17px #000;
    box-shadow: 0 0 25px -17px #000;
    display: flex;
    min-height: 300px;
    align-items: center;
}
.promo_contact_round_text {
    padding: 70px;
    flex: 1 1 auto;
}
.promo_contact_round_text h2 {
    color: var(--blue);
    font-size: 1.2em;
    margin: 0 0 15px 0;
    font-weight: 700;
}
.promo_contact_round_text p {
    font-size: 0.8em;
    line-height: 1.5em;
    color: black;
}
.promo_contact_round_text p a {
    color: inherit;
}

.promo_contact_round {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    background-color: #eee;
    background-size: cover;
    background-position: center;
}
.promo_contact_round_cta {
    position: absolute;
    top: 50%;
    left: -90px;
    width: 140px;
    height: 140px;
    background: var(--yellow);
    color: var(--blue);
    transform: translate(0, -50%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    font-size: 22px;
}
.promo_contact_round_cta span {
    font-size: 30px;
    font-weight: bold;
}

#temp_disc {
    margin: 50px 0;
}
.temp_disclosures {
    font-size: 16px;
    color: #666;
}
.temp_disclosures p {
    margin: 20px 0;
    line-height: 1.3em;
}

/* Pre Footer */
#pre_footer {
    background: #e1f1f1;
    padding: 170px 0;
    text-align: center;
    position: relative;
}
#pre_footer h2 {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--blue);
    margin: 0px 0 20px 0;
}
#pre_footer p {
    font-size: var(--para-font-size);
    line-height: var(--para-line-height);
}

/* Knowledge Center */
#knowledge_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding: 20px 0;
}

.kg_tile {
    min-height: 300px;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    padding: 40px;
    transition: ease all 300ms;
    background-color: #e1f1f1;
    text-align: center;
    border: 1px solid #e1f1f1;
    overflow: hidden;
}
.kg_tile:hover {
    border: 1px solid var(--blue);
}
.kg_tile.half_tile {
    grid-column: span 2;
    text-align: left;
    padding-right: 30%;
    background-color: var(--blue);
    border: 1px solid var(--blue);
}
.kg_tile.half_tile .feat_img_bg {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 70%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.kg_tile.half_tile .feat_img_bg:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: ease all 300ms;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#001e62+0,001e62+100&1+0,0.5+100 */
    background: linear-gradient(to right, rgba(0, 30, 98, 1) 0%, rgba(0, 30, 98, 0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.kg_tile.half_tile:hover .feat_img_bg:after {
}
.feat_textbox {
    position: relative;
    z-index: 2;
}

.kg_tile i {
    font-size: 80px;
    color: var(--blue);
}
.kg_tile h2 {
    color: var(--blue);
    font-size: 1.2em;
    margin: 20px 0 0 0;
    position: relative;
    transition: ease all 200ms;
}
.kg_tile h2:after {
    content: "";
    width: 0%;
    left: 50%;
    top: -9px;
    display: block;
    background: var(--blue);
    height: 1px;
    -webkit-transition: ease all 300ms;
    transition: ease all 300ms;
    position: absolute;
}
.kg_tile:focus h2:after,
.kg_tile:hover h2:after {
    width: 20%;
    left: 40%;
    top: -12px;
}
.kg_tile:focus h2,
.kg_tile:hover h2 {
    margin: 30px 0 0 0;
}

.kg_tile.half_tile span {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
}
.kg_tile.half_tile h2 {
    color: var(--yellow);
    font-weight: 700;
    margin: 7px 0 0 0;
}
.kg_tile.half_tile h2:after {
    display: none;
}
.kg_tile.half_tile:hover h2 {
    margin: 7px 0 0 0;
}
.kg_tile.half_tile p {
    color: white;
    font-size: 14px;
    margin: 10px 0 0 0;
    line-height: var(--para-line-height);
}

/* Blog Layout */

.thepage h1.news_title {
    margin: 0;
}
.post_meta_block {
    padding: 20px 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 30px 0;
    border-bottom: 1px solid var(--yellow);
    gap: 6px;
}
.post_meta_item {
    display: flex;
    font-size: 15px;
}
.post_meta_item i {
    width: 26px;
    color: var(--red);
}
.post_meta_block .termlist {
    display: flex;
    flex-wrap: wrap;
}
.post_meta_block .termlist a {
}
.post_meta_block .termlist a:hover {
    text-decoration: underline;
}
.news_articles {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    opacity: 0;
    animation-iteration-count: 1;
    animation-timing-function: var(--cb);
    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.news_article {
    flex: 1 0 100%;
    display: flex;
    background: #fff8f3;
    border-radius: 25px;
    padding: 30px 35% 30px 30px;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: ease all 300ms;
    border: 1px solid #fff8f3;
}
.news_article.no_image {
    padding: 30px;
}
.news_article_image {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 30%;
    background-size: cover;
    background-position: center;
}
.news_article_image.no_image {
    display: none;
}

.news_image_holder {
    max-height: 500px;
    height: 45vw;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    margin: 0 0 40px 0;
    border-radius: 10px;
}

.thepage .news_article h2 {
    font-size: 1.1em;
    font-weight: 500;
    margin: 24px 0 8px 0;
    color: var(--blue);
}
.thepage .news_article h2:hover {
    text-decoration: underline;
}
.thepage .news_article p {
    font-size: 14px;
    margin: 10px 0;
    color: var(--blue);
    line-height: 1.4em;
}
.newspostdate {
    color: #565656;
    font-weight: 500;
    font-size: 15px;
    display: block;
    margin: 0 0 8px 0;
}

.post_categories {
    display: flex;
    font-size: 14px;
    margin: 10px 0 0 0;
    font-weight: 500;
    color: #555;
    flex-wrap: wrap;
    gap: 5px 0;
}
.post_categories:first-of-type {
    padding-top: 15px;
    border-top: 1px solid #ebd5c6;
    margin-top: 15px;
}
.post_categories a:hover {
    color: black;
    text-decoration: underline;
}
.post_categories a.current {
    background: #ffe6be;
    color: var(--blue);
}
.post_categories i {
    width: 20px;
    margin: 0 2px 0 0;
}

/* Pagination */

#pagination {
    grid-column: 1/3;
    display: flex;
    justify-content: center;
    padding: 30px;
}
.pagi_inner {
    display: flex;
}
.page-numbers {
    padding: 15px;
    border-radius: 50%;
    border: var(--blue) 1px solid;
    width: 52px;
    display: block;
    margin: 0 5px;
    height: 52px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    transition: ease all 200ms;
    font-size: 18px;
}
.page-numbers:hover {
    background: #f1f1f1;
}
.page-numbers.current {
    background: var(--yellow);
    color: var(--blue);
    border-color: var(--yellow);
}
.page-numbers.current:hover {
    background: var(--yellow);
}
.page-numbers.dots {
    border: solid 1px transparent;
    background: transparent;
}

/* Give Sun / Get Sun */
.member_referral_layout .thepage h1 {
    position: relative;
    padding: 30px 0 0 0;
    margin: 0 0 20px 0;
}

.member_referral_layout .thepage h1:after {
    content: "";
    height: 9px;
    width: 160px;
    border-radius: 50px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--yellow);
}
#givesun_getsun {
    padding: 0 30px 0 0;
    background: var(--blue);
    border-radius: 50px 25px 25px 50px;
}
#givesun_getsun > div {
    background-image: url("img/logo-blue.svg");
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: left 30px top 30px;
    padding: 100px 30px 30px 30px;
    border-radius: 25px;
    position: relative;
    background-color: var(--yellow);
}
#givesun_getsun > div > p {
    font-size: 16px;
    line-height: 1.3em;
    padding-right: clamp(0px, (100vw - 900px) * 0.5, 20%);
    margin: 20px 0;
}
#givesun_getsun > div > h2 {
    line-height: 1.1em;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--blue);
    margin: 10px 0px;
    padding-right: clamp(0px, (100vw - 900px) * 0.5, 20%);
}
#givesun_getsun form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#givesun_getsun > div:after {
    content: "";
    height: 1px;
    left: 110px;
    right: 30px;
    top: 50px;
    display: block;
    position: absolute;
    background: var(--blue);
}
#givesun_getsun .cs_rl_row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#givesun_getsun .cs_rl_row > div {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 8px;
}

#givesun_getsun .cs_rl_row > div label {
    font-size: 14px;
    padding: 8px 10px 3px 10px;
    color: #282828;
}
#givesun_getsun .cs_rl_row > div input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    font-size: 18px;
    padding: 5px 10px 8px 10px;
    outline: none;
    background: #fafafa;
    border-radius: 0 0 8px 8px;
    color: var(--blue);
    font-weight: 700;
}
#givesun_getsun .cs_rl_row h2.cs_rl_shr_hdr {
    line-height: 1.1em;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--blue);
    margin: 10px 0px;
}
#givesun_getsun .cs_rl_row h3.cs_rl_shr_hdr {
    line-height: 1.1em;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--blue);
    margin: 0;
    background: var(--yellow);
    padding: 20px 0 0 0;
}
#givesun_getsun .cs_rl_row h2.cs_rl_shr_social_hdr,
#givesun_getsun .cs_rl_row h3.cs_rl_shr_social_hdr {
    line-height: 1.1em;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--blue);
    margin: 0;
    background: var(--yellow);
    padding: 20px 0 0 0;
}
#cs_rl_lblValidation.cs_rl_lblSucess {
    font-size: 25px !important;
    background: white;
    padding: 25px;
    text-align: center;
    border-radius: 15px;
    color: var(--blue) !important;
    font-weight: 700;
}

#givesun_getsun .cs_rl_row > div input:focus {
    background: #e9f3ff;
}

#givesun_getsun div input[type="button"] {
    background-color: var(--blue);
    color: white;
    padding: 18px 25px;
    border-radius: 8px;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 19px;
    position: relative;
    margin: 0;
    transition: ease all 300ms;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}
#givesun_getsun div input[type="button"]:focus,
#givesun_getsun div input[type="button"]:hover {
    cursor: pointer;
    background: #042e8c;
}
/* Step 1.0 Form */
#givesun_getsun #cs_rl_tbl_rgForm .cs_rl_row:nth-child(2) div {
    background: transparent;
}
#givesun_getsun #cs_rl_tbl_rgForm .cs_rl_row:nth-child(2) {
    position: absolute;
    top: 60px;
    right: 30px;
    font-size: 14px;
}
#givesun_getsun #cs_rl_tbl_rgForm .cs_rl_row:nth-child(1) > div {
    background: transparent;
    display: flex;
    margin: 0 0 25px 0;
}
#givesun_getsun #cs_rl_tbl_rgForm .cs_rl_row:nth-child(1) > div span {
    color: #ab0000;
    font-size: 15px;
}

/* Step 1.1 Form */
#givesun_getsun #cs_rl_tbl_shareForm > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#givesun_getsun #cs_rl_tbl_shareForm .cs_rl_row:nth-child(1) div {
    background: transparent;
    display: flex;
}
#givesun_getsun #cs_rl_tbl_shareForm .cs_rl_row:nth-child(2) div {
    background: transparent;
    margin: 0 0 25px 0;
    font-size: 16px;
    line-height: 1.3em;
    padding-right: clamp(0px, (100vw - 900px) * 0.5, 20%);
}
#givesun_getsun #cs_rl_tbl_shareForm .cs_rl_row:nth-child(4) {
    position: absolute;
    top: 60px;
    right: 30px;
    font-size: 14px;
}
#givesun_getsun #cs_rl_tbl_shareForm .cs_rl_shr_social_share_section_header {
    background: var(--yellow);
    font-size: 15px;
    font-weight: 500;
    padding: 0 0 10px 0;
}
#givesun_getsun #cs_rl_tbl_shareForm .cs_rl_shr_social_share_section {
    padding: 15px 10px;
    font-size: 20px;
    text-align: center;
}
#givesun_getsun #cs_rl_tbl_shareForm .cs_rl_row h3.cs_rl_shr_hdr:before {
    content: "...Or ";
}
#givesun_getsun #cs_rl_tbl_shareForm .cs_rl_row h3.cs_rl_shr_hdr:after {
    content: " URL";
}
#givesun_getsun #cs_rl_tbl_shareForm .cs_rl_lblSucess {
    line-height: 0.7em;
    font-size: 0.9em;
    font-weight: 700;
    color: var(--blue);
    padding: 10px 0px;
    margin: 0;
    background: var(--yellow);
}

/* Media Queries */
/* ------------------------------------------ */
/* ------------------------------------------ */
@media (max-width: 1300px) {
    /* Homepage */
    .product_promo_text h2 {
        font-size: 1.6em;
    }
    .product_promo_text p {
        font-size: 0.9em;
    }
}
@media (max-width: 1200px) {
    /* Campaign Landing Pages */
    .promo_content_holder h1 {
        font-size: 1.7em;
    }
    .promo_content_holder p {
        font-size: 1.2em;
        margin: 25px 0;
    }
    .promo_content_holder {
        padding: 9% 0 calc(10vh + 10%) 0;
    }

    /* Homepage */
    .homepage_promos_4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 4vw;
    }
    .resources_inner_text {
        padding: 0;
    }
    #home_rates {
        min-height: 0;
    }
    .home_rates_quad {
        grid-template-columns: repeat(2, 1fr);
        gap: 5vw;
        padding: 30px 15vw;
    }

    /* Interior Pages */
    .content_flex {
        gap: 5vw;
    }
    .content_flex section {
        padding: 0;
    }

    /* Knowledge Center Page */
    #knowledge_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 1100px) {
    .wrapper {
        --wrapper-padding: 50px;
    }

    /* Header */
    #meganav {
        padding: 10px 0 30px 0;
    }
    #meganav.active {
        display: block;
    }
    #header_inner #logo {
        flex: 0 0 130px;
        height: 90px;
    }
    #header_inner {
        gap: 30px;
        flex-wrap: wrap;
    }
    #header_inner nav {
        display: none;
    }
    .header_links {
        justify-content: center;
    }
    .mainnav_holder_nav_promo {
        display: none !important;
    }
    .mainnav_holder_pair {
        grid-template-columns: repeat(1, 1fr);
    }
    .mainnav_holder_pair.active {
        display: grid;
    }
    .subnav {
        display: none;
        gap: 9px;
    }
    .subnav a {
        display: block;
        padding: 10px 12px;
        background: #efefef;
        border-radius: 5px;
        font-weight: 500;
        color: var(--blue);
        border: 1px solid #e0dedc;
    }
    .subnav a:hover,
    .subnav a:focus {
        border: 1px solid var(--blue);
    }
    #meganav section .subnav a::after,
    #meganav section .subnav a::before {
        display: none;
    }
    .subnav.active {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 15px 0 30px 0;
    }
    .link_header {
        display: flex;
        gap: 15px;
        border-bottom: 1px solid #333;
    }
    .link_header > a::after {
        display: none;
    }
    .link_header:last-child {
        border: none;
    }
    .link_header > a {
        flex: 1 1 50%;
        border-bottom: none;
        margin: 0;
        padding: 12px 12px 12px 0;
        font-size: 1.3em;
    }
    .link_header_more {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 0 0 50px;
        text-align: center;
    }
    .link_header_more:after {
        content: "\f107";
        font-family: var(--fa);
        font-weight: 900;
        font-size: 18px;
        color: var(--orange);
    }
    .link_header_more.active:after {
        content: "\f106";
    }

    #mnavbutton {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #001e62;
        align-self: center;
        padding: 0 0 0 10px;
        font-size: 24px;
        order: 2;
        transition-duration: 0.5s;
    }
    .menu {
        background-color: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        padding: 0;
    }
    .line {
        fill: none;
        stroke: #001e62;
        stroke-width: 6;
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .line1 {
        stroke-dasharray: 60 207;
        stroke-width: 6;
    }
    .line2 {
        stroke-dasharray: 60 60;
        stroke-width: 6;
    }
    .line3 {
        stroke-dasharray: 60 207;
        stroke-width: 6;
    }
    .active .line1 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
        stroke-width: 6;
    }
    .active .line2 {
        stroke-dasharray: 1 60;
        stroke-dashoffset: -30;
        stroke-width: 6;
    }
    .active .line3 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
        stroke-width: 6;
    }

    /* Footer */
    #footer_main {
        padding: 30px 0 30px 0;
    }
    .footer_flex {
        gap: 40px;
        flex-wrap: wrap;
    }
    .footer_flex_col {
        padding: 0;
        flex: 1 1 100%;
        text-align: center;
    }
    .footer_flex_col:nth-child(2) {
        display: flex;
        flex-direction: column;
    }
    .footer_flex_col:nth-child(2) nav {
        order: -1;
        margin: 0 0 60px 0;
    }
    .footer_flex_col nav a {
        align-self: center;
    }
    .footer_flex_col h2 {
        color: #768bba;
    }
    .footer_flex_col p {
        color: #768bba;
    }
    .footer_flex_logo_social {
        display: flex;
        flex: 1 0 100%;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        border-bottom: 1px solid #052c85;
        padding: 0 0 40px 0;
    }
    .footer_logo {
        height: 90px;
        background-position: center;
    }
    .footer_contact_links {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 5px;
    }
    .footer_contact_links a {
        padding: 10px 24px;
        border: 1px solid #022573;
        border-radius: 50px;
        color: #b2bed8;
        transition: ease all 500ms;
    }
    .footer_contact_links a:hover {
        border-color: #b2bed8;
    }
    #badges {
        margin: 90px 0 15px 0;
        flex-wrap: wrap;
    }
    #badges .footer_badge img {
        height: 40px;
    }
    #social {
        flex: 1 0 100%;
        left: 0;
        justify-content: center;
        margin: 20px 0 0 0;
    }

    /* Campaign Landing Pages */
    .promo_contact_wrapper_inner {
        margin: 20vw 0 50px 0;
        border-radius: 25px;
        padding: 5vw 0 0 0;
        min-height: 0;
        align-items: center;
    }
    .promo_contact_round {
        width: 25vw;
        height: 25vw;
        right: initial;
        top: -20vw;
        transform: translate(-4vw, 0);
        left: 50%;
    }
    .promo_contact_round_cta {
        top: 50%;
        left: calc(-100% + 8vw);
        width: 100%;
        height: 100%;
        font-size: 36px;
    }
    .promo_contact_round_cta span {
        font-size: 50px;
    }
    .promo_contact_round_text {
        padding: 5vw;
        text-align: center;
    }

    /* Homepage */
    .resource_tiles {
        margin: 0;
    }
    .product_promo_text {
        padding: 0 50px 0 0;
    }
    .product_promo_text h2 {
        font-size: 1.4em;
    }
    .product_promo_text p {
        font-size: 0.8em;
    }
    .product_graphic_section {
        margin: 0;
        display: flex;
        justify-content: flex-end;
    }
    .product_graphic_section_image {
        height: 35vw;
        width: 35vw;
    }
    .product_graphic_section_image::after {
        left: 0px;
        top: 40px;
        height: 80px;
        width: 80px;
    }
    .product_graphic_section_image::before {
        height: 60px;
        width: 60px;
        left: -20px;
        top: 100px;
    }

    .home_hero_image {
        background-position: center left;
    }
    .header_nav_buttons .homepage {
        display: flex;
    }
    .home_login_text_box {
        padding: 0;
        border-radius: 20px;
        overflow: hidden;
    }
    #home_login {
        padding: 50px 0;
        min-height: 0px;
    }
    .form_round {
        display: none;
    }
}
@media (max-width: 1000px) {
    /* Int Headers */
    .int_header_image {
        height: 45vw;
    }
    .int_header_image_canvas {
        width: 100%;
    }
    .int_header_image_canvas:before,
    .int_header_image_canvas:after {
        display: none;
    }

    /* Homepage */
    .resources_inner {
        flex-direction: column;
        gap: 40px;
        padding: 80px 0 40px 0;
    }
    .resources_inner_text {
        order: 2;
        text-align: center;
        padding: 0;
    }
    .resources_inner_text p {
        margin: 0 0 30px 0;
    }
    .resources_inner_text .button_wrap {
        justify-content: center;
    }
    .resources_inner_graphics {
        width: 100%;
        max-width: 80%;
    }
    .resources_inner_graphic_dot {
        height: 80px;
        width: 80px;
        left: -10px;
        top: -50px;
    }
    .resources_inner_graphic_image::after {
        left: -30px;
        top: 5px;
        height: 60px;
        width: 60px;
    }
    .resources_inner_graphic_image::before {
        height: 30px;
        width: 30px;
        left: -10px;
        top: 60px;
    }

    .home_rates_quad {
        gap: 4vw;
        padding: 30px 10vw;
    }
    .home_rates_quad_single h3 {
        width: 78%;
    }
    .home_rates_product_rate {
        font-size: 1.2em;
    }

    .home_login_text_box_content_text {
        padding: 30px;
    }
    .home_login_text_box_content_text h2 {
        font-size: 1.1em;
    }
}
@media (max-width: 900px) {
    .wrapper {
        --wrapper-padding: 40px;
    }

    /* Campaign Landing Pages */
    .promo_content_holder {
        padding: 9% 0 calc(10vh + 250px) 0;
    }
    .background_foreground {
        height: 60%;
        width: 50%;
    }
    .background_illustration {
        width: 100vw;
        height: 450px;
        max-width: 100%;
    }
    .promo_tools_grid {
        flex-wrap: wrap;
        gap: 15px;
    }
    .promo_tools_grid_item {
        flex: 1 1 100%;
        padding: 15px 45px 15px 95px;
        position: relative;
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 1px solid #2f4fa1;
        /* background: #032675; */
    }
    .promo_tools_grid_item:after {
        content: "\f105";
        font-family: var(--fa);
        font-weight: 100;
        position: absolute;
        top: 50%;
        right: 15px;
        font-size: 28px;
        display: block;
        transform: translate(0, -50%);
    }
    .promo_tools_grid_item h3 {
        color: var(--yellow);
        font-weight: 700;
        margin: 0;
        text-align: left;
    }
    .promo_tools_grid_item_graphic {
        padding: 0;
        position: absolute;
        width: 60px;
        height: 60px;
        left: 15px;
        top: 50%;
        transform: translate(0, -50%);
    }
    .promo_contact_round_cta {
        font-size: 15px;
    }
    .promo_contact_round_cta span {
        font-size: 22px;
    }

    .product_inner {
        gap: 40px;
    }
    .product_promo_text h2 {
        font-size: 1.3em;
    }
    .product_promo_text {
        flex: 1 1 100%;
    }
    .product_promo_text p {
        font-size: 0.7em;
    }
    .product_graphic_section,
    .product_promo_text {
        padding: 0;
    }

    #hero {
        min-height: 0;
    }
    #home_login {
        padding: 50px 0 0 0;
    }

    /* Interior Pages */
    .content_flex aside {
        display: none;
    }

    /* Membership Referral Layout (needs Aside on mobile) */
    .content_flex.member_referral_layout {
        flex-wrap: wrap;
    }
    .content_flex.member_referral_layout section {
        order: 2;
    }
    .content_flex.member_referral_layout aside {
        display: block;
        order: 1;
    }

    .subpage_grid_items {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .subpage_grid_item {
        min-height: 0px;
        border-radius: 20px;
    }
}
@media (max-width: 800px) {
    /* Homepage */
    .homepage_promos_4 {
        grid-template-columns: repeat(1, 1fr);
        gap: 40px;
        padding: 40px 0 10px 0;
    }
    a.homepage_promo {
        padding: 30px;
    }
    a.homepage_promo .dot {
        height: 50px;
        width: 50px;
        font-size: 24px;
        top: -25px;
    }
    a.homepage_promo .dot::after {
        top: 10px;
    }
    a.homepage_promo .dot::before {
        top: 17px;
    }

    .home_rates_quad {
        gap: 8vw 4vw;
        padding: 20px 5vw;
    }
    .mobile_all_rates {
        display: flex;
        justify-content: center;
        padding: 10px 0 30px 0;
    }

    #hero {
        background-color: white;

        padding: 0 40px;
        margin: 0 0 50px 0;
    }
    #hero .curve_svg {
        display: none;
    }
    #home_login {
        padding: 0 0 0 0;
    }
    .home_hero_image {
        border-radius: 20px 20px 0 0;
    }
    .home_login_text_box_content {
        -webkit-box-shadow: 0 0 25px -5px #9a9a9a;
        box-shadow: 0 0 25px -5px #9a9a9a;
        border-radius: 0 0 20px 20px;
    }
    .home_login_text_box {
        flex: 1 0 100%;
        padding: 0;
        max-width: 100%;
        border-radius: 0;
        overflow: initial;
    }
    #hero .wrapper {
        padding: 0;
    }
    .home_hero_image {
        position: relative;
        height: 45vw;
    }
    .home_login_bubble_link:focus,
    .home_login_bubble_link:hover,
    .home_login_bubble_link {
        padding: 20px 30px 20px 30px;
        border-radius: 0 0 20px 20px;
        clip-path: none;
    }

    /* News Articles */
    .news_article {
        padding: 30vw 30px 30px 30px;
    }
    .news_article_text {
        padding: 30px 0 0 0;
    }
    .news_article.no_image .news_article_text {
        padding: 0;
    }
    .news_article_image {
        right: initial;
        left: 0;
        height: 30vw;
        width: 100%;
    }

    /* Knowledge Center Page */
    #knowledge_grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 25px;
    }
    .kg_tile.half_tile {
        grid-column: span 1;
        padding-right: 30px;
    }
    .kg_tile i {
        font-size: 50px;
    }
    .kg_tile h2 {
        font-size: 1em;
    }
    .kg_tile {
        min-height: 200px;
        padding: 30px;
    }
}
@media (max-width: 740px) {
    /* Header */
    .subnav.active {
        grid-template-columns: repeat(2, 1fr);
    }
    .header_links {
        flex: 1 0 100%;
        order: 5;
        flex-direction: row;
    }
    .header_nav_buttons {
        flex: 1 0 100%;
    }
    .header_nav_buttons .button_wrap {
        flex: 1 1 50%;
    }
    .header_nav_buttons .button_wrap .button:hover,
    .header_nav_buttons .button_wrap .button:focus,
    .header_nav_buttons .button_wrap .button {
        width: 100%;
        text-align: center;
        padding: 10px;
        font-size: 12px;
    }

    .home_rates_quad {
        gap: 6vw 4vw;
        padding: 20px 2vw;
    }
    .home_rates_product_title {
        font-size: 0.7em;
        color: #363636;
    }

    .product_inner {
        flex-direction: column;
        gap: 30px;
        padding: 30px 0 50px 0;
    }
    .product_promo_text {
        text-align: center;
    }
    .product_graphic_section {
        justify-content: center;
    }
    .product_graphic_section_image {
        height: 60vw;
        width: 60vw;
    }
    .product_inner .button_wrap {
        justify-content: center;
    }
    .product_graphic_section_image::before,
    .product_graphic_section_image::after {
        display: none;
    }

    #breadcrumb_links {
        display: none;
    }
    .content_flex {
        padding: 10px 0 40px 0;
    }
}
@media (max-width: 600px) {
    .wrapper {
        --wrapper-padding: 8vw;
    }

    /* Header */
    #header_inner #logo {
        flex: 0 0 100px;
    }
    #aux .wrapper {
        padding: 0;
    }
    #aux nav a,
    #aux nav > span {
        flex: 1 1 auto;
        text-align: center;
        padding: 16px 0;
    }
    /* Header */
    .subnav.active {
        grid-template-columns: repeat(1, 1fr);
    }

    /* Footer */
    #disclosure_holder {
        border: none;
        padding: 0;
    }
    /* Buttons */
    .button.large {
        font-size: 16px;
        padding: 13px 27px;
        margin: 0 15px 0 0;
    }
    .button.large:focus,
    .button.large:hover {
        padding: 13px 42px 13px 27px;
        margin: 0;
    }
    .button.large::after {
        transform: translate(15px, 0);
    }
    .button.large:focus:after,
    .button.large:hover:after {
        transform: translate(0, 0);
    }
    .button.large::before {
        font-size: 14px;
    }
    .button.large:focus:before,
    .button.large:hover:before {
        right: 15px;
    }

    /* Campaign Landing Pages */
    .promo_content_holder_inner {
        min-width: 0;
        flex: 1 1 45%;
    }
    .promo_content_holder {
        padding: 10vw 0 calc(10vh + 47vw) 0;
    }
    .promo_content_holder h1 {
        font-size: 1.4em;
    }
    .promo_content_holder p {
        font-size: 0.9em;
    }
    .background_illustration {
        width: 120vw;
        height: 50%;
        right: -10vw;
        max-width: none;
    }

    .promo_graphic_video_holder {
        margin: 35px 0;
        padding: 0;
    }
    #promo_graphic h2 {
        font-size: 1.2em;
    }
    #promo_graphic p {
        font-size: 0.7em;
    }
    #promo_tools h2 {
        font-size: 1.2em;
    }
    #promo_tools p {
        font-size: 0.7em;
    }

    .promo_tools_grid_item h3 {
        font-size: 0.8em;
    }
    .promo_contact_round_text {
        padding: 8vw;
    }
    .promo_contact_round_text h2 {
        font-size: 1.1em;
    }
    .promo_contact_round_text p {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .promo_contact_round_text p a {
        display: inline-block;
        padding: 3px 13px;
        border: 1px solid #001e62;
        flex: 0 1 auto;
        border-radius: 9px;
        background: #e8efff;
        margin: 3px 0 15px 0;
        color: var(--blue);
    }

    /* Homepage */
    #home_rates h2 {
        font-size: 1.2em;
    }
    .promos_inner h2 {
        font-size: 1.2em;
    }
    .homepage_promos_4 {
        gap: 40px;
        padding: 40px 0 10px 0;
    }
    .resources_inner_text h2 {
        font-size: 1.2em;
    }
    .resources_inner_graphic_image {
        height: 55vw;
    }

    .home_rates_quad {
        gap: 8vw 4vw;
        padding: 10px 0vw;
        grid-template-columns: repeat(1, 1fr);
    }
    .home_rates_product_rate {
        font-size: 1em;
    }
    .home_rates_product_rate sup {
        top: -0.8em;
    }
    .home_rates_quad_single h3 {
        z-index: 2;
        width: 100%;
        padding: 40px;
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
    }
    .home_rates_quad_single:nth-child(4) .home_rates_quad_single_circle::after {
        border-color: #d2d5e2;
    }
    .home_rates_quad_single_circle {
        padding: 0;
    }
    .home_rates_quad_single_circle::after {
        opacity: 0.4;
        z-index: 0;
        border-radius: 200px;
    }
    .home_rates_quad_single .button {
        padding: 10px 15px;
    }

    /* Homepage */
    #hero {
        padding: 0 8vw;
    }
    #home_resources .item:hover .learn_more,
    #home_resources .learn_more {
        padding: 15px 30px 15px 30px;
        clip-path: none;
    }

    /* Member Referral Pages */
    .thepage h1 {
        font-size: 1.5em;
    }
    #givesun_getsun {
        padding: 0;
    }
    #givesun_getsun > div {
        padding: 100px 20px 30px 20px;
        background-position: left 20px top 30px;
    }

    /* News Articles */
    .news_article {
        padding: 38vw 20px 20px 20px;
    }
    .news_article_image {
        height: 38vw;
    }
    .thepage .news_article h2 {
        font-size: 0.9em;
    }
    .news_article_text {
        padding: 20px 0 0 0;
    }

    /* Int Headers */
    .int_header_image {
        height: 57vw;
    }
}
@media (max-width: 500px) {
    .wrapper {
        --wrapper-padding: 7vw;
    }

    /* Homepage */
    #hero {
        padding: 0 7vw;
    }

    /* Header */
    #header_inner #logo {
        flex: 0 0 80px;
        height: 60px;
    }

    /* Buttons */
    .button_wrap {
        overflow: hidden;
    }
    [data-member][data-non-member] {
        width: 100%;
        text-align: center;
    }
    [data-member][data-non-member] .choices {
        width: calc(100% + 4px);
    }
    [data-member][data-non-member] a.choice {
        padding: 10px;
        font-size: 14px;
    }
}