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

<link rel="stylesheet" href="/static/css/jquery.datetimepicker.css"/>
<script src='/static/js/jquery.datetimepicker.js'></script>

<style type="text/css">
	body { color:#333; -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; }
	span, a, a:active, a:hover {
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale; 
	}
	#header .wrap-top-menu { z-index: 99999999999999 !important; }
	
	#mmen { display:none; }
/*	.bottomicons, .bottomtray {
		display: nonexx;
	}*/

/* ########################################################## */
/* ####### DATETIMEPICKER AND LABELS FOR BOOKING FORM ####### */
/* ########################################################## */    

    .xdsoft_datetimepicker  .xdsoft_timepicker{
        /* changed from 58px */
        width: 88px;
        float:left;
        text-align:center;
        margin-left:8px;
        margin-top:0px;
    }
    .xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_prev,
    .xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_next{
        float:none;
        background-position:-40px -15px;
        height: 15px;
        width: 30px;
        display: block;
        /* changed from 14px */
        margin-left:29px;
        margin-top:7px;
    }
  .label{
    text-align:right;
    font-weight:300;
  }
  #submit{
    text-align:center;
  }
  input { padding:10px; height:30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border:1px solid #aaa; }
  textarea#body {  -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border:1px solid #aaa; }
  td { padding-top:10px; padding-bottom:10px; }
  button { border:1px solid rgba(255,255,255,.1); padding:15px 0; width:200px; margin:0; border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    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; }
  button:hover { background:red; }

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

div.spacer { }
.pricingpage a, .pricingpage a:active, .pricingpage a:link, .pricingpage a:visited {
	color: #2996cc;
	text-shadow: none;
} /* OLD BLUE 0072C4 */
#introsection a:hover {
	color: #2eacee; 
}
a.loginpop.introlinks, a.loginpop.introlinks:active, a.loginpop.introlinks:link, a.loginpop.introlinks:visited { 
    color:#0072C4; }
a.loginpop.introlinks:hover { color:#fff; }
.pricingpage a:hover {
	color: #000;
}
a[href^=tel] {
    color:#0194fb; 
    text-shadow:0px -1px 0px rgba(0,0,0,.3);
}
.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.pricing-header  { 
    font-weight: 800px;
    font-size: 36px;
    font-family: Montserrat,sans-serif;
    margin-bottom:15px;
}

.pricing-header-div {
    display: block;
    text-align: center;
    height: 2px;
    width: 70px;
    background-color: #2996cc;
    margin: 0 auto;
    margin-bottom: 15px;
}

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;
}
input[type="submit"] {
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
}
.rounded2 a { 
    background:#2996cc;
    /** GREEN background:#00AF14; **/
    color:#fff;
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    padding:15px 70px;
    font-size:16px;
    display:inline-block;
}
.rounded3 a { 
    background:#ccc;
    color:#444;
    text-shadow:0px 1px 0px #fff;
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    padding:15px 70px;
    font-size:16px;
    display:inline-block;
}
.rounded2 a:hover, .rounded3 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);
}
#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, 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-weight:500; font-size:17px; line-height:25px; margin-bottom:5px; }
h4 { font-size:28px; 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%;
}

ul.benefits li {
	line-height:30px;
	margin-bottom: 15px;
	text-shadow:0px 1px 0px #fff;
}

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

    #slider {
      width:281px;
      height:500px;
      position: relative;
      overflow: hidden;
      margin:91px 0 0 2px;
      background:none;
    }
    #slider ul { 
        width:281px;
        height:500px;
        position: relative;
        margin: 0;
        background:none;
        padding: 0;
        list-style: none;
    }
    #slider ul li {
        width:281px;
        height:500px;
        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;
  -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;
}

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

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

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

.squishtext { padding:0 200px; }

