@import url('https://fonts.googleapis.com/css?family=Alef');
html * {
	font-family: 'Alef', sans-serif;
}

.ltr {
	direction: ltr;
}

.rtl {
	direction: rtl;
}

#flipbook #cover_back.hard {
	background: #1c223c;
	color: #fff;
	background-image: url("img/cover-mesh.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
}

#flipbook #cover_front.hard {
	background: #fff;
	color: #333;
	/*background-image: url("img/cover-white.jpg");*/
	/*background-size: contain;*/
	background-image: url("img/cover-mesh.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
}

#flipbook #cover_front.hard h1 {
	text-shadow: 0 0 2px rgba(0, 0, 0, .7);
	color: #FFF;
}

body {
	background-color: #f5f5f5;
	color: #000;
}

#flipbook .page {
	background-color: #ffffff;
}

#flipbook .hard {
	background: #568;
}

.ltr.display-double #flipbook.middle_gradient .even.hard,
.rtl.display-double #flipbook.middle_gradient .odd.hard {
	background-image: linear-gradient(to right, #7a8cb0 0%, #7a8cb0 66%, #124 100%);
}

.ltr.display-double #flipbook.middle_gradient .odd.hard,
.rtl.display-double #flipbook.middle_gradient .even.hard {
	background-image: linear-gradient(to left, #7a8cb0 0%, #7a8cb0 66%, #124 100%);
}


/* For page background patterns see https://www.transparenttextures.com and http://lea.verou.me/css3patterns */

.ltr.display-double.desktop #flipbook.middle_gradient .page:not(.hard).even,
.rtl.display-double.desktop #flipbook.middle_gradient .page:not(.hard).odd {
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
}

.ltr.display-double.desktop #flipbook.middle_gradient .page:not(.hard).odd,
.rtl.display-double.desktop #flipbook.middle_gradient .page:not(.hard).even {
	background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
}

#flipbook .page_content.show_page_title0 {
	padding-top: 0;
}

#flipbook .page_content {
	height: calc( 100% - 106px);
	text-align: right;
	margin-top: 15px;
}

#flipbook .page_top {
	display: block;
	height: 50px;
	padding: 0;
	text-align: center;
}

#flipbook .page_top_content {
	display: inline-block;
	padding: 20px 0 5px 0;
	font-size: 15px;
	width: 80%;
	border-bottom: 1px solid #aaa;
	margin-bottom: 10px;
}

.display-single #flipbook .page_top_content {
	width: calc(100% - 20px);
}


/* Page numbers on corners */

.display-single #flipbook .page_number_wrapper,
.ltr #flipbook .odd .page_number_wrapper,
.rtl #flipbook .even .page_number_wrapper,
.ltr.display-double #flipbook .odd .page_top_content,
.rtl.display-double #flipbook .even .page_top_content {
	text-align: right;
}

.ltr.display-double #flipbook .even .page_number_wrapper,
.rtl.display-double #flipbook .odd .page_number_wrapper,
.ltr.display-double #flipbook .even .page_top_content,
.rtl.display-double #flipbook .odd .page_top_content {
	text-align: left;
}

#flipbook .page_number_wrapper:hover {
	opacity: 1;
}

#flipbook .page_number {
	display: inline-block;
	width: 60px;
	font-size: 12px;
	height: 22px;
	line-height: 22px;
	padding: 0 10px;
	background: #999;
	color: #fff;
}

.display-single #flipbook .page_number,
.ltr #flipbook .odd .page_number,
.rtl #flipbook .even .page_number {
	text-align: left;
	border-radius: 10px 0 0 10px;
}

.ltr.display-double #flipbook .even .page_number,
.rtl.display-double #flipbook .odd .page_number {
	text-align: right;
	border-radius: 0 10px 10px 0;
}

#flipbook .first_content_line,
#flipbook .first_content_line * {
	font-weight: bold;
	font-size: 25px;
	line-height: 25px;
}

#flipbook .first_content_line {
	margin-bottom: 13px !important;
}

.display-single #flipbook .page_top {
	text-align: left;
}


/* control width of book */

@media only screen and (min-width: 1300px) {
	.book_container_width {
		width: calc(100vw - 100px);
	}
}

@media only screen and (max-width: 720px) {
	.book_container_width {
		width: calc(100vw - 10px);
	}
}

@media only screen and (max-width: 720px) {
	#flipbook .page_number {
		width: 49px;
		height: 15px;
		line-height: 15px;
		font-size: 9px;
	}
}

@media only screen and (max-height: 500px) {
	#flipbook .page_top,
	#flipbook .page_number_wrapper {
		display: none;
	}
	#flipbook .page_content h1,
	#flipbook .page_content p,
	#flipbook .page_content li {
		font-size: 11px;
		line-height: 12px;
	}
	#flipbook .first_content_line,
	#flipbook .first_content_line * {
		font-size: 13px;
		line-height: 15px;
	}
	#flipbook .page_content {
		height: calc(100% - 20px);
	}
}


/* add distance between text and borders, so that peels are not opened when trying to scroll * /
 ^^^ no need since we already have auto centerilization
.ltr.mobile.orientation-p #flipbook .content_page {
    margin-left: 30px;
}
.rtl.mobile.orientation-p #flipbook .content_page {
    margin-right: 30px;
}
*/

.hr_read_more_clickable {
	color: #124;
	text-decoration: none;
	text-shadow: 0 0 1px 1px #333;
	font-size: 1.7vh;
	float: left;
	margin-left: 20%;
	clear: both;
	font-style: italic;
}

.hr_read_more_text,
.hr_read_more_text * {
	font-size: 1.4vh;
	font-style: italic;
	float: left;
	margin-left: 20%;
	clear: both;
}


/* centerlize content */

#flipbook .page_content>div {
	display: inline-block;
}

#flipbook .page_content>div {}

#flipbook .page_content>div {}


/* location of scroller */

.rtl #flipbook .page_content_wrapper {
	margin-left: 45px;
}

.ltr #flipbook .page_content_wrapper {
	margin-left: 45px;
}

.page_content h1,
.page_content h2,
.page_content h3,
.page_content h4,
.page_content h5,
.page_content h6,
.page_content p,
.page_content li {
	/*font-size: 2.1vh;
	line-height: 2.5vh;*/
}

#flipbook .page_number_wrapper {
	bottom: 15px;
}

#flipbook .page_number {
	background: #bbb;
}

body {
	color: #000;
}

#id-page-number-li {
	display: none;
}

#flipbook .page_content img {
	max-width: 205px;
}

.page_content {
	font-size: 20px;
}

.li {
	margin-right: 15px;
}


#flipbook #cover_front.hard{
    background-image: url('img/cover.jpg')  !important
}