<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

		<!-- General Properties and Resources -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/flexslider.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/epicslider.css" />
<link rel="stylesheet" type="text/css" href="css/shortcodes.css" />
<link rel="stylesheet" type="text/css" href="css/media_queries.css" />
<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css' /> -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,800' rel='stylesheet' type='text/css' />
<link rel="icon" type="image/ico" href="/images/favicon.ico" />
		<!-- Unique to main index -->
		<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css"/>
		<title>Captivate Intl. | The Vision to the Manifestation</title>
		<script type="text/javascript" src="js/iOS-timer.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-touch-swipe-1.0.js"></script>
		<script type="text/javascript" src="js/jquery.epicslider.js"></script>
		<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
		<script type="text/javascript" src="js/jquery.ajaxloading.js"></script>
		<script type="text/javascript" src="js/jquery.lazyload.js"></script>
		<script type="text/javascript" src="js/waypoints.min.js"></script>
		<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
		<script type="text/javascript" src="js/onepage.js"></script>
		<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/contact.js"></script>

		<script type="text/javascript">
			var isMobile = false;

			if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i)) {
				isMobile = true;
			}

			/*iOS5 fixed-menu fix*/
			var iOS5 = false;
			if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
				iOS5 = true;
			}

			$(window).load(function() {

				//call slider
				$('.epicSlider').epicSlider({
					loop : true, //Boolean: whether slideshow should loop or not
					slideShow : true, //Boolean: use slideshow or not
					autoPlay : true, //Boolean: autoplay uplon load or not
					slideShowInterval : 7000, //Integer: slideshow cycling speed, in milliseconds
					transitionSpeed : 800, //Integer: transitions speed, in milliseconds
					startSlide : 0, //Integer: starts at 0
					shuffleSlides : false, //Boolean: shuffle slides or not
					stack : false, //Boolean:stack slides
					easing : 'easeInOutQuint', //String: easing method - see http://jqueryui.com/demos/effect/easing.html
					fx : 'none', //String: none, fade, leftToRight, topToBottom
					fxmobile : 'leftToRight', //String: mobile effect -  none, fade, leftToRight, topToBottom
					pattern : true	//Boolean: add pattern or not
				});
			});
		</script>
	</head>

	<body>

		<div id="hidden">
			<script type="text/javascript">
				<!--//--><![CDATA[//><!--
					var images = new Array()
					function preload() {
						for ( i = 0; i < preload.arguments.length; i++) {
							images[i] = new Image()
							images[i].src = preload.arguments[i]
						}
					}
					preload("/images/slides/bubble/bubble-bg.jpg",
							"/images/slides/bubble/bubble-main.png",
							"/images/slides/bubble/bubble-shrapnel-small.png",
							"/images/slides/bubble/bubble-shrapnel-big.png",
							"/images/slides/impression/impression-bg.jpg",
							"/images/backgrounds/process/howwedothings-default.jpg",
							"/images/backgrounds/process/ProcessBG_01.jpg",
							"/images/backgrounds/process/ProcessBG_02.jpg",
							"/images/backgrounds/process/ProcessBG_03.jpg",
							"/images/backgrounds/process/ProcessBG_04.jpg",
							"/images/backgrounds/process/ProcessBG_05.jpg")
				//--><!]]>
			</script>
		</div>

		<!--start wrapper-->
		<div id="wrapper">

			<!--start header-->
<div class="header header-main">
	<div class="inner">
		<div class="logo-container">
			<div class="logo">
				<a class="navigateTo" href="#homepage"><img src="images/logo.png" title="Captivate Intl." alt="Captivate Intl. Logo"/></a>
			</div>
		</div>

		<!--mobileMenu toggle-->
		<div class="mobileMenuToggle">
			<a href=""></a>
		</div>

		<!--navigation-->
		<ul class="navigation">
			<li><a class="navigateTo" href="#homepage">Home</a></li>
			<li><a class="navigateTo" href="#about">About</a></li>
			<li><a class="navigateTo" href="#folio">Folio</a></li>
			<li><a class="navigateTo" href="#contact">Contact</a></li>
		</ul>
		
		<!-- fixed to-top button-->
		<a href="#homepage" class="to-top navigateTo">
			<img src="/images/page-top.png">
		</a>
		
	</div>
