/* @group Page Header
------------------------------------ */
.page-header { color: var(--title-light); }
.page-header a { color: var(--title-light); }
.page-header .img-box { height: calc(100vh - 3rem); }
.page-header-2 .img-box { height: calc(100vh - 12.8rem); max-height: 51rem; }
.page-header .box { display: flex; flex-direction: column-reverse; }
.page-header h5 { font-size: 2em; letter-spacing: 3.2px; line-height: 1.400em; margin: 0 0 3.9rem; }
.page-header h5 em { font-weight: 500; }
.page-header .img-box::after { content: ''; position: absolute; bottom: 0; left: 0; height: 60.6rem; width: 100%; background: linear-gradient(180deg, rgba(30,30,34,0) 0%, rgba(23,23,39,1) 100%); }
.page-header-2 .img-box::after { height: 39.7rem; }
.page-header .sound { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); z-index: 4; text-transform: uppercase; }
.page-header video[data-state="stopped"] + .sound .no-visible,
.page-header video[data-state="playing"] + .sound .no-visible { display: none; }
.page-header video[data-state="playing-with-sound"] + .sound .visible { display: none; }
.page-header .no-mobile .bttn { color: var(--timeline-text); margin: 0 0 30.1rem; display: block; text-align: center; padding: 1.2rem 0; max-width: 33.1rem; }
@media only screen
and (min-width : 961px) {
    .page-header .img-box { overflow: visible; }
    .page-header:not(.page-header-2) .img-box { height: calc(100vh - 11rem); }
    .page-header-2 .img-box { max-height: none; height: 62.8rem; overflow: visible; }
    .page-header figcaption { bottom: -11rem; }
    .page-header h5 { font-size: 2.4em; letter-spacing: 3.84px; line-height: 1.335em; }
    .page-header .img-box::after { height: 70.6rem; }
    .page-header-2 .img-box::after { height: 39.7rem; }
    .page-header .goDown { margin: 0 0 2.9rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 1920px) {
    
    .page-header .goDown { margin: 0 0 5rem; }
    .page-header-2 .goDown { margin: 0 0 3.2rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .page-header .img-box { overflow: visible; }
    .page-header:not(.page-header-2) .img-box { height: calc(100vh - 25.2rem); }
    .page-header figcaption { bottom: -7rem; overflow: hidden; }
}

/* @end */
