/** Color reference **
white - #fff
darkblue - #214D6C
gray - #707070
teal - #18749F
orange - #D8772F
beige - #00000019
magenta - #B62F73
**/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
}
h2{
    font-family: alternate-gothic-atf, sans-serif; 
    font-style: normal;
    font-weight: 600;
    font-size: 50px;
    line-height: 50px;
    color: rgba(33,77,108,1);
    padding: 0 0 25px 0;
}
p{
    line-height: 25px;
    margin-top: -3.5px;
    font-family: New Order;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    color: rgba(112,112,112,1);
    padding: 0 0 25px 0;
}
.container{
    max-width: 1366px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.main{
    position: relative;
}
#hero{
    height: 831px;
    overflow: hidden;
}
.hero-bg{
    width: 1486px;
    height: 831px;
    height: auto;
    margin-top: -67px;
    position: absolute;
}
.logo{
    position: absolute;
    width: 173.341px;
    height: 86.354px;
    left: 186.554px;
    top: 28.339px;
    overflow: visible;
}
.logo img{
    position: absolute;
    width: 173.341px;
    height: 86.354px;
    left: 0px;
    top: 0px;
    overflow: visible;
}
.donate{
    position: absolute;
    width: 192px;
    height: 54px;
    left: 995px;
    top: 37.84px;
    overflow: visible;
}
.button{
    display: block;
    position: relative;
}
.donate-rectangle{
    position: absolute;
    overflow: visible;
    width: 192px;
    height: 49px;
    left: 0px;
    top: 0px;
}
.donate-rectangle rect{
    fill: rgba(182,47,115,1);
}
.donate-today{
    left: 25px;
    top: 15px;
    position: absolute;
    overflow: visible;
    width: 152px;
    height: 45px;
    text-align: center;
    font-family: alternate-gothic-atf, sans-serif; 
    font-style: normal;
    font-weight: 600;
    font-size: 23px;
    color: rgba(255,255,255,1);

    height: 50px;
    top: 0;
}
.donate-today span{
    min-height: 50px;
    display: inline-flex;
    align-items: center;
}
.donate-today-hand{
    position: absolute;
    width: 63.143px;
    height: 70.152px;
    left: -27px;
    top: -10px;
    overflow: visible;
}
#donate-today-hand img{
}
#button-container{
    width: 195px;
    height: 65px;
}
section#awareness{
    padding: 50px 0;
}
#awareness img{
    max-width: 100%;
    max-height: 100%;
}
#awareness .hands{
    max-width: 100%;
    max-height: initial;
    margin-top: 100px;
}
#awareness .button rect{
    fill: #18749F;
}
#awareness .half-section .wrapper{
    width: 506px;
    margin-right: 0;
}
#footer{
    background-image: url("../iStock-509588925.png");
    background-image: image-set(
        url("../iStock-509588925.png") 1x,
        url("../iStock-509588925@2x.png") 2x);
    background-repeat: no-repeat;
    /* background-position-x: -6px; */
}
#footer .half-section{
    margin-left: auto;
    min-height: 647px;
}
#footer .wrap{
    background: rgba(255,255,255,0.77);
    width: 466px;
    height: 100%;
    padding: 78px 41px;
    margin-left: auto;
}
#footer .wrapper{
    margin: 0;
    z-index: 2;
}
footer{
    background: #18749F;
    padding: 25px 0 50px;
}
.footer-logos img{
    width: 182px;
    height: auto;
    margin-right: 30px;
}
footer .wrapper{
    padding: 50px 185px 0;
}
.footer-logos{
    width: auto;
    display: inline-block;
    height: 90px;
}
.footer-wrapper{
    width: 1010px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.copyright{
    display: inline-block;
    text-align: right;
    margin-left: auto;
}
.copyright p{
    color: #fff;
    padding-bottom: 0;
    text-align: right;
    padding-top: 25px;
}
.plates{
    text-decoration: none;
}
.plates p{
    text-align: left;
    font-family: alternate-gothic-atf, sans-serif; 
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 30px;
    color: rgba(216,119,47,1);
}
.drive-hope-forward{
    position: absolute;
    width: 505.62px;
    height: 437.551px;
    left: 177.38px;
    top: 195.239px;
    overflow: visible;
}
#drive-hope-forward{
    position: absolute;
    width: 505.62px;
    height: 437.551px;
    left: 0px;
    top: 0px;
    overflow: visible;
}
#clouds{
    position: absolute;
    width: 1366px;
    height: 782px;
    left: 0px;
    top: 579px;
    overflow: visible;
}
#clouds img{
    position: absolute;
    width: 1366px;
    height: 782px;
    left: 0px;
    top: 0px;
    overflow: visible;
}
section{
    /*
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0 auto;*/
    position: relative;
    display: flex;
    max-width: 100%;
    margin: 0 auto;
}
section .wrapper{
    position: relative;
    display: block;
    width: 1009px;
    max-width: 100%;
    margin: 0 auto;
}
section#drive,section#cover{
    height: 521px;
}
section#cover{
    height: 521px;
    background-image: url("../Mask_Group_1.png");
    background-image: image-set(
        url("../Mask_Group_1.png") 1x,
        url("../Mask_Group_1@2x.png") 2x);
    background-repeat: no-repeat;
    background-color: #D8772F;
    background-position-x: -6px;
}
section#drive{
    height: 521px;
    background-image: url("../Mask_Group_2.png");
    background-image: image-set(
        url("../Mask_Group_2.png") 1x,
        url("../Mask_Group_2@2x.png") 2x);
    background-repeat: no-repeat;
    background-color: #B62F73;
    background-position-x: right;
}
section#videos{
    background-color: #F8A700;
    display: block;
    position: relative;
    color: #214D6C !important;
    padding: 50px 0 25px;
}
#videos .wrapper{
    width: 1200px;
    max-width: 100%;
}
section#footer .clouds{
    height: 200px;
    background-image: url("../Group_14.png");
    background-image: image-set( url("../Group_14.png") 1x, url("../Group_14@2x.png") 2x);
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1;
}
.half-section{
    /*max-width: 50%;
    display: flex;
    position: relative;
    align-items: center;
    height: 521px;*/
    width: 50%;
    max-width: 50%;
    display: flex;
    position: relative;
    align-items: center;
    height: 521px;
}
.half-section .wrapper{
    width: 423px;
}
.half-left .wrapper{
    margin-right: 80px;
}
.half-right .wrapper{
    margin-left: 80px;
}
#race{
    padding-bottom: 50px;
}
#race h2, #race p, #videos h2, #videos p{
    text-align: center;
    color: rgba(33,77,108,1);
}
#videos p{
    font-weight: bold;
}
#drive h2, #drive p, #cover h2, #cover p{
    color: #fff;
    position: relative;
    z-index: 1;
}
#drive p:last-child{
    padding-bottom: 0;
}
.pink-rectangle{
    position: absolute;
    overflow: visible;
    width: 911px;
    height: 521px;
    left: 0px;
    top: 0;
}
#pink-rectangle{
    fill: rgba(182,47,115,1);
}
.orange-rectangle{
    position: absolute;
    overflow: visible;
    width: 923px;
    height: 521px;
    left: 443px;
    top: 0;
}
#orange-rectangle{
    fill: rgba(216,119,47,1);
}
#drive img{
    position: absolute;
    width: 734.907px;
    height: 521px;
    left: 631.093px;
    top: 0;
    overflow: visible;
}
#cover img{
    position: absolute;
    width: 731.907px;
    height: 521px;
    left: -6px;
    top: 0;
    overflow: visible;
}

