123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="http://muzzbuzz.com/wp-content/uploads/2014/07/scroller.js"></script>

				<section id="slide-1" style="height:1300px;">
   <div class="bcg"></div> 

  <div class="cloud"
       data--200-top="opacity: 0; transform:translateX(-1000px)" 
      data--400-top="opacity: 1; transform:translateX(-500px)"
      data--500-top="opacity: 1; transform:translateX(0px)"
      data--600-top="opacity: 1; transform:translateX(500px)"
      data--700-top="opacity: 1; transform:translateX(700px)"
       data--8000-top="opacity: 0; transform:translateX(1000px)"
      data-anchor-target="#slide-1"></div>
  <div class="plane"
       data--700-top="opacity: 0; transform:translateX(-1000px)" 
      data--800-top="opacity: 1; transform:translateX(-200px)"
      data--1000-top="opacity: 1; transform:translateX(400px)"
      data--1100-top="opacity: 1; transform:translateX(800px)"
      data--1200-top="opacity: 1; transform:translateX(900px)"
      data--1400-top="opacity: 1; transform:translateX(1000px)"
      data-anchor-target="#slide-1"></div>
  <div class="logo" 
      data-top="opacity: 1; transform:translateY(-200px)"
      data--1100-top="opacity: 1; transform:translateY(-200px);position:fixed;top:500px" 
      data--1400-top="opacity: 1; transform:translateY(0)" 
      data--1500-top="opacity: 1; transform:translateY(0)" 
      data--1550-top="opacity: 0; transform:translateY(0)"
      data--6600-top="opacity: 0; transform:translateY(0)"
      data--6700-top="opacity: 1; transform:translateY(0);"
      data--6889-top="opacity: 1; transform:translateY(0);"
      data--6890-top="position:absolute; top:7500px;"
      data-anchor-target="#slide-1"
    ></div>
  <div class="skip" 
     data-top="opacity: 0.5;"
     data--1250-top="opacity: 0.5;" 
     data--1300-top="opacity: 0;"
     data-anchor-target="#slide-1"
    ><a href="http://muzzbuzz.com" style="text-align:center;">Click here to skip presentation 
</a></div>
  
<div class="store"></div>
<div class="storelogo"
     data--1600-top="opacity: 0; transform: scale(1.5)" 
     data--1800-top="opacity: 1; transform: scale(1)" 
     data-anchor-target="#slide-1"></div> 
<div class="road"></div>
<div class="text1"
     data--1500-top="opacity: 0" 
     data--1600-top="opacity: 1" 
     data-anchor-target="#slide-1"
     ></div>
<div class="text2"
     data--1700-top="opacity: 0" 
     data--1850-top="opacity: 1"
     data--2550-top="opacity: 1"
     data--2650-top="opacity: 1" 
     data-anchor-target="#slide-1"></div>
<div class="car"
      data--1400-top="opacity: 1;       transform:translate3d(2000px,0px,0px)"
      data--1700-top="opacity: 1; transform:translate3d(-100px,-10px,0px)"
      data--2000-top="opacity: 1; transform:translate3d(-100px,10px,0px)"
      data--2100-top="opacity: 1; transform:translate3d(-100px,-10px,0px)"
      data--2200-top="opacity: 1; transform:translate3d(-100px,10px,0px)"
      data--2300-top="opacity: 1; transform:translate3d(-100px,-10px,0px)"
      data--2400-top="opacity: 1; transform:translate3d(-100px,10px,0px)"
      data--2500-top="opacity: 1; transform:translate3d(-100px,-10px,0px)"
      data-anchor-target="#slide-1"
     ></div> 
     
     <div class="buzzyandmuzzly" 
     data-top="opacity: 1; transform:translateX(0px)" 
      data--1200-top="opacity: 1; transform:translateX(20px)" 
      data--1400-top="opacity: 1; transform:translateX(0px)"
      data--1600-top="opacity: 1; transform:translateX(20px)"
      data--1800-top="opacity: 1; transform:translateX(0px)"
      data--2000-top="opacity: 1; transform:translateX(20px)"
      data--2200-top="opacity: 1; transform:translateX(0px)"
      data-anchor-target="#slide-1"
     ></div>
  
  </div>                                  
                                                                                                                                                                                     
      </section> 
		<section id="slide-2" style="height:768px">
  <div class="bcg"></div>
   </section> 
  <section id="slide-2a" style="height:600px">
  <div class="bcg"></div>
       </section> 
