/** ** ** ** ** BEGIN TIMELINE ** ** ** ** **/

/* Timeline */
.timeline {
    position: relative;
    padding: 0;
    width: 100%;
    list-style-type: none;
}

.timeline:before {
    left: 50%;
    position: absolute;
    width: 3px;
    height: 100%;
    content: ' ';
    display: block;
    z-index: 5;
    margin-left: -1px;
    background: rgb(229, 229, 229);
    background: linear-gradient(to bottom, rgba(229, 229, 229, 0) 0%, rgb(229, 229, 229) 8%, rgb(229, 229, 229) 92%, rgba(229, 229, 229, 0) 100%);
}

.timeline li {
    padding: 0.6em 0;
}

/* Début de la timeline */
.timeline li:first-child div {
    margin-top: 12px !important;
}

/* Icone sur la timeline */
.timeline .tl-icon {
    width: 16px;
    height: 10px;
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: -30px;
    margin-top: 0;
}

/* Margin with timeline */
.timeline {
    margin-top: -5px;
}

/* Possibilité de scroller dans le widget ou est présent la timeline */
.timeline-card {
    overflow-y: scroll;
    overflow-x: hidden;
}

/** ** ** ** ** END TIMELINE ** ** ** ** **/

/** ** ** ** ** BEGIN TIMELINE content ** ** ** ** **/

/* Icone du point clé sur la timeline */
.tl-icon i {
    color: #12629A;
}

.tl-icon {
    font-size: 28px;
}

/* Positinoner les elements de la time line au centre */
.right-position {
    float: none;
    width: 100%;
    text-align: center;
}

/* tl-key Section  */
.tl-keys-section {
    position: relative;
    display: inline-block;
}

/* Point clé */
.tl-key {
    position: relative;
    display: inline-block;
    background: #FFFFFF;
    font-weight: 550;
    z-index: 15;
    padding: 6px 10px;
    text-align: left;
    border-radius: 4px;
}


/* Section des mots clés sur la timeline */
.tl-time-section {
    display: block;
    position: relative;
    margin: 4px 0 0 0;
    z-index: 14;
    line-height: 1em;
    vertical-align: middle;
    color: #fff;
}


/* date et heure des mots clés */
.time {
    background: #35A8DF;
    display: inline-block;
}

.time:hover {
    background: #12629A;
}

.desc-of-timeline {
    position: relative;
    margin: 1em 0 0 0;
    padding: 1em;
    background: #FEFEFE;
    font-family: 'Raleway', sans-serif;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.45);
    width: 55%;
    z-index: 15;
}

.left-position .desc-of-timeline {
    left: 30%;
}

/* Position de la description du mot clé */
.left-position .desc-of-timeline,
.right-position .desc-of-timeline {
    position: relative;
    margin: 1em 1em 0 1em;
    padding: 1em;
    z-index: 15;
    text-align: center;
}

/** ** ** ** ** END TIMELINE content ** ** ** ** **/


/** ** ** ** ** BEGIN SCREEN WIDTH - RESPONSIVENESS ** ** ** ** **/


/* timeline */
@media screen and (min-width: 2400px) {
    /*.timeline {*/
    /*    margin-left: -16% !important;*/
    /*}*/

    .time {
        font-size: 14px;
    }

}

@media only screen and (max-width: 2550px) and (min-width: 2401px) {
    .timeline {
        margin-left: -4% !important;
    }
}

@media only screen and (max-width: 2400px) and (min-width: 2251px) {
    .timeline {
        margin-left: -7% !important;
    }
}

@media only screen and (max-width: 2250px) and (min-width: 2151px) {
    .timeline {
        margin-left: -9% !important;
    }
}

@media only screen and (max-width: 2150px) and (min-width: 2081px) {
    .timeline {
        margin-left: -10% !important;
    }
}

@media only screen and (max-width: 2080px) and (min-width: 2000px) {
    .timeline {
        margin-left: -14% !important;
    }
}


@media only screen and (max-width: 2000px) and (min-width: 1750px) {
    .timeline {
        margin-left: -35% !important;
    }
}

@media only screen and (max-width: 1750px) and (min-width: 1550px) {
    .timeline {
        margin-left: -38% !important;
    }
}

@media only screen and (max-width: 2550px) and (min-width: 992px) {

    .desc-of-timeline {
        font-size: 14px !important;
    }
}

@media only screen and (max-width: 1550px) and (min-width: 1400px) {
    .timeline {
        margin-left: -42% !important;
    }

}

@media only screen and (max-width: 1400px) and (min-width: 1350px) {
    .timeline {
        margin-left: -45% !important;
    }
}

@media only screen and (max-width: 1350px) and (min-width: 1250px) {
    .timeline {
        margin-left: -47% !important;
    }
}


@media only screen and (max-width: 1250px) and (min-width: 1200px) {
    .timeline {
        margin-left: -49% !important;
    }
}