.maintagline { font-weight:300; color:#222; font-size:22px; line-height:30px; text-align:center; padding:0px 15px; margin-top:0px; }
.subtagline { font-size:15px; line-height:22px; margin-top:10px; }

.recommended { 
	background-color: #BA00F1;
	background-image: linear-gradient(45deg, #BA00F1, #FD0172);
	text-shadow: -1px -1px -1px rgba(0,0,0,.5);
	padding:5px 0;
	font-size:12px;
	letter-spacing: 2px;
}

.beta { font-size:17px; line-height: 25px; }

	#blockit {
		max-width: 400px;
	}
	.blockit-left {
		display: inline-block;
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		min-height: 100% !important;
		background: url('/static/client/bg_food.jpg') no-repeat;
		background-size: cover;
		float: left;
	}
	.blockit-right {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 50%;
		height: auto;
		min-height: 100%;
		background: #f3f3f3;
		float: left;
		overflow-y: scroll;
	}

	.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%;
	}
	a.btn-o, a.btn-o:active, a.btn-o:visited, a.btn-o:link {
		color:#eee !important;
	}
	a.btn-o:hover {
		color: #fff !important;
	}	
	.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);
		padding: 10px 15px;
		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: #82be55; */
		background-color: #099bf2;
		background-image: linear-gradient(45deg, #099bf2, #8b248d);
		text-shadow: -1px -1px -1px rgba(0,0,0,.5);
	}
	
	ul.lifetimelist {
		background: none;
		padding-left: 22px;
		padding-right: 0px;
		line-height: 24px;
		text-align: left;
		max-width: 500px;
		margin: 0 auto;
	}

	ul.lifetimelist li {
		margin-bottom: 15px;
		background: none;
	}
	
	.expanddiv {
		background:#fff; font-size:17px; line-height:26px;
		padding:15px 20px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius:8px;
		font-family:Montserrat,Raleway,'Open Sans',Helvetica,Verdana,sans-serif; margin-top:15px;
		border:3px solid #ddd;
	}
	
	.fa-chevron-down {
		color: #ccc;
	}

/* ################################################################################ */
/* ###########################      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) {
	.maintagline { font-weight:300; color:#222; font-size:22px; line-height:28px; text-align:center; padding:0px 5px; margin-top:0px; }
	.subtagline { font-size:14px; line-height:20px; margin-top:10px; }
    center#planslogo { display:none; }
    .spacer { padding-top: 65px; }  
    .layout-2cols { }
    #devicecontainer { margin-left:0px; margin-right:0; width:340px; }
	ul.benefits {
		/*		background:red;*/
		margin-block-start: .5em;
		margin-block-end: .5em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 20px;
		padding-inline-end: 20px;
	}
	ul.benefits li {
		/*background:red;*/
		width: 100%;
		font-weight: 400;
		color: #333;
		text-shadow: 0px 1px 0px #fff;
		margin-right: 0px;
		line-height: 29px;
		font-size: 21px;
		margin-bottom: 15px;
	}
}
/* 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; }
    /* BACKGROUND IMG background: #ccc url(/static/images/bgmount.jpg) no-repeat top center; */ 
    #rightsidecol { padding-bottom:50px; width:100%; margin-left:0px; margin-right:0px; }   
    .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;
    }
    .squishtext { padding:0 20px; }
}
/* ########################## */
@media (max-width: 585px) {
    .leftcol1 { margin-top: -40px !important; }
    #rightsidecol { margin-top: -60px !important; padding-top:0px !important; }
    input#email { margin-left:0px !important; margin-right:0px !important; font-family: 'Open Sans',sans-serif; max-width:250px; }
    button.greensubmit{ display:block; width:100%; }
    .squishtext { padding:0 20px; }
	.pricingpage {
		padding: 0 5px;
	}
	.beta { font-size:15px; line-height: 22px; }
	.grid_8 {
		display: block; width:100%;
	}
	ul.benefits {
/*		background:red;*/
		margin-block-start: .5em;
	    margin-block-end: .5em;
	    margin-inline-start: 0px;
	    margin-inline-end: 0px;
	    padding-inline-start: 20px;
		padding-inline-end: 20px;
	}
	ul.benefits li {
		/*background:red;*/
		width:100%;
		font-weight:400;
		color:#333;
		text-shadow:0px 1px 0px #fff;
		margin-right:0px;
		line-height: 26px;
		font-size:19px;
		margin-bottom: 15px;
	}
}
/* ########################## */
@media (max-width: 480px) {
    .leftcol1 { margin-top: -40px !important; }
    #rightsidecol { margin-top: -60px !important; padding-top:0px !important; }
    input#email { margin-left:0px !important; margin-right:0px !important; font-family: 'Open Sans',sans-serif; max-width:250px; }
    button.greensubmit{ display:block; width:100%; }
    .squishtext { padding:0 20px; }
	.pricingpage {
		padding: 0 5px;
	}
	.beta { font-size:15px; line-height: 22px; }
}
</style>

