<div id="layerSlider" class="slider" data-elem="motionslider" data-options="animDuration:0.5">
   <div class="slidesHolder" data-elem="slidesHolder" >
      <div class="slide" style="" data-elem="slide" data-options="thumbUrl:assets/lthumb1.jpg">
         <div class="bdayBg1"></div>
         <div class="bdayBg2" data-motion="{type:from; y:600; duration:0.5; }"></div>
         <div class="bdayClip">
            <img alt="" src="#" data-src="assets/giraffe.png" class="giraffe" data-motion="{type:from; y:600; duration:0.5; delay:0.75 }"/>
            <img alt="" src="#" data-src="assets/balloon1.png" class="balloon1" data-motion="{type:from; y:600; duration:0.5; delay:1; ease:Back.easeOut}"/>
            <img alt="" src="#" data-src="assets/balloon2.png" class="balloon2" data-motion="{type:from; y:600; duration:0.5; delay:1.125; ease:Back.easeOut}"/>
            <img alt="" src="#" data-src="assets/balloon3.png" class="balloon3" data-motion="{type:from; y:600; duration:0.5; delay:1.25; ease:Back.easeOut}"/>
            <!-- gift box holder -->
            <div class="giftBoxHolder" data-motion="{y:600; immediateRender:true}, {y: 169px; rotation:-20deg; duration:0.5; delay:1.5; }"> 
               <!-- confetti divs-->
               <div class="lcon con c1" data-motion="{physics2D:{velocity:-400; angle:50; gravity:900}; duration:2; delay:2.45}"></div>
               <div class="lcon con c2" data-motion="{physics2D:{velocity:-400; angle:60; gravity:900}; duration:2; delay:2.45}"></div>
               <div class="lcon con c3" data-motion="{physics2D:{velocity:-600; angle:70; gravity:900}; duration:2; delay:2.45}"></div>
               <div class="lcon con c4" data-motion="{physics2D:{velocity:-500; angle:80; gravity:900}; duration:2; delay:2.45}"></div>
               <div class="lcon con c5" data-motion="{physics2D:{velocity:-300; angle:55; gravity:900}; duration:2; delay:2.45}"></div>
               <div class="lcon con c6" data-motion="{physics2D:{velocity:-200; angle:65; gravity:900}; duration:2; delay:2.45}"></div>
               <div class="lcon con c1" data-motion="{physics2D:{velocity:-300; angle:75; gravity:900}; duration:2; delay:2.45}"></div>
               <div class="lcon con c2" data-motion="{physics2D:{velocity:-200; angle:85; gravity:900}; duration:2; delay:2.45}"></div>
               <div class="rcon con c3" data-motion="{physics2D:{velocity:-300; angle:110; gravity:900}; duration:2; delay:2.45}"></div>
               <div class="rcon con c4" data-motion="{physics2D:{velocity:-400; angle:125; gravity:900}; duration:2; delay:2.45}"></div>
               <div class="rcon con c5" data-motion="{physics2D:{velocity:-300; angle:115; gravity:900}; duration:2; delay:2.45}"></div>
               <img alt="" src="#" data-src="assets/gift_box.png" class="giftBox"/>
               <img alt="" src="#" data-src="assets/gift_top.png" class="giftTop" data-motion="{physics2D:{velocity:-300; angle:60; gravity:900};   duration:2; delay:2.25 }"/>
               <!-- empty divs targetting group animation-->
               <div data-motion="{target:.giftTop; rotation:-120deg ; duration:2; delay:2.25;}"></div>
               <div data-motion="{target:.lcon; rotation:-120deg ; duration:2; delay:2.45; zIndex:999; }"></div>
               <div data-motion="{target:.rcon; rotation:120deg ; duration:2; delay:2.45; zIndex:999; }"></div>
            </div>
         </div>
         <img alt="" src="#" data-src="assets/bday_sign.png" class="bdaySign" data-motion="{type:from; y:450px; duration:0.5; delay:0.25 }"/>
      </div>
      <div class="slide" style="" data-elem="slide" data-options="thumbUrl:assets/lthumb2.jpg">
         <div class="valHolder" data-motion="{perspective:500}">
            <img alt="" src="#" data-src="assets/val_bg.jpg" class="valBg"/>
            <img alt="" src="#" data-src="assets/heart4.png" class="heart4" data-motion="{rotationY:5; z:25; transformOrigin:50% 0; immediateRender:true}, {y:-421px; duration:1; delay:0.75; ease:Back.easeOut; type:from}, {rotationY:0; duration:2;}"/>
            <img alt="" src="#" data-src="assets/heart3.png" class="heart3" data-motion="{rotationY:-10; z:30; immediateRender:true}, {y:-378px; duration:1; delay:0.5; ease:Back.easeOut; type:from}, {rotationY:0; duration:2.25;}"/>
            <img alt="" src="#" data-src="assets/heart2.png" class="heart2" data-motion="{rotationY:-15; z:35; immediateRender:true}, {y:-296px; duration:1; delay:0.25; ease:Back.easeOut; type:from}, {rotationY:0; duration:2.5;}"/>
            <img alt="" src="#" data-src="assets/heart1.png" class="heart1" data-motion="{rotationY:-20; z:50; immediateRender:true}, {y:-218px; duration:1; ease:Back.easeOut; type:from}, {rotationY:0; duration:2.75;}"/>
         </div>
         <img alt="" src="#" data-src="assets/val_text.png" class="valText" data-motion="{type:from; x:-200px; autoAlpha:0; duration:0.5; ease:Back.easeOut; delay:2}, {alpha:1; duration:1;}"/>
      </div>
      <div class="slide" style="" data-elem="slide" data-options="thumbUrl:assets/lthumb3.jpg">
         <div class="xmasBg"></div>
         <div class="whiteBg" data-motion="{type:from; y:600; duration:0.25;}"></div>
         
         <!-- mountains -->
         <div class="mountainGroup">
            <img alt="" src="#" data-src="assets/snow_mountain.png" class="snowMountain mount1" data-motion="{y:600; duration:0.5; delay:0.5; type:from}"/>
            <img alt="" src="#" data-src="assets/snow_mountain.png" class="snowMountain mount2" data-motion="{y:600; duration:0.5; delay:0.75; type:from}"/>
            <img alt="" src="#" data-src="assets/snow_mountain.png" class="snowMountain mount3" data-motion="{y:600; duration:0.5; delay:1; type:from}"/>
         </div>
         
         <!-- pine tress -->
         <img alt="" src="#" data-src="assets/full_tree.png" class="fullTree tree1" data-motion="{scale:0; transformOrigin:50% 100% 0; immediateRender:true}, {scale:0.75; duration:0.5; delay:1.125}"/>
         <img alt="" src="#" data-src="assets/full_tree.png" class="fullTree tree2" data-motion="{scale:0; transformOrigin:50% 100% 0; immediateRender:true}, {scale:0.75; duration:0.5; delay:1.25}"/>
         <img alt="" src="#" data-src="assets/full_tree.png" class="fullTree tree3" data-motion="{scale:0; transformOrigin:50% 100% 0; immediateRender:true}, {scale:1; duration:0.5; delay:1.375}"/>
         <img alt="" src="#" data-src="assets/full_tree.png" class="fullTree tree4" data-motion="{scale:0; transformOrigin:50% 100% 0; immediateRender:true}, {scale:0.6; duration:0.5; delay:1.5}"/>
         <img alt="" src="#" data-src="assets/full_tree.png" class="fullTree tree5" data-motion="{backfaceVisibility:hidden; scale:0; transformOrigin:50% 100% 0; immediateRender:true}, {scale:0.75; duration:0.5; delay:1.4}"/>
         <img alt="" src="#" data-src="assets/snowman.png" class="snowman" data-motion="{type:from; x:398; duration:1; ease:Elastic.easeOut; delay:2}"/>
         
         <!-- snowballs -->
         <div class="snowball" data-motion="{scale:0.75; x:12}, {y:360; duration:3; delay:2.5; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.55; x:168}, {y:360; duration:3; delay:2.5; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:1; x:372}, {y:360; duration:3; delay:2.5; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:1; x:552}, {y:360; duration:3; delay:2.5; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.75; x:270; y:-90}, {y:247; duration:2.6; delay:2.9; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.75; x:192; y:-90}, {y:292; duration:2.6; delay:2.9; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.65; x:408; y:-90}, {y:279; duration:2.6; delay:2.9; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.65; x:126; y:-90}, {y:306; duration:2.6; delay:2.9; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.75; x:150; y:-180}, {y:193; duration:2.2; delay:3.3; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.75; x:492; y:-180}, {y:207; duration:2.2; delay:3.3; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.65; x:492; y:-180}, {y:243; duration:2.2; delay:3.3; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.65; x:66; y:-180}, {y:189; duration:2.2; delay:3.3; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.75; x:312; y:-270}, {y:76; duration:1.8; delay:3.7; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.75; x:168; y:-270}, {y:54; duration:1.8; delay:3.7; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.65; x:504; y:-270}, {y:90; duration:1.8; delay:3.7; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.65; x:564; y:-270}, {y:112; duration:1.8; delay:3.7; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.75; x:264; y:-360}, {y:31; duration:1.4; delay:4.1; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.75; x:402; y:-360}, {y:13; duration:1.4; delay:4.1; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.65; x:72; y:-360}, {y:27; duration:1.4; delay:4.1; ease:Linear.easeNone}"></div>
         <div class="snowball" data-motion="{scale:0.65; x:576; y:-360}, {y:22; duration:1.4; delay:4.1; ease:Linear.easeNone}"></div>
         <img alt="" src="#" data-src="assets/xmas_sign.png" class="xmasSign" data-motion="{type:from; y:-185px; duration:0.5; delay:2.5}"/>
         <div data-motion="{target:.snowball; borderRadius:5px;}"></div>
      </div>
   </div>
   <div data-elem="controls">
      <div class="controlHolder">
         <div class="seekControl" data-elem="seek">
            <div class="seekPath">
               <div class="seekPercent" data-elem="percent"></div>
            </div>
            <div class="seekThumb" data-elem="thumb"></div>
         </div>
         <div class="autoplayOn" data-elem="autoplay" data-options="onCss:autoplayOn; offCss:autoplayOff"></div>
         <div class="thumbsOn" data-elem="thumbsToggle" data-options="onCss:thumbsOn; offCss:thumbsOff"></div>
      </div>
      <div class="thumbsHolder" data-elem="thumbsHolder">
         <div class="thumbs blackBgAlpha60" data-elem="thumbScroller" style="" data-options="thumbWidth:75; thumbHeight:67; defaultAlpha:0.6; padding:5; space:5; setParentVisibility:true; initShow:false; preloaderUrl:assets/preloader.gif; onCss:{bottom:0px; position:absolute; display:block}; offCss:{bottom:-150px; display:block}" ></div>
      </div>
      <div class="prevOn" data-elem="prev" data-options="onCss:prevOn; offCss:prevOff"></div>
      <div class="nextOn" data-elem="next" data-options="onCss:nextOn; offCss:nextOff"></div>
   </div>
