*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    /*margin: -1px;*/
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.tw-fixed {
    position: fixed !important;
}

.tw-relative {
    position: relative !important;
}

.tw-bottom-0 {
    bottom: 0px !important;
}

.tw-left-0 {
    left: 0px !important;
}

.tw-right-0 {
    right: 0px !important;
}

.tw-top-0 {
    top: 0px !important;
}

.tw-z-50 {
    z-index: 50 !important;
}

.tw-z-\[51\] {
    z-index: 51 !important;
}

.tw-col-span-2 {
    grid-column: span 2 / span 2 !important;
}

.tw-col-start-1 {
    grid-column-start: 1 !important;
}

.tw-col-start-2 {
    grid-column-start: 2 !important;
}
.tw-col-start-3 {
    grid-column-start: 3 !important;
}
.tw-col-start-4 {
    grid-column-start: 4 !important;
}

.tw-row-start-1 {
    grid-row-start: 1 !important;
}

.tw-row-start-2 {
    grid-row-start: 2 !important;
}

.tw-row-span-2 {
    grid-row: span 2 / span 2 !important;
}

.tw-m-0 {
    margin: 0px !important;
}

.tw-my-3 {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.tw-mb-0 {
    margin-bottom: 0px !important;
}

.tw-mb-1 {
    margin-bottom: 0.25rem !important;
}

.tw-mb-4 {
    margin-bottom: 1rem !important;
}

.tw-mb-6 {
    margin-bottom: 1.5rem !important;
}

.tw-mt-3 {
    margin-top: 0.75rem !important;
}

.tw-mt-4 {
    margin-top: 1rem !important;
}

.tw-mt-5 {
    margin-top: 1.25rem !important;
}

.tw-mt-8 {
    margin-top: 2rem !important;
}

.tw-block {
    display: block !important;
}

.tw-flex {
    display: flex !important;
}

.tw-grid {
    display: grid !important;
}

.tw-hidden {
    display: none !important;
}

.tw-h-4 {
    height: 1rem !important;
}

.tw-h-\[100vh\] {
    height: 100vh !important;
}

.tw-h-\[22px\] {
    height: 22px !important;
}

.tw-h-\[30px\] {
    height: 30px !important;
}

.tw-h-\[39px\] {
    height: 39px !important;
}

.tw-h-full {
    height: 100% !important;
}

.tw-max-h-\[24px\] {
    max-height: 24px !important;
}

.tw-max-h-max {
    max-height: -moz-max-content !important;
    max-height: max-content !important;
}

.tw-min-h-32 {
    min-height: 8rem !important;
}

.tw-min-h-48 {
    min-height: 12rem !important;
}

.tw-w-4 {
    width: 1rem !important;
}

.tw-w-\[194px\] {
    width: 194px !important;
}

.tw-w-\[47px\] {
    width: 47px !important;
}

.tw-w-full {
    width: 100% !important;
}

.tw-w-max {
    width: -moz-max-content !important;
    width: max-content !important;
}

.tw-max-w-4xl {
    max-width: 56rem !important;
}

.tw-max-w-\[40ch\] {
    max-width: 40ch !important;
}

.tw-max-w-\[80ch\] {
    max-width: 80ch !important;
}

.tw-max-w-full {
    max-width: 100% !important;
}

.tw-cursor-pointer {
    cursor: pointer !important;
}

.tw-list-none {
    list-style-type: none !important;
}

.tw-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.tw-grid-cols-\[1fr_20px\] {
    grid-template-columns: 1fr 20px !important;
}

.tw-grid-cols-\[min-content_1fr\] {
    grid-template-columns: min-content 1fr !important;
}

.tw-grid-rows-\[min-content_1fr_min-content\] {
    grid-template-rows: min-content 1fr min-content !important;
}

.tw-flex-col {
    flex-direction: column !important;
}

.tw-flex-wrap {
    flex-wrap: wrap !important;
}

.tw-place-content-center {
    place-content: center !important;
}

.tw-place-content-between {
    place-content: space-between !important;
}

.tw-content-center {
    align-content: center !important;
}

.tw-justify-start {
    justify-content: start !important;
}

.tw-justify-end {
    justify-content: end !important;
}

.tw-justify-between {
    justify-content: space-between !important;
}

.tw-justify-items-start {
    justify-items: start !important;
}

.tw-gap-0\.5 {
    gap: 0.125rem !important;
}

.tw-gap-2 {
    gap: 0.5rem !important;
}

.tw-gap-3 {
    gap: 0.75rem !important;
}

.tw-gap-4 {
    gap: 1rem !important;
}

.tw-gap-6 {
    gap: 1.5rem !important;
}

.tw-gap-8 {
    gap: 2rem !important;
}

.tw-gap-x-4 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
}

.tw-gap-y-3 {
    row-gap: 0.75rem !important;
}

.tw-self-center {
    align-self: center !important;
}

.tw-overflow-hidden {
    overflow: hidden !important;
}

.tw-overflow-y-scroll {
    overflow-y: scroll !important;
}

.tw-rounded {
    border-radius: 0.25rem !important;
}

.tw-rounded-2xl {
    border-radius: 1rem !important;
}

.tw-rounded-3xl {
    border-radius: 1.5rem !important;
}

.tw-rounded-full {
    border-radius: 9999px !important;
}

.tw-rounded-lg {
    border-radius: 0.5rem !important;
}

.tw-border-1 {
    border-width: 1px !important;
}

.tw-border-2 {
    border-width: 2px !important;
}

.tw-border-\[0\] {
    border-width: 0 !important;
}

.tw-border-b-1 {
    border-bottom-width: 1px !important;
}

.tw-border-t-1 {
    border-top-width: 1px !important;
}

.tw-border-solid {
    border-style: solid !important;
}

.tw-border-\[\#0776AB\] {
    --tw-border-opacity: 1 !important;
    border-color: rgb(7 118 171 / var(--tw-border-opacity, 1)) !important;
}

.tw-border-alto {
    --tw-border-opacity: 1 !important;
    border-color: rgb(214 214 214 / var(--tw-border-opacity, 1)) !important;
}

.tw-border-b-alto {
    --tw-border-opacity: 1 !important;
    border-bottom-color: rgb(214 214 214 / var(--tw-border-opacity, 1)) !important;
}

.tw-bg-\[\#0776AB\] {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(7 118 171 / var(--tw-bg-opacity, 1)) !important;
}

.tw-bg-alto {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(214 214 214 / var(--tw-bg-opacity, 1)) !important;
}

.tw-bg-black\/30 {
    background-color: rgb(0 0 0 / 0.3) !important;
}

.tw-bg-blue {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(235 245 255 / var(--tw-bg-opacity, 1)) !important;
}

.tw-bg-green {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(65 169 40 / var(--tw-bg-opacity, 1)) !important;
}

.tw-bg-light-gray {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
}

.tw-bg-light-purple-over-white {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(225 221 234 / var(--tw-bg-opacity, 1)) !important;
}

.tw-bg-white {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.tw-bg-white-lilac {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(244 245 250 / var(--tw-bg-opacity, 1)) !important;
}

.tw-p-0 {
    padding: 0px !important;
}

.tw-p-3 {
    padding: 0.75rem !important;
}

.tw-p-4 {
    padding: 1rem !important;
}

.tw-p-6 {
    padding: 1.5rem !important;
}

.tw-px-0\.5 {
    padding-left: 0.125rem !important;
    padding-right: 0.125rem !important;
}

.tw-px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.tw-px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.tw-px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.tw-py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.tw-py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.tw-py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.tw-py-6 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.tw-pb-2 {
    padding-bottom: 0.5rem !important;
}

.tw-pb-6 {
    padding-bottom: 1.5rem !important;
}

.tw-pb-8 {
    padding-bottom: 2rem !important;
}

.tw-pl-12 {
    padding-left: 3rem !important;
}

.tw-pt-0 {
    padding-top: 0px !important;
}

.tw-pt-12 {
    padding-top: 3rem !important;
}

.tw-text-center {
    text-align: center !important;
}

.tw-text-right {
    text-align: right !important;
}

.tw-text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}

.tw-text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
}

.tw-text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

.tw-text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

.tw-text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.tw-text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
    flex-wrap: wrap;
}

.tw-text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}

.tw-font-bold {
    font-weight: 700 !important;
}

.tw-font-medium {
    font-weight: 500 !important;
}

.tw-font-normal {
    font-weight: 400 !important;
}

.tw-font-semibold {
    font-weight: 600 !important;
}

.tw-uppercase {
    text-transform: uppercase !important;
}

.tw-italic {
    font-style: italic !important;
}

.tw-leading-4 {
    line-height: 1rem !important;
}

.tw-leading-tight {
    line-height: 1.25 !important;
}

.tw-text-black {
    --tw-text-opacity: 1 !important;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
}

.tw-text-fun-green {
    --tw-text-opacity: 1 !important;
    color: rgb(0 125 28 / var(--tw-text-opacity, 1)) !important;
}

.tw-text-purple-1 {
    --tw-text-opacity: 1 !important;
    color: rgb(86 61 130 / var(--tw-text-opacity, 1)) !important;
}

.tw-text-white {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.tw-text-white\/70 {
    color: rgb(255 255 255 / 0.7) !important;
}

.tw-underline {
    text-decoration-line: underline !important;
}

.tw-no-underline {
    text-decoration-line: none !important;
}

.tw-placeholder-white::-moz-placeholder {
    --tw-placeholder-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-placeholder-opacity, 1)) !important;
}

.tw-placeholder-white::placeholder {
    --tw-placeholder-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-placeholder-opacity, 1)) !important;
}

.tw-shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05) !important;
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.tw-drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)) !important;
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}

.tw-backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px) !important;
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
}

/* Reset */

/* from https://www.joshwcomeau.com/css/custom-css-reset/ */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html, body {
    height: 100%;
}

body {
    line-height: 1.6;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

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

#root, #__next {
    isolation: isolate;
}

button {
    border: none;
}

/* Defaults */

html {
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
}

body {
    font-family: 'Gotham', sans-serif;
    background: #fff;
    color: var(--mid-gray);
}

a {
    color: var(--purple);
}

hr {
    border: none;
    border-top: 1px solid #E6E8EC;
    margin: 3rem 0;
}

address {
    font-style: normal;
    margin: 0;
}

/* Colors */

:root {
    --green: #41A928;
    /* Brand green */
    --green3: #8ED07F;
    --green4: #B4DFAA;
    --dark-green: #33841F;
    /* Accessible contrast with white text under 20px + bold */
    --purple: #573D82;
    --bright-purple: #7c51c2;
    --light-purple: #D5CEE0;
    --dark-gray: #1D263A;
    --mid-gray: #52647C;
    --light-gray: #F9FAFB;
    --rounded: 4px;
}

/* Utility classes for quick text color application */

.text-green {
    color: var(--green);
}

.text-purple {
    color: var(--purple);
}

.text-mid-gray {
    color: var(--mid-gray);
}

.text-dark-gray {
    color: var(--dark-gray);
}

.text-white {
    color: #fff;
}

/* Utility classes for quick background color application for section blocks */

