@media print,screen {
	#pageindex {
		position: absolute;
		left: 0;
		width: 100%;
		color: #fff;
		background: linear-gradient(to bottom, #162238 0%, #162238 17%, #202a68 100%);
		padding: 28px 0 24px;
	}
	#pageindex a {
		color: #fff;
	}
	#pageindex.red {
		background: linear-gradient(to bottom, #c60113 0%, #c70113 24%, #e60113 100%);
	}
	#pageindex h3 {
		background: transparent;
		border: 0;
		text-align: center;
		font-style: italic;
		color: #fff;
		margin-bottom: 16px;
	}
	#pageindex ol,
	#pageindex ul {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	#pageindex ol {
		counter-reset: item;
	}
	#pageindex ol li,
	#pageindex ul li {
		white-space: nowrap;
		margin: 0 10px 28px;
		position: relative;
	}
	#pageindex ol li:before {
/*		counter-increment: item;
		content: counter(item);*/
		font-size: 130%;
		font-style: italic;
		position: absolute;
		left: 2px;
		top: 0;
		height: 100%;
		padding-right: 8px;
/*		border-right: 1px solid #fff;*/
	}
	#pageindex ol li a,
	#pageindex ul li a {
		display: block;
		text-decoration: none;
		border-bottom: 1px solid #fff;
		position: relative;
		padding: 4px 8px;
	}
	#pageindex ol li a {
		padding: 4px 8px 4px 4px;
	}
	#pageindex ol li a:after,
	#pageindex ul li a:after {
		content: "";
		position: absolute;
		bottom: -22px;
		left: 45%;
		left: calc( 50% - 9px );
		display: block;
		background: url(./images/pi_arrow_red.png) no-repeat center;
		width: 18px;
		height: 12px;
		transition: filter 0.2s ease-in-out, bottom 0.2s ease-out;
	}
	#pageindex.red ol li a:after,
	#pageindex.red ul li a:after {
		background-image: url(./images/pi_arrow_blue.png);
	}
	#pageindex ol li a:hover:after,
	#pageindex ul li a:hover:after {
		filter: brightness(0) invert(1);
		bottom: -26px;
	}
}
@media print,screen and ( min-width: 768px ) {

}