.bg-pink{
    background: var(--pink-color);
}


.bg-green{
    background: var(--green-color);
}

.bg-green2{
    background: var(--green-color2);
}

.bg-red{
    background: var(--red-color);
}

.bg-red2{
    background: var(--red-color2);
}

.bg-blue{
    background: var(--blue-color);
}

.text-dark-blue{
    color:var(--dark-blue-color);
}

.text-purple{
    color:var(--purple-color);
}

.text-gray{
    color:var(--text-color);
}

.bg-purple{
    background: var(--purple-color);
}

.overflow-hidden{
    overflow: hidden;
}

.border-radius{
    border-radius: 60px;
}


#slider_home{
	margin-top:-159px;
}

#slider_home .slide-item{	
	min-height: 874px;
	overflow: hidden;
	position: relative;
}


#slider_home .slide-title{
    clear: both;    
    display: flex;
    align-items: center;
    min-height: 874px;
}

/*#slider_home:after{
	content: '';
  	position: absolute;
  	bottom: -25px;
  	left: 0;
  	width: 101vw;
  	height: 180px;
  	background: url(../images/wave2.svg) no-repeat center top / 100% 100%;  	
}

.slide-item.slide-item{
	width: 100vw;
}*/

.slick-btn{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;    
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
    color:white;
    position: absolute;
    top: 50%;
    font-size: 35px;
}

.slick-btn.slick-1{
    left:0px;
}

.slick-btn.slick-2{
    right:0px;
}

.info1, .info3{    
    position: relative;  
}

.cont_info{
    position: relative;
}

.cont_info:after{
    content: '';
    position: absolute;
    top:0px;
    left: 0px;
    width:100vw;
    height: 100%;    
    background:url(../images/vector1.svg) no-repeat center center / 100% auto;    
    z-index: -1;
}

.info1:before{
    content:'';
    width: 100vw;
    height:100%;
    background: url(../images/vector3.svg) no-repeat center 100px / 100% auto;      
    position: absolute;
    top:0px;
    left: 0px;
}

.cont-slider, #about{
    position: relative;
}

.cont-slider svg{
    position: absolute;
    bottom: -1px;
    left: 0px;
}

/*#about > svg{
    position: absolute;
    top:-50%;
    left: 0px;
    z-index: -1;
}*/

#about{
    background:#F4F4F4;    
    margin-top:-50px;
}

.info-about{
    padding:15px 0px 15px 0px;
    position: relative;
}

.fz-30{
    font-size: 30px;
    line-height: 45px;
    font-weight: 500;
}

.fz-24{
    font-size: 24px;
    line-height: 30px;    
}

.fz-22{
    font-size: 22px;
    line-height: 30px;
    font-weight: 500;
}

.fz-20{
    font-size: 20px;
    line-height: 31px;    
}

.fz-18{
    font-size: 18px;
    line-height: 25px;
    line-height: 30px;    
    font-weight: 500;
}

/*.con-marco:after{
    content:'';
    position: absolute;
    top:-70%;
    left: -15%;
    width:70vw;
    height:180%;
    background:url(../images/marco.png) no-repeat -50px 0px / 100% 100%;
    z-index: -1; 
}*/

.con-marco:before{
    content: '';
    position: absolute;
    top:-50%;
    right:0px;
    width: 80%;
    height:80%;
    background:url(../images/mariposas1.png) no-repeat center center / 100% 100%;   
}

.con-marco img{
    z-index: 2;
}

/*.info3:after{
    content: '';
    position: absolute;
    top:0px;
    left: 0px;
    width:100vw;
    height: 100%;    
    background:url(../images/vector2.svg) no-repeat center center / 150% auto;    
    z-index: -1;
}*/

.card-about{
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
    height: 100%;
    margin:30px 0px;
}

.card-about .title{
    padding:10px 5px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    font-size: 22px;
    line-height: 25px;
    font-weight: bold;
    text-align: center;
    width: 230px;
    margin:10px auto;
    text-transform: uppercase;
}

