.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px 80px 0;
    transition: padding-top .3s;
    z-index: 15;
    @media(max-width: $tablet) {
        padding: 40px $gutter 0;
    }
    @media(max-width: 900px) {
        padding: 21px 15px;
    }
    .btn--nav {
        padding: 0 10px 40px;
        @media(max-width: 900px) {
            padding-bottom: 21px;
        }
    }
    &.p-y-20 {
        padding: 85px 80px 0;
        &.js--scroll-up {
            .container {
                &:after {
                    top: 0;

                }
            }
        }
        @media(max-width: $tablet) {
            padding: 85px $gutter 0;
        }
        @media(max-width: 900px) {
            padding-top: 65px; 
            padding-bottom: 20px;
            padding-left:  15px;
            padding-right:  15px;
        }
        .container {
            &:after {
                height: 145px;
                top: -156px;
                @media(max-width: 900px) {
                    height: 115px;
                }
            }
        }
    }
    .container {
        display: flex;
        padding: 0;
        position: relative;
        @media(max-width: 900px) {
            height: 27px;
            align-items: center
        }
        &:after {
            content: "";
            background: $white;
            height: 102px;
            top: -105px;
            border-bottom: 1px solid transparent;
            left: 0;
            width: 100%;
            position: fixed;
            z-index: 11;
            transition: top .3s .3s, height .3s .3s; //top delay
            @media(max-width: 900px) {
                height: 70px;
                transition: top .3s, height .3s ;
            }
        }
    }
    &.header--dropdown--active {
        .container {
            &:after {
                top: 0 !important;
                transition: top .3s;
                border-bottom: 1px solid #DAD8F2;
            }
        }
    }
    &.js--scroll-up {
        .container {
            &:after {
                top: 0;
            }
        }
    }
    &.header--active {
        @media(max-width: 900px) {
            padding: 21px 15px;
        }
        &.search-open {
            .container {
                &:after {
                    @media(max-width: 900px) {
                        height: 70px;
                        top: 0;
                    }
                }
            }
            &.p-y-20 {
                .container {
                    &:after {
                        @media(max-width: 900px) {
                            height: 114px;
                            top: 0;
                        }
                    }
                }
            }
            &.mobile {
                .container {
                    .logo {
                        opacity: 0;
                    }
                }
            }
        }
        &.p-y-20 {
            .container {
                &:after {
                    height: 145px;
                    top: 0;
                    @media(max-width: 900px) {
                        height: 114px;
                        top: 0;
                    }
                }
            }
        }
        .container {
            &:after {
                transition: top .3s, height .3s;
                top: 0;
            }
        }
        .logo {
            transition: opacity .15s;
            opacity: 1;
            .btn__logo {
                svg {
                    path:last-child {
                        transition: all .3s .15s;
                    }
                }
            }
        }
        .btn--green {
            background: $green;
            color: $white !important;
            overflow: hidden;
            position: relative;
            span {
                position: relative;
            }
        }
    }
    .right {
        margin-right: -20px;
        .btn {
            transition: background .3s, color .3s, margin-top .3s;
            margin-top: -12px !important;
            border-radius: 23px !important;
            padding: 12px 14px !important;
        }
    }
}

.has-voucher {
    .tabs-container {
        .tabs {
            @media(max-width: $mobile) {
                padding: 0 20px;
            }
            .tab-buttons {
                @media(max-width: $mobile) {
                    top: 115px !important
                }    
            }
        }
    }
    &:not(.has-voucher) {
        .tabs-container {
            .tabs {
                @media(max-width: $mobile) {
                    padding: 0 20px;
                }
                .tab-buttons {
                    @media(max-width: $mobile) {
                        top: 145px !important
                    }    
                }
            }
        }    
    }
}