.vid{
    height: 200px;
    width: 350px;
    position: relative;
    background-position: center center;
    background-size: cover;
}

.vimeo:after{
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20150%20150%22%3E%3Cpath%20d%3D%22M150%20135c0%208.28-6.72%2015-15%2015H15c-8.28%200-15-6.72-15-15V15C0%206.72%206.72%200%2015%200h120c8.28%200%2015%206.72%2015%2015v120%22%20fill%3D%22%2353bded%22%2F%3E%3Cpath%20d%3D%22M126.22%2049.8c-.5%2010.56-7.85%2025-22.1%2043.35-14.75%2019.15-27.22%2028.72-37.42%2028.72-6.32%200-11.66-5.82-16.03-17.5L41.92%2072.3c-3.24-11.66-6.72-17.5-10.44-17.5-.82%200-3.65%201.7-8.5%205.1l-5.1-6.56c5.34-4.7%2010.62-9.4%2015.8-14.1%207.14-6.17%2012.5-9.4%2016.07-9.74%208.44-.8%2013.63%204.96%2015.58%2017.3%202.1%2013.32%203.56%2021.6%204.38%2024.84%202.45%2011.05%205.13%2016.57%208.05%2016.57%202.27%200%205.68-3.57%2010.22-10.74%204.54-7.16%206.97-12.6%207.3-16.36.65-6.2-1.78-9.3-7.3-9.3-2.6%200-5.27.6-8.02%201.78%205.33-17.45%2015.5-25.92%2030.53-25.44%2011.14.33%2016.4%207.55%2015.75%2021.67%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
}

.vid:after {
    background-repeat: no-repeat;
    background-position: 0.7em 0.7em;
    opacity: 0.5;
    background-size: 2em;
}

.mobile-only{
    display: none;
}

.slick-slider {
    touch-action: auto;
    -ms-touch-action: auto;
    }




