.section-timeline {
    margin-top:60px;
}
.section-timeline h2 {
    margin-bottom:0;
}
.singlemilestone {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin-bottom:60px;
}

.mileswrap {
    position:relative;
    margin-top:30px;
}

.miletext {
    flex:0 1 calc(50% - 105px);
    max-width:calc(50% - 105px);
    margin-right:60px;
    padding:30px;
    background:var(--bs-light);
    position:relative;
}
.miletext .btn {
    margin-top:15px;
}

.miletext:after {
    content:"";
    width:35px;
    height:35px;
    background:var(--bs-light);
    position:absolute;
    right:-35px;
    top:50%;
    transform:translateY(-50%);
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    display:block;
}
.miletext p:last-of-type {
    margin-bottom:0;
}
.miletext h3 {
    margin-bottom:8px;
}
.mileyear {
    flex:0 1 90px;
    max-width:90px;
    height:90px;
    border-radius: 50%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    color:var(--bs-white);
    font-weight:800;
    font-size:20px;
    font-family: "Ubuntu Sans", Arial, sans-serif;
    position:relative;
    z-index:2;
    background:var(--bs-primary);
}
.mileswrap:after {
    content:"";
    width:10px;
    height:100%;
    position:absolute;
    left: 50%;
    transform:translateX(-50%);
    top:0;
    background:var(--bs-light);
    display:block;
    z-index:1;
    border-radius:25px;
}
.mileimages {
    flex:0 1 calc(50% - 105px);
    max-width:calc(50% - 105px);
    margin-left:60px;
    padding:30px;
    background:var(--bs-light);
    position:relative;
    display:flex;
    flex-wrap:wrap;
}

.mileimages:after {
    content:"";
    width:35px;
    height:35px;
    background:var(--bs-light);
    position:absolute;
    left:-35px;
    right:inherit;
    top:50%;
    transform:translateY(-50%);
    clip-path: polygon(0 50%, 100% 100%, 100% 0);
    display:block;
}


.mileimages picture:only-of-type {
    flex:0 1 100%;
    max-width:100%;
    height:auto;
    margin:0;
}
.mileimages picture {
    flex:0 1 calc(50% - 20px);
    max-width:calc(50% - 20px);
    height:auto;
    margin:10px;
}

.mileimages img {
    width:100%;
    height:auto;
}

.singlemilestone.righttext {
    flex-direction:row-reverse;
}

.singlemilestone.righttext .miletext {
    margin-left:60px;
    margin-right:0;
}

.singlemilestone.righttext .miletext:after {
    content:"";
    width:35px;
    height:35px;
    background:var(--bs-light);
    position:absolute;
    left:-35px;
    right:inherit;
    top:50%;
    transform:translateY(-50%);
    clip-path: polygon(0 50%, 100% 100%, 100% 0);
    display:block;
}

.singlemilestone.righttext .mileimages:after {
    content:"";
    width:35px;
    height:35px;
    background:var(--bs-light);
    position:absolute;
    right:-35px;
    left:inherit;
    top:50%;
    transform:translateY(-50%);
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    display:block;
}

.singlemilestone.righttext .mileimages {
    margin-left:0;
    margin-right:60px;
}

@media screen and (max-width: 960px) {
    .section-timeline {
        padding:0 20px;
    }
    .miletext {
        flex: 0 1 100%;
        max-width: 100%;
        margin-right: 0;
        padding: 20px;
        background: var(--bs-light);
        position: relative;
        order:2;
        z-index:2;
    }
    .miletext:after {
        display:none;
    }
    .mileimages:after {
        display:none;
    }
    .mileyear {
        order: 1;
        margin: 0 auto;
        margin-bottom: 15px;
    }
    .mileimages {
        flex: 0 1 100%;
        max-width: 100%;
        margin-left:0;
        order:3;
        z-index:2;
        padding-top:0;
        padding-left:20px;
        padding-right:20px;
    }
    .mileimages picture:first-of-type {margin-bottom:10px;}
    .mileimages picture:only-of-type {margin-bottom:0;}
    .singlemilestone.righttext .mileimages {
        margin-right: 0;
    }
    .singlemilestone.righttext .miletext {
        margin-left: 0;
        margin-right: 0;
    }
    .singlemilestone.righttext .miletext:after,
    .singlemilestone.righttext .mileimages:after{
        display:none;
    }
    .singlemilestone {
        margin-bottom:30px;
    }
    .mileimages picture {
        flex: 0 1 100%;
        max-width: 100%;
        height: auto;
        margin: 0 0 20px 0;
    }
}