header {
    position: relative;
    height: calc(100vh - 144px);
    min-height: 800px;
    z-index: 999;

    @media screen and (max-width: 1300px) {
        min-height: 600px;

        & div.content-box {
            padding: 100px 0;
        }
    }

    @media screen and (max-width: 500px) {
        min-height: 600px;
    }

    & div.content-box {
        position: relative;
        z-index: 3;
        width: 60%;
        padding: 225px 0;
        color: var(--text-color);

        & p {
            font-family: var(--font-family-body);
            font-size: 20px;
            font-weight: 400;
        }

        & a {
            font-size: 18px;
        }

    }

    & div.cta {
        z-index: 10;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 40px 80px 40px 60px;
        background-color: var(--main-color);
        color: var(--text-color);

        & > a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        & div.icon {
            float: left;
            color: var(--accent-color);
            border: 1px solid var(--accent-color);
            border-radius: 100%;
            padding: 25px;

            & i {
                font-size: 32px;
            }
        }

        & div.contact {
            float: left;
            margin-left: 40px;
            font-family: var(--font-family-title);

            & span {
                display: block;
                font-size: 24px;
                color: var(--accent-color);
            }

            & a {
                display: block;
                font-size: 32px;
                color: var(--text-color);
            }
        }

    }

    & div.background-overlay,
    & div.background-image {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    & div.background-overlay {
        z-index: 2;
        background-color: rgba(0,0,0, 0.25);
        backdrop-filter: blur(2px);
    }

    & div.background-image {
        z-index: 1;
        background-image: var(--header-hero);
        background-position: center;

        @media only screen and (max-width: 600px) {
            background-image: url(/assets/custom/images/brasserie-de-aanleg-mobile.jpg);
        }

    }

}

@media only screen and (max-width: 1386px) {

    header div.content-box {
        width: 80%;
        padding-top: 150px;
    }

}

@media only screen and (max-width: 992px) {

    header div.cta {
        transform: scale(0.7);
        transform-origin: right bottom;
    }

}

@media only screen and (max-width: 736px) {
    header div.content-box {
        width: 100%;
        padding-top: 100px;
    }
}

@media only screen and (max-width: 600px) {
    header div.content-box {
        width: 100%;
        padding-top: 50px;
    }
}

@media only screen and (max-width: 500px) {
    header {
        & div.content-box {
            padding-top: 75px;
        }
        & div.cta {
            display: none;
        }
    }
}