@charset "UTF-8";
/* CSS Document */

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	background: #454545 !important;
	font-size:0px;
	line-height:0px;
}

.theHolder {
	position:relative;
	left:0px;
	top:0px;
	width:100vw;
	height:calc(100vh - 80px);
	display:inline-block;
	box-sizing:border-box;
	background-color:#454545;
	font-size:1px;
	line-height:1px;
	overflow:hidden;
	margin-top:40px;
	-moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
	transition: width .25s;
	transition: height .25s;
}

.theHolder.zoomIn {
	width:120vw !important;
	height:calc(150vw - 80px) !important;
}

@media only screen and (max-width:880px) {
	div.theHolder.zoomIn {
		width:200vw !important;
		height:calc(250vw - 80px) !important;
	}
}

@media only screen and (max-width:750px) {
	div.theHolder.zoomIn {
		width:300vw !important;
		height:calc(375vw - 80px) !important;
	}
}

.theHolder .page {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	display:inline-block;
	background-position: 50% 50%;
	background-size:contain;
	background-repeat:no-repeat;
	-moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
}

.theHolder .page.left {
	background-position: 100% 50%;
}

.theHolder .page.right {
	background-position: 0% 50%;
}

.theHolder.zoomIn .page {
	width:100% !important;
	height:100% !important;
}

.theHolder .page.isTwo {
	width:50vw;
}

.theHolder .page.isTurned {
	z-index:100 !important;
}

.nav {
	position:fixed;
	left:0px;
	width:100%;
	height:40px;
	display:inline-block;
	background-color:#535353;
	z-index:100;
	text-align: center;
	pointer-events:none;
	user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
}

.nav.topNav {
	top:0px;
}

.nav.bottomNav {
	bottom:0px;
}

.nav .flipButton {
	position:relative;
	left:0px;
	top:0px;
	width:32px;
	height:auto;
	display:inline-block;
	margin-top:4px;
	margin-left:5px;
	margin-right:5px;
	pointer-events:auto;
	user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
}

.nav.topNav .flipButton {
	margin-top:5px;
}

.numberHolder {
	position:relative;
	left:0px;
	top:0px;
	width:100px;
	height:auto;
	display:inline-block;
	margin-left:5px;
	margin-right:5px;
	font-family:Arial, sans-serif;
	font-size:14px;
	text-align: center;
	line-height:40px;
	color:#b5b5b5;
	vertical-align: top;
}

.nav .thePop {
	position:relative;
	left:0px;
	top:0px;
	width:100%;
	height:auto;
	display:none;
	margin-top:10px;
	padding:20px;
	box-sizing: border-box;
	background-color:#b5b5b5;
	border-radius:10px;
	max-width:450px;
	pointer-events:auto;
	opacity:0;
	transition: opacity .25s;
}

.nav .thePop.show {
	display:inline-block;
	opacity:1;
}

.nav .thePop .topThumb {
	position: relative;
	left: 0px;
	top: 0px;
	width: 14%;
	height: auto;
	display: inline-block;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 1%;
}