header {
    top: 0;
    right: 0;
    left: 0;
    padding: 1rem .7rem !important;
    height: fit-content;
    z-index: 200;
}
body[data-template='home'] header {transform: translateY(calc(50vh - 100%));}
body:not([data-template='home']) #header-background {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 90%);
    filter: blur(6px);
    scale: 1.25;
}

#header-background {z-index: 2;}
#header-logo {z-index: 10;}
#header-pages {z-index: 5;}
#header-careers {z-index: 15;}



/* LOGO */
#header-logo {margin: 0 auto; transition: width 1000ms ease-in-out, transform 1000ms ease-in-out;}
body:not([data-template='home']) #header-logo {width: 5rem !important;}
body[data-template='home'] #header-logo,
body[data-load='false'] #header-logo {width: 50vw !important; transform: translate(0, 50%);}


/* PAGES */
#header-pages {
    margin-top: .75rem;
    transition: opacity 500ms ease-in-out;
}
body[data-template='home'] #header-pages {opacity: 0;}

.menu-pages {column-gap: 1.5rem;}
.menu-pages a {
    opacity: .7;
    transition: opacity 500ms ease-in-out;
}
.menu-pages a.--active {opacity: 1;}


/* CAREERS */
header .--page-careers {
    top: calc(calc(var(--vh) * 100) - 2.5rem);
    left: 50vw;
    transform: translateX(-50%);
    transition: opacity 500ms ease-in-out;
}
body[data-template='home'] header .--page-careers {opacity: 0 !important;}


/* MENU PAGES */
body[data-template='work'] .menu-pages a#header_p-work {opacity: 1;}
body[data-template='services'] .menu-pages a#header_p-services {opacity: 1;}
body[data-template='people'] .menu-pages a#header_p-people {opacity: 1;}
body[data-template='about'] .menu-pages a#header_p-about {opacity: 1;}


/* 
EXTRA
*/
#header_extra-pages {
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
}
body[data-load='false'] #header_extra-pages {transform: translateY(100%);}
body[data-template='work'] .menu-pages a#header_extra-p_work,
body[data-template='services'] .menu-pages a#header_extra-p_services,
body[data-template='people'] .menu-pages a#header_extra-p_people,
body[data-template='about'] .menu-pages a#header_extra-p_about {opacity: 1;}

#header_extra-bg {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) -10%, rgba(0, 0, 0, 1) 85%);
    filter: blur(6px);
    scale: 1.25;
    z-index: 2;
}

#header_extra-pages .--page-careers {
    margin: 0 auto .75rem;
    z-index: 5;
}

#header_extra-pages .header_extra-link {z-index: 10;}



@media only screen and (min-width: 768px) {
    header {padding: 1rem !important;}
    
    #header-logo {
        top: 1rem;
        left: 50%;
        translate: -50% 0;
        transform: none !important;
    }

    body:not([data-template='home']) #header-logo {width: 6rem !important;}

    body[data-template='home'] #header-logo,
    body[data-load='false'] #header-logo {width: 14rem !important;}


    #header-pages {
        margin-top: .5rem;
        padding: 0 !important;
        transition-delay: 500ms;
    }

    .menu-pages {column-gap: 2rem;}

    #header-pages a:nth-child(2) {margin-right: 4rem;}
    #header-pages a:nth-child(3) {margin-left: 4rem;}

    body:not([data-template='home']) #header_extra-pages {transform: translateY(100%);}
    #header_extra-pages .--page-careers {bottom: 3rem;}
}

@media only screen and (min-width: 1096px) {
    #header-pages {margin-top: .45rem;}
    .menu-pages {column-gap: 4rem;}

    header .--page-careers {
        top: 1rem;
        right: 1rem;
        left: unset;
        transform: translateX(0);
    }

    #header_extra-pages .--page-careers {
        margin: 0 0 0 auto;
        transform: translateX(0) translateY(18px);
    }
}

@media (hover: hover) {
    .menu-pages a {transition: 250ms ease-in-out;}
    .menu-pages:hover a {opacity: .25 !important;}
    .menu-pages a:hover {opacity: 1 !important;}
}