.card-about p{
    margin-bottom: -50px;
    font-size:21px;
    line-height: 25px;
    text-align: center;
}

#about:before{
    content: '';
    position: absolute;
    top:-50%;
    left:0px;
    width: 50%;
    height:80%;
    background:url(../images/mariposas2.svg) no-repeat center center / 100% 100%;   
}

#work{
    background: #FAFAFA;
    position: relative;    
}

#documents{
    margin-top:-5px;
}

.img-card{
    padding:30px;
    position: relative; 
    width: 22%;
    margin: 15px 1.5%;
}

.img-card img{
    max-width: 80%;
    max-height: 100px;
    margin: auto;
}

#members-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.undeline{
    text-decoration: underline;
}

.timeline{
    width:100%;
    display: flex;
    align-items: center;
    padding:70px 0px;
}

.timeline .prev, .timeline .next{
    width:41px;
    height:41px;
    flex-shrink: 0;
    border-radius: 50%;
    background:#0B919F;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 5px 10px #292F4029;
    cursor: pointer;
}

.timeline .prev path:last-child, .timeline .next path:last-child{
    fill:white;
}

.timeline .items{
    width:calc(100% - 70px);
    padding:0px 7px;
    height:1px;
    border-top:3px #C4C4C4 solid;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*.timeline .items .item-timeline{
    position: absolute;
    top:-11px;
}*/

.timeline .items .item-timeline .circles{
    width:19px;
    height: 19px;
    border-radius: 50%;
    background: #4D4D4D; 
    cursor: pointer;
    border: 2px solid white; /* Borde interno */
    box-shadow: 0 0 0 2px #4D4D4D; /* Borde externo */
    box-sizing: border-box; /* Asegura que el padding y el border se incluyan en el tamaño del div */
}

.timeline .items .item-timeline .date{
    position: absolute;
    top:-80px;
    left:-54px;
    width:125px;
    height:59px;
    display: none;
    align-items: center;
    justify-content: center;
    background:#6E77C4;
    font-size:20px;
    font-weight: 500;
    color: white;
}
.timeline .items .item-timeline .date::before{
    content:'';
    position: absolute;
    bottom:-13px;
    width: 0px;
    height: 0px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #6E77C4;
}

.timeline .items .item-timeline:hover .circles, .timeline .items .item-timeline.active .circles{
    background: #0B919F !important;
    box-shadow: 0 0 0 2px #0B919F; /* Borde externo */
}

.timeline .items .item-timeline:hover .date, .timeline .items .item-timeline.active .date{
    display: flex;
}

.info-item .img-time{
    width:100%;
    height:340px;
    border-radius: 15px;
    margin:0px auto;
    max-width: 100%;
}

.info-item{
    display: none;
}

.info-item.active{
    display: flex;
}

.info-item .box{
    background: #F1F1F1;
    border-radius: 15px;
}

.info-item .box .bg-green{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.arrow{
    width:27px;
    height:27px;
    background:white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.truncate-text-3{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;    
}

.truncate-text-4{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;    
}

div.line{
    border-top:1px white solid;
    width:80%;
    margin:15px 0px;
}

@media all and (min-width: 1200px){
    .cont_info img{
        max-width: 65%;
    }
}

@media all and(max-width: 1023px){
    #members-list{
        justify-content: center;
    }
}

@media all and (max-width: 991px) {      
    .card-about{
        border-radius: 30px;
    }

    .info-item .img-time{
        border-radius: 0px;
    }

    .info-item .box .bg-green{
        justify-content: center;
    }

    div.line{     
        margin:15px auto;
    }

    .img-card{
        padding:5px;
        position: relative; 
        width: 30%;
        margin:10px;
    }    
}

@media all and (max-width: 768px) { 
    .con-marco:after {                
        left: 0px;
        width: 100vw;        
    }
}


@media all and (max-width: 767px) { 
    #members-list{
        justify-content: center;
    }
    .img-card{        
        width: 40%;
        margin:10px;
    }    
}

@media all and (max-width: 480px) {
    
}