/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 30 2025 | 19:26:10 */
.timeline-container{
    display:flex;
    overflow-x:scroll;
    padding-bottom:20px;
    transform:translatey(20px);   
    height: 650px;
    position: relative;
}

.timeline-text, .timeline-image {
    height: 280px;
}

.timeline-event{
     min-width:600px;
     opacity:1;
     max-width:10px;
     cursor:grab;
     width:100%
}

.timeline-event-image{
    width:350px;
    height:100px;
    display:block
}

.timeline-event .timeline-event-contenedor{
    display:flex;
    flex-direction:column;
}

.timeline-event.bottom .timeline-event-contenedor .timeline-text{
    order:3
}
.timeline-event.bottom .timeline-event-contenedor .icon-circle{
    order:2
}
.linea-de-tiempo .elementor-shortcode{
    position:relative;
	overflow: hidden;
	height: 680px;
}

:root {
  --scroll-percentage: 0;
}
.time-line{
    width:100%;
    height:5px;

    background:#1DB4ED;
    position:absolute;
    top:50%;
    left:0;
    transform: translateY(-46px);
}
.line-time-event {
  width: var(--scroll-percentage);
  height: 5px;
  background-color:#003B89;
  transition: left 0.5s ease-in-out;

}
.timeline-text {
    padding: 0px 10px 0px 50px;
    width: 458px;
}

.timeline-event{
    position:relative;
}
.timeline-event.active .icon-circle{
    background:#003B89
}
.icon-circle{
    width:26px;
    background:#1DB4ED;
    text-align:center;
    border-radius:3em;
    padding:0px 5px;
    position:absolute;
    top:46%;
    transform:translateY(-90%);
}
.icon-circle i{
    color:#fff;
}
div{
  font-family:'Montserrat', sans-serif;
}
.timeline-event-date{
    font-weight:800;
}
.timeline-event-title{
    font-weight:600;
    font-size:20px;
    line-height:1
}
.timeline-event-description{
    font-size:15px;
    font-weight:500;
    margin-top:8px;
    line-height:1.3
}

.timeline-text{
    position:relative
}
.timeline-text::after{
    content: "\f111";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color:#fff;
    padding:2px 6px;
    background:#1DB4ED;
    border-radius:3em;
    position:absolute;
    left:0px
}

.timeline-text::before{
    content:'';
    width:3px;
    height:100px;
    display:block;
    background:#ccc;
    position:absolute;
    left:12px
}
.timeline-event.top .timeline-text::before{
    bottom:0
}
.timeline-event.bottom .timeline-text::before{
    top:0
}

.timeline-event.top .timeline-text::after{
    bottom:100px
}

.timeline-event.bottom .timeline-text::after{
    top:100px
}

.timeline-event.active .timeline-text::after{
    background:#003B89
}
.timeline-image img{
    margin:0 auto;
    margin-top:15px;
    width: 100%;
    height: 250px;
    object-fit: contain;
}
.timeline-event.bottom img.timeline-event-image {
    margin:0px 0px 20px 0px  
}

.timeline-container::-webkit-scrollbar {
    background:#ccc;
    height:8px;
}

.timeline-container::-webkit-scrollbar-thumb {
    background:#003B89
}

.timeline-container {
  scrollbar-color: #003B89 #ccc;
  scrollbar-width: thin;
}