.bg-white {
    background: #fff;
}

.bg-green {
    background: var(--green);
}

.bg-dark-green {
    background: var(--dark-green);
}

.bg-gray {
    background: #F4F5F9;
}

/* Universal Hacks */

.clear::after {
    content: '';
    clear: both;
    display: table;
}

.hide {
    display: none;
}

/* For inserting a fake line break that stops breaking on smaller screens where there is less control. Insert an empty <span class="fake-break"></span>. Use in headers where there are specific line breaks in the design or widows. */

.fake-break {
    display: block;
}

/* Hides this span on mobile so it doens't break the line. */

@media only screen and (max-width: 1199px) {
    .fake-break {
        display: none;
    }
}

/* Wrappers, Alignment and Padding */

/* This is the base wrapper class, usually paired with a more specific setting. */

.wrapper {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media only screen and (min-width: 1200px) {
    .wrapper.wrapper--outer,
    .wrapper.wrapper--main {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .wrapper.wrapper--outer {
        max-width: 1440px;
    }
}

@media only screen and (min-width: 1400px) {
    .wrapper.wrapper--main {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Main wrapper used in most of the site content. */

.wrapper.wrapper--main {
    max-width: 1200px;
}

/* Used less often, but for content insets like blog alignment. */

.wrapper.wrapper--1000 {
    max-width: 1000px;
}

/* Also used in blog alignment. */

.wrapper.wrapper--800 {
    max-width: 800px;
}

/* This is the main flexbox grid wrapper. Use this to apply flex styles along with various helper classes below. */

.flex-wrapper {
    display: flex;
    width: 100%;
}

/* Centers the flex content vertically. Needs flex-wrapper base class. */

.flex-wrapper--centered {
    align-items: center;
}

/* Centers the flex content horizontally. Needs flex-wrapper base class. */

.flex-wrapper--centered-H {
    justify-content: center;
}

/* Leaves the space open between left and right flex grid elements that hug the edges. Needs flex-wrapper base class. */

.flex-wrapper--space-between {
    justify-content: space-between;
}

/* Various pre-built widths + padding for common flex grid layouts. */

.flex-wrapper .flex-70 {
    flex: 0 0 67.5%;
    width: 67.5%;
    margin-right: 2.5%;
}

.flex-wrapper .flex-60 {
    flex: 0 0 57.5%;
    width: 57.5%;
    margin-right: 2.5%;
}

.flex-wrapper .flex-50 {
    flex: 0 0 47.5%;
    width: 47.5%;
    margin-right: 2.5%;
}

.flex-wrapper .flex-40 {
    flex: 0 0 37.5%;
    width: 37.5%;
    margin-right: 2.5%;
}

.flex-wrapper .flex-30 {
    flex: 0 0 27.5%;
    width: 27.5%;
    margin-right: 2.5%;
}

/* Last one on the right has no right padding to line up to far edge. */

.flex-wrapper > div:last-child {
    margin-right: 0;
    margin-left: 2.5%;
}

/* All the other flex containers above are for 1+1 layouts. This is for 1+1+1. */

.thirds {
    display: flex;
}

    .thirds div {
        width: 33.3333%;
        padding: 0 3rem;
        text-align: center;
    }

        .thirds div:first-child {
            padding: 0 3rem 0 0;
        }

        .thirds div:last-child {
            padding: 0 0 0 3rem;
        }

/* Generic padding classes for quick layouts. */

/* Vertical padding top and bottom */

.V-padding-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.V-padding-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.V-padding-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.V-padding-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.V-padding-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.V-padding-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.V-padding-7 {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

/* Horizontal padding left and right */

.H-padding-1 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.H-padding-2 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.H-padding-3 {
    padding-left: 3rem;
    padding-right: 3rem;
}

.H-padding-4 {
    padding-left: 4rem;
    padding-right: 4rem;
}

.H-padding-5 {
    padding-left: 5rem;
    padding-right: 5rem;
}

/* Left padding only */

.L-padding-1 {
    padding-left: 1rem;
}

.L-padding-2 {
    padding-left: 2rem;
}

.L-padding-3 {
    padding-left: 3rem;
}

.L-padding-4 {
    padding-left: 4rem;
}

.L-padding-5 {
    padding-left: 5rem;
}

/* Right padding only */

.R-padding-1 {
    padding-right: 1rem;
}

.R-padding-2 {
    padding-right: 2rem;
}

.R-padding-3 {
    padding-right: 3rem;
}

.R-padding-4 {
    padding-right: 4rem;
}

.R-padding-5 {
    padding-right: 5rem;
}

/* Top padding only */

.T-padding-1 {
    padding-top: 1rem;
}

.T-padding-2 {
    padding-top: 2rem;
}

.T-padding-3 {
    padding-top: 3rem;
}

.T-padding-4 {
    padding-top: 4rem;
}

.T-padding-5 {
    padding-top: 5rem;
}

.B-padding-1 {
    padding-bottom: 1rem;
}

.B-padding-2 {
    padding-bottom: 2rem;
}

.B-padding-3 {
    padding-bottom: 3rem;
}

.B-padding-4 {
    padding-bottom: 4rem;
}

.B-padding-5 {
    padding-bottom: 5rem;
}

/* Used on most section element blocks to divide main page blocks. Cut in half on mobile. */

.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.align-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

/* Usually used in the sidebar. */

.img-margin-bottom {
    margin-bottom: 2rem;
}

.img-full {
    width: 100%;
}

.img-float-right {
    float: right;
    margin: 0 0 1rem 3rem;
    max-width: 40%;
}

.rounded {
    border-radius: 10px;
}

/* Used under headings on the long text heavy pages for creating sections. */

.underline {
    border-bottom: 1px solid #D8D8D8;
    padding-bottom: 0.25em;
}

/* Typography */

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dark-gray);
}

h2 {
    font-size: 5rem;
}

h3 {
    font-size: 3rem;
}

h4 {
    font-size: 2rem;
}

h5 {
    font-size: 1.325rem;
}

h6 {
    font-size: 1.1rem;
}

.heading-icon-inline {
    display: flex;
    align-items: center;
}

    .heading-icon-inline img {
        margin-right: 1rem;
    }

p {
    margin-top: 1em;
    margin-bottom: 1em;
}

.no-margin {
    margin-top: 0;
    margin-bottom: 0;
}

/* Buttons */

button {
    border: none;
    -webkit-appearance: none;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1rem;
    background: var(--purple);
    color: #fff;
    border-radius: 3px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: all .1s linear;
    cursor: pointer;
    text-align: center;
}

a.btn {
    text-decoration: none !important;
}

.btn:hover {
    background-color: #7254AE;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
}

.btn--gray {
    background-color: #FAFAFA;
    color: var(--purple);
    border: 1px solid #C6C6C6;
}

    .btn--gray:hover {
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

.btn--mini {
    font-size: 0.625rem;
    border-radius: 100px;
    padding: 0.25rem 0.5rem;
}

.btn--small {
    font-size: 0.875rem;
}

.btn--medium {
    padding: 1rem 1.25rem;
    font-size: 1rem;
}

.btn--large {
    padding: 1rem 2.5rem;
    font-size: 1.5rem;
}

.btn--white {
    background-color: #fff;
    color: #000;
    border: none;
}

    .btn--white:hover {
        background-color: #fff;
        color: var(--purple);
        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
    }

.btn--purple {
    background-color: var(--purple);
    color: #fff;
    border: none;
}

    .btn--purple:hover {
        background-color: #7254AE;
        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
    }

.btn--purple-transparent {
    background-color: rgba(87, 61, 130, 0.75);
}

    .btn--purple-transparent:hover {
        background-color: var(--purple);
    }

.btn--light-purple {
    background-color: var(--light-purple);
    color: var(--purple);
}

    .btn--light-purple:hover {
        background-color: #e4e0eb;
        box-shadow: 0 0 0 5px rgba(204, 182, 241, 0.15);
    }

.btn--outline {
    background-color: transparent;
    border: 1px solid #fff;
}

    .btn--outline:hover {
        background-color: transparent;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
    }

.btn--purple.btn--outline {
    background-color: transparent;
    color: var(--purple);
    border: 1px solid var(--purple);
}

    .btn--purple.btn--outline:hover {
        background-color: transparent;
        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
    }

.btn--icon {
    display: flex;
}

    .btn--icon img {
        display: inline;
        margin: 0 8px 0 0;
    }

.btn--icon-only {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

    .btn--icon-only img {
        display: inline;
        position: relative;
        top: 7px;
        width: 24px;
    }

.btn--nowrap {
    white-space: nowrap;
}

/* Navigation */

/* Top main navigation */

#nav-main {
    background: #fff;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

    #nav-main .logo {
        display: flex;
        align-items: center;
        width: 400px;
    }

    #nav-main .nav-main-links {
        display: flex;
        align-items: center;
    }

        #nav-main .nav-main-links .btn {
            align-self: center;
        }

    #nav-main .btn--icon-pin {
        margin-left: 1rem;
    }

    #nav-main ul {
        list-style: none;
        margin: 0 2rem 0 0;
        padding: 0;
    }

        #nav-main ul li {
            display: inline;
        }

            #nav-main ul li a {
                display: inline-block;
                font-size: 0.875rem;
                font-weight: 500;
                color: #1D263A;
                text-decoration: none;
                padding: 1rem 1.5rem;
                border-radius: 6px;
            }

                #nav-main ul li a:hover {
                    background: rgba(79, 65, 101, 0.05);
                    color: var(--purple);
                }

    #nav-main .sign-in-options {
        display: none;
        position: absolute;
        z-index: 5;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15%);
        border-radius: 1rem;
        border: 8px solid #aaa;
    }

    #nav-main .sign-in-options-wrapper:hover .sign-in-options {
        display: block;
    }

    #nav-main .sign-in-options ul {
        margin: 0;
        border-radius: 10px;
        overflow: hidden;
    }

        #nav-main .sign-in-options ul::before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #aaaaaa;
            position: absolute;
            top: -18px;
            left: 26px;
        }

    #nav-main .sign-in-options li a {
        display: block;
        border-bottom: 1px solid #ebebeb;
        border-radius: 0;
    }

