﻿body {
}

.container-wider {
    max-width: 1600px;
}

.video-crop {
    height: 0;
    padding-bottom: 38%;
    padding-top: 0px;
    overflow: hidden;
    
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    
}

@media (min-width: 992px) {
    .video-crop {
        margin-bottom: -100px;
    }
}

#sdge-video {
    pointer-events: none;
    cursor: default;
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-placeholder {
    position: absolute;
    width: 100%;
}

.hero-text {
    position: absolute;
    width: 85%;
    height: 200px;
    top: -50%;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    color: #fff;
    font-weight: 600;
    padding-top: 60px;
}

.hero-text.fundraiser-mode {
    height: 300px;

}

@media (max-width: 600px) {
    .hero-text.fundraiser-mode h1 {
        display: none;
    }

    .hero-text.fundraiser-mode {
        padding-top: 100px;
    }
}

.hero-text h1 {
    font-size: 30px;
    font-family: Poppins;
}

.hero-text h2 {
    font-size: 14px;
}

@media (min-width: 375px) {
    .hero-text h1 {
        font-size: 36px;
    }

    .hero-text h2 {
        font-size: 16px;
    }
}

@media (min-width: 640px) {
    .hero-text {
        width: 533px;
    }

    .hero-text h1 {
        font-size: 72px;
    }

    .hero-text h2 {
        font-size: 18px;
    }
}

@media (min-width: 1250px) {
    .hero-text {
        width: 780px;
    }

    .hero-text h1 {
        font-size: 115px;
    }

    .hero-text h2 {
        font-size: 24px;
    }
}

.panel-programs {
    height: 158px;
    color: #fff;
    cursor: pointer;
}

@media (min-width: 992px) {
    .panel-programs {
        margin-left: -1px; /*hack to fix gap*/
    }
}

.panel-child-dev {
    background: #A94732 url('/Content/images/child-dev.png') 0% 0% no-repeat padding-box;
    background-position: right;
}

.panel-nutrition {
    background: #765852 url('/Content/images/nutrition.png') 0% 0% no-repeat padding-box;
    background-position: right;
}

.panel-housing {
    background: #1E3939 url('/Content/images/housing.png') 0% 0% no-repeat padding-box;
    background-position: right;
}

.panel-workforce {
    background: #444444 url('/Content/images/workforce.png') 0% 0% no-repeat padding-box;
    background-position: right;
}

.panel-programs h3 {
    position: absolute;
    height: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    font-size: 20px;
    font-family: Poppins;
    font-weight: 500;
}

