.line_box {
    display: flex;
    margin-bottom: 40px;
}

.text_circle {
    flex: 1;
    text-align: center;
    position: relative;
}

.text_circle:after {
    background-color: grey;
    bottom: 1.25em;
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    right: 0;
    width: 50%;
    z-index: -1;
}

.stav_projektu .text_circle:after,
.stav_projektu .text_circle:before {
    background-color: grey;
}

.line_box h4 {
    color: #189599;
    font-weight: bold;
}

.line_box h4,
.line_box p {
    font-size: 12px;
    margin-bottom: 0;
    padding: 0 5px;
}

.sub_2008 {
    position: absolute;
    right: 1%;
    bottom: -60%;
}

.sub_2012 {
    position: absolute;
    right: -10%;
    bottom: -60%;
}

.subline {
    position: absolute;
    right: -25px;
    bottom: -43%;
}

.subline:before {
    content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    bottom: 14px;
    right: 15px;
    background-color: #189599;
    border-radius: 50%;
    top: -25px;
}

.subline h6 {
    margin-bottom: 0;
}

.timeline {
    margin: 40px 0;
}

.text_circle.done:after,
.text_circle.done+.text_circle:before,
.stav_projektu .text_circle.done:after,
.stav_projektu .text_circle.done+.text_circle:before {
    background-color: #189599;
}

.text_circle.sub:after {
    background-color: #189599;
}

.text_circle:not(:first-child):before {
    bottom: 1.25em;
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    left: 0;
    width: 50%;
    z-index: -1;
    background-color: grey;
}

.stav_projektu .text_circle:not(:first-child):before {
    background-color: grey;
}

.text_circle:last-child:after {
    width: 0;
}

.circle {
    height: 100%;
}

.tvar {
    height: 40px;
    width: 40px;
    border: 2px solid #189599;
    display: flex;
    position: relative;
    border-radius: 100%;
    top: -43px;
    margin: 3px auto;
    background-color: #fff;
}

.tvar span {
    margin: 25% auto;
    height: 20px;
    width: 20px;
    background-color: #189599;
    border-radius: 100%;
    color: #fff;
}

.stav_projektu .tvar {
    border: 2px solid grey;
}

.stav_projektu .done .tvar,
.stav_projektu .sub .tvar {
    border: 2px solid #189599;
}

.subline h6 {
    color: #189599;
}

.timeline .card-header:hover {
    background-color: #ececec;
    cursor: pointer;
}

/* iPhone X ----------------------------------- */
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {
    .subline:before {
        top: -43px;
    }
    .sub_2012 {
        right: -25%;
        bottom: -82%;
    }
}

@media only screen and (device-width : 812px) and (device-height : 375px) and (orientation : landscape) and (-webkit-device-pixel-ratio : 3) {
    .subline:before {
        top: -31px;
    }
    .sub_2008 {
        right: 1%;
        bottom: -47%;
    }
}

/* iPad portrait ----------------------------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .subline:before {
        top: -29px;
    }
}

/* mobile width till 767px ----------------------------------- */
@media (max-width: 767px) {
    .subline:before {
        top: -30px;
    }
}

/* Portrait iPad Pro */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    .subline:before {
        top: -23px;
    }
}

/* mobile width till 480px ----------------------------------- */
@media (max-width: 480px) {
    .subline:before {
        top: -43px;
    }

    .sub_2012 {
        right: -25%;
        bottom: -82%;
    }
}