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

[hidden]{display: none}
html,body{
    height: 100%;
    margin: 0}

html{
    -webkit-text-size-adjust:none;
    text-size-adjust:none}

@media(prefers-reduced-motion:no-preference){html{scroll-behavior: smooth}}

body{
    font-family:roboto,system-ui;
    font-size: 100%;
    line-height: 1.4;
    background-color:#fdfcfb}

.trp-language-wrap,#gblCart,#header,.sub-nav,.footer-widgets{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
.footer-widgets{z-index: 999}
.sub-nav:not(#operation-christmas-child){display: none}

/*OCC SUBFOOTER*/
.sub-footer-a,.sub-footer-b{box-sizing: border-box!important}

/*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
} 

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

.visually-hidden {
    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)}

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

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

/*BASIC LAYOUT*/
main{position: relative}
main>header~*{
    scroll-margin:2.618em;
    padding: 2.618em 0 4.236em}

main>*>*{
    margin-right: max(1em,((100% - 100ch) / 2));
    margin-left: max(1em,((100% - 100ch) / 2))}

main>*>*>*:not(a,aside,button,div,figcaption,h1,.h1,h2,.h2,header,header img,header video,hgroup,hgroup p,small,.small){width: min(100%, var(--ch-unit)*62)}

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

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

/*BASIC TYPOGRAPHY*/
:root{
    --base-unit:1em;
    /*BASED ON THE W/H RATIO OF "0" IN ROBOTO*/
    --ch-unit:calc(var(--base-unit)*.56125);
    --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)}

@supports(font-size:clamp(1rem, 0.38vw + .93rem, 1.382rem)){:root{--base-unit:clamp(1rem, 0.48vw + 0.9rem, 1.63rem)}}

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

.campaign-operation-christmas-child main{accent-color:#084}
.h0,h1,.h1,h2,.h2,hgroup p strong{font-weight: 900}
.h0{font-size: var(--h0,3.067em)}

h1,.h1{
    font-size: var(--h1,1.978em);
    line-height: 1.146}

h2,.h2{
    font-size: var(--h2,1.476em);
    line-height: 1.236}

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))}

: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%}
.h0,sub,sup{line-height:1}
sup{vertical-align:top}
sub{vertical-align: baseline}
q{font-style: italic}
h3+p{margin-top: 0}

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

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

main [role="list"]{list-style: none}
:where(main [role="list"]){padding-left:0}
dt{font-weight:700}

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

a,button{cursor: pointer}
main a[class]{text-decoration: none}
main :not(cite,dd,.h0,h1,.h1,h2,.h2,
h3,.h3,h4,.h4,h5,.h5,h6,.h6,p,small,.small,span)>a{display: block}

@media(hover:hover){
    main a,main button,.diSlimBtn{transition:all .5s ease}
    main a:hover,main button:hover,.diSlimBtn:hover{filter:brightness(1.2)}
}

/*ELEMENTS*/
/*Buttons*/
main button,.button{
    width: min(100%,38ch);
    border: none;
    margin-right:auto;
    margin-left: auto;
    padding: 0;
    text-align: center;
    font-family: inherit;;
    font-size: inherit;
    line-height: 2.618;
    font-weight: 400;
    border-radius:.618em}

