/* _______________________________________ REPONSIVE 2500px __________________________________________ */

@media screen and (min-width:2500px) {
    .timeline-left{
        width: 49.85%;
    }
}


/* _______________________________________ REPONSIVE 3800px __________________________________________ */

@media screen and (min-width:3800px) {
    .timeline-left{
        width: 49.95%;
    }
}

/* _______________________________________ REPONSIVE 1000px __________________________________________ */

@media (max-width:1000px) {

    /* HEADER */

    .name{

        font-size: 40px;
        
    }

    /* A PROPOS */

    .a-propos{
        flex-direction: column;
    }

    /* ROUNDED TIMELINE */

    .rounded-time-line{
        display: none;
    }

    /* TIMELINE NO JS  */

    .timeline{
        display: block;
    }

    .timeline-left{
        width: 90%;
        margin: auto;
        margin-left: 10px;
        height: 100%;
        padding: 20px;
        padding-right: 0px;

    }

    .timeline-left .content-title-descrip ,.timeline-left .content-title-descrip .background-timeline {
        width: 100%;
    }

    .circle-timeline-left{
        left: -37px;
        top: 0;
    }

    .barre-reli-left{
        left: -67px;
        width: 70px;
    }


    /* DROIT */

    .timeline-right{
        display: flex;
        flex-direction: row;
        width:90%;
        margin: auto;
        margin-left: 10px;
        border-left: 4px solid var(--color-secondaire);
        border-right: 0px;
        padding: 20px;
        padding-right: 0px;
    }

    .background-timeline-right{
        border-left: 5px solid var(--color-secondaire);
        border-right: 0;
    }

    .content-title-descrip{
        width: 100%;
    }

    .circle-timeline-right{
        left: -37px;
        top: 0;
        bottom: 100%;
    }

    .barre-reli-right{
        left: -67px;
        width: 70px;
    }

    .content-barre-circle{
        height: 100%;
    }

    .timeline-left,.timeline-right{
        height: 100%;
    }

    .last{
        padding: 0px 23px;
        padding-right: 0;
    }

    .first{
        padding-top: 0px;
    }

    /* LOGO */

    .competence{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .emplacement-repsponsive{
        order: -1;
    }

    .logo{ 
        position: initial;
        width: 10px;
    }

    .logo9, .photo-rounded{
        position: relative;
        top: -100px;
    }

    .logo0, .logo11{
        position: relative;
        top: -100px;
    }

    .logo8 , .logo1, .logo2, .logo4, .logo5, .logo7{
        position: relative;
        top: -50px;
    }
}

/* _______________________________________ REPONSIVE 800px __________________________________________ */