*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

.w3-container {
    margin: auto;
    padding: 0.01em 16px;
    width: 60%;
}

.zigzag-timeline__item {
    /* Used to position the milestone HORIZONAL PART*/
    position: relative;

    /* Border */
    border-bottom: 2px solid silver;

    /* Take full width */
    width: 100%;

}

p, h3 {
    display: block;
    -webkit-margin-before: 0em;
    margin-block-start: 0em;
    /* margin-block-end: 1em; */
    -webkit-margin-start: 0px;
    margin-inline-start: 0px;
    -webkit-margin-end: 0px;
    margin-inline-end: 0px;
    padding-top: 8px;
}

.zigzag-timeline__milestone {
    /* Absolute position */
    position: absolute;
    top: 50%;

    /* Circle it */
    border-radius: 10%;
    border: 1.5px solid silver;
    height: 1.6rem;

    /* Misc */
    background: #835aac;
    text-align: center;
    padding: 10px;
    color: white;
    /*transition: all 0.2s; !* Animation *!*/
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;

}


/* Styles for even items */
.zigzag-timeline__item:nth-child(2n) {
    border-left: 2px solid silver;
    /*padding-right: 48px;*/

}

.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
    left: 0;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Styles for odd items */
.zigzag-timeline__item:nth-child(2n + 1) {
    border-right: 2px solid silver;
}

.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
    right: 0;
    -webkit-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}

.fly-in {
    position: relative;
}

.fly-in.right.start {
    -webkit-animation: fly-in-right 0.5s ease-out forwards;
    animation: fly-in-right 0.5s ease-out forwards;
    padding-right: 48px
    /* adjust the animation duration and timing function as needed */
}

.fly-in.right {
    visibility: hidden;
}

.fly-in.left.start {
    -webkit-animation: fly-in-left 0.5s ease-out forwards;
    animation: fly-in-left 0.5s ease-out forwards;
    padding-left: 64px
}

.fly-in {
    visibility: hidden;
}

@-webkit-keyframes fly-in-left {
    from {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes fly-in-left {
    from {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@-webkit-keyframes fly-in-right {
    from {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes fly-in-right {
    from {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}