/*--------------------------------------------------------------
# Wrappers
--------------------------------------------------------------*/

.wrapper {
    display: block;
    position: relative;
}
.wrapper:not(.static) {
    position: relative;
    z-index: 75;
}

.wrapper .wrap-center.floating {
    position: relative;
    top: 30%;
}

@media all and (max-width: 575px) {

    .wrapper .wrap-center,
    .wrapper .wrap-center.floating {
        position: relative;
        top: 0;
    }

}


.wrapper .wrap-bottom.floating {
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}
.wrapper .wrap-bottom.floating .article-wrap.banner {
    margin-bottom: 10rem;
}


/*--------------------------------------------------------------
# Wrapper combined styles
--------------------------------------------------------------*/



.wrapper.background-wrapper > .wrapper.expand,
.wrapper.fullscreen.floating > .wrapper.expand,
.wrapper.fullscreen-120 > .wrapper.expand,
.wrapper.fullscreen-120 > .wrapper.expand > .container-expand {
    display: block;
    z-index: 25;
    /*height: 100%;*/
}

@media all and (max-width: 575px) {

    .wrapper.background-wrapper > .wrapper.expand,
    .wrapper.fullscreen.floating > .wrapper.expand,
    .wrapper.fullscreen-120 > .wrapper.expand,
    .wrapper.fullscreen-120 > .wrapper.expand > .container-expand {
        /*min-height: 100%;*/
        /*height: auto;*/
    }

}

.wrapper.expand.flex {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 120px 0;
}

@media all and (max-width: 575px) {

    .wrapper.expand.flex {
        padding-bottom: 80px;
    }

}

.wrapper.fullscreen-120.padding {
    padding-bottom: calc( 20vw );
}





/*--------------------------------------------------------------
# Wrapper sizes
--------------------------------------------------------------*/

.wrapper {
    background-size: cover;
    background-repeat: no-repeat;
}

.wrapper.fullscreen, body {
    min-height: 100vh;
}
.wrapper.fullscreen.exact {
    height: 100vh;
}


.wrapper.divider {
    padding: 45px 0 45px;
}
.wrapper.compact {
    padding: 75px 0 75px;
}
.wrapper.medium {
    padding: 100px 0 100px;
}
.wrapper.large {
    padding: 120px 0 120px;
}
.wrapper.spacing {
    padding: 140px 0 140px;
}



.wrapper.spacing-top {
    padding-top: 140px;
}
.wrapper.spacing-bottom {
    padding-bottom: 140px;
}




.wrapper.divider.half-top {
    padding-top: 22px;
}
.wrapper.compact.half-top {
    padding-top: 40px;
}
.wrapper.medium.half-top {
    padding-top: 50px;
}
.wrapper.large.half-top {
    padding-top: 60px;
}
.wrapper.spacing.half-top {
    padding-top: 70px;
}


.wrapper.divider.half-bottom {
    padding-bottom: 22px;
}
.wrapper.compact.half-bottom {
    padding-bottom: 40px;
}
.wrapper.medium.half-bottom {
    padding-bottom: 50px;
}
.wrapper.large.half-bottom {
    padding-bottom: 60px;
}
.wrapper.spacing.half-bottom {
    padding-bottom: 70px;
}




.wrapper.spacing-top-margin {
    margin-top: 20rem;
}

.wrapper.auto-height-120 {
    padding-top: 15rem;
    padding-bottom: 20vw;
}

.wrapper.fullscreen-120 {
    min-height: calc(100svh + 20vw);
    /*min-height: 50rem;*/
}

.wrapper.auto-height-75 {
    padding-top: 200px;
    padding-bottom: 12vw;
}

.wrapper.detailpage {
    height: 75vh;
}


/*--------------------------------------------------------------
# Wrapper shape
--------------------------------------------------------------*/

