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

<script type="text/javascript" src="/static/js/jQuery/js/jquery.lightbox.js" defer> </script>
<link rel="stylesheet" type="text/css" href="/static/js/jQuery/css/jquery.lightbox.css" media="screen" defer />
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=AIzaSyCSsor1E1STB_jcqIGYc2ljfGBya5z5ULA"> </script>

<style type="text/css">
	body {
		color: #333;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		background: none !important;
	}
	#wrapper {
		background: none !important;
	}
	span, a, a:active, a:hover {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	#header {
		border-bottom: 0px solid #d4d4d4 !important;
	}
	#header .wrap-top-menu {
		z-index: 99999999999999 !important;
	}
	div.spacer {
	}
	a, a:active, a:link, a:visited {
		color: #03b5ff;
		text-shadow: none;
	} /* was 0072C4 */
	a.loginpop.introlinks, a.loginpop.introlinks:active, a.loginpop.introlinks:link, a.loginpop.introlinks:visited {
		color: #fff;
	text-shadow: 0px -1px 0px rgba(0,0,0,.3);
		/* color:#294E68; text-shadow:0px 1px 0px rgba(255,255,255,.3); */ /* was 0072C4; */
	}
	a.loginpop.introlinks:hover {
		color: #fff;
	text-shadow: 0px -1px 0px rgba(0,0,0,.3);
	}
	a:hover {
		color: #000;
	}
	a[href^=tel] {
		color: #0194fb;
		text-shadow: 0px -1px 0px rgba(0,0,0,.3);
	}
	a.sqlinks {
		margin-top: 5px;
	margin-bottom: 10px;
	color: #ccc;
	font-weight: 500;
	text-transform: uppercase;
	text-shadow: 0px -1px 1px rgba(0,0,0,.3);
	display: inline-block;
		background: rgba(255,255,255,.1);
	border-radius: 50px ;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	padding: 5px 15px;
	}
	a.sqlinks:hover {
		color: #fff;
	}
	.darklinks a, .topbanner_content a {
		color: #03b5ff;
	}
	.darklinks a:hover, .topbanner_content a:hover {
		color: #fff;
	}
	/*	.btn-o, .btn-o a, .btn-o a:link, .btn-o a:active, .btn-o a:visited, .btn-oo a {
	border:3px solid #29baff;
	background-color: #8b248d;
	background-image: linear-gradient(45deg, #8b248d, #099bf2);
	text-shadow:-1px -1px -1px rgba(0,0,0,.5);
	margin:10px 15px;
	padding:15px 20px;
	width:150px;
	height:20px;
	line-height:20px;
	display:inline-block;
	font-family: 'Open Sans', Montserrat,Arial,sans-serif;
	font-weight:300;
	font-size:15px;
	color:#fff;
	-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
	box-shadow: 0 3px 10px rgb(0 0 0 / 30%);
	}

	.btn-o:active, .btn-o:hover, .btn-oo a:hover, .btn-oo a:active {
	border:3px solid #fff;
	background-color: #099bf2;
	background-image: linear-gradient(45deg, #099bf2, #8b248d); text-shadow:-1px -1px -1px rgba(0,0,0,.5);
	}	*/
	.browsebutton a {
		background-color: #8b248d;
		background-image: linear-gradient(45deg, #8b248d, #099bf2);
		box-shadow: 0 3px 10px rgb(0 0 0 / 30%);
		color: #fff;
		border: 3px solid #eee;
		padding: 7px 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		text-shadow: 1px 1px 1px rgba(0,0,0,.2);
		border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	}
	.browsebutton a:hover {
		border: 3px solid #fff;
		background-color: #099bf2;
		background-image: linear-gradient(45deg, #099bf2, #8b248d);
	text-shadow: -1px -1px -1px rgba(0,0,0,.5);
		color: #fff;
		text-shadow: 0px 0px 0px #fff;
	}
	a.browse {
		color: #bbb;
	}
	a.browse:hover {
		color: #00D315;
	}
	.fancybox-close {
		top: -10px;
		right: -12px;
	}
	div.fancybox-skin {
		top: 0px;
	}
	.fancybox-skin {
		padding: 7px !important;
	background: rgba(0,0,0,.4);
	}
	.fancybox-outer, .fancybox-inner {
	}
	h1.mainslogan {
		font-size: 28px;
	line-height: 34px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	}
	h2.author-byline {
		background: url('/static/images/byline.png');
		text-transform: uppercase;
		font-family: 'Open Sans',Futura, sans-serif;
		font-weight: 600;
		font-size: 0.8rem;
		letter-spacing: 2px;
		margin: 0 0 3rem 0;
		font-size: 15px;
	}
	span.author-byline-inside {
		padding: 3px 20px 3px 0;
		background: white;
	}

	/* ######################## */
	/* ### SQUARE BRANDING ### */
	/* ######################## */

	.logoslogan {
		font-size: 16px;
	}
	.subslogan {
		font-size: 19px;
	line-height: 24px;
	}
	div#squarelogo.content.grid_5 {
		max-width: auto !important;
	}
	div#animateddiv.content.grid_5  {
		max-width: auto !important;
	}

	/* ####################### */

	.fancybox-next span {
		right: 5px;
		position: fixed;
	}
	.fancybox-prev span {
		left: 5px;
		position: fixed;
	}
	.fancybox-nav span {
		visibility: visible;
	}
	a.fancybox-nav.fancybox-next {
		position: fixed;
		right: 0px;
		width: 25px;
	}
	a.fancybox-nav.fancybox-prev {
		position: fixed;
		left: 0px;
		width: 25px;
	}
	#igmsg a  {
		color: #1583bf;
	}
	#igmsg a:hover {
		color: #fff;
	}
	#helpmsg a  {
		font-size: 15px;
		color: #65d06f; /* color: #00D315; */
		background: #fff;
	}
	#helpmsg a:hover {
		color: #fff;
		background: #00D315;
	}
	.videoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 0px;
		height: 0;
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* ####################### */
	/* ### NEW TYPING TEXT  ### */
	/* ####################### */

	/* ####################### */
	/* ### CENTERED BYLINE ### */

	h2.author-byliner {
		background: url('/static/images/byline.png');
		text-transform: uppercase;
		font-family: 'Open Sans',Futura, sans-serif;
		font-weight: 600;
		font-size: 0.8rem;
		letter-spacing: 2px;
		margin: 0 3%;
		margin-bottom: 10px;
		font-size: 15px;
		display: block;
		text-align: center;
		width: 94%;
	}
	span.author-byline-insider {
		padding: 3px 10px 3px 10px;
		background: white;
		margin: 0 auto;
		display: inline-block;
	}
	.light a {
		border-radius: 50px ;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		background: #f7f7f7;
		padding: 7px 20px;
	}
	.rounded2 a {
		background: #ED6C00;
		color: #fff;
		border-radius: 30px ;
		-moz-border-radius: 30px;
		-webkit-border-radius: 30px;
		padding: 15px 70px;
		font-size: 16px;
		display: inline-block;
		box-shadow: 0 3px 10px rgb(0 0 0 / 30%);
	}
	.rounded2 a:hover {
		color: #fff;
		background: #f59f00;
		text-shadow: 0px 0px 0px rgba(0,0,0,.4);
	}
	.rounded a {
		background: #eee;
		border-radius: 25px ;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
		padding: 15px 20px;
		font-size: 15px;
		display: inline-block;
	}
	.rounded a:hover {
		color: #fff;
		background: #00355B;
		text-shadow: 0px 0px 0px rgba(0,0,0,.4);
	}
	#mmen {
		display: none;
	}
	#loading_image {
		display: none;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 999999999 !important;
		background: #1A87C5 url(/static/images/blue-loader.gif) no-repeat center center;
		background-size: 400px auto;
		/* rgba(255,255,255,.80) rgba(0,0,0,.85) */
	}
	.no-js #loader {
		display: none;
	}
	.js #loader {
		display: block;
	position: absolute;
	left: 100px;
	top: 0;
	}
	span.processing {
		color: #fff;
		/* GREEN color:#00D315; */
		/* text-shadow:0px 1px 0px rgba(255,255,255,.55); */
		text-shadow: 0px -1px 0px rgba(0,0,0,.3);
		text-align: center;
		font-size: 22px;
		font-family: 'Open Sans',Futura, sans-serif;
		font-weight: 500;
		position: absolute;
		width: 100%;
		top: 37%;
		display: block;
	}
	.featureslist a, .featureslist a:active, .featureslist a:visited, .featureslist a:hover {
		font-weight: bold;
	}
	h1 {
		text-shadow: 0px 1px 0px rgba(255,255,255,.6);
		color: #5c666b;
		padding: 10px 0;
		font-weight: 500;
		font-size: 42px;
		line-height: 48px;
	}
	h1, h2, h3, h4, h5, h1 span, h2 span, h3 span, h4 span, h5 span {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	h1, h2 {
		text-align: center;
	}
	h2 {
		line-height: 28px;
	}
	h1.mobileh1 {
		margin-top: 15px;
	font-weight: 100;
	}
	h3 {
		font-family: Montserrat,Raleway,'Open Sans',Helvetica,Verdana,sans-serif;
		font-weight: 600;
		font-size: 17px;
		line-height: 27px;
		margin-bottom: 5px;
	}
	h4 {
		font-size: 28px;
	line-height: 37px;
	margin-bottom: 11px;
	}
	span.opening {
		font-size: 26px;
	font-weight: 300;
	line-height: 34px;
	}
	/* padding:15px 30px 10px; margin-bottom:7px; margin-top:20px; font-family:'Open Sans',Futura,'Arial Black',sans-serif; font-weight:300; font-size:20px; color:#fff; text-shadow:0px -1px 1px rgba(0,0,0,.3); */
	.btn-o , .btn-oo a {
		border: 1px solid #fff;
	padding: 15px 0;
	width: 94%;
	margin: 0 3%;
	display: inline-block;
		font-family: 'Open Sans', Montserrat,Arial,sans-serif;
	background: #42B54C;
	font-size: 18px;
	text-align: center;
		color: #fff;
	text-shadow: 0px -1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	}
	.btn-o:active, .btn-o:hover, .btn-oo a:hover, .btn-oo a:active {
		border: 1px solid #fff;
	background: #00D315;
	}

	.loginborders {
		border: 1px solid rgba(255,255,255,.3);
	}
	.lightblue a {
		color: #0072C4;
	text-shadow: 0px -1px 1px rgba(0,0,0,.4);
	}
	.lightblue a:hover {
		color: #eee;
	}
	span.tip {
		display: none;
	}
	button {
		height: 42px;
		padding: 1px 12px;
		border: 0px;
		color: #fff;
		background: #00AF14;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius: 4px ;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	}
	button:hover {
		background: #00355B;
	}
	#footer {
		padding-top: 0px;
	}
	.main-footer {
		display: none;
	}
	hr {
		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%;
	}
	.vr {
		padding: 30px;
		width: 250px;
		float: left;
		border: 1.5px solid;
		border-top: 0;
		border-bottom: 0;
		border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(226, 226, 226, 1) 48%, rgba(255, 255, 255, 0) 100%);
		border-image-slice: 1;
	}
	.rednote {
		margin-top: 15px;
	}

	.squareoverlay {
		background: rgba(0,0,0,.85);
	}

	.featurestext {
		font-weight: 500;
		font-size: 14px;
		line-height: 19px;
		color: #aaa;
	}

	/* ##################################### */
	/* ############### SLIDER ############## */

	#slider {
		width: 268px;
		height: 477px;
		position: relative;
		overflow: hidden;
		margin: 85px 0 0 2px;
		background: red;
	}
	#slider ul {
		width: 268px;
		height: 477px;
		position: relative;
		margin: 0;
		background: blue;
		padding: 0;
		list-style: none;
	}
	#slider ul li {
		width: 268px;
		height: 477px;
		position: relative;
		display: block;
		float: left;
		margin: 0;
		padding: 0;
	}
	a.control_prev, a.control_next {
		position: absolute;
		top: 35%;
		z-index: 999;
		display: block;
		padding: 3% 3%;
		width: auto;
		height: auto;
		background: #2a2a2a;
		color: #fff;
		text-decoration: none;
		font-weight: 600;
		font-size: 18px;
		opacity: 0.3;
		cursor: pointer;
		font-family: 'Times New Roman',Arial,sans-serif;
	}

	a.control_prev:hover, a.control_next:hover {
		opacity: 1;
		transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
	}

	a.control_prev {
		border-radius: 0 4px 4px 0;
	}

	a.control_next {
		right: 0;
		border-radius: 4px 0 0 4px;
	}

	.bottomicons, .bottomtray {
		display: none;
	}

	/* ############### SLIDER ENDS ############## */
	/* ########################################## */


	/* ########################################## */
	/* ############# BOUNCING ARROW ############# */

	.downArrow{
		position: relative;
		margin: 0 auto;
		text-align: center;
		width: 70px;
		height: 70px;
	}

	.bounce {
		-moz-animation: bounce 3s infinite;
		-webkit-animation: bounce 3s infinite;
		animation: bounce 3s infinite;
	}

	@-moz-keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			-moz-transform: translateY(0);
			transform: translateY(0);
		}
		40% {
			-moz-transform: translateY(-30px);
			transform: translateY(-30px);
		}
		60% {
			-moz-transform: translateY(-15px);
			transform: translateY(-15px);
		}
	}
	@-webkit-keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}
		40% {
			-webkit-transform: translateY(-30px);
			transform: translateY(-30px);
		}
		60% {
			-webkit-transform: translateY(-15px);
			transform: translateY(-15px);
		}
	}
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			-moz-transform: translateY(0);
			-ms-transform: translateY(0);
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}
		40% {
			-moz-transform: translateY(-30px);
			-ms-transform: translateY(-30px);
			-webkit-transform: translateY(-30px);
			transform: translateY(-30px);
		}
		60% {
			-moz-transform: translateY(-15px);
			-ms-transform: translateY(-15px);
			-webkit-transform: translateY(-15px);
			transform: translateY(-15px);
		}
	}

	/* #############  BOUNCING ARROW  ############# */
	/* ############################################ */

	img.guarimg {
		width: 70px;
	}
	.speakwith {
		margin-bottom: 55px;
	}

	.iframevid {
		width: 560px;
	height: 315px;
	}

	/* SCROLL BARS */
	.fancybox-inner {
		-webkit-overflow-scrolling: touch !important;
		background: #fff;
	}

	.col1icon {
		margin-right: 0px;
	margin-left: 10px;
	}
	.leftcol1, .rightcol3 {
		padding-top: 55px;
	}

	button.greensubmit{
		display: block;
	width: 100%;
	}

	.squishtext {
		padding: 0 200px;
	}

	.productdiv {
		margin-bottom: 25px;
	}
	.productdiv img:hover {
	}

	div.producttitle {
		position: absolute;
		margin: auto;
		top: 43%;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 48px;
		font-weight: 200;
		text-align: center;
		color: #fff;
		width: 100%;
		height: auto;
		text-shadow: 0px -1px 0px rgba(0,0,0,.4);
	font-family: Open Sans,Montserrat;
	}

	/* Shine */
	.hover14 figure {
		position: relative;
	}
	.hover14 figure::before {
		position: absolute;
		top: 0;
		left: -100%;
		z-index: 2;
		display: block;
		content: '';
		width: 50%;
		height: 100%;
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
		background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
		-webkit-transform: skewX(-25deg);
		transform: skewX(-25deg);
	}
	.hover14 figure:hover::before {
		-webkit-animation: shine .75s;
		animation: shine .75s;
	}
	@-webkit-keyframes shine {
		100% {
			left: 125%;
		}
	}
	@keyframes shine {
		100% {
			left: 125%;
		}
	}

	img.appicon {
		width: 80px;
		height: 80px;
		border: 0px solid #fff;
		margin: 5px;
	}
	img.appicon:hover {
		width: 90px;
		height: 90px;
		border: 0px solid #ddd;
		margin: 0px;
	}

	#cta {
		padding: 50px;
	}

	.appscreenshot {
		width: 24%;
		margin-right: .625%;
		height: auto;
		display: inline;
		max-width: 250px;
		float: left;
	}
	.touchicon {
		display: none;
	}

	.gridcontent {
		padding: 0 150px;
	}

	.col1text {
		color: #fff;
	text-shadow: 0px -1px 1px rgba(0,0,0,.4);
	}

	#devicecontainer {
	}

	#coolborderright {
		border-right: 1.5px solid;
		border-top: 0;
		width: 1px;
		border-bottom: 0;
		border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(226, 226, 226, 1) 70%, rgba(255, 255, 255, 0) 100%);
		border-image-slice: 1;
	}

	/* ############################################# */
	/* ################ TOP SECTION ################ */
	/* ############################################# */

	#lpcontainer {
		margin-top: -55px;
	}

	.topbanner {
		padding-top: 90px;
	min-height: 270px;
	}
	h1.topbanner_title {
		color: #fff;
		text-shadow: 1px 1px 1px rgba(0,0,0,.5);
		font-weight: 300;
		font-size: 44px;
		line-height: 49px;
		background: none;
		margin: 0px;
		padding: 0px;
		font-family: 'Open Sans', Montserrat,Arial,sans-serif;
	}

	.topbanner_subtitle {
		text-transform: uppercase;
		text-align: center;
		font-size: 16px;
		color: #00CE00;
		font-weight: 500;
		letter-spacing: 2px;
		line-height: 25px;
		background: none;
		margin-bottom: 20px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}

	h1.topbanner_title {
		color: #fff;
		text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
		font-weight: 300;
		font-size: 70px;
		line-height: 77px;
		background: none;
		margin: 0px;
		padding: 0px;
		font-family: 'Open Sans', Montserrat,Arial,sans-serif;
	}
	.topbanner_content {
		text-align: center;
		color: #fff;
		width: 90%;
		max-width: 1024px;
		margin: 0 auto;
		padding: 0 15px;
		font-family: 'Open Sans', Montserrat,Arial,sans-serif;
		font-size: 26px;
		line-height: 34px;
		font-weight: 300;
	}
	.supercharge {
		background-color: #fd8737;
		background-image: linear-gradient(45deg, #fd8737, #ef1013);
		background-size: 100%;
		-webkit-background-clip: text;
		-moz-background-clip: text;
		-webkit-text-fill-color: transparent;
		-moz-text-fill-color: transparent;
		font-weight: bold;
	}

	/**********************************************/
	/*******            VIDEO BG            *******/
	/**********************************************/

	.bg_video {
		display: table;
		height: 400px;
		vertical-align: middle;
		width: 100%;
	}
	.fullscreen-bg {
		/*background: url('static/images/bgmount2.jpg') center center / cover no-repeat;*/
		min-height: 400px;
		background: rgba(0,0,0,.4);
		background-size: cover;
		height: 400px;
		width: 100%;
		display: table-cell;
		vertical-align: middle;
		height: inherit;
	}
	p.vidpar {
		font-family: Montserrat,'Open Sans',sans-serif;
		display: block;
		margin-block-start: 0em;
		margin-block-end: 0em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding: 0 25px;
		font-size: 25px;
		line-height: 35px;
		text-align: center;
		color: #fff;
		max-width: 1100px;
		width: 85%;
		margin: 0 auto;
		text-shadow: 2px 2px 2px rgba(0,0,0,.5);
	}
	.devenhanced {
		font-size: 35px;
	}

	section {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#banner {
		position: relative;
		height: 400px;
		width: 100%;
		overflow: hidden;
	}
	#videobcg {
		position: absolute;
		top: 0;
		left: 0;
		min-width: 100%;
		min-height: 100%;
		height: auto;
		width: auto;
		z-index: -100;
	}

	#videobcg, #alternative {
		width: 100%;
		height: 100vh;
		object-fit: cover;
		position: fixed;
		left: 0px;
		top: 0px;
		/*z-index: 1;*/
	}

	.btn-rounded {
		background: none;
		height: 50px;
		width: auto;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		max-width: 200px;
		text-align: center;
		margin: 30px auto 0;
		border: 5px solid rgba(255,255,255,.2) !important;
	}

	.btn-rounded a, .btn-rounded a:active, .btn-rounded a:visited, .btn-rounded a:link {
		width: 100%;
		height: 50px;
		line-height: 50px;
		font-family: Montserrat,'Open Sans',sans-serif;
		font-size: 17px;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		background: #00BA49;
		color: #fff;
		margin: 0 !important;
		font-weight: 700;
		text-shadow: 0px -1px 0px rgba(0,0,0,.4);
		display: block;
		/*border: 2px solid rgba(0,186,73,.3) !important;*/
	}
	.btn-rounded a:hover {
		background: #22a36b;
	}

	.thirdss {
		width: 32%;
		margin: .5%;
		display: inline-block;
		background: #000;
	}
	.input_sub {
		width: 38%;
	display: inline-block;
	margin-right: 1%;
	}
	.input_subb {
		width: 20%;
	display: inline-block;
	}
	.btn-black {
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		background: none;
		border: 5px solid rgba(255,255,255,.2) !important;
	}
	.btn-black:hover {
		/*border: 5px solid rgba(255,255,255,.3) !important;*/
	}
	input#subscribe.subscribebtn {
		/*background:rgba(0,0,0,.3);*/
		background: rgba(237,108,0,.3);
		color:#fff;
		font-weight:400;
		height: 49px;
		line-height: 49px;
		font-family: Montserrat,'Open Sans',sans-serif;
		font-size: 17px;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
	}
	input#subscribe.subscribebtn:hover {
		/*background:rgba(0,0,0,.3);*/
		background: rgba(237,108,0,.5);
	}
	
	.btn-black a {
		width: 100%;
		height: 49px;
		line-height: 49px;
		font-family: Montserrat,'Open Sans',sans-serif;
		font-size: 17px;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		background: #00BA49;
		color: #fff;
		margin: 0 !important;
		font-weight: 700;
		text-shadow: 0px -1px 0px rgba(0,0,0,.4);
		display: inline-block;
	}
	.btn-black a:hover {
		background: #00e65c;
	}
	
	ul.footerlinks {
		display: block;
		list-style-type: disc;
		margin-block-start: 0em;
		margin-block-end: 0em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 17px;
	}
	
	ul.footerlinks a {
		color:#aaa;
		font-weight:400;
		font-size:17px;
	}
	
	ul.footerlinks a:hover {
		color: #fff;
	}
	
	ul.footerlinks li {
		margin-bottom:7px;	
	}
	a.socialmediaicon {
		padding: 5px 5px 5px 5px;
		margin-right: 10px;
		width: 50px;
		height: 50px;
		text-align:center;
		line-height:50px;
		display: inline-block;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		border:1px solid transparent;
		-moz-box-shadow: 0px 0px 4px #888;
		-webkit-box-shadow: 0px 0px 4px #888;
		box-shadow: 0px 0px 4px #888;
		color:#ED6C00;
/*		border:1px solid #aaa;
		height:60px;
		width:60px;
		line-height:60px;
		padding:25px;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;		*/
	}
	a.socialmediaicon:hover {
		color:#fff;
		border:1px solid #fff;
		-moz-box-shadow: 0px 0px 2px #888;
		-webkit-box-shadow: 0px 0px 2px #888;
		box-shadow: 0px 0px 2px #888;
	}
	.bigbtns {
		border:3px solid #fff;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;	
	}
	.bigbtns:hover {
		border:3px solid #3867b7;
		border-radius: 9px;
		-moz-border-radius: 9px;
		-webkit-border-radius: 9px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;	
	}
	.bigbtns a {
		margin:2px;
		background: #2F528F;
		color:#eee;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
	}
	.bigbtns a:hover {
		background: #3867b7;
		color:#fff;
	}
