*{box-sizing: border-box}
:where(*){margin: 0}
main :where(img,video,iframe){
    display: block;
    width: 100%;
    max-width: 100%}

iframe{border:none}

[hidden],[type="hidden"],.gform_hidden,.gfield_visibility_hidden,.hidden,html[lang="es"] .social-bar{display: none}

html,body{
    height: 100%;
    margin: 0}

body{
    font-family:roboto,system-ui;
    font-size: 100%;
    line-height: 1.4;
    text-rendering: optimizeSpeed;
    background-color:#fdfcfb;
    --hue:216;
    --saturation:100%;
    --lightness:50%;
    --primary:hsla(var(--hue),var(--saturation),var(--lightness),1);
    --primary-light:hsla(var(--hue),var(--saturation),calc(var(--lightness)*1.2),1);
    --primary-dark:hsla(var(--hue),var(--saturation),calc(var(--lightness)*.8),1);
    --shadow:hsla(var(--hue),var(--saturation),calc(var(--lightness)*.2),.15);
    --shadow-light:hsla(var(--hue),var(--saturation),calc(var(--lightness)*.2),.03)
}

body.campaign-operation-christmas-child{
    --hue:127;
    --lightness:27%
}

.trp-language-wrap,#gblCart,#header,.sub-nav,.footer-widgets{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
.footer-widgets{z-index: 999}
@media(max-width:767px){.footer-widgets{padding-bottom: 2.618em}}
:where(.sub-nav:not(:has(nav))){display: none}

.sub-nav{
    position: relative;
    z-index: 9999;
}

.sub-footer-a,.sub-footer-b{box-sizing: border-box!important}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important}
}

a,h1,h2,h3,h4,h5,h6{overflow-wrap: break-word}

/*HELPERS*/
:root{
    --lang-picker:40px;
    --nav-bar:72px;
    --sub-nav:60px;
/*LANG PICKER AND MAIN NAV*/
    --nav-2:calc(var(--lang-picker) + var(--nav-bar));
/*LANG PICKER, MAIN NAV, SUB NAV*/
    --nav-3:calc(var(--lang-picker) + var(--nav-bar) + var(--sub-nav));
    --page-nav:2.618em;
     --base-unit:clamp(1rem, 0.48vw + 0.9rem, 1.63rem);
/*BASED ON THE W/H RATIO OF "0" IN ROBOTO*/
    --ch-unit:calc(var(--base-unit)*.56125);
    --small:calc(var(--base-unit)*.75);
    --h3:calc(var(--base-unit)*1.21);
    --h2:calc(var(--h3)*1.34);
    --h1:calc(var(--h2)*1.55);
    --h0:calc(var(--h1)*1.89)} 

@media(max-width:767px){:root{--sub-nav:42px;--nav-bar:50px}}

/*use .visually-hidden only*/
.visually-hidden,.screen-reader-text{
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px}

.pseudo{position: relative}
.pseudo::before,.pseudo::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block}

:where(.space-small>*+*){margin-top: 1em}
:where(.space>*+*){margin-top: 1.618em}
:where(.space-large>*+*){margin-top: 2.618em}

/*hide scrollbar*/
.touch .scroll-x,.hide-scrollbar{
    scrollbar-width:0;
    scrollbar-color:rgba(0,0,0,0) rgba(0,0,0,0)}

:is(.touch .scroll-x,.hide-scrollbar)::-webkit-scrollbar{
    width:0;
    height:0}

:is(.touch .scroll-x,.hide-scrollbar) :is(::-webkit-scrollbar-track,::-webkit-scrollbar-thumb){background:rgba(0,0,0,0)}

/*BASIC LAYOUT*/
main{position: relative}

main>*>*{margin-inline: max(1em,((100% - 100ch) / 2))}
main>*>*.center-all{margin-inline: max(1em,((100% - 62ch) / 2))}
.center-descendants>*,
.center{margin-inline: auto}
main>*>*>*:where(:not(a,aside,button,div,figcaption,h1,.h1,h2,.h2,header,header img,header video,hgroup,hgroup p,small,.small)),
.width-62ch{width: min(100%, var(--ch-unit,.56125em)*62)}

main>*>*>*:where(:not(a,aside,button,div,figcaption,h1,.h1,h2,.h2,header,header img,header video,hgroup,hgroup p,small,.small)).center,
.width-62ch.center{margin-inline:auto}

.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32ch, 1fr));
    gap:1ch}

.grid:is(.center-all,.width-62ch){
    grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
}

