.timeline {
    display: grid;
    grid-template-columns: 10% 80% 10%;
}

.timeline section {
    min-height: 50px;
}

.timeline .info {
    background-clip: padding-box;
    border-top: 2px solid #19aaed;
}

.timeline .info h2 {
    font-size: 1.4rem;
    margin-bottom: 1px;
}

.timeline .info span {
    font-size: 15px;
    text-align: justify;
    line-height: 2;
    margin-top: 15px;
}

.timeline .info:nth-of-type(2n) {
    /*padding-right: 2em;*/
    text-align: right;
}

.timeline .info:nth-of-type(2n) span {
    /*max-width: 50%;*/
    display: block;
    /*animation: slideInRight 1.5s forwards 0s ease-in-out;*/
}

.timeline .info:nth-of-type(2n+1) {
    /*padding-left: 2em;*/
    padding-left: 1em;
    text-align: left;
}

.timeline .info:nth-of-type(2n+1) span {
    display: block;
    /*animation: slideInLeft 1.5s forwards 0s ease-in-out;*/
}

.timeline .circle-container:nth-child(2n) .tl {
    grid-area: tl;
    border-top: 2px solid #19aaed;
    border-right: 2px solid #19aaed;
    border-top-right-radius: 20px;
    margin-bottom: -2px;
}

.timeline .circle-container:nth-child(2n) .bl {
    grid-area: bl;
    border-bottom: 2px solid #19aaed;
    border-right: 2px solid #19aaed;
    border-bottom-right-radius: 20px;
    margin-bottom: -2px;
}

.timeline .circle-container:nth-child(2n + 1) .tr {
    grid-area: tr;
    border-top: 2px solid #19aaed;
    border-left: 2px solid #19aaed;
    border-top-left-radius: 20px;
    margin-bottom: -2px;
}

.timeline .circle-container:nth-child(2n + 1) .br {
    grid-area: br;
    border-bottom: 2px solid #19aaed;
    border-left: 2px solid #19aaed;
    border-bottom-left-radius: 20px;
    margin-bottom: -2px;
}

.circle-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto 2.5em 2.5em auto;
    grid-template-areas: "tl tl tr tr" "cr cr cr cr" "cr cr cr cr" "bl bl br br";
}

.circle-container div {
    grid-area: cr;
}

.circle {
    width: 5em;
    height: 5em;
    background: #19aaed;
    border-radius: 50%;
    margin-left: 1em;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -1em;
}

.no-border {
    border-top: 0px !important;
    border-left: 0px !important;
    border-bottom: 0px !important;
    border-right: 0px !important;
}

.about .about-desc-line-height {
    line-height: 2;
    text-align: justify;
}

.about .section-title {
    text-align: center;
    padding-bottom: 0px;
}

.about .about-content {
    padding: 26px;
}

.timeline .info .section-img {
    width: 350px;
}

.timeline .info .img-left {
    float: left;
    margin: 20px 15px 15px 0px;
}

.timeline .info .img-right {
    float: right;
    margin: 20px 0px 15px 15px;
}

@keyframes slideInRight {
    0% {
        transform: translateX(-50%);
        opacity: 0.1;
    }
    100% {
        transform: rotate(xx) translateX(0%);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(50%);
        opacity: 0.1;
    }
    100% {
        transform: rotate(xx) translateX(0%);
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    .info span {
        padding-bottom: 1em;
    }
    .timeline .info .section-img {
        width: 300px;
    }
    .circle {
        width: 4em;
        height: 4em;
        background: #19aaed;
        border-radius: 50%;
        margin-left: 1em;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto 1.5em 1.5em auto;
        grid-template-areas: "tl tl tr tr" "cr cr cr cr" "cr cr cr cr" "bl bl br br";
    }
}