.btn--icon-pin {
    background-image: url('/assets/img/icon-pin-purple.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
}

/* Mobile hamburger icon created using styled spans */

.nav-main-mobile {
    display: none;
    flex-direction: column;
    justify-content: space-evenly;
    width: 60px;
    height: 60px;
    padding: 1rem;
}

    .nav-main-mobile span {
        background: var(--purple);
        height: 3px;
        border-radius: 3px;
    }

/* Purple secondary navigation */

#nav-secondary {
    position: relative;
    z-index: 3;
    padding: 1rem 0;
    background: rgba(213, 206, 224, 0.61);
}

    #nav-secondary .wrapper {
        display: flex;
        align-items: center;
    }

    #nav-secondary ul {
        display: flex;
        justify-content: center;
        flex-grow: 1;
    }

        #nav-secondary ul li {
            display: block;
            position: relative;
        }

            #nav-secondary ul li a {
                display: block;
                padding: 1rem;
                margin: 0 1rem;
                font-weight: 500;
                line-height: 1.3;
                color: var(--purple);
                text-decoration: none;
                text-align: center;
            }

            #nav-secondary ul li.active > a {
                box-shadow: 0 3px 0 0 var(--purple);
            }

                #nav-secondary ul li.active > a:hover {
                    box-shadow: none;
                }

            /* Dropdowns */

            #nav-secondary ul li ul {
                display: none;
                flex-direction: column;
                position: absolute;
                z-index: 3;
                min-width: 280px;
                padding: 0 1rem;
                background: #fff;
                border-radius: 1rem;
                border: 8px solid #9A8BB4;
            }

                #nav-secondary ul li ul::before {
                    content: '';
                    display: block;
                    width: 0;
                    height: 0;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid #9a8bb4;
                    position: absolute;
                    top: -18px;
                    left: 26px;
                }

                #nav-secondary ul li:hover ul,
                #nav-secondary ul li ul:hover {
                    display: flex;
                }

                #nav-secondary ul li ul li:hover a {
                    box-shadow: none;
                    padding-left: 2px;
                    color: var(--bright-purple);
                }

                #nav-secondary ul li ul li a {
                    margin: 0;
                    padding: 1rem 0;
                    border-bottom: 1px solid #D5CEE0;
                    text-align: left;
                }

                #nav-secondary ul li ul li:last-child a {
                    border: none;
                }

                #nav-secondary ul li ul li.active > a {
                    box-shadow: none;
                    color: var(--bright-purple);
                    font-weight: 600;
                }

            /* Different color borders for different categories */

            #nav-secondary ul li.nav-category--members ul {
                border-color: #9A8BB4;
            }

                #nav-secondary ul li.nav-category--members ul::before {
                    border-bottom-color: #9A8BB4;
                }

            #nav-secondary ul li.nav-category--dentists ul {
                border-color: #9A8BB4;
            }

                #nav-secondary ul li.nav-category--dentists ul::before {
                    border-bottom-color: #9A8BB4;
                }

            #nav-secondary ul li.nav-category--brokers ul {
                border-color: #9A8BB4;
            }

                #nav-secondary ul li.nav-category--brokers ul::before {
                    border-bottom-color: #9A8BB4;
                }

            #nav-secondary ul li.nav-category--employers ul {
                border-color: #9A8BB4;
            }

                #nav-secondary ul li.nav-category--employers ul::before {
                    border-bottom-color: #9A8BB4;
                }

/* Hide mobile nav on desktop. Styles are in mobile media query below. */

#mobile-nav {
    display: none;
}

/* Alert */

.alert {
    display: flex;
    justify-content: center;
    background: #FFF492;
    padding: 1rem;
    text-align: center;
}

.alert-text {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
}

.alert-link {
    margin: 0 0 0 1rem;
    color: var(--purple);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Hero */

.hero {
    position: relative;
    background: #F4F5F9;
    background-position: center center;
    background-size: cover;
}

    /* Extra class added only on homepage because of different text styling and image position. */

    .hero.hero-home {
        /*background-image: url('/assets/img/hero-woman.jpg');*/
        background-repeat: no-repeat;
        background-size: cover;
    }

    .hero .hero-text {
        position: relative;
        z-index: 2;
        max-width: calc(50% + 5rem);
        padding: 5rem 5rem 2.5rem;
    }

    .hero.hero-home .hero-text {
        padding-bottom: 12rem;
    }

    .hero.hero-image {
        background-repeat: no-repeat;
    }

        .hero.hero-image .hero-text {
            padding: 5rem 0;
        }

    .hero .hero-text h2 {
        margin: 0 0 2rem;
        font-size: 3.375rem;
        font-weight: 600;
        line-height: 1.2;
        color: #000;
    }

    .hero.hero-home .hero-text h2 {
        font-size: 5rem;
        font-weight: 400;
    }

    .hero .hero-text p {
        margin: 0 0 2.5rem;
        font-size: 1.3125rem;
        line-height: 1.3;
        font-weight: 500;
        color: #262626;
        opacity: 0.8;
    }

    /* This only appears on the homepage */

    .hero .hero-text .btn--underline {
        position: relative;
        font-size: 1.3125rem;
        font-weight: 500;
        text-decoration: none;
        border-bottom: 2px solid var(--purple);
        padding: 0.5rem 0 3px 0;
    }

        .hero .hero-text .btn--underline:after {
            display: block;
            content: '';
            position: absolute;
            right: -36px;
            top: 12px;
            width: 20px;
            height: 20px;
            background: url('/assets/img/icon-arrow-right-purple.svg') center center no-repeat;
            background-size: contain;
            transition: all .1s linear;
        }

        .hero .hero-text .btn--underline:hover:after {
            transform: translateX(4px);
        }

.hero-text .btn {
    margin-top: 1rem;
    margin-right: 1rem;
}

/* The green bar menu inside the hero block */

.hero-green-bar {
    position: relative;
    z-index: 2;
    padding: 2rem 0;
    background: rgba(65, 169, 40, 0.75);
}

    .hero-green-bar.hero-green-bar--solid {
        background: rgba(65, 169, 40, 1);
    }

    .hero-green-bar h5 {
        margin: 0;
    }

    .hero-green-bar ul {
        list-style: none;
        padding: 0;
    }

        .hero-green-bar ul li {
            display: inline;
        }

            .hero-green-bar ul li a {
                padding: 0.75rem 1rem;
                border-radius: 6px;
                font-weight: 600;
                text-decoration: none;
                color: #000;
                transition: all .1s linear;
            }

                .hero-green-bar ul li.active a,
                .hero-green-bar ul li a:hover {
                    background: rgba(255, 255, 255, 0.3);
                }

                .hero-green-bar ul li a:focus {
                    outline: none;
                    box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
                }

    .hero-green-bar .btn {
        align-self: center;
        margin: 0 0.5rem;
    }

/* Homepage I am looking for... dropdown */

.hero-looking-for-dropdown {
    position: relative;
    background: var(--purple);
    padding: 2rem 4rem 2rem 2rem;
    border-radius: 16px;
    transition: all .1s linear;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: context-menu;
}

    .hero-looking-for-dropdown:hover {
        background: #7254AE;
        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
    }

.hero-looking-for-dropdown_label {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}

.hero-looking-for-dropdown_line {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 1rem;
    margin: 0 1rem;
    border-bottom: 2px solid #BCB1C0;
    border-bottom-color: #fff;
}

    .hero-looking-for-dropdown_line:after {
        display: block;
        content: '';
        position: absolute;
        right: -40px;
        top: -2px;
        width: 20px;
        height: 20px;
        background: url('/assets/img/icon-arrow-down-light-purple.svg') center center no-repeat;
        background-size: contain;
        transition: all .1s linear;
    }

.hero-looking-for-dropdown:hover .hero-looking-for-dropdown_line:after {
    transform: translateY(-2px);
}

.hero-looking-for-dropdown_select {
    display: none;
    position: absolute;
    top: 8px;
    left: 260px;
    padding: 1rem 0;
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 5px 30px rgba(87, 61, 130, 15%);
    overflow: hidden;
}

    .hero-looking-for-dropdown_select.open {
        display: block;
    }

    .hero-looking-for-dropdown_select ul {
        list-style: none;
        padding: 0;
    }

        .hero-looking-for-dropdown_select ul li a {
            display: block;
            position: relative;
            padding: 0.5rem 1.75rem;
            font-size: 1.325rem;
            line-height: 1.3;
            font-weight: 600;
            text-decoration: none;
            color: var(--purple);
            white-space: nowrap;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            transition: all .1s linear;
        }

            .hero-looking-for-dropdown_select ul li a:hover {
                background: rgba(79, 65, 101, 0.1);
            }

.hero-looking-for-dropdown-select {
    position: relative;
}

    /* Tried this as a native element too if you want to swap it out */

    .hero-looking-for-dropdown-select select {
        display: none;
        position: relative;
        background: var(--purple);
        padding: 2rem 4rem 2rem 2rem;
        border-radius: 16px;
        font-size: 1.5rem;
        font-weight: 600;
        color: #fff;
        transition: all .1s linear;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        cursor: context-menu;
    }

        .hero-looking-for-dropdown-select select:hover {
            background: #7254AE;
            box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
        }

    .hero-looking-for-dropdown-select:before {
        display: block;
        content: '';
        position: absolute;
        right: 90px;
        bottom: 35px;
        width: 42%;
        height: 2px;
        background: #BCB1C0;
        z-index: 2;
    }

    .hero-looking-for-dropdown-select:after {
        display: block;
        content: '';
        position: absolute;
        right: 40px;
        top: 40%;
        width: 20px;
        height: 20px;
        background: url('/assets/img/icon-arrow-down-light-purple.svg') center center no-repeat;
        background-size: contain;
        transition: all .1s linear;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

/* Hero Images */

.hero-white-gradient-left:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 65%);
}

/* You might want to handle these in a CMS instead of hard-coded per-page CSS styles. But for now you can just add to these classes. */

.hero.hero-image_plan-select {
    background-image: url('/assets/img/hero-women.jpg');
    background-position-y: bottom;
}

.hero.hero-image_plan-ppo {
    background-image: url('/assets/img/hero-women-sun.jpg');
    background-position: center center;
}

.hero.hero-image_better {
    background-image: url('/assets/img/hero-woman-colorful-dress.jpg');
}

.hero.hero-image_indy {
    background-image: url('/assets/img/hero-woman-with-kid.jpg');
}

.hero.hero-image_groups-and-small-business {
    background-image: url('/assets/img/hero-groups-small-business.jpg')
}

.hero.hero-image_large-business {
    background-image: url('/assets/img/plans-large-business-hero.jpg');
}

.hero-image_plan-fed {
    background-image: url('/assets/img/hero-kid-glasses.jpg');
}

.hero-image_members {
    background-image: url('/assets/img/hero-man-smile-fall.jpg');
}

.hero-image_dentists {
    background-image: url('/assets/img/hero-dental-equipment.jpg');
}

.hero-image_brokers {
    background-image: url('/assets/img/hero-man-on-laptop.jpg');
}

    .hero-image_brokers::after {
        width: 70%;
    }

.hero-image_about {
    background-image: url('/assets/img/hero-dad-with-kids.jpg');
}

.hero-image_careers {
    background-image: url('/assets/img/hero-woman-office.jpg');
}

.hero-image_leadership {
    background-image: url('/assets/img/hero-girl-smile-downtown.jpg');
}

.hero-image_community {
    background-image: url('/assets/img/hero-football-mouthguard.jpg');
}

.hero-image_blog {
    background-image: url('/assets/img/hero-couple-smiling.jpg');
}

.hero-image_in-the-news {
    background-image: url('/assets/img/hero-sunflowers.jpg');
}

.hero-image_for-employers {
    background-image: url('/assets/img/hero-woman-with-marker.jpg');
}

.hero-image_how {
    background-color: #E5F6F9;
    background-image: url('/assets/img/hero-how.png');
    background-size: contain;
}

/* Custom Content Blocks */