<section id="slide-3" style="height:768px">
  <div class="bcg"></div>
  <div class="stores"></div> 
  <div class="buzzyupperleft"
       data--2200top="opacity: 1; transform:translateX(-60px)" 
      data--2400-top="opacity: 1; transform:translateX(-70px)"
       data--2600top="opacity: 1; transform:translateX(-60px)" 
      data--2800-top="opacity: 1; transform:translateX(-70px)"
       data--3000top="opacity: 1; transform:translateX(-60px)" 
      data--3200-top="opacity: 1; transform:translateX(-70px)"
       data-anchor-target="#slide-1"     
       ></div>
  <div class="buzzylowerleft"
       data--2600top="opacity: 1; transform:rotate(0deg)" 
       data--3400-top="opacity: 1; transform:rotate(-10deg)"
       data-anchor-target="#slide-1"     
       ></div> 
  
    <div class="buzzycenter"
       data--2500top="opacity: 1; transform:translateY(50px)" 
       data--3400-top="opacity: 1; transform:rotate(-250px)"
       data-anchor-target="#slide-1"     
       ></div> 
  
  <div class="buzzylowerright"
       data--2300top="opacity: 1; transform:translateX(80px) scale(1)" 
       data--2700top="opacity: 1; transform:translateX(80px) scale(1.1)" 
       data--3100top="opacity: 1; transform:translateX(80px) scale(1)" 
       data--3500top="opacity: 1; transform:translateX(80px) scale(1.1)"
       data--3800top="opacity: 1; transform:translateX(80px) scale(1)" 
       data--4100top="opacity: 1; transform:translateX(80px) scale(1.1)"
       data-anchor-target="#slide-1"     
       ></div>
  
  <div class="text-3-and-4"
       data--2000top="opacity: 0" 
       data--2100top="opacity: 1" 
       data--2600-top="opacity: 1"
       data-anchor-target="#slide-1"     
       ></div> 
   </section> 