#photos .grid{grid-template-columns: repeat(auto-fit, minmax(min(40%,32ch), 1fr))}
.grid.half,.grid.two{gap:1.618em}
.grid.four{grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));}

/*BASIC TYPOGRAPHY*/
main{
    font-size: var(--base-unit, 1em);
    line-height: 1.618;
    hanging-punctuation: first force-end last;
    color: #000;
    accent-color:var(--primary);
}

.h0,h1,.h1,h2,.h2,hgroup p strong{font-weight: 900}
.h0,h1,.h1,h2,.h2{line-height: 1.1}
.h0{font-size: var(--h0,3.067em)}

h1,.h1{
    font-size: var(--h1,1.978em);
    text-wrap:balance;
}

h2,.h2{font-size: var(--h2,1.476em)}

blockquote,figcaption,h3,.h3,h4,.h4,h5,.h5,h6,.h6,hgroup p,small,.small{line-height: 1.382}
h3,.h3,hgroup p,blockquote p{font-size: var(--h3,1.22em)}
h4,.h4,h5,.h5,h6,.h6{font-size: calc(var(--base-unit))}

:where(:not(header))>blockquote{
    margin: 2.618em 0;
    padding-left:1em;
    border-left:.618em solid rgba(0,0,0,.15)}

header>blockquote{
    margin-bottom: 1.618em;
    border-bottom: 1px solid rgba(0,0,0,.2);
    padding-bottom: 1em}

blockquote footer{text-align: end}
blockquote small{display: block}
address,cite{font-style: normal}
cite,figcaption,small,.small{font-size:75%}
sub,sup{font-size: 62%;line-height:0}
q{font-style: italic}
h3+p{margin-top: 0}

figcaption{
    color: rgba(0,0,0,.8);
    padding: 1ch}

main :where(ol,ul){padding-left:1em}

main :where([role="list"],form ul){
    list-style: none;
    padding-left:0}

dt{font-weight:700}

:where(main a){
    color: #06f;
    text-decoration: underline;
    font-weight: 700}

main :is(a,button,[type="button"],summary,.diSlimBtn){cursor: pointer}

main a[class]{
    text-decoration: none;
    display: block}

@media(hover:hover){
    main :is(a,button,[type="button"],.diSlimBtn){transition:all .5s ease}
    main :is(a,button,.diSlimBtn,input[type="button"],input[type="reset"],input[type="submit"]):hover{filter:brightness(1.2)}
}

/*ELEMENTS*/
/*Buttons*/
main :where(button,.button,input[type="button"],input[type="reset"],input[type="submit"],input[type="file"]::-webkit-file-upload-button,input[type="file"]::file-selector-button){
    display: block;
    width: min(100%,38ch);
    margin-inline: auto;
    border: 2px solid var(--primary);
    padding-inline: 1ch;
    background: rgba(0,0,0,0);
    text-align: center;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    color: var(--primary);
    line-height: calc(2.618em - 4px);
    border-radius:.618em}

main :where(.primary.button,button.primary,input[type="button"],input[type="reset"],input[type="submit"]){
    border: none;
    line-height: 2.618;
    color: #fff;
    background:linear-gradient(to bottom, var(--primary-light) 0%,var(--primary-dark) 100%);
    box-shadow:0 0 1.618em var(--shadow),0 .09em .146em var(--shadow),.09em .146em .236em var(--shadow),.146em .236em .382em var(--shadow),.236em .382em .618em var(--shadow),.382em .618em 1em var(--shadow);
}

/*Center Buttons Under Elements with 62ch max-width*/
/*main>*:not(header)>*>*+.button*/
main>*>*>*:where(:not(a,aside,button,div,figcaption,h1,.h1,h2,.h2,header,header img,header video,hgroup,hgroup p,small,.small))+.button{margin-inline:min((100% - 38ch)/2,12ch)}

hr{
    border: none;
    height: 1px;
    background:rgba(0,0,0,.3)}

/*Force Golden Ratio on <img> outside main>header*/
figure img,.photo-gallery img{object-fit: cover}

/*Details and Summary*/
details summary{
    padding-block: .618em;
    width: 100%;
    line-height: 1.382;
    font-weight: 500;
    transition:all .5s ease}

