img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} html { --14px: 0.875rem; --15px: 0.9375rem; --16px: 1rem; --17px: 1.0625rem; --18px: 1.125rem; --19px: 1.1875rem; --20px: 1.25rem; --21px: 1.3125rem; } *:focus-visible, input[type='submit']:focus-visible { outline-style: solid; outline-width: 2px; outline-color: #000; outline-offset: 4px; border-radius: 3px; transition: all 0.3s linear 0.01s; } .focusclarity *:focus-visible { outline-color: var(--primary); box-shadow: none; } .focusclarity input[type='submit']:focus-visible { outline-color: var(--primary); } .jump { text-decoration-line: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; position: absolute; background-color: var(--primary); color: var(--secondary-comp); left: 60px; top: 5px; padding: 10px; border-width: 2px; border-color: var(--secondary-comp); border-style: none solid solid; transform: translateY(-300%); white-space: nowrap } .jump:focus { transform: translateY(0); outline-offset: 0; text-decoration: none; } a[target='_blank'] { position: relative; } a[target='_blank'] i { padding: 4px; border: 1px solid black; color: #af2f27; background-color: #fff; text-decoration: none; position: absolute; left: 30px; bottom: -30px; z-index: 999; width: 130px; display: none; font-size: 12px; font-family: sans-serif; text-align: center; letter-spacing: 0; } a[target='_blank']:hover i, a[target='_blank']:focus i { display: block; } .back { margin: 5px } .back button { background-color: var(--dark); color: var(--dark-comp); padding: 10px 20px; border-radius: 3px; border: 1px solid var(--dark); } header a[target='_blank'] i { left: 0; } .mark i { left: 14px; } .ccpaNotice a { font-weight: normal } .ccpaNotice a i, .mark i { bottom: unset !important; top: -30px; } .eligibility h3, .banner { text-shadow: 0 0 1px #000,0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 3px #000 } * { scroll-behavior: smooth; } button { cursor: pointer } .jQexpiring { display: none; } body { margin: 0; min-width: 320px; line-height: 1.5; min-width: 320px;} .wrap { max-width: 1080px; margin: 0 auto; padding: 10px; position: relative; } img, iframe, video { max-width: 100%; display: block; height: auto; } a img, iframe { border: none; } a, header a:hover, .btn:hover, form input[type='submit'] { text-decoration: none; } a, form input[type='submit'] { transition: ease-in-out 0.3s; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 40px 0; } .imgLeft, .imgRight { max-width: 50%; } .imgLeft { float: left; margin: 10px 4% 2% 0; } .imgCenter { margin: 0 auto; } .imgRight { float: right; margin: 10px 0 2% 4%; } .clear { clear: both; } .hide { display: none !important; } .nowrap, a[href^='tel'] { white-space: nowrap; } .grid { display: grid; grid-gap: 10px; } .grid.half { grid-template-columns: 1fr 1fr; } .grid.third { grid-template-columns: 1fr 1fr 1fr; } .grid.fourth { grid-template-columns: 1fr 1fr 1fr 1fr; } .grid.mid { align-items: center; } .mid img { align-items: center; margin: 0 auto; } .grid .span2 { grid-column: span 2; } .grid .span3 { grid-column: span 3; } .grid.lists { grid-row-gap: 0; } .grid ul { margin: 0; } .flex { display: flex; flex-wrap: wrap; } .flex > * { flex: 1 1 300px; } ul, ol { padding-left: 25px; margin: 0; } .nolist { list-style: none; padding: 0; } .flex ul li:last-of-type { margin-bottom: 0; } main li { margin: 5px 0; } .center, .btn, form { text-align: center; } .banner, .cover { background-size: cover; background-position: center; } header a, .btn { text-decoration: none; } .bgimg { position: relative; } .bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: 0; } a:hover { text-decoration: underline; } .notice { padding: 10px; border-bottom: 1px solid var(--secondary); } .notice a { font-size: 16px; font-weight: normal; color: var(--secondary-comp); display: inline-block; } .notice svg { display: inline-block; top: 5px; position: relative } header .wrap .grid { padding: 0px; } header a { display: block; font-size: 20px; font-weight: bold; } header .grid { grid-template-columns: 300px 1fr; padding: 20px 0; grid-gap: 0; } header .logo { text-align: left; padding: 2px; } nav ul { padding: 0; margin: 0; text-align: right; } nav li { display: inline-block; } nav a { margin: 5px; padding: 5px; } nav .address { font-size: var(--15px); color: #af2f27; text-align: right; display: block; padding: 5px 10px } nav a:hover { font-weight: normal; text-decoration: underline; } .gallery { margin-bottom: 40px; } .gallery.grid { grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; } .gallery a { height: 300px; } .gallery img { object-fit: cover; width: 100%; height: 100%; object-position: 50% 20%; outline: 1px solid #eee; } .banner, footer { background-color: var(--dark); color: var(--dark-comp); } .banner { min-height: 260px; padding: 30px 0 10px; position: relative; display: flex; align-items: center; } .banner .btn { text-shadow: none; } .banner.bgimg > img { object-fit: unset; } .banner:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0); z-index: 1; } .banner > .wrap { z-index: 2; } .banner h1 { font-size: 4rem; line-height: 1.25; margin: 0 0 20px; padding: 0 10px; font-weight: normal; outline-color: var(--main-bg); } main { padding: 0; color: var(--font, #4d4d4d); } .segment { padding: 20px 0; } .eligibility { margin: 20px auto 40px; text-align: center; } .eligibility a { display: block; font-weight: normal; position: relative; padding: 250px 5px 70px; border: 1px solid #eee; } .eligibility a:hover { text-decoration: none; } .eligibility .bgimg::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1; } .eligibility a :not(img) { z-index: 2; position: relative; } .eligibility .bgimg img { border-radius: 5px; } .eligibility h3 { font-size: 24px; margin: 10px 0; color: #fff; text-align: center; } .eligibility h3 span.btn { display: block; font-weight: normal; } .eligibility .btn { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .border { background-image: url('/images/border.png'); background-repeat: repeat-x; height: 25px; background-size: contain; display: block; background-color: #fff; } .btn, form input[type='submit'] { display: inline-block; min-width: 160px; padding: 15px 20px; margin: 0 auto; border-radius: 3px; text-shadow: 0 0 1px #000; } h2#upcoming, h2#past { margin-top: 0; padding-top: 15px; } footer .grid { align-items: center; } footer .segment { padding: 20px 10px; } footer .bgimg { overflow: hidden; } footer .bgimg > img:first-of-type { transform: scale(1.5); } .subfoot .grid { grid-template-columns: 1fr 150px; } .mark { display: block; margin: 0 auto; } .mark img { filter: invert(1); } form { margin: 20px 0; } form fieldset { border: none; padding: 0; margin: 0; } form legend { text-align: left; padding: 0; text-align: center; font-size: 1.5em; font-weight: bold; margin: 0.83em 0; } form label { display: block; text-align: left; } form :is(input, textarea) { display: block; padding: 15px 10px; width: 100%; box-sizing: border-box; margin: 0 0 15px; line-height: 1.5; border: none; font-size: var(--16px); width: 100%; } form textarea { height: 150px; } form input[type='submit'] { max-width: 250px; } form input[type='submit']:hover { cursor: pointer; } body, form input, form textarea, button { font-family: 'Montserrat', 'Montserrat Fallback', sans-serif; font-size: 1rem; } .banner p { font-size: 22px; } :root { --main-bg: #fff; --light: #ececec; --light-comp: #4d4d4d; --dark: #323232; --dark-comp: #fff; --primary: #af2f27; --primary-comp: #000; --secondary: #af2f27; --secondary-comp: #fff; --tertiary: #ccc; --tertiary-comp: #fff; } body, main { background-color: var(--main-bg, #fff); } .bg-light { background-color: var(--light, #ececec); color: var(--light-comp, #4d4d4d); } .bg-dark { background-color: var(--dark, #323232); color: var(--dark-comp, #fff); } .bg-dark { padding: 20px; } .bg-primary { background-color: var(--primary, #e37100); color: var(--primary-comp, #fff); } .fg-primary, ul.checkmark li:before { color: var(--primary, #e37100); } .bg-secondary, input[type='submit'] { background-color: var(--secondary, #ee1d23); color: var(--secondary-comp, #fff); } .bg-tertiary, .btn:hover, form input[type='submit']:hover { background-color: var(--tertiary); color: var(--tertiary-comp); } .banner.main { height: 480px; } .banner.main h1 { max-width: 1000px; } ul.checkmark { list-style: none; } ul.checkmark li { position: relative; padding: 5px 20px; } ul.checkmark li:before { content: '\2714'; position: absolute; left: -15px; line-height: 1; font-size: 200%; font-weight: 300; } .notice a:hover { font-weight: bold; } .notice, .banner, .row2, .row3, .row4, .services .grid, footer { text-align: center; } .row2 > .bg-img { height: 400px; } a { color: #af2f27; font-weight: bold; } nav a { color: #323232; font-weight: normal; } nav a:hover { color: #af2f27; } .banner .btn { margin: 20px; } .btn { background-color: var(--primary); border: 1px solid var(--primary); color: var(--dark-comp); font-weight: bold; } .row1 .grid { grid-template-columns: 1fr 200px; grid-gap: 10px 50px; align-items: center; } .row4 img { display: inline-block; vertical-align: middle; } .row3 { padding-bottom: 60px; } .row3 li { text-align: left; } .row4 img { margin: 20px 35px; } .services.grid { grid-gap: 10px 30px } .services a { text-decoration: none; } .services h3 { margin-top: 10px; } .services img { height: 200px; object-fit: cover } .contact .grid { margin: 30px 0; } .contact .grid > div { padding: 20px 40px 40px; } form { margin: 40px 0; } .subfoot { text-align: left; color: #eee; } .relatives div { padding: 10px 0 20px; } .relatives .grid { margin-top: 10px; } :is(.rememberance) img { height: 400px; width: auto; outline: 1px solid #eee; object-fit: cover } .rememberance :is(h4,p) { margin: 10px 0 } @media(prefers-reduced-motion: reduce) { * { transition: all 0s !important; scroll-behavior: unset; animation: none; } } @media (max-width: 800px) { .eligibility h3 span { display: block; } } @media (max-width: 767px) { .grid.fourth, .grid.gallery { grid-template-columns: 1fr 1fr; } .grid.gallery > *:nth-of-type(odd):last-of-type { grid-column: 1 / -1; } .banner span.nowrap { white-space: normal; } .banner h1 { font-size: 3.5rem; } } @media (max-width: 700px) { header .grid, .row1 .grid { grid-template-columns: 1fr; } nav ul, nav .address { text-align: center; } .logo img { margin: 0 auto; } .jump { left: 50%; transform: translate(-50%, -300%); } .jump:focus { transform: translate(-50%, 0); } .banner h1 { font-size: 47px; } } @media (max-width: 600px) { .grid.half, .grid.third, .subfoot .grid { grid-template-columns: 1fr; } .subfoot p { text-align: center; } .imgRight { float: none; margin: 0 auto; max-width: 100%; } .eligibility a { padding: 150px 5px 70px; } .eligibility h3 span { display: inline; } } @media (max-width: 500px) { .grid.fourth { grid-template-columns: 1fr; } .banner h1 { font-size: 40px; } } @media (max-width: 400px) { form input[type='submit'] { max-width: unset; display: block; width: 100%; } .gallery.grid { grid-template-columns: 1fr; } }