</div>

.slider, .slide

{

   width:600px;

   height:450px;

   overflow:hidden;

}


.ratioHolder

{

   width:100%;

   padding-bottom:75%;

   position:relative;

   border:1px dotted #CCC;

   border-bottom:none;

   margin-top:20px;

}


.snowball

{

   background-color:#FFFFFF;

   width:10px;

   height:10px;

   position:absolute;

   top:-10px;

}


.con

{

   width:15px;

   height:5px;

   position:absolute;

   left: 44px;

   top: 44px;

   z-index:0

}


.c1

{

   background-color:#FDCB95

}


.c2

{

   background-color:#47A1B6

}


.c3

{

   background-color:#E97379

}


.c4

{

   background-color:#E7AEB0

}


.c5

{

   background-color:#F5E5E6

}


.c6

{

   background-color:#83C5D0

}


.bdayBg1

{

   background:url(../assets/bday_bg1.png) repeat;

   width:100%;

   height:100%;

   position:absolute;

   left:0px;

   top:0px

}


.bdayBg2

{

   background:url(../assets/bday_bg2.png) repeat;

   width:100%;

   height:120px;

   position:absolute;

   left:0px;

   top:330px

}


.bdayClip

{

   width:100%;

   height:330px;

   position:absolute;

   left:0px;

   top:0px;

   overflow:hidden

}