details[open] summary{
    font-weight:700;
    border-bottom: 1px solid #888}

details[open] summary+*{margin-block: 1em}

[data-accordion] details{
    border: 1px solid #888;
    padding: 0 1em;
    transition: all .3s ease
}

[data-accordion] details[open]{background-color: #fff}
[data-accordion] details:nth-of-type(even){background-color: rgba(0,0,0,.03)}

[data-accordion] details+details{
    margin-top: 0;
    border-top: none;
    border-bottom-style: dotted;
    border-radius: 0}

[data-accordion] details:first-of-type{
    border-bottom-style: dotted;
    border-top-left-radius: .618em;
    border-top-right-radius: .618em;
}

[data-accordion] details:last-of-type{
    border-bottom-style: solid;
    border-bottom-left-radius: .618em;
    border-bottom-right-radius: .618em}

@media(hover:hover){
    details summary:hover{background: linear-gradient(to right,rgba(255,255,255,0)0%,rgba(255,255,255,1)5ch,rgba(255,255,255,0)100%)}
}

/*FUNCTIONALITY*/
/*Horizontal Scroll*/
.scroll-x{
    display: flex;
    align-items: flex-start;
    gap:1ch;
    margin:unset;
    padding:1ch max(1em,((100% - (var(--ch-unit)*100)) / 2));
    overflow-x: auto}

.scroll-x:not( :has(img)){gap:1em}

/*Scroll Snap*/
.scroll-x.scroll-snap{
    padding-block: 1em;
    align-items: flex-start}

.scroll-x.scroll-snap>*{flex: 0 0 32.66ch}

@media(prefers-reduced-motion:no-preference){
    .scroll-snap{scroll-snap-type: x mandatory}
    .scroll-snap>*{scroll-snap-align: center}
}

/*MODULES*/

/*Headers*/
main>header{width: 100%}
header,.banner{display: flex}
:not(header).banner{position: relative}
main>header hgroup{
    margin-inline:0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center}

main>header>figure{margin-inline:0}
main>header>figure>img{height: 100%}

main>header.no-img{
    padding: 2.618em 1em 4.236em;
    flex-direction: column;
    align-items: center}

:where(main:not(:has(>nav))>header.no-img~:nth-child(even),
main:has(>nav)>header.no-img~:nth-child(odd)){
    background-color: rgba(0,0,0,0)!important;
    border-block: none!important;
}

main>header.no-img figure{display: none}

/*OCC LOGO*/
.occ-logo{
    width: auto;
    height:4.236em;
    margin-bottom:1ch}

.occ-logo+*{margin-top: 0}

/*Full Width Header*/
.banner{
    width: 100%;
    margin-inline: 0;
    padding: 1em 0 calc(2.618em + env(safe-area-inset-bottom));
    padding: 1em 0 calc(8dvh + env(safe-area-inset-bottom));
    background: #000;
    justify-content: center;
    align-items: center}

div.banner{
    position: relative;
    width: 100%;
    height: min(62vmin,62vh);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat}

header.banner{width: 100%}

/*100VH - LANGUAGE PICKER, MAIN NAV AND SUB NAV*/
#header+.sub-nav:has(nav)+#inner main>#eop+header.banner,
#header+.sub-nav:has(nav)+#inner main>#eop+header.banner figure{
    height: min(calc(100vh - var(--nav-3)),162vw);
    height: min(calc(100svh - var(--nav-3)),162vw);
}

/*100VH - LANGUAGE PICKER, MAIN NAV, SUB NAV AND PAGE NAV*/
#header+.sub-nav:has(nav)+#inner main>nav+#eop+header.banner,
#header+.sub-nav:has(nav)+#inner main>nav+#eop+header.banner figure{
    height: min(calc(100vh - var(--nav-3) - var(--page-nav)),162vw);
    height: min(calc(100svh - var(--nav-3) - var(--page-nav)),162vw);
}

.banner figure{
    position: absolute;
    width: 100%;}

main>nav+#eop+.banner figure{top: var(--page-nav)}
.above-the-top .banner .action-container .donationItem,.above-the-top .banner .action-container .giving-component{
    width: 100%;
    color: initial}

.banner h1{
    color:#fff;
    text-align: center;
    z-index: 99;
    text-shadow:0 0 1ch rgba(0,0,0,.2),0 .146ch .236ch rgba(0,0,0,.2),.146ch .236ch .382ch rgba(0,0,0,.2),.236ch .382ch .618ch rgba(0,0,0,.2)}

