.canvas-full #page {
    z-index: 900;
}

body.canvas-full {
    overflow: hidden;
}

#canvas {
    height: 100vh;
}

#canvas.mobile {
	display: block !important;
}

	.canvas-full #canvas {
	    position: fixed;
	    left: 0px;
	    top: 0px;
	    width: 100%;
	    height: 100%;
	    z-index: 9000;
	    background: white;
	    margin: 0px;
	}

		.canvas-full #canvas:not(.mobile) .thumbnails {
		    bottom: -175px;
		    z-index: 9005;
		    background: white;
		    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
		    padding: 25px 50px 50px 50px;		
		}

			.canvas-full #canvas .thumbnails.show {
				bottom: 0px;
				transition: .5s;
				box-shadow: 0px 0px 46px 45px rgba(0,0,0,0.15);
			}

.magazine-viewport, .magazine-viewport .container {
	width: 100%;
	height: 100%;
}

 .magazine-viewport .container{ 
	margin: 0 auto;
}

.magazine-viewport .magazine {
    height: 100%;
    margin-top: 10px;
}

.magazine-viewport .zoomer .region{
	display:none;
}

.magazine .region{
	position:absolute;
	overflow:hidden;
	background:#0066FF;
	opacity:0.2;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	cursor:pointer;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

.magazine .region:hover{
	opacity:0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}

.magazine .region.zoom{
	opacity:0.01;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	filter: alpha(opacity=1);
}

.magazine .region.zoom:hover{
	opacity:0.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

.magazine .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.magazine-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.magazine .even .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
	background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}

.magazine .odd .gradient{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
	background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}

.magazine-viewport .zoom-in .even .gradient,
.magazine-viewport .zoom-in .odd .gradient{
	display:none;
}

.magazine-viewport .loader{
	background-image:url(/js/flipbook/icons/loader.gif);
	width:22px;
	height:22px;
	position:absolute;
	top:280px;
	left:219px;
}

.magazine-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

.magazine-viewport .next-button,
.magazine-viewport .previous-button{
	width: 50px !important;
	height:50px !important;
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	border-radius: 50%;
	z-index: 8000;
}

	.mobile .magazine-viewport .next-button, .mobile .next-button  {
	    right: 0px;
	    position: fixed;
	}

	.mobile .magazine-viewport .previous-button, .mobile .previous-button {
	 	left: 0px;
	 	position: fixed;
	 }

.magazine-viewport .next-button{
	right:-50px;
	background-image:url(/images/icons/arrow_black.png);
	background-repeat:no-repeat;
	background-position: 50% 50% !important;
}

.magazine-viewport .previous-button{
	left:-50px;
	background-image:url(/images/icons/arrow_black.png);
	background-repeat:no-repeat;
	transform: translateY(-50%) rotate(180deg);
	background-position: 50% 50% !important;
}

.magazine-viewport .previous-button:hover,
.magazine-viewport .next-button:hover {
	background-color:#d7d7d7;
}


.magazine-viewport .zoom-in .next-button,
.magazine-viewport .zoom-in .previous-button{
	display:none;
}

.animated{
	-webkit-transition:margin-left 0.5s;
	-moz-transition:margin-left 0.5s;
	-ms-transition:margin-left 0.5s;
	-o-transition:margin-left 0.5s;
	transition:margin-left 0.5s;
}

.thumbnails{
	position:fixed;
	bottom:0;
	left:50%;
	width:100%;
	max-width: 1200px;
	z-index:1;
	transform: translateX(-50%);
}

	.mobile .thumbnails {
		background: white;
    	padding: 5px;
    	z-index:9000;
    	bottom: -150px;
    	transition: .5s;
	}

		.mobile .thumbnails.show {
			bottom: 0px;
			transition: .5s;
		}

	.thumbnails .thumbnail {
		cursor: pointer;
		transition: .5s;
		margin: 5px 5px;
		-webkit-box-shadow: 0 0 10px #ccc;
	    -moz-box-shadow: 0 0 10px #ccc;
	    -ms-box-shadow: 0 0 10px #ccc;
	    -o-box-shadow: 0 0 10px #ccc;
	    box-shadow: 0 0 10px #ccc;
	    border:2px solid transparent;

	}	
	
		.mobile .thumbnail {
			-webkit-box-shadow: none;
		    -moz-box-shadow: none;
		    -ms-box-shadow: none;
		    -o-box-shadow: none;
		    box-shadow: none;
		    margin: 0px;
		}

			.mobile .thumbnail img {
				-webkit-box-shadow: 0 0 10px #ccc;
			    -moz-box-shadow: 0 0 10px #ccc;
			    -ms-box-shadow: 0 0 10px #ccc;
			    -o-box-shadow: 0 0 10px #ccc;
			    box-shadow: 0 0 10px #ccc;
			    margin: 0px 2.5px;
			    border: 2px solid transparent;
			}		

				.mobile .page.current img {
					border: 2px solid black;
				}

				

		.thumbnails .page {
			display: inline-block;
			vertical-align: top;
		}

		.thumbnail.current {
			border:2px solid black;
			transition: .5s;
		}		
			.mobile .thumbnail.current {
				border: 2px solid transparent;
			}

	.thumbnail>span {
		display: block;
	    position: absolute;
	    bottom: 3px;
	    left: 50%;
	    transform: translateX(-50%);
	    background: white;
	    border: 1px solid black;
	    color: black;
	    border-radius: 50%;
	    padding: 3px 6px;
	    transition: .5s;
	}
		.thumbnail.current>span {
			background: black;
	   		color: white;
	   		transition: .5s;
		}

		.mobile .thumbnail>span {
			display: none;
		}

		.thumbnail>div>span {
			display: none;
		}
			.mobile .thumbnail>div>span {
				display: block;
			    width: 25px;
			    margin: 2px auto;
			    border-radius: 50%;
			    padding: 2px;
			    text-align: center;
			    background: rgb(255,255,255);
			    color: rgb(0,0,0);
			    transition: .5s;
			}

				.mobile .page.current span {
					background: rgb(0,0,0);
					color: rgb(255,255,255);
					transition: .5s;
				}


	.thumbnails .slick-slide img {
		display: inline-block;
		vertical-align: top;
	}

	.thumbnails .slick-arrow {
		top: 52px;
		left: -50px;
	}	
		.canvas-full .thumbnails .slick-arrow, .mobile .thumbnails .slick-arrow {
			left: 0px;
			top: 50%;
			transform: translateY(-50%);
		}

		.thumbnails .slick-arrow.slick-next {
			right: -50px;
			left: auto;
		} 

			.canvas-full .thumbnails .slick-arrow.slick-next, .mobile .thumbnails .slick-arrow.slick-next {
				right: 0px;
				top: 50%;
				transform: translateY(-50%);
			}

.exit-message{
	position: absolute;
	top:10px;
	left:0;
	width:100%;
	height:40px;
	z-index:10000;
}

.exit-message > div{
	width:140px;
	height:30px;
	margin:auto;
	background:rgba(0,0,0,0.5);
	text-align:center;
	font:12px arial;
	line-height:30px;
	color:white;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
}

.zoom-icon, .pages-icon {
	position:absolute;
	z-index:1000;
	width:22px;
	height:22px;
	top:10px;
	right:10px;
	background-image:url(/js/flipbook/icons/zoom-icons.png);
	background-size:88px 22px;
	cursor: pointer;
}

	.pages-icon {
		right: 42px;
		background: none;
		display: none;
	}
		.mobile .pages-icon {
			display: block;
		}

.zoom-icon-in{
	background-position:0 0;
	cursor: pointer;
}

.zoom-icon-in.zoom-icon-in-hover{
	background-position:-22px 0;
	cursor: pointer;
}

.zoom-icon-out{
	background-position:-44px 0;
}

.zoom-icon-out.zoom-icon-out-hover{
	background-position:-66px 0;
	cursor: pointer;
}

.bottom{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
}