.giraffe

{

   width:252px;

   height:352px;

   position:absolute;

   left:170px;

   top:15px

}


.balloon1

{

   width:108px;

   height:296px;

   position:absolute;

   left:473px;

   top:75px

}


.balloon2

{

   width:108px;

   height:316px;

   position:absolute;

   left:378px;

   top:58px

}


.balloon3

{

   width:110px;

   height:260px;

   position:absolute;

   left:416px;

   top:110px

}


.giftBoxHolder

{

   width:96px;

   height:164px;

   position:absolute;

   left: 124px;

   top: 0px;

   z-index:0

}


.giftBox

{

   width:96px;

   height:120px;

   position:absolute;

   left:0px;

   top:44px

}


.giftTop

{

   width:64px;

   height:44px;

   position:absolute;

   left:16px;

   top:1px

}


.bdaySign

{

   width:442px;

   height:124px;

   position:absolute;

   left:81px;

   top:308px

}


.valHolder

{

   position:absolute;

   left:0px;

   top:0px;

   left:0px;

   top:0px;

}


.valBg

{

   width:600px;

   height:450px;

   position:absolute;

   left:0px;

   top:0px

}


.heart4

{

   width:166px;

   height:510px;

   position:absolute;

   left:255px;

   top:-90px

}


.heart3

