html {
    scroll-behavior: smooth;
}

:root {
    --blue-1: #0060AC;
    --blue-2: #277FD5;
    --blue-3: #75AADE;
    --blue-4: #e6f4f7;
    --white-1: #FFFFFF;
    --turquoise: #00C6B9;
    --black: #333333;
    --camel: #DDE3D1;
}

.bg-white-1 {
    background-color: var(--white-1);
}

.bg-blue-1 {
    background-color: var(--blue-1);
}

.bg-blue-2 {
    background-color: var(--blue-2);
}

.bg-blue-3 {
    background-color: var(--blue-3);
}

.bg-blue-4 {
    background-color: var(--blue-4);
}

.bg-camel {
    background-color: var(--camel);
}

.bg-turquoise {
    background-color: var(--turquoise);
}

.blue-1 {
    color: var(--blue-1);
}

.blue-2 {
    color: var(--blue-2);
}

.blue-3 {
    color: var(--blue-3);
}


.white-1 {
    color: var(--white-1);
}

.turquoise {
    color: var(--turquoise);
}

.black {
    color: var(--black);
}

.medium-12 {
    font-size: 12px;
    font-family: 'Graphik Medium';
    font-weight: normal;
    line-height: 16px;
}

.medium-34 {
    font-size: 34px;
    font-family: 'Graphik Medium';
    font-weight: normal;
    line-height: 40px;
}

.medium-26 {
    font-size: 26px;
    font-family: 'Graphik Medium';
    font-weight: normal;
    line-height: 30px;
}

.medium-20 {
    font-size: 20px;
    font-family: 'Graphik Medium';
    font-weight: normal;
    line-height: 26px;
}

.regular-20 {
    font-size: 20px;
    line-height: 26px;
    font-weight: normal;
}

.medium-18 {
    font-size: 18px;
    font-family: 'Graphik Medium';
    font-weight: normal;
    line-height: 26px;
}

.regular-18 {
    font-size: 18px;
    line-height: 26px;
    font-weight: normal;
}


.cta-text {
    text-align: center;
    margin: 1rem 0 2.5rem 0;
}


@font-face {
    font-family: 'Graphik Regular';
    src: url('/static/fonts/Graphik-Regular-Web.woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Graphik Medium';
    src: url('/static/fonts/Graphik-Medium-Web.woff2');
    font-display: swap;
}

body {
    margin: 0;
    font-family: 'Graphik Regular', 'Euclid Circular B', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    color: var(--black);
}

.medium-container {
    margin: 0 auto;
    max-width: 720px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.large-container {
    margin: 0 auto;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}


a {
    text-decoration: none;
    color: black;
}

#content {
    width: 100%;
    padding-top: 3.5rem;
}


.btn {
    display: inline-block;
    padding: 0.8rem 2.2rem;
    border-radius: 25px;
    font-family: 'Graphik Medium';
    font-size: 16px;
    font-weight: normal;
    line-height: 20px;
    color: black;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    text-shadow: none;
    box-shadow: none;
    transition: all 0.12s linear 0s !important;
}

.btn-blue {
    color: #ffffff;
    background: var(--blue-1);
}

.btn-turquoise {
    color: #ffffff;
    background: var(--turquoise);
}

sup {
    vertical-align: top;
    position: relative;
    top: -0.3em;
    font-size: 0.6em;
}

sub {
    vertical-align: bottom;
    position: relative;
    top: 0.4em;
    font-size: 0.6em;
}