img,iframe{max-width:100%;height:auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root{--main-bg:#fff;--light:#f5f5f5;--light-comp:#4d4d4d;--dark:#042A37;--dark-comp:#fff;--primary:#C41E37;--primary-comp:#fff;--secondary:#176682;--secondary-comp:#fff;} body,input,textarea{font-family:'Red Hat Display','Red Hat Display-fallback'} body{font-size:1.125rem;line-height:1.5;text-align:center;min-width:320px;} body,footer a{color:var(--light-comp,#4d4d4d);} body,header ul,.hero h1,.hero p{padding:0;margin:0;} /* address belongs here:it is block-level text,and without it the element inherits body's text-align:center - see .policy-contact,where the address centred while the paragraphs beside it did not */ h1,h2,h3,h4,h5,h6,p,th,td,dd,dt,li,blockquote,address{text-align:left;} nav{text-transform:uppercase;font-size:14px;} h1,h2,h3,h4,h5,h6{line-height:1.3;} img,iframe{max-width:100%;height:auto;display:block;margin:0 auto} iframe{display:block;aspect-ratio:auto 16 / 9;width:100%;margin:1em auto;} a img,iframe{border:none;} a{transition:ease-in-out .3s;} a,header a:hover,form input[type=submit]:hover,.btn:hover,footer a:hover,.solutions a:hover{text-decoration:none;} a,header a:hover,footer a:hover{color:var(--primary,#C41E37);} a:hover{text-decoration:underline;} .nowrap{white-space:nowrap} hr{border-width:1px;border-color:#eee;border-style:none none solid;margin:40px 0;} a[href^=tel]{white-space:nowrap;} .stats h2,.stats .num,.stats .stat p:last-child,.partners-head h2,.partners-head p,.news-head h2,.news-head p,.hero h1{text-wrap:balance;} .wrap{display:block;max-width:1080px;margin:0 auto;position:relative;} main .wrap{padding:0 10px} .bg-light{background-color:var(--light,#f5f5f5);padding:40px 0} .mid{align-items:center;align-self:center;} .grid{display:grid;grid-gap:10px 20px;} .grid.half{grid-template-columns:repeat(2,1fr);} .grid.third{grid-template-columns:repeat(3,1fr);} .grid.fourth{grid-template-columns:repeat(4,1fr);} .grid.img>img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} .grid.img>div>*:first-of-type{margin-top:0} .bgimg{position:relative} .bgimg>:is(img,video):first-of-type{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;z-index:0} .hero.bgimg>img:first-of-type{object-position:70% 40%;} /* The volunteer hero photo is framed tighter on the two faces than the other page heroes,so at 40% the tops of both heads are cropped. Show the image lower (25% pulls the crop towards the top of the file,which pushes the pair down inside the 500px band) - scoped to this page only. */ body:has(.volunteer) .hero.bgimg>img:first-of-type{object-position:70% 25%;} .hero-slides{position:absolute;inset:0;overflow:hidden;z-index:0;} .hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%;opacity:0;animation:hero-zoom 49s linear infinite;} .hero-slides img:nth-child(1){animation-delay:0s;} .hero-slides img:nth-child(2){animation-delay:7s;} .hero-slides img:nth-child(3){animation-delay:14s;} .hero-slides img:nth-child(4){animation-delay:21s;} .hero-slides img:nth-child(5){animation-delay:28s;} .hero-slides img:nth-child(6){animation-delay:35s;} .hero-slides img:nth-child(7){animation-delay:42s;} @keyframes hero-zoom{0%{opacity:0;transform:scale(1);} 2.5%{opacity:1;} 11%{opacity:1;transform:scale(1.07);} 14.28%{opacity:0;transform:scale(1.08);} 100%{opacity:0;transform:scale(1.08);}} .bgimg>.wrap{z-index:2} header,footer{font-size:16px;} header,.hero{position:relative;} header{z-index:999;} header .wrap,footer .wrap{padding:20px 10px;} header .grid{grid-template-columns:180px 1fr;} header{position:fixed;top:0;left:0;right:0;} header:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--dark,#042A37) 85%,transparent 100%);opacity:0;transition:opacity .8s ease;pointer-events:none;} body.scrolled header:before{opacity:1;} body{padding-top:var(--header-h,104px);} .hero{margin-top:calc(-1 * var(--header-h,104px));} nav ul{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;white-space:nowrap;} .hero h1,.hero p{text-align:center;} nav li{display:inline-block;font-weight:bold;} nav a,.hero h1,.hero p{color:var(--dark-comp,#fff);} nav a{display:block;margin:5px;padding:5px} nav a:hover{background-color:#831425;color:var(--dark-comp,#fff);border-radius:6px;} nav li.donate-btn a{display:inline-block;background-color:#831425;color:var(--dark-comp,#fff);border-radius:6px;padding:5px 16px;margin:2px 5px;} nav li.donate-btn a:hover{background-color:var(--primary,#C41E37);} .has-drop{position:relative;} .has-drop>a:after{content:"\25BE";font-size:10px;margin-left:6px;vertical-align:middle;} .has-drop .sub{list-style:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:260px;margin:0;padding:6px;background-color:var(--dark,#042A37);border-radius:6px;box-shadow:0 8px 24px rgba(4,42,55,.35);text-align:left;opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:1000;} .has-drop:hover .sub,.has-drop:focus-within .sub{opacity:1;visibility:visible;} .has-drop .sub li{display:block;margin:0;} .has-drop .sub a{display:block;margin:0;padding:9px 12px;border-radius:4px;text-align:left;text-transform:none;font-size:14px;font-weight:normal;white-space:nowrap;} .hero{background-size:cover;background-position:center;position:relative;} .hero:before,.hero>.wrap:after{content:"";position:absolute;} .hero:before{width:100%;height:100%;background-color:rgba(0,0,0,.4);inset:0;z-index:1} .hero .wrap:after{display:none;} .hero{width:100%;height:500px;} .hero>.wrap{position:absolute;top:56%;left:50%;transform:translate(-50%,-50%);width:auto;max-width:660px;text-align:center;z-index:2;background-color:rgba(4,42,55,.75);padding:30px 40px;border-radius:50px;} .hero h1,.hero p{padding:0;} .hero h1{font-size:36px;} .hero p{font-size:24px;font-weight:bold;} .hero .btn{margin-top:40px;text-shadow:none;} .hero .lead{font-size:20px;font-weight:normal;margin-bottom:20px;text-wrap:balance;} .hero .sub{font-size:22px;font-weight:bold;margin:10px 0 20px;text-wrap:balance;} .hero .cta{margin-top:40px;} .hero .cta .btn{margin-top:0;} .hero .cta .btn + .btn{margin-left:15px;} .hero .btn-alt{background-color:transparent;border:2px solid var(--dark-comp,#fff);padding:8px 38px;} .hero .btn-alt:hover{background-color:var(--dark-comp,#fff);color:#831425;border-color:var(--dark-comp,#fff);} .hero .trust{font-size:15px;font-weight:normal;margin:18px 0 0;opacity:.9;text-wrap:balance;} .hero:has(.btn){height:800px;} main:has(.hero .btn) .wrap{padding:0;} body:has(main h1) .hero:before{display:none;} body:has(main h1) .hero>.wrap{background-color:transparent;padding:0;} .services .wrap{padding:60px 10px 40px;} .services .grid.third{grid-gap:20px;} .services .card{background-color:var(--main-bg,#fff);border:1px solid #e3e3e3;border-radius:12px;overflow:hidden;text-align:left;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(4,42,55,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;} .services .card:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(4,42,55,.14);border-color:rgba(23,102,130,.4);} .services .card>div{flex:1 0 auto;padding:20px 25px 15px;} .services .card>div.img-wrap{flex:0 0 auto;padding:0;} .services .card img{width:100%;height:200px;object-fit:cover;} .services .card h3{font-size:22px;margin:0 0 8px;color:var(--dark,#042A37);} .services .card p{margin:0;font-size:15px;color:var(--light-comp,#4d4d4d);} .services .img-wrap{position:relative;} .services .img-wrap .btn{position:absolute;right:15px;bottom:15px;margin:0;padding:8px 20px;font-size:16px;background-color:var(--primary,#C41E37);border-radius:6px;box-shadow:0 2px 6px rgba(4,42,55,.25);} .services .img-wrap .btn:after{content:"\2192";margin-left:6px;} .services .img-wrap .btn:hover{background-color:var(--secondary,#176682);} .services .img-wrap .btn:focus-visible{outline:2px solid var(--dark,#042A37);outline-offset:2px;} .clinics{background-color:var(--light,#f5f5f5);padding:60px 0;} .clinics-head{text-align:center;padding-bottom:30px;} .clinics-head h2{text-align:center;margin:0 0 10px;font-size:30px;text-wrap:balance;} .clinics-head p{text-align:center;margin:0 auto;max-width:700px;text-wrap:balance;} .clinics .grid.third{grid-gap:20px;} .clinic-card{background-color:var(--main-bg,#fff);border:1px solid #e3e3e3;border-radius:12px;overflow:hidden;text-align:left;display:flex;flex-direction:column;} .clinic-card img{width:100%;height:180px;object-fit:cover;} .clinic-card>div{padding:18px 22px 22px;flex:1 0 auto;display:flex;flex-direction:column;} .clinic-card .county{font-size:13px;text-transform:uppercase;font-weight:bold;color:var(--secondary,#176682);margin:0 0 6px;} .clinic-card h3{font-size:20px;margin:0 0 12px;} .clinic-card address{font-style:normal;text-align:left;margin:0 0 12px;} .clinic-card address a{color:var(--secondary,#176682);} .clinic-meta{margin:0 0 18px;} .clinic-meta dt{font-size:13px;text-transform:uppercase;font-weight:bold;color:var(--light-comp,#4d4d4d);margin:10px 0 0;} .clinic-meta dt:first-of-type{margin-top:0;} .clinic-meta dd{margin:2px 0 0;font-size:16px;} .clinic-card .btn{align-self:flex-start;margin-top:auto;background-color:var(--secondary,#176682);} .clinic-card .btn:hover{background-color:var(--primary,#C41E37);} .wrap.stats{padding:100px 10px 80px;} .stats h2{text-align:center;margin:0 0 30px;font-size:30px;} .stats .grid.third{grid-gap:20px;} .stats .stat{text-align:center;padding:20px;} .stats .stat svg{width:110px;height:110px;display:block;margin:0 auto 20px;color:#C41E37;stroke-width:2.6;} .stats .num{font-size:56px;font-weight:bold;color:var(--secondary,#176682);margin:0 0 5px;text-align:center;} .stats .stat p:last-child{margin:0;color:var(--light-comp,#4d4d4d);text-align:center;} .stats .as-of{text-align:center;font-size:14px;color:var(--light-comp,#4d4d4d);opacity:.85;margin:25px 0 0;} .news{padding:40px 0 60px;background-color:#e6f2f5;} .news-head h2{text-align:center;font-size:30px;margin:0 0 10px;} .news-head p{text-align:center;margin:0 auto 30px;} .news .grid.fourth{grid-gap:20px;} .news-card{background:var(--main-bg,#fff);border:1px solid #eee;border-radius:12px;overflow:hidden;text-align:left;display:flex;flex-direction:column;} .news-card img{width:100%;height:180px;object-fit:cover;} .news-card>div{padding:15px 20px 20px;flex:1 0 auto;display:flex;flex-direction:column;} .news-card .tag{font-size:13px;text-transform:uppercase;font-weight:bold;color:var(--secondary,#176682);margin:0 0 8px;} .news-card h3{font-size:18px;margin:0 0 10px;} .news-card p{margin:0 0 10px;font-size:15px;} .news-card .btn{align-self:flex-start;margin-top:auto;background-color:var(--secondary,#176682);} .news-card .btn:hover{background-color:var(--primary,#C41E37);} .marquee{overflow:hidden;padding:40px 0;} .partners-head{text-align:center;padding-bottom:20px;} .partners-head h2{text-align:center;margin:0 0 10px;font-size:30px;} .partners-head p{text-align:center;margin:0 auto;max-width:1000px;} .partners-cta{text-align:center;padding-top:20px;} .marquee-track{display:flex;width:max-content;animation:marquee 70s linear infinite;} .marquee-group{display:flex;align-items:center;padding:40px 0;} .marquee img{height:90px;width:auto;margin:0 40px;} .marquee img:hover{opacity:.8;} @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}} .who-we-serve{background-color:var(--main-bg,#fff);padding:60px 0;} .mission{background-color:var(--light,#f5f5f5);padding:60px 0;} .get-involved{background-color:var(--dark,#042A37);color:var(--dark-comp,#fff);padding:60px 0;} .who-we-serve .grid.half,.mission .grid.half,.get-involved .grid.half{grid-gap:10px 40px;} .who-we-serve h2,.mission h2{margin:0 0 15px;} .who-we-serve p,.mission p{margin:0 0 15px;} .get-involved h2,.get-involved p{color:var(--dark-comp,#fff);margin:0 0 15px;} .who-we-serve img,.mission img,.get-involved img{border-radius:12px;} .get-involved .btn{background-color:var(--primary,#C41E37);} .get-involved .btn:hover{background-color:var(--secondary,#176682);} .get-involved .btn:focus-visible{outline:2px solid var(--dark-comp,#fff);outline-offset:2px;} /* flex with a gap,not a margin on the second button. These two wrap rather than fit side by side for most of the range above 600px,and an inline-block carrying margin-left lands indented relative to the one above it - at every width from 601 to 999px. A gap applies between wrapped lines as well as alongside,so the pair lines up either way. */ .get-involved .cta-row{display:flex;flex-wrap:wrap;gap:10px;} .eligibility h3{font-size:18px;margin:0 0 6px;} .eligibility .bring-list{padding-left:20px;margin:0 0 15px;} /* Deliberately not balanced:the tel link below carries white-space:nowrap,and text-wrap:balance cannot break it,so the balancer strands "Not sure if you qualify? Call" on a line of its own - 186/524 at 900px against 529/181 greedy. */ .eligibility .callout{background-color:rgba(23,102,130,.10);border-left:4px solid var(--secondary,#176682);border-radius:6px;padding:12px 16px;font-size:16px;margin:18px 0;} .newsletter{background-color:var(--dark,#042A37);color:var(--dark-comp,#fff);padding:50px 0;} .newsletter-head{text-align:center;} .newsletter-head h2{text-align:center;color:var(--dark-comp,#fff);font-size:30px;margin:0 0 10px;text-wrap:balance;} .newsletter-head p{text-align:center;margin:0 auto 25px;max-width:620px;text-wrap:balance;} .newsletter form{max-width:700px;margin:0 auto;text-align:center;} .newsletter label{color:var(--dark-comp,#fff);} .newsletter :is(input,textarea){border:1px solid rgba(255,255,255,.3);} .newsletter input[type=submit]{background-color:var(--primary,#C41E37);margin-top:10px;} .newsletter input[type=submit]:hover{background-color:var(--secondary,#176682);} form:where(#contact,#newsletter){margin:20px 0;} form:where(#contact,#newsletter) .grid{grid-gap:0 10px;} form:where(#contact,#newsletter) label{text-align:left;text-indent:10px} form:where(#contact,#newsletter) :is(label,input,textarea){display:block;font-size:16px} form:where(#contact,#newsletter) :is(input,textarea){width:100%;box-sizing:border-box;background-color:var(--main-bg,#fff);margin-bottom:10px;padding:10px;border:1px solid #f5f5f5;} form:where(#contact,#newsletter) textarea{height:100px;} form:where(#contact,#newsletter) input[type=submit],.btn{width:auto;display:inline-block;min-width:110px;font-weight:bold;text-align:center;text-wrap:balance;background-color:#831425;color:var(--primary-comp,#fff);padding:10px 40px;margin:10px 0;border:none;border-radius:3px;transition:ease-in-out .3s;} form:where(#contact,#newsletter) input[type=submit]{min-width:250px;margin:0;} form:where(#contact,#newsletter) input[type=submit]:hover,.btn:hover{cursor:pointer;background-color:var(--secondary,#176682);color:var(--primary-comp,#fff);} .contact-inquiries{background-color:#831425;padding:40px 0;} .contact-inquiries h2{color:var(--primary-comp,#fff);} #contact{color:var(--primary-comp,#fff);} #contact label{color:var(--primary-comp,#fff);} #contact :is(input,textarea){background-color:#fff;border:1px solid rgba(255,255,255,.3);} #contact input[type=submit]{background-color:var(--dark,#042A37);} #contact input[type=submit]:hover{background-color:var(--primary,#C41E37);} footer{background-color:var(--dark,#042A37);color:var(--dark-comp,#fff);} footer a{color:var(--dark-comp,#fff);} .footer-cols{padding:40px 0;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);grid-gap:20px 40px;} .footer-cols h3{font-size:18px;} .footer-cols p{margin:0 0 10px;} .footer-cols ul{margin:0 0 15px;} .footer-cols .social{text-align:left;margin:0 0 20px;} .footer-cols .social svg{width:40px;height:40px;color:var(--dark-comp,#fff);} .footer-cols .social a:hover svg{color:var(--primary,#C41E37);} .footer-cols .seals{display:flex;align-items:center;gap:15px;flex-wrap:wrap;} .footer-cols .seals img{height:90px;width:auto;margin:0;} .subfoot img{filter:brightness(0) invert(1);} .subfoot .grid{grid-template-columns:1fr 150px} main{padding:40px 0;} main h1,main h2{font-size:30px;} main h3{font-size:20px;} main h4{font-size:18px;} main ul,main ol{padding-left:25px;} main li,footer li{margin:5px 0;} footer ul,.contact ul{list-style:none;padding-left:0;} .about .grid h3 + p span{display:block;margin:5px 0;font-size:16px;font-weight:normal;color:var(--light-comp,#4d4d4d);} #story,#board,#team,#services,#access,#financial,#eligibility,#downtown-orlando,#west-orange,#pastor-paul-hoyer{scroll-margin-top:calc(var(--header-h,104px) + 20px);} .about h2{margin:30px 0 10px;} .about p{margin:0 0 15px;} .imgRight{float:right;max-width:45%;margin:0 0 15px 25px;border-radius:12px;} .board{background-color:var(--light,#f5f5f5);padding:60px 0;margin-top:40px;} .board h2{margin:0 0 15px;} .board p{margin:0;} .board video{width:100%;display:block;border-radius:12px;aspect-ratio:16 / 9;object-fit:cover;} .leadership{padding:60px 0;} .leadership .lead{font-size:20px;font-style:italic;margin:0 0 40px;color:var(--dark,#042A37);} .leadership h2{margin:0 0 10px;} .leadership h2:not(:first-child){margin-top:50px;} .leadership h3.sub{margin:0 0 10px;} .leadership .staff-intro{margin:0 0 25px;} .leadership .grid{grid-gap:20px;margin-bottom:15px;} .leadership .card{background-color:var(--main-bg,#fff);border:1px solid #e3e3e3;border-radius:12px;overflow:hidden;text-align:center;box-shadow:0 2px 8px rgba(4,42,55,.06);} .leadership .card img{width:100%;aspect-ratio:1 / 1;object-fit:cover;object-position:50% 15%;} .leadership .card>div{padding:15px 20px 20px;} .leadership .card h3{font-size:18px;margin:0 0 5px;} .leadership .card p{margin:0;font-size:15px;color:var(--light-comp,#4d4d4d);} .leadership .card p span{display:block;margin-top:5px;font-size:14px;} .leadership .card p a{color:var(--secondary,#176682);} .leadership .emeritus{list-style:none;padding-left:0;margin-top:0;} .leadership .emeritus li{background-color:var(--main-bg,#fff);border:1px solid #e3e3e3;border-radius:8px;padding:10px 15px;text-align:center;margin:0;} .patients .lead{font-size:20px;margin:0 0 30px;color:var(--dark,#042A37);} .patients h2,.access h2,.financial h2{margin:0 0 10px;} .patients .intro,.access .intro,.financial .intro{margin:0 0 25px;color:var(--light-comp,#4d4d4d);} .patients .grid{grid-gap:20px;margin-bottom:25px;} .patients .card,.access .card,.financial .card{background-color:var(--main-bg,#fff);border:1px solid #e3e3e3;border-radius:12px;padding:25px;box-shadow:0 2px 8px rgba(4,42,55,.06);} .patients .card h3,.access .card h3,.financial .card h3{margin:0 0 10px;} .patients .card p,.access .card p,.financial .card p{margin:0 0 10px;} .patients .card p:last-child,.access .card p:last-child,.financial .card p:last-child{margin-bottom:0;} ul.check{list-style:none;padding-left:0;margin:0;} ul.check li{position:relative;padding-left:28px;} ul.check li:before{content:"\2713";position:absolute;left:0;top:0;color:var(--secondary,#176682);font-weight:bold;} .access-grid>.card{margin-bottom:20px;} .access-grid .grid.half{grid-gap:20px;} .patients .specialists{margin:25px 0 40px;} .patients .specialists h3{margin:0 0 15px;} .patients .chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;} .patients .chips li{background-color:var(--main-bg,#fff);border:1px solid #e3e3e3;border-radius:30px;padding:6px 16px;margin:0;font-size:16px;} .access{background-color:var(--light,#f5f5f5);padding:60px 0;} .access .grid,.financial .grid{grid-gap:20px;} .access .card .btn{margin-top:5px;} .financial{padding:60px 0;} .patients-intro{margin-bottom:30px;} .patients-intro img{width:100%;display:block;border-radius:12px;} .financial .card.img-card{padding:0;overflow:hidden;} .financial .card.img-card img{width:100%;height:100%;object-fit:cover;display:block;} .faq{background-color:var(--light,#f5f5f5);padding:60px 0;} .faq h2{margin:0 0 10px;} .faq .intro{margin:0 0 25px;color:var(--light-comp,#4d4d4d);} .faq details{background-color:var(--main-bg,#fff);border:1px solid #e3e3e3;border-radius:12px;margin:0 0 12px;box-shadow:0 2px 8px rgba(4,42,55,.06);} .faq summary{cursor:pointer;padding:18px 45px 18px 25px;font-weight:bold;font-size:18px;list-style:none;position:relative;text-align:left;} .faq summary::-webkit-details-marker{display:none;} .faq summary:after{content:"+";position:absolute;right:25px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--secondary,#176682);} .faq details[open] summary:after{content:"\2013";} .faq details>div{padding:0 25px 20px;} .faq details p{margin:0;} .locations .head h2{margin:0 0 10px;} .locations .head p{margin:0 0 30px;text-wrap:balance;} .loc-card{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background-color:var(--main-bg,#fff);border:1px solid #e3e3e3;border-top:6px solid transparent;border-radius:12px;overflow:hidden;margin:0 0 25px;box-shadow:0 2px 8px rgba(4,42,55,.06);} .loc-1{border-top-color:var(--primary,#C41E37);} .loc-2{border-top-color:var(--secondary,#176682);} .loc-3{border-top-color:var(--dark,#042A37);} .loc-info{padding:25px 30px;} .loc-info .county{text-transform:uppercase;font-weight:bold;font-size:14px;letter-spacing:1px;color:var(--secondary,#176682);margin:0 0 5px;} .loc-info h3{margin:0 0 8px;} .loc-info address{font-style:normal;margin:0 0 15px;} .loc-meta dt{font-weight:bold;} .loc-meta dd{margin:0 0 12px;} .loc-card iframe{width:100%;height:100%;min-height:280px;border:0;display:block;} /* Small square photo strip in each location card,between the hours/phone list and the Get Directions button. Files are pre-cropped square in /images,so aspect-ratio here only reserves the box - it does not crop again. */ .loc-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 20px;} .loc-photos img{width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover;border-radius:8px;display:block;} .volunteer h2{margin:0 0 10px;} .volunteer .intro{margin:0 0 25px;color:var(--light-comp,#4d4d4d);} .vol-intro{grid-gap:20px 40px;margin-bottom:30px;} .vol-intro img{width:100%;display:block;border-radius:12px;} .vol-intro h3{margin:0 0 10px;} .vol-intro p{margin:0 0 15px;} .vol-tabs{display:flex;flex-wrap:wrap;gap:15px;margin:0 0 30px;} .vol-tabs .btn{margin:0;} .vol-tabs .btn-soon{cursor:default;opacity:.6;} .vol-tabs .btn-soon:hover{background-color:#831425;} .vol-login{margin-bottom:30px;} .vol-login h3{margin:0 0 5px;} .vol-login p{margin:0 0 10px;} .vol-requirements{background-color:var(--light,#f5f5f5);padding:60px 0;} .vol-requirements h2{margin:0 0 20px;} .vol-requirements ul.check{margin-bottom:0;} .vol-requirements ul.check li{margin:10px 0;} .support h2{margin:0 0 20px;} .donate-list{list-style:none;padding:0;margin:0 0 20px;} .donate-list li{display:grid;grid-template-columns:80px 1fr;grid-gap:10px 25px;align-items:start;padding:30px 0;border-bottom:1px solid #e3e3e3;} .donate-list li:first-child{padding-top:0;} .donate-list li:last-child{border-bottom:0;padding-bottom:0;} .donate-num{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:bold;color:var(--primary-comp,#fff);background-color:var(--primary,#C41E37);} .donate-list li:nth-child(2) .donate-num{background-color:var(--secondary,#176682);} .donate-list li:nth-child(3) .donate-num{background-color:var(--dark,#042A37);} .donate-list li:nth-child(4) .donate-num{background-color:#831425;} .donate-list li:nth-child(5) .donate-num{background-color:var(--secondary,#176682);} .donate-list h3{margin:0 0 10px;} .donate-list p{margin:0 0 10px;} .donate-list address{font-style:normal;margin:0 0 10px;color:var(--light-comp,#4d4d4d);} .donate-list a{color:var(--secondary,#176682);} .donate-list .btn{color:var(--primary-comp,#fff);} .support .card,.supplies .card{background-color:var(--main-bg,#fff);border:1px solid #e3e3e3;border-radius:12px;padding:25px;box-shadow:0 2px 8px rgba(4,42,55,.06);} .support .card h3,.supplies .card h3{margin:0 0 10px;} .support .card p{margin:0 0 10px;} .support .card p:last-child{margin-bottom:0;} .support .card a{color:var(--secondary,#176682);} .support .card .btn{color:var(--primary-comp,#fff);} .supplies{background-color:var(--light,#f5f5f5);padding:60px 0;} .supplies h2{margin:0 0 20px;} .supplies .grid{grid-gap:20px;align-items:start;} .supplies ul.check{margin:0;} .volunteer-cta{padding:60px 0;} .volunteer-cta h2{margin:0 0 10px;} .volunteer-cta p{margin:0;} .volunteer-cta .grid{grid-gap:20px 40px;} .society .society-logo{display:block;max-width:400px;width:100%;margin:0 auto 30px;} .society .grid{grid-gap:20px 40px;margin-bottom:20px;} .society .grid img{width:100%;display:block;border-radius:12px;} .society p{margin:0 0 15px;} .society .card{background-color:var(--dark,#042A37);color:var(--dark-comp,#fff);border:0;border-left:6px solid var(--primary,#C41E37);border-radius:12px;padding:25px 30px 35px;text-align:left;box-shadow:0 6px 20px rgba(4,42,55,.25);} .society .card p:last-child{margin-bottom:0;} .donate>.wrap>h2{margin:0 0 10px;} .donate>.wrap>p{margin:0 0 20px;} .donate-widget{max-width:760px;margin:30px auto 0;} .donate-widget :is(form,label,legend,h3,fieldset,p){text-align:left;} .donate-widget :is(input,select,textarea){font-size:16px;} .donate-widget iframe{aspect-ratio:auto;height:auto;width:auto;max-width:none;margin:0;} .donate-widget .donation-form .section{margin:0 0 20px;padding:0;} .donate-widget .donation-form .section:has(h3){margin-bottom:28px;} .donate-widget .donation-form .section + .section:has(h3){border-top:1px solid #e3e3e3;padding-top:28px;} .donate-widget .donation-form h3{margin:0 0 16px;color:var(--dark,#042A37);} .donate-widget .donation-form .field{margin:0 0 16px;padding:0;} .donate-widget .donation-form label{display:block;margin:0 0 6px;font-size:15px;font-weight:bold;color:var(--dark,#042A37);} .donate-widget .donation-form .field :is(input:not([type=radio],[type=checkbox]),select,textarea){width:100%;max-width:480px;min-height:44px;box-sizing:border-box;padding:10px 12px;color:var(--light-comp,#4d4d4d);background-color:var(--main-bg,#fff);border:1px solid #7d858c;border-radius:8px;} .donate-widget .donation-form textarea{min-height:120px;} .donate-widget .donation-form #card-element{width:100%;max-width:480px;min-height:44px;box-sizing:border-box;padding:10px 12px;background-color:var(--main-bg,#fff);border:1px solid #7d858c;border-radius:8px;} .donate-widget .donation-form #other-amount{width:110px;} .donate-widget .donation-form :is(.field.radio,.field.checkbox){margin:0 0 2px;padding:7px 10px;border-radius:8px;} .donate-widget .donation-form :is(.field.radio,.field.checkbox) label{display:block;margin:0;font-size:15px;font-weight:normal;color:var(--light-comp,#4d4d4d);} .donate-widget .donation-form :is(.field.radio,.field.checkbox) :is(input,.label){vertical-align:middle;} .donate-widget .donation-form :is(.field.radio,.field.checkbox):hover{background-color:var(--light,#f5f5f5);} .donate-widget .donation-form :is(.field.radio,.field.checkbox):has(input:checked){background-color:rgba(23,102,130,.08);} .donate-widget .donation-form .btn-group .btn{width:auto;min-width:0;min-height:44px;padding:12px 28px;border-radius:8px;} .donate-widget .donation-form :is(input,select,textarea,.btn):focus-visible{outline:2px solid var(--secondary,#176682);outline-offset:2px;} .careers h2{margin:0 0 10px;} .careers p{margin:0 0 20px;} .careers .grid{grid-gap:20px;margin:10px 0 40px;} .careers .card{background-color:var(--main-bg,#fff);border:1px solid #e3e3e3;border-radius:12px;padding:25px;box-shadow:0 2px 8px rgba(4,42,55,.06);} .careers .card h3{margin:0 0 10px;} .careers .card p{margin:0;} .careers .card ul.check{margin:0;} .careers .dei{background-color:var(--dark,#042A37);color:var(--dark-comp,#fff);border-left:6px solid var(--primary,#C41E37);border-radius:12px;padding:25px 30px;box-shadow:0 6px 20px rgba(4,42,55,.25);} .careers .dei p{margin:0;} .statement h2{margin:0 0 15px;} .statement p{margin:0 0 15px;} .statement .cta-row{margin:10px 0 20px;} .statement .cta-row .btn{margin:0 10px 0 0;} .statement ul.check{margin:0 0 15px;} .policy-contact{background-color:var(--light,#f5f5f5);border:1px solid #e3e3e3;border-radius:12px;padding:20px 25px;margin:0 0 15px;} .policy-contact address{font-style:normal;margin:0 0 10px;} .policy-contact p{margin:0 0 5px;} .policy-contact p:last-child{margin:0;} .policy .updated{font-size:14px;color:var(--light-comp,#4d4d4d);font-style:italic;} .news-cats{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 25px;} .news-cats button{cursor:pointer;background-color:var(--main-bg,#fff);border:1px solid #e3e3e3;border-radius:30px;padding:8px 22px;font-size:16px;font-family:inherit;color:var(--dark,#042A37);} .news-cats button:hover{border-color:var(--secondary,#176682);color:var(--secondary,#176682);} .news-cats button.active{background-color:#831425;border-color:#831425;color:var(--primary-comp,#fff);} .news-card time{display:block;margin:0 0 10px;font-size:14px;color:var(--light-comp,#4d4d4d);} .news-article .wrap{max-width:800px;} .news-article h2{margin:0 0 10px;font-size:30px;text-wrap:balance;} .news-article h3{margin:30px 0 10px;} .news-article time{display:block;margin:0 0 20px;font-size:14px;color:var(--light-comp,#4d4d4d);} .news-article p{margin:0 0 15px;} .news-article blockquote{margin:20px 0;padding:15px 25px;border-left:5px solid var(--primary,#C41E37);background-color:var(--light,#f5f5f5);border-radius:0 12px 12px 0;font-style:italic;} .news-article .tag{margin:0 0 5px;font-weight:bold;color:var(--secondary,#176682);text-transform:uppercase;font-size:14px;letter-spacing:1px;} .news-article .subtitle{font-style:italic;color:var(--light-comp,#4d4d4d);margin:0 0 15px;} .news-article ul.check{margin:0 0 20px;} .news-article .clinic-links{list-style:none;padding:0;margin:0 0 20px;} .news-article .clinic-links li{margin:0 0 12px;padding:12px 18px;background-color:var(--light,#f5f5f5);border:1px solid #e3e3e3;border-radius:10px;} .news-article .event-meta{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;margin:0 0 25px;} .news-article .event-meta .card{background-color:var(--light,#f5f5f5);border:1px solid #e3e3e3;border-radius:12px;padding:20px 25px;} .news-article .event-meta h3{margin:0 0 10px;} .news-article .event-meta p{margin:0 0 5px;} .news-article .event-meta address{font-style:normal;} .news-article .event-logo{display:block;max-width:420px;width:100%;margin:0 0 25px;} .news-article .event-img{display:block;max-width:600px;width:100%;margin:0 0 25px;border-radius:12px;} .news-article .event-passed{background-color:var(--light,#f5f5f5);border:1px dashed #c9c9c9;border-radius:10px;padding:12px 20px;margin:0 0 20px;color:var(--light-comp,#4d4d4d);font-style:italic;} .sitemap .grid{grid-gap:20px 40px;align-items:start;} .sitemap h2{margin:0 0 10px;font-size:20px;} .sitemap ul{list-style:none;padding:0;margin:0 0 25px;} .sitemap li{margin:5px 0;} .solutions .emphasis{height:350px;background-color:#8eedff;margin:40px 0;} .solutions .emphasis .grid{grid-template-columns:400px 1fr;grid-gap:0;} .solutions .emphasis img{display:block;object-fit:cover;height:350px;} .contact .grid.mid{grid-template-columns:300px 1fr;padding:40px 0 50px;} .contact .grid.mid ul{padding:10px 0 10px 70px;position:relative;} .contact li:first-of-type{position:absolute;top:10px;left:20px;} .contact ul svg{color:var(--secondary,#176682);} .social{margin:0;padding:0;text-align:left;} .social svg{width:30px;height:auto;color:var(--light-comp,#4d4d4d);} .social li{display:inline-block;margin-right:5px;} @media(max-width:62.4375rem){/* Dropdowns need hover;on touch widths the parent links carry the destination. A full mobile menu (disclosure/hamburger) is a follow-up. */ /* The header stops being fixed here. Once it stacks it grows to ~240px,and by 600px it is ~378px - over 40 percent of a phone viewport,held permanently,with the hero padded ~394px to compensate. Static also means the page stops having to reserve its height,so everything that existed to clear a fixed header is undone together:body's padding-top,the hero's negative margin that tucked it behind the header,the per-breakpoint hero padding that added the header height,and the anchor scroll margins. relative rather than static keeps the positioning context header:before needs for its gradient. */ header{position:relative;} body{padding-top:0;} :is(#story,#board,#team,#services,#access,#financial,#eligibility,#downtown-orlando,#west-orange,#pastor-paul-hoyer){scroll-margin-top:20px;} /* The header sits on the hero image here too - the hero's negative margin below still tucks it underneath - so the scrolled state's gradient,which is what makes the header legible over photography and lets it fade into the image rather than ending on a hard edge,stays on permanently. */ header:before{opacity:1;} .has-drop .sub{display:none;} .has-drop>a:after{content:none;} header .grid{grid-template-columns:1fr;} header .grid>a{display:block;width:fit-content;margin:0 auto;} header img{width:180px;display:block;margin:0 auto 20px;} header .wrap{text-align:center;} nav{flex-direction:row;justify-content:center;width:100%;margin-top:10px;} nav ul{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;text-align:center;gap:4px;} nav a{display:inline-block;padding:5px 14px;min-height:auto;text-align:center;border-bottom:none;} .grid.half{grid-template-columns:1fr 1fr;} .grid.third{grid-template-columns:repeat(3,1fr);} .grid.fourth{grid-template-columns:repeat(2,1fr);} .hero{height:600px;padding:0;} .hero>.wrap{position:absolute;top:56%;transform:translate(-50%,-50%);left:50%;right:auto;width:92%;max-width:660px;margin:0;} .hero h1,.hero p{text-align:center;} .hero .wrap:after{display:none;} .solutions .emphasis{height:450px;} .solutions .emphasis .grid{grid-template-columns:400px 1fr;} .solutions .emphasis img{height:350px;} .contact .grid.mid{grid-template-columns:300px 1fr;} /* min-width against the container,not a flat 250px:in a three-column grid the card's content box is ~249px at 940px,so a flat floor pushed every clinic card's button past its own border. min() keeps the tap target where there is room and yields where there is not. */ form input[type=submit],.btn{width:auto;display:inline-block;min-width:min(250px,100%);box-sizing:border-box;} :is(button,form input[type=submit],.btn){padding:10px 40px;} .donate-widget .donation-form .btn-group .btn{width:100%;} .hero:has(.btn){height:auto;min-height:550px;overflow:hidden;} .hero:has(.btn)>.wrap{position:relative;top:auto;transform:none;left:0;right:0;width:92%;max-width:660px;margin:calc(var(--header-h,190px) + 24px) auto 24px;}} @media(max-width:47.9375rem){.hero{height:auto;min-height:550px;display:flex;align-items:center;justify-content:center;padding:calc(var(--header-h,190px) + 16px) 0 24px;overflow:hidden;} .clinics .grid.third{grid-template-columns:1fr;} .clinic-card img{height:200px;} .hero>.wrap,.hero:has(.btn)>.wrap{position:relative;top:auto;left:auto;right:auto;transform:none;width:92%;max-width:660px;margin:0 auto;} .hero h1,.hero p{text-align:center;} .grid.third{grid-template-columns:repeat(2,1fr);} .grid.third>:nth-of-type(odd):last-of-type{grid-column:1 / -1} /* Footer columns drop to two here,so each column's content is centred and the quicklinks become a stack of buttons rather than a ragged list. The social row and the seals were explicitly left-aligned,which stranded them under a column that no longer matched their width. */ .grid.third.footer-cols{grid-template-columns:1fr;} .footer-cols :is(h3,p){text-align:center;text-wrap:balance;} .footer-cols .social{text-align:center;} .footer-cols .seals{justify-content:center;} /* The quicklinks read as buttons:the footer's own dark is too close to a tinted button to separate them,so they carry the brand colour,and they wrap into as many rows as they need rather than stacking into one tall column of full-width bars. */ .footer-cols ul:not(.social){display:flex;flex-wrap:wrap;justify-content:center;gap:8px;} /* the grow sits on the li,which is the flex item,so the buttons fill their row evenly;the anchor keeps nowrap so a label never breaks,and its min-content is what stops a row from over-filling */ .footer-cols ul:not(.social) li{margin:0;flex:1 0 100px;} .footer-cols ul:not(.social) a{display:block;padding:6px 12px;white-space:nowrap;text-align:center;background-color:var(--primary,#C41E37);border-radius:6px;color:var(--dark-comp,#fff);} .footer-cols ul:not(.social) a:hover{background-color:var(--secondary,#176682);color:var(--dark-comp,#fff);} .contact .grid.mid{grid-template-columns:1fr;place-items:center;text-align:center;} .contact .grid.mid ul{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 0;} .contact .grid.mid ul.social{flex-direction:row;justify-content:center;} .contact li:first-of-type{position:static;} .solutions .emphasis{height:auto;} .solutions .emphasis .grid{grid-template-columns:1fr;} .solutions .emphasis img{width:100%;height:auto;} .solutions .emphasis .wrap{position:relative;top:auto;transform:none;} .hero:has(.btn){height:auto;min-height:600px;}} @media(max-width:37.5rem){.hero .cta .btn,.hero .btn-alt{box-sizing:border-box;} header img{width:clamp(110px,35vw,180px);} header .wrap{padding:clamp(10px,2.5vw,15px) clamp(10px,2.5vw,15px);} header{font-size:20px;} .grid.half,.grid.third,.grid.fourth,.subfoot .grid{grid-template-columns:1fr;} footer :is(li,h3,p){text-align:center;text-wrap:balance;} .solutions .emphasis .grid{grid-template-columns:1fr;} .solutions .emphasis img{width:100%;height:auto;} .hero{height:auto;min-height:480px;padding:calc(var(--header-h,280px) + 16px) 0 24px;} .hero>.wrap,.hero:has(.btn)>.wrap{position:relative;top:auto;transform:none;left:auto;right:auto;width:92%;max-width:480px;margin:0 auto;padding:20px 24px;border-radius:50px;} .hero h1{font-size:30px;} .hero .lead{font-size:17px;margin-bottom:15px;} .hero .sub{font-size:19px;} .hero .cta{margin-top:25px;} .hero .cta .btn{display:block;width:100%;max-width:320px;margin:15px auto 0;box-sizing:border-box;} .hero .cta .btn + .btn{margin-left:0;} .who-we-serve .grid.half,.mission .grid.half,.get-involved .grid.half,.board .grid.half{grid-gap:30px 0;} .imgRight{float:none;max-width:100%;margin:0 0 15px;} .loc-card{grid-template-columns:1fr;} .loc-card iframe{min-height:260px;} .loc-photos{max-width:360px;} .news-article .event-meta{grid-template-columns:1fr;} .get-involved .cta-row .btn{display:block;width:100%;margin:0;box-sizing:border-box;}} @media(max-width:31.25rem){header img{width:clamp(100px,30vw,150px);} header .wrap{padding:clamp(8px,2vw,12px) clamp(8px,2vw,12px);} /* The two-column nav waits until here. Imposed at 600 it arrives while the row still has room to wrap sensibly,which reads as a jump;the columns earn their place at the widths Google measures,where a wrapping nav is the CLS risk they exist to remove. */ nav ul{display:grid;grid-template-columns:1fr 1fr;gap:5px;max-width:300px;margin:0 auto;} nav li{display:flex;justify-content:center;align-items:center;} /* seven items,so the last one lands alone in the left column - the same odd-trailing case the grids handle,so it spans and centres */ nav li:last-child:nth-of-type(odd){grid-column:1 / -1;} nav a{padding:8px 12px;width:100%;text-align:center;} nav ul{gap:4px;} nav a{padding:4px 8px;} /* anywhere,not break-word:break-word only breaks a line that would otherwise overflow,so it leaves the intrinsic min-content width at the whole address — which is what held the donate list's 1fr column open at the email address and pushed the row past the viewport. anywhere participates in min-content sizing,so the column can shrink. */ a[href^="mailto:"]{overflow-wrap:anywhere;} /* The donate list is a 80px + 1fr grid,and 1fr will not shrink below its content's min-content width. With the 250px min-width the buttons carry further up,that floor is the button,so the row resolved to 80 + 25 + 250 = 355px and ran past a 320px viewport by 77px. Dropping the floor lets the column shrink;width:100% matches how the other CTAs behave on small screens. */ .donate-list .btn{min-width:0;width:100%;box-sizing:border-box;} .hero{height:auto;min-height:480px;padding:calc(var(--header-h,280px) + 16px) 0 24px;} .hero>.wrap,.hero:has(.btn)>.wrap{top:auto;position:relative;transform:none;left:auto;right:auto;width:92%;max-width:480px;margin:0 auto;}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:unset !important;transition:all 0s !important;animation:none !important;} .hero-slides img{opacity:0;} .hero-slides img:first-child{opacity:1;}} @media(forced-colors:active){button,input,textarea,a{border:1px solid #000 !important;}}