.has--tabs {
    &.page--scrolled {
        .header {
            &.p-y-20 {
                .container {
                    &:after {
                        height: 145px;
                        top: 0;
                        @media(max-width: 900px) {
                            height: 114px;
                            top: 0;
                        }
                        @media(max-width: 800px) {
                            height: 154px;
                            top: 0;
                        }
                    }
                }
                &.lower-height {
                    .container {
                        &:after {
                            height: 125px;
                            top: 0;
                            @media(max-width: 800px) {
                                height: 154px;
                                top: 0;
                            }
                        }
                    }
                }
            }
            .container {
                &:after {
                    @media(max-width: 800px) {
                        height: 114px;
                        top: 0;
                    }
                }
            }
            &.lower-height {
                .container {
                    &:after {
                        height: 70px;
                        top: 0;
                        @media(max-width: 800px) {
                            height: 114px;
                            top: 0;
                        }
                    }
                }
            }
        }
        &.has--search-open {
            .header {
                &.p-y-20 {
                    .container {
                        &:after {
                            @media(max-width: 900px) {
                                height: 114px;
                                top: 0;
                            }
                        }
                    }
                    &.lower-height {
                        .container {
                            &:after {
                                @media(max-width: 900px) {
                                    height: 114px;
                                    top: 0;
                                }
                            }
                        }
                    }
                }
                &.lower-height {
                    .container {
                        &:after {
                            @media(max-width: 900px) {
                                height: 70px;
                                top: 0;
                            }
                        }
                    }
                }
            }
        }
    }
    &.has--search-open {
        .header {
            .container {
                &:after {
                    height: 102px;
                    top: 0;
                }
            }
            &.p-y-20 {
                .container {
                    &:after {
                        height: 145px;
                        top: 0;
                    }
                }
            }
        }
    }
    .header {
        .center {
            >.hidden {
                @media(max-width: 900px) {
                    opacity: 1;
                    visibility: visible;
                }
            }
        }
        &.p-y-20 {
            padding: 81px 80px 0;
            @media(max-width: $tablet) {
                padding: 81px $gutter 20px;
            }
            @media(max-width: 900px) {
                padding: 65px 15px 20px;
            }
            .container {
                &:after {
                    height: 145px;
                    top: -146px;
                    @media(max-width: 900px) {
                        height: 114px;
                        top: -145px;
                    }
                }
            }
        }
        &.js--scroll-up {
            .container {
                &:after {
                    top: 0;
                    @media(max-width: 900px) {
                        height: 161px;
                        top: -162px;
                    }
                    @media(max-width: 800px) {
                        top: 0;
                        height: 154px;
                    }
                }
            }
        }
        &.lower-height {
            padding: 70px 80px 15px;
            @media(max-width: $tablet) {
                padding: 70px 35px 15px;
            }
            @media(max-width: 900px) {
                padding: 65px 15px 15px;
            }
            .container {
                .btn--nav {
                    padding-bottom: 15px;
                }
                &:after {
                    top: 0;
                    height: 125px;
                    @media(max-width: $tablet) {
                        border-bottom: 1px solid transparent;
                    }
                    @media(max-width: $mobile) {
                        height: 154px;
                    }
                }
            }
            .right {
                .btn {
                    margin-top: -10px !important;
                }
            }
            /* @media(max-width: $tablet) {
                padding: 60px $gutter 15px;
            } */
            @media(max-width: 800px) {
                padding: 65px 15px 20px;
            }
        }
        &.js--scroll-down {
            .container {
                &:after {
                    @media(max-width: 900px) {
                        height: 154px;
                        top: 0;
                    }
                }
            }
        }
    }
    &:not(.has-voucher) {
        .header {
            &.p-y-20 {
                padding: 85px 80px 0;
                @media(max-width: $tablet) {
                    padding: 65px $gutter 0;
                }
                @media(max-width: 900px) {
                    padding: 65px 15px 0;
                }
                @media(max-width: $mobile) {
                    padding: 65px 15px 0;
                }
                .container {
                    &:after {
                        height: 145px;
                        top: -146px;
                        border-bottom: 1px solid #DAD8F2;
                        @media(max-width: 900px) {
                            height: 115px;
                            top: -116px;
                        }
                    }
                }
            }
            &.lower-height {
                padding: 21px 80px 11px;
                .container {
                    .btn--nav {
                        padding-bottom: 15px;
                    }
                }
                @media(max-width: $tablet) {
                    padding: 21px $gutter 11px;
                }
                @media(max-width: 900px) {
                    padding: 21px 15px 11px;
                }
                @media(max-width: $mobile) {
                    padding: 21px 15px 11px;
                }
            }
            &.js--scroll-down, &.js--scroll-up {
                .container {
                    &:after {
                        @media(max-width: 800px) {
                            height: 113px;
                            top: 0;
                        }
                    }
                }
            }
        }
    }
}

.has {
    &--tabs {
        &.has--search-open {
            .tabs {
                .tab-buttons {
                    &.pageTab {
                        @media(max-width: 900px) {
                            opacity: 0;
                            visibility: hidden;
                        }
                    }
                }
            }
            .header {
                &.p-y-20 {
                    .container {
                        &:after {
                            @media(max-width: 900px) {
                                height: 114px;
                                top: 0;
                            }
                        }
                    }
                }
                .container {
                    &:after {
                        @media(max-width: 900px) {
                            height: 72px;
                        }
                    }
                }
            }
        }
    }
    &--search-open {
        .header {
            .center {
                .mobile.btn--menu {
                    transition: opacity .3s;
                    opacity: 0;
                    visibility: hidden;
                }
            }
        }
    }
}

.page--menu-open {
    &.has--tabs {
        .header {
            &.header--active {
                .container {
                    &:after {
                        @media(max-width: 800px) {
                            height: 69px;
                            top: 0;
                            transition: height .3s .4s;
                        }
                    }
                }
            }
        }
    }
}

.page--dark-hero {
    header {
        .logo {
            .btn__logo {
                svg {
                    path {
                        &:last-child {
                            @media (max-width: 900px) {
                                transition: all .3s;
                            }
                        }
                    }
                }
            }
        }
        &.header--active {
            .logo {
                .btn__logo {
                    svg {
                        path {
                            &:last-child {
                                @media (max-width: 900px) {
                                    fill: $black;
                                    transition: all .3s;
                                }
                            }
                        }
                    }
                }
            }
            .center {
                .btn--menu {
                    > div,
                    &:before,
                    &:after {
                        @media(max-width: 900px) {
                            background: $black;
                        }
                    }
                    &-active {
                        > div,
                        &:before,
                        &:after {
                            @media(max-width: 900px) {
                                background: $white;
                            }
                        }    
                    }
                }
            }
        }
    }
    &.page--menu-open {
        header {
            .center {
                .btn {
                    &--menu {
                        &-active {
                            > div,
                            &:before,
                            &:after {
                                @media(max-width: 900px) {
                                    background: $black;
                                }
                            }    
                        }    
                    }
                }
            }
            .logo {
                .btn__logo {
                    svg {
                        path {
                            &:last-child {
                                @media (max-width: 900px) {
                                    fill: $black;
                                    transition: all .3s .3s;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}