windhamdavid 9 years ago
parent
commit
6d9645d781
5 changed files with 321 additions and 111 deletions
  1. 2 0
      .gitignore
  2. 68 36
      index.php
  3. 188 0
      index_bak.php
  4. 10 11
      js/init.js
  5. 53 64
      style.css

+ 2 - 0
.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+img/*

+ 68 - 36
index.php

@@ -14,61 +14,58 @@
 <?php wp_head(); ?>
 </head>
 <body>
-<div id="skrollr-body">
+	
 	<div id="bg1" data-0="display:none;" data-1000="display:block;background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
-	<div id="bg2" data-0="display:none;" data-5000="display:block;background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
-	<div id="bg3" data-0="display:none;" data-10000="display:block;background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
+	<div id="bg2" data-0="display:none;" data-8000="display:block;background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
+	<div id="bg3" data-0="display:none;" data-20000="display:block;background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
 	<div id="progress" data-0="width:0%;background:rgb(130, 104, 130);" data-end="width:100%;background:rgb(103, 130, 91);"></div>
 	
-	<div id="menu" data-0="position:static;display:none;" data-top-top="position:fixed;bottom:30px;">
-		<a href="#story" data-menu-top="300">Story</a>
-		<a href="#trip" data-menu-top="500">Trip</a>
-		<a href="#vows" data-menu-top="800">Vows</a>
-		<a href="#message" data-menu-top="1200">Message</a>
-	</div>
-	<div id="intro" data-0="display:block;" data-1400="display:none;" >
-		<div class="intro_ease" data-400="left:90%" data-1500="left:0%;">
-			<h4 class="vibes">You're cordially invited</h4>
-			<h4 class="vibes">to celebrate the marriage of </h4>
-			<h1 class="vibes">David A. Windham</h1>
-			<h3 class="vibes">and</h3>
-			<h1 class="vibes">Ginny L. Gast</h1><br />
-			<h4 class="vibes">September 27th, 2014</h4>
+	<div id="intro" data-0="display:block;" data-1400="display:none;">
+		<div class="intro_ease" data-0="left:92%" data-1500="left:0%;">
+			<h4 class="cardo">You're cordially invited</h4>
+			<h4 class="cardo">to celebrate the marriage of</h4><br />
+			<h1 class="monsieur">David A. Windham</h1>
+			<h4 class="cardo">and</h4><br />
+			<h1 class="monsieur">Ginny L. Gast</h1><br />
+			<h4 class="cardo">Saturday, The Twenty-Seventh Of September<br/>Two Thousand Fourteen</h4><br />
+			<img src="wp-content/themes/bml/img/swirl.png">
 		</div>
 	</div>
-	<div id="intro2" data-0="display:none;" data-1400="display:block;" data-800="left:100%" data-1500="left:77%;" data-3400="display:none;">
-		<div class="intro_ease">
+	
+	<div id="intro2" data-0="display:none;" data-1400="display:block;" data-4000="display:none;">
+		<div class="intro_ease" data-1400="left:0%" data-2100="left:93%;">
 			<h4 class="vibes">No need to dress up, no need to wrap gifts.</h4>
 			<h4 class="vibes">Just stay at home, and send us a good wish.</h4>
 			<h4 class="vibes">We appreciate your love and cheer.</h4>
 			<h4 class="vibes">But we're off on a journey have no fear.</h4>
 		</div>
 	</div>
-	<div id="story_wrap" data-2400="background:rgba(0,0,0,0);" data-8400="background:rgba(104,130,91,.25);">
+	
+	<div id="story_wrap" data-3400="background:rgba(0,0,0,0);" data-8000="background:rgba(104,130,91,.25);">
 		<div id="story">
-			<div id="story_ease" data-2400="left:100%" data-3400="left:30%;" data-4400="left:-100%;" >
+			<div class="story_ease" data-3400="top:100%" data-4400="top:20%;" data-6400="top:20%;" data-7400="top:-35%;">
 					<h4 class="beanie">About 10 years ago<br /> a guy named Dave met a girl named Ginny.<br />
 					Soon after, the two would take a trip to New York City.</h4>
 			</div>
-			<div id="story_ease" data-3400="left:100%" data-4400="left:30%;" data-5400="left:-100%;">
+			<div class="story_ease" data-4000="top:100%" data-5000="top:45%;" data-6400="top:45%;" data-7400="top:-35%;">
 					<h4 class="beanie">Days and weeks and many more,<br />
 					The couple found love they could not ignore.<br />
 					They dwelled in cities, the trees, and farm,<br />
 					Each would have its newfound charm.</h4>
 			</div>
-			<div id="story_ease" data-4400="left:100%" data-5400="left:30%;" data-6400="left:-100%;">	
+			<div class="story_ease" data-7000="top:100%;" data-8000="top:15%;" data-10000="top:15%;" data-15000="top:-40%;">	
 					<h4 class="beanie">And then one day came when they decided to marry.<br />
 					They had made it 10 years, after all, it’s not so scary.<br />
 					Money can’t buy love, this they knew.<br />
 					But it sure could pay for a trip, to start anew.</h4>
 			</div>
-			<div id="story_ease" data-5400="left:100%" data-6400="left:30%;" data-7400="left:-100%;">
+			<div class="story_ease" data-8000="top:100%;" data-9000="top:50%;" data-10000="top:50%;" data-15000="top:-40%;">
 					<h4 class="beanie">So tip your hat to these big-hearted.<br />
 					Who are embarking on a journey to where it all started.<br />
 					To jumpstart another decade, with its ups and downs.<br />
 					New experiences and perhaps new towns.</h4>
 			</div>
-			<div id="story_ease" data-6400="left:100%" data-7400="left:30%;" data-8400="left:-100%;">
+			<div class="story_ease" data-12000="top:100%" data-14000="top:35%;" data-15000="top:35%;" data-20000="top:-40%;">
 					<h4 class="beanie">But have no worries for this one of many couples.<br />
 					Because they’re a good team and can tackle life’s troubles.<br />
 					For it is their love that will make them last.<br />
@@ -77,25 +74,61 @@
 		</div>
 	</div>
 	
-	<div id="trip" data-0="display:block;" data-8400="display:block;" data-8500="top:-100%" data-10000="top:0%;" data-12000="top:-100%;" data-10000="background:rgba(0,0,0,0);" data-13000="background:rgba(130,104,130,.5);">
-		<div class="trip_container">
+	<div id="trip" data-20000="top:-150%" data-22000="top:0%;" data-28000="top:-100%;" data-20000="background:rgba(0,0,0,0);" data-23000="background:rgba(130,104,130,.5);">
+		<div class="container">
 			<h4 class="beanie">Trip</h4>
-			<h4 class="beanie">Nulla scelerisque dic</h4>
+			<div class="beanie one-third column">
+				<li>provide a party dress</li>
+				<li>bestow outdoor bloody mary's</li>
+				<li>handle their hotel</li>
+				<li>grant them a good laugh</li>
+				<li>facilitate their flights</li>
+			</div>
+			<div class="beanie one-third column">				
+				<li>contribute to cocktails</li>
+				<li>donate a dinner</li>
+				<li>supply some sugary snacks</li>
+				<li>furnish their room w/ flowers</li>
+				<li>cap off a meal with coffee</li>
+				<li>fuel a photography session</li>
+			</div>
+			<div class="beanie one-third column">
+				<li>give them gallery tickets</li>
+				<li>cater the cottage</li>
+				<li>add an event to their itinerary</li>
+				<li>purchase some pretty things</li>
+				<li>entrust some escargot</li>
+				<li>partake in NYC pizza</li>
+				<li>romance them on the rooftop</li>
+			</p>
 		</div>
 	</div>
-
 	
-	<div id="vows" data-0="display:none;" data-20000="display:block;">
-		<div class="easing" data-20001="left:100%" data-20002="left:25%;">
-			<div id="bml" data-0="position:static;" data-top-top="position:fixed;top:25%;right:30%" data-edge-strategy="set">
+	<div id="vows">
+		<div class="easing" data-23000="top:100%" data-24000="top:25%;" data-34000="top:25%;">
+			<div id="bml">
 				<h3>September 27<sup>th</sup>, &nbsp;<span id="year">2014</span>.</h3>	
 			</div>
-			<div class="buy-love" style="margin:0;" data-0="position:static;" data-top-top="position:fixed;top:55%;right:45%" data-edge-strategy="set">
-				<p>&nbsp;</p>
+			<div class="buy-love">
 				<a id="inline" href="#buy-love"><button>Buy Some Love</button></a>
 			</div>
 		</div>
 	</div>
+	<div id="wish">
+		<div class="easing" data-25000="left:100%" data-26000="left:15%;">
+			<div class="container">
+			<?php $comment_args = array( 'title_reply'=>'', 'comment_notes_before' => 'Leave us a message and...',
+			'fields' => apply_filters( 'comment_form_default_fields', array(
+			'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
+			'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>', 'email'  => '<p class="comment-form-email">' .
+			'<label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
+			'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' />'.'</p>', 'url'    => '' ) ),
+			'comment_field' => '<p>' . '<label for="comment">' . __( '' ) . '</label>' . '<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>' . '</p>', 'label_submit' => 'Wish Us Well', 'comment_notes_after' => '',
+			);
+			comment_form($comment_args); ?>
+			</div>
+		</div>
+	</div>
 	
 	<div style="display:none">
 		<div id="buy-love">
@@ -148,8 +181,7 @@
 			</div>
 		</div>
 	</div>
-	
-</div>
+
 <?php wp_footer(); ?>
 <script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.8.3.min.js"></script>
 <script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>

+ 188 - 0
index_bak.php

@@ -0,0 +1,188 @@
+<?php?>
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+<meta name="description" content="David + Ginny">
+<meta property="og:title" content="Can't Buy Me Love"/>
+<meta property="og:url" content="https://cantbuymelove.org"/>
+<meta property="og:image" content="https://cantbuymelove.org/wp-content/themes/bml/img/bml_thermo.png"/>
+<meta property="og:site_name" content="Can't Buy Me Love"/>
+<meta property="og:description" content="David + Ginny"/>
+<title>D+G (Can't Buy Me Love)</title>
+<?php wp_head(); ?>
+</head>
+<body>
+<div id="skrollr-body">
+	<div id="bg1" data-0="display:none;" data-1000="display:block;background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
+	<div id="bg2" data-0="display:none;" data-5000="display:block;background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
+	<div id="bg3" data-0="display:none;" data-10000="display:block;background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
+	<div id="progress" data-0="width:0%;background:rgb(130, 104, 130);" data-end="width:100%;background:rgb(103, 130, 91);"></div>
+	
+	<div id="menu" data-0="position:static;display:none;" data-top-top="position:fixed;bottom:30px;">
+		<a href="#story" data-menu-top="300">Story</a>
+		<a href="#trip" data-menu-top="500">Trip</a>
+		<a href="#vows" data-menu-top="800">Vows</a>
+		<a href="#message" data-menu-top="1200">Message</a>
+	</div>
+	<div id="intro" data-0="display:block;" data-1400="display:none;">
+		<div class="intro_ease" data-400="left:90%" data-1500="left:0%;">
+			<h4 class="cardo">You're cordially invited</h4>
+			<h4 class="cardo">to celebrate the marriage of</h4><br />
+			<h1 class="monsieur">David A. Windham</h1>
+			<h4 class="cardo">and</h4><br />
+			<h1 class="monsieur">Ginny L. Gast</h1><br />
+			<h4 class="cardo">Saturday, The Twenty-Seventh Of September<br/>Two Thousand Fourteen</h4><br />
+			<img src="wp-content/themes/bml/img/swirl.png">
+		</div>
+	</div>
+	<div id="intro2" data-0="display:none;" data-1400="display:block;" data-800="left:100%" data-1500="left:77%;" data-3400="display:none;">
+		<div class="intro_ease">
+			<h4 class="vibes">No need to dress up, no need to wrap gifts.</h4>
+			<h4 class="vibes">Just stay at home, and send us a good wish.</h4>
+			<h4 class="vibes">We appreciate your love and cheer.</h4>
+			<h4 class="vibes">But we're off on a journey have no fear.</h4>
+		</div>
+	</div>
+	<div id="story_wrap" data-2400="background:rgba(0,0,0,0);" data-8400="background:rgba(104,130,91,.25);">
+		<div id="story">
+			<div id="story_ease" data-2400="left:100%" data-3400="left:30%;" data-4400="left:-100%;" >
+					<h4 class="beanie">About 10 years ago<br /> a guy named Dave met a girl named Ginny.<br />
+					Soon after, the two would take a trip to New York City.</h4>
+			</div>
+			<div id="story_ease" data-3400="left:100%" data-4400="left:30%;" data-5400="left:-100%;">
+					<h4 class="beanie">Days and weeks and many more,<br />
+					The couple found love they could not ignore.<br />
+					They dwelled in cities, the trees, and farm,<br />
+					Each would have its newfound charm.</h4>
+			</div>
+			<div id="story_ease" data-4400="left:100%" data-5400="left:30%;" data-6400="left:-100%;">	
+					<h4 class="beanie">And then one day came when they decided to marry.<br />
+					They had made it 10 years, after all, it’s not so scary.<br />
+					Money can’t buy love, this they knew.<br />
+					But it sure could pay for a trip, to start anew.</h4>
+			</div>
+			<div id="story_ease" data-5400="left:100%" data-6400="left:30%;" data-7400="left:-100%;">
+					<h4 class="beanie">So tip your hat to these big-hearted.<br />
+					Who are embarking on a journey to where it all started.<br />
+					To jumpstart another decade, with its ups and downs.<br />
+					New experiences and perhaps new towns.</h4>
+			</div>
+			<div id="story_ease" data-6400="left:100%" data-7400="left:30%;" data-8400="left:-100%;">
+					<h4 class="beanie">But have no worries for this one of many couples.<br />
+					Because they’re a good team and can tackle life’s troubles.<br />
+					For it is their love that will make them last.<br />
+					This guy named Windham and girl named Gast.</h4>
+			</div>
+		</div>
+	</div>
+	
+	<div id="trip" data-0="display:block;" data-8400="display:block;" data-13001="display:none;" data-8500="top:-150%" data-10000="top:0%;" data-12000="top:-100%;" data-10000="background:rgba(0,0,0,0);" data-13000="background:rgba(130,104,130,.5);">
+		<div class="trip_container">
+			<h4 class="beanie">Trip</h4>
+			<p class="beanie">
+				provide a party dress
+				bestow outdoor bloody mary's
+				handle their hotel
+				grant them a good laugh
+				facilitate their flights
+				contribute to cocktails
+				donate a dinner
+				supply some sugary snacks
+				furnish their room w/ flowers
+				cap off a meal with coffee
+				fuel a photography session
+				give them gallery tickets
+				cater the cottage
+				add an event to their itinerary
+				purchase some pretty things
+				entrust some escargot
+				partake in NYC pizza
+				romance them on the rooftop
+			</p>
+		</div>
+	</div>
+
+	
+	<div id="vows" data-0="display:none;" data-20000="display:block;">
+		<div class="easing" data-20001="left:100%" data-20002="left:25%;">
+			<div id="bml" data-0="position:static;" data-top-top="position:fixed;top:25%;right:30%" data-edge-strategy="set">
+				<h3>September 27<sup>th</sup>, &nbsp;<span id="year">2014</span>.</h3>	
+			</div>
+			<div class="buy-love" style="margin:0;" data-0="position:static;" data-top-top="position:fixed;top:55%;right:45%" data-edge-strategy="set">
+				<p>&nbsp;</p>
+				<a id="inline" href="#buy-love"><button>Buy Some Love</button></a>
+			</div>
+		</div>
+	</div>
+	
+	<div style="display:none">
+		<div id="buy-love">
+			<div id="wp-stripe-wrap">
+				<form id="wp-stripe-payment-form">
+				<input type="hidden" name="action" value="wp_stripe_charge_initiate" />
+				<input type="hidden" name="nonce" value="bd39ddb4d5" />
+				<div class="wp-stripe-details">
+				    <div class="wp-stripe-notification wp-stripe-failure payment-errors" style="display:none"></div>
+				    <div class="stripe-row"><input type="text" name="wp_stripe_name" class="wp-stripe-name" placeholder="Name *" autofocus required /></div>
+				    <div class="stripe-row"><input type="email" name="wp_stripe_email" class="wp-stripe-email" placeholder="E-mail" /></div>
+				    <div class="stripe-row"><textarea name="wp_stripe_comment" class="wp-stripe-comment" placeholder="Comments?"></textarea></div>
+				</div>
+				<div class="wp-stripe-card">
+				    <div class="stripe-row"><input type="text" name="wp_stripe_amount" autocomplete="off" class="wp-stripe-card-amount" id="wp-stripe-card-amount" placeholder="Amount (USD) *" required /></div>
+				    <div class="stripe-row"><input type="text" autocomplete="off" class="card-number" placeholder="Card Number *" required /></div>
+				    <div class="stripe-row">
+				        <div class="stripe-row-left"><input type="text" autocomplete="off" class="card-cvc" placeholder="CVC Number *" maxlength="4" required /></div>
+				        <div class="stripe-row-right">
+				            <span class="stripe-expiry">EXP</span>
+				            <select class="card-expiry-month">
+				                <option value="1">01</option>
+				                <option value="2">02</option>
+				                <option value="3">03</option>
+				                <option value="4">04</option>
+				                <option value="5">05</option>
+				                <option value="6">06</option>
+				                <option value="7">07</option>
+				                <option value="8">08</option>
+				                <option value="9">09</option>
+				                <option value="10">10</option>
+				                <option value="11">11</option>
+				                <option value="12">12</option>
+				            </select>
+				            <span></span>
+				            <select class="card-expiry-year">
+				            <option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option>
+							</select>
+				        </div>
+				    </div>
+				    </div>
+				    <div class="stripe-row">
+				        <input type="checkbox" name="wp_stripe_public" value="public" checked="checked" /> <label class="public">share your comments on our event page
+				    </div>
+				    <div style="clear:both"></div>
+				    <input type="hidden" name="wp_stripe_form" value="1"/>
+				    <button type="submit" class="stripe-submit-button">Buy</button>
+				    <div class="stripe-spinner"></div>
+				</form>
+			</div>
+		</div>
+	</div>
+	
+</div>
+<?php wp_footer(); ?>
+<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.8.3.min.js"></script>
+<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
+<script src="<?php echo get_template_directory_uri(); ?>/js/skrollr.min.js"></script>
+<script src="<?php echo get_template_directory_uri(); ?>/js/skrollr.menu.min.js"></script>
+<script src="<?php echo get_template_directory_uri(); ?>/js/init.js"></script>
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  ga('create', 'UA-1906067-35', 'cantbuymelove.org');
+  ga('send', 'pageview');
+</script>
+</body>
+</html>

+ 10 - 11
js/init.js

@@ -1,17 +1,16 @@
 $(document).ready(function() {
 	$('#bml').countdown({until: new Date(2014, 9 - 1, 27)});
-	$("a#inline").fancybox({});
+	$('a#inline').fancybox({});
+	$('#buy-love').show(); //FOUC
 });
 
 var s = skrollr.init({
-		
-	});
-	
-skrollr.menu.init(s, {
-    animate: true,
-    easing: 'sqrt',
-    scale: 2,
-    duration: function(currentTop, targetTop) {
-        return 500;
-    }
+	edgeStrategy: 'set',
+	easing: {
+		inverted: function(p) {
+			return 1-p;
+		}
+	}
 });
+
+

+ 53 - 64
style.css

@@ -13,6 +13,7 @@ Author URI: http://davidawindham.com
 
 @import url(https://fonts.googleapis.com/css?family=Reenie+Beanie);
 @import url(http://fonts.googleapis.com/css?family=Great+Vibes);
+@import url(http://fonts.googleapis.com/css?family=Cardo|Monsieur+La+Doulaise);
 @import url(css/fancy.css);
 
 /* #Reset  ================================================== */
