@font-face {
    font-family: 'robotomedium';
    src: url('../fonts/Roboto-Medium.eot');
    src: url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Medium.woff2') format('woff2'),
        url('../fonts/Roboto-Medium.woff') format('woff'),
        url('../fonts/Roboto-Medium.ttf') format('truetype'),
        url('../fonts/Roboto-Medium.svg#Roboto-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.wvi-pager{
	text-align: center;
	font-size: 1.125em;
	font-family: "robotomedium";
}
.wvi-pager-holder {
	display: inline-block;
}
.wvi-pager-holder a{
	cursor: pointer;
	color: #999;
	margin: 0 2px;
	display: inline-block;
	width: 2.5em;
	height: 2.5em;
	border-radius: 0.22em;
	background-color: #fafafa;
	line-height: 2.4;
}
.wvi-pager-holder a.jp-current{ 
	color: #fff;
	text-decoration: underline;
	background-color: #0170c1;
}
.wvi-pager .arrow{
	cursor: pointer;
	color: #999;
	margin: 0 2px;
	width: 2.5em;
	height: 2.5em;
	border-radius: 0.22em;
	background-color: #fafafa;
	line-height: 2.4;
	display: inline-block;
}
.wvi-pager .arrow.jp-disabled{
	cursor: default;
}
.wvi-pager .arrow img{
	background-repeat: no-repeat;
	background-image: url(../images/jpage_arrow_bg.png);
	background-size: auto 200%;
	background-position: center top;
	width: 0.78em;
	vertical-align: middle;
}
.wvi-pager .arrow.prev img{
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
.wvi-pager .arrow.jp-disabled img{
	background-position: center top !important;
}

@media only screen and (min-width:1024px){
	.wvi-pager-holder a:hover { 
		color: #fff;
		background-color: #0170c1;
	}
	.wvi-pager .arrow:hover img{
		background-position: center bottom;
	}
}
@media only screen and (max-width:1024px){
	.wvi-pager{
		font-size: 1.25em;
	}
}