.panel-programs .learn-more {
    position: absolute;
    height: 20px;
    bottom: -20px;

    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.panel-programs .show-text {
    bottom: 20px;
}

.panel-what-we-do .what-we-do {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1.08px;
    color: #AE4934;
}

.panel-what-we-do .btn {
    padding: 8px 40px;
    font-size: 18px;
    font: Medium 18px/27px Poppins;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border-width: 2px;
    width: 100%;
    margin-bottom: 20px;
}

@media (min-width: 992px) {
    .panel-what-we-do .btn {
        width: 420px;

    }
}

.panel-what-we-do .btn-get-involved {
    color: #FFF;
    border-color: #AE4934;
    background: #AE4934 0% 0% no-repeat padding-box;
}

.panel-what-we-do .btn-learn-more {
    color: #AE4934;
    border-color: #AE4934;
    background: #FFF 0% 0% no-repeat padding-box;
}

.panel-what-we-do a.btn-get-involved:hover {
    color: #fff;
    background-color: #872E1C;
    border-color: #872E1C;
}

.panel-what-we-do a.btn-learn-more:hover {
    color: #fff;
    background-color: #872E1C;
    border-color: #872E1C;
}

.panel-what-we-do .what-we-do-title {    
    font-size: 40px;
    line-height: 59px;
    font-weight: 600;
    color: #040404;
    padding-bottom: 20px;
    font-family: Poppins;
}

.btn-brown {
    color: #FFF;
    border-color: #AE4934;
    background: #AE4934 0% 0% no-repeat padding-box;
    height: 35px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
    margin-bottom: 5px;
}

.btn-white {
    color: #AE4934;
    border-color: #fff;
    background: #FFF 0% 0% no-repeat padding-box;
    height: 35px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
    margin-bottom: 5px;
}

a.btn-brown:hover,
a.btn-white:hover {
    color: #fff;
    background-color: #872E1C;
    border-color: #872E1C;
}



@media (min-width: 375px) {
    .panel-what-we-do .what-we-do-title {
        font-size: 49px;
    }

}

.panel-what-we-do .people-helping-people-circle {
    position: absolute;
    top: 6%;
    z-index:2;
}

.panel-what-we-do .video-children-dancing {
    position: absolute;
    top: 55%;
    max-width: 50%;
    left: 0px;
    z-index: 2;
}

@media (min-width: 576px) {
    .panel-what-we-do .video-children-dancing {
        top: 50%;
    }
}

.panel-what-we-do .main-image {
    position: absolute;
    max-width: 80%;
    right: 0px;
    z-index: 1;
}

@media (min-width: 992px) {
    .panel-what-we-do .main-image-lg {
        max-width: 80%;
        left: 100px;
        right:auto;
    }

    .panel-what-we-do .video-children-dancing-lg-100 {
        top:25vw;
        max-width: 55%;
    }

    .panel-what-we-do .btn-learn-more {
        width: 197px;
    }

    .panel-what-we-do .btn-get-involved {
        width: 197px;
    }
}

.panel-what-we-do .collage-wrapper {
    min-height: 85vw;
}


@media (min-width: 992px) {
    .panel-what-we-do .collage-wrapper-lg-700 {
        min-height: 700px;
    }
}

@media (min-width: 1200px) {
    .panel-what-we-do .collage-wrapper-xl-800 {
        min-height: 800px;
    }
}

@media (min-width: 1600px) {

    .panel-what-we-do {
        min-height: 900px;
    }
    .panel-what-we-do .main-image-lg {
        max-width: 80%;
    }

    .panel-what-we-do .video-children-dancing-xxl-400 {
        top: 400px;
    }
}

.modal-lg {
    width: 595px;
}

.people-served {
    background-color: #AE4934;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    padding-top: 50px;
    padding-bottom: 100px;
    margin-bottom: 250px;
}

.button-top {
    position: relative;
    z-index: 1000;
}

.people-served .pre-header {
    font-size: 18px;
    font-weight: 600;
    font-family: Poppins;
    color: #fff;
    text-transform: uppercase;
}

.people-served .header {
    font-weight: 600;
    font-size: 25px;
    font-family: Poppins;
    color: #fff;
    z-index: 4;
    position: relative;
    padding-bottom: 30px;
}

.people-served .btn-donate {
    padding: 8px 40px;
    font-size: 18px;
    font-weight: 500;
    font-family: Poppins;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border-width: 2px;
    width: 60%;
    background-color: #fff;
    border-color: #fff;
    color: #AE4934;
    z-index: 2;
    position: relative;
}

@media (min-width: 375px) {
    .people-served .btn-donate {
        width: 320px;
    }
}

.people-served a.btn-donate:hover {
    color: #fff;
    background-color: #872E1C;
    border-color: #872E1C;
}
@media (min-width: 700px) {
    .people-served {
        margin-bottom: 300px;
    }
}

@media (min-width: 992px) {
    .people-served {
        padding-top: 100px;
        min-height: 400px;
        margin-bottom: 100px;
    }

    .people-served .header {
        font-size: 49px;
        font-size: 2.6vw;
    }
}

.people-served .image-left {
    position: absolute;
    left: 0px;
    top: 220px;
    z-index: 1;
    width: 40%;
}

.people-served .image-right {
    position: absolute;
    right: 0px;
    top: 220px;
    z-index: 1;
    width: 40%;
}

.people-served .image-center {
    position: absolute;
    left: 50%;
    top: 310px;
    z-index: 3;
    width: 35%;
    margin-left: -17%;
}

@media (min-width: 992px) {
    .people-served {
        padding-bottom: 50px;
    }
    .people-served .image-left {
        top: -50px;
        width: 33%;
        left: -70px;
    }

    .people-served .image-right {
        top: -50px;
        width: 24%;
    }

    .people-served .image-center {
        margin-left: 0;
        left: auto;
        right: 12%;
        width: 18%;
        top: 140px;
    }

    .people-served .btn-donate {
        width: 197px;
    }
}

@media (min-width: 1600px) {
    .people-served {
        padding-bottom: 100px;
    }
}

.grid-programs .pre-header {
    color: #AE4934;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 600;
    font-family: Poppins;
}

.grid-programs .header {
    font-weight: 600;
    font-size: 49px;
    color: #040404;
    font-family: Poppins;
}

.grid-programs .grid-block {
    cursor: pointer;
    color: #fff;
    position: relative;
    padding: 4px;
    padding-left: 4px;
    padding-right: 4px;
    overflow: hidden;
}

.grid-programs .program-name {
    position: absolute;   
    bottom: -20px;
    padding-left: 15px;
    font-weight: 600;
    font-size: 14px;
    font-family: Poppins;

    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

@media (min-width: 375px) {
    .grid-programs .program-name {
        font-size: 20px;
    }
}



.grid-programs a .program-name {
    color: #fff;
}

@media (min-width: 992px) {
    .grid-programs .program-name {
        padding-left: 30px;
        padding-right: 20px;

        bottom: calc(8% - 27px);
    }
}

.grid-programs .learn-more {
    font-weight: 500;
    font-size: 16px;
    font-family: Poppins;
    margin-top: 12px;
    visibility: hidden;

    -webkit-transition: visibility 0.35s linear;
    transition: visibility 0.35s linear;
}

.grid-programs .program-name.jump-text {
    bottom: calc(9% + 5px);
}

.grid-programs .jump-text .learn-more {
    visibility: visible;
}

.our-impact {
    margin-top: 50px;
    background-color: #FAF0DC;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 50px;
}

.our-impact .pre-header {
    color: #AE4934;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    font-family: Poppins;
}

.our-impact .header {
    color: #040404;
    font-weight: 600;
    font-size: 35px;
    font-family: Poppins;
}

.our-impact .testimonial-author {
    padding-top: 20px;
    font-weight: 700;
}

.our-impact .slick-slider {
    margin: auto;
    margin-bottom: 100px;
    max-width: 900px;
}


.our-impact .slick-slider .slider-padding {
    padding-left: 50px;
    padding-right: 50px;
    text-align: center;
    font-weight: 600;
    font-style: italic;
    font-size: 19px;
}

.our-impact .btn-get-involved {
    color: #FFF;
    border-color: #AE4934;
    background: #AE4934 0% 0% no-repeat padding-box;
    border-radius: 2px;
    width: 90%;
}

.our-impact a.btn-get-involved:hover {
    color: #FFF;
    border-color: #872E1C;
    background: #872E1C;
}

@media (min-width: 992px) {
    .our-impact .btn-get-involved {
        width: 197px;
    }

    .our-impact {
        padding-bottom: 96px;
    }
}

.support-matters {
    font-family: Poppins;
    font-weight: 600;
    color: #fff;
    background-color: #AE4934;
    padding-top: 76px;
    padding-bottom: 98px;
}

.support-matters h3 {
    text-transform: uppercase;
    font-size: 16px;
}

.support-matters h2 {
    font-size: 35px;
    padding-bottom: 20px;
}

.support-matters p {
    font-size: 20px;
    line-height: 37px;
    font-family: 'Open Sans';
    text-align: left;
}

.support-matters .button-wrapper {
    text-align: left;
}

.support-matters .btn-donate {
    padding: 8px 40px;
    font-size: 18px;
    font-weight: 500;
    font-family: Poppins;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border-width: 2px;
    width: 100%;
    background-color: #fff;
    border-color: #fff;
    color: #AE4934;
    z-index: 2;
    position: relative;
}

@media (min-width: 375px) {
    .support-matters .btn-donate {
        width: 320px;
    }
}

.support-matters a.btn-donate:hover {
    color: #fff;
    background-color: #872E1C;
    border-color: #872E1C;
}

.support-matters .image-spacing-wrapper {
    position: relative;
    height: 100%;
}
.support-matters .make-a-difference-image {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    max-width: 651px;
}

@media (min-width: 992px) {
    .support-matters {
        padding-bottom: 0px;
    }

    .support-matters .button-wrapper {
        text-align: center;
    }

    .support-matters h3 {
        font-size: 18px;
    }

    .support-matters h2 {
        font-size: 49px;
    }

    .support-matters .btn-donate  {
        margin-bottom: 96px;
    }
}

.sponsors {
    padding-top: 50px;
    padding-bottom: 50px;
}

.sponsors .pre-header {
    color: #AE4934;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 600;
    font-family: Poppins;
}

.sponsors .header {
    font-weight: 600;
    font-size: 49px;
    color: #040404;
    font-family: Poppins;
    padding-bottom: 50px;
}

@media (min-width: 992px) {
    .sponsors {
        padding-top: 75px;
        padding-bottom: 75px;
    }
}



.modal-header {
    font-weight: 600;
    font-family: Poppins;
    font-size: 35px;
}

.modal-header .modal-title {
    padding: 1rem;
}

.modal-dialog .btn-cta {
    color: #FFF;
    border-color: #AE4934;
    background: #AE4934 0% 0% no-repeat padding-box;
    text-align: center;
    width: 350px;
    margin-top: 20px;
}

.modal-header .close {
    font-size: 40pt;
    color: #AE4934;
}

.button-close-top-left {
    position: absolute;
    top: 3px;
    right: 3px;
}

.button-close-top-left .close {
    font-size: 50pt;
    color: #AE4934;
    line-height: .5;
    opacity: 1;
}

.modal-dialog input.btn-submit-email {
    color: #FFF;
    border-color: #AE4934;
    background: #AE4934 0% 0% no-repeat padding-box;
    text-align: center;
    width: 350px;
    margin-top: 20px;
}

.modal-dialog input[type='text'] {
    font-size: 19px;
    margin-top: 30px;
    margin-bottom: 30px;
    height: 60px;
    width: 100%;
    border: 1px solid #CCCCCC;
    padding-left: 20px;
}

.modal-dialog p.text {
    color: #040404;
}


.annual-report {
    background-color: #FAF0DC;
    font-family: Poppins;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-bottom: 100px;
}

.annual-report .header {
    color: #040404;
    font-weight: 600;
    font-size: 35px;
    font-family: Poppins;
    
}

.annual-report .btn-download-report {
    color: #FFF;
    border-color: #AE4934;
    background: #AE4934 0% 0% no-repeat padding-box;
    height: 43px;
    padding-top: 7px;
}

.annual-report .annual-report-stat-img {
    padding-top: 80px;
}

@media (min-width: 400px) {
    .annual-report {
        padding-top: 120px;
    }
}

@media (min-width: 420px) {
    .annual-report {
        padding-top: 200px;
    }
}

@media (min-width: 600px) {
    .annual-report {
        padding-top: 300px;
    }
}

@media (min-width: 600px) {
    .annual-report {
        padding-top: 340px;
    }
}

@media (min-width: 992px) {
    .annual-report {
        padding-top: 50px;
    }

    .annual-report .header {
        padding-top: 100px;
    }

    .annual-report .annual-report-stat-img {
        padding-top: 79px;
    }
}

#modal-annualreport .modal-dialog {
    background-color: transparent;
}

#modal-annualreport .report-header {
    color: #AE4934;
    font-weight: 600;
    font-size: 35px;
    font-family: Poppins;
}

