@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');





/* ==========================================================================
Variables
========================================================================== */

:root {

/* --- Colors --- */

--light-blue-100: 199, 84%, 55%; /* #2bb0ed */
--light-blue-500: 202, 83%, 41%; /* #127fbf */
--light-blue-900: 204, 96%, 27%; /* #035388 */

--blue-100:       210, 22%, 49%; /* #627d98 */
--blue-500:       209, 34%, 30%; /* #334e68 */
--blue-900:       209, 61%, 16%; /* #102a43 */

--gray-100:       210, 36%, 96%; /* #f0f4F8 */
--gray-300:       212, 33%, 89%; /* #d9e2ec */
--gray-500:       210, 31%, 80%; /* #bcccdc */
--gray-700:       211, 27%, 70%; /* #9fb3c8 */
--gray-900:       209, 23%, 60%; /* #829ab1 */

--white:          0, 0%, 100%;   /* #ffffff */

/* --- Typography --- */

--font-family-sans-serif: "Montserrat", sans-serif;

/* --- Layout --- */

--space-multiplier:  0.8;

--content-max-width: 140rem;

--grid-spacer-width: 1.5rem;
--grid-column-count: 12;

}

/* ==========================================================================
Base
========================================================================== */

/**
* Reset box-sizing on all elements
*
* `border-box` includes padding and border in the calculations for total
* width, height values. This is more predictable than the default
* `content-box`, which does the opposite.
*
* 1. Apply `inherit` to all elements (global selector)
* 2. Apply the same with a global selector for pseudo-elements
*/

* {
box-sizing: inherit; /* 1 */
}

*::before,
*::after {
box-sizing: inherit; /* 2 */
}

/**
* 1. Now add `border-box` to `html`, which will cascade down through all
*    elements, but leaves box-sizing easy to overwrite on a parent component
*
*    https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*
* 2. Set `html` font size to 62.5%, equal to 10px or 1rem
*
*    https://css-tricks.com/accessible-font-sizing-explained/
*
* 3. Set up full viewport height for sticky footer
* 4. Prevent font size adjustment after orientation change in iOS
*/

html {
box-sizing: border-box; /* 1 */
font-size: 62.5%; /* 2 */
height: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 4 */
}

:focus-visible {
outline: hsl(var(--light-blue-900)) auto 1px;
outline-offset: 0;
}

body {
background-color: hsl(var(--gray-100));
color: hsl(var(--blue-900));
font-family: var(--font-family-sans-serif);
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.025em;
line-height: 1.8;
margin: 3rem;
}

/* ==========================================================================
Accessibility
========================================================================== */

/* Visibility
========================================================================== */

/**
* Visually hidden class
*
* Hides content to visual users, but leaves it accessible to screen reader
* users. The combination of these properties will ensure that the element
* is truly hidden and not getting smushed in the corner of the screen.
*
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.visually-hidden {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
white-space: nowrap; /* 1 */
width: 1px;
}

/* ==========================================================================
CSS Flex
========================================================================== */

/* Flex Parent
========================================================================== */

/**
* These classes are named in the format `{breakpoint}:flex-{property}`
*
* Where `{breakpoint}` is one of sm, md, or lg
*
* Where `{property}` is one of:
*    row
*    row-reverse
*    column
*    column-reverse
*    wrap
*    wrap-reverse
*    wrap-nowrap
*/

.flex-row {
flex-direction: row;
}

.flex-row-reverse {
flex-direction: row-reverse;
}

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

.flex-column-reverse {
flex-direction: column-reverse;
}

.flex-wrap {
flex-wrap: wrap;
}

.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}

.flex-wrap-nowrap {
flex-wrap: nowrap;
}

@media only screen and (min-width: 640px) {
.sm\:flex-row {
flex-direction: row;
}

.sm\:flex-row-reverse {
flex-direction: row-reverse;
}

.sm\:flex-column {
flex-direction: column;
}

.sm\:flex-column-reverse {
flex-direction: column-reverse;
}

.sm\:flex-wrap {
flex-wrap: wrap;
}

.sm\:flex-wrap-reverse {
flex-wrap: wrap-reverse;
}

.sm\:flex-wrap-nowrap {
flex-wrap: nowrap;
}
}

@media only screen and (min-width: 940px) {
.md\:flex-row {
flex-direction: row;
}

.md\:flex-row-reverse {
flex-direction: row-reverse;
}

.md\:flex-column {
flex-direction: column;
}

.md\:flex-column-reverse {
flex-direction: column-reverse;
}

.md\:flex-wrap {
flex-wrap: wrap;
}

.md\:flex-wrap-reverse {
flex-wrap: wrap-reverse;
}

.md\:flex-wrap-nowrap {
flex-wrap: nowrap;
}
}

@media only screen and (min-width: 1240px) {
.lg\:flex-row {
flex-direction: row;
}

.lg\:flex-row-reverse {
flex-direction: row-reverse;
}

.lg\:flex-column {
flex-direction: column;
}

.lg\:flex-column-reverse {
flex-direction: column-reverse;
}

.lg\:flex-wrap {
flex-wrap: wrap;
}

.lg\:flex-wrap-reverse {
flex-wrap: wrap-reverse;
}

.lg\:flex-wrap-nowrap {
flex-wrap: nowrap;
}
}

/* Flex Children
========================================================================== */

/**
* These classes are named in the format `{breakpoint}:flex-{property}`
*
* Where `{breakpoint}` is one of sm, md, or lg
*
* Where `{property}` is one of:
*    1 - Allows the flex item the grow and shrink, 0% basis
*    auto - Allows the flex item to grow and shrink, auto basis
*    initial - Allows the flex item to shrink but not grow, auto basis
*    none - Prevents the flex item from growing or shrinking
*/

.flex-1 {
flex: 1 1 0%;
}

.flex-auto {
flex: 1 1 auto;
}

.flex-initial {
flex: 0 1 auto;
}

.flex-none {
flex: none;
}

@media only screen and (min-width: 640px) {
.sm\:flex-1 {
flex: 1 1 0%;
}

.sm\:flex-auto {
flex: 1 1 auto;
}

.sm\:flex-initial {
flex: 0 1 auto;
}

.sm\:flex-none {
flex: none;
}
}

@media only screen and (min-width: 940px) {
.md\:flex-1 {
flex: 1 1 0%;
}

.md\:flex-auto {
flex: 1 1 auto;
}

.md\:flex-initial {
flex: 0 1 auto;
}

.md\:flex-none {
flex: none;
}
}

@media only screen and (min-width: 1240px) {
.lg\:flex-1 {
flex: 1 1 0%;
}

.lg\:flex-auto {
flex: 1 1 auto;
}

.lg\:flex-initial {
flex: 0 1 auto;
}

.lg\:flex-none {
flex: none;
}
}

/* ==========================================================================
CSS Grid
========================================================================== */

/* Grid Children
========================================================================== */

/**
* These classes are named in the format `{breakpoint}:col-{count}`
*
* Where `{breakpoint}` is one of sm, md, or lg
*
* Where `{count}` is a number 1 - 6
*/

.grid-col-1 {
grid-template-columns: 1fr;
}

.grid-col-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-col-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-col-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-col-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-col-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media only screen and (min-width: 640px) {
.sm\:grid-col-1 {
grid-template-columns: 1fr;
}

.sm\:grid-col-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sm\:grid-col-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sm\:grid-col-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sm\:grid-col-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sm\:grid-col-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}

@media only screen and (min-width: 940px) {
.md\:grid-col-1 {
grid-template-columns: 1fr;
}

.md\:grid-col-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.md\:grid-col-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.md\:grid-col-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.md\:grid-col-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

.md\:grid-col-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}

@media only screen and (min-width: 1240px) {
.lg\:grid-col-1 {
grid-template-columns: 1fr;
}

.lg\:grid-col-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lg\:grid-col-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lg\:grid-col-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lg\:grid-col-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lg\:grid-col-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}

/* ==========================================================================
CSS Layout
========================================================================== */

/* Alignment (Parent)
========================================================================== */

.justify-start {
justify-content: start;
}

.justify-end {
justify-content: end;
}

.justify-center {
justify-content: center;
}

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

.justify-space-around {
justify-content: space-around;
}

.justify-space-evenly {
justify-content: space-evenly;
}

.align-items-start {
align-items: center;
justify-content: center;
}

.align-items-end {
align-items: end;
}

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

.align-items-stretch {
align-items: stretch;
}

.align-items-baseline {
align-items: baseline;
}

@media only screen and (min-width: 640px) {
.sm\:justify-start {
justify-content: start;
}

.sm\:justify-end {
justify-content: end;
}

.sm\:justify-center {
justify-content: center;
}

.sm\:justify-space-between {
justify-content: space-between;
}

.sm\:justify-space-around {
justify-content: space-around;
}

.sm\:justify-space-evenly {
justify-content: space-evenly;
}

.sm\:align-items-start {
align-items: start;
}

.sm\:align-items-end {
align-items: end;
}

.sm\:align-items-center {
align-items: center;
}

.sm\:align-items-stretch {
align-items: stretch;
}

.sm\:align-items-baseline {
align-items: baseline;
}
}

@media only screen and (min-width: 940px) {
.md\:justify-start {
justify-content: start;
}

.md\:justify-end {
justify-content: end;
}

.md\:justify-center {
justify-content: center;
}

.md\:justify-space-between {
justify-content: space-between;
}

.md\:justify-space-around {
justify-content: space-around;
}

.md\:justify-space-evenly {
justify-content: space-evenly;
}

.md\:align-items-start {
align-items: start;
}

.md\:align-items-end {
align-items: end;
}

.md\:align-items-center {
align-items: center;
}

.md\:align-items-stretch {
align-items: stretch;
}

.md\:align-items-baseline {
align-items: baseline;
}
}

@media only screen and (min-width: 1240px) {
.lg\:justify-start {
justify-content: start;
}

.lg\:justify-end {
justify-content: end;
}

.lg\:justify-center {
justify-content: center;
}

.lg\:justify-space-between {
justify-content: space-between;
}

.lg\:justify-space-around {
justify-content: space-around;
}

.lg\:justify-space-evenly {
justify-content: space-evenly;
}

.lg\:align-items-start {
align-items: start;
}

.lg\:align-items-end {
align-items: end;
}

.lg\:align-items-center {
align-items: center;
}

.lg\:align-items-stretch {
align-items: stretch;
}

.lg\:align-items-baseline {
align-items: baseline;
}
}

/* ==========================================================================
Display
========================================================================== */

/**
* These classes are named in the format `{breakpoint}:d-{value}`
*
* Where `{breakpoint}` is one of sm, md, or lg
*
* Where `{value}` is one of:
*    none
*    inline
*    inline-block
*    block
*    flex
*    inline-flex
*/

.d-none {
display: none;
}

.d-inline {
display: inline;
}

.d-inline-block {
display: inline-block;
}

.d-block {
display: block;
}

.d-flex {
column-gap: calc(var(--grid-spacer-width) * 2);
display: flex;
}

.d-inline-flex {
column-gap: calc(var(--grid-spacer-width) * 2);
display: inline-flex;
}

.d-grid {
column-gap: calc(var(--grid-spacer-width) * 2);
display: grid;
}

.d-inline-grid {
column-gap: calc(var(--grid-spacer-width) * 2);
display: inline-grid;
}

@media only screen and (min-width: 640px) {
.sm\:d-none {
display: none;
}

.sm\:d-inline {
display: inline;
}

.sm\:d-inline-block {
display: inline-block;
}

.sm\:d-block {
display: block;
}

.sm\:d-flex {
column-gap: calc(var(--grid-spacer-width) * 2);
display: flex;
}

.sm\:d-inline-flex {
column-gap: calc(var(--grid-spacer-width) * 2);
display: inline-flex;
}

.sm\:d-grid {
column-gap: calc(var(--grid-spacer-width) * 2);
display: grid;
}

.sm\:d-inline-grid {
column-gap: calc(var(--grid-spacer-width) * 2);
display: inline-grid;
}
}

