.line_box {
  display: flex;
  margin-bottom: 40px;
}
.text_circle {
  flex: 1;
  text-align: center;
  position: relative;
}
.text_circle:after {
  background-color: var(--blue);;
  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: var(--blue);;}
.line_box h4 {
  /* color:var(--blue); */
  font-weight: bold;
}
.line_box h4,.line_box p {
  font-size: inherit;
  margin-bottom: 0;
  padding: 0 5px;
}
.subline {
  position: absolute;
  right: -25px;
  bottom: -43%;
}
.subline:before {
  content: "";
  position: absolute;
  height: 15px;
  width: 15px;
  bottom: 14px;
  right: 15px;
  /* background-color: var(--blue);; */
  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: var(--blue);;}
.text_circle.sub:after {background-color: var(--blue);;}
.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: var(--blue);;
}
.stav_projektu .text_circle:not(:first-child):before {background-color: var(--blue);;}
.text_circle:last-child:after {width: 0;}
.circle {height: 100%;}
.tvar {
  height: 40px;
  width: 40px;
  border: 2px solid var(--blue);;
  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: var(--blue);;
  border-radius: 100%;
  color: #fff;
}
.stav_projektu .tvar {border: 2px solid var(--blue);;}
.stav_projektu .done .tvar,.stav_projektu .sub .tvar {border: 2px solid var(--blue);;}
.subline h6 {color: var(--blue);;}
.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;}
}
@media only screen and (device-width : 812px) and (device-height : 375px) and (orientation : landscape) and (-webkit-device-pixel-ratio : 3) {
 .subline:before {top: -31px;}
}
/* 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;}
}