<!-- PAGE CONTAINER -->
<div id="lpcontainer" class="pricingpage" style="background: #fff; overflow:hidden;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
    <!-- #1 FULL WIDTH CONTAINER STARTS HERE -->
    <div style="width:100%; height:auto; background:none;">

        <!-- CONTAINER_12 STARTS HERE-->
        <div class="layout-2cols">
			<div id="introsection" class="content grid_12" style="background:none; margin-top:20px; margin-bottom:0px; 
			padding:0;">
			
				<a href="/"style="font-weight:500; color:#aaa;" title="Go Back">
					<div style="position:absolute; margin-top:15px; left: 10px; width:30px; height:30px; background:none;
				font-size:28px; text-align:center;">
					<i class="fa fa-angle-left" aria-hidden="true"></i>
				</div></a>
				
				<center>
					<a href="/"><img src="/static/client/devshares_logo_black_med.png" alt="DevShares"
						style="max-width:500px; width:85%; margin-bottom:0px"></a></center>

<!--				<div class="beta" style="display:none; border:1px solid #ccc; padding:15px; font-weight:300; margin-bottom:20px;
					font-family:  Montserrat, 'Open Sans',Helvetica, 'Helvetica Neue', Verdana, Arial,sans-serif;">
					<span style="font-weight:600; color:#de1000">CHATTRBOX BETA</span> (4/16/2023) - While we put the
					finishing touches on the ChattrBox Platform, we invite
					you to join our Early Adopters BETA Program where members will get instant access to all ChattrBox&rsquo;s
					features (and services) +
					receive/split a share of 5% Equity, plus monthly RevShare payouts. See BETA Membership packages below...
					<!--<a href="#" style="font-weight:600;" title="Join BETA Now">Join BETA now &raquo;</a>-->
				<!--</div>-->

				<div class="maintagline" style="background:none; text-align:center; 
					color:#000; padding:10px 0; font-weight:500; font-size:24px; line-height:34px;
					font-family: Montserrat, 'Open Sans',Helvetica, 'Helvetica Neue', Verdana, Arial,sans-serif;">
					 
					 <span style="color:#00A1FE; font-weight:700">Pre-Launch:</span> Lifetime VIP Pass + Ownership
					 
					 <!--Buy Credits to use 
					 for DevShares <a href="/managed-services/" title="Managed Services" 
					 	style="color:#00A1FE; font-weight:500">Service Requests</a>-->

				</div>
				<div class="clear"></div>
			</div><!-- END OF INTRO SECTION -->

			<!--            <div class="grid_4">
			Sidebar...
			</div> -->               
        </div><!-- END OF LAYOUT 2 COLS -->

	</div><!-- FULL WIDTH CONTAINER ENDS HERE -->        
    
    <div class="clear"></div>       
    
	<!-- ################################################### -->

	<!-- #1 FULL WIDTH CONTAINER STARTS HERE -->
	<div style="width:100%; height:auto; background:none;">
		<div class="layout-2cols" style="background:none; min-height:400px;
			-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
			<div class="grid_8" style="max-width:98%; position:relative; background:#f0f0f0; min-height:400px;
				-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin-top:15px;
				-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
				<div class="maintagline" style="text-align:left; background:none;">
					
					<h2 style="font-family: Montserrat, 'Open Sans',Helvetica, 'Helvetica Neue', Verdana, Arial,sans-serif; 					font-weight:600; color:#000; margin-bottom:10px; line-height:40px; text-shadow:0px 1px 0px #fff;">
						<!--DΞVSHARES VIP MEMBERSHIP--> $4.99/credit
					</h2>
					
					<div style="font-size:16px; text-align:center; text-shadow:0px 1px 0px #fff;
					font-family: Montserrat, 'Open Sans',Helvetica, 'Helvetica Neue', Verdana, Arial,sans-serif; 
					font-weight:400; color:#000; max-width:80%; margin:0 auto;">
					note: most services cost 2 credits (expedite = 1 credit)
					<!--<a href="/upgrade" style="font-weight:600;" 
					title="Click here for recurring, auto-renew option">$1.99/mo recurring</a> 
					or $2.99/mo pay-as-you-go-->
					</div>
					
					<ul class="benefits" style="list-style: none;">
						<li>
							<img src="/static/images/icons/black_checkmark.png" alt="-" 
							align="absmiddle" style="height:20px; margin-top:-5px;"> Credits are good for 
							1 yr <i id="chevron_pp" class="fa fa-chevron-down open"></i>
							
							<div id="pp_inputs" class="expanddiv" style="display:none;">
								We encourage you to pre-purchase credits because we actually 
								grant higher priority the more you purchase and the earlier. 
								<br />
								
							</div>
							<!--<span style="font-weight:500;">fully-branded copy</span>-->
						</li>
						<li>
							<img src="/static/images/icons/black_checkmark.png" alt="-"
							align="absmiddle" style="height:20px; margin-top:-5px;"> Credits can
							also be used for Expediting your Service Request<i id="chevron_pp2" 
							class="fa fa-chevron-down open"></i>
							
							<div id="pp_inputs2" class="expanddiv" style="display:none;">
								When you mark a Request as High Priority or Expedited it 
								will automatically deduct a preset amount of Credits, which
								will be visible on the Open Request page.
								<br />

							</div>
						</li>
						<li>
							<img src="/static/images/icons/black_checkmark.png" alt="-"
							align="absmiddle" style="height:20px; margin-top:-5px;"> Get Complimentary
							Entries into Daily Giveaways <i id="chevron_pp3" 
							class="fa fa-chevron-down open"></i>
							
							<div id="pp_inputs3" class="expanddiv" style="display:none;">
								Each Credit you purchase earns you 1 complimentary entry into
								Daily DevShares Giveaways where we give away cash, prizes, 
								Project/Job Budgets, Free Service Tasks &amp; more<br />

							</div>
						</li>
						<li>
							<img src="/static/images/icons/black_checkmark.png" alt="-"
							align="absmiddle" style="height:20px; margin-top:-5px;"> Credits increase your
							Membership Level + Priority <i id="chevron_pp4" 
							class="fa fa-chevron-down open"></i>
							
							<div id="pp_inputs4" class="expanddiv" style="display:none;">
								Your Membership Level determines the overall priority of the
								Service Requests you submit, as well as your bonus entries
								in Daily DevShares Giveaways.<br />

							</div>
						</li>