@media only screen and (min-width: 940px) {
.md\:d-none {
display: none;
}

.md\:d-inline {
display: inline;
}

.md\:d-inline-block {
display: inline-block;
}

.md\:d-block {
display: block;
}

.md\:d-flex {
column-gap: calc(var(--grid-spacer-width) * 2);
display: flex;
}

.md\:d-inline-flex {
column-gap: calc(var(--grid-spacer-width) * 2);
display: inline-flex;
}

.md\:d-grid {
column-gap: calc(var(--grid-spacer-width) * 2);
display: grid;
}

.md\:d-inline-grid {
column-gap: calc(var(--grid-spacer-width) * 2);
display: inline-grid;
}
}

@media only screen and (min-width: 1240px) {
.lg\:d-none {
display: none;
}

.lg\:d-inline {
display: inline;
}

.lg\:d-inline-block {
display: inline-block;
}

.lg\:d-block {
display: block;
}

.lg\:d-flex {
column-gap: calc(var(--grid-spacer-width) * 2);
display: flex;
}

.lg\:d-inline-flex {
column-gap: calc(var(--grid-spacer-width) * 2);
display: inline-flex;
}

.lg\:d-grid {
column-gap: calc(var(--grid-spacer-width) * 2);
display: grid;
}

.lg\:d-inline-grid {
column-gap: calc(var(--grid-spacer-width) * 2);
display: inline-grid;
}
}

/* ==========================================================================
Typography
========================================================================== */

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

p {
font-size: 1.4rem;
margin: 0;
}

* + p {
margin-top: 1.25em;
}

ul + p,
ol + p {
margin-top: 2em;
}

@media only screen and (min-width: 940px) {
p {
font-size: 1.6rem;
}
}

/* Lists
========================================================================== */

ul,
ol {
font-size: 1.4rem;
margin: 0;
}

* + ul,
* + ol {
margin-top: 1.25em;
}

li + li {
margin-top: 0.5em;
}

.list-unstyled {
list-style: none;
margin: 0;
padding-left: 0;
}

.list-unstyled li + li {
margin-top: 0;
}

@media only screen and (min-width: 940px) {
ul,
ol {
font-size: 1.6rem;
}
}

/* Links
========================================================================== */

a {
color: hsl(var(--light-blue-900));
cursor: pointer;
transition: color 0.2s ease-in-out;
}

a:active,
a:visited {
color: hsl(var(--light-blue-900));
}

a:hover,
a:focus {
color: hsl(var(--light-blue-500));
}

/* ==========================================================================
Forms
========================================================================== */

:root {

--form-accent-color: var(--light-blue-500);
--form-error-color: 356, 75%, 53%; /* #e12d39 */

/* --- Fields --- */

--field-background-color: hsl(var(--white));
--field-border-width: 1px;
--field-border-style: solid;
--field-border-color: hsl(var(--gray-500));
--field-border: var(--field-border-width)
var(--field-border-style)
var(--field-border-color);
--field-border-radius: 3px;
--field-height: 4.2rem;
--field-padding: 0 calc(var(--space-multiplier) * 2rem);
--field-text-color: hsl(var(--blue-900));
--field-text-font-family: var(--font-family-sans-serif);
--field-text-font-size: 1.4rem;
--field-text-font-weight: 500;
--field-text-letter-spacing: 0.05em;

/* --- Labels --- */

--label-text-color: hsl(var(--blue-900));
--label-text-font-family: var(--font-family-sans-serif);
--label-text-font-size: 1.4rem;
--label-text-font-weight: 600;
--label-text-letter-spacing: 0.05em;

/* --- Error Text ---*/

--error-text-color: hsl(var(--form-error-color));
--error-text-font-family: var(--font-family-sans-serif);
--error-text-font-size: 1.2rem;
--error-text-font-weight: 500;
--error-text-letter-spacing: 0.05em;

}

@media only screen and (min-width: 640px) {
:root {
--field-height: 4.6rem;
}
}

/* Fieldset
========================================================================== */

fieldset {
border: 0;
margin: 0;
padding: 0;
}

/* Labels
========================================================================== */

label,
legend {
color: var(--label-text-color);
font-family: var(--label-text-font-family);
font-size: var(--label-text-font-size);
font-weight: var(--label-text-font-weight);
display: block;
letter-spacing: var(--label-text-letter-spacing);
line-height: 1.6;
padding-bottom: calc(var(--space-multiplier) * 1rem);
position: relative;
}

label > [data-required="true"]::after,
legend > [data-required="true"]::after {
color: hsl(var(--form-error-color));
content: "*";
padding-left: 0.25em;
position: absolute;
}

/* Fields
========================================================================== */

[multiple],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
background-color: var(--field-background-color);
border: var(--field-border);
border-radius: var(--field-border-radius);
color: var(--field-text-color);
display: block;
font-family: var(--field-text-font-family);
font-size: var(--field-text-font-size);
font-weight: var(--field-text-font-weight);
letter-spacing: var(--field-text-letter-spacing);
width: 100% !important;
}

[multiple],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select {
line-height: var(--field-height);
padding: var(--field-padding);
}

select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='hsl(0, 0%, 13%)' d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 2rem center;
background-size: 0.7em auto;
padding-right: 5rem;
}

textarea {
--field-padding: calc(var(--space-multiplier) * 2rem);
padding: var(--field-padding);
resize: vertical;
}

/* --- Checkbox and Radio --- */

.form__choice-wrapper {
--label-text-font-weight: 500;
column-gap: 1.5rem;
display: grid;
grid-template-columns: min-content 1fr;
padding: 0;
}

.form__choice-wrapper + .form__choice-wrapper {
margin-top: calc(var(--space-multiplier) * 1rem);
}

[type="radio"],
[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
background-color: var(--field-background-color);
border: var(--field-border);
color: currentColor;
font: inherit;
height: 2rem !important;
margin: 0;
width: 2rem !important;
}

[type="radio"]:focus-visible,
[type="checkbox"]:focus-visible {
outline-offset: 4px;
}

[type="radio"]:checked,
[type="checkbox"]:checked {
--field-border-color: transparent;
--field-border: var(--field-border-width)
var(--field-border-style)
var(--field-border-color);
background-color: hsl(var(--form-accent-color));
}

[type="radio"] {
border-radius: 50%;
display: grid;
place-content: center;
}

[type="radio"]::before {
border-radius: 50%;
box-shadow: inset 0 0 0 1em var(--field-background-color);
content: '';
height: 0.55em;
width: 0.55em;
}

[type="checkbox"] {
border-radius: 3px;
}

[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 1em auto;
}

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

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
--field-border-color: hsl(var(--form-error-color));
--field-border: var(--field-border-width)
var(--field-border-style)
var(--field-border-color);
--field-text-color: var(--error-text-color);
box-shadow: 0 0 0 1px hsl(var(--form-error-color));
}

select[aria-invalid="true"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='hsl(356, 75%, 53%)' d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E");
}

/* --- Error Text --- */

.form__error-text {
color: var(--error-text-color);
font-family: var(--error-text-font-family);
font-size: var(--error-text-font-size);
font-weight: var(--error-text-font-weight);
letter-spacing: var(--error-text-letter-spacing);
line-height: 1.6;
margin-top: calc(var(--space-multiplier) * 1rem);
}

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

:root {
--button-background-color: hsl(var(--blue-900));
--button-border-width: 1px;
--button-border-style: solid;
--button-border-color: transparent;
--button-border: var(--button-border-width)
var(--button-border-style)
var(--button-border-color);
--button-border-radius: 4px;
--button-height: 4.2rem;
--button-padding: 0 calc(var(--space-multiplier) * 2rem);
--button-text-align: center;
--button-text-color: hsl(var(--white));
--button-text-decoration: none;
--button-text-font-family: var(--font-family-sans-serif);
--button-text-font-size: 1.6rem;
--button-text-font-weight: 600;
--button-text-letter-spacing: 0.05em;
--button-text-shadow: 0 1px hsla(0, 0%, 20%, 0.2);
}

@media only screen and (min-width: 640px) {
:root {
--button-height: 4.6rem;
--button-padding: 0 calc(var(--space-multiplier) * 3rem);
}
}

button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
background-color: var(--button-background-color);
border: var(--button-border);
border-radius: var(--button-border-radius);
color: var(--button-text-color);
display: block;
font-family: var(--button-text-font-family);
font-size: var(--button-text-font-size);
font-weight: var(--button-text-font-weight);
letter-spacing: var(--button-text-letter-spacing);
line-height: var(--button-height);
padding: var(--button-padding);
text-align: var(--button-text-align);
text-decoration: var(--button-text-decoration);
text-shadow: var(--button-text-shadow);
transition: background-color 0.2s ease-in-out,
border-color 0.2s ease-in-out,
color 0.2s ease-in-out,
text-shadow 0.2s ease-in-out;
white-space: nowrap;
width: 100%;
cursor: pointer;
}

button:active {
transform: translateY(1px);
}

button:hover,
button:focus {
background-color: hsl(var(--light-blue-900));
color: hsl(var(--white));
}

button:focus-visible {
outline-offset: 4px;
}

button.disabled,
button:disabled {
background-color: hsl(var(--gray-900));
}

@media only screen and (min-width: 640px) {
button {
display: inline-block;
vertical-align: top;
width: auto;
}
}

/* --- Simple Buttons --- */

.button--simple,
.button--simple:active,
.button--simple:visited {
background-color: transparent;
color: hsl(var(--blue-900));
text-shadow: none;
}

.button--simple:hover,
.button--simple:focus {
background-color: transparent;
color: hsl(var(--light-blue-900));
}

/* ==========================================================================
Container
========================================================================== */

.container {
max-width: 1000px; /* 800px */
width: 100%;
margin-top: 40px !important;
}

/* ==========================================================================
Spacing
========================================================================== */

/**
* These classes are named in the format
*    `{breakpoint}:{property}{side?s}-{size}`
*
* Where `{breakpoint}` is one of sm, md, or lg
*
* Where `{property}` is one of:
*    m - sets margin
*    p - sets padding
*
* Where `{sides}` is one of:
*    t - sets top only
*    b - sets bottom only
*    l - sets left only
*    r - sets right only
*    x - sets both left and right
*    y - sets both top and bottom
*    blank - sets all four sides
*
* Where `{size}` is one of the following as a multiple of 0.8:
*    0 - sets spacing to 0 * 0.8 (0)
*    1 - sets spacing to 1 * 0.8 (0.8rem)
*    2 - sets spacing to 2 * 0.8 (1.6rem)
*    3 - sets spacing to 3 * 0.8 (2.4rem)
*    4 - sets spacing to 4 * 0.8 (3.2rem)
*    5 - sets spacing to 5 * 0.8 (4.0rem)
*    6 - sets spacing to 6 * 0.8 (4.8rem)
*    auto - sets spacing to auto (margin only)
*/

.m-0 {
margin: 0;
}

.m-1 {
margin: calc(var(--space-multiplier) * 1rem);
}

.m-2 {
margin: calc(var(--space-multiplier) * 2rem);
}

.m-3 {
margin: calc(var(--space-multiplier) * 3rem);
}

.m-4 {
margin: calc(var(--space-multiplier) * 4rem);
}

.m-5 {
margin: calc(var(--space-multiplier) * 5rem);
}

.m-6 {
margin: calc(var(--space-multiplier) * 6rem);
}

.m-auto {
margin: auto;
}

.mt-0 {
margin-top: 0;
}

.mt-1 {
margin-top: calc(var(--space-multiplier) * 1rem);
}

.mt-2 {
margin-top: calc(var(--space-multiplier) * 2rem);
}

.mt-3 {
margin-top: calc(var(--space-multiplier) * 3rem);
}

.mt-4 {
margin-top: calc(var(--space-multiplier) * 4rem);
}

.mt-5 {
margin-top: calc(var(--space-multiplier) * 5rem);
}

.mt-6 {
margin-top: calc(var(--space-multiplier) * 6rem);
}

.mt-auto {
margin-top: auto;
}

.mb-0 {
margin-bottom: 0;
}

.mb-1 {
margin-bottom: calc(var(--space-multiplier) * 1rem);
}

