body {
    font-family: 'Oxygen', sans-serif;
}

h1 {
    font-family: 'Pacifico', sans-serif;
    color: rgb(5, 25, 80);
}

h2 {
    font-size: 150%;
}

h3 {
    font-size: 130%;
}

a:link {
    text-decoration: none;
}

.masthead {
    background: linear-gradient(rgba(255, 255, 255, 0.01), rgb(255, 255, 255) 85%),
        radial-gradient(at left top, rgba(13, 110, 253, 0.5), transparent 50%),
        radial-gradient(at right top, rgba(4, 125, 149, 0.5), transparent 50%);
}

.btn-primary,
.btn-primary:visited {
    background-color: rgb(4, 89, 149) !important;
    border-color: rgb(0, 90, 149) !important;
}

.btn-primary:hover {
    background-color: rgb(8, 102, 170) !important;
}

.btn-primary:active {
    background-color: rgb(3, 50, 84) !important;
}

.story .container {
    background: rgb(239, 248, 255);
    padding: 0.75rem;
    z-index: -1;
    margin-top: -70px;
}

@media (min-width: 576px) {
    .story .container {
        padding: 1rem;
        border-radius: 0.75rem;
    }
}

@media (min-width: 768px) {
    .story .container {
        margin-top: 0px;
    }
}

@media (min-width: 992px) {
    .story .container {
        margin-top: -80px;
    }
}

/* .story {
    color: white;
    background: 
        radial-gradient(at left top, rgba(11, 231, 220, 0.15), transparent 50%),
        radial-gradient(at right 30%, rgba(19, 200, 76, 0.15), transparent 50%),
        radial-gradient(at 30% 60%, rgba(194, 35, 215, 0.1), transparent 50%),
        linear-gradient(rgba(38, 32, 32, 1), rgb(39, 33, 36) 85%);
    padding: 4em 0px 3em;
    border-top: rgba(50, 50, 50, 0.9) 1px solid;
    border-bottom: rgba(20, 20, 20, 0.9) 1px solid;

    -webkit-clip-path: polygon(0% 8%, 100% 0%, 100% 92%, 0% 100%);
    clip-path: polygon(0% 8%, 100% 0%, 100% 92%, 0% 100%); */

/* Necessary for the effect where the image bleeds over into the story div; see media queries below. */
/* margin-top: -110px;
    z-index: -1;
}

@media (min-width: 768px) {
    .story {
        margin-top: -55px;

        -webkit-clip-path: polygon(0% 12%, 100% 0%, 100% 88%, 0% 100%);
        clip-path: polygon(0% 12%, 100% 0%, 100% 88%, 0% 100%);
    }
}

@media (min-width: 992px) {
    .story {
        margin-top: -130px;

        -webkit-clip-path: polygon(0% 15%, 100% 0%, 100% 85%, 0% 100%);
        clip-path: polygon(0% 15%, 100% 0%, 100% 85%, 0% 100%);
    }
}

@media (min-width: 1200px) {
    .story {
        margin-top: -155px;
        padding-top: calc(4em + 20px);
        padding-bottom: calc(3em + 20px);
    }
} */

.how-it-works-1 {
    padding: 20px 20px 0px;
}

.how-it-works-2 {
    display: none;
    height: 30px;
    border-bottom: rgb(4, 89, 149) 8px solid;
    border-right: rgb(4, 89, 149) 8px solid;
    border-bottom-right-radius: 30px;
}

.how-it-works-3 {
    padding: 0px 5px 0px;
}

.how-it-works-4 {
    display: none;
    height: 30px;
    border-bottom: rgb(4, 89, 149) 8px solid;
    border-left: rgb(4, 89, 149) 8px solid;
    border-bottom-left-radius: 30px;
}

.how-it-works-5 {
    display: none;
    height: 30px;
    border-top: rgb(4, 89, 149) 8px solid;
    border-right: rgb(4, 89, 149) 8px solid;
    border-top-right-radius: 30px;
}

.how-it-works-badge-container {
    margin-right: 20px;
}

.how-it-works-badge-1,
.how-it-works-badge-2,
.how-it-works-badge-3 {
    font-size: 25px;
    position: relative;
    background: white;
    border: rgb(4, 89, 149) 5px solid;
    text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    line-height: 40px;
    font-weight: bold;
}

