/* @group Project-timeline
------------------------------------ */
.project-timeline {
    position: relative;
}
.project-timeline h2 {
    color: var(--light-green);
}
.project-timeline .splide__slide p {
    font-size: 0;
}
.project-timeline .year,
.project-timeline .text {
    display: block;
    margin: 0 auto;
    color: var(--dark-green);
}
.project-timeline .year {
    position: relative;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 700;
}
.project-timeline .year::before {
    content: '';
    width: 2.2rem;
    height: 2.2rem;
    display: inline-block;
    border-radius: 50%;
    background-color: var(--dark-green);
    overflow: hidden;
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    border: .4rem solid #fff;
}
.project-timeline .text p {
    line-height: normal;
    font-weight: 600;
}
.project-timeline .splide__list {
    position: relative;
}
.project-timeline .splide::before {
    content: '';
    position: absolute;
    top: 10rem;
    left: 0;
    display: inline-block;
    width: 100%;
    height: .9rem;
    background-color: #7bbbe7;
}
@media only screen
and (min-width : 961px) {
    .project-timeline {
        padding: 5rem 0 8.2rem 0;
    }
    .project-timeline .splide__list {
        display: flex!important;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 6.3rem!important;
    }
    .project-timeline .splide__list li {
        cursor: pointer;
        text-align: center;
        /* commented out due to timelne updated to have only 3 components on Eastern page. Works with 4 components on main page */
        /*max-width: 24.6rem;*/
        margin: 0 2rem;
        flex: 0 1 auto;
    }
    .page-template-zero-emision .project-timeline .splide__list li {
        cursor: default;
        margin: 0 3rem;
    }
    .project-timeline .text p {
        font-size: 2.4rem;
    }
    .project-timeline .year {
        white-space: nowrap;
        padding-bottom: 4rem;
    }
    .project-timeline .splide__arrow {
        display: none;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1140px) {
    .project-timeline .splide__list li {
        margin: 0 .5rem;
    }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .project-timeline {
        padding: 2.5rem 0 3.4rem 0;
    }
    .project-timeline .splide__list {
        padding-top: 3.5rem!important;
    }
    .project-timeline .year,
    .project-timeline .text {
        width: 100%;
        max-width: 18rem;
    }
    .project-timeline .text p {
        font-size: 1.8rem;
    }
    .project-timeline .splide__list li {
        text-align: center;
    }
    .project-timeline .splide__list li > div {
        margin-top: -1rem;
    }
    .project-timeline .year {
        font-size: 2rem;
        padding-bottom: 4rem;
    }
    .project-timeline .splide:before {
        max-width: 23.5rem;
        left: 50%;
        transform: translateX(-50%);
        top: 6.35rem;
    }
    .project-timeline .splide__arrow {
        top: 5.3rem;
    }
    .project-timeline .year::before {
        top: 3.2rem;
    }
}

/* @end */


.bottom-slides figure {
    background-color: #c2eafe;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bottom-slides figure img {
    flex: none;
    width: 9rem;
    height: 9.3rem;
}
[data-index] {
    display: none;
    animation: fade 1.2s forwards;
}
[data-index].show {
    display: flex;
}
.bottom-slides .article__info p {
    font-size: 2em;
    line-height: 1.6em;
    color: #000000;
    font-weight: 600;
}
@media only screen
and (min-width : 961px) {
    .bottom-slides {
        padding-top: 8.2rem;
    }
    .bottom-slides article {
        align-items: flex-start;
        justify-content: flex-start;
    }
    .bottom-slides figure {
        flex: 0 1 16.2rem;
        height: 16.2rem;
        margin-right: 5.5rem;
    }
    .bottom-slides .article__info {
        flex: 1;
    }
    .bottom-slides .article__info p {
        font-size: 2.4em;
        line-height: 1.5em;
        margin-bottom: 2rem;
    }
    
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .bottom-slides {
        padding-top: 2.6rem;
    }
    .bottom-slides article {
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
    }
    .bottom-slides figure {
        width: 16.2rem;
        height: 16.2rem;
    }
    .bottom-slides .article__info {
        margin-top: 2.7rem;
    }
    .bottom-slides .article__info p {
        font-size: 2.4em;
        line-height: 1.5em;
        margin-bottom: 2.7rem;
    }
    .bottom-slides .article__info a {
        text-align: center;
    }
}


.project-timeline h2,
.project-timeline .bottom-slides,
.project-timeline .splide {opacity: 0;}

.project-timeline.animateActive h2,
.project-timeline.animateActive .bottom-slides,
.project-timeline.animateActive .splide {animation: fade 1.1s forwards;}
 
.project-timeline.animateActive h2 {animation-delay:.3s;}  
.project-timeline.animateActive .splide {animation-delay:.5s;}     
.project-timeline.animateActive .bottom-slides {animation-delay:.7s;}  

.page-template-zero-emision .animateActive .project-timeline h2,
.page-template-zero-emision .animateActive .project-timeline .bottom-slides,
.page-template-zero-emision .animateActive .project-timeline .splide {animation: fade 1.1s forwards;}
 
.page-template-zero-emision .animateActive .project-timeline h2 {animation-delay:.3s;}  
.page-template-zero-emision .animateActive .project-timeline .splide {animation-delay:.5s;}     
.page-template-zero-emision .animateActive .project-timeline .bottom-slides {animation-delay:.7s;}