@import "custom-variables/variables";
@import "../../bootstrap-4.0.0/scss/functions";
@import "../../bootstrap-4.0.0/scss/variables";
@import "../../bootstrap-4.0.0/scss/mixins";

.career-banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    min-height: 550px;
    background-image: url(../images/careers/career-banner.jpg);

    @include media-breakpoint-down(md) {
        background-image: url(../images/careers/career-banner-mob.png);
    }

    @media only screen and (min-width: 2000.98px) {
        min-height: 870px !important;
    }

    @media only screen and (max-width: 2000px) and (min-width: 1700px) {
        min-height: 650px !important;
    }

    @include media-breakpoint-down(md) {
        min-height: rem(990);
        background-position: right bottom;
    }

    @include media-breakpoint-down(xs) {
        min-height: 580px !important;
        min-height: calc(100vh - 50px) !important;
    }

    p {
        font-size: rem(24);
        line-height: rem(32);

        @include media-breakpoint-down(sm) {
            font-size: rem(20);
            line-height: rem(28);

            br {
                display: none;
            }
        }
    }
}

.career-listing-blk {
    .btn-career {
        border: 1px solid #b2b2b2;
        cursor: pointer;
        font-weight: $font-weight-normal;
        padding: 3px rem(22);
        font-size: 14px;

        &:hover {
            color: $body-color;
            background: $primary;
            border-color: $primary;
        }

        &.apply-now-btn {
            @include media-breakpoint-down(md) {
                background: $primary;
                border-color: $primary;
            }
        }
    }

    .career-card {
        transition: all .5s ease;

        &:hover {
            box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.09);
        }

        @include media-breakpoint-down(sm) {
            border: 1px solid $border-color;
            border-radius: 3px;
        }
        @include media-breakpoint-down(md) {
            label {
                font-size: rem(16);
                line-height: normal;
            }
        }
    }

    .career-item {
        @include media-breakpoint-down(md) {
            font-weight: $font-weight-medium;
            font-size: 16px;
            line-height: 1.2;

            &.job-title {
                font-size: 17px;
            }
        }
    }
}

.career-content-box {
    .career-content {
        padding: rem(60) rem(50);
        color: $gray-600;
        font-size: 14px;

        @include media-breakpoint-down(sm) {
            padding: rem(45) rem(20);
        }

        h6 {
            font-size: 15px;
        }

        ul {
            list-style: none;
            padding: 0;
            color: $gray-600;
        }
    }
}

.career-head {
    @include media-breakpoint-down(sm) {
        br {
            display: none;
        }
    }
}

.gutter-5 {
    margin-left: -5px !important;
    margin-right: -5px !important;

    & > [class^='col'] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

.fancybox-skin {
    padding: 0 !important;
}

.fancybox-lock .fancybox-overlay {
    overflow-x: hidden;
    overflow-y: auto;
}

@include media-breakpoint-down(md) {
    .w-80 {
        max-width: 80% !important;
    }

    p.font-weight-md-normal {
        font-weight: $font-weight-normal !important;
    }
}

#banner {
    &.sliders-wrap-inner {
        &:not(.slick-initialized) {
            .career-banner-blk {
                &:not(:first-child) {
                    display: none;
                }
            }
        }
    }
}