.nine-icon-unit__details {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 500ms, max-height 0ms 500ms;
  
  // pure css fade in and fade out of element
  // better than jQuery hide - uses native browser transitions
  &.active {
    opacity: 1;
    max-height: 9999px;
    transition: opacity 500ms 500ms, max-height 0ms 500ms;    
  }
}

// Increase stats from zero on pg_in_action_header module
// Used on how-we-do-it page
function doStat(statNumber) {

  if (statNumber == 4) {
    return false;
  }
       
  var element = $('#stat-' + statNumber);    
  var dataTo = (element.data('to') + ',' ).replace(/,/g, '');
  element.removeClass('stat-hide');
  
  element.countTo({
    from: 0,
    to: dataTo,
    speed: 1000,
    refreshInterval: 50,
    formatter: function (value, options) {
      return value.toFixed(options.decimals).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    onUpdate: function (value) {
      //do nothing;
    },
    onComplete: function (value) {
      doStat(statNumber + 1);
    }
  });
    
}
// hire me :)

<!-- Responsive Vimeo video -->
<section class="wrap--video-cta">      
  <div class="row row--full row--video-cta collapse" data-equalizer  data-equalize-by-row="true">          
        <div class="small-12 medium-6 medium-push-6 columns split-video" data-equalizer-watch >      
      <div class="bg" style="background-image: url(https://brightbmbr.nyc/wp-content/uploads/2016/10/face.jpg)"></div>
      <img src="https://brightbmbr.nyc/wp-content/uploads/2016/10/face.jpg" />
      <a href="#" alt="Play" data-open="reveal--video"></a>
    </div>        
    <div class="small-12 medium-6 medium-pull-6 columns split-cta text-center" >
      <div class="wrap--cta-split" data-equalizer-watch >
        <div class="middle--cta-split" >
          <h1>BRIGHT BMBR</h1>
          <p>The limited edition Rochambeau smart jacket with one-of-a-kind digital experiences.</p>
    	    <a class="button button--roch" href="https://shop.thenewstand.com/collections/frontpage/products/rochambeau-evrythng-jacket">Order</a>
          <a class="button button--roch" href="/app">Jacket Owners</a>
        </div>
      </div>
    </div>       
  </div>        
</section>

<div class="reveal small-no-fullscreen reveal--video large" id="reveal--video" data-reveal data-reset-on-close="true">
  <div class='embed-container'>
    <iframe data-src="https://player.vimeo.com/video/189112049?autoplay=1" 
            width="100%" height="360" 
            frameborder="0" 
            webkitallowfullscreen="" 
            mozallowfullscreen="" 
            allowfullscreen="">
    </iframe>
  </div>
  <button class="page-close page-close--white" data-close aria-label="Close modal" type="button"></button>
</div>

// Video - use canvid to animate sprite sheet for video on mobile
var canvidControl = canvid({  
 selector : '.video', 
 videos: {
   clip1: { src: '/wp-content/themes/rochambeau/assets/video/0140frames.jpg', frames: 40, cols: 6, loops: 1, onEnd: function(){
   canvidControl.play('clip2');
  }},
   clip2: { src: '/wp-content/themes/rochambeau/assets/video/4180frames.jpg', frames: 40, cols: 6, loops: 1, onEnd: function(){
   canvidControl.play('clip3');
  }},
   clip3: { src: '/wp-content/themes/rochambeau/assets/video/81120frames.jpg', frames: 40, cols: 6, loops: 1, onEnd: function(){
   canvidControl.play('clip4');
  }},
   clip4: { src: '/wp-content/themes/rochambeau/assets/video/121147frames.jpg', frames: 26, cols: 6, loops: 1, onEnd: function(){
   canvidControl.play('clip1');
  }},
 },
 width: 414,
 height: 736,
 loaded: function() {
   canvidControl.play('clip1');
 }
});

<div class="microsite">
  <div class="row expanded squares small-up-1 medium-up-2 large-up-3 xxlarge-up-4">
    <div class="columns">
      <!-- tiles are organised into template parts -->
      <?php include('micro-about.php'); ?>
    </div>
    <div class="columns" style="position: relative;">
      <?php include('micro-signup.php'); ?>
    </div>
    <div class="columns">
      <?php include('micro-publications.php'); ?>
    </div>
    <div class="columns">
      <?php include('micro-events.php'); ?>
    </div>
    <!-- more tiles ... -->
  </div>
  <!-- /.row -->
</div>
<!-- /.microsite -->

// AJAX pagination
// Anon function - source https://premium.wpmudev.org/blog/load-posts-ajax/
(function($) {
	
	$( document ).ready(function() { 	
		
		// Detect click
		var flag = false;
		$('.pagination a').bind('touchstart click', function(){
		  if (!flag) {
		    flag = true;
				setTimeout(function(){ flag = false; }, 100);
				
				var year = $(this).data('year');
				var press_category = $(this).data('post-category');			
				var post_type = $(this).closest('[data-post-type]').data('post-type');
				var part = $(this).closest('[data-part]').data('part');
				var $clickedElement = $(this);
				var $targetElement = $('.press-coverage .press-cover-container');
				var $overlayElement = $('.press-coverage');
				
				//console.log(part);

				event.preventDefault();
				$.ajax({
					url: ajaxpagination.ajaxurl,
					type: 'post',
					data: {
						action: 'ajax_pagination',
						post_type: post_type,
						part: part,
						year: year,
						press_category: press_category
						//page: page
					},
					beforeSend: function() {
						$overlayElement.addClass('loading');
						// Scroll to the top of the press release section				
						$('html, body').animate({
				        scrollTop: $overlayElement.offset().top
				    }, 500);
					},
					success: function( html ) {				
						// Source - http://stackoverflow.com/posts/9671016/revisions
						$targetElement
			        .data('oHeight',$targetElement.height())
							.html(html) // Update content
			        .css('height','auto')
			        .data('nHeight',$targetElement.height())
			        .height($targetElement.data('oHeight'))
			        .animate({
									height: $targetElement.data('nHeight')
								},
								400,
								function(){ 
									// Run match height script on new elements
									$('.press-coverage .press-cover-container [data-mh="press-cover"]').matchHeight({
										byRow: true,
										property: 'height',
										target: null,
										remove: false
									});
									$targetElement.css('height','auto');
									// Set height of target to auto after match height has run
									$overlayElement.removeClass('loading');
									// Add class of current to clicked pagination element
									$clickedElement.closest('li').addClass('current').siblings().removeClass('current');	
								}
							);
					}
				})

		  }
		  return false;
		});
	
	});
	
})(jQuery);

// Queries for events
// Date is past
$meta_query_past = array(
  array(
    'key' => 'event_date',
    'value' => date('Ymd'),
    'type' => 'DATE',
    'compare' => '<='
  )
);
$meta_query_future = array(
  'relation' => 'OR', 
  // Date is future
  array(
    'key' => 'event_date',
    'value' => date('Ymd'),
    'type' => 'DATE',
    'compare' => '>='
  ),
  // Date is empty
  array(
    'key' => 'event_date',
    'value' => '',
    'compare' => '='
  )
);

<section class="vertical-margin">
  <div class="row">
    <div class="large-4 large-push-2 medium-6 columns">      
      <!-- schma.org markup for contact details -->
      <div itemscope itemtype="http://schema.org/Organization">
        You can contact <span itemprop="name">The Food Foundation</span> at:<br>
        Tel: <span itemprop="telephone">020 3805 4670</span>,<br>
        E-mail: <a href="mailto:office@foodfoundation.org.uk" itemprop="email">office@foodfoundation.org.uk</a>
      </div>      
    </div>
    <div class="large-4 medium-6 columns">      
      <div itemscope itemtype="http://schema.org/Organization">        
        <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
          <span itemprop="name"><strong>The Food Foundation</strong></span><br>
          <span>The Rain Cloud Victoria</span><br>
          <span itemprop="streetAddress">76 Vincent Square</span><br>
          <span itemprop="postalCode">SW1P 2PD</span><br>
          <span itemprop="addressLocality">London, UK</span><br>
        </div>    
      </div>      
    </div>
  </div>
</section>

<?php
// before form part 1 submission
// add dob valid status to form data
// and set session variable for thank you page variation
// if older than 30 show sorry page

add_action( 'gform_pre_submission_1', 'pre_submission_handler' );
function pre_submission_handler( $form ) {
    $status = 'Invalid';
    if (valid_age( rgpost( 'input_4' ) )) {
      $status = 'Valid';
      $_SESSION['show_sorry'] = false;
    } else {
      $_SESSION['show_sorry'] = true;
    }
    $_POST['input_23'] = $status;
}

function valid_age($date) {  
  $d = DateTime::createFromFormat('d/m/Y', $date);
  $n = new DateTime('NOW');  
  $age = $d->diff($n)->format('%R%y');  
  $s = false;
  if ($age < 30) {
    $s = true;
  }  
  return $s;  
}

<?php
  // query string data for represent.me iframe
  $data = array( 'showComments'=>'true',
                 'maxHeight'=>'325',
                 'cacheBust' => time()
               );
  
  if (REPRESENT_STYLESHEET_URL) :
    $data['stylesheet'] = REPRESENT_STYLESHEET_URL;
  endif;          
?>
<!-- represent.me iframe  -->
<div class="represent single--represent">  
  <div class="row">
    <div class="large-8 small-centered columns text-center">            
        <div class="wrap--represent-iframe">
          <iframe src="<?php the_field('frame_url'); ?>?<?php echo http_build_query($data); ?>"></iframe>
        </div>        
    </div>
  </div>
</div>
<!-- / represent iframe -->