| 
									
										
										
										
											2018-07-26 16:50:29 +00:00
										 |  |  | /* | 
					
						
							|  |  |  | interval: time between spans appearing | 
					
						
							|  |  |  | transitionTime: the time it takes for the span to finish "sliding" in to place. | 
					
						
							|  |  |  | 	transitionTime should be <= interval/2; | 
					
						
							|  |  |  | n: total number of spans sliding in and out | 
					
						
							|  |  |  | 	n should be > 1 | 
					
						
							|  |  |  | nth: the value in "nth-child())" | 
					
						
							|  |  |  | */ | 
					
						
							|  |  |  | .sliding-vertical{ | 
					
						
							|  |  |  | 	display: inline; | 
					
						
							|  |  |  | 	text-indent: 8px; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | .sliding-vertical span{ | 
					
						
							| 
									
										
										
										
											2018-08-02 21:53:06 -07:00
										 |  |  | 	animation: topToBottom 15s linear infinite 0s;/* interval * n */ | 
					
						
							|  |  |  | 	-ms-animation: topToBottom 15s linear infinite 0s;/* interval * n */ | 
					
						
							|  |  |  | 	-webkit-animation: topToBottom 15s linear infinite 0s;/* interval * n */ | 
					
						
							| 
									
										
										
										
											2018-07-26 16:50:29 +00:00
										 |  |  | 	opacity: 0; | 
					
						
							|  |  |  | 	overflow: hidden; | 
					
						
							|  |  |  | 	position: absolute; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | .sliding-vertical span:nth-child(2){ | 
					
						
							|  |  |  | 	animation-delay: 2.5s;/* (nth - 1) * interval */ | 
					
						
							|  |  |  | 	-ms-animation-delay: 2.5s;/* (nth - 1) * interval */ | 
					
						
							|  |  |  | 	-webkit-animation-delay: 2.5s;/* (nth - 1) * interval */ | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | .sliding-vertical span:nth-child(3){ | 
					
						
							|  |  |  | 	animation-delay: 5s; | 
					
						
							|  |  |  | 	-ms-animation-delay: 5s; | 
					
						
							|  |  |  | 	-webkit-animation-delay: 5s; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | .sliding-vertical span:nth-child(4){ | 
					
						
							|  |  |  | 	animation-delay: 7.5s; | 
					
						
							|  |  |  | 	-ms-animation-delay: 7.5s; | 
					
						
							|  |  |  | 	-webkit-animation-delay: 7.5s; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | .sliding-vertical span:nth-child(5){ | 
					
						
							|  |  |  | 	animation-delay: 10s; | 
					
						
							|  |  |  | 	-ms-animation-delay: 10s; | 
					
						
							|  |  |  | 	-webkit-animation-delay: 10s; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | .sliding-vertical span:nth-child(6){ | 
					
						
							|  |  |  | 	animation-delay: 12.5s; | 
					
						
							|  |  |  | 	-ms-animation-delay: 12.5s; | 
					
						
							| 
									
										
										
										
											2018-08-02 21:53:06 -07:00
										 |  |  | 	-webkit-animation-delay: 12.5s; | 
					
						
							| 
									
										
										
										
											2018-07-26 16:50:29 +00:00
										 |  |  | } | 
					
						
							| 
									
										
										
										
											2018-08-02 21:53:06 -07:00
										 |  |  | /* | 
					
						
							| 
									
										
										
										
											2018-07-26 16:50:29 +00:00
										 |  |  | .sliding-vertical span:nth-child(7){ | 
					
						
							|  |  |  | 	animation-delay: 15s; | 
					
						
							|  |  |  | 	-ms-animation-delay: 15s; | 
					
						
							|  |  |  | 	-webkit-animation-delay: 15s; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | */ | 
					
						
							|  |  |  | /*topToBottom Animation*/ | 
					
						
							|  |  |  | @keyframes topToBottom{ | 
					
						
							|  |  |  | 	0% { opacity: 0; transform: translateY(-50px); } | 
					
						
							| 
									
										
										
										
											2018-08-02 21:53:06 -07:00
										 |  |  | 	6.667% { opacity: 1; transform: translateY(0px); }/* transitionTime/(interval*n) */ | 
					
						
							|  |  |  | 	16.667% { opacity: 1; transform: translateY(0px); } /* 1/n */ | 
					
						
							|  |  |  | 	23.333% { opacity: 0; transform: translateY(50px); } /* (interval + transitionTime)/(n*interval) */ | 
					
						
							| 
									
										
										
										
											2018-07-26 16:50:29 +00:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | @-moz-keyframes topToBottom{ | 
					
						
							|  |  |  | 	0% { opacity: 0; -moz-transform: translateY(-50px); } | 
					
						
							| 
									
										
										
										
											2018-08-02 21:53:06 -07:00
										 |  |  | 	6.667% { opacity: 1; -moz-transform: translateY(0px); } | 
					
						
							|  |  |  | 	16.667% { opacity: 1; -moz-transform: translateY(0px); } | 
					
						
							|  |  |  | 	23.333% { opacity: 0; -moz-transform: translateY(50px); } | 
					
						
							| 
									
										
										
										
											2018-07-26 16:50:29 +00:00
										 |  |  | } | 
					
						
							|  |  |  | @-webkit-keyframes topToBottom{ | 
					
						
							|  |  |  | 	0% { opacity: 0; -webkit-transform: translateY(-50px); } | 
					
						
							| 
									
										
										
										
											2018-08-02 21:53:06 -07:00
										 |  |  | 	6.667% { opacity: 1; -webkit-transform: translateY(0px); } | 
					
						
							|  |  |  | 	16.667% { opacity: 1; -webkit-transform: translateY(0px); } | 
					
						
							|  |  |  | 	23.333% { opacity: 0; -webkit-transform: translateY(50px); } | 
					
						
							| 
									
										
										
										
											2018-07-26 16:50:29 +00:00
										 |  |  | } | 
					
						
							|  |  |  | @-ms-keyframes topToBottom{ | 
					
						
							|  |  |  | 	0% { opacity: 0; -ms-transform: translateY(-50px); } | 
					
						
							| 
									
										
										
										
											2018-08-02 21:53:06 -07:00
										 |  |  | 	6.667% { opacity: 1; -ms-transform: translateY(0px); } | 
					
						
							|  |  |  | 	16.667% { opacity: 1; -ms-transform: translateY(0px); } | 
					
						
							|  |  |  | 	23.333% { opacity: 0; -ms-transform: translateY(50px); } | 
					
						
							| 
									
										
										
										
											2018-07-26 16:50:29 +00:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | .install-for { | 
					
						
							|  |  |  |   margin-top: 3.1111111113em; | 
					
						
							| 
									
										
										
										
											2018-08-02 21:53:06 -07:00
										 |  |  | } |