header {
    top: 0;
    right: 0;
    left: 0;
    padding: 1rem .7rem !important;
    z-index: 200;
}
body[data-template='home'] header {transform: translateY(calc(50vh - 100% + 2rem));}
body:not([data-template='home']) header {background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);}


#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: .25;
    transition: opacity 500ms ease-in-out;
}
.menu-pages a.--active {opacity: 1;}

body[data-template='work'] .menu-pages a#header_p-work {opacity: 1;}
body[data-template='about'] .menu-pages a#header_p-about {opacity: 1;}



@media only screen and (min-width: 768px) {
    header {padding: 1rem !important;}
    #header-logo {
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        transition: width 1000ms ease-in-out;
    }

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

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


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

@media only screen and (min-width: 1096px) {
    #header-logo {top: 1.25rem;}

    body:not([data-template='home'])º #header-logo {width: 15rem !important;}
    
    body[data-template='home'] #header-logo,
    body[data-load='false'] #header-logo {width: 50vw !important;}

    #header-pages {
        margin-top: .3rem;
        column-gap: 18rem;
    }
}

@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;}
}