.work-process__markers-container {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 3;
}

.work-process__markers-container > div {
    position: absolute;
    width: 85px;
    display: flex;
}

.work-process__markers-container > div > svg {
    width: 100%;
    height: 100%;
    transform: scale(0.76);
    opacity: 0;
    transition: transform 0.25s, opacity 0.25s;
}

.work-process__markers-container > div > .markers-container__marker--shown,
.work-process__markers-container > div:hover > svg {
    transform: scale(1);
    opacity: 1;
}

.markers-container__additional-text {
    position: fixed;
    background-color: var(--color-secondary-300);
    border-radius: 4px;
    bottom: 0;
    left: 0;
    margin: 12px;
    width: calc(100% - 24px);
    opacity: 0;
    transform: translateY(calc(100% + 12px));
    transition: transform 0.25s, opacity 0.25s;
}

.markers-container__additional-text--shown {
    opacity: 1;
    transform: translateY(0);
}

.markers-container__additional-text > div {
    padding: 20px 15px;
}

.markers-container__additional-text > div:first-child {
    background-color: var(--color-secondary-400);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.markers-container__additional-text p {
    color: var(--color-primary-300);
    font: 14px/25px font-primary;
    margin: 0;
}

.markers-container__additional-text > div:first-child p {
    text-transform: uppercase;
    font-weight: bold;
}

.markers-container__additional-text > div:first-child svg {
    width: 24px;
    height: 24px;
    fill: var(--color-primary-600);
}

.work-process__markers-container > div#scoping-session,
.work-process__markers-container > div#definition,
.work-process__markers-container > div#tests {
    left: calc(50% - 42.5px);
}

.work-process__markers-container > div#research,
.work-process__markers-container > div#prototype,
.work-process__markers-container > div#frontend {
    right: calc(50% + 13px);
}

.work-process__markers-container > div#ideation,
.work-process__markers-container > div#design,
.work-process__markers-container > div#hosting {
    left: calc(50% + 13px);
}

.work-process__markers-container > div#backend,
.work-process__markers-container > div#qa {
    left: calc(50% - 13px);
}

.work-process__markers-container > div#control,
.work-process__markers-container > div#support {
    right: calc(50% - 13px);
}

.work-process__markers-container > div#scoping-session {
    top: -30px;
}

.work-process__markers-container > div#definition {
    top: 190px;
}

.work-process__markers-container > div#research,
.work-process__markers-container > div#ideation {
    top: 455px;
}

.work-process__markers-container > div#prototype,
.work-process__markers-container > div#design {
    top: 767px;
}

.work-process__markers-container > div#frontend {
    top: 1078px;
}

.work-process__markers-container > div#backend {
    top: 1028px;
}

.work-process__markers-container > div#qa {
    top: 1130px;
}

.work-process__markers-container > div#tests {
    top: 1346px;
}

.work-process__markers-container > div#control {
    top: 1560px;
}

.work-process__markers-container > div#support {
    top: 1660px;
}

.work-process__markers-container > div#hosting {
    top: 1610px;
}

@media screen and (min-width: 768px) {
    .work-process__markers-container > div {
        width: 105px;
    }

    .work-process__markers-container > div#scoping-session,
    .work-process__markers-container > div#definition,
    .work-process__markers-container > div#tests {
        left: calc(50% - 52.5px);
    }

    .work-process__markers-container > div#research,
    .work-process__markers-container > div#prototype,
    .work-process__markers-container > div#frontend {
        left: calc(50% - 120px);
    }

    .work-process__markers-container > div#ideation,
    .work-process__markers-container > div#design,
    .work-process__markers-container > div#hosting {
        left: calc(50% + 16px);
    }

    .work-process__markers-container > div#backend,
    .work-process__markers-container > div#qa {
        left: calc(50% - 20px);
    }

    .work-process__markers-container > div#control,
    .work-process__markers-container > div#support {
        left: calc(50% - 88px);
    }

    .work-process__markers-container > div#scoping-session {
        top: -37px;
    }
    
    .work-process__markers-container > div#definition {
        top: 197px;
    }
    
    .work-process__markers-container > div#research,
    .work-process__markers-container > div#ideation {
        top: 485px;
    }
    
    .work-process__markers-container > div#prototype,
    .work-process__markers-container > div#design {
        top: 830px;
    }
    
    .work-process__markers-container > div#frontend {
        top: 1172px;
    }
    
    .work-process__markers-container > div#backend {
        top: 1112px;
    }
    
    .work-process__markers-container > div#qa {
        top: 1237px;
    }
    
    .work-process__markers-container > div#tests {
        top: 1462px;
    }
    
    .work-process__markers-container > div#control {
        top: 1688px;
    }
    
    .work-process__markers-container > div#support {
        top: 1812px;
    }
    
    .work-process__markers-container > div#hosting {
        top: 1750px;
    }
}