.schedule {
    display: grid;
    grid-gap: 0.5em;
    grid-column-gap: 2em;
    grid-template-columns: max-content max-content;
    margin-bottom: 1em;
}

.reasons {
    display: flex;
    background: var(--light-gray);
    padding: 3rem 0;
}

.green-box {
    background: var(--dark-green);
    border-radius: 10px;
    color: #fff;
    padding: 3.75rem;
}

    .green-box h4 {
        color: #fff;
    }

.reasons .flex-wrapper {
    align-items: center;
}

.reasons-icons {
    display: flex;
    justify-content: center;
}

.reasons-icons-column {
    display: flex;
    flex-direction: column;
}

    .reasons-icons-column:first-child {
        margin-right: 2rem;
    }

.reason-icon {
    display: flex;
    align-items: center;
    padding: 1rem 1rem 1rem 0;
}

    .reason-icon img {
        width: 90px;
        margin: 0 1rem 0 0;
    }

    .reason-icon p {
        flex-grow: 1;
        color: #0F2F64;
        font-weight: 600;
        line-height: 1.3;
    }

/* Find a Dentist */

.find-dentist {
    position: relative;
    height: 400px;
    background: var(--light-gray) url('/assets/img/dentist-white-coat.jpg') center center no-repeat;
    background-size: cover;
    border-radius: 1rem;
}

.find-dentist-button {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: calc(100% - 2rem);
    bottom: 1rem;
    left: 1rem;
    background: var(--purple);
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
    overflow: hidden;
    transition: all .1s linear;
}

    .find-dentist-button:hover {
        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2);
    }

.find-dentist-button-text {
    padding: 1.5rem;
}

.find-dentist-button-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.find-dentist-button-description {
    font-size: 0.875rem;
    color: #c3b8c8;
}

.find-dentist-button-arrow {
    display: flex;
    width: 6rem;
    background: #705A95 url('/assets/img/icon-arrow-right-white.svg') center center no-repeat;
    background-size: 60%;
    text-align: center;
    transition: all .1s linear;
}

.find-dentist-button:hover .find-dentist-button-arrow {
    background-color: #8165b0;
}

/* Green card overlay */

.green-card-half-overlay {
    display: flex;
    background: var(--dark-green) url('/assets/img/man-with-water-bottle.jpg') center center no-repeat;
    background-size: cover;
    border-radius: 10px;
    min-height: 400px;
    overflow: hidden;
}

.green-card-half-overlay--text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    padding: 2rem;
    background: var(--dark-green);
    color: #fff;
}

    .green-card-half-overlay--text h4 {
        font-size: 1.5rem;
        color: #fff;
    }

/* News Block */

.news-block {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0px 55px 114px rgba(0, 0, 0, 0.1);
}

.news-block-column {
    width: 33.33333%;
    min-width: 33.33333%;
    max-width: 33.33333%;
    padding: 1.5rem;
}

.news-block-item {
    display: block;
    text-decoration: none;
}

.news-block-section-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--green);
    margin: 0 0 1.5rem;
}

.news-block-image {
    border-radius: 10px;
    transition: all .1s linear;
}

a.news-block-item:hover .news-block-image {
    transform: scale(1.025);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.news-block-item-title {
    display: block;
    margin: 2rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1D263A;
    text-decoration: none;
}

a.news-block-item:hover .news-block-item-title {
    color: var(--purple);
}

.news-block-item-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--purple);
    text-decoration: none;
}

    .news-block-item-link:hover {
        text-decoration: underline;
    }

/* Blue Footer with and without overlapping card */

.blue-footer {
    background: #EBF5FF;
}

    .blue-footer.blue-footer-card {
        margin-top: 15rem;
    }

    .blue-footer.blue-footer-card--short {
        margin-top: 5rem;
    }

.blue-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
}

.blue-footer-content--full {
    padding: 0;
}

.card--white {
    padding: 3rem;
    background: #fff;
    border-radius: 10px;
}

/* Cards with split image and text  */

.card-half {
    display: flex;
    background: var(--mid-gray);
    margin: 5rem 0;
    overflow: hidden;
}

.card-half--rounded {
    border-radius: 20px;
}

.card-half--green {
    background: var(--green);
    color: #fff;
}

.card-half--dark-green {
    background: var(--dark-green);
    color: #fff;
}

    .card-half--green h2,
    .card-half--green h3,
    .card-half--green h4,
    .card-half--dark-green h2,
    .card-half--dark-green h3,
    .card-half--dark-green h4 {
        color: #fff;
    }

.card-half--gray {
    margin: 2rem auto;
    background: #D9D9D9;
    color: #000;
}

.card-half--offset {
    margin: -15rem 0 5rem;
}

.card-half_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 4rem;
}

    .card-half_text img {
        display: block;
        max-width: 360px;
    }

        .card-half_text img.green-card-img-unrestricted {
            margin: 0 auto 2rem;
            max-width: 100%;
        }

    .card-half_text h3 {
        font-weight: 300;
    }

    .card-half_text .btn {
        align-self: flex-start;
    }

    .card-half_text.align-center .btn {
        align-self: center;
    }

/* These have custom image backgrounds for easier scaling. Might want to manage this via CMS with dynamic output eventually too, vs. in classes. */

.card-half_image {
    width: 50%;
    background: url('/assets/img/testing.jpg') center center no-repeat;
    background-size: cover;
}

.card-half_image-testing {
    background-image: url('/assets/img/testing.jpg');
}

.card-half_image-kid {
    background-image: url('/assets/img/kid-smile.jpg');
}

.card-half_image-blog {
    background-image: url('/assets/img/two-men-at-computer.jpg');
}

.card-half_image-leadership {
    background-image: url('/assets/img/woman-and-man-at-table-laughing.jpg');
}

.card-half_image-classroom {
    background-image: url('/assets/img/kids-classroom.jpg');
}

.card-half_image-different-coverage {
    background-image: url('/assets/img/man-jacket.jpg');
}

.card-half_image-spotlight {
    background-image: url('/assets/img/dentist-chair.jpg');
}

.card-half_image-how {
    background: none;
    background-color: white;
}

.card-half_image-careers {
    background-image: url('/assets/img/happy-couple.jpg');
}

.card-half_image-family {
    background-image: url('/assets/img/family-laughing.jpg');
}

/* Shop Plans */

.shop-plans-intro {
    padding: 5rem 0;
    text-align: center;
}

.shop-plans-intro-header h2 {
    margin: 0 0 1rem;
    font-size: 4.25rem;
    font-weight: 400;
    color: var(--green);
}

.shop-plans-intro-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

.shop-plans-intro-cards {
    display: flex;
    justify-content: space-between;
    margin: 3rem auto;
}

.shop-plans-intro-card {
    display: block;
    width: 30%;
    padding: 0 0 1rem;
    border: 1px solid #E6E8EC;
    border-radius: 1.5rem;
    color: #23262F;
    text-decoration: none;
    overflow: hidden;
    transition: all .1s linear;
    cursor: pointer;
}

    .shop-plans-intro-card:hover {
        transform: scale(1.05);
        box-shadow: 0px 4px 8px 4px rgba(45, 176, 53, 0.17);
    }

.shop-plans-intro-card-header {
    margin: 0 auto;
}

.shop-plans-intro-card-icon {
    margin: -60px auto 1rem;
}

.shop-plans-intro-card-text {
    padding: 0 2rem;
}

.shop-plans-intro-card h4 {
    font-size: 1.5rem;
}

/* Questions Block */

.questions-block .flex-wrapper {
    align-items: center;
}

.have-questions h4 {
    margin: 1rem 0 2rem;
    text-transform: uppercase;
}

    .have-questions h4 img {
        display: inline;
        position: relative;
        top: 12px;
    }

.have-questions h5 {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 400;
}

.questions-block-image-box {
    display: flex;
    justify-content: flex-end;
    position: relative;
    align-content: center;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.questions-block-image-box-image {
    width: 66%;
    border-radius: 15px;
}

.questions-block-green-box {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 50%;
    padding: 3rem;
    margin-right: -25%;
    background: var(--dark-green);
    color: #fff;
    box-shadow: 0px 54px 100px -10px rgba(65, 169, 40, 0.3);
    border-radius: 24px;
}

.questions-block-inner-box {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 50%;
    padding: 3rem;
    margin-right: -30%;
    /*background: var(--dark-green);*/
    color: #fff;
    /*box-shadow: 0px 54px 100px -10px rgba(65, 169, 40, 0.3);*/
    /*border-radius: 24px;*/
}

.questions-block-green-box_text-big {
    font-size: 3.375rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
}

.questions-block-inner-box .btn {
    align-self: flex-start;
}

/* Slick Carousel */

/* https://kenwheeler.github.io/slick/ */

.ok-carousel-slide-flex-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.ok-carousel-icon {
    background: var(--green);
    margin: 0 3rem 0 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0px 5px 15px rgba(65, 74, 85, 0.22);
}

.ok-carousel-title {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    line-height: 1;
    color: var(--green);
}

.ok-carousel-js-wrapper .slick-dots {
    list-style: none;
    text-align: center;
}

    .ok-carousel-js-wrapper .slick-dots li {
        display: inline;
    }

        .ok-carousel-js-wrapper .slick-dots li button {
            width: 16px;
            height: 16px;
            background: var(--purple);
            color: transparent;
            margin: 0 5px;
            border-radius: 20px;
        }

        .ok-carousel-js-wrapper .slick-dots li.slick-active button {
            background: var(--green);
        }

/* Big Quote */

.big-quote-block .wrapper {
    position: relative;
    left: 50px;
}

.big-quote {
    position: relative;
    margin: 0 auto 2rem;
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--dark-gray);
}

    .big-quote:before,
    .big-quote:after {
        display: block;
        content: '';
        position: absolute;
        width: 80px;
        height: 60px;
        background: url('/assets/img/quote-open.svg') 0 0 no-repeat;
        background-size: contain;
    }

    .big-quote:before {
        position: absolute;
        top: 0;
        left: -100px;
    }

    .big-quote:after {
        background-image: url('/assets/img/quote-end.svg');
        bottom: -20px;
        right: 0;
    }

.big-quote-cite {
    font-size: 1rem;
    font-weight: 600;
}

.big-quote-cite2 {
    font-size: 0.875rem;
}

/* Sidebar Content Styles */

.sidebar a {
    font-weight: 500;
    text-decoration: none;
}

    .sidebar a:hover {
        text-decoration: underline;
    }

/* Icon cards */

/* These can be all a single link by putting in an <a> or can be a <div>. When it's an <a> it'll get the zoom hover effect. */

.icon-cards {
    display: flex;
    justify-content: space-between;
}

.icon-card {
    width: 33%;
    margin: 0 1rem;
    background: #fff;
    padding: 2rem;
    border-radius: 20px;
    transition: transform .1s linear;
    text-decoration: none;
    color: #23262F;
}

    .icon-card:first-child {
        margin-left: 0;
    }

    .icon-card:last-child {
        margin-right: 0;
    }

    .icon-card img {
        margin-bottom: 1rem;
    }

    .icon-card h4 {
        font-size: 1.5rem;
    }

    .icon-card p {
        color: #686d7d;
    }

    .icon-card .icon-card-link {
        color: var(--purple);
        font-weight: 600;
        text-decoration: none;
    }