<section id="slide-4" style="height:1600px">
  <div class="bcg"></div>
  <div class="podz"
       data--3000top="opacity: 0; transform:translateY(-200px)" 
      data--3200-top="opacity: 1; transform:translateY(-70px)"
       data--3500top="opacity: 1; transform:translateY(-60px)" 
      data--3700-top="opacity: 1; transform:translateY(-70px)"
       data--3900top="opacity: 1; transform:translateY(-60px)" 
      data--4200-top="opacity: 1; transform:translateY(-70px)"
       data-anchor-target="#slide-1"      
       ></div> 
  <div class="house"></div> 
  <div class="flowers"
       data--3600-top="opacity: 1; transform:translateX(-40px)"
       data--3700-top="opacity: 1; transform:translateX(-30px)" 
      data--3900-top="opacity: 1; transform:translateX(-20px)"
       data--4000-top="opacity: 1; transform:translateX(-35px)" 
      data--4200-top="opacity: 1; transform:translateX(-15px)"
      data--4400-top="opacity: 1; transform:translateX(-45px)"
       data-anchor-target="#slide-1"       
       ></div> 
  <div class="hand"
       data--3200-top="opacity: 0; transform:translateY(-70px)"
       data--3400top="opacity: 1; transform:translateY(-50px)" 
      data--3600-top="opacity: 1; transform:translateY(-70px)"
       data--4000top="opacity: 1; transform:translateY(-50px)" 
      data--4200-top="opacity: 1; transform:translateY(-70px)"
       data-anchor-target="#slide-1"      
       ></div> 
  
  <div class="text5"
       data--3200-top="opacity: 0; transform:translateY(-70px)"
       data--3400top="opacity: 1; transform:translateY(-50px)" 
      data--3600-top="opacity: 1; transform:translateY(-70px)"
       data--4000top="opacity: 1; transform:translateY(-50px)" 
      data--4200-top="opacity: 1; transform:translateY(-70px)"
       data-anchor-target="#slide-1"     
       ></div> 
  <div class="road-section-4"></div>
  <div class="atm-section-4"
       data--4200-top="opacity: 1; transform:scaleY(1)"
       data--4400-top="opacity: 1; transform:scaleY(1.3)"
       data--4500top="opacity: 1; transform:scaleY(1)" 
       data-anchor-target="#slide-1"  
       ></div> 
  <div class="text6"
       data--4000top="opacity:0" 
       data--4200-top="opacity:1"
       data-anchor-target="#slide-1"     
       ></div> 
  <div class="money"
        data--3800-top="opacity: 0; transform:scaleY(1)"
       data--4000top="opacity: 1; transform:scaleY(1.2)" 
      data--4600-top="opacity: 1; transform:scaleY(1)"
       data--5100top="opacity: 1; transform:scaleY(1.2)" 
      data--5600-top="opacity: 1; transform:scaleY(1)"
       data-anchor-target="#slide-1"     
       ></div> 
  
  <div class="vehicle-section-4 "
       data--4000-top="opacity: 1; transform:translate3d(-30px,0px,0px) scale(0.5)"
       data--4035-top="opacity: 1; transform:translate3d(-60px,100px,0px) scale(0.5)"
       data--4235-top="opacity: 1; transform:translate3d(-240px,150px,0px) scale(0.55)"
       data--4350-top="opacity: 1; transform:translate3d(-220px,350px,0px) scale(0.6)"
       data--4400-top="opacity: 1; transform:translate3d(-120px,400px,0px) scale(0.7)"
       data--4600-top="opacity: 1; transform:translate3d(-0px,500px,0px) scale(1)"
       data-anchor-target="#slide-1"     
       ></div> 
  
   <div class="hand-section-4 "
       data--4350-top="opacity: 0; transform:translate3d(-200px,350px,0px) scale(0.6)"
       data--4400-top="opacity: 1; transform:translate3d(-60px,400px,0px) scale(0.7)"
       data--4600-top="opacity: 1; transform:translate3d(-0px,500px,0px) scale(0.8)"
       data-anchor-target="#slide-1"          
       ></div> 
  
  
 </section> 