@media only screen and (max-width: 1300px) {
    .half-left .wrapper{
        margin-right: 120px;
    }
    .half-right .wrapper{
        margin-left: 120px;
    }
}
@media only screen and (max-width: 1200px){
    .half-section.half-left{
        background: #B62F73;
    }
    .half-left .wrapper{
        margin-right: 90px;
    }
    .half-section.half-right{
        background-color: #D8772F;
    }
    .half-right .wrapper{
        margin-left: 90px;
    }
    .donate{
        left: initial;
        right: 85px;
    }
}
@media only screen and (max-width: 1080px){
    #awareness .half-section .wrapper{
        width: 400px;
    }
    footer .footer-wrapper{
        display: block;
        padding: 0px 75px;
        text-align: center;
    }
    section#footer .clouds{
        width: 145%;
        z-index: 1;
        left: -100px;
    }
    .half-right .wrapper, .half-left .wrapper{
        margin: 0 auto;
    }
    section#race .wrapper{
        padding: 0 50px;
    }
    .donate{
        right: 186px;
    }
    .drive-hope-forward{
        left: 0;
        right: 0;
        margin: auto;
    }
    section#drive{
        background-position-x: 435px;
    }
    section#cover{
        background-position-x: -75px;
    }
}

@media only screen and (max-width: 962px){
    .half-section{
        min-height: 100%;
        height: auto;
    }
    #clouds{
        top: 644px;
        left: 50%;
        overflow: auto;
        margin-left: -688px;
    }
    section#drive{
        width: 100%;
        box-sizing: border-box;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: auto;
        height: auto;
    }
    section#drive .half-section{
        display:block;
        width:100%;
        max-width: 100%;
        padding: 77px 35px;
    }
    #hero{
        position: relative;
        display: block;
        height: 867px;
    }
    .hero-bg{
        position: absolute;
        left: 50%;
        width: auto;
        height: 843px;
        margin-left: -450px;
        margin-top: 0px;
    }
    .logo{
        width: 125px;
        height: auto;
        left: initial;
        left: 25px;
    }
    .logo img{
        width: 125px;
        height: auto;
        left: 0;
    }
    .donate{
        right: 25px;
    }
    .donate-rectangle{
        width: 183px;
    }
    #drive-hope-forward{
        width: 367px;
        max-width: 100%;
        height: auto;
        left: 0;
        right: 0;
        margin: auto;
    }
    .drive-hope-forward {
        width: auto;
        height: auto;
        top: 100px;
    }
    .desktop-only{
        display: none;
    }
    .mobile-only{
        display: block;
    }
    #race br{
        display: none;
    }
    section#drive{
        background-image: none;
        flex-direction: column-reverse;
    }
    section#drive .half-section:not(.half-left){
        background-image: url(/img/shutterstock_1377059747_sm.jpg);
        /*background-image: image-set( url(../Mask_Group_2.png) 1x, url(../Mask_Group_2@2x.png) 2x);*/
        background-repeat: no-repeat;
        height: 539px;
        background-size: auto 539px;
        background-position-y: center;
        background-position-x: center;
    }
    section#cover{
        width: 100%;
        box-sizing: border-box;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: auto;
        height: auto;
    }
    section#cover .half-section, #awareness .half-section{
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 77px 35px;
    }
    #videos .wrapper{
        padding: 0 35px;
    }
    .slick-dotted.slick-slider{
        padding-bottom: 25px !important;
        margin-top: -25px;
    }
    #awareness .content{
        z-index: 1;
    }
    #awareness .graphic{
        z-index: 0;
        position: absolute;
        top: 0;
        padding: 0;
        z-index: 0;
        height: 100%;
    }
    #awareness .graphic img{
        opacity: 0.20;
        margin-top: 0;
        height: 100%;
        max-height: 100%;
    }
    section#cover{
        background-image: none;
    }
    section#cover .half-section:not(.half-right){
        background-image: url(/img/njccr-grandpa-and-child.jpg);
        /*background-image: image-set( url(../Mask_Group_1.png) 1x, url(../Mask_Group_1@2x.png) 2x);*/
        background-repeat: no-repeat;
        height: 539px;
        background-size: auto 539px;
        background-position-y: center;
        background-position-x: center;
    }
    #footer{
        background-size: auto 100%;
        background-position-x: center;
    }
    #footer .half-section{
        min-height: 800px;
        height: 100%;
        display: block;
        width: 100%;
        max-width: 100%;
    }
    #footer .wrap{
        width: 100%;
    }
    #footer .wrapper{
        z-index: 1;
    }
    section#footer .clouds{
        z-index: 0;
        position: absolute;
        width: 1366px;
        left: 50%;
        overflow: auto;
        margin-left: -688px;
    }
    #footer .wrap{
        padding: initial;
        height: 100%;
    }
    #footer .wrapper{
        padding: 78px 41px;
    }

    #footer .button{
        padding-bottom: 100px;
    }

    .footer-logos{
        height: auto;
    }

    .footer-logos img{
        margin-right: 0;
        padding-top: 25px;
        display: block;
    }

    .copyright p{
        text-align: center;
        padding-top: 50px;
    }
    
}

@media only screen and (max-width: 600px){
}

@media only screen and (max-width: 425px){
    .logo{
        left: 0;
        right: 0;
        margin: auto;
    }
    .donate{
        left: 0;
        right: 0;
        margin: auto;
        top: 125px;
    }
    .donate-today{
        left: 25px;
    }
    .drive-hope-forward {
        width: auto;
        height: auto;
        top: 175px;
    }
}