@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: 'ralewayregular'; 
	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;*/
}
/*-------------------------*/

@font-face {
    font-family: 'ralewaybold';
    src: url('../fonts/raleway-bold-webfont.eot');
    src: url('../fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-bold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-bold-webfont.woff') format('woff'),
         url('../fonts/raleway-bold-webfont.ttf') format('truetype'),
         url('../fonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewayregular';
    src: url('../fonts/raleway-regular-webfont.eot');
    src: url('../fonts/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('../fonts/raleway-regular-webfont.woff') format('woff'),
         url('../fonts/raleway-regular-webfont.ttf') format('truetype'),
         url('../fonts/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;
} 

.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:34px; color:#052438; font-family: 'ralewaybold'; line-height:44px; margin-top:530px;  }
.global_online_sponsorship span { float:left; width:100%; color:#fff; font-size:28px;}

 
.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: 'ralewaybold'; 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 p a { color:#052438; font-family: 'ralewaybold';} 

.pages2_text_bg h4 { float:left; width:100%; font-size:22px; line-height:24px; color:#052438;  padding:15px 0 0 0;  font-family: 'ralewaybold';}
.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: 'ralewaybold';}
.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:16px; color:#fff; padding:14px 0 0 30px;}
  
/*==========New CSS===========*/
.about_wemake_left { float:left; width:30%; margin:15px 5% 0 0;}
.about_wemake_left img { float:left; width:100%;}
.about_wemake_right { float:left; width:65%;}
.about_wemake_right h4 { float:left; width:100%; font-size:22px; line-height:24px; color:#fff;   padding:15px 0 0 0;  font-family: 'ralewaybold';}
.about_wemake_right h5 { float:left; width:100%; font-size:17px; line-height:20px; color:#40c9b5;  padding:11px 0 0 0; font-weight:600;}
.about_wemake_right p { float:left; width:100%; font-size:15px; line-height:18px; color:#fff; margin:0; padding:11px 0 0 0;} 

.about_our_story_right { float:left; width:88%; padding:20px 6%;}
.about_our_story_right h4 { float:left; width:100%; font-size:22px; line-height:24px; color:#fff;   padding:15px 0 0 0;  font-family: 'ralewaybold';}
.about_our_story_right h4 span { float:left; width:100%; font-size:17px; color:#40c9b5;  }
.about_our_story_right h5 { float:left; width:100%; font-size:17px; line-height:20px; color:#40c9b5;  padding:20px 0 0 0;  font-weight:600;}
.about_our_story_right p { float:left; width:100%; font-size:15px; line-height:18px; color:#fff; margin:0; padding:11px 0 0 0;} 
.about_img_bottom { float:right; width:43%;}
.about_img_bottom img { float:right; width:100%;}

.about_ebook_page { float:left; width:100%;}
.about_ebook_page ul { float:left; width:100%; list-style:none;}
.about_ebook_page li { float:left; width:96%; list-style:none; font-size:15px; line-height:14px; color:#052438; padding:6px 0 0 15px;  background:url(../images/dotted2.png) left 8px no-repeat;}
.about_ebook_page1 { float:left; width:100%;}
.about_ebook_page1 ul { float:left; width:100%; list-style:none;}
.about_ebook_page1 li { float:left; width:96%; list-style:none; font-size:15px; line-height:18px; color:#052438; padding:10px 0 0 15px;  background:url(../images/dotted2.png) left 16px no-repeat;}
.about_ebook_page1 li a { color:#3dcce0; font-family: 'ralewaybold';}

.about_ebook_page2 { float:left; width:100%;}
.about_ebook_page2 ul { float:left; width:100%; list-style:none;}
.about_ebook_page2 li { float:left; width:96%; list-style:none; font-size:15px; line-height:20px; color:#052438; padding:18px 0 0 15px;  background:url(../images/dotted2.png) left 24px no-repeat;}

.executive_team_button {float:left; width:100%; padding:15px 0 0 0; }
.executive_team_button a { float:left; font-size:15px; background:#40c9b5; color:#fff; font-family: 'ralewaybold'; padding:8px 18px; border-radius:20px;}
.home_page_img_box { float:left; width:100%; margin-top:15px;}
.home_page_img_box img { float:left; width:100%;}
.ebook_img_box { float:left; width:100%; margin-top:15px;}
.ebook_img_box img { float:left; width:100%;}
.watch_video_button { float:left; width:100%; text-align:center; padding:20px 0 0 0;}
.watch_video_button img { float:none; width:auto !important;  }
.app_watch_video_button { float:left; width:100%; text-align:center; padding:15px 0 0 0;}
.app_watch_video_button img { float:none; width:auto; height:40px; margin:0 5px;}
.app_watch_video_button1 { float:left; width:100%; text-align:center; padding:15px 0 0 0;}
.app_watch_video_button1 img { float:none; width:auto; height:32px; margin:0;}
.viewall_shops_button {float:left; width:100%; padding:15px 0 0 0;}
.viewall_shops_button a { float:left; font-size:15px; background:#052438; color:#fff; margin-right:10px; font-family: 'ralewaybold'; padding:8px 15px; border-radius:20px;}
.online_stores_left{ float:left; width:30%; margin:0 4% 0 0;}
.online_stores_right { float:left; width:66%;  padding:12px 0 0 0;}
.online_stores_right img { float:left; width:100%;}
.viewall_shops_text {float:left; width:100%; padding:12px 0 0 0;}
.viewall_shops_text a { float:left; font-size:15px; line-height:16px; color:#3dcce0; font-family: 'ralewaybold'; }
.viewall_shops_text a span { float:left; padding:12px 0 0 0; }
.local_business_video_page { float:left; width:56%; padding:0 22%;}
.welcome_pack_img_left { float:left; width:50%; padding:15px 0 0 0;}
.welcome_pack_img_left img { float:left; width:100%;}
.welcome_pack_text_right { float:left; width:50%; text-align:center; padding:268px 0 0 0;}
.gamification_img_bottom { float:right; width:68%; padding:12px 0 0 0;}
.gamification_img_bottom img { float:right; width:100%;}
.calculate_img_bottom { float:left; width:100%; padding:82px 0 0 0;}
.calculate_img_bottom img { float:right; width:85%;}
.calculate_savings_button {float:left; width:100%; position:absolute; bottom:22%; left:6%;}
.calculate_savings_button a { float:left; font-size:15px; background:#052438; color:#fff; margin-right:10px; font-family: 'ralewaybold'; padding:9px 17px; border-radius:22px; }
.analytics_left_text { float:left; width:40%;}
.analytics_right_img { float:right; width:58%;}
.analytics_right_img img { float:right; width:100%;}
.benefits_img_bottom { float:right; width:90%; padding:50px 0 0 0;}
.benefits_img_bottom img { float:right; width:100%;}
.contents_title_and_page { float:left; width:100%; border-bottom:1px solid #052438; font-size:16px; color:#40c9b5; font-family: 'ralewaybold'; padding:11px 0 4px 0;}
.contents_title_and_page a { float:right;}
.contents_title_and_page span {font-family: 'ralewayregular'; text-align:center; font-size:12px; padding:0 0 0 20px;}
.contents_title_text { float:left; width:100%; padding:4px 0 0 0;}
.contents_title_text ul { float:left; width:100%; list-style:none;}
.contents_title_text li { float:left; width:100%; list-style:none;  font-size:15px; font-family: 'ralewaybold'; line-height:42px; color:#052438; padding:0;  }
.contents_title_text li span { float:right;}
.further_information_contact { float:left; width:50%;} 
.special_occasions_img_box { float:left; width:32%; margin:8px 9% 3px 9%;}
.special_occasions_img_box img { float:left; width:100%;}
.images_zoom_box1 { float:left; width:96%; margin:15px 2% 0 2%; transition: transform .2s; /* Animation */}
.images_zoom_box1 img { float:left; width:100%;}
.images_zoom_box1:hover {transform: scale(1.4); padding:0 0 0 70px;}
.images_zoom_box2 { float:left; width:96%; margin:15px 2% 0 2%; transition: transform .2s; /* Animation */}
.images_zoom_box2 img { float:left; width:100%;}
.images_zoom_box2:hover {transform: scale(1.4); padding:0 215px 0 0;}
.images_zoom_box3 { float:left; width:96%; transition: transform .2s;  margin:15px 2% 0 2%; /* Animation */}
.images_zoom_box3 img { float:left; width:100%;}
.images_zoom_box3:hover {transform: scale(1.4); }
.ebook_coupons_box_img { float:left; width:100%; margin-top:20px;}
.ebook_coupons_box_img img { float:left; width:48%; margin:0 1%;}
.ebook_coupons_box_img1 { float:left; width:100%; margin-top:20px;}
.ebook_coupons_box_img1 img { float:left; width:29.33%; margin:0 2%;}
.ecards_box_img { float:left; width:29.33%; margin:10px 2% 0 2%;}
.ecards_box_img img { float:left; width:100%;}
.ecards_box_img p { float:left; width:100%; text-align:center; padding:7px 0 0 0; font-size:14px;}
.ecards_box_img h6 { float:left; width:100%; font-size:16px; color:#222; font-weight:bold; text-align:center; padding:7px 0 0 0;}
.ecards_box_img1 { float:left; width:64.66%; margin:15px 1% 0 1%;}
.ecards_box_img1 img { float:left; width:100%;}

.evoucher_box_img { float:left; width:23%; margin:20px 1% 0 1%;}
.evoucher_box_img img { float:left; width:100%;}

.table_select_menu { border:none; color:#052438; width:100%; padding:2px 0; background:none;}

.divs_arrow { float:left; width:100%; position:relative; z-index:9999; touch-action: none;}
.divs_arrow a#prev { position:absolute; top:50%; left:20px; width:30px; height:50px; background:url(../images/aro-left1.png) left top no-repeat; touch-action: none;}
.divs_arrow a#next { position:absolute; top:50%; right:20px; width:30px; height:30px; background:url(../images/aro-right1.png) right top no-repeat; touch-action: none;}
.divs_arrow { float:left; width:100%; position:relative; z-index:9999; touch-action: none;}
.divs_arrow a.prev { position:absolute; top:50%; left:0; width:30px; height:30px; background:url(../images/aro-left1.png) left top no-repeat; touch-action: none;}
.divs_arrow a.next { position:absolute; top:50%; right:0; width:30px; height:30px; background:url(../images/aro-right1.png) right top no-repeat; touch-action: none;}

.meet_the_team_box { float:left; width:100%;}
.meet_the_team_img { float:left; width:26%; margin-top:12px; margin-right:2%;}
.meet_the_team_img img { float:left; width:100%; border-radius:50%; border:1px solid #ccc;}
.meet_the_team_text { float:left; width:72%;}
.meet_the_team_text h6 { float:left; width:100%; font-size:18px; color:#3dcce0; padding:12px 0 0 0;}

.form_control_box {border-radius:25px; border:1px solid #C0C3C6; background:#fff; min-height:40px !important; padding: 0 15px; font-size:16px; color:#81878D;}

.savings_calculator_section_bg { float:left; width:100%;  padding:0;}
.savings_calculator_left { float:left; width:50%; margin:0;}
.savings_calculator_left h2 { float:left; width:100%; font-size:16px; line-height:18px; color:#052438; font-family: 'ralewaybold';}
.savings_calculator_button { float:left; width:100%; text-align:center; margin-top:10px;}
.savings_calculator_button a { float:left; font-size:14px; background:#40CFBB; color:#fff; padding:7px 15px; border-radius:30px; font-family: 'ralewaybold'; }
.savings_calculator_img_right { float:left; width:35%; margin:0}
.savings_calculator_img_right img { float:left; width:100%; }

.form_control_box1 {border-radius: 25px;
border: 1px solid #C0C3C6;
background: #fff; width:94%; float:left; margin-top:10px;
padding: 0 3%; min-height:40px;
font-size: 16px;
color: #81878D;}
.form_control_box_left {border-radius: 25px;
border: 1px solid #C0C3C6;
background: #fff; width:43%; margin:10px 4% 0 0; float:left;
padding: 0 2%; min-height:40px;
font-size: 16px;
color: #81878D;}
.form_control_box_right {border-radius: 25px;
border: 1px solid #C0C3C6;
background: #fff; width:42%; margin:10px 0 0 0; float:left;
padding: 0 3%; min-height:40px;
font-size: 16px;
color: #81878D;}
.form_control_box1:focus { border:none;} 
.registration_submit_but { float:left; width:100%; margin-top:10px;}
.registration_submit_but .btn {float: left; background: #052430; font-size: 18px; color: #fff; padding: 12px 45px; border-radius: 30px;
font-family: 'ralewaybold'; line-height: normal; margin-top: 0; border:none; cursor:pointer;}
.registration_submit_but .btn:hover { background:#47cfe0;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index:999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 2% auto 0 auto; /* 15% from the top and centered */
  padding: 0 0 15px 0;
  border: 1px solid #888;
  width: 70%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #fff;
  float: right;
  font-size: 28px;
  font-weight: bold; line-height:28px;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
/* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: #052438;
  color: white;
}

.modal-header h2 { font-weight:bold;}
/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Content */

.modal-content p {float: none; font-size: 15px; line-height: 18px; color: #052438; margin: 0; padding:15px 15px 0 15px;}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}
@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;
}