@media only screen and (min-width: 1200px) {
    #timeline {
        width: 62.5rem;
        padding-top: 2.5%;
        padding-bottom: 2.5%;

    }

    .timecenter {
        position: relative;
        display: inline-block;
        height: 37.5rem;
        width: 100%;
    }

    .timeline-box {
        width: 8.75rem;
        height: 11.25rem;
        box-shadow: 0 0 0.3125rem 0.125rem rgba(135, 135, 135, 0.15);
        position: absolute;
        left: 0;
        right: 0;
        background-color: #FFF;
        z-index: 1;

        opacity: 0;
        transition: 0.5s;

        transform: scaleX(0);
    }

    .timeline-box:nth-child(odd) {
        top: 2.1875rem;
    }

    .timeline-box:nth-child(even) {
        bottom: 2.1875rem;
    }

    .timeline-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #FFF;
        z-index: -1;
    }

    .timeline-box::after {
        content: "";
        width: 0.9375rem;
        height: 0.9375rem;
        position: absolute;

        left: 50%;
        background-color: #FFF;
        transform: translateX(-50%) rotate(45deg);
        box-shadow: 0 0 0.3125rem 0.125rem rgba(135, 135, 135, 0.15);
        z-index: -2;

    }


    .timeline-box:nth-child(odd)::after {
        bottom: -7.5px;
    }

    .timeline-box:nth-child(even)::after {
        top: -7.5px;
    }

    .timeline-box:nth-child(1) {
        left: 5px;
    }

    .timeline-box:nth-child(2) {
        left: 150px;
    }

    .timeline-box:nth-child(3) {
        left: 300px;
    }

    .timeline-box:nth-child(4) {
        left: 445px;
    }

    .timeline-box:nth-child(5) {
        left: 595px;
    }

    .timeline-box:nth-child(6) {
        left: 742px;
    }

    .timeline-box:nth-child(7) {
        left: 886px;
    }

    .timeline-box:nth-child(8) {
        left: 1036px;
    }

    .header {
        width: 60px;
        height: 60px;

        position: absolute;
        left: 50%;

        margin-left: -35px;

        display: flex;
        justify-content: center;
        text-anchor: middle;
        background-color: #FFF;
        padding: 10px;
        border-radius: 50%;;
        box-sizing: border-box;

    }

    .timeline-box:nth-child(odd) .header {
        top: -35px;
    }

    .timeline-box:nth-child(even) .header {
        bottom: -35px;
    }

    .header::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;

        border-radius: 50%;;
        box-shadow: 0 0 5px 2px rgba(135, 135, 135, 0.15);
        z-index: -2;
    }

    .header img {
        transition: 0.5s;
    }


    .timeline_div {
        width: 1050px;
        height: 90px;
        position: absolute;


        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;

        margin: auto;
        display: flex;
        justify-content: space-between;

    }

    .timeline_div div {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ffae12;
        border: 5px solid #f6f6f6;

    }

    .f-border {

        border-color: #fff;
        box-shadow: 0 0 8px rgba(0, 0, 0, .2);

    }

    .active {

        border: 5px;
        border-color: #fff;
        box-shadow: 0 0 10px 3px #ffae12;
    }
}
@media only screen and (max-width: 1200px) {
    #timeline{
        transform: scale(0.9);
    }
}