<!--						<li>
							<img src="/static/images/icons/black_checkmark.png" alt="-"
							align="absmiddle" style="height:25px; margin-top:-5px;"> More new perks 
							coming soon! <i id="chevron_pp7" 
							class="fa fa-chevron-down open"></i>
							
							<div id="pp_inputs7" class="expanddiv" style="display:none;">
								We are anticipating lots of new ideas to arise from our Members/Players, 
								Creators and our own internal team as we push Passphrase into the
								limelight, so get ready for some awesome new VIP Benefits + Perks.
								Plus, we&rsquo;ll be dropping a Super VIP Membership soon too.<br />

							</div>
						</li>-->
<!--						<li>
						</li>-->
					</ul>
<!--					
					<i class="fa fa-check" aria-hidden="true"></i>
					<i class="fa fa-group" aria-hidden="true"></i>
					<br /><br />-->
					<!--<i class="fa fa-arrow-right" aria-hidden="true"></i>-->
					<br />
					<div style="text-align:center; margin-top:7px;">
					
						<a href="#" style="display:block; font-weight:500; margin:0 auto"
							title="Upgrade Now" class="btn-o">Upgrade Now
							<i class="fa fa-angle-right" aria-hidden="true"></i></a>
							<small style="font-size:12px">COMING SOON</small>
							<!--<small style="font-size:12px">for $1.99/mo recurring option</small>-->
					</div>
					<div class="clear"></div>
					
