#pageflip {
	width: 100%;
	background: #ececec;
}

.pageflip-container {
}
#pagerin {
	font-family: "Fauna One", "Lucida Grande", Helvetica, sans-serif;
}

/*#page5 {
	background: #F0A000;
	padding: 32px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}*/


/* Demo book 1 */

.page-container.demo1 {
	background: #f8f8f8;
}
#page0.demo1 {
	background: none;
}
#demo1-cover1 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../demobook1/cover1.svg) #D45000;
}
#demo1-cover1-content {
	margin: 300px 48px 48px 48px;
}
#demo1-cover1-content p {
	font-family: "Ubuntu";
	font-weight: 700;
	font-size: 15px;
	color: #fff;
}
#demo1-cover1-content img {
	position: absolute;
	bottom: 48px;
	left: 48px;
}

#demo1-outer-content {
	margin: 96px 32px 0 16px;
	width: 400px;
	font-size: 20px;
	color: #666;
	text-shadow: 0 1px #fff;
}
#demo1-outer-content img {
	display: block;
}
#demo1-outer-content ul {
	font-size: 16px;
	padding-left: 16px;
	list-style-type: none;
}
#demo1-outer-content-manual {
	background: url("../demobook1/highlight_back.svg") no-repeat right center;
	margin-right: -32px;
	padding: 1px 0;
}
#demo1-outer-content li {
	padding-left: 0;
}

#demo1-outer-content .comment {
	font-size: 12px;
	margin-top: 2px;
}

#demo1-cover2,
#demo1-cover3,
#demo1-cover4 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #d45000;
}
/*#demo1-cover2,
#demo1-cover3,
#demo1-cover4 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../demobook1/demopageJJ2.svg);
}*/
#demo1-page3 {
	position: absolute;
	width: 100%;
	height: 100%;	
}
.demo1-page-content {
	font-size: 13px;
	margin: 48px;
}
.demo1-page-content h1 {
	margin-top: 96px;
	padding-bottom: 24px;
	border-bottom: 1px solid #000;
	margin-bottom: 24px;
	font-size: 40px;
}
.demo1-page-content h2 {
	margin-top: 64px;
	padding-top: 48px;
	
	border-top: 1px solid #000;
	margin-bottom: 24px;
	font-size: 36px;
}
.demo1-page-content h3 {
	margin-top: 32px;
	padding-bottom: 16px;
	
	border-bottom: 1px solid #000;
	margin-bottom: 16px;
	font-size: 24px;
}

.demo1-page-content ul {
	font-family: "Ubuntu";
	font-weight: 700;
	font-size: 22px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.demo1-page-content-img {
	margin: 24px 0px 16px;
}
.demo1-page-content span.pagenumber {
	width: 32px;
	height: 32px;
	position: absolute;
	bottom: 20px;
	font-size: 20px
}
.right-side span.pagenumber {
	text-align: right;
	right: 48px;
}
.left-side span.pagenumber {
	text-align: left;
	left: 48px;
}
.demo1-bottom-text {
	position: absolute;
	bottom: 64px;
	font-size: 12px;
}

#page3.page-container.demo1,
#page4.page-container.demo1 {
	background: rgba( 248,248,248, 0.8 )
}
#demo1-page4 {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transform: scaleX( -1 );
	-moz-transform: scaleX( -1 );
	-o-transform: scaleX( -1 );
	-ms-transform: scaleX( -1 );
	transform: scaleX( -1 );
	color: #aaa;
}
#demo1-page4 h1 {
	border-bottom: 1px solid #aaa;
}

#page5.page-container.demo1 {
	background: url("../demobook1/page5back.svg") #0060a0;
}
#page11.page-container.demo1 {
	background: url("../demobook1/demopic1.jpg") #f8f8f8;
	background-size: 434px 568px;
}
.demo1 img.intext {
	float: left;
	margin: 2px 16px 6px 0;
}





/* Demo book 2 */
.demo2 g {
	bottom: 0px;
	padding: 12px 0;
	background: rgba( 80,80,80, 0.5 );	
}

.demo2 #pagerin {
	color: rgba(255,255,255,0.8);
}
.demo2 .control-bar-button g,
.demo2 .control-bar-pager g {
	fill: rgba(255,255,255,0.6);
}
.demo2 .control-bar-button:not(.disabled):hover g {
	fill: rgba(255,255,255,1);
}

