.timeline {
    position: relative;
    padding: 1rem;
    margin: 0 auto;
    max-width: 1300px;
    box-sizing: border-box;
}

.timeline:before {
    content: '';
    position: absolute;
    height: 100%;
    border: 2px solid black;
    right: 40px;
    top: 0;
}

.timeline:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (min-width: 700px) {
    .timeline {
        padding: 2rem;
    }

    .timeline:before {
        left: calc(50% - 1px);
        right: auto;
    }
}

.timeline-item {
    padding: 1rem;
    position: relative;
    margin: 1rem 3rem 1rem 1rem;
    clear: both;
}

.timeline-content-yellow {
    border: 2px solid #ffc100;
    border-image: linear-gradient(to right, #ffc100 0%, yellow 100%);
    border-image-slice: 1;

}

.timeline-content-blue {
    border: 2px solid #0f74a8;
    border-image: linear-gradient(to right, #0f74a8 0%, blue 100%);
    border-image-slice: 1;
}

.timeline-item:after, .timeline-item:before {
    content: '';
    position: absolute;
}

.timeline-item:before {
    right: -10px;
    top: calc(50% - 5px);
    border-style: solid;
    border-width: 10px;
    transform: rotate(45deg);
}

.timeline-content-yellow:before {
    border-color: #ffc100 #ffc100 transparent transparent;
}

.timeline-content-blue:before {
    border-color: #0f74a8 #0f74a8 transparent transparent;
}

@media screen and (min-width: 600px) {
    .timeline-item {
        width: 44%;
        margin: 1rem;
    }

    .timeline-right {
        float: right;
        margin: 1rem;
    }

    .timeline-content-yellow {
        border-image: linear-gradient(to right, #ffc100 0%, yellow 100%);
        border-image-slice: 1;
    }

    .timeline-content-blue {
        border-image: linear-gradient(to right, #0f74a8 0%, blue 100%);
        border-image-slice: 1;
    }

    .timeline-right::before {
        right: auto;
        left: -10px;
    }

    .timeline-content-yellow::before {
        border-color: #ffc100 #ffc100 transparent transparent;
    }

    .timeline-content-blue::before {
        border-color: transparent transparent #0f74a8 #0f74a8;
    }
}

.timeline-container_separador_registro {
    text-align: center;
    max-width: 150px;
    margin: 0 48px 0 auto;
    font-size: 1.8rem;
    line-height: 1;
    border-image: none;
    padding: 0.5rem 1rem 1rem;
}

.timeline-container_separador_registro:before {
    display: none;
}

@media screen and (min-width: 600px) {
    .timeline-container_separador_registro {
        text-align: center;
        margin: 0 auto;
    }

    .timeline-container_separador_registro:nth-of-type(2n):before {
        display: none;
    }
}

/*********************
  Media Query Classes
**********************/

.timeline-eship {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: white;
}

@media only screen and (max-width: 600px) {
    .timeline-eship {
        -webkit-transform: translateY(40%);
        transform: translateY(40%) rotate(90deg);
        margin-bottom: 90%;
    }
}

.timeline-eship > .timeline-eship-etapa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0.5rem;
}

.timeline-eship > .timeline-eship-etapa > .timeline-eship-icone {
    height: 6rem;
    width: 5rem;
}

.timeline-eship > .timeline-eship-etapa > .timeline-eship-centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 15rem;
}

.timeline-eship > .timeline-eship-etapa > .timeline-eship-centro > .timeline-eship-texto {
    position: absolute;
    z-index: 100;
    color: white;

    font-weight: bold;
}

.timeline-eship > .timeline-eship-etapa > .timeline-eship-centro > .timeline-eship-border-top-left {
    height: 2rem;
    width: 15rem;
    -moz-transform: skew(24deg, 0deg);
    -webkit-transform: skew(24deg, 0deg);
    -o-transform: skew(24deg, 0deg);
    -ms-transform: skew(24deg, 0deg);
    transform: skew(24deg, 0deg);
}

.timeline-eship > .timeline-eship-etapa > .timeline-eship-centro > .timeline-eship-border-bottom-left {
    height: 2rem;
    width: 15rem;
    -moz-transform: skew(-24deg, 0deg);
    -webkit-transform: skew(-24deg, 0deg);
    -o-transform: skew(-24deg, 0deg);
    -ms-transform: skew(-24deg, 0deg);
    transform: skew(-24deg, 0deg);
}

.timeline-eship > .timeline-eship-etapa > .timeline-eship-centro > .timeline-eship-border-bottom-left > .timeline-eship-datas {
    border: 1px solid rgb(234, 66, 66);
}

.timeline-eship > .timeline-eship-etapa > .timeline-eship-info {
    height: 7.5rem;
    width: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


.timeline-eship > .timeline-eship-etapa > .timeline-eship-info > div > .timeline-eship-datas {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    padding: 10px 2px;
    border-radius: 0.5rem;
}

@media only screen and (max-width: 600px) {
    .timeline-right {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%) rotate(-90deg);

    }

}
@media only screen and (max-width: 600px) {
    .timeline-eship > .timeline-eship-etapa > .timeline-eship-info > div > .timeline-eship-datas {
      width: max-content;
    }
}
@media only screen and (max-width: 600px) {
    .timeline-left {
        -webkit-transform: translateY(45%);
        transform: translateY(45%) rotate(-90deg);
    }

}