@media only screen and (max-device-width: 880px) {
    .main-timeline:before {
        left: 100%;
    }

    .main-timeline .timeline {
        width: 100%;
        float: none;
        margin-bottom: 0.44em !important;
    }

    .main-timeline .timeline:first-child:before,
    .main-timeline .timeline:last-child:before {
        left: auto !important;
        right: -0.29em !important;
    }

    .main-timeline .timeline:nth-child(2n) .circle {
        float: left;
        margin: 0 0.56em 0 0;
    }

    .main-timeline .timeline:nth-child(2n) .circle span:before,
    .main-timeline .timeline:nth-child(2n) .circle span:after {
        right: -0.73em;
        left: auto;
        border-radius: 0 0 0 0.467em;
    }

    .main-timeline .timeline:nth-child(2n) .circle span:after {
        border-radius: 0.467em 0 0 0;
    }

    .main-timeline .timeline:nth-child(2n) .content {
        padding: 0 0.44em 0 0;
        margin-left: 0;
    }

    .main-timeline .icon {
        left: 0.1em;
    }

    .main-timeline .timeline:nth-child(2n) .icon {
        right: 0.4em;
        left: auto;
    }

    .main-timeline .timeline:nth-child(2n) .icon:before,
    .main-timeline .timeline:nth-child(2n) .icon span:before,
    .main-timeline .timeline:nth-child(2n) .icon span:after {
        left: -0.33em;
        right: auto;
    }

    .main-timeline .timeline:nth-child(2n) .icon span:before {
        border-radius: 0 0 0.467em 0;
    }

    .main-timeline .timeline:nth-child(2n) .icon span:after {
        border-radius: 0 0.467em 0 0;
    }

    .main-timeline .timeline:nth-child(2),
    .main-timeline .timeline:nth-child(odd),
    .main-timeline .timeline:nth-child(even) {
        margin: 0;
    }

    .main-timeline .timeline-content::before {
        width: 80%;
        margin-right: 18%;
    }

    .main-timeline .timeline:nth-child(2n) .timeline-content::before {
        margin-left: 15%;
        margin-right: 0;
    }
    .main-timeline .timeline:nth-child(2n) .hex {
        transform: scale(0.8) rotate(-10deg);
    }

    .main-timeline .hex {
        transform: scale(1) rotate(10deg);
        margin: 0.6em 0 0 0;
        padding-right: 0;
    }

    .main-timeline .hex .img-enclose {
        transform: scale(.9);
        width: 3.3em;
        height: 3.3em;
    }

    .main-timeline .img-enclose .img {
        max-height: 3em;
        margin-left: calc(1.8em - 100%);
        margin-right: calc(2em - 100%);
        margin-top: calc(-1.7em + 50%);
    }
}