.ProgressBar{
    background-color:#BFBFBF;
    border-top:1px solid #f2f2f2;
    bottom:0;
    box-sizing:border-box;
    column-gap:var(--six-gutter);
    cursor:pointer;
    display:grid;
    height:50px;
    pointer-events:none;
    position:fixed;
    transform:translateY(55px);
    transition:transform .4s ease;
    width:100%;
    z-index:10
}
@media(min-width:4069px){
    .ProgressBar{
        --max-grid:calc(var(--six-site-max-width)/2 + var(--six-site-margin) + var(--six-gutter)*2);
        grid-template-columns:[full-start] var(--six-site-margin) calc(50vw - var(--max-grid)) [content-start] repeat(var(--six-cols),1fr) [content-end] calc(50vw - var(--max-grid)) var(--six-site-margin) [full-end]
    }
}
@media(max-width:4068px){
    .ProgressBar{
        --col-spacer:calc(var(--six-site-margin) - var(--six-gutter));
        grid-template-columns:[full-start] var(--col-spacer) [content-start] repeat(var(--six-cols),1fr) [content-end] var(--col-spacer) [full-end]
    }
}
@supports not (display:grid){
    .ProgressBar{
        display:block;
        width:100%
    }
}
.ProgressBar.is-active{
    pointer-events:auto;
    transform:translateY(0);
    transition:transform .8s ease
}
.ProgressBar p{
    --line-height:1.3333333333;
    font-family:"Atacama VAR",serif;
    font-size:calc(.13793vw + 12.24138px);
    font-style:normal;
    font-weight:700;
    font-stretch:200%;
    line-height:1.3333333333;
    transition:opacity .4s ease;
    color:#EBEBEB;
}
@media(min-width:1440px){
    .ProgressBar p{
        font-size:15px
    }
}
@media(max-width:739px){
    .ProgressBar p{
        font-size:13px
    }
}
.ProgressBar p em{
    font-family:"Atacama VAR",serif;
    font-style:italic
}
.navigate-panel-open .ProgressBar .ProgressBar__active-scroll,.navigate-panel-opened .ProgressBar .ProgressBar__active-scroll{
    opacity:0;
    transition:opacity .4s ease
}
.navigate-panel-open .ProgressBar .ProgressBar__col-center,.navigate-panel-opened .ProgressBar .ProgressBar__col-center{
    opacity:0;
    transition:opacity 0ms linear
}
.navigate-panel-opened .ProgressBar .ProgressBar__share{
    opacity:0;
    transition:opacity .4s ease
}
.ProgressBar__inner{
    grid-column:content;
    position:relative
}
.ProgressBar__col{
    display:flex;
    position:absolute;
    top:50%;
    transform:translateY(-50%)
}
.ProgressBar__col-left{
    text-wrap:nowrap;
    left:0
}
.ProgressBar__col-center{
    text-wrap:nowrap;
    left:50%;
    transform:translate(-50%,-50%);
    transition:opacity .4s ease .5s
}
@media(max-width:1023px){
    .ProgressBar__col-center p{
        display:none
    }
}
.ProgressBar__col-center p span{
    font-family:"Atacama VAR",serif;
    font-style:normal
}
.ProgressBar__col-center p span,.ProgressBar__col-center p span b,.ProgressBar__col-center p span strong{
    font-weight:700;
    text-transform:uppercase
}
.ProgressBar__col-center p span em{
    font-family:"Atacama VAR",serif;
    font-style:italic
}
.ProgressBar__col-center p.ProgressBar__mobile-label{
    display:none;
    opacity:0;
    text-transform:uppercase;
    transition:opacity .4s ease
}
@media(max-width:739px){
    .ProgressBar__col-center p.ProgressBar__mobile-label{
        display:block
    }
}
.navigate-panel-opened .ProgressBar__col-center p.ProgressBar__mobile-label{
    opacity:1
}
.ProgressBar__col-right{
    text-wrap:nowrap;
    right:0
}
.ProgressBar__col-right .ProgressBar__all-stories{
    text-transform:uppercase
}
.ProgressBar__col-right>div{
    align-items:center;
    cursor:pointer;
    display:flex;
    justify-content:flex-end;
    transition:opacity .5s cubic-bezier(.25,1,.5,1)
}
@media(hover:hover)and (pointer:fine){
    .ProgressBar__col-right>div:hover{
        opacity:.4
    }
}
.ProgressBar__col-right>div svg{
    display:inline-block;
    height:6px;
    margin-left:10px;
    position:relative;
    transition:transform .8s ease;
    width:10px
}
@media(min-width:740px){
    .ProgressBar__col-right>div svg{
        top:-1px
    }
    body.is-chrome .ProgressBar__col-right>div svg{
        top:0
    }
}
.navigate-panel-opened .ProgressBar__col-right>div svg{
    transform:rotate(180deg)
}
.ProgressBar__trigger{
    --line-height:1.3333333333;
    background-color:transparent;
    color:#EBEBEB;
    border:none;
    cursor:pointer;
    font-family:"Atacama VAR",serif;
    font-size:calc(.13793vw + 12.24138px);
    font-style:normal;
    font-weight:700;
    font-stretch: 200%;
    line-height:1.3333333333;
    margin:0;
    outline:none;
    padding:0;
    position:absolute;
    right:18px;
    text-transform:uppercase;
    white-space:nowrap
}
@media(min-width:1440px){
    .ProgressBar__trigger{
        font-size:15px
    }
}
@media(max-width:739px){
    .ProgressBar__trigger{
        font-size:13px
    }
}
.ProgressBar__trigger em{
    font-family:"Atacama VAR",serif;
    font-style:italic
}
.ProgressBar__trigger.close{
    opacity:0;
    pointer-events:none;
    transform:translateY(3px) scale(.99);
    transition:opacity .4s ease,transform .4s ease,color .4s ease
}
.navigate-panel-opened .ProgressBar__trigger.close{
    opacity:1;
    pointer-events:auto
}
.ProgressBar__trigger.open,.navigate-panel-opened .ProgressBar__trigger.close{
    transform:translateY(0) scale(1);
    transition:opacity .4s ease .4s,transform .4s ease .4s,color .4s ease
}
.navigate-panel-opened .ProgressBar__trigger.open{
    opacity:0;
    pointer-events:none;
    transform:translateY(3px) scale(.99);
    transition:opacity .4s ease,transform .4s ease,color .4s ease
}
.ProgressBar__active-scroll{
    background-color:#EBEBEB;
    bottom:0;
    height:4px;
    left:0;
    position:absolute;
    width:0
}
.ProgressBar__active-scroll,.ProgressBar__share{
    transition:opacity .4s ease 1s
}
