@import url('reset.css');
@import url('elements.css');

/* = General
-------------------------------------------------------------- */

.clear {
	clear: both;
	display: block;
}
a {
	cursor: pointer;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
label, input[type="submit"] {
	cursor: pointer;
}
html {
	overflow: hidden;  
}
h1, h2, h3, h4, h5, h6 { font-weight:normal;}
/* = Structure
-------------------------------------------------------------- */

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
* { margin:0; padding:0;}
body {
	background: url(../images/bg6.jpg-) no-repeat center 0;
	line-height: 1.5;
	font-family: "Open Sans", sans-serif; 
	color: #77797f;
	cursor: url(../images/closedhand.cur);
	margin:0; padding:0;
}
#page {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 5;
	display: none;
	width: 1100px;
	height: 715px;
	margin: -358px 0 0 -550px;
}
#page.mobile {
	width: 550px;
	height: 358px;
	margin: -210px 0 0 -275px;
}
#page .padding { /*padding: 0 34px;*/
}
/*-------------------------*/
 
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap';)

  
.ebook_page_bg { float:left; width:100%; position:relative;}
.ebook_page_bg img { float:left; width:100%;}
.ebook_page_main { float:left; width:100%; padding:0; position:absolute; top:0px; left:0px;}
.page1_logo_top { float:left; width:100%; margin:35px 0 0 8%;}
.page1_logo_top img { float:left; width:34%; margin:0 0 0 0; }
.global_online_sponsorship { float:left; width:100%; text-align:center; font-size:56px; color:#052438; font-family: "Open Sans", sans-serif; line-height:56px; margin-top:480px;  }
.global_online_sponsorship span { float:left; width:100%; color:#fff; font-size:56px; line-height:56px;}

 
.pages1_text_bg { float:left; width:92%;  margin:20px 4% 0 4%;   }
.pages1_text_bg h1 { float:right; width:100%; font-size:36px; text-align:center; color:#fff; padding:260px 0 0 0; font-family: "Open Sans", sans-serif; line-height:42px; } 
.pages1_text_bg h1 span { float:left; padding:8px 10px; background-color: rgba(44, 133, 216, 0.9);}

.pages2_text_bg { float:left; width:88%; padding:20px 6%;}
.pages2_text_bg p { float:left; width:100%; font-size:15px; line-height:18px; color:#052438; margin:0; padding:11px 0 0 0;} 
.pages2_text_bg h4 { float:left; width:100%; font-size:22px; line-height:24px; color:#052438;  padding:15px 0 0 0;  font-family: "Open Sans", sans-serif;}
.pages2_text_bg h5 { float:left; width:100%; font-size:17px; line-height:20px; color:#40c9b5;  padding:11px 0 0 0;  font-weight:600;}
.pages2_text_bg h6 { float:left; width:100%; font-size:16px; line-height:20px; color:#052438;  padding:11px 0 0 0;  font-weight:600;}

.pages_footer_bg { float:left; width:94%; position:absolute; bottom:0; background:#222; font-size:15px; color:#fff;   padding:10px 3%; }
.pages_footer_bg span { float:right; font-size:15px; text-align:right;}
.pages_footer_bg_left { float:left; width:100%; position:absolute; bottom:0;   }
.pages_footer_bg_left span { float:right; font-size:15px; color:#fff; position:absolute; top:7px; right:3%;}
.pages_footer_bg_right { float:left; width:100%; position:absolute; bottom:0;  }
.pages_footer_bg_right span { float:right; font-size:15px; color:#fff; position:absolute; top:7px; right:3%;}

.page1_footer_logo { float:left; width:17%;}
.page1_footer_text { float:left; width:83%; font-size:14px; padding:10px 0 0 0; color:#fff; text-align:right;}
.page_footer_copy { float:left; width:100%; position:absolute; bottom:0; left:0; z-index:999; background:#262626; font-size:14px; color:#fff; text-align:center; padding:10px 0;}  
.joinnow_button { float:left; width:100%;  padding:265px 0 0 44px;}
.joinnow_button a { float:left; background:#052438 ; color:#fff; font-size:16px;  padding:9px 20px; border-radius:20px;  font-family: "Open Sans", sans-serif;}
.contact_page_logo { float:left; width:28%; margin:35px 0 0 8%;}
.pages2_right_text { float:left; text-align:left; margin-top:5px;  font-size:15px; color:#fff; padding:14px 0 0 30px;}
   
   
.contents_box { width:100%; float:left; padding:140px 0 0 179px;}
.contents_box ul { width:100%; float:left; list-style:none;}
.contents_box li { width:100%; float:left; list-style:none; line-height:36px;}
.contents_box li a { font-size:14px; color:#fff; text-decoration:none; background:url(../images/dotted1.png) left 9px no-repeat; padding:0 0 0 15px; background-size:5px;} 
   
   
.learn_wemake_but { float:left; padding:355px 0 0 45px;}
.learn_wemake_but a { background:#106ea8; border-radius:40px; font-size:14px; font-weight:700; padding:10px 20px; color:#fff;}
.learn_wemake_but a:hover { background:#2089ca;}


.local_shopping_text  { float:left; padding:670px 0 0 125px;  font-size:14px; color:#000;}
.local_shopping_text a { color:#106ea8; font-weight:700; text-decoration:underline;}

.vsbenefits_website_text  { float:left; padding:670px 0 0 31px;  font-size:14px; color:#000;}
.vsbenefits_website_text a { color:#106ea8; font-weight:700; text-decoration:underline;}

.how_itworks_but { float:left; padding:670px 0 0 200px;}
.how_itworks_but a { background:#106ea8; border-radius:40px; font-size:14px; font-weight:700; padding:9px 20px; color:#fff;}
.how_itworks_but a:hover { background:#2089ca;}

.local_shop_box {display:flex;  flex-wrap: wrap; justify-content: space-between; padding:310px 25px 0 25px;}
.local_shop_box a { width:30%; margin-top:25px;}
.localshop_img_text { float:left; padding:15px 0 0 150px;  font-size:14px; color:#000;}
.localshop_img_text a { color:#106ea8; font-weight:700; text-decoration:underline;}
 
.how_to_redeem_coupon_but { float:left; padding:667px 0 0 175px;}
.how_to_redeem_coupon_but a { background:#106ea8; border-radius:40px; font-size:14px; font-weight:700; padding:9px 20px; color:#fff;}
.how_to_redeem_coupon_but a:hover { background:#2089ca;}

.promote_your_business_but { float:left; padding:270px 0 0 45px;}
.promote_your_business_but a { background:#106ea8; border-radius:40px; font-size:14px; font-weight:700; padding:10px 20px; color:#fff;}
.promote_your_business_but a:hover { background:#2089ca;}

.click_here_discounts_text { float:left; padding:329px 0 0 42px; width:55%;  }
.click_here_discounts_text a { width: 74px; height: 14px; display:flex;}
.click_here_discounts_text1 { float:left; padding:174px 0 0 42px; width:55%;  }
.click_here_discounts_text1 a { width: 74px; height: 14px; display:flex;}

.staff_benefits_but { float:left; padding:30px 0 0 180px;}
.staff_benefits_but a { background:#106ea8; border-radius:40px; font-size:14px; font-weight:700; padding:9px 20px; color:#fff;}
.staff_benefits_but a:hover { background:#2089ca;}

.calculate_but { float:left; padding:620px 0 0 200px;}
.calculate_but a { background:#106ea8; border-radius:40px; font-size:14px; font-weight:700; padding:9px 20px; color:#fff;}
.calculate_but a:hover { background:#2089ca;}

.registe_business_but { float:left; padding:554px 0 0 178px;}
.registe_business_but a { background:#106ea8; border-radius:40px; font-size:14px; font-weight:700; padding:9px 20px; color:#fff;}
.registe_business_but a:hover { background:#2089ca;}

.member_cashback_but { float:left; margin:80px 0 0 55px; }
.member_cashback_but a { float:left; width:75px;}
.member_onlineshops_but { float:left; margin:3px 0 0 303px; width:31%;  }
.member_onlineshops_but a { float:left; width:76px;}
.member_restaurants_but { float:left; margin:4px 0 0 409px;}
.member_restaurants_but a { float:left; width:76px;}

.gift_cards_but { float:left; padding:388px 0 0 20px;}
.gift_cards_but a { background:#106ea8; border-radius:40px; font-size:14px; font-weight:700; padding:8px 20px; color:#fff;}
.gift_cards_but a:hover { background:#2089ca;}

.ultimate_cards_but { float:left; padding:388px 0 0 235px;}
.ultimate_cards_but a { background:#106ea8; border-radius:40px; font-size:14px; font-weight:700; padding:8px 20px; color:#fff;}
.ultimate_cards_but a:hover { background:#2089ca;}

.savings_calculato_but { float:left; width:100%; text-align:center; padding:242px 0 0 0;}
.savings_calculato_but a { background:#106ea8; border-radius:40px; font-size:16px; font-weight:700; padding:10px 30px; color:#fff;}
.savings_calculato_but a:hover { background:#2089ca;}

.calculate_savings_but { float:left; padding:475px 0 0 35px;}
.calculate_savings_but a { background:#106ea8; border-radius:40px; font-size:16px; font-weight:700; padding:10px 30px; color:#fff;}
.calculate_savings_but a:hover { background:#2089ca;}

@media screen and (max-width: 1024px) {
body {
	background-size: 200% 200%;
}
}
 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
body {
	background-size: 200% 200%;
}
#page {
	width: 540px;
	height: 351px;
	margin: -205px 0 0 -270px;
}
#about {
	font-size: 90%;
	margin-top: -10%;
}
}
 @media screen and (max-width: 768px) {
#page {
	width: 540px;
	height: 351px;
	margin: -205px 0 0 -270px;
}
}
 @media only screen and (max-device-width: 960px) {
#page {
	width: 540px;
	height: 351px;
	margin: -205px 0 0 -270px;
}
#about {
	font-size: 80%;
}
}
.cursor-grab {
	cursor: -webkit-grab;
	cursor: -moz-grab;
}
.overlay {
	position: absolute;
	left: -10000px;
	top: 0;
	z-index: 20;
	background: url(../images/bg-overlay.png);
	width: 100%;
	height: 100%;
	opacity: 0;
}
.overlay.active {
	left: 0;
}
/* = About
-------------------------------------------------------------- */

#about {
	position: absolute;
	z-index: 5;
	width: 45%;
	display: none;
}
#about h3 {
	background: url(../images/arrow-right.png) no-repeat 0 50%;
	margin: 0 0 .5em 0;
	padding: 0 0 0 25px;
	font-size: 1.375em;
	color: #c3ffff;
	-webkit-font-smoothing: antialiased;
}
#about ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#about li {
	padding: 5% 0;
}
#about li:first-child {
	padding-top: 15%;
}
#about p {
	font-size: 0.688em;
	color: #ffffff;
}
/* = Book
-------------------------------------------------------------- */

#book {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
}
#book .turn-page {
	background-color: white;
	background-size: 100% 100%;
}
.double {
	background-size: 200% 100% !important;
}
.double.first {
	background-position: 0% 0%;
}
.double.second {
	background-position: -100% 0%;
}
/* = Nav Arrows
	---------------------------------------- */
	
.nav_arrow {
	position: absolute;
	top: 50%;
	z-index: 15;
	background: url(../images/arrow-navpage.png);
	width: 34px;
	height: 136px;
	margin-top: -68px;
}
.nav_arrow.next {
	right: -34px;
	background-position: 0 0;
}
.nav_arrow.next:hover {
	background-position: 0 -186px;
}
.nav_arrow.prev {
	left: -34px;
	background-position: 0 -372px;
	display: none;
}
.nav_arrow.prev:hover {
	background-position: 0 -558px;
}
/*#page.mobile .nav_arrow.next { right: -24px; }*/



	/* = Cover
	---------------------------------------- */

#logo-cover {
	position: absolute;
	right: 40px;
	bottom: 25px;
	z-index: 5;
}
#cover ul {
	clear: both;
	width: 90%;
	margin: 48% auto 0 auto;
	list-style: none;
	padding: 20px 0;
	border-top: 1px solid #e2e2e2;
	border-bottom: 1px solid #e2e2e2;
}
#cover ul:after {
	clear: both;
	content: '';
	display: block;
}
#cover li {
	float: left;
	width: 28.3%;
	margin: 0 2.5%;
}
#cover li,  #cover img {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
#cover li:last-child {
	margin-right: 0;
}
#cover li img {
	float: left;
	width: 100%;
}
#cover li a:hover img {
	opacity: .8;
}
/* = End
	---------------------------------------- */

#end {
	text-align: center;
}
#end p {
	padding-top: 60%;
}
/* = Meta data
	---------------------------------------- */

#book .meta {
	position: absolute;
	bottom: 1%;
}
.meta .num {
	font-weight: bold;
	font-size: 0.750em;
	color: #666;
}
.meta .description {
	font-size: 0.688em;
	color: #666;
}
.meta.left {
	left: 12px;
}
.meta.left .num {
	padding-right: 10px;
}
.meta.right {
	right: 12px;
	text-align: right;
}
.meta.right .num {
	padding-left: 10px;
}