.mb-2 {
margin-bottom: calc(var(--space-multiplier) * 2rem);
}

.mb-3 {
margin-bottom: calc(var(--space-multiplier) * 3rem);
}

.mb-4 {
margin-bottom: calc(var(--space-multiplier) * 4rem);
}

.mb-5 {
margin-bottom: calc(var(--space-multiplier) * 5rem);
}

.mb-6 {
margin-bottom: calc(var(--space-multiplier) * 6rem);
}

.mb-auto {
margin-bottom: auto;
}

.ml-0 {
margin-left: 0;
}

.ml-1 {
margin-left: calc(var(--space-multiplier) * 1rem);
}

.ml-2 {
margin-left: calc(var(--space-multiplier) * 2rem);
}

.ml-3 {
margin-left: calc(var(--space-multiplier) * 3rem);
}

.ml-4 {
margin-left: calc(var(--space-multiplier) * 4rem);
}

.ml-5 {
margin-left: calc(var(--space-multiplier) * 5rem);
}

.ml-6 {
margin-left: calc(var(--space-multiplier) * 6rem);
}

.ml-auto {
margin-left: auto;
}

.mr-0 {
margin-right: 0;
}

.mr-1 {
margin-right: calc(var(--space-multiplier) * 1rem);
}

.mr-2 {
margin-right: calc(var(--space-multiplier) * 2rem);
}

.mr-3 {
margin-right: calc(var(--space-multiplier) * 3rem);
}

.mr-4 {
margin-right: calc(var(--space-multiplier) * 4rem);
}

.mr-5 {
margin-right: calc(var(--space-multiplier) * 5rem);
}

.mr-6 {
margin-right: calc(var(--space-multiplier) * 6rem);
}

.mr-auto {
margin-right: auto;
}

.mx-0 {
margin-left: 0;
margin-right: 0;
}

.mx-1 {
margin-left: calc(var(--space-multiplier) * 1rem);
margin-right: calc(var(--space-multiplier) * 1rem);
}

.mx-2 {
margin-left: calc(var(--space-multiplier) * 2rem);
margin-right: calc(var(--space-multiplier) * 2rem);
}

.mx-3 {
margin-left: calc(var(--space-multiplier) * 3rem);
margin-right: calc(var(--space-multiplier) * 3rem);
}

.mx-4 {
margin-left: calc(var(--space-multiplier) * 4rem);
margin-right: calc(var(--space-multiplier) * 4rem);
}

.mx-5 {
margin-left: calc(var(--space-multiplier) * 5rem);
margin-right: calc(var(--space-multiplier) * 5rem);
}

.mx-6 {
margin-left: calc(var(--space-multiplier) * 6rem);
margin-right: calc(var(--space-multiplier) * 6rem);
}

.mx-auto {
margin-left: auto;
margin-right: auto;
}

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

.my-1 {
margin-top: calc(var(--space-multiplier) * 1rem);
margin-bottom: calc(var(--space-multiplier) * 1rem);
}

.my-2 {
margin-top: calc(var(--space-multiplier) * 2rem);
margin-bottom: calc(var(--space-multiplier) * 2rem);
}

.my-3 {
margin-top: calc(var(--space-multiplier) * 3rem);
margin-bottom: calc(var(--space-multiplier) * 3rem);
}

.my-4 {
margin-top: calc(var(--space-multiplier) * 4rem);
margin-bottom: calc(var(--space-multiplier) * 4rem);
}

.my-5 {
margin-top: calc(var(--space-multiplier) * 5rem);
margin-bottom: calc(var(--space-multiplier) * 5rem);
}

.my-6 {
margin-top: calc(var(--space-multiplier) * 6rem);
margin-bottom: calc(var(--space-multiplier) * 6rem);
}

.my-auto {
margin-top: auto;
margin-bottom: auto;
}

@media only screen and (min-width: 640px) {
.sm\:m-0 {
margin: 0;
}

.sm\:m-1 {
margin: calc(var(--space-multiplier) * 1rem);
}

.sm\:m-2 {
margin: calc(var(--space-multiplier) * 2rem);
}

.sm\:m-3 {
margin: calc(var(--space-multiplier) * 3rem);
}

.sm\:m-4 {
margin: calc(var(--space-multiplier) * 4rem);
}

.sm\:m-5 {
margin: calc(var(--space-multiplier) * 5rem);
}

.sm\:m-6 {
margin: calc(var(--space-multiplier) * 6rem);
}

.sm\:m-auto {
margin: auto;
}

.sm\:mt-0 {
margin-top: 0;
}

.sm\:mt-1 {
margin-top: calc(var(--space-multiplier) * 1rem);
}

.sm\:mt-2 {
margin-top: calc(var(--space-multiplier) * 2rem);
}

.sm\:mt-3 {
margin-top: calc(var(--space-multiplier) * 3rem);
}

.sm\:mt-4 {
margin-top: calc(var(--space-multiplier) * 4rem);
}

.sm\:mt-5 {
margin-top: calc(var(--space-multiplier) * 5rem);
}

.sm\:mt-6 {
margin-top: calc(var(--space-multiplier) * 6rem);
}

.sm\:mt-auto {
margin-top: auto;
}

.sm\:mb-0 {
margin-bottom: 0;
}

.sm\:mb-1 {
margin-bottom: calc(var(--space-multiplier) * 1rem);
}

.sm\:mb-2 {
margin-bottom: calc(var(--space-multiplier) * 2rem);
}

.sm\:mb-3 {
margin-bottom: calc(var(--space-multiplier) * 3rem);
}

.sm\:mb-4 {
margin-bottom: calc(var(--space-multiplier) * 4rem);
}

.sm\:mb-5 {
margin-bottom: calc(var(--space-multiplier) * 5rem);
}

.sm\:mb-6 {
margin-bottom: calc(var(--space-multiplier) * 6rem);
}

.sm\:mb-auto {
margin-bottom: auto;
}

.sm\:ml-0 {
margin-left: 0;
}

.sm\:ml-1 {
margin-left: calc(var(--space-multiplier) * 1rem);
}

.sm\:ml-2 {
margin-left: calc(var(--space-multiplier) * 2rem);
}

.sm\:ml-3 {
margin-left: calc(var(--space-multiplier) * 3rem);
}

.sm\:ml-4 {
margin-left: calc(var(--space-multiplier) * 4rem);
}

.sm\:ml-5 {
margin-left: calc(var(--space-multiplier) * 5rem);
}

.sm\:ml-6 {
margin-left: calc(var(--space-multiplier) * 6rem);
}

.sm\:ml-auto {
margin-left: auto;
}

.sm\:mr-0 {
margin-right: 0;
}

.sm\:mr-1 {
margin-right: calc(var(--space-multiplier) * 1rem);
}

.sm\:mr-2 {
margin-right: calc(var(--space-multiplier) * 2rem);
}

.sm\:mr-3 {
margin-right: calc(var(--space-multiplier) * 3rem);
}

.sm\:mr-4 {
margin-right: calc(var(--space-multiplier) * 4rem);
}

.sm\:mr-5 {
margin-right: calc(var(--space-multiplier) * 5rem);
}

.sm\:mr-6 {
margin-right: calc(var(--space-multiplier) * 6rem);
}

.sm\:mr-auto {
margin-right: auto;
}

.sm\:mx-0 {
margin-left: 0;
margin-right: 0;
}

.sm\:mx-1 {
margin-left: calc(var(--space-multiplier) * 1rem);
margin-right: calc(var(--space-multiplier) * 1rem);
}

.sm\:mx-2 {
margin-left: calc(var(--space-multiplier) * 2rem);
margin-right: calc(var(--space-multiplier) * 2rem);
}

.sm\:mx-3 {
margin-left: calc(var(--space-multiplier) * 3rem);
margin-right: calc(var(--space-multiplier) * 3rem);
}

.sm\:mx-4 {
margin-left: calc(var(--space-multiplier) * 4rem);
margin-right: calc(var(--space-multiplier) * 4rem);
}

.sm\:mx-5 {
margin-left: calc(var(--space-multiplier) * 5rem);
margin-right: calc(var(--space-multiplier) * 5rem);
}

.sm\:mx-6 {
margin-left: calc(var(--space-multiplier) * 6rem);
margin-right: calc(var(--space-multiplier) * 6rem);
}

.sm\:mx-auto {
margin-left: auto;
margin-right: auto;
}

.sm\:my-0 {
margin-top: 0;
margin-bottom: 0;
}

.sm\:my-1 {
margin-top: calc(var(--space-multiplier) * 1rem);
margin-bottom: calc(var(--space-multiplier) * 1rem);
}

.sm\:my-2 {
margin-top: calc(var(--space-multiplier) * 2rem);
margin-bottom: calc(var(--space-multiplier) * 2rem);
}

.sm\:my-3 {
margin-top: calc(var(--space-multiplier) * 3rem);
margin-bottom: calc(var(--space-multiplier) * 3rem);
}

.sm\:my-4 {
margin-top: calc(var(--space-multiplier) * 4rem);
margin-bottom: calc(var(--space-multiplier) * 4rem);
}

.sm\:my-5 {
margin-top: calc(var(--space-multiplier) * 5rem);
margin-bottom: calc(var(--space-multiplier) * 5rem);
}

.sm\:my-6 {
margin-top: calc(var(--space-multiplier) * 6rem);
margin-bottom: calc(var(--space-multiplier) * 6rem);
}

.sm\:my-auto {
margin-top: auto;
margin-bottom: auto;
}
}

