RubyGems - j1-template - Versions diffs - 2022.4.5 → 2022.4.8 - Mend

j1-template 2022.4.5 → 2022.4.8

Files changed (1810) hide show

data/assets/themes/j1/modules/masterslider_pro/js/slider-templates/classic-sliders/home slider/demo.html ADDED Viewed

@@ -0,0 +1,2543 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>index</title>
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+		<!-- bootstrap style sheet -->
+		<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
+		<!-- syntaxHilighter style sheet -->
+		<link rel="stylesheet" type="text/css" href="../assets/syntax-highlighter/styles/shCore.css" media="all">
+		<link rel="stylesheet" type="text/css" href="../assets/syntax-highlighter/styles/shThemeDefault.css" media="all">
+		<!-- Base MasterSlider style sheet -->
+		<link rel="stylesheet" href="../masterslider/style/masterslider.css" />
+		<!-- main style -->
+		<link rel="stylesheet" type="text/css" href="../assets/css/style.css" media="all">
+		<!-- MasterSlider default skin -->
+		<link rel="stylesheet" href="../masterslider/skins/default/style.css" />
+		<!-- Home slider style -->
+		<link rel="stylesheet" href="style/style.css" />
+		<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
+		<!-- Latest version of jQuery from Google CDN -->
+		<!-- You can remove it if jQuery is already included. -->
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+		<script src="../masterslider/jquery.easing.min.js"></script>
+		<!-- MasterSlider main JS file -->
+		<script src="../masterslider/masterslider.min.js"></script>
+		<!-- Tabs -->
+		<script src="../assets/js/tab.js"></script>
+		<script src="../assets/syntax-highlighter/scripts/shCore.js"></script>
+		<script src="../assets/syntax-highlighter/scripts/shBrushXml.js"></script>
+		<script src="../assets/syntax-highlighter/scripts/shBrushCss.js"></script>
+		<script src="../assets/syntax-highlighter/scripts/shBrushJScript.js"></script>
+		<style type="text/css" media="screen">
+			html{font-size: 100%}
+			body{
+				margin:0;
+				color: #3D3D3D;
+				font: normal 81.25%/1.5 'Lato',arial,sans-serif !important;
+				min-height: 100%;
+			}
+			.header{
+				margin:0;
+			}
+		</style>
+	</head>
+	<body>
+				<!-- header -->
+		<header class="header">
+			<img src="../assets/css/img/ms-logo.gif" class="logo"/>
+			<nav class="navbar mainnav" >
+				<ul class="nav">
+					<li><a href="http://www.masterslider.com/">HOME</a></li>
+					<li><a href="http://www.masterslider.com/transition-gallery/">TRANSITION GALLERY</a></li>
+					<li><a href="http://support.averta.net/envato/support/master-slider/">SUPPORT FORUM</a></li>
+					<li><a href="http://support.averta.net/envato/faq/master-slider/">FAQ</a></li>
+				</ul>
+			</nav>
+		</header>
+		<!-- end of header -->
+<!-- masterslider -->
+<div class="master-slider ms-skin-default" id="masterslider">
+    <!-- new slide -->
+    <div class="ms-slide slide-1" data-delay="14">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide1/bg.jpg" alt="Slide1 background"/>
+		<h3 class="ms-layer hps-title1"
+			style="left: 580px; top: 28px;"
+			data-type="text"
+		>
+			The Web's Most Advanced
+		</h3>
+		<h3 class="ms-layer hps-title2"
+			style="left: 485px; top: 54px;"
+			data-type="text"
+		>
+			Responsive and Touch Slider
+		</h3>
+		 <img src="masterslider/blank.gif" data-src="img/slide1/ico-4.png" alt="Icon"
+		 	  style="left:218px; top:315px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9200"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,449,-39)"
+		 	  data-ease="easeOutExpo"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/ico-6.png" alt="Icon"
+		 	  style="left:73px; top:196px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9000"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,596,80)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-8.png" alt="Icon"
+		 	  style="left:1021px; top:412px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9800"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-354,-136)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-14.png" alt="Icon"
+		 	  style="left:1104px; top:148px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="10000"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-437,128)"
+		 	  data-ease="easeOutExpo"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/ico-15.png" alt="Icon"
+		 	  style="left:958px; top:323px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9900"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-291,-47)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-16.png" alt="Icon"
+		 	  style="left:386px; top:224px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8800"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,456,200)"
+		 	  data-ease="easeOutExpo"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/ipad.png" alt="Master slider in ipad"
+		 	  style="left:380px; top:64px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="bottom(900)"
+		 	  data-duration="4500"
+		 	  data-ease="easeOutExpo"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/ipad-screen-bg.jpg" alt="Background of ipad"
+		 	  style="left:473px; top:138px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="3400"
+		 	  data-effect="scale(0.98,0.98)"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/logo-trans-stroke.png" alt="Transparent stroke"
+		 	  style="left:607px; top:214px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="7500"
+		 	  data-duration="1000"
+		 	  data-effect="scale(0.5,0.5)"
+		 	  data-ease="easeOutBack"
+		 />
+		  <img src="masterslider/blank.gif" data-src="img/slide1/ipad-reflect.png" alt="iPad reflect"
+		 	  style="left:656px; top:103px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="bottom(900)"
+		 	  data-duration="4500"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-1.png" alt="Icon"
+		 	  style="left:1260px; top:207px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9200"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-593,69)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-2.png" alt="Icon"
+		 	  style="left:1225px; top:439px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9000"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-558,-163)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-3.png" alt="Icon"
+		 	  style="left:211px; top:76px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8500"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,456,200)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-5.png" alt="Icon"
+		 	  style="left:121px; top:346px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8800"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,546,-70)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-7.png" alt="Icon"
+		 	  style="left:258px; top:191px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8600"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,409,85)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-9.png" alt="Icon"
+		 	  style="left:1155px; top:23px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9400"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-488,253)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-10.png" alt="Icon"
+		 	  style="left:960px; top:165px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9300"
+		 	  data-duration="4001"
+		 	  data-effect="scalefrom(0.5,0.5,-293,111)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-11.png" alt="Icon"
+		 	  style="left:368px; top:337px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8700"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,299,-61)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-12.png" alt="Icon"
+		 	  style="left:247px; top:465px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8900"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,418,-189)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-13.png" alt="Icon"
+		 	  style="left:1105px; top:288px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9100"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-438,-12)"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/logo-white-stroke.png" alt="White stroke"
+		 	  style="left:569px; top:175px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="3900"
+		 	  data-duration="3000"
+		 	  data-effect="scale(0.5,0.5)"
+		 	  data-ease="easeOutExpo"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/logo.gif" alt="Master Slider logo in ipad"
+		 	  style="left:662px; top:287px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="5100"
+		 	  data-duration="1500"
+		 	  data-effect="scale(0.8,0.8,c)"
+		 	  data-ease="easeOutBack"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/hand.png" alt="Hand over ipad"
+		 	  style="left:687px; top:312px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="5800"
+		 	  data-effect="bottom(500,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-duration="2400"
+		 	  data-hide-time="8210"
+		 	  data-hide-ease="easeInExpo"
+		 />
+    </div>
+    <!-- end of slide -->
+    <!-- new slide -->
+    <div class="ms-slide slide-2" data-delay="10">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide2/bg.png" alt="Slide background"/>
+        <h3 class="ms-layer hps-title1"
+			style="left: 570px;top: 89px;"
+			data-type="text"
+			data-delay="1500"
+		 	data-duration="2800"
+		 	data-ease="easeOutExpo"
+		 	data-effect="rotatefront(-40,900,tr)"
+		>
+			Responsive &amp;
+		</h3>
+		<h3 class="ms-layer hps-title2"
+			style="left: 445px;top: 146px;"
+			data-type="text"
+			data-delay="2200"
+		 	data-duration="2000"
+		 	data-ease="easeOutExpo"
+		 	data-effect="rotate3dright(10,50,0,50)"
+		>
+			Touch Swipe Navigation
+		</h3>
+        <img src="masterslider/blank.gif" data-src="img/slide2/macbook.png" alt="Master Slider in Macbook"
+		 	  style="left:528px; top:265px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="2500"
+		 	  data-ease="easeOutExpo"
+		 	  data-effect="scalefrom(1.1,1.1,-190,0)"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide2/imac.png" alt="Master Slider in iMac"
+		 	  style="left:814px; top:157px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="600"
+		 	  data-duration="2500"
+		 	  data-ease="easeOutExpo"
+		 	  data-effect="scalefrom(1.1,1.1,190,0)"
+		 />
+       <img src="masterslider/blank.gif" data-src="img/slide2/ipad.png" alt="Master Slider in iPad"
+		 	  style="left:770px; top:295px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="400"
+		 	  data-duration="2500"
+		 	  data-ease="easeOutExpo"
+		 	  data-effect="scalefrom(1.3,1.3,0,0)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide2/iphone.png" alt="Master Slider in iPhone"
+		 	  style="left:146px; top:257px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="3000"
+		 	  data-duration="3000"
+		 	  data-ease="easeOutExpo"
+		 	  data-effect="from(-30,350,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide1/hand.png" alt="Hande is touching iPhone"
+		 	  style="left:512px; top:326px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="4000"
+		 	  data-duration="2500"
+		 	  data-ease="easeOutExpo"
+		 	  data-effect="from(30,350,false)"
+		/>
+    </div>
+    <!-- end of slide -->
+	  <!-- Video Slide -->
+	<div class="ms-slide slide-video" data-delay="15">
+		<img src="masterslider/blank.gif" alt="" data-src="img/video/video-bg.jpg">
+		<div class="ms-layer hps-vicapton-box"
+			style="left:361px; top:223px"
+		 	data-effect="bottom(150)"
+		 	data-duration="2800"
+		 	data-ease="easeOutExpo"
+		></div>
+		<h3 class="ms-layer hps-hd"
+			style="left: 378px; top:226px;"
+			data-delay="1800"
+		 	data-duration="2400"
+		 	data-effect="scale(1.05,1.05)"
+		 	data-ease="easeOutExpo"
+		>HD</h3>
+		<h3 class="ms-layer hps-videotitle"
+			style="left: 595px; top:251px;"
+			data-delay="2000"
+		 	data-duration="3000"
+		 	data-ease="easeOutExpo"
+		 	data-effect="rotate3dright(0,20,0,0)"
+		><span style="font-weight:400">video</span> backgrounds</h3>
+		<p class="ms-layer hps-videotext"
+			style="left: 596px; top:290px;"
+			data-delay="2200"
+			data-ease="easeOutExpo"
+		 	data-duration="1300"
+		 	data-effect="skewleft(-8,30)"
+		>
+		Now you can add high quality videos as slide background. It supports various video formats and looped videos.
+		</p>
+		 <video data-autopause="false" data-mute="true" data-loop="true" data-fill-mode="fill">
+            <source id="mp4" src="../assets/video/video.mp4" type="video/mp4"/>
+			<source id="webm" src="../assets/video/video.webm" type="video/webm"/>
+			<source id="ogv" src="../assets/video/video.ogv" type="video/ogg"/>
+        </video>
+	</div>
+    <!-- new slide -->
+    <div class="ms-slide slide-3" data-delay="8">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide3/bg.jpg" alt="Slide3 Background"/>
+		 <h3 class="ms-layer hps-title1"
+			style="left:660px;top:136px;"
+			data-type="text"
+			data-ease="easeOutExpo"
+			data-delay="2000"
+		 	data-duration="1400"
+		 	data-effect="skewleft(30,80)"
+		>
+			Hardware
+		</h3>
+		<h3 class="ms-layer hps-amp"
+			style="left: 1063px;top: 114px;"
+			data-type="text"
+			data-delay="2800"
+		 	data-duration="1400"
+		 	data-effect="scale(2.8,2.8)"
+		 	data-ease="easeOutExpo"
+		>
+			&amp;
+		</h3>
+		 <h3 class="ms-layer hps-title2"
+			style="left: 950px;top: 150px;"
+			data-type="text"
+			data-delay="2500"
+		 	data-duration="1400"
+		 	data-effect="skewright(30,80)"
+		 	data-ease="easeOutExpo"
+		>
+			Accelerated
+		</h3>
+		<h3 class="ms-layer hps-title3"
+			style="left: 662px;top: 200px;"
+			data-type="text"
+			data-delay="2900"
+		 	data-duration="2400"
+		 	data-effect="rotate3dtop(-100,0,0,40,t)"
+		 	data-ease="easeOutExpo"
+		>
+			Super Smooth
+		</h3>
+		<h3 class="ms-layer hps-title4"
+			style="left: 662px;top: 257px;"
+			data-type="text"
+			data-delay="3100"
+		 	data-duration="2800"
+		 	data-effect="rotate3dtop(-100,0,0,18,t)"
+		 	data-ease="easeOutExpo"
+		>
+			Transitions
+		</h3>
+		<img src="masterslider/blank.gif" data-src="img/slide3/part-1.png" alt="Snow particle 1"
+		 	  style="left:426px; top:252px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-ease="easeOutExpo"
+		 	  data-duration="8000"
+		 	  data-delay="200"
+		 	  data-effect="scalefrom(0.4,0.4,180,300,br)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide3/part-2.png" alt="Snow particle 2"
+		 	  style="left:424px; top:261px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-ease="easeOutExpo"
+		 	  data-delay="150"
+		 	  data-duration="8200"
+		 	  data-effect="scalefrom(0.3,0.3,180,300,br)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide3/part-3.png" alt="Snow particle 3"
+		 	  style="left:401px; top:241px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-ease="easeOutExpo"
+		 	  data-duration="7400"
+		 	  data-effect="scalefrom(0.3,0.3,180,300,br)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide3/cool-guy.png" alt="A guy with snowboard"
+		 	  style="left:345px; top:103px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-ease="easeOutExpo"
+		 	  data-duration="5000"
+		 	  data-effect="scalefrom(0.7,0.7,380,450,br,false)"
+		/>
+		 <div class="ms-layer" style="left:416px; top:135px;"
+			data-delay="4010"
+			data-type="hotspot"
+			data-align="left"
+		>
+			<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
+		</div>
+		 <div class="ms-layer" style="left:408px; top:222px;"
+			data-delay="4100"
+			data-type="hotspot"
+			data-align="bottom"
+		>
+			<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
+		</div>
+		 <div class="ms-layer" style="left:565px; top:265px;"
+			data-delay="4050"
+			data-type="hotspot"
+			data-align="right"
+		>
+			<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
+		</div>
+    </div>
+    <!-- end of slide -->
+ 	<!-- new slide -->
+    <div class="ms-slide slide-4" data-delay="11.5">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide4/bg.jpg" alt="Slide3 Background"/>
+		 <h3 class="ms-layer hps-title1"
+			style="left: 641px;top: 70px;"
+			data-type="text"
+			data-delay="7500"
+			data-duration="2500"
+			data-ease="easeOutExpo"
+			data-effect="rotate3dleft(90,0,0,100)"
+		>
+			25+ Starter Templates
+		</h3>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two.png" alt="Two of 25+"
+		 	  style="left:327px; top:95px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five.png" alt="Five of 25+"
+		 	  style="left:591px; top:112px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/plus.png" alt="Plus of 25+"
+		 	  style="left:854px; top:178px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="700"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		/>
+		<!-- Two Particles -->
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-9.png" alt="Particle"
+		 	  style="left:461px; top:400px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="4110"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-8.png" alt="Particle"
+		 	  style="left:392px; top:338px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="3910"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-7.png" alt="Particle"
+		 	  style="left:485px; top:390px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="3710"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-6.png" alt="Particle"
+		 	  style="left:332px; top:359px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="3510"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-5.png" alt="Particle"
+		 	  style="left:333px; top:357px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="3310"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-4.png" alt="Particle"
+		 	  style="left:389px; top:194px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="3110"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-3.png" alt="Particle"
+		 	  style="left:537px; top:162px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="2910"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-2.png" alt="Particle"
+		 	  style="left:430px; top:111px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="2710"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-1.png" alt="Particle"
+		 	  style="left:337px; top:112px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="2510"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<!-- Five Particles -->
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-1.png" alt="Particle"
+		 	  style="left:637px; top:114px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="5310"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-2.png" alt="Particle"
+		 	  style="left:615px; top:130px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="5110"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-3.png" alt="Particle"
+		 	  style="left:610px; top:226px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="4910"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-4.png" alt="Particle"
+		 	  style="left:649px; top:206px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="4710"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-5.png" alt="Particle"
+		 	  style="left:716px; top:288px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="4510"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-6.png" alt="Particle"
+		 	  style="left:591px; top:316px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="4310"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<!-- Plus Particles -->
+		<img src="masterslider/blank.gif" data-src="img/slide4/plus-1.png" alt="Particle"
+		 	  style="left:864px; top:180px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="700"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="5510"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/plus-2.png" alt="Particle"
+		 	  style="left:961px; top:180px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="700"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="5710"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/plus-3.png" alt="Particle"
+		 	  style="left:980px; top:357px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="700"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="5910"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/plus-4.png" alt="Particle"
+		 	  style="left:864px; top:180px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="700"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="6110"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+    </div>
+    <!-- end of slide -->
+ 	<!-- new slide -->
+    <div class="ms-slide slide-5" data-delay="23">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide5/bg.jpg" alt="Slide3 Background"/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/plane1.png" alt="Layers plane"
+		 	  style="left:141px; top:151px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="left(200)"
+		 	  data-ease="easeOutQuart"
+		 	  data-duration="2200"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/plane2.png" alt="Layers plane"
+		 	  style="left:87px; top:157px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="left(200)"
+		 	  data-ease="easeOutQuart"
+		 	  data-duration="2200"
+		 	  data-hide-effect="top(53,false)"
+		 	  data-hide-time="2301"
+		 	  data-hide-duration="4500"
+		 	  data-hide-ease="easeInOutQuart"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/plane3.png" alt="Layers plane"
+		 	  style="left:88px; top:133px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="left(200)"
+		 	  data-ease="easeOutQuart"
+		 	  data-duration="2200"
+		 	  data-hide-effect="top(105,false)"
+		 	  data-hide-time="2301"
+		 	  data-hide-duration="4500"
+		 	  data-hide-ease="easeInOutQuart"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip1.png" alt="Animated Layers"
+		 	  style="left:97px; top:97px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="top(400,false)"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="6400"
+			  data-hide-time="9000"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
+		 	  style="left:102px; top:262px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="6400"
+			  data-hide-time="9000"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/image-layer.png" alt="Image Layers"
+		 	  style="left:97px; top:97px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="top(400,false)"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="9100"
+			  data-hide-time="12300"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
+		 	  style="left:102px; top:262px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="9100"
+			  data-hide-time="12300"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/video-layer.png" alt="Video Layers"
+		 	  style="left:97px; top:97px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="top(400,false)"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="12800"
+		 	  data-hide-time="15600"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
+		 	  style="left:102px; top:262px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="12800"
+		 	  data-hide-time="15600"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/html-layer.png" alt="HTML Layers"
+		 	  style="left:97px; top:97px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="top(400,false)"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="15700"
+		 	  data-hide-time="18400"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
+		 	  style="left:102px; top:262px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="15700"
+		 	  data-hide-time="18400"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/text-layer.png" alt="Text Layers"
+		 	  style="left:97px; top:97px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="top(400,false)"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="18500"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
+		 	  style="left:102px; top:262px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="18500"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/infinit.png" alt="char"
+		 	  style="left:1057px; top:175px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="7600"
+		 	  data-effect="rotatefront(40,900)"
+		 	  data-ease="easeOutExpo"
+		 	  data-duration="1500"
+		/>
+		<h3 class="ms-layer hps-title1"
+			style="left: 881px;top: 193px;"
+			data-type="text"
+			data-delay="6300"
+			data-effect="skewleft(50,340)"
+			data-ease="easeOutExpo"
+			data-duration="2200"
+		>
+			Unlimited
+		</h3>
+		<h3 class="ms-layer hps-title2"
+			style="left: 883px;top: 233px;"
+			data-type="text"
+			data-delay="6300"
+			data-effect="skewright(50,340)"
+			data-ease="easeOutExpo"
+			data-duration="2200"
+		>
+			Transition Effects
+		</h3>
+		<h3 class="ms-layer hps-title3"
+			style="left: 883px;top: 287px;"
+			data-type="text"
+			data-delay="7000"
+		 	data-effect="rotate3dbottom(100,0,0,70)"
+		 	data-ease="easeOutExpo"
+		 	data-duration="2300"
+		>
+			In &amp; Out Transitions Supported
+		</h3>
+		<p class="ms-layer hps-text1"
+			style="left: 885px; top: 350px;"
+			data-type="text"
+			data-delay="7800"
+			data-ease="easeOutExpo"
+			data-effect="left(50)"
+		 	data-duration="2300"
+		>
+			You can easily add image, html formatted texts and video layers over each slide and each layer accepts unique animation parameters like animation effect, duration, delay, etc.
+		</p>
+    </div>
+    <!-- end of slide -->
+ 	<!-- new slide -->
+    <div class="ms-slide slide-6" data-delay="9">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide6/bg.jpg" alt="Slide3 Background"/>
+		<h3 class="ms-layer hps-title1"
+			style="left: 1032px;top: 197px;"
+			data-type="text"
+			data-delay="1500"
+			data-effect="left(250)"
+			data-ease="easeInOutQuart"
+			data-duration="2400"
+		>
+			Video Layer <br /><span class="sub-title">Support</span>
+		</h3>
+		<h3 class="ms-layer hps-title2"
+			style="left: 1032px;top: 287px;"
+			data-type="text"
+			data-delay="1650"
+			data-effect="left(250)"
+			data-ease="easeInOutQuart"
+			data-duration="2400"
+		>
+			with Custom Video Cover
+		</h3>
+		<h3 class="ms-layer hps-title3"
+			style="left: 1032px;top: 320px;"
+			data-type="text"
+			data-delay="1750"
+			data-effect="left(250)"
+			data-ease="easeInOutQuart"
+			data-duration="2400"
+		>
+			YouTube
+		</h3>
+		<h3 class="ms-layer hps-title3 hps-title3-vimeo"
+			style="left: 1032px;top: 372px;"
+			data-type="text"
+			data-delay="1850"
+			data-effect="left(250)"
+			data-ease="easeInOutQuart"
+			data-duration="2400"
+		>
+			Vimeo
+		</h3>
+		<img src="masterslider/blank.gif" data-src="img/slide6/video-shadow.png" alt="video shadow"
+		 	  style="left:298px; top:435px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+			  data-duration="3000"
+			  data-ease="easeOutExpo"
+		/>
+		<div class="ms-layer video-box" style="left:370px; top:105px; width:662px; height:372px"
+			  data-type="video"
+			  data-effect="top(100)"
+			  data-duration="3000"
+			  data-ease="easeOutExpo"
+		>
+			<img src="masterslider/blank.gif" data-src="img/slide6/video-cover.jpg" alt="video shadow"/>
+			<iframe src="http://player.vimeo.com/video/50672540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe>
+		</div>
+    </div>
+    <!-- end of slide -->
+    	<!-- new slide -->
+    <div class="ms-slide slide-7" data-delay="6">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide7/bg.jpg" alt="Slide3 Background"/>
+		<a href="http://player.vimeo.com/video/58226214" data-type="video">REDBULL</a>
+		<h3 class="ms-layer hps-title1"
+			style="left: 830px; top: 220px;"
+			data-type="text"
+			data-duration="1400"
+		 	data-ease="easeOutExpo"
+		 	data-effect="rotate3dtop(90,0,0,80)"
+		>
+			Fullscreen
+		</h3>
+		<h3 class="ms-layer hps-title2"
+			style="left: 835px;top: 284px;"
+			data-type="text"
+			data-duration="1800"
+			data-delay="140"
+		 	data-ease="easeOutExpo"
+		 	data-effect="bottom(40)"
+		>
+			Video Support
+		</h3>
+		<h3 class="ms-layer hps-title3"
+			style="left: 835px;top: 318px;"
+			data-type="text"
+			data-delay="1000"
+			data-ease="easeOutExpo"
+			data-duration="1230"
+			data-effect="scale(1.5,1.6)"
+		>
+			with Custom Video Cover
+		</h3>
+    </div>
+    <!-- end of slide -->
+</div>
+<!-- end of masterslider -->
+<div class="hilight-wrapper">
+					<!-- Nav tabs -->
+					<ul class="nav nav-tabs">
+					  <li class="active"><a  href="#html" data-toggle="tab">HTML</a></li>
+					  <li><a href="#java-script" data-toggle="tab">JavaScript</a></li>
+					  <li><a href="#requierd-files" data-toggle="tab">Required Files</a></li>
+					  <a class="ms-doc-link" target="_blank"  href="http://www.masterslider.com/doc/">Master Slider Documentation</a>
+					</ul>
+					<!-- Tab panes -->
+					<div class="tab-content">
+					 	<div class="tab-pane fade in active" id="html">
+					 		<div class="html-describe">You need to put the following html markup in your html document where you want to have slider </div>
+					 		<pre class="brush: html">
+<!-- masterslider -->
+<div class="master-slider ms-skin-default" id="masterslider">
+    <!-- new slide -->
+    <div class="ms-slide slide-1" data-delay="14">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide1/bg.jpg" alt="Slide1 background"/>
+		<h3 class="ms-layer hps-title1"
+			style="left: 580px; top: 28px;"
+			data-type="text"
+		>
+			The Web's Most Advanced
+		</h3>
+		<h3 class="ms-layer hps-title2"
+			style="left: 485px; top: 54px;"
+			data-type="text"
+		>
+			Responsive and Touch Slider
+		</h3>
+		 <img src="masterslider/blank.gif" data-src="img/slide1/ico-4.png" alt="Icon"
+		 	  style="left:218px; top:315px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9200"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,449,-39)"
+		 	  data-ease="easeOutExpo"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/ico-6.png" alt="Icon"
+		 	  style="left:73px; top:196px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9000"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,596,80)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-8.png" alt="Icon"
+		 	  style="left:1021px; top:412px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9800"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-354,-136)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-14.png" alt="Icon"
+		 	  style="left:1104px; top:148px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="10000"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-437,128)"
+		 	  data-ease="easeOutExpo"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/ico-15.png" alt="Icon"
+		 	  style="left:958px; top:323px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9900"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-291,-47)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-16.png" alt="Icon"
+		 	  style="left:386px; top:224px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8800"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,456,200)"
+		 	  data-ease="easeOutExpo"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/ipad.png" alt="Master slider in ipad"
+		 	  style="left:380px; top:64px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="bottom(900)"
+		 	  data-duration="4500"
+		 	  data-ease="easeOutExpo"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/ipad-screen-bg.jpg" alt="Background of ipad"
+		 	  style="left:473px; top:138px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="3400"
+		 	  data-effect="scale(0.98,0.98)"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/logo-trans-stroke.png" alt="Transparent stroke"
+		 	  style="left:607px; top:214px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="7500"
+		 	  data-duration="1000"
+		 	  data-effect="scale(0.5,0.5)"
+		 	  data-ease="easeOutBack"
+		 />
+		  <img src="masterslider/blank.gif" data-src="img/slide1/ipad-reflect.png" alt="iPad reflect"
+		 	  style="left:656px; top:103px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="bottom(900)"
+		 	  data-duration="4500"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-1.png" alt="Icon"
+		 	  style="left:1260px; top:207px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9200"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-593,69)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-2.png" alt="Icon"
+		 	  style="left:1225px; top:439px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9000"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-558,-163)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-3.png" alt="Icon"
+		 	  style="left:211px; top:76px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8500"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,456,200)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-5.png" alt="Icon"
+		 	  style="left:121px; top:346px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8800"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,546,-70)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-7.png" alt="Icon"
+		 	  style="left:258px; top:191px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8600"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,409,85)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-9.png" alt="Icon"
+		 	  style="left:1155px; top:23px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9400"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-488,253)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-10.png" alt="Icon"
+		 	  style="left:960px; top:165px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9300"
+		 	  data-duration="4001"
+		 	  data-effect="scalefrom(0.5,0.5,-293,111)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-11.png" alt="Icon"
+		 	  style="left:368px; top:337px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8700"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,299,-61)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-12.png" alt="Icon"
+		 	  style="left:247px; top:465px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="8900"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,418,-189)"
+		 	  data-ease="easeOutExpo"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/ico-13.png" alt="Icon"
+		 	  style="left:1105px; top:288px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="9100"
+		 	  data-duration="2701"
+		 	  data-effect="scalefrom(0.5,0.5,-438,-12)"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/logo-white-stroke.png" alt="White stroke"
+		 	  style="left:569px; top:175px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="3900"
+		 	  data-duration="3000"
+		 	  data-effect="scale(0.5,0.5)"
+		 	  data-ease="easeOutExpo"
+		 />
+		 <img src="masterslider/blank.gif" data-src="img/slide1/logo.gif" alt="Master Slider logo in ipad"
+		 	  style="left:662px; top:287px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="5100"
+		 	  data-duration="1500"
+		 	  data-effect="scale(0.8,0.8,c)"
+		 	  data-ease="easeOutBack"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide1/hand.png" alt="Hand over ipad"
+		 	  style="left:687px; top:312px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="5800"
+		 	  data-effect="bottom(500,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-duration="2400"
+		 	  data-hide-time="8210"
+		 	  data-hide-ease="easeInExpo"
+		 />
+    </div>
+    <!-- end of slide -->
+    <!-- new slide -->
+    <div class="ms-slide slide-2" data-delay="10">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide2/bg.png" alt="Slide background"/>
+        <h3 class="ms-layer hps-title1"
+			style="left: 570px;top: 89px;"
+			data-type="text"
+			data-delay="1500"
+		 	data-duration="2800"
+		 	data-ease="easeOutExpo"
+		 	data-effect="rotatefront(-40,900,tr)"
+		>
+			Responsive &amp;
+		</h3>
+		<h3 class="ms-layer hps-title2"
+			style="left: 445px;top: 146px;"
+			data-type="text"
+			data-delay="2200"
+		 	data-duration="2000"
+		 	data-ease="easeOutExpo"
+		 	data-effect="rotate3dright(10,50,0,50)"
+		>
+			Touch Swipe Navigation
+		</h3>
+        <img src="masterslider/blank.gif" data-src="img/slide2/macbook.png" alt="Master Slider in Macbook"
+		 	  style="left:528px; top:265px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="2500"
+		 	  data-ease="easeOutExpo"
+		 	  data-effect="scalefrom(1.1,1.1,-190,0)"
+		 />
+		<img src="masterslider/blank.gif" data-src="img/slide2/imac.png" alt="Master Slider in iMac"
+		 	  style="left:814px; top:157px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="600"
+		 	  data-duration="2500"
+		 	  data-ease="easeOutExpo"
+		 	  data-effect="scalefrom(1.1,1.1,190,0)"
+		 />
+       <img src="masterslider/blank.gif" data-src="img/slide2/ipad.png" alt="Master Slider in iPad"
+		 	  style="left:770px; top:295px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="400"
+		 	  data-duration="2500"
+		 	  data-ease="easeOutExpo"
+		 	  data-effect="scalefrom(1.3,1.3,0,0)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide2/iphone.png" alt="Master Slider in iPhone"
+		 	  style="left:146px; top:257px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="3000"
+		 	  data-duration="3000"
+		 	  data-ease="easeOutExpo"
+		 	  data-effect="from(-30,350,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide1/hand.png" alt="Hande is touching iPhone"
+		 	  style="left:512px; top:326px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="4000"
+		 	  data-duration="2500"
+		 	  data-ease="easeOutExpo"
+		 	  data-effect="from(30,350,false)"
+		/>
+    </div>
+    <!-- end of slide -->
+	  <!-- Video Slide -->
+	<div class="ms-slide slide-video" data-delay="15">
+		<img src="masterslider/blank.gif" alt="" data-src="img/video/video-bg.jpg">
+		<div class="ms-layer hps-vicapton-box"
+			style="left:361px; top:223px"
+		 	data-effect="bottom(150)"
+		 	data-duration="2800"
+		 	data-ease="easeOutExpo"
+		></div>
+		<h3 class="ms-layer hps-hd"
+			style="left: 378px; top:226px;"
+			data-delay="1800"
+		 	data-duration="2400"
+		 	data-effect="scale(1.05,1.05)"
+		 	data-ease="easeOutExpo"
+		>HD</h3>
+		<h3 class="ms-layer hps-videotitle"
+			style="left: 595px; top:251px;"
+			data-delay="2000"
+		 	data-duration="3000"
+		 	data-ease="easeOutExpo"
+		 	data-effect="rotate3dright(0,20,0,0)"
+		><span style="font-weight:400">video</span> backgrounds</h3>
+		<p class="ms-layer hps-videotext"
+			style="left: 596px; top:290px;"
+			data-delay="2200"
+			data-ease="easeOutExpo"
+		 	data-duration="1300"
+		 	data-effect="skewleft(-8,30)"
+		>
+		Now you can add high quality videos as slide background. It supports various video formats and looped videos.
+		</p>
+		 <video data-autopause="false" data-mute="true" data-loop="true" data-fill-mode="fill">
+            <source id="mp4" src="../assets/video/video.mp4" type="video/mp4"/>
+			<source id="webm" src="../assets/video/video.webm" type="video/webm"/>
+			<source id="ogv" src="../assets/video/video.ogv" type="video/ogg"/>
+        </video>
+	</div>
+    <!-- new slide -->
+    <div class="ms-slide slide-3" data-delay="8">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide3/bg.jpg" alt="Slide3 Background"/>
+		 <h3 class="ms-layer hps-title1"
+			style="left:660px;top:136px;"
+			data-type="text"
+			data-ease="easeOutExpo"
+			data-delay="2000"
+		 	data-duration="1400"
+		 	data-effect="skewleft(30,80)"
+		>
+			Hardware
+		</h3>
+		<h3 class="ms-layer hps-amp"
+			style="left: 1063px;top: 114px;"
+			data-type="text"
+			data-delay="2800"
+		 	data-duration="1400"
+		 	data-effect="scale(2.8,2.8)"
+		 	data-ease="easeOutExpo"
+		>
+			&amp;
+		</h3>
+		 <h3 class="ms-layer hps-title2"
+			style="left: 950px;top: 150px;"
+			data-type="text"
+			data-delay="2500"
+		 	data-duration="1400"
+		 	data-effect="skewright(30,80)"
+		 	data-ease="easeOutExpo"
+		>
+			Accelerated
+		</h3>
+		<h3 class="ms-layer hps-title3"
+			style="left: 662px;top: 200px;"
+			data-type="text"
+			data-delay="2900"
+		 	data-duration="2400"
+		 	data-effect="rotate3dtop(-100,0,0,40,t)"
+		 	data-ease="easeOutExpo"
+		>
+			Super Smooth
+		</h3>
+		<h3 class="ms-layer hps-title4"
+			style="left: 662px;top: 257px;"
+			data-type="text"
+			data-delay="3100"
+		 	data-duration="2800"
+		 	data-effect="rotate3dtop(-100,0,0,18,t)"
+		 	data-ease="easeOutExpo"
+		>
+			Transitions
+		</h3>
+		<img src="masterslider/blank.gif" data-src="img/slide3/part-1.png" alt="Snow particle 1"
+		 	  style="left:426px; top:252px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-ease="easeOutExpo"
+		 	  data-duration="8000"
+		 	  data-delay="200"
+		 	  data-effect="scalefrom(0.4,0.4,180,300,br)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide3/part-2.png" alt="Snow particle 2"
+		 	  style="left:424px; top:261px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-ease="easeOutExpo"
+		 	  data-delay="150"
+		 	  data-duration="8200"
+		 	  data-effect="scalefrom(0.3,0.3,180,300,br)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide3/part-3.png" alt="Snow particle 3"
+		 	  style="left:401px; top:241px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-ease="easeOutExpo"
+		 	  data-duration="7400"
+		 	  data-effect="scalefrom(0.3,0.3,180,300,br)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide3/cool-guy.png" alt="A guy with snowboard"
+		 	  style="left:345px; top:103px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-ease="easeOutExpo"
+		 	  data-duration="5000"
+		 	  data-effect="scalefrom(0.7,0.7,380,450,br,false)"
+		/>
+		 <div class="ms-layer" style="left:416px; top:135px;"
+			data-delay="4010"
+			data-type="hotspot"
+			data-align="left"
+		>
+			<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
+		</div>
+		 <div class="ms-layer" style="left:408px; top:222px;"
+			data-delay="4100"
+			data-type="hotspot"
+			data-align="bottom"
+		>
+			<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
+		</div>
+		 <div class="ms-layer" style="left:565px; top:265px;"
+			data-delay="4050"
+			data-type="hotspot"
+			data-align="right"
+		>
+			<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
+		</div>
+    </div>
+    <!-- end of slide -->
+ 	<!-- new slide -->
+    <div class="ms-slide slide-4" data-delay="11.5">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide4/bg.jpg" alt="Slide3 Background"/>
+		 <h3 class="ms-layer hps-title1"
+			style="left: 641px;top: 70px;"
+			data-type="text"
+			data-delay="7500"
+			data-duration="2500"
+			data-ease="easeOutExpo"
+			data-effect="rotate3dleft(90,0,0,100)"
+		>
+			25+ Starter Templates
+		</h3>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two.png" alt="Two of 25+"
+		 	  style="left:327px; top:95px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five.png" alt="Five of 25+"
+		 	  style="left:591px; top:112px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/plus.png" alt="Plus of 25+"
+		 	  style="left:854px; top:178px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="700"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		/>
+		<!-- Two Particles -->
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-9.png" alt="Particle"
+		 	  style="left:461px; top:400px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="4110"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-8.png" alt="Particle"
+		 	  style="left:392px; top:338px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="3910"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-7.png" alt="Particle"
+		 	  style="left:485px; top:390px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="3710"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-6.png" alt="Particle"
+		 	  style="left:332px; top:359px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="3510"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-5.png" alt="Particle"
+		 	  style="left:333px; top:357px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="3310"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-4.png" alt="Particle"
+		 	  style="left:389px; top:194px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="3110"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-3.png" alt="Particle"
+		 	  style="left:537px; top:162px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="2910"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-2.png" alt="Particle"
+		 	  style="left:430px; top:111px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="2710"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/two-1.png" alt="Particle"
+		 	  style="left:337px; top:112px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="0"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="2510"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<!-- Five Particles -->
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-1.png" alt="Particle"
+		 	  style="left:637px; top:114px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="5310"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-2.png" alt="Particle"
+		 	  style="left:615px; top:130px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="5110"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-3.png" alt="Particle"
+		 	  style="left:610px; top:226px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="4910"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-4.png" alt="Particle"
+		 	  style="left:649px; top:206px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="4710"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-5.png" alt="Particle"
+		 	  style="left:716px; top:288px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="4510"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/five-6.png" alt="Particle"
+		 	  style="left:591px; top:316px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="350"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="4310"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<!-- Plus Particles -->
+		<img src="masterslider/blank.gif" data-src="img/slide4/plus-1.png" alt="Particle"
+		 	  style="left:864px; top:180px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="700"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="5510"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/plus-2.png" alt="Particle"
+		 	  style="left:961px; top:180px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="700"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="5710"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/plus-3.png" alt="Particle"
+		 	  style="left:980px; top:357px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="700"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="5910"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide4/plus-4.png" alt="Particle"
+		 	  style="left:864px; top:180px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="700"
+		 	  data-duration="1800"
+		 	  data-effect="bottom(480,false)"
+		 	  data-ease="easeOutExpo"
+		 	  data-hide-duration="800"
+		 	  data-hide-time="6110"
+		 	  data-hide-ease="easeInQuart"
+		 	  data-hide-effect="rotatebottom(-150|150,780,t,false)"
+		/>
+    </div>
+    <!-- end of slide -->
+ 	<!-- new slide -->
+    <div class="ms-slide slide-5" data-delay="23">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide5/bg.jpg" alt="Slide3 Background"/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/plane1.png" alt="Layers plane"
+		 	  style="left:141px; top:151px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="left(200)"
+		 	  data-ease="easeOutQuart"
+		 	  data-duration="2200"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/plane2.png" alt="Layers plane"
+		 	  style="left:87px; top:157px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="left(200)"
+		 	  data-ease="easeOutQuart"
+		 	  data-duration="2200"
+		 	  data-hide-effect="top(53,false)"
+		 	  data-hide-time="2301"
+		 	  data-hide-duration="4500"
+		 	  data-hide-ease="easeInOutQuart"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/plane3.png" alt="Layers plane"
+		 	  style="left:88px; top:133px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="left(200)"
+		 	  data-ease="easeOutQuart"
+		 	  data-duration="2200"
+		 	  data-hide-effect="top(105,false)"
+		 	  data-hide-time="2301"
+		 	  data-hide-duration="4500"
+		 	  data-hide-ease="easeInOutQuart"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip1.png" alt="Animated Layers"
+		 	  style="left:97px; top:97px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="top(400,false)"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="6400"
+			  data-hide-time="9000"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
+		 	  style="left:102px; top:262px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="6400"
+			  data-hide-time="9000"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/image-layer.png" alt="Image Layers"
+		 	  style="left:97px; top:97px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="top(400,false)"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="9100"
+			  data-hide-time="12300"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
+		 	  style="left:102px; top:262px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="9100"
+			  data-hide-time="12300"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/video-layer.png" alt="Video Layers"
+		 	  style="left:97px; top:97px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="top(400,false)"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="12800"
+		 	  data-hide-time="15600"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
+		 	  style="left:102px; top:262px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="12800"
+		 	  data-hide-time="15600"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/html-layer.png" alt="HTML Layers"
+		 	  style="left:97px; top:97px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="top(400,false)"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="15700"
+		 	  data-hide-time="18400"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
+		 	  style="left:102px; top:262px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="15700"
+		 	  data-hide-time="18400"
+			  data-hide-duration="800"
+			  data-hide-effect="from(-90,50)"
+			  data-hide-ease="easeInQuad"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/text-layer.png" alt="Text Layers"
+		 	  style="left:97px; top:97px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-effect="top(400,false)"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="18500"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
+		 	  style="left:102px; top:262px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-duration="2100"
+		 	  data-ease="easeOutQuart"
+		 	  data-delay="18500"
+		/>
+		<img src="masterslider/blank.gif" data-src="img/slide5/infinit.png" alt="char"
+		 	  style="left:1057px; top:175px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+		 	  data-delay="7600"
+		 	  data-effect="rotatefront(40,900)"
+		 	  data-ease="easeOutExpo"
+		 	  data-duration="1500"
+		/>
+		<h3 class="ms-layer hps-title1"
+			style="left: 881px;top: 193px;"
+			data-type="text"
+			data-delay="6300"
+			data-effect="skewleft(50,340)"
+			data-ease="easeOutExpo"
+			data-duration="2200"
+		>
+			Unlimited
+		</h3>
+		<h3 class="ms-layer hps-title2"
+			style="left: 883px;top: 233px;"
+			data-type="text"
+			data-delay="6300"
+			data-effect="skewright(50,340)"
+			data-ease="easeOutExpo"
+			data-duration="2200"
+		>
+			Transition Effects
+		</h3>
+		<h3 class="ms-layer hps-title3"
+			style="left: 883px;top: 287px;"
+			data-type="text"
+			data-delay="7000"
+		 	data-effect="rotate3dbottom(100,0,0,70)"
+		 	data-ease="easeOutExpo"
+		 	data-duration="2300"
+		>
+			In &amp; Out Transitions Supported
+		</h3>
+		<p class="ms-layer hps-text1"
+			style="left: 885px; top: 350px;"
+			data-type="text"
+			data-delay="7800"
+			data-ease="easeOutExpo"
+			data-effect="left(50)"
+		 	data-duration="2300"
+		>
+			You can easily add image, html formatted texts and video layers over each slide and each layer accepts unique animation parameters like animation effect, duration, delay, etc.
+		</p>
+    </div>
+    <!-- end of slide -->
+ 	<!-- new slide -->
+    <div class="ms-slide slide-6" data-delay="9">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide6/bg.jpg" alt="Slide3 Background"/>
+		<h3 class="ms-layer hps-title1"
+			style="left: 1032px;top: 197px;"
+			data-type="text"
+			data-delay="1500"
+			data-effect="left(250)"
+			data-ease="easeInOutQuart"
+			data-duration="2400"
+		>
+			Video Layer <br /><span class="sub-title">Support</span>
+		</h3>
+		<h3 class="ms-layer hps-title2"
+			style="left: 1032px;top: 287px;"
+			data-type="text"
+			data-delay="1650"
+			data-effect="left(250)"
+			data-ease="easeInOutQuart"
+			data-duration="2400"
+		>
+			with Custom Video Cover
+		</h3>
+		<h3 class="ms-layer hps-title3"
+			style="left: 1032px;top: 320px;"
+			data-type="text"
+			data-delay="1750"
+			data-effect="left(250)"
+			data-ease="easeInOutQuart"
+			data-duration="2400"
+		>
+			YouTube
+		</h3>
+		<h3 class="ms-layer hps-title3 hps-title3-vimeo"
+			style="left: 1032px;top: 372px;"
+			data-type="text"
+			data-delay="1850"
+			data-effect="left(250)"
+			data-ease="easeInOutQuart"
+			data-duration="2400"
+		>
+			Vimeo
+		</h3>
+		<img src="masterslider/blank.gif" data-src="img/slide6/video-shadow.png" alt="video shadow"
+		 	  style="left:298px; top:435px;"
+		 	  class="ms-layer"
+		 	  data-type="image"
+			  data-duration="3000"
+			  data-ease="easeOutExpo"
+		/>
+		<div class="ms-layer video-box" style="left:370px; top:105px; width:662px; height:372px"
+			  data-type="video"
+			  data-effect="top(100)"
+			  data-duration="3000"
+			  data-ease="easeOutExpo"
+		>
+			<img src="masterslider/blank.gif" data-src="img/slide6/video-cover.jpg" alt="video shadow"/>
+			<iframe src="http://player.vimeo.com/video/50672540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe>
+		</div>
+    </div>
+    <!-- end of slide -->
+    	<!-- new slide -->
+    <div class="ms-slide slide-7" data-delay="6">
+        <!-- slide background -->
+        <img src="masterslider/blank.gif" data-src="img/slide7/bg.jpg" alt="Slide3 Background"/>
+		<a href="http://player.vimeo.com/video/58226214" data-type="video">REDBULL</a>
+		<h3 class="ms-layer hps-title1"
+			style="left: 830px; top: 220px;"
+			data-type="text"
+			data-duration="1400"
+		 	data-ease="easeOutExpo"
+		 	data-effect="rotate3dtop(90,0,0,80)"
+		>
+			Fullscreen
+		</h3>
+		<h3 class="ms-layer hps-title2"
+			style="left: 835px;top: 284px;"
+			data-type="text"
+			data-duration="1800"
+			data-delay="140"
+		 	data-ease="easeOutExpo"
+		 	data-effect="bottom(40)"
+		>
+			Video Support
+		</h3>
+		<h3 class="ms-layer hps-title3"
+			style="left: 835px;top: 318px;"
+			data-type="text"
+			data-delay="1000"
+			data-ease="easeOutExpo"
+			data-duration="1230"
+			data-effect="scale(1.5,1.6)"
+		>
+			with Custom Video Cover
+		</h3>
+    </div>
+    <!-- end of slide -->
+</div>
+<!-- end of masterslider -->
+					 	</div>
+					  	<div class="tab-pane fade" id="java-script">
+					  		<div class="html-describe">You need to put the following scripts just before the &lt; &#8260; body&gt; </div>
+					  		<pre class="brush: js">
+	&lt;script type="text/javascript"&gt;
+	   var slider = new MasterSlider();
+	    // adds Arrows navigation control to the slider.
+	    slider.control('arrows');
+	    slider.control('timebar' , {insertTo:'#masterslider'});
+	    slider.control('bullets');
+	     slider.setup('masterslider' , {
+	         width:1400,    // slider standard width
+	         height:580,   // slider standard height
+	         space:1,
+	         layout:'fullwidth',
+	         loop:true,
+	         preload:0,
+	         autoplay:true
+	    });
+	&lt;/script&gt;
+							</pre>
+					  	</div>
+						<div class="tab-pane fade" id="requierd-files">
+							<div class="html-describe">You need to import the following files  </div>
+							<pre class="brush: html">
+		&lt;!-- Base MasterSlider style sheet -->
+		&lt;link rel=&quot;stylesheet&quot; href=&quot;../masterslider/style/masterslider.css&quot; />
+		&lt;!-- Master Slider Skin -->
+		&lt;link href=&quot;../masterslider/skins/default/style.css&quot; rel='stylesheet' type='text/css'>
+		<!-- Home slider style -->
+		<link rel="stylesheet" href="style/style.css" />
+		&lt;!-- jQuery -->
+		&lt;script src=&quot;../masterslider/jquery.min.js&quot;>&lt;/script>
+		&lt;script src=&quot;../masterslider/jquery.easing.min.js&quot;>&lt;/script>
+		&lt;!-- Master Slider -->
+		&lt;script src=&quot;../masterslider/masterslider.min.js&quot;>&lt;/script>
+							</pre>
+						</div>
+					</div>
+					<!-- end of Tab panes -->
+	</div>
+	<!-- end of syntaxHylight wrapper -->
+	<script type="text/javascript">
+	    var slider = new MasterSlider();
+	    // adds Arrows navigation control to the slider.
+	    slider.control('arrows');
+	    slider.control('timebar' , {insertTo:'#masterslider'});
+	    slider.control('bullets');
+	     slider.setup('masterslider' , {
+	         width:1400,    // slider standard width
+	         height:580,   // slider standard height
+	         space:1,
+	         layout:'fullwidth',
+	         loop:true,
+	         preload:0,
+	         autoplay:true
+	    });
+	    SyntaxHighlighter.all();
+	</script>
+		</body>
+</html>