/*	.socialmedia a {
		color: #aaa;
		height:25px;
		width:25px;
		line-height:25px;
	}*/

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

	@media screen and (min-device-width: 1920px), screen and (max-width: 4399px) {
		.spacer {
			padding-top: 39px;
		}
		.topbanner {
			padding-top: 90px;
	min-height: 290px;
	padding-bottom: 10px;
		}
		.topsection {
			background-size: cover;
		}
		#animateddiv {
			float: left;
			border-left: 1.5px solid;
			border-top: 0;
			border-bottom: 0;
			border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(226, 226, 226, 1) 70%, rgba(255, 255, 255, 0) 100%);
			border-image-slice: 1;
		}
	}

	/******************************************************************************/
	/***************        LARGE DESKTOP DISPLAY SCREENS         *****************/
	/******************************************************************************/

	@media screen and (min-device-width: 1367px), screen and (max-width: 1919px) {
		.spacer {
			padding-top: 39px;
		}
		.topbanner {
			padding-top: 90px;
	min-height: 290px;
	padding-bottom: 10px;
		}
		.topsection {
			background-size: cover;
		}
		#animateddiv {
			float: left;
			border-left: 1.5px solid;
			border-top: 0;
			border-bottom: 0;
			border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(226, 226, 226, 1) 70%, rgba(255, 255, 255, 0) 100%);
			border-image-slice: 1;
		}
	}

	/******************************************************************************/
	/***************      SMALLER THAN FULL SCREEN MACBOOK        *****************/
	/******************************************************************************/

	@media screen and (min-device-width: 1025px), screen and (max-width: 1366px) {
		.spacer {
			padding-top: 39px;
		}
		.topbanner {
			padding-top: 70px;
	min-height: 200px;
	padding-bottom: 25px;
		}
		.topsection {
			background-size: cover;
		}
		#animateddiv {
			float: left;
			border-left: 1.5px solid;
			border-top: 0;
			border-bottom: 0;
			border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(226, 226, 226, 1) 70%, rgba(255, 255, 255, 0) 100%);
			border-image-slice: 1;
		}
	}

	/******************************************************************************/
	/***************            iPads & Small Screens             *****************/
	/******************************************************************************/

	@media (max-width: 1024px) {
		.spacer {
			padding-top: 46px !important;
		}
		#animateddiv {
			border-left: 1px solid #eee;
		}
		.topbanner {
			padding-top: 60px;
	min-height: 210px;
		}
		.topbanner_content {
			font-size: 27px;
	line-height: 33px;
		}
	}
	/* ########################## */
	@media (max-width: 1023px) {
		.spacer {
			padding-top: 37px !important;
		}
		.layout-2cols {
			width: 100%;
		}
		.grid_4, .grid_3, .blockit {
			width: 100%;
	display: block;
		}
		#rightsidecol {
			background: #ccc url(/static/images/bgmount.jpg) no-repeat top center;
	padding-bottom: 50px;
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
		}
		.leftcol1, .rightcol3 {
			width: 312px;
	margin: 0 auto;
		}
		.leftcol1 {
			padding: 0;
	margin-bottom: 25px;
		}
		div.rounded {
			padding-bottom: 20px;
		}
		#animateddiv {
			border-left: 1px solid #eee;
		}
	}
	/* ########################## */
	/* 768px is iPad Portrait */
	@media (max-width: 768px) {
		.spacer {
			padding-top: 47px !important;
		}
		.layout-2cols {
			width: 100%;
		}
		.blockit {
			width: 47%;
	float: left;
		}
		#rightsidecol {
			background: #ccc url(/static/images/bgmount.jpg) no-repeat top center;
			padding-bottom: 50px;
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
		}
		h1 {
			font-size: 26px;
	line-height: 34px;
		}
		.featurestext {
			font-weight: 400;
			color: #aaa;
			font-size: 13px;
			line-height: 17px;
		}
		.leftcol1, .rightcol3 {
			width: 312px;
	margin: 0 auto;
		}
		.leftcol1 {
			padding: 0;
	margin-bottom: 25px;
		}
		div.rounded {
			padding-bottom: 20px;
		}

		.squareoverlay {
			background: rgba(0,0,0,.75);
		}
		.logoslogan {
			font-size: 15px;
		}
		div.text-js.slogan {
			font-size: 23px !important;
	line-height: 28px !important;
		}
		.subslogan {
			font-size: 17px;
	line-height: 22px;
		}
		#squarelogo {
			max-width: 100% !important;
		}
		#animateddiv {
			border-left: 0px solid #eee;
	max-width: 100% !important;
	width: 100% !important;
	background: none !important;
		}

	}

	/* ########################## */
	@media (max-width: 585px) {
		.blockit {
			display: block;
			width: 100%;
			overflow: hidden;
		}
		.input_sub {
			margin-left: 5%;
			margin-right: 5%;
			margin-bottom: 15px;
			width: 90%;
		}
		.input_subb {
			margin-left: 5%;
			margin-right: 5%;
			margin-bottom: 15px;
			width: 90%;
		}
		.topbanner {
			padding-top: 50px;
		}
		.topbanner_content {
			font-size: 24px;
	line-height: 31px;
		}
		.topbanner_subtitle {
			padding: 10px 5px 10px;
	line-height: 21px;
		}

		.bg_video {
			height: 620px;
		}
		p.vidpar	{
			font-size: 21px;
	line-height: 30px;
		}
		.devenhanced {
			font-size: 27px;
		}
	}

	/* ########################## */
	@media (max-width: 480px) {
		h1 {
			font-size: 26px;
	line-height: 34px;
		}
		.spacer {
			padding-top: 53px;
		}
		.topbanner {
			padding-top: 50px;
	padding-bottom: 0px;
		}
		.topbanner_content {
			font-size: 24px;
	line-height: 31px;
		}
		.topbanner_subtitle {
			padding: 10px 5px 10px;
	line-height: 21px;
		}
		.intro2cols {
			padding-bottom: 0px;
		}
		.touchicon {
			display: block;
		}
		.appsolutions a {
			display: inline-block;
	width: 50%;
	float: left;
	padding: 10px 0px;
	background: #eee;
	color: #222;
			font-size: 12px;
	font-weight: 300;
	text-shadow: 0px 1px 0px rgba(255,255,255,.5);
	margin-bottom: 6px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
	margin-left: 0px;
	margin-right: 0px;
		}
		.appsolutions a:nth-child(odd) {
			border-right: 5px solid #fff;
		}
		.browsebutton {
			margin-top: 5px;
		}
		#animateddiv {
			border-left: 0px;
		}
		.hidebullet {
			display: none;
		}
		.squareoverlay {
			background: rgba(0,0,0,.75);
		}
	}
