/* line time –––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li {
    list-style-type: none;
    position: relative;
    width: 6px;
    margin: 0 auto;
    padding-top: 20px;
    background: #45699099;
    border-radius: 3px;
}

.timeline ul li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: inherit;
    z-index: 1;
}

.timeline ul li div {
    position: relative;
    bottom: 0;
    width: 400px;
    padding: 15px;
    /*     background: #f45b69; */
}


/* text */

.text_date1 {
    /* position: absolute; */
    color: #3a90c2;
}

.text_date2 {
    /* position: absolute; */
    color: #62c1f7;
}

.text_date3 {
    /* position: absolute; */
    color: orange;
}

.text_date4 {
    /* position: absolute; */
    color: #024b75;
}

.text_date5 {
    /* position: absolute; */
    color: purple;
}

.text_date6 {
    /* position: absolute; */
    color: rgb(81, 177, 190);
}

.text_date7 {
    /* position: absolute; */
    color: #82d208;
}

.text_date8 {
    /* position: absolute; */
    color: #002A42;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}


/*  punto y linea 1 */

.timeline ul li.in-view1::after {
    background-color: #3a90c2;
}

.timeline ul li.in-view1:nth-child(odd) div::before {
    left: -30px;
    border-width: 0 0 5px 0;
    border-color: transparent transparent #3a90c2 transparent;
    width: 435px;
    height: 0;
    content: "";
    position: absolute;
    top: 92%;
    border-radius: 3px;
}


/*  punto y linea 2 */

.timeline ul li.in-view2::after {
    background-color: #62c1f7;
}

.timeline ul li.in-view2::after {
    background: #62c1f7 !important;
}

.timeline ul li.in-view2:nth-child(even) div::before {
    border-width: 0 0 5px 0;
    left: -7px;
    border-color: transparent transparent #62c1f7 transparent;
    width: 435px;
    height: 0;
    content: "";
    position: absolute;
    top: 90%;
    border-radius: 3px;
}


/*  punto y linea 3*/

.timeline ul li.in-view3::after {
    background-color: orange;
}

.timeline ul li.in-view3::after {
    background: orange !important;
}

.timeline ul li.in-view3 div::before {
    border-width: 0 0 5px 0;
    left: -30px;
    border-color: transparent transparent orange transparent;
    width: 435px;
    height: 0;
    content: "";
    position: absolute;
    top: 90%;
    border-radius: 3px;
}


/*  punto y linea 4*/

.timeline ul li.in-view4::after {
    background-color: #024b75;
}

.timeline ul li.in-view4::after {
    background: #024b75 !important;
}

.timeline ul li.in-view4 div::before {
    border-width: 0 0 5px 0;
    left: -7px;
    border-color: transparent transparent #024b75 transparent;
    width: 435px;
    height: 0;
    content: "";
    position: absolute;
    top: 90%;
    border-radius: 3px;
}


/*  punto y linea 5*/

.timeline ul li.in-view5::after {
    background-color: purple;
}

.timeline ul li.in-view5::after {
    background: purple !important;
}

.timeline ul li.in-view5 div::before {
    border-width: 0 0 5px 0;
    left: -30px;
    border-color: transparent transparent purple transparent;
    width: 435px;
    height: 0;
    content: "";
    position: absolute;
    top: 92%;
    border-radius: 3px;
}


/*  punto y linea 6*/

.timeline ul li.in-view6::after {
    background-color: rgb(81, 177, 190);
}

.timeline ul li.in-view6::after {
    background: rgb(81, 177, 190) !important;
}

.timeline ul li.in-view6 div::before {
    border-width: 0 0 5px 0;
    left: -7px;
    border-color: transparent transparent rgb(81, 177, 190) transparent;
    width: 435px;
    height: 0;
    content: "";
    position: absolute;
    top: 90%;
    border-radius: 3px;
}


/*  punto y linea 7*/

.timeline ul li.in-view7::after {
    background-color: #82d208;
}

.timeline ul li.in-view7::after {
    background: #82d208;
}

.timeline ul li.in-view7 div::before {
    border-width: 0 0 5px 0;
    left: -30px;
    border-color: transparent transparent #82d208 transparent;
    width: 435px;
    height: 0;
    content: "";
    position: absolute;
    top: 88%;
    border-radius: 3px;
}


/*  punto y linea 8*/

.timeline ul li.in-view8::after {
    background-color: #002A42;
}

.timeline ul li.in-view8.timeline-infinite {
    background: #002A42;
}

.timeline ul li.in-view8 div::before {
    border-width: 0 0 5px 0;
    left: -7px;
    border-color: transparent transparent #002A42 transparent;
    width: 435px;
    height: 0;
    content: "";
    position: absolute;
    top: 88%;
    border-radius: 3px;
}

.timeline ul li div::before {
    content: "";
    position: absolute;
    bottom: 7px;
    width: 0;
    height: 0;
    border-style: solid;
}

.timeline ul li:nth-child(odd) div {
    left: 45px;
}

.timeline ul li:nth-child(even) div {
    left: -439px;
}

time {
    display: block;
    font-size: 1.7rem;
    font-weight: bold;
    margin-bottom: 8px;
}


/* effects */

.timeline ul li::after {
    transition: background 0.5s ease-in-out;
}

.timeline ul li div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
    transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
    transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
    transform: none;
    visibility: visible;
    opacity: 1;
}