<!--					<center><i class="fa fa-arrow-right" aria-hidden="true"></i>
					<a href="https://chattrboxx.com/how-it-works"style="font-weight:500;"
					title="Learn more">Learn more about ChattrBox Loyalty Coins
						<i class="fa fa-angle-right" aria-hidden="true"></i></a>
					</center>-->
					<br />
<!--					<div style="display:none; font-size:14px; line-height:22px; text-align:center;">
						Note: The month-to-month option is in the dropdown on this page.
						Click the <span style="font-weight:500;">Upgrade Now</span> button for the recurring option. 
						<span style="font-weight:500;"> Membership is totally optional</span>. You can 
						simply buy coins to enter Passphrase Challenges.
					</div>-->
					<br />
					
				</div>
				<div class="clear"></div>
			</div>
			
			<div class="grid_4" style="max-width:98%; min-height:500px; background:none; 
			-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
				
				<?php if ($_SESSION['loggedin']) { ?>
	            <?php } else { ?>
				<?php } ?>
				
				<div class="paymentbox" style="max-width:100% !important; 
					background:#fff; overflow:hidden; position:relative;
					-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding:10px 0 0 !important;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
					display:nonex; min-height:200px; margin:0 auto !important">

					<div id="smart-button-container" style="display:nonex; width:90%; margin:0 5%; background:none;
						-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
						<div style="text-align: center;">
							<div style="margin-bottom: .75rem; display:nonex; text-align:center;">
								<!--							<p style="font-size:22px; font-weight:400;">
								<h3 class="vmtext">Sponsor Voice Menus</h3>
								</p>-->
								<h1 style="font-size:26px; line-height: 35px; color:none;
							text-shadow: 0px 0px 0px rgb(0 0 0 / 0%); margin: 10px 10px 0; padding: 10px 0 5px">
							<!--<img src="/static/chattrbox/gold/gold_coin_sparkle.gif" alt="C" align="absmiddle" 
							style="height:35px; margin-top:-5px;">--> 
							<span style="font-family: Montserrat, 'Open Sans',Helvetica, Verdana, Arial,sans-serif; 
							font-weight:600; color:#000" class="vmtext">BUY CRΞDITS</span>
								</h1>
								<div style="color:#777; line-height:20px;">
									<!--Note: We currently use Paypal because we have a 
									special designation with extremely low transaction fees
									for small amounts (ie. $.25-$5).-->
								</div>
								<br />

								<span style="color:#000; font-size:14px;">Your registered email
								(<a href="/auth/join" class="linkonwhite"
								title="Signup free">Signup free</a>):</span><br />
								<input type="text" class="txt" id="comment_box" name="comment_box"
								onblur="myBlurFunction()" placeholder="Your registered DevShares email"
								<?php if ($_SESSION['loggedin'] && $_SESSION['user_id']) : ?>
								value="<?php echo $_SESSION['user']['email'] ?>"
								<?php endif; ?>
								style="padding:10px; width:94%; max-width:94%; margin:1% 3% 0;
								-webkit-box-sizing: border-box; border:1px solid #ccc;
								-moz-box-sizing: border-box; box-sizing: border-box; font-size:15px; height:50px;">
								<br /><br />
		<select id="item-options" style="width:94%; max-width:94%; margin:0 3%; background:#fff;
				-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
		 font-size:17px; height:50px; border:1px solid #ccc; padding-left:10px">
		<!--<option value="Lifetime VIP Pass - Bronze $.10" price=".10">1 Menu - $.10 USD</option>-->
				
				<option value="VoiceCom RSVP - $10" price="10.00">VoiceCom RSVP - $10</option>
				<!--<option value="1 DevShares Credit - $4.99" price="4.99">1 Credits - $4.99</option>
				<option value="2 DevShares Credits - $8.99" price="8.99">2 Credits - $8.99 ($4.50/ea)</option>
				<option value="3 DevShares Credits - $11.99" price="11.99">3 Credits - $11.99 ($4/ea)</option>
				<option value="4 DevShares Credits - $15.99" price="15.99">4 Credits - $15.99 ($4/ea)</option>
				<option value="5 DevShares Credits - $19.99" price="19.99">5 Credits - $19.99 ($4/ea)</option>
				<option value="10 DevShares Credits - $37.49" price="37.49">10 Credits - $37.49 ($3.75/ea)</option>
				<option value="25 DevShares Credits - $87.00" price="87.00">25 Credits - $87.00 ($3.48/ea)</option>
				<option value="50 DevShares Credits - $149.00" price="149.00">50 Credits - $149.00 ($2.98/ea)</option>
				<option value="100 DevShares Credits - $249.00" price="249.00">100 Credits - $249.00 ($2.49/ea)</option>-->
				
				<!--<option value="VIP Membership (1 mo) - $2.99" price="2.99">VIP Membership (1 mo) - $2.99</option>
				<option value="VIP Membership (Lifetime) - $9.99" price="9.99">VIP Lifetime Membership - $9.99</option>-->
			</select>
			<select style="visibility: hidden" id="quantitySelect"></select>
							</div>
							<?php if ($_SESSION['loggedin']) { ?>
								<div id="paypal-button-container"></div>
				            <?php } else { ?>
				            	Please login first to make a purchase...
				            	<br /><br />
								<a href="#login" style="display:block; font-weight:500; margin:0 auto" 
								title="Login" class="btn-o loginpop">Login
								<i class="fa fa-angle-right" aria-hidden="true"></i></a>
				            	<br /><br />
							<?php } ?>
							
						</div>
					</div>
				</div>
				<!-- END OF PAYPAL DIV -->
				
				<script src="https://www.paypal.com/sdk/js?client-id=AZsMPHqx0TlbCyV_8AY5LlNzzmilpaP8lbfQQQ4iPRpk_WC8hOWFWdvnGMgln4RJAAO2oWd7g1PhhMtu&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"> </script>
				<script>
				function myBlurFunction()
				{
					comment_txt = comment_box.value;
				}
				function initPayPalButton()
				{
					var comment_txt = comment_box.value;
					//var comment_txt = "";
					//alert(comment_txt);
					var shipping = 0;
					var itemOptions = document.querySelector("#smart-button-container #item-options");
					var quantity = parseInt();
					var quantitySelect = document.querySelector("#smart-button-container #quantitySelect");
					if (!isNaN(quantity)) {
						quantitySelect.style.visibility = "visible";
					}
					var orderDescription = 'DevShares Credits - ' . comment_txt;
					if (orderDescription === '') {
						orderDescription = 'Item';
					}
					paypal.Buttons({
						style: {
							shape: 'pill',
							color: 'white',
							layout: 'vertical',
							label: 'pay',

						},
						createOrder: function(data, actions) {
							var selectedItemDescription = itemOptions.options[itemOptions.selectedIndex].value;
							var selectedItemPrice = parseFloat(itemOptions.options[itemOptions.selectedIndex].getAttribute("price"));
							var tax = (0 === 0 || false) ? 0 : (selectedItemPrice * (parseFloat(0)/100));
							if (quantitySelect.options.length > 0) {
								quantity = parseInt(quantitySelect.options[quantitySelect.selectedIndex].value);
							} else {
								quantity = 1;
							}
							tax *= quantity;
							tax = Math.round(tax * 100) / 100;
							var priceTotal = quantity * selectedItemPrice + parseFloat(shipping) + tax;
							priceTotal = Math.round(priceTotal * 100) / 100;
							var itemTotalValue = Math.round((selectedItemPrice * quantity) * 100) / 100;
							var invoice_idval = 'paypal checkout';
							return actions.order.create({
								purchase_units: [{
										description: orderDescription,
										custom_id: comment_txt,
										invoice_id: invoice_idval, 
										amount: {
											currency_code: 'USD',
											value: priceTotal,
											breakdown: {
												item_total: {
													currency_code: 'USD',
													value: itemTotalValue,
												},
												shipping: {
													currency_code: 'USD',
													value: shipping,
												},
												tax_total: {
													currency_code: 'USD',
													value: tax,
												}
											}
										},
										items: [{
												name: selectedItemDescription,
												unit_amount: {
													currency_code: 'USD',
													value: selectedItemPrice,
												},
												quantity: quantity
											}]
									}]
							});
						},
						onApprove: function(data, actions) {
							return actions.order.capture().then(function(orderData) {

								// Full available details
								console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

								// Show a success message within this page, e.g.
								const element = document.getElementById('paypal-button-container');
								element.innerHTML = '';
								element.innerHTML = '<h3 class="vmtext" style="text-shadow: 0px 0px 0px rgb(0 0 0 / 0%);">Thank you for your support and payment!</h3>';

								// Or go to another URL:  actions.redirect('thank_you.html');

							});
						},
						onError: function(err) {
							console.log(err);
						},
					}).render('#paypal-button-container');
				}
				initPayPalButton();
				</script>
			</div><!-- GRID 4 ENDS HERE -->
		</div><!-- LAYOUT-2-COLS ENDS HERE -->
		<div class="clear"></div>
	</div><!-- FULL WIDTH CONTAINER ENDS HERE -->
	
 	<div class="clear"></div> 
	
	<!-- full width -->
	<div style="width:100%; height:auto; background:none;">
		<div class="layout-2cols" style="background:none;">
			<div class="grid_12">
				<div class="maintagline" style="background:none; text-align:left">

					<br />
					<div style="border-top:3px solid #ccc; max-width:200px; margin:0 auto;">&nbsp;</div>

					<span style="font-weight:600; text-transform: uppercase; font-size:17px;
					font-family:Montserrat,'Open Sans', Helvetica, Verdana, sans-serif;">WANT TO CHAT?
					GET IN TOUCH</span>
					<br />
					If you&rsquo;d like to speak someone or take a
					tour + demo of the DevShares Platform, please feel free to contact us at
					<a href="mailto:contact@devshares.com?subject=DevShares" title="Click to email"
						style="font-weight:500;">contact@devshares.com</a> or
					<a href="tel:312-857-3511" title="Click to call"
					style="font-weight:500;">312-857-3511</a> (Chicago Local).

					<br /><br />

					<span style="font-weight:600; text-transform: uppercase; font-size:17px;
					font-family:Montserrat,'Open Sans', Helvetica, Verdana, sans-serif;">NEED OTHER
					PAYMENT OPTIONS</span>
					<br />
					Just email us, we take everything.
					<br /><br /><br /><br /><br /><br /><br /><br />
				</div>
			</div>
		</div>
	</div>	
	