</style>

<!--RED  INSTAGRAM BANNER  -->
<div id="igmsg" style="display:none; background:#dd0000; text-align:center; padding:10px 0; color:#fff; margin-top:-1px">
	<a href="https://getpreorder.com/iglive" style="font-weight:700; text-shadow:0px 1px 1px rgba(0,0,0,.5);
	background:rgba(0,0,0,.3); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; padding:5px 10px">Click here</a>
	to view our Instagram LiveStream Info page <!--(happening right now)--> for our Instagram
	page
	<a href="https://www.instagram.com/thinapp/" style="font-weight:700; text-shadow:0px 1px 1px rgba(0,0,0,.5);">@thinapp</a>
</div>

<div id="helpmsg"  style="display:none; background:#dd0000; text-align:center; padding:15px 15px; color:#fff; margin-top:-1px; letter-spacing: normal; font-size:16px; line-height: 27px; font-weight:600; font-smooth: always;">
	<!--<a href="https://getpreorder.com/iglive" style="font-weight:700; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; padding:3px 10px">Click here</a> -->
	08/10/2022 - Pre-Launch: The first 1400 Members will become SSU Founding Members
	&amp; split 75% of the profits.

	<a href="https://squaresellersunited.com/founding-members" title="Learn more about Founding Members"
	style="background:none; font-weight:800; text-shadow:1px 2px 1px rgba(0,0,0,.1);">Learn more &rsaquo;</a> &nbsp;

	<!--Join today for a $49 one-time payment &amp; get a Lifetime Premium Membership
	(for you &amp; a friend) + a
	$100 VISA Giftcard.--> <!-- with a built-in SSU Dashboard that helps instantly install SSU-created Square features. -->

	<!--<a href="/pricing" style="font-weight:700; text-shadow:0px 0px 0px rgba(255,255,255,0);
	border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px;
	padding:3px 10px 3px 15px;">Join now &rsaquo;</a> -->

	<!--We&rsquo;re happy to announce the BETA launch of <a href="/features" title="View the Square Wish List" style="font-weight:600;">Square Wish List</a>
	&amp; <a href="https://squaresellersunited.com" title="Visit Square Sellers United" style="font-weight:600;">Square Sellers United</a> - communities
	we&rsquo;ve created to empower businesses who use Square.-->

