.sub-nav{display: none}
#operation-christmas-child.sub-nav{display: block}
#site-wrapper .sub-nav .wrap .ubermenu-cat_nav {margin-top: 0!important}

*{box-sizing:border-box;padding:0;margin:0}
html{font-size:16px;line-height:26px}

body{
    background-color: #fdfcfb;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont,'Segoe UI', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
    color: #222!important;
    font-size: 1rem;
    line-height: 1.625;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "kern" 1;
            font-feature-settings: "kern" 1;
    font-variant-ligatures: common-ligatures}

h1,.h1{
    font-size: 1.375rem;
    line-height: 1}
        
h2,.h2{font-size: 1.625rem}
        
h3,.h3{
    font-size: 1.375rem;
    font-weight: 500}
        
h4,.h4,h5,.h5{font-size: 1rem} 
h6,.h6{font-size: .8125rem}
h1,.h1,h2,.h2,h4,.h4,h5,.h5,h6,.h6{font-weight: 700}
h2,.h2,h3,.h3,h4,.h4,small{line-height: 1.375}
h5,.h5,h6,.h6{line-height: 1.625}

small,
figcaption{font-size: .8125rem}

small{
    display: block;
    max-width: 29rem}
     
p{
    max-width: 29rem!important;
    margin-top: 0rem;
    margin-bottom: 1.625rem;
    font-size: 1rem!important;
    hanging-punctuation: first force-end last}

main a{
    color: #06c;
    font-weight: bold;
    text-decoration: underline!important}

main li{list-style: circle}

main li+li{margin-top: 1.625rem!important}

dt{font-weight: 700}

summary{
    font-size: 1.375rem;
    font-weight: 500;
    cursor: pointer}

section{
    position: relative;
    padding: 2.625rem 1.625rem}

section.slideshow{padding: 2.625rem 1.375rem}

.section-anchor{
    position: absolute;
    margin-top: -2.625rem}

section>*{
    max-width: 47rem;
    margin:0 auto!important}

