@charset "ISO-8859-1";
@import url('//fonts.googleapis.com/css?family=Irish+Grover&display=swap');
@import url('//fonts.googleapis.com/css?family=Macondo+Swash+Caps&display=swap');
@import url('//fonts.googleapis.com/css?family=Walter+Turncoat&display=swap');
@import url('//fonts.googleapis.com/css?family=Rock+Salt&display=swap');

* {
	box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
	font-family: Verdana, sans-serif; 
	margin:0;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

#fullpage {
  position: fixed;
  z-index: 97;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: scroll;
  vertical-align: top;
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background: linear-gradient(160deg, #000000, #021224);
}

/* Slideshow container */
.slideshow-container {
  max-width: 96%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  margin-bottom: 6%; /* Add a bottom margin to avoid content overlay */
  z-index: 97;
}

.mySlides {
	display: none;
	z-index: 0;
}
.myDecoy {
	display: block;
	z-index: 97;
}
img {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
	z-index: 1;
}

@media (hover: hover){
	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover, .up:hover, .down:hover, .hidebtn:hover, #upSButton:hover, #downSButton:hover {
	  background-color: rgba(0,50,150,0.5);
	}
}

/* Number text (1/3 etc) */
.numbertext {
  color: #0202f2;
  font-size: 36px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Buttons */
.up:active, .next:active, .prev:active, .down:active, #upSButton:active, #downSButton:active {
	filter: invert(100%) hue-rotate(180deg);
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: .3s;
}

@keyframes fade {
  from {
  	opacity: .4
  } 
  to {
  	opacity: 1
  }
}

 

/* Common general styles go here */
/* Mobiles in Portrait mode */
@media only screen
and (min-width:320px) {
/* Add you style here */
	.prev, .next{
	   visibility: hidden;
	} 
	.up, .down {
	  cursor: pointer;
	  transition: 0.2s ease;
	  user-select: none;
	  border-radius: 20%;
	  height: 40px;
	  width: 40px;
	  padding: 1px;
	  z-index: 100000;
	}
	#currentPage {
	  line-height: 16px; 
	  width: 100%;
	  font-size: 16px;
	  border-radius: 12px;
	}
	#navibtn {
	    position: fixed;
	    bottom: 1%;
	    left: 5%;
	    height: 50px;
	    width: 50px;
	    border-radius: 50%;
	    opacity: 0.3;
	    border: 4px solid #0055B2;
	    background-color: rgba(240,240,255,0.5);
	    color: #FFFFFF;
	    box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	    z-index: 100000;
	}
	#closeReadingAreaBtn {
	    position: fixed;
	    bottom: 1%;
	    left: 25%;
	    height: 50px;
	    width: 50px;
	    border-radius: 50%;
	    opacity: 0.5;
	    border: 4px solid #6400c8;
	    background-color: rgba(240,240,255,0.5);
	    color: #FFFFFF;
	    box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	    z-index: 100000;
	}
	#downSButton{
	    position: fixed;
	    bottom: 1%;
	    right: 25%;
	    height: 50px;
	    width: 50px;
	    border-radius: 50%;
	    opacity: 0.3;
	    background-color: rgba(240,240,255,0.3);
	    color: #FFFFFF;
	    box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	    z-index: 100000;
	}
	#upSButton{
	    position: fixed;
	    bottom: 1%;
	    right: 5%;
	    height: 50px;
	    width: 50px;
	    border-radius: 50%;
	    opacity: 0.3;
	    background-color: rgba(240,240,255,0.3);
	    color: #FFFFFF;
	    box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	    z-index: 100000;
	}

	/* The navigation bar */
	.navbarBottom {
	  position: fixed; /* Set the navbar to fixed position */
	  bottom: 0; /* Position the navbar at the bottom of the page */
	  left: 0;
	  width: 100%; /* Full width */
	  height: 58px;
	  z-index: 100; 
	  overflow: hidden;
	  background-color: #8181AA;
	  vertical-align: top;
	}
	.hidebtn {
	  display: inline-block;
	  user-select: none;
	  max-width: 28px; 
	  height: 28px;
	  cursor: pointer;
	  color: #fff;
	  background-color: #8181AA;
	  border-radius: 50%;
	  box-shadow: 0 5px #333;
	  z-index: 101;
	}
	#pagenumCopy {
	  right: 45%;
	}
	#bookmarkBtn {
	  font-size: 6px;
	}
	.slideshow-container {
	  margin-bottom: 15%; /* Add a bottom margin to avoid content overlay */
	}
}
  
