<?php include 'views/_header_vid.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 />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<style type="text/css">
body {
    background: url(/static/images/client/bg_img.jpg) center center; 
    background-size: contain;
}
#header .wrap-top-menu, div.spacer { display:none; }
/*a, a:active, a:link, a:visited { color:#E2C4A5; text-shadow: 0px -1px 0px rgba(0,0,0,.3); }
a.loginpop.introlinks, a.loginpop.introlinks:active, a.loginpop.introlinks:link, a.loginpop.introlinks:visited { 
    color:#fff !important; }
a.loginpop.introlinks:hover { color:#E2C4A5; }
a:hover { color:#fff; }*/
a[href^=tel] {
    color:#0194fb; 
    text-shadow:0px -1px 0px rgba(0,0,0,.3);
}
a.kenectgreen { color:#72f54a; }
a.kenectgreen:hover { color:#fff; }
.fancybox-close {
    top: -10px;
    right:-26px;
}
div.fancybox-skin {
    top: 0px;
}
.fancybox-skin { padding:7px !important; background:rgba(0,0,0,.4); }
.fancybox-outer, .fancybox-inner { }
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;
}
.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;
}
.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%;
}
/* ### 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;
}
.rounded2 a { 
    background:#00AF14;
    color:#fff;
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    padding:15px 30px;
    font-size:16px;
    display:inline-block;
}
.rounded2 a:hover { 
    color:#fff;
    background:#00355B;
    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:40px; line-height:48px; }
h1, h2 { text-align:center; }
h2 { line-height:28px; }
h1.mobileh1 { margin-top:15px; font-weight:100; }
h3 { color:#fff; font-weight: 300; font-size:17px; line-height:25px; margin-bottom:5px; 
text-shadow: 0px -1px 0px rgba(0,0,0,.5); text-transform: uppercase; }
h4 { font-size:20px; margin-bottom:11px; }

/* 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; }
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; }  

#header {
    border-bottom: 0px solid #d4d4d4;
}
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%;
}

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

    #slider {
      width:370px;
      height:724px;
      position: relative;
      overflow: hidden;
      margin:0px;
      background:none;
    }
    #slider ul { 
      width:370px;
      height:724px;
        position: relative;
        margin: 0;
        background:none;
        padding: 0;
        list-style: none;
    }
    #slider ul li {
      width:370px;
      height:724px;
        position: relative;
        display: block;
        float: left;
        margin: 0;
        padding: 0;     
    }
a.control_prev, a.control_next {
      position: absolute;
      top: 45%;
      z-index: 999;
      display: block;
      padding: 5% 5%;
      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 { margin-left: 37px; }
a.control_next { margin-right: 35px; }
a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s 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 ############## */

h4.easy {
	font-size: 18px;
	line-height: 26px;
}

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

.spacer {
    padding-top: 35px;
}
.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; }

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    /*height: auto;*/
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(static/images/bgmount2.jpg) no-repeat;
    background-size: cover; 
}

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

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

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

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

    .fullscreen-bg__video {
        /*display: none;*/
    }
}

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

@media screen and (min-width: 2400px) {
    #lpcontainer { background-size:100% 745px !important; }
}

/* ########################## */
@media screen and (max-device-width:  1160px), screen and (max-width:  1160px) {
    center#planslogo { display:none; }
    .spacer { padding-top: 65px; }  
    .layout-2cols { }
    #devicecontainer { margin-left:0px; margin-right:0; width:340px; }
}

