.historybg {
    overflow: auto;
    box-sizing: border-box;

    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom center;
}

.historybg h2 {
    font-family: Lumios, sans-serif;
    font-size: 2.5rem;
    line-height: 2.9rem;
    font-weight: 100;
    max-width: 800px;
    text-align: center;
}

/* Mobile */
@media (max-width: 599.999px) {
    .historybg {
        min-height: 400px;
        padding: 0 20px 100px 20px;
        background-image: url(/img/history1.jpg);
    }

    .historybg h2 {
        margin: 10px;
    }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 1399.999px) {
    .historybg {
        min-height: 400px;
        padding: 20px 20px 100px 20px;
        background-image: url(/img/history2.jpg);
    }

    .historybg h2 {
        margin: 20px 50px;
    }
}

/* Desktop */
@media (min-width: 1400px) {
    .historybg {
        min-height: 500px;
        padding: 40px 20px 100px 20px;
        background-image: url(/img/history.jpg);
    }

    .historybg h2 {
        margin: 40px 100px;
    }
}


.timeline .border h1 {
    text-align: center;
    word-break: break-all;
    margin: 0;
    font-size: 100px;
    line-height: 65px;
    max-width: 120px;
}

.timeline picture.two {
    white-space: nowrap;
}

.timeline picture.two img {
    display: inline-block;
}

/* Mobile */
@media (max-width: 479.999px) {
    .timeline .border h1 {
        margin: 0;
        font-size: 54px;
        line-height: 38px;
        width: 60px;
    }

    .timeline picture.two img:last-child {
        margin-left: -50px;
    }
}

/* Tablet */
@media (min-width: 480px) and (max-width: 799.999px) {
    .timeline .border h1 {
        margin: 0;
        font-size: 70px;
        line-height: 48px;
        width: 80px;
    }

    .timeline picture.two img:last-child {
        margin-left: -60px;
    }
}

/* Mobile & Tablet */
@media (max-width: 799.999px) {
    .timeline {
        display: table;
    }

    .timeline .item {
        display: table-row;
    }

    .timeline .item > div {
        display: table-cell;
        vertical-align: middle;
    }

    .timeline .item > div.border {
        border-right: 10px solid;
    }

    .timeline .item > picture:first-child {
        display: none;
    }

    .timeline picture {
        display: block;
        min-width: 100px;
        max-width: 150px;
        max-height: 200px;
        box-sizing: border-box;
        padding: 10px;
    }

    .timeline picture img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1.5;
        object-fit: contain;
    }

    .timeline picture.two img:first-child {
        margin-left: -20px;
    }
}

/* Desktop */
@media (min-width: 800px) {
    .timeline {
        display: flex;
    }

    .timeline .item {
        flex: 1;
    }

    .timeline .item > div.border {
        border-top: 10px solid;
    }

    .timeline .border h1 {
        margin: 0 auto;
        font-size: 100px;
        line-height: 65px;
        width: 120px;
        text-align: center;
    }

    .timeline picture.two img:last-child {
        margin-left: -70px;
    }

    .timeline div.img {
        display: none;
    }

    .timeline .item p {
        text-align: center;
        padding: 0 10px;
    }

    .timeline picture.two img:first-child {
        margin-left: -17%;
    }

    .timeline picture.two img:last-child {
        margin-left: -62%;
    }
}