@media(max-width: 1800px) {

    .about-us-section .left-image {
        height: 550px;
    }



    .about-us-section {
        /* background: #657A69 url("../images/ballon-hd-light.png") no-repeat right top; */
        background: #657A69 url("../images/webp/ballon-hd-light.webp") no-repeat right top;
        background-size: auto 100%;
    }



    .about-us-section .text-section {
        max-width: 1100px;
    }

    h2 {
        color: #344838;
        font-size: 40px;
        line-height: 54px;
    }

    .about-us-section p {
        font-size: 22px;
        line-height: 34px;
    }

    .jewish-text-section h3 {
        font-size: 60px;
        line-height: 66px;
    }

    .banner {
        /* background: url("../images/banner-bg-desktop.jpg") no-repeat -200px top; */
        background: url("../images/webp/banner-bg-desktop.webp") no-repeat -200px top;
    }

    .banner-donate {
        /* background: url("../images/donate-banner-bg.jpg") no-repeat left top; */
        background: url("../images/webp/donate-banner-bg.webp") no-repeat left top;
        background-size: cover;
        height: auto;
        overflow-x: hidden;
    }

    .banner-donate .container {
        padding-left: 0;
        padding-right: 0;
    }

    .banner-donate .image-section {
        display: flex;
        align-self: stretch;
    }

    .banner-donate .image-section img {
        position: relative;
    }

    .banner-donate .flex-container {
        align-items: center;
        justify-content: space-between;
        display: flex;
        width: 100%;
    }

    .banner-donate .text-section-banner {
        padding-left: 40px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .banner-donate .text-section-banner p {
        font-size: 32px;
    }

    .banner-donate .text-section-banner p {
        font-size: 28px;
    }


}

@media(max-width: 1600px) {

    .header .logo img {
        height: 90px;
    }

    .header .logo a {
        padding: 25px 0;
    }

    .navigation ul li a {
        padding: 40px 20px;
    }



    h1 {
        font-size: 160px;
        line-height: 150px;
    }

    .about-list-section .about-listing p {
        font-size: 20px;
        line-height: 30px;
    }

    .banner-section .text-section-banner p {
        font-size: 42px;
        line-height: 50px;
    }



    .about-list-section .about-listing {
        padding: 40px 20px;

    }

    .about-list-section {
        margin-top: 80px;
    }



    .banner {
        /* background: url("../images/banner-bg-desktop.jpg") no-repeat -400px top; */
        background: url("../images/webp/banner-bg-desktop.webp") no-repeat -400px top;
        height: auto;
        padding: 110px 0;

    }

    .about-us-section .text-section {
        padding: 110px 0;
    }

    .partner-with-us {
        padding: 110px 0 90px;
    }

    .banner-section .text-section-banner {
        max-width: 600px;
    }

    .about-bonei-olam {
        background-size: 75% auto
    }

    .calltoaction h2 {
        font-size: 120px;
        line-height: 110px;

    }

    ul.Gratitude-links li {
        font-size: 28px;
        line-height: 32px;

    }

    ul.Gratitude-links li a {
        padding: 15px 40px;
    }

    .partner-with-us .title-section p {
        font-size: 28px;
        line-height: 34px;
    }

    .partner-with-us .text-section p {
        font-size: 20px;
        line-height: 30px;
    }

    .partner-with-us .container {
        max-width: 1200px;
    }

    .primary-btn-lg {
        font-size: 28px;
        line-height: 34px;
        padding: 15px 100px;
    }

    .banner-section .text-section-banner {
        padding-top: 0;
    }





    .monthly-yearlay-tab input[type="radio"] ~ label {
        width: auto;
        padding-left: 60px;
        padding-right: 60px;
    }

    .monthly-yearlay-tab {
        grid-column-gap: 30px;
    }

    .donate-form-section {
        padding: 40px;
    }

    .donate-main-section .flex-container {
        grid-column-gap: 40px;
    }

    .price-list p {
        font-size: 16px;
        line-height: 22px;
    }

    .donate-price-wrapper .price-list .Other-text {
        font-size: 16px;
        line-height: 22px;
    }

    .donation-form .two-col,
    .donation-form .three-col {
        grid-column-gap: 30px;
    }



}


@media(max-width: 1400px) {

    .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .donate-price-wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .donate-form-section {
        padding: 30px;
    }

    .donation-form label {
        font-size: 14px;
    }

    .checkbox-section label p {
        font-size: 14px;
    }

    .checkbox-section label p span {
        font-size: 12px;
    }

}



@media(max-width: 1300px) {

    .navigation ul li a {
        font-size: 18px;
    }

    .donate-button-section .primary-btn {
        padding: 0 40px
    }

    .banner-donate .text-section-banner p {
        font-size: 24px;
    }

    .banner-pattern {
        right: 40px;
        top: 30px;

    }

}



@media(max-width: 1200px) {

    .navigation ul li a {
        font-size: 17px;
    }

    .donate-button-section .primary-btn {
        padding: 0 30px
    }

    .banner {
        /* background: url("../images/banner-bg-desktop.jpg") no-repeat -600px top; */
        background: url("../images/webp/banner-bg-desktop.webp") no-repeat -600px top;
        height: auto;
        padding: 110px 0;

    }


    h1 {
        font-size: 120px;
        line-height: 120px;
    }

    h2 {
        font-size: 34px;
        line-height: 44px;
    }

    .about-us-section h2 br {
        display: none;
    }

    .banner-section .text-section-banner p {
        font-size: 32px;
        line-height: 40px;
    }

    .jewish-text-section h3 {
        font-size: 48px;
        line-height: 54px;
    }



    .banner-section .text-section-banner {
        max-width: 450px;
    }



    .about-list-section .about-listing p {
        font-size: 20px;
        line-height: 30px;
    }

    .about-us-section .text-section {
        max-width: inherit;
        padding: 120px 80px;
    }

    .about-us-section .left-image {
        height: 400px;
        bottom: -80px;
        transform: translateX(-110px);
    }

    .about-us-section p {
        padding: 0 20px;
        font-size: 20px;
        line-height: 34px;
    }

    .about-us-section .seprator {
        margin: 20px auto 40px;

    }

    .calltoaction h2 {
        font-size: 90px;
        line-height: 80px;
    }

    ul.Gratitude-links li {
        font-size: 22px;
        line-height: 30px;
    }

    ul.Gratitude-links li a {
        padding: 10px 30px;

    }

    .calltoaction {
        padding: 65px 0 60px;
    }

    .calltoaction h2 {
        margin-bottom: 10px;
    }

    .banner-donate h1 {
        margin-bottom: 20px;
    }

    .banner-donate .image-section {
        margin-right: -100px;
    }

    .banner-donate .text-section-banner {
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 30px;
    }




}









@media(max-width: 1100px) {


    .donate-main-section .flex-container .left-col {
        width: 65%;
    }

    .donate-main-section .flex-container .right-col {
        width: 35%;
    }


    .price-list .price {
        font-size: 24px;
        margin: 0;
    }

    .price-list p {
        font-size: 14px;
        line-height: 16px;
    }

    .donate-price-wrapper .listing input[type="radio"]:checked ~ label p br {
        display: none;
    }

    .donate-price-wrapper .price-list {
        padding: 12px 10px;
    }

    .monthly-yearlay-tab input[type="radio"] ~ label {
        font-size: 16px;
    }

    .donate-form-section .sub-text {
        font-size: 18px;
    }

    .header .logo img {
        height: 70px;
    }

    .navigation ul li a {
        font-size: 15px;
        padding: 30px 15px;
    }

    .donate-button-section .primary-btn {
        padding: 0 30px;
        font-size: 17px;
    }




}


@media(max-width: 991px) {

    .navigation ul li a {
        padding: 20px 15px;
    }




}


@media(max-width: 900px) {

    .banner {
        background: url("../images/banner-mobile-bg.jpg") no-repeat left top;
        height: auto;
        padding: 110px 0 0;
        background-size: cover;

    }

    .banner .banner-mob-img {
        display: flex;
        max-width: 100%;
        margin-top: -120px;
        z-index: 1;
    }

    .banner .container {
        padding: 0;
    }

    .banner .container .flex-container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .banner-section .text-section-banner {
        text-align: center;
        margin: 0 auto;
    }

    .banner-section .text-section-banner p {
        text-align: center;
    }

    .jewish-text-section {
        text-align: right !important;
    }

    .banner-section .button-section {
        position: relative;
        z-index: 2;
    }

    .about-list-section {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }

    .about-list-section .about-listing {
        text-align: left;
    }

    .about-list-section .about-listing {
        padding: 40px;
    }

    .about-list-section .about-listing .icon-section {
        margin: 0 0 20px 0;
    }

    .about-bonei-olam {
        padding: 110px 0 85px;
        /* background: url("../images/ribbon-bg-mob.png") no-repeat right 300px; */
        background: url("../images/webp/ribbon-bg-mob.webp") no-repeat right 300px;
        background-size: 100% auto;
    }


    h2 {
        font-size: 30px;
        line-height: 42px;
    }

    h2 br {
        display: none;
    }

    .donate-main-section .flex-container {
        flex-wrap: wrap;
    }

    .donate-main-section .flex-container .left-col {
        width: 100%;
        order: 2;
    }

    .donate-main-section .flex-container .right-col {
        width: 100%;
        order: 1;
    }

    .donate-price-wrapper {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .donate-main-section .container {
        padding-left: 0;
        padding-right: 0;
    }

    .donate-form-section {
        box-shadow: none;
        border-radius: 0;
        padding: 40px;
    }

    .donate-price-wrapper {
        padding: 0 40px 60px;
    }

    .donate-price-wrapper .listing input[type="radio"]:checked ~ label p br {
        display: block;
    }

}


@media(max-width: 800px) {

    ul.Gratitude-links li {
        font-size: 20px;
        line-height: 28px;
    }

    ul.Gratitude-links li a {
        padding: 10px 20px;
    }

    .partner-with-us {
        background-position: left 40px;
    }

}


@media(max-width:767px) {

    h1 {
        font-size: 84px;
        line-height: 80px;
    }

    .banner-section .text-section-banner p {
        font-size: 24px;
        line-height: 32px;
        font-family: 'sweet_sans_proregular';
        margin: 0;
        padding: 0;
    }


    .jewish-text-section h3 {
        font-size: 48px;
        line-height: 52px;
    }

    .jewish-text-section h3 span {
        padding-right: 0;
        font-size: 32px;
        line-height: 32px;
    }

    .banner-section .text-section-banner {
        max-width: 380px;
    }

    .jewish-text-section {
        margin-top: 20px;
        padding-top: 20px;
    }


    .primary-btn-lg {
        font-size: 24px;
        line-height: 32px;
        padding: 12px 60px;
    }

    h2 {
        font-size: 24px;
        line-height: 36px;
    }

    .about-us-section p {
        font-size: 18px;
        line-height: 30px;
        padding: 0 10px;
    }

    .about-us-section .text-section {
        padding: 60px 60px;
    }

    .about-us-section .left-image {
        height: 300px;
        bottom: -60px;
        transform: translateX(-70px);
    }

    .about-us-section .seprator {
        margin: 10px auto 30px;
    }


    .calltoaction h2 {
        font-size: 60px;
        line-height: 60px;
    }


    ul.Gratitude-links {
        display: block;
        justify-content: center;
    }

    ul.Gratitude-links li {
        border: 0;
    }

    ul.Gratitude-links li a {
        border: 0;
        padding: 30px 0;
        display: block;
        position: relative;
        font-size: 24px;
    }

    ul.Gratitude-links li a:before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 100px;
        height: 1px;
        background: rgba(255, 255, 255, .3)
    }

    ul.Gratitude-links li:last-child a:before {
        display: none;
    }

    .about-bonei-olam .title-section p {
        font-size: 12px;
        margin-bottom: 0;
    }

    .about-bonei-olam {
        padding: 60px 0 60px;
    }

    .about-us-section {
        /* background: #657A69 url("../images/baloon-bg-mobile.png") no-repeat right top; */
        background: #657A69 url("../images/webp/baloon-bg-mobile.webp") no-repeat right top;
        background-size: auto;
        background-size: auto 100%;
    }

    .partner-with-us {
        /* background: #EFEEEC url("../images/hand-bg-mobile.png") no-repeat left -70px; */
        background: #EFEEEC url("../images/webp/baloon-bg-mobile.webp") no-repeat left -70px;
        position: relative;
        padding: 60px 0 60px 0;
        background-size: 80% auto
    }

    .banner-pattern {
        position: absolute;
        right: 20px;
        top: 25px;
        height: 10px;
    }


    .banner {
        padding-top: 50px;
        padding-bottom: 0;
    }

    .banner-donate .image-section img.desktop {
        display: none;
    }

    .banner-donate .image-section img.mobile {
        display: none;
    }

    .banner-donate .image-section {
        margin-right: -200px;
        margin-bottom: -300px;
    }

    .banner-donate {
        /* background: url("../images/donate-banner-bg-mob.jpg") no-repeat right bottom; */
        background: url("../images/webp/donate-banner-bg-mob.webp") no-repeat right bottom;
        background-size: auto;
        background-size: cover;
        height: 400px;
        overflow-x: hidden;
    }

    .banner-donate .text-section-banner {
        padding-top: 40px;
        padding-bottom: 0;
        width: 100%;
        padding-left: 0;
        text-align: center;

    }

    .banner-donate h1 {
        margin-bottom: 5px;
    }

    .banner-donate .flex-container {
        align-items: flex-start;
    }

    .banner-donate .container {
        align-items: flex-start;
    }

    .banner-donate .text-section-banner p {
        text-align: center;
    }

    .banner-donate .text-section-banner p span {
        display: block;
    }

    .donate-price-wrapper {
        display: flex;
        flex-wrap: wrap;
    }

    .donate-price-wrapper .listing {
        width: 31%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .donate-price-wrapper .listing:last-child {
        width: 100%; max-width: 300px;
    margin: 0 auto;
    }

    .secured img {
        height: 34px;
        width: 120px;
    }

    .form-control {
        min-height: 40px;
    }

}


@media(max-width: 690px) {
 .partner-with-us {
        background: #EFEEEC url("../images/hand-bg-mobile.png") no-repeat left -40px;
        background-size: 80% auto
    }
    
}

@media(max-width: 575px) {

    .donate-button-section .primary-btn {
        padding: 0 15px;
        font-size: 13px;
        height: 26px;
    }



    .primary-btn-lg {
        font-size: 18px;
        line-height: 24px;
        padding: 12px 40px;
    }


    h2 {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: .1em;
    }


    ul.Gratitude-links li a {
        font-size: 20px;
        padding: 20px 0;
    }

    .calltoaction h2 {
        max-width: 250px;
        margin: 0 auto;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .about-bonei-olam .title-section p {
        padding-bottom: 10px;
    }

    .about-list-section {
        margin-top: 60px;
    }

    .about-bonei-olam {
        background-position: right 200px;
    }

    .about-us-section p {
        font-size: 16px;
        line-height: 24px;

    }

    .about-us-section .left-image {
        height: 250px;
        bottom: -60px;
        transform: translateX(-90px);
    }

    .about-us-section p {
        font-size: 14px;
        line-height: 20px;
    }

    .about-us-section .text-section {
        padding: 60px 40px;
    }



    .about-us-section .seprator {
        max-width: 200px;
        margin: 10px auto 30px;
    }

    .about-list-section .about-listing {
        padding: 30px 20px;
    }

    .about-list-section .about-listing p {
        font-size: 16px;
        line-height: 24px;
    }

    .partner-with-us h2 {
        font-size: 40px;
        line-height: 42px;
    }

    .partner-with-us h2 span {
        display: block;
    }


    .partner-with-us .title-section p {
        font-size: 18px;
        line-height: 24px;
        padding: 0 20px;
    }

    .partner-with-us .text-section {
        padding: 0px;
        box-shadow: none;
        background: none;
        text-align: center;
        margin-top: 100px;
    }

    .partner-with-us .box-content {
        padding: 30px 20px 30px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
        background: #fff;
        text-align: center;
    }

    .partner-with-us .seprator {
        background: none;
        margin: 0;
        padding: 0;
        height: 30px;
    }

    .partner-with-us .text-section h3 {
        font-size: 20px;
        line-height: 26px;
        max-width: 190px;
        margin: 0 auto 16px;
    }

    .partner-with-us .text-section p {
        font-size: 16px;
        line-height: 22px;
    }

    .partner-with-us .button-sectoin {
        margin-top: 50px;
    }

    .footer img {
        height: 40px;
    }

    .footer p {
        font-size: 11px;
        line-height: 16px;
        margin: 0;
        padding: 0;
        max-width: 200px;
        text-transform: uppercase;
        font-family: 'sweet_sans_prolight';
    }

    .footer p span {
        text-transform: none;
        display: block;
        font-family: 'sweet_sans_proregular';
    }

    .footer .flex-container {
        grid-column-gap: 40px;
    }

    .partner-with-us {
        background-position: left 10px;
    }

    .header .flex-col {
        padding-top: 15px;
    }

    .header.fixed .flex-col {
        padding-top: 0;
    }

    .banner-donate .text-section-banner p {
        font-size: 18px;
    }

    .donate-main-section {
        padding: 40px 0;
    }

    .donate-price-wrapper {
        padding: 0 30px 40px;
    }

    .donate-price-wrapper {

        grid-column-gap: 16px;
        grid-row-gap: 16px;
    }

    .donation-form label {
        font-size: 11px;
    }

    .donate-form-section {
        padding: 50px 30px;
    }

    .monthly-yearlay-tab input[type="radio"] ~ label {
        font-size: 14px;
    }

    .monthly-yearlay-tab {
        grid-column-gap: 10px;
    }

    .monthly-yearlay-tab input[type="radio"] ~ label {
        padding-left: 20px;
        padding-right: 20px;
        min-width: 150px;
    }

    .card-list input[type="radio"] ~ label {
        padding-left: 24px;
        height: 16px;
    }

    .card-list input[type="radio"] ~ label::before,
    .card-list input[type="radio"]:checked ~ label::before {
        height: 16px;
        width: 16px;
    }

    .card-list input[type="radio"]:checked ~ label::after {
        left: 5px;
        top: 5px;
        width: 8px;
        height: 8px;

    }

    .payment-detail-section {
        grid-column-gap: 15px;
    }

    .card-message {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .form-control {
        min-height: 40px;
    }

    .secured img {
        height: 40px;
    }

    .two-col.card-col .form-group {
        max-width: 70%;
    }

    .donation-form .form-group {
        margin: 0 0 15px 0;
    }

    .donation-form label {
        margin-bottom: 5px;
    }

    .checkbox-section label p {
        font-size: 10px;
        line-height: 14px;
    }

    .checkbox-section label p span {
        font-size: 9px;
    }

    .checkbox-section input[type="checkbox"] ~ label::before,
    .checkbox-section input[type="checkbox"]:checked ~ label::before {
        width: 16px;
        height: 16px;
    }

    .checkbox-section input[type="checkbox"]:checked ~ label::after {
        content: url('../images/check-mob.svg');
        left: 4px;
        top: -4px;

    }

    .checkbox-section input[type="checkbox"] ~ label {
        padding-left: 30px;
    }

    .donate-button .primary-btn {
        background: #657A69;
        color: #fff;
        padding: 0 50px;
        height: 50px;
        display: inline-flex;
        align-items: center;
        font-size: 16px;
        line-height: 24px;
    }

    .donate-button {
        margin-top: 36px;
    }

    .donate-form-section .sub-text {
        font-size: 14px;
    }

    .donate-form-section .total-donation {
        font-size: 40px;
        line-height: 50px;
    }

    .donate-form-section .dollar {
        font-size: 32px;
        line-height: 40px;
    }

    .donation-form h3 {
        margin-top: 20px;
    }

    .checkbox-section input[type="checkbox"] ~ label {
        padding-top: 0;
    }

    .checkbox-section {
        padding-top: 0;
    }



}



@media(max-width: 480px) {

    .donation-form h3 {
        font-size: 14px;
    }

    h2 {
        font-size: 17px;
        line-height: 24px;
    }

    ul.Gratitude-links li a {
        font-size: 16px;
    }

    .banner-section .text-section-banner p {
        font-size: 23px;
    }

    .jewish-text-section h3 {
        font-size: 42px;
    }

    .banner .banner-mob-img {
        margin-top: -100px;
    }

    .about-us-section .text-section {
        padding: 60px 30px;
    }

    .donate-price-wrapper {
        padding: 0 20px 40px;
    }

    .price-list .price {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 5px;
    }

    .price-list p {
        font-size: 10px;
        line-height: 12px;
    }

    .donate-price-wrapper {
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    .donation-form label {
        font-size: 10px;
    }

    .donation-form .two-col,
    .donation-form .three-col {
        grid-column-gap: 20px;
    }

    .donate-paypal {
        max-width: 300px;
        margin: 0 auto;
    }

    .donation-form h3 {
        font-size: 16px;
    }

    .monthly-yearlay-tab input[type="radio"] ~ label {
        min-width: 120px;
    }

    .donate-form-section {
        padding: 40px 20px;
    }

    .donation-form label {
        font-size: 8px;
        line-height: 10px;
    }

    .card-list input[type="radio"] ~ label::before,
    .card-list input[type="radio"]:checked ~ label::before {
        height: 12px;
        width: 12px;
    }

    .card-list input[type="radio"]:checked ~ label::after {
        left: 4px;
        top: 4px;
        width: 6px;
        height: 6px;

    }

    .card-list input[type="radio"] ~ label {
        padding-left: 18px;

    }

    .secured {
        margin-top: 17px;
    }

    .two-col.card-col .form-group {
        max-width: 58%;
    }

    .checkbox-section input[type="checkbox"] ~ label::before,
    .checkbox-section input[type="checkbox"]:checked ~ label::before {
        width: 15px;
        height: 15px;
    }

    .checkbox-section input[type="checkbox"]:checked ~ label::after {
        content: url('../images/check-mob.svg');
        left: 3px;
        top: 1px;

    }

    .checkbox-section label p {
        font-size: 9px;
        line-height: 12px;
        letter-spacing: .01em;
    }

    .checkbox-section label p span {
        font-size: 7px;
    }

    .donation-form h3 {
        font-size: 18px;
    }

    .form-control {
        font-size: 15px;
        padding: 0 10px;
    }

 .partner-with-us {
        background-position: left 90px;
    }



}

@media(max-width: 430px) {
    
    .partner-with-us {
        background-position: left 120px;
    }

    .banner-section .text-section-banner p {
        font-size: 22px;
    }

    .price-list p {
        font-size: 9px;

    }

    .monthly-yearlay-tab input[type="radio"] ~ label {
        min-width: 110px;
    }

    .donation-form .two-col,
    .donation-form .three-col {
        grid-column-gap: 16px;
    }

    .donation-form h3 {
        font-size: 16px;
    }

    .donate-price-wrapper .price-list .Other-text {
        font-size: 14px;
        line-height: 18px;
    }

    .donate-form-section {
        padding: 40px 16px;
    }

    .donate-price-wrapper {
        padding: 0 16px 40px;
    }

    .donation-form h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }


}


@media(max-width: 360px) {

    .monthly-yearlay-tab input[type="radio"] ~ label {
        min-width: 100px;
    }

}