</div>

<!-- TOP PAGE CONTAINER BEGINS -->
<div id="lpcontainer" class="topsection" style="background:#fff; background-size:initial; overflow:hidden;">
	<div id="helpmsg"  style="background:#eee; text-align:center; padding:15px 15px; color:#000; text-shadow:0px 1px 0px #fff; margin-top:-1px; font-size:17px; line-height: 27px; display:none;">
		...
	</div>

<div class="topbanner" style="background:#000 url(static/client/coding.jpg) no-repeat; 
background-size:cover; display:none;">
		<!--<div class="floatingnext" style="display:none;">
		<a href="/ip" style="color:#fff;">View IP &raquo;</a></div> -->
		<center><img src="/static/client/crowd_kode_white_horizontal.png"
			alt="Crowd Kode" style="width:80%; max-width:400px; margin-top:6px"></center>

		<!--<h1 class="topbanner_title" style="">
		<span style="font-weight:800">VIP</span> PROGRAM
		</h1>-->

		<div class="topbanner_content" style="margin-top:10px;">

			<!--Join thousands, save thousands + make thousands.-->
			Get instant access to free, cutting-edge tech, templates, frameworks, APIs &amp; more

			<h1 style="display:none; margin:0; background:none; color:#fff;
			text-shadow:0px -1px 0px rgba(0,0,0,.4);">Our members
				<span class="txt-rotate" data-period="250" style="color:#00cb00;"
				data-rotate='[ "tell us what tech to make.", "help spread the word.", "get paid 75% of everything.", "ARE the Community." ]'></span>
			</h1>

			<br />

			<hr style="border-top:2px solid #fff; width:70px; margin:0 auto; margin-top:20px;" />

			<div style="font-size:19px; line-height:29px; margin-top:20px; margin-bottom:15px;">

				Join our member-owned community of
				<a href="#ourapproach" class="loginpop neongreen"
				title="Made for Entrepreneurs - by Entrepreneurs">entrepreneurs</a> who
				vote on which tech we create + receive monthly profit-sharing payouts.

				<a href="/about" style="" title="Learn more" class="neongreen">Learn more
					<i class="fa fa-angle-right" aria-hidden="true"></i></a>

				<!--we create (or get created) and then get unlimited access to that new tech + a percentage
				of the profits when we re-sell it to others who might also need it.-->

			</div>

			<!--<span style="font-family:Enhanced; font-size:35px; color:#00d803; font-weight:600">-->
			<div class="topbanner_subtitle" style="margin-top:3px; font-size:15px; letter-spacing: 1px">

				<div id="coolborderrightxxx" style="max-width:700px; margin:0 auto; font-size:17px;">
					<div style="padding:0 10px; color:#fff; font-weight:600;">
						<span style="font-size:20px; font-family:Enhanced;">$</span><span class="animatednumber" data-number="79999"
						style="color:#00d803; font-weight:600; font-size:20px; font-family:Enhanced;">5000006</span>+
						<span style="color:#fff; font-size:15px;">in ready-made tech, incl. .zip demos + install tutorials</span>
					</div>
					<!--<a href="/founding-members" title="Learn more">Become an Owner &raquo;</a>-->
				</div>
				<!--CrowdKode is 100% Community Owned.-->

				<!--PLUS, OUR COMMUNITY GETS TO VOTE ON WHICH TECH WE IMPROVE &amp; CREATE EACH MONTH-->
			</div>
			<!--Want to get a monthly share of profits + own part of a growing Tech company with a $5M+
			<a href="/ip" style="color:#00CE00;" title="Learn more">IP Portfolio</a>?
			We&rsquo;re giving 75% of the company&rsquo;s equity &amp; revenue to 5,000 new
			&ldquo;fractional&rdquo; partners.-->
		</div>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>
<div class="clear"></div>
<!-- TOP PAGE CONTAINER ENDS -->