{

   width:88px;

   height:468px;

   position:absolute;

   left:450px;

   top:-90px

}


.heart2

{

   width:116px;

   height:385px;

   position:absolute;

   left:380px;

   top:-90px

}


.heart1

{

   width:112px;

   height:307px;

   position:absolute;

   left:290px;

   top:-90px

}


.valText

{

   width:200px;

   height:182px;

   position:absolute;

   left:75px;

   top:55px

}


.xmasBg

{

   background:url(../assets/xmas_bg.png) repeat;

   width:100%;

   height:100%;

   position:absolute;

}


.whiteBg

{

   background:#FFFFFF;

   width:100%;

   height:71px;

   position:absolute;

   left:0px;

   bottom:1px

}


.fullTree

{

   width:105px;

   height:105px;

   position:absolute;

}


.tree1

{

   left:22px;

   top:240px

}


.tree2

{

   left:215px;

   top:228px

}


.tree3

{

   left:115px;

   top:211px

}


.tree4

{

   left:420px;

   top:208px

}


.tree5

{

   left:491px;

   top:245px

}


.snowman

{

   width:279px;

   height:300px;

   position:absolute;

   left:252px;

   top:127px

}


.mountainGroup

{

   width:100%;

   height:200px;

   left:0px;

   bottom:70px;

   position:absolute;

   overflow:hidden

}


.snowMountain

{

   width:363px;

   height:129px;

   position:absolute;

}


.mount1

{

   left:-40px;

   top:90px

}


.mount2

{

   left:150px;

   top:72px

}


.mount3

{

   left:350px;

   top:80px

}


.xmasSign

{

   width:200px;

   height:162px;

   position:absolute;

   left:201px;

   top:20px

}