/* Basic sample */

/*.flipbook{
  -webkit-transition:margin-left 0.2s ease-in-out;
  -moz-transition:margin-left 0.2s ease-in-out;
  -o-transition:margin-left 0.2s ease-in-out;
  -ms-transition:margin-left 0.2s ease-in-out;
  transition:margin-left 0.2s ease-in-out;
}*/

.flipbook-viewport{
	width:1000px;
	height: 920px;
	margin: 0 auto;
	position: relative;
}

.flipbook-viewport .flipbook-container{
    position:absolute;
    top:460px;
    left:500px;
    width:1000px;
    height:920px;
    margin:auto;
}

.flipbook-viewport .flipbook{
	width:1000px;
	height:920px;
	left: -500px;
	top:  -460px;
	/* height\*: 600px\9;
	margin\*: 100px 0 0\9; */

}



.flipbook-viewport .page{
	width:461px;
	height:600px;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.flipbook .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);
}

.flipbook-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;
	width: 100%;
}

.flipbook-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;
}

@media screen and (max-width:1024px){
	.flipbook-viewport{
		height: 1100px;
		width: 760px;
	}

	.flipbook-viewport .flipbook-container{
		height: 1100px;
		left: 380px;
		top: 550px;
		width: 750px;
	}

	.flipbook-viewport .flipbook{
		height: 1100px;
		left: -380px;
		top: -550px;
		width: 750px;
	}

	.middleRightButton{
		right:55px !important;
	}

	.middleLeftButton{
		left:55px !important;
	}