@@ -88,42 +89,14 @@ a img {border: 0;}
 .container .offset-by-fifteen               { padding-left: 900px; }
 
 /* #_S main  ================================================== */
-body,button,input,select,textarea {color: #404040;font-size: 18px;font-size: 1.6rem;line-height: 1.5;}
-h1, h2, h3, h4, h5, h6 {clear: both;}
-hr {background-color: #ccc;border: 0;height: 1px;margin-bottom: 1.5em;}
-p {margin-bottom: 1.5em;}
-ul, ol {margin: 0 0 1.5em 3em;}
-ul {list-style: disc;}
-ol {list-style: decimal;}
-li > ul,li > ol {margin-bottom: 0;margin-left: 1.5em;}
-dt {font-weight: bold;}
-dd {margin: 0 1.5em 1.5em;}
-b, strong {font-weight: bold;}
-dfn, cite, em, i {font-style: italic;}
-blockquote {margin: 0 1.5em;}
-address {margin: 0 0 1.5em;}
-pre {background: #eee;font-family: "Courier 10 Pitch", Courier, monospace;font-size: 15px;font-size: 1.5rem;line-height: 1.6;margin-bottom: 1.6em;max-width: 100%;overflow: auto;padding: 1.6em;}
-code, kbd, tt, var {font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;}
-abbr, acronym {border-bottom: 1px dotted #666;cursor: help;}
-mark, ins {background: #fff9c0;text-decoration: none;}
-sup,sub {font-size: 75%;height: 0;line-height: 0;position: relative;vertical-align: baseline;}
-sup {bottom: 1ex;}
-sub {top: .5ex;}
-small {font-size: 75%;}
-big {font-size: 125%;}
-figure {margin: 0;}
-table {margin: 0 0 1.5em;width: 100%;}
-th {font-weight: bold;}
-img {height: auto;max-width: 100%; }
-textarea {overflow: auto;padding-left: 3px;vertical-align: top;width: 98%;}
-.alignleft {display: inline;float: left;margin-right: 1.5em;}
-.alignright {display: inline;float: right;margin-left: 1.5em;}
-.aligncenter {clear: both;display: block;margin: 0 auto;}
-a {color: royalblue;}
-a:visited {color: purple;}
-a:hover,a:focus,a:active {color: midnightblue;}
 
 
+h1.monsieur {
+	font-family: 'Monsieur La Doulaise', cursive;
+	font-size:85px;
+	text-shadow: 0px 1px 0px #999;
+}
+
 h1.vibes {
 	font-family: 'Great Vibes', cursive;
 	font-size:65px;
@@ -145,13 +118,43 @@ p.vibes {
 	font-size:28px;
 	line-height:30px;
 }
+h1.cardo {
+	font-family: 'Cardo', serif;
+	font-size:65px;
+}
+h2.cardo {
+	font-family: 'Cardo', serif;
+	font-size:55px;
+}
+h3.cardo {
+	font-family: 'Cardo', serif;
+	font-size:45px;
+}
+h4.cardo {
+	font-family: 'Cardo', serif;
+	text-transform:uppercase;
+	font-size:18px;
+}
 h4.beanie {
 	font-family: Reenie Beanie;
 	font-size:48px;
 }
+p.beanie {
+	font-family: Reenie Beanie;
+	font-size:31px;
+}
+.beanie li {
+	font-family: Reenie Beanie;
+	font-size:27px;
+}
 
 /* #Skrollr  ================================================== */
 
+#skrollr-body {
+	height: 100%;
+	width: 100%;
+}
+
 html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 .skrollable {position:fixed;z-index:100;}
 .skrollr-mobile .skrollable {position:absolute;}
@@ -160,7 +163,7 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 #bg1, #bg2, #bg3 {z-index:50;top:0;left:0;width:100%;height:100%;background:url(img/bg.png) repeat 0 0;}
 #bg2 {z-index:49;background-image:url(img/bg2.png);}
 #bg3 {z-index:48;background-image:url(img/bg3.png);}
-#progress {height:17px;background:#fff;bottom:0;z-index:200;}
+#progress {height:9px;background:#fff;bottom:0;z-index:200;}
 #scrollbar {
 	position:fixed;
 	right:2px;
@@ -184,7 +187,7 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 
 #intro {
 	width:80%;
-	top:120px;
+	top:80px;
 	margin-left:-70%;
 	padding:2em;
 	text-align:center;
@@ -208,15 +211,14 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 #story {
 	top:200px;
 	padding:2em;
-	width:70%;
+	width:60%;
 	text-align:center;
 }
-#story_ease {
+.story_ease {
 	top:200px;
 	width:100%;
 	height:100%;
 }
-
 #transform {
 	width:70%;
 	left:50%;
@@ -227,44 +229,31 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 	.transform-origin(50%, 50%);
 }
 
-#properties {
-	width:100%;
-	height:100%;
-	padding-top:10%;
-	text-align:center;
-
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
 #trip {
 	width:100%;
 	height:100%;
 }
-.trip_container {
-	top:200px;
-	margin:200px;
-}
-	
+
 #vows {
 	width:100%;
 	height:100%;
 }
-#bml {
-	background:#fff;
-	height:300px;
-	margin:20px;
-}
 
 
 
 /* #BML  ================================================== */
 
+
+
+
 #bml { width: 450px; height: 55px; margin:0;}
 
-.hasCountdown {background-color: #fff;}
+.buy-love {
+	bottom:20%;
+	margin: 100px 0 0 0;
+}
+
+.hasCountdown {}
 .countdown_rtl {direction: rtl;}
 .countdown_holding span {color: #000;}
 .countdown_row {clear: both;width: 100%;padding: 0px 2px;text-align: center;}
@@ -275,8 +264,8 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 .countdown_show5 .countdown_section {width: 19.5%;}
 .countdown_show6 .countdown_section {width: 16.25%;}
 .countdown_show7 .countdown_section {width: 14%;}
-.countdown_section {display: block;float: left;margin:5px;font-size: 25px;font-family:Reenie Beanie;text-align: left;}
-.countdown_amount {font-size: 300%;font-family:Reenie Beanie;}
+.countdown_section {display: block;float: left;margin:4px;font-size: 25px;font-family:Reenie Beanie;text-align: left;}
+.countdown_amount {font-size:54px;font-family:Reenie Beanie;}
 .countdown_descr {display: block;width: 100%;}
 
 #inline button {