@media screen and (min-width: 1200px) {

    .seconde-line-dt {
        margin-top: -30px;
    }
}

@media only screen and (max-width: 1100px) and (min-width: 992px) {
    .timeline {
        margin-left: 0% !important;
    }

    .left-position .time {
        /*background: red;*/
        /*margin-left: -50px !important;*/
        margin-right: 40px !important;
        /*margin: 50px !important;*/
    }
}

@media only screen and (max-width: 992px) and (min-width: 768px) {

    .right-position .time {
        margin-left: 12px;
    }

    .tl-key {
        font-size: 15px;
        width: 65%;
    }

    .time {
        font-size: 14px;
        width: 170px;
    }

    .left-position .time {
        margin-right: 20px;
    }

    .left-position .desc-of-timeline {
        margin-left: 27px !important;
    }

    .desc-of-timeline {
        font-size: 14px;
    }
}

/* grand écran */
@media (min-width: 992px) {

    .left-position .time {
        margin-right: 32px !important;
    }

    .right-position .time {
        margin-left: 12px;
    }

    .timeline {
        width: 800px;
        margin-top: 20px;
    }

    .left-position .tl-key {
        margin-right: 12px !important;
    }

    .left-position {
        position: relative;
        width: 380px;
        float: left;
        text-align: right;
    }

    .right-position {
        position: relative;
        width: 380px;
        float: right;
        text-align: left;
    }

    .tl-key {
        margin-left: 11px;
        width: 62%;
    }

    .time {
        font-size: 14px;
        width: 170px;
    }
}

@media only screen and (max-width: 991px) and (min-width: 900px) {
    .timeline {
        margin-left: -6% !important;
    }
}

@media only screen and (max-width: 900px) and (min-width: 850px) {
    .timeline {
        margin-left: -8% !important;
    }
}


@media only screen and (max-width: 850px) and (min-width: 800px) {
    .timeline {
        margin-left: -12% !important;
    }
}

/* petit écran */
@media (max-width: 768px) {

    .timeline li {
        padding: 1.4em 0;
    }

    .left-position .desc-of-timeline, .right-position .desc-of-timeline {
        font-size: 14px;
    }

    .desc-of-timeline {
        width: 30%;
        left: 30%;
    }

    .tl-icon {
        font-size: 24px;
    }

    .tl-key {
        text-align: center;
        width: 90%;
    }

    .time {
        width: 150px;
        text-align: center;
        padding: 4px 3px;

    }

    .right-position .time {
        margin-left: 14px;
    }


    .left-position .time {
        margin-right: 8px;
    }
}

/* écran moyen */
@media (min-width: 768px) {
    .timeline {
        width: 660px;
        margin: 20px auto 0;
    }

    .timeline li:after {
        content: "";
        display: block;
        clear: both;
    }

    .timeline .tl-icon {
        left: -30px;
        right: auto;
        top: 0px;
        z-index: 50;
    }

    .timeline li {
        padding: 0.6em 0;
    }

    /* Ajustement de la position des icones */
    .timeline .left-position .tl-icon {
        left: auto;
        right: -26px;
    }

    /* Ajustement de la position des section pour la gauche */
    .left-position {
        position: relative;
        width: 310px;
        float: left;
        text-align: right;
    }


    /* Ajustement de la position des section pour la droite */
    .right-position {
        position: relative;
        width: 310px;
        float: right;
        text-align: left;
    }

    /* Clé sur la timeline */
    .tl-key {
        font-size: 15px;
        font-weight: 800;
    }

    /* Temps sur la timeline */
    .time {
        padding: 3px 5px;
        text-align: center;
    }

    /* Ajustement de l'alignement des sections sur la timeline */
    .tl-time-section {
        display: inline;
        vertical-align: middle;
        margin: 0;
    }


    /* Ajustement de l'alignement du temps (sur la section droite) sur la timeline */
    .right-position .tl-time-section {
        /*float: right;*/
    }

    /* Ajustement de l'alignement de la description sur la timeline */
    .right-position .desc-of-timeline {
        margin: 1em 0 0 0.75em;
    }
}

@media only screen and (max-width: 768px) and (min-width: 768px) {
    .desc-of-timeline {
        width: 55%;
    }

    .right-position .desc-of-timeline {
        margin-left: -26%;
    }
}

@media only screen and (max-width: 767px) and (min-width: 700px) {

    .desc-of-timeline {
        width: 80%;
        margin-left: -20% !important;
    }

    .left-position {
        text-align: center;
    }

    .tl-key {
        font-size: 14px;
    }

    .time {
        width: 200px;
        padding: 6px 10px;
    }

    .right-position .tl-key {
        margin-left: 5px;
    }

    .left-position .tl-key {
        margin-right: 28px;
    }
}

@media only screen and (max-width: 800px) and (min-width: 768px) {
    .timeline {
        margin-left: -15% !important;
    }
}