/* general media screen*/

@media screen and (max-width: 900px) {
    .timeline ul li div {
        width: 250px;
    }
    .timeline ul li:nth-child(even) div {
        left: -289px;
    }
    .timeline ul li.in-view2:nth-child(even) div::before {
        left: -145px;
    }
    .timeline ul li.in-view4:nth-child(even) div::before {
        left: -145px;
        top: 91%;
    }
    .timeline ul li.in-view6:nth-child(even) div::before {
        left: -145px;
        top: 92%;
    }
    .timeline ul li.in-view8:nth-child(even) div::before {
        left: -145px;
    }
    .timeline ul li.in-view1:nth-child(odd) div::before {
        top: 93%;
    }
    .timeline ul li.in-view3:nth-child(odd) div::before {
        top: 92%;
    }
    .timeline ul li.in-view5:nth-child(odd) div::before {
        top: 93%;
    }
    .timeline ul li.in-view7:nth-child(odd) div::before {
        top: 91%;
    }
}

@media screen and (max-width: 600px) {
    .timeline ul li div {
        width: 250px;
    }
    .timeline ul li:nth-child(even) div {
        left: -289px;
    }
    .timeline ul li.in-view2:nth-child(even) div::before {
        left: -28px;
        top: 89%;
    }
    .timeline ul li.in-view4:nth-child(even) div::before {
        left: -28px;
        top: 89%;
    }
    .timeline ul li.in-view6:nth-child(even) div::before {
        left: -28px;
        top: 91%;
    }
    .timeline ul li.in-view8:nth-child(even) div::before {
        left: -28px;
        top: 88%;
    }
    .timeline ul li {
        margin-left: 20px;
    }
    .timeline ul li div {
        width: calc(100vw - 91px);
    }
    .timeline ul li:nth-child(even) div {
        left: 45px;
    }
    .timeline ul li.in-view1:nth-child(odd) div::before {
        top: 92%;
    }
    .timeline ul li.in-view3:nth-child(odd) div::before {
        top: 90%;
    }
    .timeline ul li.in-view5:nth-child(odd) div::before {
        top: 92%;
    }
    .timeline ul li.in-view7:nth-child(odd) div::before {
        top: 88%;
    }
}


/* style */

.timeline-clippy ul li::after {
    width: 40px;
    height: 40px;
    border-radius: 0;
}

.timeline-rhombus ul li::after {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.timeline-rhombus ul li div::before {
    bottom: 12px;
}

.timeline-star ul li::after {
    clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.timeline-heptagon ul li::after {
    clip-path: polygon( 50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}

.timeline-infinite ul li::after {
    animation: scaleAnimation 2s infinite;
}

@keyframes scaleAnimation {
    0% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.25);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}