@media only screen and (min-width: 940px) {
.md\:m-0 {
margin: 0;
}

.md\:m-1 {
margin: calc(var(--space-multiplier) * 1rem);
}

.md\:m-2 {
margin: calc(var(--space-multiplier) * 2rem);
}

.md\:m-3 {
margin: calc(var(--space-multiplier) * 3rem);
}

.md\:m-4 {
margin: calc(var(--space-multiplier) * 4rem);
}

.md\:m-5 {
margin: calc(var(--space-multiplier) * 5rem);
}

.md\:m-6 {
margin: calc(var(--space-multiplier) * 6rem);
}

.md\:m-auto {
margin: auto;
}

.md\:mt-0 {
margin-top: 0;
}

.md\:mt-1 {
margin-top: calc(var(--space-multiplier) * 1rem);
}

.md\:mt-2 {
margin-top: calc(var(--space-multiplier) * 2rem);
}

.md\:mt-3 {
margin-top: calc(var(--space-multiplier) * 3rem);
}

.md\:mt-4 {
margin-top: calc(var(--space-multiplier) * 4rem);
}

.md\:mt-5 {
margin-top: calc(var(--space-multiplier) * 5rem);
}

.md\:mt-6 {
margin-top: calc(var(--space-multiplier) * 6rem);
}

.md\:mt-auto {
margin-top: auto;
}

.md\:mb-0 {
margin-bottom: 0;
}

.md\:mb-1 {
margin-bottom: calc(var(--space-multiplier) * 1rem);
}

.md\:mb-2 {
margin-bottom: calc(var(--space-multiplier) * 2rem);
}

.md\:mb-3 {
margin-bottom: calc(var(--space-multiplier) * 3rem);
}

.md\:mb-4 {
margin-bottom: calc(var(--space-multiplier) * 4rem);
}

.md\:mb-5 {
margin-bottom: calc(var(--space-multiplier) * 5rem);
}

.md\:mb-6 {
margin-bottom: calc(var(--space-multiplier) * 6rem);
}

.md\:mb-auto {
margin-bottom: auto;
}

.md\:ml-0 {
margin-left: 0;
}

.md\:ml-1 {
margin-left: calc(var(--space-multiplier) * 1rem);
}

.md\:ml-2 {
margin-left: calc(var(--space-multiplier) * 2rem);
}

.md\:ml-3 {
margin-left: calc(var(--space-multiplier) * 3rem);
}

.md\:ml-4 {
margin-left: calc(var(--space-multiplier) * 4rem);
}

.md\:ml-5 {
margin-left: calc(var(--space-multiplier) * 5rem);
}

.md\:ml-6 {
margin-left: calc(var(--space-multiplier) * 6rem);
}

.md\:ml-auto {
margin-left: auto;
}

.md\:mr-0 {
margin-right: 0;
}

.md\:mr-1 {
margin-right: calc(var(--space-multiplier) * 1rem);
}

.md\:mr-2 {
margin-right: calc(var(--space-multiplier) * 2rem);
}

.md\:mr-3 {
margin-right: calc(var(--space-multiplier) * 3rem);
}

.md\:mr-4 {
margin-right: calc(var(--space-multiplier) * 4rem);
}

.md\:mr-5 {
margin-right: calc(var(--space-multiplier) * 5rem);
}

.md\:mr-6 {
margin-right: calc(var(--space-multiplier) * 6rem);
}

.md\:mr-auto {
margin-right: auto;
}

.md\:mx-0 {
margin-left: 0;
margin-right: 0;
}

.md\:mx-1 {
margin-left: calc(var(--space-multiplier) * 1rem);
margin-right: calc(var(--space-multiplier) * 1rem);
}

.md\:mx-2 {
margin-left: calc(var(--space-multiplier) * 2rem);
margin-right: calc(var(--space-multiplier) * 2rem);
}

.md\:mx-3 {
margin-left: calc(var(--space-multiplier) * 3rem);
margin-right: calc(var(--space-multiplier) * 3rem);
}

.md\:mx-4 {
margin-left: calc(var(--space-multiplier) * 4rem);
margin-right: calc(var(--space-multiplier) * 4rem);
}

.md\:mx-5 {
margin-left: calc(var(--space-multiplier) * 5rem);
margin-right: calc(var(--space-multiplier) * 5rem);
}

.md\:mx-6 {
margin-left: calc(var(--space-multiplier) * 6rem);
margin-right: calc(var(--space-multiplier) * 6rem);
}

.md\:mx-auto {
margin-left: auto;
margin-right: auto;
}

.md\:my-0 {
margin-top: 0;
margin-bottom: 0;
}

.md\:my-1 {
margin-top: calc(var(--space-multiplier) * 1rem);
margin-bottom: calc(var(--space-multiplier) * 1rem);
}

.md\:my-2 {
margin-top: calc(var(--space-multiplier) * 2rem);
margin-bottom: calc(var(--space-multiplier) * 2rem);
}

.md\:my-3 {
margin-top: calc(var(--space-multiplier) * 3rem);
margin-bottom: calc(var(--space-multiplier) * 3rem);
}

.md\:my-4 {
margin-top: calc(var(--space-multiplier) * 4rem);
margin-bottom: calc(var(--space-multiplier) * 4rem);
}

.md\:my-5 {
margin-top: calc(var(--space-multiplier) * 5rem);
margin-bottom: calc(var(--space-multiplier) * 5rem);
}

.md\:my-6 {
margin-top: calc(var(--space-multiplier) * 6rem);
margin-bottom: calc(var(--space-multiplier) * 6rem);
}

.md\:my-auto {
margin-top: auto;
margin-bottom: auto;
}
}

@media only screen and (min-width: 1240px) {
.lg\:m-0 {
margin: 0;
}

.lg\:m-1 {
margin: calc(var(--space-multiplier) * 1rem);
}

.lg\:m-2 {
margin: calc(var(--space-multiplier) * 2rem);
}

.lg\:m-3 {
margin: calc(var(--space-multiplier) * 3rem);
}

.lg\:m-4 {
margin: calc(var(--space-multiplier) * 4rem);
}

.lg\:m-5 {
margin: calc(var(--space-multiplier) * 5rem);
}

.lg\:m-6 {
margin: calc(var(--space-multiplier) * 6rem);
}

.lg\:m-auto {
margin: auto;
}

.lg\:mt-0 {
margin-top: 0;
}

.lg\:mt-1 {
margin-top: calc(var(--space-multiplier) * 1rem);
}

.lg\:mt-2 {
margin-top: calc(var(--space-multiplier) * 2rem);
}

.lg\:mt-3 {
margin-top: calc(var(--space-multiplier) * 3rem);
}

.lg\:mt-4 {
margin-top: calc(var(--space-multiplier) * 4rem);
}

.lg\:mt-5 {
margin-top: calc(var(--space-multiplier) * 5rem);
}

.lg\:mt-6 {
margin-top: calc(var(--space-multiplier) * 6rem);
}

.lg\:mt-auto {
margin-top: auto;
}

.lg\:mb-0 {
margin-bottom: 0;
}

.lg\:mb-1 {
margin-bottom: calc(var(--space-multiplier) * 1rem);
}

.lg\:mb-2 {
margin-bottom: calc(var(--space-multiplier) * 2rem);
}

.lg\:mb-3 {
margin-bottom: calc(var(--space-multiplier) * 3rem);
}

.lg\:mb-4 {
margin-bottom: calc(var(--space-multiplier) * 4rem);
}

.lg\:mb-5 {
margin-bottom: calc(var(--space-multiplier) * 5rem);
}

.lg\:mb-6 {
margin-bottom: calc(var(--space-multiplier) * 6rem);
}

.lg\:mb-auto {
margin-bottom: auto;
}

.lg\:ml-0 {
margin-left: 0;
}

.lg\:ml-1 {
margin-left: calc(var(--space-multiplier) * 1rem);
}

.lg\:ml-2 {
margin-left: calc(var(--space-multiplier) * 2rem);
}

.lg\:ml-3 {
margin-left: calc(var(--space-multiplier) * 3rem);
}

.lg\:ml-4 {
margin-left: calc(var(--space-multiplier) * 4rem);
}

.lg\:ml-5 {
margin-left: calc(var(--space-multiplier) * 5rem);
}

.lg\:ml-6 {
margin-left: calc(var(--space-multiplier) * 6rem);
}

.lg\:ml-auto {
margin-left: auto;
}

.lg\:mr-0 {
margin-right: 0;
}

.lg\:mr-1 {
margin-right: calc(var(--space-multiplier) * 1rem);
}

.lg\:mr-2 {
margin-right: calc(var(--space-multiplier) * 2rem);
}

.lg\:mr-3 {
margin-right: calc(var(--space-multiplier) * 3rem);
}

.lg\:mr-4 {
margin-right: calc(var(--space-multiplier) * 4rem);
}

.lg\:mr-5 {
margin-right: calc(var(--space-multiplier) * 5rem);
}

.lg\:mr-6 {
margin-right: calc(var(--space-multiplier) * 6rem);
}

.lg\:mr-auto {
margin-right: auto;
}

.lg\:mx-0 {
margin-left: 0;
margin-right: 0;
}

.lg\:mx-1 {
margin-left: calc(var(--space-multiplier) * 1rem);
margin-right: calc(var(--space-multiplier) * 1rem);
}

.lg\:mx-2 {
margin-left: calc(var(--space-multiplier) * 2rem);
margin-right: calc(var(--space-multiplier) * 2rem);
}

.lg\:mx-3 {
margin-left: calc(var(--space-multiplier) * 3rem);
margin-right: calc(var(--space-multiplier) * 3rem);
}

.lg\:mx-4 {
margin-left: calc(var(--space-multiplier) * 4rem);
margin-right: calc(var(--space-multiplier) * 4rem);
}

.lg\:mx-5 {
margin-left: calc(var(--space-multiplier) * 5rem);
margin-right: calc(var(--space-multiplier) * 5rem);
}

.lg\:mx-6 {
margin-left: calc(var(--space-multiplier) * 6rem);
margin-right: calc(var(--space-multiplier) * 6rem);
}

.lg\:mx-auto {
margin-left: auto;
margin-right: auto;
}

.lg\:my-0 {
margin-top: 0;
margin-bottom: 0;
}

.lg\:my-1 {
margin-top: calc(var(--space-multiplier) * 1rem);
margin-bottom: calc(var(--space-multiplier) * 1rem);
}

.lg\:my-2 {
margin-top: calc(var(--space-multiplier) * 2rem);
margin-bottom: calc(var(--space-multiplier) * 2rem);
}

.lg\:my-3 {
margin-top: calc(var(--space-multiplier) * 3rem);
margin-bottom: calc(var(--space-multiplier) * 3rem);
}

.lg\:my-4 {
margin-top: calc(var(--space-multiplier) * 4rem);
margin-bottom: calc(var(--space-multiplier) * 4rem);
}

.lg\:my-5 {
margin-top: calc(var(--space-multiplier) * 5rem);
margin-bottom: calc(var(--space-multiplier) * 5rem);
}

.lg\:my-6 {
margin-top: calc(var(--space-multiplier) * 6rem);
margin-bottom: calc(var(--space-multiplier) * 6rem);
}

.lg\:my-auto {
margin-top: auto;
margin-bottom: auto;
}
}

.p-0 {
padding: 0;
}

.p-1 {
padding: calc(var(--space-multiplier) * 1rem);
}

.p-2 {
padding: calc(var(--space-multiplier) * 2rem);
}

.p-3 {
padding: calc(var(--space-multiplier) * 3rem);
}

.p-4 {
padding: calc(var(--space-multiplier) * 4rem);
}

.p-5 {
padding: calc(var(--space-multiplier) * 5rem);
}

.p-6 {
padding: calc(var(--space-multiplier) * 6rem);
}

.pt-0 {
padding-top: 0;
}

.pt-1 {
padding-top: calc(var(--space-multiplier) * 1rem);
}

.pt-2 {
padding-top: calc(var(--space-multiplier) * 2rem);
}

.pt-3 {
padding-top: calc(var(--space-multiplier) * 3rem);
}

.pt-4 {
padding-top: calc(var(--space-multiplier) * 4rem);
}

.pt-5 {
padding-top: calc(var(--space-multiplier) * 5rem);
}

.pt-6 {
padding-top: calc(var(--space-multiplier) * 6rem);
}

.pb-0 {
padding-bottom: 0;
}

.pb-1 {
padding-bottom: calc(var(--space-multiplier) * 1rem);
}

.pb-2 {
padding-bottom: calc(var(--space-multiplier) * 2rem);
}

.pb-3 {
padding-bottom: calc(var(--space-multiplier) * 3rem);
}

.pb-4 {
padding-bottom: calc(var(--space-multiplier) * 4rem);
}

.pb-5 {
padding-bottom: calc(var(--space-multiplier) * 5rem);
}

.pb-6 {
padding-bottom: calc(var(--space-multiplier) * 6rem);
}

.pl-0 {
padding-left: 0;
}

.pl-1 {
padding-left: calc(var(--space-multiplier) * 1rem);
}

.pl-2 {
padding-left: calc(var(--space-multiplier) * 2rem);
}

.pl-3 {
padding-left: calc(var(--space-multiplier) * 3rem);
}

.pl-4 {
padding-left: calc(var(--space-multiplier) * 4rem);
}

.pl-5 {
padding-left: calc(var(--space-multiplier) * 5rem);
}

.pl-6 {
padding-left: calc(var(--space-multiplier) * 6rem);
}

.pr-0 {
padding-right: 0;
}

.pr-1 {
padding-right: calc(var(--space-multiplier) * 1rem);
}

.pr-2 {
padding-right: calc(var(--space-multiplier) * 2rem);
}

.pr-3 {
padding-right: calc(var(--space-multiplier) * 3rem);
}

.pr-4 {
padding-right: calc(var(--space-multiplier) * 4rem);
}

.pr-5 {
padding-right: calc(var(--space-multiplier) * 5rem);
}

.pr-6 {
padding-right: calc(var(--space-multiplier) * 6rem);
}

.px-0 {
padding-left: 0;
padding-right: 0;
}

.px-1 {
padding-left: calc(var(--space-multiplier) * 1rem);
padding-right: calc(var(--space-multiplier) * 1rem);
}

.px-2 {
padding-left: calc(var(--space-multiplier) * 2rem);
padding-right: calc(var(--space-multiplier) * 2rem);
}

.px-3 {
padding-left: calc(var(--space-multiplier) * 3rem);
padding-right: calc(var(--space-multiplier) * 3rem);
}

.px-4 {
padding-left: calc(var(--space-multiplier) * 4rem);
padding-right: calc(var(--space-multiplier) * 4rem);
}

