#cont-chrono {
    padding-top: 5%;
    position: relative;
}

#cont-chrono:before {
    content: "";
    background-color: var( --e-global-color-primary );
    width: 1.5px;
    position: absolute;
    left: -1.5em;
    bottom: 0;
}

#cont-chrono > div {
    position: relative;
}

#cont-chrono > div:before {
    content: "";
    background-color: var( --e-global-color-primary );
    width: 10px;
    height: 10px;
    border-radius: 10px;
    position: absolute;
    top: 14%;
    left: -1.7em;
}

#cont-chrono * {
    font-size: 18px;
    line-height: 28px;
    /*color: var( --e-global-color-primary );*/
  color: white;
    font-family: "Open Sans", Sans-serif;
}

#cont-chrono > div + div {
    margin-top: 1em;
}

#cont-chrono .annee {
    font-weight: bold;
}


/*RESPONSIVE*/

/*phone*/
@media (max-width: 767px) {

    #cont-chrono * {
        font-size: 16px;
        line-height: 24px;
    }

    #cont-chrono:before {
        top: 5%;
        width: 0.5px;
        left: -0.9em;
    }

    #cont-chrono > div:before {
        top: 11%;
        left: -1em;
    }
}

/*tablet*/
@media (min-width: 768px) and (max-width: 1024px) {
    #cont-chrono:before {
        top: 7%;
        width: 0.5px;
        left: -1.6em;
    }
}

/*mobile and tablet*/
@media (max-width: 1024px) {

}

/*desktop*/
@media (min-width: 1025px) {
    #cont-chrono {
        padding-right: 15%;
    }

    #cont-chrono:before {
        top: 8%;
    }
}

/*pc portable*/
@media (min-width: 1025px) and (max-width: 1700px) {
    #cont-chrono {
        padding-right: 0;
    }

    #cont-chrono:before {
        top: 5%;
    }
}


/*RESPONSIVE*/