/* Tablets */
@media only screen
and (min-width : 481px){
/* Add you style here */
	.prev, .next{
	   visibility: hidden;
	} 
	.up, .down {
	  cursor: pointer;
	  transition: 0.2s ease;
	  user-select: none;
	  border-radius: 20%;
	  height: 40px;
	  width: 40px;
	  padding: 1px;
	  z-index: 100000;
	}
	#currentPage {
	  line-height: 24px; 
	  width: 70%;
	  font-size: 18px;
	  border-radius: 12px;
	}
	#navibtn {
	    position: fixed;
	    bottom: 1%;
	    left: 8%;
	    height: 50px;
	    width: 50px;
	    border-radius: 50%;
	    opacity: 0.3;
	    border: 4px solid #0055B2;
	    background-color: rgba(240,240,255,0.5);
	    color: #FFFFFF;
	    box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	    z-index: 100000;
	}
	#closeReadingAreaBtn {
	    position: fixed;
	    bottom: 1%;
	    left: 28%;
	    height: 50px;
	    width: 50px;
	    border-radius: 50%;
	    opacity: 0.5;
	    border: 4px solid #6400c8;
	    background-color: rgba(240,240,255,0.5);
	    color: #FFFFFF;
	    box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	    z-index: 100000;
	}
	#downSButton {
	    position: fixed;
	    bottom: 1%;
	    right: 28%;
	    height: 50px;
	    width: 50px;
	    border-radius: 50%;
	    opacity: 0.3;
	    background-color: rgba(240,240,255,0.3);
	    color: #FFFFFF;
	    box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	    z-index: 100000;
	}
	#upSButton {
	    position: fixed;
	    bottom: 1%;
	    right: 8%;
	    height: 50px;
	    width: 50px;
	    border-radius: 50%;
	    opacity: 0.3;
	    background-color: rgba(240,240,255,0.3);
	    color: #FFFFFF;
	    box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	    z-index: 100000;
	}

	/* The navigation bar */
	.navbarBottom {
	  position: fixed; /* Set the navbar to fixed position */
	  bottom: 0; /* Position the navbar at the bottom of the page */
	  left: 0;
	  width: 100%; /* Full width */
	  height: 55px;
	  z-index: 100; 
	  overflow: hidden;
	  background-color: #8181AA;
	  vertical-align: top;
	}
	.hidebtn {
	  display: inline-block;
	  user-select: none;
	  height: 32px;
	  max-width: 32px; 
	  cursor: pointer;
	  color: #fff;
	  background-color: #8181AA;
	  border-radius: 50%;
	  box-shadow: 0 5px #333;
	  z-index: 101;
	}
	#pagenumCopy {
	  right: 47%;
	}
	#bookmarkBtn {
	  font-size: 10px;
	}
	.slideshow-container {
	  margin-bottom: 10%; /* Add a bottom margin to avoid content overlay */
	}
}
 