.px-5 {
padding-left: calc(var(--space-multiplier) * 5rem);
padding-right: calc(var(--space-multiplier) * 5rem);
}

.px-6 {
padding-left: calc(var(--space-multiplier) * 6rem);
padding-right: calc(var(--space-multiplier) * 6rem);
}

.py-0 {
padding-top: 0;
padding-bottom: 0;
}

.py-1 {
padding-top: calc(var(--space-multiplier) * 1rem);
padding-bottom: calc(var(--space-multiplier) * 1rem);
}

.py-2 {
padding-top: calc(var(--space-multiplier) * 2rem);
padding-bottom: calc(var(--space-multiplier) * 2rem);
}

.py-3 {
padding-top: calc(var(--space-multiplier) * 3rem);
padding-bottom: calc(var(--space-multiplier) * 3rem);
}

.py-4 {
padding-top: calc(var(--space-multiplier) * 4rem);
padding-bottom: calc(var(--space-multiplier) * 4rem);
}

.py-5 {
padding-top: calc(var(--space-multiplier) * 5rem);
padding-bottom: calc(var(--space-multiplier) * 5rem);
}

.py-6 {
padding-top: calc(var(--space-multiplier) * 6rem);
padding-bottom: calc(var(--space-multiplier) * 6rem);
}

@media only screen and (min-width: 640px) {
.sm\:p-0 {
padding: 0;
}

.sm\:p-1 {
padding: calc(var(--space-multiplier) * 1rem);
}

.sm\:p-2 {
padding: calc(var(--space-multiplier) * 2rem);
}

.sm\:p-3 {
padding: calc(var(--space-multiplier) * 3rem);
}

.sm\:p-4 {
padding: calc(var(--space-multiplier) * 4rem);
}

.sm\:p-5 {
padding: calc(var(--space-multiplier) * 5rem);
}

.sm\:p-6 {
padding: calc(var(--space-multiplier) * 6rem);
}

.sm\:pt-0 {
padding-top: 0;
}

.sm\:pt-1 {
padding-top: calc(var(--space-multiplier) * 1rem);
}

.sm\:pt-2 {
padding-top: calc(var(--space-multiplier) * 2rem);
}

.sm\:pt-3 {
padding-top: calc(var(--space-multiplier) * 3rem);
}

.sm\:pt-4 {
padding-top: calc(var(--space-multiplier) * 4rem);
}

.sm\:pt-5 {
padding-top: calc(var(--space-multiplier) * 5rem);
}

.sm\:pt-6 {
padding-top: calc(var(--space-multiplier) * 6rem);
}

.sm\:pb-0 {
padding-bottom: 0;
}

.sm\:pb-1 {
padding-bottom: calc(var(--space-multiplier) * 1rem);
}

.sm\:pb-2 {
padding-bottom: calc(var(--space-multiplier) * 2rem);
}

.sm\:pb-3 {
padding-bottom: calc(var(--space-multiplier) * 3rem);
}

.sm\:pb-4 {
padding-bottom: calc(var(--space-multiplier) * 4rem);
}

.sm\:pb-5 {
padding-bottom: calc(var(--space-multiplier) * 5rem);
}

.sm\:pb-6 {
padding-bottom: calc(var(--space-multiplier) * 6rem);
}

.sm\:pl-0 {
padding-left: 0;
}

.sm\:pl-1 {
padding-left: calc(var(--space-multiplier) * 1rem);
}

.sm\:pl-2 {
padding-left: calc(var(--space-multiplier) * 2rem);
}

.sm\:pl-3 {
padding-left: calc(var(--space-multiplier) * 3rem);
}

.sm\:pl-4 {
padding-left: calc(var(--space-multiplier) * 4rem);
}

.sm\:pl-5 {
padding-left: calc(var(--space-multiplier) * 5rem);
}

.sm\:pl-6 {
padding-left: calc(var(--space-multiplier) * 6rem);
}

.sm\:pr-0 {
padding-right: 0;
}

.sm\:pr-1 {
padding-right: calc(var(--space-multiplier) * 1rem);
}

.sm\:pr-2 {
padding-right: calc(var(--space-multiplier) * 2rem);
}

.sm\:pr-3 {
padding-right: calc(var(--space-multiplier) * 3rem);
}

.sm\:pr-4 {
padding-right: calc(var(--space-multiplier) * 4rem);
}

.sm\:pr-5 {
padding-right: calc(var(--space-multiplier) * 5rem);
}

.sm\:pr-6 {
padding-right: calc(var(--space-multiplier) * 6rem);
}

.sm\:px-0 {
padding-left: 0;
padding-right: 0;
}

.sm\:px-1 {
padding-left: calc(var(--space-multiplier) * 1rem);
padding-right: calc(var(--space-multiplier) * 1rem);
}

.sm\:px-2 {
padding-left: calc(var(--space-multiplier) * 2rem);
padding-right: calc(var(--space-multiplier) * 2rem);
}

.sm\:px-3 {
padding-left: calc(var(--space-multiplier) * 3rem);
padding-right: calc(var(--space-multiplier) * 3rem);
}

.sm\:px-4 {
padding-left: calc(var(--space-multiplier) * 4rem);
padding-right: calc(var(--space-multiplier) * 4rem);
}

.sm\:px-5 {
padding-left: calc(var(--space-multiplier) * 5rem);
padding-right: calc(var(--space-multiplier) * 5rem);
}

.sm\:px-6 {
padding-left: calc(var(--space-multiplier) * 6rem);
padding-right: calc(var(--space-multiplier) * 6rem);
}

.sm\:py-0 {
padding-top: 0;
padding-bottom: 0;
}

.sm\:py-1 {
padding-top: calc(var(--space-multiplier) * 1rem);
padding-bottom: calc(var(--space-multiplier) * 1rem);
}

.sm\:py-2 {
padding-top: calc(var(--space-multiplier) * 2rem);
padding-bottom: calc(var(--space-multiplier) * 2rem);
}

.sm\:py-3 {
padding-top: calc(var(--space-multiplier) * 3rem);
padding-bottom: calc(var(--space-multiplier) * 3rem);
}

.sm\:py-4 {
padding-top: calc(var(--space-multiplier) * 4rem);
padding-bottom: calc(var(--space-multiplier) * 4rem);
}

.sm\:py-5 {
padding-top: calc(var(--space-multiplier) * 5rem);
padding-bottom: calc(var(--space-multiplier) * 5rem);
}

.sm\:py-6 {
padding-top: calc(var(--space-multiplier) * 6rem);
padding-bottom: calc(var(--space-multiplier) * 6rem);
}
}

@media only screen and (min-width: 940px) {
.md\:p-0 {
padding: 0;
}

.md\:p-1 {
padding: calc(var(--space-multiplier) * 1rem);
}

.md\:p-2 {
padding: calc(var(--space-multiplier) * 2rem);
}

.md\:p-3 {
padding: calc(var(--space-multiplier) * 3rem);
}

.md\:p-4 {
padding: calc(var(--space-multiplier) * 4rem);
}

.md\:p-5 {
padding: calc(var(--space-multiplier) * 5rem);
}

.md\:p-6 {
padding: calc(var(--space-multiplier) * 6rem);
}

.md\:pt-0 {
padding-top: 0;
}

.md\:pt-1 {
padding-top: calc(var(--space-multiplier) * 1rem);
}

.md\:pt-2 {
padding-top: calc(var(--space-multiplier) * 2rem);
}

.md\:pt-3 {
padding-top: calc(var(--space-multiplier) * 3rem);
}

.md\:pt-4 {
padding-top: calc(var(--space-multiplier) * 4rem);
}

.md\:pt-5 {
padding-top: calc(var(--space-multiplier) * 5rem);
}

.md\:pt-6 {
padding-top: calc(var(--space-multiplier) * 6rem);
}

.md\:pb-0 {
padding-bottom: 0;
}

.md\:pb-1 {
padding-bottom: calc(var(--space-multiplier) * 1rem);
}

.md\:pb-2 {
padding-bottom: calc(var(--space-multiplier) * 2rem);
}

.md\:pb-3 {
padding-bottom: calc(var(--space-multiplier) * 3rem);
}

.md\:pb-4 {
padding-bottom: calc(var(--space-multiplier) * 4rem);
}

.md\:pb-5 {
padding-bottom: calc(var(--space-multiplier) * 5rem);
}

.md\:pb-6 {
padding-bottom: calc(var(--space-multiplier) * 6rem);
}

.md\:pl-0 {
padding-left: 0;
}

.md\:pl-1 {
padding-left: calc(var(--space-multiplier) * 1rem);
}

.md\:pl-2 {
padding-left: calc(var(--space-multiplier) * 2rem);
}

.md\:pl-3 {
padding-left: calc(var(--space-multiplier) * 3rem);
}

.md\:pl-4 {
padding-left: calc(var(--space-multiplier) * 4rem);
}

.md\:pl-5 {
padding-left: calc(var(--space-multiplier) * 5rem);
}

.md\:pl-6 {
padding-left: calc(var(--space-multiplier) * 6rem);
}

.md\:pr-0 {
padding-right: 0;
}

.md\:pr-1 {
padding-right: calc(var(--space-multiplier) * 1rem);
}

.md\:pr-2 {
padding-right: calc(var(--space-multiplier) * 2rem);
}

.md\:pr-3 {
padding-right: calc(var(--space-multiplier) * 3rem);
}

.md\:pr-4 {
padding-right: calc(var(--space-multiplier) * 4rem);
}

.md\:pr-5 {
padding-right: calc(var(--space-multiplier) * 5rem);
}

.md\:pr-6 {
padding-right: calc(var(--space-multiplier) * 6rem);
}

.md\:px-0 {
padding-left: 0;
padding-right: 0;
}

.md\:px-1 {
padding-left: calc(var(--space-multiplier) * 1rem);
padding-right: calc(var(--space-multiplier) * 1rem);
}

.md\:px-2 {
padding-left: calc(var(--space-multiplier) * 2rem);
padding-right: calc(var(--space-multiplier) * 2rem);
}

.md\:px-3 {
padding-left: calc(var(--space-multiplier) * 3rem);
padding-right: calc(var(--space-multiplier) * 3rem);
}

.md\:px-4 {
padding-left: calc(var(--space-multiplier) * 4rem);
padding-right: calc(var(--space-multiplier) * 4rem);
}

.md\:px-5 {
padding-left: calc(var(--space-multiplier) * 5rem);
padding-right: calc(var(--space-multiplier) * 5rem);
}

.md\:px-6 {
padding-left: calc(var(--space-multiplier) * 6rem);
padding-right: calc(var(--space-multiplier) * 6rem);
}

.md\:py-0 {
padding-top: 0;
padding-bottom: 0;
}

.md\:py-1 {
padding-top: calc(var(--space-multiplier) * 1rem);
padding-bottom: calc(var(--space-multiplier) * 1rem);
}

.md\:py-2 {
padding-top: calc(var(--space-multiplier) * 2rem);
padding-bottom: calc(var(--space-multiplier) * 2rem);
}

.md\:py-3 {
padding-top: calc(var(--space-multiplier) * 3rem);
padding-bottom: calc(var(--space-multiplier) * 3rem);
}

.md\:py-4 {
padding-top: calc(var(--space-multiplier) * 4rem);
padding-bottom: calc(var(--space-multiplier) * 4rem);
}

.md\:py-5 {
padding-top: calc(var(--space-multiplier) * 5rem);
padding-bottom: calc(var(--space-multiplier) * 5rem);
}

.md\:py-6 {
padding-top: calc(var(--space-multiplier) * 6rem);
padding-bottom: calc(var(--space-multiplier) * 6rem);
}
}

