touch caro

js/studio.js

@@ -106,9 +106,11 @@ jQuery(document).ready(function($) {
 		var animac = new DrawFillSVG({elementId: 'svg-imac'});
 		var animac1 = new DrawFillSVG({elementId: 'sv'});
 		var animac2 = new DrawFillSVG({elementId: 'svg-mac'});
+		var animac3 = new DrawFillSVG({elementId: 'svg-device'});
 		animac.replay();
 		animac1.replay();
 		animac2.replay();
+		animac3.replay();
 	});
 
 	$('#caro').on('slide.bs.carousel', function() {

page-studio.php

@@ -22,12 +22,22 @@
 				<div class="item" data-id="1">
 					<div class="container animac">
 						<div class="row">
-							<div class="col-sm-6">
-								<h1 class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Web</h1>
+							<div class="col-sm-7">
+								<h1 style="margin:0px" class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Web</h1>
 								<h2 class="light cm tight wow fadeInUp" data-wow-delay="500ms">Development &amp; Design</h4>
-								<h5 class="light wow fadeIn" data-wow-delay="2s">&lt; Client and Server Side &gt;</h5>
+								<h5 class="light wow fadeIn" data-wow-delay="2s">Client and Server Side Programming<br />Application Development<br />Database Design</h5>
+								<svg id="svg-device" class="svg" height="250px" viewBox="0 0 280 250">
+								<path d="M274.9,238.2c0,6.2-5.1,11.3-11.3,11.3H95.3c-6.2,0-11.3-5.1-11.3-11.3V14.1c0-6.2,5.1-11.3,11.3-11.3h168.3c6.2,0,11.3,5.1,11.3,11.3V238.2z"/>
+								<path stroke="#FFFFFF" fill="#FFFFFF" d="M256.3,227.4H102.6V24.8h153.7V227.4z"/>
+								<path stroke="#FFFFFF" fill="#3A3A3A" d="M181.4,13.4c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2s0.9-2,2-2C180.6,11.4,181.4,12.3,181.4,13.4z"/>
+								<path stroke="#FFFFFF" fill="#3A3A3A" d="M184.8,238.6c0,2.9-2.4,5.3-5.3,5.3c-2.9,0-5.3-2.4-5.3-5.3s2.4-5.3,5.3-5.3C182.4,233.2,184.8,235.6,184.8,238.6z"/>
+								<path stroke="#FFFFFF" d="M69.8,241.1c0,4.6-3.8,8.4-8.4,8.4H11.9c-4.6,0-8.4-3.8-8.4-8.4V112.5c0-4.6,3.8-8.4,8.4-8.4h49.5c4.6,0,8.4,3.8,8.4,8.4V241.1z"/>
+								<path stroke="#FFFFFF" fill="#3A3A3A" d="M42,238.7c0,2.9-2.4,5.3-5.3,5.3c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3C39.6,233.3,42,235.7,42,238.7z"/>
+								<path stroke="#FFFFFF" fill="#FFFFFF" d="M66.8,226.5H6.5V122.6h60.3V226.5z"/>
+								<path stroke="#FFFFFF" fill="#3A3A3A" d="M46.9,114.9c0,1-0.8,1.8-1.8,1.8h-17c-1,0-1.8-0.8-1.8-1.8l0,0c0-1,0.8-1.8,1.8-1.8h17C46.1,113.1,46.9,113.9,46.9,114.9L46.9,114.9z"/>
+								</svg>
 							</div>
-							<div class="col-sm-6">
+							<div class="col-sm-5">
 								<svg id="svg-imac" class="bg" height="340px" viewBox="0 0 400 340">
 								<path fill="#9e9e9e" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M272.2,329.5l-23.3-23.3c-5.7-6.8-4.9-29.4-4.8-32.6h-88c0.1,3.2,0.9,25.7-4.8,32.6l-23.3,23.3c-1,1.1-1.4,2-1.3,2.7l0,0c0.6,6.2,5.4,5.1,10.9,5.1h125.1c5.4,0,10,1.1,10.8-4.5C273.7,332,273.5,331,272.2,329.5L272.2,329.5z"/>
 								<path fill="#E3E3E3" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M386.4,1H13.6C7.1,1,1.4,6.5,1.4,13.3v248c0,6.8,5.7,12.8,12.2,12.8h372.8c6.5,0,12.2-5.9,12.2-12.8v-248C398.6,6.5,392.9,1,386.4,1z M382.8,212.4H17.2V16h365.6V212.4z"/>
@@ -42,12 +52,12 @@
 				<div class="item" data-id="2">
 					<div class="container animac hide-svg">
 						<div class="row">
-							<div class="col-sm-6">
+							<div class="col-sm-4">
 								<h1 class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">UX</h1>
 								<h3 class="light cm tight wow fadeInUp" data-wow-delay="500ms">User Experience Design</h3>
-								<h5 class="light wow fadeIn" data-wow-delay="2s">Information Architecture<br/>Interaction Design</h5>
+								<h5 class="light wow fadeIn" data-wow-delay="2s">Information Architecture<br/>Interaction Design<br />Usability Testing</h5>
 							</div>
-							<div class="col-sm-6">
+							<div class="col-sm-8">
 								<svg id="sv" height="200px" viewBox="-450 469 298 342">
 								<path stroke="#B4BEC8" stroke-width="2px" stroke-miterlimit="10" fill="#1572B6" d="M-422.9,777.3l-27.1-303.6h297.4l-27.1,303.6L-301.4,811L-422.9,777.3z"/>
 								<path stroke="#B4BEC8" stroke-width="2px" stroke-miterlimit="10" fill="#33A9DC" d="M-301.2,785.2l98.4-27.3l23.2-259.4h-121.6V785.2z"/>
@@ -63,18 +73,33 @@
 				</div>
 				<div class="item" data-id="3">
 					<div class="container animac hide-svg">
-						<svg id="svg-mac" class="svg" height="300px" viewBox="0 0 500 300">
-						<path fill="#000" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M487.7,268h-44.1c0.5-1.5,0.8-3.1,0.8-4.7V22.9c0-8-6.5-14.5-14.5-14.5H70.1c-8,0-14.5,6.5-14.5,14.5v240.4c0,1.6,0.3,3.2,0.8,4.7H12.2c-0.4,0-0.8,0.3-0.8,0.7v7.4c0,0.2,0,0.8,0.6,1.2c0.1,0.1,0.3,0.2,0.4,0.3c0,0,0,0,0,0c3.3,2.3,11.5,5.6,20.8,5.6h433.5c9.2,0,17.5-3.4,20.8-5.6c0,0,0,0,0,0c0.2-0.1,0.4-0.3,0.5-0.4c0.4-0.3,0.4-0.9,0.4-1.1v-7.5C488.5,268.3,488.2,268,487.7,268z M56.6,263.3V22.9c0-7.4,6-13.5,13.5-13.5H430c7.4,0,13.5,6,13.5,13.5v240.4c0,1.7-0.3,3.2-0.9,4.7h-39.4l0-0.2l-1.2-5.2h35.1c2.8,0,5-2.2,5-5v-23.4v-1.3V22.7c0-6.6-5.4-12-12-12H69.9c-6.6,0-12,5.4-12,12v210.2v1.3v23.4c0,2.8,2.2,5,5,5h34l-1.2,5.2l0,0.2H57.5C56.9,266.5,56.6,264.9,56.6,263.3z M216.3,268h-49.4h-15.7H96.7l1.2-5.4h53.3h15.7h234.1l1.2,5.4H283.7H216.3z M282.7,269c-0.3,1.6-1.9,4.4-4.7,4.4h-56c-2.8,0-4.4-2.8-4.7-4.4H282.7z M63,261.5c-2.2,0-4-1.8-4-4v-23.4v-1.3V22.7c0-6,4.9-11,11-11h360.2c6,0,11,4.9,11,11v210.2v1.3v23.4c0,2.2-1.8,4-4,4H63z M12.5,269h83h1.3h54.5h15.7h49.4c0.3,2.1,2.3,5.4,5.7,5.4h56c3.4,0,5.4-3.3,5.7-5.4h118.5h1.3h84.1v7.2c0,0.1,0,0.2,0,0.3c-0.1,0.1-0.2,0.2-0.4,0.3H12.9c-0.1-0.1-0.2-0.1-0.3-0.2c-0.1-0.1-0.1-0.2-0.1-0.4V269z M466.8,282.3H33.2c-7.8,0-14.9-2.5-18.7-4.5h470.9C481.7,279.8,474.6,282.3,466.8,282.3z"/>
-						<path fill="#000" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M431.2,23.8H68.8c-0.7,0-1.3,0.6-1.3,1.3v226.6c0,0.7,0.6,1.3,1.3,1.3h362.4c0.7,0,1.3-0.6,1.3-1.3V25.1C432.4,24.4,431.9,23.8,431.2,23.8z M431.2,251.7H68.8V25.1h362.4V251.7z"/>
-						<path fill="#000" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M250.1,20.5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2c-1.1,0-2,0.9-2,2C248.1,19.6,249,20.5,250.1,20.5z M250.1,17.4c0.6,0,1,0.5,1,1c0,0.6-0.5,1-1,1c-0.6,0-1-0.5-1-1C249.1,17.9,249.5,17.4,250.1,17.4z"/>
-						</svg>
+						<div class="row">
+							<div class="col-sm-4">
+								<h1 class="super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Graphic</h1>
+								<h3 class="cm tight wow fadeInUp" data-wow-delay="500ms">Design</h3>
+								<h5 class="wow fadeIn" data-wow-delay="2s">Illustration<br />Branding<br/>Print</h5>
+							</div>
+							<div class="col-sm-8">
+								<svg id="svg-mac" class="svg" height="300px" viewBox="0 0 500 300">
+								<path stroke="#000000" d="M49.3,270.1c0,8,6.5,14.5,14.5,14.5h374c8,0,14.5-6.5,14.5-14.5V20.3c0-8-6.5-14.5-14.5-14.5h-374c-8,0-14.5,6.5-14.5,14.5V270.1z"/>
+								<path stroke="#000000" d="M451.3,20c0-7.3-5.9-13.2-13.2-13.2H63.6c-7.3,0-13.2,5.9-13.2,13.2v249.8c0,7.3,5.9,13.2,13.2,13.2h374.5c7.3,0,13.2-5.9,13.2-13.2V20z"/>
+								<path stroke="#000000" d="M51.2,20c0-6.9,5.6-12.4,12.4-12.4h374.5c6.9,0,12.4,5.6,12.4,12.4l-0.1,218.3v1.3l0.1,24.2c0,2.9-2.3,5.2-5.2,5.2h-389c-2.9,0-5.2-2.3-5.2-5.2V20z"/>
+								<path stroke="#000000" fill="#FFFFFF" d="M438.6,256.8H63.2V25.3h375.4V256.8z"/>
+								<path stroke="#000000" fill="#828282" d="M25.5,290h206.3h37.9h206.3c9.5,0,17.9-3.4,21.3-5.7H4.2C7.6,286.5,16,290,25.5,290z"/>
+								<path stroke="#000000" fill="#D6D6D6" d="M3.7,284.7c0-3.2,0-6.4,0-9.6c164.9,0,329.9,0,494.8,0c0,3.2,0,6.4,0,9.6C333.6,284.7,168.7,284.7,3.7,284.7z"/>
+								<path stroke="#000000" fill="#FFFFFF" d="M216.4,281.1c0-2,0-4,0-6c23.2,0,46.4,0,69.6,0c0,2,0,4,0,6C262.8,281.1,239.6,281.1,216.4,281.1z"/>
+								</svg>
+							</div>
+						</div>
 					</div>
 				</div>
 				<div class="item" data-id="4">
 					<div class="container">
 						<div class="row">
 							<div class="col-sm-6">
-								<h1 class="light cm">Media</h1>
+								<h1 class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Media</h1>
+								<h3 class="light cm tight wow fadeInUp" data-wow-delay="500ms">Communications</h3>
+								<h5 class="light wow fadeIn" data-wow-delay="2s">Motion | Video | Audio<br />Streaming<br />WebRTC</h5>
 							</div>
 							<div class="col-sm-6">
 							</div>
@@ -84,10 +109,12 @@
 				<div class="item" data-id="5">
 					<div class="container animac hide-svg">
 						<div class="row">
-							<div class="col-sm-6">
-								<h1 class="cm">Art</h1>
+							<div class="col-sm-3">
+								<h1 class="super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Art</h1>
+								<h5 class="wow fadeIn" data-wow-delay="2s">Painting<br /></h5>
 							</div>
-							<div class="col-sm-6">
+							<div class="col-sm-9">
+								<img src="<?php echo get_template_directory_uri();?>/img/paints2.jpg" width="100%" alt="oil paints">
 							</div>
 						</div>
 					</div>

style.css

@@ -213,13 +213,14 @@ h5.contact {
 	body {
 		background: #fff;
 	}
-  article.single {
-  	padding: 20px 0px;
-  }
+	article.single {
+		padding: 20px 0px;
+	}
+    .super-duper {
+    	font-size: 63px;
+    }
 }
-@media (max-width: 768px) 
-	and  (min-width: 668px)
-{
+@media (max-width: 768px) and  (min-width: 668px) {
   article.single {
   	padding: 70px 20px 70px;
   }
@@ -234,6 +235,9 @@ h5.contact {
   article.single {
   	padding: 70px 40px 70px;
   }
+  .super-duper {
+  	font-size: 63px;
+  }
 }
 @media (min-width: 992px) {
 	.container {
@@ -668,6 +672,10 @@ h5.contact {
 	background: transparent url('img/web.gif') no-repeat 28% 15%;
 	background-size:95%;
 }
+#caro #svg-device {
+	float:right;
+	margin-top:-70px;
+}
 #studio-caro {
 	-webkit-transition: all 1s ease;
 	-moz-transition: all 1s ease;
@@ -772,6 +780,58 @@ h5.contact {
 .wallpaper .wallpaper-media.fixed { background-position: center; background-attachment: fixed; height: 100%; width: 100%; }
 .wallpaper .wallpaper-media.fixed img { display: none; }
 
+.touch-carousel {
+	position:relative;
+	overflow:hidden;
+	width:100%;
+	-webkit-transform:translate3d(0,0,0) scale3d(1,1,1);
+	-webkit-backface-visibility:hidden;
+	-webkit-transform-style:preserve-3d;
+	-webkit-tap-highlight-color:rgba(0,0,0,0);
+	-webkit-touch-callout:none;
+	-webkit-user-select:none;
+	-moz-user-select:none;
+	-ms-user-select:none;user-select:none
+}
+
+.touch-carousel .carousel-inner {
+	overflow:hidden;
+	-webkit-transform:translate3d(0%,0,0) scale3d(1,1,1);
+	-moz-transform:translate3d(0%,0,0) scale3d(1,1,1);
+	-ms-transform:translate3d(0%,0,0) scale3d(1,1,1);
+	transform:translate3d(0%,0,0) scale3d(1,1,1);
+	-webkit-backface-visibility:hidden;
+	-webkit-transform-style:preserve-3d;
+	-webkit-tap-highlight-color:rgba(0,0,0,0);
+	-webkit-touch-callout:none;
+	-webkit-user-select:none;
+	-moz-user-select:none;
+	-ms-user-select:none;
+	user-select:none
+}
+.touch-carousel .carousel-inner>.item {
+	position:relative;
+	float:left;
+	display:block;
+	-webkit-transition:none;
+	-moz-transition:none;
+	transition:none;
+	-webkit-backface-visibility:hidden;
+	-webkit-transform-style:preserve-3d
+}
+.touch-carousel .carousel-inner>.item * {
+	-webkit-transition:none;
+	-moz-transition:none;transition:none
+}
+.touch-carousel .carousel-inner.animate {
+	-webkit-transition:all .3s linear;
+	-moz-transition:all .3s linear;
+	transition:all .3s linear
+}
+@media screen and (max-width:767px){
+	.carousel-caption{display:none}
+}
+
 /*============================================
 					Navbar 
 ==============================================*/