<!--- THIS DIV GOES ALL THE WAY TO THE BOTTOM -->
<div style="background:none; width:100%; padding-top:0px; padding-bottom:0px; margin-top:0px;">

	<!-- SOLUTIONS -->
	<div style="background:#fff">
		<div style="font-size:20px; line-height: 32px; text-align: center; padding:20px 20px 0">
			<br /><br />
			<center><img src="/static/client/jolly_logo_master.png"
			alt="Jolly Dispatch" style="width:80%; max-width:400px; margin-top:6px"></center>
			<!--As a <a href="/auth/register" title="Join free now">free member</a> you can have any of these solutions below
			<span style="font-weight:700;">free</span>
			- and as a <a href="/pricing" title="Choose a pay-as-you-go now Plan">paid member</a> you can have
			<i>all</i> of these solutions free.-->
		</div>
		
		<div style="font-size:20px; line-height: 32px; text-align: center; color:#2F528F;
		font-family:Montserrat,Raleway, Helvetica, Verdana, sans-serif;">
			Simple, safe and reliable delivery.
		</div>

		<!-- ################################################################## -->
		<!-- ####################        ################### -->
		<!-- ################################################################## -->
		
		<div class="clear"></div>
		<br /><br />
		
		<div style="max-width:1200; width:80%; margin:0 auto; font-size:17px; font-weight:300;">

			<div class="grid_4 bigbtns" style="text-align:center; color:#fff; padding:0 0; 
			margin-bottom:15px">
				<a href="/shippers" style="display:block; padding:25px 0;"
					title="Learn more about how Jolly works fors Vehicle Shippers">I need to ship a vehicle(s)</a>
			</div>
			<div class="grid_4 bigbtns" style="text-align:center; color:#fff; padding:0 0;
				margin-bottom:15px">
				<a href="/brokers" style="display:block; padding:25px 0;" 
				title="Learn more about how Jolly works fors Brokers">I'm an auto transportation broker</a>
			</div>
			<div class="grid_4 bigbtns" style="text-align:center; color:#fff; padding:0 0;
				margin-bottom:15px">
				<a href="/carriers" style="display:block; padding:25px 0;"
					title="Learn more about how Jolly works fors Carriers">I'm an auto carrier</a>
			</div>
		</div>

		<div class="clear"></div>

		<!--<div class="browsebutton" style="text-align:center; margin-top:10px">
			<a href="/solutions" title="Browse All Solutions"
			style="font-size:15px; letter-spacing: 2px; text-transform: uppercase;">Browse All Solutions &rsaquo;</a>
		</div>
		<br />-->

		<!--<div style="width:100px; margin:0 auto; background:#ddd; height:3px">
		&nbsp;
		</div>-->
		<!--<div class="clear"></div>

		<br />

		<h3 style="font-weight:300; font-size:28px; line-height:36px; text-align:center; margin-bottom:7px; margin-top:15px">
			How Crowd Kode Works in <span style="color:#00cb00;">41</span> seconds
		</h3>
		<br />-->


		<div class="downArrow bounce">
			<img width="40" height="40" alt="" style="margin:0 auto;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yODUsMTEuMjg0TDE2LDE5LjU3MWwtOC4yODUtOC4yODhjLTAuMzk1LTAuMzk1LTEuMDM0LTAuMzk1LTEuNDI5LDAgIGMtMC4zOTQsMC4zOTUtMC4zOTQsMS4wMzUsMCwxLjQzbDguOTk5LDkuMDAybDAsMGwwLDBjMC4zOTQsMC4zOTUsMS4wMzQsMC4zOTUsMS40MjgsMGw4Ljk5OS05LjAwMiAgYzAuMzk0LTAuMzk1LDAuMzk0LTEuMDM2LDAtMS40MzFDMjUuMzE5LDEwLjg4OSwyNC42NzksMTAuODg5LDI0LjI4NSwxMS4yODR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iRXhwYW5kX01vcmUiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=" />
		</div>
				
	</div>


	<!--- THIS DIV GOES ALL THE WAY TO THE BOTTOM -->
	<div style="background:#fff; width:100%; padding-top:0px; padding-bottom:40px; display:none;">

		<div style="max-width:950px; max-height:350px; margin:0 auto; font-size:15px; color:#555; font-weight:300;
		text-align:center; overflow:hidden; padding:0 15px;">
			<!--  SUB TEXT WAS HERE -->

			<!-- ######################################################################## -->
			<!-- ########################       VIDEO PROMO      ######################## -->
			<!-- ######################################################################## -->

			<!-- CK VIDEO PROMO https://www.youtube.com/embed/p6jEgEKsoUE-->
			<center>
				<div class="videoWrapper" style="text-align:center; max-width:560px; max-height:315px; overflow:hidden;">
					<iframe width="560" height="315" src="https://www.youtube.com/embed/p6jEgEKsoUE"
		title="Crowd Kode Video Promo" frameborder="0"
	            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
				style="border:1px solid #ddd; padding:10px; -webkit-box-sizing: border-box;
				-moz-box-sizing: border-box; max-height:315px;
				box-sizing: border-box;" class="videoiframe"
	            allowfullscreen></iframe>
				</div>
			</center>

		</div>
	</div>


	<!-- /* ########################################################################## */ -->
	<!-- /*                             BG VIDEO SECTION                               */ -->
	<!-- /* ########################################################################## */ -->

	<div class="bg_video" style="">

		<div class="fullscreen-bg" style="display:nonex;">
			<video preload="auto" playsinline autoplay muted volume="0" loop poster="static/images/bgmount2.jpg"
		id="videobcg" class="fullscreen-bg__video">

				<source src="static/video/truck1.mp4" type="video/mp4">
				<source src="static/video/truck1.mp4" type="video/webm">Sorry, your browser does not support HTML5 video.
			</video>
			<p class="vidpar">
				<br />
				<!--<img src="/static/client/devshares_logo_white_med.png" alt="DevShares"
				style="max-width:400px; width:85%; margin-bottom:20px;" /><br />-->
				<span style="font-family:Montserrat,Raleway, Helvetica, Verdana, sans-serif; 
				font-weight:600; font-size:36px; line-height:46px;">
					GET NOTIFIED
				</span>
				<br /><br />
				
				Get notified whenever a new shipping request comes in...
				<br />
				<!--AppWrapr was designed specifically to offer all the best mobile app-based features
				that websites don&rsquo;t have - like real-time
				messaging and chat, real-time GPS and geo-fencing, Rich Push Notifications, incredible fast
				loading speed, extremely easy accessibility and more.-->
				<br />

				<div class="" style="text-align:center; height:auto; font-size:17px; padding:0px;
			margin-bottom:0px; line-height:25px; text-align:left;">
					<br />
					<form id="subscribeform" class="" target="_self" action="/auth/subscribe" method="post"
					style="max-width:900px; with:90%; margin:0 auto; text-align:center;">

						<div class="input_sub blockit" style="">
							<input id="subemail" name="subemail" placeholder="Your Email*" style="width:100%;
							background: none !important; color:#eee; font-size:17px; border:3px solid rgba(255,255,255,.3);
							padding:15px;
							border-radius: 50px; -moz-border-radius:50px; -webkit-border-radius:50px;
							-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
						</div>
						<div class="input_sub blockit" style="">
							<input id="phone" name="phone" placeholder="Ph: ###-###-####" style="width:100%;
							background: none !important; color:#eee; font-size:17px; border:3px solid rgba(255,255,255,.3);
							padding:15px;
							border-radius: 50px; -moz-border-radius:50px; -webkit-border-radius:50px;
							-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
						</div>
						<div class="input_subb blockit" style="">
							<!--						<div class="btn-black" style="">
							<a href="#rsvp" style="">RSVP
							<i class="fa fa-angle-right" aria-hidden="true"></i></a>
							</div>-->

							<input id="subscribe" type="submit" value="Notify Me &rtrif;" class="subscribebtn"
							style="margin-top:0px !important; width:200px; display:inline; height:60px;
							border:3px solid rgba(255,255,255,.3);">

							<input type="hidden" id="interestedin" name="interestedin" placeholder="vip" value="vip">
						</div>

						<!--<input id="subscribe" type="submit" value="RSVP &rtrif;" class="btn-black"
						style="margin-top:10px !important; width:200px; display:inline; height:55px;
						border:3px solid rgba(255,255,255,.3);">-->
						<br /><br />
						<div style="color:#eee; display:none;">

							<span style="text-shadow:0px -1px 0px rgba(0,0,0,.4);">
							&nbsp;&nbsp;<span id="totalsubs"
							style="color:#00E21A; background:none; font-weight:300"><?= $total_subscribers ?></span>
							<span style="color:#eee;">reserved</span> -
							<span id="totalspots" style="font-weight:300; color:#00E21A;"><?= $total_spotsleft ?></span>
							spots left&nbsp;&nbsp;

							<span id="result" style="display:none; color:#00E21A; font-weight:300;">You&rsquo;re RSVP&rsquo;d.
							We&rsquo;ll send you an email just before we launch the BETA version.</span>
							</span>
						</div>
					</form>

					<!--<center><a class="rounded2" href="/auth/join" style="font-weight:600;">Try it free &rsaquo;</a></center>-->
					<!--<center><a class="rounded2" href="/case-studies"
					style="font-weight:600;">View Case Studies <i class="fa fa-angle-right" aria-hidden="true"></i></a></center>	-->
				</div>
				<center style="color:#fff; font-size:15px; 
				font-family:Montserrat,'Open Sans',Helvetica,Verdana,sans-serif;">If you 
				enter a phone number, you&rsquo;ll also receive a text message</center>

				<!--			<br />
				<div class="btn-rounded" style="">
				<a href="/auth/register" style="" title="RSVP">RSVP &raquo;</a>
				</div>-->
			</p>
		</div>

	</div>

	<!-- ######################################################################## -->
	<!-- ######################       SIGNUP SECTION       ###################### -->
	<!-- ######################################################################## -->

	<!-- #1 FULL WIDTH CONTAINER STARTS HERE -->
	<div style="width:100%; height:auto; background:#fff;">
		<br />
		<div style="padding:20px 15px 15px; text-align:center; font-size:20px; line-height:30px; font-weight:300;
	text-align:center; margin: 0 auto; max-width:1250px">
	
			<h2>CUSTOMERS / SHIPPERS</h2>
			
			You can give us some text to put here. This will be good for SEO.			
			
			<br />

			<h2>BROKERS</h2>
			
			You can give us some text to put here. This will be good for SEO.
			
			<br />

			<h2>SHIPPING CARRIERS</h2>
			
			You can give us some text to put here. This will be good for SEO.

			<!--We aren&rsquo;t just creating another passive community. We&rsquo;ve created very deliberate features that both
			<span style="font-weight:600; color:#00D315">quantify</span> <i>and</i> <span style="font-weight:600; color:#00D315">verify</span>
			our numbers and intent.--><!-- cool blue: color:#00D315 -->
			<!--A <span style="font-weight:600;">Community</span> with a
			<span style="font-weight:600;">purpose</span> -
			<i>and</i> cool <span style="font-weight:600;">technology</span>.
			Join now &amp; <span style="font-weight:600;">get paid</span> monthly.-->



			<!--<span class="supercharge">Super-charge</span> your business!-->
			<!--There&rsquo;s <span style="font-weight:600; color:#00D315">power</span> in
			<span style="font-weight:600;">numbers</span>. -->
			<!--<span style="font-size:15px; color:#dd1000; font-weight:600;">Call us at -->
			<!--1 (844) THINAPP  (1-844-844-6277) &bull; 312-857-3511 (local) or
			email us at <a href="mailto:contact@getpreorder.com">contact@getpreorder.com</a></span>-->
		</div>
		<div class="clear"></div>
		<br />
		<div class="rounded2" style="text-align:center; height:auto; font-size:17px; padding:0px; margin-bottom:0px;
	line-height:25px; text-align:left;">
			<center>
				<a class="rounded2" href="/auth/join" style="font-weight:600;">SIGN UP &rsaquo;</a>
			</center>
		</div>
		<br /><br /><br />
		<!--<br />
		<center><a href="/auth/register" style="font-size:15px;" class="browse">Or, Join free
		<i class="fa fa-angle-right" aria-hidden="true"></i></a></center>-->

<!--		<br /><br /><br />
		<div class="lightgraylink" style="text-align: center; font-size:15px;">
			<center><img src="/static/images/square/square-logo-black.png" alt="Official Square Partner"
				style="max-width:220px; width:70%; margin-bottom:10px;" />
				<h2 style="text-transform:uppercase; font-size:13px; font-weight:800; letter-spacing:2px; color:#279bd1; margin-top:0px">
					Official Square Partner
				</h2>
			</center>
		</div>
		<div class="clear"></div>
		<br />-->

		<!--
		<br /><br />
		<hr style="height:1px; margin-bottom:15px;" />-->
		<!--<center style="color:#333; font-size:16px; line-height:22px; padding:0 22px;">
		<a href="/how-it-works"
		style="font-weight:400;"><i class="fa fa-info-circle"></i> How It Works <i class="fa fa-angle-right" aria-hidden="true"></i></a> &nbsp;
		<a href="#video" class="loginpop" rel="group1"
		style="font-weight:400;">Watch the video (41s) <i class="fa fa-play-circle"></i></a>
		<!-- It can be used out of the box or quickly customized to match even the most complex ideas and needs. -->
		<!--</center>	-->

		<div class="mobileh1" style="display:none; font-weight:200; font-family: 'Open Sans',sans-serif; margin:0px;
	font-size:28px; padding:0 20px 5px; text-align:center; line-height:36px; margin-top:25px">
			<img src="/static/images/guarantee.png" alt="Guarantee" class="guarimg" style="height:auto;" width="50" height="50" />
			Want to speak with someone about your idea or project? We&rsquo;d love to hear from you.
			<a href="tel:1-312-857-3511"
		style="color:#0072C4; text-shadow:0px 0px 0px">1-312-857-3511</a> or contact@getpreorder.com
		</div>
		<!-- <div class="clear"></div> -->
	</div>
	<div class="clear"></div>
	<!-- PAGE CONTAINER END -->

	<!-- ######################################################################## -->
	<!-- ######################       BOTTOM SECTION       ###################### -->
	<!-- ######################################################################## -->

	<!-- Bluish Color 2996cc -->
	<!-- video_section_bg -->
	<div style="background:#000 url(static/client/truck_in_motion_dark.png) no-repeat; background-size:cover; color:#fff;
		text-align:center; border-bottom:1px solid #ED6C00;">

		<div class="darklinks" style="background:rgba(0,0,0,0); color:#fff; text-align:center; padding:20px;">
			<br />
			<h2 style="font-weight:400; font-size:32px; line-height:38px; margin-bottom:15px; padding-bottom:5px;
				font-family:Montserrat,Raleway,Helvetica,Verdana, sans-serif;">
				SIMPLE. SAFE. RELIABLE.
				<!--<span style="color:#00D315; font-weight:400">57</span> SECONDS-->
			</h2>

			<div style="font-size:20px; color:#ddd; font-family:Montserrat; max-width:1100px; margin:0 auto;
				line-height:29px;">


				<!--Crowd Kode was created for Entrepreneurs, <i>by</i> Entrepreneurs, so unlike other popular
				developer-focused platforms, we create tech that&rsquo;s easy to install, easy to maintain
				and almost always comes with installable demos (ie. zip files).
				<br /><br />
				In addition, most of our tech also contains pre-designed,
				fairly neutral front-ends (ie. UI/UX), thus making it easy to quickly create a fully completed
				project(s) by simply replacing existing images and assets. We essentially create fully-completed,
				ready-made, out-of-the-box tech.-->
			</div>
			<!--<span style="font-size:17px;">$25 ONE-TIME PAYMENT + $25/MO. - <a href="https://ssuplans.square.site/" title="Click here to join now">JOIN NOW &rsaquo;</a></span>-->
			<br /><br />
			<a href="#video" class="loginpop" rel="group1"
			style="font-weight:400;"><img src="/static/client/play_button.png"
				style="height:85px;" /></a>
			<br /><br /><br />
			<div style="font-size:20px; line-height:30px;
			font-family:Montserrat,Raleway,Helvetica,Verdana, sans-serif;">
				<a
				href="/auth/join" class="neongreen">Sign up now</a> to try for free &rsaquo;
			</div>
			<br /><br /><br /><br />
		</div>
		<div class="clear"></div>
	</div>

	<!-- ################################################################## -->
	<!-- ################################################################## -->
	<!-- ################################################################## -->
	
	<!-- footer -->
	<div style="background:#222; color:#fff; text-align:center; min-height:350px; border-top:1px solid #777;">
		
		<br />
		<div style="max-width:1200; width:80%; margin:0 auto; font-size:17px; font-weight:300;">

			<div class="grid_5 blockit" style="text-align:left; background:none; color:#fff; padding:0 0; line-height:25px">
				<img src="/static/client/main_logo.png" alt="Jolly Dispatch"
					style="max-width:420px; width:80%; margin-bottom:-10px;" />
				<br />
				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
				Ipsum has been the industry's standard dummy text ever since the 1500s... 
				<br /><br />
				
				<div class="socialmedia" style="padding:5px;">
					<a href="#" class="socialmediaicon"><i class="fa fa-facebook-f"></i></a>
					<a href="#" class="socialmediaicon"><i class="fa fa-twitter"></i></a>
					<a href="#" class="socialmediaicon"><i class="fa fa-linkedin"></i></a>
					<a href="#" class="socialmediaicon"><i class="fa fa-envelope"></i></a>
				</div>
			</div>
			<div class="grid_1 blockit">
				&nbsp;
			</div>
			<div class="grid_3 blockit" style="text-align:left; background:none; color:#fff; padding:0px 0 0;
				font-family: Montserrat,Raleway,'Open Sans',Helvetica,Verdana,sans-serif; font-weight:600;">
				<br /><br /><br />
				<h3 style="margin-bottom:7px;">SERVICES</h3>
				
				<ul class="footerlinks" style="text-align:left;">
					<li><a href="/carriers">Auto Carriers</a></li>
					<li><a href="/brokers">Brokers</a></li>
					<li><a href="/dealers">Dealers</a></li>
					<li><a href="/customers">Customers</a></li>
				</ul>
				
			</div>
			<div class="grid_3 blockit" style="text-align:left; background:none; color:#fff; padding:0px 0 0;">
				<br /><br /><br />
				<h3 style="margin-bottom:7px;">COMPANY</h3>
				
				<ul class="footerlinks" style="text-align:left;">
					<li><a href="/about">About Jolly</a></li>
					<li><a href="/contact">Contact Support</a></li>
					<li><a href="/partnerships">Partnerships</a></li>
					<li><a href="/terms">Terms &amp; Policies</a></li>
				</ul>
				<br />
				<i class="fa fa-telephone"></i> 1-800-###-####
			</div>
		</div>

		<div class="clear"></div>
		<br /><br />		
	
	</div>

	<!-- ################################################################## -->
	<!-- ################################################################## -->
	<!-- ################################################################## -->

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

	<!-- ################################################################## -->
	<!-- ################################################################## -->
	<!-- ################################################################## -->


	<script type="text/javascript" defer>
		var href = $(this).attr("action");
		$(function() {
			$('#gallery a').lightBox();
		});
	</script>

	<script type="text/javascript">
		$(document).ready(function() {

		/* Refresh the page */
			setTimeout(function() {
				getSubscribers();
			},7000); // milliseconds

			$('#subscribeform').submit(function (e) {
				e.preventDefault();
				var subemail = $('#subemail').val().toLowerCase();
				var frm = this;
				$.ajax({
					type: 'POST',
					url: '/auth/checkEmail',
					data: {
						subemail: subemail
					},
					success: function (result) {
						//alert(subemail);
						//alert(result);
						if (result == 0) {
							//$('#subscribeform').submit();
							submitForm();
						} else {
							alert('The e-mail address entered is not valid or has already been registered.');
						}
					}
				});
			});

			function submitForm()
			{
				// Initiate Variables With Form Content
				var email = $("#subemail").val().toLowerCase();
				var interestedin = $("#interestedin").val();

				$.ajax({
					type: "POST",
					url: "/auth/subscribe",
					//data: "email=" + email,
					//data: "data1="+myindex+"&data2="+selValue,
					data: { email: email, interestedin: interestedin },
					success : function(result) {
						$("#result").show();
						$("#totalsubs").load(" #totalsubs");
						$("#totalspots").load(" #totalspots");
						$("#subemail").val("");
					}
				});
			}

			function getSubscriberz()
			{
				$.ajax({
					url: "/plans/checkCount",
					type: "POST",
					data: data,
					success: function(d) {
						if (d) {
							var result = $.parseJSON(d);
							var referrer = result.referrer;
							//alert(d);
							$("#totalsubs").html(d);
							$("#totalsubs").css("background", "#29CE29");
							$("#reserr").hide();
							$("#result").show();
							$("#referrer_id").val(d);
							//alert(d);
						} else {
							$("#entercode").css("background", "#ff0000");
							$("#result").hide();
							$("#reserr").show();
						}
						//return false;
					},
					error: console.log("it did not work"),
				});
			}
		});
	</script>

	<!-- ################################################# -->
	<!-- ###########  LIGHT BOXES START HERE   ########### -->
	<!-- ################################################# -->

	<!-- 1. MOST POPULAR CODE FRAMEWORK -->
	<div style="display:none;">
		<div id="framework" class="" style="max-width:750px;">
			<div class="overlay-bl-bg"></div>
			<div class="container_6 pop-content">
				<div class="" style="background:none !important;">
					<div class="form login-form" style="background:red !important;">
						<!-- CONTENT CONTAINER STARTS HERE -->
						<div class="box-white" style="border:0px; max-height:300px;
					height:auto; padding:0px; background:blue !important; margin-top:-30px !important;">
							<div style="background:#fff; float:left; padding:25px; color:#222; font-size:15px;
						text-align:left; font-family: 'Open Sans',sans-serif; font-weight:normal; line-height:22px;">
								Thin&#923;pp is built on a simplified
								<strong>MVC framework</strong> in
								<strong>PHP</strong> with a
								<strong>responsive, 12-grid HTML Bootstrap</strong>
								for the front-end - and
								<strong>MySQL</strong> for the back-end database.
								<span style="color:#999;">Note: There are of course also some
								<strong>HTML5</strong>, Javascript and Ajax elements too.</span> This makes it the most fluid
								combination of languages and architecture imaginable.
								<br /><br />
								<span style="font-size:13px; color:#aaa">Our specially trained
								Thin&#923;pp Development Team can take care of any customizations for just $25/hr
								or any average website developer should be able
								to spend just a few minutes with the code and be able to jump right in.</span>
								<br /><br />
								<center><span style="font-size:18px; color:#ff6600">Call or email us now to get started<br />
									<a href="tel:1-312-857-3511"
									style="color:#0072C4; text-shadow:0px 0px 0px">1-312-857-3511</a>
									<!--<a href="tel:1-844-484-4627" style="color:#82ADCC;">1-844-484-4627 (1-844-4THINAPP)</a>-->
									or <strong>contact@getpreorder.com</strong></span></center>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 3. VIDEO -->
	<div style="display:none;">
		<div id="video" style="max-width:560px;">
			<div class="overlay-bl-bg"></div>
			<div class="container_6 pop-contentXXXX" style="background:none !important;">
				<div class="" style="background:none !important;">
					<div class="formXXX login-formXXX">
						<!-- CONTENT CONTAINER STARTS HERE -->
						<div class="box-whitexxx" style="border:0px; max-height:315px; height:auto; padding:0px;">
							<div class="iframevid" style="background:none; padding:0px; color:#222; font-size:15px;
							text-align:left; font-family: 'Open Sans',sans-serif; font-weight:normal; line-height:22px;">
								<div class="videoWrapper">
									<iframe width="560" height="315"
							 	src="https://www.youtube-nocookie.com/embed/3oyo0-FuKRU?rel=0&amp;showinfo=0"
                            	frameborder="0" allowfullscreen></iframe>
									<!-- VIMEO EXAMPLE -->
									<!-- <iframe width="560" height="315"
									src="https://player.vimeo.com/video/281583099?title=1&byline=1&portrait=0&color=39b54a"
									frameborder="0" allowfullscreen></iframe>-->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 3B. VIDEO GRAZE APP LAUNCH VIDEO -->
	<div style="display:none;">
		<div id="videograze" style="max-width:560px;">
			<div class="overlay-bl-bg"></div>
			<div class="container_6 pop-contentXXXX" style="background:none !important;">
				<div class="" style="background:none !important;">
					<div class="formXXX login-formXXX">
						<!-- CONTENT CONTAINER STARTS HERE -->
						<div class="box-whitexxx" style="border:0px; max-height:315px; height:auto; padding:0px;">
							<div class="iframevid" style="background:none; padding:0px; color:#222; font-size:15px;
                            text-align:left; font-family: 'Open Sans',sans-serif; font-weight:normal; line-height:22px;">
								<div class="videoWrapper">
									<!--<iframe width="560" height="315" src="https://player.vimeo.com/video/281583099?title=1&byline=1&portrait=0&color=39b54a"
									frameborder="0" allowfullscreen></iframe>-->
									<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/p6jEgEKsoUE?rel=0&amp;showinfo=0"
                            frameborder="0" allowfullscreen></iframe>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 4. DEMOS -->
	<div style="display:none;">
		<div id="demos" class="" style="max-width:750px;">
			<div class="overlay-bl-bg"></div>
			<div class="container_6 pop-content">
				<div class="" style="background:none !important;">
					<div class="form login-form" style="background:red !important;">
						<!-- CONTENT CONTAINER STARTS HERE -->
						<div class="box-white" style="border:0px; height:auto; padding:0px; margin-top:-30px !important;">
							<div style="background:#fff; padding:25px; color:#222; font-size:15px;
						text-align:left; font-family: 'Open Sans',sans-serif; font-weight:normal; line-height:22px;">

								<h1 style="font-weight:300; color:#222">Thin&#923;pp Products</h1>

								Thin&#923;pp is comprised of several different powerful technology solutions,
								which you can purchase seperately or as a combined solution.
								<br /><br />
								1. <span style="font-weight:600;">Thin&#923;pp Platform</span> - The Web App is our
								flagship solution/product (and is also a fully responsive website).
								<br /><br />
								2. <span style="font-weight:600;">Thin&#923;pp Native Wrapper</span> - This is a Native
								App (coded in the original App programming languages) that allows us to &ldquo;wrap&rdquo;
								any website or the Thin&#923;pp Platform and make it available for download from the
								App Stores.*
								<br /><br />
								3. <span style="font-weight:600;">Thin&#923;pp Offline Platform</span> - We&rsquo;ve figured
								out how to make Web Apps and Native
								Apps that function completely offline (ie. without an internet connection).
								<br /><br />
								4. <span style="font-weight:600;">Thin&#923;pp Hybrid App</span> - this is (1 + 2 above) or
								(1 + 2 + 3 above) combined. <span style="font-weight:600;">1 + 2 is our most popular
								solution/product.</span>
								<br /><br />
								<span style="font-size:13px; color:#999">Note: Close this window and enter your email
								at the bottom of the page to receive an invite to access and install the Native App Wrapper on
								your phone for live testing (note: within a couple of weeks we&rsquo;ll have a live demo App
								in the App Stores for testing also).</span>
								<br /><br />
								<center><span style="font-size:18px; color:#ff6600">Call or email us now to get started<br />
									<a href="tel:1-312-857-3511"
									style="color:#0072C4; text-shadow:0px 0px 0px">1-312-857-3511</a>
									or <strong>contact@getpreorder.com</strong></span></center>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 5. PROOF -->
	<div style="display:none;">
		<div id="proof" class="" style="max-width:850px;">
			<div class="overlay-bl-bg"></div>
			<div class="container_6 pop-content" style="">
				<div class="" style="">
					<div class="form login-form" style="">
						<!-- CONTENT CONTAINER STARTS HERE -->
						<div class="box-white" style="border:0px; max-height:80%; width:auto;
					height:auto; padding:0px; margin-top:-30px !important;">
							<div style="background:#fff; width:auto; padding:0 25px 25px; color:#222; font-size:15px;
						text-align:left; font-family: 'Open Sans',sans-serif; font-weight:normal; line-height:22px;">
								<h1 style="font-weight:300; color:#222; margin-bottom:0px;">
									Thin&#923;pp Turn-Around Time
								</h1>
								Typically Apple takes about 5 business days to review and approve each submitted App, however this
								is assuming you did everything 100% correct. They absolutely have the right to reject your App and
								will tell you why, at which time it becomes up to you (or us) to fix it and re-submit it. This
								process can drag our for literal weeks and even months if you don&rsquo;t know what you&rsquo;re doing.
								<br /><br />
								We have it down to a science. We handle it all for you. We ask you some questions (that are currently
								being programmed into an easy online/mobile form) and we take care of the rest. And Apple knows who
								submits correct stuff - and they&rsquo;ll typically reward those App Developers with quick review
								times and approvals.
								<br /><br />
								So ready for proof? On Monday July 25th, 2016 we submitted an App for a client and the very next morning
								on Tuesday July 26 it was reviewed, approved and live on the App Store.
								<br /><br />
								Below is a screenshot of the Process from
								Apple&rsquo;s own iTunes Connect system, which is used to faciliate the entire App Submission
								process - notice the dates.
								<br /><br /><br />
								<center><img src="/static/images/marketing/maya_process.png"
									alt="Maya Process" style="max-width:350px; width:100%; border:1px solid #ccc;" /></center>
								<br /><br />
								<center><span style="font-size:18px; color:#ff6600">So, what are you waiting for? Call or email us
									now to get started on <i>your</i> ThinApp...<br />
									<a href="tel:1-312-857-3511"
									style="color:#0072C4; text-shadow:0px 0px 0px">1-312-857-3511</a>
									or <strong>contact@getpreorder.com</strong></span></center>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 6. APP TYPES -->
	<div style="display:none;">
		<div id="apptypes" class="" style="max-width:850px;">
			<div class="overlay-bl-bg"></div>
			<div class="container_6 pop-content" style="">
				<div class="" style="">
					<div class="form login-form" style="">
						<!-- CONTENT CONTAINER STARTS HERE -->
						<div class="box-white" style="border:0px; max-height:80%; width:auto;
					height:auto; padding:0px; margin-top:-30px !important;">
							<div style="background:#fff; width:auto; padding:0 15px 25px; color:#222; font-size:15px;
						text-align:left; font-family: 'Open Sans',sans-serif; font-weight:normal; line-height:22px;">
								<h1 style="font-weight:300; color:#222; margin-bottom:0px;">
									App Types
								</h1>
								<a href="https://itunes.apple.com/us/app/prizebowl/id1132092265?ls=1&mt=8"