.demo2-flexible-container {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.demo2-flexible-centered {
	position: absolute;
	margin: auto;
	width: 100%;
	bottom: 0;
	top: 0;
}
.demo2-highlight {
	margin: 0 48px;
	
}
.demo2-highlight,
.demo2-highlight h1,
.demo2-highlight h2 {
	font-family: "Syncopate", "Helvetica", sans-serif;
	color: #fff;
}
.demo2-highlight h1 {
	margin: 0;
	padding: 0;
	font-size: 50px;
	font-weight: 700;
	line-height: 84%;
}
.demo2-highlight h2 {
	margin: 0;
	padding: 0;
	font-size: 42px;
	font-weight: 400;
	line-height: 84%;

}
.demo2-highlight p {
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: normal;
}



div#demo2-page1 {
	background:  #00c1fd;
}
div#demo2-page1 .demo2-flexible-centered {
	height: 200px;
}
div#demo2-page2 {
	background: #009fcf;
}
div#demo2-page3 {
	background: #000 url(../demobook2/demopic1.jpg) no-repeat left center;
	background-size: 700px 700px;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
div#demo2-page2 .demo2-flexible-centered {
	height: 200px;
	text-align: right;
}
div#demo2-page4 {
	background: #007ba0;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;	
}
div#demo2-page4 .demo2-highlight {
	position: absolute;
	bottom: 64px;
	text-align: right;
}
div#demo2-page5 {
	background: #00607e url(../demobook2/demopic2.jpg) no-repeat left bottom;
	background-size: 700px 350px;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;	
}
div#demo2-page5 .demo2-highlight {
	position: absolute;
	margin: 0;
	top: 0;
	padding: 66px 48px 24px;
	background: #00607e;
}
div#demo2-page5 .demo2-highlight p,
div#demo2-page6 .demo2-highlight p {
	font-size: 18px;
}
div#demo2-page6 {
	background: #00607e url(../demobook2/demopic3.jpg) no-repeat right top;
	background-size: 700px 450px;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;	
}
div#demo2-page6 .demo2-highlight {
	position: absolute;
	margin: 0;
	bottom: 0;
	padding: 24px 48px 66px;
	background: #00607e;
}
div#demo2-page7 .demo2-flexible-centered {
	height: 260px;
}
div#demo2-page7 .demo2-highlight p {
	font-size: 16px;
}
#page7.demo2 {
	background: url(../demobook2/demopic6.png) no-repeat left center rgba( 0,0,0, 0.7 );
	background-size: 700px 700px;
}
#page8.demo2 {
	background: url(../demobook2/demopic7.png) no-repeat right center rgba( 0,0,0, 0.7 );
	background-size: 700px 700px;
}
#page9.demo2 {
	background: url(../demobook2/demopic4.png) no-repeat left center rgba( 40,40,50, 0.7 );
	background-size: 700px 700px;
}
#page10.demo2 {
	background: url(../demobook2/demopic5.png) no-repeat right center rgba( 40,40,50, 0.7 );
	background-size: 700px 700px;
}
div#demo2-page11 .demo2-flexible-centered {
	height: 200px;
}
div#demo2-page11 {
	background: #00485e;
}
div#demo2-page11 a {
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}
div#demo2-page11 a:hover {
	text-decoration: underline;
}
/* Demo book 3 */
.page-container.yotenia10perritos {
	background: #fff;
	background-size: 450px 586px;
}
#page1.yotenia10perritos,
#page2.yotenia10perritos,
#page19.yotenia10perritos,
#page20.yotenia10perritos {
	background: #23495c;
	background-size: 450px 586px;
}
div.demobook3 {
	width: 450px;
	height: 586px;
}
div#demo3credits {
	position: absolute;
	overflow: hidden;
	left: 83px;
	top: 112px;
	width: 288px;
	height: 55px;
}
div#demo3credits2 {
	position: absolute;
	overflow: hidden;
	left: 0px;
	bottom: 0px;
	font-size: 13px;
	margin: 48px;
}
div#demo3credits2 p {
	color: #fff;
	margin: 4px;
}
div#demo3credits2 p span {
	color: #fff;
	opacity: 0.5;
}
div#demo3credits2 p a {
	color: #fff;
	text-decoration: none;
}
div#demo3credits2 p a:hover {
	text-decoration: underline;
}


/* book4 */

.page-container.fantasticfour {
	background: #000;
	background-size: 516px 784px;
}

.page-container.left-side.fantasticfour {
	border-radius: 10px 0 0 10px;
}
.page-container.right-side.fantasticfour {
	border-radius: 0 10px 10px 0;
}
#dropshadow.fantasticfour {
	border-radius: 20px;
}