html {
    scroll-behavior: smooth;
}

.grayish {
  border: 1px solid #dedede;
}

.timeline-wrapper {
    max-width: 1080px;
    margin: 20px auto;
    padding: 0 0px;
    position: relative;
}

.timeline-wrapper .center-line {
    position: absolute;
    height: 100%;
    width: 4px;
    background: #eeeeee;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
}

.timeline-wrapper .row {
    display: flex;
}

.timeline-wrapper .row-1 {
    justify-content: flex-start;
}

.timeline-wrapper .row-2 {
    justify-content: flex-end;
}

.timeline-wrapper .row section {
    background: #eeeeee;
    border-radius: 5px;
    width: calc(50% - 40px);
    padding: 20px;
    position: relative;
}

.timeline-wrapper .row section::before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    background: #eeeeee;
    top: 28px;
    z-index: -1;
    transform: rotate(45deg);
}

.row-1 section::before {
    border: 1px solid #dedede;
    right: -7px;
}

.row-2 section::before {
    left: -7px;
    border: 1px solid #dedede;
}

.row section .icon,
.center-line .scroll-icon {
    position: absolute;
    background: #1E4B32;
    height: 38px;
    width: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.2em;
    box-shadow: 0px 0px 0px 4px #eeeeee, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.row section .icon1, .center-line {
    position: absolute;
    background: #8FA699;
    /*background: #a0b6bf;*/
    height: 38px;
    width: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    color: #000000;
    font-size: 1.2em;
    box-shadow: 0px 0px 0px 4px #eeeeee, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.row section .icon2, .center-line {
    position: absolute;
    background: #70919f;
    height: 38px;
    width: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.2em;
    box-shadow: 0px 0px 0px 4px #eeeeee, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.row section .icon3, .center-line {
    position: absolute;
    /*background-image: linear-gradient(to right, #406c7e, #238088, #219381, #50a26b, #89ad4e, #aba133, #cb902a, #e87b39, #e25248, #d0275b, #b0006f, #800080);
    background-image: linear-gradient(to right, #800080, #b0006f, #d0275b, #e25248, #e87b39, #cb902a, #aba133, #89ad4e, #50a26b, #219381, #238088, #406c7e);
    background-image: linear-gradient(to right, #800080, #b0006f, #d0275b, #e25248, #e87b39, #cb902a, #aba133, #89ad4e, #50a26b, #219381, #238088, #406c7e);
    background-image: linear-gradient(to right top, #800080, #b0006f, #d0275b, #e25248, #e87b39, #cb902a, #aba133, #89ad4e, #50a26b, #219381, #238088, #406c7e);
    background-image: linear-gradient(to right top, #e0af3b, #9eaf46, #63a761, #30997b, #1b8788, #007c8f, #007091, #1b638f, #1d5999, #3e4b9b, #613594, #800080);
    background-image: linear-gradient(to right top, #e0af3b, #e78836, #e56042, #d73654, #bc0468, #a31f7f, #813290, #553e98, #31519c, #165d96, #23668b, #406c7e);*/
    background: linear-gradient(to right, #E0AF3B, #70919F);
    height: 38px;
    width: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.2em;
    box-shadow: 0px 0px 0px 4px #eeeeee, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.row section .icon4, .center-line {
    position: absolute;
    background: #800080;
    height: 38px;
    width: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.2em;
    box-shadow: 0px 0px 0px 4px #eeeeee, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.row section .icon5, .center-line {
    position: absolute;
    background: linear-gradient(to right, #e0af3b, #800080);
    height: 38px;
    width: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.2em;
    box-shadow: 0px 0px 0px 4px #eeeeee, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.center-line .scroll-icon {
    /*background-image: linear-gradient(to right, #406c7e, #238088, #219381, #50a26b, #89ad4e, #aba133, #cb902a, #e87b39, #e25248, #d0275b, #b0006f, #800080);*/
    background: linear-gradient(to right, #C7D2CC, #1E4B32);
    bottom: 0px;
    left: 50%;
    font-size: 1.8em;
    transform: translateX(-50%);
    color: #000000;
}

.row-1 section .icon {
    top: 15px;
    right: -60px;
}

.row-2 section .icon {
    top: 15px;
    left: -60px;
}

.row-1 section .icon1 {
    top: 15px;
    right: -60px;
}

.row-2 section .icon1 {
    top: 15px;
    left: -60px;
}

.row-1 section .icon2 {
    top: 15px;
    right: -60px;
}

.row-2 section .icon2 {
    top: 15px;
    left: -60px;
}

.row-1 section .icon3 {
    top: 15px;
    right: -60px;
}

.row-2 section .icon3 {
    top: 15px;
    left: -60px;
}

.row-1 section .icon4 {
    top: 15px;
    right: -60px;
}

.row-2 section .icon4 {
    top: 15px;
    left: -60px;
}

.row-1 section .icon5 {
    top: 15px;
    right: -60px;
}

.row-2 section .icon5 {
    top: 15px;
    left: -60px;
}

.row section .details,
.row section .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:-10px; keep this for wma only
}

.row section .details .title {
    font-size: 1.2em;
    font-weight: 600;
}

.row section p {
    margin: 4px 0 17px 0;
    font-size: .85em;
}

.row section .bottom a {
    text-decoration: none;
    background: -webkit-gradient(linear, left top, left bottom, from(#70919f), to(#ecf1f3));
    background: -moz-linear-gradient(top, #70919f, #ecf1f3);
    color: #000;
    padding: 8px 14px;
    border-radius: 5px;
    font-size: .8em;
    font-weight: 400;
    transition: all 0.3s ease;
}

.row section .bottom a:hover {
    transform: scale(0.97);
}

@media(max-width: 790px) {
    .timeline-wrapper .center-line {
        left: 40px;
    }
    .timeline-wrapper .row {
        margin: 30px 0px 3px 60px;
    }
    .timeline-wrapper .row section {
        width: 100%;
    }
    .row-1 section::before {
        left: -7px;
    }
    .row-1 section .icon, .icon1, .icon2, .icon3, .icon4, .icon5 {
        left: -60px;
    }
}

@media(max-width: 440px) {
    .timeline-wrapper .center-line,
    .row section::before,
    .row section .icon, .icon1, .icon2, .icon3, .icon4, .icon5 {
        display: none;
    }
    .timeline-wrapper .row {
    	margin: 10px 0;
    }
}
.references {
  margin-bottom: 2px;
}