/**** begin fact statement component ****/
.fact-statement {
    color: var(--primary-color-black);
    text-align: center;
}

.fact-statement-region {
    font-size: 0;
}

.fact {
    box-sizing: border-box;
    display: inline-block;
    font-size: 1.75rem;
    line-height: 1.3;
    margin-right: 1rem;
    vertical-align: middle;
    width: auto;
}

.fact span {
    color: var(--main-red-color);
    /*font-weight: 400;*/
}

/**** end fact statement component ****/
/**** begin auxiliary links ****/
.auxiliary-links {
    background-color: var(--main-red-color);
    background-image: url(../images/stc-icon-large.png), url(../images/red-texture-background.jpg);
    background-position: 0 top, center center;
    background-repeat: no-repeat, repeat-y;
    background-size: 25%, cover;
    background-attachment: scroll, scroll;
    background-blend-mode: multiply, normal;
}

.auxiliary-links-region {
    font-size: 0;
    margin: 2rem auto 0 auto;
    padding: 2rem 0;
}

.auxiliary-link {
    box-sizing: border-box;
    color: var(--primary-color-white);
    display: inline-block;
    font-size: 1rem;
    padding: 0 0.5rem;
    text-align: center;
    vertical-align: middle;
    width: 33.333%;
}

.auxiliary-link.get-involved {
    width: 25%;
}

h3.get-involved-links-headline {
    border-bottom: solid 1px var(--primary-color-white);
    color: var(--primary-color-white);
    font-size: 1.5rem;
    font-weight: var(--font-weight-thin);
    line-height: 1.2;
    margin: 0 0 1rem 0;
    padding: 0 0 0.5rem 0;
    text-transform: uppercase;
    width: 35%;
}

.auxiliary-link-wrapper {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 6rem 2rem;
}

.auxiliary-link.get-involved .auxiliary-link-wrapper {
    padding: 10rem 2rem 2rem 2rem;
}

.auxiliary-link a {
    color: var(--primary-color-white);
    display: block;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 1rem;
    transition: background-color 0.5s ease-out 0s;
}

.auxiliary-link a:hover {
    background-color: rgba(0, 0, 0, 1);
    text-decoration: none;
}

.auxiliary-link-button {
    border: solid 1px var(--primary-color-white);
    display: block;
    padding: 1rem 2rem;
}

.auxiliary-link a.get-involved-button {
    box-sizing: border-box;
    color: var(--primary-color-white);
    display: table;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 1rem;
    transition: background-color 0.5s ease-out 0s;
    width: 100%;
}

.auxiliary-link a.get-involved-button:hover {
    background-color: rgba(0, 0, 0, 1);
    text-decoration: none;
}

.get-involved-link-button {
    border: solid 1px var(--primary-color-white);
    display: table-cell;
    padding: 1rem 2rem;
    vertical-align: middle;
}

.auxiliary-title {
    display: block;
    font-size: 1.25rem;
    line-height: 1.1;
    text-transform: uppercase;
}

.get-involved-link-button .auxiliary-title {
    font-size: 1rem;
}

.auxiliary-link-link {
    display: block;
    font-weight: var(--font-weight-thick);
    line-height: 1.3;
}

/**** end auxiliary links ****/
/*** begin resource component ***/
.resource-component {
    background-color: var(--primary-color-black);
}

.resource-component-region {
    font-size: 0;
    margin: 0 auto;
    padding: 3rem 0;
}

.resource-component h3 {
    border-bottom: solid 1px var(--primary-color-white);
    color: var(--primary-color-white);
    font-size: 1.5rem;
    font-weight: var(--font-weight-thin);
    line-height: 1.2;
    margin: 0 0 1rem 0;
    padding: 0 0 0.5rem 0;
    text-transform: uppercase;
    width: 35%;
}

.resource {
    box-sizing: border-box;
    display: inline-block;
    padding: 0 0.5rem;
    vertical-align: middle;
    width: 33.333%;
}

.resource a {
    cursor: pointer;
    display: block;
}

.resource img {
    height: auto;
    width: 100%;
}

/*** end resource component ***/
/*** begin share initiative ****/
.share-initiative {
    background: url(/wp-content/uploads/2018/07/SocialSharing_image.jpg) no-repeat center center transparent;
    background-size: cover;
    color: var(--primary-color-black);
    padding: 100px 0;
    text-align: center;
}

