/* foundament */

 .hero-wrapper a, .ready-start a {
     text-decoration: none !important;
 }

.hero-wrapper a:active, .hero-wrapper a:hover {
    outline-width: 0
}

.fs-18 {
    font-size: 1.125rem!important;
}

.pt56 {
    padding-top: 3.5rem!important;
}

.hero-wrapper .mt {
    margin-top: 1rem!important;
}

.hero-wrapper .mb {
    margin-bottom: 1rem!important;
}

.hero-wrapper .mt4x {
    margin-top: 4rem!important;
}

.hero-wrapper .mt4x-negative {
    margin-top: -4rem!important;
}

.mt150x, .mt20, .mt24, .mt25 {
    margin-top: 1.5rem!important;
}

/* illustration */

 .hero-banner-bg-illustration {
     background-color: #f8f8f8;
     background-position: top 8.75rem right 5%;
     /*background-image: url(https://d25oniaj7o2jcw.cloudfront.net/gofundme-trusted-fundraising-homepage-980w.png);*/
     background-image: url(/images/hero_eva_mod_980.png);
     background-position: top 1rem right 5%;
     background-repeat: no-repeat
 }

@media screen and (max-width: 59.9375em) {
    .hero-banner-bg-illustration {
        background-size: 320px
    }
}

@media screen and (min-width: 48em) and (max-width: 59.9375em) {
    .hero-banner-bg-illustration {
        background-size: 62%;
        background-position: top 8.75rem right 0;
        background-position: top 6rem right 0

    }
}

@media screen and (min-width: 60em) {
    .hero-banner-bg-illustration {
        /*background-image: url(https://d25oniaj7o2jcw.cloudfront.net/gofundme-trusted-fundraising-homepage-1209w.png);*/
        /*background-image: url(/images/hero_igolana.png);*/
        background-image: url(/images/hero_eva_mod_1209.png);

        background-size: 604px;
        /*background-position: top 8.75rem right 0;*/
        background-position: top 0rem right 0;

    }
}

@media screen and (min-width: 75em) {
    .hero-banner-bg-illustration {
        background-position: top 8.75rem right 10%;
        background-position: top 0rem right 10%;
    }
}

@media screen and (min-width: 93.75em) {
    .hero-banner-bg-illustration {
        background-position: top 8.75rem right 20%;
        background-position: top 0rem right 20%;
    }
}

@media screen and (min-width: 112.5em) {
    .hero-banner-bg-illustration {
        background-position: top 8.75rem right 25%;
        background-position: top 0rem right 25%;

    }
}

.hero-desktop-bg-height {
    height: 12rem
}

@media screen and (min-width: 48em) and (max-width: 59.9375em) {
    .hero-desktop-bg-height {
        height: 23.4375rem
    }
}

@media screen and (min-width: 60em) {
    .hero-desktop-bg-height {
        height: 33.125rem;
        height: 28.75rem

    }
}

/* grid container and cell */

 .grid-container {
     padding-right: 0.625rem;
     padding-left: 0.625rem;
     max-width: 72rem;
     margin: 0 auto;
 }

.grid-container {
    padding-right: 1rem;
    padding-left: 1rem;
}

@media print, screen and (min-width: 48em) {
    .grid-container {
        padding-right: 0.9375rem;
        padding-left: 0.9375rem;
    }
}

@media screen and (min-width: 48em) and (max-width: 59.9375em) {
    .grid-container {
        max-width: 48rem
    }
}

@media screen and (min-width: 60em) and (max-width: 71.9375em) {
    .grid-container {
        width: 60rem
    }
}

@media screen and (min-width: 72em) and (max-width: 74.9375em) {
    .grid-container {
        width: 72rem
    }
}

@media screen and (min-width: 75em) and (max-width: 93.6875em) {
    .grid-container {
        width: 75rem
    }
}

.grid-container:focus, .no-focus:focus {
    outline: 0
}

.grid-x {
    display: flex;
    flex-flow: row wrap;
}

@media print, screen and (min-width: 60em) {
    .grid-x > .large-10, .grid-x > .large-8 {
        flex-basis: auto
    }
}

