.scroll-number { position: relative; display: inline-flex; font-size: inherit; color: inherit; font-family: inherit; overflow: hidden; width: auto; height: 1.3em; transition: all 1.8s ease; }

.scroll-number .digit { font-size: inherit; color: inherit; font-family: inherit; line-height: inherit; }

.scroll-number .digit { display: flex; flex-direction: column; text-align: center; opacity: 0; flex-shrink: 2; flex-basis: 1ch; width: 1ch; position: static; right: 0; line-height: 1.3em; transition: all 2s ease; transition: transform 1.8s ease-in-out; }
.scroll-number .digit.visible { position: static; width: 1ch; opacity: 1; flex-shrink: 1; }

.scroll-number .non-digit { opacity: 0; flex-shrink: 2; width: auto; position: static; right: 0; line-height: 1.3em; transition: all 2s ease; }
.scroll-number .non-digit.visible { position: static; width: auto; opacity: 1; flex-shrink: 1; }

.scroll-number .fade-top { position: absolute; top: 0; left: 0; width: 100%; height: 15px; background: transparent;/* linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);*/ z-index: 1; }

.scroll-number .fade-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 15px; background: transparent; /*linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);*/ z-index: 1; }


/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100&1+0,0+100 */
 /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */