<?php
if (!isset($_SESSION)) {
	@session_start();
}
global $website_options;
$website_title = !empty($website_title) ? $website_title : "YourBrand by BASE Pages";
$website_description = !empty($website_description) ? $website_description : $website_options['website_description'];
$website_image = !empty($website_image) ? $website_image : "https://base.basepages.com/static/share_banner.jpg";
ob_start();
if (!isset($_COOKIE['firstvisit'])) {
	$cookieLifetime = 1 * 1 * 2 * 60; // 31 days 31 * 24 * 60 * 60
	setcookie("firstvisit", "alreadyvisited", time() + $cookieLifetime);
} else {
	if (!isset($_COOKIE['addappicon'])) {
		$cookieLife = 1 * 1 * 1 * 60; // 31 days 31 * 24 * 60 * 60
		setcookie("addappicon", "alreadyadded", time() + $cookieLife);
	}	
}
ob_end_flush(); 
?>
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title><?= $website_title ?></title>
    
    <meta name="google-site-verification" content="" />
	<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="apple-touch-fullscreen" content="yes">
    
	<!-- new stuff -->
	<link rel="manifest"  crossorigin="use-credentials" href="manifest.json">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="application-name" content="<?= $website_options['short_title'] ?>">
	<meta name="apple-mobile-web-app-title" content="<?= $website_options['short_title'] ?>">
	<meta name="msapplication-starturl" content="<?= get('siteroot') ?>">
	<!-- new stuff ends -->      
    
    <script src="/static/js/stay_standalone.js" type="text/javascript"></script>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="<?= $website_options['short_title'] ?>">

    <meta name="keywords" content="<?= $website_options['website_keywords'] ?>" />
	<meta name="description" content="<?= $website_description ?>" />
    
    <meta property="og:url"           content="<?= get('siteroot') ?>" />
    <meta property="og:type"          content="website" />
	<meta property="og:title"         content="<?= $website_title ?>" />
	<meta property="og:description"   content="<?= $website_description ?>" />
	
	<meta property="og:image"         content="<?= $website_image ?>" />
