<?php include 'views/_header_vid.tpl.php'; ?>

<style type="text/css">
	body {
	    /*background:#000 url("/static/client/bg.jpg");*/
	    background:#000 url("<?php if (!empty($website_options['mobile_background'])) : ?>/<?= $website_options['mobile_background'] ?><?php else : ?>/static/client/bg.jpg<?php endif; ?>");
	    background-repeat: no-repeat;
	    background-size: cover;
		background-position: center center;
		margin:0;
		padding:0;	
		overflow-x:hidden;
		width:100%;
		height:100vh; 
	}
	html {
	    height: 100%;
		overflow:hidden;
	}
	#wrapper {
		overflow: hidden; 
	}
	a.expand-btn { color:#ff0000; text-shadow:0px -1px 0px rgba(0,0,0,.7); }
	a.expand-btn:hover { color:#fff; }	
	
	input[type="text"], input[type="password"] { 
		height: 30px;
		background: rgba(0,0,0,.4);
		color: #fff;
		font-size: 15px;
		-webkit-appearance: textfield;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		border: 0px !important;
		padding: 10px;
		border-image-source: initial;
		border-image-slice: initial;
		border-image-width: initial;
		border-image-outset: initial;
		border-image-repeat: initial;
		-webkit-rtl-ordering: logical;
		-webkit-user-select: text;
		cursor: auto;
		}
		style.css:81
		button, input {
		line-height: normal;
		}
	}
    .yellow { background:#fefb25; }
	/* green 82be55 blue 0DA5F2 */
	.btn-o, .btn-o a, .btn-oo a {
		border: 0px solid #0DA5F2; /* was 3px */
		/*background: rgba(0,0,0,.5);*/
		/*background: #aaa;*/
		padding: 15px 20px;
		width: 200px;
		height: 20px;
		line-height: 20px;
		display:inline-block; 
		font-family: 'Open Sans', Montserrat,Arial,sans-serif; 
		font-weight:600;
		font-size:17px; color:#fff; 
		-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
		box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 12px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 12px;
		-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 12px;
	}
	
	.btn-o:active, .btn-o:hover, .btn-oo a:hover, .btn-oo a:active { 
		border:0px solid #fff; 
		/*opacity:.7;*/
		/*background: #82be55;*/
	}	
	
	.redbtn { 
		background: #E91C19;
	}
	
	.redbtn:hover { 
		background: #ff0000;
	}
	
	input[type="submit"] {
		border: 1px solid #fff;
		padding: 15px 20px;
		width: 100px;
		display: inline-block;
		font-family: 'Open Sans', Montserrat,Arial,sans-serif;
		font-size: 14px;
		color: #fff;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;	
	}  
	
	.btn-flat {
	  background: #3498db;
	  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	  background-image: -o-linear-gradient(top, #3498db, #2980b9);
	  background-image: linear-gradient(to bottom, #3498db, #2980b9);
	  webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.45),0 1px 1px rgba(0,0,0,.4);
	  box-shadow: inset 0 1px 0 rgba(255,255,255,.45),0 1px 0px rgba(255,255,255,.4);
	  -webkit-border-radius: 3px;
	  -moz-border-radius: 3px;
	  border-radius: 3px;
	  font-family: Montserrat,Arial,sans-serif;
	  text-shadow:0px -1px 1px rgba(0,0,0,.3);
	  color: #ffffff;
	  font-size: 13px;
	  padding: 7px 12px 7px 12px;
	  border: solid #2980b9 0px;
	  text-decoration: none;
	  max-width:250px;
	}
	.btn-flat:hover {
	  background: #3cb0fd;
	  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	  text-decoration: none;
	}
	
	.btn-square {
		height: 35px;
		padding: 15px 15px 10px;
		line-height: 35px;
		color: #fff;
		font-size: 20px;
		background: rgba(0,0,0,.4);
		border: 3px solid #94c842;
		min-width: 250px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		text-shadow: 0px -1px 1px rgb(0 0 0 / 30%);
		font-family: acherusgrotesque-regular, 'acherusgrotesque-regular', 'Proxima-Nova-Thin','Montserrat-Light','Open Sans', sans-serif;
	}
	
	h2.common-title { font-weight:400; }
	
	video#bgvid {
		position: fixed;
		top: 50%;
		left: 50%;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		/*height: auto;*/
		z-index: -100;
		-ms-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		background: url(static/images/bgmount2.jpg) no-repeat;
		background-size: cover;
	}

	.fullscreen-bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;
		z-index: -100;
	}

	.fullscreen-bg__video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	@media (min-aspect-ratio: 16/9) {
		.fullscreen-bg__video {
			height: 300%;
			top: -100%;
		}
	}

	@media (max-aspect-ratio: 16/9) {
		.fullscreen-bg__video {
			width: 300%;
			left: -100%;
		}
	}

	@media (max-width: 767px) {
		.fullscreen-bg {
			background: url('static/images/bgmount2.jpg') center center / cover no-repeat;
		}

		.fullscreen-bg__video {
			/*display: none;*/
		}
	}	
	
/* ############################################################################ */
/* ################################   MOBILE   ################################ */
/* ############################################################################ */	
	
/* ######################### */
/*         < 1091px          */
/* ######################### */

@media screen and (max-device-width:  1091px), screen and (max-width:  1091px) {
	
}

/* ######################### */
/*       Small Tablets       */
/* ######################### */

@media (max-width: 768px) {

}

/* ######################### */
/* Landscape phones and down */
/* ######################### */

@media (max-width: 480px) {

}
</style> 

<!-- position:absolute;  top:0; left:0; right:0; background is usually .40 rgba(0,0,0,.65);   -->
<div class="" style="background:rgba(0,0,0,.65); height:100vh; width:100%; padding-bottom:0px !important; margin-bottom:0px !important; overflow:hidden !important; display: table;">
	<div class="container_12 clearfix" style="position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; text-align:center; padding:0px; overflow:hidden !important; display: table;">
    		
			<div style="text-align:center; display: table-cell;
				vertical-align: middle; margin:0 auto !important; width:350px;">
    		    
				<!-- logo had this margin-top:35px; -->
    		    <img src="<?= $website_options['appintro_logo'] ?>" 
    		    alt="<?= $website_options['website_title'] ?>"  
				style="max-width:150px; width:70%; max-height:150px; margin-bottom:20px" />
    		    <br />
    		    
				<div style="color:#ddd; font-family:Montserrat,Open Sans, sans-serif; font-weight:300; max-width:300px; margin: 0 auto">
					Optional home page designed for mobile.
    		    </div>
    		    <div class="clear"></div>
				<br />

			<!--<div> 
				<a class="btn-o" href="/auth/login/">Login to Admin Dash</a>
			</div>			
			<div class="clear"></div>-->

			<div>
				<a class="btn-o btn-green" href="/auth/login">Login <img
					src="/static/system/right_arrow.png" alt=">" style="height:15px; margin-top:-3px" align="absmiddle" /></a>
			</div>	
			<br />
			
			<div>
				<a class="btn-o btn-green" href="/auth/register">Join Now <img
					src="/static/system/right_arrow.png" alt=">" style="height:15px; margin-top:-3px" align="absmiddle" /></a>
			</div>				
			
    			<!--<h1 style="color:#fff; font-size:15px;">
    				Download the App
    			</h1>			
			
			<a href="https://itunes.apple.com/us/app/square-loyalty-card/id1437725489?mt=8&ign-mpt=uo%3D4"><img src="/static/images/btn_app_store.png" 
			alt="Download on the App Store" style="width:175px; margin-bottom:10px;" /></a>
			<a href="#" target="_blank"><img 
			src="/static/images/btn_google_play.png" alt="Download on Google Play" style="width:175px; margin-bottom:10px;" /></a>	
			-->
			<br />
			<div style="font-size:15px;">
				<?php if ($_SESSION['loggedin'] && $_SESSION['user_id']) { ?>
					<a href="/profile/edit" style="color:#fff; font-weight:300;">Edit Account</a> &nbsp;|&nbsp;
					<a href="/auth/logout" style="color:#fff; font-weight:300;">Logout</a>
				<?php } else { ?>
				<a href="/auth/login" style="color:#fff; font-weight:300;"><img src="/static/system/profile_icon.png" alt="PIN" style="height:20px; margin-top:-2px" /> Login</a> &nbsp;|&nbsp;  
					<a href="/auth/register" style="color:#fff; font-weight:300;">Sign Up</a> &nbsp;|&nbsp; 
					<a href="/auth/keypad" style="color:#fff; font-weight:300;"><img src="/static/system/pin_code_icon.png" alt="PIN" style="height:20px; margin-top:-2px" /> PIN</a>
				<?php } ?>
				<?php if ($_SESSION['user']['is_admin']) { ?>
					&nbsp;|&nbsp; <a href="/admin/" class="nav-title" style="color:#ff0000;">Admin</a> 
				<?php } ?>		
			</div>
			
<!--            <img src="/static/system/powered_by2.png" alt="powered by ThinApp + Square" 
            style="height:40px; margin-bottom:7px" />
            <br />-->
			<!--<a href="javascript:top.frames.location.reload();"><img
				src="/static/system/badge/animated_preorder_platinum2.gif" alt="Pre-Order Platinum"
				style="height:40px;" /></a>-->
            
			<a href="https://superappsnow.com"><img 
				src="/static/system/animated_sa.gif" alt="SuperApps" 
			style="height:65px;" /></a> 
			
			<br />
			
			<a href="javascript:top.frames.location.reload();"><img
				src="/static/system/preorder_invisible_icon.png" alt="Pre-Order"
				style="height:35px;" /></a> 
			
			<!--<a href="javascript:top.frames.location.reload();"><img
				src="/static/system/badge/preorder_gold_sparkle.png" alt="Pre-Order"
				style="height:40px;" /></a>--> 
            			
		</div><!-- THIS DIV CONTAINS THE CONTENT OF THE PAGE SO WE CAN CENTER IT VERTICALLY -->
		
		<br /><br />
		<div style="width:40px; height:40px; position:fixed; bottom:20px; left:20px;">
			<?php if ($_SESSION['loggedin'] && $_SESSION['user_id']) { ?>
				<a href="/ewallet"><img
				src="/static/system/icon_scanbars.png" alt="Scan" style="height:40px;" /></a>
			<?php } else { ?>
				<a href="/ewallet"><img src="/static/system/icon_scanbars.png" alt="Scan" style="height:40px;" /></a>
			<?php } ?>
		</div>
		
		<div style="width:40px; height:40px; position:fixed; bottom:20px; right:20px;">
			<a href="/checkout"><img
				src="/static/system/shopping_bag_icon.png" alt="Bag" style="height:40px;" /></a>
		</div>
	</div>
	<div class="clear"></div>
</div>
<div class="clear"></div>

<?php if ($_SESSION['loggedin']) : ?>

<?php if ($website_options['enable_homepage_nearby']) : ?>
    <script src='/static/js/googlemaps/getlocation-noconflict.js'></script>
<?php else : ?>
    <script src='/static/js/googlemaps/getlocation.js'></script>
<?php endif; ?>

<?php endif; ?>

<?php include 'views/_footer_m.tpl.php'; ?>