@media (min-width: 576px) {
    .how-it-works-1 {
        padding-left: calc((100vw - 540px) / 2 + 10px);
        margin-right: calc((100vw - 540px) / 2 + 10px);

        border-top: rgb(4, 89, 149) 8px solid;
        border-right: rgb(4, 89, 149) 8px solid;
        border-top-right-radius: 30px;
    }

    .how-it-works-2 {
        display: block;
        margin-left: calc(50vw);
        margin-right: calc((100vw - 540px) / 2 + 10px);
    }

    .how-it-works-3 {
        margin-top: -8px;
        margin-left: calc((100vw - 540px) / 2 + 100px - 30px);
        margin-right: calc((100vw - 540px) / 2 + 10px + 30px);
        padding: 20px 10px 0px;

        border-top-left-radius: 30px;
        border-top: rgb(4, 89, 149) 8px solid;
        border-left: rgb(4, 89, 149) 8px solid;
    }

    .how-it-works-4 {
        display: block;
        margin-left: calc((100vw - 540px) / 2 + 100px - 30px);
        margin-right: calc(50vw + 30px);
    }

    .how-it-works-5 {
        margin-top: -8px;
        display: block;
        margin-left: calc((100vw - 540px) / 2 + 100px);
        margin-right: calc(50vw);
    }

    .how-it-works-6 {
        position: relative;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid rgb(4, 89, 149);
        margin-left: calc((100vw - 576px) / 2 + 10px + 576px * 0.440);
        /* The arrow keeps moving and I can't figure out why! */
        /* left: -15px; */
    }

    .how-it-works-badge-container {
        position: relative;
        height: 0;
    }

    .how-it-works-badge-1,
    .how-it-works-badge-2,
    .how-it-works-badge-3 {
        font-size: 25px;
        position: relative;
        top: -65px;
        background: white;
        border: rgb(4, 89, 149) 5px solid;
        text-align: center;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        line-height: 40px;
        font-weight: bold;
    }
}

@media (min-width: 768px) {
    .how-it-works-1 {
        padding-left: calc((100vw - 720px) / 2 + 10px);
        margin-right: calc((100vw - 720px) / 2 + 10px);
    }

    .how-it-works-2 {
        margin-right: calc((100vw - 720px) / 2 + 10px);
    }

    .how-it-works-3 {
        margin-right: calc((100vw - 720px) / 2 + 10px + 30px);
    }

    .how-it-works-4 {
        margin-right: calc((100vw - 720px) / 2 + 10px + 720px * 0.295);
    }

    .how-it-works-5 {
        margin-right: calc((100vw - 720px) / 2 + 10px + 720px * 0.275 - 30px);
    }

    .how-it-works-6 {
        margin-left: calc((100vw - 720px) / 2 + 10px + 720px * 0.705);
    }
}

@media (min-width: 992px) {
    .how-it-works-1 {
        padding-left: calc((100vw - 960px) / 2 + 10px);
        margin-right: calc((100vw - 960px) / 2 + 10px);
    }

    .how-it-works-2 {
        margin-right: calc((100vw - 960px) / 2 + 10px);
    }

    .how-it-works-3 {
        margin-right: calc((100vw - 960px) / 2 + 10px + 30px);
    }

    .how-it-works-4 {
        margin-right: calc((100vw - 960px) / 2 + 10px + 960px * 0.295);
    }

    .how-it-works-5 {
        margin-right: calc((100vw - 960px) / 2 + 10px + 960px * 0.27 - 30px);
    }

    .how-it-works-6 {
        margin-left: calc((100vw - 960px) / 2 + 10px + 960px * 0.715);
    }
}

@media (min-width: 1200px) {
    .how-it-works-1 {
        padding-left: calc((100vw - 1140px) / 2 + 10px);
        margin-right: calc((100vw - 1140px) / 2 + 10px);
    }

    .how-it-works-2 {
        margin-right: calc((100vw - 1140px) / 2 + 10px);
    }

    .how-it-works-3 {
        margin-right: calc((100vw - 1140px) / 2 + 10px + 30px);
    }

    .how-it-works-4 {
        margin-right: calc((100vw - 1140px) / 2 + 10px + 1140px * 0.295);
    }

    .how-it-works-5 {
        margin-right: calc((100vw - 1140px) / 2 + 10px + 1140px * 0.265 - 30px);
    }

    .how-it-works-6 {
        margin-left: calc((100vw - 1140px) / 2 + 10px + 1140px * 0.7225);
    }
}

@media (min-width: 1400px) {
    .how-it-works-1 {
        padding-left: calc((100vw - 1320px) / 2 + 10px);
        margin-right: calc((100vw - 1320px) / 2 + 10px);
    }

    .how-it-works-2 {
        margin-right: calc((100vw - 1320px) / 2 + 10px);
    }

    .how-it-works-3 {
        margin-right: calc((100vw - 1320px) / 2 + 10px + 30px);
    }

    .how-it-works-4 {
        margin-right: calc((100vw - 1140px) / 2 + 10px + 1140px * 0.295);
    }

    .how-it-works-5 {
        margin-right: calc((100vw - 1140px) / 2 + 10px + 1140px * 0.225 - 30px);
    }

    .how-it-works-6 {
        margin-left: calc((100vw - 1140px) / 2 + 10px + 1140px * 0.7625);
    }
}