<!--	<meta property="og:image:url"	  content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>/<?= $website_image ?>" />-->
	<meta property="og:image:alt"	  content="<?= $website_options['short_title'] ?>" />      

	<link rel="preload" href="/static/css/normalize.css" as="style" 
	onload="this.onload=null;this.rel='stylesheet'">
	<noscript><link rel="stylesheet" href="/static/css/normalize.css"></noscript>
	<link rel="preload" href="/static/css/jquery.sidr.light.css" as="style"
	onload="this.onload=null;this.rel='stylesheet'">
	<noscript><link rel="stylesheet" href="/static/css/jquery.sidr.light.css"></noscript>
	<link rel="preload" href="/static/css/animate.min.css" as="style"
	onload="this.onload=null;this.rel='stylesheet'">
	<noscript><link rel="stylesheet" href="/static/css/animate.min.css"></noscript>
	<link rel="preload" href="/static/css/style.css" as="style"
	onload="this.onload=null;this.rel='stylesheet'">
	<noscript><link rel="stylesheet" href="/static/css/style.css"></noscript>
    
	<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32" />
	<link rel="shortcut icon" href="<?= $website_options['website_favicon'] ?>" type="image/x-icon" />
	<link rel="apple-touch-icon" sizes="57x57" href="/<?= $website_options['mobile_logo_57x57'] ?>" />
	<link rel="apple-touch-icon" sizes="72x72" href="/<?= $website_options['mobile_logo_72x72'] ?>" />
	<link rel="apple-touch-icon" sizes="76x76" href="/<?= $website_options['mobile_logo_76x76'] ?>" />
	<link rel="apple-touch-icon" sizes="114x114" href="/<?= $website_options['mobile_logo_114x114'] ?>" />
	<link rel="apple-touch-icon" sizes="120x120" href="/<?= $website_options['mobile_logo_120x120'] ?>" />
	<link rel="apple-touch-icon" sizes="144x144" href="/<?= $website_options['mobile_logo_144x144'] ?>" />
	<link rel="apple-touch-icon" sizes="152x152" href="/<?= $website_options['mobile_logo_152x152'] ?>" />
	<script rel="preload" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
   type="text/javascript"> </script>
	<script type="text/javascript" src="/static/js/script.js"> </script>
    
	<link rel="preload" href="/static/js/addtohomescreen.css" as="style"
	onload="this.onload=null;this.rel='stylesheet'">
	<noscript><link rel="stylesheet" href="/static/js/addtohomescreen.css" type="text/css"></noscript>

	<script src="/static/js/addtohomescreen.js?<?php echo rand(); ?>"> </script>
	<script type="application/javascript">
	addToHomescreen();
	</script>
	
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

	<!-- THIS GOES WITH THE TESTIMONIALS -->
	<!--<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>-->
	   
	<script type="text/javascript">
		$(document).ready(function() {
			//jQuery.noConflict();
			//alert('Doc Ready detection works');
			// App Mode Detection
			var standalone = window.navigator.standalone,
			userAgent = window.navigator.userAgent.toLowerCase(),
			safari = /safari/.test( userAgent ),
			ios = /iphone|ipod|ipad/.test( userAgent );
			android = (window.matchMedia('(display-mode: standalone)').matches); // isInWebAppChrome
			
		//	if (android == true) {
		//		$('.wrap-top-menu').css('padding-top',6);
		//		$('.header-content').css('padding-top',38);
		//		$('.spacer').css('padding-top',57);
		//	}

			if (window.navigator.standalone == true) {
				//alert("You're using our PWA/Hybrid App!");
		//		$('.spacer').css('padding-top',85);
		//		$('#homepage').css('padding-top',40);
		//		$('.wrap-top-menu').css('padding-top',43);
		//		$('.topsection').css('margin-top',40);
		//		$('.hybridlogo').css('top',38);
		//		$('.header-content').css('padding-top',53);
		//		$('.btn-toogle-menu').css('margin-top',0);
		//		$('.bottomtray').css('padding-bottom',15);
		//		$('#fixed-btm-btn').css('padding-bottom',80);
		//		$('.scrollup').css('bottom',80);
		//		$('.modalhdr').css('margin-top',90);
		//		$('.updatebutton').css('padding-bottom',90);
		//		$('.invtxt').css('margin-bottom',20);
		//		$('.support').css('margin-top',5);
				//$('.webapptop').css('padding-top',12);
				// Super small phones
				if ($(window).width() <= 375) {
					//alert("iPhone SEs etc");
					$('.bottomtray').css('padding-bottom',0);
					$('#fixed-btm-btn').css('padding-bottom',0);
				}
				// 393px is the cutoff
				if ($(window).width() <= 393) {
					$('.spacer').css('padding-top',72);
					$('#lpcontainer').css('padding-top',25);
					$('#featurelist').css('margin-top',18);
					//alert("iPhone 15 Pros etc");
				}
				if ($(window).width() <= 586) {
					//alert('iPhone 15 Pros + similar');
					$('.wrap-top-menu').css('padding-top',73);
					$('.home-feature-category').css('padding-top',48);
		//			$('.tophdrimg').css('padding-top',0);
		//			$('.qrfixedbottom').css('padding-bottom',30);
		//			$('.floatingqr').css('top',100);
		//			$('.timelinedetailsspacer').css('display','block');
		//			$('.logintext').css('padding-top',40); // load page only
		//			$('#moredivarea').css('padding-bottom',25);
		//			$('.scrollup').css('bottom',90);
				}

				// iPad Portrait
				if ($(window).width() == 768) {
					$('.updatebutton').css('padding-bottom',60);
					$('.invtxt').css('margin-bottom',0);
					$('.scrollup').css('bottom',57);
					//$('.spacer').css('padding-top',25);
					//$('.wrap-top-menu').css('padding-top',17);
					//alert("You're using our Hybrid App!");
				}
				if ($(window).width() >= 1024) {
					$('.spacer').css('padding-top',77);
					$('.wrap-top-menu').css('padding-top',27);
					//$('.btn-toogle-menu').css('margin-top',2);
					$('.updatebutton').css('padding-bottom',60);
					$('.invtxt').css('margin-bottom',0);
					$('.scrollup').css('bottom',60);
					//alert("You're using our Hybrid App and this is probably an iPad!");
				}
			} else {
				if ( ios ) {
					//alert("iOS");
					if ( !standalone && !safari ) {
						// THESE ARE MEANT FOR APPWRAPPER PAGES
						//alert("You're using the Native App");
					};
					if ( !standalone && safari ) {
						// MOBILE SAFARI
						//alert("You're using the regular Mobile Website");
					};
				} else {
					// NOT iOS, so maybe this is Android. We need to test some more.
					// Note: the window.navigator.standalone doesn't work with Androids
				}
				
				// You can also display a message this way:
		//		alert("This is a Hybrid App, please add the App Icon to your Home screen & open it from there to access all features.");
		//		document.write('<p>Tap the + button and choose "Add to Home Screen"</p>');
		//		document.write('<link rel="apple-touch-icon" href="/static/images/icon@2x.png"/>');
		//		$('#addtheapp').show();
			}   	

			if (window.navigator.standalone == true) {
				//alert('Stand-Alone');
			} else {
				//alert('NOT Stand-Alone');
				if ($(window).width() <= 480) {

					var id = 'dialog';
					var x = getCookie('addappicon');

					if (x) {
						//alert('Do nothing...');
						//alert('Set the cookie');
						//setCookie('addappicon','alreadyadded',1);
					} else {
						//setCookie('addappicon','alreadyadded',1);
						//alert('NO Cookie');
						//transition effect
						$('#mask').fadeIn(0);
						$('#mask').fadeTo("fast",0.90);

						//transition effect
						$('#'+id).fadeIn(0);

						//if close button is clicked
						$('.window .close').click(function (e) {
							//Cancel the link behavior
							e.preventDefault();

							$('#mask').hide();
							$('.window').hide();
						});

						//if mask is clicked
						$('#mask').click(function () {
							$(this).hide();
							$('.window').hide();
						});

						//enter buttons opens overlay
						$('#ol').click(function () {
							//transition effect
							$('#mask').fadeIn(1000);
							$('#mask').fadeTo("slow",0.90);

							//transition effect
							$('#'+id).fadeIn(2000);
						});
					}
				} // WINDOW WIDTH CHECK ENDS		
			}
			
		}); // DOC READY ENDS
		/////////////////////////////////////////////////////////
		
		function setCookie(name,value,days) {
		    var expires = "";
		    if (days) {
		        var date = new Date();
				date.setTime(date.getTime() + (days*1*60)); // days*24*60*60*1000
		        expires = "; expires=" + date.toUTCString();
		    }
		    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
		}
		function getCookie(name) {
		    var nameEQ = name + "=";
		    var ca = document.cookie.split(';');
		    for(var i=0;i < ca.length;i++) {
		        var c = ca[i];
		        while (c.charAt(0)==' ') c = c.substring(1,c.length);
		        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		    }
		    return null;
		}
		function eraseCookie(name) {   
		    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
		}
	</script>

    <!--[if lte IE 7]>
    <link rel="stylesheet" href="/static/css/ie7.css"/>
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="/static/css/ie8.css"/>
    <![endif]-->
    <!--<link rel="stylesheet" href="/static/css/responsive.css"/>-->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/static/js/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/static/js/raphael-min.js"></script>

    <link rel="stylesheet" href="/static/css/normalize.css"/>
    <link rel="stylesheet" href="/static/css/jquery.sidr.light.css"/>
    <link rel="stylesheet" href="/static/css/style.css"/>
    <!--[if lte IE 7]>
    <link rel="stylesheet" href="/static/css/ie7.css"/>
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="/static/css/ie8.css"/>
    <![endif]-->
    <!--<link rel="stylesheet" href="/static/css/responsive.css"/>-->
    
	<link rel="preload" href="/static/css/responsive.css" as="style"
	onload="this.onload=null;this.rel='stylesheet'">
	<noscript><link rel="stylesheet" href="/static/css/responsive.css"></noscript>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/static/js/html5.js"></script>
    <![endif]-->

    <!-- <script type="text/javascript" src="/static/js/jquery-1.9.1.min.js"></script> -->
    <script type="text/javascript" src="/static/js/jquery.sidr.min.js"></script>
    <script type="text/javascript" src="/static/js/notify.min.js"></script>
    <script type="text/javascript" src="/static/js/fancybox/jquery.fancybox.pack.js"></script>
    <link rel="stylesheet" href="/static/js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />

  <!-- <script type="text/javascript" src="/static/js/fancybox/jquery.fancybox.js"></script> 
  <!-- <script type="text/javascript" src="/static/js/popup.js"></script>
  <script type="text/javascript" src="/static/js/ajax.js"></script>-->

  <script type="text/javascript">
  $(document).ready(function() {                    
        
	    $(".loginpop").fancybox({
	      'hideOnOverlayClick':false,
	      'hideOnContentClick':false,
	      'nextEffect': 'fade',
	      'prevEffect': 'fade'
	    });

	    $(".backToLogin")
	      .die('click')
	      .live('click', function () {
	        $(".loginFrm").show();
	        $(".quickSignupFrm").replaceWith('');
	        return false;
	    });  

		$(window).scroll(function () {
		    if ($(this).scrollTop() > 100) {
		        $('.scrollup').fadeIn();
		    } else {
		        $('.scrollup').fadeOut();
		    }
		});

		$('.scrollup').click(function () {
		    $("html, body").animate({
		        scrollTop: 0
		    }, 600);
		    return false;
		}); 
		
        // enable auto complete
//        if ($(".homepage .multi-search").length) {
//            $(".homepage .multi-search").autocomplete({
//                source: "/search",
//                minLength: 2,
//                select: function(event, ui)
//                {
//                }
//            })
//            .data("ui-autocomplete")._renderItem = function(ul, item)
//            {
//                item_html = "<a href='" + item.url + "'>"
//                            + "<img class='ui-item-thumb' src='" + item.thumb + "' />"
//                            + "<span>" + item.label + "</span>"
//                          + "</a>";
//
//                return $( "<li>" )
//                    .append(item_html)
//                    .appendTo(ul);
//            };
//        }		
            
  }); // DOC READY ENDS 
  </script>