.wrapper.has-shape-swoosh .shape {
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wrapper.has-shape-swoosh .shape svg {
    position: absolute;
    display: block;
    transform: scaleX(-1) rotate(5deg) scale(1.5);
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
}

.wrapper.has-shape {
    width: 100%;
    height: 40vh;
    z-index: 66;
    margin-top: 2px;
}
.wrapper.has-shape.pulled {
    height: auto;
}
.wrapper.has-shape.pulled .shape-top-main svg {
    transform: translateY(-100%);
}
.wrapper.has-shape .shape-top-main svg {
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    z-index: 1;
    width: 100%;
    height: 35vw;
    max-height: 37.5rem;
    min-height: 18.75rem;
}


/*--------------------------------------------------------------
# Wrapper shape sizes
--------------------------------------------------------------*/

.wrapper.has-shape.shape-normal .shape-top-main svg {
    height: 40vw;
}
.wrapper.has-shape.shape-small .shape-top-main svg {
    height: 30vh;
}


/*--------------------------------------------------------------
# Wrapper shape colours
--------------------------------------------------------------*/

.wrapper.has-shape.shape-silver svg {
    fill: var(--silver);
}


/*--------------------------------------------------------------
# Wrapper variations
--------------------------------------------------------------*/

.wrapper.bg-red {
    background: var(--red);
    color: #FFFFFF;
}
.wrapper.bg-silver {
    background: var(--blue);
    color: #FFFFFF;
}
.wrapper.bg-white {
    background: #FFFFFF;
}
.wrapper.bg-white .shape-top-main svg {
    fill: #FFFFFF;
}
.wrapper.bg-grey {
    background: var(--silver);
}
.wrapper.bg-grey .shape-top-main svg {
    fill: var(--silver);
}

.wrapper.current-bg {
    background-color: currentColor;
}

.wrapper.bg-none {
    background: none;
}


/*--------------------------------------------------------------
# Master wrapper (job detailpage)
--------------------------------------------------------------*/

.master-wrapper {
    position: relative;
}
.master-wrapper.pulled {
    margin-top: -18vw;
}

.master-wrapper > .container:nth-of-type(1) {
    z-index: 88;
    pointer-events: none;
    position: absolute;
    inset: 0;
}


/*--------------------------------------------------------------
# Background wrapper
--------------------------------------------------------------*/

.background-wrapper {
    display: block;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 500px !important;;
    z-index: 65 !important;
    color: #FFFFFF;
    overflow: hidden;
}
.background-wrapper.fullscreen {
    height: 140vh !important;
}

.background-wrapper::after {
    background-image: url('/images/svg/shape-hero.svg');
    background-size: cover;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    mix-blend-mode: overlay;
}

.background-wrapper .background-video:after,
.background-wrapper.detailpage:before {
    background-image: url('/images/svg/shape-hero-bg.svg');
    position: absolute;
    display: block;
    inset: 0;
    mix-blend-mode: multiply;
    content: '';
    transform: scale(1.5);
}

.background-wrapper.detailpage.shape-inverted:after {
    transform: scaleX(-1);
}

.background-wrapper .container {
    height: 100%;
}


/*--------------------------------------------------------------
# Video wrapper
--------------------------------------------------------------*/

.video-wrapper {
    display: block;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.video-wrap {
    display: block;
    position: relative;
    overflow: hidden;
}
.video-wrap.fullscreen {
    height: 140vh;
    min-height: 800px;
}
.video-wrap.fullscreen > video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    min-width: 100%;
    height: 100%;
}
.video-wrap.fullscreen > .container {
    height: 100%;
}


/*--------------------------------------------------------------
# Image wrap
--------------------------------------------------------------*/

.image-wrap {
    display: block;
    position: relative;
    overflow: hidden;
}
.image-wrap .image,
.image-wrap .image-inner {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.image-wrap .image-inner {
    overflow: hidden;
    position: absolute;
    inset: 0;
}
.image-wrap .image {
    width: 100%;
    height: 100%;
}
.image-wrap.rounded {
    border-radius: 50%;
}


/*--------------------------------------------------------------
# Article wrap
--------------------------------------------------------------*/

.article-wrap.has-side {
    display: flex;
    width: 100%;
}
.article-wrap.has-side:not(.has-right) > .side-wrap {
    margin-right: 70px;
}
.article-wrap.has-side > .side-wrap {
    display: block;
    width: 18rem;
    height: 18rem;
}
.article-wrap.has-side > .side-wrap:not(.dynamic) > .side-inner {
    max-height: 600px;
}
.article-wrap.has-side > .side-wrap > .side-inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.article-wrap.has-side > .side-wrap .image-wrap {
    width: 100%;
    height: 100%;
}


/*--------------------------------------------------------------
# Cards action wrapepr
--------------------------------------------------------------*/

.cards-action-wrapper {
    text-align: right;
    width: 100%;
}
.cards-action-wrapper button,
.cards-action-wrapper a {
    margin-top: 1.5rem;
}


/*--------------------------------------------------------------
# Social media wrapper
--------------------------------------------------------------*/

.socials-wrap {
    margin-top: 1rem;
}
.socialmedia:not(.wrap) > ul {
    white-space: nowrap;
}
.socialmedia > ul {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
}
.socials-wrap .socialmedia > ul > li:not(:last-child) {
    margin-right: 6px;
}
.socialmedia > ul > li {
    display: inline-block;
    vertical-align: top;
    line-height: 0;
}
.socials-wrap .socialmedia > ul > li > a {
    width: 20px;
    height: 20px;
}

.socialmedia > ul > li > a {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 60px;
    height: 60px;
    margin: 0;
}
.socialmedia > ul > li > a > svg {
    fill: #FFFFFF;
}


/*--------------------------------------------------------------
# Jobs wrapper
--------------------------------------------------------------*/

.jobs-wrapper .jobs-shape-main svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    max-height: 60rem;
}

.jobs-wrapper-outer {
    display: block;
    position: relative;
}

.jobs-wrapper-inner {
    display: grid;
    grid-template-columns: 0.35fr 1fr;
    grid-gap: 1rem;
    grid-template-areas:
    ". jobsTitle"
    "jobsFilter jobsCards";
}


/* Jobs wrapper title */
.jobs-wrapper-inner .jobs-wrapper-title {
    color: #FFFFFF;
    grid-area: jobsTitle;
    position: relative;
    font-size: 1.5rem;
    display: flex;
    justify-content: space-between;
}
.jobs-wrapper-inner .jobs-wrapper-title h1 {
    font-weight: 400;
}




/*--------------------------------------------------------------
# Jobs filter wrapper
--------------------------------------------------------------*/

.jobs-filter-wrapper {
    grid-area: jobsFilter;
}


/*--------------------------------------------------------------
# Job resume wrapper (detailpage)
--------------------------------------------------------------*/

.job-resume-wrapper .job-resume-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.5rem 0;
    font-size: 0.95rem;
}