@media only screen and (min-width: 1240px) {
.lg\:p-0 {
padding: 0;
}

.lg\:p-1 {
padding: calc(var(--space-multiplier) * 1rem);
}

.lg\:p-2 {
padding: calc(var(--space-multiplier) * 2rem);
}

.lg\:p-3 {
padding: calc(var(--space-multiplier) * 3rem);
}

.lg\:p-4 {
padding: calc(var(--space-multiplier) * 4rem);
}

.lg\:p-5 {
padding: calc(var(--space-multiplier) * 5rem);
}

.lg\:p-6 {
padding: calc(var(--space-multiplier) * 6rem);
}

.lg\:pt-0 {
padding-top: 0;
}

.lg\:pt-1 {
padding-top: calc(var(--space-multiplier) * 1rem);
}

.lg\:pt-2 {
padding-top: calc(var(--space-multiplier) * 2rem);
}

.lg\:pt-3 {
padding-top: calc(var(--space-multiplier) * 3rem);
}

.lg\:pt-4 {
padding-top: calc(var(--space-multiplier) * 4rem);
}

.lg\:pt-5 {
padding-top: calc(var(--space-multiplier) * 5rem);
}

.lg\:pt-6 {
padding-top: calc(var(--space-multiplier) * 6rem);
}

.lg\:pb-0 {
padding-bottom: 0;
}

.lg\:pb-1 {
padding-bottom: calc(var(--space-multiplier) * 1rem);
}

.lg\:pb-2 {
padding-bottom: calc(var(--space-multiplier) * 2rem);
}

.lg\:pb-3 {
padding-bottom: calc(var(--space-multiplier) * 3rem);
}

.lg\:pb-4 {
padding-bottom: calc(var(--space-multiplier) * 4rem);
}

.lg\:pb-5 {
padding-bottom: calc(var(--space-multiplier) * 5rem);
}

.lg\:pb-6 {
padding-bottom: calc(var(--space-multiplier) * 6rem);
}

.lg\:pl-0 {
padding-left: 0;
}

.lg\:pl-1 {
padding-left: calc(var(--space-multiplier) * 1rem);
}

.lg\:pl-2 {
padding-left: calc(var(--space-multiplier) * 2rem);
}

.lg\:pl-3 {
padding-left: calc(var(--space-multiplier) * 3rem);
}

.lg\:pl-4 {
padding-left: calc(var(--space-multiplier) * 4rem);
}

.lg\:pl-5 {
padding-left: calc(var(--space-multiplier) * 5rem);
}

.lg\:pl-6 {
padding-left: calc(var(--space-multiplier) * 6rem);
}

.lg\:pr-0 {
padding-right: 0;
}

.lg\:pr-1 {
padding-right: calc(var(--space-multiplier) * 1rem);
}

.lg\:pr-2 {
padding-right: calc(var(--space-multiplier) * 2rem);
}

.lg\:pr-3 {
padding-right: calc(var(--space-multiplier) * 3rem);
}

.lg\:pr-4 {
padding-right: calc(var(--space-multiplier) * 4rem);
}

.lg\:pr-5 {
padding-right: calc(var(--space-multiplier) * 5rem);
}

.lg\:pr-6 {
padding-right: calc(var(--space-multiplier) * 6rem);
}

.lg\:px-0 {
padding-left: 0;
padding-right: 0;
}

.lg\:px-1 {
padding-left: calc(var(--space-multiplier) * 1rem);
padding-right: calc(var(--space-multiplier) * 1rem);
}

.lg\:px-2 {
padding-left: calc(var(--space-multiplier) * 2rem);
padding-right: calc(var(--space-multiplier) * 2rem);
}

.lg\:px-3 {
padding-left: calc(var(--space-multiplier) * 3rem);
padding-right: calc(var(--space-multiplier) * 3rem);
}

.lg\:px-4 {
padding-left: calc(var(--space-multiplier) * 4rem);
padding-right: calc(var(--space-multiplier) * 4rem);
}

.lg\:px-5 {
padding-left: calc(var(--space-multiplier) * 5rem);
padding-right: calc(var(--space-multiplier) * 5rem);
}

.lg\:px-6 {
padding-left: calc(var(--space-multiplier) * 6rem);
padding-right: calc(var(--space-multiplier) * 6rem);
}

.lg\:py-0 {
padding-top: 0;
padding-bottom: 0;
}

.lg\:py-1 {
padding-top: calc(var(--space-multiplier) * 1rem);
padding-bottom: calc(var(--space-multiplier) * 1rem);
}

.lg\:py-2 {
padding-top: calc(var(--space-multiplier) * 2rem);
padding-bottom: calc(var(--space-multiplier) * 2rem);
}

.lg\:py-3 {
padding-top: calc(var(--space-multiplier) * 3rem);
padding-bottom: calc(var(--space-multiplier) * 3rem);
}

.lg\:py-4 {
padding-top: calc(var(--space-multiplier) * 4rem);
padding-bottom: calc(var(--space-multiplier) * 4rem);
}

.lg\:py-5 {
padding-top: calc(var(--space-multiplier) * 5rem);
padding-bottom: calc(var(--space-multiplier) * 5rem);
}

.lg\:py-6 {
padding-top: calc(var(--space-multiplier) * 6rem);
padding-bottom: calc(var(--space-multiplier) * 6rem);
}
}

/* ==========================================================================
Component: Progress Form
========================================================================== */

.progress-form {
background-color: hsl(var(--white));
border-radius: 4px;
box-shadow: 0 1px 3px 0 rgb(0, 0, 0, 10%),
0 1px 2px -1px rgb(0, 0, 0, 10%);
}

/* Tabs
========================================================================== */

.progress-form__tabs {
column-gap: 0;
}

@media only screen and (min-width: 640px) {
.progress-form__tabs {
column-gap: 0.2rem;
}
}

.progress-form__tabs-item {
--button-background-color: transparent;
--button-border-width: 5px;
--button-border-style: solid;
--button-border-color:  hsl(var(--gray-300));
--button-border: var(--button-border-width)
var(--button-border-style)
var(--button-border-color);
--button-border-radius: 0;
--button-height: 1.4;
--button-text-align: left;
--button-text-color: hsl(var(--blue-900));
--button-text-font-size: 1.4rem;
--button-text-letter-spacing: 0.025em;
--button-text-shadow: none;

background-color: var(--button-background-color);
border: 0;
border-top: var(--button-border);
border-radius: var(--button-border-radius);
color: var(--button-text-color);
display: none;
font-size: var(--button-text-font-size);
letter-spacing: var(--button-text-letter-spacing);
line-height: var(--button-height);
position: relative;
text-align: var(--button-text-align);
text-shadow: var(--button-text-shadow);
transition: color 0.2s ease-in-out;
white-space: normal;
}

.progress-form__tabs-item:active {transform: none;}

.progress-form__tabs-item:hover,.progress-form__tabs-item:focus {background-color: inherit;color: inherit;}

.progress-form__tabs-item::before {background-color: #003568;content: "";height: 5px;left: 0;position: absolute;
top: -5px;transition: width 0.2s ease-in-out;width: 0;}

.progress-form__tabs-item > .step {color: #01366c;font-size: 1.2rem;font-weight: 600;text-transform: uppercase;
transition: color 0.2s ease-in-out;}

.Button-payment {display: flex;align-items: center;margin: 20px 0;padding: 0 !important;justify-content: left;}
.Button-payment button {line-height: normal !important;margin: 0 10px !important;line-height: 1.5 !important;padding: 9px 16px !important;}

.Button-payment #back {margin-left: 0 !important;}

@media only screen and (min-width: 640px) {.progress-form__tabs-item {display: block;}

}

/* --- Current Step --- */

.progress-form__tabs-item[aria-selected="true"] {display: block;}

.progress-form__tabs-item[aria-selected="true"]::before {width: 50%;}

.progress-form__tabs-item[aria-selected="true"] > .step {color: hsl(var(--light-blue-500));}

/* --- Disabled Step --- */

@media only screen and (min-width: 640px) {

.progress-form__tabs-item[aria-disabled="true"] {
--button-background-color: transparent;
--button-text-color: hsl(var(--blue-100));

background-color: var(--button-background-color);
color: var(--button-text-color);
}
}

/* --- Completed Step --- */

.progress-form__tabs-item[data-complete="true"]::before {width: 100%;}

.progress-form__tabs-item[data-complete="true"] > .step {color: hsl(var(--light-blue-500));}



#progress-form__panel-2 > div:nth-child(17) > label:nth-child(3) {padding-top: 10px;}

section#progress-form__panel-3 h2 {text-align: center;margin: 0;}

section#progress-form__panel-3 p {text-align: center;}

/* section#progress-form__panel-3 .mt-3.form__field input {width: auto !important;display: inline;padding: 0 5px;margin: 0 4px;
height: 34px;border-radius: 0;border-top: 0;border-left: 0;border-right: 0;padding-bottom: 0;border-radius: 0;} */

section#progress-form__panel-3 .mt-3.form__field input {border-radius: 5px;}

#progress-form__panel-3 > div:nth-child(5) > p:nth-child(16) {display: none;}

#progress-form__panel-3 > div:nth-child(5) > p:nth-child(17) {display: none;}

#progress-form__panel-3 > div:nth-child(5) > p:nth-child(19) {display: none;}

#progress-form__panel-3 > div:nth-child(6) {display: flex;flex-wrap: inherit;}

#progress-form__panel-3 > div:nth-child(6) {display: flex !important;flex-wrap: inherit;margin-bottom: 10px;}

#progress-form__panel-3 > div:nth-child(6) label {width: auto;max-width: inherit;display: table;}

#progress-form__panel-3 > div:nth-child(6) input#pdfsignature {border-top: 0;border-left: 0;border-right: 0;padding-bottom: 0;border-radius: 0;height: 20px;}

ul {margin: 0;padding: 0;}

ul li {list-style: none;}

#progress-form__panel-3 > div:nth-child(7) > ul > li:nth-child(3) {padding-top: 0;margin-top: 0;}

#progress-form__panel-3 > div:nth-child(7) > div:nth-child(2) {display: flex !important;}

#progress-form__panel-3 > div:nth-child(7) > div:nth-child(2) input.pdfsignature {border-top: 0;border-left: 0;border-right: 0;padding-bottom: 0;border-radius: 0;height: 20px;}

#progress-form__panel-3 > div:nth-child(7) > div:nth-child(3) p {text-align: left;}

section#progress-form__panel-3 .mt-3.form__field {width: auto;text-align: justify;font-size: 14px;margin-top: 10px;}

section#progress-form__panel-3 .mt-3.form__field span.pdfdate {padding-left: 1px;padding-right: 4px;}

.willWitnessesEvent p.duress{text-align: justify !important;}

div#divToHide ul {font-size: 14px;}

label.sign {padding: 0;}

label.middle-signt {padding: 0;}

label.signature {padding-top: 25px;}

.signature  span.signspace {padding-right: 20px;}

.validateLegalWill label {padding-top: 20px;}

#progress-form__panel-2 > div:nth-child(6) > label {padding-top: 20px;}

button#emailbutton {white-space: normal;line-height: 1.5;}

#progress-form__panel-2 input {box-shadow: 0 1px 3px rgba(50,50,93,.15),0 1px 0 rgba(0,0,0,.02);border: 0;}

#progress-form {background-color: #f8f9fe;}

#progress-form__panel-2 .sm\:d-grid .mt-3 #state {box-shadow: 0 1px 3px rgba(50,50,93,.15),0 1px 0 rgba(0,0,0,.02);
border: 0;background-color: #fff;}

button:hover {background-color: hsl(var(--light-blue-900));color: hsl(var(--white));box-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);-webkit-transform: translateY(-1px);transform: translateY(-1px);}

