/* @group Circle Header
------------------------------------ */
.circle-header { color: var(--title-light); position: relative; margin: 11rem 0 -6rem; }
.circle-header a { color: var(--title-light); }
.circle-header .link-circle { color: var(--timeline-text); }
.circle-header .link-circle i svg { stroke: var(--timeline-text); }
.circle-header .img-box { height: 56rem; border-radius: 100%; }
.circle-header .img-box::before { content: ''; position: absolute; top: 0; left: 0; height: 20.3rem; width: 100%; background: linear-gradient(0deg, rgba(51,51,64,0) 0%, rgba(51,51,64,1) 100%); }
.circle-header h1,
.circle-header h2 { font-style: italic; margin: 0 0 16.2rem; }
.circle-header .bottom-sm h1 { font: 300 italic 4em / 1.100em var(--bilo-font); letter-spacing: 6.4px; margin: 0 0 1.4rem; }
.circle-header .play-video { color: var(--light-grey); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); z-index: 4; text-transform: uppercase; }
.circle-header .play-video i svg { stroke: var(--light-grey); }
.circle-header video[data-state="stopped"] + .play-video .no-visible { display: none; }
.circle-header video[data-state="playing"] + .play-video { opacity: 0; pointer-events: none; }
.circle-header video[data-state="playing"] + .play-video .visible { display: none; }
.circle-header .video-box { clip-path: circle(); }

@media only screen
and (min-width : 961px) {
    .circle-header { margin: 19.8rem 0 -6rem; }
    .circle-header .img-box { height: 88.7rem; max-width: 88.7rem; margin: 0 auto; }
    
    .circle-header .bottom-sm h1 { font-size: 7em; letter-spacing: 11.2px; line-height: 1em; margin: -7rem 0 1.9rem; }
    /* .circle-header .play-video { top: 28.9rem; transform: translate3d(-50%,0,0); } */
    .circle-header .img-box::before { height: 39.7rem; }
    .circle-header .goDown { margin: 0 0 34.5rem; }
    .circle-txt-up .goDown { margin: 0 0 44.5rem; }

    /* .circle-header .img-box > img, 
    .circle-header .img-box > video { position: absolute; height: 88.7rem!important; width: 88.7rem!important; top: 50%; right: 50%; transform: translate(50%,-50%); } */
}
@media only screen
and (min-width : 961px)
and (max-width : 1439px) {
    .circle-header .img-box { min-width: 88.7rem; position: relative; left: 50%; transform: translate(-50%, 0); }
}
@media only screen
and (min-width : 1440px) {
    .circle-header h2,
    .circle-header h1 { margin: 0 0 29.6rem; }
}
@media only screen
and (min-width : 1920px) {
    .circle-header h1,
    .circle-header h2 { margin: -6rem 0 8.6rem; }
    .circle-header .goDown { margin: 0 0 13.9rem; }
    .circle-txt-up .goDown { margin: 0 0 32.4rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .circle-header { overflow: hidden; }
    .circle-header .col-12-8 { padding: 0; flex: 0 0 56rem; max-width: none; left: calc(50% - 28rem); }
    .circle-header .col-12-8 .outerAbsolute { max-width: 100vw; }
    .circle-header .col-12-8 .outerAbsolute .col-12-12 { padding: 0; }    
    .site-nav + .circle-header { margin-bottom: 2rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px)
and (max-height: 700px) {
    .site-nav + .circle-header .col-12-8 { flex: 0 0 calc(100vh - 23.5rem); left: 50%; transform: translate(-50%, 0); }
    .site-nav + .circle-header .img-box { max-height: calc(100vh - 23.5rem); }    
}

/* @end */