.timeline {
    width: 100%;
    list-style-type : none;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: none;
}

.timeline .li {
    transition: all 600ms ease-in;
}

.timeline .node {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.timeline .selected {
    font-weight: bold;
}

.timeline .upnode {
    margin-bottom: 8px;
    flex-direction: column;
}

.timeline .downnode {
    padding: 12px 12px;
    justify-content: center;
    /*border-top: 2px solid #D6DCE0;*/
    position: relative;
    transition: all 200ms ease-in;
}

/*.timeline .downnode:before {*/
/*    content: "";*/
/*    width: 12px;*/
/*    height: 12px;*/
/*    background-color: white;*/
/*    border-radius: 12px;*/
/*    border: 1px solid #ddd;*/
/*    position: absolute;*/
/*    top: -8px;*/
/*    left: 42%;*/
/*    transition: all 200ms ease-in;*/
/*}*/

.timeline .li.complete .downnode {
    /*border-top: 4px solid #66DC71;*/
}

.timeline .li.complete .downnode:before {
    background-color: #66DC71;/
    border: none;
    transition: all 200ms ease-in;
}

@media ( min-device-width : 320px) and (max-device-width: 700px) {
    .timeline {
        list-style-type: none;
        display: block;
    }
    .li {
        transition: all 200ms ease-in;
        display: flex;
        width: inherit;
    }
    .upnode {
        width: 100px;
    }
    .downnode:before {
        left: -8%;
        top: 30%;
        transition: all 200ms ease-in;
    }
}

#toggleButton {
    position: absolute;
    left: 50px;
    top: 20px;
    background-color: #75C7F6;
}