<section id="slide-5" style="height:768px">
  <div class="bcg"></div>
  <div class="pinkroad"></div>
  <div class="text7"></div>
  <div class="buzzy-section-5"
       data--5400-top="opacity: 1; transform:translateX(-90px)"
       data--5600-top="opacity: 1; transform:translateX(-80px)" 
      data--5800-top="opacity: 1; transform:translateX(-100px)"
       data--6000-top="opacity: 1; transform:translateX(-95px)" 
      data--6200-top="opacity: 1; transform:translateX(-75px)"
      data--7500-top="opacity: 1; transform:translateX(-90px)"
       data-anchor-target="#slide-1" 
       ></div>
    <div class="buzzy-hand"
       data--4300-top="opacity: 1; transform:translateX(-150px)"
       data--4600-top="opacity: 1; transform:translateX(-200px)" 
      data--4800-top="opacity: 1; transform:translateX(-100px)"
       data--5000-top="opacity: 1; transform:translateX(-110px)" 
      data--5200-top="opacity: 1; transform:translateX(-95px)"
      data--6500-top="opacity: 1; transform:translateX(-105px)"
       data-anchor-target="#slide-1" 
       ></div>
  <div class="muzzly-section-5"
       data--5000-top="opacity: 1; transform:translateX(200px)"
       data--5200-top="opacity: 1; transform:translateX(210px)" 
      data--5400-top="opacity: 1; transform:translateX(220px)"
       data--5600-top="opacity: 1; transform:translateX(215px)" 
      data--5800-top="opacity: 1; transform:translateX(225px)"
      data--6200-top="opacity: 1; transform:translateX(230px)"
       data-anchor-target="#slide-1" 
       ></div>
  <div class="balls-section-5"
       data--4600-top="opacity: 1; transform:translate3d(-350px,-200px,0px) scale(0)" 
       data--4800-top="opacity: 1; transform:translate3d(30px,0px,0px) scale(1)"
       data--5000-top="opacity: 1;  transform:translate3d(15px,0px,0px) scale(1)" 
       data--5200-top="opacity: 1; transform:translate3d(25px,0px,0px) scale(1)"
       data--6500-top="opacity: 1; transform:translate3d(30px,0px,0px) scale(1)"
       data-anchor-target="#slide-1" 
       ></div>
  <div class="text8"></div>
  <div class="ball-lips"></div>
  <div class="lips"
       data--4800-top="opacity: 1; transform:scale(1)"
       data--5000-top="opacity: 1; transform:scale(0.8)" 
      data--5400-top="opacity: 1; transform:scale(1)"
       data--5600-top="opacity: 1; transform:scale(0.7)" 
      data--5800-top="opacity: 1; transform:scale(1)"
      data--6000-top="opacity: 1; transform:scale(0.8)"
       data-anchor-target="#slide-1"
       ></div>
    <div class="coffee"></div>
  <div class="straw"></div> 
  
  <div class="liquid-6"
      data--5500-top="opacity: 1"
      data--5599-top="opacity: 1"
      data--5600-top="opacity: 0"
      data-anchor-target="#slide-1"
      ></div>
  <div class="liquid-5"
      data--5599-top="opacity: 0" 
      data--5600-top="opacity: 1" 
      data--5699-top="opacity: 1"
      data--5700-top="opacity: 0"
      data-anchor-target="#slide-1"
       ></div> 
  <div class="liquid-4"
       data--5699-top="opacity: 0" 
      data--5700-top="opacity: 1"
      data--5799-top="opacity: 1"
      data--5800-top="opacity: 0"
      data-anchor-target="#slide-1"
       ></div> 
  <div class="liquid-3"
      data--5799-top="opacity: 0" 
      data--5800-top="opacity: 1"
      data--5899-top="opacity: 1"
       data--5900-top="opacity: 0"
      data-anchor-target="#slide-1"
       ></div> 
  <div class="liquid-2"
      data--5899-top="opacity: 0" 
      data--5900-top="opacity: 1"
      data--6099-top="opacity: 1"
       data--6100-top="opacity: 0"
      data-anchor-target="#slide-1"
       ></div> 
  <div class="liquid-1"
       data--6099-top="opacity: 0" 
      data--6100-top="opacity: 1"
      data-anchor-target="#slide-1"
       ></div> 
     </section> 
 <section id="slide-6" style="height:768px">
  <div class="bcg"></div>
   </section> 
<section id="slide-7" style="height:768px">
  <div class="bcg"></div>
  <div class="text9"></div>
  <div class="globe"></div>
  <div class="globe-texts"
        data--6400-top="opacity: 0; transform:translateX(-500px)"
      data--6500-top="opacity: 1; transform:translateX(0px)"
       data-anchor-target="#slide-1" 
       ></div>
 </section> 
<section id="slide-8" style="height:450px">
<div class="bcg"></div>
  </section> 
  
  
<script type="text/javascript">
var s = skrollr.init({
	render: function(data) {
	  //Log the current scroll position.
	  $('#info').text(data.curTop);
	}
});
</script> 

  
<script type="text/javascript">
$(window).on('mousewheel DOMMouseScroll', function(e) {
  var dir,
      amt = 600;
  
  e.preventDefault();
  if(e.type === 'mousewheel') {
    dir = e.originalEvent.wheelDelta > 0 ? '-=' : '+=';
  }
  else {
    dir = e.originalEvent.detail < 0 ? '-=' : '+=';
  }      
      
  $('html, body').stop().animate({
    scrollTop: dir + amt
  },2000, 'linear');
})
</script> 

            
          
!
            
              #header {display:none;}
