.header {
        position: relative;
        height: 95vh;
        background-image: linear-gradient(to right bottom,
                                            rgba($color-primary-light, 0.8),
                                            rgba($color-primary-dark, 0.8)
                                        ),
                        url(../img/hero.jpg);
        background-size: cover; /* adapt image to view post on resizing */
        background-position: top; /* make image stick to top so other part gets cropped but not top*/
        position: relative;
        clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

        @include respond(phone) {
                clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
                -webkit-clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);

        }

        &__logo-box {
                position: absolute;
                top: 40px;
                left: 40px;

        }

        &__logo{
                height: 35px;
        }

        &__text-box{
                position: absolute;
                top: 40%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
        }
}