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.

            
              <section id="intro" class="intro-section">
  <div class="scene-wrapper" id="scene-wrapper">
    <div class="scene-contents" id="scene-contents">
      <div class="goldtag"><img src="https://dl.dropboxusercontent.com/s/nqze0myrxbqc0id/MorleyGoldTag.svg" alt="Morley Gold Tag"></div>
      <div class="ssnsgrt"><img src="https://dl.dropboxusercontent.com/s/p54u3x04l3m05bk/SeasoningsGreetings.svg" alt="Message: Seasonings Greetings"></div>
      <div class="holiday-scene-right">
        <div class="animated-1200 bounceInDown pcnpie"><img src="https://dl.dropboxusercontent.com/s/a7dxdcmlcz1eoq4/PecanPie.png" alt="Pecan pie."></div>
        <div class="animated-1500 bounceInDown cberry"><img src="https://dl.dropboxusercontent.com/s/xn9kxw1q4oi3azg/CranberryCinnamon.png" alt="Cranberries and cinnamon."></div>
        <div class="animated-1100 bounceInDown ovnmit"><img src="https://dl.dropboxusercontent.com/s/f0cjj7o1zgupinp/OvenMitCandyCane.png" alt="Oven mit and candy cane."></div>
        <div class="animated-1400 bounceInDown gngrbrd"><img src="https://dl.dropboxusercontent.com/s/uzebs21njplatbi/GingerbreadCookies.png" alt="Plate of gingerbread cookies."></div>
        <div class="animated-1000 bounceInDown npkns"><img src="https://dl.dropboxusercontent.com/s/q7v52pqfjavkj8j/NapkinPineSprig.png" alt="Napkin and pine sprig."></div>
      </div>
      <div class="holiday-scene-left">
        <div class="animated-1200 bounceInDown trky"><img src="https://dl.dropboxusercontent.com/s/if523zcjqvbqtfm/RoastTurkey.png" alt="A roast turkey."></div>
        <div class="animated-1500 bounceInDown pocakes"><img src="https://dl.dropboxusercontent.com/s/rzj3uns43ab8x97/PotatoPancakes.png" alt="Potato pancakes and a pine sprig."></div>
        <div class="animated-1100 bounceInDown appsauce"><img src="https://dl.dropboxusercontent.com/s/q6iqavigm8tds02/Applesauce.png" alt="Applesauce."></div>
        <div class="animated-1300 bounceInDown peppmnt"><img src="https://dl.dropboxusercontent.com/s/fc4hbos7yvroqtr/AnisePeppermints.png" alt="Star anise spice and peppermints."></div>
        <div class="animated-1600 bounceInDown decor"><img src="https://dl.dropboxusercontent.com/s/zdwng2axzn5w5gg/DecorGelt.png" alt="Star and Hanukkah gelt."></div>
        <div class="animated-1400 bounceInDown whisk"><img src="https://dl.dropboxusercontent.com/s/eej1s9lhnpprmdq/Whisk.png" alt="Cooking whisk."></div>
      </div>
    </div>
    <!-- END Scene Contents -->
  </div>
</section>
<!-- BEGIN -->
<section class="about-section">
  <div class="about-wrapper" id="about-wrapper">
    <div class="about-text" id="about-text">
      <h1 class="h1-white">We've been cooking up something tasty</h1>
      <p class="body-white">...and you're in for a treat: our “flavorite” foods to make your holiday complete.</p>
      <div class="about-decor"><img src="https://dl.dropboxusercontent.com/s/akxhy6djedrrcyv/icons_utensils.png" alt="Fork and knife."></div>
    </div>
  </div>
  <div class="hot-cake">
    <div id="obj-ovenmit" class="obj-right"><img src="https://dl.dropboxusercontent.com/s/wvdh8id136ljiax/ovnmit.png" alt="Morley holiday oven mit."></div>
    <div id="obj-cake" class="obj-left" animated-3000 ""><img src="https://dl.dropboxusercontent.com/s/3resew1c8o8exlk/pprmntcake.png" alt="Peppermint bundt cake."></div>
  </div>
