.scrollContainer {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%
}

.process-dot {
    display: inline-block;
    position: relative;
}

#reveal-dots .process-dot:before {
    position: absolute;
    width: 24px;
    height: 24px;
    content: '';
    left: 0;
    top: -14px;
    border-radius: 20px;
    background-color: #00E89D;
}

.process-dot {
    opacity: 0;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    position: absolute;
}

.process-dot.visible {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

#reveal-dots .process-dot {
    top: 25px;
    left: 12px;
}

#reveal-dots .process-dot:nth-child(2) {
    left: 467px;
    top: 26px;
}

#reveal-dots .process-dot:nth-child(3) {
    top: 65px;
    left: 460px;
    width: 255px;
    text-align: right;
}

#reveal-dots .process-dot:nth-child(3):before {
    left: auto;
    right: -43px;
    top: 63px;
}

#reveal-dots .process-dot:nth-child(4) {
    top: 263px;
    left: 180px;
}

#reveal-dots .process-dot:nth-child(4):before {}

#reveal-dots .process-dot:nth-child(5) {
    top: 320px;
    left: 65px;
}

#reveal-dots .process-dot:nth-child(5):before {
    left: -49px;
    top: 47px;
}

#reveal-dots .process-dot:nth-child(6) {
    top: 360px;
    left: 390px;
}

#reveal-dots .process-dot:nth-child(6):before {
    top: auto;
    bottom: -26px;
    left: 14px;
}

#reveal-dots .process-dot:nth-child(7) {
    top: 360px;
    left: 620px;
    text-align: right;
    width: 170px;
}

#reveal-dots .process-dot:nth-child(7):before {
    top: auto;
    bottom: -24px;
    left: 131px;
}

#reveal-dots .process-dot h2 {
    font-size: 20px;
    color: #6A6E72;
    padding-top: 30px;
    font-weight: 600;
}

#reveal-dots .process-dot p {
    font-size: 16px;
    color: #6A6E72;
    padding: 0;
}

@media screen and (max-width: 767px) {
    .the-process {
        min-height: 1330px;
    }
    .the-process::before {
        top: auto;
        bottom: 0;
        background-size: 90% auto;
        width: 100%;
        height: 285px;
    }
    .the-process-highlight {
        position: relative;
        background: none;
    }
    .the-process-highlight {
        position: relative;
        background: none;
        position: relative;
        height: 720px;
        width: 100%;
        background: none;
        right: auto;
        top: 30px;
    }
    .the-process-highlight:before {
        background: #D1D2D4 !important;
        width: 6px;
        height: 100%;
        content: '';
        position: absolute;
        top: 0;
        left: 12px;
        margin-left: -5px;
        z-index: 9;
    }
    #reveal-dots .process-dot:after {
        position: absolute;
        width: 22px;
        height: 22px;
        content: '';
        left: -36px;
        top: 29px;
        border: 5px solid #fff;
        border-radius: 50%;
    }
    #reveal-dots .process-dot:before,
    #reveal-dots .process-dot:nth-child(3):before,
    #reveal-dots .process-dot:nth-child(4):before,
    #reveal-dots .process-dot:nth-child(5):before,
    #reveal-dots .process-dot:nth-child(6):before,
    #reveal-dots .process-dot:nth-child(7):before {
        position: absolute;
        width: 30px;
        height: 30px;
        content: '';
        left: -40px;
        top: 25px;
        border: 5px solid #D1D2D4;
        background-color: #D1D2D4;
    }
    #reveal-dots .process-dot.visible:before {
        background-color: #09D191;
    }
    #reveal-dots .process-dot {
        top: -35px;
        left: 35px;
        opacity: 1;
        z-index: 999;
    }
    #reveal-dots .process-dot h2 {
        padding-top: 25px;
    }
    #reveal-dots .process-dot h2,
    #reveal-dots .process-dot p {
        opacity: 0;
        -webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        -ms-transition: all 0.4s ease-out;
        -o-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
    }
    #reveal-dots .process-dot.visible h2,
    #reveal-dots .process-dot.visible p {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #reveal-dots .process-dot:nth-child(2) {
        top: 104px;
        left: 35px;
    }
    #reveal-dots .process-dot:nth-child(3) {
        top: 223px;
        left: 35px;
        right: auto;
        text-align: left;
    }
    #reveal-dots .process-dot:nth-child(4) {
        top: 352px;
        left: 35px;
    }
    #reveal-dots .process-dot:nth-child(5) {
        top: 471px;
        left: 35px;
    }
    #reveal-dots .process-dot:nth-child(6) {
        top: 566px;
        left: 35px;
    }
    #reveal-dots .process-dot:nth-child(7) {
        top: 686px;
        left: 35px;
        text-align: left;
    }
}