#sidebar {display:none;}
#footer {display:none;}
#post-2 > header {display:none;}


html{
 position: relative;
 background-color: #56f7ff;
 overflow-x: hidden;
  
  }


#info {
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  padding: 20px;
  z-index: 9999;
} 


.logo {
  background: url('http://muzzbuzz.com/wp-content/uploads/2014/07/logo-md.png')no-repeat;
  width:627px;
  height:241px;
  z-index: 9;
  left:0;
  right:0;
  margin: auto;
}

.skip {
  position: fixed;
  bottom:0px;
  right: 0;
  z-index: 2000;
  font-family: Shermlock;
  font-size: 30px;
   
}

.plane {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/buzzy-plane-sky.gif')no-repeat;
  width:1500px;
  height:1000px;
  position: absolute;
  top: 1050px;
  z-index: 8;
  left: 0;
  right:0;
  margin: auto;
}


 .cloud {
  background: url('http://muzzbuzz.com/wp-content/uploads/2014/07/three-clouds.png')no-repeat;
  width:1500px;
  height:508px;
  position: absolute;
  top:600px;
  z-index: 8;
  left: 0;
  right:0;
  margin: auto;
}


.store {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/mb_store-e1454719094934.png')no-repeat;
  width:748px;
  height:415px;
  position: absolute;
  top: 2000px;
  z-index: 1996;
  left:0;
  right:0;
  margin: auto;
}


.storelogo {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/mb_store_logo-e1454719178281.png')no-repeat;
  width:748px;
  height:415px;
  position: absolute;
  top: 2000px;
  z-index: 1996;
  left:0;
  right:0;
  margin: auto;
 }


.buzzyandmuzzly {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/buzzy-muzly-image-e1454719282673.png')no-repeat;
  width:748px;
  height:415px;
  position: absolute;
  top: 2000px;
  z-index: 1998;
  left: 0;
  right:0;
  margin: auto;
 }


.car {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/11/car-section-1-e1454719770446.png')no-repeat;
  width:455px;
  height:298px;
  position: absolute;
  top: 2200px;
  z-index: 1999;
  left: 0;
  right:0;
  margin: auto;
  }    


 .text1 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/text1-e1454720019293.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 1920px;
  z-index: 1999;
  left: 0;
  right:0;
  margin: auto;
}


.text2 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/text2-section1-e1454720150835.png')no-repeat;
  width:1024px;
  height:107px;
  position: absolute;
  top: 2570px;
  z-index: 1999;
  left: 0;
  right:0;
  margin: auto;
}

.road {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/02/road.png')no-repeat;
  height:489px;
  background-size: 100% 75%;
  position: absolute;
  top: 2260px;
  z-index: 1999;
  left:0;
  right:0;
  margin: auto;
}


#slide-1 .bcg {
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
   z-index:8;
    background: url('http://muzzbuzz.com/wp-content/uploads/2014/07/muzzbuzzbgstarsky.jpg');  
    background-size: 100% 1473px;
    background-repeat: no-repeat;
      }


 #slide-2 .bcg {
  height: 100%;
  width: 100%;
  background-color:#56f7ff; 
  background-size: 100% 909px;
  background-repeat: no-repeat;
  position: relative;
    }


#slide-2a .bcg{
  height: 100%;
  width: 100%;
  border-top-left-radius: 1100px 150px;
  border-top-right-radius:900px 110px;
  background-color:#94c849; 
      }


#slide-3 .bcg {
  height: 768px;
  width: 100%;
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/bg_section-2-e1454720422372.png');
  background-size: 100% 768px;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
}

.stores {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/mb_stores_section3-e1454720514368.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 2700px;
  z-index: 1996;
  left:0;
  right:0;
  margin: auto;
}


.buzzyupperleft {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/buzzy-upper-left-section3-e1454720747305.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 2700px;
  z-index: 1996;
  left:0;
  right:0;
  margin: auto;
}

.buzzylowerleft {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/buzzy-lower-left-section3-e1454720902263.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 2650px;
  z-index: 1996;
  left:0;
  right:0;
  margin: auto;
}