/* Hover zoom effect added only when the whole card itself is a link. */

a.icon-card:hover,
.icon-cards--blue a.icon-card:hover {
    background: var(--green);
    box-shadow: 0px 32px 54px rgba(45, 176, 53, 0.22);
    transform: scale(1.05);
    color: #23262F;
}

    a.icon-card:hover h4 {
        color: #fff;
    }

    a.icon-card:hover p {
        color: #fff;
    }

    a.icon-card:hover img {
        mix-blend-mode: difference;
    }

    a.icon-card:hover .icon-card-link {
        color: #fff;
    }

.icon-cards--blue .icon-card {
    background: #DDF7FB;
}

.icon-cards--blue a.icon-card:hover img {
    mix-blend-mode: normal;
    filter: grayscale(1) brightness(0);
}

.icon-cards--green .icon-card {
    background: var(--green);
    color: #fff;
}

.icon-cards--dark-green .icon-card {
    background: var(--dark-green);
    color: #fff;
}

    .icon-cards--green .icon-card h4,
    .icon-cards--green .icon-card p,
    .icon-cards--green .icon-card .icon-card-link,
    .icon-cards--green .icon-card a,
    .icon-cards--dark-green .icon-card h4,
    .icon-cards--dark-green .icon-card p,
    .icon-cards--dark-green .icon-card .icon-card-link,
    .icon-cards--dark-green .icon-card a {
        color: #fff;
    }

    .icon-cards--green .icon-card:hover img,
    .icon-cards--dark-green .icon-card:hover img {
        mix-blend-mode: normal;
    }

/* Shop Individual Plans */

.shop-plans-intro {
    text-align: center;
}

    .shop-plans-intro h3 {
        margin: 0 0 1rem;
    }

    .shop-plans-intro p {
        color: var(--mid-gray);
    }

.shop-plans-cards-wrapper {
    padding-top: 5rem;
}

.shop-plans-cards {
    display: flex;
    padding: 2rem 0;
}

.shop-plans-card {
    width: 50%;
    margin: 0 1rem;
    background: var(--purple);
    border-radius: 20px;
    overflow: hidden;
    text-align: left;
    color: #fff;
    text-decoration: none;
}

.shop-plans-card_text {
    padding: 2rem;
}

.shop-plans-card h5 {
    font-size: 1.25rem;
    color: #fff;
}

.shop-plans-card p {
    margin: 1rem 0 2rem;
    color: #fff;
}

.shop-plans-card_text--arrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-plans-card_arrow {
    width: 40px;
    height: 40px;
    background: url('/assets/img/icon-arrow-circle-right-dark-purple.svg') center center no-repeat;
    transition: all .1s linear;
}

.shop-plans-card:hover .shop-plans-card_arrow {
    box-shadow: 0 0 0 4px #fff;
    border-radius: 100px;
}

/* Plan Detail Pages */

.plan-features-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.plan-features-box {
    width: calc(50% - 1rem);
    margin: 0 0 2rem 0;
    background: #F2F2F2;
    border-radius: 24px;
    padding: 2rem;
    text-decoration: none;
    color: #1D263A;
}

.plan-features-box--light_blue {
    background: #BFEAF1;
}

.plan-features-box--light_green {
    background: #CAEBCC;
}

.plan-features-box--light_red {
    background: #F7D5CA;
}

.plan-features-box--light_tan {
    background: #F4E8BB;
}

.plan-features-box--white {
    background: #FFFFFF;
}

a.plan-features-box--gray:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

.plan-features-box h5 {
    font-size: 1.5rem;
}

.plan-features-box p {
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* Plan Benefits Chart Cards */

.plan-breakdown-card-wrapper {
    margin: 0 0 3rem;
}

.plan-breakdown-card {
    width: 100%;
    background: #fff;
    box-shadow: 0 64px 64px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    overflow: hidden;
}

.plan-breakdown-card_header {
    padding: 1.5rem;
    background: var(--dark-green);
    color: #fff;
    text-align: center;
}

.plan-breakdown-card_header-title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
}

.plan-breakdown-card_header-subtitle {
    font-size: 1.25rem;
}

.plan-breakdown-card_content {
    padding: 2rem;
}

.plan-breakdown-card_label {
    font-weight: 600;
    text-transform: uppercase;
}

.plan-breakdown-card_label-group {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

    .plan-breakdown-card_label-group .plan-breakdown-card_label {
        font-size: 0.825rem;
    }

.plan-breakdown-card_content ul {
    list-style: none;
    margin: 1rem 0 2rem 0;
    padding: 0;
    border-top: 4px solid var(--green);
}

    .plan-breakdown-card_content ul li {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 0.5px solid var(--green);
        font-weight: 600;
    }

.plan-breakdown-card_content.plan-breakdown-no-borders ul {
    padding-top: 1rem;
}

    .plan-breakdown-card_content.plan-breakdown-no-borders ul li {
        display: block;
        border: none;
        text-align: center;
    }

.plan-breakdown-card_content .plan-breakdown-card_benefits ul li {
    padding: 1rem 0;
}

.plan-breakdown-card_content .plan-breakdown-card_benefits {
    margin: 1rem 0;
}

.plan-breakdown-card_description {
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 400;
}

.plan-breakdown-card-predisclaimer {
    padding: 1rem;
    font-weight: 500;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    color: #666666;
}

.plan-breakdown-card_expiration {
    font-size: 0.75rem;
    font-style: italic;
    text-align: center;
}

.plan-breakdown-disclaimer {
    font-style: italic;
    width: calc(100% - 4rem);
    padding: 0 1rem 0 3rem;
    margin: 3rem auto;
    color: #666666;
}

.plan-breakdown-card_features {
    display: none;
    padding-top: 2rem;
}

.plan-breakdown-card_content .plan-breakdown-card_features ul {
    list-style-type: disc;
    padding-top: 0.5rem;
}

.plan-breakdown-card_features ul li {
    display: list-item;
    list-style-position: inside;
    border-bottom: none;
    padding: 0.25rem 0;
}

.plan-breakdown-card_show-features {
    display: block;
    margin: 2rem auto 0;
    background: none;
    border: none;
    font-weight: 600;
    color: var(--purple);
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

    .plan-breakdown-card_show-features .features-hide {
        display: none;
    }

    .plan-breakdown-card_show-features:hover {
        color: var(--bright-purple);
    }

.plan-breakdown-card--purple .plan-breakdown-card_header {
    background: var(--purple);
}

.plan-breakdown-card--purple .plan-breakdown-card_content ul,
.plan-breakdown-card--purple .plan-breakdown-card_content ul li {
    border-color: var(--purple);
}

.plan-breakdown-card--dark-green .plan-breakdown-card_header {
    background: #255619;
}

.plan-breakdown-card--dark-green .plan-breakdown-card_content ul,
.plan-breakdown-card--dark-green .plan-breakdown-card_content ul li {
    border-color: #255619;
}

.plan-breakdown-card--blue .plan-breakdown-card_header {
    background: #007BBD;
}

.plan-breakdown-card--blue .plan-breakdown-card_content ul,
.plan-breakdown-card--blue .plan-breakdown-card_content ul li {
    border-color: #007BBD;
}

.plan-breakdown-card--red .plan-breakdown-card_header {
    background: #CD491D;
}

.plan-breakdown-card--red .plan-breakdown-card_content ul,
.plan-breakdown-card--red .plan-breakdown-card_content ul li {
    border-color: #CD491D;
}

/* Fact Squares */

.fact-squares {
    display: flex;
    justify-content: center;
}

.fact-square {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 200px;
    margin: 0 2rem 0 0;
    padding: 2rem;
    border-radius: 24px;
    background: var(--dark-green);
    box-shadow: 0 4px 0 #276c17;
    color: #fff;
}

.fact-square--gray {
    background: #666666;
    box-shadow: 0 4px 0 #333333;
}

.fact-square_big {
    margin: 0 0 1rem;
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
}

.stars-orange {
    color: #FF7139;
}

/* Tabs */

.tabs-nav {
    margin: 0 0 2rem;
    padding: 0;
    text-align: center;
    list-style: none;
}

.tab {
    display: inline-block;
}

    .tab a {
        border: 2px solid var(--purple);
        margin: 0 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--purple);
        border-radius: 2rem;
        text-decoration: none;
        cursor: pointer;
    }

    .tab.active a {
        background: var(--purple);
        color: #fff;
        border: 2px solid var(--purple);
    }

    .tab a:hover {
        background: var(--purple);
        color: #fff;
        border: 2px solid var(--purple);
    }

/* HOW Boost Banner */

.HOW-boost-banner {
    display: flex;
    margin: -12rem 0 5rem;
    background: #fff;
}

.HOW-boost-banner_image {
    display: flex;
    align-items: center;
    width: 70%;
    padding: 0 2rem;
}

.HOW-boost-banner_text {
    width: 30%;
    padding: 3rem;
    background: var(--dark-green);
    color: #fff;
}

    .HOW-boost-banner_text p {
        margin: 0 0 1rem;
        opacity: 1;
    }

.column-icon {
    background: url('/assets/img/icon-phone-gray.svg') 0 3px no-repeat;
    margin: 1rem 0;
    padding: 0 0 0 2.5rem;
}

    .column-icon.column-icon--phone {
        background-image: url('/assets/img/icon-phone-gray.svg');
    }

    .column-icon.column-icon--email {
        background-image: url('/assets/img/icon-mail-gray.svg');
    }

/* Health Tip */

.health-tip_tag {
    color: #184f0a;
    font-weight: 600;
    text-transform: uppercase;
}

    .health-tip_tag.text-white {
        color: #fff;
    }

.health-tip h3 {
    margin: 1rem 0;
}

.health-tip p {
    margin-bottom: 2rem;
}

.bg-green.health-tip h3,
.bg-green.health-tip p,
.bg-dark-green.health-tip h3,
.bg-dark-green.health-tip p {
    color: #fff;
}

/* Forms Page */

.form-group {
    margin-bottom: 4rem;
}

    .form-group h4 {
        padding: 0 0 0.5rem;
        font-size: 1.25rem;
        border-bottom: 1px solid #D8D8D8;
    }

    .form-group ul {
        list-style: none;
        padding: 0;
    }

        .form-group ul li {
            margin: 2rem 0;
        }

    .form-group a {
        display: inline-block;
        padding-left: 2rem;
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--purple);
        background: url('/assets/img/icon-external-arrow-purple.svg') center left no-repeat;
        background-size: 20px 20px;
    }

/* FAQs */

/* Featured Question */

.featured-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #E5F6F9;
    margin-top: 1rem;
    padding: 1.25rem;
    border-radius: 1rem;
}

    .featured-question p {
        font-size: 1.125rem;
        font-style: italic;
        margin: 0 0 0 1rem;
    }

    .featured-question .btn {
        white-space: nowrap;
    }

