body,html {padding: 0;margin: 0;font-family: 'Roboto', sans-serif;}
*,*:before,*:after {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.demo-info {position: absolute;width: 500px;top: 200px;left: 0;right: 0;margin: auto;z-index: 3;padding: 16px;max-width: 100vw;background: #fff;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;-moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);-moz-transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);-o-transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);}
.demo-info.hidden {-moz-transform: translate(0, -300%);-ms-transform: translate(0, -300%);-o-transform: translate(0, -300%);-webkit-transform: translate(0, -300%);transform: translate(0, -300%);}
.demo-info h1 {margin-top: 0;font-weight: 500;}
.demo-info .button,.demo-info a {color: #fff;background: #303F9F;display: inline-block;text-align: center;padding: 0 16px;height: 48px;line-height: 48px;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;cursor: pointer;
font-weight: 500;text-transform: uppercase;}
.demo-info .button {float: right;width: auto;}
.demo-info a {text-decoration: none;margin: 8px 0;}
.demo-info ul {list-style: square;}
#reader-container {width: 95%;height:95%;min-height: 500px;position: absolute;top: 25px;left: 0;right: 0;/*bottom: 16px;*/margin: auto;background: transparent;z-index: 2;}
#reader-container.wbg {background: inherit;}
#reader-container:fullscreen {background: url(image/background.png) 50% 50% no-repeat;background-size: cover;}
#reader-container:-webkit-fullscreen {background: url(image/background.png) 50% 50% no-repeat;background-size: cover;}
#reader-container:-webkit-full-screen {background: url(image/background.png) 50% 50% no-repeat;background-size: cover;}
#reader-container:-moz-fullscreen {background: url(image/background.png) 50% 50% no-repeat;background-size: cover;}
#reader-container:-ms-fullscreen {background: url(image/background.png) 50% 50% no-repeat;background-size: cover;}
#background {z-index: 1;background: url(image/background.png) 50% 50% no-repeat;background-size: cover;height: 100vh;width: 100vw;position: fixed;top: 0;left: 0;right: 0;bottom: 0;/*-webkit-filter: sepia(50%) hue-rotate(155deg) saturate(20%); filter: sepia(50%) hue-rotate(155deg) saturate(20%);*/}
.icon {color: rgba(0, 0, 0, 0.87);font-family: 'Material Icons';font-weight: normal;font-style: normal;font-size: 24px;/* Preferred icon size */display: inline-block;line-height: 48px;text-transform: none;text-align: center; letter-spacing: normal;-ms-word-wrap: normal;word-wrap: normal;white-space: nowrap;direction: ltr;/* Support for all WebKit browsers. */-webkit-font-smoothing: antialiased;/* Support for Safari and Chrome. */text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ -moz-font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; }
.icon.invert {color: rgba(255, 255, 255, 0.87); }
.mobile-only { display: none; }

body{counter-reset: thumbNum;}
.thumb{counter-increment: thumbNum;}
.thumb::before{width: 25px; height: 25px; content:counter(thumbNum); display: block; position: absolute; bottom:5px; right: 5px;  color: #fff; line-height: 25px; text-align: center; background: #F26626; z-index: 5; font-size: 12px;}

.share{position: absolute; width: 50px; left: 2.5%; top:2.5%; z-index: 3; background: url(image/share.png) no-repeat 27px bottom; padding-bottom: 60px;}
.share a{margin: 8px;    width: 48px;    height: 48px;    background: #fff; display: block; border: 3px solid #d0d5d8; background: #fff; text-align: center; line-height: 48px; text-decoration: none; color:#5d5d5d; font-size: 22px;}
.share a:hover{color: #F26626; border:3px solid #F26626;}

.goToPage{ position: absolute; background:url(image/page.png) no-repeat right top;  right: 2.5%; top:2.5%; z-index: 3; margin: 70px 8px 0 0; padding-top: 25px;-webkit-transition: all 0.4s;  -moz-transition: all 0.4s;  -o-transition: all 0.4s;  transition: all 0.4s; display: none;}
.goToPage div{ width:112px;border: 3px solid #d0d5d8; height: 46px;}
#txtPage{background: #fff; height: 40px; text-align: center; font-family: 'Roboto', sans-serif; font-size: 16px; color: #5d5d5d; border:none; width: 60px; float: left;}
#btnPage{background: #d0d5d8 url(image/arrow.png) no-repeat center; border:none; height: 40px; width: 46px; float: left;}

.goToPage.withThumb{right: 200px;}


.pagination{position:absolute; background: #fff; left:50%; bottom: 5%; transform: translateX(-50%); -webkit-transform: translateX(-50%);-moz-transform: translateX(-50%); background: #fff; border:3px solid #d0d5d8; height: 48px; line-height:42px; width: 100px; z-index: 99; display: none;}
.pagination span{width: 50%; line-height:42px; text-align:center; float:left;}
.pagination span#leftPaneNum{border-right: 1px solid #d0d5d8;}
.pagination span#rightPaneNum{border-left: 1px solid #d0d5d8;}

@media only screen and (max-width: 1440px) {
	.goToPage.withThumb{right: 185px;}
}

@media only screen and (max-width: 1220px) {
  .desktop-only {display: none;}
  .mobile-only {display: initial;}
}

@media only screen and (max-width: 670px) {
  .header .logo { display: none;}
  .header .center {padding-left: 8px;}
  #reader-container {width: 100%;height: 85%; top:10px;}
  .demo-info { top: 90px;}
  .goToPage{display: none;}
  .share{top:3px; left:0; width: 150px;}
    .share a{width: 38px; height: 38px; line-height:38px; float:left; margin-right: 0;}
    #reader-container .controls .btn{width: 38px; height:38px;}
    #reader-container .controls .icon{line-height:32px;}
    #reader-container .controls .topright{top:-8px;}
    #reader-container .content{margin-top: 35px;}
}

@media only screen and (max-width: 419px) {
  .header .center .button { margin: 0;}
  .header .center .button a {padding: 0 8px;}
}