</section>
<!-- END -->
<!-- BEGIN -->
<section class="video-section">
  <div class="video-wrapper cf">
    <ul>
      <li class="video-item cf">
        <div class="vid vid-img v1">
          <div class="play-btn"><a href="https://vimeo.com/194054624" target="_blank"></a></div>
          <img src="https://dl.dropboxusercontent.com/s/z8k7d8i2w5mtqdn/intro-01.jpeg" alt="Video thumbnail.">
          <!-- hide/show background image on hover -->
        </div>
        <div class="vid vid-deets d1">
          <div class="vid-decor"><img src="https://dl.dropboxusercontent.com/s/porq1uavb8uf3ux/icons_holly.png" alt="Icon of holly."></div>
          <div class="red-hr"></div>
          <p class="body-grey">Our associates wanted to spread some holiday cheer, and give you a very Morley holiday this year!</p>
        </div>
      </li>
      <li class="video-item cf">
        <div class="vid vid-img v2">
          <div class="play-btn"><a href="https://vimeo.com/194054630" target="_blank"></a></div>
          <img src="https://dl.dropboxusercontent.com/s/2hvgurssk9qripm/associate-01.jpeg" alt="Video thumbnail.">
          <!-- hide/show background image on hover -->
        </div>
        <div class="vid vid-deets d2">
          <div class="vid-decor"><img src="https://dl.dropboxusercontent.com/s/tmmp7i5myoviitd/icons_pie.png" alt="Icon of pie."></div>
          <div class="red-hr"></div>
          <p class="body-grey">We shared festive recipes, from cookies to dressings, and along with them stories of personal blessings.</p>
        </div>
      </li>
      <li class="video-item cf">
        <div class="vid vid-img v3">
          <div class="play-btn"><a href="https://vimeo.com/194054640" target="_blank"></a></div>
          <img src="https://dl.dropboxusercontent.com/s/7v9omn9yznexqch/associate-03.jpeg" alt="Video thumbnail.">
          <!-- hide/show background image on hover -->
        </div>
        <div class="vid vid-deets d3">
          <div class="vid-decor"><img src="https://dl.dropboxusercontent.com/s/982r8hit3v2qs6g/icons_turkey.png" alt="Icon of turkey."></div>
          <div class="red-hr"></div>
          <p class="body-grey">Some of us spoke of family traditions… spending time with loved ones in our sweet-smelling kitchens.</p>
        </div>
      </li>
      <li class="video-item cf">
        <div class="vid vid-img v4">
          <div class="play-btn"><a href="https://vimeo.com/194054643" target="_blank"></a></div>
          <img src="https://dl.dropboxusercontent.com/s/qjh1499xknammw5/associate-02.jpg" alt="Video thumbnail.">
          <!-- hide/show background image on hover -->
        </div>
        <div class="vid vid-deets d4">
          <div class="vid-decor"><img src="https://dl.dropboxusercontent.com/s/jv8u2o9r438hyo3/icons_candy.png" alt="Icon of holiday candy."></div>
          <div class="red-hr"></div>
          <p class="body-grey">Keep scrolling down for our gift to you. Feel free to share it with friends old and new!</p>
        </div>
      </li>
    </ul>
  </div>
</section>
<!-- END -->
<!-- BEGIN -->
<section class="quiz-section" id="quiz-section">
  <div class="quiz-wrapper">
    <div class="envelope-wrapper cf">
      <div class="envelope envelope-top">
        <img src="https://dl.dropboxusercontent.com/s/lub4ql186jkqklk/envelope-top.png" alt="Kraft paper envelope.">
      </div>
      <div class="envelope paper" id="paper">
        <div class="paper-wrapper">
          <h2 class="h1-gold">Which festive flavorite are you?</h2>
          <p class="body-grey">Take the personality quiz and discover which holiday desert matches your personality. Share your results on Facebook.</p>
          <div class="red-button"><a href="quiz.html">Take the quiz</a></div>
        </div>
      </div>
      <div class="envelope envelope-bottom">
        <img src="https://dl.dropboxusercontent.com/s/4nxfk25q0v47fnu/envelope.png" alt="Kraft paper envelope.">
      </div>
    </div>
  </div>