/* ########################## */
@media screen and (max-device-width:  1024px), screen and (max-width:  1024px) {
    center#planslogo { display:none; }
    .spacer { padding-top: 65px; }  
    .layout-2cols { }
    #devicecontainer { margin-left:0px; margin-right:0; width:340px; }
	h4.easy { font-size: 16px; line-height: 24px; }
}
/* This was 854px, but I'm changing it to 980 */
/* ########################## */
@media (max-width: 980px) {
    html,body { background:#fff; }
    .spacer { padding-top: 65px; }  
    .layout-2cols { }
    .grid_4 { width:100%; display:block; }
    .iframevid { width:270px; height:152px; }
    #leftsidecol { margin-left:0px; }
    .leftcol1, .rightcol3 { width:312px; margin:0 auto; }
    .leftcol1 { padding:0; margin-bottom:25px; }
    #devicecontainer { width:100%; text-align:center; }
    #rightsidecol { padding-bottom:50px; width:100%; margin-left:0px; margin-right:0px; }   
    /** Right Col used to be #ccc url(/static/images/bgmount2.jpg) no-repeat top center; **/
    .rightcol3 { padding-top:40px; }
    .col1icon, .col1text { float:left !important; }
    .col1icon { margin-right:10px; margin-left:0px; }
    .col1text { text-align:left !important; }   
    h1.mobileh1 { margin-top:5px; font-size:22px; line-height:30px; padding:0 20px; }
    .long-field { font-size:16px; }
    span.tip { display:block; }
    .or { margin:10px 0 5px; }
    img.guarimg { width:50px; }
    .speakwith { margin-bottom:25px; }
    .sharebuttons a {
        margin:15px 5px 15px 0;
    }
}
/* ########################## */
@media (max-width: 480px) {
    .leftcol1 { margin-top: 0px !important; }
	.middlehomemenu {
		display: block !important;
	}
	.tophomemenu { 
		display:none;
	}
}
</style>

<!-- PAGE CONTAINER -->
<!-- background: #fff url(/static/images/bgmount.jpg) no-repeat top center;-->
<!-- background: url(/static/fadebg.png) repeat-x top;  -->
<div id="lpcontainer" style="background: url(/static/fadebg.png) repeat-x top; background-color: rgba(0,0,0,.6); overflow:hidden;">
    <!-- #1 FULL WIDTH CONTAINER STARTS HERE -->
    <div style="width:100%; height:auto; background-size:cover; margin-bottom:0px;">
			<!-- FLOATING MENU -->
			<div class="tophomemenu" style="font-size:14px; float:right; padding:15px; color:#bbb; margin-top:15px"> 
				<?php if ($_SESSION['loggedin']) { ?>
					<!-- Welcome, <?= $_SESSION['user']['name'] ?> -->
					<!--<a href="/auth/logout" class="">Logout</a>-->
					<a class="" href="/profile/edit" style="color:#fff; 
						font-family:Montserrat, 'Open Sans', Helvetica, sans-serif;"><i
						class="fa fa-user" aria-hidden="true"></i> Edit Acct</a>
						<span class="sep">/</span>
							<a href="/clients/dash" style="color:#f97780;
							font-family:Montserrat, 'Open Sans', Helvetica, sans-serif;">
							<i class="fa fa-sliders" aria-hidden="true"></i> Console</a>
						<span class="sep">/</span>
							<a href="/auth/logout" class="" style="color:#f97780;
							font-family:Montserrat, 'Open Sans', Helvetica, sans-serif;">
							<i class="fa fa-power-off" aria-hidden="true"></i> Logout</a>
				<?php } else { ?>	
					<a class="" href="/auth/login" style="color:#fff;
						font-family:Montserrat, 'Open Sans', Helvetica, sans-serif;"><i class="fa fa-user"></i> Login <i 
						class="fa fa-angle-right" aria-hidden="true"></i></a>
								
				<?php } ?>
				<?php if ($_SESSION['user']['is_admin']) { ?>
					<span class="sep">/</span>
					<a href="/clients/dash" style="color:#f97780;
						font-family:Montserrat, 'Open Sans', Helvetica, sans-serif;"><i 
						class="fa fa-sliders" aria-hidden="true"></i> Console</a>
				<?php } ?>
			</div>		
        <!--
        <h4 style="text-align:center; margin-top:10px; color:#0dcd14">Redeem &amp; Cash Out!</h4>
        <div style="background:rgba(105,16,0,.7); padding:30px 30px 30px; color:#fff; text-align:center; line-height:22px; 
        font-size:17px; font-weight:300; font-family:'Open Sans', Montserrat-Light,sans-serif;">
            
            Welcome! To redeem a prize or cash out, please email contact@everpolls.com from your Ever Poll registered email.
            <br /><br /> 
            - Thank you!<br />
            Ever Poll Team
            <br /><br />
            <a href="/">Reload</a>
            <?= $_SESSION['user']['name'] ?>
        </div>
        -->
        <!-- CONTAINER_12 STARTS HERE-->
        <div class="layout-2cols" style="background:none; padding-bottom:0px;">
            <div id="introsection" class="content grid_12" style="background:none; color:#fff; text-align:center; margin-top:10px; margin-bottom:0px; padding:0px;">
                <img src="/static/images/client/kenect_logo_wht.png" alt="ChattrBox" 
				style="max-height: 100px; max-width:600px; width:80%; padding:0 10px; margin-bottom:10px" />
                
<!--                <h1 style="display:none; margin-top:0px; padding:0px; margin-bottom:0px; font-size:48px; 
                color:#fff !important; text-shadow:0px -1px 0px rgba(0,0,0,.3) !important;">
                   ChattrBox
                </h1>-->
                
				<div class="middlehomemenu" style="display:none; width:100%; 
					font-size:14px; padding:0 10px; height:25px; line-height:25px; color:#bbb; background:none;"> 
				<?php if ($_SESSION['loggedin']) { ?>
					<!-- Welcome, <?= $_SESSION['user']['name'] ?> -->
					<!--<a href="/auth/logout" class="">Logout</a>-->
					<a class="" href="/profile/edit" style="color:#fff; 
						font-family:Montserrat, 'Open Sans', Helvetica, sans-serif;"><i
						class="fa fa-user" aria-hidden="true"></i> Edit Acct</a>
						<span class="sep">/</span>
							<a href="/clients/dash" style="color:#f97780;
							font-family:Montserrat, 'Open Sans', Helvetica, sans-serif;">
							<i class="fa fa-sliders" aria-hidden="true"></i> Console</a>
						<span class="sep">/</span>
							<a href="/auth/logout" class="" style="color:#f97780;
							font-family:Montserrat, 'Open Sans', Helvetica, sans-serif;">
							<i class="fa fa-power-off" aria-hidden="true"></i> Logout</a>
				<?php } else { ?>	
					<a class="" href="/auth/login" style="color:#fff;
						font-family:Montserrat, 'Open Sans', Helvetica, sans-serif;"><i class="fa fa-user"></i> Login <i 
						class="fa fa-angle-right" aria-hidden="true"></i></a>
								
				<?php } ?>
				<?php if ($_SESSION['user']['is_admin']) { ?>
					<span class="sep">/</span>
					<a href="/clients/dash" style="color:#f97780;
						font-family:Montserrat, 'Open Sans', Helvetica, sans-serif;"><i 
						class="fa fa-sliders" aria-hidden="true"></i> Console</a>
				<?php } ?>
			</div>	
                <!-- Lime Green color:#72f54a;  -->
				<h4 class="easy" style="text-align:center; font-weight:300; color:#fff !important; padding:0px 10px;
                text-shadow:0px -1px 0px rgba(0,0,0,.3) !important; max-width:970px; text-align:center; margin:10px auto;">
                
					<!--Easy, Affordable Bulk Messaging + Notifications for Users, Members, Customers, Attendees, 
					Employees or any Audience. -->
					
					<!--<a href="/pricing" style="color:#72f54a;" 
					title="Learn more about the ChattrBox Free Plan">View Pricing</a> or
					<a href="/auth/join" style="color:#72f54a;" 
					title="Sign up free now">try it free</a> and-->
					
					Send bulk-messages &amp; notifications to any audience with ease - and free. Join now and
					
					get 1,000 Equity Shares in ChattrBox, Inc.
					<a href="/api/push/guest_push.php" style="color:#72f54a;" 
					title="Send yourself a Push Notification in seconds">Try the Demo</a>
					<i class="fa fa-angle-right"></i> 
					<?php if ($_SESSION['loggedin']) { ?>
						<span style="color:#72f54a">|</span> <a href="/auth/logout" 
						style="color:#ff7e79;"><i class="fa fa-power-off"></i> Log out <i class="fa fa-angle-right"></i></a>
					<?php } else { ?>
						<span style="color:#fff">|</span>
						<a href="/auth/join" style="color:#72f54a;" title="Sign up free now">Sign up</a>
						<span style="color:#fff">|</span> <a href="/auth/login" 
						style="color:#fff;"><i class="fa fa-user"></i> Login <i class="fa fa-angle-right"></i></a>
					<?php } ?>
                     <!--<span style="color:#fd1000; font-weight:500;">Know Who&rsquo;s In The Room.</span> 
                     <a href="https://kenectnow.com/invitee" class="kenectgreen">Become a Founding Member & get up to 1% equity free &raquo;</a>  
                     --> 
                     <!--VBar makes it easy to <span style="font-weight:600;">order drinks</span> at any crowded bar. 
                     You don&rsquo;t have to leave your friends, your table or your spot any more and spend forever 
                     trying to get the bartender&rsquo;s attention! Just wait until you get the Push Notification telling
                     you your drinks are being made - then head to the bar to pick them up! Officially Launching in Nov 2017!-->
                </h4>
				<!-- background:rgba(255,255,255,.35); -->
                <div style="font-weight:300; width:auto; background:#cd1000; max-width:320px; font-weight:300;
                padding:5px; margin: 20px auto 0px; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px;">
				<span style="font-weight:600;">BETA Launch:</span> Mon May, 1, 2023 &nbsp;-&nbsp;
				<a href="/beta" style="font-weight:600; color:#fff" title="Join ChattrBox BETA">Join now &raquo;</a>
                </div>
            </div><!--end: grid4 div -->
         <div class="clear"></div>
        </div>
        <!-- CONTAINER_12 ENDS HERE -->
    </div>
    <!-- #1 FULL WIDTH CONTAINER END -->
    <div class="clear"></div>
    <div class="layout-2cols" style="padding-top:0px; margin-top:0px; padding-bottom:30px;">
    <!-- FIRST COLUMN -->
    <div id="leftsidecol" class="content grid_4" style="margin-top:0px; padding-top:0px; text-shadow:0px 1px 0px rgba(255,255,255,.4);">
        <div class="leftcol1">
            <div class="col1icon" style="width:72px; height:72px; float: right; background:none; text-align:center; 
            margin-top:25px;">
                    <div style="border-radius:50%; height:72px; width:72px; background: rgba(0,0,0,.7);
                    line-height:72px; font-size:28px; color:rgba(255,255,255,.5); text-shadow:0px -1px 0px rgba(0,0,0,.3);">
                        <i class="fa fa-paper-plane" aria-hidden="true"></i>
                        <!--<img src="/static/images/icons/polls_icon.png" alt="Polls" style="height:35px; margin-bottom:15px" />-->
                    </div>
            </div>                  
            <div class="col1text" style="width:230px; float: right; background:none; text-align:right; color:#fff;
            text-shadow:0px -1px 1px rgba(0,0,0,.7);">
				<h3>Send Bulk Messages</h3>
				Send (or schedule) messages &amp; notifications via Email, <a href="https://chattrboxx.com/api/push/sms.php" 
				style="color:#72f54a;" title="Test out our brand-new FREE SMS Text Message technology">SMS Text</a>, 
				Inbox &amp; <a href="https://chattrboxx.com/api/push/guest_push.php" style="color:#72f54a;" 
				title="Test out Rich Push Notifications">Rich Push</a> Notifications.
                <!--ChattrBox <span style="color:#72f54a;">AI</span> tells you when there are People, Events or Places 
                <span style="color:#72f54a;">nearby</span> that you'd be interested in.-->
            </div>  
            <div class="clear"></div>
            <div class="col1icon" style="width:72px; height:62px; float: right; background:none; text-align:center; 
            margin-left:0px; margin-top:0px;">
                    <div style="height:62px; width:1px; margin-left:35px; background: rgba(0,0,0,.7);
                    line-height:62px; font-size:17px; border-left:1px dashed #fff;">                    
                    </div>
            </div>                  
            <div class="clear"></div>
            <div class="col1icon" style="width:72px; height:72px; float: right; background:none; text-align:center; 
            margin-top:15px;">
                    <div style="border-radius:50%; height:72px; width:72px; background: rgba(0,0,0,.7);
                    line-height:72px; font-size:28px; color:rgba(255,255,255,.5); text-shadow:0px -1px 0px rgba(0,0,0,.3);">
                        <i class="fa fa-users" aria-hidden="true"></i><!-- was infinity -->
                    </div>
            </div>                  
            <div class="col1text" style="width:230px; float: right; background:none; text-align:right; color:#fff;
            text-shadow:0px -1px 1px rgba(0,0,0,.7);">
                <h3>Reach Thousands</h3>
				ChattrBox allows you to
				<a href="https://chattrboxx.com/how-it-works"
				style="color:#72f54a;" title="How It Works">reach thousands of people instantly</a> -
				<i>where</i> &amp; how they want to be reached.
                <!--A powerful glossary of Member created <span style="color:#72f54a;">#hashtags</span> powers 
                Kenect&rsquo;s matching algorithms.-->
            </div>      

            <div class="clear"></div>
            <div class="col1icon" style="width:72px; height:62px; float: right; background:none; text-align:center; 
            margin-top:0px;">
                    <div style="height:62px; width:1px; margin-left:35px; background: rgba(0,0,0,.7);
                    line-height:62px; font-size:17px; border-left:1px dashed #fff;">                    
                    </div>
            </div>                                      
            <div class="clear"></div>
            <div class="col1icon" style="width:72px; height:72px; float: right; background:none; text-align:center; 
            margin-top:15px;">
                    <div style="border-radius:50%; height:72px; width:72px; background: rgba(0,0,0,.7);
                    line-height:72px; font-size:28px; color:rgba(255,255,255,.5); text-shadow:0px -1px 0px rgba(0,0,0,.3);">
					<i class="fa fa-file-import" aria-hidden="true"></i> 
                    </div>
            </div>                  
            <div class="col1text" style="width:230px; float: right; background:none; text-align:right; color:#fff;
            text-shadow:0px -1px 1px rgba(0,0,0,.7);">
                <h3>Easy List Importing</h3>
				Within minutes you can easily <span style="color:#72f54a;">import thousands</span> 
				of contacts, send invites &amp; track when they sign up.
                <!--Post a Pubkast about virtually anything to 
                get <span style="color:#72f54a;">instant responses</span> from other Members.-->
            </div>      
            <div class="clear"></div>               
        </div>
        <!-- END OF SIDE DIV CONTAINER -->
        <div class="clear"></div>   
    </div><!--end: grid4 div -->
        
        <!-- MIDDLE COLUMN -->  
    <div id="devicecontainer" class="content grid_4" style="text-shadow:0px 1px 0px #fff; overflow:hidden; 
     margin-bottom:0px; padding-bottom:0px;">
        <div class="middlecol2" style="padding:0; margin-bottom:0px;">
        <center>
    <!-- ########### LAPTOP SLIDER ########### max-height:684px;  -->

<div style="margin-left:-5px; width:370px; height:724px; overflow:hidden; padding-bottom:0px; z-index: 1 !important;
            background-color:none; position:relative !important;">
            
			<div style="height:724px; width:370px; position:relative; margin:0 auto; overflow:hidden;">
				<div style="background:url('/static/iphonex_graphic_bg.png') no-repeat;
					background-size: 370px 724px; height:724px; width:370px; z-index:999999;
					    position:absolute; top:0; right:0; bottom:0; left:0"></div>

				<video id="myVideo" width="312" height="646" controls playsinline muted loop="true" autoplay="autoplay"
					style="position:relative; margin:37px 31px 30px 29px; z-index:0;">
					<source src="/static/chattrbox_rich_push.mp4" type="video/mp4">
					Your browser does not support the video tag.
				</video>

			</div>    
            
		<div id="slider" style="margin-top:-2px; display:none;">
          <a href="javascript:void(0);" class="control_next">&rsaquo;</a>
          <a href="javascript:void(0);" class="control_prev">&lsaquo;</a>
          <ul>
            <li>
                <a class="loginpop" rel="group" href="/static/images/app/screen1.jpg"  
                title="ChattrBox">
				<img src="/static/images/app/screen1.jpg" alt="ChattrBox" width="300" height="645" style="margin-top:38px;" /></a>
            </li>
            <li>
				<a class="loginpop" rel="group" href="/static/images/app/screen2.jpg"  
                title="ChattrBox">
				<img src="/static/images/app/screen2.jpg"alt="ChattrBox" width="300" height="645" style="margin-top:38px;" /></a>
            </li>
            <li>
				<a class="loginpop" rel="group" href="/static/images/app/screen3.jpg"  
                title="ChattrBox">
				<img src="/static/images/app/screen3.jpg" alt="ChattrBox" width="300" height="645" style="margin-top:38px;" /></a>
            </li>
            <li>
				<a class="loginpop" rel="group" href="/static/images/app/screen4.jpg"  
                title="ChattrBox">
				<img src="/static/images/app/screen4.jpg" alt="ChattrBox" width="300" height="645"style="margin-top:38px;"  /></a>
            </li>
            <li>
				<a class="loginpop" rel="group" href="/static/images/app/screen5.jpg"  
                title="ChattrBox">
				<img src="/static/images/app/screen5.jpg" alt="ChattrBox" width="300" height="645" style="margin-top:38px;" /></a>
            </li>       
            <li>
				<a class="loginpop" rel="group" href="/static/images/app/screen6.jpg"  
                title="ChattrBox">
				<img src="/static/images/app/screen6.jpg" alt="ChattrBox" width="300" height="645" style="margin-top:38px;" /></a>
            </li>   
            <li>
				<a class="loginpop" rel="group" href="/static/images/app/screen7.jpg"  
                title="ChattrBox">
				<img src="/static/images/app/screen7.jpg" alt="ChattrBox" width="300" height="645" style="margin-top:38px;" /></a>
            </li>    
            <li>
				<a class="loginpop" rel="group" href="/static/images/app/screen8.jpg"  
                title="ChattrBox">
				<img src="/static/images/app/screen8.jpg" alt="ChattrBox" width="300" height="645" style="margin-top:38px;" /></a>
            </li>                        
            <li>
				<a class="loginpop" rel="group" href="/static/images/app/screen9.jpg"  
                title="ChattrBox">
				<img src="/static/images/app/screen9.jpg" alt="ChattrBox" width="300" height="645" style="margin-top:38px;" /></a>
            </li> 
            <li>
				<a class="loginpop" rel="group" href="/static/images/app/screen10.jpg"  
                title="ChattrBox">
				<img src="/static/images/app/screen10.jpg" alt="ChattrBox" width="300" height="645" style="margin-top:38px;" /></a>
            </li> 
          </ul>  
          <div style="width:370px; height:724px; background: url('/static/images/app/iphonex.png') no-repeat; background-size:370px 724px; object-fit:contain; 
            background-positon:center center; background-color:none; position:absolute; !important; top:0; right:0; bottom:0; left:0">&nbsp;</div>
        </div>  
    </div>
        
        </center>               
        </div>
        <div class="clear"></div>       
     </div>
     
    <!-- ################### --> 
    <!-- 3RD COLUMN START #1 -->
    <!-- ################### --> 
        
     <div id="rightsidecol" class="content grid_4" style="margin-top:0px; padding-top:0px; text-shadow:0px 1px 0px rgba(255,255,255,.4); overflow:hidden;">
        <div class="rightcol3">
            <div style="width:72px; height:72px; float: left; background:none; text-align:center; 
            margin-right:10px; margin-top:25px;">
                    <div style="border-radius:50%; height:72px; width:72px; background: rgba(0,0,0,.7);
                    line-height:72px; font-size:28px; color:rgba(255,255,255,.5); text-shadow:0px -1px 0px rgba(0,0,0,.3);">
                        <i class="fa fa-sliders" aria-hidden="true"></i>
                    </div>
            </div>                  
            <div style="width:230px; float: left; background:none; text-align:left; color:#fff;
            text-shadow:0px -1px 1px rgba(0,0,0,.7);">
				<h3>Settings You&rsquo;ll Love</h3>
				Our Admin Console is next-level, but easy as pie. And, if you still don&rsquo;t
				have time, <a href="/concierge-services" title="ChattrBox Concierge Services" 
				style="color:#72f54a;">we&rsquo;ll do it all</a> for you.
                <!--Create a Profile, fill it out <span style="color:#72f54a;">once</span> and you&rsquo;ll never 
                have to open the App again - unless you have a connection.-->
            </div>  
            <div class="clear"></div>
            <div style="width:72px; height:62px; float: left; background:none; text-align:center; 
            margin-right:10px; margin-top:0px;">
                    <div style="height:62px; width:1px; margin-left:35px; background: rgba(0,0,0,.7);
                    line-height:62px; font-size:17px; border-left:1px dashed #fff;">                    
                    </div>
            </div>                                  
            <div class="clear"></div>
            <div style="width:72px; height:72px; float: left; background:none; text-align:center; 
            margin-right:10px; margin-top:15px;">
                    <div style="border-radius:50%; height:72px; width:72px; background: rgba(0,0,0,.7);
                    line-height:72px; font-size:28px; color:rgba(255,255,255,.5); text-shadow:0px -1px 0px rgba(0,0,0,.3);">
                        <i class="fa fa-map-marker-alt" aria-hidden="true"></i>
                    </div>
            </div>                  
            <div style="width:230px; float: left; background:none; text-align:left; color:#fff;
            text-shadow:0px -1px 1px rgba(0,0,0,.7);">
                <h3>GPS-Driven + Secure</h3>
                Real-time <span style="color:#72f54a;">GPS</span> helps reach nearby users, while giving
                them options to control their privacy.
            </div>      
            <div class="clear"></div>
            <div style="width:72px; height:62px; float: left; background:none; text-align:center; 
            margin-right:10px; margin-top:0px;">
                    <div style="height:62px; width:1px; margin-left:35px; background: rgba(0,0,0,.7);
                    line-height:62px; font-size:17px; border-left:1px dashed #fff;">                    
                    </div>
            </div>                              
            <div class="clear"></div>
            <div style="width:72px; height:72px; float: left; background:none; text-align:center; 
            margin-right:10px; margin-top:15px;">
                    <div style="border-radius:50%; height:72px; width:72px; background: rgba(0,0,0,.7);
                    line-height:72px; font-size:28px; color:rgba(255,255,255,.5); text-shadow:0px -1px 0px rgba(0,0,0,.3);">
					<i class="fa fa-coins" aria-hidden="true"></i>
                    </div>
            </div>                  
            <div style="width:230px; float: left; background:none; text-align:left; color:#fff;
            text-shadow:0px -1px 1px rgba(0,0,0,.7);">
				<h3>Won&rsquo;t Break The Bank</h3>
				ChattrBox is faster than email, <span style="color:#72f54a;">30Xs cheaper</span> than 
				Text Messages &amp; awesome.
				<a href="/pricing" title="View Pricing" style="color:#72f54a;">View Pricing &raquo;</a>
                <!--Each week we give away <span style="color:#72f54a;">$25k</span> to a promising 
                Chicago Startup or Entrepreneur-->
            </div>      
            <div class="clear"></div>                   
     </div><!-- END OF 3RD COLUMN -->
     <div class="clear"></div>
    </div><!-- END OF ALL THE COLUMNS -->
    <div class="clear"></div>
    <!-- BOTTOM SECTION STARTS HERE -->

        <div class="" style="margin:0 auto; width:auto; background:none; color:#fff; text-shadow:none; text-align:center; 
        height:auto; font-weight:300; font-size:36px; line-height:42px; padding:0 15px 50px; 
		max-width:850px; font-family:'Open Sans',sans-serif;">
	        <br />
	        <div style="display:block; margin-bottom:10px">
				Download the ChattrBox Mobile App!<br />
	        </div>
			<div style="display:block; margin-bottom:10px; font-size:17px; line-height:22px;">
				Receive and check messages (and notifications) faster. 
				Plus, you&rsquo;ll get &ldquo;Rich&rdquo; Push Notifications - from people, businesses &amp; brands
				you love. Oh yeah, and did we mention it&rsquo;s free!
			</div>
			<div class="clear"></div>
	        <br />
        
			<a href="https://apps.apple.com/tr/app/chattrbox-messaging/id6446040828" target="_blank"><img 
				src="/static/images/btn_app_store.png" alt="Download ChattrBox on the App Store" 
				style="width:225px; margin-top:10px; margin-bottom:5px;" /></a>
				<a href="https://play.google.com/store/apps/details?id=com.thinapp.Chattr" target="_blank"><img 
            src="/static/images/btn_google_play.png" alt="Download on Google Play" 
            style="width:225px;  margin-top:10px; margin-bottom:5px;" /></a>
            
            <br /><br />
			<div style="font-size:14px;">
				<?php if ($_SESSION['loggedin']) { ?>
					<!-- Welcome, <?= $_SESSION['user']['name'] ?> -->
					<!--<a href="/auth/logout" class="">Logout</a>-->
					<a class="" href="/profile/edit" style="color:#fff;">Edit Acct</a>
					<span class="sep">&nbsp;/&nbsp;</span>
						<a href="/clients/dash" style="color:#ff0000; font-weight:600">
						<i class="fa fa-sliders" aria-hidden="true"></i> Console</a>
					<span class="sep">&nbsp;/&nbsp;</span>							
				<?php } else { ?>	
				<a class="" href="/auth/login" style="color:#fff;">Login</a>
					<span class="sep">&nbsp;/&nbsp;</span>
				<a class="" href="/auth/join" style="color:#fff;">Signup</a>
					<span class="sep">&nbsp;/&nbsp;</span>					
				<?php } ?>
				
				<a class="" href="/terms" style="color:#fff;">Terms</a>
	            <!--<span class="sep">/</span>
	            <a class="" href="/privacy">Privacy</a>-->
					<span class="sep">&nbsp;/&nbsp;</span>
				<a class="" href="/faq" style="color:#fff;">FAQ</a>
					<span class="sep">&nbsp;/&nbsp;</span>
				<a class="" href="/pricing" style="color:#fff;">Pricing</a> 
					<span class="sep">&nbsp;/&nbsp;</span>
				<a class="" href="/white-label" style="color:#fff;">White-Label</a>
					<span class="sep">&nbsp;/&nbsp;</span>
				<a class="" href="/about-us" style="color:#fff;">About</a>
					<span class="sep">&nbsp;/&nbsp;</span>
				<a class="" href="/how-it-works" style="color:#fff;">How It Works</a>
				<?php if ($_SESSION['user']['is_admin']) { ?>
					<span class="sep">&nbsp;/&nbsp;</span>
					<a href="/admin/dash" style="color:#ff0000; font-weight:600">
						<i class="fa fa-sliders" aria-hidden="true"></i> Admin</a>
				<?php } ?>
				<span class="sep">&nbsp;/&nbsp;</span>
				<a class="" href="/" style="color:#fff;"><i class="fa fa-refresh"></i></a>
			</div>
            <!--<div style="display:block; font-size:12px; margin-top:0px">Android App coming soon on Google Play</div>-->
            <!--<a class="rounded" href="http://getthinapp.com/">View Live Demo</a> <a href="#demos" 
            class="loginpop introlinks" rel="group1" style="font-weight:400;"><i class="fa fa-info-circle"></i></a>-->
        
        <!--&bull; 
        <a class="rounded" href="http://demo.thinapp.co/welcome">Unbranded Demo</a>-->
        </div>      
        <div class="clear"></div>   
    	<br />
    
    <!--<hr style="margin-top:0px; padding-top:0px;" />-->
    
</div>
    <!-- PAGE CONTAINER END -->
    
<?php include 'views/_footer.tpl.php'; ?>

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

<!-- LAPTOP SLIDER -->
<script defer>
jQuery(document).ready(function ($) {

    setInterval(function () {
        moveRight();
    }, 4500);
  
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
    
    $('#slider').css({ width: slideWidth, height: slideHeight });
    
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    
    $('#slider ul li:last-child').prependTo('#slider ul');  
    
    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 0, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 0, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function (e) {
        e.preventDefault();
        moveLeft();
        return false;
    });

    $('a.control_next').click(function (e) {
        e.preventDefault();
        moveRight();
        return false;
    });

}); 
</script>