/* Desktops and laptops computers */
@media only screen
and (min-width : 961px){
	.prev, .next{
	   visibility: hidden;
	} 
	.up, .down {
	  cursor: pointer;
	  transition: 0.2s ease;
	  user-select: none;
	  border-radius: 20%;
	  height: 50px;
	  width: 50px;
	  padding: 2px;
	  z-index: 100000;
	}
	#currentPage {
	  line-height: 24px; 
	  width: 70%;
	  font-size: 24px;
	  border-radius: 16px;
	}
	#navibtn {
	  position: fixed;
	  bottom: 1%;
	  left: 15%;
	  height: 50px;
	  width: 50px;
	  border-radius: 50%;
	  opacity: 0.3;
	  border: 4px solid #0055B2;
	  background-color: rgba(240,240,255,0.5);
	  color: #FFFFFF;
	  box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	  z-index: 100000;
	}
	#closeReadingAreaBtn {
	  position: fixed;
	  bottom: 1%;
	  left: 35%;
	  height: 50px;
	  width: 50px;
	  border-radius: 50%;
	  opacity: 0.5;
	  border: 4px solid #6400c8;
	  background-color: rgba(240,240,255,0.5);
	  color: #FFFFFF;
	  box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	  z-index: 100000;
	}
	#downSButton {
	  position: fixed;
	  bottom: 1%;
	  right: 35%;
	  height: 50px;
	  width: 50px;
	  border-radius: 50%;
	  opacity: 0.3;
	  background-color: rgba(240,240,255,0.3);
	  color: #FFFFFF;
	  box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	  z-index: 100000;
	}
	#upSButton {
	  position: fixed;
	  bottom: 1%;
	  right: 15%;
	  height: 50px;
	  width: 50px;
	  border-radius: 50%;
	  opacity: 0.3;
	  background-color: rgba(240,240,255,0.3);
	  color: #FFFFFF;
	  box-shadow: 7px 5px 7px rgba(10,10,10,0.5);
	  z-index: 100000;
	}

	/* The navigation bar */
	.navbarBottom {
	  position: fixed; /* Set the navbar to fixed position */
	  bottom: 0; /* Position the navbar at the bottom of the page */
	  left: 0;
	  width: 100%; /* Full width */
	  height: 70px;
	  z-index: 100; 
	  overflow: hidden;
	  background-color: #8181AA;
	  vertical-align: top;
	}
	.hidebtn {
	  display: inline-block;
	  user-select: none;
	  max-width: 40px;
	  height: 40px;
	  cursor: pointer;
	  color: #fff;
	  background-color: #8181AA;
	  border-radius: 50%;
	  box-shadow: 0 5px #333;
	  z-index: 101;
	}
	#pagenumCopy {
	  right: 49%;
	}
	.bookmarkBtn {
	  font-size: 14px;
	}
	.slideshow-container {
	  margin-bottom: 6%; /* Add a bottom margin to avoid content overlay */
	}
}

.halfilterR {
  position: fixed;
  top: 0%;
  right: 0;
  width: 45%;
  height: 100vh;
  background: linear-gradient(to left, rgb(0, 128, 192), rgb(0, 128, 255), rgb(0, 128, 255), rgba(0, 128, 255, 0.5), transparent, transparent, transparent);
}
.halfilterL {
  position: fixed;
  top: 0%;
  left: 0;
  width: 45%;
  height: 100vh;
  background: linear-gradient(to right, rgb(0, 128, 192), rgb(0, 128, 255), rgb(0, 128, 255), rgba(0, 128, 255, 0.5), transparent, transparent, transparent);
}
#pagenumCopy {
	  position: fixed;
	  bottom: 3%;
	  height: 30px;
	  width: 40px;
	  font-size: 24px;
	  text-align: center;
	  opacity: 0.9;
	  color: #2288FF;
	  z-index: 100000;
}
#pagenumCopy:link, #pagenumCopy:hover, #pagenumCopy:visited, #pagenumCopy:active{
	text-decoration: none;
}

#closeImg {
	display: none;
	position: relative;
    z-index: 100000;
}
#centerbtn {
	display: none;
    position: relative;
    z-index: 100000;
}
#upSButton, #downSButton{
	cursor: pointer;
	transition: 0.2s ease;
	user-select: none;
}
.navbarBottom a {
  float: left;
  display: block;
  color: #f2f2f2;
}
.navbarBottom a:hover {
  background: #ddd;
  color: black;
}
.hidebtn:active {
  transition: 0.1s ease;
  background-color: #3e418e;
  box-shadow: 0 1px #333;
  transform: translateY(4px);
}
#bMPage{
  position: fixed;
  display: none;
  z-index: 100001;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  vertical-align: top;
  background-size: contain;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background: rgba(0,0,0,0.3);
}
#blankBMPage{
  position: fixed; 
  top: 0%; 
  left: 0%; 
  width: 100%; 
  height: 100%;
}
#bMPageStyle {
	position: fixed;
	top: 15%;
	left: 25%;
	width: 50vw;
	height: 54vh;
	text-align: center;
	margin-left: auto; 
	margin-right: auto;
	opacity: 0.95;
	background-color: #2A7294;
	z-index: 100001;
}
.bookmarkBtn {
  position: fixed;
  display: block;
  user-select: none;
  width: 18vw;
  max-width: 18vw;
  font-family: Raleway, Helvetica, sans-serif;
  font-size: 12px;
  text-decoration: none;
  padding: 4px; 
  cursor: pointer;
  color: #fff;
  border-radius: 0px 0px 10px 10px;
  box-shadow: 0 5px #333;
  z-index: 100001;
}
.bookmarkBtn:active {
  transition: 0.1s ease;
  text-decoration: none;
  background-color: #3e418e;
  box-shadow: 0 1px #333;
  transform: translateY(4px);
}
.bookmarkBtn:hover {
  text-decoration: none;
  color: #FFF;
}
.bookmarkBtn:link, .bookmarkBtn:visited {
  text-decoration: none;
}
#bookmarkThumb{
	max-height: 48vh;
	overflow: hidden;
}