</section>
<!-- END -->
<!-- BEGIN -->
<section class="cookbook-section" id="cookbook-section">
  <div class="cookbook-wrapper">
    <img src="https://dl.dropboxusercontent.com/s/o2vbip4uc19ye13/cookbook.png">
    <div class="gold-button"><a href="img/Morley-OurFestiveFlavorites.pdf">Get the cookbook</a></div>
  </div>
</section>
<!-- END -->

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>


            
          
!
            
              @font-face {
	font-family: 'DanielaScript';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script.eot?#iefix') format('embedded-opentype'),
       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script.woff2') format('woff2'),
	     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script.woff') format('woff'),
	     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script.ttf') format('truetype'),
	     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'DanielaScript-Bold';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script-bold.svg');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script-bold.eot?#iefix') format('embedded-opentype'),
       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script-bold.woff2') format('woff2'),
	     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script-bold.woff') format('woff'),
	     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script-bold.ttf') format('truetype'),
	     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/daniela-script-bold.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*CENTRALE*/
@font-face {
	font-family: 'CentraleSans-BoldItalic';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_0_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_0_0.ttf') format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_0_0.woff') format('woff');  
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CentraleSans-Bold';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_4_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_4_0.ttf') format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_4_0.woff') format('woff');  
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CentraleSans-MediumItalic';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_8_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_8_0.ttf') format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_8_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CentraleSans-Medium';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_9_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_9_0.ttf') format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_9_0.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CentraleSans-Italic';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_2_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_2_0.ttf') format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_2_0.woff') format('woff');  
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CentraleSans';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_1_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_1_0.ttf') format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_1_0.woff') format('woff');  
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CentraleSans-LightItalic';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_7_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_7_0.ttf') format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_7_0.woff') format('woff');  
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CentraleSans-Light';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_6_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_6_0.ttf') format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_6_0.woff') format('woff');  
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CentraleSans-ExtraThin';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_10_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_10_0.ttf') format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_10_0.woff') format('woff');  
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CentraleSans-HairlineItalic';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_5_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_5_0.ttf') format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_5_0.woff') format('woff');  
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'CentraleSans-Hairline';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_3_0.eot');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_3_0.ttf') format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/2973C1_3_0.woff') format('woff');  
	font-weight: normal;
	font-style: normal;
}

/* ---------------------------------------
    HELVETICA NEUE LT STD
-------------------------------------------*/