@media only screen and (max-width: 767px) and (min-width: 711px) {
    .timeline {
        margin-left: 30% !important;
    }

    .left-position {
        text-align: center;
    }

    .desc-of-timeline {
        width: 80%;
        margin-left: -20% !important;
    }

    .tl-key {
        width: 80%;
    }
}

@media only screen and (max-width: 710px) and (min-width: 661px) {

    .timeline {
        margin-left: 28% !important;
    }

    .left-position {
        text-align: center;
    }

    .desc-of-timeline {
        width: 80%;
        margin-left: -20% !important;
    }

    .tl-key {
        width: 80%;
    }
}

@media only screen and (max-width: 660px) and (min-width: 611px) {
    .timeline {
        margin-left: 20% !important;
    }

    .left-position {
        text-align: center;
    }

    .desc-of-timeline {
        width: 80%;
        margin-left: -20% !important;
    }

    .tl-key {
        width: 80%;
    }
}

@media only screen and (max-width: 610px) and (min-width: 561px) {

    .timeline {
        margin-left: 13% !important;
    }

    .left-position {
        text-align: center;
    }

    .desc-of-timeline {
        width: 80%;
        margin-left: -20% !important;
    }

    .tl-key {
        width: 80%;
    }

}

@media only screen and (max-width: 560px) and (min-width: 500px) {
    .timeline {
        margin-left: 8% !important;
    }

    .left-position {
        text-align: center;
    }

    .desc-of-timeline {
        width: 80%;
        margin-left: -20% !important;
    }

    .tl-key {
        width: 80%;
    }
}

@media only screen and (max-width: 500px) and (min-width: 470px) {
    .timeline {
        margin-left: 1% !important;
    }

    .desc-of-timeline {
        width: 80%;
        margin-left: -20% !important;
    }

    .tl-key {
        width: 80%;
    }

}

@media only screen and (max-width: 469px) and (min-width: 440px) {
    .timeline {
        margin-left: -1% !important;
    }

    .desc-of-timeline {
        width: 70%;
        margin-left: -15% !important;
    }

    .tl-key {
        width: 70%;
    }
}


@media only screen and (max-width: 439px) and (min-width: 428px) {
    .timeline {
        margin-left: 3% !important;
    }

    .desc-of-timeline {
        width: 60%;
        margin-left: -10% !important;
    }

    .tl-key {
        width: 60%;
        font-size: 13px;
    }
}

@media only screen and (max-width: 427px) and (min-width: 408px) {
    .timeline {
        margin-left: 3% !important;
    }

    .desc-of-timeline {
        width: 60%;
        margin-left: -7% !important;
    }

    .tl-key {
        width: 60%;
    }

}

@media only screen and (max-width: 407px) and (min-width: 378px) {

    .timeline {
        margin-left: 0% !important;
    }

    .desc-of-timeline {
        width: 60%;
        margin-left: -6% !important;
    }

    .tl-key {
        width: 80%;
        text-align: center;
    }
}

@media only screen and (max-width: 377px) and (min-width: 362px) {
    .timeline {
        margin-left: 2% !important;
    }

    .desc-of-timeline {
        width: 60%;
        margin-left: -8% !important;
    }

    .tl-key {
        width: 80%;
        text-align: center;
    }

}

@media only screen and (max-width: 361px) and (min-width: 350px) {
    .timeline {
        margin-left: 3% !important;
    }

    .desc-of-timeline {
        width: 60%;
        margin-left: -8% !important;
    }

    .tl-key {
        width: 70%;
        text-align: center;
    }
}

@media only screen and (max-width: 349px) and (min-width: 335px) {
    .timeline {
        margin-left: 2% !important;
    }

    .desc-of-timeline {
        width: 60%;
        margin-left: -8% !important;
    }

    .tl-key {
        width: 70%;
        text-align: center;
    }
}

@media only screen and (max-width: 334px) and (min-width: 315px) {
    .timeline {
        margin-left: 2% !important;
    }

    .desc-of-timeline {
        width: 70%;
        margin-left: -14% !important;
    }

    .tl-key {
        width: 60%;
        text-align: center;
    }
}

@media only screen and (max-width: 314px) and (min-width: 280px) {
    .timeline {
        margin-left: 2% !important;
    }

    .desc-of-timeline {
        width: 75%;
        margin-left: -14% !important;
    }

    .tl-key {
        width: 60%;
        text-align: center;
    }

}

@media only screen and (max-width: 279px) and (min-width: 200px) {
    .timeline {
        margin-left: 2% !important;
    }

    .desc-of-timeline {
        width: 80%;
        margin-left: -18% !important;
    }

    .tl-key {
        width: 60%;
        text-align: center;
    }

}

/** ** ** ** ** END SCREEN WIDTH - RESPONSIVENESS ** ** ** ** **/