#modal-annualreport .modal-body {
    max-height: calc(100vh - 57px);
    overflow-y: auto;
}

#modal-annualreport .close {
    color: #AE4934;
    opacity: 1;
    font-size: 40px;
}

#modal-annualreport .modal-header {
    border-bottom: 0px;
}

@media (min-width: 1200px) {
    #modal-annualreport .modal-xl {
        max-width: 910px;
    }

    #modal-annualreport .report-header {
        padding-top: 50px;
    }
}

.annual-report .fact-img {
    text-align: center;
}

.annual-report .fact-number {
    font-family: 'Open Sans';
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    color: #AE4934;
}

.annual-report .fact-detail {
    font-style: normal;
    font-size: 17px;
    text-align: center;
}

@media (min-width: 1200px) {
    .annual-report .fact-detail {
        padding-left: 5px;
        padding-right: 5px;
    }

    .annual-report .fact-detail.more-padding {
        padding-left: 50px;
        padding-right: 50px;
    }
}

/**temporary css people served section to accomodate annual report*/
.people-served {
    margin-bottom: 0px;
}


#modal-holidaydonation .modal-dialog {
    background-color: transparent;
}

#modal-holidaydonation .report-header {
    color: #AE4934;
    font-weight: 600;
    font-size: 35px;
    font-family: Poppins;
}

#modal-holidaydonation .modal-body {
    max-height: calc(100vh - 57px);
    overflow-y: auto;
    padding-top: 0px;
}

#modal-holidaydonation .close {
    color: #AE4934;
    opacity: 1;
    font-size: 40px;
}

#modal-holidaydonation .modal-header {
    border-bottom: 0px;
    padding-bottom: 5px;
}

@media (min-width: 1200px) {
    #modal-holidaydonation .modal-xl {
        max-width: 910px;
    }

    #modal-holidaydonation .report-header {
        padding-top: 0px;
    }
}