<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();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.