@media only screen and (max-height: 1079px) {
    html {
        font-size: 66.7%;
    }
}
html, body {
    padding: 0;
    margin: 0;
    background: black;
    overflow: hidden;
}

#main {
	position: relative;
    width: 67.5rem;
    height:120rem;
    transform-origin: 0 0;
    font-family: Arial;
    color: #444444;
    transform: rotate(-90deg) translateX(-67.5rem);
    -ms-transform: rotate(-90deg) translateX(-67.5rem);
    -ms-transform-origin: 0 0; 
    -webkit-transform: rotate(-90deg) translateX(-67.5rem);
    -webkit-transform-origin: 0 0;
    -webkit-backface-visibility: hidden;

}
#main .head  {
    padding: 1.25rem 1rem 0rem 1rem;
    color: #fff;
    text-align: left;
    font-weight: bold;
    background-color: #89BD24 !important;
    height: 6rem;
    box-sizing: border-box;
    font-size: 3rem;
}
#index {
    width: 67.5rem;
    height: 114rem;
    overflow: hidden;
    background-color: #efefef;
}
#index .index-table {
	height: 100%;
	width: 100%;
    border-collapse: collapse;
    border: none;
}
#index .entry {
/* 	display: block; */
	width: 67.5rem;
	height: auto;
	font-size: 3rem;
}
#index .entry > * {
	padding:1rem 0 1rem 1rem;
}
#index .entry>*:first-child {
	width: 46rem;
}
#index .entry span {
	display: inline-block;
}
.name {
	display: inline-block;
    width: 46rem;
}
#index .dummy {
	display: none;
}
#index tr:not(.head) {
	overflow: hidden;
}
#index .entry:nth-child(odd) {
    background-color: #efefef;
}

#index .entry:nth-child(even) {
   background-color: #e6e6e6;

}

#next-page-timer {
	opacity: 0;
	position: absolute;
	top: 1.4rem;
	right: 1.5rem;
	width: 3rem;
	height: 3rem;
	z-index: 10;
	background-color: inherit;
	overflow: hidden;
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}
#next-page-timer .pie {
	width: 3rem;
	height: 3rem;
	background-size: contain;
	position: absolute;

}
#next-page-timer .spinner {
	background: url(../images/halfpie2.svg);
	background-size: contain;
}
#next-page-timer .filler {
	z-index: 50;
	background: url(../images/halfpie.svg);
	background-size: contain;
	opacity: 0;
}
#next-page-timer .mask {
	width: 50%;
	height: 100%;
	position: absolute;
	z-index: 100;
	opacity: 1;
	background-color: inherit;
}
#next-page-timer.play {
	opacity: 1;
}
#next-page-timer.play .spinner {
	animation: spinner 6s linear 1;
	-webkit-animation: spinner 6s linear 1;
	z-index: 0;
}
#next-page-timer.play .filler {
	animation: filler 6s steps(1, end) 1;
	-webkit-animation: filler 6s steps(1, end) 1;
}
#next-page-timer.play .mask {
	animation: mask 6s steps(1, end) 1;
	-webkit-animation: mask 6s steps(1, end) 1;
}
@keyframes spinner {
  0%   		{ transform: rotate(0deg); }
  100% 		{ transform: rotate(-360deg); }
}
@-webkit-keyframes spinner {
  0%   		{ -webkit-transform: rotate(0deg); }
  100% 		{ -webkit-transform: rotate(-360deg); }
}
@keyframes filler {
  0%        { opacity: 1;}
  50%, 100%	{ opacity: 0;}
}
@-webkit-keyframes filler {
  0%        { opacity: 1;}
  50%, 100%	{ opacity: 0;}
}
@keyframes mask {
  0%        { opacity: 0;}
  50%, 100%	{ opacity: 1;}
}
@-webkit-keyframes mask {
  0%        { opacity: 0;}
  50%, 100%	{ opacity: 1; background-color: inherit}
}