.faq-topic-links {
    margin-bottom: 5rem;
}

    .faq-topic-links ul {
        list-style: none;
        text-align: center;
        padding: 0;
    }

        .faq-topic-links ul li {
            display: inline;
            margin: 0 0.5rem;
        }

    .faq-topic-links li a {
        display: inline-block;
        background: var(--purple);
        color: #fff;
        margin: 0.5rem 0;
        padding: 0.5rem 1rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 1rem;
        text-decoration: none;
    }

        .faq-topic-links li a:hover {
            background: var(--bright-purple);
        }

.faq-topic-group {
    margin-bottom: 5rem;
}

.faq-question {
    position: relative;
    margin: 1rem 0;
    border: 2px solid #D5CEE0;
    border-radius: 10px;
}

.faq-question_arrow {
    content: '';
    display: block;
    position: absolute;
    right: 40px;
    top: 40px;
    width: 20px;
    height: 20px;
    background: url('/assets/img/icon-arrow-down-purple.svg') 0 0 no-repeat;
    background-size: contain;
    transition: all .1s linear;
    cursor: pointer;
}

    .faq-question_arrow:hover {
        opacity: .5;
    }

.faq-question.faq-question--open .faq-question_arrow {
    transform: rotate(180deg) translateY(8px);
}

.faq-question_question {
    max-width: calc(100% - 6rem);
    padding: 2rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--purple);
    cursor: pointer;
}

    .faq-question_question:hover {
        color: var(--dark-green);
    }

.faq-question_answer {
    display: none;
    padding: 0 2rem 2rem;
    color: var(--mid-gray);
}

.faq-question.faq-question--open {
    cursor: auto;
    border: 2px solid #CAEBCC;
    box-shadow: 24px 24px 48px rgba(0, 0, 0, 0.05);
}

    .faq-question.faq-question--open .faq-question_question {
        color: var(--dark-green);
    }

    .faq-question.faq-question--open .faq-question_answer {
        display: block;
    }

/* Team */

.team {
    display: grid;
    grid-template-columns: repeat(auto-fill, 30%);
    grid-gap: 3rem;
    justify-content: space-between;
    margin: 6rem 0 0;
}

.team-member img {
    margin: 0 0 1rem;
    border-radius: 6px;
}

.team-member h4 {
    color: #000B33;
}

.team-member p {
    margin: 0;
}

.team-member_title {
    font-weight: 600;
}

.team-member_join-date {
    font-weight: 400;
}

/* Join the Team Feature Cards */

.feature-card {
    display: flex;
    align-items: flex-start;
    max-width: 85%;
    margin: 2rem auto;
    padding: 1.5rem;
    background: #fff;
    border-radius: 10px;
    color: var(--dark-gray);
}

    .feature-card:nth-child(even) {
        margin-left: 0;
    }

    .feature-card img {
        margin: 0 1rem 0 0;
    }

    .feature-card p {
        margin: 0;
        font-size: 0.875rem;
    }

/* Blog */

.blog-index_post {
    display: flex;
    margin: 0 0 4rem;
}

.blog-post_image {
    width: 35%;
}

    .blog-post_image img {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
        border-radius: 6px;
    }

.blog-post_text {
    width: 60%;
    padding-left: 4rem;
}

.blog-post_tags {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.blog-post_tag {
    display: inline;
}

    .blog-post_tag a {
        background: #E5F6F9;
        padding: 0.5rem 0.75rem;
        border-radius: 32px;
        font-size: 0.625rem;
        text-decoration: none;
        color: var(--dark-gray);
    }

.blog-post_text h5 a {
    color: var(--dark-green);
    text-decoration: none;
}

.blog-category-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 4rem;
}

    .blog-category-select select {
        margin-left: 1rem;
    }

select {
    max-width: 100%;
    padding: 1rem 3rem 1rem 1rem;
    background: #F6F6F6 url('/assets/img/icon-arrow-down-purple.svg') center right 20px no-repeat;
    background-size: 16px;
    color: var(--purple);
    border-radius: 12px;
    border: none;
    transition: all .1s linear;
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

    select:hover {
        box-shadow: 0 0 0 2px rgba(92, 43, 173, 0.2);
    }

    select:focus {
        outline: none;
        box-shadow: 0 0 0 2px var(--purple);
    }

.blog-single-page {
    margin-bottom: 10rem;
}

.blog-single_header {
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #d6d6d6;
}

    .blog-single_header h3 {
        margin-bottom: 1em;
    }

.blog-single_featured-image {
    width: 100%;
}

    .blog-single_featured-image img {
        display: block;
        width: 100%;
        height: auto;
        margin: 1rem auto 4rem;
        box-shadow: 0 0 0 20px var(--green);
        border-radius: 6px;
    }

.blog-single_content {
    color: #333;
}

.responsive-object {
    position: relative;
}

    .responsive-object iframe,
    .responsive-object object,
    .responsive-object embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.blog-single_content figure {
    margin: 4rem auto;
}

    .blog-single_content figure img {
        border-radius: 3px;
    }

.blog-single_content figcaption {
    display: block;
    margin: 1rem auto;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.75;
}

.blog-single_content img.left {
    float: left;
    margin-right: 1em;
}

.blog-single_content img.right {
    float: right;
    margin-left: 1em;
}

.blog-single_content img.full-width {
    height: inherit;
    width: 100%;
}

/* Breadcrumbs */

.breadcrumbs {
    padding: 2rem 0;
}

    .breadcrumbs ol {
        list-style: none;
        padding: 0;
    }

        .breadcrumbs ol li {
            display: inline;
            margin: 0 0.5rem;
        }

            .breadcrumbs ol li:first-child {
                margin-left: 0;
            }

            .breadcrumbs ol li a {
                text-decoration: none;
                color: var(--mid-gray);
            }

                .breadcrumbs ol li a:hover {
                    text-decoration: underline;
                }

            .breadcrumbs ol li.active a {
                color: var(--purple);
                font-weight: 600;
            }

/* Pagination */

.pagination {
    padding: 3rem 0;
    text-align: center;
}

    .pagination ol {
        padding: 0;
        list-style: none;
    }

        .pagination ol li {
            display: inline-block;
        }

            .pagination ol li a {
                display: block;
                width: 48px;
                height: 48px;
                padding: 0.65rem 0 0 0;
                margin: 0 0.5rem;
                border-radius: 24px;
                box-shadow: 0 0 0 1px var(--purple);
                text-decoration: none;
                text-align: center;
            }

            .pagination ol li.active a,
            .pagination ol li:hover a {
                background: var(--dark-green);
                box-shadow: none;
                color: #fff;
                font-weight: 600;
            }

            .pagination ol li:hover a,
            .pagination ol li.pagination_arrow:hover a {
                box-shadow: 0 0 0 5px rgba(65, 169, 40, 0.25);
            }

            .pagination ol li.pagination_arrow a {
                box-shadow: 0 0 0 1px var(--light-purple);
            }

/* Search */

.search-result {
    padding: 1rem 0;
}

    .search-result:first-of-type {
        padding-top: 2rem;
    }

    .search-result h5 a {
        color: var(--dark-green);
        text-decoration: none;
    }

.search-result_link a {
    font-weight: 600;
    text-transform: lowercase;
    text-decoration: none;
}

    .search-result h5 a:hover,
    .search-result_link a:hover {
        text-decoration: underline;
    }

.search-result em {
    font-style: italic;
    font-weight: bold;
    color: var(--dark-gray);
    background-color: var(--green4);
    padding: 0.25em;
}

/* Careers */

.careers-green-boxes-wrapper .flex-wrapper img {
    max-width: 200px;
    margin: 0 auto 1rem;
}

/* Contact */

#contact-customer-service h6 {
    margin-bottom: 0;
}

    #contact-customer-service h6 + p {
        margin-top: 0;
    }

/* Footer */

footer {
    background: #fff;
}

    footer .footer-links {
        background: #fff;
        padding: 3rem 0;
    }

.footer-links-columns {
    display: flex;
}

.footer-column {
    width: 16%;
    padding-right: 2.5rem;
}

    .footer-column h5 {
        margin-bottom: 1rem;
        color: var(--mid-gray);
    }

    .footer-column ul {
        list-style: none;
        padding: 0;
    }

        .footer-column ul li a {
            display: flex;
            align-items: center;
            margin: 0 0 1rem 0;
            padding: 0.5rem 0;
            font-size: 0.875rem;
            color: var(--purple);
            text-decoration: none;
        }

            .footer-column ul li a:hover {
                text-decoration: underline;
            }

    .footer-column:last-of-type {
        margin-left: auto;
        width: 30%;
    }

        .footer-column:last-of-type li a {
            color: #1D263A;
        }

    .footer-column ul li a img {
        display: inline-block;
        width: 35px;
        margin-right: 1rem;
    }

footer .footer-brand {
    background: var(--light-gray);
    padding: 3rem 0;
}

.footer-social {
    display: flex;
    flex-direction: row;
    margin: 4rem 0;
}

    .footer-social a {
        margin-right: 2rem;
    }

footer .footer-brand a {
    color: #1D263A;
}

.footer-about h5 {
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.footer-about p {
    font-size: 0.75rem;
}

.footer-about-links a {
    margin-right: 1rem;
    font-size: 0.75rem;
}

.copyright {
    font-size: 0.75rem;
}

/* Media Queries */

/* Under 1400px */

@media only screen and ( max-width: 1400px ) {
    #nav-main ul {
        margin-right: 1rem;
    }

        #nav-main ul li a {
            padding: 0.5rem;
        }

    #nav-secondary ul li a {
        margin: 0;
    }
}

/* Under 1000px */