<!--  <script type="text/javascript" src="/static/js/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="/static/js/jquery.touchwipe.min.js"></script>
  <script type="text/javascript" src="/static/js/md_slider.min.js"></script>-->
  <script type="text/javascript" src="/static/js/jquery.sidr.min.js"></script>
<!--  <script type="text/javascript" src="/static/js/pie.js"></script>-->
  <!--<script type="text/javascript" src="/static/js/script.js"></script>-->
<!--  <script type="text/javascript" src="/static/js/responsiveslides.min.js"></script>-->
  <!-- FOR MESSAGES AUTOMATICALLY UPDATING -->
  <script type="text/javascript" src="/static/js/lbRealtime.js"></script> 
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>

<?php if ($_SESSION['user_id']) : ?>
	<!-- ADD BACK WHEN WE INCLUDE THE NOTIFICATIONS AND MESSAGES FEATURE
	<!--<script type="text/javascript">
	$(document).ready(function(){
	  var lbr = new lbRealtime();
	  lbr.init();
	});
	</script>-->
<?php endif; ?>
</head>

<style type="text/css">
	#wrapper {
		overflow: hidden;
	}
	.wrap-top-menu {
		padding-top: constant(safe-area-inset-top);
		margin-top: -constant(safe-area-inset-top);
	}
	#header .top-message a {
		color: #ddd;
		font-weight: 400 !important;
	}
	#header .top-message a:hover {
		color: #fff;
	}
	.backarrowdiv {
		display: none;
	}
	a.logoutbtn {
		color: #ff0000 !important;
	}
	a.logoutbtn:hover {
		color: #fff !important;
	}
	#overlaystyle {
		color: #fff;
		font-family: Montserrat,'Open Sans',Helvetica,sans-serif;
	}
	.btn-toogle-menu {
		margin-right: 15px;
	}
	.nav-horizontal > li > a {
		font-weight: 400 !important;
		font-size: 14px;
		text-transform: uppercase;
		font-family: Montserrat,'Open Sans',Helvetica,Verdana,sans-serif !important;
	}
	hr.sidr-class-custom {
		border: 0;
		height: 1px;
		background-image: linear-gradient(to right, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75), rgba(128, 128, 128, 0));
		width: 85%;
	}
	.button a,.button a:active, .button a:visited {
		-webkit-appearance: none;
		height: auto;
		width: auto;
		padding: 20px 25px;
		font-size: 20px !important;
		font-weight: normal;
		text-decoration: none;
		background: #6BB130;
		border: 1px solid #6BB130;
		border-bottom: 0px solid #619E2C !important;
		color: #fff;
		font-family: Montserrat-Light,Futura-Medium,serif !important;
		text-shadow: 0px -1px 1px rgba(0,0,0,.3);
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	.submit, .submit a, .submit a:active, .submit a:visited {
		-webkit-appearance: none;
		height: auto;
		width: auto;
		padding: 9px 15px;
		font-size: 15px;
		font-weight: normal;
		text-decoration: none;
		background: #6BB130;
		border: 1px solid #6BB130;
		border-bottom: 0px solid #619E2C !important;
		color: #fff;
		font-family: Montserrat-Light,Futura-Medium,serif !important;
		text-shadow: 0px -1px 1px rgba(0,0,0,.3);
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	/*******************************/
	/**********  WEB APP  **********/
	/*******************************/
	.btn-red {
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
	}
	#mask {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		right:0;
		bottom: 0;
		z-index: 90000;
		background-size:cover;
		background: url(static/system/diag.png);
		background-color: rgba(0,0,0,.85) !important;
		opacity:1.0 !important;
		width: 100%;
		height: 100vh;
	}
	#boxes .window {
		position: absolute;
		left: 0;
		top: 0;
		right:0;
		bottom: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: none;
		z-index: 99999;
		padding: 0;
	}
	#boxes #dialog {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		height: auto;
		width: auto;
		overflow: hidden;
	}

	/*******************************/

	hr.style-two {
		border: 0;
		height: 1px;
		width: 90%;
		background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
		background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
		background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
		background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	}

	.loginlinks a, .loginlinks a:active, .loginlinks a:visited, .loginlinks a:link {
		color: #14E06E !important;
	}
	.loginlinks a:hover {
		color: #fff !important;
	}
	a.neongreen {
		color: #14E06E !important;
	}
	a.neongreen:hover {
		color: #fff !important;
	}
	a.whitehover:hover {
		/*color:#fff !important;
		text-shadow: 0px -1px 1px rgba(0,0,0,.1) !important;*/
		background: #fff !important;
	}

	/* ################################## */
	/* SCROLL BARS */
	/* ################################## */

	::-webkit-scrollbar {
		width: 14px;
		background: #eee;
	}

	/* Track */
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}

	/* Handle */
	::-webkit-scrollbar-thumb {
		border: 3px solid #eee;
		background-clip: padding-box;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		background: rgba(0,0,0,0.1);
		background-color: #ccc !important;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
	}
	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(255,0,0,0.3);
	}

	/* #### TOP MENU NAV #### */
	nav.top-menu {
		margin-left: 10px;
	}
	ul#main-menu {
		height: 20px;
		padding: 9px;
		overflow: hidden;
	}

	nav.top-menu li:hover {
		width: auto;
		color: #fff;
		text-shadow: 0px -1px 0px rgba(0,0,0,.4);
		display: block;
	}

	.nav-horizontal > li {
		float: left;
		padding: 0 8px;
	}

	/* DROPDOWN MENU EXPANDED */
	nav.top-menu ul li.expanded ul {
		display: none;
	}
	nav.top-menu ul li.expanded:hover ul {
		display: block;
		position: absolute;
		top: 43px;
		left: 0;
		right: 0;
		width: 100%;
		padding: 0;
		height: auto;
		text-align: left;
	}

	nav.top-menu ul li.expanded ul a {
		font-family: Montserrat,'Open Sans',Helvetica,Verdana,sans-serif;
		background: #ddd;
		color: #000;
		text-shadow: 0px 1px 0px rgba(255,255,255,.4);
	}

	nav.top-menu ul li.expanded ul a:hover {
		background: #00D315;   /* green lime 00de00 */
		color: #000;
		text-shadow: 0px 1px 0px rgba(255,255,255,.4);
		/**color:#fff;
		text-shadow: 1px 1px 1px rgba(0,0,0,.5); **/
	}
	img.hthumb {
		height: 27px;
		width: 27px;
		border-radius: 50%;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		margin-top: 5px;
	}

	.loginlinks {
		display: inline-block;
	}

	#rotate > img {
		-webkit-transition-duration: 0.8s;
		-moz-transition-duration: 0.8s;
		-o-transition-duration: 0.8s;
		transition-duration: 0.8s;
		-webkit-transition-property: -webkit-transform;
		-moz-transition-property: -moz-transform;
		-o-transition-property: -o-transform;
		transition-property: transform;
		overflow: hidden;
	}

	#rotate:hover > img  {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
	}

	/* ########################################################################## */
	/* #####################         MOBILE STYLING         ##################### */
	/* ########################################################################## */

	/* ######################################## */
	/* Portrait tablet to landscape and desktop */
	@media (min-width: 1025px) and (max-width: 4399px) {
		#header .top-messagediv {
			display: inline-block;
		}
		.newhdrlogo {
		}
	}

	/* ######################################## */
	/* Portrait tablet to landscape and desktop */

	@media (min-width: 980px) and (max-width: 1024px) {
		#header .top-messagediv {
			display: inline-block;
		}
		.newhdrlogo {
			/*display: none;*/
		}
	}

	/* ######################################## */
	/* Portrait tablet to landscape and desktop */

	@media (min-width: 768px) and (max-width: 979px) {
		#header .top-messagediv {
			display: none;
		}
		.newhdrlogo {
		}
	}
	/* ######################################## */
	/* Landscape phone to portrait tablet */

	@media (max-width: 767px) {
		.loginlinks, .marketplacediv {
			display: none;
		}
		#header .top-messagediv {
			display: none;
		}
		.newhdrlogo {
		}
		.greenplus {
			display: inline;
		}
	}
	/* ######################################## */
	/* Landscape phones and down */

	@media (max-width: 587px) {
		.loginlinks, nav.top-menu, .marketplacediv {
			display: none !important;
		}
		.newhdrlogo {
		}
		#header .top-messagediv {
			display: none;
		}
		.backarrowdiv {
			display: inline-block;
		}
		img.sidr-class-LB {
			margin-top: 50px !important;
		}
	}

</style>

<body>

<div id="wrapper" style="overflow:hidden;">
<!-- //////////////////////////////////////////////////////// -->
<!-- //////////////////   PWA MASK STARTS  ////////////////// -->
<!-- //////////////////////////////////////////////////////// -->
<div id="boxes">
	<div id="dialog" class="window">
		<div id="overlaystyle" style="font-family:Montserrat, Raleway,sans-serif; font-size:20px; 
		font-weight:normal; padding:0px 10px 10px; color:#fff; text-align:center;">

			<div style="display:table; height:100vh; width:100%;">
			<div class="displaytable" style=" display: table-cell; vertical-align: middle; 
				height:400px;">
				<img src="/<?= $website_options['website_logo'] ?>"
				style="height:auto; width:80%; max-width:250px; 
				margin-top:-50px; margin-bottom:10px" alt="Home" />

				<div style="margin-bottom:10px;">
					Add-to-Home Screen
				</div>

				<div style="font-size:17px; line-height:25px; color:#ccc; width:80%; 
				max-width:550px; margin:0 auto">
					For a full-screen app experience + quick &amp; easy access
					on any device, add our App Icon...
				</div>
				<br />

				<img src="/<?= $website_options['mobile_logo_100x100'] ?>" alt="Icon"
				style="height:auto; width:70px; margin-top:15px;
				border-radius: 12px;
				-moz-border-radius: 12px;
				-webkit-border-radius: 12px;" alt="Home" />
				<br /><br /><br />

				<div style="margin-bottom:15px;">
					<a href="javascript:;" class="btn btn-red close"
						style="font-family:Montserrat, Open Sans, sans-serif; color:#fff;
					font-size:17px; font-weight:600; text-shadow:0px 1px 1px rgba(0,0,0,.3);
					padding:15px 20px;">Or, Enter Site Now</a>
				</div>
				<div class="clear"></div>
				<div style="height:35px; line-height:36px; font-size:14px; color:#bbb;">
					<img src="/static/system/icons/share_icon_white.png" alt="Click Share Icon"
					style="height:auto; width:30px; margin-bottom:6px; margin-right:2px" 
					align="absmiddle" /> iOS - Click the Share icon 
				</div>
				<div style="height:30px; line-height:30px; font-size:14px; color:#bbb;">
					<img src="/static/system/icons/3_dots_white.png" alt="Click 3 dots"
					style="height:auto; width:25px; margin-bottom:2px" 
					align="absmiddle" />Android - Click 3 dots icon 
				</div>
				<div class="clear"></div>
				<div style="position:absolute; bottom:15px; height:35px; width:100%;">
					<img src="/static/system/icons/close_x_white.png" class="close"
					style="height:30px; width:30px;" alt="X" />
				</div>
				<div class="clear"></div>
				<br /><br />
			</div><!-- DISPLAY TABLE -->
			</div>
		</div><!-- OVERLAY -->
	</div><!-- DIALOG -->
	<div id="mask"></div>
