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

<script type="text/javascript">
$(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        
    });
});
</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; }
	footer#footer { padding-top:0; border-top:0px; }

/* ########################################################## */
/* ####### 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 */
	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);
	}
	#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, 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%;
	}

	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:24px; line-height:33px; 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; }
	
	#team { text-align:center; }
	.teammember { width:24%; margin:.5%; float:left; display:inline-block; text-align:center;
		background:none; padding:0; height:280px; border:0px solid #ccc; 
		box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
	
	#team img { height:200px; width:200px; margin:0 auto;
		-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius:50%; border:2px solid #ccc;
		margin-bottom:7px; margin-top:20px;	}
	#team img:hover { border:2px solid blue; }	
	.bluetext {
		text-transform: uppercase;
		font-size: 22px;
		line-height: 32px;
		font-family: Montserrat,'Montserrat-Light','Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
		color: #19a9f4;
		margin-bottom: 5px;
		font-weight: 600;
	}
	.blueheader {
		text-transform: uppercase;
		font-size: 30px;
		line-height:42px;
		font-family:Montserrat,'Montserrat-Light','Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
		color: #19a9f4;
		margin-bottom: 5px;
		font-weight:600;
	}
	.blackheader {
		text-transform: uppercase;
		font-size: 30px;
		line-height:42px;
		font-family:Montserrat,'Montserrat-Light','Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
		color: #000;
		margin-bottom: 5px;
		font-weight:600;
	}	

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

/* ######################################## */
/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {
	.teammember { width:32%; margin:.5%; }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	.teammember { width:49%; margin:.5%; }
}

/* ########################## */
@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 20px;
	}
	.beta { font-size:15px; line-height: 22px; }
}
/* ########################## */
@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 20px;
	}
	.beta { font-size:15px; line-height: 22px; }
	.teammember { width:98%; margin:1%; }
}
</style>

<!-- PAGE CONTAINER -->
<div id="lpcontainer" class="pricingpage" style="background: #fff; overflow:hidden;">
    <!-- #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:20px; padding:0; font-size:17px; line-height:27px;">                 
				
				<h1 style="text-align:center; color:#000;">Λbout Us</h1>
				
				Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
				Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
				when an unknown printer took a galley of type and scrambled it to make a type 
				specimen book. 
				
				<br><br>
				
				It has survived not only five centuries, but also the leap 
				into electronic typesetting, remaining essentially unchanged. It was popularised 
				in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
				passages, and more recently with desktop publishing software like Aldus 
				PageMaker including versions of Lorem Ipsum.
				
				<br><br>
				<br /><br />
				<div class="bluetext" style="color:#222; font-size:22px; line-height:42px; 
				text-align:center;">
					1. <i class="fa fa-envelope" aria-hidden="true"></i> TEXT<br />
					2. <i class="fa fa-comments" aria-hidden="true"></i> TEXT<br />
					3. <i class="fa fa-inbox" aria-hidden="true"></i> TEXT<br />
					4. <i class="fa fa-paper-plane" aria-hidden="true"></i> TEXT
				</div>
				
				<br /><br />
				<div class="blueheader" style="text-align:center;">
					<div style="border-top:3px solid #ccc; width:100px; margin: 0 auto; 
					margin-bottom:20px;"></div>
					BLUE HEADER TITLE HERE
					<div style="border-top:3px solid #ccc; width:100px; margin: 0 auto; 
					margin-top:20px;"></div>
				</div>
				<br /><br /><br />
				
				<div class="blueheader">
					BLUE HEADER TITLE HERE
				</div>
				
				<br /><br />
	
				<br />
				
				<br /><br />
				<hr />
				<br />
				<div class="blackheader">
					GET IN TOUCH
				</div>
				If you&rsquo;d like to speak with a member of our team, please feel free to 
					reach out via Email at
				<a href="mailto:contact@yoursite.com?subject=YourCompany" 
				title="Click to email" style="font-weight:600;">contact@yoursite.com</a> 
				or call us at <a href="tel:312-555-555" title="Click to call"
		 		style="font-weight:600;">312-555-5555</a> (Chicago Local).
				<br /><br /><br /><br />
			
				<h2 style="text-align:center;">OUR TEΛM</h2>
				<div id="team">
					<div class="teammember blockit">
						<img src="/static/images/team/ken.png" alt="Ken" style=""
						onerror="this.src='/static/system/default_avatar.png'" /><br>
						<strong>John D.</strong><br>
						<span style="font-weight:300; font-size:11px;">Founder</span>
					</div>
					<div class="teammember">
						<img src="/static/images/team/yoda.png" alt="Alex" style=""
						onerror="this.src='/static/system/default_avatar.png'" /><br>
						<strong>Λlex L.</strong><br>
						<span style="font-weight:300; font-size:11px;">CTO / Wise Jedi</span>				
					</div>		
					<div class="teammember">
						<img src="/static/images/team/chad.png" alt="Chad" style=""
						onerror="this.src='/static/system/default_avatar.png'" /><br>
						<strong>Jane D.</strong><br>
						<span style="font-weight:300; font-size:11px;">VP Client Relations</span>				
					</div>					
					<div class="teammember">
						<img src="/static/images/team/billy.png" alt="Billy" style=""
						onerror="this.src='/static/system/default_avatar.png'" /><br>
						<strong>Billy V.</strong><br>
						<span style="font-weight:300; font-size:11px;">Λpp Manager / Developer</span>				
					</div>			
					<div class="teammember">
						<img src="/static/images/team/ninja.png" alt="" style="Greg"
						onerror="this.src='/static/system/default_avatar.png'" /><br>
						<strong>Greg J.</strong><br>
						<span style="font-weight:300; font-size:11px;">Λpp Developer / Ninja</span>					
					</div>				
					<br><br>
					<div class="teammember">
						<img src="/static/images/team/theresa.png" alt="Theresa" style="" 
						onerror="this.src='/static/system/default_avatar.png'" /><br>
						<strong>Theresa L.</strong><br>
						<span style="font-weight:300; font-size:11px;">Graphic Designer</span>				
					</div>					
					<div class="teammember">
						<img src="/static/images/team/female.png" alt="" style="Melissa"
						onerror="this.src='/static/system/default_avatar.png'" 
						/>
						<br>
						<strong>Melissa F.</strong><br>
						<span style="font-weight:300; font-size:11px;">Project Manager</span>					
					</div>			
					<div class="teammember">
						<img src="/static/images/team/default.png" alt="Img" style=""
						onerror="this.src='/static/system/default_avatar.png'" /><br>
						<strong>You?</strong><br>
						<span style="font-weight:300; font-size:11px;">We’re hiring!</span>					
					</div>			
				</div>
				<div class="clear"></div>
                 
	 		</div>
    		<br /><br /><br />
        </div>
    </div>
    <div class="clear"></div>       
</div>  
    
<?php include 'views/_footer.tpl.php'; ?>