<!-- 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 />
                            <strong>1-888-564-0081</strong> or <strong>new@getthinapp.com</strong></span></center>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- 2. ABOUT THINAPP -->
<div style="display:none;">
<div id="aboutthinapp" class="" style="max-width:850px;"><!-- max-width:550px; removed -->
    <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; 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">What <i>is</i> Thin&#923;pp?</h1>               
                            Thin&#923;pp is a fully completed and functional Hybrid App comprised of 2 powerful 
                            &amp; popular technologies that we found a way to blend quite seamlessly - in a way 
                            that wasn&rsquo;t really possible up until recently.
                            <br />
                            <h2 style="text-align:center;">
                                It's 85% Web App + 15% Native App.
                            </h2> 

                            It&rsquo;s a mostly <strong>web-based solution (hence Web App)</strong>, written in the 
                            most common and latest industry standard languages. This makes 
                            it more flexible, more affordable, faster to develop and more accessible than traditional 
                            <strong>Native Apps (ie. ones you download from the App Stores)</strong> while still 
                            having the same look, feel and functionality of a Native App.                                   
                            <br /><br /><br />
                            
                            <center>
                            <img src="/static/images/logos/html_5_logo.png" height="50" style="height:50px; width:auto; margin-right:10px;" />
                            <img src="/static/images/logos/css3_logo.png" height="50" style="height:50px; width:auto; margin-right:10px;" />
                            <img src="/static/images/logos/php_logo.png" height="50" style="height:50px; width:auto; margin-right:10px;" />
                            <img src="/static/images/logos/mysql_logo.png" height="50" style="height:50px; width:auto; margin-right:10px;" />
                            <img src="/static/images/logos/bootstrap_logo.png" height="50" style="height:50px; width:auto; margin-right:10px;" />
                            <img src="/static/images/logos/javascript_logo.png" height="50" style="height:50px; width:auto; margin-right:10px;" />
                            <img src="/static/images/logos/ios_logo.png" height="50" style="height:50px; width:auto; margin-right:10px;" />
                            <img src="/static/images/logos/android_logo.png" height="50" style="height:50px; width:auto; margin-right:10px;" />
                            </center>                           
                            <br />                                                          
                            
                            <h4 style="text-align:center; margin-bottom:0px;">Mobile Websites vs Web Apps</h4>
                            <center><img src="/static/images/webapp/web-app-vs-native-app-comparison.png" 
                            style="width:99%; max-width:1000px; height:auto;" /></center>
                            <br />                          
                            
                            As you can see above, the most noticeable difference (at first glance) between a 
                            typical Mobile Website and a Web App is that <span style="font-weight:600;">Web Apps are 
                            fullscreen</span> (just like Native Apps). 
                            <br /><br />
                            
                            <h4 style="text-align:center;">App Icons</h4>                           
                            <center>The next thing we wanted to tackle was making it easy to access a Web App.</center>
                            <br />
                            
                            <center><img src="/static/images/webapp/app_icon_template_white.png" 
                            style="width:125px; height:auto;" /></center>
                            
                            <br />
                            Most people don&rsquo;t even know Web Apps have their own App Icons, just like Native Apps. 
                            In fact, once it&rsquo;s on your phone&rsquo;s homescreen there&rsquo;s no way to even tell
                            the difference. 
                            
                            <br /><br />
                            
                            <div style="max-width:575px; text-align:center; margin:0 auto; font-size:12px; line-height:16px;">
                                Image on left - This was previously the only known way to prompt a User to add a 
                                Web App&rsquo;s Icon to your phone&rsquo;s homescreen.
                                <br /><br />
                                Image on right - Thin&#923;pp&rsquo; also has a custom full screen prompt that only 
                                appears if you are not in the Web App and automatically pulls your App Icon. 
                            </div>
                            <br />
                            <center>
                            <img src="/static/images/webapp/screenshot_prompt_addto.png" 
                            style="width:49%; max-width:300px; height:auto; margin:0 10px;" />                          
                            <img src="/static/images/webapp/screenshot_prompt.png" 
                            style="width:49%; max-width:300px; height:auto; margin:0 10px;" />                  
                            </center>
                            <br /><br />
                            <div style="max-width:575px; text-align:center; margin:0 auto; font-size:12px; line-height:16px;">
                                Note: Apple has been very hesitant to create a method for 
                                linking to a Web App (or Web App Icon) directly 
                                or starting the Add To Homescreen function from a link, however Google has recently made
                                it possible for Android devices (and we&rsquo;ll soon be adding this to ThinApp).
                            </div>                          
                            
                            <br /><br />
                            <div style="width:auto; padding-left:25px; border-left:5px solid #ccc;">
                                Up until recently there wasn&rsquo;t even much support by Apple, Google and Microsoft
                                for mobile browser based features that contribute to the web app experience 
                                (ie the browser on your cell phone). In fact, the evolution of the mobile browsers 
                                themselves had been fairly slow up until the middle of 2015. This could possibly be 
                                because Apple, Google and Microsoft&rsquo;s focuses were all respectively elsewhere.
                                We, and a small movement of developers around the world, however have been eagerly 
                                tracking the progress of this technology with each new device (and mobile operating
                                system) release...slowly improving until things finally arrived to a point where we
                                felt the technology was good enough to present a really valuable solution/product.                      
                            </div>
                            <br />  
                            
                            <h4>Closing Summary</h4>    
                            So we can go on and on - and there is a LOT more, but it would probably be better if you
                            just test the live demo (close this window and the button is under the phone slider).
                            <br /><br />
                            And, to summarize - We drew from 20 years of making websites, 50+ years of combined web development, 
                            internet/online, UI/UX design and internet marketing experience and a large amount of obsessive 
                            determination to create a custom coded, hand crafted product that is so complete it can be 
                            used out of the box or quickly adapted to practically any idea - thus making Thin&#923;pp
                            the most powerful, flexible website (and App) platform in the world. 
                            <br /><br />
                            Here are just some of the other features we took the liberty of pre-building into Thin&#923;pp:
                            <ul style="float:left; width:43%; display:inline-block; font-weight:600;">
                                <li>Swipe / Touch capabilities</li>
                                <li>Real-time GPS Tracking</li>
                                <li>Full Screen &ldquo;App&rdquo; Mode</li>
                                <li>+App Icon Prompting</li>
                                <li>Web Services API</li>
                            </ul>
                            <ul style="float:left; width:40%; display:inline-block; font-weight:600;">
                                <li>SMS Text Messages API</li>
                                <li>Robust Member Profiles</li>
                                <li>Authorize.net Payments</li>
                                <li>PayPal Payments Integration</li>
                                <li>E-Commerce Store</li>
                                <li>and much, much more.</li>
                            </ul>
                            <div class="clear"></div>                           
                            <span style="font-size:12px; line-height:16px;">Note: We opted not to tackle accelerometer, 
                            gyroscope, motion graphics, etc (ie. things commonly used in exercise and gaming Apps) as 
                            those don't make up the bulk of the Apps that are actually out there.</span>                        
                        
                            <br />
                            
                            <h4 style="text-align:center;">OUR 2 THIN&#923;PP SOLUTIONS</h4>
                            
                            <div class="clear"></div>
                            
                            <div style="float:left; width:43%; display:inline-block; padding-right:25px;">
                                <h4>Thin&#923;pp Web App</h4>   
                                
                                Is built on a fully responsive website, which may just be the mostimpressive thing itself 
                                because it adapts to every screen, size and device and has all the latest technology from 
                                Javascript to JQuery, Ajax, Lightboxes, tons of Member based features, very visual based 
                                and clean, etc.
                            </div>
                            
                            <div style="float:left; width:43%; display:inline-block;">
                                <h4>Thin&#923;pp Native App Wrapper</h4>
                                
                                This gives you the best of both worlds. We can put your App(s) in the App Store(s) - and
                                under our Developer Licenses, saving you another $99. We have testing, deployment, hosting, 
                                backups, security and pretty much everything you need - down to a science.
                            </div>
                            
                            <div class="clear"></div>
                            
                            <br />
                            
                            <h4>Request An Invite (Native App Wrapper)</h4>
                            
                            Close this screen and scroll to the bottom of the Overview page to enter your email to 
                            receive an invite to test our live App Wrapper out, which is also how we&rsquo;ll let 
                            you test your Native App(s) out before they are submitted and deployed (ie. made live). 
                            <br />
                            <span style="font-size:12px; color:#aaa">Note: Screenshots will be posted here shortly 
                            and we should have a couple of live Apps in the various App Stores within the next few 
                            weeks.</span>
                            
                            <br /><br /> 
                            
                            So when you become a Thin&#923;pp Owner - you're getting a $50,000+ App/Website for about 
                            $499 + how much ever you decide to add/spend in exclusive customizations. There's currently 
                            no value like this in the world. 
                            <br />
                            <span style="font-size:12px; color:#aaa; line-height:16px;">Note: The $499 is essentially 
                            our "license" fee for doing all this work upfront and ahead of 
                            time - and it helps us continue to improve the Thin&#923;pp Platform, as well as support it.
                            We think it's a very small fee to ask. We're basically taking all the guess work out of the 
                            entire process and giving people what they need vs what they can afford to pay for. 
                            </span>
                            <br /><br /><br />
                            <center><span style="font-size:18px; color:#ff6600">Call or email us now to get started<br />
                            <strong>1-888-564-0081</strong> or <strong>new@getthinapp.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.com/embed/xaOWhueT7xY?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; max-height:300px;
                    height:auto; padding:0px; background:blue !important; margin-top:-30px !important;">
                        <div style="background:#fff; float:left; 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">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 />
                            <strong>1-888-564-0081</strong> or <strong>new@getthinapp.com</strong></span></center>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>
</div>