/* ======================================================================
 *
 *                             HEADER
 *
 * =================================================================== */

header {
    position: relative;
    width: 100%;
}
header.landing-page {
    height: 100%;
}
header.browsing {
    background-size: cover;
    background-position: center center;
}
header.browsing h1 {
    text-align: center;
    transition: all 500ms ease-in-out;
}
header.browsing h1 img {
    height: 100px;
}
header>img {
    z-index: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#parallax, .jarallax {
    width: 100%;
    height: 100%;
}
#parallax { display: table; }
.jarallax {
    display: table-cell;
    vertical-align: middle;
}
h1 {
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    color: rgba(255,255,255,.9);
}

/* global theme management */
h1 {
    z-index: 1; /* matters ! */
    position: relative;
}
h1.gradient::before,
h1.gradient::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
h1.gradient::before {
    background:
            linear-gradient(
                    to top,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 10%
            ),
            linear-gradient(
                    5deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 10%
            ),
            linear-gradient(
                    10deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 12.5%
            ),
            linear-gradient(
                    15deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 15%
            ),
            linear-gradient(
                    20deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 17.5%
            ),
            linear-gradient(
                    25deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 20%
            ),
            linear-gradient(
                    30deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 22.5%
            ),
            linear-gradient(
                    -5deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 10%
            ),
            linear-gradient(
                    -10deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 12.5%
            ),
            linear-gradient(
                    -15deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 15%
            ),
            linear-gradient(
                    -20deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 17.5%
            ),
            linear-gradient(
                    -25deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 20%
            ),
            linear-gradient(
                    -30deg,
                    rgba(65, 65, 65, 1) 0%,
                    rgba(65, 65, 65, 0) 22.5%
            );
    opacity: 0;
    z-index: -1;
}
h1.gradient::after {
    background:
            linear-gradient(
                    to top,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 10%
            ),
            linear-gradient(
                    5deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 10%
            ),
            linear-gradient(
                    10deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 12.5%
            ),
            linear-gradient(
                    15deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 15%
            ),
            linear-gradient(
                    20deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 17.5%
            ),
            linear-gradient(
                    25deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 20%
            ),
            linear-gradient(
                    30deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 22.5%
            ),
            linear-gradient(
                    -5deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 10%
            ),
            linear-gradient(
                    -10deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 12.5%
            ),
            linear-gradient(
                    -15deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 15%
            ),
            linear-gradient(
                    -20deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 17.5%
            ),
            linear-gradient(
                    -25deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 20%
            ),
            linear-gradient(
                    -30deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 22.5%
            );
    opacity: 1;
    z-index: -1;
}

h1 a {
    letter-spacing: .2em;
}
h1 img {
    opacity: .85;
    transition: opacity 1s ease-in-out;
}
h1 .fade-off {
    opacity: 0;
}