/*ULTRA LIGHT*/
@font-face {
	font-family: 'HelveticaNeueLTStd-UltraLight';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLt.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLt.eot?#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLt.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLt.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLt.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLt.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-UltraLight';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLtIt.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLtIt.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLtIt.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLtIt.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLtIt.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-UltLtIt.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}

/*THIN*/
@font-face {
	font-family: 'HelveticaNeueLTStd-Thin';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Th.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Th.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Th.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Th.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Th.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Th.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Thin';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-ThIt.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-ThIt.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-ThIt.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-ThIt.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-ThIt.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-ThIt.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}

/*LIGHT*/
@font-face {
	font-family: 'HelveticaNeueLTStd-Light';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Lt.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Lt.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Lt.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Lt.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Lt.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Lt.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Light';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-LtIt.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-LtIt.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-LtIt.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-LtIt.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-LtIt.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-LtIt.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}

/*ROMAN*/
@font-face {
	font-family: 'HelveticaNeueLTStd-Roman';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Roman.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Roman.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Roman.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Roman.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Roman.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Roman.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Roman';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-It.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-It.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-It.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-It.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-It.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-It.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}

/*MEDIUM*/
@font-face {
	font-family: 'HelveticaNeueLTStd-Medium';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Md.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Md.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Md.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Md.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Md.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Md.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Medium';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-MdIt.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-MdIt.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-MdIt.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-MdIt.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-MdIt.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-MdIt.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}

/*BOLD*/
@font-face {
	font-family: 'HelveticaNeueLTStd-Bold';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Bd.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Bd.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Bd.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Bd.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Bd.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Bd.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Bold';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BdIt.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BdIt.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BdIt.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BdIt.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BdIt.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BdIt.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}

/*HEAVY*/
@font-face {
	font-family: 'HelveticaNeueLTStd-Heavy';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Hv.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Hv.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Hv.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Hv.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Hv.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Hv.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Heavy';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-HvIt.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-HvIt.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-HvIt.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-HvIt.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-HvIt.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-HvIt.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}

/*BLACK*/
@font-face {
	font-family: 'HelveticaNeueLTStd-Black';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Blk.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Blk.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Blk.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Blk.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Blk.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-Blk.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Black';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BlkIt.eot'); /*.eot*/
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BlkIt.eot#iefix') format('embedded-opentype'), /*.eot*/
	       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BlkIt.woff2') format('woff2'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BlkIt.woff') format('woff'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BlkIt.ttf') format('truetype'),
		     url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/27759/hinted-HelveticaNeueLTStd-BlkIt.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}


html{ 
	font-family: 'HelveticaNeueLTStd-Roman';
	font-size: 14px;
	text-align: center;
	box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
img { 
	display: block;
	width: 100%;
}
.cf:after {
  content:" ";
  display:block;
  clear:both;
}
.h1-white, .h1-gold {
	font-family: 'CentraleSans-Light';
	font-size: 1.6rem;
	margin-bottom: .65em;
	text-transform: uppercase;
}
.h1-white, .body-white { color: #FFFFFF; }
.h1-gold { color: #B58500; }
.body-white { font-family: 'HelveticaNeueLTStd-Light'; }
.body-grey { font-family: 'HelveticaNeueLTStd-Light'; color: #5b6770; }
.body-white, .body-grey {
	letter-spacing: .05em;
	line-height: 1.2em;
	margin-bottom: .75em;
}
.red-button { background: #D93039; border: 2px solid #D93039; }
.gold-button { background: #B58500; border: 2px solid #B58500; }
.red-button, .gold-button {
	font-family: 'CentraleSans';
	font-size: 1.2rem;
	text-transform: uppercase;
	position: relative;
	margin: 0 auto;
	height: 50px;
	width: 200px;
	margin-top: 20px;
	margin-bottom: 30px;
	-webkit-transition: background 0.2s ease-in;
	transition: background 0.2s ease-in;
}
.red-button a, .gold-button a {
	display: block;
	color: #FFF;
	width: 100%;
	height: 100%;
	line-height: 46px;
	text-decoration: none;
}
.red-button:hover, .gold-button:hover { color: #000; background: #FFFFFF; }
.red-button a:hover { color: #D93039; }
.gold-button a:hover { color: #B58500; }

.intro-section {
	background-image: url(https://dl.dropboxusercontent.com/s/t16c4wcvbd8u0e4/DiagonalFabric.png); 
	background-attachment: fixed;	
	width: 100%;
	overflow: hidden;
} 
.scene-wrapper, .scene-contents {
	position: relative;
	width: 1366px;
	height: 768px;
}
.scene-wrapper { margin: 0 auto; }
.scene-contents { -webkit-transform-origin: top left; transform-origin: top left; }
.holiday-scene-left, .holiday-scene-right {
	position: absolute;
	width: 100%;
	height: 100%;
}
.holiday-scene-left { top: 0; left: 0; }
.holiday-scene-right { top: 0; right: 0; }
.goldtag, .ssnsgrt, .trky, .pocakes, .appsauce, .peppmnt, .decor, .whisk, .pcnpie, .cberry, .ovnmit, .gngrbrd, .npkns { position: absolute; }
.goldtag { z-index: 11; width: 207px; height: 50px; top: 0; left: 50%; margin-left: -103px; }
.ssnsgrt 	{ z-index: 05; width: 500px; height: 333px; top:    50%; left:    50%;  margin-top: -166px; margin-left: -250px; }
.trky 		{ z-index: 10; width: 574px; height: 655px; top: -260px; left: -135px; }
.peppmnt 	{ z-index: 07; width: 270px; height: 752px; top:  50px; left: 280px; }
.decor 		{ z-index: 06; width: 286px; height: 553px; top: -15px; left: 230px; }
.whisk 		{ z-index: 10; width: 392px; height: 206px; bottom: -90px; left:  440px; }
.pocakes 	{ z-index: 09; width: 475px; height: 504px; bottom: -43px; left: -210px; }
.appsauce 	{ z-index: 08; width: 208px; height: 175px; bottom: -60px; left:  220px; }
.pcnpie 	{ z-index: 10; width: 522px; height: 504px; top: -100px; right: -200px; }
.cberry 	{ z-index: 09; width: 423px; height: 633px; top: -160px; right:  170px; }
.ovnmit 	{ z-index: 08; width: 492px; height: 645px; top: -120px; right:  -75px; }
.gngrbrd	{ z-index: 07; width: 522px; height: 533px; bottom: -240px; right: -105px; }
.npkns 		{ z-index: 06; width: 786px; height: 530px; bottom: -190px; right: -175px; }
.animated-1000 { -webkit-animation-duration: 1.0s; animation-duration: 1.0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated-1100 { -webkit-animation-duration: 1.1s; animation-duration: 1.1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated-1200 { -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated-1300 { -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated-1400 { -webkit-animation-duration: 1.4s; animation-duration: 1.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated-1500 { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated-1600 { -webkit-animation-duration: 1.6s; animation-duration: 1.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated-3000 { -webkit-animation-duration: 3.0s; animation-duration: 3.0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
  0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); }
  75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
  90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); }
  to { -webkit-transform: none; transform: none; }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
  0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); }
  75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
  90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); }
  to { -webkit-transform: none; transform: none; }
}
.bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; }

.about-section { 
	position: relative;  
	background: #D93039;
	overflow: hidden; 
	height: 100vh;
}
.about-text { 
	z-index: 1;
	position: absolute;
	width: 250px;
	top: 50%; left: 50%;
	-webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); 
	opacity: 0;
	-webkit-transition: opacity 1s ease-in;
	transition: opacity 1s ease-in;
}
.about-text.fadeIn { opacity: 1; }
.about-decor { 
	width: 15px; 
	margin: 0 auto;
	margin-top: 20px;
}
.hot-cake {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.obj-right, .obj-left { 
	position: absolute;
	z-index: 2;
}
.obj-left {  
	width: 45%; 
	top: 50%;
	left: 20%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%); 
	-webkit-transition: left 1s ease-out; 
	transition: left 1s ease-out;
}
.obj-left.swipeOut { left: -25%; }
.obj-left img { display: block; }
.obj-right {  
	width: 35%;
	top: 50%; 
	-webkit-transform: translateY(-50%); 
	transform: translateY(-50%); 
	right: 20%;
	-webkit-transition: right 1s ease-out;
	transition: right 1s ease-out;
}
.obj-right img { -webkit-transform: rotate(15deg); transform: rotate(15deg); }
.obj-right.swipeOut { right: -20%; }
.video-section { 
	overflow: hidden; 
	background-image: url(https://dl.dropboxusercontent.com/s/q25xqclt0h43ibo/whitesnow-tile.jpg); 
	background-attachment: fixed;
}
.video-wrapper { overflow: visible; margin: 50px; }
.video-item { 
	position: relative;
	margin: 150px 0 150px 0;
}
.vid-decor {
	width: 80px;
	margin: 0 auto;
}
.vid-img {
	position: relative;
	border: 6px solid white;
	max-width: 500px;
	margin: 0 auto;
}
.vid-img img { height: 100%; } 
@-webkit-keyframes vid-switcher {
  0%   {opacity: 1;}
  20%  {opacity: 1;}
  40%  {opacity: 0;}
  60%	 {opacity: 0;}
  80%	 {opacity: 0;}
  100% {opacity: 1;}
} 
@keyframes vid-switcher {
  0%   {opacity: 1;}
  20%  {opacity: 1;}
  40%  {opacity: 0;}
  60%	 {opacity: 0;}
  80%	 {opacity: 0;}
  100% {opacity: 1;}
}
.vid-img img { 
	z-index: 1;
	-webkit-animation-name: vid-switcher;
	animation-name: vid-switcher;
  	-webkit-animation-duration: 10s;
  	animation-duration: 10s;
  	-webkit-animation-iteration-count: infinite;
  	animation-iteration-count: infinite;
}
.play-btn {
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.25);
	-webkit-transition: background 0.2s ease-in;
	transition: background 0.2s ease-in;
}
.play-btn a { 
	position: absolute;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
}
.play-btn:hover { background-color: rgba(0, 0, 0, 0.5); }
.play-btn::before {
	content: ''; 
	z-index: 2;
	display: block;
	position: absolute;
	border-top: solid 16px transparent;
	border-left: solid 30px #FFF;
	border-bottom: solid 16px transparent;
	top: 50%;
	left: 50%;
	margin: -15px 0 0 -11px;
}
.play-btn::after {
	content: ''; 
	z-index: 2;
	display: block;
	position: absolute;
	width: 68px;
	height: 68px;
	border-radius: 34px;
	border: 3px solid white;
	top: 50%; 
	left: 50%;
	margin-left: -34px;
	margin-top: -34px;
}
.v1, .v2, .v3, .v4 { background-size: cover; }
.v1 { background-image: url(https://dl.dropboxusercontent.com/s/jkq79x7k7bw0bd0/intro-02.jpeg); }
.v2 { background-image: url(https://dl.dropboxusercontent.com/s/4q2vfbb9dndv7ha/fruitcake.jpeg); }
.v3 { background-image: url(https://dl.dropboxusercontent.com/s/lo0ckzla3nwxa26/chocolatecookies.jpeg); }
.v4 { background-image: url(https://dl.dropboxusercontent.com/s/0xrlp2wfn6qraav/mudpie.jpeg); }
.red-hr {
	width: 120px;
	height: 2px;
	background: #D93039;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}
.vid-deets {
	max-width: 300px;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 30px;
	-webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.vid { opacity: 0; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
.v1 { -webkit-transform: translateX(-150%); transform: translateX(-150%); }
.d1 { -webkit-transform: translate(150%, 0%); transform: translate(150%, 0%); }
.v2 { -webkit-transform: translateX(150%); transform: translateX(150%); }
.d2 { -webkit-transform: translate(-150%, 0%); transform: translate(-150%, 0%); }
.v3 { -webkit-transform: translateX(-150%); transform: translateX(-150%); }
.d3 { -webkit-transform: translate(150%, 0%); transform: translate(150%, 0%); }
.v4 { -webkit-transform: translateX(150%); transform: translateX(150%); }
.d4 { -webkit-transform: translate(-150%, 0%); transform: translate(-150%, 0%); }
.vid-deets.slideIn{ opacity: 1; -webkit-transform: translate(0%,0%); transform: translate(0%,0%); }
.vid-img.slideIn{ opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); }
.quiz-section { 
	position: relative;  
	background-image: url(https://dl.dropboxusercontent.com/s/ks0sevs9gcgzb0s/triangle-fabric.jpg);
	overflow: hidden;  
	height: 110vh;
}
.quiz-wrapper { 
	position: relative; 
	margin: 50px 30px 0 30px; 
	height: 100%;
}
.envelope-wrapper {
	position: relative;
	top: 0;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	height: 100%;
}
.envelope-top, .envelope-bottom { 
	position: absolute; 
	top: 50%;
	-webkit-transform: translateY(-70%);
	        transform: translateY(-70%);
	-webkit-transition: top 0.5s ease-in-out;
	transition: top 0.5s ease-in-out;
}
.envelope-top { z-index: 3; pointer-events: none; }
.envelope-bottom { z-index: 1; }
.envelope-top.openEnvelope , .envelope-bottom.openEnvelope { top: 80%; }
.paper-wrapper { margin: 30px 30px 30px 30px; }
.paper {
	position: absolute;
	z-index: 2;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	left: 50%;
	width: 80%;
	margin-left: -40%;
	background: #FFF;
	-webkit-transition: top 0.5s ease-in-out;
	transition: top 0.5s ease-in-out;
}
.paper.openEnvelope { top: 40%; }
.cookbook-section { 
	position: relative;  
	background: #D93039;
	overflow: hidden; 
	height: 100vh;
	min-height: 700px;
	-webkit-transition: background 1s ease-in-out;
	transition: background 1s ease-in-out;
}
.cookbook-wrapper {
	position: absolute;
	width: 70%;
	max-width: 500px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.fadeColor { background: #FFFFFF; }

@media only screen and (min-width: 768px){
	.h1-white, .h1-gold {
		font-size: 2.5rem;
		margin-bottom: .65em;
	}
	.body-white, .body-grey {
		font-size: 1.4rem;
		letter-spacing: .05em;
		line-height: 1.2em;
	}
	.about-text { width: 460px; }
	.paper-wrapper { margin: 60px; }
}

@media only screen and (min-width: 1024px){
	.video-wrapper { 
		max-width: 900px;
		margin: 0 auto;
		margin-top: 50px;
		margin-bottom: 50px; 
	}
	.video-item { height: 287px; }
	.vid-img {
		position: absolute;
		width: 500px;
		height: 287px;
		margin: 0;
	}
	.vid-deets {
		position: absolute;
		margin: 0;
		top: 50%;
		-webkit-transform: translate(0%, -50%);
		transform: translate(0%, -50%);
	}
	.d1 { right:0; -webkit-transform: translate(150%,-50%); transform: translate(150%,-50%); }
	.v1 { left:0; }
	.d2 { left:0; -webkit-transform: translate(-150%,-50%); transform: translate(-150%,-50%); }
	.v2 { right: 0; }
	.d3 { right:0; -webkit-transform: translate(150%,-50%); transform: translate(150%,-50%); }
	.v3 { left:0; }
	.d4 { left:0; -webkit-transform: translate(-150%,-50%); transform: translate(-150%,-50%); }
	.v4 { right: 0; }
	.vid-deets.slideIn{ -webkit-transform: translate(0%,-50%); transform: translate(0%,-50%); }
}

            
          
!
            
              
var $sceneContents = $("#scene-contents"); // a
var $sceneWrapper = $("#scene-wrapper"); // b
var maxWidth  = $("#scene-contents").width(); // c
var maxHeight = $("#scene-contents").height(); // d

// http://stackoverflow.com/questions/7404952/jquery-combine-ready-and-resize
// https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/
$(window).resize(function(evt) {
   scaleIt($sceneContents, $sceneWrapper, maxWidth, maxHeight);
}).trigger("resize");

function scaleIt(a,b,c,d) {
	var $window = $(window);
	var width = $window.width();
	var height = $window.height(); 
	var scale; 
    if(width >= c && height >= d) {
     	a.css({"-webkit-transform": ""});
      b.css({ width: "", height: "" });
      return;
    }
    scale = Math.min(width/c, height/d);
    a.css({"-webkit-transform": "scale(" + scale + ")"});
    b.css({ width: c * scale, height: d * scale });
}

$(document).ready(function(){

	// Initialize Scroll magic
  var controller = new ScrollMagic.Controller();

  // Build a scene
  var aboutScene01 = new ScrollMagic.Scene({
    name: "Move the pie",
    triggerElement: "#about-wrapper",
    triggerHook: 0.5
  }).setClassToggle("#obj-cake", "swipeOut").addTo(controller);

  // Build a scene
  var aboutScene02 = new ScrollMagic.Scene({
    name: "Move the mit",
    triggerElement: "#about-wrapper",
    triggerHook: 0.5
  }).setClassToggle("#obj-ovenmit", "swipeOut").addTo(controller);

  // Build a scene
  var aboutScene03 = new ScrollMagic.Scene({
    name: "Fade in text",
    triggerElement: "#about-wrapper",
    triggerHook: 0.5
  }).setClassToggle("#about-text", "fadeIn").addTo(controller);

  // Loop through videos
  $(".vid").each(function(){
    var vidScene = new ScrollMagic.Scene({
      name: "Video fly in",
      triggerElement: this,
      triggerHook: 0.75
    }).setClassToggle(this, "slideIn").addTo(controller);
  });

  // Envelope
  $(".envelope").each(function(){
    var vidScene = new ScrollMagic.Scene({
      name: "open envelope",
      triggerElement: "#quiz-section",
      triggerHook: 0
    }).setClassToggle(this, "openEnvelope").addTo(controller);
  });

  // Cookbook
  var bookScene = new ScrollMagic.Scene({
    name: "fade bg",
    triggerElement: "#cookbook-section",
    triggerHook: 0.5
  }).setClassToggle("#cookbook-section", "fadeColor").addTo(controller);

});

$(function() {
  // Init Controller
  var scrollMagicController = new ScrollMagic();
});
            
          
!
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