</div>
<!--end header-->
			<!--start homepage-->
			<div id="homepage" class="homepage section">

				<!--start slider-->
				<div id="epicSlider1" class="epicSlider theme-default slider-wrapper">
					<div id="slides">						
						<img id="audience-bg" src="images/slides/audience/BW_AudienceSlide_1600x1200.png" alt="Captivate (verb): attract and hold the interest of; charm." title="#html-content3"/>
						<img src="images/slides/bubble/bubble-bg.jpg" alt="Break out of your bubble" title="#html-content4"/>
						<img src="images/slides/impression/impression-bg.jpg" alt="Make a lasting impression." title="#html-content5"/>
					</div>

					<!-- Slide 3 - Definition -->
					<div class="epic-caption centered epic-impact-2" id="html-content3">
						<div>
							<div id="captivate-caption">
								<div id="captivate-container">
									<h2>CAPTIVATE</h2><br/>
									<img src="images/kaptevat.png">
								</div>
								<div id="captivate-divider" class="hidden-phone">
									<!-- vertical bar -->
								</div>
								<div id="captivate-description">
									<span class="light-text">Verb</span><br/>
									Attract and hold the interest and attention of; charm.
								</div>
								
							</div>
						</div>
						<img id="audience-guy" src="images/slides/audience/audience-guy-full.png" alt="Captivate (verb): attract and hold the interest of; charm." />
						<img id="audience-dude" src="/images/slides/audience/audience-dude.png">
						<img id="audience-lady" src="/images/slides/audience/audience-lady.png">
					</div>

					<!-- Bubble -->
					<div class="epic-caption centered epic-impact-2" id="html-content4">
						<div id="bubble-caption">
							<div id="bubble-text">
								<h2>Break Out <br class="hidden-phone" />of your <br class="hidden-phone" />Bubble</h2>
							</div>
							<img id="bubble-main" src="/images/slides/bubble/bubble-main.png" />
							<img id="bubble-shrapnel-small" src="/images/slides/bubble/bubble-shrapnel-small.png" />
							<img id="bubble-shrapnel-big" src="/images/slides/bubble/bubble-shrapnel-big.png" />
						</div>
					</div>
					
					<!-- Impression -->
					<div class="epic-caption centered epic-impact-2" id="html-content5">
						<div id="impression-caption">
							<div id="impression-text">
								<h2>Make a lasting <br/>IMPRESSION</h2>
							</div>
							<img id="impression-man" src="/images/slides/impression/impression-man.png" />
							<img id="impression-butterflies" src="/images/slides/impression/impression-butterflies.png" />
							<img id="impression-splatter" src="/images/slides/impression/impression-splatter.png" />
							<!--<img id="impression-splash" src="/images/slides/impression/impression-splash.png" />-->
						</div>
					</div>


				</div>
				<!--end slider-->
				<div class="section-button"><img class="page-up navigateTo" src="images/down-arrow.png" /></div>
			</div>
			<!--end homepage-->

			<!--start page 1-->
			<div id="about" class="page odd section">

				<!--start p1 content-->
				<div class="content clearfix">

					<!--section title-->
					<div class="section-title about-title who-we-are-title">
						<h3>Who <span class="red">We</span> Are</span></h3>
						<div class="path-container">
							<img class="path1" src="/images/path1.png" />
						</div>
						<!-- <h5><span>AND</span> WHAT <span>MAKES </span> US <span>UNIQUE</span></h5> -->
					</div>
					<!--end section title-->

					<div class="who-we-are-text">
						<p>Captivate is a creative agency located in Edison, NJ.</p>
						<p>It is our <span id="passion" class="large-text-fade">passion</span> to bring ideas to life, capture the unexpected, and hold fast the
						<p>attention of our audience.  Exceptionalism is not a word but a <span id="lifestyle" class="large-text-fade">lifestyle.</span></p>
						<p>Settle for nothing less than <span id="extraordinary" class="large-text-fade">extraordinary</span>. If something must be done...<br/>
						<p>do it with passion, vibrancy, and raw emotion, or it is not worth doing.</p>
						<p>Dig deep and know that at our core all of us desire to create. So we do. <span id="create" class="large-text-fade red">We create.</span></p>
					</div>

					<div class="clearfix"></div>
										
					<div class="section-title" id="services-section-title">
						<div class="path-container">
							<img class="path2 visible-desktop" src="/images/path2.png" />
						</div>
						<h3>What <span class="red">We</span> Do</h3>
						<div class="path-container"><img class="path3 visible-desktop" src="/images/path3.png" /></div>
					</div>
					
					<div id="services-intro">
						<p><span class="typo-large">Everything</span> we do is with the sole purpose to deliver <span class="typo-large">your brand</span></p>
						<p>to your audience with the intent to <span class="typo-large red">capture</span> their attention and to strongly hold it.</p>
					</div>
					
					<div class="services-boxes-container">
						
						<div class="services-box-container">
							<div class="services-box brand-identity">
								<img class="brand-grey" src="/images/services/brand-icon-grey.png">
								<img class="brand-color"src="/images/services/brand-icon-color.png">
								<p>brand<br/>identity</p>
							</div>
							
							<div class="brand-text">
								<p>Your mark is meant to do just that, leave a mark.  It is meant make a lasting impression on the consciousness of your audience.  The remnant of impact is the hallmark of a powerful brand.  Conceptualize the message of your organization and encapsulate it in a single frame. The crystallization of your brand occurs when the mark is translated across many forms of media. Logo, print collaterals, mediums, and even into the physical space of your environment.</p>				
							</div>
						</div>
						
						
						<div class="services-box-container">
							<div class="services-box web">
								<img class="web-grey"src="/images/services/web-icon-grey.png">
								<img class="web-color"src="/images/services/web-icon-color.png">
								<p>web</p>
							</div>
						
							<div class="web-text">
								<p>Let us not just create a  website.  Let us create an experience of deep immersion into the world that is yours.  All coded experiences are not created equal. Consider your audience, the devices by which they receive the message. We not only make the web responsive we make your audience responsive to the web.</p>
								
								<p>We walk a fine thin line between the beauty of the form, and the function of the code. Our code team does not just stop with the front-end experience, as derived in pixels, we continue to develop back-end logic. When your web experience demands the need for deeper development, we show up with swords, ready to slay the dragon.</p>
							</div>
						
						</div>
						<div class="services-box-container">
							<div class="services-box print-design">
								<img class="print-grey"src="/images/services/print-icon-grey.png">
								<img class="print-color"src="/images/services/print-icon-color.png">
								<p>print<br/>design</p>
							</div>
							
							<div class="print-text">
								<p>Pressing and marking material for the purpose of dispersion of ideas is ancient, instinctual, and effective. We understand that moving pixels and code into the physical realm requires a translation while maintaining the original intent.  The language of design as spoken through the dialect of print and production is as beautiful as an Italian opera song lyric inked with a fountain pen on scrolled parchment.  Touch and believe your brand.</p>					
							</div>
							
						</div>
					</div>
					
					<h6 class="team-title">Our Team</h6>
					<p>
						<p><span class="dropcap">O</span>ur team is a tribe. A tribe of dedicated people with a common goal, to create beautiful things. We create in our sleep.</p>
						<p>The lines of the experience gets blurred when the dreams of our clients become reality.</p>
					</p>

					<div class="column_one_third team">
						<div class="round-thumb-container">
							<div class="round-thumb">
								<span><img class="lazy" src="images/profile-pics/tony.jpg" alt=""/></span>
							</div>
						</div>

						<h5 class="name">Tony Dimayuga</h5>
						<p class="job-title">Creative Director/Professional DJ</p>
						<p>Husband, Father, Creationist & pursuer of the beautiful.</p>
					</div>

					<div class="column_one_third team">

						<div class="round-thumb-container">
							<div class="round-thumb">
								<span><img class="lazy" src="images/profile-pics/dino.jpg" alt=""/></span>
							</div>
						</div>

						<h5 class="name">Dino Cicala</h5>
						<p class="job-title">Founder/Chief Dishwasher</p>
						<p>
							Designer, creator, entrepreneur.<br/>
							A passion for innovation and determination to deliver.
						</p>
					</div>

					<div class="column_one_third team clearfix last">
						<div class="round-thumb-container">
							<div class="round-thumb">
								<span><img class="lazy" src="images/profile-pics/mike.jpg" alt=""/></span>
							</div>
						</div>

						<h5 class="name">Michael Sorensen</h5>
						<p class="job-title">Code Viking</p>
						<p>
							Master of HTML, CSS, Javascript.<br/>
							Sent from the North to forge quality websites. 
						</p>
					</div>
					
				</div>
							
				<!--start teaser-->
				<div id="teaser-1" class="teaser fixed" style="background-color: #000; background-image: url(images/backgrounds/process/howwedothings-default.jpg);">
					<div class="info-container" id="process-container">
						<div class="info">
							<div class="info-inner">
								
								<div class="content clearfix"></div>
								
								<div class="section-title process-section-title">
									<h3>How <span>We</span> Do <span>Things</span></h3>
								</div>
								
								<!--chart-->
								<div class="chart-container process-chart">
									<ul class="chart">
										<li style="width:20%" class="process">
											<div class="odd-bar discover-title">
												Discover
											</div>
											<div class="process-caption discover-text">
												Gathering information. Listening, and observing. Hearing and perceiving.
											</div>
										</li>
										<li style="width:20%">
											<div class="odd-bar define-title">
												Define
											</div>
											<div class="process-caption define-text">
												Digesting all information collected. Determining course of action, and scope of work.
											</div>
										</li>
										<li style="width:20%">
											<div class="odd-bar develop-title">
												Develop
											</div>
											<div class="process-caption develop-text">
												Taking the project brief and bringing items to life. Creation and construction.
											</div>
										</li>
										<li style="width:20%">
											<div class="odd-bar deploy-title">
												Deploy
											</div>
											<div class="process-caption deploy-text">
												Making all parts of the project available to be received and experienced by the target audience.
											</div>
										</li>
										<li style="width:20%">
											<div class="odd-bar decide-title">
												Decide
											</div>
											<div class="process-caption decide-text">
												Tracking the results. Adjust and determine next going forward steps.
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>

					<!--section-button-->
					<div class="section-button">
						<a class="page-up navigateTo" href="#about"></a>
					</div>
				</div>
				<!--end teaser-->

			</div>
			<!--end page 1-->
			

			<!--start page 2-->
			<div id="folio" class="page odd section">

				<!--start p2 content-->
				<div class="content clearfix folio-content">

					<!--section title-->
					<div class="section-title">
						<h3>OUR <span>WORK</span></h3>
						<h5><span>A</span> COLLECTION <span>OF</span> QUALITY</h5>
					</div>
					<!--end section title-->

					<!--start ajax content area-->
					<div id="ajaxwrapper">

						<!--project-close-button-->
						<div id="closeProject">
							<a href="#folio"></a>
						</div>

						<!--start loader-->
						<div id="loader"></div>

						<!--start content-->
						<div id="ajax-content-outer">
							<div id="ajax-content-inner"></div>
						</div>
						<!--end content-->
					</div>
					<!--end ajax content area-->

					<!--start grid-->
					<div id="folio-grid">

						<div class="folio-thumb-container">
							<div class="folio-thumb">
								<a href="#!folio/big-red-pin.php" title="Big Red Pin"><img class="lazy" src="images/circles/BRP.jpg" alt="Big Red Pin"/></a>
							</div>
						</div>

						<div class="folio-thumb-container">
							<div class="folio-thumb">
								<a href="#!folio/fuel.php" title="Fuel"><img class="lazy" src="images/circles/Fuel.jpg" alt="Fuel"/></a>
							</div>
						</div>

						<div class="folio-thumb-container">
							<div class="folio-thumb">
								<a href="#!folio/g-and-a.php" title="G&A"><img class="lazy" src="images/circles/G&A.jpg" alt="G&A"/></a>
							</div>
						</div>

						<div class="folio-thumb-container">
							<div class="folio-thumb ">
								<a href="#!folio/album-covers.php" title="Album Covers"><img class="lazy" src="images/circles/AlbumCovers.png" alt="Album Covers"/></a>
							</div>
						</div>
					</div>
				</div>
				<!--end p2 content-->

				<!--start teaser-->
				<div id="teaser-2" class="teaser fixed" style="background-color: #000; background-image: url(images/backgrounds/NYC_1600x1200_2_02.png); background-repeat: no-repeat;text-align:center;">
					<div class="info-container">
						<div class="info">
							<h5>RECENT <span>CLIENTS</span></h5>
							<div class="client-logos">
								<div class="client-container"><img src="images/logos/RecentClientLogos_greyscale_03.png" alt="Best Western"></div>
								<div class="client-container"><img src="images/logos/RecentClientLogos_greyscale_06.png" alt="Boys and Girls Club"></div>
								<div class="client-container"><img src="images/logos/RecentClientLogos_greyscale_07.png" alt="Crowne Plaza"></div>
							</div>
						</div>
					</div>
					<!--section-button-->
					<div class="section-button">
						<a class="navigateTo page-up" href="#folio"></a>
					</div>
				</div>
				<!--end teaser-->

			</div>
			<!--end page 2-->

			<!--start page 3-->
			<div id="contact" class="page odd section">

				<!--start p3 content-->
				<div class="content clearfix">

					<!--section title-->
					<div class="section-title">
						<h3>CONTACT <span>US</span></h3>
						<h5><span>LET'S</span> HAVE <span>A</span> DISCUSSION</h5>
					</div>
					<!--end section title-->

					<div class="column_one_third contact">
						<div class="round-thumb-container">
							<div class="round-thumb contact-thumb">
								<img class="lazy" src="images/circles/ContactUs2.jpg" alt="Contact Us"/>
							</div>
							<!--caption for lightbox-->
							<div class="fancybox-html">
								<!-- <p>Visit Our Office</p> -->
							</div>
						</div>

						<!---- ADDRESS/MAP ---->
						<p>
							<strong>tel:</strong> 732.734.0403<br/>
							<strong>mail:</strong><a href="mailto:admin@captivateintl.com">admin@captivateintl.com</a><br/><br/>
							<em>28 May St. Edison, NJ 08837</em><br/>
						</p>
						<div class="fancybox-html">
							<!-- <p>Visit Our Office</p> -->
						</div>
					</div>

					<div class="column_two_thirds last">
						<h4>Drop <span>a</span> Line</h4>
						<form action="php/contact.php" method="post" class="contactForm form" id="contact-form">
							<p><input type="text" name="name" class="required" id="name" value="Your Name" /></p>
							<p><input type="text" name="email" class="required" id="email" value="E-mail" /></p>
							<p><input type="text" name="subject" id="subject" value="Subject" /></p>
							<textarea  class="required" name="message" id="message" rows="" cols="">Message</textarea>
							<input type="submit" value="SEND" class="submit submitRedCap" id="submitform" />
							<span id="msg">* = required field</span>
						</form>
					</div>
				</div>
				<!--end p3 content-->

				<!--start teaser-->
				<div id="teaser-3" class="teaser fixed" style="background-color: #000; background-image: url(images/backgrounds/Office.png);">
					<div class="info-container">
						<div class="info">
							<h6><span>VISIT OUR</span> NEW JERSEY <span>OFFICE</span></h6>
						</div>
					</div>
					<!--section-button-->
					<div class="section-button">
						<a class="page-up navigateTo" href="#contact"></a>
					</div>
				</div>
				<!--end teaser-->

			</div>
			<!--end page 3-->

			<!--start footer-->
