:root {
    --journey-canvas-vw: min(1vw, 22px);
    /* at 2200px windows lines break and stuff, so just cap it there. */
}

#infographic-journey {
    position: relative;
    width: calc(85 * var(--journey-canvas-vw));
    z-index: 6;
}

.infographic-text-box {
    font-size: 3px;
    fill: black;
}

#infographic-path-landscape,
#infographic-path-portrait {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.journey-circle {
    position: absolute;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    transition: top 1s ease-in-out, bottom 1s ease-in-out, left 1s ease-in-out, right 1s ease-in-out, opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
    overflow: visible;
    background-color: var(--secondary-color);
    width: 100px;
    min-width: 100px;
    height: 100px;
    border-radius: 50%;
}

.journey-circle::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    content: ' ';
    background-color: var(--header-color);
}

.journey-circle:nth-of-type(1)::before,
.journey-circle:nth-of-type(1) .journey-title::after {
    opacity: 0;
}

.journey-circle:nth-of-type(2)::before,
.journey-circle:nth-of-type(2) .journey-title::after {
    opacity: 0.2;
}

.journey-circle:nth-of-type(3)::before,
.journey-circle:nth-of-type(3) .journey-title::after {
    opacity: 0.4;
}

.journey-circle:nth-of-type(4)::before,
.journey-circle:nth-of-type(4) .journey-title::after {
    opacity: 0.6;
}

.journey-circle:nth-of-type(5)::before,
.journey-circle:nth-of-type(5) .journey-title::after {
    opacity: 0.8;
}

.journey-circle:nth-of-type(6)::before,
.journey-circle:nth-of-type(6) .journey-title::after {
    opacity: 1;
}

.journey-label {
    position: absolute;
    display: block;
}

.journey-title {
    position: relative;
    font-weight: 600;
    font-stretch: 100%;
    font-variation-settings: "wght" 600, "wdth" 100;
    border-bottom: 2px solid var(--secondary-color);
    margin-bottom: 10px;
}

.journey-title::after {
    content: ' ';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    border-bottom: 2px solid var(--header-color);
}

.infographic-number {
    font-size: 50px;
    font-weight: 900;
    font-variation-settings: "wght" 900;
    transform: translateY(.12em);
    color: var(--light);
    text-shadow: 1px 2px 0.1px rgba(0, 0, 0, 0.1);
}

.journey-circle,
.journey-circle::before {
    box-shadow:
        1px 2px 3px rgba(0, 0, 0, 0.05) inset,
        0px 0px 10px rgba(0, 0, 0, 0.1) inset;
}


@media only screen and (min-width : 1200px) {

    /* landscape */
    :root {
        --circle-space: 200px;
        --circle-diameter: 100px;
    }

    #infographic-journey {
        height: calc(400px + var(--slanted-border));
    }

    #infographic-path-landscape {
        display: block;
    }

    .journey-label {
        top: 130px;
        width: 180px;
    }

    .journey-circle {
        position: absolute;
        top: 0;
        width: var(--circle-diameter);
        min-width: var(--circle-diameter);
        height: var(--circle-diameter);
    }

    .journey-circle:nth-of-type(1),
    .journey-circle:nth-of-type(3),
    .journey-circle:nth-of-type(5) {
        top: 130px;
    }

    #examination-circle {
        left: calc(50% - 0.5 * var(--circle-diameter) - 2.5 * var(--circle-space));
    }

    #pipeline-circle {
        left: calc(50% - 0.5 * var(--circle-diameter) - 1.5 * var(--circle-space));
    }

    #predictability-circle {
        left: calc(50% - 0.5 * var(--circle-diameter) - 0.5 * var(--circle-space));
    }

    #service-circle {
        left: calc(50% - 0.5 * var(--circle-diameter) + 0.5 * var(--circle-space));
    }

    #integration-circle {
        left: calc(50% - 0.5 * var(--circle-diameter) + 1.5 * var(--circle-space));
    }

    #revenue-circle {
        left: calc(50% - 0.5 * var(--circle-diameter) + 2.5 * var(--circle-space));
    }
}

@media only screen and (max-width : 1200px) and (min-width : 660px) {

    /* portrait  wide */
    :root {
        --circle-space: 100px;
        --circle-diameter: 100px;
    }

    #infographic-journey {
        height: calc(6.5 * var(--circle-space));
    }

    #infographic-path-portrait {
        display: block;
    }

    #infographic-path-landscape {
        display: block;
    }

    .journey-label {
        top: 0;
        left: 120px;
        width: 180px;
    }

    .journey-circle {
        position: absolute;
        top: 0;
        left: calc(50% - 100px);
        width: var(--circle-diameter);
        min-width: var(--circle-diameter);
        height: var(--circle-diameter);
    }

    .journey-circle:nth-of-type(1),
    .journey-circle:nth-of-type(3),
    .journey-circle:nth-of-type(5) {
        left: calc(50% - 180px - var(--circle-diameter));
    }

    .journey-circle:nth-of-type(2),
    .journey-circle:nth-of-type(4),
    .journey-circle:nth-of-type(6) {
        left: calc(50%);
    }

    #examination-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) - 2.5 * var(--circle-space));
    }

    #pipeline-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) - 1.5 * var(--circle-space));
    }

    #predictability-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) - 0.5 * var(--circle-space));
    }

    #service-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) + 0.5 * var(--circle-space));
    }

    #integration-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) + 1.5 * var(--circle-space));
    }

    #revenue-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) + 2.5 * var(--circle-space));
    }
}

@media only screen and (max-width : 660px) {
    /* portrait narrow */

    :root {
        --circle-space: 150px;
        --circle-diameter: 100px;
    }

    .journey-header {
        max-width: 310px;
        margin: 0;
    }

    #infographic-journey {
        height: calc(6 * var(--circle-space));
    }

    #infographic-path-portrait {
        display: block;
    }

    #infographic-path-landscape {
        display: block;
    }

    .journey-label {
        top: 0;
        left: 120px;
        width: 180px;
    }

    .journey-circle {
        position: absolute;
        top: 0;
        left: calc(50% - 150px);
        width: var(--circle-diameter);
        min-width: var(--circle-diameter);
        height: var(--circle-diameter);
    }

    .journey-circle:nth-of-type(1),
    .journey-circle:nth-of-type(3),
    .journey-circle:nth-of-type(5) {
        left: calc(45% - 150px);
    }

    .journey-circle:nth-of-type(2),
    .journey-circle:nth-of-type(4),
    .journey-circle:nth-of-type(6) {
        left: calc(55% - 150px);
    }


    #examination-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) - 2.5 * var(--circle-space));
    }

    #pipeline-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) - 1.5 * var(--circle-space));
    }

    #predictability-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) - 0.5 * var(--circle-space));
    }

    #service-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) + 0.5 * var(--circle-space));
    }

    #integration-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) + 1.5 * var(--circle-space));
    }

    #revenue-circle {
        top: calc(50% - 0.5 * var(--circle-diameter) + 2.5 * var(--circle-space));
    }
}


@media only screen and (max-width : 320px) {
    :root {
        --circle-space: 150px;
        --circle-diameter: 80px;
    }

    .journey-label {
        top: 0;
        width: 120px;
        max-width: 120px;
    }

    .journey-circle {
        position: absolute;
        top: 0;
        left: calc(50% - 120px) !important;
    }
}