.banner p{color: #fff}

body:not(.above-the-top) .banner .button:not(.primary){
    color: #fff;
    border-color:#fff;
    background-color: rgba(0,0,0,.15);
    -webkit-backdrop-filter:blur(13px)brightness(1);
    backdrop-filter:blur(13px)brightness(1)}

/*Split Header*/
.response{
    flex-wrap: wrap;
    padding: 0;
    background:linear-gradient(to bottom,rgba(0,0,0,.015)calc(100% - 1px),rgba(0,0,0,.1)calc(100% - 1px))
}

.response>*{
    flex:1 1 32rem;
}

.response figure:not(:has(iframe)){
    height: max(30.9vw,auto);
}

.response hgroup{
    align-self: center;
    padding:1em;
    order: 2}

/*Action Container*/
:where(main>:last-child){padding-bottom:6.854em}

.action-container{
    width:min(100%,50ch);
    min-height: 2.618em;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap:1em}

.action-container>div{
    width: 100%;
    display: flex;
    justify-content: center;
    gap:1em}

.action-container .donationItem,.action-container .giving-component{margin: 0 auto}
.action-container div+.button{width: 38%}
#above-the-top{margin: 0}

/*IO*/
@keyframes donation-appear{to{opacity:1;transform: translateY(0)}}

.above-the-top .action-container>div{
    padding:1em 1em calc(1em + env(safe-area-inset-bottom));
    border-top:1px solid rgba(0,0,0,.1);
    width: 100%;
    height: auto;
    opacity: 0;
    transform: translateY(5rem);
    animation: donation-appear .5s .3s ease forwards;
    font-size: .75em;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    background: rgba(255,255,255,1)}

.above-the-top #eop.trigger.visible~header .action-container>div{position: absolute}

.trigger{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 1px}

@media(min-width:64em){
    .above-the-top .action-container>div{
        width:calc(var(--ch-unit)*32.66);
        border:1px solid rgba(0,0,0,.1);
        border-bottom: none;
        right: max(var(--base-unit),((100vw - (var(--ch-unit)*100)) / 2));
        border-top-left-radius:calc(var(--base-unit)*.618);
        border-top-right-radius:calc(var(--base-unit)*.618);
        box-shadow:0 0 1ch var(--shadow-light),0 0 .236ch var(--shadow-light),0 0 .382ch var(--shadow-light),.236ch .382ch .618ch var(--shadow-light)}
}

/*Donation Items*/
main>*>*>*:not(header,hgroup,h1,.h1,h2,.h2,h3,.h3,hgroup p,figcaption,small)+:is(.giving-component,.donationItem){margin-inline:min((100% - (var(--ch-unit)*38))/2,(var(--ch-unit)*12))}

.giving-component{
    position: relative;
    display: flex;
    flex-direction: column;
    gap:1ch}

:not(.action-container) .donationItem,:not(.action-container) .giving-component{width: min(100%, var(--ch-unit)*38)}

.diCartField,.diSlimWrap,.increment-container{
    display: flex;
    justify-content: flex-end;
    /*flex-wrap: wrap;*/
    position: relative}

.giving-component>label,
.diCartField label,.diSlimTitleWrap{
    transition: all .5s;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    display: flex;
    justify-content: flex-end;
    gap:.618em;
    flex-basis: 62%;
    font-size: .618em;
    white-space: nowrap;
    padding:0 .382em}

.donationItem:focus-within .diSlimTitleWrap,.giving-component:focus-within .diCartField label,.giving-component:focus-within>label{top: -1.618em}
body:not(.above-the-top) .banner .diSlimTitleWrap,body:not(.above-the-top) .banner .field-container label,body:not(.above-the-top) .banner .radio-container{color: #fff}
.diCartField .fa-usd2,.diCartField button,.diSlimAmt,.diSlimBtn{flex-basis: 50%}

.diCartField .fa-usd2,.diSlimAmt{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 2px solid #06ac42;
    border-right: none;
    border-radius: .618em 0 0 .618em;
    color: inherit;
    padding-left:.382em;
}

.diCartField .fa-usd2 input,.diInput input{
    border: none!important;
    border-radius: 0;
    padding-inline:1ch;
    width: 100%;
    height: calc(2.618em - 4px)!important;
    font-family: inherit;
    font-size: inherit;
    color: #000;
    text-align: right;
    }

.giving-component button.cart-button,.diSlimBtn,.green-button{
    text-align: center;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    height: 2.618em!important;
    border: none;
    border-radius: 0 .618em .618em 0;
    background:linear-gradient(to bottom, #06ac42 0%,#084 100%);
    box-shadow:0 0 1.618em rgba(0,0,0,.11),0 .09em .146em rgba(0,0,0,.11),.09em .146em .236em rgba(0,0,0,.11),.146em .236em .382em rgba(0,0,0,.11),.236em .382em .618em rgba(0,0,0,.11),.382em .618em 1em rgba(0,0,0,.11);
}

.diSlimBtn{line-height: 2.618;}

.giving-component button.cart-button{line-height:normal}

.giving-component :is(button,.diSlimBtn):hover{color: #fff!important}

.donation-frequency{
    padding: 0 .382em;
    height: 1em;
    display: flex;
    justify-content: center;
    font-size: calc(var(--base-unit)*.75);
    gap:1.618em}

.radio-container,.radio-container2{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: .382em;
}

:is(.radio-container,.radio-container2) input{
    display: block;
    width: 1.618em;
    height: 1.618em
}

.checkmark{display: none}

/*Page Navigation*/
main nav{
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
    height: var(--page-nav);
    background-color: #fff;
    border-bottom: 1px solid #ddd}

main nav ul.scroll-x{white-space: nowrap}

main nav a{
    font-weight: 500;
    color: inherit;
    text-decoration: none}

/*Page Summary*/
.page-summary{
    margin-block: 2.618em;
    border-block: 1px dotted #888;
    padding-block: 1.618em;
    line-height: 1.382}

.page-summary.card article{padding: 1em}

/*3 item maximum*/
.page-summary li:nth-child(n+4){display: none}

/*Sticky Sidebar*/
.sticky-sidebar{
    width: 32.66ch;
    margin-inline:min((100% - 32.66ch)/2,14ch)}

.sticky-sidebar h3{text-align: center}
@media(min-width:64em){
    #has-sticky-sidebar,
    .has-sticky-sidebar{
        /*Fallback variable if JS blocked or unavailable*/
        --ss-height:calc(2.236em + 2.618em + (var(--h3) * 1.382));
        position: relative}

    .sticky-sidebar{
        margin: 0;
        width:min((100vw - 2em) - (62ch + 3vw), 32.66ch);
        height: 100%;
        position: absolute;
        top: 0;
        right: 0}

    .sticky-sidebar .card{
        text-align: center;
        position: sticky;
        top: calc((100vh - var(--sticky-sidebar-height,var(--ss-height,11em)))/2)}
}

/*Cards*/
.card{
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,.21);
    border-radius: .618em;
    background-color: #fff}

.feature.card,.card:has(a){
    border-color:rgba(0,0,0,.13);
    transition: all .3s ease;
    box-shadow:0 0 1ch var(--shadow-light),0 .146ch .236ch var(--shadow-light),.146ch .236ch .382ch var(--shadow-light),.236ch .382ch .618ch var(--shadow-light)}

.card article{
    padding:.618em;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;/*FIXES A WEBKIT BUG*/
}

.card figure{
    margin: 0;
    border-radius: .618em .618em 0 0;
    overflow: clip}

.card h3 a{
    color: inherit;
    text-decoration: none}

.card:has(h3 a){cursor: pointer}
.card footer{margin-top: auto}
.card .button{margin: 1em auto 0}

.card footer a:not([class]){
    display: block;
    text-align: right;
    font-size: var(--small);
    text-decoration: underline}

@media(hover:hover){
    .card:has(img) img{transition: all .3s ease}
    .card:has(img,h3 a):hover :is(a,img){filter: brightness(1.2)} 
}

.card:has(a):focus-within,.card:has(a):hover{border-color: var(--primary)}

/*Dialog*/
html:has(dialog[open]){overflow: clip}

:is(html,body):has(dialog iframe, dialog .ginput_recaptcha),
dialog:has(iframe,.ginput_recaptcha){
    pointer-events: auto!important
}

dialog{
    margin: auto!important;
    border: none;
    border-radius: .618em;
    padding: 0;
    /*width: min(100%, var(--ch-unit,.56125em)*62);*/
    /*background-color: #fdfcfb;*/
}

/*
dialog header{
    position: sticky;
    top: 0;
    z-index: 8;
    justify-content: space-between;
    gap:1em;
    margin: 0;
    border-bottom: 1px solid #ddd;
    padding: 1em;
    background-color: #fff;
}

dialog article{
    margin: 0;
    padding: 1em;
}
*/

dialog button{
    margin: 0 0 calc(var(--h1)*-1) auto;
    border: none;
    border-radius: 0;
    padding: 0;
    height: auto;
    font-family: monospace;
    font-size: var(--h2);
    line-height: 1;
    text-align: center;
    color: #000;
    width:var(--h1);
    height: var(--h1);
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 9
}

dialog::backdrop{
    background-color: rgba(0,0,0,.62);
    background-color:hsla(var(--hue),var(--saturation),calc(var(--lightness)*.08),.55);
    -webkit-backdrop-filter:saturate(.62)blur(13px);
    backdrop-filter:saturate(.62)blur(13px)
}