</div><!-- BOXES -->
<!-- ######################################################## -->
<!-- ###################   PWA MASK ENDS  ################### -->
<!-- ######################################################## -->
                                                   
    <header id="header" style="background:none !important;">
		<div class="wrap-top-menu wrap-top-menu-desktop" style="text-align:center;">		
			<a id="btn-toogle-menu" class="btn-toogle-menu" href="#alternate-menu"
			style="float:left; background:none !important;">
				<img src="/static/system/menu_icon.png" alt="Menu" style="height:22px;" />
				<!--<span class="line-bar"></span>
				<span class="line-bar lb2" style="width:15px;"></span>
				<span class="line-bar lb2" style="width:10px;"></span>-->
			</a>	
			<div class="newhdrlogo" style="background:none; overflow:hidden;
				position:absolute; right:0; left:0; bottom:11px; margin:0 auto;
			   	text-align:center; max-width:179px; height:32px;">
			   	<a href="/"><img src="/<?= $website_options['website_logo'] ?>"
				onerror="this.src='/static/system/base_pages_logo.png'"
				style="height:auto; width:179px; background:none" alt="Home" /></a>
			</div>		
			<?php if ($_SESSION['loggedin']) { ?>
            <?php } else { ?>   
			<?php } ?>		
			<!-- ####################################################################### -->
			<!-- ############################# RIGHT MENU ############################## -->
			<!-- ####################################################################### -->
			<div class="loginlinks" style="float:right; width:auto; background:none;
				height:38px; line-height:38px; margin-right:15px; color:#ccc;">
				<?php if ($_SESSION['loggedin']) { ?>
					<a href="/profile/<?= $_SESSION['user']['user_slug'] ?>" class="thumb-leftxxx">
					<?php if (isset($_SESSION['loggedin']) && $_SESSION['user_id']) {
					    echo "<img src='/static/images/users/" . $_SESSION['user']['image'] . "' 
						onerror=\"this.src='/static/system/default_avatar.png'\"
						alt='" . $user['name'] . "' class='hthumb' align='absmiddle' 
						style='margin-top:2px' />";
					}?></a>&nbsp;				
					Welcome, <a href="/profile/edit" 
					style="color:#14E06E;"><?= $_SESSION['user']['name'] ?></a>
					<span style="color:#999;">|</span> <a href="/auth/logout" 
					class="logoutbtn" style="font-weight:500;"><i class="fa fa-power-off" 
					aria-hidden="true"></i> Logout</a>
                <?php } else { ?>
                  	<!--<a href="/profile/registerBusiness" class="btn btn-gold 
                  	business-reg registerbtn">Register Business</a>-->
					<a href="#login" class="loginpop loginbtn" style="font-weight:400; 
					font-family:Montserrat,'Open Sans',Helvetica,Verdana,sans-serif;"><i 
					class="fa fa-power-off" aria-hidden="true"></i> 
					LOGIN <span style="font-family:'Times New Roman';">»</span></a> 
					<span style="color:#999;">|</span>
					<a href="#calltoaction2" class="loginpop" style="font-weight:400; 
					font-family:Montserrat,'Open Sans',Helvetica,Verdana,sans-serif;">SIGN UP!</a>  
				<?php } ?>
			</div>	
						
			<!-- #################################################################### -->
			<!-- ############################ TOP MENU BAR ########################## -->
			<!-- #################################################################### -->
					
			<nav class="top-menu" style="padding-left:0px; display:inline-block; height:38px;">
                <ul id="main-menu" class="nav nav-horizontal clearfix">
                    <li class="active"><a href="/" title="Home">Home</a></li>
                    <?php if ($_SESSION['loggedin'] && $_SESSION['user_id']) : ?>
                    <?php endif; ?>          
                    <li class="sep"></li>
					<li class="activexxx" style="display:nonex;">
						<a href="/about" title="About">About</a>
                    </li>    
					<li class="sep"></li>
					<li class="activexxx" style="display:nonex;">
						<a href="/contact" title="Contact">
						<i class="fa fa-envelop" aria-hidden="true"></i> CONTACT</a>
					</li> 
					<li class="activexxx" style="display:none;">
						<a href="/project/add" title="Add New">
						<img src="/static/client/animated_plus.gif"
						style="height:15px; margin-top:-3px" alt="+" /> NΞW</a>
					</li>  
					<li class="sep"></li> 
                    <li class="activexxx"><a href="/faqs" title="FAQ">FAQ</a></li>
                     
                    <?php if (isset($_SESSION['loggedin']) && $_SESSION['user_id']) : ?> 
                   		
                    <?php else : ?> 
                   		                     
                    <?php endif; ?>                       		                                     
                    
                    <?php if (isset($_SESSION['user']['is_admin']) && $_SESSION['user']['is_admin'] ==1) {
                    ?>
                    <li class="sep"></li>
                    <li>
                    	<a href="/admin/dash" class="nav-title" style="color:#ff0000;">A</a>  
                    </li>
                    <?php } ?>
                </ul>
						
				<!-- ############################################################# -->
				<!-- ######################### SIDE MENU ######################### -->
				<!-- ############################################################# -->

                <div id="left-menu" style="display:none; overflow:hidden !important;"> 
                    <ul class="alternate-menu mlogo">
                        <center><a href="/"><img src="/<?= $website_options['mobile_logo'] ?>" 	
						onerror="this.src='/static/system/crest_base_pages.png'"
                        alt="<?= $website_options['short_title'] ?>" class="Home" /></a>
                        </center>
                    </ul>
                    <ul class="alternate-menu">
                        <?php if (isset($_SESSION['loggedin']) && $_SESSION['user_id']) : ?>
                        	<!-- ################## LOGGED IN / CUSTOMER ################# -->
                            <li><a href="/profile/edit"><img 
                            src="/static/images/users/agency/<?= $_SESSION['user']['image'] ?>"
                            class="pthumb" 
							onerror="this.src='/static/system/default_avatar.png'"
                            align="absmiddle" />&nbsp;<?= $_SESSION['user']['name'] ?></a>
                            </li>
							<li>
								<a href="/?not_mobile" class="home">
									<i
                            	class="fa fa-home"></i> Home</a>
							</li>
                        	<li>
                            	<a href="/profile/edit" class="gears"><i 
									class="fa fa-gears"></i> Edit Account</a>
                            </li>
							<li>
								<a href="/category/all" class="th-list">
									<i class="fa fa-th-list"></i> Categories</a>
							</li>
							<li>
								<a href="/m" class="star">
									<i class="fa fa-star"></i> MOBILΞ</a>
							</li>
							<li>
								<a href="#" class="usd">
									<i class="fa fa-usd"></i> Load Funds</a>
							</li>
							<li>
								<a href="#" class="plus-circle">
									<i class="fa fa-plus-circle"></i>Add NΞW</a>
							</li>
							<li>
								<a href="#" class="video">
									<i class="fa fa-usd"></i> CRΞATORS</a>
							</li>
							<li>
								<a href="#" class="handshake">
									<i class="fa fa-handshake"></i> WORK WITH US</a>
							</li>                                      
                       <?php else : ?> 
                            <li>
                            	<a href="/" class="home">
                            	<i class="fa fa-home"></i> Home</a>
                            </li>
							<li>
								<a href="/category/all" class="th-list">
									<i class="fa fa-th-list"></i> Categories</a>
							</li>
							<li>
								<a href="/m" class="star">
									<i class="fa fa-star"></i> MOBILΞ</a>
							</li>	
							<li>
								<a href="#" class="video">
									<i class="fa fa-usd"></i> CRΞATORS</a>
							</li>
							<li>
								<a href="#" class="handshake">
									<i class="fa fa-handshake"></i> PARTNERS</a>
							</li>	
                            <li><a href="/auth/login" class="sign-out"><i 
                            class="fa fa-sign-out"></i> Login</a></li>
                            <li><a href="/auth/join" class="user"><i 
                            class="fa fa-user"></i> Sign up</a></li>                                 
                        <?php endif; ?>
                            	
                        <li><a href="/faqs" class="question-circle"><i 
                        class="fa fa-question-circle"></i> FAQ</a></li>
                        
                    	<?php if ($_SESSION['loggedin'] && $_SESSION['user_id']) : ?>
                        	<li><a href="/auth/logout" class="power-off"><i 
                        	class="fa fa-power-off"></i> Logout</a></li>
                    	<?php endif; ?>
                                
                        <?php if (isset($_SESSION['user']['is_admin'])) { ?>
                            <hr class="custom" style="" />
                            <li><a href="/admin/dash" class="sliders" 
                            style="color:#ff0000 !important;"><i 
                            class="fa fa-sliders"></i> Admin</a></li>
                        <?php } ?>  
                            
                    	<!-- ################################################################ -->
						<!-- ####################### CUSTOM MENU ITEMS ###################### -->
						<!-- ################################################################ -->
                        
                        <?php
                        $custom = json_decode($website_options['menu_custom_items'], 1); 
                        function showSubmenu($menu) {
                            if (gettype($menu) != 'array') {
                                return;
                            }
                            foreach ($menu as $item) {
                                echo "<li><a href='{$item['url']}' class='caret-right'><i class='fa fa-caret-right'></i> {$item['title']}</a></li>";
                                if (isset($item['children'])) {
                                    echo '<ul class="submenu">';
                                    showSubmenu($item['children']);
                                    echo '</ul>';
                                }
                            }
                        }
                        showSubmenu($custom);
                        ?>
                    </ul>
                    
                    <div class="sidr sliv">
						<a href="sms:?&amp;body=Hi. Checkout BASE Pages at https://basepages.com!" 
						title="Click here to share by text" class="texticon"></a>
						<a href="https://www.facebook.com/basepages" title="Like Us on Facebook" 
                        class="facebook"><i class="fa fa-facebook"></i></a>
                        <a href="https://instagram.com/basepages" title="Follow Us on Instagram" 
                        class="instagram"><i class="fa fa-instagram"></i></a>
                        <!--<a href="<?= $website_options['linkedin_url'] ?>" 
                        title="Connect with us on LinkedIn" class="linkedin"><i 
                        class="fa fa-linkedin"></i></a>-->
                        <a href="mailto:<?= $website_options['contact_email'] ?>" 
                        title="Click here to email us" class="emailicon"><i 
                        class="fa fa-envelope-o"></i></a>
                        <a href="javascript:top.frames.location.reload();" class="refresh"><i 
                        class="fa fa-refresh"></i></a>
                    </div>
                    <ul class="alternate-menu copyr">
						<?= $website_options['footer_copyright'] ?><br />
                        Made in Chicago with <a href="/about" class="heart-o"><i 
                        class="fa fa-heart-o"></i></a>
                    </ul>	
                </div>
            </nav>
            <div class="clear"></div>
        </div>
        <!-- end: .wrap-top-menu -->
    </header>
    <!--end: #header -->
    <div class="spacer"></div>