title="Click to view on the App Store" target="_blank"><img src="/static/images/app_icon_prizebowl.png" class="appicon" alt="PrizeBowl" /></a>
								Custom PHP + App Wrapper
								<br />
								<a href="https://itunes.apple.com/us/app/mayastojan/id1137518267?mt=8"
title="Click to view on the App Store" target="_blank"><img src="/static/images/app_icon_mayastojan.png" class="appicon" alt="Maya Stojan" /></a>
								Wordpress + App Wrapper
								<br />
								<a href="https://itunes.apple.com/us/app/riskeater/id1136678655?mt=8"
title="Click to view on the App Store" target="_blank"><img src="/static/images/app_icon_riskeater.png" class="appicon" alt="RiskEater" /></a>
								ThinApp + App Wrapper
								<br />
								<a href="https://itunes.apple.com/us/app/rockitfund/id1128205097?mt=8"
title="Click to view on the App Store" target="_blank"><img src="/static/images/app_icon_rockitfund.png" class="appicon" alt="RockitFund" /></a>
								ThinApp + App Wrapper
								<br />
								<a href="https://itunes.apple.com/us/app/hyperlocaldeals!/id1137059812?mt=8"
title="Click to view on the App Store" target="_blank"><img src="/static/images/app_icon_hyperlocaldeals.png" class="appicon" alt="HyperLocalDeals" /></a>
								ThinApp + App Wrapper

								<br /><br />
								Below is a screenshot of the Process from
								Apple&rsquo;s own iTunes Connect system, which is used to faciliate the entire App Submission
								process - notice the dates.
								<br /><br /><br />
								<center><img src="/static/images/marketing/maya_process.png"
									alt="Maya Process" style="max-width:350px; width:100%; border:1px solid #ccc;" /></center>
								<br /><br />
								<center><span style="font-size:18px; color:#ff6600">So, what are you waiting for? Call or email us
									now to get started on <i>your</i> ThinApp...<br />
									<a href="tel:1-312-857-3511"
									style="color:#0072C4; text-shadow:0px 0px 0px">1-312-857-3511</a>
									or <strong>contact@getpreorder.com</strong></span></center>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 7. LEARN MORE ABOUT THE APP WRAPPER DESIGN STUDIO -->
	<div style="display:none;">
		<div id="lmadesignstudio" style="max-width:560px;">
			<div class="overlay-bl-bg"></div>
			<div class="container_6 pop-contentXXXX" style="background:none !important;">
				<div class="" style="background:none !important;">
					<div class="formXXX login-formXXX">
						<!-- CONTENT CONTAINER STARTS HERE -->
						<div class="box-whitexxx" style="border:0px; max-height:315px; height:auto; padding:0px;">
							<div style="background:#fff; float:left; padding:25px; color:#222; font-size:15px;
						text-align:left; font-family: 'Open Sans',sans-serif; font-weight:normal; line-height:22px;">
								Our online Design Manager allows you to easily upload whatever
								images, logos, links, screen mockups and inspiration you have that&rsquo;ll help us
								hand-craft the design for your 5-screen/page App Wrapper fast.
								<br /><br />
								In addition, it also helps us
								painlessly collect all the info from you that we&rsquo;ll need to submit your Mobile App to the
								App Store(s) and get it approved and live within 48 hours.
								<br /><br />
								<center><span style="font-size:18px; color:#ff6600">Call or email us now to get started<br />
									<a href="tel:1-312-857-3511"
									style="color:#0072C4; text-shadow:0px 0px 0px">1-312-857-3511</a>
									or <strong>contact@getpreorder.com</strong></span></center>
							</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 8. LOGIN TO USE THE APP WRAPPER DESIGN STUDIO -->