@media only screen and ( max-width: 1000px ) {
    /* Global Typography */

    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    /* Global Layout */

    /* Hides elements on mobile screens. */

    .mobile-hide {
        display: none;
    }

    /* Changes flex direction on mobile screens to stack. Add this to the .flex-wrapper elements to make them collapse on mobile. Don't add if you want to keep the flex split behavior on mobile. */

    .flex-wrapper.flex-wrapper_mobile-column {
        flex-direction: column;
    }

        /* Applies flex direction stacking and margin adjustments to all flex width classes. */

        .flex-wrapper.flex-wrapper_mobile-column .flex-30,
        .flex-wrapper.flex-wrapper_mobile-column .flex-40,
        .flex-wrapper.flex-wrapper_mobile-column .flex-50,
        .flex-wrapper.flex-wrapper_mobile-column .flex-60,
        .flex-wrapper.flex-wrapper_mobile-column .flex-70 {
            flex: 0 0 100%;
            width: 100%;
            margin-right: 0;
            margin-bottom: 2rem;
        }

    .flex-wrapper > div:last-child {
        margin-left: 0;
    }

    /* If you need to flip the order of a Left/Right flex layout when it's stacked. Used for example on the About page for the Left/Right Text/Image layout so they follow the same order on mobile, but alternate sides on desktop. */

    .flex-wrapper_mobile-reverse-order div:nth-child(1) {
        order: 2;
    }

    .flex-wrapper_mobile-reverse-order div:nth-child(2) {
        order: 1;
    }

    /* Reduces 3-wide layouts to flat */

    .thirds {
        flex-direction: column;
    }

        .thirds div,
        .thirds div:first-child,
        .thirds div:last-child {
            width: 100%;
            padding: 0;
            text-align: left;
        }

    /* Halves the global section padding for smaller screens. */

    .section-padding {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    /* Removes extra inset padding when a mobile view changes a block to a full width container. */

    .wrapper.wrapper--mobile-full {
        padding-left: 0;
        padding-right: 0;
    }

    /* Navigation */

    /* This is just the mobile hamburger menu icon */

    .nav-main-mobile {
        display: flex;
    }

    #nav-main {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

        #nav-main .logo {
            max-width: 70%;
        }

        #nav-main .nav-main-links,
        #nav-secondary ul {
            display: none;
        }

    #nav-secondary .wrapper {
        justify-content: center;
    }

    /* This is the actual mobile menu */

    #mobile-nav {
        display: none;
        width: 100%;
        position: absolute;
        z-index: 5;
        background: #fff;
        box-shadow: 0 30px 30px rgba(0, 0, 0, 0.3);
    }

        #mobile-nav.open {
            display: block;
        }

        #mobile-nav:focus {
            background: red;
        }

        #mobile-nav ul {
            list-style: none;
            padding: 0.5rem 0.75rem;
        }

            #mobile-nav ul li a {
                display: block;
                padding: 0.5rem 0.75rem;
                text-decoration: none;
            }

    .mobile-nav_primary {
        background: var(--purple);
    }

        .mobile-nav_primary li a {
            font-size: 1.375rem;
            color: #fff;
        }

        .mobile-nav_primary .active {
            background: rgb(255 255 255 / 15%);
            border-radius: 6px;
        }

    .mobile-nav_secondary {
        margin-bottom: 1rem;
    }

    .mobile-nav_contact {
        padding: 1.5rem;
        color: var(--purple);
    }

    .mobile-nav_contact-section {
        padding: 0.5rem 0;
    }

    .mobile-nav_contact-section-header {
        font-weight: 600;
    }

    .mobile-nav_secondary-login-options {
        display: none;
        border: 1px solid #d6d6d6;
        border-radius: 8px;
        padding: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    /* Header */

    .alert {
        padding: 0.75rem;
    }

    .alert-text {
        font-size: 0.75rem;
    }

    /* Keeping hero image on home, but not the rest of the image heroes for legibility and predictability of overlap on the image. */

    .hero.hero-home .hero-text {
        max-width: 60%;
    }

    .hero-white-gradient-left:after {
        display: none;
    }

    .hero-home.hero-white-gradient-left:after {
        display: block;
    }

    /* Generic hero titles go full width. */

    .hero .hero-text,
    .hero.hero-image .hero-text {
        max-width: 100%;
        padding: 1.5rem 0;
    }

    .hero.hero-image .hero-text {
        padding: 1.5rem 0;
    }

    .hero.hero-image {
        background-position-x: 50%;
        background-image: none !important;
    }

    .hero.hero-image_better {
        background-color: #dff5f7;
    }

    .hero-image_how {
        background: #E5F6F9;
    }

    .hero-image_plan-fed {
        background: #E5F6F9;
    }

        .hero-image_plan-fed:after {
            display: none;
        }

    .hero.hero-image_plan-fed .hero-text {
        max-width: 100%;
    }

    .hero .hero-text h2 {
        margin: 0 0 0.75rem;
        font-size: 2.5rem;
        line-height: 1.1;
    }

    .hero .hero-text .btn--underline:after {
        display: none;
    }

    .hero-green-bar {
        padding: 1rem 0;
    }

        .hero-green-bar ul li {
            display: inline-block;
        }

        .hero-green-bar .hero-looking-for-dropdown_select ul li {
            display: block;
        }

        .hero-green-bar ul li a {
            display: block;
            font-size: 0.75rem;
            margin: 0.25rem 0;
            padding: 0.325rem 0.5rem;
            border: 1px solid #000;
        }

        .hero-green-bar ul li.active a {
            background: rgba(255, 255, 255, 0.5);
        }

    /* Home */

    .hero.hero-home {
        /*background-image: url('/assets/img/hero-woman-smile-vertical.jpg');*/
    }

        .hero.hero-home .hero-text {
            padding: 2rem 0 4rem;
        }

            .hero.hero-home .hero-text h2 {
                font-size: 2.625rem;
            }

    .hero .hero-text p {
        font-size: 1rem;
    }

    .hero .hero-text .btn--underline {
        font-size: 1rem;
        color: #000;
    }

    .hero-home .hero-green-bar .btn {
        display: none;
    }

    .hero-looking-for-dropdown {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 1rem 3rem 1rem 1.5rem;
    }

        .hero-looking-for-dropdown.open {
            border-radius: 1rem 1rem 0 0;
        }

    .hero-looking-for-dropdown_line {
        border: none;
        width: 0;
    }

    .hero-looking-for-dropdown_select {
        width: 100%;
        left: 0;
        top: 70px;
        border-radius: 0 0 2rem 2rem;
        padding: 0.25rem 0;
    }

        .hero-looking-for-dropdown_select ul li a {
            padding: 1rem 1.5rem;
            border: none;
            border-bottom: 1px solid #ebebeb;
            border-radius: 0;
            font-size: 0.875rem;
            white-space: normal;
        }

        .hero-looking-for-dropdown_select ul li:last-child a {
            border-bottom: none;
        }

    .reasons {
        padding: 0;
        background: #fff;
    }

        .reasons .green-box {
            border-radius: 0;
            padding: 2rem;
        }

    .reasons-icons {
        flex-direction: column;
        width: 80%;
        margin: 0 auto;
    }

    .reason-icon {
        padding: 0.5rem;
    }

    .reasons-icons-column:first-child {
        margin-right: 0;
    }

    .find-dentist-button {
        width: 100%;
        left: 0;
        bottom: 0;
        border-radius: 0 0 12px 12px;
    }

    /* Footer */

    .footer-links-columns {
        flex-wrap: wrap;
    }

    footer .footer-links {
        padding: 1rem 0;
    }

    .footer-column {
        width: 50%;
        margin-bottom: 2rem;
        padding-right: 1.5rem;
    }

        .footer-column:last-of-type {
            width: 100%;
            padding: 0;
        }

    .footer-social {
        margin: 2rem 0;
    }

    .blue-footer-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 1rem;
    }

        .blue-footer-content > .flex-wrapper > div:last-child {
        }

    .card--white {
        padding: 1.5rem;
    }

    .card-half {
        flex-direction: column;
    }

    .card-half--offset {
        margin-bottom: 2.5rem;
    }

    .card-half_text {
        width: 100%;
        padding: 2rem;
    }

    .card-half_image {
        width: 100%;
        aspect-ratio: 3 / 2;
    }

    .news-block {
        padding: 1rem;
        box-shadow: none;
    }

    .wrapper--mobile-full .news-block {
        border-radius: 0;
    }

    .news-block-column {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin-bottom: 3rem;
        padding: 0;
    }

        .news-block-column:last-child {
            margin-bottom: 0;
        }

    .news-block-section-title {
        margin-bottom: 0.5rem;
    }

    .news-block-item-title {
        margin: 1rem 0;
    }

    .icon-cards {
        flex-direction: column;
    }

    .icon-card {
        width: 100%;
        margin: 0 0 1.5rem 0;
    }

    .shop-plans-cards {
        flex-direction: column;
    }

    .shop-plans-card {
        width: 100%;
        margin: 0 0 1rem;
    }

    .team {
        grid-gap: 1rem;
    }

    .feature-card {
        max-width: 100%;
        margin: 1rem 0 0;
    }

    .ok-carousel-slide-flex-wrapper {
        padding: 1rem;
    }

    .ok-carousel-icon {
        margin-right: 1.5rem;
    }

    .ok-carousel-title {
        font-size: 2rem;
    }

    .blog-category-select {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 0 2rem;
    }

        .blog-category-select select {
            margin: 0;
        }

    .blog-index_post {
        flex-direction: column;
    }

    .blog-post_tags {
        margin-bottom: 1rem;
    }

    .blog-post_image,
    .blog-post_text {
        width: 100%;
        padding: 0;
    }

    .blog-post_text {
        margin-top: 2rem;
    }

    .blog-single-page {
        margin-bottom: 5rem;
    }

    .blog-single_featured-image img {
        margin: 1rem auto 1.5rem;
        box-shadow: 0 0 0 8px var(--green);
    }

    .blog-single_content figure {
        margin: 2rem 0;
    }

    .pagination {
        padding: 1rem 0;
    }

        .pagination ol li a {
            width: 36px;
            height: 36px;
            margin: 0 0.25rem;
            padding: 0.35rem 0 0 0;
        }

    .plan-breakdown-card_header {
        padding: 1rem;
    }

    .plan-breakdown-card_header-title {
        font-size: 1.25rem;
    }

    .plan-breakdown-card_header-subtitle {
        font-size: 1rem;
    }

    .plan-breakdown-card_content {
        padding: 1rem;
    }

    .HOW-boost-banner {
        margin: -5rem 0 2rem;
    }

    .HOW-boost-banner_image {
        margin: 0 auto;
        padding: 1rem;
    }

    .HOW-boost-banner_text {
        width: 100%;
        padding: 2rem;
    }

    .page-shop #nav-secondary {
        display: none;
    }

    .shop-plans-intro {
        padding: 2rem 0 0;
    }

    .shop-plans-intro-header h2 {
        font-size: 3rem;
    }

    .shop-plans-intro-cards {
        flex-direction: column;
        max-width: 400px;
        margin: 0 auto;
        padding: 1rem;
    }

    .shop-plans-intro-card {
        width: 100%;
        margin-bottom: 1rem;
    }
}

/* Under 500px */

@media only screen and ( max-width: 500px ) {
    .team {
        display: block;
        margin: 0;
    }

    .team-member {
        margin-bottom: 3rem;
    }

    .questions-block-inner-box {
        padding: 1.5rem;
    }

    .questions-block-green-box_text-big {
        font-size: 2rem;
    }

    .questions-block-inner-box p {
        margin-top: 0;
        font-size: 0.75rem;
    }

    .questions-block-image-box .btn {
        font-size: 0.75rem;
    }

    .featured-question {
        flex-direction: column;
    }

        .featured-question p {
            margin: 0 0 1rem 0;
        }

    .faq-topic-group {
        margin-bottom: 2rem;
    }

    .faq-question_question {
        max-width: calc(100% - 3.5rem);
        padding: 1rem;
        font-size: 1rem;
    }

    .faq-question_answer {
        padding: 0 1rem 1rem;
    }

    .faq-question_arrow {
        top: 22px;
        right: 22px;
    }

    .img-float-right {
        float: none;
        max-width: 100%;
        margin: 1rem 0;
    }

    hr {
        margin: 1.5rem 0;
    }

    .plan-features-box {
        width: calc(50% - 0.5rem);
        margin: 0 0 1rem 0;
        padding: 0.75rem;
        border-radius: 1rem;
    }

        .plan-features-box h5 {
            font-size: 1rem;
        }

        .plan-features-box p {
            margin: 0.325rem 0 0;
            font-size: 0.75rem;
        }

    .plan-breakdown-disclaimer {
        width: calc(100% - 2rem);
        margin: 1.5rem auto;
        padding: 0;
    }

    .fact-square {
        padding: 1rem;
    }

    .fact-square_big {
        font-size: 3rem;
    }

    .big-quote-block .wrapper {
        left: auto;
    }

    .big-quote {
        font-size: 1.5rem;
    }

        .big-quote:before,
        .big-quote:after {
            display: none;
        }
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.3em;
    vertical-align: super;
}