@media screen and (min-width: 72em) {
    .grid-x > .large-10, .grid-x > .xlarge-7 {
        flex-basis: auto
    }
}

.grid-x>.small-12 {
    flex-basis: auto;
    width: 100%;
}

@media print, screen and (min-width: 60em) {
    .grid-x > .large-8 {
        width: 66.66667%
    }
    .grid-x > .large-10 {
        width: 83.33333%;
        /*width: 95.33333%;*/

    }
}

@media screen and (min-width: 72em) {
    .grid-x > .xlarge-7 {
        width: 58.33333%
    }
}

.cell {
    flex: 0 0 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

/* HEADERS */

 .hero-wrapper .h1, .hero-wrapper h1 {
     font-family: LatoWebHeavy, Lato,Arial,sans-serif;
     font-style: normal;
     font-weight: 400;
     color: inherit;
     text-rendering: optimizeLegibility;

     padding: 0;
     font-size: 1.5rem;
     line-height: 1.26;
     margin-top: 0;
     margin-bottom: 1rem;

     letter-spacing: -0.005rem;
     letter-spacing: -0.03rem;
 }

.hero-wrapper h1 {
    line-height: 2rem;
}

.hero-wrapper .heading-1 {
    font-size: 2rem;
    font-weight: 900;
    line-height: 2.5rem;
}

@media print, screen and (min-width: 60em){
    .hero-wrapper .heading-1 {
        font-size: 2.5rem;
        line-height: 3rem;
    }
}

@media screen and (max-width: 59.9375em) {

    .hero-wrapper .heading-1 {
        font-size: 2rem;
        line-height: 2.1rem;
    }

    .content-hero-bg .heading-1.header, .hero-banner-subtext {
        text-align: center;
    }
}

@media screen and (max-width: 47.9375em) {
    .content-hero-bg .heading-1.header, .hero-banner-subtext {
        text-align: left;
    }
}

@media screen and (max-width: 47.9375em) {
    .bg-hero-text-mb .heading-1.header {
        margin-bottom: 1rem!important;
    }
}

.bg-hero-txt-content {
    color: #fff;
    position: absolute;
    top: 0;
    z-index: 10;
    transform: translateY(-100%);
}

.hero-banner-subtext {
    font-size: 1.375rem;
    line-height: 1.875rem;
    font-weight: 900;
}

@media screen and (min-width: 48em){
    .bg-hero-text .header, .bg-hero-text .subtext {
        width: 53%!important;
        max-width: 35.625rem!important;
        min-width: 28.125rem!important;
    }
}

@media screen and (min-width: 60em) {
    .bg-hero-txt-content {
        width: 100% !important;
    }
}

@media screen and (max-width: 47.9375em) {
    .bg-hero-text-mb .heading-1.header {
        margin-bottom: 1rem!important;
    }
}

@media screen and (max-width: 59.9375em){
    .content-hero-bg .heading-1.header, .hero-banner-subtext {
        text-align: center;
    }
}

@media screen and (max-width: 47.9375em) {
    .content-hero-bg .heading-1.header, .hero-banner-subtext {
        text-align: left;
    }
}

/* buttons */

 .button {
     display: inline-block;
     vertical-align: middle;
     margin: 0 0 1rem 0;
     font-family: inherit;
     padding: 0.85em 1em;
     -webkit-appearance: none;
     border: 1px solid transparent;
     border-radius: 4px;
     transition: background-color .25s ease-out,color .25s ease-out;
     font-size: .9rem;
     line-height: 1;
     text-align: center;
     cursor: pointer;
     background-color: #5d8000;
     color: #fff;
 }

.button.primary:focus, .button.primary:hover {
    background: #016d3b;
}

.hero-button-mt {
    margin-top: 1rem!important;
    max-width: 24.5rem!important;
}
.button, .button.medium {
    cursor: pointer;
    font-size: 1rem;
    padding: 0.6875rem;
}
.button, .button.expanded {
    max-width: 22.5rem;
}
.button, .button.secondary {
    box-shadow: 0 0.3125rem 0.875rem 0.0625rem rgb(0 0 0 / 10%);
}
.button.large {
    font-size: 1.25rem;
}
.button.primary {
    background-color: #5d8000;
    color: #fff;
}
.hero-button-wrapper .button {
    margin-top: 2rem;
}
@media screen and (max-width: 59.9375em) {
    .hero-button-wrapper .button {
        margin-top: 1.5rem;
    }
}
@media screen and (max-width: 47.9375em) {
    .bg-hero-text-mb .hero-banner-button {
        margin-top: 2rem!important;
    }
}

@media screen and (max-width: 59.9375em) {
    .button.expanded-mobile {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 22.5rem;
        width: 100%;
    }
}
.button.primary, .theme-gfmgreen .button.primary {
    background: #f7b231;
}

.button.primary {
    background-color: #02a95c;
    background: #02a95c;

    background-color: var(--color-green);
    background: var(--color-green);


}
@media screen and (min-width: 72em) {
    .button.large {
        padding: 1rem 0.625rem;
    }

    .button.large {
        font-size: 1.25rem;
    }

    .button, .button.secondary {
        box-shadow: 0 0.3125rem 0.875rem 0.0625rem rgb(0 0 0 / 10%);
    }

    .button, .button.expanded {
        max-width: 22.5rem;
    }

    .button, .button.medium {
        cursor: pointer;
        font-size: 1rem;
        padding: 0.6875rem;
    }
}

.button.large {
    font-size: 1.125rem;
    font-weight: 600;
    padding: 1rem;
}
@media print, screen and (min-width: 60em) {
    .button.large {
        padding: 1rem 1.5rem;
    }

    .button.large {
        font-size: 1.125rem;
        font-weight: 600;
        padding: 1rem;
    }

    .hero-button-wrapper .button {
        margin-top: 2rem;
    }
}

.hero-banner-button.button.expanded-mobile.large {
    font-size: 1rem;
    line-height: 1.25rem;
    height: 3rem;
    padding: 0.75rem 1.5rem;
}
@media screen and (max-width: 59.9375em){
    .hero-banner-button.button.expanded-mobile.large {
        max-width: 57.25rem;
    }
}

@media screen and (min-width: 60em) {
    .hero-button-wrapper {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }
}
@media print, screen and (min-width: 60em) {
    .hero-button-wrapper.with-worked {
        display: flex;
        margin-top: 1rem;
    }
}

@media screen and (max-width: 59.9375em) {
    .hero-button-wrapper .button {
        margin-top: 1.5rem;
    }
    .hero-button-wrapper .button {
        margin-top: 2rem;
    }
    .button.primary {
        /*background-color: #5d8000;*/
        color: #fff;
    }
    .button.large {
        font-size: 1.25rem;
    }
}

.vertical-separator {
    align-items: center;
    display: flex;
    margin: 0 40px;
    padding: 10px 0;
}
.hero-banner-seperator.vertical-separator {
    padding: 0;
}
.vertical-separator div {
    border-left: 1px solid #e4e4e4;
    height: 100%;
}

/* SECOND BUTTON  */

@media screen and (max-width: 59.9375em) {
    .button.expanded-mobile-holiday {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 22.5rem;
        width: 100%;
    }
}
.button.worked-button {
    background: 0 0;
    border: none;
    box-shadow: none;
    color: #333;
    padding: 0;
    text-align: left;
}
@media print, screen and (min-width: 60em) {
    .button.worked-button {
        color: #fff;
    }
}
@media screen and (max-width: 47.9375em) {
    .bg-hero-text-mb .hero-banner.worked-button {
        margin-top: 1.5rem!important;
    }
}
.worked-button-content {
    align-items: center;
    display: flex;
    padding: 0;
    text-align: left;
}
.worked-play-icon {
    height: 44px;
    width: 44px;
    border: #333 solid 2px;
    border-radius: 50%;
    padding-top: 10px;
    padding-left: 0.75rem;
}

@media print, screen and (min-width: 60em) {
    .worked-play-icon {
        border-color: #fff;
    }
}

.hero-banner-worked-play {
    border: 0.125rem solid #767676;
    height: 1.5rem;
    width: 1.5rem;
    padding-top: 1.5%;
    padding-left: 1.6%;
    font-size: .5rem;
}

@media print, screen and (min-width: 60em) {
    .hero-banner-worked-play {
        border: 0.125rem solid #767676;
        height: 2.75rem;
        width: 2.75rem;
        padding-top: 0.75rem;
        font-size: 1rem;
        padding-left: 0.85rem;
    }
}
.worked-button-text {
    line-height: 1.5rem;
    /*margin-left: 15px;*/
    font-weight: 900;
}

/* how */

.how-section {
    padding: 3rem 1rem;
}

/* top 4 */

@media print, screen and (min-width: 60em) {
    .grid-margin-x > .large-auto {
        width: auto
    }

    .grid-margin-x > .large-shrink {
        width: auto
    }

    .grid-margin-x > .large-1 {
        width: calc(8.33333% - 1.875rem)
    }

    .grid-margin-x > .large-2 {
        width: calc(16.66667% - 1.875rem)
    }

    .grid-margin-x > .large-3 {
        width: calc(25% - 1.875rem)
    }

    .grid-margin-x > .large-4 {
        width: calc(33.33333% - 1.875rem)
    }

    .grid-margin-x > .large-5 {
        width: calc(41.66667% - 1.875rem)
    }

    .grid-margin-x > .large-6 {
        width: calc(50% - 1.875rem)
    }

    .grid-margin-x > .large-7 {
        width: calc(58.33333% - 1.875rem)
    }

    .grid-margin-x > .large-8 {
        width: calc(66.66667% - 1.875rem)
    }

    .grid-margin-x > .large-9 {
        width: calc(75% - 1.875rem)
    }

    .grid-margin-x > .large-10 {
        width: calc(83.33333% - 1.875rem)
    }

    .grid-margin-x > .large-11 {
        width: calc(91.66667% - 1.875rem)
    }

    .grid-margin-x > .large-12 {
        width: calc(100% - 1.875rem)
    }
}

.grid-margin-x:not(.grid-x) > .cell {
    width: auto
}

.grid-margin-x {
    margin-left: -.625rem;
    margin-right: -.625rem
}

@media print, screen and (min-width: 48em) {
    .grid-margin-x {
        margin-left: -.9375rem;
        margin-right: -.9375rem
    }
}

.grid-margin-x > .cell {
    width: calc(100% - 1.25rem);
    margin-left: .625rem;
    margin-right: .625rem
}

@media print, screen and (min-width: 48em) {
    .grid-margin-x > .cell {
        width: calc(100% - 1.875rem);
        margin-left: .9375rem;
        margin-right: .9375rem
    }
}

.grid-margin-x > .auto {
    width: auto
}

.grid-margin-x > .small-6 {
    width: calc(50% - 1.25rem)
}

@media print, screen and (min-width: 48em) {
    .grid-margin-x > .auto {
        width: auto
    }

    .grid-margin-x > .shrink {
        width: auto
    }

    .grid-margin-x > .small-1 {
        width: calc(8.33333% - 1.875rem)
    }

    .grid-margin-x > .small-2 {
        width: calc(16.66667% - 1.875rem)
    }

    .grid-margin-x > .small-3 {
        width: calc(25% - 1.875rem)
    }

    .grid-margin-x > .small-4 {
        width: calc(33.33333% - 1.875rem)
    }

    .grid-margin-x > .small-5 {
        width: calc(41.66667% - 1.875rem)
    }

    .grid-margin-x > .small-6 {
        width: calc(50% - 1.875rem)
    }

    .grid-margin-x > .small-7 {
        width: calc(58.33333% - 1.875rem)
    }

    .grid-margin-x > .small-8 {
        width: calc(66.66667% - 1.875rem)
    }

    .grid-margin-x > .small-9 {
        width: calc(75% - 1.875rem)
    }

    .grid-margin-x > .small-10 {
        width: calc(83.33333% - 1.875rem)
    }

    .grid-margin-x > .small-11 {
        width: calc(91.66667% - 1.875rem)
    }

    .grid-margin-x > .small-12 {
        width: calc(100% - 1.875rem)
    }

    .grid-margin-x > .medium-auto {
        width: auto
    }

    .grid-margin-x > .medium-shrink {
        width: auto
    }

    .grid-margin-x > .medium-1 {
        width: calc(8.33333% - 1.875rem)
    }

    .grid-margin-x > .medium-2 {
        width: calc(16.66667% - 1.875rem)
    }

    .grid-margin-x > .medium-3 {
        width: calc(25% - 1.875rem)
    }

    .grid-margin-x > .medium-4 {
        width: calc(33.33333% - 1.875rem)
    }

    .grid-margin-x > .medium-5 {
        width: calc(41.66667% - 1.875rem)
    }

    .grid-margin-x > .medium-6 {
        width: calc(50% - 1.875rem)
    }

    .grid-margin-x > .medium-7 {
        width: calc(58.33333% - 1.875rem)
    }

    .grid-margin-x > .medium-8 {
        width: calc(66.66667% - 1.875rem)
    }

    .grid-margin-x > .medium-9 {
        width: calc(75% - 1.875rem)
    }

    .grid-margin-x > .medium-10 {
        width: calc(83.33333% - 1.875rem)
    }

    .grid-margin-x > .medium-11 {
        width: calc(91.66667% - 1.875rem)
    }

    .grid-margin-x > .medium-12 {
        width: calc(100% - 1.875rem)
    }
}

@media print, screen and (min-width: 60em) {
    .grid-margin-x > .large-auto {
        width: auto
    }

    .grid-margin-x > .large-shrink {
        width: auto
    }

    .grid-margin-x > .large-1 {
        width: calc(8.33333% - 1.875rem)
    }

    .grid-margin-x > .large-2 {
        width: calc(16.66667% - 1.875rem)
    }

    .grid-margin-x > .large-3 {
        width: calc(25% - 1.875rem)
    }

    .grid-margin-x > .large-4 {
        width: calc(33.33333% - 1.875rem)
    }

    .grid-margin-x > .large-5 {
        width: calc(41.66667% - 1.875rem)
    }

    .grid-margin-x > .large-6 {
        width: calc(50% - 1.875rem)
    }

    .grid-margin-x > .large-7 {
        width: calc(58.33333% - 1.875rem)
    }

    .grid-margin-x > .large-8 {
        width: calc(66.66667% - 1.875rem)
    }

    .grid-margin-x > .large-9 {
        width: calc(75% - 1.875rem)
    }

    .grid-margin-x > .large-10 {
        width: calc(83.33333% - 1.875rem)
    }

    .grid-margin-x > .large-11 {
        width: calc(91.66667% - 1.875rem)
    }

    .grid-margin-x > .large-12 {
        width: calc(100% - 1.875rem)
    }
}

@media screen and (min-width: 72em) {
    .grid-margin-x > .xlarge-auto {
        width: auto
    }

    .grid-margin-x > .xlarge-shrink {
        width: auto
    }

    .grid-margin-x > .xlarge-1 {
        width: calc(8.33333% - 1.875rem)
    }

    .grid-margin-x > .xlarge-2 {
        width: calc(16.66667% - 1.875rem)
    }

    .grid-margin-x > .xlarge-3 {
        width: calc(25% - 1.875rem)
    }

    .grid-margin-x > .xlarge-4 {
        width: calc(33.33333% - 1.875rem)
    }

    .grid-margin-x > .xlarge-5 {
        width: calc(41.66667% - 1.875rem)
    }

    .grid-margin-x > .xlarge-6 {
        width: calc(50% - 1.875rem)
    }

    .grid-margin-x > .xlarge-7 {
        width: calc(58.33333% - 1.875rem)
    }

    .grid-margin-x > .xlarge-8 {
        width: calc(66.66667% - 1.875rem)
    }

    .grid-margin-x > .xlarge-9 {
        width: calc(75% - 1.875rem)
    }

    .grid-margin-x > .xlarge-10 {
        width: calc(83.33333% - 1.875rem)
    }

    .grid-margin-x > .xlarge-11 {
        width: calc(91.66667% - 1.875rem)
    }

    .grid-margin-x > .xlarge-12 {
        width: calc(100% - 1.875rem)
    }
}

.funds-contain--tiles-grid .grid-item {
    display: inline-block;
    float: none;
    margin-bottom: 1rem;
    vertical-align: top;
    padding: 0;
    min-height: initial
}

.funds-contain--tiles-grid .grid-item.column:last-child {
    float: left
}

.funds-contain--tiles-grid .react-campaign-tile {
    height: 100%
}

@media screen and (max-width: 47.9375em) {
    .funds-contain--tiles-grid .react-campaign-tile {
        border: none
    }

    .funds-contain--tiles-grid .react-campaign-tile-details {
        padding: 1rem 0
    }

    .funds-contain--tiles-grid .react-campaign-tile-img--contain {
        border-radius: 4px
    }
}

.funds-contain--tiles-grid {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 1rem
}

.funds-contain--tiles-grid .react-campaign-tile {
    height: 100%;
    margin-bottom: 0
}

@media print, screen and (min-width: 48em) {
    .funds-contain--tiles-grid .react-campaign-tile {
        background: #fff
    }
}

@media screen and (max-width: 47.9375em) {
    .funds-contain--tiles-grid .react-campaign-tile-details {
        background: 0 0
    }
}

@media print, screen and (min-width: 48em) {
    .tiles-desktop-show3 .cell:nth-of-type(4) {
        display: none
    }
}

a.fund_tile_card_link {
    text-decoration: none;
    color: inherit;
}

.react-campaign-tile {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
}

@media print, screen and (min-width: 48em) {
    .react-campaign-tile {
        box-shadow: 0 0.5rem 1.5rem 0 #F2EFED;
    }
}

.funds-contain--tiles-grid .react-campaign-tile {
    height: 100%;
}

.funds-contain--tiles-grid .react-campaign-tile {
    height: 100%;
    margin-bottom: 0;
}

@media print, screen and (min-width: 48em) {
    .funds-contain--tiles-grid .react-campaign-tile {
        background: #fff;
    }
}

.campaign-tile-img--contain, .react-campaign-tile-img--contain {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 4px;
    display: block;
    padding-top: 66.625%;
    width: 100%;
}

@media print, screen and (min-width: 48em) {
    .campaign-tile-img--contain, .react-campaign-tile-img--contain {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.react-campaign-tile-details {
    display: flex;
    flex-direction: column;
    height: inherit;
    background: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 1rem 0;
}

@media print, screen and (min-width: 48em) {
    .react-campaign-tile-details {
        padding: 1rem;
    }
}

@media print, screen and (min-width: 48em) {
    .react-campaign-tile-details {
        padding: 1rem;
    }
}

.fund-location {
    color: var(--color-green);
    color: var(--color-blue);
    color: var(--color-primary);
    font-size: .875rem;
    font-weight: 900;
    text-transform: uppercase;
}

.fund-activity {
    margin-top: 3rem !important;
}

@media screen and (max-width: 47.9375em) {
    .fund-description {
        display: none;
    }
}

.fund-item {
    margin-bottom: 0.5rem;
}

.fund-item:last-child {
    margin-bottom: 0;
}

@media print, screen and (min-width: 48em) {
    .hide-for-medium {
        display: none!important;
    }
}

.fund-title {
    color: #333;
    display: block;
    font-weight: 900;
}

.clamp {
    max-height: 3.5rem;
    overflow: hidden;
}

.nav-recommendations-contain .tile-footer, .tile-list-title, .truncate-single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-bar {
    border-radius: 6.25rem;
    height: 0.25rem;
}

.progress-bar-behind {
    background-color: #eaf3f1;
    width: 100%;
}

.progress-bar-fill {
    background-color: var(--color-green);
    background-color: var(--color-primary);
    width: 80% !important;;

}