</div>  <!-- END OF PAGE CONTAINER -->


<div class="morediv" style="display:none; position:fixed; left:0; bottom:0; z-index:9999999999999999; font-size:18px;
		line-height:22px; border-top:1px solid #417bff; width:100%;
		background:rgba(0,0,0,.80); color:#aaa; vertical-align: middle;
		text-shadow:0px -1px 0px rgba(0,0,0,.4); padding:8px 0 25px; min-height:50px; text-align:center;">

	<div style="position:relative; height:50px; max-width:350px; margin:0 auto;
		background:none; vertical-align: middle;">

		<div style="float:left; margin:2px 0px 0 0px; display: table; height:50px;
				text-align:left; font-weight:500; color:#fff; padding:0 7px 0px 7px;">

			<span style="display: inline-block; display: table-cell; font-size:14px;
			vertical-align: middle; line-height: normal;">Join the BETA Program</span>

		</div>
		<div style="position:absolute; right:0; bottom:0; float:right; margin-right:7px">
			<a class="btn-o" href="https://chattrboxx.square.site/product/chattrbox-beta-membership-5-initiation-fee/31?cs=true&cst=custom" style="color:#fff; text-align:center;" 
			title="Join ChattrBox BETA Program">Join now &rsaquo;</a>
		</div>

	</div>

	<div style="display:none; font-size:14px; margin-bottom:10px; font-weight:400;">
		<span style="font-weight:600;">Add your email</span> to get early access to Voice Ordering.
	</div>


	<form id="subscribeform" class="" target="_self" action="/auth/subscribe" method="post" style="display:none;">

		<input id="subemail" name="subemail" placeholder="Enter your email"
		style="max-width:330px; width:90%; height:40px; background: rgba(0,0,0,.7); color:#fff; font-size:17px;
		margin-bottom:10px; border:1px solid #777; font-weight:500;">

		<input id="subscribe" type="submit" value="Reserve now" class=""
		style="min-width:125px; width:90%; height:60px; max-width:300px; font-size:15px; margin-bottom:10px;" /><br />

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

		<!--<span style="text-shadow:0px -1px 0px rgba(0,0,0,.4); font-weight:300;">
		&nbsp;&nbsp;<span id="totalsubs"
		style="color:#00E21A; background:none; font-weight:300"><?= $total_subscribers ?></span>
		<span style="color:#eee; font-weight:300;">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 in! Check your email for your
		Reservation Code.</span>
		</span>-->

	</form>