<div style="display:none;">
	<div id="logindesignstudio" class="" style="max-width:750px;">
		<div class="overlay-bl-bg"></div>
		<div class="container_6 pop-content" style="">
			<div class="" style="">
				<div class="form login-form" style="">
					<!-- CONTENT CONTAINER STARTS HERE -->
					<div class="box-white" style="background:none !important; border:0px; max-height:80%; width:auto;
					height:auto; padding:0px; margin-top:-30px !important; margin-bottom:-30px !important;">
						<div class="lightblue" style="background:#444 url(/static/images/loginblur.png) no-repeat; background-size:cover;; width:auto;
						padding:0 15px 25px; color:#ddd; text-shadow:0px -1px 1px rgba(0,0,0,.4); font-size:15px;
						text-align:center; font-family: 'Open Sans',sans-serif; font-weight:normal; line-height:22px;">
							<h1 style="font-weight:300; margin-bottom:0px;">
								Online Design Manager Studio (ODM/ODMS)
							</h1>
							Already have an account? Simply login to design your first AppWrapr!
							<br /><br />
							<a href="#login" class="loginpop" style="font-size:28px;">Login
								<i class="fa fa-angle-right" aria-hidden="true"></i></a>
							<br /><br />
							Not a member yet? Sign up free here...
							<br /><br />
							<a href="/auth/join" style="font-size:28px;">Sign up
								<i class="fa fa-angle-right" aria-hidden="true"></i></a>
							<br /><br />
							<span style="font-size:12px; line-height:15px; color:#aaa;">Note: You don&rsquo;t have to design your
							own AppWrapr, we&rsquo;ll gladly do it for you. It&rsquo;s just a part of our service that gives
							more design control to those who want it - and helps speed up the completion of your App.</span>
							<br /><br />
							<center><span style="font-size:15px; color:#FF8A3D">
								Still have questions? Get in touch!
								<br /><br />
								<a href="tel:1-312-857-3511"
								style="color:#0072C4; text-shadow:0px 0px 0px">1-312-857-3511</a>
								or <strong>contact@getpreorder.com</strong></span></center>
							<br />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<!-- ################################################## -->
<!-- ###############  SCRIPTS START HERE  ###############  -->
<!-- ################################################## -->

<script type="text/javascript">
	$(document).ready(function() {
		// NEW TEXT FEATURE
		var TxtRotate = function(el, toRotate, period) {
			this.toRotate = toRotate;
			this.el = el;
			this.loopNum = 0;
			this.period = parseInt(period, 10) || 250;
			this.txt = '';
			this.tick();
			this.isDeleting = false;
		};

		TxtRotate.prototype.tick = function() {
			var i = this.loopNum % this.toRotate.length;
			var fullTxt = this.toRotate[i];

			if (this.isDeleting) {
				this.txt = fullTxt.substring(0, this.txt.length - 1);
			} else {
				this.txt = fullTxt.substring(0, this.txt.length + 1);
			}

			this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

			var that = this;
			var delta = 200 - Math.random() * 100;

			if (this.isDeleting) {
				delta /= 2; }

			if (!this.isDeleting && this.txt === fullTxt) {
				delta = this.period;
				this.isDeleting = true;
			} else if (this.isDeleting && this.txt === '') {
				this.isDeleting = false;
				this.loopNum++;
				delta = 100;
			}

			setTimeout(function() {
				that.tick();
			}, delta);
		};

		window.onload = function() {
			var elements = document.getElementsByClassName('txt-rotate');
			for (var i=0; i<elements.length; i++) {
				var toRotate = elements[i].getAttribute('data-rotate');
				var period = elements[i].getAttribute('data-period');
				if (toRotate) {
					new TxtRotate(elements[i], JSON.parse(toRotate), period);
				}
			}
			// INJECT CSS
			var css = document.createElement("style");
			css.type = "text/css";
			css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
			document.body.appendChild(css);
		};


		// AUTO-TYPE FEATURE
		function autoType(elementClass, typingSpeed)
		{
			var thhis = $(elementClass);
			thhis.css({
				"position": "relative",
				"display": "block",
				"text-align": "center"
			});
			thhis.prepend('<div class="cursor" style="right: initial; text-align:center !important;"></div>');
			thhis = thhis.find(".text-js");
			var text = thhis.text().trim().split('');
			var amntOfChars = text.length;
			var newString = "";
			thhis.text("|");
			setTimeout(function() {
				thhis.css("opacity",1);
				thhis.prev().removeAttr("style");
				thhis.text("");
				for (var i = 0; i < amntOfChars; i++) {
					(function(i, char) {
						setTimeout(function() {
							newString += char;
							thhis.text(newString);
						},i*typingSpeed);
					})(i+1,text[i]);
				}
			},200);
		}

		// THIS IS FOR THE CURSOR AUTO-TYPING FEATURE
		autoType(".type-js",50);
	});
</script>

<script type="text/javascript" defer>
	// COUNTER FUNCTION
	$({ Counter: 0 }).animate({
		Counter: $('.animatednumber').text()
	}, {
		duration: 7000,
		easing: 'swing',
		step: function() {
			$('.animatednumber').text(commaSeparateNumber(Math.ceil(this.Counter)));
		}
	});

	// COMMA SEPARATED FUNCTION
	function commaSeparateNumber(val)
	{
		while (/(\d+)(\d{3})/.test(val.toString())) {
			val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
		}
		return val;
	}
</script>

<?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; ?>