:root {
	--fromValue: 700px;
	--toValue: -1400px;
	--timeValue: 85s;
	--repeatValue: ;
	
}


/* Animating the UL 
-_-_-_-_-_-_-_-_-_-_-_-_ */

@keyframes scrollEvent {
 from {
   top: var(--fromValue);
 }
 to {
   top: var(--toValue);
 }

}

@-moz-keyframes scrollEvent {
 from {
   top: var(--fromValue);
 }
 to {
   top: var(--toValue);
 }

}

@-webkit-keyframes scrollEvent {
 from {
   top: var(--fromValue);
 }
 to {
   top: var(--toValue);
 }

}

@-ms-keyframes scrollEvent {
 from {
   top: var(--fromValue);
 }
 to {
   top: var(--toValue);
 }

}

@-o-keyframes scrollEvent {
 from {
   top:var(--fromValue);
 }
 to {
   top: var(--toValue);
 }

}


#scroll {
	
	-webkit-animation: scrollEvent var(--timeValue) linear var(--repeatValue);
	-moz-animation: scrollEvent var(--timeValue) linear var(--repeatValue);
	-ms-animation: scrollEvent var(--timeValue) linear var(--repeatValue);
	-o-animation: scrollEvent var(--timeValue) linear var(--repeatValue);
	animation: scrollEvent var(--timeValue) linear var(--repeatValue); 
	
	
	/* 25s is speed: 25s is slower than 15s
	
	-webkit-animation: scrollEvent var(--timeValue) linear infinite;
	-moz-animation: scrollEvent var(--timeValue) linear infinite;
	-ms-animation: scrollEvent var(--timeValue) linear infinite;
	-o-animation: scrollEvent var(--timeValue) linear infinite;
	animation: scrollEvent var(--timeValue) linear infinite; 
	
	-webkit-animation: scrollEvent 85s linear infinite;
	-moz-animation: scrollEvent 85s linear infinite;
	-ms-animation: scrollEvent 85s linear infinite;
	-o-animation: scrollEvent 85s linear infinite;
	animation: scrollEvent 85s linear infinite; 
	
	*/
}