/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Core */ * { box-sizing: border-box; } html, body { height: 100%; } html { font-size: 10px; } body { font: 1.6rem/1.62 sans-serif; color: #444; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; } main { flex: 1 0 auto; margin-top: 5.31rem; } img { display: block; } /* Typography */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin: 1rem 0; } h1 { color: #111; font-size: 3rem; font-weight: bold; margin: 0.8rem 0; } h1:first-of-type { margin-top: 0; line-height: 1; } h2 { color: #222; font-size: 2.2rem; font-weight: bold; margin: 0.6rem 0; } h3 { color: #333; font-size: 1.8rem; margin: 0.4rem 0; } h4, h5, h6 { color: #444; font-size: 1.5rem; margin: 0.2rem 0; } /* Links */ a { text-decoration: none; } a:link, a:visited { color: #0000CC; } a:hover, a:visited:hover { color: #07C; } /* Form stuff */ .form { padding: 2rem; background: #FCFCFC; border: 1px solid #EEE; border-radius: 1rem; margin: 2rem 0; } input[type=email], input[type=number], input[type=search], input[type=text], input[type=tel], input[type=url], input[type=password], textarea, select { height: 38px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #FFF; border: 1px solid #E1E1E1; border-radius: 4px; box-shadow: none; box-sizing: border-box; } /* Removes awkward default styles on some inputs for iOS */ input[type=email], input[type=number], input[type=search], input[type=text], input[type=tel], input[type=url], input[type=password], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { min-height: 65px; resize: vertical; padding-top: 6px; padding-bottom: 6px; } input[type=email]:focus, input[type=number]:focus, input[type=search]:focus, input[type=text]:focus, input[type=tel]:focus, input[type=url]:focus, input[type=password]:focus, textarea:focus, select:focus { border: 1px solid #33C3F0; outline: 0; } label, legend { display: block; margin-bottom: 0.5rem; font-weight: 600; } fieldset { padding: 0; border-width: 0; } input[type=checkbox], input[type=radio] { display: inline; } label > .label-body { display: inline-block; margin-left: 0.5rem; font-weight: normal; } .container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 1.24rem; box-sizing: border-box; overflow: auto; } .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve { width: 100%; float: left; box-sizing: border-box; padding: 0.44rem; margin: 0.6rem 0; } .grid-visible { background: #EEE; text-align: center; border-radius: 0.44rem; } /* For devices larger than 360px */ /* For devices larger than 550px */ @media (min-width: 550px) { .container { width: 90%; } .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve { margin-left: 4%; } .one:first-child, .two:first-child, .three:first-child, .four:first-child, .five:first-child, .six:first-child, .seven:first-child, .eight:first-child, .nine:first-child, .ten:first-child, .eleven:first-child, .twelve:first-child { margin-left: 0; } .one { width: 4.6666666667%; } .two { width: 13.3333333333%; } .three { width: 22%; } .four { width: 30.6666666667%; } .five { width: 39.3333333333%; } .six { width: 48%; } .seven { width: 56.6666666667%; } .eight { width: 65.3333333333%; } .nine { width: 74%; } .ten { width: 82.6666666667%; } .eleven { width: 91.3333333333%; } .twelve { width: 100%; margin-left: 0; } /* Offsets */ .offset-one { margin-left: 8.6666666667%; } .offset-two { margin-left: 17.3333333333%; } .offset-three { margin-left: 30%; } .offset-four { margin-left: 34.6666666667%; } .offset-five { margin-left: 43.3333333333%; } .offset-six { margin-left: 52%; } .offset-seven { margin-left: 60.6666666667%; } .offset-eight { margin-left: 69.3333333333%; } .offset-nine { margin-left: 78%; } .offset-ten { margin-left: 86.6666666667%; } .offset-eleven, .offset-eleven:first-child { margin-left: 95.3333333333%; } } /* Header */ .header { position: absolute; width: 100%; background: #FFF; border-bottom: 1px solid #DDD; z-index: 9; } .header-container { margin: 0 auto; position: relative; padding: 1.305rem; /*max-height:52px;*/ max-width: 960px; display: flex; justify-content: space-between; align-items: center; } .header--scroll { position: fixed; } .header-container--scroll { padding: 0.24rem 1.24rem; } .logo { font-weight: bold; } .desktop-nav { display: none; } .mobile-nav { height: 100%; width: 100%; position: fixed; top: 51px; left: 0; right: 0; padding: 1.24rem; background: #FFF; border-left: 1px solid #EEE; z-index: 8; } nav > a { padding: 0.2rem 0; display: block; border-top: 1px dotted #101; } nav > a:first-child { border: none; } .mobile-nav--hidden { display: none; } .burger-container { position: relative; height: 20px; width: 28px; cursor: pointer; z-index: 9; } .burger, .burger::after, .burger::before { position: absolute; height: 4px; width: 28px; content: ""; transition: transform 300ms cubic-bezier(0.4, 1, 0.5, 1); background: #000; } .burger::before { margin-top: 8px; } .burger::after { margin-top: 16px; } .burger-open { overflow: hidden; } @media (min-width: 720px) { .desktop-nav { display: inline-block; } nav > a { margin-left: 2rem; padding: auto; display: inline; border: none; } nav > a:first-child { padding: 1rem 0; margin-left: 0; } .burger-container { display: none; } .burger-open { overflow: auto; } .mobile-nav { display: none; } } @media (max-width: 320px) { .burger-container { display: block; } } /* Accordion */ .accordion, details { border: 1px solid #EEE; } .accordion__item + .accordion__item { border-top: 1px solid #EEE; } .accordion__item__header, details summary { margin: 0; border: none; border-bottom: 1px solid #EEE; border-radius: 0; width: 100%; text-align: left; padding: 1.2rem 1.6rem; font-size: 1.6rem; background: #FFF; cursor: pointer; } .accordion__item__header:focus { border-bottom: 1px solid #EEE; } .accordion__item__body, .detail__body { padding: 1.2rem 1.6rem; } .accordion__item__body__hidden { display: none; } /* Alerts */ .alert { border-radius: 1.24rem; padding: 1.24rem; position: relative; margin: 1rem 0; border: 1px solid #EEE; } .alert--dismissable { padding-right: 3rem; } .alert--dismissable .button-close { position: absolute; top: 0; right: 0; padding: 1.9rem 1rem; margin: 0; } .alert--success { background: #D1E7DD; } .alert--fail { background: #F8D7DA; } /* Buttons */ .button, a.button, input[type=submit], input[type=reset], input[type=button] { border: 1px solid #275D57; border-radius: 0.6rem; padding: 1.2rem 1.6rem; display: inline-block; color: #275D57; margin: 0.6rem 0.2rem; text-align: center; background: transparent; font-size: 1.3rem; line-height: 1.3rem; letter-spacing: 0.07rem; cursor: pointer; font-weight: bold; } .button:hover, a.button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, .button:focus, button:focus, input[type=submit]:focus, input[type=reset]:focus, input[type=button]:focus { color: #333; border-color: #275D57; outline: 0; } .button--fill, a.button--fill, button.button--fill, input[type=submit].button--fill, input[type=reset].button--fill, input[type=button].button--fill { background: #275D57; color: #FFF; } .button--fill:hover, a.button--fill:hover, button.button--fill:hover, input[type=submit].button--fill:hover, input[type=reset].button--fill:hover, input[type=button].button--fill:hover, .button--fill:focus, button:focus, input[type=submit].button--fill:focus, input[type=reset].button--fill:focus, input[type=button].button--fill:focus { color: #FFF; background: #368179; outline: 0; } .button--alt, a.button--alt, button.button--alt, input[type=submit].button--alt, input[type=reset].button--alt, input[type=button].button--alt { background: #DF7E77; border-color: #DF7E77; color: #FFF; } .button--alt:hover, a.button--alt:hover, button.button--alt:hover, input[type=submit].button--alt:hover, input[type=reset].button--alt:hover, input[type=button].button--alt:hover, .button--alt:focus, button:focus, input[type=submit].button--alt:focus, input[type=reset].button--alt:focus, input[type=button].button--alt:focus { color: #333; border-color: #888; outline: 0; } .button-close { box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em 0.25em; color: #000; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: 0.375rem; opacity: 0.5; vertical-align: middle; cursor: pointer; } /* Card */ .card { background: #DDD; text-align: center; transition: transform 0.2s; width: 240px; display: inline-block; vertical-align: top; margin: 1rem; overflow: hidden; } .card:hover { /*transform:scale(1.04); filter: brightness(1.03);*/ } .card__header { padding: 2rem; width: 100%; height: auto; background: red; color: #FFF; position: relative; padding: 0; margin: 0; } .card__header--image { padding: 0; width: 100%; } .card__header img { max-width: 100%; height: auto; display: block; overflow: hidden; } .card__header__absolute { color: #FFF; position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__content { padding: 2.2rem; } .card__footer { padding: 1.2rem; padding-top: 0; } .flip-card:hover .flip-card__front { display: none; } .flip-card:hover .flip-card__back { display: block; } .flip-card__front { display: block; } .flip-card__back { display: none; } /* Code */ pre { background: #F8F8F8; padding: 1rem; margin: 1rem 0; white-space: pre-wrap; overflow-x: auto; border: 1px solid #F8F8F8; border-radius: 6px; } code { background: #F8F8F8; padding: 0.1rem 0.4rem; border: 1px solid #F8F8F8; border-radius: 6px; font-size: 1.5rem; color: #555; } pre code { border: none; } /* Cookies */ .cookie-prompt { position: fixed; bottom: 0; background: #EEE; border-top: 1px solid #333; width: 100%; padding: 1.2rem; } .cookie-prompt--hidden { display: none; } /* Hero */ #hero { -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .hero__credit { position: absolute; bottom: 0; right: 0; padding: 1.24rem; border-radius: 1rem 0 0 0; background: #EEE; } .hero__credit--hidden { display: none; } .hero-s { padding: 4.64rem; background: #275D57; } .hero-m { height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; max-height: 70vh; } .hero-f { height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .hero--image { background-color: #444; background-image: linear-gradient(rgba(68, 68, 68, 0.2), rgba(68, 68, 68, 0.45)), url("/images/hero.jpg"); } .hero-content { text-align: center; } .hero-m .hero-content, .hero-f .hero-content { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } .hero-s *, .hero-m *, .hero-f * { color: #FFF; } .hero--para { background-attachment: fixed; } .main--para { margin-top: 0; } /* Lists */ ul { padding-left: 0; margin-left: 0; list-style: inside; } ul li { margin: 0.35rem; } li > ul { margin-left: 1em; } /* Quotes */ blockquote { margin: 1.7rem 0.2rem; border-left: 2px solid; padding: 1rem 0.4rem; padding-left: 2rem; } /* Tables */ .tblcon { overflow-x: auto; } table { text-align: left; width: 100%; border-collapse: collapse; overflow-wrap: normal; margin: 24px 0; } th { font-weight: bold; } th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #E1E1E1; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } thead tr { border-color: red; } tbody tr:nth-child(odd) td { background-color: #FCFCFC; } tbody tr:hover td { background: #F8F8F8; } @media print { .container { max-width: none; } } @media (min-width: 720px) { ul li { margin: auto; } } @media (max-width: 320px) { body { overflow-wrap: anywhere; } img { width: 100%; height: auto; } } /* Tags */ .tag { font-size: 0.8rem; vertical-align: middle; padding: 0.2rem 0.5rem; border-radius: 0.33rem; border: 1px solid #DDD; } .tag--m { font-size: 1rem; } .tag--l { font-size: 1.2rem; } .tag--fill { background: #275D57; color: #FFF; border-color: #275D57; } .tag--alt { background: #DF7E77; color: #FFF; border-color: #DF7E77; } /* Toasts */ .toast-container { position: fixed; z-index: 9; bottom: 0; padding: 1rem; pointer-events: none; /* Prevent interaction */ width: 100%; } .toast { text-align: center; display: block; } .toast__inner { margin: 0 auto; font: 1.4rem sans-serif; color: #444; padding: 1.2rem 2rem; border-radius: 0.3rem; background: #222; color: #FFF; text-align: center; box-shadow: 0px 2px 8px -5px rgb(0, 0, 0); display: inline-block; } .toast + .toast { margin-top: 0.4rem; } /* Utilities */ .hidden { display: none; } .tac { text-align: center; } .vh { position: absolute; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; padding: 2px 8px; overflow: hidden; white-space: nowrap; background: #FFF; z-index: 10; } .vh:focus { clip: auto; overflow: auto; height: auto; width: auto; } .u-full-width { width: 100%; box-sizing: border-box; } .u-max-full-width { max-width: 100%; box-sizing: border-box; } .u-pull-right { float: right; } .u-pull-left { float: left; } /* Self Clearing Goodness */ .container:after, .row:after, .u-cf { content: ""; display: table; clear: both; } /* Site specific */ img { image-rendering: pixelated; } @media (min-width: 420px) { img { image-rendering: auto; } } strong { font-weight: bold; } .section { padding: 1.75rem 1.24rem; margin: 1.75rem auto; background: #FFF; } .section--no-bg { padding: 0; /*1.24rem*/ background: none; } nav a { color: #000; } nav a:hover, nav a:visited:hover { color: #275D57; border-bottom: 1px solid #275D57; } nav a:visited { color: #000; } main { margin-top: 84px; background: #FAECE1; } .hero--image { background-size: cover; background-position-x: center; background-position-y: top; } a.button--hero { border-color: #FFF; background: #FCFCFC; color: #275D57; font-size: 1.5rem; margin-top: 1.2rem; } a.button--hero:hover { background: #FFF; color: #000; } .section h2 { border-bottom: 1px solid #EEE; padding-bottom: 1.4rem; margin-bottom: 1.4rem; } .hero-m .hero-content { top: auto; transform: translate(-50%, 0); bottom: 50px; } .hero-m .hero-content h1 { font-size: 3.8rem; } .hero-m .hero-content h2 { font-size: 2.6rem; } details { margin-bottom: 1rem; } details summary, details .detail__body { background: #FFF; } .header { height: 84px; /* background:#39897B; */ } .header--scroll { height: auto; } .mobile-nav { top: 84px; } main { /* background:#C8BDB4; */ } nav > a { padding: 0.7rem; } .fundraiser-container { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 360px) { .fundraiser-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .fundraiser-container { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .fundraiser { /* float:left; width:25%; */ border-bottom: 1px solid #DDD; text-align: center; padding-bottom: 1rem; display: flex; flex-direction: column; } .fundraiser img { align-items: center; width: 100%; height: auto; /* flex: 1 0 auto; */ } .fundraiser p { padding-top: 0.6rem; margin-bottom: auto; } .fundraiser:nth-child(odd) { border-bottom: 1px solid #EEE; } .fundraiser:hover { border-bottom: 1px solid #275D57; } p + p { margin-top: 1rem; } p + .button { margin-top: 2rem; } .footer { border-top: 1px solid #111; background: #368179; padding: 1.6rem 0; padding-bottom: 2.4rem; } .footer * { color: #FFF; } .footer__sub { margin-top: 2rem; } .footer__title { font-weight: bold; font-size: 1.85rem; margin-bottom: 1rem; margin-top: 0.8rem; } .footer__logo__container { display: flex; gap: 1.6rem; align-items: center; margin-bottom: 1rem; } .footer__logo__container .footer__title { margin: 0; } .footer__logo { border-radius: 9999px; } a.footer__link { color: #FFF; } a.footer__link:hover { color: #000; } .subfooter { border-top: 1px solid #222; background: #275D57; padding: 0.8rem 0; } .subfooter * { color: #FFF; } .subfooter a { color: #FFF; text-decoration: underline; } .subfooter a:hover { color: #DDD; } .footer__container { display: flex; flex-wrap: wrap; gap: 3rem; } a.footer__icon { width: 32px; height: 32px; display: inline-block; } .siteby { text-align: right; } .section summary h2 { font-size: 1.6rem; border: none; margin: 0; padding: 0; display: inline; vertical-align: middle; } .card__content { background: #FFF; padding: 1rem; } .team-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 700px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .team-grid .card { width: 100%; height: auto; background: #FFF; position: relative; } .card__image { width: 100%; height: auto; } .flip-card { margin: 0; position: relative; height: 286px; width: 100%; } .flip-card:hover .flip-card__front { display: block; } @media (min-width: 320px) { .flip-card:hover .flip-card__front .card__content { display: none; } } .flip-card:hover .flip-card__back { display: block; } .flip-card__front { position: relative; } .flip-card__front .card__content { background: #275D57; background: rgba(39, 93, 87, 0.8); } @media (min-width: 320px) { .flip-card__front .card__content { position: absolute; bottom: 0; max-width: 85%; } } .flip-card__front .card__content * { color: #FFF; } .flip-card__front .card__content h2 { border: 0; padding: 0; } .flip-card__front .card__content h3 { font-size: 1.6rem; } .flip-card__back { display: block; } @media (min-width: 320px) { .flip-card__back { display: none; } .flip-card__back .card__content { position: relative; } .flip-card__back .card__content p { position: relative; } } @media (min-width: 320px) { .flip-card__back .card__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #275D57; background: rgba(39, 93, 87, 0.8); } .flip-card__back .card__content p { padding: 1rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; color: #FFF; } } .donate-container { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 720px) { .donate-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .donate-container section { padding: 1rem; } .donate-container section h3 { border-bottom: 1px solid #EEE; padding-bottom: 1rem; margin-bottom: 1rem; } .donate-container section a.button { display: block; } .contact-container { display: grid; gap: 1rem; margin: 0 auto; margin-top: 1rem; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 720px) { .contact-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .contact-container { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .contact-container a, .contact-container a:visited { display: block; padding: 1rem; text-align: center; color: #FFF; color: #000; border: 1px solid #EEE; border-bottom: 1px solid #DDD; } .contact-container a:hover, .contact-container a:visited:hover { background: #FDFDFD; border-color: #DDD; } /*# sourceMappingURL=main.css.map */