.job-resume-wrapper .job-resume-item svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: #000;
}


/*--------------------------------------------------------------
# Job benefits wrapper (detailpage)
--------------------------------------------------------------*/

.job-benefits-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.75rem;
}


/*--------------------------------------------------------------
# Jobs cards wrapper
--------------------------------------------------------------*/

.jobs-cards-wrapper.has-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
    place-content: start;
    grid-area: jobsCards;
}
.jobs-cards-wrapper .job-card {
    border: 3px solid #fff;
    min-width: 0;
    min-height: 0;
}
.jobs-cards-wrapper:hover .job-card:not(:hover) {
    background-color: #f1f1f1;
    border-color: #f1f1f1;
}
.jobs-cards-wrapper:hover .job-card:not(.static):not(.job-empty-card):hover {
    border: 3px solid #9b0e39;
}


/* Job card dot */

.job-card.has-hover:hover .job-dot {
    width: 2rem;
    height: 2rem;
    background: var(--red);
}
.job-card.has-hover:hover .job-dot svg {
    transform: scale(1) rotate(-30deg);
}


/*--------------------------------------------------------------
# Apply card toggle wrapper + open filter wrapper
--------------------------------------------------------------*/

.wrapper.apply-card-toggle,
.wrapper.open-filters-toggle,
.wrapper.open-map-filters-toggle {
    display: none;
}


/*--------------------------------------------------------------
# Latest careers wrapper
--------------------------------------------------------------*/

.latest-careers-wrapper {
    width: 375px;
    padding: 0 2rem;
}
.latest-careers-wrapper h2 {
    margin-bottom: 2rem;
}

.latest-careers-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.latest-careers-wrapper ul li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    position: relative;
    transition: all 200ms;
}

.latest-careers-wrapper ul li:hover {
    transform: translateX(15px);
}

.latest-careers-wrapper ul li a {
    text-decoration: none;
}
.latest-careers-wrapper ul li svg {
    width: 1.25rem;
    height: 1.25rem;
}

.latest-careers-wrapper.enhanced {
    font-size: 1.1rem;
}


    /* Latest careers wrapper utility classes */

.latest-careers-wrapper.left {
    margin-left: auto;
    line-height: normal;
}


/*--------------------------------------------------------------
# Blocks wrapper utility classes
--------------------------------------------------------------*/

.blocks-wrapper.has-left-outline .card:first-of-type {
    padding-left: 0;
}


/*--------------------------------------------------------------
# Maps wrapper
--------------------------------------------------------------*/

.maps-wrapper {
    display: block;
    height: 35rem;
}
.maps-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.maps-wrap>.maps, .maps-wrap>.maps>iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    outline: 0;
    border: none;
    width: 100%;
    height: 100%;
}


/*--------------------------------------------------------------
# Contact banner button wrapper
--------------------------------------------------------------*/

.contact-banner-btn-wrapper {
    display: flex;
    gap: 1.25rem;
    margin: 3rem 0;
}


/*--------------------------------------------------------------
# Media querys
--------------------------------------------------------------*/

@media all and (max-width: 1200px) {

    /* Job cards wrapper */

    .jobs-cards-wrapper.has-grid {
        grid-template-columns: 1fr 1fr;
    }




    /* Job benefits wrapper */

    .job-benefits-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }


}

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

    /* Latest careers wrapper (banner) */

    .latest-careers-wrapper {
        margin-top: 3rem;
        padding: 0;
    }
    .latest-careers-wrapper.left {
        margin-left: 0;
    }



    /* Jobs wrapper */

    .wrapper:not(.static).jobs-wrapper {
        margin-top: 30px;
        z-index: unset;
    }

    .jobs-wrapper-inner {
        grid-template-columns: 1fr;
    }




    /* Wrapper with shape */

    .wrapper.has-shape.shape-normal .shape-top-main svg {
        min-height: 15rem;
        max-height: 15rem;
    }




    /* Article wrap with side */

    .article-wrap.has-side {
        flex-direction: column;
    }


    .article-wrap.has-side:not(.has-right) > .side-wrap {
        margin-right: 0;
        margin-bottom: 2rem;
    }




    /* Apply card toggle wrapper  */

    body:not(.scrolled-safe) .wrapper.apply-card-toggle {
        transform: translateY(calc(100% + 1rem));
    }

    .wrapper.apply-card-toggle svg {
        width: 1.15rem;
        height: 1.15rem;
        transform: rotate(180deg);
    }
    .wrapper.apply-card-toggle p {
        margin-bottom: 0;
        font-weight: 500;
        font-size: 1.1rem;
    }

    body.apply-card-posted .wrapper.apply-card-toggle {
        transform: translateY(calc(100% + 1rem));
    }




    /* Filters toggle wrapper */

    body.menu-open-job-filters .wrapper.open-filters-toggle,
    body.menu-open-map-job-filters .wrapper.open-map-filters-toggle {
        transform: translateY(100%);
        bottom: 0;
    }

    .wrapper.open-filters-toggle,
    .wrapper.apply-card-toggle,
    .wrapper.open-map-filters-toggle {
        background: #FFFFFF;
        position: fixed;
        bottom: 1rem;
        left: 10px;
        right: 10px;
        padding: 1.25rem 1.5rem;
        border-radius: 1rem;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        display: flex;
        align-items: center;
        gap: 1rem;
        pointer-events: all;
        transition: transform 300ms;
        z-index: 25;
        max-width: 25rem;
        margin: 0 auto;
    }

    .wrapper.apply-card-toggle,
    .wrapper.apply-card-toggle svg {
        background: var(--red);
        color: #FFFFFF;
        fill: #FFFFFF;
    }

    .wrapper.open-map-filters-toggle {
        bottom: 3rem;
        position: absolute;
    }

    .wrapper.open-filters-toggle svg,
    .wrapper.open-map-filters-toggle svg {
        width: 1.35rem;
        height: 1.35rem;
    }
    .wrapper.open-filters-toggle p,
    .wrapper.open-map-filters-toggle p {
        margin-bottom: 0;
    }




    /* Master wrapper (job detailpage) */

    .master-wrapper > .container:nth-of-type(1) {
        position: relative;
    }




    /* Banner */

    .wrapper .wrap-bottom.floating .article-wrap.banner {
        margin-bottom: 0;
    }


}