section:nth-of-type(even){
    background-color:#f7fafd;
    border-top: 1px solid #cce0f5;
    border-bottom: 1px solid #cce0f5}

section>header{padding-bottom:1.625rem!important}

/*BUTTONS*/
.button{
    display: block;
    width: 100%;
    max-width: 18rem;
    height: 2.625rem;
    margin: 0 auto;
    border-radius: .375rem;
    text-align: center;
    font-weight: 700;
    text-decoration: none!important}

.primary.button{
    line-height: 2.625;
    background-color: #06c;
    color: #fff;
    box-shadow: 0 0 .1rem rgba(0,0,30,.12),0 .1rem .2rem rgba(0,0,30,.12),0 .2rem .3rem rgba(0,0,30,.12),0 .3rem .5rem rgba(0,0,30,.12),0 .5rem .8rem rgba(0,0,30,.12),0 .8rem 1.3rem rgba(0,0,30,.12)}

.secondary.button{
    border: 2px solid #06c;
    background-color: #fff;
    color: #06c;
    line-height: 2.375}

/*GRID*/
.grid-container{
    max-width: calc(100% + .25rem);
    padding: 0}

.grid-container+.grid-container{margin-top: 2.625rem!important}

.grid{
    display: flex;
    flex-wrap: wrap;
    max-width: calc(100% + .25rem);
    margin: 0!important}
    
.grid > *{
    align-self: flex-start;
    flex: 0 0 calc((100vw - 3.875rem) / 2);
    min-width: 0;
    min-height: 0;
    margin: .25rem!important}

/*CARD*/
.card,
.card>*{
    position: relative;
    transition: all .5s ease}

.card{
    list-style: none!important;
    display: flex;
    flex-direction: column;
    padding: .625rem!important;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: .375rem;
    box-shadow: 0 -.2rem .5rem rgba(0,0,30,.03),0 .05rem .05rem rgba(0,0,30,.03),0 .1rem .1rem rgba(0,0,30,.03),0 .15rem .15rem rgba(0,0,30,.03),0 .2rem .2rem rgba(0,0,30,.03),0 .25rem .25rem rgba(0,0,30,.03)}

.card *{width: 100%}
.card header{padding: 0}
.card header img{width: 100%}
.card article{padding: .8125rem 0}
.card article>*{line-height: 1.375}

.card__heading{
    font-size: .8125rem;
    line-height: 1}

.card__description,
.card footer a{
    font-size: .8125rem!important;
    line-height: 1.375!important}

.card footer>*{width: 100%}

.card .download{
    display: block;
    height: 1rem!important;
    margin-top: auto!important;
    text-align: right!important}

.card details{
    text-align: right;
    font-size: .8125rem;
    line-height: 1}

.card summary{font-size: .8125rem}

.card details ul{margin-left: 0!important}
.card details li{
    line-height: 1.625!important;
    margin-top: 0!important}

/*TEXT ONLY CARDS*/
.card.text-only{
    width: 100%;
    margin-top: 0!important;
    border-color: transparent;
    border-top-color: #cce0f5;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent}

.card.text-only:first-of-type{border-top-color: transparent}

.card.text-only header small{
    font-family: 'roboto mono',monospace;
    font-size: .625rem;
    color: #555}

.card.text-only .card__heading{
    font-size: 1rem;
    line-height: 1.375}

.card.text-only article{
    margin: .25rem 0!important;
    padding: 0}

.card.text-only .card__description{display: none}

/*PHOTO AND VIDEO CARDS*/
.photo.card,.video.card{
    padding: 0!important;
    border: none}

.photo.card article,
.video.card article{padding:.5rem .625rem .625rem}

.photo.card{
    margin: .25rem!important;
    overflow: hidden}

@supports(object-fit:cover){
    .photo.card header{height: 11rem}
    .photo.card header img{
        object-fit:cover;
        height: 100%!important}
    
    .photo.card header.ofcontain{height: 11rem}
    .photo.card header.ofcontain img{object-fit: contain}
}

.photo.card a{height: 100%}
.photo.card img{
    width: 100%;
    border-radius: .375rem;
    transition: transform .5s ease}

.photo.card article{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.35);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-radius: 0 0 .375rem .375rem;
    transition: all .5s ease}

.photo.card .card__heading{color: #fff}

/* VIDEO CARD*/
.video.card header{padding: .625rem .375rem 0}
.video.card video{
    height: 56.25%;
    border-radius: .375rem .375rem 0 0}

.video.card .card__heading{font-size: .8125rem}
.video.card footer{padding: 0 .8125rem .625rem}

/*PRESS KITS*/
details ul{margin-left: 1.625rem!important}

[aria-label="Press Kits"] li{margin-top: 0!important}

[aria-label="Press Kits"] details[open]{margin-bottom: 1.625rem}

/*PRESS RELEASES SECTION*/
[aria-label="Articles and Stories"] div,
[aria-label="Press Releases"] div{margin-top: -1rem!important}

[aria-label="Articles and Stories"] .card.text-only,
[aria-label="Press Releases"] .card.text-only{padding: .625rem 0 !important}

/*BIOS AND FACT SHEET SECTION*/
.fs-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between}

.fs-container ul{
    font-size: .8125rem;
    line-height: 1}

/*GRAPHICS SECTION*/
[aria-label="Graphics"] .card{align-self: auto}
[aria-label="Graphics"] .card header{
height: 11rem}

[aria-label="Graphics"] .card header img{
    height: 11rem;
    object-fit: contain;
    box-shadow: none}

[aria-label="Graphics"] .card footer{margin-top: auto}

.occ-media-resources .card__heading{font-size: .8125rem}

/*PRESS RELEASE PAGE*/
.press-release,
.bfs{
    width: 100%;
    padding: 2.625rem 1.625rem}

.press-release article,
.bfs article{
    max-width: 47rem;
    margin: 0 auto!important}

.press-release article *+*,
.bfs article *+*{margin-top: 1.625em!important}

.press-release h1{
    font-size: 1.625rem;
    line-height: 1.375}

.press-release .subhead{line-height: 1.625rem}

.press-release .card,
.bfs .card{
    max-width: 29rem;
    padding: 1rem!important}

.press-release .card ul,
.bfs .card ul, .circle-list{
    margin-top: 0!important;
    padding-left: 1.125em!important}

.press-release .card li,
.bfs .card li, .circle-list li{
    line-height: 1.625;
    list-style: circle!important}

.press-release dl ul,
.press-release dl li{margin-top: 0!important}

.press-release p:last-of-type,
.bfs:not(.bio) article>p:last-of-type{
    font-size: .8125rem!important;
    max-width: 47rem!important;
    margin-top: 2.625rem!important;
    padding-top: 1rem!important;
    border-top: 1px solid #cce0f5}

.bfs ul li{margin-top: 0!important}

/*BIOS AND FACT SHEETS PAGE*/
.bfs h1{
    font-size: 2.625rem;
    line-height: 1}

.bfs h2 + p,
.bfs h3 + p,
.bfs h4 + p,
.bfs h3 + dl{margin-top: 0!important}

.bfs h3:not(.card h3){margin-top: 2.625rem!important}

.bfs ul{
    margin-top: 0!important;
    max-width: 29rem!important;}

.bfs li{
    margin-left: 1.375rem!important;
    list-style: circle!important}

.bfs p+ul li{
    margin-top: 1rem!important;
    margin-left: 1rem!important;
    font-size: .8125rem}

.bfs .card small{margin: 0 0 1.625rem!important}
.bfs .card ul li{
    margin-top: 0!important;
    margin-left: 0!important}

.bfs dd{
    max-width: 29rem;
    margin-top: 0!important}

.bfs.bio dd,
.bfs.bio dd p{
    margin-top: 0!important;
    font-size: .8125rem!important}

.bfs p:last-of-type:not(.card p:last-of-type){
    margin-top: 2.625rem!important;
    font-size: .8125rem!important}

/*PHOTO PAGE*/
.photo-page #slideshow-title{
    font-size: 1.625rem;
    margin-bottom: 1.625rem!important}

.photo-page small{max-width: 29rem}

.photo-page .grid{
    margin-top: 1rem!important;
    margin-left: -.25rem!important}

.photo-page .grid>*{flex: 0 0 100%}
.photo-page .photo.card{height: 62%}
.photo-page .video.card footer{margin-top: auto}

/*PRESS KIT PAGE*/
[aria-label="About"] header{padding: 0 0 1.625rem!important}
[aria-label="About"] div{padding: 0}

[aria-label="Approved Quotes"] .card.text-only{
    align-self: stretch;
    margin-top: .25rem!important;
    background-color: #fdfcfb;
    border-radius: .375rem;
    border-color: #cce0f5;}

[aria-label="Approved Quotes"] .card.text-only .card__description{display: block}

/*SLIDESHOW*/
@media (max-width:37rem){
    @supports (scroll-snap-align: center){
        section.slideshow{padding: 2.625rem 0!important}
        .slideshow>*:not(.grid-container){padding: 0 1.625rem}
        
        .grid-container{
            display: flex;
            flex-direction: column;
            position: relative;
            overflow-x: scroll;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory}

        .grid-container:focus{outline: 2px solid #2090e9}

        .grid{
            padding-left: calc((100vw - 18.5rem) / 2)!important;
            flex-wrap: nowrap}
        
        .photo-page .grid>*,
        .grid>*{
            flex: 0 0 18rem;
            align-self: flex-start}

        .grid-container .card{
            overflow: visible;
            height: 100%;
            position: relative;
            scroll-snap-align: center;
            scroll-snap-stop: always;
            margin:.5rem!important}

        .grid-container .card:last-child::after{
            content: '';
            display: block;
            width: calc((100vw - 19rem) / 2);
            height: 100%;
            position: absolute;
            top: 0;
            right:calc(((100vw - 19rem) / 2) * -1)}
        
        .grid-container .card img{height: 11rem!important}
        .photo-page .photo.card img{border-radius: .375rem .375rem 0 0}
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {.press-release h1,.bfs h1,.photo-page h1,h2{font-weight: 800}}

@media (min-width:47rem){
    .fs-container{
        max-width: 29rem!important;
        margin: 0 auto 0 0!important}
    
    .fs-container ul{font-size: 1rem}
    
    .grid{justify-content: center}
    .grid>*{flex:0 0 18rem}
    
    @supports(object-fit:cover){
        .grid{justify-content: flex-start}
        .grid>*,
        .photo-page .grid>*{flex:0 0 calc((100vw - 4.25rem) / 3)}
        .photo.card,
        .photo-page .photo.card header{height: calc(((100vw - 4.25rem) / 3) * .618)}
    }
}

@media (min-width:64rem){
    main>*{
        max-width: 76rem;
        margin: auto}
    
    @supports ((position: -webkit-sticky) or (position: sticky)){
        .entry-content{display: flex}
        
        main>*{
            width: calc(100vw - 18rem);
            max-width: calc(100vw - 18rem)}
        
        .grid>*{flex:0 0 calc((100vw - 22.5rem) / 3)}
    
        .photo.card,
        .photo.card header{height: calc(((100vw - 22.5rem) / 3) * .618)}
    }
    
    .section-anchor{
        position: absolute;
        margin-top: 0}

    [aria-label="Articles and Stories"] .card.text-only,
    [aria-label="Press Releases"] .card.text-only,
    .card.text-only{
        width: 100%;
        padding: 1rem!important}
    
    .card.text-only .card__description{
        max-width: 100%!important;
        display:block}
    
    .grid-container{padding: 0}

    .photo.card:hover img{transform: scale(1.1)}
    
    .photo-page{
        width: 100%;
        max-width: 76rem;
        margin: auto}
    
    .photo-page>*{max-width: 100%}
    .photo-page .grid>*{flex: 0 0 calc((100vw - 4.5rem) / 3)}
    
    .photo-page .photo.card,
    .photo-page .photo.card header{
        height: calc(((100vw - 4.5rem) / 3) * .618)}
    
    .photo-page #slideshow-title{
        font-size: 2.625rem;
        padding: 0}
    
    .photo-page section{width: 100%}
    
    /*HOVER STYLES*/
    a,.card,.button{transition: all .4s ease}
    .button:active{box-shadow: 0 -.2rem .5rem rgba(0,0,0,.03),0 .05rem .05rem rgba(0,0,0,.03),0 .1rem .1rem rgba(0,0,0,.03),0 .15rem .15rem rgba(0,0,0,.03),0 .2rem .2rem rgba(0,0,0,.03),0 .25rem .25rem rgba(0,0,0,.03)}

    .secondary.button:hover{
        color: #fff;
        background-color: #06c;
        box-shadow: 0 0 .1rem rgba(0,0,30,.12),0 .1rem .2rem rgba(0,0,30,.12),0 .2rem .3rem rgba(0,0,30,.12),0 .3rem .5rem rgba(0,0,30,.12),0 .5rem .8rem rgba(0,0,30,.12),0 .8rem 1.3rem rgba(0,0,30,.12)}

    main a:hover,    
    .button:hover{
        -webkit-filter: brightness(1.2);
                filter: brightness(1.2)}

    .card:hover{border-color: #06c!important}
    
    .card.text-only:first-of-type:hover{border-top-color: #06c}

    .card.text-only:hover{
        border: 1px solid #06c;
        background-color: #fff;
        box-shadow: 0 -.2rem .5rem rgba(0,0,30,.03),0 .05rem .05rem rgba(0,0,30,.03),0 .1rem .1rem rgba(0,0,30,.03),0 .15rem .15rem rgba(0,0,30,.03),0 .2rem .2rem rgba(0,0,30,.03),0 .25rem .25rem rgba(0,0,30,.03)}
}

@media (min-width: 76rem){
    html,p,.entry-content p{font-size: calc(16px + (20 - 16) * (100vw - 1216px)/(1920 - 1216))}
    .fs-container{ margin-left: calc((100% - 47rem) / 2)!important}
    .video.card .card__heading{font-size: 1rem}
}

@media(min-width:79.25rem){
    .photo-page section{padding: 2.625rem 0}
    .photo-page .grid>*{flex: 0 0 24.833rem}
    .photo-page .photo.card,
    .photo-page .photo.card header{height: calc(24.833rem * .618)}
}

@media(min-width:85rem){
    .card__heading{font-size: 1rem}
}

@media (min-width:120rem){html,p,.entry-content p{font-size: 20px}}