.timeline {list-style-type:none;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:10px;color: rgba(51, 51, 51, 0.498039215686275);margin-block-start:0em;padding-inline-start:20px;padding-top:50px;}
.li {transition:all 200ms ease-in}
.estagio {margin-bottom:10px;display:flex;flex-direction:column;align-items:center}
.estagio .estado {text-transform:uppercase;font-weight:bold;margin-bottom:1rem;text-align:left;height:25px}
.status {padding: 0px 40px; display: flex; justify-content: center; border-top: 2px solid #808080; position: relative; transition: all 200ms ease-in}
.status h4 {font-weight: 600}
.status:before {width:25px;height:25px;background-color:white;border-radius:25px;border:1px solid #808080;position:absolute;top:-15px;left:0%;transition:all 200ms ease-in;/*Posiciona o icone no centro do circulo*/font-family:FontAwesome;color:#FFFFFF;content:"";display:flex;align-items:center;justify-content:center}
.li.complete .status {border-top: 2px solid #808080}
.li.complete .status:before {content:"\f00c";background-color:#808080;border:none;transition:all 200ms ease-in;font-size:18px}
.li.complete .status h4, .li.complete {color:#808080}
.li.atual .status {border-top: 2px solid #808080}
.li.atual .status:before {content:"\f041";background-color:#F59A23;border:none;transition:all 200ms ease-in;font-size:18px}
.li.atual .status h4, .li.atual  {color:#F59A23}
@media (min-device-width: 320px) and (max-device-width: 700px) {
  .timeline {list-style-type: none; display: block}
  .li {transition: all 200ms ease-in; display: flex; width: inherit}
  .estagio {width:100px}
  .li.complete .status, .li.atual .status, .status {border-top:0}
  .status:before {left: -8%; top: 30%; transition: all 200ms ease-in}
}