/*
Matt Soria
https://codepen.io/poopsplat/pen/VLdNZq

<div class="scrolltext">
  <ul>
    <li class="item-6">&nbsp;</li>
    <li class="item-6">&nbsp;</li>
    <li class="item-6">&nbsp;</li>
    <li class="item-6">&nbsp;</li>
    <li class="item-1">One</li>
    <li class="item-2">Two</li>
    <li class="item-3">Three</li>
    <li class="item-4">Four</li>
    <li class="item-5">Five</li>
    <li class="item-6">One</li>
    <li class="item-1">One</li>
    <li class="item-2">Two</li>
    <li class="item-3">Three</li>
    <li class="item-4">Four</li>
    <li class="item-5">Five</li>
    <li class="item-6">One</li>
    <li class="item-6">&nbsp;</li>
    <li class="item-6">&nbsp;</li>
    <li class="item-6">&nbsp;</li>
    <li class="item-6">&nbsp;</li>
  </ul>  
</div>

*/

.scrolltext {
	 height:55vh;;
	 margin: auto;
	 overflow: hidden;
   position: relative;
   mix-blend-mode: hard-light;
}
 .scrolltext::before {
	 top: 0;
	 left: 0;
	 z-index: 1;
	 width: 100%;
	 content: '';
	 height: 80px;
	 position: absolute;
	 /*background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));*/
}
 .scrolltext::after {
	 left: 0;
	 bottom: 0;
	 z-index: 1;
	 width: 100%;
	 content: '';
	 height: 10px;
   position: absolute;
   background: linear-gradient(transparent, gray);
	 /*background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));*/
}
 .scrolltext ul {
	 margin: 0;
	 padding: 0;
	 animation: 15s linear 0.16s infinite forwards running scrollUp;
}
 .scrolltext ul li {
	 opacity: 1;
	 height: 20px;
	 padding: 10px;
	 list-style: none;
}
 @keyframes fadeOut {
	 from {
		 opacity: 1;
	}
	 to {
		 opacity: 1;
	}
}
 @keyframes scrollUp {
	 from {
		 transform: translateY(0);
	}
	 to {
		 transform: translateY(-83.3333333333%);
	}
}