@media all and (max-width: 768px) {

    .jobs-wrapper-inner .jobs-wrapper-title h1 {
        margin-bottom: 25px;
    }


    /* Maps wrapper */

    .maps-wrapper {
        max-height: 100vw;
    }




    /* Jobs wrapper */

    .jobs-wrapper-inner {
        display: block;
    }




    /* Wrapper with shape */

    .wrapper.has-shape.shape-normal .shape-top-main svg {
        min-height: 10rem;
        max-height: 10rem;
    }




    /* Wrapper spacings */

    .wrapper.spacing-top {
        margin-top: 0;
    }


}

@media all and (max-width: 575px) {



    .wrapper.divider {
        padding: 30px 0 30px;
    }
    .wrapper.compact {
        padding: 45px 0 45px;
    }
    .wrapper.medium {
        padding: 60px 0 60px;
    }
    .wrapper.large {
        padding: 70px 0 70px;
    }
    .wrapper.spacing {
        padding: 80px 0 80px;
    }


    .wrapper.spacing-top {
        padding-top: 80px;
    }
    .wrapper.spacing-bottom {
        padding-bottom: 80px;
    }



    .wrapper.divider.half-top {
        padding-top: 20px;
    }
    .wrapper.compact.half-top {
        padding-top: 20px;
    }
    .wrapper.medium.half-top {
        padding-top: 30px;
    }
    .wrapper.large.half-top {
        padding-top: 35px;
    }
    .wrapper.spacing.half-top {
        padding-top: 40px;
    }


    .wrapper.divider.half-bottom {
        padding-bottom: 20px;
    }
    .wrapper.compact.half-bottom {
        padding-bottom: 20px;
    }
    .wrapper.medium.half-bottom {
        padding-bottom: 30px;
    }
    .wrapper.large.half-bottom {
        padding-bottom: 35px;
    }
    .wrapper.spacing.half-bottom {
        padding-bottom: 40px;
    }








    /* Jobs wrapper */

    .jobs-wrapper .jobs-shape-main svg {
        height: 30rem;
    }

    .jobs-cards-wrapper.has-grid {
        grid-template-columns: 1fr;
    }




    /* Article wrap with side */

    .article-wrap.has-side > .side-wrap {
        width: 14rem;
        height: 14rem;
    }




    /* Job benefits wrapper */

    .job-benefits-wrapper {
        grid-template-columns: 1fr;
    }




    /* Contact banner button wrapper */

    .contact-banner-btn-wrapper {
       flex-wrap: wrap;
    }

    .latest-careers-wrapper.enhanced {
        font-size: 1.05rem;
    }


}