</div>
    
<!--</div>--><!-- LP PAGE CONTAINER ENDS -->
<!-- PAGE CONTAINER END -->

<script type="text/javascript" defer>
	$(document).ready(function() {
		$(".timepicker").datetimepicker({
			hours12: false,
			format: 'g:i A m-d-Y',
			formatTime: 'g:i A',
			datepicker: true,
			timepicker: true,
			timepickerScrollbar: true,
			step: 30
		});

		$('#comingsoon,#comingsoon2,#comingsoon3,.comingsoon').click(function (e) {
			alert('Standard Pricing Coming Soon (Mon Apr 10,2023). Please see our special BETA Member Plan if you\'d like early access.');
			//$("#chevron_pp").toggleClass('fa-chevron-down fa-chevron-down open');
			//$("#pp_inputs").toggle();
			e.preventDefault();
		});

		$('#chevron_pp').click(function () {
			$("#chevron_pp").toggleClass('fa-chevron-down fa-chevron-down open');
			$("#pp_inputs").toggle();
		});

		$('#chevron_pp2').click(function () {
			$("#chevron_pp2").toggleClass('fa-chevron-down fa-chevron-down open');
			$("#pp_inputs2").toggle();
		});
		
		$('#chevron_pp3').click(function () {
			$("#chevron_pp3").toggleClass('fa-chevron-down fa-chevron-down open');
			$("#pp_inputs3").toggle();
		});
		
		$('#chevron_pp4').click(function () {
			$("#chevron_pp4").toggleClass('fa-chevron-down fa-chevron-down open');
			$("#pp_inputs4").toggle();
		});
		
		$('#chevron_pp5').click(function () {
			$("#chevron_pp5").toggleClass('fa-chevron-down fa-chevron-down open');
			$("#pp_inputs5").toggle();
		});
		
		$('#chevron_pp6').click(function () {
			$("#chevron_pp6").toggleClass('fa-chevron-down fa-chevron-down open');
			$("#pp_inputs6").toggle();
		});
		
		$('#chevron_pp7').click(function () {
			$("#chevron_pp7").toggleClass('fa-chevron-down fa-chevron-down open');
			$("#pp_inputs7").toggle();
		});
		
		$('#chevron_pp8').click(function () {
			$("#chevron_pp8").toggleClass('fa-chevron-down fa-chevron-down open');
			$("#pp_inputs8").toggle();
		});
	});
</script>
<!-- <a href="javascript:void(0);"></a> or javascript:;
<a href="#!" class="someclass">Text</a>
<a href="javascript:void(0);" class="someclass">Text</a>
-->
    
<?php include 'views/_footer.tpl.php'; ?>