.primary.button{
    color: #fff;
    background:linear-gradient(to bottom, #07f 0%,#05e 100%);
    box-shadow:0 0 1.618em rgba(0,153,255,.13),0 .09em .146em rgba(0,0,102,.17),.09em .146em .236em rgba(0,0,102,.17),.146em .236em .382em rgba(0,0,102,.17),.236em .382em .618em rgba(0,0,102,.17),.382em .618em 1em rgba(0,0,102,.17)}

/*OCC PRIMARY BUTTON*/
.campaign-operation-christmas-child .primary.button{
    background:linear-gradient(to bottom,#0a6 0%,#063 100%);
    box-shadow:0 0 1.618em rgba(0,60,0,.13),0 .09em .146em rgba(0,20,0,.2),.09em .146em .236em rgba(0,30,0,.18),.146em .236em .382em rgba(0,40,0,.16),.236em .382em .618em rgba(0,50,0,.14),.382em .618em 1em rgba(0,50,0,.12)}

.secondary.button{
    line-height: calc(2.618em - 4px);
    border: 2px solid #06f}

/*OCC SECONDARY BUTTON*/
.campaign-operation-christmas-child .secondary.button{
    color:#084;
    border-color: #084}

/*Center Buttons Under Elements with 62ch max-width*/
main>*>*>*:not(header,hgroup,h1,.h1,h2,.h2,h3,.h3,hgroup p,figcaption,small)+.button{
    margin-right:min((100% - 38ch)/2,12ch);
    margin-left:min((100% - 38ch)/2,12ch)}

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

/*Force Golden Ratio on Images*/
figure{
    margin-right: 0;
    margin-left: 0}

figure img,.photo-gallery img{
    object-fit: cover;
    aspect-ratio:1.618/1}

/*Brightcove Video Embed*/
.video-container iframe{
    aspect-ratio:16/9;
    border: none}

@supports not (aspect-ratio:16/9){
    .video-container{position: relative}
    .video-container div{padding-top: 56.25%}

    .video-container iframe{
        position: absolute; 
        top: 0px;
        left: 0px; 
        width: 100%; 
        height: 100%}
}

/*Details and Summary*/
details{
    border: 1px solid rgba(0,0,0,.55);
    padding: 0 1em;
    transition: all .3s ease}

details[open]{background: #fff}

details summary{
    cursor: pointer;
    width: 100%;
    line-height: 2.618;
    transition:all .5s ease}

details[open] summary{
    font-weight:700;
    border-bottom: 1px solid rgba(0,0,0,.5)}

details[open] summary+*{
    margin-top: 1em;
    margin-bottom: 1em}

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

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

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

details+details:nth-child(odd) summary{
    background: linear-gradient(to right,rgba(0,0,0,0)0%,rgba(0,0,0,.03)5ch,rgba(0,0,0,0)100%)}

@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;
    margin:unset;
    padding:1ch max(1em,((100% - (var(--ch-unit)*100)) / 2));
    overflow-x: auto}

.scroll-x>*+*{margin-left: 1ch}

/*Scroll Snap*/
.scroll-x.scroll-snap{
    padding-top: 1em;
    padding-bottom: 1em;
    align-items: flex-start}
.scroll-x.scroll-snap>*{flex: 0 0 32.66ch}

@media(prefers-reduced-motion:no-preference){
    @supports (scroll-snap-align: center){
        .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{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center}

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

/*OCC LOGO*/
.campaign-operation-christmas-child .occ-logo{
    width: auto;
    height: 4.236em;
    margin-bottom:.618em;
}

@media(min-width:100ch){
    .campaign-operation-christmas-child main>header.no-img{
        margin-top: -4.427em;
        position: relative;
        padding-bottom: 2.618em
    }
    
    .campaign-operation-christmas-child .occ-logo{
        height: 6.854em;
        margin-bottom:.382em;
    }
}

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

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

header.banner,header.banner figure,header.banner figure>img{
    width: 100%;
    height: min(calc(100vh - var(--nav-2)),162vw);
    height: min(calc(100dvh - var(--nav-2)),162vw);
}

main>nav+#eop+header.banner,main>nav+#eop+header.banner figure,main>nav+#eop+header.banner figure>img{
    height: min(calc(100vh - var(--nav-2) - var(--page-nav)),162vw);
    height: min(calc(100dvh - var(--nav-2) - var(--page-nav)),162vw);
}

.banner figure{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.3)0,rgba(0,0,0,1)calc((var(--h1,1.978em) * 1.146) * 2 + 9.472em));
    mask-image:linear-gradient(to top,rgba(0,0,0,.4)0%,rgba(0,0,0,1)calc((var(--h1,1.978em) * 1.146) * 2 + 9.472em))}

main>nav+#eop+.banner figure{top: var(--page-nav)}
.banner hgroup,.banner>div{z-index: 2}
.above-the-top .banner .donationItem{color: initial}

.banner h1{
    color:#fff;
    text-align: center;
    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)}

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

/*Split Header*/
.response{
    flex-wrap: wrap;
    align-items: center;
    padding: 0}

.response .video-container>div{width: auto}

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

.response hgroup{
    padding:1em;
    order: 2}

.response figure+*{
    padding:1.618em 1em;
    text-align: center}

/*Action Container*/
@media(max-width:68em){main>:last-child{padding-bottom:6.854em}}

.action-container{
    width:min(100%,50ch);
    min-height: 3.618em;
    margin-right: auto;
    margin-left: auto}

.action-container>div{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap:.618em}

.action-container .button{
    margin: 0;
    width: min(38%,19ch)}

    .donation-container,
.donationItem{width: min(100%,38ch)}
.action-container:has(.button) .donationItem{width: min(62%,31ch)}
#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%;
    opacity: 0;
    transform: translateY(5rem);
    animation: donation-appear .5s .3s ease forwards;
    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:100ch){
    .above-the-top .action-container>div{
        width:min((100vw - 2em) - (62ch + 3vw), 32.66ch);
        border:1px solid rgba(0,0,0,.1);
        border-bottom: none;
        bottom: 0;
        right: max(1em,((100vw - 100ch) / 2));
        border-top-left-radius: .618em;
        border-top-right-radius: .618em;
        box-shadow:0 0 1ch rgba(0,0,0,.03),0 0 .236ch rgba(0,0,0,.03),0 0 .382ch rgba(0,0,0,.03),.236ch .382ch .618ch rgba(0,0,0,.03)}
}*/
@media(min-width:64em){
    .above-the-top .action-container>div{
        width:min((100vw - 2em) - (62ch + 3vw), 32.66ch);
        border:1px solid rgba(0,0,0,.1);
        border-bottom: none;
        bottom: 0;
        right: max(1em,((100vw - 100ch) / 2));
        border-top-left-radius: .618em;
        border-top-right-radius: .618em;
        box-shadow:0 0 1ch rgba(0,0,0,.03),0 0 .236ch rgba(0,0,0,.03),0 0 .382ch rgba(0,0,0,.03),.236ch .382ch .618ch rgba(0,0,0,.03)}
}


/*Donation Item*/
main>*>*>*:not(header,hgroup,h1,.h1,h2,.h2,h3,.h3,hgroup p,figcaption,small)+.donation-container,
main>*>*>*:not(header,hgroup,h1,.h1,h2,.h2,h3,.h3,hgroup p,figcaption,small)+.donationItem{
    margin-right:min((100% - 38ch)/2,12ch);
    margin-left:min((100% - 38ch)/2,12ch);}

.diCartField,
.diSlimWrap{
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    position: relative;
    padding-top: 1em}

.diCartField label,
.diSlimTitleWrap{
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    gap:.618em;
    flex-basis: 62%;
    font-size: .618em;
    white-space: nowrap;
    padding:0 .382em}

body:not(.above-the-top) .banner .diSlimTitleWrap{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-right:.236em;
    padding-left:.382em}

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

    .donation-container button,
.diSlimBtn{
    line-height: 2.618;
    text-align: center;
    color: #fff;
    border-radius: 0 .618em .618em 0;
    box-shadow:0 0 1.618rem rgba(0,136,68,.2),0 .09rem .146rem rgba(0,34,0,.3),.09rem .146rem .236rem rgba(0,34,0,.2),.146rem .236rem .382rem rgba(0,68,14,.14),.236rem .382rem .618rem rgba(0,68,14,.13),.382rem .618rem 1rem rgba(0,68,14,.1);
    background:linear-gradient(to bottom, #06ac42 0%,#084 100%)}

.donation-frequency{
    padding: 0 .382em;
    display: flex;
    justify-content: center;
    gap:1em;
}

/*main>nav~header.no-img~:nth-child(even),*/
main>header.no-img~:nth-child(odd),main>header.response~:nth-child(odd),main>header.banner~:nth-child(even){
    background-color: rgba(0,0,0,.015);
    border-top: 1px solid rgba(0,0,0,.1);
    border-bottom: 1px solid rgba(0,0,0,.1)}

/*Page Navigation*/
main>nav~header.response~:nth-child(odd){
    background-color:unset;
    border: none}

main>nav~header.response~:nth-child(even){
    background-color: rgba(0,0,0,.015);
    border-top: 1px solid rgba(0,0,0,.1);
    border-bottom: 1px solid rgba(0,0,0,.1)}

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{white-space: nowrap}
main nav ul.scroll-x>*+*{margin-left: 1em}

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

/*Page Summary*/
.page-summary{
    margin: 2.618em 0;
    padding-top: 1.618em;
    padding-bottom: 1.618em;
    border-top: 1px dotted rgba(0,0,0,.8);
    border-bottom: 1px dotted rgba(0,0,0,.8);
    line-height: 1.382}

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

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

.sticky-sidebar h3{text-align: center}
@media(min-width:64em){
    #has-sticky-sidebar{
        --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(--ss-height))/2)}
}

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

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

.card article{
    padding:.618em;
    display: flex;
    flex-direction: column;
    height: 100%}

.card figure{margin: 0}
.card img{border-radius: .618em .618em 0 0}
.grid .card figure+article{height: calc(100% - 19.766ch)}

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

.card h3:has(a)+p{
    line-height: 1.382;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden}

.card footer{margin-top: auto}
.card .button{margin: 1em auto 0}

@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: #06f}