<!DOCTYPE html>
<html lang="en-us" class="no-js">
	<head>
		<meta charset="utf-8">
		<title>scw creative</title>
		<meta name="description" content="service design, strategic thinking, strategy, experience design, ux design, visual design, design realization">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="scw creative">

        <!-- ================= Favicons ================== -->
        <!-- Standard -->
        <link rel="shortcut icon" href="favicon.ico">
        <!-- Retina iPad Touch Icon-->
        <link rel="apple-touch-icon" sizes="144x144" href="img/logo-reverse.svg">
        <!-- Retina iPhone Touch Icon-->
        <link rel="apple-touch-icon" sizes="114x114" href="img/logo-reverse.svg">
        <!-- Standard iPad Touch Icon--> 
        <link rel="apple-touch-icon" sizes="72x72" href="img/logo-reverse.svg">
        <!-- Standard iPhone Touch Icon--> 
        <link rel="apple-touch-icon" sizes="57x57" href="img/logo-reverse.svg">

		<!-- ============== Resources style ============== -->
		<link rel="stylesheet" type="text/css" href="css/style-multi-scroll.css" />
	</head>

	<body>

		<!-- +++ Page loading +++ -->
		<div id="loading">
			<div id="preloader">
				<!-- Your logo -->
				<img src="img/logo-reverse.svg" alt="" class="loading-logo" />

				<span class="loading-text">Just a few moments please ...</span>

				<span class="load">
					<span class="loading-dot"></span>
					<span class="loading-dot"></span>
					<span class="loading-dot"></span>
					<span class="loading-dot"></span>
				</span>
			</div>
		</div>

		<!-- +++ START - MultiScroll sections +++ -->
		<div id="multi-div">

			<!-- OPEN - LEFT PART -->
			<div class="ms-left">

				<!-- +++ START - Home Left +++ -->
				<div class="ms-section" id="left1">

					<!-- Your logo -->
	        		<img src="img/logo-reverse.svg" alt="" class="home-logo" />

					<!-- Background slideshow & light overlay -->
					<div class="slideshow-home-left">
						<div class="slideshow-overlay-left"></div>
					</div>

					<div class="intro">

						<!-- Big title  -->
						<h1 class="open-anim opacity-0">Hi there</h1>

						<p class="open-anim opacity-0">We are a small service design consultancy stocked with blend of expert research, strategic analysis and user centered design principles to transform brands, grow businesses and make people’s lives better.</p>

						<!-- Line 280 in js/jquery.multiscroll.js is the place to select the anchor scrolling to the section of your choice -->
						<!-- The data-target value is for mobile devices -->
						<a id="button-more" data-target="right2" class="light-btn open-anim opacity-0">Our philosophy</a>

						</div>

					<!-- Scroll indicator -->
					<div class="scroll-indicator">

						<!-- Line 280 in js/jquery.multiscroll.js is the place to select the anchor scrolling to the section of your choice -->
						<!-- The data-target value is for mobile devices -->
						<a id="indicator-scroll" data-target="right2"><i class="icon ion-ios-arrow-down"></i></a>

					</div>

				</div>
				<!-- +++ END - Home Left +++ -->

				<!-- +++ START - About Left +++ -->
				<div class="ms-section" id="left2">

					<div id="invert-slideshow" class="slideshow-about"></div>

				</div>
				<!-- +++ END - About Left +++ -->

				<!-- +++ START - Contact Left +++ -->
				<div class="ms-section" id="left5">

					<div class="text-left-block">

						<div class="left-center-text split-section">

							<div class="left-center-part">
										
								<h2>Get in touch</h2>

		                		<p class="subtitle">We're available, what can we help you with? Call us at <a href="tel:16465041384" class="phone-mail-link">+1 646 504 1384</a>, send an email at <a href="mailto:hello@scwcreative.com" class="phone-mail-link">hello@scwcreative.com</a> or use the form below:</p>

		                		<div class="row">

				                    <div class="col-xs-12 col-sm-12 col-lg-12">

				                        <!-- START - Contact Form -->
				                        <form id="contact-form" name="contact-form" method="POST" data-name="Contact Form">

				                            <div class="row">

				                            	<!-- ! Anti-spam field ! Invisible for users, the major part of bots will write something in this field, then, they will be blocked and no spam in your inbox will come.  -->
				                                <div class="col-xs-12 col-sm-12 col-lg-12 display-none">
				                                    <div class="form-group">
				                                        <input type="text" id="checking" class="form form-control" placeholder="Leave this field empty" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Leave this field empty'" name="checking" data-name="Checking">
				                                    </div>
				                                </div>

				                                <!-- Full name -->
				                                <div class="col-xs-12 col-sm-6 col-lg-6">
				                                    <div class="form-group">
				                                        <input type="text" id="name" class="form form-control" placeholder="Name*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name*'" name="name" data-name="Name" required>
				                                    </div>
				                                </div>

				                                <!-- E-mail -->
				                                <div class="col-xs-12 col-sm-6 col-lg-6">
				                                    <div class="form-group">
				                                        <input type="email" id="email" class="form form-control" placeholder="Email*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email*'" name="email-address" data-name="Email Address" required>
				                                    </div>
				                                </div>

				                                <!-- Company -->
				                                <div class="col-xs-12 col-sm-6 col-lg-6">
				                                    <div class="form-group">
				                                        <input type="text" id="company" class="form form-control" placeholder="Company" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Company'" name="company" data-name="Company" required>
				                                    </div>
				                                </div>

				                                <!-- Phone -->
				                                <div class="col-xs-12 col-sm-6 col-lg-6">
				                                    <div class="form-group">
				                                        <input type="tel" id="phone" class="form form-control" placeholder="Phone*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Phone*'" name="phone" data-name="Phone" required>
				                                    </div>
				                                </div>

				                                <!-- Message -->
				                                <div class="col-xs-12 col-sm-12 col-lg-12">
				                                    <div class="form-group">
				                                        <textarea id="text-area" class="form textarea form-control" placeholder="Your message here" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your message here" name="message" data-name="Text Area" required></textarea>
				                                    </div>
				                                    <span class="sub-text">* Required fields</span>
				                                </div>

				                            </div>

				                            <!-- Form submission -->
				<button type="submit" id="valid-form" class="light-btn open-anim opacity-0">Send</button>

				                        </form>
				                        <!-- END - Contact Form -->
				                        
				                        <!-- START - Answer for the contact form is displayed in the next div, do not remove it. -->       
				                        <div id="block-answer">

				                            <div id="answer"></div>

				                        </div>
				                        <!-- END - Answer... -->

				                    </div>

		               			</div>
							
								<br/><p class="copyright">© Copyright 2005-2017 scw creative. All rights reserved.</p>

							</div>

						</div>

					</div>

				</div>
				<!-- +++ END - Contact Left +++ -->

			</div>
			<!-- CLOSE - LEFT PART -->

			<!-- OPEN - RIGHT PART -->
			<div class="ms-right" id="right-part">

				<!-- +++ START - Home Right +++ -->
				<div class="ms-section" id="right1">

					<!-- Background slideshow & light overlay -->
					<div class="slideshow-home-right">
						<div class="slideshow-overlay-right"></div>
					</div>

				</div>
				<!-- +++ END - Start Right +++ -->

				<!-- +++ START - Philosophy Right +++ -->
				<div class="ms-section" id="right2">

					<div class="text-left-block">

						<div id="invert-text" class="left-center-text split-section">

							<div class="left-center-part">

								<h2>Our philosophy</h2>

								<p>The world is changing and with it, we need new ways of thinking. That means culling a brand's story, examining all elements of service and refinement of an experience playbook through iteration and investigation.</p><br/>

							<p>From strategy through to implementation, our team of connected specialists — all experts in their respective fields — work together to help our clients maximize the opportunities created by the changing digital world. The specifics of our process are flexible and adapt to each our clients differently.</p><br/>

							<p>We're working on a new version of our catalog of work. Please stay tuned.</p>

							</div>

						</div>

					</div>

				</div>
				<!-- +++ END - About Right +++ -->

				<!-- +++ START - Contact Right +++ -->
				<div class="ms-section" id="right5">

					<div class="map-info split-section">

						<div id="map"></div>

					</div>

				</div>
				<!-- +++ END - Contact Right +++ -->

			</div>
			<!-- CLOSE - RIGHT PART -->

		</div>
		<!-- +++ END - MultiScroll sections +++ -->

		<!-- +++ START - Newsletter panel +++ -->
		<div id="info">

			<!-- Cross to close the Newsletter panel on top right -->
			<button class="close-newsletter"><i class="icon ion-close-round"></i></button>

			<div class="content">

				<!-- Your logo -->
        		<img src="img/logo.png" alt="" class="brand-logo" />

                <p class="subtitle">Sign up to scw creative news before our launching on the 30th of August for the chance to <strong>win a scratched off lottery ticket dud for you & the person of your choice!</strong></p>

                <!-- START - Newsletter Form -->
				<div id="subscribe">

	                <form action="php/notify-me-2.php" id="notifyMe" method="POST">

	                    <div class="form-group">

	                        <div class="controls">
	                            
	                        	<!-- Field  -->
	                        	<input type="text" id="mail-sub" name="email" placeholder="Click here to write your email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Click here to write your email'" class="form-control email srequiredField" />

	                        	<!-- Spinner top left during the submission -->
	                        	<i class="fa fa-spinner opacity-0"></i>

	                            <!-- Button -->
	                            <button class="btn btn-lg submit">Get notified</button>

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

	                        </div>

	                    </div>

	                </form>

    			</div>
    			<!-- END - Newsletter Form -->
			
			</div>

			<!-- Answer for the newsletter form is displayed in the next div, do not remove it. -->
			<div class="block-message">

				<div class="message">

					<p class="notify-valid"></p>

				</div>

			</div>

			<p class="spam-news"><i class="fa fa-lock"></i> We hate spam just as much as you do. Your email will stay secret.</p>

		</div>
		<!-- +++ END - Newsletter panel +++ -->		

		<!-- +++ Button used for opening the newsletter panel +++ -->
		<!-- ><a id="open-newsletter" class="action-btn">Notify me</a> -->
		
		<!-- +++ List of social media on the bottom right +++ -->
		<div id="social-nav">

			<ul>
				<!-- Facebook -->
				<li>
					<a href="https://www.facebook.com/scwcreative" target="_blank"><i class="fa fa-facebook"></i></a>
				</li>

				<!-- Twitter -->
				<li>
					<a href="https://twitter.com/scwcreative" target="_blank"><i class="fa fa-twitter"></i></a>
				</li>

			</ul>

		</div>

		<!-- Root element of PhotoSwipe, the gallery. Must have class pswp. -->
		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

		    <!-- Background of PhotoSwipe. 
	        	It's a separate element as animating opacity is faster than rgba(). -->
		    <div class="pswp__bg"></div>

		    <!-- Slides wrapper with overflow:hidden. -->
		    <div class="pswp__scroll-wrap">

		        <!-- Container that holds slides. 
		            PhotoSwipe keeps only 3 of them in the DOM to save memory.
		            Don't modify these 3 item elements, data is added later on. -->
		        <div class="pswp__container">
		            <div class="pswp__item"></div>
		            <div class="pswp__item"></div>
		            <div class="pswp__item"></div>
		        </div>

		        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
		        <div class="pswp__ui pswp__ui--hidden">

		            <div class="pswp__top-bar">

		                <!--  Controls are self-explanatory. Order can be changed. -->

		                <div class="pswp__counter"></div>

		                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

		                <button class="pswp__button pswp__button--share" title="Share"></button>

		                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

		                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

		                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
		                <div class="pswp__preloader">
		                    <div class="pswp__preloader__icn">
		                      <div class="pswp__preloader__cut">
		                        <div class="pswp__preloader__donut"></div>
		                      </div>
		                    </div>
		                </div>

		            </div>

		            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
		                <div class="pswp__share-tooltip"></div> 
		            </div>

		            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
		            </button>

		            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
		            </button>

		            <div class="pswp__caption">
		                <div class="pswp__caption__center"></div>
		            </div>

		        </div>

		    </div>

		</div>
		<!-- /. Root element of PhotoSwipe. Must have class pswp. -->

		<!-- ///////////////////\\\\\\\\\\\\\\\\\\\ -->
        <!-- ********** jQuery Resources ********** -->
        <!-- \\\\\\\\\\\\\\\\\\\/////////////////// -->

        <!-- * Libraries jQuery, Easing and Bootstrap - Be careful to not remove them * -->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.easings.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

		<!-- MultiScroll plugin -->
		<script src="js/jquery.multiscroll.js"></script>

        <!-- Slideshow plugin -->
        <script src="js/vegas-multiscroll.js"></script>

		<!-- Google Maps API and Skin -->
		<script src="http://maps.google.com/maps/api/js"></script>
		<script src="js/map.js"></script> 

		<!-- PhotoSwipe Core JS file -->
		<script src="js/photoswipe.js"></script> 

		<!-- PhotoSwipe UI JS file -->
		<script src="js/photoswipe-ui-default.js"></script>

		<!-- Contact form plugin -->
		<script src="js/contact-me.js"></script>

		<!-- Newsletter plugin -->
		<script src="js/notifyMe.js"></script>

		<!-- Main JS File -->
		<script src="js/main-multi-scroll.js"></script>

	</body>

</html>