h2 {
    font-family: "trumpgothicpro", sans-serif;
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

a.button {
    padding: 0.325rem 1.25rem;
    border: 2px solid #004C53;
    border-radius: 0;
    font-family: "trumpgothicpro", sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    text-transform: uppercase;
    background: transparent;
    color: #004C53;
}
a.button:hover {
    border: 2px solid #00A08F;
    background: #fff;
    color: #00A08F;
}

/* Slick Slider additional project specific styles - customizations */
.slick-arrow {
    width: 30px;
    color: #004C53;
    opacity: 1;
}
.slick-prev { left: -0.5rem;  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><polygon fill="%23004C53" points="50,14.4 14.4,50 50,85.6 50,100 0,50 0,50 50,0"/></svg>'); }
.slick-next { right: -0.5rem; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><polygon fill="%23004C53" points="0,14.4 35.6,50 0,85.6 0,100 50,50 50,50 0,0"/></svg>'); }
.form-placeholder .slick-prev { left: -0.5rem;  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><polygon fill="%23ffffff" points="50,14.4 14.4,50 50,85.6 50,100 0,50 0,50 50,0"/></svg>'); }
.form-placeholder .slick-next { right: -0.5rem; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><polygon fill="%23ffffff" points="0,14.4 35.6,50 0,85.6 0,100 50,50 50,50 0,0"/></svg>'); }
.slick-dots { top: 0; bottom: unset; padding: 0; height: 0; }
.slick-dots > li { visibility: hidden; height: 0; }
.slick-dots > li > button { border: none; visibility: hidden; height: 0; }
.slick-dots > li:hover > button,
.slick-dots > li.slick-active > button { background-color: #004C53; }
.form-placeholder .slick-dots { top: unset; bottom: -1rem; }
.form-placeholder .slick-dots > li { visibility: visible; height: auto; }
.form-placeholder .slick-dots > li > button { border: 1px solid #ffffff; visibility: visible; height: 16px; }
.form-placeholder .slick-dots > li:hover > button,
.form-placeholder .slick-dots > li.slick-active > button { background-color: #ffffff; }
.slick-slide img { max-width: 100%; height: auto; }

header div.copy > a img {
    display: block;
    position: relative;
    width: 25%;
    margin: 0 auto 1.5rem auto;
}
header div.copy h1 {
    display: block;
    position: relative;
    width: 80%;
    padding: 1.5rem 0;
    margin: 0 auto;
    text-indent: -999rem;
    background: url("../../../img/trailtogether/trail-together-wordmark.svg") no-repeat center center;
    background-size: contain;
}
header div.copy h2 {
    max-width: 55%;
    margin: 0 auto 1.5rem auto;
    font-size: 3.5rem;
}
header div.copy p {
    max-width: 90%;
    margin: 0 auto 1.5rem auto;
}

div#progression h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    color: #B44F9E;
}
    div#progression h3 span {
        display: block;
        font-size: 1.25rem;
        color: #004C53;
    }

section#how-to h2 {
    margin: 0 auto 1.5rem auto;
    letter-spacing: 0.125rem;
    color: #fff;
}
section#how-to p {
    max-width: 70%;
    margin: 0 auto 1.5rem auto;
    font-size: 1.25rem;
}
section#how-to p:last-child {
    margin-bottom: 0;
}
section#how-to a {
    font-weight: 600;
    color: #fff;
}

section#donors h2 {
    margin: 0 auto 1.5rem auto;
    color: #004C53;
}

form#donor-search-form {}
form#donor-search-form > p:first-child { margin: 0 0 1rem 0; }
form#donor-search-form > input[type="text"] { width: 40%; }
p#donor-search-message { padding: 1rem; margin: 1rem 0; font-size: 0.875rem; }

div.donor-set {
    display: block;
    position: relative;
    width: 100%;
}
div.donor-set div.banner {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 2%;
    row-gap: 0;
    width: 100%;
    padding: 0 3rem;
    margin: 0;
}
div.donor-set div.banner div.group-column {
    display: block;
    position: relative;
    flex: 1 0 18.4%;
    max-width: 18.4%;
    text-align: left;
}
div.donor-set p {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.5rem 0;
    margin: 0;
    line-height: 1.25;
}
div.donor-set p span {
    display: block;
    position: relative;
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
}
span.donor-display-count {
    flex: 0 0 26%;
    max-width: 26%;
    font-weight: 600;
}
span.donor-display-name {
    flex: 0 0 72%;
    max-width: 72%;
    hyphens: auto;
}