sub {
    bottom: -0.25em;
    vertical-align: sub;
}

input[type="text"],
input[type="name"],
input[type="email"],
input[type="phone"],
input[type="number"],
input[type="password"],
textarea {
    display: block;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin: 0px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    border-radius: 1rem;
    border-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 100ms;
    transition-timing-function: linear;
    outline-color: #563D82;
}

    input[type="text"]:hover, input[type="text"]:focus,
    input[type="name"]:hover, input[type="name"]:focus,
    input[type="email"]:hover, input[type="email"]:focus,
    input[type="phone"]:hover, input[type="phone"]:focus,
    input[type="number"]:hover, input[type="number"]:focus,
    input[type="password"]:hover, input[type="password"]:focus,
    textarea:hover, textarea:focus {
        --tw-border-opacity: 1;
        border-bottom-color: rgb(86 61 130 / var(--tw-border-opacity, 1));
        --tw-shadow: 0 0 0 2px rgba(0,0,0,0.1);
        --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

.page-results input[type="number"]:hover, .page-results input[type="number"]:focus {
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: rgb(51 132 31 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

input[type="number"] {
    max-width: 100%;
    margin-left: 0;
}

textarea {
    padding: 8px;
}

.plan-breakdown-card_label-group:has(+ .plan-breakdown-card_label-group > .plan-breakdown-card_label.tw-basis-2\/5):has(> :last-child:nth-child(2)) > .plan-breakdown-card_label:nth-child(2) {
    flex-basis: 60%;
    text-align: center;
}

input[type=radio] + label {
    cursor: pointer;
}

.page-home input[type=radio] + label::after {
    border-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    content: "";
    font-size: 16px;
    position: absolute;
    top: calc(50% - 28px);
    left: 24px;
    height: 16px;
    width: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: white;
}

.page-home input[type=radio]:checked + label::after {
    border-width: 6px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(86 61 130 / var(--tw-border-opacity, 1));
}

input[type=radio]:checked + label {
    background-color: rgb(86 61 130 / 0.05);
    --tw-border-opacity: 1 !important;
    border-color: rgb(86 61 130 / var(--tw-border-opacity, 1)) !important;
}

/* Custom selects */

.custom-select {
    position: relative;
    display: inline-block;
}

.page-results .select-button {
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: rgb(51 132 31 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    width: 100%;
    max-width: 100%;
}

.select-button, .advanced-search-panel .select-button {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    width: 100%;
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    cursor: pointer;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

@media (min-width: 768px) {
    .select-button, .advanced-search-panel .select-button {
        max-width: -moz-max-content;
        max-width: max-content;
    }
}

.select-button, .advanced-search-panel .select-button {
    min-width: 9rem;
}

.page-results .arrow {
    --tw-border-opacity: 1;
    border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.arrow, .advanced-search-panel .arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #000;
    transition: transform ease-in-out 0.3s;
}

.page-results .selected-value {
    overflow-y: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 30px);
}

.page-results input[type="number"] {
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: rgb(51 132 31 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.select-dropdown, .advanced-search-panel .select-dropdown {
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    border-width: 2px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    margin: 0px;
    margin-top: 0.25rem;
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    max-height: 400px;
    overflow-y: auto;
}

@media not all and (min-width: 640px) {
    .select-dropdown, .advanced-search-panel .select-dropdown {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .select-dropdown, .advanced-search-panel .select-dropdown {
        min-width: 16rem;
        max-width: -moz-max-content;
        max-width: max-content;
    }
}

.select-dropdown, .advanced-search-panel .select-dropdown {
    z-index: 10;
}

@media (min-width: 768px) {
    .select-dropdown, .advanced-search-panel .select-dropdown {
        min-width: -moz-max-content;
        min-width: max-content;
    }
}

.select-dropdown ul {
    list-style-type: none;
    padding-left: 0px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

@media (min-width: 768px) {
    .select-dropdown ul {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.advanced-search-panel .select-dropdown {
    min-width: 100%;
}

.select-dropdown::-webkit-scrollbar {
    width: 7px;
}

.select-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 25px;
}

.select-dropdown::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 25px;
}

.select-dropdown li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

    /* Highlight the selected option */

    .select-dropdown li.selected {
        font-weight: 500;
    }

    .select-dropdown li:hover,
    .select-dropdown li:focus {
        font-weight: 500;
    }

    .select-dropdown li:focus-visible {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

.select-dropdown.hidden {
    display: none;
}

.select-button[aria-expanded="true"] {
    --tw-border-opacity: 1;
    border-color: rgb(86 61 130 / var(--tw-border-opacity, 1));
}

    .select-button[aria-expanded="true"] .arrow {
        transform: rotate(180deg);
    }

.provider[aria-expanded="true"] > .provider-opener > img {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.provider[aria-expanded="true"] > .provider-list {
    display: grid !important;
}

.provider[aria-expanded="false"] > .provider-list {
    display: none !important;
}

@media only screen and ( max-width: 1000px ) {
    /* Fixes for moving away from jQuery slideToggle */

    #mobile-nav {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 400ms linear;
    }

        #mobile-nav.open {
            max-height: 1500px;
        }

    .mobile-nav_secondary-login-options {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 400ms linear;
        border: none;
        border-radius: 0;
        padding: 0;
    }

        .mobile-nav_secondary-login-options.open {
            max-height: 400px;
        }

    /* End Fixes for moving away from jQuery slideToggle */
}

.tw-group.dqr-1 .group-\[\.dqr-1\]\:tw-block {
    display: block !important;
}

.tw-group.dqr-2 .group-\[\.dqr-2\]\:tw-block {
    display: block !important;
}

.tw-group.dqr-3 .group-\[\.dqr-3\]\:tw-block {
    display: block !important;
}

.tw-group.dqr-4 .group-\[\.dqr-4\]\:tw-block {
    display: block !important;
}

.tw-group.dqr-5 .group-\[\.dqr-5\]\:tw-block {
    display: block !important;
}

.tw-group.is-selected .group-\[\.is-selected\]\:tw-block {
    display: block !important;
}

.tw-group.dqr-1 .group-\[\.dqr-1\]\:tw-hidden {
    display: none !important;
}

.tw-group.dqr-2 .group-\[\.dqr-2\]\:tw-hidden {
    display: none !important;
}

.tw-group.dqr-3 .group-\[\.dqr-3\]\:tw-hidden {
    display: none !important;
}

.tw-group.dqr-4 .group-\[\.dqr-4\]\:tw-hidden {
    display: none !important;
}

.tw-group.dqr-5 .group-\[\.dqr-5\]\:tw-hidden {
    display: none !important;
}

.tw-group.is-selected .group-\[\.is-selected\]\:tw-hidden {
    display: none !important;
}

@media not all and (min-width: 640px) {
    .max-sm\:tw-hidden {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .md\:tw-col-span-1 {
        grid-column: span 1 / span 1 !important;
    }

    .md\:tw-row-start-1 {
        grid-row-start: 1 !important;
    }

    .md\:tw-my-6 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .md\:tw-mb-12 {
        margin-bottom: 3rem !important;
    }

    .md\:tw-hidden {
        display: none !important;
    }

    .md\:tw-min-h-48 {
        min-height: 12rem !important;
    }

    .md\:tw-w-\[480px\] {
        width: 480px !important;
    }

    .md\:tw-w-max {
        width: -moz-max-content !important;
        width: max-content !important;
    }

    .md\:tw-max-w-48 {
        max-width: 12rem !important;
    }

    .md\:tw-max-w-\[32ch\] {
        max-width: 32ch !important;
    }

    .md\:tw-auto-cols-max {
        grid-auto-columns: max-content !important;
    }

    .md\:tw-grid-flow-col {
        grid-auto-flow: column !important;
    }

    .md\:tw-grid-cols-\[3fr_1fr_2fr_2fr_max-content\] {
        grid-template-columns: 3fr 1fr 2fr 2fr max-content !important;
    }

    .md\:tw-grid-cols-\[max-content_1fr_20px\] {
        grid-template-columns: max-content 1fr 20px !important;
    }

    .md\:tw-grid-cols-\[max-content_1fr_max-content\] {
        grid-template-columns: max-content 1fr max-content !important;
    }

    .md\:tw-grid-cols-\[max-content_max-content_1fr\] {
        grid-template-columns: max-content max-content 1fr !important;
    }

    .md\:tw-flex-row {
        flex-direction: row !important;
    }

    .md\:tw-place-items-center {
        place-items: center !important;
    }

    .md\:tw-gap-10 {
        gap: 2.5rem !important;
    }

    .md\:tw-gap-2 {
        gap: 0.5rem !important;
    }

    .md\:tw-gap-8 {
        gap: 2rem !important;
    }

    .md\:tw-justify-self-end {
        justify-self: end !important;
    }

    .md\:tw-rounded-md {
        border-radius: 0.375rem !important;
    }

    .md\:tw-border {
        border-width: 1px !important;
    }

    .md\:tw-bg-green-hat {
        background-image: linear-gradient(to bottom, #41A928 104px, #FFFFFF 104px) !important;
    }

    .md\:tw-p-14 {
        padding: 3.5rem !important;
    }

    .md\:tw-p-6 {
        padding: 1.5rem !important;
    }

    .md\:tw-p-8 {
        padding: 2rem !important;
    }

    .md\:tw-px-6 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .md\:tw-py-12 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .md\:tw-py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .md\:tw-pb-16 {
        padding-bottom: 4rem !important;
    }

    .md\:tw-pb-6 {
        padding-bottom: 1.5rem !important;
    }

    .md\:tw-pt-0 {
        padding-top: 0px !important;
    }

    .md\:tw-pt-24 {
        padding-top: 6rem !important;
    }

    .md\:tw-text-2xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    .md\:tw-text-6xl {
        font-size: 3.75rem !important;
        line-height: 1 !important;
    }

    .md\:tw-text-base {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
    }

    .md\:tw-drop-shadow-lg {
        --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) !important;
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
    }
}

@media (min-width: 1024px) {
    .lg\:tw-grid-cols-\[1fr_200px_200px_164px_max-content\] {
        grid-template-columns: 1fr 200px 200px 164px max-content !important;
    }

    .lg\:tw-gap-4 {
        gap: 1rem !important;
    }
}

.\[\&\>li\]\:tw-flex > li {
    display: flex !important;
}

.\[\&\>li\]\:tw-gap-2 > li {
    gap: 0.5rem !important;
}


.NoScroll {
    overflow: visible !important;
    max-height: none;
}