.scroll::-webkit-scrollbar {
    width: 6px;
    height: 2px;
    margin-left: 8px;
    background-color: transparent;
}

.scroll::-webkit-scrollbar-thumb {
    background-color: #54A6E1;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    background-clip: padding-box;
    border-radius: 20px;
}


.scroll {
    padding: 200px 0 200px 200px;
    width: 100%;
    overflow-y: scroll;
    mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent 12px, black 12px);
    mask-size: 100% 20000px;
    mask-position: left bottom;
    -webkit-mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent 12px, black 12px);
    -webkit-mask-size: 100% 20000px;
    -webkit-mask-position: left bottom;
    transition: mask-position 0.3s, -webkit-mask-position 0.3s;
}

.scroll:hover {
    -webkit-mask-position: left top;
    padding-right:12px;
}



#features:before, #implementar:before, #nossasolucao:before, #faq:before {
    height: 100px;
    display: block;
    content: '';
}