.share-initiative-region {
    font-size: 0;
    margin: 0 auto;
    padding: 2rem 0;
}

.share-hash {
    box-sizing: border-box;
    color: var(--main-red-color);
    display: inline-block;
    font-size: 2.5rem;
    font-weight: var(--font-weight-thick);
    padding-right: 2rem;
    text-align: right;
    vertical-align: middle;
    width: 40%;
}

.share-description {
    border-left: solid 1px var(--main-gray-color);
    box-sizing: border-box;
    display: inline-block;
    font-size: 1rem;
    padding-left: 2rem;
    text-align: left;
    vertical-align: middle;
    width: 30%;
}

/*** end share initiative ****/
/*** begin patient stories feed ***/
.patient-stories-feed {
    font-size: 0;
    padding: 0 5vw;
}

.patient-stories-feed .region {
    margin: 4rem auto;
}

.patient-stories-feed h3 {
    border-bottom: solid 1px #000;
    color: var(--main-gray-color);
    font-size: 1.5rem;
    font-weight: var(--font-weight-thin);
    line-height: 1.2;
    margin: 0 0 3rem 0;
    padding: 0 0 0.5rem 0;
    text-transform: uppercase;
    width: 35%;
}

.patient-story-item {
    box-sizing: border-box;
    display: inline-block;
    font-size: 1rem;
    padding: 0 1rem;
    text-align: center;
    vertical-align: top;
    width: 33.333%;
}

.patient-story-item-wrapper {
    background-color: #f6f6f6;
    padding: 1rem 1rem 2rem 1rem;
}

.patient-story-item-wrapper img {
    height: auto;
    width: 100%;
}

.patient-story-item-wrapper .patient-story-feed-image {
    margin-bottom: 1rem;
}

.patient-story-item h4 {
    color: #000;
    margin-bottom: 0.5rem;
    text-align: left;
}

.patient-story-item .patient-story-feed-headline {
    text-align: left;
}

.patient-story-item .nbca-button {
    font-size: 1rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .patient-stories-feed h3 {
        width: 100%;
    }

    .patient-story-item {
        display: block;
        padding: 0 0 2rem 0;
        width: 100%;
    }
}

/*** end patient stories feed ***/
.home #ctf,
.home .ctf-item {
    background-color: var(--primary-color-white) !important;
}

/* Tablets - General */
@media (min-width: 768px) and (max-width: 1024px) {
    .fact {
        display: block;
        margin-bottom: 1rem;
        margin-right: 0;
        width: 100%;
    }

    .nbca-button {
        display: inline-block;
        width: auto;
    }

    .resource-component-region {
        padding: 3rem 10vw;
    }

    .resource-component h3 {
        width: 100%;
    }

    .share-initiative-region {
        margin: 0 10vw;
    }

    .share-hash {
        display: block;
        margin-bottom: 2rem;
        padding-right: 0;
        text-align: center;
        width: 100%;
    }

    .share-description {
        border-top: solid 1px var(--main-gray-color);
        border-left: none;
        display: block;
        padding-top: 2rem;
        padding-left: 0;
        text-align: center;
        width: 100%;
    }
}

/* Smartphones - General */
@media (max-width: 767px) {
    .fact {
        display: block;
        margin-bottom: 1rem;
        margin-right: 0;
        width: 100%;
    }

    .nbca-button {
        display: inline-block;
        width: auto;
    }

    .auxiliary-link,
    .auxiliary-link.get-involved {
        display: block;
        margin-bottom: 1rem;
        padding: 0;
        width: 100%;
    }

    .auxiliary-link:last-child {
        margin-bottom: 0;
    }

    h3.get-involved-links-headline {
        width: 100%;
    }

    .resource-component-region {
        padding: 3rem 5vw;
    }

    .resource {
        display: block;
        margin-bottom: 1rem;
        padding: 0;
        width: 100%;
    }

    .resource:last-child {
        margin-bottom: 0;
    }

    .resource-component h3 {
        width: 100%;
    }

    .share-initiative-region {
        margin: 0 5vw;
    }

    .share-hash {
        display: block;
        font-size: 1.75rem;
        margin-bottom: 1rem;
        padding-right: 0;
        text-align: center;
        width: 100%;
    }

    .share-description {
        border-top: solid 1px var(--main-gray-color);
        border-left: none;
        display: block;
        padding-top: 1rem;
        padding-left: 0;
        text-align: center;
        width: 100%;
    }
}