.buzzycenter {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/buzzy-center-section3-e1454720982481.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 2700px;
  z-index: 1996;
  left:0;
  right:0;
  margin: auto;
}


.buzzylowerright {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/buzzy-lower-right-section3-e1454721040226.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 2700px;
  z-index: 1996;
  left:0;
  right:0;
  margin: auto;
}

.text-3-and-4 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/texts-section-3-e1454720645802.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 2700px;
  z-index: 1994;
  left:0;
  right:0;
  margin: auto;
}
  #slide-4 .bcg {
  height:100%;
  width: 100%;
  background-color: #6db24b;
  background-position: center top;
  position: relative;
     }

.podz {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/podz-section-3-e1454722199847.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 3550px;
  z-index: 1994;
  left:0;
  right:0;
  margin: auto;
}
.house {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/02/house-with-grass-e1454722332602.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 3600px;
  z-index: 1996;
  left:0;
  right:0;
  margin: auto;
}

.flowers {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/02/house-section-3-flowers-e1454723115673.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 3600px;
  z-index: 1996;
  left:0;
  right:0;
  margin: auto;
}


.hand {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/hand-cup-section-3-e1454723313148.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 3600px;
  z-index: 1995;
  left:0;
  right:0;
  margin: auto;
}

.text5 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/text5-e1454723393628.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 3600px;
  z-index: 1995;
  left:0;
  right:0;
  margin: auto;
}

.road-section-4 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/highway-section-4-e1454723630359.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 4365px;
  z-index: 1995;
  left:0;
  right:0;
  margin: auto;
}

.atm-section-4 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/atm-section-4-e1454725809172.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 4350px;
  z-index: 2001;
  left:0;
  right:0;
  margin: auto;
}

.text6 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/02/text6.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 4370px;
  z-index: 1996;
  left:0;
  right:0;
  margin: auto;
}

.money {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/dollar-money-section-4-e1454725559939.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 4350px;
  z-index: 1995;
  left:0;
  right:0;
  margin: auto;
}


.vehicle-section-4 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/vehicle-section-4-e1454723865407.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 3900px;
  z-index: 2000;
  left:0;
  right:0;
  margin: auto;
}

.hand-section-4 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/hand-with-money-section-4-e1454725913787.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 3900px;
  z-index: 1999;
  left:0;
  right:0;
  margin: auto;
}

 #slide-5 .bcg {
 height: 100%;
  width: 100%;
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/10/section_bg5.png');
  background-size: 100% 768px;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
     }

.text7 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/text7-e1454781045999.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 5130px;
  z-index: 1995;
  left:0;
  right:0;
  margin: auto;
}

.pinkroad {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/pink-road-section-5-e1454777509637.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 5130px;
  z-index: 1995;
  left:0;
  right:0;
  margin: auto;
}


.ball-lips {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/ball-lips-section-5-empty-e1454781277336.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 5500px;
  z-index: 1996;
  left:-300px;
  right:0;
  margin: auto;
}

.lips {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/lips-section-5-e1454782317966.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 5500px;
  z-index: 1996;
  left:-300px;
  right:0;
  margin: auto;
}

.coffee {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/empty-coffee-cup-e1454783969390.png')no-repeat;
  width:1024px;
  height:757px;
  position: absolute;
  top: 5700px;
  z-index: 2000;
  left:-20px;
  right:0;
  margin: auto;
}

.straw {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/empty-coffee-cup-straw-e1454783863469.png')no-repeat;
  width:1024px;
  height:757px;
  position: absolute;
  top: 5700px;
  z-index: 1998;
  left:-20px;
  right:0;
  margin: auto;
}


.liquid-1 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/coffee-liquid-1-rainbow-e1454784229643.png')no-repeat;
  width:1024px;
  height:757px;
  position: absolute;
  top: 5700px;
  z-index: 1999;
  left:-20px;
  right:0;
  margin: auto;
} 

