.time-primary {
    background: #72E16B;
}
.time-secondary {
    background: #8ccab1;
}
ul.timeline {
    list-style-type: none;
    position: relative;
    width: 80%;
    float: left;
    margin-top: 25px;
}
ul.timeline:before {
    content: ' ';
    background: #FFFFFF;
    display: inline-block;
    position: absolute;
    left: -1px;
    width: 5px;
    height: 100%;
    z-index: 400;
}

ul.timeline > li {
    margin: 35px 0;
    padding-left: 20px;
    padding-top: 40px;
    padding-bottom: 30px;
}
ul.timeline > li {
    margin: 35px 0;
    padding-left: 20px;
    padding-top: 40px;
    padding-bottom: 30px;
}
ul.timeline > li:before {
    content: ' ';
    background: #FFFFFF;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    left: -2%;
    width: 30px;
    height: 30px;
    z-index: 400;
}
ul.timeline > li > h3 {
    color: #FFFFFF;
    width: 100%;
    text-align: left;
}
ul.timeline > li > h4 {
    color: #FFFFFF;
    width: 100%;
    text-align: left;
}
ul.timeline > li > p  {
    color: #FFFFFF;
    text-align: justify;
}

ul.timeline-inverted {
    list-style-type: none;
    position: relative;
    width: 80%;
    float: right;
    margin-top: 25px;
    padding-right: 40px;
}
ul.timeline-inverted:before {
    content: ' ';
    background: #FFFFFF;
    display: inline-block;
    position: absolute;
    right: -1px;
    width: 5px;
    height: 100%;
    z-index: 400;
}
ul.timeline-inverted > li {
    margin: 35px 0;
    padding-right: 20px;
    padding-top: 40px;
    padding-bottom: 30px;
}
ul.timeline-inverted > li:before {
    content: ' ';
    background: #FFFFFF;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    right: -2%;
    width: 30px;
    height: 30px;
    z-index: 400;
}
ul.timeline-inverted > li.inverted > h3 {
    color: #FFFFFF;
    width: 100%;
    text-align: right;
}
ul.timeline-inverted > li.inverted > h4 {
    color: #FFFFFF;
    width: 100%;
    text-align: right;
}
ul.timeline-inverted > li.inverted > p {
    color: #FFFFFF;
    text-align: right;
}
.img-timeline {
    width: 500px;
    height: 500px;
}
@media screen and (max-width: 411px) {
    .img-timeline {
        width: 300px;
        height: 300px;
    }ul.timeline:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        left: 28px;
        width: 5px;
        height: 100%;
        z-index: 400;
    }
    ul.timeline > li:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        border: 3px solid #FFFFFF;
        left: 15px;
        width: 30px;
        height: 30px;
        z-index: 400;
    }
    ul.timeline-inverted:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        right: 28px;
        width: 5px;
        height: 100%;
        z-index: 400;
    }
    ul.timeline-inverted > li:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        border: 3px solid #FFFFFF;
        right: 15px;
        width: 30px;
        height: 30px;
        z-index: 400;
    }
}

@media screen and (max-width: 560px) {
    ul.timeline:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        left: 28px;
        width: 5px;
        height: 100%;
        z-index: 400;
    }
    ul.timeline > li:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        border: 3px solid #FFFFFF;
        left: 15px;
        width: 30px;
        height: 30px;
        z-index: 400;
    }
    ul.timeline-inverted:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        right: 28px;
        width: 5px;
        height: 100%;
        z-index: 400;
    }
    ul.timeline-inverted > li:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        border: 3px solid #FFFFFF;
        right: 15px;
        width: 30px;
        height: 30px;
        z-index: 400;
    }
}
@media screen and (min-width: 561px) and (max-width: 960px) {
    .img-timeline {
        width: 300px;
        height: 300px;
    }
    .contenido-slider {
        padding: 1rem;
    }
    .txt-ambiental {
        font-size: 2em;
    }

    ul.timeline:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        left: 28px;
        width: 5px;
        height: 100%;
        z-index: 400;
    }
    ul.timeline > li:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        border: 3px solid #FFFFFF;
        left: 15px;
        width: 30px;
        height: 30px;
        z-index: 400;
    }
    ul.timeline-inverted:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        right: 28px;
        width: 5px;
        height: 100%;
        z-index: 400;
    }
    ul.timeline-inverted > li:before {
        content: ' ';
        background: #FFFFFF;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        border: 3px solid #FFFFFF;
        right: 15px;
        width: 30px;
        height: 30px;
        z-index: 400;
    }
}