button {background-color: #5b9bd5;position: relative;text-transform: none;-webkit-transition: all .15s ease;transition: all .15s ease;letter-spacing: .025em;will-change: transform;}

.form-header-group .form-header, .form-header-group .form-subHeader {color: #32325d !important;}

ul.form-section .form-section-closed {margin: 0;}

.progress-form__tabs button:hover {transform: none;box-shadow: none;background: transparent !important;border-color: #dae2ec;
}

#isNatural {box-shadow: 0 1px 3px rgba(50,50,93,.15),0 1px 0 rgba(0,0,0,.02);border: 0;background-color: #fff;}

.Button-payment button {background-color: #5b9bd5 !important;font-weight: normal !important;line-height: 1.5 !important;}

#back {color: #fff !important;}

.Button-payment {position: relative;}

#emailPopup.active {opacity: 1;visibility: visible;transform: inherit;float: right;position: absolute;right: 0;left: 0;
top: 50%;margin: 0 auto;}

body {position: relative;}

.form__choice-wrapper input {border: var(--field-border) !important;/* background-color: hsl(var(--form-accent-color)); */
box-shadow: none !important;}

#emailPopup.active {transform: translate(-135%, -162%) !important;}

.Button-payment a {text-decoration: none;}

.sm\:justify-end.mt-4 #backButton {background-color: #5b9bd5;position: relative;text-transform: none;transition: all .15s ease;letter-spacing: .025em;will-change: transform;color: #fff;}

.d-flex {column-gap: calc(var(--grid-spacer-width) * 1);}

button:hover, button:focus {color: #fff;background-color: #5b9bd5;border-color: #4578a6;}

#validate .button--simple {background-color: #5b9bd5;position: relative;text-transform: none;transition: all .15s ease;
letter-spacing: .025em;will-change: transform;color: #fff;}

#emailPopup #emailForm button.pop-form {transition: inherit !important;}

div#center .checks-payable-info {margin-top: 70px !important;}

.contribution-descripti {padding: 10px 40px !important;}

body {background-color: #fff;}

.container {background: transparent !important;}

#progress-form {background-color: #f8f9fe;border: 1px dotted #003768;}

[type="radio"]:checked, [type="checkbox"]:checked {background-color: #01386d;}

:focus-visible {outline: 0;}

#progress-form__panel-4 .titles > p:nth-child(2) {font-size: 1em;color: rgb(0, 0, 0);font-weight: 500;line-height: 1.6;
font-family: "Inter", sans-serif;font-optical-sizing: auto;font-style: normal;font-variation-settings: "slnt" 0;}

#progress-form__panel-4 .titles > p:nth-child(2) br {display: none;}

#progress-form__panel-4 .titles > h2:nth-child(1) {font-size: 2em;color: rgb(0, 0, 0);}

#progress-form__panel-1 > div:nth-child(1) > p:nth-child(3) {padding-top: 0;margin-top: 0;font-size: 1em;color: rgb(0, 0, 0);
}

#progress-form__panel-1 > div:nth-child(1) > h1:nth-child(2) {padding-bottom: 0;margin-bottom: 0;color: rgb(0, 0, 0);
font-size: 2em;}

hr {height: 1px;color: #000;border-bottom: 1px solid #000;}


/* #progress-form {background-image: url('https://static.vecteezy.com/system/resources/previews/020/525/157/large_2x/abstract-background-design-background-texture-design-with-abstract-style-creative-illustration-for-advertising-posters-business-cards-flyers-websites-banners-covers-landings-pages-etc-vector.jpg');background-size: cover;} */


body {background-color: #fff !important;}

.progress-form__tabs-item {--button-border-color: white !important;}

.progress-form__tabs-item[aria-disabled="true"] {color: #023465;}

.progress-form__tabs button:hover {border-color: #fff;}

#progress-form {
/* background-image: url('https://static.vecteezy.com/system/resources/previews/020/525/157/large_2x/abstract-background-design-background-texture-design-with-abstract-style-creative-illustration-for-advertising-posters-business-cards-flyers-websites-banners-covers-landings-pages-etc-vector.jpg'); */
background-size: cover;background-color: #deebf7 !important;}

#progress-form__panel-6 {background-color: #fff;border-radius: 8px;padding: 30px;}

.tooltip {position: relative;display: inline-block;}

.tooltip .tooltiptext {visibility: hidden;width: 500px;background-color: #2f5272;color: #fff;text-align: justify;border-radius: 6px;padding: 10px;position: absolute;z-index: 1;font-size: 12px;left: 432px;line-height: 20px;
font-weight: normal;bottom: 11%;}

.tooltip:hover .tooltiptext {visibility: visible;}

.Choose-form-button ul li {text-align: justify;}

span#pdfsurvives {text-transform: lowercase;}

#progress-form__panel-1 .mt-3.form__field.header-section-top .mt-3.form__field.header-section {

	margin: 0 auto;
}



/* front-page */

/*header*/
.front-container {max-width: 100% !important;background-color: #ffffff !important;margin-top: 0px !important;}

.front-container form#progress-form {padding: 0px !important;border: none !important;background-color: #ffffff !important;}

.header-section-top {margin: 0px;background: #172b4d;}


.header-section {max-width: 1250px;margin: auto;}
.header-section {display: flex;flex-direction: row;align-items: center;justify-content: left;text-align: center;margin: 0px;}

.header-section .front-heading {width: 71%;text-align: center;}

.header-section .logo img {width: 195px;height: 150px;object-fit: cover;}

.header-section .front-heading h1 {
    margin: 0px;
    font-size: 41px;
    line-height: 18px;
    color: #ffffff;
    font-weight: bold;
    font-family: "Arial";
    text-align: center;
    margin-bottom: 25px;
}
.header-section .front-heading p {
    margin: 0px;
    font-size: 31px;
    line-height: 30px;
    color: #ffffff;
    font-family: "Arial";
    text-align: center;
}
.banner-section .Choose-form-button {
    display: flex;
    gap: 3%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.container-max {max-width: 1200px;margin: auto;}
/*banner*/

.banner-section {background: #deebf7;margin: 0px;padding: 70px 0px;}

.banner-section .Choose-form-button {
    display: flex;
    gap: 4%;
    flex-direction: row;
    align-items: center;
}


.banner-section .Choose-form-button .video-tag video {width: 100%;height: 330px;}

.banner-section .Choose-form-button .rigt-field-button {display: block;text-align: center;border-radius: 15%;width: 34%;}

div.front-paragraph:nth-child(3) > h4:nth-child(1) {text-align: left;}

.banner-section .Choose-form-button .Choose-a-form {background: #fff;border-radius: 0px 0px 30px 30px;box-shadow: 4px 5px 4px 0px rgb(0 0 0 / 20%);}

.banner-section .Choose-form-button .rigt-field-button h1 {color: #ffffff;
    font-size: 30px;
	font-weight: bold;
    font-family: "Arial";
	line-height: normal;
    text-align: center;
    background: #172b4d;
    border-radius: 28px 28px 0px 0px;
    margin: 0px;
    padding: 15px 0;}

.banner-section .Choose-form-button .rigt-field-button .Choose-a-form p {
    font-size: 23px;
    line-height: 18px;
    color: #172b4d;
    font-family: "Arial";
    text-align: center;
    letter-spacing: -1px;
    margin: 0px;
    padding-top: 30px;
    padding-bottom: 10px;
}

.banner-section .Choose-form-button .rigt-field-button .Choose-a-form fieldset#product-purchase label.form__choice-wrapper span {
	font-size: 15px;
    line-height: 18px;
    color: #2a2929;
    font-family: "Arial";
    letter-spacing: 0;}

.banner-section .Choose-form-button .rigt-field-button .Choose-a-form fieldset#product-purchase {
text-align: left;padding: 20px;margin: 0px;}

.banner-section .Choose-form-button .rigt-field-button .Choose-a-form .d-flex {
    flex-direction: column;
    align-items: center;
    margin-top: 0px;
    padding-top: 20px;
    padding-bottom: 40px;
}
.banner-section .Choose-form-button .rigt-field-button .d-flex button {
    color: #ffffff;
    font-family: "Arial";
    margin-bottom: 12px;
    width: 230px;
    border: 2px solid #0171e3;
    font-size: 18px;
    font-weight: 500;
    border-radius: 15px;
    background: #0171e3;
    box-shadow: 0px 3px 3px 1px rgb(0 0 0 / 35%);
    line-height: normal;
    padding: 7px 0;
    filter: drop-shadow(1.5px 2.598px 2.5px rgba(0,0,0,0.16));
}
.banner-section .Choose-form-button .rigt-field-button .Choose-a-form fieldset#product-purchase label.form__choice-wrapper {
    gap: 10px !important;
}
.banner-section .Choose-form-button .rigt-field-button .Choose-a-form fieldset#product-purchase label.form__choice-wrapper input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
	border:1px solid #000!important;
}

/*paragraph-section*/

.paragraph-section {max-width: 1200px;margin: auto;padding: 60px 0px;}

.paragraph-section {background: #fff;display: flex;align-items: flex-start;justify-content: space-between; gap:2%;}

.paragraph-section .front-paragraph {background: #deebf7;border-radius: 15px;text-align: left;padding: 20px 25px;
padding-bottom: 0px;min-height: 400px;height: 100%;margin: 0px;width:100%;}

.paragraph-section .front-paragraph h4 {
	font-size: 24px;
    line-height: 30px;
    color: #0171e3;
    font-weight: bold;
    font-family: "Arial";
    text-align: center;
	margin: 0px;}

.paragraph-section .front-paragraph p {
    font-size: 15px;
    line-height: 23px;
    color: #000000;
    font-family: "Arial";
    margin-top: 10px;
    text-align: justify;
}

.note-paraline {max-width: 900px;margin: auto;text-align: center; padding-top:30px;padding-bottom:40px;}

.note-paraline p.note-color {
	font-size: 15px;
    line-height: 25px;
    color: #da8a4f;
    font-family: "Arial";
    margin-top: 10px;}

.Hilchos-second {text-align: center;margin-top: 30px;margin-bottom: 50px;}

button.Hilchos-Yerusha {color: #ffffff !important;background: #767c83 !important;border: 2px solid #757c84 !important;
font-size: 20px;font-weight: 500 !important;text-align: center;border-radius: 10px;white-space: normal;box-shadow: 0px 3px 3px 1px rgb(0 0 0 / 50%);}

.middle-section {background: #deebf7;padding: 30px 0px;}

.Estate-planning {display: flex;gap: 4%;flex-direction: row;align-items: flex-start;justify-content: left;
padding-bottom: 50px;}

.Estate-planning .Estate-right .Estate-inner {display: flex;margin: 25px 0px;box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 50%); cursor: pointer;}

.Estate-planning .Estate-right .Estate-inner img {max-width: 37px;}

.Estate-planning .Estate-left h1 {font-size: 20px;color: #000;}

.Estate-planning .Estate-left p {font-size: 18px;line-height: 25px;text-align: justify;}

.content-section {max-width: 938px;margin: auto;text-align: center;}

.content-section h1 {
	color: #0171e3;
    font-size: 29px;
    margin: 0px;
    line-height: 32px;
    font-weight: bold;
    font-family: "Arial";
    text-align: center;}

.content-section p { margin: 0px;font-size: 20px;
    line-height: 30px;
    color: #232424;
    font-family: "Arial";
    text-align: center;
	margin-top:10px;
	}
.content-section .Read-two-button {width: 100%;max-width: 100%;margin-top: 25px;}
button.Read-More-button {background: #0171e3;margin-bottom: 18px;width: 230px;border: none;font-size: 18px;font-weight: normal;border-radius: 15px;color: #fff;box-shadow: 0px 3px 3px 1px rgb(0 0 0 / 50%);color: #ffffff;font-family: "Arial";}
button.Bhi-archive-button {    background: #757c84;margin-bottom: 25px;width: auto;border: none;font-size: 18px;font-weight: 400;border-radius: 15px;color: #fff;white-space: normal;line-height: 26px;padding: 10px;box-shadow: 0px 3px 3px 1px rgb(0 0 0 / 35%);letter-spacing: normal;font-family: "Arial";}
button.hilchos-button { background: #0171e3 !important;border: none !important;border-radius: 15px;padding: 0px 50px;box-shadow: 0px 3px 3px 1px rgb(0 0 0 / 35%);font-size: 25px;color: #ffffff;font-family: "Arial" !important;filter: drop-shadow(1.5px 2.598px 2.5px rgba(0,0,0,0.16));font-weight: normal !important;}
.Estate-left img {width: 100%;height: 420px;}
.Estate-right {text-align: center;width: 38%;}
.Estate-right h2 {color: #ffffff; background: #172b4d;font-size: 30px;border-radius: 28px 28px 0px 0px;margin: 0px;padding: 15px 0;line-height: normal;font-weight: bold;font-family: "Arial";text-align: center;}
.Estate-inner-box {background: #fff;border-radius: 0px 0px 30px 30px;padding: 46px 30px 60px 30px;box-shadow: 4px 5px 4px 0px rgb(0 0 0 / 20%);}
.Estate-inner-box a {text-decoration: none;}
.Estate-right .Estate-inner {display: flex;margin-bottom: 20px;gap: 2%;background: #0171e3;border: none;padding: 6px 10px;border-radius: 15px;flex-direction: row;align-items: center;justify-content: center;}
.Estate-inner-right {text-align: left;}
.Estate-inner-right h3 {margin: 0px;color: #fff !important;font-size: 16px;line-height: 18px;font-weight: bold;font-family: "Arial";}
.Estate-inner-right p {margin: 0px;color: #fff!important;font-weight: normal;line-height: 20px;font-size: 14px;color: #ffffff;font-family: "Arial";}

/*footer*/

.footer-section {background: #282828;}
.footer-section {display: flex;flex-direction: row;align-items: center;justify-content: center;padding: 25px 0px;}
.footer-section a {  font-weight: 500;text-decoration: none;padding: 2px 30px;font-size: 16px;line-height: 32px;color: #ffffff;font-family: "Arial";text-align: center;}
.Read-two-button a {text-align: center;display: flex;flex-direction: column;align-content: center;justify-content: center;flex-wrap: wrap;text-decoration: none;}
.front-container .d-flex.align-items-start.mb-3.sm\:mb-5.progress-form__tabs {display: none;}
#progress-form__panel-1 .mt-3.form__field.header-section-top {margin-top: 0;}
#progress-form__panel-1 .mt-3.form__field.header-section-top .mt-3.form__field.header-section {padding-top: 10px !important;margin-top: 0 !important;}

/************************************rssponsive**************************************/
/************************************rssponsive**************************************/
/************************************rssponsive**************************************/
/************************************rssponsive**************************************/
/************************************rssponsive**************************************/


@media only screen and (max-width: 1200px) {

.header-section {
    width: 95%;
}
.paragraph-section {
    width: 90%;
}
.container-max {
    width: 90%;
}
.paragraph-section .front-paragraph {
    padding-bottom: 20px;
}
}
@media only screen and (max-width: 1100px) {

.tooltip .tooltiptext {width: 480px;left: 350px;}  

}

@media only screen and (max-width: 992px) {

.Estate-right {width: 40%;}
.Estate-right {width: 40%;}

.banner-section {padding: 30px 0px;margin: 0px !important; }
div.front-paragraph:nth-child(3) {width: auto;margin-bottom: 30px;}
.banner-section .Choose-form-button .rigt-field-button {width: 45%;}
}

@media only screen and (max-width: 800px) {

.header-section .front-heading h1 {font-size: 25px;}
.header-section .front-heading p {font-size: 22px;line-height: 28px;margin: 0px;}
.banner-section .Choose-form-button .rigt-field-button {border-radius: 15%;width: 45%;}
.banner-section .Choose-form-button .rigt-field-button .Choose-a-form p {font-size: 19px;line-height: 20px;font-weight: 500;padding-top: 18px;}
.banner-section .Choose-form-button .rigt-field-button .d-flex button {margin-bottom: 8px;width: 230px;border: 2px solid #0171e3;font-size: 18px;font-weight: 500;border-radius: 15px;background: #0171e3;box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 35%);line-height: normal;padding: 7px 0;}
.banner-section .Choose-form-button {align-items: center;}
.Estate-right h2 {font-size: 20px;border-radius: 15px 15px 0px 0px;padding: 7px 0;}
.Estate-inner-box {padding: 0px 30px;width: 100%;display: table;}
.content-section p {padding: 0 20px;}

}


@media only screen and (max-width: 767px) {

#progress-form__panel-3 .validateLegalWillPrint #validate .flex-column-reverse {display: flex;flex-direction: column;margin-top: 20px;}
#progress-form__panel-3 .validateLegalWillPrint #validate .flex-column-reverse button#printHalachicForm2 {margin: 20px 0px;}
.contribution-descripti {padding: 0px !important;}
.contribution-descripti {margin: 0 auto;padding: 10px 40px !important;padding-bottom: 20px;}
.Button-payment {text-align: center !important;padding: 0px !important;width: 100%;}
button#emailbutton {margin:0px !important;}
button#back {margin:0px !important;}
body {background-color: #fff;}
.p-4 {padding: calc(var(--space-multiplier) * 2rem) !important;}
#progress-form__panel-1 > div:nth-child(1) > h1:nth-child(2) {font-size: 1em;}
div.d-flex:nth-child(18) > a:nth-child(1) {margin-top: 7px;text-decoration: none;}
#progress-form__panel-3 #payment {margin-top: 9px;}
#progress-form__panel-4 .Button-payment {display: block !important;}
#progress-form__panel-4 .contribution-descripti {padding: 10px 0px !important;}
#progress-form__panel-4 .contribution-descripti label {font-size: 15px !important;}
#progress-form__panel-4 .Button-payment a {width: 100% !important;margin: 0 !important;padding: 0 !important;max-width: 100% !important;}
#progress-form__panel-4 button {margin: 0 0 6px 0 !important;}
.p-4 {padding: calc(var(--space-multiplier) * 1rem) !important;padding-top: 15px !important;}
#progress-form__panel-4 .titles > h2:nth-child(1) {font-size: 1em;color: rgb(0, 0, 0);}
a {text-decoration: none !important;}
#emailPopup.active {transform: translate(-9%, -109%) !important;}
#progress-form #progress-form__panel-4 {padding-bottom: 53%;}
#progress-form {background-size: cover;}
.flex-column-reverse a {width: 100%;}
.flex-column-reverse a {margin-top: 8px;}
.mt-3 {margin-top: calc(var(--space-multiplier) * 1rem);}
.Button-payment {display: block !important;}
.Button-payment a {margin: 0 !important;padding: 0 !important;width: 100%;}
.contribution-descripti {margin: 0 auto;padding: 10px 5px !important;padding-bottom: 20px;}
div#center .contribution-options label {font-size: 16px !important;font-family: arial;}
div#center .checks-payable-info {margin-top: 20px !important;}
.Button-payment button {margin: 0 0 4px 0 !important;}
#progress-form .Button-payment button {margin-bottom: 7px !important;}
#emailbutton {z-index: inherit !important;}
.flex-column-reverse a {margin-top: 0;}
.flex-column-reverse Button {margin: 0 0 4px 0 !important;}
.titles h2 {line-height: normal;}
div#center .contribution-description {padding-top: 0 !important;}
#progress-form__panel-6 {padding: 10px;}
.tooltip .tooltiptext {visibility: hidden;width: 550px;background-color: #2f5272;color: #fff;text-align: justify;
border-radius: 6px;padding: 10px;position: absolute;z-index: 1;font-size: 14px;left: 0;font-weight: normal;bottom: 100%;}
.banner-section .Choose-form-button {display: block;}
.banner-section .Choose-form-button .video-tag {width: 100%; margin:auto;}
.banner-section .Choose-form-button .rigt-field-button {width: 100%;margin: auto;padding-top: 30px; padding-bottom: 30px;}
.paragraph-section {display: block;padding-top: 30px;padding-bottom: 0px;}
.paragraph-section .front-paragraph {padding-bottom: 20px;min-height: auto;}
.note-paraline {padding: 10px 30px 30px 30px;}
.Hilchos-second {padding: 0 20px;}
.note-paraline p.note-color {line-height: 20px;}
.Estate-planning {display: block;padding-bottom: 0;}
.Estate-right {width: 100%;margin: auto;}
.Estate-left {text-align: center;width: 100%; margin: auto;padding: 30px 0px;}
.middle-section {padding: 30px 0px 30px 0px;}
.content-section {padding: 0px 30px;}
.Hilchos-second {margin-top: 20px !important;margin-bottom: 30px;}
.paragraph-section {display: table;}
.paragraph-section .front-paragraph {height: 100%;}
.paragraph-section .front-paragraph {height: 100%;width: auto;}
.Estate-left img {width: 100%;height: auto;}
.paragraph-section .front-paragraph {margin: 25px 0px;}
}

@media only screen and (max-width: 580px) {
.tooltip .tooltiptext {visibility: hidden;width: 453px;background-color: #2f5272;color: #fff;text-align: justify;border-radius: 6px;padding: 3px;position: absolute;z-index: 1;font-size: 14px;line-height: 17px;left: 0px;font-weight: normal;bottom: 91%;}
.Choose-form-button fieldset#product-purchase {padding-right: 0px;}
.header-section {display: block;}
.header-section .front-heading {width: 100%;padding: 0 10px;padding-bottom: 40px;}
.header-section .front-heading p {font-size: 17px;line-height: normal;}
.header-section .front-heading h1 {font-size: 22px;line-height: normal; margin-bottom:10px;}
.banner-section .Choose-form-button {display: block;padding-top:30px;}
.banner-section .Choose-form-button .video-tag {width: 100%;margin:auto;}
.banner-section .Choose-form-button .video-tag video {height: auto;}
.banner-section {margin: 0;padding: 30px 0;}
.banner-section .Choose-form-button .rigt-field-button h1 {font-size: 22px;border-radius: 10px 10px 0px 0px;padding: 7px 0;}
.banner-section .Choose-form-button .rigt-field-button .Choose-a-form p {font-size: 20px;}
.paragraph-section {display: block;padding: 0 0px;}
.paragraph-section .front-paragraph  p {font-size: 16px;padding-top: 0;margin-top: 10px;line-height: 25px;}
.paragraph-section .front-paragraph h4 {font-size: 20px;text-align: left;}
.paragraph-section .front-paragraph {padding: 20px 20px;padding-bottom: 20px;min-height: auto;height: 100%;}
.middle-section {padding: 20px 0px 15px 0px;}
.content-section h1 {font-size: 20px;margin: 0px;line-height: normal;}
.content-section p {color: #000;font-size: 16px;line-height: 25px;margin: 0px;}
.Hilchos-second {  padding: 0 20px;margin-left: 30px;margin-right: 30px;}
.footer-section {display: block;}
.footer-section a {width: 100%;text-align: center;display: block;}
.footer-section {padding: 10px 0px;}
.footer-section a {padding: 0px 30px;}
#progress-form__panel-1 .mt-3.form__field.header-section-top .mt-3.form__field.header-section {
padding-top: 0 !important;margin-top: 0 !important;}
div.front-paragraph:nth-child(2) {margin-top: 0;margin-bottom: 0;}
.content-section p {color: #000;font-size: 14px;line-height: 18px;margin: 0px;padding-top: 10px;}
.content-section {padding: 0px 10px;}
.banner-section {margin: 0;padding: 0px 0;}
.note-paraline p.note-color {font-size: 15px;}
button.hilchos-button { font-size: 20px;}
.banner-section .Choose-form-button .rigt-field-button {
    padding-top: 20px;
	width:100%;
}
}

@media only screen and (max-width: 480px) {
.tooltip .tooltiptext {visibility: hidden;width: 390px;background-color: #2f5272;color: #fff;text-align: justify;border-radius: 6px;padding: 3px;position: absolute;z-index: 1;font-size: 12px;line-height: 17px;left: 0px;font-weight: normal;bottom: 100%;}
}

@media only screen and (max-width: 420px) {
.tooltip .tooltiptext {visibility: hidden;width: 385px;background-color: #2f5272;color: #fff;text-align: justify;border-radius: 6px;padding: 3px;position: absolute;z-index: 1;font-size: 12px;line-height: 17px;left: 0px;font-weight: normal;bottom: 100%;}
}
@media only screen and (max-width: 375px) {.tooltip .tooltiptext {visibility: hidden;width: 294px;background-color: #2f5272;color: #fff;text-align: justify;
border-radius: 6px;padding: 3px;position: absolute;z-index: 1;font-size: 10px;line-height: 17px;left: 0px;font-weight: normal;bottom: 84%;}
}