<div id="footer" class="even">
	<div class="content">
    	<!--social networks-->
        <ul class="socialSmall even">
        	<!-- <li><a class="pinterest" href=""></a></li> -->
            <li><a target="_blank" class="twitter" href="https://twitter.com/CaptivateStyle"></a></li>
            <li><a target="_blank" class="facebook" href="https://www.facebook.com/captivatestyle"></a></li>
            <!-- <li><a target="_blank" class="skype" href=""></a></li>
            <li><a target="_blank" class="forrst" href=""></a></li>
            <li><a target="_blank" class="googleplus" href=""></a></li>
            <li><a target="_blank" class="flickr" href=""></a></li>
            <li><a target="_blank" class="myspace" href=""></a></li>
            <li><a target="_blank" class="vimeo" href=""></a></li>
            <li><a target="_blank" class="dribbble" href=""></a></li> -->
            <li><a target="_blank" class="linkedin" href="http://www.linkedin.com/in/captivate"></a></li>
        </ul>
    	<div class="logo">
        	<a class="navigateTo" href="#homepage"><img src="images/footer-logo.png" alt=""/></a>
        </div>
        <p class="copyright">&copy; Captivate 
        	<script type="text/javascript">
        		var date = new Date();
        	
        		document.write(date.getFullYear());
        	</script> All rights reserved.</p>
    </div>
    
    
</div>
<!--end footer-->
		</div>
		<!--end wrapper-->

		<script type="text/javascript">
			// var _gaq = _gaq || [];
			// _gaq.push(['_setAccount', 'UA-36060950-4']);
			// _gaq.push(['_trackPageview']);
			//
			// (function() {
			// var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			// ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			// var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			// })();
		</script>

	</body>
</html>