#myImgCacheLoad {
  position: fixed;
  z-index: 97;
  top: 0;
  left: 0;
  width: 80vw;
  height: 10vh;
  overflow: hidden;
}

#myImgCacheLoad2 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  margin-bottom: 6%; /* Add a bottom margin to avoid content overlay */
  display: none;
  z-index: 97;
}

#load {
  position: fixed;
  z-index: 100000;
  width: 600px;
  height: 36px;
  left: 50%;
  top: 80%;
  margin-left: -300px;
  vertical-align: middle;
  overflow: visible;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

#load div {
  position:absolute;
  width:20px;
  height:40px;
  font-size: 32px;
  opacity:0;
  font-family:Helvetica, Arial, sans-serif;
  animation:move 2s linear infinite;
  -o-animation:move 2s linear infinite;
  -moz-animation:move 2s linear infinite;
  -webkit-animation:move 2s linear infinite;
  transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  color: rgba(127,0,200,0.7);
}

#load div:nth-child(2) {
  animation-delay:0.2s;
  -o-animation-delay:0.2s;
  -moz-animation-delay:0.2s;
  -webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
  animation-delay:0.4s;
  -o-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
  animation-delay:0.6s;
  -o-animation-delay:0.6s;
  -moz-animation-delay:0.6s;
  -webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
  animation-delay:0.8s;
  -o-animation-delay:0.8s;
  -moz-animation-delay:0.8s;
  -webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
  animation-delay:1s;
  -o-animation-delay:1s;
  -moz-animation-delay:1s;
  -webkit-animation-delay:1s;
}
#load div:nth-child(7) {
  animation-delay:1.2s;
  -o-animation-delay:1.2s;
  -moz-animation-delay:1.2s;
  -webkit-animation-delay:1.2s;
}

@keyframes move {
  0% {
    left:0;
    opacity:0;
  }
  35% {
    left: 41%; 
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    opacity:1;
  }
  65% {
    left:59%; 
    -moz-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); 
    -o-transform:rotate(0deg);
    transform:rotate(0deg); 
    opacity:1;
  }
  100% {
    left:100%; 
    -moz-transform:rotate(-180deg); 
    -webkit-transform:rotate(-180deg); 
    -o-transform:rotate(-180deg); 
    transform:rotate(-180deg);
    opacity:0;
  }
}

@-moz-keyframes move {
  0% {
    left:0; 
    opacity:0;
  }
  35% {
    left:41%; 
    -moz-transform:rotate(0deg); 
    transform:rotate(0deg);
    opacity:1;
  }
  65% {
    left:59%; 
    -moz-transform:rotate(0deg); 
    transform:rotate(0deg);
    opacity:1;
  }
  100% {
    left:100%; 
    -moz-transform:rotate(-180deg); 
    transform:rotate(-180deg);
    opacity:0;
  }
}

@-webkit-keyframes move {
  0% {
    left:0; 
    opacity:0;
  }
  35% {
    left:41%; 
    -webkit-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  65% {
    left:59%; 
    -webkit-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  100% {
    left:100%;
    -webkit-transform:rotate(-180deg); 
    transform:rotate(-180deg); 
    opacity:0;
  }
}

@-o-keyframes move {
  0% {
    left:0; 
    opacity:0;
  }
  35% {
    left:41%; 
    -o-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  65% {
    left:59%; 
    -o-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  100% {
    left:100%; 
    -o-transform:rotate(-180deg); 
    transform:rotate(-180deg); 
    opacity:0;
  }
}