html[data-theme=neom] {
    --color-accent: var(--color-gold);
    --color-accent-25: var(--color-gold-25);
    --color-accent-50: var(--color-gold-50);
    --color-dark-accent: var(--color-dark-gold);
    --color-dark-accent-00a: var(--color-dark-gold-00a);
    --color-dark-accent-10a: var(--color-dark-gold-10a);
    --color-dark-accent-20a: var(--color-dark-gold-20a);
    --color-dark-accent-70a: var(--color-dark-gold-70a);
    --color-page-background: #f9f7f2;
    --color-accent-hover: var(--color-gold-hover);
    --checkbox-group-background-color: var(--color-cream);
    --progress-bar-background: var(--color-cream);
    --progress-bar-current-background: var(--color-dark-accent);
}

.b-journey {
    --eyebrow-text-color: var(--component-highlight-color);
    --moustache-text-color: var(--component-text-color);
    --timeline-point-color: var(--component-text-color);
    --card-height: 426px;
    --card-width: 640px;
    background-color: var(--component-background-color);
    padding-block: var(--component-block-padding,var(--container-margin));
    position: relative
}

.b-journey__heading {
    color: var(--component-heading-color);
    padding: 25px 0 50px;
    text-align: center
}

.b-journey__carousel {
    padding: 70px var(--container-margin) 30px;
    position: relative
}

.b-journey__image {
    position: relative
}

    .b-journey__image:before {
        content: "";
        display: block;
        padding-top: 100%
    }

.b-journey .a-moustache.-small {
    font-size: 16px
}

.b-journey .a-pageIndicators {
    display: none
}

.b-journey .o-dynamicCarousel {
    margin: auto;
    overflow: hidden
}

    .b-journey .o-dynamicCarousel .swiper-slide, .b-journey__card {
        max-height: var(--card-height);
        max-width: var(--card-width)
    }

.b-journey .o-dynamicCarousel__controls {
    display: none;
    left: 0;
    padding: 0 var(--containerMargin);
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    z-index: 1
}

    .b-journey .o-dynamicCarousel__controls .o-sliderControls {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 100%
    }

        .b-journey .o-dynamicCarousel__controls .o-sliderControls .m-button {
            position: absolute;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%)
        }

            .b-journey .o-dynamicCarousel__controls .o-sliderControls .m-button:last-child {
                right: 0
            }

.b-journey__cardInfoContainer {
    position: relative
}

.b-journey__cardInfo {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    opacity: 0;
    padding: 0 var(--container-margin);
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s
}

    .b-journey__cardInfo .a-moustache.-small {
        font-weight: 300
    }

    .b-journey__cardInfo.-isActive {
        opacity: 1
    }

    .b-journey__cardInfo:not(:first-child) {
        position: absolute;
        top: 0;
        width: 100%
    }

.b-journey__cardInfoMoustache {
    margin-top: 10px
}

.b-journey__timeline {
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%
}

    .b-journey__timeline:before {
        border-bottom: 1px dotted var(--component-text-color);
        bottom: 3px;
        content: "";
        opacity: .25;
        position: absolute;
        width: 100%
    }

.b-journey__timelinePointDescription {
    cursor: pointer;
    font-weight: 400;
    position: absolute;
    top: -20px
}

.-isActive .b-journey__timelinePointDescription {
    top: -24px
}

.b-journey__timelinePointDescription .a-moustache.-small {
    font-weight: 400;
    -webkit-transition: font .4s ease-out,color .4s ease-out;
    -o-transition: font .4s ease-out,color .4s ease-out;
    transition: font .4s ease-out,color .4s ease-out
}

@media(prefers-reduced-motion:no-preference) {
    .b-journey__timelinePointDescription {
        -webkit-transition: top .5s;
        -o-transition: top .5s;
        transition: top .5s
    }
}

.b-journey__timelinePoint {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative
}

    .b-journey__timelinePoint.-isActive {
        --timeline-point-color: var(--component-highlight-color);
        --moustache-text-color: var(--timeline-point-color)
    }

    .b-journey__timelinePoint.-isActive {
        --timeline-point-color: #fff;
        --moustache-text-color: #fff;
    }

.b-journey__timelineDot {
    background-color: var(--timeline-point-color);
    border-radius: 50%;
    height: 7px;
    margin-top: 12px;
    -webkit-transition: background-color .4s ease-out;
    -o-transition: background-color .4s ease-out;
    transition: background-color .4s ease-out;
    width: 7px
}

@media(min-width:768px) {
    .b-journey .o-dynamicCarousel {
        max-width: 90%
    }

    .b-journey__cardInfo {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .b-journey__carousel {
        padding: 70px 0
    }

    .b-journey .o-dynamicCarousel__controls {
        display: block
    }

    .b-journey__image {
        position: relative
    }

        .b-journey__image:before {
            content: "";
            display: block;
            padding-top: 66.5625%
        }
}

.b-journey.t-dark {
    --component-background-color: var(--color-black);
    --component-heading-color: var(--component-text-color);
    --component-highlight-color-hover: var(--color-accent-hover);
    --component-highlight-color: var(--color-accent);
    --component-text-color: var(--color-white)
}

.b-journey.t-darkMono {
    --component-background-color: var(--color-black);
    --component-heading-color: var(--component-text-color);
    --component-highlight-color-hover: var(--component-text-color);
    --component-highlight-color: var(--component-text-color);
    --component-text-color: var(--color-white)
}

.b-journey.t-light {
    --component-background-color: var(--color-page-background);
    --component-heading-color: var(--component-text-color);
    --component-highlight-color-hover: var(--color-dark-accent);
    --component-highlight-color: var(--color-accent);
    --component-text-color: var(--color-black)
}

.b-journey.t-lightMono {
    --component-background-color: var(--color-page-background);
    --component-heading-color: var(--component-text-color);
    --component-highlight-color-hover: var(--component-text-color);
    --component-highlight-color: var(--component-text-color);
    --component-text-color: var(--color-black)
}

.b-journey.t-darkGreen {
    --component-background-color: var(--color-dark-green);
    --component-heading-color: var(--component-text-color);
    --component-highlight-color-hover: var(--component-text-color);
    --component-highlight-color: var(--component-text-color);
    --component-text-color: var(--color-white)
}

.b-journey.t-orange {
    --color-accent: var(--color-orange);
    --component-background-color: var(--color-black);
    --component-heading-color: var(--component-text-color);
    --component-highlight-color-hover: var(--color-orange);
    --component-highlight-color: var(--color-orange);
    --component-text-color: var(--color-white)
}

html[data-theme=oxagon] .b-journey.t-dark, html[data-theme=oxagon] .b-journey.t-darkMono {
    --component-background-color: var(--color-dark-blue);
    --component-background-gradient: var(--color-gradient-dark-blue)
}

html[data-theme=oxagon] .b-journey.t-darkOxagonBlue {
    --component-background-color: var(--color-dark-accent);
    --component-heading-color: var(--component-text-color);
    --component-highlight-color-hover: var(--component-text-color);
    --component-highlight-color: var(--component-text-color);
    --component-text-color: var(--color-white)
}

html[data-theme=oxagon] .b-journey.t-lightOxagonBlue {
    --component-background-color: var(--color-accent);
    --component-text-color: var(--color-white);
    --component-highlight-color: var(--component-text-color);
    --component-highlight-color-hover: var(--component-text-color);
    --component-heading-color: var(--component-text-color)
}

.b-journey__timelinePoint.-isActive p.a-moustache {
    color: #fff;
}