@media screen and (min-width: 912px) {
    .markers-container__additional-text {
        position: absolute;
        left: unset;
        bottom: unset;
        right: -400px;
        top: -100px;
        width: 202px;
        transform: translateX(50vw);
        background-color: transparent;
    }

    .markers-container__additional-text--shown {
        transform: translateX(0);
    }

    .markers-container__additional-text > div:first-child {
        background-color: transparent;
        padding: 0 15px;
    }

    .markers-container__additional-text button {
        display: none;
    }

    #research .markers-container__additional-text,
    #prototype .markers-container__additional-text,
    #frontend .markers-container__additional-text {
        right: -465px;
    }

    #ideation .markers-container__additional-text,
    #design .markers-container__additional-text,
    #hosting .markers-container__additional-text {
        right: -330px;
    }

    #control .markers-container__additional-text,
    #support .markers-container__additional-text {
        right: -450px;
    }

    #backend .markers-container__additional-text,
    #qa .markers-container__additional-text {
        right: -350px;
    }
}

@media screen and (min-width: 1200px) {
    .markers-container__additional-text {
        right: -520px;
        top: -60px;
        width: 283px;
    }

    #research .markers-container__additional-text,
    #prototype .markers-container__additional-text,
    #frontend .markers-container__additional-text {
        right: -585px;
    }

    #ideation .markers-container__additional-text,
    #design .markers-container__additional-text,
    #hosting .markers-container__additional-text {
        right: -450px;
    }

    #control .markers-container__additional-text,
    #support .markers-container__additional-text {
        right: -570px;
    }

    #backend .markers-container__additional-text,
    #qa .markers-container__additional-text {
        right: -470px;
    }
}

@media screen and (min-width: 1400px) {
    .work-process__markers-container > div {
        width: 170px;
    }

    .work-process__markers-container > div#scoping-session,
    .work-process__markers-container > div#definition,
    .work-process__markers-container > div#tests {
        left: calc(50% - 85px);
    }

    .work-process__markers-container > div#research,
    .work-process__markers-container > div#prototype,
    .work-process__markers-container > div#frontend {
        left: calc(50% - 196px);
    }

    .work-process__markers-container > div#ideation,
    .work-process__markers-container > div#design,
    .work-process__markers-container > div#hosting {
        left: calc(50% + 25px);
    }

    .work-process__markers-container > div#backend,
    .work-process__markers-container > div#qa {
        left: calc(50% - 30px);
    }

    .work-process__markers-container > div#control,
    .work-process__markers-container > div#support {
        left: calc(50% - 140px);
    }

    .work-process__markers-container > div#scoping-session {
        top: -58px;
    }
    
    .work-process__markers-container > div#definition {
        top: 208px;
    }
    
    .work-process__markers-container > div#research,
    .work-process__markers-container > div#ideation {
        top: 563px;
    }
    
    .work-process__markers-container > div#prototype,
    .work-process__markers-container > div#design {
        top: 1007px;
    }
    
    .work-process__markers-container > div#frontend {
        top: 1448px;
    }
    
    .work-process__markers-container > div#backend {
        top: 1348px;
    }
    
    .work-process__markers-container > div#qa {
        top: 1548px;
    }
    
    .work-process__markers-container > div#tests {
        top: 1803px;
    }
    
    .work-process__markers-container > div#control {
        top: 2056px;
    }
    
    .work-process__markers-container > div#support {
        top: 2256px;
    }
    
    .work-process__markers-container > div#hosting {
        top: 2156px;
    }
    
    .markers-container__additional-text {
        width: 380px;
        right: -640px;
    }

    .markers-container__additional-text p {
        font: 18px/30px font-primary;
    }

    .markers-container__additional-text > div:first-child p {
        font: normal normal 600 18px/40px font-primary;
    }

    #research .markers-container__additional-text,
    #prototype .markers-container__additional-text,
    #frontend .markers-container__additional-text {
        right: -750px;
    }

    #ideation .markers-container__additional-text,
    #design .markers-container__additional-text,
    #hosting .markers-container__additional-text {
        right: -530px;
    }

    #control .markers-container__additional-text,
    #support .markers-container__additional-text {
        right: -690px;
    }

    #backend .markers-container__additional-text,
    #qa .markers-container__additional-text {
        right: -560px;
    }
}