.header {
    @extend .background--photo;
    background-image: url('../img/header-berlin.jpg');
    background-position: center bottom;
}

.header__content {
    padding: ($spacer * 3) 0;
    text-align: center;
}

// intro animation
.header__title,
.header__tagline,
.header__description,
.header__logo,
.header__label {
    .wf-active &,
    .wf-inactive & {
        @extend .animation-slide-in-from-bottom;
        animation-fill-mode: backwards;
    }
}

.header__description,
.header__logo {
    .wf-active &,
    .wf-inactive & {
        animation-delay: .3s;
    }
}

.header__btn,
.header__label {
    .wf-active &,
    .wf-inactive & {
        animation-delay: .5s;
    }
}

.header__title,
.header__tagline {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0;
}

.header__tagline {
    font-size: $font-size-h3;
    color: #fff;
}