.liquid-2 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/coffee-liquid-2-rainbow-e1454784581929.png')no-repeat;
 width:1024px;
  height:757px;
  position: absolute;
  top: 5700px;
  z-index: 1999;
  left:-20px;
  right:0;
  margin: auto;
} 

.liquid-3 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/coffee-liquid-3-rainbow-e1454785104780.png')no-repeat;
  width:1024px;
  height:757px;
  position: absolute;
  top: 5700px;
  z-index: 1999;
  left:-20px;
  right:0;
  margin: auto;
} 

.liquid-4 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/coffee-liquid-4-rainbow-e1454785140283.png')no-repeat;
  width:1024px;
  height:757px;
  position: absolute;
  top: 5700px;
  z-index: 1999;
  left:-20px;
  right:0;
  margin: auto;
} 

.liquid-5 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/coffee-liquid-5-rainbow-e1454785174864.png')no-repeat;
  width:1024px;
  height:757px;
  position: absolute;
  top: 5700px;
  z-index: 1999;
  left:-20px;
  right:0;
  margin: auto;
} 

.liquid-6 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/coffee-liquid-6-rainbow-e1454784797465.png')no-repeat;
  width:1024px;
  height:757px;
  position: absolute;
  top: 5700px;
  z-index: 1999;
  left:-20px;
  right:0;
  margin: auto;
} 

.text8 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/text8-e1454786166776.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 5740px;
  z-index: 1995;
  left:20px;
  right:0;
  margin: auto;
}

.buzzy-section-5 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/buzzy-section-5-no-hand-e1454781152673.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 5150px;
  z-index: 1999;
  left:0;
  right:0;
  margin: auto;
}

.buzzy-hand {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/buzzy-hand-e1454782438142.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 5100px;
  z-index: 1998;
  left:0;
  right:0;
  margin: auto;
}

.muzzly-section-5 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/muzzly-section-5-e1454785987308.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 5100px;
  z-index: 1999;
  left:0;
  right:0;
  margin: auto;
}


.balls-section-5 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/balls-section-5-e1454782808574.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 5100px;
  z-index: 1996;
  left:0;
  right:0;
  margin: auto;
}

 #slide-6 .bcg {
 height: 100%;
  width: 100%;
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/10/section-bg6.png');
  background-size: 100% 768px;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
     }
#slide-7 .bcg {
 height: 100%;
  width: 100%;
  z-index: 10;
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/10/section_7_bg.png');
  background-size: 100% 768px;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
     }

.globe {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/world-section-7-empty-e1454786319404.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 6470px;
  z-index: 1999;
  left:0;
  right:0;
  margin: auto;
}

.globe-texts {
  background: url('http://muzzbuzz.com/wp-content/uploads/2016/01/world-section-7-texts-e1454786430730.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 6550px;
  z-index: 1999;
  left:0;
  right:0;
  margin: auto;
}

.text9 {
  background: url('http://muzzbuzz.com/wp-content/uploads/2015/12/text9-e1454786502457.png')no-repeat;
  width:1024px;
  height:768px;
  position: absolute;
  top: 6470px;
  z-index: 1995;
  left:0;
  right:0;
  margin: auto;
}


 #slide-8 .bcg {
  height: 100%;
  width: 100%;
  z-index: 7;
  background-color: #99cc33;
  background-position: center top;
  position: relative;
     }
}


@media only screen and (min-width: 1024px) {
   .slide-1 {
    display: none;
        
    }
 
}

@media only screen and (min-width: 1024px) {
    .slide-2 {
    display: none;
        
    }
   
}

@media only screen and (min-width: 1024px) {
    .slide-3 {
    display: none;
        
    }
   
}
@media only screen and (min-width: 1024px) {
    .slide-4 {
    display: none;
        
    }
   
}

@media only screen and (min-width: 1024px) {
    .slide-5 {
    display: none;
        
    }
   
}

@media only screen and (min-width: 1024px) {
    .slide-6 {
    display: none;
        
    }
   
}

@media only screen and (min-width: 1024px) {
    .slide-7 {
    display: none;
        
    }
   
}


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console