Initial commit of Altofocus

altofocus/404.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * The template for displaying 404 pages (not found).
+ *
+ * @link https://codex.wordpress.org/Creating_an_Error_404_Page
+ *
+ * @package AltoFocus
+ */
+
+get_header(); ?>
+
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main" role="main">
+			<section class="error-404 not-found">
+				<header class="page-header">
+					<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'altofocus' ); ?></h1>
+				</header>
+				<div class="page-content">
+					<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'altofocus' ); ?></p>
+					<?php // Search form
+						get_search_form(); ?>
+				</div>
+			</section>
+		</main>
+	</div>
+<?php
+get_sidebar();
+get_footer();

altofocus/archive.php

@@ -0,0 +1,55 @@
+<?php
+/**
+ * The template for displaying archive pages.
+ *
+ * @link https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package AltoFocus
+ */
+
+get_header(); ?>
+
+	<div id="primary" class="content-area">
+
+	<?php if ( have_posts() ) : ?>
+
+		<header class="page-header">
+			<?php
+				the_archive_title( '<h1 class="page-title">', '</h1>' );
+				the_archive_description( '<div class="taxonomy-description">', '</div>' );
+			?>
+		</header>
+
+		<main id="main" class="site-main" role="main">
+
+		<?php
+			/* Start the Loop */
+			while ( have_posts() ) : the_post();
+
+				/*
+				 * Include the Post-Format-specific template for the content.
+				 * If you want to override this in a child theme, then include a file
+				 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
+				 */
+				get_template_part( 'components/post/content', get_post_format() );
+
+			endwhile;
+
+			the_posts_navigation(); ?>
+
+		</main>
+
+	<?php else : ?>
+
+		<main id="main" class="site-main" role="main">
+
+			<?php get_template_part( 'components/post/content', 'none' ); ?>
+
+		</main>
+
+	<?php endif; ?>
+
+	</div>
+<?php
+get_sidebar();
+get_footer();

altofocus/assets/js/columnlist.js

@@ -0,0 +1,60 @@
+/**
+ * Column list Plugin
+ * - Breaks up a list into separate columns
+ * - src: https://github.com/weblinc/jquery-columnlist
+ *
+	Copyright (c) 2012 WebLinc LLC
+
+	Permission is hereby granted, free of charge, to any person obtaining a copy
+	of this software and associated documentation files (the "Software"), to deal
+	in the Software without restriction, including without limitation the rights
+	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+	copies of the Software, and to permit persons to whom the Software is
+	furnished to do so, subject to the following conditions:
+
+	The above copyright notice and this permission notice shall be included in
+	all copies or substantial portions of the Software.
+ */
+
+(function($){
+
+	jQuery.fn.columnlist = function( options ) {
+
+		options = $.extend( {}, $.fn.columnlist.defaults, options );
+
+		return this.each(function () {
+
+			var	$list			= $( this ),
+				size			= options.size || $list.data( 'columnList' ) || 1,
+				$children	= $list.children('li'),
+				perColumn	= Math.ceil( $children.length / size ),
+				$column;
+
+			for ( var i = 0; i < size; i++ ) {
+
+				// Set up column wrapper
+				$column = $('<ul />');
+
+				for ( var j = 0; j < perColumn; j++ ) {
+					if ( $children.length > i * perColumn + j ) {
+						// Add class to column wrapper
+						$column.addClass(options['class']).addClass(options.incrementClass + i).append( $children[ i * perColumn + j ]);
+					}
+				}
+
+				// Add new columns
+				$list.parent().append( $column );
+			}
+
+			// Remove original list
+			$list.remove();
+		});
+	};
+
+	// Defaults
+	$.fn.columnlist.defaults = {
+		'class'        : 'nav-menu',
+		incrementClass : 'nav-menu-'
+	};
+
+})(jQuery);

altofocus/assets/js/customizer.js

@@ -0,0 +1,166 @@
+/**
+ * File customizer.js.
+ *
+ * Theme Customizer enhancements for a better user experience.
+ *
+ * Contains handlers to make Theme Customizer preview reload changes asynchronously.
+ */
+
+/* global wp */
+
+( function( $ ) {
+
+	// Blog name
+	wp.customize( 'blogname', function( value ) {
+
+		value.bind( function( to ) {
+
+			$( '.site-title a' ).text( to );
+		});
+	});
+
+	// Blog description
+	wp.customize( 'blogdescription', function( value ) {
+
+		value.bind( function( to ) {
+
+			$( '.site-description' ).text( to );
+		});
+	});
+
+	// Header text display
+	wp.customize( 'header_textcolor', function( value ) {
+
+		value.bind( function( to ) {
+
+			// if header text display is set to false
+			if ( 'blank' === to ) {
+
+				$( '.site-identity, .site-title, .site-description' ).css({
+					clip: 'rect(1px, 1px, 1px, 1px)',
+					position: 'absolute'
+				});
+
+				$( 'body' ).addClass( 'hide-site-title-description' );
+
+			} else {
+
+				$( '.site-identity, .site-title, .site-description' ).css({
+					clip: 'auto',
+					position: 'relative'
+				});
+
+				// Update body class.
+				$( 'body' ).removeClass( 'hide-site-title-description' );
+			}
+		});
+	});
+
+	// Background colour
+	wp.customize( 'background_color', function( value ) {
+
+		value.bind( function( to ) {
+
+			if ( '' === to ) {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-color: #ffffff; }</style>' ).appendTo( 'head' );
+
+			} else {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-color: ' + to + '; }</style>' ).appendTo( 'head' );
+			}
+		});
+	});
+
+	// Background image
+	wp.customize( 'background_image', function( value ) {
+		value.bind( function( to ) {
+
+			if ( '' === to ) {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-image: inherit; }</style>' ).appendTo( 'head' );
+
+			} else {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-image: url("' + to + '"); }</style>' ).appendTo( 'head' );
+
+			}
+		});
+	});
+
+	// Background position X
+	wp.customize( 'background_position_x', function( value ) {
+		value.bind( function( to ) {
+			if ( '' === to ) {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-position-x: inherit; }</style>' ).appendTo( 'head' );
+
+			} else {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-position-x: ' + to + '; }</style>' ).appendTo( 'head' );
+			}
+		});
+	});
+
+	// Background position Y
+	wp.customize( 'background_position_y', function( value ) {
+		value.bind( function( to ) {
+			if ( '' === to ) {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-position-y: inherit; }</style>' ).appendTo( 'head' );
+
+			} else {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-position-y: ' + to + '; }</style>' ).appendTo( 'head' );
+			}
+		});
+	});
+
+	// Background size
+	wp.customize( 'background_size', function( value ) {
+		value.bind( function( to ) {
+			if ( '' === to ) {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-size: inherit; }</style>' ).appendTo( 'head' );
+
+			} else {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-size: ' + to + '; }</style>' ).appendTo( 'head' );
+			}
+		});
+	});
+
+	// Background repeat
+	wp.customize( 'background_repeat', function( value ) {
+		value.bind( function( to ) {
+			if ( '' === to ) {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-repeat: inherit; }</style>' ).appendTo( 'head' );
+
+			} else {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-repeat: ' + to + '; }</style>' ).appendTo( 'head' );
+			}
+		});
+	});
+
+	// Background attachment
+	wp.customize( 'background_attachment', function( value ) {
+		value.bind( function( to ) {
+			if ( '' === to ) {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-attachment: inherit; }</style>' ).appendTo( 'head' );
+
+			// Make sure background images with 'scroll' background-attachment display properly
+			} else if ( 'scroll' === to ) {
+
+				$( '<style>html { background-attachment: ' + to + '; } body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-image: none !important; background-color: transparent !important; }</style>' ).appendTo( 'head' );
+
+			} else {
+
+				$( '<style>html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-attachment: ' + to + '; }</style>' ).appendTo( 'head' );
+			}
+		});
+	});
+
+} )( jQuery );

altofocus/assets/js/grid.js

@@ -0,0 +1,167 @@
+/*!
+ * Setup Isotope Grid
+ *
+ * JavaScript specific to posts displayed in a grid templates
+ *
+ * Initiates Isotope, handles sorting and triggers lazy-loading for images
+ *
+ * @package Altofocus
+ */
+
+/* global loadedPosts */
+( function( $ ) {
+
+	// Define initial variable for Isotope
+	var $body        = $( document.body ),
+	    $isotopeWrap = $( '.hfeed:not(.error404, .search-no-results) #main' ),
+	    isoOptions   = {
+			layoutMode: 'masonry',
+			itemSelector: '.grid-item',
+			masonry: {
+				columnWidth: '.grid-sizer',
+				gutter: '.gutter-sizer'
+			},
+			percentPosition: true
+		};
+
+	/**
+	 * Init Isotope
+	 *
+	 * - Add Isotope class
+	 * - Add empty grid sizing elements for resposnive isotope sizing
+	 */
+	function initIsotope() {
+
+		// Init Isotope
+		$isotopeWrap
+			.append( "<div class=\'grid-sizer\'></div><div class=\'gutter-sizer\'></div>" );
+	}
+
+	/**
+	 * Run Isotope
+	 */
+	function runIsotope() {
+
+		$isotopeWrap.imagesLoaded().fail( function() {
+
+			// broken images
+			// console.log('All images loaded but at least one is broken');
+
+			// Initialize Isotope
+			$isotopeWrap.isotope( isoOptions );
+
+		} ).done( function() {
+
+			// Initialize Isotope
+			$isotopeWrap.isotope( isoOptions );
+
+		} );
+
+		// jQuery
+		$isotopeWrap.on( 'layoutComplete', function() {
+
+			$isotopeWrap.addClass( "has-isotope" );
+		} );
+	}
+
+	/**
+	 * Triggers re-layout on Isotope wrapper after infinite scroll has loaded new posts
+	 */
+	function reLayoutIsotope() {
+
+		// Set array for newly added post IDs
+		var newPostIds = [];
+
+		// If new posts have been loaded from Infinite Scroll, attach them to the isotope wrapper and lay them out
+		// note: loadedPosts variable is set globally in altofocus_infinite_scroll_render(). See JetPack.php
+		if ( typeof loadedPosts !== 'undefined' ) {
+
+			// Create post IDs from IS results and push into post ID array
+			$.each( loadedPosts, function( index, value ) {
+
+				var $appendedPost = '#post-'+ value;
+
+				newPostIds.push( $appendedPost );
+
+			});
+
+			// Place infinite scroll results into a jQuery object
+			var $newPostObj = $( newPostIds.join( ", " ) ),
+			    $appendedPosts = $( $newPostObj );
+
+			// Get each new post, add it to Isotope, and relayout Isotope
+			$appendedPosts
+
+				// Hide newly loaded posts to prevent animation jumping
+				.hide()
+
+				// Get each post with an image and without
+				.each( function() {
+
+					var $this = $( this );
+
+					// Cue posts with images separately to account for varying image load times
+					if ( $this.find( "img" ).length > 0 ) {
+
+						// Make sure images are loaded before laying them out
+						$this.imagesLoaded()
+
+							// After image load completes, append newly loaded posts to Isotope wrapper and lay them out
+							.done( function( ) {
+
+								// Add a half second delay to layout
+								setTimeout( function() {
+
+									$isotopeWrap
+
+										// Append this post
+										.append( $this )
+
+										// Layout this post
+										.isotope( 'appended', $this );
+
+								}, 500);
+
+							} );
+
+					// Append and layout posts without images normally
+					} else {
+
+						// Add a half second delay to layout
+						setTimeout( function() {
+
+							$isotopeWrap
+
+								// Append this post
+								.append( $this )
+
+								// Layout this post
+								.isotope( 'appended', $this );
+
+						}, 500);
+					}
+
+				});
+		}
+	}
+
+	/**
+	 * Document calls
+	 */
+	$( document )
+		.ready( initIsotope )
+		.ready( function() {
+
+			/**
+			 * Relayout Isotope on post-load (Infinite Scroll)
+			 */
+			$body.on( 'post-load', reLayoutIsotope );
+
+			/**
+			 * Window calls
+			 */
+			$( window )
+				.load( runIsotope );
+		} );
+
+} )( jQuery );

altofocus/assets/js/imagesloaded.pkgd.js

@@ -0,0 +1,486 @@
+/*!
+ * imagesLoaded PACKAGED v4.1.1
+ * JavaScript is all like "You images are done yet or what?"
+ * MIT License
+ */
+
+/**
+ * EvEmitter v1.0.3
+ * Lil' event emitter
+ * MIT License
+ */
+
+/* jshint unused: true, undef: true, strict: true */
+
+( function( global, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module, window */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD - RequireJS
+    define( 'ev-emitter/ev-emitter',factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS - Browserify, Webpack
+    module.exports = factory();
+  } else {
+    // Browser globals
+    global.EvEmitter = factory();
+  }
+
+}( typeof window != 'undefined' ? window : this, function() {
+
+
+
+function EvEmitter() {}
+
+var proto = EvEmitter.prototype;
+
+proto.on = function( eventName, listener ) {
+  if ( !eventName || !listener ) {
+    return;
+  }
+  // set events hash
+  var events = this._events = this._events || {};
+  // set listeners array
+  var listeners = events[ eventName ] = events[ eventName ] || [];
+  // only add once
+  if ( listeners.indexOf( listener ) == -1 ) {
+    listeners.push( listener );
+  }
+
+  return this;
+};
+
+proto.once = function( eventName, listener ) {
+  if ( !eventName || !listener ) {
+    return;
+  }
+  // add event
+  this.on( eventName, listener );
+  // set once flag
+  // set onceEvents hash
+  var onceEvents = this._onceEvents = this._onceEvents || {};
+  // set onceListeners object
+  var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
+  // set flag
+  onceListeners[ listener ] = true;
+
+  return this;
+};
+
+proto.off = function( eventName, listener ) {
+  var listeners = this._events && this._events[ eventName ];
+  if ( !listeners || !listeners.length ) {
+    return;
+  }
+  var index = listeners.indexOf( listener );
+  if ( index != -1 ) {
+    listeners.splice( index, 1 );
+  }
+
+  return this;
+};
+
+proto.emitEvent = function( eventName, args ) {
+  var listeners = this._events && this._events[ eventName ];
+  if ( !listeners || !listeners.length ) {
+    return;
+  }
+  var i = 0;
+  var listener = listeners[i];
+  args = args || [];
+  // once stuff
+  var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
+
+  while ( listener ) {
+    var isOnce = onceListeners && onceListeners[ listener ];
+    if ( isOnce ) {
+      // remove listener
+      // remove before trigger to prevent recursion
+      this.off( eventName, listener );
+      // unset once flag
+      delete onceListeners[ listener ];
+    }
+    // trigger listener
+    listener.apply( this, args );
+    // get next listener
+    i += isOnce ? 0 : 1;
+    listener = listeners[i];
+  }
+
+  return this;
+};
+
+return EvEmitter;
+
+}));
+
+/*!
+ * imagesLoaded v4.1.1
+ * JavaScript is all like "You images are done yet or what?"
+ * MIT License
+ */
+
+( function( window, factory ) { 'use strict';
+  // universal module definition
+
+  /*global define: false, module: false, require: false */
+
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( [
+      'ev-emitter/ev-emitter'
+    ], function( EvEmitter ) {
+      return factory( window, EvEmitter );
+    });
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      window,
+      require('ev-emitter')
+    );
+  } else {
+    // browser global
+    window.imagesLoaded = factory(
+      window,
+      window.EvEmitter
+    );
+  }
+
+})( window,
+
+// --------------------------  factory -------------------------- //
+
+function factory( window, EvEmitter ) {
+
+
+
+var $ = window.jQuery;
+var console = window.console;
+
+// -------------------------- helpers -------------------------- //
+
+// extend objects
+function extend( a, b ) {
+  for ( var prop in b ) {
+    a[ prop ] = b[ prop ];
+  }
+  return a;
+}
+
+// turn element or nodeList into an array
+function makeArray( obj ) {
+  var ary = [];
+  if ( Array.isArray( obj ) ) {
+    // use object if already an array
+    ary = obj;
+  } else if ( typeof obj.length == 'number' ) {
+    // convert nodeList to array
+    for ( var i=0; i < obj.length; i++ ) {
+      ary.push( obj[i] );
+    }
+  } else {
+    // array of single index
+    ary.push( obj );
+  }
+  return ary;
+}
+
+// -------------------------- imagesLoaded -------------------------- //
+
+/**
+ * @param {Array, Element, NodeList, String} elem
+ * @param {Object or Function} options - if function, use as callback
+ * @param {Function} onAlways - callback function
+ */
+function ImagesLoaded( elem, options, onAlways ) {
+  // coerce ImagesLoaded() without new, to be new ImagesLoaded()
+  if ( !( this instanceof ImagesLoaded ) ) {
+    return new ImagesLoaded( elem, options, onAlways );
+  }
+  // use elem as selector string
+  if ( typeof elem == 'string' ) {
+    elem = document.querySelectorAll( elem );
+  }
+
+  this.elements = makeArray( elem );
+  this.options = extend( {}, this.options );
+
+  if ( typeof options == 'function' ) {
+    onAlways = options;
+  } else {
+    extend( this.options, options );
+  }
+
+  if ( onAlways ) {
+    this.on( 'always', onAlways );
+  }
+
+  this.getImages();
+
+  if ( $ ) {
+    // add jQuery Deferred object
+    this.jqDeferred = new $.Deferred();
+  }
+
+  // HACK check async to allow time to bind listeners
+  setTimeout( function() {
+    this.check();
+  }.bind( this ));
+}
+
+ImagesLoaded.prototype = Object.create( EvEmitter.prototype );
+
+ImagesLoaded.prototype.options = {};
+
+ImagesLoaded.prototype.getImages = function() {
+  this.images = [];
+
+  // filter & find items if we have an item selector
+  this.elements.forEach( this.addElementImages, this );
+};
+
+/**
+ * @param {Node} element
+ */
+ImagesLoaded.prototype.addElementImages = function( elem ) {
+  // filter siblings
+  if ( elem.nodeName == 'IMG' ) {
+    this.addImage( elem );
+  }
+  // get background image on element
+  if ( this.options.background === true ) {
+    this.addElementBackgroundImages( elem );
+  }
+
+  // find children
+  // no non-element nodes, #143
+  var nodeType = elem.nodeType;
+  if ( !nodeType || !elementNodeTypes[ nodeType ] ) {
+    return;
+  }
+  var childImgs = elem.querySelectorAll('img');
+  // concat childElems to filterFound array
+  for ( var i=0; i < childImgs.length; i++ ) {
+    var img = childImgs[i];
+    this.addImage( img );
+  }
+
+  // get child background images
+  if ( typeof this.options.background == 'string' ) {
+    var children = elem.querySelectorAll( this.options.background );
+    for ( i=0; i < children.length; i++ ) {
+      var child = children[i];
+      this.addElementBackgroundImages( child );
+    }
+  }
+};
+
+var elementNodeTypes = {
+  1: true,
+  9: true,
+  11: true
+};
+
+ImagesLoaded.prototype.addElementBackgroundImages = function( elem ) {
+  var style = getComputedStyle( elem );
+  if ( !style ) {
+    // Firefox returns null if in a hidden iframe https://bugzil.la/548397
+    return;
+  }
+  // get url inside url("...")
+  var reURL = /url\((['"])?(.*?)\1\)/gi;
+  var matches = reURL.exec( style.backgroundImage );
+  while ( matches !== null ) {
+    var url = matches && matches[2];
+    if ( url ) {
+      this.addBackground( url, elem );
+    }
+    matches = reURL.exec( style.backgroundImage );
+  }
+};
+
+/**
+ * @param {Image} img
+ */
+ImagesLoaded.prototype.addImage = function( img ) {
+  var loadingImage = new LoadingImage( img );
+  this.images.push( loadingImage );
+};
+
+ImagesLoaded.prototype.addBackground = function( url, elem ) {
+  var background = new Background( url, elem );
+  this.images.push( background );
+};
+
+ImagesLoaded.prototype.check = function() {
+  var _this = this;
+  this.progressedCount = 0;
+  this.hasAnyBroken = false;
+  // complete if no images
+  if ( !this.images.length ) {
+    this.complete();
+    return;
+  }
+
+  function onProgress( image, elem, message ) {
+    // HACK - Chrome triggers event before object properties have changed. #83
+    setTimeout( function() {
+      _this.progress( image, elem, message );
+    });
+  }
+
+  this.images.forEach( function( loadingImage ) {
+    loadingImage.once( 'progress', onProgress );
+    loadingImage.check();
+  });
+};
+
+ImagesLoaded.prototype.progress = function( image, elem, message ) {
+  this.progressedCount++;
+  this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
+  // progress event
+  this.emitEvent( 'progress', [ this, image, elem ] );
+  if ( this.jqDeferred && this.jqDeferred.notify ) {
+    this.jqDeferred.notify( this, image );
+  }
+  // check if completed
+  if ( this.progressedCount == this.images.length ) {
+    this.complete();
+  }
+
+  if ( this.options.debug && console ) {
+    console.log( 'progress: ' + message, image, elem );
+  }
+};
+
+ImagesLoaded.prototype.complete = function() {
+  var eventName = this.hasAnyBroken ? 'fail' : 'done';
+  this.isComplete = true;
+  this.emitEvent( eventName, [ this ] );
+  this.emitEvent( 'always', [ this ] );
+  if ( this.jqDeferred ) {
+    var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
+    this.jqDeferred[ jqMethod ]( this );
+  }
+};
+
+// --------------------------  -------------------------- //
+
+function LoadingImage( img ) {
+  this.img = img;
+}
+
+LoadingImage.prototype = Object.create( EvEmitter.prototype );
+
+LoadingImage.prototype.check = function() {
+  // If complete is true and browser supports natural sizes,
+  // try to check for image status manually.
+  var isComplete = this.getIsImageComplete();
+  if ( isComplete ) {
+    // report based on naturalWidth
+    this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
+    return;
+  }
+
+  // If none of the checks above matched, simulate loading on detached element.
+  this.proxyImage = new Image();
+  this.proxyImage.addEventListener( 'load', this );
+  this.proxyImage.addEventListener( 'error', this );
+  // bind to image as well for Firefox. #191
+  this.img.addEventListener( 'load', this );
+  this.img.addEventListener( 'error', this );
+  this.proxyImage.src = this.img.src;
+};
+
+LoadingImage.prototype.getIsImageComplete = function() {
+  return this.img.complete && this.img.naturalWidth !== undefined;
+};
+
+LoadingImage.prototype.confirm = function( isLoaded, message ) {
+  this.isLoaded = isLoaded;
+  this.emitEvent( 'progress', [ this, this.img, message ] );
+};
+
+// ----- events ----- //
+
+// trigger specified handler for event type
+LoadingImage.prototype.handleEvent = function( event ) {
+  var method = 'on' + event.type;
+  if ( this[ method ] ) {
+    this[ method ]( event );
+  }
+};
+
+LoadingImage.prototype.onload = function() {
+  this.confirm( true, 'onload' );
+  this.unbindEvents();
+};
+
+LoadingImage.prototype.onerror = function() {
+  this.confirm( false, 'onerror' );
+  this.unbindEvents();
+};
+
+LoadingImage.prototype.unbindEvents = function() {
+  this.proxyImage.removeEventListener( 'load', this );
+  this.proxyImage.removeEventListener( 'error', this );
+  this.img.removeEventListener( 'load', this );
+  this.img.removeEventListener( 'error', this );
+};
+
+// -------------------------- Background -------------------------- //
+
+function Background( url, element ) {
+  this.url = url;
+  this.element = element;
+  this.img = new Image();
+}
+
+// inherit LoadingImage prototype
+Background.prototype = Object.create( LoadingImage.prototype );
+
+Background.prototype.check = function() {
+  this.img.addEventListener( 'load', this );
+  this.img.addEventListener( 'error', this );
+  this.img.src = this.url;
+  // check if image is already complete
+  var isComplete = this.getIsImageComplete();
+  if ( isComplete ) {
+    this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
+    this.unbindEvents();
+  }
+};
+
+Background.prototype.unbindEvents = function() {
+  this.img.removeEventListener( 'load', this );
+  this.img.removeEventListener( 'error', this );
+};
+
+Background.prototype.confirm = function( isLoaded, message ) {
+  this.isLoaded = isLoaded;
+  this.emitEvent( 'progress', [ this, this.element, message ] );
+};
+
+// -------------------------- jQuery -------------------------- //
+
+ImagesLoaded.makeJQueryPlugin = function( jQuery ) {
+  jQuery = jQuery || window.jQuery;
+  if ( !jQuery ) {
+    return;
+  }
+  // set local variable
+  $ = jQuery;
+  // $().imagesLoaded()
+  $.fn.imagesLoaded = function( options, callback ) {
+    var instance = new ImagesLoaded( this, options, callback );
+    return instance.jqDeferred.promise( $(this) );
+  };
+};
+// try making plugin
+ImagesLoaded.makeJQueryPlugin();
+
+// --------------------------  -------------------------- //
+
+return ImagesLoaded;
+
+});

altofocus/assets/js/isotope.pkgd.js

@@ -0,0 +1,3514 @@
+/*!
+ * Isotope PACKAGED v3.0.1
+ *
+ * Licensed GPLv3 for open source use
+ * or Isotope Commercial License for commercial use
+ *
+ * http://isotope.metafizzy.co
+ * Copyright 2016 Metafizzy
+ */
+
+/**
+ * Bridget makes jQuery widgets
+ * v2.0.0
+ * MIT license
+ */
+
+/* jshint browser: true, strict: true, undef: true, unused: true */
+
+( function( window, factory ) {
+  'use strict';
+  /* globals define: false, module: false, require: false */
+
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'jquery-bridget/jquery-bridget',[ 'jquery' ], function( jQuery ) {
+      factory( window, jQuery );
+    });
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      window,
+      require('jquery')
+    );
+  } else {
+    // browser global
+    window.jQueryBridget = factory(
+      window,
+      window.jQuery
+    );
+  }
+
+}( window, function factory( window, jQuery ) {
+'use strict';
+
+// ----- utils ----- //
+
+var arraySlice = Array.prototype.slice;
+
+// helper function for logging errors
+// $.error breaks jQuery chaining
+var console = window.console;
+var logError = typeof console == 'undefined' ? function() {} :
+  function( message ) {
+    console.error( message );
+  };
+
+// ----- jQueryBridget ----- //
+
+function jQueryBridget( namespace, PluginClass, $ ) {
+  $ = $ || jQuery || window.jQuery;
+  if ( !$ ) {
+    return;
+  }
+
+  // add option method -> $().plugin('option', {...})
+  if ( !PluginClass.prototype.option ) {
+    // option setter
+    PluginClass.prototype.option = function( opts ) {
+      // bail out if not an object
+      if ( !$.isPlainObject( opts ) ){
+        return;
+      }
+      this.options = $.extend( true, this.options, opts );
+    };
+  }
+
+  // make jQuery plugin
+  $.fn[ namespace ] = function( arg0 /*, arg1 */ ) {
+    if ( typeof arg0 == 'string' ) {
+      // method call $().plugin( 'methodName', { options } )
+      // shift arguments by 1
+      var args = arraySlice.call( arguments, 1 );
+      return methodCall( this, arg0, args );
+    }
+    // just $().plugin({ options })
+    plainCall( this, arg0 );
+    return this;
+  };
+
+  // $().plugin('methodName')
+  function methodCall( $elems, methodName, args ) {
+    var returnValue;
+    var pluginMethodStr = '$().' + namespace + '("' + methodName + '")';
+
+    $elems.each( function( i, elem ) {
+      // get instance
+      var instance = $.data( elem, namespace );
+      if ( !instance ) {
+        logError( namespace + ' not initialized. Cannot call methods, i.e. ' +
+          pluginMethodStr );
+        return;
+      }
+
+      var method = instance[ methodName ];
+      if ( !method || methodName.charAt(0) == '_' ) {
+        logError( pluginMethodStr + ' is not a valid method' );
+        return;
+      }
+
+      // apply method, get return value
+      var value = method.apply( instance, args );
+      // set return value if value is returned, use only first value
+      returnValue = returnValue === undefined ? value : returnValue;
+    });
+
+    return returnValue !== undefined ? returnValue : $elems;
+  }
+
+  function plainCall( $elems, options ) {
+    $elems.each( function( i, elem ) {
+      var instance = $.data( elem, namespace );
+      if ( instance ) {
+        // set options & init
+        instance.option( options );
+        instance._init();
+      } else {
+        // initialize new instance
+        instance = new PluginClass( elem, options );
+        $.data( elem, namespace, instance );
+      }
+    });
+  }
+
+  updateJQuery( $ );
+
+}
+
+// ----- updateJQuery ----- //
+
+// set $.bridget for v1 backwards compatibility
+function updateJQuery( $ ) {
+  if ( !$ || ( $ && $.bridget ) ) {
+    return;
+  }
+  $.bridget = jQueryBridget;
+}
+
+updateJQuery( jQuery || window.jQuery );
+
+// -----  ----- //
+
+return jQueryBridget;
+
+}));
+
+/**
+ * EvEmitter v1.0.3
+ * Lil' event emitter
+ * MIT License
+ */
+
+/* jshint unused: true, undef: true, strict: true */
+
+( function( global, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module, window */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD - RequireJS
+    define( 'ev-emitter/ev-emitter',factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS - Browserify, Webpack
+    module.exports = factory();
+  } else {
+    // Browser globals
+    global.EvEmitter = factory();
+  }
+
+}( typeof window != 'undefined' ? window : this, function() {
+
+
+
+function EvEmitter() {}
+
+var proto = EvEmitter.prototype;
+
+proto.on = function( eventName, listener ) {
+  if ( !eventName || !listener ) {
+    return;
+  }
+  // set events hash
+  var events = this._events = this._events || {};
+  // set listeners array
+  var listeners = events[ eventName ] = events[ eventName ] || [];
+  // only add once
+  if ( listeners.indexOf( listener ) == -1 ) {
+    listeners.push( listener );
+  }
+
+  return this;
+};
+
+proto.once = function( eventName, listener ) {
+  if ( !eventName || !listener ) {
+    return;
+  }
+  // add event
+  this.on( eventName, listener );
+  // set once flag
+  // set onceEvents hash
+  var onceEvents = this._onceEvents = this._onceEvents || {};
+  // set onceListeners object
+  var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
+  // set flag
+  onceListeners[ listener ] = true;
+
+  return this;
+};
+
+proto.off = function( eventName, listener ) {
+  var listeners = this._events && this._events[ eventName ];
+  if ( !listeners || !listeners.length ) {
+    return;
+  }
+  var index = listeners.indexOf( listener );
+  if ( index != -1 ) {
+    listeners.splice( index, 1 );
+  }
+
+  return this;
+};
+
+proto.emitEvent = function( eventName, args ) {
+  var listeners = this._events && this._events[ eventName ];
+  if ( !listeners || !listeners.length ) {
+    return;
+  }
+  var i = 0;
+  var listener = listeners[i];
+  args = args || [];
+  // once stuff
+  var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
+
+  while ( listener ) {
+    var isOnce = onceListeners && onceListeners[ listener ];
+    if ( isOnce ) {
+      // remove listener
+      // remove before trigger to prevent recursion
+      this.off( eventName, listener );
+      // unset once flag
+      delete onceListeners[ listener ];
+    }
+    // trigger listener
+    listener.apply( this, args );
+    // get next listener
+    i += isOnce ? 0 : 1;
+    listener = listeners[i];
+  }
+
+  return this;
+};
+
+return EvEmitter;
+
+}));
+
+/*!
+ * getSize v2.0.2
+ * measure size of elements
+ * MIT license
+ */
+
+/*jshint browser: true, strict: true, undef: true, unused: true */
+/*global define: false, module: false, console: false */
+
+( function( window, factory ) {
+  'use strict';
+
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'get-size/get-size',[],function() {
+      return factory();
+    });
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory();
+  } else {
+    // browser global
+    window.getSize = factory();
+  }
+
+})( window, function factory() {
+'use strict';
+
+// -------------------------- helpers -------------------------- //
+
+// get a number from a string, not a percentage
+function getStyleSize( value ) {
+  var num = parseFloat( value );
+  // not a percent like '100%', and a number
+  var isValid = value.indexOf('%') == -1 && !isNaN( num );
+  return isValid && num;
+}
+
+function noop() {}
+
+var logError = typeof console == 'undefined' ? noop :
+  function( message ) {
+    console.error( message );
+  };
+
+// -------------------------- measurements -------------------------- //
+
+var measurements = [
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  'paddingBottom',
+  'marginLeft',
+  'marginRight',
+  'marginTop',
+  'marginBottom',
+  'borderLeftWidth',
+  'borderRightWidth',
+  'borderTopWidth',
+  'borderBottomWidth'
+];
+
+var measurementsLength = measurements.length;
+
+function getZeroSize() {
+  var size = {
+    width: 0,
+    height: 0,
+    innerWidth: 0,
+    innerHeight: 0,
+    outerWidth: 0,
+    outerHeight: 0
+  };
+  for ( var i=0; i < measurementsLength; i++ ) {
+    var measurement = measurements[i];
+    size[ measurement ] = 0;
+  }
+  return size;
+}
+
+// -------------------------- getStyle -------------------------- //
+
+/**
+ * getStyle, get style of element, check for Firefox bug
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+ */
+function getStyle( elem ) {
+  var style = getComputedStyle( elem );
+  if ( !style ) {
+    logError( 'Style returned ' + style +
+      '. Are you running this code in a hidden iframe on Firefox? ' +
+      'See http://bit.ly/getsizebug1' );
+  }
+  return style;
+}
+
+// -------------------------- setup -------------------------- //
+
+var isSetup = false;
+
+var isBoxSizeOuter;
+
+/**
+ * setup
+ * check isBoxSizerOuter
+ * do on first getSize() rather than on page load for Firefox bug
+ */
+function setup() {
+  // setup once
+  if ( isSetup ) {
+    return;
+  }
+  isSetup = true;
+
+  // -------------------------- box sizing -------------------------- //
+
+  /**
+   * WebKit measures the outer-width on style.width on border-box elems
+   * IE & Firefox<29 measures the inner-width
+   */
+  var div = document.createElement('div');
+  div.style.width = '200px';
+  div.style.padding = '1px 2px 3px 4px';
+  div.style.borderStyle = 'solid';
+  div.style.borderWidth = '1px 2px 3px 4px';
+  div.style.boxSizing = 'border-box';
+
+  var body = document.body || document.documentElement;
+  body.appendChild( div );
+  var style = getStyle( div );
+
+  getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize( style.width ) == 200;
+  body.removeChild( div );
+
+}
+
+// -------------------------- getSize -------------------------- //
+
+function getSize( elem ) {
+  setup();
+
+  // use querySeletor if elem is string
+  if ( typeof elem == 'string' ) {
+    elem = document.querySelector( elem );
+  }
+
+  // do not proceed on non-objects
+  if ( !elem || typeof elem != 'object' || !elem.nodeType ) {
+    return;
+  }
+
+  var style = getStyle( elem );
+
+  // if hidden, everything is 0
+  if ( style.display == 'none' ) {
+    return getZeroSize();
+  }
+
+  var size = {};
+  size.width = elem.offsetWidth;
+  size.height = elem.offsetHeight;
+
+  var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
+
+  // get all measurements
+  for ( var i=0; i < measurementsLength; i++ ) {
+    var measurement = measurements[i];
+    var value = style[ measurement ];
+    var num = parseFloat( value );
+    // any 'auto', 'medium' value will be 0
+    size[ measurement ] = !isNaN( num ) ? num : 0;
+  }
+
+  var paddingWidth = size.paddingLeft + size.paddingRight;
+  var paddingHeight = size.paddingTop + size.paddingBottom;
+  var marginWidth = size.marginLeft + size.marginRight;
+  var marginHeight = size.marginTop + size.marginBottom;
+  var borderWidth = size.borderLeftWidth + size.borderRightWidth;
+  var borderHeight = size.borderTopWidth + size.borderBottomWidth;
+
+  var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
+
+  // overwrite width and height if we can get it from style
+  var styleWidth = getStyleSize( style.width );
+  if ( styleWidth !== false ) {
+    size.width = styleWidth +
+      // add padding and border unless it's already including it
+      ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );
+  }
+
+  var styleHeight = getStyleSize( style.height );
+  if ( styleHeight !== false ) {
+    size.height = styleHeight +
+      // add padding and border unless it's already including it
+      ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );
+  }
+
+  size.innerWidth = size.width - ( paddingWidth + borderWidth );
+  size.innerHeight = size.height - ( paddingHeight + borderHeight );
+
+  size.outerWidth = size.width + marginWidth;
+  size.outerHeight = size.height + marginHeight;
+
+  return size;
+}
+
+return getSize;
+
+});
+
+/**
+ * matchesSelector v2.0.1
+ * matchesSelector( element, '.selector' )
+ * MIT license
+ */
+
+/*jshint browser: true, strict: true, undef: true, unused: true */
+
+( function( window, factory ) {
+  /*global define: false, module: false */
+  'use strict';
+  // universal module definition
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'desandro-matches-selector/matches-selector',factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory();
+  } else {
+    // browser global
+    window.matchesSelector = factory();
+  }
+
+}( window, function factory() {
+  'use strict';
+
+  var matchesMethod = ( function() {
+    var ElemProto = Element.prototype;
+    // check for the standard method name first
+    if ( ElemProto.matches ) {
+      return 'matches';
+    }
+    // check un-prefixed
+    if ( ElemProto.matchesSelector ) {
+      return 'matchesSelector';
+    }
+    // check vendor prefixes
+    var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
+
+    for ( var i=0; i < prefixes.length; i++ ) {
+      var prefix = prefixes[i];
+      var method = prefix + 'MatchesSelector';
+      if ( ElemProto[ method ] ) {
+        return method;
+      }
+    }
+  })();
+
+  return function matchesSelector( elem, selector ) {
+    return elem[ matchesMethod ]( selector );
+  };
+
+}));
+
+/**
+ * Fizzy UI utils v2.0.2
+ * MIT license
+ */
+
+/*jshint browser: true, undef: true, unused: true, strict: true */
+
+( function( window, factory ) {
+  // universal module definition
+  /*jshint strict: false */ /*globals define, module, require */
+
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'fizzy-ui-utils/utils',[
+      'desandro-matches-selector/matches-selector'
+    ], function( matchesSelector ) {
+      return factory( window, matchesSelector );
+    });
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      window,
+      require('desandro-matches-selector')
+    );
+  } else {
+    // browser global
+    window.fizzyUIUtils = factory(
+      window,
+      window.matchesSelector
+    );
+  }
+
+}( window, function factory( window, matchesSelector ) {
+
+
+
+var utils = {};
+
+// ----- extend ----- //
+
+// extends objects
+utils.extend = function( a, b ) {
+  for ( var prop in b ) {
+    a[ prop ] = b[ prop ];
+  }
+  return a;
+};
+
+// ----- modulo ----- //
+
+utils.modulo = function( num, div ) {
+  return ( ( num % div ) + div ) % div;
+};
+
+// ----- makeArray ----- //
+
+// turn element or nodeList into an array
+utils.makeArray = function( obj ) {
+  var ary = [];
+  if ( Array.isArray( obj ) ) {
+    // use object if already an array
+    ary = obj;
+  } else if ( obj && typeof obj.length == 'number' ) {
+    // convert nodeList to array
+    for ( var i=0; i < obj.length; i++ ) {
+      ary.push( obj[i] );
+    }
+  } else {
+    // array of single index
+    ary.push( obj );
+  }
+  return ary;
+};
+
+// ----- removeFrom ----- //
+
+utils.removeFrom = function( ary, obj ) {
+  var index = ary.indexOf( obj );
+  if ( index != -1 ) {
+    ary.splice( index, 1 );
+  }
+};
+
+// ----- getParent ----- //
+
+utils.getParent = function( elem, selector ) {
+  while ( elem != document.body ) {
+    elem = elem.parentNode;
+    if ( matchesSelector( elem, selector ) ) {
+      return elem;
+    }
+  }
+};
+
+// ----- getQueryElement ----- //
+
+// use element as selector string
+utils.getQueryElement = function( elem ) {
+  if ( typeof elem == 'string' ) {
+    return document.querySelector( elem );
+  }
+  return elem;
+};
+
+// ----- handleEvent ----- //
+
+// enable .ontype to trigger from .addEventListener( elem, 'type' )
+utils.handleEvent = function( event ) {
+  var method = 'on' + event.type;
+  if ( this[ method ] ) {
+    this[ method ]( event );
+  }
+};
+
+// ----- filterFindElements ----- //
+
+utils.filterFindElements = function( elems, selector ) {
+  // make array of elems
+  elems = utils.makeArray( elems );
+  var ffElems = [];
+
+  elems.forEach( function( elem ) {
+    // check that elem is an actual element
+    if ( !( elem instanceof HTMLElement ) ) {
+      return;
+    }
+    // add elem if no selector
+    if ( !selector ) {
+      ffElems.push( elem );
+      return;
+    }
+    // filter & find items if we have a selector
+    // filter
+    if ( matchesSelector( elem, selector ) ) {
+      ffElems.push( elem );
+    }
+    // find children
+    var childElems = elem.querySelectorAll( selector );
+    // concat childElems to filterFound array
+    for ( var i=0; i < childElems.length; i++ ) {
+      ffElems.push( childElems[i] );
+    }
+  });
+
+  return ffElems;
+};
+
+// ----- debounceMethod ----- //
+
+utils.debounceMethod = function( _class, methodName, threshold ) {
+  // original method
+  var method = _class.prototype[ methodName ];
+  var timeoutName = methodName + 'Timeout';
+
+  _class.prototype[ methodName ] = function() {
+    var timeout = this[ timeoutName ];
+    if ( timeout ) {
+      clearTimeout( timeout );
+    }
+    var args = arguments;
+
+    var _this = this;
+    this[ timeoutName ] = setTimeout( function() {
+      method.apply( _this, args );
+      delete _this[ timeoutName ];
+    }, threshold || 100 );
+  };
+};
+
+// ----- docReady ----- //
+
+utils.docReady = function( callback ) {
+  var readyState = document.readyState;
+  if ( readyState == 'complete' || readyState == 'interactive' ) {
+    callback();
+  } else {
+    document.addEventListener( 'DOMContentLoaded', callback );
+  }
+};
+
+// ----- htmlInit ----- //
+
+// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/
+utils.toDashed = function( str ) {
+  return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) {
+    return $1 + '-' + $2;
+  }).toLowerCase();
+};
+
+var console = window.console;
+/**
+ * allow user to initialize classes via [data-namespace] or .js-namespace class
+ * htmlInit( Widget, 'widgetName' )
+ * options are parsed from data-namespace-options
+ */
+utils.htmlInit = function( WidgetClass, namespace ) {
+  utils.docReady( function() {
+    var dashedNamespace = utils.toDashed( namespace );
+    var dataAttr = 'data-' + dashedNamespace;
+    var dataAttrElems = document.querySelectorAll( '[' + dataAttr + ']' );
+    var jsDashElems = document.querySelectorAll( '.js-' + dashedNamespace );
+    var elems = utils.makeArray( dataAttrElems )
+      .concat( utils.makeArray( jsDashElems ) );
+    var dataOptionsAttr = dataAttr + '-options';
+    var jQuery = window.jQuery;
+
+    elems.forEach( function( elem ) {
+      var attr = elem.getAttribute( dataAttr ) ||
+        elem.getAttribute( dataOptionsAttr );
+      var options;
+      try {
+        options = attr && JSON.parse( attr );
+      } catch ( error ) {
+        // log error, do not initialize
+        if ( console ) {
+          console.error( 'Error parsing ' + dataAttr + ' on ' + elem.className +
+          ': ' + error );
+        }
+        return;
+      }
+      // initialize
+      var instance = new WidgetClass( elem, options );
+      // make available via $().data('layoutname')
+      if ( jQuery ) {
+        jQuery.data( elem, namespace, instance );
+      }
+    });
+
+  });
+};
+
+// -----  ----- //
+
+return utils;
+
+}));
+
+/**
+ * Outlayer Item
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD - RequireJS
+    define( 'outlayer/item',[
+        'ev-emitter/ev-emitter',
+        'get-size/get-size'
+      ],
+      factory
+    );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS - Browserify, Webpack
+    module.exports = factory(
+      require('ev-emitter'),
+      require('get-size')
+    );
+  } else {
+    // browser global
+    window.Outlayer = {};
+    window.Outlayer.Item = factory(
+      window.EvEmitter,
+      window.getSize
+    );
+  }
+
+}( window, function factory( EvEmitter, getSize ) {
+'use strict';
+
+// ----- helpers ----- //
+
+function isEmptyObj( obj ) {
+  for ( var prop in obj ) {
+    return false;
+  }
+  prop = null;
+  return true;
+}
+
+// -------------------------- CSS3 support -------------------------- //
+
+
+var docElemStyle = document.documentElement.style;
+
+var transitionProperty = typeof docElemStyle.transition == 'string' ?
+  'transition' : 'WebkitTransition';
+var transformProperty = typeof docElemStyle.transform == 'string' ?
+  'transform' : 'WebkitTransform';
+
+var transitionEndEvent = {
+  WebkitTransition: 'webkitTransitionEnd',
+  transition: 'transitionend'
+}[ transitionProperty ];
+
+// cache all vendor properties that could have vendor prefix
+var vendorProperties = {
+  transform: transformProperty,
+  transition: transitionProperty,
+  transitionDuration: transitionProperty + 'Duration',
+  transitionProperty: transitionProperty + 'Property',
+  transitionDelay: transitionProperty + 'Delay'
+};
+
+// -------------------------- Item -------------------------- //
+
+function Item( element, layout ) {
+  if ( !element ) {
+    return;
+  }
+
+  this.element = element;
+  // parent layout class, i.e. Masonry, Isotope, or Packery
+  this.layout = layout;
+  this.position = {
+    x: 0,
+    y: 0
+  };
+
+  this._create();
+}
+
+// inherit EvEmitter
+var proto = Item.prototype = Object.create( EvEmitter.prototype );
+proto.constructor = Item;
+
+proto._create = function() {
+  // transition objects
+  this._transn = {
+    ingProperties: {},
+    clean: {},
+    onEnd: {}
+  };
+
+  this.css({
+    position: 'absolute'
+  });
+};
+
+// trigger specified handler for event type
+proto.handleEvent = function( event ) {
+  var method = 'on' + event.type;
+  if ( this[ method ] ) {
+    this[ method ]( event );
+  }
+};
+
+proto.getSize = function() {
+  this.size = getSize( this.element );
+};
+
+/**
+ * apply CSS styles to element
+ * @param {Object} style
+ */
+proto.css = function( style ) {
+  var elemStyle = this.element.style;
+
+  for ( var prop in style ) {
+    // use vendor property if available
+    var supportedProp = vendorProperties[ prop ] || prop;
+    elemStyle[ supportedProp ] = style[ prop ];
+  }
+};
+
+ // measure position, and sets it
+proto.getPosition = function() {
+  var style = getComputedStyle( this.element );
+  var isOriginLeft = this.layout._getOption('originLeft');
+  var isOriginTop = this.layout._getOption('originTop');
+  var xValue = style[ isOriginLeft ? 'left' : 'right' ];
+  var yValue = style[ isOriginTop ? 'top' : 'bottom' ];
+  // convert percent to pixels
+  var layoutSize = this.layout.size;
+  var x = xValue.indexOf('%') != -1 ?
+    ( parseFloat( xValue ) / 100 ) * layoutSize.width : parseInt( xValue, 10 );
+  var y = yValue.indexOf('%') != -1 ?
+    ( parseFloat( yValue ) / 100 ) * layoutSize.height : parseInt( yValue, 10 );
+
+  // clean up 'auto' or other non-integer values
+  x = isNaN( x ) ? 0 : x;
+  y = isNaN( y ) ? 0 : y;
+  // remove padding from measurement
+  x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight;
+  y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom;
+
+  this.position.x = x;
+  this.position.y = y;
+};
+
+// set settled position, apply padding
+proto.layoutPosition = function() {
+  var layoutSize = this.layout.size;
+  var style = {};
+  var isOriginLeft = this.layout._getOption('originLeft');
+  var isOriginTop = this.layout._getOption('originTop');
+
+  // x
+  var xPadding = isOriginLeft ? 'paddingLeft' : 'paddingRight';
+  var xProperty = isOriginLeft ? 'left' : 'right';
+  var xResetProperty = isOriginLeft ? 'right' : 'left';
+
+  var x = this.position.x + layoutSize[ xPadding ];
+  // set in percentage or pixels
+  style[ xProperty ] = this.getXValue( x );
+  // reset other property
+  style[ xResetProperty ] = '';
+
+  // y
+  var yPadding = isOriginTop ? 'paddingTop' : 'paddingBottom';
+  var yProperty = isOriginTop ? 'top' : 'bottom';
+  var yResetProperty = isOriginTop ? 'bottom' : 'top';
+
+  var y = this.position.y + layoutSize[ yPadding ];
+  // set in percentage or pixels
+  style[ yProperty ] = this.getYValue( y );
+  // reset other property
+  style[ yResetProperty ] = '';
+
+  this.css( style );
+  this.emitEvent( 'layout', [ this ] );
+};
+
+proto.getXValue = function( x ) {
+  var isHorizontal = this.layout._getOption('horizontal');
+  return this.layout.options.percentPosition && !isHorizontal ?
+    ( ( x / this.layout.size.width ) * 100 ) + '%' : x + 'px';
+};
+
+proto.getYValue = function( y ) {
+  var isHorizontal = this.layout._getOption('horizontal');
+  return this.layout.options.percentPosition && isHorizontal ?
+    ( ( y / this.layout.size.height ) * 100 ) + '%' : y + 'px';
+};
+
+proto._transitionTo = function( x, y ) {
+  this.getPosition();
+  // get current x & y from top/left
+  var curX = this.position.x;
+  var curY = this.position.y;
+
+  var compareX = parseInt( x, 10 );
+  var compareY = parseInt( y, 10 );
+  var didNotMove = compareX === this.position.x && compareY === this.position.y;
+
+  // save end position
+  this.setPosition( x, y );
+
+  // if did not move and not transitioning, just go to layout
+  if ( didNotMove && !this.isTransitioning ) {
+    this.layoutPosition();
+    return;
+  }
+
+  var transX = x - curX;
+  var transY = y - curY;
+  var transitionStyle = {};
+  transitionStyle.transform = this.getTranslate( transX, transY );
+
+  this.transition({
+    to: transitionStyle,
+    onTransitionEnd: {
+      transform: this.layoutPosition
+    },
+    isCleaning: true
+  });
+};
+
+proto.getTranslate = function( x, y ) {
+  // flip cooridinates if origin on right or bottom
+  var isOriginLeft = this.layout._getOption('originLeft');
+  var isOriginTop = this.layout._getOption('originTop');
+  x = isOriginLeft ? x : -x;
+  y = isOriginTop ? y : -y;
+  return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
+};
+
+// non transition + transform support
+proto.goTo = function( x, y ) {
+  this.setPosition( x, y );
+  this.layoutPosition();
+};
+
+proto.moveTo = proto._transitionTo;
+
+proto.setPosition = function( x, y ) {
+  this.position.x = parseInt( x, 10 );
+  this.position.y = parseInt( y, 10 );
+};
+
+// ----- transition ----- //
+
+/**
+ * @param {Object} style - CSS
+ * @param {Function} onTransitionEnd
+ */
+
+// non transition, just trigger callback
+proto._nonTransition = function( args ) {
+  this.css( args.to );
+  if ( args.isCleaning ) {
+    this._removeStyles( args.to );
+  }
+  for ( var prop in args.onTransitionEnd ) {
+    args.onTransitionEnd[ prop ].call( this );
+  }
+};
+
+/**
+ * proper transition
+ * @param {Object} args - arguments
+ *   @param {Object} to - style to transition to
+ *   @param {Object} from - style to start transition from
+ *   @param {Boolean} isCleaning - removes transition styles after transition
+ *   @param {Function} onTransitionEnd - callback
+ */
+proto.transition = function( args ) {
+  // redirect to nonTransition if no transition duration
+  if ( !parseFloat( this.layout.options.transitionDuration ) ) {
+    this._nonTransition( args );
+    return;
+  }
+
+  var _transition = this._transn;
+  // keep track of onTransitionEnd callback by css property
+  for ( var prop in args.onTransitionEnd ) {
+    _transition.onEnd[ prop ] = args.onTransitionEnd[ prop ];
+  }
+  // keep track of properties that are transitioning
+  for ( prop in args.to ) {
+    _transition.ingProperties[ prop ] = true;
+    // keep track of properties to clean up when transition is done
+    if ( args.isCleaning ) {
+      _transition.clean[ prop ] = true;
+    }
+  }
+
+  // set from styles
+  if ( args.from ) {
+    this.css( args.from );
+    // force redraw. http://blog.alexmaccaw.com/css-transitions
+    var h = this.element.offsetHeight;
+    // hack for JSHint to hush about unused var
+    h = null;
+  }
+  // enable transition
+  this.enableTransition( args.to );
+  // set styles that are transitioning
+  this.css( args.to );
+
+  this.isTransitioning = true;
+
+};
+
+// dash before all cap letters, including first for
+// WebkitTransform => -webkit-transform
+function toDashedAll( str ) {
+  return str.replace( /([A-Z])/g, function( $1 ) {
+    return '-' + $1.toLowerCase();
+  });
+}
+
+var transitionProps = 'opacity,' + toDashedAll( transformProperty );
+
+proto.enableTransition = function(/* style */) {
+  // HACK changing transitionProperty during a transition
+  // will cause transition to jump
+  if ( this.isTransitioning ) {
+    return;
+  }
+
+  // make `transition: foo, bar, baz` from style object
+  // HACK un-comment this when enableTransition can work
+  // while a transition is happening
+  // var transitionValues = [];
+  // for ( var prop in style ) {
+  //   // dash-ify camelCased properties like WebkitTransition
+  //   prop = vendorProperties[ prop ] || prop;
+  //   transitionValues.push( toDashedAll( prop ) );
+  // }
+  // munge number to millisecond, to match stagger
+  var duration = this.layout.options.transitionDuration;
+  duration = typeof duration == 'number' ? duration + 'ms' : duration;
+  // enable transition styles
+  this.css({
+    transitionProperty: transitionProps,
+    transitionDuration: duration,
+    transitionDelay: this.staggerDelay || 0
+  });
+  // listen for transition end event
+  this.element.addEventListener( transitionEndEvent, this, false );
+};
+
+// ----- events ----- //
+
+proto.onwebkitTransitionEnd = function( event ) {
+  this.ontransitionend( event );
+};
+
+proto.onotransitionend = function( event ) {
+  this.ontransitionend( event );
+};
+
+// properties that I munge to make my life easier
+var dashedVendorProperties = {
+  '-webkit-transform': 'transform'
+};
+
+proto.ontransitionend = function( event ) {
+  // disregard bubbled events from children
+  if ( event.target !== this.element ) {
+    return;
+  }
+  var _transition = this._transn;
+  // get property name of transitioned property, convert to prefix-free
+  var propertyName = dashedVendorProperties[ event.propertyName ] || event.propertyName;
+
+  // remove property that has completed transitioning
+  delete _transition.ingProperties[ propertyName ];
+  // check if any properties are still transitioning
+  if ( isEmptyObj( _transition.ingProperties ) ) {
+    // all properties have completed transitioning
+    this.disableTransition();
+  }
+  // clean style
+  if ( propertyName in _transition.clean ) {
+    // clean up style
+    this.element.style[ event.propertyName ] = '';
+    delete _transition.clean[ propertyName ];
+  }
+  // trigger onTransitionEnd callback
+  if ( propertyName in _transition.onEnd ) {
+    var onTransitionEnd = _transition.onEnd[ propertyName ];
+    onTransitionEnd.call( this );
+    delete _transition.onEnd[ propertyName ];
+  }
+
+  this.emitEvent( 'transitionEnd', [ this ] );
+};
+
+proto.disableTransition = function() {
+  this.removeTransitionStyles();
+  this.element.removeEventListener( transitionEndEvent, this, false );
+  this.isTransitioning = false;
+};
+
+/**
+ * removes style property from element
+ * @param {Object} style
+**/
+proto._removeStyles = function( style ) {
+  // clean up transition styles
+  var cleanStyle = {};
+  for ( var prop in style ) {
+    cleanStyle[ prop ] = '';
+  }
+  this.css( cleanStyle );
+};
+
+var cleanTransitionStyle = {
+  transitionProperty: '',
+  transitionDuration: '',
+  transitionDelay: ''
+};
+
+proto.removeTransitionStyles = function() {
+  // remove transition
+  this.css( cleanTransitionStyle );
+};
+
+// ----- stagger ----- //
+
+proto.stagger = function( delay ) {
+  delay = isNaN( delay ) ? 0 : delay;
+  this.staggerDelay = delay + 'ms';
+};
+
+// ----- show/hide/remove ----- //
+
+// remove element from DOM
+proto.removeElem = function() {
+  this.element.parentNode.removeChild( this.element );
+  // remove display: none
+  this.css({ display: '' });
+  this.emitEvent( 'remove', [ this ] );
+};
+
+proto.remove = function() {
+  // just remove element if no transition support or no transition
+  if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) {
+    this.removeElem();
+    return;
+  }
+
+  // start transition
+  this.once( 'transitionEnd', function() {
+    this.removeElem();
+  });
+  this.hide();
+};
+
+proto.reveal = function() {
+  delete this.isHidden;
+  // remove display: none
+  this.css({ display: '' });
+
+  var options = this.layout.options;
+
+  var onTransitionEnd = {};
+  var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle');
+  onTransitionEnd[ transitionEndProperty ] = this.onRevealTransitionEnd;
+
+  this.transition({
+    from: options.hiddenStyle,
+    to: options.visibleStyle,
+    isCleaning: true,
+    onTransitionEnd: onTransitionEnd
+  });
+};
+
+proto.onRevealTransitionEnd = function() {
+  // check if still visible
+  // during transition, item may have been hidden
+  if ( !this.isHidden ) {
+    this.emitEvent('reveal');
+  }
+};
+
+/**
+ * get style property use for hide/reveal transition end
+ * @param {String} styleProperty - hiddenStyle/visibleStyle
+ * @returns {String}
+ */
+proto.getHideRevealTransitionEndProperty = function( styleProperty ) {
+  var optionStyle = this.layout.options[ styleProperty ];
+  // use opacity
+  if ( optionStyle.opacity ) {
+    return 'opacity';
+  }
+  // get first property
+  for ( var prop in optionStyle ) {
+    return prop;
+  }
+};
+
+proto.hide = function() {
+  // set flag
+  this.isHidden = true;
+  // remove display: none
+  this.css({ display: '' });
+
+  var options = this.layout.options;
+
+  var onTransitionEnd = {};
+  var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle');
+  onTransitionEnd[ transitionEndProperty ] = this.onHideTransitionEnd;
+
+  this.transition({
+    from: options.visibleStyle,
+    to: options.hiddenStyle,
+    // keep hidden stuff hidden
+    isCleaning: true,
+    onTransitionEnd: onTransitionEnd
+  });
+};
+
+proto.onHideTransitionEnd = function() {
+  // check if still hidden
+  // during transition, item may have been un-hidden
+  if ( this.isHidden ) {
+    this.css({ display: 'none' });
+    this.emitEvent('hide');
+  }
+};
+
+proto.destroy = function() {
+  this.css({
+    position: '',
+    left: '',
+    right: '',
+    top: '',
+    bottom: '',
+    transition: '',
+    transform: ''
+  });
+};
+
+return Item;
+
+}));
+
+/*!
+ * Outlayer v2.1.0
+ * the brains and guts of a layout library
+ * MIT license
+ */
+
+( function( window, factory ) {
+  'use strict';
+  // universal module definition
+  /* jshint strict: false */ /* globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD - RequireJS
+    define( 'outlayer/outlayer',[
+        'ev-emitter/ev-emitter',
+        'get-size/get-size',
+        'fizzy-ui-utils/utils',
+        './item'
+      ],
+      function( EvEmitter, getSize, utils, Item ) {
+        return factory( window, EvEmitter, getSize, utils, Item);
+      }
+    );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS - Browserify, Webpack
+    module.exports = factory(
+      window,
+      require('ev-emitter'),
+      require('get-size'),
+      require('fizzy-ui-utils'),
+      require('./item')
+    );
+  } else {
+    // browser global
+    window.Outlayer = factory(
+      window,
+      window.EvEmitter,
+      window.getSize,
+      window.fizzyUIUtils,
+      window.Outlayer.Item
+    );
+  }
+
+}( window, function factory( window, EvEmitter, getSize, utils, Item ) {
+'use strict';
+
+// ----- vars ----- //
+
+var console = window.console;
+var jQuery = window.jQuery;
+var noop = function() {};
+
+// -------------------------- Outlayer -------------------------- //
+
+// globally unique identifiers
+var GUID = 0;
+// internal store of all Outlayer intances
+var instances = {};
+
+
+/**
+ * @param {Element, String} element
+ * @param {Object} options
+ * @constructor
+ */
+function Outlayer( element, options ) {
+  var queryElement = utils.getQueryElement( element );
+  if ( !queryElement ) {
+    if ( console ) {
+      console.error( 'Bad element for ' + this.constructor.namespace +
+        ': ' + ( queryElement || element ) );
+    }
+    return;
+  }
+  this.element = queryElement;
+  // add jQuery
+  if ( jQuery ) {
+    this.$element = jQuery( this.element );
+  }
+
+  // options
+  this.options = utils.extend( {}, this.constructor.defaults );
+  this.option( options );
+
+  // add id for Outlayer.getFromElement
+  var id = ++GUID;
+  this.element.outlayerGUID = id; // expando
+  instances[ id ] = this; // associate via id
+
+  // kick it off
+  this._create();
+
+  var isInitLayout = this._getOption('initLayout');
+  if ( isInitLayout ) {
+    this.layout();
+  }
+}
+
+// settings are for internal use only
+Outlayer.namespace = 'outlayer';
+Outlayer.Item = Item;
+
+// default options
+Outlayer.defaults = {
+  containerStyle: {
+    position: 'relative'
+  },
+  initLayout: true,
+  originLeft: true,
+  originTop: true,
+  resize: true,
+  resizeContainer: true,
+  // item options
+  transitionDuration: '0.4s',
+  hiddenStyle: {
+    opacity: 0,
+    transform: 'scale(0.001)'
+  },
+  visibleStyle: {
+    opacity: 1,
+    transform: 'scale(1)'
+  }
+};
+
+var proto = Outlayer.prototype;
+// inherit EvEmitter
+utils.extend( proto, EvEmitter.prototype );
+
+/**
+ * set options
+ * @param {Object} opts
+ */
+proto.option = function( opts ) {
+  utils.extend( this.options, opts );
+};
+
+/**
+ * get backwards compatible option value, check old name
+ */
+proto._getOption = function( option ) {
+  var oldOption = this.constructor.compatOptions[ option ];
+  return oldOption && this.options[ oldOption ] !== undefined ?
+    this.options[ oldOption ] : this.options[ option ];
+};
+
+Outlayer.compatOptions = {
+  // currentName: oldName
+  initLayout: 'isInitLayout',
+  horizontal: 'isHorizontal',
+  layoutInstant: 'isLayoutInstant',
+  originLeft: 'isOriginLeft',
+  originTop: 'isOriginTop',
+  resize: 'isResizeBound',
+  resizeContainer: 'isResizingContainer'
+};
+
+proto._create = function() {
+  // get items from children
+  this.reloadItems();
+  // elements that affect layout, but are not laid out
+  this.stamps = [];
+  this.stamp( this.options.stamp );
+  // set container style
+  utils.extend( this.element.style, this.options.containerStyle );
+
+  // bind resize method
+  var canBindResize = this._getOption('resize');
+  if ( canBindResize ) {
+    this.bindResize();
+  }
+};
+
+// goes through all children again and gets bricks in proper order
+proto.reloadItems = function() {
+  // collection of item elements
+  this.items = this._itemize( this.element.children );
+};
+
+
+/**
+ * turn elements into Outlayer.Items to be used in layout
+ * @param {Array or NodeList or HTMLElement} elems
+ * @returns {Array} items - collection of new Outlayer Items
+ */
+proto._itemize = function( elems ) {
+
+  var itemElems = this._filterFindItemElements( elems );
+  var Item = this.constructor.Item;
+
+  // create new Outlayer Items for collection
+  var items = [];
+  for ( var i=0; i < itemElems.length; i++ ) {
+    var elem = itemElems[i];
+    var item = new Item( elem, this );
+    items.push( item );
+  }
+
+  return items;
+};
+
+/**
+ * get item elements to be used in layout
+ * @param {Array or NodeList or HTMLElement} elems
+ * @returns {Array} items - item elements
+ */
+proto._filterFindItemElements = function( elems ) {
+  return utils.filterFindElements( elems, this.options.itemSelector );
+};
+
+/**
+ * getter method for getting item elements
+ * @returns {Array} elems - collection of item elements
+ */
+proto.getItemElements = function() {
+  return this.items.map( function( item ) {
+    return item.element;
+  });
+};
+
+// ----- init & layout ----- //
+
+/**
+ * lays out all items
+ */
+proto.layout = function() {
+  this._resetLayout();
+  this._manageStamps();
+
+  // don't animate first layout
+  var layoutInstant = this._getOption('layoutInstant');
+  var isInstant = layoutInstant !== undefined ?
+    layoutInstant : !this._isLayoutInited;
+  this.layoutItems( this.items, isInstant );
+
+  // flag for initalized
+  this._isLayoutInited = true;
+};
+
+// _init is alias for layout
+proto._init = proto.layout;
+
+/**
+ * logic before any new layout
+ */
+proto._resetLayout = function() {
+  this.getSize();
+};
+
+
+proto.getSize = function() {
+  this.size = getSize( this.element );
+};
+
+/**
+ * get measurement from option, for columnWidth, rowHeight, gutter
+ * if option is String -> get element from selector string, & get size of element
+ * if option is Element -> get size of element
+ * else use option as a number
+ *
+ * @param {String} measurement
+ * @param {String} size - width or height
+ * @private
+ */
+proto._getMeasurement = function( measurement, size ) {
+  var option = this.options[ measurement ];
+  var elem;
+  if ( !option ) {
+    // default to 0
+    this[ measurement ] = 0;
+  } else {
+    // use option as an element
+    if ( typeof option == 'string' ) {
+      elem = this.element.querySelector( option );
+    } else if ( option instanceof HTMLElement ) {
+      elem = option;
+    }
+    // use size of element, if element
+    this[ measurement ] = elem ? getSize( elem )[ size ] : option;
+  }
+};
+
+/**
+ * layout a collection of item elements
+ * @api public
+ */
+proto.layoutItems = function( items, isInstant ) {
+  items = this._getItemsForLayout( items );
+
+  this._layoutItems( items, isInstant );
+
+  this._postLayout();
+};
+
+/**
+ * get the items to be laid out
+ * you may want to skip over some items
+ * @param {Array} items
+ * @returns {Array} items
+ */
+proto._getItemsForLayout = function( items ) {
+  return items.filter( function( item ) {
+    return !item.isIgnored;
+  });
+};
+
+/**
+ * layout items
+ * @param {Array} items
+ * @param {Boolean} isInstant
+ */
+proto._layoutItems = function( items, isInstant ) {
+  this._emitCompleteOnItems( 'layout', items );
+
+  if ( !items || !items.length ) {
+    // no items, emit event with empty array
+    return;
+  }
+
+  var queue = [];
+
+  items.forEach( function( item ) {
+    // get x/y object from method
+    var position = this._getItemLayoutPosition( item );
+    // enqueue
+    position.item = item;
+    position.isInstant = isInstant || item.isLayoutInstant;
+    queue.push( position );
+  }, this );
+
+  this._processLayoutQueue( queue );
+};
+
+/**
+ * get item layout position
+ * @param {Outlayer.Item} item
+ * @returns {Object} x and y position
+ */
+proto._getItemLayoutPosition = function( /* item */ ) {
+  return {
+    x: 0,
+    y: 0
+  };
+};
+
+/**
+ * iterate over array and position each item
+ * Reason being - separating this logic prevents 'layout invalidation'
+ * thx @paul_irish
+ * @param {Array} queue
+ */
+proto._processLayoutQueue = function( queue ) {
+  this.updateStagger();
+  queue.forEach( function( obj, i ) {
+    this._positionItem( obj.item, obj.x, obj.y, obj.isInstant, i );
+  }, this );
+};
+
+// set stagger from option in milliseconds number
+proto.updateStagger = function() {
+  var stagger = this.options.stagger;
+  if ( stagger === null || stagger === undefined ) {
+    this.stagger = 0;
+    return;
+  }
+  this.stagger = getMilliseconds( stagger );
+  return this.stagger;
+};
+
+/**
+ * Sets position of item in DOM
+ * @param {Outlayer.Item} item
+ * @param {Number} x - horizontal position
+ * @param {Number} y - vertical position
+ * @param {Boolean} isInstant - disables transitions
+ */
+proto._positionItem = function( item, x, y, isInstant, i ) {
+  if ( isInstant ) {
+    // if not transition, just set CSS
+    item.goTo( x, y );
+  } else {
+    item.stagger( i * this.stagger );
+    item.moveTo( x, y );
+  }
+};
+
+/**
+ * Any logic you want to do after each layout,
+ * i.e. size the container
+ */
+proto._postLayout = function() {
+  this.resizeContainer();
+};
+
+proto.resizeContainer = function() {
+  var isResizingContainer = this._getOption('resizeContainer');
+  if ( !isResizingContainer ) {
+    return;
+  }
+  var size = this._getContainerSize();
+  if ( size ) {
+    this._setContainerMeasure( size.width, true );
+    this._setContainerMeasure( size.height, false );
+  }
+};
+
+/**
+ * Sets width or height of container if returned
+ * @returns {Object} size
+ *   @param {Number} width
+ *   @param {Number} height
+ */
+proto._getContainerSize = noop;
+
+/**
+ * @param {Number} measure - size of width or height
+ * @param {Boolean} isWidth
+ */
+proto._setContainerMeasure = function( measure, isWidth ) {
+  if ( measure === undefined ) {
+    return;
+  }
+
+  var elemSize = this.size;
+  // add padding and border width if border box
+  if ( elemSize.isBorderBox ) {
+    measure += isWidth ? elemSize.paddingLeft + elemSize.paddingRight +
+      elemSize.borderLeftWidth + elemSize.borderRightWidth :
+      elemSize.paddingBottom + elemSize.paddingTop +
+      elemSize.borderTopWidth + elemSize.borderBottomWidth;
+  }
+
+  measure = Math.max( measure, 0 );
+  this.element.style[ isWidth ? 'width' : 'height' ] = measure + 'px';
+};
+
+/**
+ * emit eventComplete on a collection of items events
+ * @param {String} eventName
+ * @param {Array} items - Outlayer.Items
+ */
+proto._emitCompleteOnItems = function( eventName, items ) {
+  var _this = this;
+  function onComplete() {
+    _this.dispatchEvent( eventName + 'Complete', null, [ items ] );
+  }
+
+  var count = items.length;
+  if ( !items || !count ) {
+    onComplete();
+    return;
+  }
+
+  var doneCount = 0;
+  function tick() {
+    doneCount++;
+    if ( doneCount == count ) {
+      onComplete();
+    }
+  }
+
+  // bind callback
+  items.forEach( function( item ) {
+    item.once( eventName, tick );
+  });
+};
+
+/**
+ * emits events via EvEmitter and jQuery events
+ * @param {String} type - name of event
+ * @param {Event} event - original event
+ * @param {Array} args - extra arguments
+ */
+proto.dispatchEvent = function( type, event, args ) {
+  // add original event to arguments
+  var emitArgs = event ? [ event ].concat( args ) : args;
+  this.emitEvent( type, emitArgs );
+
+  if ( jQuery ) {
+    // set this.$element
+    this.$element = this.$element || jQuery( this.element );
+    if ( event ) {
+      // create jQuery event
+      var $event = jQuery.Event( event );
+      $event.type = type;
+      this.$element.trigger( $event, args );
+    } else {
+      // just trigger with type if no event available
+      this.$element.trigger( type, args );
+    }
+  }
+};
+
+// -------------------------- ignore & stamps -------------------------- //
+
+
+/**
+ * keep item in collection, but do not lay it out
+ * ignored items do not get skipped in layout
+ * @param {Element} elem
+ */
+proto.ignore = function( elem ) {
+  var item = this.getItem( elem );
+  if ( item ) {
+    item.isIgnored = true;
+  }
+};
+
+/**
+ * return item to layout collection
+ * @param {Element} elem
+ */
+proto.unignore = function( elem ) {
+  var item = this.getItem( elem );
+  if ( item ) {
+    delete item.isIgnored;
+  }
+};
+
+/**
+ * adds elements to stamps
+ * @param {NodeList, Array, Element, or String} elems
+ */
+proto.stamp = function( elems ) {
+  elems = this._find( elems );
+  if ( !elems ) {
+    return;
+  }
+
+  this.stamps = this.stamps.concat( elems );
+  // ignore
+  elems.forEach( this.ignore, this );
+};
+
+/**
+ * removes elements to stamps
+ * @param {NodeList, Array, or Element} elems
+ */
+proto.unstamp = function( elems ) {
+  elems = this._find( elems );
+  if ( !elems ){
+    return;
+  }
+
+  elems.forEach( function( elem ) {
+    // filter out removed stamp elements
+    utils.removeFrom( this.stamps, elem );
+    this.unignore( elem );
+  }, this );
+};
+
+/**
+ * finds child elements
+ * @param {NodeList, Array, Element, or String} elems
+ * @returns {Array} elems
+ */
+proto._find = function( elems ) {
+  if ( !elems ) {
+    return;
+  }
+  // if string, use argument as selector string
+  if ( typeof elems == 'string' ) {
+    elems = this.element.querySelectorAll( elems );
+  }
+  elems = utils.makeArray( elems );
+  return elems;
+};
+
+proto._manageStamps = function() {
+  if ( !this.stamps || !this.stamps.length ) {
+    return;
+  }
+
+  this._getBoundingRect();
+
+  this.stamps.forEach( this._manageStamp, this );
+};
+
+// update boundingLeft / Top
+proto._getBoundingRect = function() {
+  // get bounding rect for container element
+  var boundingRect = this.element.getBoundingClientRect();
+  var size = this.size;
+  this._boundingRect = {
+    left: boundingRect.left + size.paddingLeft + size.borderLeftWidth,
+    top: boundingRect.top + size.paddingTop + size.borderTopWidth,
+    right: boundingRect.right - ( size.paddingRight + size.borderRightWidth ),
+    bottom: boundingRect.bottom - ( size.paddingBottom + size.borderBottomWidth )
+  };
+};
+
+/**
+ * @param {Element} stamp
+**/
+proto._manageStamp = noop;
+
+/**
+ * get x/y position of element relative to container element
+ * @param {Element} elem
+ * @returns {Object} offset - has left, top, right, bottom
+ */
+proto._getElementOffset = function( elem ) {
+  var boundingRect = elem.getBoundingClientRect();
+  var thisRect = this._boundingRect;
+  var size = getSize( elem );
+  var offset = {
+    left: boundingRect.left - thisRect.left - size.marginLeft,
+    top: boundingRect.top - thisRect.top - size.marginTop,
+    right: thisRect.right - boundingRect.right - size.marginRight,
+    bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom
+  };
+  return offset;
+};
+
+// -------------------------- resize -------------------------- //
+
+// enable event handlers for listeners
+// i.e. resize -> onresize
+proto.handleEvent = utils.handleEvent;
+
+/**
+ * Bind layout to window resizing
+ */
+proto.bindResize = function() {
+  window.addEventListener( 'resize', this );
+  this.isResizeBound = true;
+};
+
+/**
+ * Unbind layout to window resizing
+ */
+proto.unbindResize = function() {
+  window.removeEventListener( 'resize', this );
+  this.isResizeBound = false;
+};
+
+proto.onresize = function() {
+  this.resize();
+};
+
+utils.debounceMethod( Outlayer, 'onresize', 100 );
+
+proto.resize = function() {
+  // don't trigger if size did not change
+  // or if resize was unbound. See #9
+  if ( !this.isResizeBound || !this.needsResizeLayout() ) {
+    return;
+  }
+
+  this.layout();
+};
+
+/**
+ * check if layout is needed post layout
+ * @returns Boolean
+ */
+proto.needsResizeLayout = function() {
+  var size = getSize( this.element );
+  // check that this.size and size are there
+  // IE8 triggers resize on body size change, so they might not be
+  var hasSizes = this.size && size;
+  return hasSizes && size.innerWidth !== this.size.innerWidth;
+};
+
+// -------------------------- methods -------------------------- //
+
+/**
+ * add items to Outlayer instance
+ * @param {Array or NodeList or Element} elems
+ * @returns {Array} items - Outlayer.Items
+**/
+proto.addItems = function( elems ) {
+  var items = this._itemize( elems );
+  // add items to collection
+  if ( items.length ) {
+    this.items = this.items.concat( items );
+  }
+  return items;
+};
+
+/**
+ * Layout newly-appended item elements
+ * @param {Array or NodeList or Element} elems
+ */
+proto.appended = function( elems ) {
+  var items = this.addItems( elems );
+  if ( !items.length ) {
+    return;
+  }
+  // layout and reveal just the new items
+  this.layoutItems( items, true );
+  this.reveal( items );
+};
+
+/**
+ * Layout prepended elements
+ * @param {Array or NodeList or Element} elems
+ */
+proto.prepended = function( elems ) {
+  var items = this._itemize( elems );
+  if ( !items.length ) {
+    return;
+  }
+  // add items to beginning of collection
+  var previousItems = this.items.slice(0);
+  this.items = items.concat( previousItems );
+  // start new layout
+  this._resetLayout();
+  this._manageStamps();
+  // layout new stuff without transition
+  this.layoutItems( items, true );
+  this.reveal( items );
+  // layout previous items
+  this.layoutItems( previousItems );
+};
+
+/**
+ * reveal a collection of items
+ * @param {Array of Outlayer.Items} items
+ */
+proto.reveal = function( items ) {
+  this._emitCompleteOnItems( 'reveal', items );
+  if ( !items || !items.length ) {
+    return;
+  }
+  var stagger = this.updateStagger();
+  items.forEach( function( item, i ) {
+    item.stagger( i * stagger );
+    item.reveal();
+  });
+};
+
+/**
+ * hide a collection of items
+ * @param {Array of Outlayer.Items} items
+ */
+proto.hide = function( items ) {
+  this._emitCompleteOnItems( 'hide', items );
+  if ( !items || !items.length ) {
+    return;
+  }
+  var stagger = this.updateStagger();
+  items.forEach( function( item, i ) {
+    item.stagger( i * stagger );
+    item.hide();
+  });
+};
+
+/**
+ * reveal item elements
+ * @param {Array}, {Element}, {NodeList} items
+ */
+proto.revealItemElements = function( elems ) {
+  var items = this.getItems( elems );
+  this.reveal( items );
+};
+
+/**
+ * hide item elements
+ * @param {Array}, {Element}, {NodeList} items
+ */
+proto.hideItemElements = function( elems ) {
+  var items = this.getItems( elems );
+  this.hide( items );
+};
+
+/**
+ * get Outlayer.Item, given an Element
+ * @param {Element} elem
+ * @param {Function} callback
+ * @returns {Outlayer.Item} item
+ */
+proto.getItem = function( elem ) {
+  // loop through items to get the one that matches
+  for ( var i=0; i < this.items.length; i++ ) {
+    var item = this.items[i];
+    if ( item.element == elem ) {
+      // return item
+      return item;
+    }
+  }
+};
+
+/**
+ * get collection of Outlayer.Items, given Elements
+ * @param {Array} elems
+ * @returns {Array} items - Outlayer.Items
+ */
+proto.getItems = function( elems ) {
+  elems = utils.makeArray( elems );
+  var items = [];
+  elems.forEach( function( elem ) {
+    var item = this.getItem( elem );
+    if ( item ) {
+      items.push( item );
+    }
+  }, this );
+
+  return items;
+};
+
+/**
+ * remove element(s) from instance and DOM
+ * @param {Array or NodeList or Element} elems
+ */
+proto.remove = function( elems ) {
+  var removeItems = this.getItems( elems );
+
+  this._emitCompleteOnItems( 'remove', removeItems );
+
+  // bail if no items to remove
+  if ( !removeItems || !removeItems.length ) {
+    return;
+  }
+
+  removeItems.forEach( function( item ) {
+    item.remove();
+    // remove item from collection
+    utils.removeFrom( this.items, item );
+  }, this );
+};
+
+// ----- destroy ----- //
+
+// remove and disable Outlayer instance
+proto.destroy = function() {
+  // clean up dynamic styles
+  var style = this.element.style;
+  style.height = '';
+  style.position = '';
+  style.width = '';
+  // destroy items
+  this.items.forEach( function( item ) {
+    item.destroy();
+  });
+
+  this.unbindResize();
+
+  var id = this.element.outlayerGUID;
+  delete instances[ id ]; // remove reference to instance by id
+  delete this.element.outlayerGUID;
+  // remove data for jQuery
+  if ( jQuery ) {
+    jQuery.removeData( this.element, this.constructor.namespace );
+  }
+
+};
+
+// -------------------------- data -------------------------- //
+
+/**
+ * get Outlayer instance from element
+ * @param {Element} elem
+ * @returns {Outlayer}
+ */
+Outlayer.data = function( elem ) {
+  elem = utils.getQueryElement( elem );
+  var id = elem && elem.outlayerGUID;
+  return id && instances[ id ];
+};
+
+
+// -------------------------- create Outlayer class -------------------------- //
+
+/**
+ * create a layout class
+ * @param {String} namespace
+ */
+Outlayer.create = function( namespace, options ) {
+  // sub-class Outlayer
+  var Layout = subclass( Outlayer );
+  // apply new options and compatOptions
+  Layout.defaults = utils.extend( {}, Outlayer.defaults );
+  utils.extend( Layout.defaults, options );
+  Layout.compatOptions = utils.extend( {}, Outlayer.compatOptions  );
+
+  Layout.namespace = namespace;
+
+  Layout.data = Outlayer.data;
+
+  // sub-class Item
+  Layout.Item = subclass( Item );
+
+  // -------------------------- declarative -------------------------- //
+
+  utils.htmlInit( Layout, namespace );
+
+  // -------------------------- jQuery bridge -------------------------- //
+
+  // make into jQuery plugin
+  if ( jQuery && jQuery.bridget ) {
+    jQuery.bridget( namespace, Layout );
+  }
+
+  return Layout;
+};
+
+function subclass( Parent ) {
+  function SubClass() {
+    Parent.apply( this, arguments );
+  }
+
+  SubClass.prototype = Object.create( Parent.prototype );
+  SubClass.prototype.constructor = SubClass;
+
+  return SubClass;
+}
+
+// ----- helpers ----- //
+
+// how many milliseconds are in each unit
+var msUnits = {
+  ms: 1,
+  s: 1000
+};
+
+// munge time-like parameter into millisecond number
+// '0.4s' -> 40
+function getMilliseconds( time ) {
+  if ( typeof time == 'number' ) {
+    return time;
+  }
+  var matches = time.match( /(^\d*\.?\d*)(\w*)/ );
+  var num = matches && matches[1];
+  var unit = matches && matches[2];
+  if ( !num.length ) {
+    return 0;
+  }
+  num = parseFloat( num );
+  var mult = msUnits[ unit ] || 1;
+  return num * mult;
+}
+
+// ----- fin ----- //
+
+// back in global
+Outlayer.Item = Item;
+
+return Outlayer;
+
+}));
+
+/**
+ * Isotope Item
+**/
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /*globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'isotope/js/item',[
+        'outlayer/outlayer'
+      ],
+      factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      require('outlayer')
+    );
+  } else {
+    // browser global
+    window.Isotope = window.Isotope || {};
+    window.Isotope.Item = factory(
+      window.Outlayer
+    );
+  }
+
+}( window, function factory( Outlayer ) {
+'use strict';
+
+// -------------------------- Item -------------------------- //
+
+// sub-class Outlayer Item
+function Item() {
+  Outlayer.Item.apply( this, arguments );
+}
+
+var proto = Item.prototype = Object.create( Outlayer.Item.prototype );
+
+var _create = proto._create;
+proto._create = function() {
+  // assign id, used for original-order sorting
+  this.id = this.layout.itemGUID++;
+  _create.call( this );
+  this.sortData = {};
+};
+
+proto.updateSortData = function() {
+  if ( this.isIgnored ) {
+    return;
+  }
+  // default sorters
+  this.sortData.id = this.id;
+  // for backward compatibility
+  this.sortData['original-order'] = this.id;
+  this.sortData.random = Math.random();
+  // go thru getSortData obj and apply the sorters
+  var getSortData = this.layout.options.getSortData;
+  var sorters = this.layout._sorters;
+  for ( var key in getSortData ) {
+    var sorter = sorters[ key ];
+    this.sortData[ key ] = sorter( this.element, this );
+  }
+};
+
+var _destroy = proto.destroy;
+proto.destroy = function() {
+  // call super
+  _destroy.apply( this, arguments );
+  // reset display, #741
+  this.css({
+    display: ''
+  });
+};
+
+return Item;
+
+}));
+
+/**
+ * Isotope LayoutMode
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /*globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'isotope/js/layout-mode',[
+        'get-size/get-size',
+        'outlayer/outlayer'
+      ],
+      factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      require('get-size'),
+      require('outlayer')
+    );
+  } else {
+    // browser global
+    window.Isotope = window.Isotope || {};
+    window.Isotope.LayoutMode = factory(
+      window.getSize,
+      window.Outlayer
+    );
+  }
+
+}( window, function factory( getSize, Outlayer ) {
+  'use strict';
+
+  // layout mode class
+  function LayoutMode( isotope ) {
+    this.isotope = isotope;
+    // link properties
+    if ( isotope ) {
+      this.options = isotope.options[ this.namespace ];
+      this.element = isotope.element;
+      this.items = isotope.filteredItems;
+      this.size = isotope.size;
+    }
+  }
+
+  var proto = LayoutMode.prototype;
+
+  /**
+   * some methods should just defer to default Outlayer method
+   * and reference the Isotope instance as `this`
+  **/
+  var facadeMethods = [
+    '_resetLayout',
+    '_getItemLayoutPosition',
+    '_manageStamp',
+    '_getContainerSize',
+    '_getElementOffset',
+    'needsResizeLayout',
+    '_getOption'
+  ];
+
+  facadeMethods.forEach( function( methodName ) {
+    proto[ methodName ] = function() {
+      return Outlayer.prototype[ methodName ].apply( this.isotope, arguments );
+    };
+  });
+
+  // -----  ----- //
+
+  // for horizontal layout modes, check vertical size
+  proto.needsVerticalResizeLayout = function() {
+    // don't trigger if size did not change
+    var size = getSize( this.isotope.element );
+    // check that this.size and size are there
+    // IE8 triggers resize on body size change, so they might not be
+    var hasSizes = this.isotope.size && size;
+    return hasSizes && size.innerHeight != this.isotope.size.innerHeight;
+  };
+
+  // ----- measurements ----- //
+
+  proto._getMeasurement = function() {
+    this.isotope._getMeasurement.apply( this, arguments );
+  };
+
+  proto.getColumnWidth = function() {
+    this.getSegmentSize( 'column', 'Width' );
+  };
+
+  proto.getRowHeight = function() {
+    this.getSegmentSize( 'row', 'Height' );
+  };
+
+  /**
+   * get columnWidth or rowHeight
+   * segment: 'column' or 'row'
+   * size 'Width' or 'Height'
+  **/
+  proto.getSegmentSize = function( segment, size ) {
+    var segmentName = segment + size;
+    var outerSize = 'outer' + size;
+    // columnWidth / outerWidth // rowHeight / outerHeight
+    this._getMeasurement( segmentName, outerSize );
+    // got rowHeight or columnWidth, we can chill
+    if ( this[ segmentName ] ) {
+      return;
+    }
+    // fall back to item of first element
+    var firstItemSize = this.getFirstItemSize();
+    this[ segmentName ] = firstItemSize && firstItemSize[ outerSize ] ||
+      // or size of container
+      this.isotope.size[ 'inner' + size ];
+  };
+
+  proto.getFirstItemSize = function() {
+    var firstItem = this.isotope.filteredItems[0];
+    return firstItem && firstItem.element && getSize( firstItem.element );
+  };
+
+  // ----- methods that should reference isotope ----- //
+
+  proto.layout = function() {
+    this.isotope.layout.apply( this.isotope, arguments );
+  };
+
+  proto.getSize = function() {
+    this.isotope.getSize();
+    this.size = this.isotope.size;
+  };
+
+  // -------------------------- create -------------------------- //
+
+  LayoutMode.modes = {};
+
+  LayoutMode.create = function( namespace, options ) {
+
+    function Mode() {
+      LayoutMode.apply( this, arguments );
+    }
+
+    Mode.prototype = Object.create( proto );
+    Mode.prototype.constructor = Mode;
+
+    // default options
+    if ( options ) {
+      Mode.options = options;
+    }
+
+    Mode.prototype.namespace = namespace;
+    // register in Isotope
+    LayoutMode.modes[ namespace ] = Mode;
+
+    return Mode;
+  };
+
+  return LayoutMode;
+
+}));
+
+/*!
+ * Masonry v4.1.0
+ * Cascading grid layout library
+ * http://masonry.desandro.com
+ * MIT License
+ * by David DeSandro
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /*globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'masonry/masonry',[
+        'outlayer/outlayer',
+        'get-size/get-size'
+      ],
+      factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      require('outlayer'),
+      require('get-size')
+    );
+  } else {
+    // browser global
+    window.Masonry = factory(
+      window.Outlayer,
+      window.getSize
+    );
+  }
+
+}( window, function factory( Outlayer, getSize ) {
+
+
+
+// -------------------------- masonryDefinition -------------------------- //
+
+  // create an Outlayer layout class
+  var Masonry = Outlayer.create('masonry');
+  // isFitWidth -> fitWidth
+  Masonry.compatOptions.fitWidth = 'isFitWidth';
+
+  Masonry.prototype._resetLayout = function() {
+    this.getSize();
+    this._getMeasurement( 'columnWidth', 'outerWidth' );
+    this._getMeasurement( 'gutter', 'outerWidth' );
+    this.measureColumns();
+
+    // reset column Y
+    this.colYs = [];
+    for ( var i=0; i < this.cols; i++ ) {
+      this.colYs.push( 0 );
+    }
+
+    this.maxY = 0;
+  };
+
+  Masonry.prototype.measureColumns = function() {
+    this.getContainerWidth();
+    // if columnWidth is 0, default to outerWidth of first item
+    if ( !this.columnWidth ) {
+      var firstItem = this.items[0];
+      var firstItemElem = firstItem && firstItem.element;
+      // columnWidth fall back to item of first element
+      this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
+        // if first elem has no width, default to size of container
+        this.containerWidth;
+    }
+
+    var columnWidth = this.columnWidth += this.gutter;
+
+    // calculate columns
+    var containerWidth = this.containerWidth + this.gutter;
+    var cols = containerWidth / columnWidth;
+    // fix rounding errors, typically with gutters
+    var excess = columnWidth - containerWidth % columnWidth;
+    // if overshoot is less than a pixel, round up, otherwise floor it
+    var mathMethod = excess && excess < 1 ? 'round' : 'floor';
+    cols = Math[ mathMethod ]( cols );
+    this.cols = Math.max( cols, 1 );
+  };
+
+  Masonry.prototype.getContainerWidth = function() {
+    // container is parent if fit width
+    var isFitWidth = this._getOption('fitWidth');
+    var container = isFitWidth ? this.element.parentNode : this.element;
+    // check that this.size and size are there
+    // IE8 triggers resize on body size change, so they might not be
+    var size = getSize( container );
+    this.containerWidth = size && size.innerWidth;
+  };
+
+  Masonry.prototype._getItemLayoutPosition = function( item ) {
+    item.getSize();
+    // how many columns does this brick span
+    var remainder = item.size.outerWidth % this.columnWidth;
+    var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
+    // round if off by 1 pixel, otherwise use ceil
+    var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
+    colSpan = Math.min( colSpan, this.cols );
+
+    var colGroup = this._getColGroup( colSpan );
+    // get the minimum Y value from the columns
+    var minimumY = Math.min.apply( Math, colGroup );
+    var shortColIndex = colGroup.indexOf( minimumY );
+
+    // position the brick
+    var position = {
+      x: this.columnWidth * shortColIndex,
+      y: minimumY
+    };
+
+    // apply setHeight to necessary columns
+    var setHeight = minimumY + item.size.outerHeight;
+    var setSpan = this.cols + 1 - colGroup.length;
+    for ( var i = 0; i < setSpan; i++ ) {
+      this.colYs[ shortColIndex + i ] = setHeight;
+    }
+
+    return position;
+  };
+
+  /**
+   * @param {Number} colSpan - number of columns the element spans
+   * @returns {Array} colGroup
+   */
+  Masonry.prototype._getColGroup = function( colSpan ) {
+    if ( colSpan < 2 ) {
+      // if brick spans only one column, use all the column Ys
+      return this.colYs;
+    }
+
+    var colGroup = [];
+    // how many different places could this brick fit horizontally
+    var groupCount = this.cols + 1 - colSpan;
+    // for each group potential horizontal position
+    for ( var i = 0; i < groupCount; i++ ) {
+      // make an array of colY values for that one group
+      var groupColYs = this.colYs.slice( i, i + colSpan );
+      // and get the max value of the array
+      colGroup[i] = Math.max.apply( Math, groupColYs );
+    }
+    return colGroup;
+  };
+
+  Masonry.prototype._manageStamp = function( stamp ) {
+    var stampSize = getSize( stamp );
+    var offset = this._getElementOffset( stamp );
+    // get the columns that this stamp affects
+    var isOriginLeft = this._getOption('originLeft');
+    var firstX = isOriginLeft ? offset.left : offset.right;
+    var lastX = firstX + stampSize.outerWidth;
+    var firstCol = Math.floor( firstX / this.columnWidth );
+    firstCol = Math.max( 0, firstCol );
+    var lastCol = Math.floor( lastX / this.columnWidth );
+    // lastCol should not go over if multiple of columnWidth #425
+    lastCol -= lastX % this.columnWidth ? 0 : 1;
+    lastCol = Math.min( this.cols - 1, lastCol );
+    // set colYs to bottom of the stamp
+
+    var isOriginTop = this._getOption('originTop');
+    var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) +
+      stampSize.outerHeight;
+    for ( var i = firstCol; i <= lastCol; i++ ) {
+      this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
+    }
+  };
+
+  Masonry.prototype._getContainerSize = function() {
+    this.maxY = Math.max.apply( Math, this.colYs );
+    var size = {
+      height: this.maxY
+    };
+
+    if ( this._getOption('fitWidth') ) {
+      size.width = this._getContainerFitWidth();
+    }
+
+    return size;
+  };
+
+  Masonry.prototype._getContainerFitWidth = function() {
+    var unusedCols = 0;
+    // count unused columns
+    var i = this.cols;
+    while ( --i ) {
+      if ( this.colYs[i] !== 0 ) {
+        break;
+      }
+      unusedCols++;
+    }
+    // fit container to columns that have been used
+    return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
+  };
+
+  Masonry.prototype.needsResizeLayout = function() {
+    var previousWidth = this.containerWidth;
+    this.getContainerWidth();
+    return previousWidth != this.containerWidth;
+  };
+
+  return Masonry;
+
+}));
+
+/*!
+ * Masonry layout mode
+ * sub-classes Masonry
+ * http://masonry.desandro.com
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /*globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'isotope/js/layout-modes/masonry',[
+        '../layout-mode',
+        'masonry/masonry'
+      ],
+      factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      require('../layout-mode'),
+      require('masonry-layout')
+    );
+  } else {
+    // browser global
+    factory(
+      window.Isotope.LayoutMode,
+      window.Masonry
+    );
+  }
+
+}( window, function factory( LayoutMode, Masonry ) {
+'use strict';
+
+// -------------------------- masonryDefinition -------------------------- //
+
+  // create an Outlayer layout class
+  var MasonryMode = LayoutMode.create('masonry');
+
+  var proto = MasonryMode.prototype;
+
+  var keepModeMethods = {
+    _getElementOffset: true,
+    layout: true,
+    _getMeasurement: true
+  };
+
+  // inherit Masonry prototype
+  for ( var method in Masonry.prototype ) {
+    // do not inherit mode methods
+    if ( !keepModeMethods[ method ] ) {
+      proto[ method ] = Masonry.prototype[ method ];
+    }
+  }
+
+  var measureColumns = proto.measureColumns;
+  proto.measureColumns = function() {
+    // set items, used if measuring first item
+    this.items = this.isotope.filteredItems;
+    measureColumns.call( this );
+  };
+
+  // point to mode options for fitWidth
+  var _getOption = proto._getOption;
+  proto._getOption = function( option ) {
+    if ( option == 'fitWidth' ) {
+      return this.options.isFitWidth !== undefined ?
+        this.options.isFitWidth : this.options.fitWidth;
+    }
+    return _getOption.apply( this.isotope, arguments );
+  };
+
+  return MasonryMode;
+
+}));
+
+/**
+ * fitRows layout mode
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /*globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'isotope/js/layout-modes/fit-rows',[
+        '../layout-mode'
+      ],
+      factory );
+  } else if ( typeof exports == 'object' ) {
+    // CommonJS
+    module.exports = factory(
+      require('../layout-mode')
+    );
+  } else {
+    // browser global
+    factory(
+      window.Isotope.LayoutMode
+    );
+  }
+
+}( window, function factory( LayoutMode ) {
+'use strict';
+
+var FitRows = LayoutMode.create('fitRows');
+
+var proto = FitRows.prototype;
+
+proto._resetLayout = function() {
+  this.x = 0;
+  this.y = 0;
+  this.maxY = 0;
+  this._getMeasurement( 'gutter', 'outerWidth' );
+};
+
+proto._getItemLayoutPosition = function( item ) {
+  item.getSize();
+
+  var itemWidth = item.size.outerWidth + this.gutter;
+  // if this element cannot fit in the current row
+  var containerWidth = this.isotope.size.innerWidth + this.gutter;
+  if ( this.x !== 0 && itemWidth + this.x > containerWidth ) {
+    this.x = 0;
+    this.y = this.maxY;
+  }
+
+  var position = {
+    x: this.x,
+    y: this.y
+  };
+
+  this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight );
+  this.x += itemWidth;
+
+  return position;
+};
+
+proto._getContainerSize = function() {
+  return { height: this.maxY };
+};
+
+return FitRows;
+
+}));
+
+/**
+ * vertical layout mode
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /*globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( 'isotope/js/layout-modes/vertical',[
+        '../layout-mode'
+      ],
+      factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      require('../layout-mode')
+    );
+  } else {
+    // browser global
+    factory(
+      window.Isotope.LayoutMode
+    );
+  }
+
+}( window, function factory( LayoutMode ) {
+'use strict';
+
+var Vertical = LayoutMode.create( 'vertical', {
+  horizontalAlignment: 0
+});
+
+var proto = Vertical.prototype;
+
+proto._resetLayout = function() {
+  this.y = 0;
+};
+
+proto._getItemLayoutPosition = function( item ) {
+  item.getSize();
+  var x = ( this.isotope.size.innerWidth - item.size.outerWidth ) *
+    this.options.horizontalAlignment;
+  var y = this.y;
+  this.y += item.size.outerHeight;
+  return { x: x, y: y };
+};
+
+proto._getContainerSize = function() {
+  return { height: this.y };
+};
+
+return Vertical;
+
+}));
+
+/*!
+ * Isotope v3.0.1
+ *
+ * Licensed GPLv3 for open source use
+ * or Isotope Commercial License for commercial use
+ *
+ * http://isotope.metafizzy.co
+ * Copyright 2016 Metafizzy
+ */
+
+( function( window, factory ) {
+  // universal module definition
+  /* jshint strict: false */ /*globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( [
+        'outlayer/outlayer',
+        'get-size/get-size',
+        'desandro-matches-selector/matches-selector',
+        'fizzy-ui-utils/utils',
+        'isotope/js/item',
+        'isotope/js/layout-mode',
+        // include default layout modes
+        'isotope/js/layout-modes/masonry',
+        'isotope/js/layout-modes/fit-rows',
+        'isotope/js/layout-modes/vertical'
+      ],
+      function( Outlayer, getSize, matchesSelector, utils, Item, LayoutMode ) {
+        return factory( window, Outlayer, getSize, matchesSelector, utils, Item, LayoutMode );
+      });
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      window,
+      require('outlayer'),
+      require('get-size'),
+      require('desandro-matches-selector'),
+      require('fizzy-ui-utils'),
+      require('isotope/js/item'),
+      require('isotope/js/layout-mode'),
+      // include default layout modes
+      require('isotope/js/layout-modes/masonry'),
+      require('isotope/js/layout-modes/fit-rows'),
+      require('isotope/js/layout-modes/vertical')
+    );
+  } else {
+    // browser global
+    window.Isotope = factory(
+      window,
+      window.Outlayer,
+      window.getSize,
+      window.matchesSelector,
+      window.fizzyUIUtils,
+      window.Isotope.Item,
+      window.Isotope.LayoutMode
+    );
+  }
+
+}( window, function factory( window, Outlayer, getSize, matchesSelector, utils,
+  Item, LayoutMode ) {
+
+
+
+// -------------------------- vars -------------------------- //
+
+var jQuery = window.jQuery;
+
+// -------------------------- helpers -------------------------- //
+
+var trim = String.prototype.trim ?
+  function( str ) {
+    return str.trim();
+  } :
+  function( str ) {
+    return str.replace( /^\s+|\s+$/g, '' );
+  };
+
+// -------------------------- isotopeDefinition -------------------------- //
+
+  // create an Outlayer layout class
+  var Isotope = Outlayer.create( 'isotope', {
+    layoutMode: 'masonry',
+    isJQueryFiltering: true,
+    sortAscending: true
+  });
+
+  Isotope.Item = Item;
+  Isotope.LayoutMode = LayoutMode;
+
+  var proto = Isotope.prototype;
+
+  proto._create = function() {
+    this.itemGUID = 0;
+    // functions that sort items
+    this._sorters = {};
+    this._getSorters();
+    // call super
+    Outlayer.prototype._create.call( this );
+
+    // create layout modes
+    this.modes = {};
+    // start filteredItems with all items
+    this.filteredItems = this.items;
+    // keep of track of sortBys
+    this.sortHistory = [ 'original-order' ];
+    // create from registered layout modes
+    for ( var name in LayoutMode.modes ) {
+      this._initLayoutMode( name );
+    }
+  };
+
+  proto.reloadItems = function() {
+    // reset item ID counter
+    this.itemGUID = 0;
+    // call super
+    Outlayer.prototype.reloadItems.call( this );
+  };
+
+  proto._itemize = function() {
+    var items = Outlayer.prototype._itemize.apply( this, arguments );
+    // assign ID for original-order
+    for ( var i=0; i < items.length; i++ ) {
+      var item = items[i];
+      item.id = this.itemGUID++;
+    }
+    this._updateItemsSortData( items );
+    return items;
+  };
+
+
+  // -------------------------- layout -------------------------- //
+
+  proto._initLayoutMode = function( name ) {
+    var Mode = LayoutMode.modes[ name ];
+    // set mode options
+    // HACK extend initial options, back-fill in default options
+    var initialOpts = this.options[ name ] || {};
+    this.options[ name ] = Mode.options ?
+      utils.extend( Mode.options, initialOpts ) : initialOpts;
+    // init layout mode instance
+    this.modes[ name ] = new Mode( this );
+  };
+
+
+  proto.layout = function() {
+    // if first time doing layout, do all magic
+    if ( !this._isLayoutInited && this._getOption('initLayout') ) {
+      this.arrange();
+      return;
+    }
+    this._layout();
+  };
+
+  // private method to be used in layout() & magic()
+  proto._layout = function() {
+    // don't animate first layout
+    var isInstant = this._getIsInstant();
+    // layout flow
+    this._resetLayout();
+    this._manageStamps();
+    this.layoutItems( this.filteredItems, isInstant );
+
+    // flag for initalized
+    this._isLayoutInited = true;
+  };
+
+  // filter + sort + layout
+  proto.arrange = function( opts ) {
+    // set any options pass
+    this.option( opts );
+    this._getIsInstant();
+    // filter, sort, and layout
+
+    // filter
+    var filtered = this._filter( this.items );
+    this.filteredItems = filtered.matches;
+
+    this._bindArrangeComplete();
+
+    if ( this._isInstant ) {
+      this._noTransition( this._hideReveal, [ filtered ] );
+    } else {
+      this._hideReveal( filtered );
+    }
+
+    this._sort();
+    this._layout();
+  };
+  // alias to _init for main plugin method
+  proto._init = proto.arrange;
+
+  proto._hideReveal = function( filtered ) {
+    this.reveal( filtered.needReveal );
+    this.hide( filtered.needHide );
+  };
+
+  // HACK
+  // Don't animate/transition first layout
+  // Or don't animate/transition other layouts
+  proto._getIsInstant = function() {
+    var isLayoutInstant = this._getOption('layoutInstant');
+    var isInstant = isLayoutInstant !== undefined ? isLayoutInstant :
+      !this._isLayoutInited;
+    this._isInstant = isInstant;
+    return isInstant;
+  };
+
+  // listen for layoutComplete, hideComplete and revealComplete
+  // to trigger arrangeComplete
+  proto._bindArrangeComplete = function() {
+    // listen for 3 events to trigger arrangeComplete
+    var isLayoutComplete, isHideComplete, isRevealComplete;
+    var _this = this;
+    function arrangeParallelCallback() {
+      if ( isLayoutComplete && isHideComplete && isRevealComplete ) {
+        _this.dispatchEvent( 'arrangeComplete', null, [ _this.filteredItems ] );
+      }
+    }
+    this.once( 'layoutComplete', function() {
+      isLayoutComplete = true;
+      arrangeParallelCallback();
+    });
+    this.once( 'hideComplete', function() {
+      isHideComplete = true;
+      arrangeParallelCallback();
+    });
+    this.once( 'revealComplete', function() {
+      isRevealComplete = true;
+      arrangeParallelCallback();
+    });
+  };
+
+  // -------------------------- filter -------------------------- //
+
+  proto._filter = function( items ) {
+    var filter = this.options.filter;
+    filter = filter || '*';
+    var matches = [];
+    var hiddenMatched = [];
+    var visibleUnmatched = [];
+
+    var test = this._getFilterTest( filter );
+
+    // test each item
+    for ( var i=0; i < items.length; i++ ) {
+      var item = items[i];
+      if ( item.isIgnored ) {
+        continue;
+      }
+      // add item to either matched or unmatched group
+      var isMatched = test( item );
+      // item.isFilterMatched = isMatched;
+      // add to matches if its a match
+      if ( isMatched ) {
+        matches.push( item );
+      }
+      // add to additional group if item needs to be hidden or revealed
+      if ( isMatched && item.isHidden ) {
+        hiddenMatched.push( item );
+      } else if ( !isMatched && !item.isHidden ) {
+        visibleUnmatched.push( item );
+      }
+    }
+
+    // return collections of items to be manipulated
+    return {
+      matches: matches,
+      needReveal: hiddenMatched,
+      needHide: visibleUnmatched
+    };
+  };
+
+  // get a jQuery, function, or a matchesSelector test given the filter
+  proto._getFilterTest = function( filter ) {
+    if ( jQuery && this.options.isJQueryFiltering ) {
+      // use jQuery
+      return function( item ) {
+        return jQuery( item.element ).is( filter );
+      };
+    }
+    if ( typeof filter == 'function' ) {
+      // use filter as function
+      return function( item ) {
+        return filter( item.element );
+      };
+    }
+    // default, use filter as selector string
+    return function( item ) {
+      return matchesSelector( item.element, filter );
+    };
+  };
+
+  // -------------------------- sorting -------------------------- //
+
+  /**
+   * @params {Array} elems
+   * @public
+   */
+  proto.updateSortData = function( elems ) {
+    // get items
+    var items;
+    if ( elems ) {
+      elems = utils.makeArray( elems );
+      items = this.getItems( elems );
+    } else {
+      // update all items if no elems provided
+      items = this.items;
+    }
+
+    this._getSorters();
+    this._updateItemsSortData( items );
+  };
+
+  proto._getSorters = function() {
+    var getSortData = this.options.getSortData;
+    for ( var key in getSortData ) {
+      var sorter = getSortData[ key ];
+      this._sorters[ key ] = mungeSorter( sorter );
+    }
+  };
+
+  /**
+   * @params {Array} items - of Isotope.Items
+   * @private
+   */
+  proto._updateItemsSortData = function( items ) {
+    // do not update if no items
+    var len = items && items.length;
+
+    for ( var i=0; len && i < len; i++ ) {
+      var item = items[i];
+      item.updateSortData();
+    }
+  };
+
+  // ----- munge sorter ----- //
+
+  // encapsulate this, as we just need mungeSorter
+  // other functions in here are just for munging
+  var mungeSorter = ( function() {
+    // add a magic layer to sorters for convienent shorthands
+    // `.foo-bar` will use the text of .foo-bar querySelector
+    // `[foo-bar]` will use attribute
+    // you can also add parser
+    // `.foo-bar parseInt` will parse that as a number
+    function mungeSorter( sorter ) {
+      // if not a string, return function or whatever it is
+      if ( typeof sorter != 'string' ) {
+        return sorter;
+      }
+      // parse the sorter string
+      var args = trim( sorter ).split(' ');
+      var query = args[0];
+      // check if query looks like [an-attribute]
+      var attrMatch = query.match( /^\[(.+)\]$/ );
+      var attr = attrMatch && attrMatch[1];
+      var getValue = getValueGetter( attr, query );
+      // use second argument as a parser
+      var parser = Isotope.sortDataParsers[ args[1] ];
+      // parse the value, if there was a parser
+      sorter = parser ? function( elem ) {
+        return elem && parser( getValue( elem ) );
+      } :
+      // otherwise just return value
+      function( elem ) {
+        return elem && getValue( elem );
+      };
+
+      return sorter;
+    }
+
+    // get an attribute getter, or get text of the querySelector
+    function getValueGetter( attr, query ) {
+      // if query looks like [foo-bar], get attribute
+      if ( attr ) {
+        return function getAttribute( elem ) {
+          return elem.getAttribute( attr );
+        };
+      }
+
+      // otherwise, assume its a querySelector, and get its text
+      return function getChildText( elem ) {
+        var child = elem.querySelector( query );
+        return child && child.textContent;
+      };
+    }
+
+    return mungeSorter;
+  })();
+
+  // parsers used in getSortData shortcut strings
+  Isotope.sortDataParsers = {
+    'parseInt': function( val ) {
+      return parseInt( val, 10 );
+    },
+    'parseFloat': function( val ) {
+      return parseFloat( val );
+    }
+  };
+
+  // ----- sort method ----- //
+
+  // sort filteredItem order
+  proto._sort = function() {
+    var sortByOpt = this.options.sortBy;
+    if ( !sortByOpt ) {
+      return;
+    }
+    // concat all sortBy and sortHistory
+    var sortBys = [].concat.apply( sortByOpt, this.sortHistory );
+    // sort magic
+    var itemSorter = getItemSorter( sortBys, this.options.sortAscending );
+    this.filteredItems.sort( itemSorter );
+    // keep track of sortBy History
+    if ( sortByOpt != this.sortHistory[0] ) {
+      // add to front, oldest goes in last
+      this.sortHistory.unshift( sortByOpt );
+    }
+  };
+
+  // returns a function used for sorting
+  function getItemSorter( sortBys, sortAsc ) {
+    return function sorter( itemA, itemB ) {
+      // cycle through all sortKeys
+      for ( var i = 0; i < sortBys.length; i++ ) {
+        var sortBy = sortBys[i];
+        var a = itemA.sortData[ sortBy ];
+        var b = itemB.sortData[ sortBy ];
+        if ( a > b || a < b ) {
+          // if sortAsc is an object, use the value given the sortBy key
+          var isAscending = sortAsc[ sortBy ] !== undefined ? sortAsc[ sortBy ] : sortAsc;
+          var direction = isAscending ? 1 : -1;
+          return ( a > b ? 1 : -1 ) * direction;
+        }
+      }
+      return 0;
+    };
+  }
+
+  // -------------------------- methods -------------------------- //
+
+  // get layout mode
+  proto._mode = function() {
+    var layoutMode = this.options.layoutMode;
+    var mode = this.modes[ layoutMode ];
+    if ( !mode ) {
+      // TODO console.error
+      throw new Error( 'No layout mode: ' + layoutMode );
+    }
+    // HACK sync mode's options
+    // any options set after init for layout mode need to be synced
+    mode.options = this.options[ layoutMode ];
+    return mode;
+  };
+
+  proto._resetLayout = function() {
+    // trigger original reset layout
+    Outlayer.prototype._resetLayout.call( this );
+    this._mode()._resetLayout();
+  };
+
+  proto._getItemLayoutPosition = function( item  ) {
+    return this._mode()._getItemLayoutPosition( item );
+  };
+
+  proto._manageStamp = function( stamp ) {
+    this._mode()._manageStamp( stamp );
+  };
+
+  proto._getContainerSize = function() {
+    return this._mode()._getContainerSize();
+  };
+
+  proto.needsResizeLayout = function() {
+    return this._mode().needsResizeLayout();
+  };
+
+  // -------------------------- adding & removing -------------------------- //
+
+  // HEADS UP overwrites default Outlayer appended
+  proto.appended = function( elems ) {
+    var items = this.addItems( elems );
+    if ( !items.length ) {
+      return;
+    }
+    // filter, layout, reveal new items
+    var filteredItems = this._filterRevealAdded( items );
+    // add to filteredItems
+    this.filteredItems = this.filteredItems.concat( filteredItems );
+  };
+
+  // HEADS UP overwrites default Outlayer prepended
+  proto.prepended = function( elems ) {
+    var items = this._itemize( elems );
+    if ( !items.length ) {
+      return;
+    }
+    // start new layout
+    this._resetLayout();
+    this._manageStamps();
+    // filter, layout, reveal new items
+    var filteredItems = this._filterRevealAdded( items );
+    // layout previous items
+    this.layoutItems( this.filteredItems );
+    // add to items and filteredItems
+    this.filteredItems = filteredItems.concat( this.filteredItems );
+    this.items = items.concat( this.items );
+  };
+
+  proto._filterRevealAdded = function( items ) {
+    var filtered = this._filter( items );
+    this.hide( filtered.needHide );
+    // reveal all new items
+    this.reveal( filtered.matches );
+    // layout new items, no transition
+    this.layoutItems( filtered.matches, true );
+    return filtered.matches;
+  };
+
+  /**
+   * Filter, sort, and layout newly-appended item elements
+   * @param {Array or NodeList or Element} elems
+   */
+  proto.insert = function( elems ) {
+    var items = this.addItems( elems );
+    if ( !items.length ) {
+      return;
+    }
+    // append item elements
+    var i, item;
+    var len = items.length;
+    for ( i=0; i < len; i++ ) {
+      item = items[i];
+      this.element.appendChild( item.element );
+    }
+    // filter new stuff
+    var filteredInsertItems = this._filter( items ).matches;
+    // set flag
+    for ( i=0; i < len; i++ ) {
+      items[i].isLayoutInstant = true;
+    }
+    this.arrange();
+    // reset flag
+    for ( i=0; i < len; i++ ) {
+      delete items[i].isLayoutInstant;
+    }
+    this.reveal( filteredInsertItems );
+  };
+
+  var _remove = proto.remove;
+  proto.remove = function( elems ) {
+    elems = utils.makeArray( elems );
+    var removeItems = this.getItems( elems );
+    // do regular thing
+    _remove.call( this, elems );
+    // bail if no items to remove
+    var len = removeItems && removeItems.length;
+    // remove elems from filteredItems
+    for ( var i=0; len && i < len; i++ ) {
+      var item = removeItems[i];
+      // remove item from collection
+      utils.removeFrom( this.filteredItems, item );
+    }
+  };
+
+  proto.shuffle = function() {
+    // update random sortData
+    for ( var i=0; i < this.items.length; i++ ) {
+      var item = this.items[i];
+      item.sortData.random = Math.random();
+    }
+    this.options.sortBy = 'random';
+    this._sort();
+    this._layout();
+  };
+
+  /**
+   * trigger fn without transition
+   * kind of hacky to have this in the first place
+   * @param {Function} fn
+   * @param {Array} args
+   * @returns ret
+   * @private
+   */
+  proto._noTransition = function( fn, args ) {
+    // save transitionDuration before disabling
+    var transitionDuration = this.options.transitionDuration;
+    // disable transition
+    this.options.transitionDuration = 0;
+    // do it
+    var returnValue = fn.apply( this, args );
+    // re-enable transition for reveal
+    this.options.transitionDuration = transitionDuration;
+    return returnValue;
+  };
+
+  // ----- helper methods ----- //
+
+  /**
+   * getter method for getting filtered item elements
+   * @returns {Array} elems - collection of item elements
+   */
+  proto.getFilteredItemElements = function() {
+    return this.filteredItems.map( function( item ) {
+      return item.element;
+    });
+  };
+
+  // -----  ----- //
+
+  return Isotope;
+
+}));

altofocus/assets/js/jquery.flexslider.js

@@ -0,0 +1,1195 @@
+/*
+ * jQuery FlexSlider v2.6.1
+ * Copyright 2012 WooThemes
+ * Contributing Author: Tyler Smith
+ */
+;
+(function ($) {
+
+  var focused = true;
+
+  //FlexSlider: Object Instance
+  $.flexslider = function(el, options) {
+    var slider = $(el);
+
+    // making variables public
+    slider.vars = $.extend({}, $.flexslider.defaults, options);
+
+    var namespace = slider.vars.namespace,
+        msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
+        touch = (( "ontouchstart" in window ) || msGesture || window.DocumentTouch && document instanceof DocumentTouch) && slider.vars.touch,
+        // depricating this idea, as devices are being released with both of these events
+        eventType = "click touchend MSPointerUp keyup",
+        watchedEvent = "",
+        watchedEventClearTimer,
+        vertical = slider.vars.direction === "vertical",
+        reverse = slider.vars.reverse,
+        carousel = (slider.vars.itemWidth > 0),
+        fade = slider.vars.animation === "fade",
+        asNav = slider.vars.asNavFor !== "",
+        methods = {};
+
+    // Store a reference to the slider object
+    $.data(el, "flexslider", slider);
+
+    // Private slider methods
+    methods = {
+      init: function() {
+        slider.animating = false;
+        // Get current slide and make sure it is a number
+        slider.currentSlide = parseInt( ( slider.vars.startAt ? slider.vars.startAt : 0), 10 );
+        if ( isNaN( slider.currentSlide ) ) { slider.currentSlide = 0; }
+        slider.animatingTo = slider.currentSlide;
+        slider.atEnd = (slider.currentSlide === 0 || slider.currentSlide === slider.last);
+        slider.containerSelector = slider.vars.selector.substr(0,slider.vars.selector.search(' '));
+        slider.slides = $(slider.vars.selector, slider);
+        slider.container = $(slider.containerSelector, slider);
+        slider.count = slider.slides.length;
+        // SYNC:
+        slider.syncExists = $(slider.vars.sync).length > 0;
+        // SLIDE:
+        if (slider.vars.animation === "slide") { slider.vars.animation = "swing"; }
+        slider.prop = (vertical) ? "top" : "marginLeft";
+        slider.args = {};
+        // SLIDESHOW:
+        slider.manualPause = false;
+        slider.stopped = false;
+        //PAUSE WHEN INVISIBLE
+        slider.started = false;
+        slider.startTimeout = null;
+        // TOUCH/USECSS:
+        slider.transitions = !slider.vars.video && !fade && slider.vars.useCSS && (function() {
+          var obj = document.createElement('div'),
+              props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
+          for (var i in props) {
+            if ( obj.style[ props[i] ] !== undefined ) {
+              slider.pfx = props[i].replace('Perspective','').toLowerCase();
+              slider.prop = "-" + slider.pfx + "-transform";
+              return true;
+            }
+          }
+          return false;
+        }());
+        slider.ensureAnimationEnd = '';
+        // CONTROLSCONTAINER:
+        if (slider.vars.controlsContainer !== "") slider.controlsContainer = $(slider.vars.controlsContainer).length > 0 && $(slider.vars.controlsContainer);
+        // MANUAL:
+        if (slider.vars.manualControls !== "") slider.manualControls = $(slider.vars.manualControls).length > 0 && $(slider.vars.manualControls);
+
+        // CUSTOM DIRECTION NAV:
+        if (slider.vars.customDirectionNav !== "") slider.customDirectionNav = $(slider.vars.customDirectionNav).length === 2 && $(slider.vars.customDirectionNav);
+
+        // RANDOMIZE:
+        if (slider.vars.randomize) {
+          slider.slides.sort(function() { return (Math.round(Math.random())-0.5); });
+          slider.container.empty().append(slider.slides);
+        }
+
+        slider.doMath();
+
+        // INIT
+        slider.setup("init");
+
+        // CONTROLNAV:
+        if (slider.vars.controlNav) { methods.controlNav.setup(); }
+
+        // DIRECTIONNAV:
+        if (slider.vars.directionNav) { methods.directionNav.setup(); }
+
+        // KEYBOARD:
+        if (slider.vars.keyboard && ($(slider.containerSelector).length === 1 || slider.vars.multipleKeyboard)) {
+          $(document).bind('keyup', function(event) {
+            var keycode = event.keyCode;
+            if (!slider.animating && (keycode === 39 || keycode === 37)) {
+              var target = (keycode === 39) ? slider.getTarget('next') :
+                           (keycode === 37) ? slider.getTarget('prev') : false;
+              slider.flexAnimate(target, slider.vars.pauseOnAction);
+            }
+          });
+        }
+        // MOUSEWHEEL:
+        if (slider.vars.mousewheel) {
+          slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
+            event.preventDefault();
+            var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
+            slider.flexAnimate(target, slider.vars.pauseOnAction);
+          });
+        }
+
+        // PAUSEPLAY
+        if (slider.vars.pausePlay) { methods.pausePlay.setup(); }
+
+        //PAUSE WHEN INVISIBLE
+        if (slider.vars.slideshow && slider.vars.pauseInvisible) { methods.pauseInvisible.init(); }
+
+        // SLIDSESHOW
+        if (slider.vars.slideshow) {
+          if (slider.vars.pauseOnHover) {
+            slider.hover(function() {
+              if (!slider.manualPlay && !slider.manualPause) { slider.pause(); }
+            }, function() {
+              if (!slider.manualPause && !slider.manualPlay && !slider.stopped) { slider.play(); }
+            });
+          }
+          // initialize animation
+          //If we're visible, or we don't use PageVisibility API
+          if(!slider.vars.pauseInvisible || !methods.pauseInvisible.isHidden()) {
+            (slider.vars.initDelay > 0) ? slider.startTimeout = setTimeout(slider.play, slider.vars.initDelay) : slider.play();
+          }
+        }
+
+        // ASNAV:
+        if (asNav) { methods.asNav.setup(); }
+
+        // TOUCH
+        if (touch && slider.vars.touch) { methods.touch(); }
+
+        // FADE&&SMOOTHHEIGHT || SLIDE:
+        if (!fade || (fade && slider.vars.smoothHeight)) { $(window).bind("resize orientationchange focus", methods.resize); }
+
+        slider.find("img").attr("draggable", "false");
+
+        // API: start() Callback
+        setTimeout(function(){
+          slider.vars.start(slider);
+        }, 200);
+      },
+      asNav: {
+        setup: function() {
+          slider.asNav = true;
+          slider.animatingTo = Math.floor(slider.currentSlide/slider.move);
+          slider.currentItem = slider.currentSlide;
+          slider.slides.removeClass(namespace + "active-slide").eq(slider.currentItem).addClass(namespace + "active-slide");
+          if(!msGesture){
+              slider.slides.on(eventType, function(e){
+                e.preventDefault();
+                var $slide = $(this),
+                    target = $slide.index();
+                var posFromLeft = $slide.offset().left - $(slider).scrollLeft(); // Find position of slide relative to left of slider container
+                if( posFromLeft <= 0 && $slide.hasClass( namespace + 'active-slide' ) ) {
+                  slider.flexAnimate(slider.getTarget("prev"), true);
+                } else if (!$(slider.vars.asNavFor).data('flexslider').animating && !$slide.hasClass(namespace + "active-slide")) {
+                  slider.direction = (slider.currentItem < target) ? "next" : "prev";
+                  slider.flexAnimate(target, slider.vars.pauseOnAction, false, true, true);
+                }
+              });
+          }else{
+              el._slider = slider;
+              slider.slides.each(function (){
+                  var that = this;
+                  that._gesture = new MSGesture();
+                  that._gesture.target = that;
+                  that.addEventListener("MSPointerDown", function (e){
+                      e.preventDefault();
+                      if(e.currentTarget._gesture) {
+                        e.currentTarget._gesture.addPointer(e.pointerId);
+                      }
+                  }, false);
+                  that.addEventListener("MSGestureTap", function (e){
+                      e.preventDefault();
+                      var $slide = $(this),
+                          target = $slide.index();
+                      if (!$(slider.vars.asNavFor).data('flexslider').animating && !$slide.hasClass('active')) {
+                          slider.direction = (slider.currentItem < target) ? "next" : "prev";
+                          slider.flexAnimate(target, slider.vars.pauseOnAction, false, true, true);
+                      }
+                  });
+              });
+          }
+        }
+      },
+      controlNav: {
+        setup: function() {
+          if (!slider.manualControls) {
+            methods.controlNav.setupPaging();
+          } else { // MANUALCONTROLS:
+            methods.controlNav.setupManual();
+          }
+        },
+        setupPaging: function() {
+          var type = (slider.vars.controlNav === "thumbnails") ? 'control-thumbs' : 'control-paging',
+              j = 1,
+              item,
+              slide;
+
+          slider.controlNavScaffold = $('<ol class="'+ namespace + 'control-nav ' + namespace + type + '"></ol>');
+
+          if (slider.pagingCount > 1) {
+            for (var i = 0; i < slider.pagingCount; i++) {
+              slide = slider.slides.eq(i);
+              if ( undefined === slide.attr( 'data-thumb-alt' ) ) { slide.attr( 'data-thumb-alt', '' ); }
+              var altText = ( '' !== slide.attr( 'data-thumb-alt' ) ) ? altText = ' alt="' + slide.attr( 'data-thumb-alt' ) + '"' : '';
+              item = (slider.vars.controlNav === "thumbnails") ? '<img src="' + slide.attr( 'data-thumb' ) + '"' + altText + '/>' : '<a href="#">' + j + '</a>';
+              if ( 'thumbnails' === slider.vars.controlNav && true === slider.vars.thumbCaptions ) {
+                var captn = slide.attr( 'data-thumbcaption' );
+                if ( '' !== captn && undefined !== captn ) { item += '<span class="' + namespace + 'caption">' + captn + '</span>'; }
+              }
+              slider.controlNavScaffold.append('<li>' + item + '</li>');
+              j++;
+            }
+          }
+
+          // CONTROLSCONTAINER:
+          (slider.controlsContainer) ? $(slider.controlsContainer).append(slider.controlNavScaffold) : slider.append(slider.controlNavScaffold);
+          methods.controlNav.set();
+
+          methods.controlNav.active();
+
+          slider.controlNavScaffold.delegate('a, img', eventType, function(event) {
+            event.preventDefault();
+
+            if (watchedEvent === "" || watchedEvent === event.type) {
+              var $this = $(this),
+                  target = slider.controlNav.index($this);
+
+              if (!$this.hasClass(namespace + 'active')) {
+                slider.direction = (target > slider.currentSlide) ? "next" : "prev";
+                slider.flexAnimate(target, slider.vars.pauseOnAction);
+              }
+            }
+
+            // setup flags to prevent event duplication
+            if (watchedEvent === "") {
+              watchedEvent = event.type;
+            }
+            methods.setToClearWatchedEvent();
+
+          });
+        },
+        setupManual: function() {
+          slider.controlNav = slider.manualControls;
+          methods.controlNav.active();
+
+          slider.controlNav.bind(eventType, function(event) {
+            event.preventDefault();
+
+            if (watchedEvent === "" || watchedEvent === event.type) {
+              var $this = $(this),
+                  target = slider.controlNav.index($this);
+
+              if (!$this.hasClass(namespace + 'active')) {
+                (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
+                slider.flexAnimate(target, slider.vars.pauseOnAction);
+              }
+            }
+
+            // setup flags to prevent event duplication
+            if (watchedEvent === "") {
+              watchedEvent = event.type;
+            }
+            methods.setToClearWatchedEvent();
+          });
+        },
+        set: function() {
+          var selector = (slider.vars.controlNav === "thumbnails") ? 'img' : 'a';
+          slider.controlNav = $('.' + namespace + 'control-nav li ' + selector, (slider.controlsContainer) ? slider.controlsContainer : slider);
+        },
+        active: function() {
+          slider.controlNav.removeClass(namespace + "active").eq(slider.animatingTo).addClass(namespace + "active");
+        },
+        update: function(action, pos) {
+          if (slider.pagingCount > 1 && action === "add") {
+            slider.controlNavScaffold.append($('<li><a href="#">' + slider.count + '</a></li>'));
+          } else if (slider.pagingCount === 1) {
+            slider.controlNavScaffold.find('li').remove();
+          } else {
+            slider.controlNav.eq(pos).closest('li').remove();
+          }
+          methods.controlNav.set();
+          (slider.pagingCount > 1 && slider.pagingCount !== slider.controlNav.length) ? slider.update(pos, action) : methods.controlNav.active();
+        }
+      },
+      directionNav: {
+        setup: function() {
+          var directionNavScaffold = $('<ul class="' + namespace + 'direction-nav"><li class="' + namespace + 'nav-prev"><a class="' + namespace + 'prev" href="#">' + slider.vars.prevText + '</a></li><li class="' + namespace + 'nav-next"><a class="' + namespace + 'next" href="#">' + slider.vars.nextText + '</a></li></ul>');
+
+          // CUSTOM DIRECTION NAV:
+          if (slider.customDirectionNav) {
+            slider.directionNav = slider.customDirectionNav;
+          // CONTROLSCONTAINER:
+          } else if (slider.controlsContainer) {
+            $(slider.controlsContainer).append(directionNavScaffold);
+            slider.directionNav = $('.' + namespace + 'direction-nav li a', slider.controlsContainer);
+          } else {
+            slider.append(directionNavScaffold);
+            slider.directionNav = $('.' + namespace + 'direction-nav li a', slider);
+          }
+
+          methods.directionNav.update();
+
+          slider.directionNav.bind(eventType, function(event) {
+            event.preventDefault();
+            var target;
+
+            if (watchedEvent === "" || watchedEvent === event.type) {
+              target = ($(this).hasClass(namespace + 'next')) ? slider.getTarget('next') : slider.getTarget('prev');
+              slider.flexAnimate(target, slider.vars.pauseOnAction);
+            }
+
+            // setup flags to prevent event duplication
+            if (watchedEvent === "") {
+              watchedEvent = event.type;
+            }
+            methods.setToClearWatchedEvent();
+          });
+        },
+        update: function() {
+          var disabledClass = namespace + 'disabled';
+          if (slider.pagingCount === 1) {
+            slider.directionNav.addClass(disabledClass).attr('tabindex', '-1');
+          } else if (!slider.vars.animationLoop) {
+            if (slider.animatingTo === 0) {
+              slider.directionNav.removeClass(disabledClass).filter('.' + namespace + "prev").addClass(disabledClass).attr('tabindex', '-1');
+            } else if (slider.animatingTo === slider.last) {
+              slider.directionNav.removeClass(disabledClass).filter('.' + namespace + "next").addClass(disabledClass).attr('tabindex', '-1');
+            } else {
+              slider.directionNav.removeClass(disabledClass).removeAttr('tabindex');
+            }
+          } else {
+            slider.directionNav.removeClass(disabledClass).removeAttr('tabindex');
+          }
+        }
+      },
+      pausePlay: {
+        setup: function() {
+          var pausePlayScaffold = $('<div class="' + namespace + 'pauseplay"><a href="#"></a></div>');
+
+          // CONTROLSCONTAINER:
+          if (slider.controlsContainer) {
+            slider.controlsContainer.append(pausePlayScaffold);
+            slider.pausePlay = $('.' + namespace + 'pauseplay a', slider.controlsContainer);
+          } else {
+            slider.append(pausePlayScaffold);
+            slider.pausePlay = $('.' + namespace + 'pauseplay a', slider);
+          }
+
+          methods.pausePlay.update((slider.vars.slideshow) ? namespace + 'pause' : namespace + 'play');
+
+          slider.pausePlay.bind(eventType, function(event) {
+            event.preventDefault();
+
+            if (watchedEvent === "" || watchedEvent === event.type) {
+              if ($(this).hasClass(namespace + 'pause')) {
+                slider.manualPause = true;
+                slider.manualPlay = false;
+                slider.pause();
+              } else {
+                slider.manualPause = false;
+                slider.manualPlay = true;
+                slider.play();
+              }
+            }
+
+            // setup flags to prevent event duplication
+            if (watchedEvent === "") {
+              watchedEvent = event.type;
+            }
+            methods.setToClearWatchedEvent();
+          });
+        },
+        update: function(state) {
+          (state === "play") ? slider.pausePlay.removeClass(namespace + 'pause').addClass(namespace + 'play').html(slider.vars.playText) : slider.pausePlay.removeClass(namespace + 'play').addClass(namespace + 'pause').html(slider.vars.pauseText);
+        }
+      },
+      touch: function() {
+        var startX,
+          startY,
+          offset,
+          cwidth,
+          dx,
+          startT,
+          onTouchStart,
+          onTouchMove,
+          onTouchEnd,
+          scrolling = false,
+          localX = 0,
+          localY = 0,
+          accDx = 0;
+
+        if(!msGesture){
+            onTouchStart = function(e) {
+              if (slider.animating) {
+                e.preventDefault();
+              } else if ( ( window.navigator.msPointerEnabled ) || e.touches.length === 1 ) {
+                slider.pause();
+                // CAROUSEL:
+                cwidth = (vertical) ? slider.h : slider. w;
+                startT = Number(new Date());
+                // CAROUSEL:
+
+                // Local vars for X and Y points.
+                localX = e.touches[0].pageX;
+                localY = e.touches[0].pageY;
+
+                offset = (carousel && reverse && slider.animatingTo === slider.last) ? 0 :
+                         (carousel && reverse) ? slider.limit - (((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.animatingTo) :
+                         (carousel && slider.currentSlide === slider.last) ? slider.limit :
+                         (carousel) ? ((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.currentSlide :
+                         (reverse) ? (slider.last - slider.currentSlide + slider.cloneOffset) * cwidth : (slider.currentSlide + slider.cloneOffset) * cwidth;
+                startX = (vertical) ? localY : localX;
+                startY = (vertical) ? localX : localY;
+
+                el.addEventListener('touchmove', onTouchMove, false);
+                el.addEventListener('touchend', onTouchEnd, false);
+              }
+            };
+
+            onTouchMove = function(e) {
+              // Local vars for X and Y points.
+
+              localX = e.touches[0].pageX;
+              localY = e.touches[0].pageY;
+
+              dx = (vertical) ? startX - localY : startX - localX;
+              scrolling = (vertical) ? (Math.abs(dx) < Math.abs(localX - startY)) : (Math.abs(dx) < Math.abs(localY - startY));
+
+              var fxms = 500;
+
+              if ( ! scrolling || Number( new Date() ) - startT > fxms ) {
+                e.preventDefault();
+                if (!fade && slider.transitions) {
+                  if (!slider.vars.animationLoop) {
+                    dx = dx/((slider.currentSlide === 0 && dx < 0 || slider.currentSlide === slider.last && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1);
+                  }
+                  slider.setProps(offset + dx, "setTouch");
+                }
+              }
+            };
+
+            onTouchEnd = function(e) {
+              // finish the touch by undoing the touch session
+              el.removeEventListener('touchmove', onTouchMove, false);
+
+              if (slider.animatingTo === slider.currentSlide && !scrolling && !(dx === null)) {
+                var updateDx = (reverse) ? -dx : dx,
+                    target = (updateDx > 0) ? slider.getTarget('next') : slider.getTarget('prev');
+
+                if (slider.canAdvance(target) && (Number(new Date()) - startT < 550 && Math.abs(updateDx) > 50 || Math.abs(updateDx) > cwidth/2)) {
+                  slider.flexAnimate(target, slider.vars.pauseOnAction);
+                } else {
+                  if (!fade) { slider.flexAnimate(slider.currentSlide, slider.vars.pauseOnAction, true); }
+                }
+              }
+              el.removeEventListener('touchend', onTouchEnd, false);
+
+              startX = null;
+              startY = null;
+              dx = null;
+              offset = null;
+            };
+
+            el.addEventListener('touchstart', onTouchStart, false);
+        }else{
+            el.style.msTouchAction = "none";
+            el._gesture = new MSGesture();
+            el._gesture.target = el;
+            el.addEventListener("MSPointerDown", onMSPointerDown, false);
+            el._slider = slider;
+            el.addEventListener("MSGestureChange", onMSGestureChange, false);
+            el.addEventListener("MSGestureEnd", onMSGestureEnd, false);
+
+            function onMSPointerDown(e){
+                e.stopPropagation();
+                if (slider.animating) {
+                    e.preventDefault();
+                }else{
+                    slider.pause();
+                    el._gesture.addPointer(e.pointerId);
+                    accDx = 0;
+                    cwidth = (vertical) ? slider.h : slider. w;
+                    startT = Number(new Date());
+                    // CAROUSEL:
+
+                    offset = (carousel && reverse && slider.animatingTo === slider.last) ? 0 :
+                        (carousel && reverse) ? slider.limit - (((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.animatingTo) :
+                            (carousel && slider.currentSlide === slider.last) ? slider.limit :
+                                (carousel) ? ((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.currentSlide :
+                                    (reverse) ? (slider.last - slider.currentSlide + slider.cloneOffset) * cwidth : (slider.currentSlide + slider.cloneOffset) * cwidth;
+                }
+            }
+
+            function onMSGestureChange(e) {
+                e.stopPropagation();
+                var slider = e.target._slider;
+                if(!slider){
+                    return;
+                }
+                var transX = -e.translationX,
+                    transY = -e.translationY;
+
+                //Accumulate translations.
+                accDx = accDx + ((vertical) ? transY : transX);
+                dx = accDx;
+                scrolling = (vertical) ? (Math.abs(accDx) < Math.abs(-transX)) : (Math.abs(accDx) < Math.abs(-transY));
+
+                if(e.detail === e.MSGESTURE_FLAG_INERTIA){
+                    setImmediate(function (){
+                        el._gesture.stop();
+                    });
+
+                    return;
+                }
+
+                if (!scrolling || Number(new Date()) - startT > 500) {
+                    e.preventDefault();
+                    if (!fade && slider.transitions) {
+                        if (!slider.vars.animationLoop) {
+                            dx = accDx / ((slider.currentSlide === 0 && accDx < 0 || slider.currentSlide === slider.last && accDx > 0) ? (Math.abs(accDx) / cwidth + 2) : 1);
+                        }
+                        slider.setProps(offset + dx, "setTouch");
+                    }
+                }
+            }
+
+            function onMSGestureEnd(e) {
+                e.stopPropagation();
+                var slider = e.target._slider;
+                if(!slider){
+                    return;
+                }
+                if (slider.animatingTo === slider.currentSlide && !scrolling && !(dx === null)) {
+                    var updateDx = (reverse) ? -dx : dx,
+                        target = (updateDx > 0) ? slider.getTarget('next') : slider.getTarget('prev');
+
+                    if (slider.canAdvance(target) && (Number(new Date()) - startT < 550 && Math.abs(updateDx) > 50 || Math.abs(updateDx) > cwidth/2)) {
+                        slider.flexAnimate(target, slider.vars.pauseOnAction);
+                    } else {
+                        if (!fade) { slider.flexAnimate(slider.currentSlide, slider.vars.pauseOnAction, true); }
+                    }
+                }
+
+                startX = null;
+                startY = null;
+                dx = null;
+                offset = null;
+                accDx = 0;
+            }
+        }
+      },
+      resize: function() {
+        if (!slider.animating && slider.is(':visible')) {
+          if (!carousel) { slider.doMath(); }
+
+          if (fade) {
+            // SMOOTH HEIGHT:
+            methods.smoothHeight();
+          } else if (carousel) { //CAROUSEL:
+            slider.slides.width(slider.computedW);
+            slider.update(slider.pagingCount);
+            slider.setProps();
+          }
+          else if (vertical) { //VERTICAL:
+            slider.viewport.height(slider.h);
+            slider.setProps(slider.h, "setTotal");
+          } else {
+            // SMOOTH HEIGHT:
+            if (slider.vars.smoothHeight) { methods.smoothHeight(); }
+            slider.newSlides.width(slider.computedW);
+            slider.setProps(slider.computedW, "setTotal");
+          }
+        }
+      },
+      smoothHeight: function(dur) {
+        if (!vertical || fade) {
+          var $obj = (fade) ? slider : slider.viewport;
+          (dur) ? $obj.animate({"height": slider.slides.eq(slider.animatingTo).innerHeight()}, dur) : $obj.innerHeight(slider.slides.eq(slider.animatingTo).innerHeight());
+        }
+      },
+      sync: function(action) {
+        var $obj = $(slider.vars.sync).data("flexslider"),
+            target = slider.animatingTo;
+
+        switch (action) {
+          case "animate": $obj.flexAnimate(target, slider.vars.pauseOnAction, false, true); break;
+          case "play": if (!$obj.playing && !$obj.asNav) { $obj.play(); } break;
+          case "pause": $obj.pause(); break;
+        }
+      },
+      uniqueID: function($clone) {
+        // Append _clone to current level and children elements with id attributes
+        $clone.filter( '[id]' ).add($clone.find( '[id]' )).each(function() {
+          var $this = $(this);
+          $this.attr( 'id', $this.attr( 'id' ) + '_clone' );
+        });
+        return $clone;
+      },
+      pauseInvisible: {
+        visProp: null,
+        init: function() {
+          var visProp = methods.pauseInvisible.getHiddenProp();
+          if (visProp) {
+            var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
+            document.addEventListener(evtname, function() {
+              if (methods.pauseInvisible.isHidden()) {
+                if(slider.startTimeout) {
+                  clearTimeout(slider.startTimeout); //If clock is ticking, stop timer and prevent from starting while invisible
+                } else {
+                  slider.pause(); //Or just pause
+                }
+              }
+              else {
+                if(slider.started) {
+                  slider.play(); //Initiated before, just play
+                } else {
+                  if (slider.vars.initDelay > 0) {
+                    setTimeout(slider.play, slider.vars.initDelay);
+                  } else {
+                    slider.play(); //Didn't init before: simply init or wait for it
+                  }
+                }
+              }
+            });
+          }
+        },
+        isHidden: function() {
+          var prop = methods.pauseInvisible.getHiddenProp();
+          if (!prop) {
+            return false;
+          }
+          return document[prop];
+        },
+        getHiddenProp: function() {
+          var prefixes = ['webkit','moz','ms','o'];
+          // if 'hidden' is natively supported just return it
+          if ('hidden' in document) {
+            return 'hidden';
+          }
+          // otherwise loop over all the known prefixes until we find one
+          for ( var i = 0; i < prefixes.length; i++ ) {
+              if ((prefixes[i] + 'Hidden') in document) {
+                return prefixes[i] + 'Hidden';
+              }
+          }
+          // otherwise it's not supported
+          return null;
+        }
+      },
+      setToClearWatchedEvent: function() {
+        clearTimeout(watchedEventClearTimer);
+        watchedEventClearTimer = setTimeout(function() {
+          watchedEvent = "";
+        }, 3000);
+      }
+    };
+
+    // public methods
+    slider.flexAnimate = function(target, pause, override, withSync, fromNav) {
+      if (!slider.vars.animationLoop && target !== slider.currentSlide) {
+        slider.direction = (target > slider.currentSlide) ? "next" : "prev";
+      }
+
+      if (asNav && slider.pagingCount === 1) slider.direction = (slider.currentItem < target) ? "next" : "prev";
+
+      if (!slider.animating && (slider.canAdvance(target, fromNav) || override) && slider.is(":visible")) {
+        if (asNav && withSync) {
+          var master = $(slider.vars.asNavFor).data('flexslider');
+          slider.atEnd = target === 0 || target === slider.count - 1;
+          master.flexAnimate(target, true, false, true, fromNav);
+          slider.direction = (slider.currentItem < target) ? "next" : "prev";
+          master.direction = slider.direction;
+
+          if (Math.ceil((target + 1)/slider.visible) - 1 !== slider.currentSlide && target !== 0) {
+            slider.currentItem = target;
+            slider.slides.removeClass(namespace + "active-slide").eq(target).addClass(namespace + "active-slide");
+            target = Math.floor(target/slider.visible);
+          } else {
+            slider.currentItem = target;
+            slider.slides.removeClass(namespace + "active-slide").eq(target).addClass(namespace + "active-slide");
+            return false;
+          }
+        }
+
+        slider.animating = true;
+        slider.animatingTo = target;
+
+        // SLIDESHOW:
+        if (pause) { slider.pause(); }
+
+        // API: before() animation Callback
+        slider.vars.before(slider);
+
+        // SYNC:
+        if (slider.syncExists && !fromNav) { methods.sync("animate"); }
+
+        // CONTROLNAV
+        if (slider.vars.controlNav) { methods.controlNav.active(); }
+
+        // !CAROUSEL:
+        // CANDIDATE: slide active class (for add/remove slide)
+        if (!carousel) { slider.slides.removeClass(namespace + 'active-slide').eq(target).addClass(namespace + 'active-slide'); }
+
+        // INFINITE LOOP:
+        // CANDIDATE: atEnd
+        slider.atEnd = target === 0 || target === slider.last;
+
+        // DIRECTIONNAV:
+        if (slider.vars.directionNav) { methods.directionNav.update(); }
+
+        if (target === slider.last) {
+          // API: end() of cycle Callback
+          slider.vars.end(slider);
+          // SLIDESHOW && !INFINITE LOOP:
+          if (!slider.vars.animationLoop) { slider.pause(); }
+        }
+
+        // SLIDE:
+        if (!fade) {
+          var dimension = (vertical) ? slider.slides.filter(':first').height() : slider.computedW,
+              margin, slideString, calcNext;
+
+          // INFINITE LOOP / REVERSE:
+          if (carousel) {
+            margin = slider.vars.itemMargin;
+            calcNext = ((slider.itemW + margin) * slider.move) * slider.animatingTo;
+            slideString = (calcNext > slider.limit && slider.visible !== 1) ? slider.limit : calcNext;
+          } else if (slider.currentSlide === 0 && target === slider.count - 1 && slider.vars.animationLoop && slider.direction !== "next") {
+            slideString = (reverse) ? (slider.count + slider.cloneOffset) * dimension : 0;
+          } else if (slider.currentSlide === slider.last && target === 0 && slider.vars.animationLoop && slider.direction !== "prev") {
+            slideString = (reverse) ? 0 : (slider.count + 1) * dimension;
+          } else {
+            slideString = (reverse) ? ((slider.count - 1) - target + slider.cloneOffset) * dimension : (target + slider.cloneOffset) * dimension;
+          }
+          slider.setProps(slideString, "", slider.vars.animationSpeed);
+          if (slider.transitions) {
+            if (!slider.vars.animationLoop || !slider.atEnd) {
+              slider.animating = false;
+              slider.currentSlide = slider.animatingTo;
+            }
+
+            // Unbind previous transitionEnd events and re-bind new transitionEnd event
+            slider.container.unbind("webkitTransitionEnd transitionend");
+            slider.container.bind("webkitTransitionEnd transitionend", function() {
+              clearTimeout(slider.ensureAnimationEnd);
+              slider.wrapup(dimension);
+            });
+
+            // Insurance for the ever-so-fickle transitionEnd event
+            clearTimeout(slider.ensureAnimationEnd);
+            slider.ensureAnimationEnd = setTimeout(function() {
+              slider.wrapup(dimension);
+            }, slider.vars.animationSpeed + 100);
+
+          } else {
+            slider.container.animate(slider.args, slider.vars.animationSpeed, slider.vars.easing, function(){
+              slider.wrapup(dimension);
+            });
+          }
+        } else { // FADE:
+          if (!touch) {
+            //slider.slides.eq(slider.currentSlide).fadeOut(slider.vars.animationSpeed, slider.vars.easing);
+            //slider.slides.eq(target).fadeIn(slider.vars.animationSpeed, slider.vars.easing, slider.wrapup);
+
+            slider.slides.eq(slider.currentSlide).css({"zIndex": 1}).animate({"opacity": 0}, slider.vars.animationSpeed, slider.vars.easing);
+            slider.slides.eq(target).css({"zIndex": 2}).animate({"opacity": 1}, slider.vars.animationSpeed, slider.vars.easing, slider.wrapup);
+
+          } else {
+            slider.slides.eq(slider.currentSlide).css({ "opacity": 0, "zIndex": 1 });
+            slider.slides.eq(target).css({ "opacity": 1, "zIndex": 2 });
+            slider.wrapup(dimension);
+          }
+        }
+        // SMOOTH HEIGHT:
+        if (slider.vars.smoothHeight) { methods.smoothHeight(slider.vars.animationSpeed); }
+      }
+    };
+    slider.wrapup = function(dimension) {
+      // SLIDE:
+      if (!fade && !carousel) {
+        if (slider.currentSlide === 0 && slider.animatingTo === slider.last && slider.vars.animationLoop) {
+          slider.setProps(dimension, "jumpEnd");
+        } else if (slider.currentSlide === slider.last && slider.animatingTo === 0 && slider.vars.animationLoop) {
+          slider.setProps(dimension, "jumpStart");
+        }
+      }
+      slider.animating = false;
+      slider.currentSlide = slider.animatingTo;
+      // API: after() animation Callback
+      slider.vars.after(slider);
+    };
+
+    // SLIDESHOW:
+    slider.animateSlides = function() {
+      if (!slider.animating && focused ) { slider.flexAnimate(slider.getTarget("next")); }
+    };
+    // SLIDESHOW:
+    slider.pause = function() {
+      clearInterval(slider.animatedSlides);
+      slider.animatedSlides = null;
+      slider.playing = false;
+      // PAUSEPLAY:
+      if (slider.vars.pausePlay) { methods.pausePlay.update("play"); }
+      // SYNC:
+      if (slider.syncExists) { methods.sync("pause"); }
+    };
+    // SLIDESHOW:
+    slider.play = function() {
+      if (slider.playing) { clearInterval(slider.animatedSlides); }
+      slider.animatedSlides = slider.animatedSlides || setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
+      slider.started = slider.playing = true;
+      // PAUSEPLAY:
+      if (slider.vars.pausePlay) { methods.pausePlay.update("pause"); }
+      // SYNC:
+      if (slider.syncExists) { methods.sync("play"); }
+    };
+    // STOP:
+    slider.stop = function () {
+      slider.pause();
+      slider.stopped = true;
+    };
+    slider.canAdvance = function(target, fromNav) {
+      // ASNAV:
+      var last = (asNav) ? slider.pagingCount - 1 : slider.last;
+      return (fromNav) ? true :
+             (asNav && slider.currentItem === slider.count - 1 && target === 0 && slider.direction === "prev") ? true :
+             (asNav && slider.currentItem === 0 && target === slider.pagingCount - 1 && slider.direction !== "next") ? false :
+             (target === slider.currentSlide && !asNav) ? false :
+             (slider.vars.animationLoop) ? true :
+             (slider.atEnd && slider.currentSlide === 0 && target === last && slider.direction !== "next") ? false :
+             (slider.atEnd && slider.currentSlide === last && target === 0 && slider.direction === "next") ? false :
+             true;
+    };
+    slider.getTarget = function(dir) {
+      slider.direction = dir;
+      if (dir === "next") {
+        return (slider.currentSlide === slider.last) ? 0 : slider.currentSlide + 1;
+      } else {
+        return (slider.currentSlide === 0) ? slider.last : slider.currentSlide - 1;
+      }
+    };
+
+    // SLIDE:
+    slider.setProps = function(pos, special, dur) {
+      var target = (function() {
+        var posCheck = (pos) ? pos : ((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.animatingTo,
+            posCalc = (function() {
+              if (carousel) {
+                return (special === "setTouch") ? pos :
+                       (reverse && slider.animatingTo === slider.last) ? 0 :
+                       (reverse) ? slider.limit - (((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.animatingTo) :
+                       (slider.animatingTo === slider.last) ? slider.limit : posCheck;
+              } else {
+                switch (special) {
+                  case "setTotal": return (reverse) ? ((slider.count - 1) - slider.currentSlide + slider.cloneOffset) * pos : (slider.currentSlide + slider.cloneOffset) * pos;
+                  case "setTouch": return (reverse) ? pos : pos;
+                  case "jumpEnd": return (reverse) ? pos : slider.count * pos;
+                  case "jumpStart": return (reverse) ? slider.count * pos : pos;
+                  default: return pos;
+                }
+              }
+            }());
+
+            return (posCalc * -1) + "px";
+          }());
+
+      if (slider.transitions) {
+        target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + target + ",0,0)";
+        dur = (dur !== undefined) ? (dur/1000) + "s" : "0s";
+        slider.container.css("-" + slider.pfx + "-transition-duration", dur);
+         slider.container.css("transition-duration", dur);
+      }
+
+      slider.args[slider.prop] = target;
+      if (slider.transitions || dur === undefined) { slider.container.css(slider.args); }
+
+      slider.container.css('transform',target);
+    };
+
+    slider.setup = function(type) {
+      // SLIDE:
+      if (!fade) {
+        var sliderOffset, arr;
+
+        if (type === "init") {
+          slider.viewport = $('<div class="' + namespace + 'viewport"></div>').css({"overflow": "hidden", "position": "relative"}).appendTo(slider).append(slider.container);
+          // INFINITE LOOP:
+          slider.cloneCount = 0;
+          slider.cloneOffset = 0;
+          // REVERSE:
+          if (reverse) {
+            arr = $.makeArray(slider.slides).reverse();
+            slider.slides = $(arr);
+            slider.container.empty().append(slider.slides);
+          }
+        }
+        // INFINITE LOOP && !CAROUSEL:
+        if (slider.vars.animationLoop && !carousel) {
+          slider.cloneCount = 2;
+          slider.cloneOffset = 1;
+          // clear out old clones
+          if (type !== "init") { slider.container.find('.clone').remove(); }
+          slider.container.append(methods.uniqueID(slider.slides.first().clone().addClass('clone')).attr('aria-hidden', 'true'))
+                          .prepend(methods.uniqueID(slider.slides.last().clone().addClass('clone')).attr('aria-hidden', 'true'));
+        }
+        slider.newSlides = $(slider.vars.selector, slider);
+
+        sliderOffset = (reverse) ? slider.count - 1 - slider.currentSlide + slider.cloneOffset : slider.currentSlide + slider.cloneOffset;
+        // VERTICAL:
+        if (vertical && !carousel) {
+          slider.container.height((slider.count + slider.cloneCount) * 200 + "%").css("position", "absolute").width("100%");
+          setTimeout(function(){
+            slider.newSlides.css({"display": "block"});
+            slider.doMath();
+            slider.viewport.height(slider.h);
+            slider.setProps(sliderOffset * slider.h, "init");
+          }, (type === "init") ? 100 : 0);
+        } else {
+          slider.container.width((slider.count + slider.cloneCount) * 200 + "%");
+          slider.setProps(sliderOffset * slider.computedW, "init");
+          setTimeout(function(){
+            slider.doMath();
+            slider.newSlides.css({"width": slider.computedW, "marginRight" : slider.computedM, "float": "left", "display": "block"});
+            // SMOOTH HEIGHT:
+            if (slider.vars.smoothHeight) { methods.smoothHeight(); }
+          }, (type === "init") ? 100 : 0);
+        }
+      } else { // FADE:
+        slider.slides.css({"width": "100%", "float": "left", "marginRight": "-100%", "position": "relative"});
+        if (type === "init") {
+          if (!touch) {
+            //slider.slides.eq(slider.currentSlide).fadeIn(slider.vars.animationSpeed, slider.vars.easing);
+            if (slider.vars.fadeFirstSlide == false) {
+              slider.slides.css({ "opacity": 0, "display": "block", "zIndex": 1 }).eq(slider.currentSlide).css({"zIndex": 2}).css({"opacity": 1});
+            } else {
+              slider.slides.css({ "opacity": 0, "display": "block", "zIndex": 1 }).eq(slider.currentSlide).css({"zIndex": 2}).animate({"opacity": 1},slider.vars.animationSpeed,slider.vars.easing);
+            }
+          } else {
+            slider.slides.css({ "opacity": 0, "display": "block", "webkitTransition": "opacity " + slider.vars.animationSpeed / 1000 + "s ease", "zIndex": 1 }).eq(slider.currentSlide).css({ "opacity": 1, "zIndex": 2});
+          }
+        }
+        // SMOOTH HEIGHT:
+        if (slider.vars.smoothHeight) { methods.smoothHeight(); }
+      }
+      // !CAROUSEL:
+      // CANDIDATE: active slide
+      if (!carousel) { slider.slides.removeClass(namespace + "active-slide").eq(slider.currentSlide).addClass(namespace + "active-slide"); }
+
+      //FlexSlider: init() Callback
+      slider.vars.init(slider);
+    };
+
+    slider.doMath = function() {
+      var slide = slider.slides.first(),
+          slideMargin = slider.vars.itemMargin,
+          minItems = slider.vars.minItems,
+          maxItems = slider.vars.maxItems;
+
+      slider.w = (slider.viewport===undefined) ? slider.width() : slider.viewport.width();
+      slider.h = slide.height();
+      slider.boxPadding = slide.outerWidth() - slide.width();
+
+      // CAROUSEL:
+      if (carousel) {
+        slider.itemT = slider.vars.itemWidth + slideMargin;
+        slider.itemM = slideMargin;
+        slider.minW = (minItems) ? minItems * slider.itemT : slider.w;
+        slider.maxW = (maxItems) ? (maxItems * slider.itemT) - slideMargin : slider.w;
+        slider.itemW = (slider.minW > slider.w) ? (slider.w - (slideMargin * (minItems - 1)))/minItems :
+                       (slider.maxW < slider.w) ? (slider.w - (slideMargin * (maxItems - 1)))/maxItems :
+                       (slider.vars.itemWidth > slider.w) ? slider.w : slider.vars.itemWidth;
+
+        slider.visible = Math.floor(slider.w/(slider.itemW));
+        slider.move = (slider.vars.move > 0 && slider.vars.move < slider.visible ) ? slider.vars.move : slider.visible;
+        slider.pagingCount = Math.ceil(((slider.count - slider.visible)/slider.move) + 1);
+        slider.last =  slider.pagingCount - 1;
+        slider.limit = (slider.pagingCount === 1) ? 0 :
+                       (slider.vars.itemWidth > slider.w) ? (slider.itemW * (slider.count - 1)) + (slideMargin * (slider.count - 1)) : ((slider.itemW + slideMargin) * slider.count) - slider.w - slideMargin;
+      } else {
+        slider.itemW = slider.w;
+        slider.itemM = slideMargin;
+        slider.pagingCount = slider.count;
+        slider.last = slider.count - 1;
+      }
+      slider.computedW = slider.itemW - slider.boxPadding;
+      slider.computedM = slider.itemM;
+    };
+
+    slider.update = function(pos, action) {
+      slider.doMath();
+
+      // update currentSlide and slider.animatingTo if necessary
+      if (!carousel) {
+        if (pos < slider.currentSlide) {
+          slider.currentSlide += 1;
+        } else if (pos <= slider.currentSlide && pos !== 0) {
+          slider.currentSlide -= 1;
+        }
+        slider.animatingTo = slider.currentSlide;
+      }
+
+      // update controlNav
+      if (slider.vars.controlNav && !slider.manualControls) {
+        if ((action === "add" && !carousel) || slider.pagingCount > slider.controlNav.length) {
+          methods.controlNav.update("add");
+        } else if ((action === "remove" && !carousel) || slider.pagingCount < slider.controlNav.length) {
+          if (carousel && slider.currentSlide > slider.last) {
+            slider.currentSlide -= 1;
+            slider.animatingTo -= 1;
+          }
+          methods.controlNav.update("remove", slider.last);
+        }
+      }
+      // update directionNav
+      if (slider.vars.directionNav) { methods.directionNav.update(); }
+
+    };
+
+    slider.addSlide = function(obj, pos) {
+      var $obj = $(obj);
+
+      slider.count += 1;
+      slider.last = slider.count - 1;
+
+      // append new slide
+      if (vertical && reverse) {
+        (pos !== undefined) ? slider.slides.eq(slider.count - pos).after($obj) : slider.container.prepend($obj);
+      } else {
+        (pos !== undefined) ? slider.slides.eq(pos).before($obj) : slider.container.append($obj);
+      }
+
+      // update currentSlide, animatingTo, controlNav, and directionNav
+      slider.update(pos, "add");
+
+      // update slider.slides
+      slider.slides = $(slider.vars.selector + ':not(.clone)', slider);
+      // re-setup the slider to accomdate new slide
+      slider.setup();
+
+      //FlexSlider: added() Callback
+      slider.vars.added(slider);
+    };
+    slider.removeSlide = function(obj) {
+      var pos = (isNaN(obj)) ? slider.slides.index($(obj)) : obj;
+
+      // update count
+      slider.count -= 1;
+      slider.last = slider.count - 1;
+
+      // remove slide
+      if (isNaN(obj)) {
+        $(obj, slider.slides).remove();
+      } else {
+        (vertical && reverse) ? slider.slides.eq(slider.last).remove() : slider.slides.eq(obj).remove();
+      }
+
+      // update currentSlide, animatingTo, controlNav, and directionNav
+      slider.doMath();
+      slider.update(pos, "remove");
+
+      // update slider.slides
+      slider.slides = $(slider.vars.selector + ':not(.clone)', slider);
+      // re-setup the slider to accomdate new slide
+      slider.setup();
+
+      // FlexSlider: removed() Callback
+      slider.vars.removed(slider);
+    };
+
+    //FlexSlider: Initialize
+    methods.init();
+  };
+
+  // Ensure the slider isn't focussed if the window loses focus.
+  $( window ).blur( function ( e ) {
+    focused = false;
+  }).focus( function ( e ) {
+    focused = true;
+  });
+
+  //FlexSlider: Default Settings
+  $.flexslider.defaults = {
+    namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
+    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
+    animation: "fade",              //String: Select your animation type, "fade" or "slide"
+    easing: "swing",                //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
+    direction: "horizontal",        //String: Select the sliding direction, "horizontal" or "vertical"
+    reverse: false,                 //{NEW} Boolean: Reverse the animation direction
+    animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
+    smoothHeight: false,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
+    startAt: 0,                     //Integer: The slide that the slider should start on. Array notation (0 = first slide)
+    slideshow: true,                //Boolean: Animate slider automatically
+    slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
+    animationSpeed: 600,            //Integer: Set the speed of animations, in milliseconds
+    initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
+    randomize: false,               //Boolean: Randomize slide order
+    fadeFirstSlide: true,           //Boolean: Fade in the first slide when animation type is "fade"
+    thumbCaptions: false,           //Boolean: Whether or not to put captions on thumbnails when using the "thumbnails" controlNav.
+
+    // Usability features
+    pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
+    pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
+    pauseInvisible: true,   		//{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage.
+    useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
+    touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
+    video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
+
+    // Primary Controls
+    controlNav: true,               //Boolean: Create navigation for paging control of each slide? Note: Leave true for manualControls usage
+    directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
+    prevText: "Previous",           //String: Set the text for the "previous" directionNav item
+    nextText: "Next",               //String: Set the text for the "next" directionNav item
+
+    // Secondary Navigation
+    keyboard: true,                 //Boolean: Allow slider navigating via keyboard left/right keys
+    multipleKeyboard: false,        //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
+    mousewheel: false,              //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
+    pausePlay: false,               //Boolean: Create pause/play dynamic element
+    pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
+    playText: "Play",               //String: Set the text for the "play" pausePlay item
+
+    // Special properties
+    controlsContainer: "",          //{UPDATED} jQuery Object/Selector: Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be $(".flexslider-container"). Property is ignored if given element is not found.
+    manualControls: "",             //{UPDATED} jQuery Object/Selector: Declare custom control navigation. Examples would be $(".flex-control-nav li") or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
+    customDirectionNav: "",         //{NEW} jQuery Object/Selector: Custom prev / next button. Must be two jQuery elements. In order to make the events work they have to have the classes "prev" and "next" (plus namespace)
+    sync: "",                       //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
+    asNavFor: "",                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
+
+    // Carousel Options
+    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
+    itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
+    minItems: 1,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
+    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
+    move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
+    allowOneSlide: true,           //{NEW} Boolean: Whether or not to allow a slider comprised of a single slide
+
+    // Callback API
+    start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
+    before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
+    after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
+    end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
+    added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
+    removed: function(){},           //{NEW} Callback: function(slider) - Fires after a slide is removed
+    init: function() {}             //{NEW} Callback: function(slider) - Fires after the slider is initially setup
+  };
+
+  //FlexSlider: Plugin Function
+  $.fn.flexslider = function(options) {
+    if (options === undefined) { options = {}; }
+
+    if (typeof options === "object") {
+      return this.each(function() {
+        var $this = $(this),
+            selector = (options.selector) ? options.selector : ".slides > li",
+            $slides = $this.find(selector);
+
+      if ( ( $slides.length === 1 && options.allowOneSlide === false ) || $slides.length === 0 ) {
+          $slides.fadeIn(400);
+          if (options.start) { options.start($this); }
+        } else if ($this.data('flexslider') === undefined) {
+          new $.flexslider(this, options);
+        }
+      });
+    } else {
+      // Helper strings to quickly perform functions on the slider
+      var $slider = $(this).data('flexslider');
+      switch (options) {
+        case "play": $slider.play(); break;
+        case "pause": $slider.pause(); break;
+        case "stop": $slider.stop(); break;
+        case "next": $slider.flexAnimate($slider.getTarget("next"), true); break;
+        case "prev":
+        case "previous": $slider.flexAnimate($slider.getTarget("prev"), true); break;
+        default: if (typeof options === "number") { $slider.flexAnimate(options, true); }
+      }
+    }
+  };
+})(jQuery);

altofocus/assets/js/navigation.js

@@ -0,0 +1,227 @@
+/**
+ * File navigation.js.
+ *
+ * Handles toggling the navigation menu for small screens and enables TAB key
+ * navigation support for dropdown menus.
+ */
+
+/* global screenReaderText */
+( function( $ ) {
+
+	var body,
+		masthead           = $( '#masthead' ),
+		menuToggle         = masthead.find( '.menu-toggle' ),
+		siteMenu           = masthead.find( '.top-navigation' ),
+		siteNavigation     = masthead.find( '.top-navigation > div' ),
+		siteBrandingHeight = masthead.find( '.site-branding-wrap' ).outerHeight(),
+		topNavigation      = $( '.top-navigation' );
+
+	/**
+	 * Initialize the main navigation
+	 */
+	function initMainNavigation( container ) {
+
+		// Add parent class to sub-menu parent items
+		container.find( '.sub-menu, .children' ).parents( 'li' ).addClass( 'menu-item-has-children' );
+
+		// Add dropdown toggle button
+		var dropdownToggle = $( '<button />', {
+				'class': 'dropdown-toggle',
+				'aria-expanded': false
+			} ).append( $( '<span />', {
+				'class': 'screen-reader-text',
+				text: screenReaderText.expand
+			})).append( '<span class="meta-nav" aria-hidden="true"><svg class="dropdown-icon dropdown-icon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polyline class="line" points="2.5,3.8 5,6.2 7.5,3.8 "/></svg><svg class="dropdown-icon dropdown-icon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><line class="line" x1="2.5" y1="7.5" x2="7.5" y2="2.5"/><line class="line" x1="2.5" y1="2.5" x2="7.5" y2="7.5"/></svg></span>' );
+
+		container.find( '.menu-item-has-children > a' ).after( dropdownToggle );
+
+		// Change menu items with submenus to aria-haspopup="true".
+		container.find( '.menu-item-has-children' ).attr( 'aria-haspopup', 'true' );
+
+		// Drop down toggle setup
+		container.find( '.dropdown-toggle' ).click( function( e ) {
+
+			var _this            = $( this ),
+			    otherSubMenus    = _this.parents( '.menu-item-has-children' ).siblings( '.menu-item-has-children' ),
+			    screenReaderSpan = _this.find( '.screen-reader-text' );
+
+			// Disable default behavior
+			e.preventDefault();
+
+			// Stop click outside area function
+			e.stopPropagation();
+
+			// Reveal sub-menus
+			_this.not( '.menu-toggle' ).toggleClass( 'toggled-on' );
+			_this.not( '.menu-toggle' ).parent().toggleClass( 'toggled-on' );
+			_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
+
+			// Close other sub-menus if they're open
+			otherSubMenus.removeClass( 'toggled-on' );
+			otherSubMenus.find( '.toggled-on' ).removeClass( 'toggled-on' );
+
+			// jscs:disable
+			_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
+			// jscs:enable
+
+			// Update screen reader text
+			screenReaderSpan.text( screenReaderSpan.text() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
+
+		} );
+
+		// Navigation height should never be shorter than site branding height
+		container.css( "min-height", siteBrandingHeight );
+
+		// Close sub-menus when click outside of menus
+		$( 'html' ).click( function() {
+
+			container.find( '.toggled-on' ).removeClass( 'toggled-on' );
+		});
+
+		// Close expanded sub-menus when clicking links
+		container.find( 'a' ).click( function( e ) {
+
+			var _this         = $( this ),
+				anchor        = _this.attr( 'href' ),
+				otherSubMenus = container.find( '.toggled-on' );
+
+			//console.log(anchor);
+			e.preventDefault();
+
+			otherSubMenus.removeClass( 'toggled-on' ).attr( 'aria-expanded', 'false' ).attr( 'aria-haspopup', 'false' );
+
+			window.location.href = anchor;
+
+		} );
+	}
+
+	/**
+	 * Enable menuToggle
+	 */
+	function enableMenuToggle() {
+
+		// Return early if menuToggle is missing.
+		if ( ! menuToggle.length ) {
+
+			return;
+		}
+
+		// Add an initial values for the attribute.
+		menuToggle.add( siteNavigation ).attr( 'aria-expanded', 'false' );
+
+		menuToggle.on( 'click.altofocus', function() {
+
+			$( this ).toggleClass( 'toggled-on' );
+
+			$( this ).add( siteMenu ).add( siteNavigation ).toggleClass( 'toggled-on' );
+
+			// jscs:disable
+			$( this ).add( siteMenu ).add( siteNavigation ).attr( 'aria-expanded', $( this ).add( siteNavigation ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
+			// jscs:enable
+		} );
+	}
+
+	/**
+	 * Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility
+	 */
+	function addTouchSupport() {
+
+		if ( ! siteNavigation.length || ! siteNavigation.children().length ) {
+
+			return;
+		}
+
+		// Toggle `focus` class to allow submenu access on tablets.
+		function toggleFocusClassTouchScreen() {
+
+			//	if ( window.innerWidth >= 896 ) {
+			$( document.body ).on( 'touchstart.altofocus', function( e ) {
+
+				if ( ! $( e.target ).closest( '.top-navigation li' ).length ) {
+
+					$( '.top-navigation li' ).removeClass( 'focus' );
+				}
+			} );
+
+			siteNavigation.find( '.menu-item-has-children > a' ).on( 'touchstart.altofocus', function( e ) {
+
+				var el = $( this ).parent( 'li' );
+
+				if ( ! el.hasClass( 'focus' ) ) {
+
+					e.preventDefault();
+					el.toggleClass( 'focus' );
+					el.siblings( '.focus' ).removeClass( 'focus' );
+				}
+			} );
+		}
+
+		if ( 'ontouchstart' in window ) {
+
+			$( window ).on( 'resize.altofocus', toggleFocusClassTouchScreen );
+			toggleFocusClassTouchScreen();
+		}
+
+		siteNavigation.find( 'a' ).on( 'focus.altofocus blur.altofocus', function() {
+
+			$( this ).parents( '.menu-item' ).toggleClass( 'focus' );
+		} );
+	}
+
+	/**
+	 * Add the default ARIA attributes for the menu toggle and the navigations
+	 */
+	function onResizeARIA() {
+
+		if ( window.innerWidth < 896 ) {
+
+			if ( menuToggle.hasClass( 'toggled-on' ) ) {
+
+				menuToggle.attr( 'aria-expanded', 'true' );
+				siteMenu.attr( 'aria-expanded', 'true' );
+				siteNavigation.attr( 'aria-expanded', 'true' );
+
+			} else {
+
+				menuToggle.attr( 'aria-expanded', 'false' );
+				siteMenu.attr( 'aria-expanded', 'false' );
+				siteNavigation.attr( 'aria-expanded', 'false' );
+			}
+
+		} else {
+
+			menuToggle.removeAttr( 'aria-expanded' );
+			siteMenu.removeAttr( 'aria-expanded' );
+			siteNavigation.removeAttr( 'aria-expanded' );
+		}
+	}
+
+	/**
+	 * Re-initialize the main navigation when it is updated in the customizer
+	 * - Borrowed from twentysixteen: https://goo.gl/O6msL1
+	 */
+	$( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
+
+		if ( 'menu-1' === params.wpNavMenuArgs.theme_location ) {
+
+			initMainNavigation( params.newContainer );
+		}
+	});
+
+	/**
+	 * Execute functions
+	 */
+	$( document )
+		.ready( initMainNavigation( topNavigation ) )
+		.ready( enableMenuToggle )
+		.ready( addTouchSupport )
+		.ready( function() {
+
+			body = $( document.body );
+
+			$( window )
+				.on( 'load.altofocus', onResizeARIA )
+				.on( 'resize.altofocus', onResizeARIA );
+		});
+
+} )( jQuery );

altofocus/assets/js/scripts.js

@@ -0,0 +1,131 @@
+/*!
+ * Script for AltoFocus
+ *
+ * @package Altofocus
+ */
+
+/* global flexSliderText */
+( function( $ ) {
+
+	/**
+	 * Set variables
+	 */
+	var body,
+		$wrapper        = $( '.js body' ),
+		$widgetlist     = $( '.widget > ul' ).not( '.widget_wpcom_social_media_icons_widget > ul, .widget_author_grid > ul, .jetpack_widget_social_icons > ul' ),
+		$gallery_slider = $( '.flexslider' );
+
+	/**
+	 * Debounce script
+	 */
+	function altofocus_debounce(func, wait, immediate) {
+		var timeout;
+		return function() {
+
+			var context = this,
+				args = arguments;
+
+			var later = function() {
+				timeout = null;
+				if (!immediate) {
+					func.apply(context, args);
+				}
+			};
+
+			var callNow = immediate && !timeout;
+			clearTimeout(timeout);
+			timeout = setTimeout(later, wait);
+			if (callNow) {
+				func.apply(context, args);
+			}
+		};
+	}
+
+	/**
+	 * Stick header to window when scrolling passes the masthead height threshold
+	 */
+	function stickyPageHeader() {
+
+		// get the amount the window has scrolled
+		var scroll        = $( this ).scrollTop(),
+			header_height = $( '#masthead' ).outerHeight(),
+			$page_header  = $( '.hfeed .page-header' );
+
+		// add the 'fixed' class to the header menu based on the window position
+		if ( scroll >= header_height ) {
+
+			$page_header.addClass( 'sticky' );
+
+		} else {
+
+			$page_header.removeClass( 'sticky' );
+		}
+	}
+
+	/**
+	 * Split widget lists
+	 */
+	function initColumnLists() {
+
+		$widgetlist.columnlist({
+			size           : 2,
+			'class'        : 'widget-list',
+			incrementClass : 'widget-list-'
+		});
+	}
+
+	/**
+	 * Init Gallery Slider
+	 */
+	function initGallerySlider() {
+
+		// Determine text direction
+		var $text_direction = true;
+		if ( $( 'html' ).attr( 'dir' ) === 'rtl' ) {
+
+			$text_direction = false;
+		}
+
+		$gallery_slider.flexslider({
+			// options
+			animation:    "slide",
+			selector:     ".slides > .slide",
+			smoothHeight: true,
+			slideshow:    false,
+			rtl:          $text_direction,
+			prevText:     '<span class="screen-reader-text">'+ flexSliderText.previous +'</span> <span class="meta-nav" aria-hidden="true"><svg class="arrow-icon left-arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect class="rectangle" x="0" y="0" width="40" height="40" /><polyline class="arrow" points="27,6 13,20 27,34" /></svg></span>',
+			nextText:     '<span class="screen-reader-text">'+ flexSliderText.next +'</span> <span class="meta-nav" aria-hidden="true"><svg class="arrow-icon right-arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect class="rectangle" x="0" y="0" width="40" height="40" /><polyline class="arrow" points="13 34 27 20 13 6" /></svg></span>',
+		});
+	}
+
+	/*
+	 * Fade in page
+	 * - only if js is enabled
+	 */
+	function fadeInPage() {
+
+		$wrapper.animate({
+			opacity: 1,
+		}, 100);
+	}
+
+	/**
+	 * Execute functions
+	 */
+	$( document )
+		.ready( initColumnLists )
+		.ready( initGallerySlider )
+		.ready( function() {
+
+			body = $( document.body );
+
+			window.addEventListener( 'scroll', altofocus_debounce( stickyPageHeader, 20, 1 ) );
+
+			/**
+			 * Window calls
+			 */
+			$( window )
+				.load( fadeInPage );
+		} );
+
+})(jQuery);

altofocus/assets/js/skip-link-focus-fix.js

@@ -0,0 +1,39 @@
+/**
+ * File skip-link-focus-fix.js.
+ *
+ * Helps with accessibility for keyboard only users.
+ *
+ * Learn more: https://git.io/vWdr2
+ */
+( function() {
+
+	var isWebkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
+	    isOpera  = navigator.userAgent.toLowerCase().indexOf( 'opera' )  > -1,
+	    isIe     = navigator.userAgent.toLowerCase().indexOf( 'msie' )   > -1;
+
+	if ( ( isWebkit || isOpera || isIe ) && document.getElementById && window.addEventListener ) {
+
+		window.addEventListener( 'hashchange', function() {
+
+			var id = location.hash.substring( 1 ),
+				element;
+
+			if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
+
+				return;
+			}
+
+			element = document.getElementById( id );
+
+			if ( element ) {
+
+				if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
+
+					element.tabIndex = -1;
+				}
+
+				element.focus();
+			}
+		}, false );
+	}
+})();

altofocus/assets/stylesheets/components/_components.scss

@@ -0,0 +1,23 @@
+/*--------------------------------------------------------------
+# Header
+--------------------------------------------------------------*/
+@import "header/header";
+
+/*--------------------------------------------------------------
+# Posts
+--------------------------------------------------------------*/
+@import "posts/archives";
+@import "posts/posts";
+@import "posts/single-post";
+@import "posts/404";
+
+/*--------------------------------------------------------------
+# Pages
+--------------------------------------------------------------*/
+@import "pages/single-page";
+@import "pages/static-front-page";
+
+/*--------------------------------------------------------------
+# Footer
+--------------------------------------------------------------*/
+@import "footer/footer";

altofocus/assets/stylesheets/components/footer/_footer.scss

@@ -0,0 +1,59 @@
+/*--------------------------------------------------------------*/
+/* !## Site Footer */
+/*--------------------------------------------------------------*/
+
+.site-footer {
+
+	border-top: 1px solid $color__border-transparent;
+}
+
+.site-footer-wrap {
+
+	padding: 1.5em 0;
+	position: relative;
+	overflow: visible;
+}
+
+.site-info {
+
+	clear: both;
+	float: none;
+	padding: 0 $mobile-gutter;
+	width: 100%;
+}
+
+#wpstats {
+
+	display: none;
+}
+
+@include breakpoint( tablet ) {
+
+	.site-footer-wrap {
+
+		display: flex;
+		flex-direction: row-reverse;
+		justify-content: space-between;
+		padding: 3.5em 0;
+		position: relative;
+		align-items: center;
+		overflow: visible;
+	}
+
+	.site-info {
+
+		bottom: 0;
+		clear: left;
+		float: left;
+		height: 100%;
+		left: 0;
+		position: absolute;
+		width: 60%;
+	}
+
+	.site-info-wrap {
+
+		bottom: ($baseline * 1.5);
+		position: fixed;
+	}
+}

altofocus/assets/stylesheets/components/header/_header.scss

@@ -0,0 +1,208 @@
+/*--------------------------------------------------------------*/
+/* !## Site Header */
+/*--------------------------------------------------------------*/
+
+.site-header {
+
+	background: $color__background-body;
+}
+
+.site-header-wrap {
+
+	position: relative;
+	z-index: 2;
+}
+
+.custom-logo-link {
+
+	display: block;
+	line-height: 0;
+}
+
+.site-identity {
+
+	padding-right: ( $gutter * 1.5 );
+}
+
+.site-branding {
+
+	padding: 0 ( $gutter * .5 );
+
+	.site-title {
+
+		@include site-title();
+		margin: 0;
+	}
+
+	.site-description {
+
+		@include body-copy-small();
+		margin-bottom: 0;
+	}
+
+	a {
+
+		display: inline-block;
+	}
+}
+
+@include breakpoint( mobileonly ) {
+
+	.custom-logo-link {
+
+		margin-bottom: ( $gutter * .6 );
+		max-width: 50%;
+	}
+
+	.site-branding {
+
+		text-align: left;
+		margin-bottom: $mobile-baseline;
+
+		.site-identity {
+
+			padding-right: 100px;
+		}
+
+		.site-title {
+
+			margin-bottom: ( $gutter * .4 );
+			width: calc( 100% + 100px );
+
+			&:last-child {
+
+				width: inherit;
+			}
+		}
+
+		.hide-site-title-description & .custom-logo-link,
+		.site-identity > *:last-child {
+
+			margin-bottom: 0;
+		}
+	}
+}
+
+@include breakpoint( phablet ) {
+
+	.site-header {
+
+		position: relative;
+		overflow: visible;
+	}
+
+	.site-branding {
+
+		display: inline-block;
+		vertical-align: top;
+		width: calc( 70% - #{$gutter} );
+	}
+
+	.admin-bar .site-branding-wrap {
+
+		top: calc( #{ $baseline } + #{ $admin-bar-height } );
+	}
+
+	.site-header-wrap {
+
+		padding: ( $baseline ) 0;
+	}
+}
+
+@include breakpoint( tablet ) {
+
+	.site-header-wrap {
+
+		display: flex;
+		flex-direction: row-reverse;
+		justify-content: space-between;
+		padding: ( $baseline * 2 ) 0;
+		position: relative;
+		align-items: center;
+		overflow: visible;
+	}
+
+	.site-branding {
+
+		align-content: center;
+		clip: rect( 0, auto, auto, 0 );
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		justify-content: center;
+		left: 0;
+		padding: ( $baseline * 2 ) 30% ( $baseline * 2 ) 0;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		z-index: 1;
+	}
+
+	.site-branding-wrap {
+
+		align-items: center;
+		display: flex;
+		flex-direction: row;
+		flex: 3 1 50%;
+		flex-wrap: nowrap;
+		justify-content: center;
+		position: fixed;
+		top: ( $baseline * 2 );
+
+		.custom-logo-link {
+
+			flex: 1 0 144px;
+			padding: 0 ( $gutter * .5 ) 0 0;
+
+			.custom-logo {
+
+				max-width: 100%;
+			}
+		}
+
+		.admin-bar & {
+
+			top: calc( #{ $baseline * 2 } + #{ $admin-bar-height } );
+		}
+
+		.hide-site-title-description & {
+
+			width: calc( 80% * .725 );
+
+			.custom-logo-link {
+
+				flex: 5 0 80%;
+				padding: 0;
+
+				.custom-logo {
+
+					max-width: 50%;
+				}
+			}
+		}
+
+		.wp-custom-logo & {
+
+			width: calc( 80% * .725 );
+		}
+
+		.site-identity {
+
+			flex: 4 1 80%;
+			padding: 0 ( $gutter * .5 ) 0 0;
+		}
+
+		.site-title {
+
+			@include font-size( 2.1375 );
+		}
+
+		.site-description {
+
+			@include font-size();
+			margin-bottom: 0;
+			max-width: 40em;
+		}
+	}
+}
+

altofocus/assets/stylesheets/components/navigation/_navigation-fixed.scss

@@ -0,0 +1,121 @@
+/*--------------------------------------------------------------*/
+/* !## Fixed Post Navigation */
+/*--------------------------------------------------------------*/
+
+.post-navigation-fixed {
+
+	display: none;
+}
+
+@include breakpoint( desktop ) {
+
+	.post-navigation-fixed {
+
+		clip: rect( 0, auto, auto, 0 );
+		display: block;
+		height: 100%;
+		position: absolute;
+		width: 100%;
+		top: 0;
+
+		.nav-links {
+
+			position: fixed;
+			bottom: ( $baseline * 2 );
+			width: 100%;
+			z-index: 2;
+
+			.nav-previous,
+			.nav-next {
+
+				display: block;
+				float: left;
+				margin-left: $gutter;
+				overflow: visible;
+			}
+
+			.nav-next {
+
+				float: right;
+				margin-left: inherit;
+				margin-right: $gutter;
+			}
+
+			a {
+
+				@include font-size(1.5);
+				display: block;
+				height: 40px;
+				width: 40px;
+
+				-webkit-transition: all 0.3s ease;
+				-moz-transition: 	all 0.3s ease;
+				-o-transition: 		all 0.3s ease;
+				-ms-transition: 	all 0.3s ease;
+				transition: 		all 0.3s ease;
+
+				.meta-nav {
+
+					display: block;
+					height: 40px;
+					width: 40px;
+
+					.arrow-icon {
+
+						@include prefix( filter, drop-shadow( 1px 3px 2px rgba(0, 0, 0, 0.33) ) );
+						overflow: visible;
+
+						.circle,
+						.arrow {
+
+							stroke-miterlimit: 10;
+							-webkit-transition: all 0.3s ease;
+							-moz-transition: 	all 0.3s ease;
+							-o-transition: 		all 0.3s ease;
+							-ms-transition: 	all 0.3s ease;
+							transition: 		all 0.3s ease;
+						}
+
+						.circle {
+
+							fill: $color__background-body;
+							stroke: $color__border-transparent;
+							stroke-width: 1px;
+						}
+
+						.arrow {
+
+							fill: none;
+							stroke: $color__text-main;
+							stroke-width: 2px;
+						}
+					}
+				}
+
+				&:active,
+				&:hover,
+				&:focus {
+
+					@include animation('bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)');
+					opacity: 1;
+
+					.meta-nav .arrow-icon .circle {
+
+							fill: $color__link;
+							stroke: $color__link
+					}
+
+					.meta-nav .arrow-icon .arrow {
+
+							stroke: $color__background-body;
+					}
+				}
+			}
+
+			.nav-next a .meta-nav {
+
+				margin-left: -3px;
+			}
+		}
+	}
+}

altofocus/assets/stylesheets/components/navigation/_navigation-top.scss

@@ -0,0 +1,577 @@
+/*--------------------------------------------------------------*/
+/* !## Top Navigation */
+/*--------------------------------------------------------------*/
+
+/*
+ * Top Navigation
+ */
+.top-navigation {
+
+	clear: both;
+	display: table;
+	float: none;
+	position: relative;
+	text-align: left;
+	width: 100%;
+	align-self: flex-end;
+	z-index: 10;
+
+	.col-width {
+
+		width: 100%;
+	}
+
+	& > div {
+
+		background: $color__background-body;
+		float: right;
+		height: auto;
+		max-height: 0;
+		opacity: 0;
+		overflow: hidden;
+		position: relative;
+		width: 100%;
+		-webkit-transition: max-height 0.3s ease, opacity 0.3s ease;
+		-moz-transition: max-height all 0.3s ease, opacity 0.3s ease;
+		transition: max-height all 0.3s ease, opacity 0.3s ease;
+
+		& > ul {
+
+			margin-top: $baseline;
+			text-align: left;
+		}
+	}
+
+	ul {
+
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	li {
+
+		a {
+
+			display: block;
+			@include list-item();
+			padding: 1em ($gutter * .5);
+		}
+
+		&.current_page_ancestor > a,
+		&.current-page-parent > a,
+		&.current_page_item > a,
+		& > a:focus {
+
+			text-decoration: underline;
+		}
+	}
+
+	/*
+	 * Sub-menus
+	 */
+	.sub-menu,
+	.children {
+
+		height: auto;
+		max-height: 0;
+		visibility: hidden;
+		opacity: 0;
+		overflow: hidden;
+		position: relative;
+		width: 100%;
+
+		li > a {
+
+			margin-left: ($gutter + 3);
+			padding-left: 0;
+			position: relative;
+
+			&:after {
+
+				content: '\2022';
+				font-family: 'FontAwesome';
+				font-weight: normal;
+				left: -15px;
+				position: absolute;
+				top: 5px;
+			}
+		}
+
+		&.toggled-on {
+
+			max-height: 9999px;
+			opacity: 1;
+			visibility: visible;
+			width: 100%;
+		}
+	}
+}
+
+/*
+ * Dropdown toggle buttons
+ */
+.dropdown-toggle {
+
+	background: $color__background-body;
+	border: 1px solid $color__border-transparent;
+	box-shadow: 0 0 0 $color__border-transparent;
+	color: $color__text-main;
+	display: inline-block;
+	height: 32px;
+	line-height: 5px;
+	margin: 0;
+	padding: 3px;
+	speak: none;
+	z-index: 5;
+	width: 32px;
+	-moz-border-radius: 20px;
+	-webkit-border-radius: 20px;
+	-khtml-border-radius: 20px;
+	border-radius: 20px;
+
+	.meta-nav .dropdown-icon .line {
+
+		fill: none;
+		stroke-width: 1px;
+		stroke: $color__text-main;
+		stroke-miterlimit: 10;
+	}
+
+	.meta-nav .dropdown-icon-close {
+
+		display: none;
+	}
+
+	&:active,
+	&:focus {
+
+		border-color: $color__border-transparent;
+	}
+
+	&:hover {
+
+		background: $color__link;
+		border-color: $color__link;
+		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+
+		.meta-nav .dropdown-icon .line {
+
+			stroke: $color__background-body;
+		}
+	}
+
+	&.toggled-on {
+
+		background: $color__link;
+		border-color: $color__link;
+		box-shadow: 0 0 0 $color__border-transparent;
+
+		& > div {
+
+			max-height: 9999px;
+			opacity: 1;
+			z-index: 999;
+		}
+
+		.meta-nav .dropdown-icon-open {
+
+			display: none;
+		}
+
+		.meta-nav .dropdown-icon-close {
+
+			display: inline-block;
+		}
+
+		.meta-nav .dropdown-icon .line {
+
+			stroke: $color__background-body;
+		}
+	}
+}
+
+/*
+ * Menu Toggle
+ */
+.menu-toggle {
+
+	@include list-header();
+	background: $color__background-body;
+	cursor: pointer;
+	display: none;
+	font-weight: 500;
+	line-height: 20px;
+	text-align: left;
+
+	.meta-nav {
+
+		display: inline-block;
+		height: 18px;
+		width: 16px;
+		vertical-align: middle;
+
+		.menu-icon .line {
+
+			fill: none;
+			stroke: $color__text-main;
+			stroke-miterlimit:10;
+		}
+
+		.menu-icon-close {
+
+			display: none;
+		}
+	}
+
+	&:hover .meta-nav {
+
+		.menu-icon .line {
+
+			stroke: $color__background-body;
+		}
+	}
+
+	&:active .meta-nav,
+	&:focus .meta-nav {
+
+		.menu-icon .line {
+
+			stroke: $color__background-body;
+		}
+	}
+
+	&[aria-expanded="true"] .meta-nav {
+
+		.menu-icon-open {
+
+			display: none;
+		}
+
+		.menu-icon-close {
+
+			display: block;
+		}
+	}
+}
+
+/*--------------------------------------------------------------*/
+/* !## Mobile and Down Navigation */
+/*--------------------------------------------------------------*/
+
+@include breakpoint( mobileonly ) {
+
+	/*
+	 * Top Navigation
+	 */
+	.top-navigation {
+
+		display: block;
+		padding: 0;
+		text-align: right;
+
+		@include transition( max-height, 0.3s, ease );
+		@include transition( opacity, 0.3s, ease );
+
+		&.toggled-on > div {
+
+			background: transparent;
+			max-height: 9999px;
+			opacity: 1;
+			width: 100%;
+			z-index: 999;
+
+			& > ul {
+
+				margin-top: 0;
+			}
+		}
+
+		/*
+		 * Sub-menu top borders
+		 *
+		 * Using a psuedo class for top borders in
+		 * menu on mobile so that we don't need
+		 * media queries in our color annotations.
+		 */
+		.sub-menu,
+		.children {
+
+			border-top: none;
+			position: relative;
+			padding-left: ($gutter * .6);
+			-webkit-transition: all 0.375s ease;
+			-moz-transition:    all 0.375s ease;
+			transition:         all 0.375s ease;
+
+			&:before,
+			&:before {
+
+				content: "";
+				border-top: 1px solid $color__border-transparent;
+				height: 1px;
+				left: 0;
+				position: absolute;
+				top: 0;
+				width: 100%;
+			}
+
+			li > a:after {
+
+				top: 15px;
+			}
+		}
+
+		/*
+		 * Sub-menu bottom borders
+		 *
+		 * Using a psuedo class for bottom borders
+		 * in menu on mobile so that we don't need
+		 * media queries in our color annotations.
+		 **/
+		& > div > ul {
+
+			border-top: 1px solid $color__border-transparent;
+		}
+
+		li {
+
+			position: relative;
+
+			a {
+
+				position: relative;
+				z-index: 1;
+			}
+
+			&:after {
+
+				content: "";
+				bottom: 0;
+				border-bottom: 1px solid $color__border-transparent;
+				height: 1px;
+				left: 0;
+				position: absolute;
+				width: 100%;
+			}
+
+			&.sub-menu,
+			&.children {
+
+				li > a:after {
+
+					top: ($gutter * .5 + 3px);
+				}
+			}
+
+			&.menu-item-has-children > a {
+
+				padding-right: ($gutter * 1.75);
+			}
+		}
+
+		ul:last-of-type > li:last-of-type:after {
+
+			border-bottom: none;
+		}
+
+		&[style] {
+
+			min-height: inherit !important;
+		}
+	}
+
+	/*
+	 * Dropdown toggle buttons
+	 */
+	.dropdown-toggle {
+
+		position: absolute;
+		right: 5px;
+		top: 5px;
+
+		&:after {
+
+			line-height: 0.2;
+		}
+	}
+
+	/*
+	 * Menu Toggle
+	 */
+	.menu-toggle {
+
+		bottom: calc( 100% + #{$mobile-baseline} );
+		display: block;
+		padding: ($baseline * .5) ($gutter * .5);
+		position: absolute;
+		right: 10px;
+	}
+}
+
+/*--------------------------------------------------------------*/
+/* !## Phablet and Up Navigation */
+/*--------------------------------------------------------------*/
+
+@include breakpoint( phablet ) {
+
+	/*
+	 * Top Navigation
+	 */
+	.top-navigation {
+
+		display: inline-block;
+		font-size: 16px;
+		height: inherit;
+		margin: 0;
+		overflow: visible;
+		position: relative;
+		vertical-align: middle;
+		width: 30%;
+
+		& > div {
+
+			display: flex;
+			float: none;
+			flex-wrap: nowrap;
+			max-height: inherit;
+			position: relative;
+			opacity: 1;
+			overflow: visible;
+			width: 100%;
+		}
+
+		div > ul {
+
+			list-style-type: none;
+			margin: 0;
+			padding: 0;
+			position: relative;
+			text-align: left;
+			z-index: 1;
+
+			// Top-level list items
+			& > li {
+
+				display: block;
+				position: relative;
+				z-index: 2;
+
+				a {
+
+					display: inline-block;
+					padding: 5px 8px;
+					text-align: left;
+				}
+
+				// Top-level menu items with sub-menus
+				&.menu-item-has-children {
+
+					margin-left: -20px;
+
+					& > a {
+
+						margin-left: 28px;
+						padding-left: 0;
+					}
+				}
+
+				&.toggled-on {
+
+					box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.25);
+				}
+			}
+
+			// All other ist items
+			li {
+
+				&.toggled-on {
+
+					@include animation('bounce-reveal-y .25s cubic-bezier(0.645, 0.045, 0.355, 1)');
+					background: $color__link;
+					z-index: 3;
+
+					a {
+						color: #FFF;
+					}
+
+				}
+			}
+
+			& > li > .sub-menu,
+			& > li > .children {
+
+				border-top: 1px solid $color__background-body;
+			}
+		}
+
+		.sub-menu,
+		.children {
+
+			background: $color__link;
+			box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.25);
+			position: absolute;
+			z-index: 10;
+
+			li {
+
+				position: relative;
+
+				a {
+
+					color: $color__background-body;
+				}
+			}
+
+			& > li.toggled-on {
+
+				border-top: 1px solid $color__background-body;
+				margin-top: -1px;
+			}
+
+			.sub-menu,
+			.children {
+
+				border-bottom: 1px solid $color__background-body;
+				box-shadow: 0 0 0 $color__border-transparent;
+				margin-bottom: -1px;
+				padding-left: ($gutter * .6);
+				position: relative;
+			}
+		}
+	}
+
+	/*
+	 * Dropdown toggle buttons
+	 */
+	.dropdown-toggle {
+
+		border: none;
+		box-shadow: none;
+		float: left;
+		height: 20px;
+		left: 5px;
+		padding: 1px;
+		position: absolute;
+		top: 3px;
+		width: 20px;
+
+		&:focus {
+
+			box-shadow: none;
+		}
+	}
+}
+
+/*--------------------------------------------------------------*/
+/* !## Tablet and Up Navigation */
+/*--------------------------------------------------------------*/
+
+@include breakpoint( tablet ) {
+
+	.top-navigation {
+
+		clear: right;
+		float: right;
+	}
+}

altofocus/assets/stylesheets/components/navigation/_social-menu.scss

@@ -0,0 +1,55 @@
+/*--------------------------------------------------------------*/
+/* !## Footer Social Menu */
+/*--------------------------------------------------------------*/
+
+.site-footer .jetpack-social-navigation {
+
+	clear: both;
+	float: none;
+	padding: 0 $mobile-gutter;
+	width: 100%;
+
+	ul {
+
+		margin-bottom: ($baseline * .5);
+	}
+
+	li {
+
+		@include font-size(1.5);
+
+		a {
+
+			padding: 0 10px 0 0;
+		}
+	}
+}
+
+@include breakpoint( tablet ) {
+
+	.site-footer .jetpack-social-navigation {
+
+		bottom: 0;
+		clear: right;
+		float: right;
+		height: 100%;
+		padding: 0;
+		position: absolute;
+		right: 0;
+		width: 40%;
+
+		ul {
+
+			margin-bottom: 0;
+			text-align: right;
+		}
+
+		& > div {
+
+			bottom: ($baseline * 1.5);
+			max-width: calc(75em * .40 - #{$gutter / 2});
+			position: fixed;
+			width: calc(90% * .40 - #{$gutter / 2});
+		}
+	}
+}

altofocus/assets/stylesheets/components/pages/_single-page.scss

@@ -0,0 +1,76 @@
+/*--------------------------------------------------------------*/
+/* !## Single Page */
+/*--------------------------------------------------------------*/
+
+.page-links {
+
+	clear: both;
+	margin: 0 0 $baseline;
+}
+
+.page .hentry.page {
+
+	padding: $baseline 0;
+	@include non-border(1px solid $color__border-transparent, top);
+
+	&:before {
+
+		margin-left: -50%;
+		width: 200%;
+	}
+
+	.entry-header {
+
+		display: table;
+		margin: 0 0 ($baseline);
+		position: relative;
+		width: 100%;
+	}
+
+	.entry-title {
+
+		@include article-title();
+		margin-bottom: 0;
+	}
+
+	.entry-meta {
+
+		@include gutter-width(100%);
+	}
+
+	.entry-header .entry-title,
+	.entry-content {
+
+		@include gutter-width(100%);
+	}
+}
+
+@include breakpoint( tablet ) {
+
+	.page .hentry.page {
+
+		padding: ($baseline * 2) 5%;
+
+		.entry-header {
+
+			margin-bottom: ($baseline * 2);
+		}
+
+		.entry-title {
+
+			float: left;
+		}
+
+		.entry-header .entry-title,
+		.entry-content {
+
+			@include gutter-width( #{((100% / 8) * 6)} );
+		}
+
+		.entry-meta {
+
+			@include gutter-width( #{((100% / 8) * 2)} );
+			float: right;
+		}
+	}
+}

altofocus/assets/stylesheets/components/pages/_static-front-page.scss

@@ -0,0 +1,8 @@
+/*--------------------------------------------------------------*/
+/* !## Static Front Page */
+/*--------------------------------------------------------------*/
+
+.home.page .hentry.page:before {
+
+	display: none;
+}

altofocus/assets/stylesheets/components/posts/_404.scss

@@ -0,0 +1,101 @@
+/*--------------------------------------------------------------*/
+/* !## 404 */
+/*--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## Archives */
+/*--------------------------------------------------------------*/
+
+.hfeed:not(.home):not(.blog).error404,
+.hfeed:not(.home):not(.blog).search-no-results {
+
+	// Search form
+	.search-form {
+
+		padding: 0;
+		width: 100%;
+
+		.screen-reader-text {
+
+			@include widget-title();
+			margin-bottom: 0;
+			padding: 0 ($gutter / 2);
+			width: 100%;
+			flex: 1 1 100%;
+			float: left;
+		}
+
+		.search-field {
+
+			float: left;
+			padding: 10px ( $gutter / 2 );
+			margin: 0 0 ( $baseline * .5 );
+			width: calc( 100% - #{$gutter} );
+		}
+
+		.search-submit {
+			clear: both;
+			float: none;
+		}
+	}
+
+	&.search-no-results #main #infinite-handle {
+
+		display: none;
+	}
+}
+
+@include breakpoint( mobileonly ) {
+
+	.hfeed {
+
+	}
+}
+
+@include breakpoint( phablet ) {
+
+	.hfeed {
+
+	}
+}
+
+@include breakpoint( tablet ) {
+
+	.hfeed {
+
+	}
+}
+
+@include breakpoint( laptop ) {
+
+	.hfeed:not(.home):not(.blog).error404,
+	.hfeed:not(.home):not(.blog).search-no-results {
+
+		.site-main {
+
+			margin-left: 20%;
+			margin-right: 20%;
+			padding: 0;
+			width: calc( 60% - #{ $gutter * 2 } );
+
+			.not-found {
+
+				padding-top: ( $baseline * 2.5 );
+
+				.page-header {
+
+					max-width: inherit;
+					padding-top: inherit;
+					position: inherit;
+					right: inherit;
+
+					.page-title {
+
+						@include article-title();
+						padding: 0;
+					}
+				}
+			}
+		}
+	}
+}

altofocus/assets/stylesheets/components/posts/_archives.scss

@@ -0,0 +1,728 @@
+/*--------------------------------------------------------------*/
+/* !## Archives */
+/*--------------------------------------------------------------*/
+
+.hfeed {
+
+	.content-area {
+
+		border-top: 1px solid $color__border-transparent;
+	}
+
+	.site-main {
+
+		overflow: visible;
+		padding: 0;
+		position: relative;
+	}
+
+	// Page header
+	.page-header {
+
+		border-bottom: 1px solid $color__border-transparent;
+		padding: ( $baseline ) 0;
+		position: relative;
+
+		.page-title {
+
+			@include widget-title();
+			@include font-size(1);
+			color: $color__text-main;
+			margin: 0;
+			padding: 0 ( $gutter / 2 );
+		}
+
+		.taxonomy-description {
+
+			@include body-copy-small();
+			color: $color__link-hover;
+			padding: 0 ( $gutter / 2 );
+		}
+	}
+
+	.sticky-wrapper {
+
+		position: relative;
+		width: 100%;
+	}
+
+	// Posts
+	.hentry {
+
+		padding: #{ $gutter * .5 };
+		@include non-border( 1px solid $color__border-transparent, bottom );
+
+		&:before {
+
+			width: calc(100% + #{ $gutter });
+			left: #{ -$gutter * .5 };
+		}
+
+		.entry-header-wrap {
+
+			span {
+
+				display: block;
+				width: 100%;
+			}
+
+			.entry-title {
+
+				padding: 0 #{$gutter * .2};
+				@include nav-title(1);
+			}
+
+			.posted-on {
+
+				@include list-item();
+				@include body-copy-small();
+				padding: 0 #{$gutter * .2};
+			}
+		}
+
+		.entry-header {
+
+			.edit-link {
+
+			padding: 0 5px;
+		}
+		}
+
+		.post-thumbnail {
+
+			img {
+
+				margin: 1px auto;
+				max-width: calc(100% - 2px);
+				display: block;
+				position: relative;
+			}
+		}
+	}
+
+	// Infinite Scroll
+	.has-isotope #infinite-handle,
+	.has-isotope .infinite-loader {
+
+		margin-right: auto;
+		overflow: visible;
+	}
+
+	// Navigation
+	.posts-navigation,
+	#infinite-handle,
+	.infinite-loader {
+
+		top: 100%;
+	}
+
+	// Navigation
+	.posts-navigation {
+
+		top: calc( 100% + #{$baseline} );
+		margin: 0 #{(-$baseline * .75)};
+
+		.nav-links {
+			padding: 0 #{$baseline * .75};
+		}
+	}
+
+}
+
+@include breakpoint( mobileonly ) {
+
+	.hfeed {
+
+		// Posts
+		.hentry {
+
+			.entry-header-wrap .entry-title {
+
+				@include font-size( 1.25 );
+			}
+
+			.post-thumbnail {
+
+				margin-bottom: #{ $gutter * .5 };
+			}
+
+			&.grid-item-featured {
+
+				background: $color__link;
+
+				.entry-header-wrap {
+
+					color: $color__background-body;
+
+					.posted-on {
+
+						color: $color__background-body;
+					}
+				}
+			}
+		}
+
+		// Infinite Scroll
+		.has-isotope .infinite-loader {
+
+			padding-top: #{ $baseline * 2.75 };
+		}
+
+		#infinite-handle span {
+
+			margin-top: inherit;
+		}
+
+		// Navigation
+		.posts-navigation {
+
+			top: calc( 100% );
+		}
+	}
+}
+
+@include breakpoint( phablet ) {
+
+	.hfeed {
+
+		.content-area {
+
+			padding-top: $gutter;
+		}
+
+		.site-main {
+
+			width: calc( 100% - #{ $gutter * 1.5 } );
+
+			.grid-item-featured:not(.has-post-thumbnail) .entry-header .entry-title {
+
+				@include nav-title();
+			}
+
+			.hentry {
+
+				float: left;
+				margin: 0;
+			}
+		}
+
+		// Page header
+		.page-header {
+
+			border-bottom: none;
+			display: block;
+			margin: 0;
+			padding: 0 #{ $gutter * 1.5 };
+			position: relative;
+			top: 0;
+			width: 100%;
+
+			.page-title {
+
+				@include widget-title();
+				@include font-size( 1.125 );
+				margin-bottom: 0;
+			}
+		}
+
+		.sticky-wrapper {
+
+			position: absolute;
+			width: 20%;
+		}
+
+		// Posts
+		.hentry {
+
+			float: left;
+			margin: 0;
+			padding: 0;
+			position: relative;
+
+			.entry-header {
+
+				border: 1px solid $color__border-transparent;
+				margin: ( $gutter * .75 );
+				padding: ( $gutter * .75 ) ( $gutter * .5 );
+				text-align: center;
+
+				// Scale to normal on mouse out
+				@include transition( all, 0.25s, cubic-bezier(0.175, 0.885, 0.32, 1.275) );
+
+			}
+
+			.entry-header-wrap {
+
+				align-items: center;
+				align-content: center;
+				display: flex;
+				flex-wrap: nowrap;
+				flex-direction: column;
+				height: 100%;
+				justify-content: center;
+				color: $color__link;
+
+				&:focus,
+				&:hover,
+				&:active {
+
+					opacity: 1;
+				}
+
+				.posted-on {
+
+					color: $color__link;
+					opacity: .66;
+				}
+			}
+
+			.entry-title {
+
+				margin: 0 0 ($gutter * .125);
+				max-width: 90%;
+				min-height: 2em;
+				word-break: break-word;
+			}
+
+			.posted-on {
+
+				margin: ($gutter * .125) 0 0;
+				padding: 0;
+			}
+
+			&.has-post-thumbnail {
+
+				.entry-header {
+
+					border: 1px solid $color__border-transparent;
+					margin: 0;
+					opacity: 0;
+					padding: 0;
+					position: absolute;
+					left: ( $gutter * .75 );
+					top: ( $gutter * .75 );
+					height: calc(100% - #{($gutter * 1.5)});
+					width: calc(100% - #{($gutter * 1.5)});
+					text-align: center;
+
+					// Scale to normal on mouse out
+					@include transition( all, 0.25s, cubic-bezier(0.175, 0.885, 0.32, 1.275) );
+				}
+
+				.post-thumbnail {
+
+					// Scale to normal on mouse out
+					@include transition( all, 0.25s, cubic-bezier(0.175, 0.885, 0.32, 1.275) );
+
+					a {
+
+						display: block;
+						line-height: 0;
+						padding: ($gutter * .75);
+					}
+
+					&:after {
+
+						@include transition( opacity, 0.25s, ease-out );
+						content: "";
+						opacity: 0;
+						position: absolute;
+						left: ($gutter * .75);
+						top: ($gutter * .75);
+						height: calc( 100% - #{($gutter * 1.5)} );
+						width: calc( 100% - #{($gutter * 1.5)} );
+						background: $color__background-body;
+					}
+				}
+
+				.edit-link {
+
+					left: 50%;
+					position: absolute;
+					bottom: ($baseline * .5);
+					transform: translate(-50%, 0);
+
+					a {
+
+						color: $color__link;
+					}
+				}
+
+				&.grid-item-small {
+
+					.entry-header {
+
+						margin: ( $gutter * .75 );
+						padding: ( $gutter * .75 ) ( $gutter * .5 );
+						position: relative;
+						left: 0;
+						top: inherit;
+						height: inherit;
+					}
+
+					.post-thumbnail {
+
+						position: absolute;
+						width: 100%;
+						height: 100%;
+
+						img {
+
+							@include center-align( absolute );
+							max-width: calc( 100% - #{( $gutter * 1.5 )} - 2px );
+							max-height: calc( 100% - #{( $gutter * 1.5 )} - 2px );
+						}
+					}
+
+					&.grid-item-landscape {
+
+						.post-thumbnail img {
+
+							max-width: calc( 100% - #{( $gutter * 1.5 )} - 2px );
+							max-height: calc( 100% - #{( $gutter * 1.5 )} - 2px );
+						}
+					}
+
+					&.grid-item-portrait {
+
+						.post-thumbnail img {
+
+							max-width: calc( 100% - #{( $gutter * 1.5 )} - 2px );
+							max-height: calc( 100% - #{( $gutter * 1.5 )} - 2px );
+							width: auto;
+						}
+					}
+
+					.edit-link {
+
+						left: inherit;
+						position: relative;
+						bottom: inherit;
+						transform: inherit;
+					}
+				}
+			}
+
+			// Featured post
+			&.grid-item-featured {
+
+				.entry-title {
+
+					@include font-size( 1.5 );
+				}
+
+				.post-thumbnail:after {
+
+					background: $color__link;
+				}
+
+				.entry-header-wrap {
+
+					color: $color__background-body;
+
+					.posted-on {
+
+						color: $color__background-body;
+					}
+				}
+
+				&.grid-item-small .entry-title {
+
+					@include font-size( 1 );
+				}
+			}
+
+			// Posts without featured images
+			&:not(.has-post-thumbnail),
+			&.grid-item-featured:not(.has-post-thumbnail) {
+
+				.entry-header {
+
+					background: $color__background-body;
+					border-color: $color__border-transparent;
+					opacity: 1;
+				}
+
+				.entry-header-wrap {
+
+					color: $color__link;
+
+					.posted-on {
+
+						color: $color__link;
+					}
+				}
+
+				&:hover {
+
+					.entry-header {
+
+						box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.25);
+					}
+				}
+
+				&:after {
+
+					content: "";
+					display: none;
+				}
+			}
+
+			// Scale up on hover
+			&:hover {
+
+				.entry-header {
+
+					box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.25);
+					opacity: 1;
+					@include transform( scale, 1.125 );
+				}
+
+				.post-thumbnail {
+
+					@include transform( scale, 1.125 );
+
+					&:after {
+
+						opacity: .92;
+					}
+				}
+
+				&.has-post-thumbnail .edit-link a {
+
+					color: $color__link;
+				}
+			}
+
+			// Scale down on click
+			&:active {
+
+				.entry-header {
+
+					box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+				}
+			}
+
+			&:before {
+
+				display: none;
+			}
+		}
+	}
+}
+
+@include breakpoint( tablet ) {
+
+	.hfeed {
+
+		// Posts
+		.hentry {
+
+			.entry-header {
+
+				border: 1px solid $color__border-transparent;
+				margin: ( $gutter );
+				padding: ( $gutter ) ( $gutter * .5 );
+			}
+
+			&.has-post-thumbnail {
+
+				.entry-header {
+
+					left: ( $gutter );
+					top: ( $gutter );
+					height: calc( 100% - #{($gutter * 2)} );
+					width: calc( 100% - #{($gutter * 2)} );
+				}
+
+				.post-thumbnail {
+
+					a {
+
+						padding: ( $gutter );
+					}
+
+					&:after {
+
+						left: ( $gutter );
+						top: ( $gutter );
+						height: calc( 100% - #{($gutter * 2)} );
+						width: calc( 100% - #{($gutter * 2)} );
+					}
+				}
+
+				&.grid-item-small {
+
+					.entry-header {
+
+						margin: ( $gutter );
+						padding: ( $gutter ) ( $gutter * .5 );
+						position: relative;
+						left: 0;
+						top: 0;
+						height: inherit;
+					}
+
+					.post-thumbnail img {
+
+						max-width: calc( 100% - #{($gutter * 2)} );
+						max-height: calc( 100% - #{( $gutter * 2 )};
+					}
+
+					&.grid-item-landscape {
+
+						.post-thumbnail img {
+
+							max-width: calc( 100% - #{( $gutter * 2 )} - 2px );
+							max-height: calc( 100% - #{( $gutter * 2 )} - 2px );
+						}
+					}
+
+					&.grid-item-portrait {
+
+						.post-thumbnail img {
+
+							max-width: calc( 100% - #{( $gutter * 2 )} - 2px );
+							max-height: calc( 100% - #{( $gutter * 2 )} - 2px );
+							width: auto;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+@include breakpoint( laptop ) {
+
+	.hfeed {
+
+		.content-area {
+
+			position: relative;
+
+			.page-header {
+
+				border-bottom: none;
+				max-width: calc( 20% - #{ $gutter * 2.5 } );
+				padding: ( $baseline * 2.5 ) 0 0;
+				position: absolute;
+				left: #{ $gutter * 2.5 };
+
+				.page-title {
+
+					@include font-size( 1.125 );
+					margin-bottom: ( $baseline * .5 );
+				}
+
+				&.sticky {
+
+					left: inherit;
+					padding-top: calc( #{$baseline * 2.5} );
+					position: fixed;
+					right: calc( 80% );
+				}
+			}
+		}
+
+		.hentry {
+
+			.entry-header {
+
+				margin: ( $gutter * 1.5 );
+				padding: ( $gutter * 1.5 ) ( $gutter * .5 );
+			}
+
+			&.has-post-thumbnail {
+
+				.entry-header {
+
+					left: ( $gutter * 1.5 );
+					top: ( $gutter * 1.5 );
+					height: calc( 100% - #{($gutter * 3)} );
+					width: calc( 100% - #{($gutter * 3)} );
+				}
+
+				.post-thumbnail {
+
+					a {
+
+						padding: ( $gutter * 1.5 );
+					}
+
+					&:after {
+
+						left: ($gutter * 1.5);
+						top: ($gutter * 1.5);
+						height: calc(100% - #{($gutter * 3)});
+						width: calc(100% - #{($gutter * 3)});
+					}
+				}
+
+				&.grid-item-small {
+
+					.entry-header {
+
+						margin: ( $gutter * 1.5 );
+						padding: ( $gutter * 1.5 ) ( $gutter * .5 );
+					}
+
+					.post-thumbnail img {
+
+						max-width: calc( 100% - #{($gutter * 3)} );
+						max-height: calc( 100% - #{( $gutter * 3 )};
+					}
+
+					&.grid-item-landscape {
+
+						.post-thumbnail img {
+
+							max-width: calc( 100% - #{( $gutter * 3 )} - 2px );
+							max-height: calc( 100% - #{( $gutter * 3 )} - 2px );
+						}
+					}
+
+					&.grid-item-portrait {
+
+						.post-thumbnail img {
+
+							max-width: calc( 100% - #{( $gutter * 3 )} - 2px );
+							max-height: calc( 100% - #{( $gutter * 3 )} - 2px );
+							width: auto;
+						}
+					}
+				}
+			}
+		}
+
+		.posts-navigation {
+
+			margin: 0 #{ $gutter * 1.5 };
+		}
+
+		&.blog:not(.home),
+		&:not(.home):not(.blog) {
+
+			.site-main {
+
+				margin-left: 25%;
+				margin-right: auto;
+				padding: 0;
+				width: calc( 75% - #{ $gutter } );
+
+				#infinite-handle,
+				.infinite-loader {
+
+					right: calc( 12.5% + #{ $gutter * 1.5 } );
+					width: 100%;
+				}
+			}
+
+			// Adjust sticky page header for admin bar
+			&.admin-bar .page-header.sticky {
+
+				padding-top: calc( #{ $baseline * 2.5 } + #{ $admin-bar-height } );
+			}
+		}
+	}
+}

altofocus/assets/stylesheets/components/posts/_posts.scss

@@ -0,0 +1,180 @@
+/*--------------------------------------------------------------*/
+/* !## Posts */
+/*--------------------------------------------------------------*/
+
+.sticky {
+
+	display: block;
+}
+
+.hentry {
+
+	margin: 0;
+}
+
+.byline,
+.updated:not(.published){
+
+	display: none;
+}
+
+.single .byline,
+.group-blog .byline {
+
+	display: block;
+}
+
+#page a.button {
+
+	@include button();
+	display: inline-block;
+}
+
+.page-content,
+.entry-content,
+.entry-summary {
+
+	@include body-copy();
+	margin: 0;
+
+	p {
+
+		word-break: break-word;
+	}
+}
+
+.posted-on {
+
+	@include widget-title();
+	color: $color__link-hover;
+}
+
+.byline {
+
+	@include list-header();
+	color: $color__link-hover;
+
+	a {
+
+		@include list-item();
+		display: inline-block;
+	}
+}
+
+.comments-link {
+
+	display: flex;
+	height: 60px;
+	justify-content: center;
+	position: relative;
+	width: 60px;
+	z-index: 10;
+
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: 	all 0.3s ease;
+	-o-transition: 		all 0.3s ease;
+	-ms-transition: 	all 0.3s ease;
+	transition: 		all 0.3s ease;
+
+	a {
+
+		color: $color__text-main;
+		font-size: $gutter;
+		line-height: 20px;
+		min-width: 20px;
+		padding: 20px ($gutter * .2);
+		position: relative;
+		text-align: center;
+		width: 60px;
+		z-index: 3;
+
+		-webkit-transition: all 0.3s ease;
+		-moz-transition: 	all 0.3s ease;
+		-o-transition: 		all 0.3s ease;
+		-ms-transition: 	all 0.3s ease;
+		transition: 		all 0.3s ease;
+	}
+
+	.comment-icon {
+
+		@include prefix( filter, drop-shadow( 1px 3px 2px rgba(0, 0, 0, 0.33) ) );
+		left: 0;
+		position: absolute;
+		overflow: visible;
+
+		.path {
+
+			fill: $color__background-body;
+			stroke: $color__border-transparent;
+			stroke-miterlimit: 10;
+			-webkit-transition: all 0.3s ease;
+			-moz-transition: 	all 0.3s ease;
+			-o-transition: 		all 0.3s ease;
+			-ms-transition: 	all 0.3s ease;
+			transition: 		all 0.3s ease;
+		}
+	}
+
+	&:hover {
+
+		@include animation('bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)');
+
+		a {
+
+			color: $color__background-body;
+			opacity: 1;
+		}
+
+		.comment-icon {
+
+			.path {
+
+				fill: $color__link;
+				stroke: $color__link;
+			}
+		}
+	}
+}
+
+.entry-footer {
+
+	align-content: flex-start;
+	display: flex;
+	flex-flow: row nowrap;
+	overflow: visible;
+	@include list-header();
+	color: $color__link-hover;
+
+	& > * {
+
+		flex: 2 1 0;
+		margin-right: ( $gutter * .5 );
+
+		&:last-child {
+
+			margin-right: 0;
+		}
+	}
+
+	.comments-link {
+
+		flex: 0 0 auto;
+		margin-right: calc((100% / 8) * 1);
+	}
+
+	div > * {
+
+		display: block;
+	}
+
+	ul {
+
+		list-style: none;
+		margin: 0;
+
+		li a {
+
+			@include list-item();
+		}
+	}
+}

altofocus/assets/stylesheets/components/posts/_single-post.scss

@@ -0,0 +1,236 @@
+/*--------------------------------------------------------------*/
+/* !## Single Posts */
+/*--------------------------------------------------------------*/
+
+.single {
+
+	.entry-media {
+
+		background: #FFF;
+		margin: 0;
+		position: relative;
+		z-index: 3;
+
+		.slide {
+
+			position: relative;
+			width: 100%;
+
+			.image-caption {
+
+				border-bottom: 1px solid $color__border-transparent;
+				color: $color__link-hover;
+				display: block;
+				@include body-copy-small();
+				margin-bottom: 1px;
+				padding: #{ $gutter * .25 } #{ $gutter * .5 };
+			}
+		}
+	}
+
+	.entry-media-wrap {
+
+		line-height: 0;
+		text-align: center;
+
+		.jetpack-video-wrapper {
+
+			margin-bottom: 0;
+
+			.wp-video {
+
+				margin: 0 auto;
+			}
+		}
+	}
+
+	.hentry {
+
+		float: none;
+		position: relative;
+		z-index: 3;
+
+		.entry-header {
+
+			display: table;
+			margin: 0 0 ($baseline);
+			position: relative;
+			width: 100%;
+		}
+
+		.entry-title {
+
+			@include article-title(1.5);
+			@include gutter-width(100%);
+			float: left;
+			margin: ($baseline * .5) 0;
+		}
+
+		.entry-meta {
+
+			padding-left: ($gutter * .5);
+			float: left;
+		}
+
+		.comments-link {
+
+			float: left;
+			margin-left: ($gutter * .5);
+			position: relative;
+		}
+
+		.entry-content {
+
+			@include gutter-width(100%);
+			margin: 0 0 ($baseline);
+		}
+
+		.entry-footer {
+
+			@include gutter-width(100%);
+
+			& > div {
+
+				width: 50%;
+				margin-bottom: $baseline;
+			}
+		}
+
+		&:not(.has-post-thumbnail) {
+
+			@include non-border(1px solid $color__border-transparent, top);
+			position: relative;
+
+			&:before {
+
+				margin-left: -50%;
+				width: 200%;
+			}
+		}
+	}
+}
+
+@include breakpoint( phablet ) {
+
+	.single {
+
+		.entry-media {
+
+			&:after {
+
+				@include linear-gradient();
+				content: " ";
+				height: 100%;
+				left: 0;
+				position: absolute;
+				top: 0;
+				width: 100%;
+				z-index: -1;
+			}
+		}
+
+		.hentry .entry-title {
+
+			@include font-size( 2.5 );
+		}
+
+		.slide {
+
+			.image-caption {
+
+				@include multitransition( transform .15s ease-in-out, opacity .15s ease-in-out );
+				background: $color__background-body;
+				bottom: 0;
+				display: block;
+				left: 50%;
+				line-height: $baseline;
+				opacity: 0;
+				position: absolute;
+				transform: translate3d( -50%, 10px, 0 );
+				max-width: 50%;
+				z-index: 3;
+			}
+
+			&:hover .image-caption {
+
+				border-bottom: none;
+				opacity: 1;
+				transform: translate3d( -50%, #{-$baseline}, 0 );
+			}
+		}
+	}
+}
+
+@include breakpoint( tablet ) {
+
+	.single .hentry {
+
+		padding: ($baseline * 2) 5%;
+
+		.entry-header {
+
+			margin: 0 0 ($baseline * 2);
+		}
+
+		.entry-title {
+
+			float: left;
+			margin: 0;
+			width: calc( #{((100% / 8) * 6)} - #{ $gutter } );
+		}
+
+		.entry-meta {
+
+			@include gutter-width( calc( #{((100% / 8) * 2)} + #{ $gutter } ) );
+			float: right;
+
+			.edit-link {
+
+				position: absolute;
+			}
+		}
+
+		.comments-link {
+
+			margin-left: 0;
+			position: absolute;
+			right: calc( 100% + #{ $gutter * .5 } );
+			top: calc( 100% + #{$baseline * 1.5} );
+		}
+
+		.entry-content {
+
+			float: left;
+			margin-bottom: ($baseline * 2);
+			width: calc( #{((100% / 8) * 6)} - #{ $gutter } );
+		}
+
+		.entry-footer {
+
+			@include gutter-width( calc( 35% + #{ $gutter } ) );
+			float: right;
+			margin-right: -10%;
+
+			& > div {
+
+				width: 33%;
+			}
+
+			& > div:first-child {
+
+				width: 66%;
+			}
+		}
+	}
+}
+
+@include breakpoint( laptop ) {
+
+	.single .hentry {
+
+		.entry-content {
+
+			width: calc( #{((100% / 8) * 5)} - #{ $gutter } );
+		}
+	}
+}

altofocus/assets/stylesheets/layout/_content.scss

@@ -0,0 +1,62 @@
+/*--------------------------------------------------------------
+## Content
+--------------------------------------------------------------*/
+
+html {
+
+	box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+
+	box-sizing: inherit;
+}
+
+html,
+body {
+
+	background-color: $color__background-body; /* Fallback for when there is no custom background color defined. */
+}
+
+.js body {
+
+	opacity: 0;
+}
+
+.content-area {
+
+	float: left;
+	margin: 0;
+	width: $size_site-main;
+
+	.hfeed & {
+
+		overflow: hidden;
+	}
+}
+
+.site-main {
+
+	margin: 0;
+	overflow: hidden;
+	position: relative;
+}
+
+.site-content {
+
+	background: $color__background-body;
+	position: relative;
+}
+
+.site-content .widget-area {
+
+	overflow: hidden;
+	width: $size_site-main;
+}
+
+.site-footer {
+
+	width: $size_site-main;
+}

altofocus/assets/stylesheets/layout/_isotope-grid.scss

@@ -0,0 +1,223 @@
+/*--------------------------------------------------------------
+## Isotope Grid
+--------------------------------------------------------------*/
+
+/* center container with CSS */
+.home .content-area,
+.blog .content-area {
+
+	border-top: 1px solid $color__border-transparent;
+}
+
+/**
+ * Disabling Isotope CSS3 transitions
+ */
+
+.isotope.no-transition,
+.isotope.no-transition .isotope-item,
+.isotope .isotope-item.no-transition {
+  -webkit-transition-duration: 0s;
+     -moz-transition-duration: 0s;
+      -ms-transition-duration: 0s;
+       -o-transition-duration: 0s;
+          transition-duration: 0s;
+}
+
+/**
+ * Isotope
+ */
+
+.hfeed {
+
+	.site-main {
+
+		display: block;
+		margin: 0 auto ($baseline * 4);
+		opacity: 0;
+		overflow: visible;
+		padding: $gutter 0;
+		width: calc( 100% - #{($gutter)} );
+
+		@include transition( opacity, .33s, ease-in );
+
+		/* fluid 5 columns */
+		.grid-sizer,
+		.grid-item,
+		.grid-item-featured:not(.has-post-thumbnail),
+		.grid-item-featured.grid-item-small {
+
+			width: 100%; // calc(20% - #{$gutter});
+		}
+
+		/* 2 columns wide */
+		.grid-item--width2,
+		.grid-item-featured {
+
+			width: 100%; // calc(40% - #{$gutter * 2});
+		}
+
+		.gutter-sizer {
+
+			width: 0;
+		}
+	}
+}
+
+.no-js .hfeed .site-main,
+.hfeed.error404 .site-main,
+.hfeed.search-no-results .site-main,
+.hfeed .site-main.has-isotope {
+
+	opacity: 1;
+}
+
+@include breakpoint( mobileonly ) {
+
+	.hfeed {
+
+		.site-main {
+
+			width: calc( 100% );
+		}
+	}
+}
+
+@include breakpoint( phablet ) {
+
+	.hfeed {
+
+		.site-main {
+
+			margin: 0 auto calc(#{ $baseline * 4 } + #{ $gutter * 1.5 };
+
+			/* fluid 5 columns */
+			.grid-sizer,
+			.grid-item,
+			.grid-item-featured:not(.has-post-thumbnail),
+			.grid-item-featured.grid-item-small {
+
+				width: 50%;
+			}
+
+			/* 2 columns wide */
+			.grid-item--width2,
+			.grid-item-featured {
+
+				width: 50%;
+			}
+
+			.gutter-sizer {
+
+				width: 0;
+			}
+		}
+	}
+}
+
+@include breakpoint( tablet ) {
+
+	.hfeed {
+
+		.site-main {
+
+			/* fluid 5 columns */
+			.grid-sizer,
+			.grid-item,
+			.grid-item-featured:not(.has-post-thumbnail),
+			.grid-item-featured.grid-item-small {
+
+				width: 33%;
+			}
+
+			/* 2 columns wide */
+			.grid-item--width2,
+			.grid-item-featured {
+
+				width: 66%;
+			}
+
+			.gutter-sizer {
+
+				width: 0;
+			}
+		}
+	}
+
+	// Archives
+	.hfeed:not(.home):not(.blog) {
+
+		.site-main {
+
+			/* fluid 5 columns */
+			.grid-sizer,
+			.grid-item,
+			.grid-item-featured:not(.has-post-thumbnail),
+			.grid-item-featured.grid-item-small {
+
+				width: 50%;
+			}
+
+			/* 2 columns wide */
+			.grid-item--width2,
+			.grid-item-featured {
+
+				width: 50%;
+			}
+		}
+	}
+}
+
+@include breakpoint(laptop) {
+
+	.hfeed {
+
+		.site-main {
+
+			/* fluid 5 columns */
+			.grid-sizer,
+			.grid-item,
+			.grid-item-featured:not(.has-post-thumbnail),
+			.grid-item-featured.grid-item-small {
+
+				width: 25%; // calc(20% - #{$gutter});
+			}
+
+			/* 2 columns wide */
+			.grid-item--width2,
+			.grid-item-featured {
+
+				width: 50%; // calc(40% - #{$gutter * 2});
+			}
+
+			.gutter-sizer {
+
+				width: 0;
+			}
+
+		}
+
+		// Archives
+		&.blog:not(.home),
+		&:not(.home):not(.blog) {
+
+			.site-main {
+
+				/* fluid 5 columns */
+				.grid-sizer,
+				.grid-item,
+				.grid-item-featured:not(.has-post-thumbnail),
+				.grid-item-featured.grid-item-small {
+
+					width: 33.333%;
+				}
+
+				/* 2 columns wide */
+				.grid-item--width2,
+				.grid-item-featured {
+
+					width: 66.667%;
+				}
+			}
+		}
+	}
+}

altofocus/assets/stylesheets/layout/_layout-responsive.scss

@@ -0,0 +1,93 @@
+/*--------------------------------------------------------------
+## Responsive Layout Styles
+--------------------------------------------------------------*/
+
+@include breakpoint( mobileonly ) {
+
+	.site-content .hentry,
+	.site-content .post-navigation,
+	.site-content .comments-area,
+	.widget-area-wrap,
+	.site-footer-wrap {
+
+		max-width: 100%;
+		margin-left: auto;
+		margin-right: auto;
+		padding: $mobile-baseline 0;
+	}
+
+	.site-content .hentry {
+
+		padding-top: 0;
+	}
+
+	.single .flexslider {
+
+		max-width: 100%;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.site-header-wrap {
+
+		padding: $mobile-baseline 0 0;
+	}
+
+}
+
+@include breakpoint( phablet ) {
+
+	.site-header-wrap,
+	.site-content .hentry,
+	.site-content .post-navigation,
+	.site-content .comments-area,
+	.entry-media-wrap,
+	.widget-area-wrap,
+	.site-footer-wrap {
+
+		max-width: 80%;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+
+@include breakpoint( tablet ) {
+
+	.site-header-wrap,
+	.site-content .hentry,
+	.site-content .comments-area,
+	.entry-media-wrap,
+	.widget-area-wrap,
+	.site-footer-wrap {
+
+		max-width: 90%;
+	}
+
+	.site-content .post-navigation {
+
+		max-width: 80%;
+	}
+}
+
+@include breakpoint( desktop ) {
+
+	.site-content .hentry,
+	.site-content .post-navigation,
+	.site-content .comments-area,
+	.widget-area-wrap,
+	.site-footer-wrap {
+
+		max-width: 75em;
+	}
+
+	.entry-media-wrap {
+
+		max-width: calc( 100% - 120px );
+	}
+
+	.site-content .post-navigation {
+
+		max-width: calc( 75em - 10% );
+	}
+}
+

altofocus/assets/stylesheets/layout/_layout.scss

@@ -0,0 +1,4 @@
+@import "content";
+@import "isotope-grid";
+@import "sidebars";
+@import "layout-responsive";

altofocus/assets/stylesheets/layout/_sidebars.scss

@@ -0,0 +1,10 @@
+/*--------------------------------------------------------------
+## Sidebars
+--------------------------------------------------------------*/
+
+.no-sidebar .content-area {
+
+	float: none;
+	margin-left: auto;
+	margin-right: auto;
+}

altofocus/assets/stylesheets/mixins/_mixins-animations.scss

@@ -0,0 +1,299 @@
+/*--------------------------------------------------------------*/
+/* !## Animations */
+/*--------------------------------------------------------------*/
+
+// Using the mixins looks like this:
+
+// @include keyframes(move-the-object) {
+//		0%   { left: 100px; }
+//		100% { left: 200px; }
+// }
+//
+// .object-to-animate {
+//		@include animation('move-the-object .5s 1', 'move-the-object-again .5s 1 .5s');
+// }
+
+// Order from longest to shortest
+// If anything changes edit here!!
+$default-prefixes: webkit moz ms o;
+
+// Prefixer mixin
+// $attr: property to be prefixed (transition, transform, box-shadow), can  be added via another mixin or directly
+// $value: value of the property
+// $prefixes: by default it uses those defined as default, but can be changed to those needed
+@mixin prefix( $attr, $value, $prefixes: $default-prefixes ) {
+
+  // Output each prefixed rule
+	@each $prefix in $prefixes {
+
+		-#{ $prefix }-#{ $attr }: #{ $value };
+	}
+
+  // Non prefixed rule
+	#{ $attr }: #{ $value };
+}
+
+// Multi-transition mixins
+//
+// Src: https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
+//
+// Usage:   @include multitransition(width, height 0.3s ease-in-out);
+// Output:  -webkit-transition(width 0.2s, height 0.3s ease-in-out);
+//          transition(width 0.2s, height 0.3s ease-in-out);
+//
+// Pass in any number of transitions
+@mixin multitransition($transitions...) {
+  $unfoldedTransitions: ();
+  @each $transition in $transitions {
+    $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
+  }
+
+  -webkit-transition: $unfoldedTransitions;
+  transition: $unfoldedTransitions;
+}
+
+// Unfold transition mixin
+@function unfoldTransition ($transition) {
+  // Default values
+  $property: all;
+  $duration: .2s;
+  $easing: null; // Browser default is ease, which is what we want
+  $delay: null; // Browser default is 0, which is what we want
+  $defaultProperties: ($property, $duration, $easing, $delay);
+
+  // Grab transition properties if they exist
+  $unfoldedTransition: ();
+  @for $i from 1 through length($defaultProperties) {
+    $p: null;
+    @if $i <= length($transition) {
+      $p: nth($transition, $i)
+    } @else {
+      $p: nth($defaultProperties, $i)
+    }
+    $unfoldedTransition: append($unfoldedTransition, $p);
+  }
+
+  @return $unfoldedTransition;
+}
+
+// Transition mixin
+@mixin transition( $attr, $delay, $fx ) {
+
+	$value: $attr $delay $fx;
+	@include prefix( 'transition', $value );
+}
+// example: @include transition(color, .8s, linear);
+
+// Transform mixin
+@mixin transform( $attr, $value ) {
+
+	$property: str_insert( $attr, '()', -1 );
+	$prop: str_insert( $property, #{ $value }, -2 );
+	@include prefix( 'transform', $prop );
+}
+// example: @include transform(transformX, -100%);
+
+// Prefixed animations
+@mixin animation( $animate... ) {
+
+	$max: length( $animate );
+	$animations: '';
+
+	@for $i from 1 through $max {
+
+		$animations: #{ $animations + nth( $animate, $i ) };
+
+		@if $i < $max {
+
+			$animations: #{ $animations + ", " };
+		}
+	}
+
+	-webkit-animation: $animations;
+	-moz-animation:    $animations;
+	-o-animation:      $animations;
+	animation:         $animations;
+}
+
+// Keyframes settings
+@mixin keyframes( $animationName ) {
+
+	@-webkit-keyframes #{ $animationName } {
+
+		@content;
+	}
+
+	@-moz-keyframes #{ $animationName } {
+
+		@content;
+	}
+
+	@-o-keyframes #{ $animationName } {
+
+		@content;
+	}
+
+	@keyframes #{ $animationName } {
+
+		@content;
+	}
+}
+
+@include keyframes( bounce-reveal-y ) {
+
+	0%,
+	100% {
+
+		@include transform( scaleY, 1 ); // -webkit-transform: scaleY(1);
+	}
+
+	50% {
+
+		@include transform( scaleY, 1.1 ); // -webkit-transform: scaleY(1.1);
+	}
+}
+
+@include keyframes( bounce-hide-y ) {
+
+	0%,
+	100% {
+
+		@include transform( scaleY, 1 ); // -webkit-transform: scaleY(1);
+	}
+
+	50% {
+
+		@include transform( scaleY, .9 ); // -webkit-transform: scaleY(1.1);
+	}
+}
+
+@include keyframes( bounce-reveal ) {
+
+	0%,
+	100% {
+
+		@include transform( scale, 1 );
+	}
+
+	33% {
+
+		@include transform( scale, 1.1 );
+	}
+
+	66% {
+
+		@include transform( scale, 0.9 );
+	}
+}
+
+@include keyframes( bounce-left ) {
+
+	0%,
+	100% {
+
+		@include transform( translateX, 0 );
+	}
+
+	33% {
+
+		@include transform( translateX, -10px );
+	}
+
+	66% {
+
+		@include transform( translateX, 3px );
+	}
+}
+
+@include keyframes( bounce-right ) {
+
+	0%,
+	100% {
+
+		@include transform( translateX, 1 );
+	}
+
+	33% {
+
+		@include transform( translateX, 10px );
+	}
+
+	66% {
+
+		@include transform( translateX, -3px );
+	}
+}
+
+@include keyframes( bounce-reveal-large ) {
+
+	0%,
+	100% {
+
+		@include transform( scale, 1 );
+	}
+
+	33% {
+
+		@include transform( scale, 1.25 );
+	}
+
+	66% {
+
+		@include transform( scale, 0.85 );
+	}
+}
+
+@include keyframes( bounce-zoom ) {
+
+	0% {
+
+		@include transform( scale, 1 );
+	}
+
+	25% {
+
+		@include transform( scale, 1.1 );
+	}
+
+	75% {
+
+		@include transform( scale, 0.9 );
+	}
+
+	100% {
+
+		@include transform( scale, 1.125 );
+	}
+}
+
+// @-webkit-keyframes 'bounce-reveal' {
+//		0% { -webkit-transform: scale(0.3); }
+//		33% { -webkit-transform: scale(1.1); }
+//		66% { -webkit-transform: scale(0.9); }
+//		100% { -webkit-transform: scale(1); }
+// }
+
+// -webkit-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+// .tag-list-wrap {
+//
+// 		margin-left:-999em;
+// 		-webkit-transform-origin: top left;
+// 		cursor: pointer;
+// 		position: absolute;
+// 		top: 0;
+//
+// 		&:hover .tag-list-wrap {
+//
+// 			.tags();
+// 			background: rgb(23, 23, 23);
+// 			padding: @gutter;
+// 			z-index: 20;
+// 			display: table;
+// 			word-spacing: normal;
+// 			position: absolute;
+// 			top: 0;
+// 			margin-left: 0;
+// 			-webkit-animation: bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+// 		}
+// }

altofocus/assets/stylesheets/mixins/_mixins-base.scss

@@ -0,0 +1,19 @@
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+@import "mixins-typography";
+
+/*--------------------------------------------------------------
+# Animations
+--------------------------------------------------------------*/
+@import "mixins-animations";
+
+/*--------------------------------------------------------------
+# UI
+--------------------------------------------------------------*/
+@import "mixins-ui";
+
+/*--------------------------------------------------------------
+# Breakpoints
+--------------------------------------------------------------*/
+@import "mixins-breakpoints";

altofocus/assets/stylesheets/mixins/_mixins-breakpoints.scss

@@ -0,0 +1,52 @@
+/*--------------------------------------------------------------*/
+/* !## Breakpoint Mixins */
+/*--------------------------------------------------------------*/
+
+/*
+	Breakpoints
+	Src: https://responsivedesign.is/develop/getting-started-with-sass
+	Usage:
+	.grid-1-4 {
+		width: 100%;
+		@include breakpoint(phablet) {
+			width: 50%;
+		}
+		@include breakpoint(laptop) {
+			width: 25%;
+		}
+	 }
+*/
+
+@mixin breakpoint($point) {
+
+	@if $point == desktop {
+
+		@media screen and (min-width: 75em) { @content ; }
+	}
+
+	@else if $point == laptop {
+
+		@media screen and (min-width: 60em) { @content ; }
+	}
+
+	@else if $point == tablet {
+
+		@media screen and (min-width: 50em) { @content ; }
+	}
+
+	@else if $point == tabletonly {
+
+		@media screen and (max-width: 50em)  { @content ; }
+	}
+
+	@else if $point == phablet {
+
+		@media screen and (min-width: 37.5em)  { @content ; }
+	}
+
+	@else if $point == mobileonly {
+
+		@media screen and (max-width: 37.5em)  { @content ; }
+	}
+}
+

altofocus/assets/stylesheets/mixins/_mixins-typography.scss

@@ -0,0 +1,134 @@
+/*--------------------------------------------------------------*/
+/* !## Typographic Mixins */
+/*--------------------------------------------------------------*/
+
+// Rem output with px fallback
+@mixin font-size( $sizeValue: 1 ) {
+
+	font-size: ( ( $sizeValue * 15 ) * 1px );
+	font-size: $sizeValue * 1rem;
+}
+
+// Details Text
+@mixin body-copy() {
+
+	@include font-size( .925 );
+	font-family: $font__header;
+	font-weight: 300;
+	line-height: $baseline;
+
+	@include breakpoint( phablet ) {
+
+		@include font-size( 1.125 );
+	}
+}
+
+// Small Body Copy Text
+@mixin body-copy-small() {
+
+	@include font-size(0.875);
+	word-break: break-word;
+	font-weight: 300;
+	line-height: ($baseline * .875);
+}
+
+// Meta Text
+@mixin meta() {
+
+	@include font-size(0.75);
+	font-weight: 700;
+	letter-spacing: .075em;
+	line-height: $baseline;
+	text-transform: uppercase;
+}
+
+// Site Title
+@mixin site-title() {
+
+	font-family: $font__header;
+	@include font-size( 1.5 );
+	font-weight:700;
+	letter-spacing: inherit;
+	line-height: ($baseline * .8375);
+
+	@include breakpoint( tablet ) {
+
+		@include font-size( 2.1375 );
+	}
+}
+
+// Post Titles
+@mixin article-title( $font_size: 2.5 ) {
+
+	word-break: break-word;
+	@include font-size( $font_size * .875 );
+	font-family: $font__header;
+	font-weight: 300;
+	line-height: 1.25;
+
+	@include breakpoint( phablet ) {
+
+		@include font-size( $font_size );
+	}
+}
+
+// List Header Text
+@mixin list-header( $font_size: 1 ) {
+
+	@include font-size( $font_size * .925 );
+	font-weight: 300;
+	line-height: ($baseline);
+
+	@include breakpoint( phablet ) {
+
+		@include font-size( $font_size );
+	}
+}
+
+// List Item Text
+@mixin list-item( $font_size: 1 ) {
+
+	font-family: $font__main;
+	@include font-size( $font_size * .925 );
+	display: block;
+	font-weight: 300;
+	line-height: 1;
+	padding: .2875em 0;
+	text-transform: uppercase;
+	word-break: break-word;
+
+	@include breakpoint( phablet ) {
+
+		@include font-size( $font_size );
+	}
+}
+
+// Navigation Titles
+@mixin nav-title( $font_size: 1.125 ) {
+
+	@include font-size( $font_size * .875 );
+	font-family: $font__header;
+	font-weight: 300;
+	font-style: italic;
+	line-height: ($baseline * .8375);
+
+	@include breakpoint( phablet ) {
+
+		@include font-size( $font_size );
+	}
+}
+
+// Widget Titles
+@mixin widget-title( $font_size: 1.125 ) {
+
+	@include font-size( $font_size * .875 );
+	font-family: $font__header;
+	font-weight: 300;
+	line-height: ($baseline);
+	word-break: break-word;
+
+	@include breakpoint( phablet ) {
+
+		@include font-size( $font_size );
+	}
+}

altofocus/assets/stylesheets/mixins/_mixins-ui.scss

@@ -0,0 +1,285 @@
+/*--------------------------------------------------------------*/
+/* !## UI Mixins */
+/*--------------------------------------------------------------*/
+
+// Center block
+@mixin center-block {
+
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+@mixin vertical-align( $position: relative ) {
+
+	position: $position;
+	left: 50%;
+	top: 50%;
+	-webkit-transform: translateY(-50%);
+	-ms-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+
+@mixin center-align( $position: relative ) {
+
+	position: $position;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate( -50%, -50% );
+	-ms-transform: translate( -50%, -50% );
+	transform: translate( -50%, -50% );
+}
+
+// Clearfix
+@mixin clearfix() {
+
+	content: "";
+	display: table;
+	table-layout: fixed;
+}
+
+// Clear after (not all clearfix need this also)
+@mixin clearfix-after() {
+
+	clear: both;
+}
+
+@mixin gutter-width( $width: $size_content, $gutter-width: $gutter ) {
+
+	padding-left: ($gutter-width * .5);
+	padding-right: ($gutter-width * .5);
+	width: calc(#{$width});
+}
+
+// Button
+@mixin button($color: $color__link, $round: 30px) {
+
+	@include list-item();
+	@include rounded($round);
+	background: $color__background-body;
+	border: 1px solid;
+	border-color: $color__border-transparent;
+	box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.25);
+	color: $color__text-main;
+	line-height: 1;
+	outline: none;
+	padding: 1em $gutter;
+	-webkit-transition: all 0.3s ease;
+	-moz-transition: 	all 0.3s ease;
+	-o-transform: 		all 0.3s ease;
+	-ms-transform: 		all 0.3s ease;
+	transition: 		all 0.3s ease;
+
+	&:hover {
+
+		@include animation('bounce-reveal 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)');
+		background: $color;
+		border-color: $color;
+		color: $color__background-body;
+	}
+
+	&:active,
+	&:focus {
+
+		border-color: $color__border-button-focus;
+		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.125);
+		-webkit-transform: 	scale(.925);
+		-moz-transform: 	scale(.925);
+		-o-transform: 		scale(.925);
+		-ms-transform: 		scale(.925);
+		transform: 			scale(.925);
+	}
+}
+
+/**
+ * Non obstructive border
+ * - Src: http://stackoverflow.com/questions/11765642/sass-optimize-borders-into-one-line-of-code
+ * - Usage: @include non-border(2px solid shade($ccblue, 10%), bottom, right);
+ */
+
+@mixin non-border ($style, $sides...) {
+
+	@if ( $style != "" ) {
+
+		position: relative;
+
+		&:before {
+			content: "";
+			position: absolute;
+			z-index: 2;
+
+			@if ($sides == "") {
+
+				border: $style;
+
+			} @else {
+
+				@each $side in $sides {
+
+					@if ($side == 'none') {
+						border: none;
+					}
+
+					@if ($side == 'top' or
+						$side == 'right' or
+						$side == 'bottom' or
+						$side == 'left') {
+						border-#{$side}: $style;
+					}
+
+					@if ($side == 'top') {
+						height: 0;
+						top: 0;
+						left: 0;
+						width: 100%;
+					}
+
+					@if ($side == 'right') {
+						height: 100%;
+						top: 0;
+						right: 0;
+						left: inherit;
+						width: 0;
+					}
+
+					@if ($side == 'bottom') {
+						bottom: 0;
+						height: 0;
+						left: 0;
+						width: 100%;
+					}
+
+					@if ($side == 'left') {
+						height: 100%;
+						left: 0;
+						top: 0;
+						right: inherit;
+						width: 0;
+					}
+				}
+			}
+		}
+	}
+}
+
+// Rounded Corners
+@mixin rounded($radius: 0.5em) {
+
+	-webkit-border-radius: $radius;
+	-moz-border-radius: $radius;
+	border-radius: $radius;
+}
+
+// Rounded Bottom Corners
+@mixin rounded-bottom($radius: 0.5em) {
+
+	-webkit-border-bottom-left-radius: $radius;
+	-moz-border-bottom-left-radius: $radius;
+	border-bottom-left-radius: $radius;
+	-webkit-border-bottom-right-radius: $radius;
+	-moz-border-bottom-right-radius: $radius;
+	border-bottom-right-radius: $radius;
+}
+
+// Rounded Bottom Corners
+@mixin rounded-top($radius: 0.5em) {
+	-webkit-border-top-left-radius: $radius;
+	-moz-border-top-left-radius: $radius;
+	border-top-left-radius: $radius;
+	-webkit-border-top-right-radius: $radius;
+	-moz-border-top-right-radius: $radius;
+	border-top-right-radius: $radius;
+}
+
+// Rounded Paper
+@mixin paper($color: $color__border-button, $background: $color__background-body) {
+
+	background: $background;
+	border: 1px solid $color;
+	@include rounded();
+	overflow: hidden;
+}
+
+// Rounded Bottom Paper
+@mixin paperbottom($color: $color__border-button, $background: $color__background-body) {
+
+	background: $background;
+	border: 1px solid $color;
+	@include rounded-bottom();
+	overflow: hidden;
+}
+
+// Rounded Top Paper
+@mixin papertop($color: $color__border-button, $background: $color__background-body) {
+
+	background: $background;
+	border: 1px solid $color;
+	@include rounded-top();
+	overflow: hidden;
+}
+
+// Flat Paper
+@mixin paperflat($color: $color__border-button, $background: $color__background-body) {
+
+	background: $background;
+	border: 1px solid $color;
+	overflow: hidden;
+}
+
+@mixin show-screen-reader-text() {
+
+    clip: inherit;
+    position: inherit !important;
+    height: inherit;
+    left: inherit;
+    overflow: visible;
+    width: inherit;
+}
+
+@mixin hide-this() {
+
+	clip: rect(1px, 1px, 1px, 1px);
+	position: absolute !important;
+	height: 1px;
+	width: 1px;
+	overflow: hidden;
+
+	&:focus {
+
+		background-color: $color__background-screen;
+		border-radius: 3px;
+		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+		clip: auto !important;
+		color: $color__text-screen;
+		display: block;
+		@include font-size(0.875);
+		font-weight: bold;
+		height: auto;
+		left: 5px;
+		line-height: normal;
+		padding: 15px 23px 14px;
+		text-decoration: none;
+		top: 5px;
+		width: auto;
+		z-index: 100000; /* Above WP toolbar. */
+	}
+}
+
+
+@mixin linear-gradient( $top_color: rgba( 255, 255, 255, 0 ), $bottom_color: rgba( 0, 0, 0, .125 ) ) {
+
+	/* Safari 4-5, Chrome 1-9 */
+	background: -webkit-gradient( linear, 0% 0%, 0% 100%, from( #{ $bottom_color } ), to( #{ $top_color } ) );
+
+	/* Safari 5.1, Chrome 10+ */
+	background: -webkit-linear-gradient( top, $top_color, $bottom_color );
+
+	/* Firefox 3.6+ */
+	background: -moz-linear-gradient( top, $top_color, $bottom_color );
+
+	/* IE 10 */
+	background: -ms-linear-gradient( top, $top_color, $bottom_color );
+
+	/* Opera 11.10+ */
+	background: -o-linear-gradient( top, $top_color, $bottom_color );
+}

altofocus/assets/stylesheets/plugins/_flexslider.scss

@@ -0,0 +1,425 @@
+/*
+ * jQuery FlexSlider v2.6.1
+ * http://www.woothemes.com/flexslider/
+ *
+ * Copyright 2012 WooThemes
+ * Free to use under the GPLv2 and later license.
+ * http://www.gnu.org/licenses/gpl-2.0.html
+ *
+ * Contributing author: Tyler Smith (@mbmufffin)
+ *
+ */
+
+/* ====================================================================================================================
+ * RESETS
+ * ====================================================================================================================*/
+
+.flex-container a:hover,
+.flex-slider a:hover {
+
+	outline: none;
+}
+
+.slides,
+.slides > div,
+.flex-control-nav,
+.flex-direction-nav {
+
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.flex-pauseplay span {
+
+	text-transform: capitalize;
+}
+
+/* ====================================================================================================================
+ * BASE STYLES
+ * ====================================================================================================================*/
+
+.flexslider {
+
+	margin: 0;
+	padding: 0;
+}
+
+.flexslider .slides > div {
+
+	display: none;
+	-webkit-backface-visibility: hidden;
+}
+
+.flexslider .slides img {
+
+	display: block;
+}
+
+.flexslider .slides:after {
+
+	content: "\0020";
+	display: block;
+	clear: both;
+	visibility: hidden;
+	line-height: 0;
+	height: 0;
+}
+
+html[xmlns] .flexslider .slides {
+
+	display: block;
+}
+
+* html .flexslider .slides {
+
+	height: 1%;
+}
+
+.no-js .flexslider .slides > div:first-child {
+
+	display: block;
+}
+
+/* ====================================================================================================================
+ * DEFAULT THEME
+ * ====================================================================================================================*/
+
+.flexslider {
+
+	margin: 0 auto ($baseline * 1.75);
+	background: transparent;
+	border: none;
+	position: relative;
+	zoom: 1;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+	-webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow:    '' 0 1px 4px rgba(0, 0, 0, 0.2);
+	-o-box-shadow:      '' 0 1px 4px rgba(0, 0, 0, 0.2);
+	box-shadow:         '' 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+body.rtl .flexslider {
+
+	direction: ltr;
+}
+
+.flexslider .slides {
+
+	direction:ltr;
+	zoom: 1;
+}
+
+.flexslider .slides img {
+
+	height: auto;
+	width: auto;
+	max-width: 100%;
+	max-height: inherit;
+	margin: 0 auto;
+	-moz-user-select: none;
+}
+
+.flex-viewport {
+
+	max-height: 900px;
+	-webkit-transition: all 1s ease;
+	-moz-transition:    all 1s ease;
+	-ms-transition:     all 1s ease;
+	-o-transition:      all 1s ease;
+	transition:         all 1s ease;
+}
+
+.loading .flex-viewport {
+
+	max-height: 300px;
+}
+
+.carousel li {
+
+	margin-right: 5px;
+}
+
+.flex-direction-nav {
+
+	*height: 0;
+}
+.flex-direction-nav a {
+
+	padding: 0;
+	text-decoration: none;
+	text-align: center;
+	display: block;
+	width: 40px;
+	height: 40px;
+	margin: -20px 0 0;
+	position: absolute;
+	top: 50%;
+	z-index: 3;
+	overflow: hidden;
+	cursor: pointer;
+
+	@include transition( all, 0.3s, ease-in-out );
+
+	.meta-nav .arrow-icon {
+
+		display: block;
+		height: 40px;
+		width: 40px;
+
+		.rectangle {
+
+			fill: none;
+		}
+
+		.arrow {
+
+			fill: none;
+			stroke: $color__text-main;
+			stroke-width: 3px;
+			stroke-miterlimit: 10;
+		}
+	}
+
+	&:hover {
+
+		@include animation( 'bounce-reveal-large 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)' );
+
+		.meta-nav {
+
+			.rectangle {
+
+				fill: none;
+			}
+
+			.arrow {
+
+				fill: none;
+				stroke: $color__link;
+				stroke-miterlimit: 10;
+			}
+			color: $color__link;
+		}
+	}
+}
+
+.flex-direction-nav .flex-prev {
+
+	left: 0;
+}
+
+.flex-direction-nav .flex-next {
+
+	right: 0;
+}
+
+.flex-direction-nav .flex-disabled {
+
+	opacity: 0 !important;
+	filter: alpha(opacity=0);
+	cursor: default;
+	z-index: -1;
+}
+
+.flex-pauseplay a {
+
+	display: block;
+	width: 20px;
+	height: 20px;
+	position: absolute;
+	bottom: 5px;
+	left: 10px;
+	opacity: 0.8;
+	z-index: 10;
+	overflow: hidden;
+	cursor: pointer;
+	color: #222;
+}
+
+.flex-pauseplay a:before {
+
+	font-family: "genericons";
+	font-size: 20px;
+	display: inline-block;
+	content: '\f004';
+}
+
+.flex-pauseplay a:hover {
+
+	opacity: 1;
+}
+
+.flex-pauseplay a.flex-play:before {
+
+	content: '\f003';
+}
+
+.flex-control-nav {
+
+	bottom: -40px;
+	position: absolute;
+	text-align: center;
+	width: 100%;
+}
+
+.flex-control-nav li {
+
+	margin: 0 6px;
+	display: inline-block;
+	zoom: 1;
+	*display: inline;
+}
+
+.flex-control-paging li a {
+
+	background: #666;
+	background: rgba(0, 0, 0, 0.5);
+	display: block;
+	cursor: pointer;
+	height: 11px;
+	text-indent: -9999px;
+	width: 11px;
+	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+	-moz-box-shadow:    inset 0 0 3px rgba(0, 0, 0, 0.3);
+	-o-box-shadow:      inset 0 0 3px rgba(0, 0, 0, 0.3);
+	box-shadow:         inset 0 0 3px rgba(0, 0, 0, 0.3);
+	-webkit-border-radius: 20px;
+	-moz-border-radius:    20px;
+	border-radius:         20px;
+}
+
+.flex-control-paging li a:hover {
+
+	background: #333;
+	background: rgba(0, 0, 0, 0.7);
+}
+
+.flex-control-paging li a.flex-active {
+
+	background: #222;
+	background: rgba(0, 0, 0, 0.9);
+	cursor: default;
+}
+
+.flex-control-thumbs {
+
+	margin: 5px 0 0;
+	position: static;
+	overflow: hidden;
+}
+
+.flex-control-thumbs li {
+
+	width: 25%;
+	float: left;
+	margin: 0;
+}
+
+.flex-control-thumbs img {
+
+	width: 100%;
+	height: auto;
+	display: block;
+	opacity: .7;
+	cursor: pointer;
+	-moz-user-select: none;
+	-webkit-transition: all 1s ease;
+	-moz-transition:    all 1s ease;
+	-ms-transition:     all 1s ease;
+	-o-transition:      all 1s ease;
+	transition:         all 1s ease;
+}
+
+.flex-control-thumbs img:hover {
+
+	opacity: 1;
+}
+
+.flex-control-thumbs .flex-active {
+
+	opacity: 1;
+	cursor: default;
+}
+
+/**
+ * Tablet and Down
+ */
+
+@include breakpoint( tabletonly ) {
+
+	.flexslider {
+
+		margin-bottom: ($baseline * 2);
+	}
+
+	.flex-control-nav {
+
+		bottom: -40px;
+		left: 5%;
+		right: 5%;
+		position: absolute;
+		text-align: center;
+		width: 90%;
+	}
+
+	.flex-direction-nav {
+
+		bottom: -35px;
+		position: absolute;
+		text-align: center;
+		width: 100%;
+
+		.flex-prev {
+
+			opacity: 1;
+			left: -40px;
+		}
+
+		.flex-next {
+
+			opacity: 1;
+			right: -40px;
+		}
+
+		a {
+
+			width: 40px;
+			height: 40px;
+			margin: -20px 0 0;
+			position: absolute;
+		}
+	}
+}
+
+/**
+ * Tablet and Up
+ */
+
+@include breakpoint( tablet ) {
+
+	.entry-media {
+
+		.flex-direction-nav {
+
+			opacity: 0;
+			@include transition( opacity, .2s, ease-in-out );
+
+			.flex-prev {
+
+				left: -40px;
+			}
+
+			.flex-next {
+
+				right: -40px;
+			}
+		}
+
+		&:hover .flex-direction-nav {
+
+			opacity: 1;
+		}
+	}
+}

altofocus/assets/stylesheets/plugins/_highlander-comments.scss

@@ -0,0 +1,31 @@
+/*--------------------------------------------------------------*/
+/* !## Highlander Comments */
+/*--------------------------------------------------------------*/
+
+.highlander-enabled #respond {
+
+	border-top: 1px solid $color__border-transparent;
+	margin-top: -1px !important;
+
+	h3 {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+	label,
+	form label {
+		color: $color__text-input;
+	}
+}
+
+.page.highlander-enabled #respond {
+
+	border-top-width: 0;
+	margin-top: 0 !important;
+}
+
+.page.highlander-enabled .comment-list + #respond {
+
+	border-top-width: 1px;
+	margin-top: -1px !important;
+}

altofocus/assets/stylesheets/plugins/_post-flair.scss

@@ -0,0 +1,140 @@
+/*--------------------------------------------------------------*/
+/* !## Postflair / Sharedaddy */
+/*--------------------------------------------------------------*/
+
+.hentry .entry-content > #jp-post-flair,
+.hentry .entry-content > .sd-sharing-enabled {
+
+	& > div {
+		padding-top: 1em;
+		margin: 1em 0;
+	}
+
+	.sd-title {
+
+		color: $color__link-hover;
+		font-weight: normal;
+		line-height: 2em;
+		display: inline-block;
+		margin-right: $gutter;
+		margin-bottom: 0;
+		width: 15%;
+		vertical-align: middle;
+
+		&:before {
+			display: none;
+		}
+	}
+
+	.sd-content {
+
+		display: inline-block;
+		vertical-align: text-top;
+
+		& > ul {
+			margin-bottom: 0 !important;
+		}
+	}
+
+	.pd-rating {
+
+		display: inline-block !important;
+		vertical-align: text-top;
+
+		.rating-icons,
+		div[id^="rating"],
+		.rating-msg {
+			display: inline-block !important;
+			vertical-align: middle;
+			float: none !important
+		}
+
+		.rating-msg {
+			@include font-size(0.875);
+		}
+	}
+
+	.jetpack-likes-widget-wrapper {
+
+		.sd-title {
+
+			display: inline-block;
+		}
+
+		.jetpack-likes-widget,
+		.likes-widget-placeholder {
+
+			display: inline-block;
+			position: relative;
+			top: inherit;
+			width: auto !important;
+			vertical-align: text-top;
+		}
+	}
+
+	.jp-relatedposts-headline {
+
+		color: $color__link-hover;
+		margin-right: $gutter;
+		margin-bottom: 0;
+		width: 15%;
+
+		em {
+
+			font-weight: normal;
+
+			&:before {
+				display: none;
+			}
+		}
+	}
+
+	.jp-relatedposts-items {
+		clear: none;
+
+		.jp-relatedposts-post {
+			width: 100%;
+			font-family: $font__main;
+		}
+	}
+
+	div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img,
+	div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post span {
+
+		border: 1px solid $color__background-hr;
+		margin-bottom: ($baseline * .5);
+	}
+
+	div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
+
+		font-weight: 800;
+	}
+}
+
+@include breakpoint( mobileonly ) {
+
+	.hentry .entry-content > #jp-post-flair .sd-title,
+	.hentry .entry-content > .sd-sharing-enabled .sd-title {
+
+		margin-right: 0;
+		width: 100%;
+	}
+
+	.hentry .entry-content > #jp-post-flair > div,
+	.hentry .entry-content > .sd-sharing-enabled > div {
+
+		padding-top: 0;
+	}
+}
+
+@include breakpoint( phablet ) {
+
+	.hentry .entry-content > #jp-post-flair,
+	.hentry .entry-content > .sd-sharing-enabled {
+
+		.jp-relatedposts-items .jp-relatedposts-post {
+
+			width: 26%;
+		}
+	}
+}

altofocus/assets/stylesheets/sections/_comments.scss

@@ -0,0 +1,385 @@
+.comment-content a {
+
+	word-wrap: break-word;
+}
+
+.bypostauthor {
+
+	display: block;
+}
+
+.comments-area {
+
+	border-top: 1px solid $color__border-transparent;
+	outline: none;
+	padding: 0;
+	position: relative;
+	z-index: 4;
+
+	#content .hentry + & {
+
+		clear: both;
+	}
+
+	ol, ul {
+
+		list-style: none;
+	}
+
+	&:focus {
+
+		outline: none;
+	}
+}
+
+.comments-title {
+
+	@include widget-title();
+	color: $color__link-hover;
+	margin: 0;
+	padding: ($baseline) ($gutter * .5);
+	width: 100%;
+}
+
+.comment-reply-title {
+
+	@include widget-title();
+	color: $color__link-hover;
+	margin: 0 0 ($baseline * .5);
+}
+
+.comment-list {
+
+	margin: 0;
+}
+
+.no-comments {
+
+	border-top: 1px solid $color__border-transparent;
+	@include gutter-width(100%);
+	padding-top: $baseline;
+}
+
+.comment-body {
+
+	border-top: 1px solid $color__border-transparent;
+	padding: ($baseline * 1.5) 0 ($baseline * 1.5) 0;
+	position: relative;
+
+	.comment-meta {
+
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+		padding: 0 ($gutter * .5);
+		margin-bottom: $baseline;
+		width: 100%;
+	}
+
+	.comment-content {
+
+		padding: 0 ($gutter * .5) 0 ($gutter * .5);
+		width: 100%;
+
+		ul,
+		ol {
+
+			margin: 0 0 $baseline $gutter;
+			padding: 0;
+		}
+
+		ul {
+
+			list-style: disc;
+		}
+
+		ol {
+
+			list-style: decimal;
+		}
+
+		li > ul,
+		li > ol {
+
+			margin-bottom: 0;
+			margin-left: 1.5em;
+		}
+	}
+
+	.reply {
+
+		clear: both;
+		padding: 0 ($gutter * .5);
+		text-align: left;
+		width: 100%;
+	}
+
+	.comment-metadata {
+
+		@include body-copy-small();
+		display: block;
+		padding: 0 0 0 ($gutter * .5);
+		text-align: right;
+
+		a {
+
+			color: $color__link-hover;
+		}
+
+		.edit-link {
+
+			margin-left: $gutter;
+		}
+	}
+
+	.avatar {
+
+		@include rounded(50%);
+		box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.25);
+		display: inline-block;
+		margin-right: ($gutter * .5);
+		vertical-align: middle;
+	}
+
+	.fn {
+
+		@include widget-title();
+		color: $color__text-main;
+		display: inline-block;
+		vertical-align: middle;
+		word-wrap: break-word;
+	}
+
+	.says {
+
+		display: none;
+	}
+}
+
+.pingback .comment-body,
+.trackback .comment-body {
+
+	border-top: 1px solid $color__border-transparent;
+	display: block;
+	padding: ($baseline * 1.5) ($gutter * .5);
+
+	.edit-link {
+
+		float: right;
+	}
+}
+
+#respond,
+.comment-respond {
+
+	border-top: 1px solid $color__border-transparent;
+	display: flex;
+	flex-wrap: wrap;
+	margin: 0 !important;
+	width: 100%;
+
+	form {
+
+		background: transparent !important;
+	}
+
+	.comment-reply-title {
+
+		padding: 0 ($gutter * .5);
+		width: 100%;
+
+		small {
+
+			font-family: $font__main;
+			@include font-size(1);
+			display: block;
+		}
+	}
+
+	#commentform,
+	.comment-form {
+		padding: 0 ($gutter * .5);
+		width: 100% !important;
+	}
+
+	p[class^="comment-form"] {
+
+		label {
+			@include list-header();
+			color: $color__link-hover;
+		}
+
+		input {
+			display: block;
+			width: 100%;
+		}
+	}
+
+	.comment-list & {
+		width: 100%;
+		margin-left: 0;
+	}
+
+	.comment-subscription-form {
+
+		margin-bottom: ($baseline * .5);
+	}
+
+	.post-subscription-form {
+
+		margin-bottom: 0;
+	}
+}
+
+.page #respond {
+
+	border-top-width: 0;
+	margin-top: 0 !important;
+}
+
+.page .comment-list + #respond {
+
+	border-top-width: 1px;
+	margin-top: -1px !important;
+}
+
+@include breakpoint( mobileonly ) {
+
+	.comment-body {
+
+		.comment-author {
+
+			flex: 0 1 65%;
+		}
+
+		.comment-metadata {
+
+			flex: 0 1 35%;
+		}
+
+		.avatar {
+
+			margin-bottom: #{ $mobile-baseline * .5 };
+		}
+	}
+
+	#respond,
+	.comment-respond {
+
+		padding: $baseline 0;
+	}
+}
+
+@include breakpoint( phablet ) {
+
+	.comment-body {
+
+		.comment-content {
+
+			padding: 0 ($gutter * .5) 0 ($gutter * .5);
+			width: calc((100% / 6) * 5);
+		}
+	}
+
+	#respond,
+	.comment-respond {
+
+		padding: ($baseline * 1.5) 0 !important;
+	}
+}
+
+@include breakpoint( tablet ) {
+
+	.comments-title {
+
+		padding: ($baseline * 1.5) ($gutter * .2) ($baseline * 1.5) ($gutter * .5);
+		position: absolute;
+		width: calc((100% / 8) * 2 - #{$gutter * 2});
+	}
+
+	.comment-body {
+
+		margin-left: calc((100% / 8) * 2);
+	}
+
+	.comment .children {
+
+		margin-left: 5%;
+	}
+
+	.comments-area {
+
+		border-top: none;
+		padding: 0 5%;
+
+		& > ol > li:first-child > .comment-body {
+
+			border-top: none;
+		}
+
+		.page .site-content & {
+
+			@include non-border( 1px solid rgba(0, 0, 0, 0.2), top );
+
+			&:before {
+
+				margin-left: -50%;
+				width: 200%;
+			}
+		}
+	}
+
+	.single .comment-list {
+
+		border-top: 1px solid $color__border-transparent;
+	}
+
+	.no-comments {
+
+		@include gutter-width(75%);
+		margin-left: 25%;
+	}
+
+	#respond,
+	.comment-respond {
+
+		border-top: 1px solid $color__border-transparent;
+		margin-top: -1px;
+
+		.comment-reply-title {
+
+			padding: 0 ($gutter * .5);
+			width: calc((100% / 8) * 2);
+		}
+
+		#commentform,
+		.comment-form {
+
+			padding: 0 ($gutter * .5);
+			width: calc((100% / 8) * 5) !important;
+		}
+	}
+}
+
+@include breakpoint( desktop ) {
+
+	.comments-title {
+
+		padding: ($baseline * 1.5) (64px + ($gutter * .2)) ($baseline * 1.5) ($gutter * .5);
+		position: absolute;
+		width: calc((100% / 8) * 2 - #{$gutter * 2});
+	}
+
+	.comment-body {
+
+		margin-left: calc((100% / 8) * 2);
+
+		.avatar {
+
+			margin-right: 0;
+			position: absolute;
+			right: calc( 100% + #{ $gutter * .2 } );
+			top: 20px;
+		}
+	}
+}

altofocus/assets/stylesheets/sections/_widgets.scss

@@ -0,0 +1,271 @@
+.widget-area {
+
+	z-index: 0;
+	position: relative;
+	background: $color__background-body;
+}
+
+.widget {
+
+	border-top: 1px solid $color__border-transparent;
+	display: table;
+	padding: $mobile-baseline 0;
+	margin: 0;
+	width: 100%;
+
+	& > ul,
+	& > div > ul {
+
+		list-style: none;
+		margin: 0;
+	}
+
+	// Make sure select elements fit in widgets.
+	select {
+
+		max-width: 100%;
+	}
+
+	.hfeed &:first-of-type {
+
+		border-top: none;
+	}
+
+	& > table {
+
+		border-top: none;
+
+		td {
+
+			border-bottom: none;
+		}
+	}
+
+	&:first-of-type {
+
+		border-top: none;
+	}
+}
+
+.widget > *:not(.widget-title) {
+
+	float: left;
+	@include gutter-width( 100% );
+	word-break: break-word;
+}
+
+.widget-title {
+
+	@include widget-title();
+	color: $color__link-hover;
+	@include gutter-width( 100% );
+	margin: 0 0 ($baseline * .5);
+}
+
+#secondary {
+
+	border-top: 1px solid $color__border-transparent;
+
+	.widget_calendar {
+
+		position: relative;
+
+		caption {
+
+			margin-bottom: ( $baseline * .5 );
+			color: $color__link-hover;
+		}
+	}
+
+	.widget_rss {
+
+		.widget-title {
+
+			display: flex;
+			flex-direction: column-reverse;
+
+			a {
+
+				display: inline-block;
+				word-break: break-all;
+			}
+		}
+
+		li {
+
+			margin-bottom: $baseline;
+
+			.rsswidget {
+
+				@include article-title( 1.125 );
+				display: block;
+				margin-bottom: ($baseline * .2);
+			}
+
+			.rss-date {
+
+				@include list-item();
+				@include font-size(.875);
+				color: $color__text-input;
+				margin-bottom: ($baseline * .5);
+				padding: 0;
+			}
+
+			.rssSummary {
+
+				margin-bottom: ( $baseline * .5 );
+			}
+
+			cite {
+
+				margin-right: $gutter;
+			}
+		}
+	}
+
+	.widget_search {
+
+		.search-form {
+
+			float: left;
+			width: calc( 100% - #{ $gutter } );
+		}
+
+		.search-field {
+
+			margin: 0 0 ( $baseline * .5 );
+			padding: 10px ( $gutter / 2 );
+			width: calc( 100% - #{ $gutter } );
+		}
+
+		.search-submit {
+
+			clear: both;
+			float: none;
+		}
+	}
+
+	.widget_wpcom_social_media_icons_widget .genericon {
+
+		font-size: $baseline;
+	}
+}
+
+@include breakpoint(phablet) {
+
+	.widget {
+
+		padding: ( $baseline * 1.5 ) 0;
+	}
+
+}
+
+@include breakpoint(tablet) {
+
+	.widget {
+
+		margin: 0;
+	}
+
+	.widget > *:not(.widget-title) {
+
+		@include gutter-width( ( 100% / 8 ) * 3 );
+	}
+
+	.widget-title {
+
+		float: left;
+		width: ( 100% / 8 ) * 2;
+	}
+
+	#secondary {
+
+		.widget_calendar {
+
+			position: relative;
+
+			.calendar_wrap {
+
+				width: ( ( 100% / 8 ) * 5 );
+				margin-left: calc( 25% );
+			}
+
+			.widget-title {
+
+				margin-right: -25%;
+			}
+
+			.widget-title + .calendar_wrap {
+
+				margin-left: calc( 25% );
+			}
+
+			table {
+
+				text-align: left;
+			}
+
+			td,
+			th {
+
+				padding: ($gutter * .5);
+			}
+
+			caption {
+
+				color: $color__link-hover;
+				padding: 0 ( $gutter * .5 );
+				margin-bottom: ( $baseline * .5 );
+				text-align: left;
+			}
+		}
+
+		.widget_blog_subscription > *:not(.widget-title),
+		.widget-gallery > *:not(.widget-title),
+		.widget_media_gallery > *:not(.widget-title),
+		.widget_tag_cloud .tagcloud,
+		.widget_tag_cloud > *:not(.widget-title),
+		.widget_text .textwidget,
+		.widget_media_image > *:not(.widget-title) {
+
+			@include gutter-width( ( 100% / 8 ) * 5 );
+		}
+
+		.widget_media_video > *:not(.widget-title),
+		.widget_media_audio > *:not(.widget-title) {
+
+			width: 100%;
+		}
+
+		.widget_search {
+
+			padding-left: 0;
+			padding-right: 0;
+
+			.widget-title {
+
+				margin-right: -25%;
+			}
+
+			.search-form {
+
+				margin-left: calc( 27.5% - #{ $gutter } );
+				width: calc( 62.5% );
+			}
+		}
+
+		.widget_nav_menu > * {
+
+			float: right;
+			@include gutter-width( 75% );
+		}
+	}
+}
+
+@include breakpoint(laptop) {
+
+	.widget-area-wrap {
+
+		padding: 0 5%;
+	}
+}

altofocus/assets/stylesheets/shared/_accessibility.scss

@@ -0,0 +1,32 @@
+/* Text meant only for screen readers. */
+.screen-reader-text {
+	clip: rect(1px, 1px, 1px, 1px);
+	position: absolute !important;
+	height: 1px;
+	width: 1px;
+	overflow: hidden;
+
+	&:focus {
+		background-color: $color__background-screen;
+		border-radius: 3px;
+		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+		clip: auto !important;
+		color: $color__text-screen;
+		display: block;
+		@include font-size(0.875);
+		font-weight: bold;
+		height: auto;
+		left: 5px;
+		line-height: normal;
+		padding: 15px 23px 14px;
+		text-decoration: none;
+		top: 5px;
+		width: auto;
+		z-index: 100000; /* Above WP toolbar. */
+	}
+}
+
+/* Do not show the outline on the skip link target. */
+#content[tabindex="-1"]:focus {
+	outline: 0;
+}

altofocus/assets/stylesheets/shared/_alignments.scss

@@ -0,0 +1,16 @@
+.alignleft {
+	display: inline;
+	float: left;
+	margin-right: 1.5em;
+}
+
+.alignright {
+	display: inline;
+	float: right;
+	margin-left: 1.5em;
+}
+
+.aligncenter {
+	clear: both;
+	@include center-block;
+}

altofocus/assets/stylesheets/shared/_buttons.scss

@@ -0,0 +1,6 @@
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+	@include button();
+}

altofocus/assets/stylesheets/shared/_clearings.scss

@@ -0,0 +1,23 @@
+.clear:before,
+.clear:after,
+.entry-content:before,
+.entry-content:after,
+.comment-content:before,
+.comment-content:after,
+.site-header:before,
+.site-header:after,
+.site-content:before,
+.site-content:after,
+.site-footer:before,
+.site-footer:after {
+	@include clearfix;
+}
+
+.clear:after,
+.entry-content:after,
+.comment-content:after,
+.site-header:after,
+.site-content:after,
+.site-footer:after {
+	@include clearfix-after;
+}

altofocus/assets/stylesheets/shared/_formatting.scss

@@ -0,0 +1,6 @@
+hr {
+	background-color: $color__background-hr;
+	border: 0;
+	height: 1px;
+	margin-bottom: 1.5em;
+}

altofocus/assets/stylesheets/shared/_forms.scss

@@ -0,0 +1,51 @@
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="tel"],
+input[type="range"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="color"],
+textarea {
+	color: $color__text-input;
+	border: 1px solid $color__border-input;
+	border-radius: 3px;
+
+	&:focus {
+		color: $color__text-input-focus;
+	}
+}
+
+select {
+	border: 1px solid $color__border-input;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="tel"],
+input[type="range"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="color"] {
+	padding: 3px;
+}
+
+textarea {
+	padding-left: 3px;
+	width: 100%;
+}

altofocus/assets/stylesheets/shared/_galleries.scss

@@ -0,0 +1,72 @@
+.gallery {
+
+	margin: 0 -#{$gutter} $baseline;
+}
+
+.gallery-item {
+
+	display: inline-block;
+	margin: ( $gutter * .5 );
+	text-align: center;
+	vertical-align: top;
+	width: 100%;
+
+	a {
+
+		display: block;
+		line-height: 0;
+	}
+
+	.gallery-columns-2 & {
+		max-width: calc( 50% - #{$gutter} );
+	}
+
+	.gallery-columns-3 & {
+		max-width: calc( 33.33% - #{$gutter} );
+	}
+
+	.gallery-columns-4 & {
+		max-width: calc( 25% - #{$gutter} );
+	}
+
+	.gallery-columns-5 & {
+		max-width: calc( 20% - #{$gutter} );
+	}
+
+	.gallery-columns-6 & {
+		max-width: calc( 16.66% - #{$gutter} );
+	}
+
+	.gallery-columns-7 & {
+		max-width: calc( 14.28% - #{$gutter} );
+	}
+
+	.gallery-columns-8 & {
+		max-width: calc( 12.5% - #{$gutter} );
+	}
+
+	.gallery-columns-9 & {
+		max-width: calc( 11.11% - #{$gutter} );
+	}
+}
+
+.gallery-icon {
+
+}
+
+.gallery-caption {
+
+	@include body-copy-small();
+	display: block;
+	font-family: $font__main;
+	margin-top: ( $baseline * .5 );
+	margin-bottom: $baseline;
+}
+
+@include breakpoint( mobileonly ) {
+
+	.gallery {
+
+		margin: 0 0 $baseline;
+	}
+}

altofocus/assets/stylesheets/shared/_infinitescroll.scss

@@ -0,0 +1,77 @@
+/* Globally hidden elements when Infinite Scroll is supported and in use. */
+.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
+.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
+
+	display: none;
+}
+
+/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
+.infinity-end.neverending .site-footer {
+
+	display: block;
+}
+
+#infinite-handle {
+
+	background: transparent;
+	bottom: 0;
+	clear: both;
+	display: block;
+	padding: $baseline 10%;
+	position: absolute;
+	text-align: center;
+	width: 100%;
+	z-index: 1;
+
+	span {
+
+		background: transparent;
+		display: block;
+		margin-top: -25px;
+		padding: 0;
+
+		button {
+
+			@include button();
+			display: inline-block;
+
+			&:hover {
+
+				@include list-item();
+				border: 1px solid;
+				border-color: $color__link;
+				display: inline-block;
+				padding: 1em $gutter;
+			}
+		}
+	}
+}
+
+.infinite-loader {
+
+	background: transparent;
+	bottom: 0;
+	clear: both;
+	display: block;
+	padding: $baseline 10%;
+	position: absolute;
+	text-align: center;
+	width: 100%;
+	z-index: 1;
+
+	.spinner[style] {
+
+		left: inherit !important;
+		margin: 0 auto;
+		top: inherit;
+	}
+}
+
+@include breakpoint( phablet ) {
+
+	#infinite-handle,
+	.infinite-loader {
+
+		padding: ($baseline * 2) 10%;
+	}
+}

altofocus/assets/stylesheets/shared/_links.scss

@@ -0,0 +1,21 @@
+a {
+
+	color: $color__link;
+	opacity: 1;
+	text-decoration: none;
+	@include transition( opacity, .0875s, ease-in );
+
+	&:visited {
+
+		color: $color__link-visited;
+	}
+
+	&:focus,
+	&:hover,
+	&:active {
+
+		color: $color__link;
+		opacity: .667;
+		outline: 0;
+	}
+}

altofocus/assets/stylesheets/shared/_lists.scss

@@ -0,0 +1,26 @@
+ul, ol {
+	margin: 0 0 $baseline $gutter;
+	padding: 0;
+}
+
+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;
+}

altofocus/assets/stylesheets/shared/_media.scss

@@ -0,0 +1,44 @@
+img {
+	height: auto; /* Make sure images are scaled correctly. */
+	max-width: 100%; /* Adhere to container width. */
+}
+
+.page-content .wp-smiley,
+.entry-content .wp-smiley,
+.comment-content .wp-smiley {
+	border: none;
+	margin-bottom: 0;
+	margin-top: 0;
+	padding: 0;
+}
+
+/* Make sure embeds and iframes fit their containers. */
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+
+.wp-caption {
+
+	margin-bottom: $baseline;
+	max-width: 100%;
+	width: 100%;
+
+	img[class*="wp-image-"] {
+		@include center-block;
+	}
+
+	.wp-caption-text {
+		margin: 0.8075em 0;
+	}
+}
+
+.wp-caption-text {
+	text-align: center;
+}
+
+/*--------------------------------------------------------------
+## Galleries
+--------------------------------------------------------------*/
+@import "galleries";

altofocus/assets/stylesheets/shared/_navigation.scss

@@ -0,0 +1,164 @@
+@import "../components/navigation/navigation-top";
+@import "../components/navigation/social-menu";
+@import "../components/navigation/navigation-fixed";
+
+.comment-navigation,
+.posts-navigation,
+.post-navigation {
+
+	align-items: flex-start;
+	border-top: 1px solid $color__border-transparent;
+	clear: both;
+	display: flex;
+	flex-wrap: wrap;
+	overflow: hidden;
+	padding: ($baseline * 1.5) 0 ($baseline * 1.5);
+	position: relative;
+	z-index: 3;
+
+	.screen-reader-text {
+
+		@include show-screen-reader-text();
+		@include widget-title();
+		color: $color__link-hover;
+		margin: 0 0 ($baseline * .5);
+		padding: 0 ($gutter / 2);
+		width: 100%;
+		flex: 1 1 100%;
+	}
+
+	.nav-links {
+
+		flex: 2 1 calc((100% / 8) * 6);
+
+		a {
+
+			display: block;
+			padding: 0 ($gutter / 2);
+		}
+	}
+
+	.nav-previous,
+	.nav-next {
+
+		@include nav-title();
+	}
+
+	.nav-previous {
+
+		float: left;
+		width: 50%;
+	}
+
+	.nav-next {
+
+		float: right;
+		width: 50%;
+	}
+
+	.meta-nav {
+
+		@include list-item();
+		color: #CCC;
+		display: block;
+		font-family: $font__main;
+		font-style: normal;
+	}
+}
+
+.comment-navigation {
+
+	border-top: 1px solid $color__border-transparent;
+	margin: 0;
+	padding-left: 0;
+	padding-right: 0;
+	width: 100%;
+}
+
+@include breakpoint( mobileonly ) {
+
+	.post-navigation, {
+
+		.nav-previous,
+		.nav-next {
+
+			float: none;
+			width: 100%;
+		}
+
+		.nav-links .nav-previous + .nav-next {
+
+			margin-top: $mobile-baseline;
+		}
+	}
+
+	.comment-navigation {
+
+		border-bottom: 1px solid $color__border-transparent;
+		margin: 0 0 ( $baseline * 1.5 );
+
+		.screen-reader-text {
+
+			display: none;
+		}
+	}
+
+	.posts-navigation {
+
+		border-top: none;
+
+		.screen-reader-text {
+
+			display: none;
+		}
+	}
+}
+
+@include breakpoint( tabletonly ) {
+
+	.posts-navigation {
+
+		.screen-reader-text {
+
+			display: none;
+		}
+	}
+
+	.comment-navigation {
+
+		border-bottom: 1px solid $color__border-transparent;
+	}
+}
+
+@include breakpoint( tablet ) {
+
+	.comment-navigation,
+	.post-navigation {
+
+		padding: ($baseline * 1.5) 0 ($baseline * 1.5);
+
+		.screen-reader-text {
+
+			margin: 0;
+			padding: 0 ($gutter / 2);
+			flex: 1 1 calc((100% / 8) * 2);
+		}
+	}
+
+	.posts-navigation {
+
+		padding: ($baseline * 1.5) 0 ($baseline * 1.5);
+
+		.screen-reader-text {
+
+			margin: 0;
+			padding: 0 ($gutter / 2);
+			flex: 1 1 calc((100% / 8) * 2);
+		}
+	}
+
+	.comment-navigation {
+
+		padding: ($baseline * 1.5) 0 ($baseline * 1.5);
+	}
+}

altofocus/assets/stylesheets/shared/_normalize.scss

@@ -0,0 +1,215 @@
+html {
+	font-family: sans-serif;
+	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust:     100%;
+}
+
+body {
+	margin: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+	display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+	display: inline-block;
+	vertical-align: baseline;
+}
+
+audio:not([controls]) {
+	display: none;
+	height: 0;
+}
+
+[hidden],
+template {
+	display: none;
+}
+
+a {
+	background-color: transparent;
+}
+
+a:active,
+a:hover {
+	outline: 0;
+}
+
+abbr[title] {
+	border-bottom: 1px dotted;
+}
+
+b,
+strong {
+	font-weight: bold;
+}
+
+dfn {
+	font-style: italic;
+}
+
+h1 {
+	font-size: 2em;
+	margin: 0.67em 0;
+}
+
+mark {
+	background: #ff0;
+	color: #000;
+}
+
+small {
+	font-size: 80%;
+}
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sup {
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+img {
+	border: 0;
+}
+
+svg:not(:root) {
+	overflow: hidden;
+}
+
+figure {
+	margin: 0;
+}
+
+hr {
+	box-sizing: content-box;
+	height: 0;
+}
+
+pre {
+	overflow: auto;
+}
+
+code,
+kbd,
+pre,
+samp {
+	font-family: monospace, monospace;
+	font-size: 1em;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	color: inherit;
+	font: inherit;
+	margin: 0;
+}
+
+button {
+	overflow: visible;
+}
+
+button,
+select {
+	text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+	-webkit-appearance: button;
+	cursor: pointer;
+}
+
+button[disabled],
+html input[disabled] {
+	cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+
+input {
+	line-height: normal;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+	box-sizing: border-box;
+	padding: 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+	height: auto;
+}
+
+input[type="search"] {
+	-webkit-appearance: textfield;
+	box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+fieldset {
+	border: 1px solid #c0c0c0;
+	margin: 0 2px;
+	padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+	border: 0;
+	padding: 0;
+}
+
+textarea {
+	overflow: auto;
+}
+
+optgroup {
+	font-weight: bold;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+td,
+th {
+	padding: 0;
+}

altofocus/assets/stylesheets/shared/_tables.scss

@@ -0,0 +1,11 @@
+table {
+	border-collapse: separate;
+	border-top: 1px solid $color__border-transparent;
+	margin: 0 0 $baseline;
+	width: 100%;
+
+	th, td {
+		border-bottom: 1px solid $color__border-transparent;
+		padding: ($gutter * .5);
+	}
+}

altofocus/assets/stylesheets/shared/_typography.scss

@@ -0,0 +1,81 @@
+body,
+button,
+input,
+select,
+textarea {
+	color: $color__text-main;
+	font-family: $font__main;
+	@include font-size();
+	line-height: $font__line-height-body;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	clear: both;
+	margin: ($baseline * .75) 0;
+}
+
+p {
+	margin: 0 0 $baseline;
+}
+
+dfn, cite, em, i {
+	font-style: italic;
+}
+
+cite {
+	color: $color__link-hover;
+	display: block;
+	font-family: $font__header;
+	width: 100%;
+
+	&:before {
+		content: "\2014"
+	}
+}
+
+blockquote {
+	margin: 0 $gutter;
+}
+
+address {
+	margin: 0 0 $baseline;
+}
+
+pre {
+	background: $color__background-pre;
+	font-family: $font__pre;
+	@include font-size(0.9375);
+	line-height: $font__line-height-pre;
+	margin-bottom: $baseline;
+	max-width: 100%;
+	overflow: auto;
+	padding: 1.6em;
+}
+
+code, kbd, tt, var {
+	font-family: $font__code;
+	@include font-size(0.9375);
+}
+
+abbr, acronym {
+	border-bottom: 1px dotted $color__border-abbr;
+	cursor: help;
+}
+
+mark, ins {
+	background: $color__background-ins;
+	text-decoration: none;
+}
+
+big {
+	font-size: 125%;
+}
+
+blockquote, q {
+	quotes: "" "";
+
+	&:before,
+	&:after {
+		content: "";
+	}
+}

altofocus/assets/stylesheets/style-wpcom.css

@@ -0,0 +1,1003 @@
+/*THIS FILE IS COMPILED FROM AN .SCSS FILE - DO NOT EDIT DIRECTLY*/
+/**
+ * WordPress.com specific styles
+ *
+ *
+ */
+/* Variables & Mixins
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Color Variables */
+/*--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Typographic Variables */
+/*--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Global Structure */
+/*--------------------------------------------------------------*/
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Typographic Mixins */
+/*--------------------------------------------------------------*/
+/*--------------------------------------------------------------
+# Animations
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Animations */
+/*--------------------------------------------------------------*/
+@-webkit-keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+  }
+
+  50% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+  }
+}
+
+@-moz-keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+  }
+
+  50% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+  }
+}
+
+@-o-keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+  }
+
+  50% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+  }
+}
+
+@keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+  }
+
+  50% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1.1, -2);
+  }
+}
+
+@-webkit-keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+  }
+
+  50% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+  }
+}
+
+@-moz-keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+  }
+
+  50% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+  }
+}
+
+@-o-keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+  }
+
+  50% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+  }
+}
+
+@keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 1, -2);
+  }
+
+  50% {
+    -webkit-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scaleY, "()", -1), 0.9, -2);
+  }
+}
+
+@-webkit-keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+  }
+}
+
+@-moz-keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+  }
+}
+
+@-o-keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+  }
+}
+
+@keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+  }
+}
+
+@-webkit-keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+  }
+}
+
+@-moz-keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+  }
+}
+
+@-o-keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+  }
+}
+
+@keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 0, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), -10px, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 3px, -2);
+  }
+}
+
+@-webkit-keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+  }
+}
+
+@-moz-keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+  }
+}
+
+@-o-keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+  }
+}
+
+@keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), 10px, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -moz-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -ms-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    -o-transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+    transform: str_insert(str_insert(translateX, "()", -1), -3px, -2);
+  }
+}
+
+@-webkit-keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+  }
+}
+
+@-moz-keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+  }
+}
+
+@-o-keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+  }
+}
+
+@keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  33% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.25, -2);
+  }
+
+  66% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.85, -2);
+  }
+}
+
+@-webkit-keyframes bounce-zoom {
+  0% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  25% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+  }
+
+  75% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+  }
+
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+  }
+}
+
+@-moz-keyframes bounce-zoom {
+  0% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  25% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+  }
+
+  75% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+  }
+
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+  }
+}
+
+@-o-keyframes bounce-zoom {
+  0% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  25% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+  }
+
+  75% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+  }
+
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+  }
+}
+
+@keyframes bounce-zoom {
+  0% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1, -2);
+  }
+
+  25% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.1, -2);
+  }
+
+  75% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 0.9, -2);
+  }
+
+  100% {
+    -webkit-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -moz-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -ms-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    -o-transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+    transform: str_insert(str_insert(scale, "()", -1), 1.125, -2);
+  }
+}
+
+/*--------------------------------------------------------------
+# UI
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## UI Mixins */
+/*--------------------------------------------------------------*/
+/**
+ * Non obstructive border
+ * - Src: http://stackoverflow.com/questions/11765642/sass-optimize-borders-into-one-line-of-code
+ * - Usage: @include non-border(2px solid shade($ccblue, 10%), bottom, right);
+ */
+/*--------------------------------------------------------------
+# Breakpoints
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Breakpoint Mixins */
+/*--------------------------------------------------------------*/
+/*
+	Breakpoints
+	Src: https://responsivedesign.is/develop/getting-started-with-sass
+	Usage:
+	.grid-1-4 {
+		width: 100%;
+		@include breakpoint(phablet) {
+			width: 50%;
+		}
+		@include breakpoint(laptop) {
+			width: 25%;
+		}
+	 }
+*/
+/*--------------------------------------------------------------
+# Plugins
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Highlander Comments */
+/*--------------------------------------------------------------*/
+.highlander-enabled #respond {
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  margin-top: -1px !important;
+}
+.highlander-enabled #respond h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.highlander-enabled #respond label,
+.highlander-enabled #respond form label {
+  color: #666666;
+}
+
+.page.highlander-enabled #respond {
+  border-top-width: 0;
+  margin-top: 0 !important;
+}
+
+.page.highlander-enabled .comment-list + #respond {
+  border-top-width: 1px;
+  margin-top: -1px !important;
+}
+
+/**
+ * Stats
+ */
+#wpstats {
+  display: none;
+}
+
+/**
+ * Ads
+ */
+.wpa .u > div,
+.wpadvert > div > * {
+  background-color: #efefef;
+}
+
+/**
+ * Widgets
+ */
+#secondary .time_machine_widget {
+  position: relative;
+}
+#secondary .time_machine_widget .time-machine-post {
+  width: 62.5%;
+  margin-left: calc(25%);
+}
+#secondary .time_machine_widget .time-machine-post-title {
+  font-size: 16.875px;
+  font-size: 1.125rem;
+  font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+  font-weight: 300;
+  line-height: 1.75em;
+  word-break: break-word;
+  margin: 0.875em 0;
+}
+#secondary .time_machine_widget .time-machine-navigation {
+  position: relative;
+}
+#secondary .time_machine_widget .time-machine-navigation {
+  font-size: 14.76563px;
+  font-size: 0.98438rem;
+  font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+  font-weight: 300;
+  font-style: italic;
+  line-height: 1.46563em;
+}
+@media screen and (min-width: 37.5em) {
+  #secondary .time_machine_widget .time-machine-navigation {
+    font-size: 16.875px;
+    font-size: 1.125rem;
+  }
+}
+#secondary .widget_wpcom_social_media_icons_widget ul li a {
+  padding: 0 3px;
+}
+#secondary .widget_wpcom_social_media_icons_widget ul li a:before {
+  font-size: 1.75em;
+}
+#secondary .widget_authors > ul > li > a {
+  display: block;
+  margin-bottom: 0.875em;
+}
+#secondary .widget_authors > ul > li > a img,
+#secondary .widget_authors > ul > li > a strong {
+  display: inline-block;
+  vertical-align: middle;
+}
+#secondary .widget_recent_entries ul {
+  margin-bottom: 0;
+}
+#secondary .widget_recent_entries ul li {
+  font-size: 14.76563px;
+  font-size: 0.98438rem;
+  font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+  font-weight: 300;
+  font-style: italic;
+  line-height: 1.46563em;
+  margin-bottom: 1.4em;
+}
+@media screen and (min-width: 37.5em) {
+  #secondary .widget_recent_entries ul li {
+    font-size: 16.875px;
+    font-size: 1.125rem;
+  }
+}
+#secondary .widget-grofile .grofile-meta h4 {
+  font-size: 14.76563px;
+  font-size: 0.98438rem;
+  font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+  font-weight: 300;
+  line-height: 1.75em;
+  word-break: break-word;
+  color: #888888;
+  margin: 0;
+}
+@media screen and (min-width: 37.5em) {
+  #secondary .widget-grofile .grofile-meta h4 {
+    font-size: 16.875px;
+    font-size: 1.125rem;
+  }
+}
+#secondary .widget_recent_comments .recentcommentstexttop,
+#secondary .widget_recent_comments .recentcommentstextend {
+  font-size: 14.76563px;
+  font-size: 0.98438rem;
+  font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+  font-weight: 300;
+  font-style: italic;
+  line-height: 1.46563em;
+}
+@media screen and (min-width: 37.5em) {
+  #secondary .widget_recent_comments .recentcommentstexttop,
+  #secondary .widget_recent_comments .recentcommentstextend {
+    font-size: 16.875px;
+    font-size: 1.125rem;
+  }
+}
+#secondary .aboutme_widget h2 {
+  clear: inherit;
+}
+#secondary #flickr_badge_wrapper {
+  border: rgba(0, 0, 0, 0.2);
+}
+
+@media screen and (min-width: 50em) {
+  #secondary .widget_author_grid > ul,
+  #secondary .widget_flickr > table,
+  #secondary .widget_recent_images .recent_images,
+  #secondary .jetpack_widget_social_icons .jetpack-social-widget-list {
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    width: calc(62.5%);
+  }
+  #secondary .time_machine_widget .time-machine-post {
+    width: 62.5%;
+    margin-left: calc(25%);
+  }
+  #secondary .time_machine_widget .time-machine-navigation {
+    position: absolute;
+    top: 2.625em;
+    left: 12.5px;
+  }
+  #secondary .time_machine_widget .time-machine-navigation {
+    font-size: 14.76563px;
+    font-size: 0.98438rem;
+    font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+    font-weight: 300;
+    font-style: italic;
+    line-height: 1.46563em;
+  }
+  #secondary .widget_jetpack_my_community > * {
+    margin-left: 25%;
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    width: calc(62.5%);
+  }
+  #secondary .widget-grofile {
+    padding-left: 25%;
+    position: relative;
+  }
+  #secondary .widget-grofile .grofile-meta {
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    width: calc(60%);
+  }
+  #secondary .widget-grofile .grofile-meta h4 {
+    position: absolute;
+    left: 0;
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    width: calc(25%);
+  }
+  #secondary .widget-grofile .grofile-thumbnail {
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    width: calc(40%);
+  }
+  #secondary .widget_recent_comments .recentcommentsavatar {
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    width: calc(62.5%);
+  }
+  #secondary .wp_widget_tag_cloud > *:not(.widget-title),
+  #secondary .wp_widget_tag_cloud > div {
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    width: calc(62.5%);
+  }
+}
+@media screen and (min-width: 50em) and (min-width: 37.5em) {
+  #secondary .time_machine_widget .time-machine-navigation {
+    font-size: 16.875px;
+    font-size: 1.125rem;
+  }
+}

altofocus/assets/stylesheets/style-wpcom.scss

@@ -0,0 +1,195 @@
+/**
+ * WordPress.com specific styles
+ *
+ *
+ */
+
+/* Variables & Mixins
+--------------------------------------------------------------*/
+@import "variables/variables-base";
+@import "mixins/mixins-base";
+
+/*--------------------------------------------------------------
+# Plugins
+--------------------------------------------------------------*/
+@import "plugins/highlander-comments";
+
+/**
+ * Stats
+ */
+
+#wpstats {
+	display: none;
+}
+
+/**
+ * Ads
+ */
+
+.wpa .u > div,
+.wpadvert > div > * {
+
+	background-color: #efefef;
+}
+
+/**
+ * Widgets
+ */
+
+#secondary {
+
+	.time_machine_widget {
+		position: relative;
+
+		.time-machine-post {
+			width: ( ( 100% / 8 ) * 5 );
+			margin-left: calc(25%);
+		}
+
+		.time-machine-post-title {
+			@include font-size(1.125);
+			font-family: $font__header;
+			font-weight: 300;
+			line-height: ($baseline);
+			word-break: break-word;
+			margin: ($baseline * .5) 0;
+		}
+
+		.time-machine-navigation {
+			position: relative;
+		}
+
+		.time-machine-navigation {
+			@include nav-title();
+		}
+	}
+
+	.widget_wpcom_social_media_icons_widget ul li a {
+
+		padding: 0 3px;
+
+		&:before {
+			font-size: $baseline;
+		}
+	}
+
+	.widget_authors > ul > li > a {
+
+		display: block;
+		margin-bottom: ($baseline * .5);
+
+		img,
+		strong {
+			display: inline-block;
+			vertical-align: middle;
+		}
+	}
+
+	.widget_recent_entries ul {
+
+		margin-bottom: 0;
+
+		li {
+
+			@include nav-title();
+			margin-bottom: $mobile-baseline;
+		}
+	}
+
+	.widget-grofile .grofile-meta h4 {
+
+		@include widget-title();
+		color: $color__link-hover;
+		margin: 0;
+	}
+
+	.widget_recent_comments {
+
+		.recentcommentstexttop,
+		.recentcommentstextend {
+
+			@include nav-title();
+		}
+	}
+
+	.aboutme_widget h2 {
+
+		clear: inherit;
+	}
+
+	#flickr_badge_wrapper {
+
+		border: $color__border-transparent;
+	}
+
+}
+
+@include breakpoint(tablet) {
+
+	#secondary {
+
+		.widget_author_grid > ul,
+		.widget_flickr > table,
+		.widget_recent_images .recent_images,
+		.jetpack_widget_social_icons .jetpack-social-widget-list {
+
+			@include gutter-width( ( 100% / 8 ) * 5 );
+		}
+
+		.time_machine_widget {
+
+			.time-machine-post {
+				width: ( ( 100% / 8 ) * 5 );
+				margin-left: calc(25%);
+			}
+
+			.time-machine-navigation {
+				position: absolute;
+				top: ($baseline * 1.5);
+				left: ($gutter * .5);
+			}
+
+			.time-machine-navigation {
+				@include nav-title();
+			}
+		}
+
+		.widget_jetpack_my_community > * {
+
+			margin-left: 25%;
+			@include gutter-width( ( 100% / 8 ) * 5 );
+		}
+
+		.widget-grofile {
+			padding-left: 25%;
+			position: relative;
+
+			.grofile-meta {
+				@include gutter-width( 60% );
+
+				h4 {
+					position: absolute;
+					left: 0;
+					@include gutter-width( 25% );
+				}
+			}
+			.grofile-thumbnail {
+				@include gutter-width( 40% );
+			}
+		}
+
+		.widget_recent_comments {
+
+			.recentcommentsavatar {
+
+				@include gutter-width( ( 100% / 8 ) * 5 );
+			}
+		}
+
+		.wp_widget_tag_cloud > *:not(.widget-title),
+		.wp_widget_tag_cloud > div {
+
+			@include gutter-width( ( 100% / 8 ) * 5 );
+		}
+	}
+}

altofocus/assets/stylesheets/style.scss

@@ -0,0 +1,151 @@
+/*
+Theme Name: AltoFocus
+Theme URI: https://wordpress.com/themes/altofocus/
+Author: Automattic, Inc
+Author URI: http://automattic.com
+Description: AltoFocus is a theme for photographers, artists, and other creative types in search of a simple and easy way to display their work.
+Version: 1.0.0-wpcom
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: altofocus
+Tags: art, artwork, clean, featured-images, full-width-template, grid-layout, infinite-scroll, minimal, one-column, photoblogging, photography, portfolio, responsive-layout, rtl-language-support, site-logo, theme-options, translation-ready
+
+This theme, like WordPress, is licensed under the GPL.
+Use it to make something cool, have fun, and share what you've learned with others.
+
+AltoFocus is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
+Underscores is distributed under the terms of the GNU GPL v2 or later.
+
+Normalizing styles have been helped along thanks to the fine work of
+Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
+*/
+
+/*--------------------------------------------------------------
+>>> TABLE OF CONTENTS:
+----------------------------------------------------------------
+# Variables & Mixins
+# Normalize
+# Accessibility
+# Alignments
+# Clearings
+# Typography
+# Forms
+# Buttons
+# Formatting
+# Lists
+# Tables
+# Navigation
+# Links
+# Layout
+	## Posts
+	## Pages
+# Comments
+# Widgets
+# Infinite scroll
+# Media
+	## Galleries
+# Components
+# Plugins
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Variables & Mixins
+--------------------------------------------------------------*/
+@import "variables/variables-base";
+@import "mixins/mixins-base";
+
+/*--------------------------------------------------------------
+# Normalize
+--------------------------------------------------------------*/
+@import "shared/normalize";
+
+/*--------------------------------------------------------------
+# Accessibility
+--------------------------------------------------------------*/
+@import "shared/accessibility";
+
+/*--------------------------------------------------------------
+# Alignments
+--------------------------------------------------------------*/
+@import "shared/alignments";
+
+/*--------------------------------------------------------------
+# Clearings
+--------------------------------------------------------------*/
+@import "shared/clearings";
+
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+@import "shared/typography";
+
+/*--------------------------------------------------------------
+# Forms
+--------------------------------------------------------------*/
+@import "shared/forms";
+
+/*--------------------------------------------------------------
+# Buttons
+--------------------------------------------------------------*/
+@import "shared/buttons";
+
+/*--------------------------------------------------------------
+# Formattings
+--------------------------------------------------------------*/
+@import "shared/formatting";
+
+/*--------------------------------------------------------------
+# Lists
+--------------------------------------------------------------*/
+@import "shared/lists";
+
+/*--------------------------------------------------------------
+# Tables
+--------------------------------------------------------------*/
+@import "shared/tables";
+
+/*--------------------------------------------------------------
+# Navigation
+--------------------------------------------------------------*/
+@import "shared/navigation";
+
+/*--------------------------------------------------------------
+# Links
+--------------------------------------------------------------*/
+@import "shared/links";
+
+/*--------------------------------------------------------------
+# Layout
+--------------------------------------------------------------*/
+@import "layout/layout";
+
+/*--------------------------------------------------------------
+# Comments
+--------------------------------------------------------------*/
+@import "sections/comments";
+
+/*--------------------------------------------------------------
+# Widgets / Sidebar
+--------------------------------------------------------------*/
+@import "sections/widgets";
+
+/*--------------------------------------------------------------
+# Infinite scroll
+--------------------------------------------------------------*/
+@import "shared/infinitescroll";
+
+/*--------------------------------------------------------------
+# Media
+--------------------------------------------------------------*/
+@import "shared/media";
+
+/*--------------------------------------------------------------
+# Components
+--------------------------------------------------------------*/
+@import "components/components";
+
+/*--------------------------------------------------------------
+# Plugins
+--------------------------------------------------------------*/
+@import "plugins/flexslider";
+@import "plugins/post-flair";

altofocus/assets/stylesheets/variables/_colors.scss

@@ -0,0 +1,26 @@
+/*--------------------------------------------------------------*/
+/* !## Color Variables */
+/*--------------------------------------------------------------*/
+
+$color__background-body: #fff;
+$color__background-screen: #f1f1f1;
+$color__background-hr: #ccc;
+$color__background-button: #e6e6e6;
+$color__background-pre: #eee;
+$color__background-ins: #fff9c0;
+
+$color__text-screen: #21759b;
+$color__text-input: #666;
+$color__text-input-focus: #111;
+$color__link: #e38900; // #F35029
+$color__link-visited: #e38900;
+$color__link-hover: #888888;
+$color__text-main: #111111;
+
+$color__border-button: #ccc #ccc #bbb;
+$color__border-button-hover: #ccc #bbb #aaa;
+$color__border-button-focus: #aaa #bbb #bbb;
+$color__border-input: #ccc;
+$color__border-abbr: #666;
+
+$color__border-transparent: rgba(0,0,0,0.2);

altofocus/assets/stylesheets/variables/_structure.scss

@@ -0,0 +1,10 @@
+/*--------------------------------------------------------------*/
+/* !## Global Structure */
+/*--------------------------------------------------------------*/
+
+$size_site-main: 100%;
+$size_content: 60%;
+$size_site-sidebar: 25%;
+$gutter: 25px;
+$mobile-gutter: ($gutter * .6);
+$admin-bar-height: 32px;

altofocus/assets/stylesheets/variables/_typography.scss

@@ -0,0 +1,13 @@
+/*--------------------------------------------------------------*/
+/* !## Typographic Variables */
+/*--------------------------------------------------------------*/
+
+$font__main: 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font__header: 'Libre Baskerville', 'Georgia', Georgia, 'Times New Roman', Times, serif;
+$font__quote: $font__header;
+$font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+$font__pre: "Courier 10 Pitch", Courier, monospace;
+$font__line-height-body: 1.75;
+$font__line-height-pre: 1.875;
+$baseline: ($font__line-height-body * 1em);
+$mobile-baseline: ($baseline * 0.8);

altofocus/assets/stylesheets/variables/_variables-base.scss

@@ -0,0 +1,3 @@
+@import "colors";
+@import "typography";
+@import "structure";

altofocus/comments.php

@@ -0,0 +1,70 @@
+<?php
+/**
+ * The template for displaying comments.
+ *
+ * This is the template that displays the area of the page that contains both the current comments
+ * and the comment form.
+ *
+ * @link https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package AltoFocus
+ */
+
+/*
+ * If the current post is protected by a password and
+ * the visitor has not yet entered the password we will
+ * return early without loading the comments.
+ */
+if ( post_password_required() ) {
+	return;
+}
+?>
+
+<div id="comments" class="comments-area">
+
+	<?php
+	// You can start editing here -- including this comment!
+	if ( have_comments() ) : ?>
+		<h2 class="comments-title">
+			<?php
+				printf( // WPCS: XSS OK.
+					esc_html( _nx( 'One Comment', '%1$s Comments', get_comments_number(), 'comments title', 'altofocus' ) ),
+					number_format_i18n( get_comments_number() )
+				);
+			?>
+		</h2>
+		<ol class="comment-list">
+			<?php
+				wp_list_comments( array(
+					'style'       => 'ol',
+					'short_ping'  => true,
+					'avatar_size' => 64,
+				) );
+			?>
+		</ol>
+		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
+		<nav id="comment-nav-below" class="navigation comment-navigation" role="navigation">
+			<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'altofocus' ); ?></h2>
+			<div class="nav-links">
+
+				<div class="nav-previous"><?php previous_comments_link( esc_html__( 'Older Comments', 'altofocus' ) ); ?></div>
+				<div class="nav-next"><?php next_comments_link( esc_html__( 'Newer Comments', 'altofocus' ) ); ?></div>
+
+			</div>
+		</nav>
+		<?php
+		endif; // Check for comment navigation.
+
+	endif; // Check for have_comments().
+
+	// If comments are closed and there are comments, let's leave a little note, shall we?
+	if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?>
+		<p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'altofocus' ); ?></p>
+	<?php
+	endif;
+
+	// Show comment form
+	comment_form();
+	?>
+
+</div><!-- #comments -->

altofocus/components/footer/site-info.php

@@ -0,0 +1,7 @@
+	<div class="site-info">
+		<div class="site-info-wrap">
+			<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'altofocus' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', 'altofocus' ), 'WordPress' ); ?></a>
+			<span class="sep"> | </span>
+			<?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'altofocus' ), 'AltoFocus', '<a href="http://wordpress.com/themes/" rel="designer">WordPress.com</a>' ); ?>
+		</div>
+	</div><!-- .site-info -->

altofocus/components/header/header-site-branding.php

@@ -0,0 +1,16 @@
+			<div class="site-branding">
+				<div class="site-branding-wrap">
+					<?php the_custom_logo(); ?>
+					<div class="site-identity">
+						<?php if ( is_front_page() && is_home() ) : ?>
+							<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
+						<?php else : ?>
+							<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
+						<?php endif; ?>
+						<?php $description = get_bloginfo( 'description', 'display' );
+							if ( $description || is_customize_preview() ) : ?>
+							<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
+						<?php endif; ?>
+					</div>
+				</div>
+			</div><!-- .site-branding -->

altofocus/components/navigation/navigation-fixed.php

@@ -0,0 +1,28 @@
+<?php
+	$navigation = '';
+
+	$previous = get_previous_post_link(
+		'<div class="nav-previous">%link</div>',
+		'<span class="screen-reader-text">%title</span> <span class="meta-nav" aria-hidden="true"><svg class="arrow-icon left-arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle class="circle" cx="20" cy="20" r="19.5"/><polyline class="arrow" points="22.8 12 14.8 20 22.8 28 "/></svg></span>',
+		false,
+		'',
+		'category'
+	);
+
+	$next = get_next_post_link(
+		'<div class="nav-next">%link</div>',
+		'<span class="screen-reader-text">%title</span> <span class="meta-nav" aria-hidden="true"><svg class="arrow-icon right-arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle class="circle" cx="20" cy="20" r="19.5"/><polyline class="arrow" points="17.2,28 25.2,20 17.2,12 "/></svg></span>',
+		false,
+		'',
+		'category'
+	);
+
+    // Only add markup if there's somewhere to navigate to.
+    if ( $previous || $next ) {
+
+        $navigation = '<nav class="navigation post-navigation-fixed" role="navigation"><div class="nav-links">' . $previous . $next . '</div></nav>';
+    }
+
+    echo $navigation;
+
+?>

altofocus/components/navigation/navigation-top.php

@@ -0,0 +1,20 @@
+<nav id="site-navigation" class="top-navigation" role="navigation">
+	<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false">
+		<span class="meta-nav">
+			<svg class="menu-icon menu-icon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+				<line class="line" x1="2" y1="2.6" x2="8" y2="2.6"/>
+				<line class="line" x1="2" y1="5" x2="8" y2="5"/>
+				<line class="line" x1="2" y1="7.4" x2="8" y2="7.4"/>
+			</svg>
+			<svg class="menu-icon menu-icon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+				<line class="line" x1="2.5" y1="7.5" x2="7.5" y2="2.5"/>
+				<line class="line" x1="2.5" y1="2.5" x2="7.5" y2="7.5"/>
+			</svg>
+		</span>
+		<?php esc_html_e( 'Menu', 'altofocus' ); ?>
+	</button>
+	<?php wp_nav_menu( array(
+		'theme_location' => 'menu-1',
+		'menu_id'        => 'top-menu'
+	) ); ?>
+</nav><!-- #site-navigation -->

altofocus/components/page/content-page.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Template part for displaying page content in page.php.
+ *
+ * @link https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package AltoFocus
+ */
+
+?>
+
+<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+	<header class="entry-header">
+		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
+		<?php // Edit link
+			edit_post_link(
+				sprintf(
+					/* translators: %s: Name of current post */
+					esc_html__( 'Edit %s', 'altofocus' ),
+					the_title( '<span class="screen-reader-text">"', '"</span>', false )
+				),
+				'<div class="entry-meta"><span class="edit-link">',
+				'</span></div>'
+			);
+		?>
+	</header>
+	<div class="entry-content">
+		<?php
+			the_content();
+
+			wp_link_pages( array(
+				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'altofocus' ),
+				'after'  => '</div>',
+			) );
+		?>
+	</div>
+</article><!-- #post-## -->

altofocus/components/post/content-footer.php

@@ -0,0 +1,3 @@
+	<footer class="entry-footer">
+		<?php altofocus_entry_footer(); ?>
+	</footer><!-- .entry-footer -->

altofocus/components/post/content-meta.php

@@ -0,0 +1,3 @@
+		<div class="entry-meta">
+			<?php altofocus_posted_on(); ?>
+		</div><!-- .entry-meta -->

altofocus/components/post/content-none.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Template part for displaying a message that posts cannot be found.
+ *
+ * @link https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package AltoFocus
+ */
+
+?>
+
+<section class="no-results not-found">
+	<header class="page-header">
+		<h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'altofocus' ); ?></h1>
+	</header>
+	<div class="page-content">
+		<?php
+		if ( is_home() && current_user_can( 'publish_posts' ) ) : ?>
+
+			<p><?php printf( wp_kses( __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'altofocus' ), array( 'a' => array( 'href' => array() ) ) ), esc_url( admin_url( 'post-new.php' ) ) ); ?></p>
+
+		<?php elseif ( is_search() ) : ?>
+
+			<p><?php esc_html_e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'altofocus' ); ?></p>
+			<?php
+				get_search_form();
+
+		else : ?>
+
+			<p><?php esc_html_e( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.', 'altofocus' ); ?></p>
+			<?php
+				get_search_form();
+
+		endif; ?>
+	</div>
+</section><!-- .no-results -->

altofocus/components/post/content-search.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Template part for displaying results in search pages.
+ *
+ * @link https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package AltoFocus
+ */
+
+?>
+
+<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+	<header class="entry-header">
+		<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
+		<?php if ( 'post' === get_post_type() ) : ?>
+			<?php get_template_part( 'components/post/content', 'meta' ); ?>
+		<?php endif; ?>
+	</header>
+	<div class="entry-summary">
+		<?php the_excerpt(); ?>
+	</div>
+	<?php get_template_part( 'components/post/content', 'footer' ); ?>
+</article>

altofocus/components/post/content-single.php

@@ -0,0 +1,106 @@
+<?php
+/**
+ * Template part for displaying posts.
+ *
+ * @link https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package AltoFocus
+ */
+?>
+
+<?php
+
+	/**
+	 * Display A Gallery
+	 *
+	 * - Only display gallery when content has [gallery] shortcode and type = 'slideshow'
+	 * - Allow single post, featured image Content Options to force shortcode default behavior
+	 *
+	 * src: http://wordpress.stackexchange.com/questions/121489/split-content-and-gallery/121508
+	 * src: http://stackoverflow.com/questions/17224100/wordpress-remove-shortcode-and-save-for-use-elsewhere
+	 */
+
+	// Reset content width for featured image/gallery
+	$content_width = 1200;
+
+	// Look for shortcodes in content
+	$content = get_the_content();
+	$pattern = get_shortcode_regex();
+	$content_option_override = ( empty ( get_option( 'jetpack_content_featured_images_post' ) ) ) ? '0' : '1';
+	preg_match( '/' . $pattern . '/s', $content, $matches );
+
+	// Account for Content Option settings
+	if ( ! function_exists( 'jetpack_featured_images_remove_post_thumbnail' ) ) {
+		$content_option_override = '1';
+	} elseif ( empty ( get_option( 'jetpack_content_featured_images_post' ) ) ) {
+		$content_option_override = '0';
+	} else {
+		$content_option_override = '1';
+	}
+
+	// If content has a gallery with the slideshow type, display that instead of the featured image.
+	if ( has_shortcode( $content, 'gallery' ) && ( strpos( $matches[0], 'slideshow' ) !== false ) && $content_option_override == '1' ) :
+
+		if ( $matches ) {
+
+			if ( is_array( $matches ) && $matches[2] == 'gallery' ) {
+
+				// Remove gallery markup from content (affects .entry-content below)
+				$content = altofocus_strip_override_shortcode( $content );
+
+				// Replace gallery with flexslider_gallery shortcode
+				$shortcode = $matches[0];
+				$shortcode = preg_replace( '/\[' . $matches[2] . ' /', '[flexslider_gallery size="altofocus-post-featured-image" ', $shortcode, 1 );
+				$output = do_shortcode( $shortcode );
+			}
+		}
+
+		// Output flexslider_gallery as a slideshow
+		echo "\t\t\t<div class=\"entry-media\">
+			\t<div class=\"entry-media-wrap\">
+			\t\t" . $output . "
+			\t</div>
+			</div>";
+
+	/**
+	 * OR display regular featured image
+	 */
+
+	elseif ( '' != altofocus_has_post_thumbnail() ) : ?>
+	<figure class="entry-media">
+		<div class="entry-media-wrap">
+			<?php the_post_thumbnail( 'altofocus-post-featured-image' ); ?>
+		</div>
+	</figure>
+<?php endif; ?>
+
+<?php get_template_part( 'components/navigation/navigation', 'fixed' ); ?>
+
+<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+	<header class="entry-header">
+		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
+		<?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
+			<div class="comments-link">
+				<?php comments_popup_link( esc_html__( '0', 'altofocus' ), esc_html__( '1', 'altofocus' ), esc_html__( '%', 'altofocus' ) ); ?>
+				<svg class="comment-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+					<path class="path" d="M49.5,25c0-13.5-11-24.5-24.5-24.5S0.5,11.5,0.5,25s11,24.5,24.5,24.5h24.5l-7.2-7.2 C46.8,37.9,49.5,31.8,49.5,25z"/>
+				</svg>
+			</div>
+		<?php endif; ?>
+		<?php get_template_part( 'components/post/content', 'meta' ); ?>
+	</header>
+	<div class="entry-content">
+		<?php // Display the content after reseting the content width to global
+			$content_width = $GLOBALS['content_width'];
+			$content = apply_filters( 'the_content', $content );
+
+			echo $content;
+
+			wp_link_pages( array(
+				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'altofocus' ),
+				'after'  => '</div>',
+			) );
+		?>
+	</div>
+	<?php get_template_part( 'components/post/content', 'footer' ); ?>
+</article><!-- #post-## -->

altofocus/components/post/content.php

@@ -0,0 +1,51 @@
+<?php
+/**
+ * Template part for displaying posts.
+ *
+ * @link https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package AltoFocus
+ */
+?>
+
+<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+	<?php if ( altofocus_has_post_thumbnail() ) : ?>
+		<figure class="post-thumbnail">
+			<a href="<?php the_permalink(); ?>">
+				<?php the_post_thumbnail( 'altofocus-thumb-image' ); ?>
+			</a>
+		</figure>
+	<?php endif; ?>
+
+	<header class="entry-header">
+		<a href="<?php echo esc_url( get_permalink() ) ?>" class="entry-header-wrap" rel="bookmark">
+			<?php the_title( '<span class="entry-title">', '</span>' ); ?>
+			<?php
+				$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
+				if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
+					$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
+				}
+
+				$time_string = sprintf( $time_string,
+					esc_attr( get_the_date( 'c' ) ),
+					esc_html( get_the_date() ),
+					esc_attr( get_the_modified_date( 'c' ) ),
+					esc_html( get_the_modified_date() )
+				);
+
+				echo '<span class="posted-on">' . $time_string . '</span>'; // WPCS: XSS OK.
+			?>
+		</a>
+		<?php
+			edit_post_link(
+				sprintf(
+					/* translators: %s: Name of current post */
+					esc_html__( 'Edit %s', 'altofocus' ),
+					the_title( '<span class="screen-reader-text">"', '"</span>', false )
+				),
+				'<span class="edit-link">',
+				'</span>'
+			);
+		?>
+	</header>
+</article>

altofocus/footer.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * The template for displaying the footer.
+ *
+ * Contains the closing of the #content div and all content after.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package AltoFocus
+ */
+
+?>
+
+	</div>
+
+	<footer id="colophon" class="site-footer" role="contentinfo">
+		<div class="site-footer-wrap">
+			<?php altofocus_social_menu(); ?>
+			<?php get_template_part( 'components/footer/site', 'info' ); ?>
+		</div>
+	</footer>
+
+</div>
+<?php wp_footer(); ?>
+
+</body>
+</html>

altofocus/front-page.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * The static front page template
+ *
+ * @package AltoFocus
+ */
+
+if ( 'posts' == get_option( 'show_on_front' ) ) :
+
+	get_template_part( 'index' );
+
+else :
+
+get_header(); ?>
+
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main" role="main">
+
+			<?php while ( have_posts() ) : the_post(); ?>
+
+				<?php if ( get_page_template_slug( get_the_ID() ) ) { ?>
+
+					<?php get_template_part( 'components/page/content', 'page-portfolio' ); ?>
+
+				<?php } else { ?>
+
+					<?php get_template_part( 'components/page/content', 'page' ); ?>
+
+				<?php } ?>
+
+			<?php endwhile; ?>
+
+			<?php get_template_part( 'components/features/portfolio/portfolio' ); ?>
+
+		</main>
+	</div>
+
+<?php get_footer(); ?>
+
+<?php endif; ?>

altofocus/functions.php

@@ -0,0 +1,299 @@
+<?php
+/**
+ * components functions and definitions.
+ *
+ * @link https://developer.wordpress.org/themes/basics/theme-functions/
+ *
+ * @package AltoFocus
+ */
+
+if ( ! function_exists( 'altofocus_setup' ) ) :
+/**
+ * Sets up theme defaults and registers support for various WordPress features.
+ *
+ * Note that this function is hooked into the aftercomponentsetup_theme hook, which
+ * runs before the init hook. The init hook is too late for some features, such
+ * as indicating support for post thumbnails.
+ */
+function altofocus_setup() {
+
+	/*
+	 * Make theme available for translation.
+	 * Translations can be filed in the /languages/ directory.
+	 * If you're building a theme based on components, use a find and replace
+	 * to change 'altofocus' to the name of your theme in all the template files.
+	 */
+	load_theme_textdomain( 'altofocus', get_template_directory() . '/languages' );
+
+	// Add default posts and comments RSS feed links to head.
+	add_theme_support( 'automatic-feed-links' );
+
+	/*
+	 * Let WordPress manage the document title.
+	 * By adding theme support, we declare that this theme does not use a
+	 * hard-coded <title> tag in the document head, and expect WordPress to
+	 * provide it for us.
+	 */
+	add_theme_support( 'title-tag' );
+
+	/*
+	 * Enable support for Post Thumbnails on posts and pages.
+	 *
+	 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
+	 */
+	add_theme_support( 'post-thumbnails' );
+
+	add_image_size( 'altofocus-thumb-image', 640, 9999, false );
+	add_image_size( 'altofocus-post-featured-image', 1200, 800, false );
+
+	// This theme uses wp_nav_menu() in one location.
+	register_nav_menus( array(
+		'menu-1' => esc_html__( 'Top', 'altofocus' ),
+	) );
+
+	/**
+	 * Add support for core custom logo.
+	 */
+	add_theme_support( 'custom-logo', array(
+		'height'      => 200,
+		'width'       => 200,
+		'flex-width'  => true,
+		'flex-height' => true,
+	) );
+
+	/*
+	 * Switch default core markup for search form, comment form, and comments
+	 * to output valid HTML5.
+	 */
+	add_theme_support( 'html5', array(
+		'search-form',
+		'comment-form',
+		'comment-list',
+		'gallery',
+		'caption',
+	) );
+
+	// Set up the WordPress core custom background feature.
+	add_theme_support( 'custom-background', apply_filters( 'altofocus_custom_background_args', array(
+		'default-color'      => 'ffffff',
+		'default-image'      => '',
+		'default-position-x' => 'center',
+		'default-position-y' => 'center',
+		'default-repeat'     => 'no-repeat',
+		'default-attachment' => 'fixed',
+		'default-size'       => 'cover',
+		'wp-head-callback'   => 'altofocus_custom_background_cb'
+	) ) );
+
+}
+endif;
+add_action( 'after_setup_theme', 'altofocus_setup' );
+
+/**
+ * Set the content width in pixels, based on the theme's design and stylesheet.
+ *
+ * Priority 0 to make it available to lower priority callbacks.
+ *
+ * @global int $content_width
+ */
+function altofocus_content_width() {
+
+	$GLOBALS[ 'content_width' ] = apply_filters( 'altofocus_content_width', '770' );
+}
+add_action( 'after_setup_theme', 'altofocus_content_width', 0 );
+
+/**
+ * Register widget area.
+ *
+ * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
+ */
+function altofocus_widgets_init() {
+
+	register_sidebar( array(
+		'name'          => esc_html__( 'Footer', 'altofocus' ),
+		'id'            => 'sidebar-1',
+		'description'   => '',
+		'before_widget' => '<section id="%1$s" class="widget %2$s">',
+		'after_widget'  => '</section>',
+		'before_title'  => '<h2 class="widget-title">',
+		'after_title'   => '</h2>',
+	) );
+}
+add_action( 'widgets_init', 'altofocus_widgets_init' );
+
+/**
+ * Output Libre Baskerville Google Font URL
+ *
+ * @link   https://fonts.google.com/specimen/Libre+Baskerville/
+ * @return string
+ */
+function altofocus_libre_baskerville_url() {
+
+	$libre_baskerville_font_url = '';
+
+	/* translators: If there are characters in your language that are not supported
+	 * by Libre Baskerville, translate this to 'off'. Do not translate into your own language.
+	 */
+	if ( 'off' !== esc_html_x( 'on', 'Libre Baskerville font: on or off', 'altofocus' ) ) {
+
+		$subsets = 'latin,latin-ext';
+
+		/* translators: To add an additional Libre Baskerville character subset specific to your language,
+		 * translate this to 'greek', 'cyrillic' or 'vietnamese'. Do not translate into your own language.
+		 */
+		$subset = esc_html_x( 'no-subset', 'Libre Baskerville font: add new subset (greek, cyrillic, vietnamese)', 'altofocus' );
+
+		if ( 'cyrillic' === $subset ) {
+
+			$subsets .= ',cyrillic,cyrillic-ext';
+
+		} elseif ( 'greek' === $subset ) {
+
+			$subsets .= ',greek,greek-ext';
+
+		} elseif ( 'vietnamese' === $subset ) {
+
+			$subsets .= ',vietnamese';
+		}
+
+		$libre_baskerville_font_url = add_query_arg( 'family', 'Libre Baskerville:400,400i,700', '//fonts.googleapis.com/css' );
+		$libre_baskerville_font_url = add_query_arg( 'subset', $subsets, $libre_baskerville_font_url );
+	}
+
+	return $libre_baskerville_font_url;
+}
+
+/**
+ * Output Karla Google Font URL
+ *
+ * @link   https://fonts.google.com/specimen/Karla/
+ * @return string
+ */
+function altofocus_karla_url() {
+
+	$karla_font_url = '';
+
+	/* translators: If there are characters in your language that are not supported
+	 * by Karla SC, translate this to 'off'. Do not translate into your own language.
+	 */
+	if ( 'off' !== esc_html_x( 'on', 'Karla font: on or off', 'altofocus' ) ) {
+
+		$subsets = 'latin,latin-ext';
+
+		/* translators: To add an additional Karla SC character subset specific to your language,
+		 * translate this to 'greek', 'cyrillic' or 'vietnamese'. Do not translate into your own language.
+		 */
+		$subset = esc_html_x( 'no-subset', 'Karla font: add new subset (greek, cyrillic, vietnamese)', 'altofocus' );
+
+		if ( 'cyrillic' === $subset ) {
+
+			$subsets .= ',cyrillic,cyrillic-ext';
+
+		} elseif ( 'greek' === $subset ) {
+
+			$subsets .= ',greek,greek-ext';
+
+		} elseif ( 'vietnamese' === $subset ) {
+
+			$subsets .= ',vietnamese';
+		}
+
+		$karla_font_url = add_query_arg( 'family', 'Karla:400,400i,700', '//fonts.googleapis.com/css' );
+		$karla_font_url = add_query_arg( 'subset', $subsets, $karla_font_url );
+	}
+
+	return $karla_font_url;
+}
+
+/**
+ * Enqueue scripts and styles.
+ */
+function altofocus_scripts() {
+
+	/*
+	 * Styles
+	 */
+
+	// Libre Franklin font
+	wp_enqueue_style( 'altofocus-libre-baskerville', altofocus_libre_baskerville_url(), array(), null );
+
+	// Karla font
+	wp_enqueue_style( 'altofocus-karla', altofocus_karla_url(), array(), null );
+
+	// Stylesheet
+	wp_enqueue_style( 'altofocus-style', get_stylesheet_uri() );
+
+	/*
+	 * Scripts
+	 */
+
+	// Flexslider
+	wp_enqueue_script( 'altofocus-flexslider', get_template_directory_uri() . '/assets/js/jquery.flexslider.js', array( 'jquery' ), '2.6.1', true );
+
+	// Column list
+	wp_enqueue_script( 'altofocus-columnlist', get_template_directory_uri() . '/assets/js/columnlist.js', array( 'jquery' ), '20151120', true );
+
+	// Navigation
+	wp_enqueue_script( 'altofocus-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array( 'jquery' ), '20170301', true );
+
+	// Images Loaded
+	wp_enqueue_script( 'altofocus-imagesloaded', get_template_directory_uri() . '/assets/js/imagesloaded.pkgd.js', array( 'jquery' ), '4.1.0', true );
+
+	// Isotope
+	wp_enqueue_script( 'altofocus-isotope', get_template_directory_uri() . '/assets/js/isotope.pkgd.js', array( 'jquery', 'altofocus-imagesloaded' ), '3.0.1', true );
+
+	// Grid setup
+	wp_enqueue_script( 'altofocus-grid', get_template_directory_uri() . '/assets/js/grid.js', array( 'jquery', 'altofocus-imagesloaded', 'altofocus-isotope' ), '20170301', true );
+
+	// AltoFocus Scripts
+	wp_enqueue_script( 'altofocus-theme-scripts', get_template_directory_uri() . '/assets/js/scripts.js', array( 'jquery', 'altofocus-columnlist', 'altofocus-grid' ), '20170301', true );
+
+	// Skip Link Focus Fix
+	wp_enqueue_script( 'altofocus-skip-link-focus-fix', get_template_directory_uri() . '/assets/js/skip-link-focus-fix.js', array(), '20170301', true );
+
+	// Comment Reply Animation
+	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
+		wp_enqueue_script( 'comment-reply' );
+	}
+
+	// Screenreader text
+	wp_localize_script( 'altofocus-navigation', 'screenReaderText', array(
+		'expand'   => esc_html__( 'expand child menu', 'altofocus' ),
+		'collapse' => esc_html__( 'collapse child menu', 'altofocus' ),
+	) );
+
+	// Flexslider text
+	wp_localize_script( 'altofocus-flexslider', 'flexSliderText', array(
+		'next'     => esc_html__( 'Next', 'altofocus' ),
+		'previous' => esc_html__( 'Previous', 'altofocus' ),
+	) );
+}
+add_action( 'wp_enqueue_scripts', 'altofocus_scripts' );
+
+/**
+ * Check whether the browser supports JavaScript
+ */
+function altofocus_html_js_class() {
+	echo '<script>document.documentElement.className = document.documentElement.className.replace("no-js","js");</script>'. "\n";
+}
+add_action( 'wp_head', 'altofocus_html_js_class', 1 );
+
+/**
+ * Custom template tags for this theme.
+ */
+require get_template_directory() . '/inc/template-tags.php';
+
+/**
+ * Custom functions that act independently of the theme templates.
+ */
+require get_template_directory() . '/inc/extras.php';
+
+/**
+ * Customizer additions.
+ */
+require get_template_directory() . '/inc/customizer.php';
+
+/**
+ * Load Jetpack compatibility file.
+ */
+require get_template_directory() . '/inc/jetpack.php';

altofocus/header.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * The header for our theme.
+ *
+ * This is the template that displays all of the <head> section and everything up until <div id="content">
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package AltoFocus
+ */
+
+?><!DOCTYPE html>
+<html <?php language_attributes(); ?> class="no-js">
+<head>
+<meta charset="<?php bloginfo( 'charset' ); ?>">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="profile" href="http://gmpg.org/xfn/11">
+
+<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?>>
+<div id="page" class="site">
+	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'altofocus' ); ?></a>
+
+	<header id="masthead" class="site-header" role="banner">
+		<div class="site-header-wrap">
+			<?php get_template_part( 'components/header/header', 'site-branding' ); ?>
+			<?php get_template_part( 'components/navigation/navigation', 'top' ); ?>
+		</div>
+	</header>
+	<div id="content" class="site-content">

altofocus/inc/customizer.php

@@ -0,0 +1,129 @@
+<?php
+/**
+ * AltoFocus Theme Customizer.
+ *
+ * @package AltoFocus
+ */
+
+/**
+ * Add postMessage support for site title and description for the Theme Customizer.
+ *
+ * @param WP_Customize_Manager $wp_customize Theme Customizer object.
+ */
+function altofocus_customize_register( $wp_customize ) {
+
+	$wp_customize->get_setting( 'blogname' )->transport              = 'postMessage';
+	$wp_customize->get_setting( 'blogdescription' )->transport       = 'postMessage';
+	$wp_customize->get_setting( 'header_textcolor' )->transport      = 'postMessage';
+	$wp_customize->get_setting( 'background_color' )->transport      = 'postMessage';
+	$wp_customize->get_setting( 'background_image' )->transport      = 'postMessage';
+	$wp_customize->get_setting( 'background_position_x' )->transport = 'postMessage';
+	$wp_customize->get_setting( 'background_position_y' )->transport = 'postMessage';
+	$wp_customize->get_setting( 'background_size' )->transport       = 'postMessage';
+	$wp_customize->get_setting( 'background_repeat' )->transport     = 'postMessage';
+	$wp_customize->get_setting( 'background_attachment' )->transport = 'postMessage';
+
+	$wp_customize->selective_refresh->add_partial( 'blogname', array(
+		'selector'        => '.site-title a',
+		'render_callback' => 'altofocus_customize_partial_blogname',
+	) );
+	$wp_customize->selective_refresh->add_partial( 'blogdescription', array(
+		'selector'        => '.site-description',
+		'render_callback' => 'altofocus_customize_partial_blogdescription',
+	) );
+}
+add_action( 'customize_register', 'altofocus_customize_register' );
+
+/**
+ * Custom background settings callback
+ */
+function altofocus_custom_background_cb() {
+
+	$image = get_background_image();
+	$color = get_background_color();
+
+	if ( empty ( $image ) && empty ( $color ) ) {
+		return;
+	}
+
+	$background_color = get_theme_mod( 'background_color' );
+	$background_image = get_theme_mod( 'background_image' );
+	$background_position_x = get_theme_mod( 'background_position_x' );
+	$background_position_y = get_theme_mod( 'background_position_y' );
+	$background_size = get_theme_mod( 'background_size' ) === '' || 'auto' ? 'auto' : get_theme_mod( 'background_size' );
+	$background_repeat = get_theme_mod( 'background_repeat' );
+	$background_attachment = get_theme_mod( 'background_attachment' );
+
+	$background_styles = '';
+	// Make sure background images with a 'scroll' background-attachment display properly
+	if ( !empty( $background_image ) && $background_attachment == 'scroll' ) {
+		$background_styles = 'body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div { background-image: none !important; background-color: transparent !important; }';
+		$background_styles .= 'html {';
+		$background_styles .= 'background-color: #' . $background_color . '; ';
+		$background_styles .= 'background-image: url("' . esc_url( $background_image ) . '"); ';
+		$background_styles .= 'background-position: ' . $background_position_x . ' ' . $background_position_y . '; ';
+		$background_styles .= 'background-size: ' . $background_size . '; ';
+		$background_styles .= 'background-repeat: ' . $background_repeat . '; ';
+		$background_styles .= 'background-attachment: ' . $background_attachment . '; ';
+		$background_styles .= '}';
+	} else {
+		$background_styles = 'html, body.custom-background, .site-header, .site-content, .single .entry-media, .widget-area, .top-navigation > div {';
+		$background_styles .= 'background-color: #' . $background_color . '; ';
+		$background_styles .= 'background-image: url("' . esc_url( $background_image ) . '"); ';
+		$background_styles .= 'background-position: ' . $background_position_x . ' ' . $background_position_y . '; ';
+		$background_styles .= 'background-size: ' . $background_size . '; ';
+		$background_styles .= 'background-repeat: ' . $background_repeat . '; ';
+		$background_styles .= 'background-attachment: ' . $background_attachment . '; ';
+		$background_styles .= '}';
+	}
+
+	wp_add_inline_style( 'altofocus-style', $background_styles );
+}
+add_action( 'wp_enqueue_scripts', 'altofocus_custom_background_cb' );
+
+/**
+ * Render the site title for the selective refresh partial.
+ *
+ * @return void
+ */
+function altofocus_customize_partial_blogname() {
+	bloginfo( 'name' );
+}
+/**
+ * Render the site tagline for the selective refresh partial.
+ *
+ * @return void
+ */
+function altofocus_customize_partial_blogdescription() {
+	bloginfo( 'description' );
+}
+
+/**
+ * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
+ */
+function altofocus_customize_preview_js() {
+
+	wp_enqueue_script( 'altofocus_customizer', get_template_directory_uri() . '/assets/js/customizer.js', array( 'customize-preview' ), '20151215', true );
+}
+add_action( 'customize_preview_init', 'altofocus_customize_preview_js' );
+
+/**
+ * Sets a default boolean of TRUE for Featured Content show-all setting.
+ *
+ * @param array $settings
+ * @return array
+ */
+function altofocus_featured_content_default_settings( $settings ) {
+	$settings['show-all'] = 1;
+	return $settings;
+}
+add_action( 'featured_content_default_settings', 'altofocus_featured_content_default_settings' );
+
+/**
+ * Change featured content default settings after theme setup
+ */
+function altofocus_change_featured_content_default_settings() {
+	set_theme_mod( 'featured-content[show-all]', 1 );
+	update_option( 'featured-content[show-all]', 1 );
+}
+add_action( 'after_setup_theme', 'altofocus_change_featured_content_default_settings' );

altofocus/inc/extras.php

@@ -0,0 +1,130 @@
+<?php
+/**
+ * Custom functions that act independently of the theme templates.
+ *
+ * Eventually, some of the functionality here could be replaced by core features.
+ *
+ * @package AltoFocus
+ */
+
+/**
+ * Adds custom classes to the array of body classes.
+ *
+ * @param array $classes Classes for the body element.
+ * @return array
+ */
+function altofocus_body_classes( $classes ) {
+
+	// Add class if no custom header or featured images
+	$header_image = get_header_image();
+
+	// Header text display class, determines size of logo
+	$header_text_display = get_theme_mod( 'header_textcolor' );
+
+	if ( $header_text_display == 'blank' ) {
+
+		$classes[] = 'hide-site-title-description';
+	}
+
+	// Add class if footer image has been added
+	$media_override = get_theme_mod( 'altofocus_media_override' );
+
+	if ( $media_override == 'override' && is_singular() ) {
+
+		$classes[] = 'media-override';
+	}
+
+	// Adds a class of group-blog to blogs with more than 1 published author.
+	if ( is_multi_author() ) {
+
+		$classes[] = 'group-blog';
+	}
+
+	// Adds a class of hfeed to non-singular pages.
+	if ( ! is_singular() ) {
+
+		$classes[] = 'hfeed';
+	}
+
+	// Add a class of no-sidebar when there is no sidebar present
+	if ( ! is_active_sidebar( 'sidebar-1' ) ) {
+
+		$classes[] = 'no-sidebar';
+	}
+
+	return $classes;
+}
+add_filter( 'body_class', 'altofocus_body_classes' );
+
+/**
+ * Adds custom classes to the array of post classes.
+ *
+ * @param array $classes Classes for the article element.
+ * @return array
+ */
+function altofocus_post_classes( $classes ) {
+
+	global $post, $content_width;
+
+	// Use 1/2 of the $content_width variable as the threshold for images that are too small
+	$image_size_threshhold = $content_width / 2;
+
+	if ( ! is_singular() ) {
+
+		$classes[] = 'grid-item';
+
+		// Get image meta
+		$image_meta  = wp_get_attachment_metadata( get_post_thumbnail_id( $post->ID ) );
+
+		// Set orientation and image constraint classes
+		if ( isset( $image_meta['width'], $image_meta['height'] ) ) {
+
+			// Use small classes when original image size is too small
+			if ( $image_meta['width'] <= $image_size_threshhold || $image_meta['height'] <= $image_size_threshhold ) {
+
+				$classes[] = 'grid-item-small';
+			}
+
+			// Use small class to make the grid-item images size conform to post-title size instead of image size
+			if ( ( $image_meta['width'] > $image_meta['height'] ) &&
+			   ( ( $image_meta['width'] / $image_meta['height'] ) <= 1 ) ) {
+
+				$classes[] = 'grid-item-small';
+			}
+
+			// Landscape images
+			if ( $image_meta['width'] >= $image_meta['height'] ) {
+
+				$classes[] = 'grid-item-landscape';
+
+			// Portrait images
+			} else {
+
+				$classes[] = 'grid-item-portrait';
+			}
+		}
+
+		// Get featured content settings and options
+		$featured_options    = get_option( 'featured-content' );
+		$featured_tag_name   = $featured_options[ 'tag-name' ];
+
+		if ( ! empty( $featured_tag_name ) && has_tag( $featured_tag_name, $post->ID ) ) {
+
+			$classes[] = 'grid-item-featured';
+		}
+	}
+
+	return $classes;
+}
+add_filter( 'post_class', 'altofocus_post_classes' );
+
+/**
+ * Add a pingback url auto-discovery header for singularly identifiable articles.
+ */
+function altofocus_pingback_header() {
+
+	if ( is_singular() && pings_open() ) {
+		echo '<link rel="pingback" href="', esc_url( get_bloginfo( 'pingback_url' ) ), '">';
+	}
+}
+add_action( 'wp_head', 'altofocus_pingback_header' );

altofocus/inc/headstart/en.json

@@ -0,0 +1,83 @@
+{
+    "settings": {
+        "options": {
+            "show_on_front": "posts",
+            "stylesheet": "pub\/altofocus",
+            "featured-content": {
+                "tag-id": 35890,
+                "tag-name": "featured",
+                "hide-tag": 0,
+                "show-all": 1
+            }
+        },
+        "theme_mods": {
+            "0": false,
+            "nav_menu_locations": {
+                "primary": "primary"
+            },
+            "header_image": "remove-header",
+            "custom_css_post_id": -1,
+            "altofocus_media_override": "override"
+        },
+        "headstart": {
+            "mapped_id_options": [],
+            "mapped_id_theme_mods": [],
+            "keep_submenu_items": true
+        }
+    },
+    "widgets": [
+        {
+            "id": "search-2",
+            "id_base": "search",
+            "settings": {
+                "title": "Search"
+            },
+            "sidebar": "sidebar-1",
+            "position": 0
+        },
+        {
+            "id": "blog_subscription-3",
+            "id_base": "blog_subscription",
+            "settings": {
+                "title": "Follow Blog via Email",
+                "title_following": "You are following this blog",
+                "subscribe_logged_in": "Click to follow this blog and receive notifications of new posts by email.",
+                "subscribe_text": "Enter your email address to follow this blog and receive notifications of new posts by email.",
+                "subscribe_button": "Follow",
+                "show_subscribers_total": 1
+
+            },
+            "sidebar": "sidebar-1",
+            "position": 1
+        }
+    ],
+    "content": [
+        {
+            "post_title": "Contact",
+            "post_content": "[contact-form][contact-field label=\"Name\" type=\"name\" required=\"1\"\/][contact-field label=\"Email\" type=\"email\" required=\"1\"\/][contact-field label=\"Comment\" type=\"textarea\" required=\"1\"\/][\/contact-form]",
+            "post_status": "publish",
+            "menu_order": 3,
+            "comment_status": "closed",
+            "ping_status": "closed",
+            "post_type": "page",
+            "hs_custom_meta": "_hs_contact_page",
+            "hs_sharing": 0,
+            "hs_like_status": 0,
+            "attachment_url": "https:\/\/headstartdata.files.wordpress.com\/2016\/06\/person-smartphone-office-table.jpeg",
+            "hs_old_id": 101
+        },
+        {
+            "post_title": "The Journey Begins",
+            "post_content": "Thanks for joining me! <blockquote>Good company in a journey makes the way seem shorter. — Izaak Walton<\/blockquote><img class=\"wp-image-7 size-full\" src=\"https://twentysixteendemo.files.wordpress.com/2015/11/post.png\" alt=\"post\" width=\"1000\" height=\"563\" \/>",
+            "post_status": "publish",
+            "comment_status": "open",
+            "ping_status": "open",
+            "post_type": "post",
+            "hs_custom_meta": "_hs_first_post",
+            "hs_sharing": 0,
+            "hs_like_status": 0,
+            "attachment_url": "https://headstartdata.files.wordpress.com/2017/08/andrew-neel-182861.jpg",
+            "hs_old_id": 102
+        }
+    ]
+}

altofocus/inc/jetpack-fonts.php

@@ -0,0 +1,520 @@
+<?php
+
+add_filter( 'typekit_add_font_category_rules', function( $category_rules ) {
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'html',
+		array(
+			array( 'property' => 'font-family', 'value' => 'sans-serif' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'code,
+		kbd,
+		pre,
+		samp',
+		array(
+			array( 'property' => 'font-size', 'value' => '1em' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'body,
+		button,
+		input,
+		select,
+		textarea',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'h1, h2, h3, h4, h5, h6',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'h1',
+		array(
+			array( 'property' => 'font-size', 'value' => '2em' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'h2',
+		array(
+			array( 'property' => 'font-size', 'value' => '1.5em' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'h3',
+		array(
+			array( 'property' => 'font-size', 'value' => '1.17em' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'h4',
+		array(
+			array( 'property' => 'font-size', 'value' => '1em' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'h5',
+		array(
+			array( 'property' => 'font-size', 'value' => '.83em' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'h6',
+		array(
+			array( 'property' => 'font-size', 'value' => '.67em' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'cite',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'pre',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Courier 10 Pitch", Courier, monospace' ),
+			array( 'property' => 'font-size', 'value' => '14.0625px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'code,
+		kbd,
+		tt,
+		var',
+		array(
+			array( 'property' => 'font-family', 'value' => 'Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace' ),
+			array( 'property' => 'font-size', 'value' => '14.0625px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'button,
+		input[type="button"],
+		input[type="reset"],
+		input[type="submit"]',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.top-navigation li a',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+			array( 'property' => 'font-size', 'value' => '1rem' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.top-navigation .children li > a:after,
+		.top-navigation .sub-menu li > a:after',
+		array(
+			array( 'property' => 'font-weight', 'value' => 'normal' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.dropdown-toggle:after',
+		array(
+			array( 'property' => 'font-weight', 'value' => 'normal' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.post-navigation-fixed .nav-links a',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.comment-navigation .screen-reader-text,
+		.post-navigation .screen-reader-text,
+		.posts-navigation .screen-reader-text',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.comment-navigation .nav-next,
+		.comment-navigation .nav-previous,
+		.post-navigation .nav-next,
+		.post-navigation .nav-previous,
+		.posts-navigation .nav-next,
+		.posts-navigation .nav-previous',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-style', 'value' => 'italic' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.comment-navigation .meta-nav,
+		.post-navigation .meta-nav,
+		.posts-navigation .meta-nav',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.comments-title',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.comment-reply-title',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.comment-body .fn',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		)
+	);
+
+
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'#respond .comment-reply-title small,
+		.comment-respond .comment-reply-title small',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.widget-title',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.widget-title,
+		.comment-reply-title,
+		.comment-navigation .screen-reader-text,
+		.posts-navigation .screen-reader-text,
+		.post-navigation .screen-reader-text,
+		.posted-on,
+		.hfeed .site-main .grid-item-featured:not(.has-post-thumbnail) .entry-header .entry-title,
+		.comment-navigation .nav-previous,
+		.comment-navigation .nav-next,
+		.posts-navigation .nav-previous, 
+		.posts-navigation .nav-next,
+		.post-navigation .nav-previous,
+		.post-navigation .nav-next,
+		.comment-body .fn',
+		array(
+			array( 'property' => 'font-size', 'value' => '17px' ),
+		),
+		array( 'screen and (min-width: 37.5em)' )
+	);
+
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.page-content,
+		.entry-content,
+		.entry-summary',
+		array(
+			array( 'property' => 'font-size', 'value' => '17px' ),
+		),
+		array( 'screen and (min-width: 37.5em)' )
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'#secondary .widget_calendar caption',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'#secondary .widget_rss li .rsswidget',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'#secondary .widget_rss li .rss-date',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'#secondary .widget_search .screen-reader-text',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'#secondary .widget_calendar caption,
+		#secondary .widget-grofile .grofile-meta h4,
+		#secondary .widget_recent_entries ul li,
+		#secondary .widget_recent_comments .recentcommentstexttop,
+		#secondary .widget_recent_comments .recentcommentstextend',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'#infinite-handle span button,
+		#infinite-handle span button:hover',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.site-branding .site-title',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '700' ),
+			array( 'property' => 'font-size', 'value' => '22.5px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.site-branding .site-description',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '700' ),
+			array( 'property' => 'font-size', 'value' => '13px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.site-branding .site-description',
+		array(
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		),
+		array( 'screen and (min-width: 50em)' )
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.byline,
+		.byline a,
+		.entry-footer,
+		.hfeed .hentry .entry-header-wrap .posted-on',
+		array(
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		),
+		array( 'screen and (min-width: 37.5em)' )
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.hfeed .page-header .page-title',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.hfeed .search-form .screen-reader-text',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.hfeed .hentry .entry-title,
+		.hfeed .hentry .entry-header-wrap .entry-title',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-style', 'value' => 'italic' ),
+			array( 'property' => 'font-size', 'value' => '13px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.hfeed .hentry .entry-title,
+		.hfeed .hentry .entry-header-wrap .entry-title',
+		array(
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		),
+		array( 'screen and (min-width: 37.5em)' )
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.hfeed .hentry .posted-on',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.hfeed .site-main .grid-item-featured:not(.has-post-thumbnail) .entry-header .entry-title',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-style', 'value' => 'italic' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.hfeed .page-header .page-title',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-size', 'value' => '17px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.hfeed:not(.home):not(.blog) .site-main .page-header .page-title',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-size', 'value' => '17px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.hfeed:not(.home):not(.blog) .site-main .not-found .page-header .page-title',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.entry-content,
+		.entry-summary,
+		.page-content',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-size', 'value' => '14px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.posted-on',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-size', 'value' => '15px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.byline,
+		.byline a,
+		.hfeed .hentry .entry-header-wrap .posted-on',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+			array( 'property' => 'font-size', 'value' => '14px' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.entry-footer ul li a,
+		.entry-footer',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+			array( 'property' => 'font-size', 'value' => '13px' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.single .hentry .entry-title,
+		.page .hentry.page .entry-title',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif' ),
+			array( 'property' => 'font-weight', 'value' => '300' ),
+			array( 'property' => 'font-size', 'value' => '20px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'headings',
+		'.single .hentry .entry-title,
+		.page .hentry.page .entry-title',
+		array(
+			array( 'property' => 'font-size', 'value' => '37.5px' ),
+		),
+		array( 'screen and (min-width: 37.5em)' )
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.flex-pauseplay a:before',
+		array(
+			array( 'property' => 'font-size', 'value' => '20px' ),
+		)
+	);
+
+	TypekitTheme::add_font_category_rule( $category_rules, 'body-text',
+		'.hentry .entry-content > #jp-post-flair .jp-relatedposts-items .jp-relatedposts-post,
+		.hentry .entry-content > .sd-sharing-enabled .jp-relatedposts-items .jp-relatedposts-post',
+		array(
+			array( 'property' => 'font-family', 'value' => '"Karla", "Helvetica Neue", Helvetica, Arial, sans-serif' ),
+		)
+	);
+
+	return $category_rules;
+} );

altofocus/inc/jetpack.php

@@ -0,0 +1,210 @@
+<?php
+/**
+ * Jetpack Compatibility File.
+ *
+ * @link https://jetpack.me/
+ *
+ * @package AltoFocus
+ */
+
+/**
+ * Jetpack setup function.
+ *
+ * See: https://jetpack.me/support/infinite-scroll/
+ * See: https://jetpack.me/support/responsive-videos/
+ */
+function altofocus_jetpack_setup() {
+
+	// Add theme support for Infinite Scroll.
+	add_theme_support( 'infinite-scroll', array(
+		'type'      => 'click',
+		'container' => 'main',
+		'render'    => 'altofocus_infinite_scroll_render',
+		'wrapper'   => false,
+		'footer'    => 'page',
+	) );
+
+	// Custom logo fallback
+	add_theme_support( 'custom-logo', array(
+		'height'      => 120,
+		'width'       => 120,
+		'flex-width'  => true,
+		'header-text' => array(
+			'site-title',
+			'site-description'
+		),
+	) );
+
+	// Add theme support for Responsive Videos.
+	add_theme_support( 'jetpack-responsive-videos' );
+
+	// Add theme support for Social Menus
+	add_theme_support( 'jetpack-social-menu', 'svg' );
+
+	// Featured content
+	add_theme_support( 'featured-content', array(
+		'filter'     => 'altofocus_get_featured_posts',
+		'max_posts'  => 999,
+		'post_types' => array( 'post' ),
+	) );
+
+	// Content Options
+	add_theme_support( 'jetpack-content-options', array(
+		'author-bio'      => false,
+		'post-details'    => array(
+			'stylesheet' => 'altofocus-style',
+			'date'       => '.posted-on',
+			'categories' => '.cat-links',
+			'tags'       => '.tags-links',
+			'author'     => '.byline',
+		),
+		'featured-images' => array(
+			'archive'      => true,
+			'post'         => true,
+			'post-default' => true,
+			'page'         => false,
+			'page-default' => false,
+			'fallback'     => true,
+		),
+	) );
+}
+add_action( 'after_setup_theme', 'altofocus_jetpack_setup' );
+
+/**
+ * Getter function for Featured Content
+ *
+ * @return (string) The value of the filter defined in add_theme_support( 'featured-content' ).
+ */
+function altofocus_get_featured_posts() {
+
+	return apply_filters( 'altofocus_get_featured_posts', array() );
+}
+
+/**
+ * Helper function to check for Featured Content
+ *
+ * @param (integer)
+ * @return (boolean) true/false
+ */
+function altofocus_has_featured_posts( $minimum = 1 ) {
+
+	if ( is_paged() )
+		return false;
+
+	$minimum = absint( $minimum );
+	$featured_posts = apply_filters( 'altofocus_get_featured_posts', array() );
+
+	if ( ! is_array( $featured_posts ) )
+		return false;
+
+	if ( $minimum > count( $featured_posts ) )
+		return false;
+
+	return true;
+}
+
+/**
+ * Get featured post IDs
+ *
+ * @return array()
+ */
+function altofocus_get_featured_post_ids() {
+
+	// Get array of cached results if they exist.
+	$featured_ids = get_transient( 'featured_content_ids' );
+
+	if ( false === $featured_ids ) {
+
+		$featured_options = get_option( 'featured-content', FALSE );
+		$featured_tag_name = $featured_options[ 'tag-name' ];
+		$term = get_term_by( 'name', $featured_tag_name, 'post_tag' );
+
+		if ( $term ) {
+
+			// Query for featured posts.
+			$featured_ids = get_posts( array(
+				'fields'           => 'ids',
+				'numberposts'      => $max_posts,
+				'post_type'        => array( 'post' ),
+				'suppress_filters' => false,
+				'tax_query'        => array(
+					array(
+						'field'    => 'term_id',
+						'taxonomy' => 'post_tag',
+						'terms'    => $term->term_id,
+					),
+				),
+				)
+			);
+		}
+
+		set_transient( 'featured_content_ids', $featured_ids );
+	}
+
+	// Ensure correct format before return.
+	return array_map( 'absint', $featured_ids );
+}
+
+/**
+ * Custom render function for Infinite Scroll.
+ *
+ * Stores newly loaded post IDs into a JS variable to pass to
+ * Isotope when new posts are loaded and need to be appended
+ * and repositioned
+ *
+ * Global JS variable: loadedPosts
+ */
+function altofocus_infinite_scroll_render() {
+
+	$loaded_post_IDs = array();
+
+	while ( have_posts() ) {
+
+		the_post();
+
+		get_template_part( 'components/post/content', get_post_format() );
+
+		// Put new post IDs into an array for use in isotope 'load more' calls
+		if ( ! in_array( get_the_ID(), $loaded_post_IDs ) ) {
+
+			$loaded_post_IDs[] = get_the_ID();
+		}
+	} ?>
+	<script>
+		// Put returned posts’ IDs in to an array
+		var loadedPosts = <?php echo json_encode( $loaded_post_IDs ); ?>;
+	</script>
+<?php
+}
+
+/**
+ * JetPack Social Menu Fallback
+ */
+function altofocus_social_menu() {
+
+	if ( ! function_exists( 'jetpack_social_menu' ) ) {
+
+		return;
+
+	} else {
+
+		jetpack_social_menu();
+	}
+}
+
+
+/**
+ * Custom function to check for a post thumbnail;
+ * If Jetpack is not available, fall back to has_post_thumbnail()
+ */
+function altofocus_has_post_thumbnail( $post = null ) {
+
+	if ( ! function_exists( 'jetpack_has_featured_image' ) ) {
+
+		return has_post_thumbnail( $post );
+
+	} else {
+
+		return jetpack_has_featured_image( $post );
+	}
+}

altofocus/inc/style-wpcom.css

@@ -0,0 +1,807 @@
+/**
+ * WordPress.com specific styles
+ *
+ *
+ */
+/* Variables & Mixins
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Color Variables */
+/*--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Typographic Variables */
+/*--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Global Structure */
+/*--------------------------------------------------------------*/
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Typographic Mixins */
+/*--------------------------------------------------------------*/
+/*--------------------------------------------------------------
+# Animations
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Animations */
+/*--------------------------------------------------------------*/
+@-webkit-keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1); }
+  50% {
+    -webkit-transform: scaleY(1.1);
+    -moz-transform: scaleY(1.1);
+    -ms-transform: scaleY(1.1);
+    -o-transform: scaleY(1.1);
+    transform: scaleY(1.1); } }
+
+@-moz-keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1); }
+  50% {
+    -webkit-transform: scaleY(1.1);
+    -moz-transform: scaleY(1.1);
+    -ms-transform: scaleY(1.1);
+    -o-transform: scaleY(1.1);
+    transform: scaleY(1.1); } }
+
+@-o-keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1); }
+  50% {
+    -webkit-transform: scaleY(1.1);
+    -moz-transform: scaleY(1.1);
+    -ms-transform: scaleY(1.1);
+    -o-transform: scaleY(1.1);
+    transform: scaleY(1.1); } }
+
+@keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1); }
+  50% {
+    -webkit-transform: scaleY(1.1);
+    -moz-transform: scaleY(1.1);
+    -ms-transform: scaleY(1.1);
+    -o-transform: scaleY(1.1);
+    transform: scaleY(1.1); } }
+
+@-webkit-keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1); }
+  50% {
+    -webkit-transform: scaleY(0.9);
+    -moz-transform: scaleY(0.9);
+    -ms-transform: scaleY(0.9);
+    -o-transform: scaleY(0.9);
+    transform: scaleY(0.9); } }
+
+@-moz-keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1); }
+  50% {
+    -webkit-transform: scaleY(0.9);
+    -moz-transform: scaleY(0.9);
+    -ms-transform: scaleY(0.9);
+    -o-transform: scaleY(0.9);
+    transform: scaleY(0.9); } }
+
+@-o-keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1); }
+  50% {
+    -webkit-transform: scaleY(0.9);
+    -moz-transform: scaleY(0.9);
+    -ms-transform: scaleY(0.9);
+    -o-transform: scaleY(0.9);
+    transform: scaleY(0.9); } }
+
+@keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1); }
+  50% {
+    -webkit-transform: scaleY(0.9);
+    -moz-transform: scaleY(0.9);
+    -ms-transform: scaleY(0.9);
+    -o-transform: scaleY(0.9);
+    transform: scaleY(0.9); } }
+
+@-webkit-keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  33% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1); }
+  66% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); } }
+
+@-moz-keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  33% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1); }
+  66% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); } }
+
+@-o-keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  33% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1); }
+  66% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); } }
+
+@keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  33% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1); }
+  66% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); } }
+
+@-webkit-keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0); }
+  33% {
+    -webkit-transform: translateX(-10px);
+    -moz-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    -o-transform: translateX(-10px);
+    transform: translateX(-10px); }
+  66% {
+    -webkit-transform: translateX(3px);
+    -moz-transform: translateX(3px);
+    -ms-transform: translateX(3px);
+    -o-transform: translateX(3px);
+    transform: translateX(3px); } }
+
+@-moz-keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0); }
+  33% {
+    -webkit-transform: translateX(-10px);
+    -moz-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    -o-transform: translateX(-10px);
+    transform: translateX(-10px); }
+  66% {
+    -webkit-transform: translateX(3px);
+    -moz-transform: translateX(3px);
+    -ms-transform: translateX(3px);
+    -o-transform: translateX(3px);
+    transform: translateX(3px); } }
+
+@-o-keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0); }
+  33% {
+    -webkit-transform: translateX(-10px);
+    -moz-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    -o-transform: translateX(-10px);
+    transform: translateX(-10px); }
+  66% {
+    -webkit-transform: translateX(3px);
+    -moz-transform: translateX(3px);
+    -ms-transform: translateX(3px);
+    -o-transform: translateX(3px);
+    transform: translateX(3px); } }
+
+@keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0); }
+  33% {
+    -webkit-transform: translateX(-10px);
+    -moz-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    -o-transform: translateX(-10px);
+    transform: translateX(-10px); }
+  66% {
+    -webkit-transform: translateX(3px);
+    -moz-transform: translateX(3px);
+    -ms-transform: translateX(3px);
+    -o-transform: translateX(3px);
+    transform: translateX(3px); } }
+
+@-webkit-keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: translateX(1);
+    -moz-transform: translateX(1);
+    -ms-transform: translateX(1);
+    -o-transform: translateX(1);
+    transform: translateX(1); }
+  33% {
+    -webkit-transform: translateX(10px);
+    -moz-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    -o-transform: translateX(10px);
+    transform: translateX(10px); }
+  66% {
+    -webkit-transform: translateX(-3px);
+    -moz-transform: translateX(-3px);
+    -ms-transform: translateX(-3px);
+    -o-transform: translateX(-3px);
+    transform: translateX(-3px); } }
+
+@-moz-keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: translateX(1);
+    -moz-transform: translateX(1);
+    -ms-transform: translateX(1);
+    -o-transform: translateX(1);
+    transform: translateX(1); }
+  33% {
+    -webkit-transform: translateX(10px);
+    -moz-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    -o-transform: translateX(10px);
+    transform: translateX(10px); }
+  66% {
+    -webkit-transform: translateX(-3px);
+    -moz-transform: translateX(-3px);
+    -ms-transform: translateX(-3px);
+    -o-transform: translateX(-3px);
+    transform: translateX(-3px); } }
+
+@-o-keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: translateX(1);
+    -moz-transform: translateX(1);
+    -ms-transform: translateX(1);
+    -o-transform: translateX(1);
+    transform: translateX(1); }
+  33% {
+    -webkit-transform: translateX(10px);
+    -moz-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    -o-transform: translateX(10px);
+    transform: translateX(10px); }
+  66% {
+    -webkit-transform: translateX(-3px);
+    -moz-transform: translateX(-3px);
+    -ms-transform: translateX(-3px);
+    -o-transform: translateX(-3px);
+    transform: translateX(-3px); } }
+
+@keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: translateX(1);
+    -moz-transform: translateX(1);
+    -ms-transform: translateX(1);
+    -o-transform: translateX(1);
+    transform: translateX(1); }
+  33% {
+    -webkit-transform: translateX(10px);
+    -moz-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    -o-transform: translateX(10px);
+    transform: translateX(10px); }
+  66% {
+    -webkit-transform: translateX(-3px);
+    -moz-transform: translateX(-3px);
+    -ms-transform: translateX(-3px);
+    -o-transform: translateX(-3px);
+    transform: translateX(-3px); } }
+
+@-webkit-keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  33% {
+    -webkit-transform: scale(1.25);
+    -moz-transform: scale(1.25);
+    -ms-transform: scale(1.25);
+    -o-transform: scale(1.25);
+    transform: scale(1.25); }
+  66% {
+    -webkit-transform: scale(0.85);
+    -moz-transform: scale(0.85);
+    -ms-transform: scale(0.85);
+    -o-transform: scale(0.85);
+    transform: scale(0.85); } }
+
+@-moz-keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  33% {
+    -webkit-transform: scale(1.25);
+    -moz-transform: scale(1.25);
+    -ms-transform: scale(1.25);
+    -o-transform: scale(1.25);
+    transform: scale(1.25); }
+  66% {
+    -webkit-transform: scale(0.85);
+    -moz-transform: scale(0.85);
+    -ms-transform: scale(0.85);
+    -o-transform: scale(0.85);
+    transform: scale(0.85); } }
+
+@-o-keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  33% {
+    -webkit-transform: scale(1.25);
+    -moz-transform: scale(1.25);
+    -ms-transform: scale(1.25);
+    -o-transform: scale(1.25);
+    transform: scale(1.25); }
+  66% {
+    -webkit-transform: scale(0.85);
+    -moz-transform: scale(0.85);
+    -ms-transform: scale(0.85);
+    -o-transform: scale(0.85);
+    transform: scale(0.85); } }
+
+@keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  33% {
+    -webkit-transform: scale(1.25);
+    -moz-transform: scale(1.25);
+    -ms-transform: scale(1.25);
+    -o-transform: scale(1.25);
+    transform: scale(1.25); }
+  66% {
+    -webkit-transform: scale(0.85);
+    -moz-transform: scale(0.85);
+    -ms-transform: scale(0.85);
+    -o-transform: scale(0.85);
+    transform: scale(0.85); } }
+
+@-webkit-keyframes bounce-zoom {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  25% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1); }
+  75% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); }
+  100% {
+    -webkit-transform: scale(1.125);
+    -moz-transform: scale(1.125);
+    -ms-transform: scale(1.125);
+    -o-transform: scale(1.125);
+    transform: scale(1.125); } }
+
+@-moz-keyframes bounce-zoom {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  25% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1); }
+  75% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); }
+  100% {
+    -webkit-transform: scale(1.125);
+    -moz-transform: scale(1.125);
+    -ms-transform: scale(1.125);
+    -o-transform: scale(1.125);
+    transform: scale(1.125); } }
+
+@-o-keyframes bounce-zoom {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  25% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1); }
+  75% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); }
+  100% {
+    -webkit-transform: scale(1.125);
+    -moz-transform: scale(1.125);
+    -ms-transform: scale(1.125);
+    -o-transform: scale(1.125);
+    transform: scale(1.125); } }
+
+@keyframes bounce-zoom {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1); }
+  25% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1); }
+  75% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9); }
+  100% {
+    -webkit-transform: scale(1.125);
+    -moz-transform: scale(1.125);
+    -ms-transform: scale(1.125);
+    -o-transform: scale(1.125);
+    transform: scale(1.125); } }
+
+/*--------------------------------------------------------------
+# UI
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## UI Mixins */
+/*--------------------------------------------------------------*/
+/**
+ * Non obstructive border
+ * - Src: http://stackoverflow.com/questions/11765642/sass-optimize-borders-into-one-line-of-code
+ * - Usage: @include non-border(2px solid shade($ccblue, 10%), bottom, right);
+ */
+/*--------------------------------------------------------------
+# Breakpoints
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Breakpoint Mixins */
+/*--------------------------------------------------------------*/
+/*
+	Breakpoints
+	Src: https://responsivedesign.is/develop/getting-started-with-sass
+	Usage:
+	.grid-1-4 {
+		width: 100%;
+		@include breakpoint(phablet) {
+			width: 50%;
+		}
+		@include breakpoint(laptop) {
+			width: 25%;
+		}
+	 }
+*/
+/*--------------------------------------------------------------
+# Plugins
+--------------------------------------------------------------*/
+/*--------------------------------------------------------------*/
+/* !## Highlander Comments */
+/*--------------------------------------------------------------*/
+.highlander-enabled #respond {
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  margin-top: -1px !important; }
+  .highlander-enabled #respond h3 {
+    margin-top: 0;
+    margin-bottom: 0; }
+  .highlander-enabled #respond label,
+  .highlander-enabled #respond form label {
+    color: #666; }
+
+.page.highlander-enabled #respond {
+  border-top-width: 0;
+  margin-top: 0 !important; }
+
+.page.highlander-enabled .comment-list + #respond {
+  border-top-width: 1px;
+  margin-top: -1px !important; }
+
+/**
+ * Stats
+ */
+#wpstats {
+  display: none; }
+
+/**
+ * Ads
+ */
+.wpa .u > div,
+.wpadvert > div > * {
+  background-color: #efefef; }
+
+/**
+ * Widgets
+ */
+#secondary .time_machine_widget {
+  position: relative; }
+  #secondary .time_machine_widget .time-machine-post {
+    width: 62.5%;
+    margin-left: calc(25%); }
+  #secondary .time_machine_widget .time-machine-post-title {
+    font-size: 16.875px;
+    font-size: 1.125rem;
+    font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+    font-weight: 300;
+    line-height: 1.75em;
+    word-break: break-word;
+    margin: 0.875em 0; }
+  #secondary .time_machine_widget .time-machine-navigation {
+    position: relative; }
+  #secondary .time_machine_widget .time-machine-navigation {
+    font-size: 14.765625px;
+    font-size: 0.984375rem;
+    font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+    font-weight: 300;
+    font-style: italic;
+    line-height: 1.465625em; }
+    @media screen and (min-width: 37.5em) {
+      #secondary .time_machine_widget .time-machine-navigation {
+        font-size: 16.875px;
+        font-size: 1.125rem; } }
+
+#secondary .widget_wpcom_social_media_icons_widget ul li a {
+  padding: 0 3px; }
+  #secondary .widget_wpcom_social_media_icons_widget ul li a:before {
+    font-size: 1.75em; }
+
+#secondary .widget_authors > ul > li > a {
+  display: block;
+  margin-bottom: 0.875em; }
+  #secondary .widget_authors > ul > li > a img,
+  #secondary .widget_authors > ul > li > a strong {
+    display: inline-block;
+    vertical-align: middle; }
+
+#secondary .widget_recent_entries ul {
+  margin-bottom: 0; }
+  #secondary .widget_recent_entries ul li {
+    font-size: 14.765625px;
+    font-size: 0.984375rem;
+    font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+    font-weight: 300;
+    font-style: italic;
+    line-height: 1.465625em;
+    margin-bottom: 1.4em; }
+    @media screen and (min-width: 37.5em) {
+      #secondary .widget_recent_entries ul li {
+        font-size: 16.875px;
+        font-size: 1.125rem; } }
+
+#secondary .widget-grofile .grofile-meta h4 {
+  font-size: 14.765625px;
+  font-size: 0.984375rem;
+  font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+  font-weight: 300;
+  line-height: 1.75em;
+  word-break: break-word;
+  color: #888888;
+  margin: 0; }
+  @media screen and (min-width: 37.5em) {
+    #secondary .widget-grofile .grofile-meta h4 {
+      font-size: 16.875px;
+      font-size: 1.125rem; } }
+
+#secondary .widget_recent_comments .recentcommentstexttop,
+#secondary .widget_recent_comments .recentcommentstextend {
+  font-size: 14.765625px;
+  font-size: 0.984375rem;
+  font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+  font-weight: 300;
+  font-style: italic;
+  line-height: 1.465625em; }
+  @media screen and (min-width: 37.5em) {
+    #secondary .widget_recent_comments .recentcommentstexttop,
+    #secondary .widget_recent_comments .recentcommentstextend {
+      font-size: 16.875px;
+      font-size: 1.125rem; } }
+
+#secondary .aboutme_widget h2 {
+  clear: inherit; }
+
+#secondary #flickr_badge_wrapper {
+  border: rgba(0, 0, 0, 0.2); }
+
+@media screen and (min-width: 50em) {
+  #secondary .widget_author_grid > ul,
+  #secondary .widget_flickr > table,
+  #secondary .widget_recent_images .recent_images,
+  #secondary .jetpack_widget_social_icons .jetpack-social-widget-list {
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    width: calc(62.5%); }
+  #secondary .time_machine_widget .time-machine-post {
+    width: 62.5%;
+    margin-left: calc(25%); }
+  #secondary .time_machine_widget .time-machine-navigation {
+    position: absolute;
+    top: 2.625em;
+    left: 12.5px; }
+  #secondary .time_machine_widget .time-machine-navigation {
+    font-size: 14.765625px;
+    font-size: 0.984375rem;
+    font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
+    font-weight: 300;
+    font-style: italic;
+    line-height: 1.465625em; } }
+  @media screen and (min-width: 50em) and (min-width: 37.5em) {
+    #secondary .time_machine_widget .time-machine-navigation {
+      font-size: 16.875px;
+      font-size: 1.125rem; } }
+
+@media screen and (min-width: 50em) {
+  #secondary .widget_jetpack_my_community > * {
+    margin-left: 25%;
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    width: calc(62.5%); }
+  #secondary .widget-grofile {
+    padding-left: 25%;
+    position: relative; }
+    #secondary .widget-grofile .grofile-meta {
+      padding-left: 12.5px;
+      padding-right: 12.5px;
+      width: calc(60%); }
+      #secondary .widget-grofile .grofile-meta h4 {
+        position: absolute;
+        left: 0;
+        padding-left: 12.5px;
+        padding-right: 12.5px;
+        width: calc(25%); }
+    #secondary .widget-grofile .grofile-thumbnail {
+      padding-left: 12.5px;
+      padding-right: 12.5px;
+      width: calc(40%); }
+  #secondary .widget_recent_comments .recentcommentsavatar {
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    width: calc(62.5%); }
+  #secondary .wp_widget_tag_cloud > *:not(.widget-title),
+  #secondary .wp_widget_tag_cloud > div {
+    padding-left: 12.5px;
+    padding-right: 12.5px;
+    width: calc(62.5%); } }

altofocus/inc/template-tags.php

@@ -0,0 +1,318 @@
+<?php
+/**
+ * Custom template tags for this theme.
+ *
+ * Eventually, some of the functionality here could be replaced by core features.
+ *
+ * @package AltoFocus
+ */
+
+/*
+ * Gallery Slider Shortcode
+ */
+function altofocus_gallery_shortcode( $attr ) {
+
+	$post = get_post();
+
+	static $instance = 0;
+	$instance++;
+
+	if ( ! empty( $attr['ids'] ) ) {
+
+		// 'ids' is explicitly ordered, unless you specify otherwise.
+		if ( empty( $attr['orderby'] ) )
+			$attr['orderby'] = 'post__in';
+
+		$attr['include'] = $attr['ids'];
+	}
+
+	// Allow plugins/themes to override the default gallery template.
+	$output = apply_filters( 'slider_gallery', '', $attr );
+	if ( $output != '' )
+		return $output;
+
+	// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
+	if ( isset( $attr['orderby'] ) ) {
+
+		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
+
+		if ( ! $attr['orderby'] )
+			unset( $attr['orderby'] );
+	}
+
+	extract( shortcode_atts( array(
+		'order'      => 'ASC',
+		'orderby'    => 'menu_order ID',
+		'id'         => $post->ID,
+		'itemtag'    => 'li',
+		'icontag'    => null,
+		'captiontag' => 'p',
+		'columns'    => 3,
+		'size'       => 'large',
+		'include'    => '',
+		'exclude'    => ''
+	), $attr, 'gallery' ) );
+
+	$id = intval( $id );
+
+	if ( 'RAND' == $order )
+		$orderby = 'none';
+
+	if ( ! empty( $include ) ) {
+
+		$_attachments = get_posts( array(
+			'include'        => $include,
+			'post_status'    => 'inherit',
+			'post_type'      => 'attachment',
+			'post_mime_type' => 'image',
+			'order'          => $order,
+			'orderby'        => $orderby
+		) );
+
+		$attachments = array();
+
+		foreach ( $_attachments as $key => $val ) {
+
+			$attachments[$val->ID] = $_attachments[$key];
+		}
+
+	} elseif ( ! empty( $exclude ) ) {
+
+		$attachments = get_children( array(
+			'post_parent'    => $id,
+			'exclude'        => $exclude,
+			'post_status'    => 'inherit',
+			'post_type'      => 'attachment',
+			'post_mime_type' => 'image',
+			'order'          => $order,
+			'orderby'        => $orderby
+		) );
+
+	} else {
+
+		$attachments = get_children( array(
+			'post_parent'    => $id,
+			'post_status'    => 'inherit',
+			'post_type'      => 'attachment',
+			'post_mime_type' => 'image',
+			'order'          => $order,
+			'orderby'        => $orderby
+		) );
+	}
+
+	if ( empty( $attachments ) )
+		return '';
+
+	if ( is_feed() ) {
+
+		$output = "\n";
+
+		foreach ( $attachments as $att_id => $attachment )
+			$output .= wp_get_attachment_link( $att_id, $size, true ) . "\n";
+
+		return $output;
+	}
+
+	$itemtag = tag_escape( $itemtag );
+	$captiontag = tag_escape( $captiontag );
+	$icontag = tag_escape( $icontag );
+	$valid_tags = wp_kses_allowed_html( 'post' );
+
+	if ( ! isset( $valid_tags[ $itemtag ] ) )
+		$itemtag = 'dl';
+	if ( ! isset( $valid_tags[ $captiontag ] ) )
+		$captiontag = 'dd';
+	if ( ! isset( $valid_tags[ $icontag ] ) )
+		$icontag = 'dt';
+
+	$columns = intval( $columns );
+	$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
+	$float = is_rtl() ? 'right' : 'left';
+
+	$selector = "gallery-{$instance}";
+
+	$size_class = sanitize_html_class( $size );
+    $gallery_div = "<section id=\"gallery-{$id}\" class=\"entry-gallery\"><div id=\"$selector\" class=\"flexslider slider slider-size-{$size_class}\"><ul class=\"slides\">";
+    $output = $gallery_div;
+
+	$i = 0;
+
+	$attachment_id = ( empty( $attachment_id ) ) ? get_post_thumbnail_id() : (int) $attachment_id;
+
+	foreach ( $attachments as $id => $attachment ) {
+
+		// Get image, meta & caption
+		$image_link = wp_get_attachment_image( $id, $size );
+		$image_meta  = wp_get_attachment_metadata( $id );
+		$image_caption = $attachment->post_excerpt;
+
+		// Set orientation
+		$orientation = '';
+		if ( isset( $image_meta['height'], $image_meta['width'] ) )
+			$orientation = ( $image_meta['height'] > $image_meta['width'] ) ? 'portrait' : 'landscape';
+
+		// Image markup
+		$output .= "<{$itemtag} class=\"slide {$orientation}\">";
+		$output .= $image_link;
+
+		// Add caption if it exists
+		if ( ! empty( $image_caption ) )
+			$output .= '<span class="image-caption">' . $image_caption . '</span>';
+
+		$output .= "</{$itemtag}>";
+	}
+
+    $output .= "</ul></div></section>\n";
+
+	return $output;
+
+}
+add_shortcode( 'flexslider_gallery', 'altofocus_gallery_shortcode' );
+
+if ( ! function_exists( 'altofocus_posted_on' ) ) :
+/**
+ * Prints HTML with meta information for the current post-date/time and author.
+ */
+function altofocus_posted_on() {
+
+	// Set date & time
+	$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
+	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
+		$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
+	}
+
+	$time_string = sprintf( $time_string,
+		esc_attr( get_the_date( 'c' ) ),
+		esc_html( get_the_date() ),
+		esc_attr( get_the_modified_date( 'c' ) ),
+		esc_html( get_the_modified_date() )
+	);
+
+	$posted_on = '<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>';
+
+	// Set author/byline info
+	$byline = sprintf(
+		esc_html_x( 'Written by %s', 'post author', 'altofocus' ),
+		'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>'
+	);
+
+	// Date markup
+	echo '<div class="posted-on">' . $posted_on . '</div>'; // WPCS: XSS OK.
+
+	// Author markup
+	echo '<div class="byline"> ' . $byline . '</div>'; // WPCS: XSS OK.
+
+	// Show edit link
+	edit_post_link(
+		sprintf(
+			/* translators: %s: Name of current post */
+			esc_html__( 'Edit %s', 'altofocus' ),
+			the_title( '<span class="screen-reader-text">"', '"</span>', false )
+		),
+		'<span class="edit-link">',
+		'</span>'
+	);
+}
+endif;
+
+if ( ! function_exists( 'altofocus_entry_footer' ) ) :
+/**
+ * Prints HTML with meta information for the categories, tags and comments.
+ */
+function altofocus_entry_footer() {
+
+	// Hide category and tag text for pages.
+	if ( 'post' === get_post_type() ) {
+
+		/* translators: used between list items, there is a space after the comma */
+		$categories_list = get_the_term_list( get_the_ID(), 'category', '<ul><li>', '</li><li>', '</li></ul>' );
+		if ( $categories_list && altofocus_categorized_blog() ) {
+
+			printf( '<div class="cat-links">' . esc_html__( 'Categories %1$s', 'altofocus' ) . '</div>', $categories_list ); // WPCS: XSS OK.
+		}
+
+		/* translators: used between list items, there is a space after the comma */
+		$tags_list = get_the_term_list( get_the_ID(), 'post_tag', '<ul><li>', '</li><li>', '</li></ul>' );
+		if ( $tags_list ) {
+
+			printf( '<div class="tags-links">' . esc_html__( 'Tags %1$s', 'altofocus' ) . '</div>', $tags_list ); // WPCS: XSS OK.
+		}
+	}
+}
+endif;
+
+/**
+ * Strips slideshow gallery shortcodes form the content
+ */
+function altofocus_strip_override_shortcode( $content ) {
+
+	preg_match_all( '/' . get_shortcode_regex() . '/s', $content, $matches, PREG_SET_ORDER );
+
+	if ( ! empty( $matches ) ) {
+
+		foreach ( $matches as $shortcode ) {
+
+			if ( 'gallery' === $shortcode[2] ) {
+
+				$pos = strpos( $content, $shortcode[0] );
+
+				if ( false !== $pos ) {
+
+					return substr_replace( $content, '', $pos, strlen( $shortcode[0] ) );
+				}
+			}
+		}
+	}
+
+	return $content;
+}
+
+/**
+ * Returns true if a blog has more than 1 category.
+ *
+ * @return bool
+ */
+function altofocus_categorized_blog() {
+
+	if ( false === ( $all_the_cool_cats = get_transient( 'altofocus_categories' ) ) ) {
+
+		// Create an array of all the categories that are attached to posts.
+		$all_the_cool_cats = get_categories( array(
+			'fields'     => 'ids',
+			'hide_empty' => 1,
+			// We only need to know if there is more than one category.
+			'number'     => 2,
+		) );
+
+		// Count the number of categories that are attached to the posts.
+		$all_the_cool_cats = count( $all_the_cool_cats );
+
+		set_transient( 'altofocus_categories', $all_the_cool_cats );
+	}
+
+	if ( $all_the_cool_cats > 1 ) {
+
+		// This blog has more than 1 category so altofocus_categorized_blog should return true.
+		return true;
+
+	} else {
+
+		// This blog has only 1 category so altofocus_categorized_blog should return false.
+		return false;
+	}
+}
+
+/**
+ * Flush out the transients used in altofocus_categorized_blog.
+ */
+function altofocus_category_transient_flusher() {
+
+	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
+		return;
+	}
+
+	// Like, beat it. Dig?
+	delete_transient( 'altofocus_categories' );
+}
+add_action( 'edit_category', 'altofocus_category_transient_flusher' );
+add_action( 'save_post',     'altofocus_category_transient_flusher' );

altofocus/inc/wpcom-colors.php

@@ -0,0 +1,465 @@
+<?php
+/**
+ * Custom Colors: AltoFocus
+ */
+
+/**
+ * WHITE --------------------
+ */
+
+add_color_rule( 'bg', '#ffffff', array(
+
+	/* Background color, no contrast */
+
+	array( 'html,
+			body,
+			button,
+			#page a.button,
+			input[type="button"],
+			input[type="reset"],
+			input[type="submit"],
+			ins,
+			mark,
+			.dropdown-toggle,
+			.hfeed #main .hentry.grid-item-featured:not(.has-post-thumbnail) .entry-header,
+			.hfeed #main .hentry:not(.has-post-thumbnail) .entry-header,
+			.hfeed #main .hentry .post-thumbnail:after,
+			.site-header,
+			.top-navigation > div,
+			.menu-toggle,
+			.single .entry-media,
+			.site-content,
+			#infinite-handle span button,
+			.widget-area', 'background-color' ),
+
+	/* Text color, link contrast */
+
+	array( 'button:hover,
+			#page a.button:hover,
+			input[type="button"]:hover,
+			input[type="reset"]:hover,
+			input[type="submit"]:hover,
+			#infinite-handle span button:hover,
+			.comments-link:hover a,
+			.dropdown-toggle.toggled-on:after,
+			.dropdown-toggle:hover:after', 'color' ),
+
+	/* Text color, link contrast */
+
+	array( '.top-navigation .children li a,
+			.top-navigation .sub-menu li a,
+			.top-navigation div > ul li.toggled-on a,
+			.hfeed #main .hentry.grid-item-featured .entry-header-wrap,
+			.hfeed #main .hentry.grid-item-featured .entry-header-wrap .posted-on,
+			.hfeed #main .hentry.grid-item-featured:hover.has-post-thumbnail .edit-link a', 'color', 'link', 5 ),
+
+	/* Stroke color, contrast bg */
+
+	array( '.dropdown-toggle.toggled-on .meta-nav .dropdown-icon .line,
+			.dropdown-toggle:hover .meta-nav .dropdown-icon .line,
+			.menu-toggle:hover .meta-nav .menu-icon .line,
+			.post-navigation-fixed .nav-links a:hover .meta-nav .arrow-icon .arrow', 'stroke', 'link', 5 ),
+
+	/* Fill color, contrast bg */
+
+	array( '.comments-link .comment-icon .path,
+			.post-navigation-fixed .nav-links a .meta-nav .arrow-icon .circle', 'fill' ),
+
+), __( 'Background Color' ) );
+
+
+
+/**
+ * ORANGE --------------------
+ */
+
+add_color_rule( 'txt', '#e38900', array(
+
+	/* Background color, bg contrast */
+
+	array( '#infinite-handle span button:hover,
+			.dropdown-toggle.toggled-on,
+			.dropdown-toggle:hover,
+			button:hover,
+			#page a.button:hover,
+			input[type="button"]:hover,
+			input[type="reset"]:hover,
+			input[type="submit"]:hover', 'background-color', 'bg', 3 ),
+
+	/* Background color, bg contrast */
+
+	array( '.hfeed #main .hentry.grid-item-featured .post-thumbnail:after', 'background-color' ),
+
+	/* Background color, .9 opacity */
+
+	array( '.flex-control-paging li a:hover,
+			.flex-control-paging li a.flex-active', 'background-color', 0.9 ),
+
+	/* Border color, bg contrast */
+
+	array( '#infinite-handle span button:hover,
+			.dropdown-toggle.toggled-on,
+			.dropdown-toggle:hover,
+			button:hover,
+			#page a.button:hover,
+			input[type="button"]:hover,
+			input[type="reset"]:hover,
+			input[type="submit"]:hover', 'border-color', 'bg', 3 ),
+
+	/* Border color, no contrast */
+
+	array( '.comments-link:hover:after,
+			.comments-link:hover:before', 'border-top-color' ),
+
+	array( '.comments-link:hover:after,
+			.comments-link:hover:before', 'border-left-color' ),
+
+	/* Text color, bg contrast */
+
+	array( 'a,
+			a:active,
+			a:hover,
+			a:focus,
+			a:visited,
+			.flex-direction-nav a:hover .meta-nav:before,
+			.hfeed #main .hentry .edit-link a,
+			.hfeed #main .hentry.grid-item-featured:not(.has-post-thumbnail) .entry-header-wrap,
+			.hfeed #main .hentry.grid-item-featured:not(.has-post-thumbnail) .entry-header-wrap .posted-on,
+			.hfeed #main .hentry:not(.has-post-thumbnail) .entry-header-wrap,
+			.hfeed #main .hentry:not(.has-post-thumbnail) .entry-header-wrap .posted-on,
+			.hfeed #main .hentry .entry-header-wrap,
+			.hfeed #main .hentry .entry-header-wrap .posted-on,
+			.hfeed #main .hentry:hover.has-post-thumbnail .edit-link a', 'color', 'bg' ),
+
+	/* Comments link fill, bg contrast */
+
+	array( '.comments-link:hover .comment-icon .path,
+			.post-navigation-fixed .nav-links a:hover .meta-nav .arrow-icon .circle', 'fill', 'bg', 3 ),
+
+	/* Comments link stroke, bg contrast */
+
+	array( '.comments-link:hover .comment-icon .path,
+			.post-navigation-fixed .nav-links a:hover .meta-nav .arrow-icon .circle,
+			.flex-direction-nav a:hover .meta-nav .arrow', 'stroke', 'bg', 3 ),
+
+), __( 'Link Color', 'altofocus' ) );
+
+
+
+/**
+ * LIGHT GREY --------------------
+ */
+
+add_color_rule( 'link', '#888888', array(
+
+), __( 'Category Color 1', 'altofocus' ) );
+
+
+
+/**
+ * LIGHT GRAY --------------------
+ */
+
+add_color_rule( 'fg1', '#888888', array(
+
+), __( 'Category Color 1', 'altofocus' ) );
+
+
+
+/**
+ * LIGHT GRAY --------------------
+ */
+
+add_color_rule( 'extra', '#888888', array(
+
+	/* Text color, contrast bg */
+
+	array( '#respond p[class^="comment-form"] label,
+			#secondary .widget-grofile .grofile-meta h4,
+			#secondary .widget_calendar caption,
+			#secondary .widget_search .screen-reader-text,
+			.hfeed .page-header .page-title,
+			.hfeed .page-header .taxonomy-description,
+			.byline,
+			.comment-body .comment-metadata a,
+			.comment-body .fn,
+			.comment-navigation .screen-reader-text,
+			.comment-reply-title,
+			.comment-respond p[class^="comment-form"] label,
+			.comments-title,
+			.highlander-enabled #respond label,
+			.highlander-enabled #respond form label,
+			.entry-footer,
+			.hentry .entry-content > #jp-post-flair .jp-relatedposts-headline,
+			.hentry .entry-content > #jp-post-flair .sd-title,
+			.hentry .entry-content > .sd-sharing-enabled .jp-relatedposts-headline,
+			.hentry .entry-content > .sd-sharing-enabled .sd-title,
+			.post-navigation .screen-reader-text,
+			.posted-on,
+			.posts-navigation .screen-reader-text,
+			.widget-title,
+			cite', 'color', 'bg', 3 ),
+
+), __( 'Hover Color', 'altofocus' ) );
+
+
+
+/**
+ * DARK GRAY --------------------
+ */
+
+add_color_rule( 'extra', '#111111', array(
+
+	/* Text color, contrast bg */
+
+	array( '#infinite-handle span button,
+			.hfeed .page-header .page-title,
+			.comment-body .fn,
+			.comments-link a,
+			.dropdown-toggle,
+			.dropdown-toggle:after,
+			.flex-direction-nav a .meta-nav:before,
+			#content .comment-navigation .meta-nav,
+			#content .post-navigation .meta-nav,
+			#content .posts-navigation .meta-nav,
+			body,
+			button,
+			.menu-toggle,
+			#page a.button,
+			input,
+			input[type="button"],
+			input[type="reset"],
+			input[type="submit"],
+			select,
+			textarea', 'color', 'bg', 5 ),
+
+	/* Border-color, transparent */
+
+	array( '#infinite-handle span button,
+			button,
+			#page a.button,
+			input[type="button"],
+			input[type="reset"],
+			input[type="submit"]', 'border-color', 0.2 ),
+
+	/* Stroke color, transparent */
+
+	array( '.comments-link .comment-icon .path,
+			.post-navigation-fixed .nav-links a .meta-nav .arrow-icon .circle', 'stroke', 0.2 ),
+
+	/* Stroke color, contrast bg */
+
+	array( '.dropdown-toggle .meta-nav .dropdown-icon .line,
+			.menu-toggle .meta-nav .menu-icon .line,
+			.post-navigation-fixed .nav-links a .meta-nav .arrow-icon .arrow,
+			.flex-direction-nav a .meta-nav .arrow-icon .arrow', 'stroke', 'bg', 5 ),
+
+	/* Border-color, .5 opacity */
+
+	array( '#secondary #flickr_badge_wrapper,
+			.hfeed #main .hentry .entry-header,
+			.hfeed #main .hentry:not(.has-post-thumbnail) .entry-header,
+			.hfeed #main .hentry.grid-item-featured:not(.has-post-thumbnail) .entry-header', 'border-color', 'bg', 5 ),
+
+	array( '.home .content-area,
+			.blog .content-area,
+			.hfeed .content-area,
+			table,
+			.top-navigation .sub-menu:before,
+			.top-navigation .children:before,
+			.top-navigation > div > ul,
+			.comment-navigation,
+			.posts-navigation,
+			.post-navigation,
+			.single .hentry:not(.has-post-thumbnail):before,
+			.page .hentry.page:before,
+			.comments-area,
+			.no-comments,
+			.comment-body,
+			.pingback .comment-body,
+			.trackback .comment-body,
+			.page .site-content .comments-area:before,
+			.single .comment-list,
+			#respond,
+			.comment-respond,
+			.widget,
+			.highlander-enabled #respond,
+			#secondary,
+			.site-footer', 'border-top-color', 'bg', 5 ),
+
+	array( '.hfeed .hentry:before,
+			table th,
+			table td,
+			.top-navigation li:after,
+			.site-content', 'border-bottom-color', 'bg', 5 ),
+
+	array( '.dropdown-toggle,
+			.dropdown-toggle:active,
+			.dropdown-toggle:focus', 'border-color', 0.2 ),
+
+) );
+
+
+
+/**
+ * MEDIUM GRAY --------------------
+ */
+
+add_color_rule( 'extra', '#cccccc', array(
+
+	/* Background color, contrast bg */
+
+	array( 'hr', 'background-color', 'bg', 3 ),
+
+	/* Background color, .5 opacity */
+
+	array( '.flex-control-paging li a', 'background-color', 0.5 ),
+
+	/* Text color, contrast bg */
+
+	array( '.comment-navigation .meta-nav,
+			.post-navigation .meta-nav,
+			.posts-navigation .meta-nav', 'color', 'bg', 3 ),
+
+	/* Border-color, contrast bg */
+
+	array( '.hentry .entry-content > #jp-post-flair div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img,
+			.hentry .entry-content > #jp-post-flair div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post span,
+			.hentry .entry-content > .sd-sharing-enabled div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img,
+			.hentry .entry-content > .sd-sharing-enabled div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post span,
+			input[type="color"],
+			input[type="date"],
+			input[type="datetime"],
+			input[type="datetime-local"],
+			input[type="email"],
+			input[type="month"],
+			input[type="number"],
+			input[type="password"],
+			input[type="range"],
+			input[type="search"],
+			input[type="tel"],
+			input[type="text"],
+			input[type="time"],
+			input[type="url"],
+			input[type="week"],
+			select,
+			textarea', 'border-color', 'bg', 3 ),
+
+) );
+
+
+
+/**
+ * EXTRA CSS --------------------
+ */
+
+function altofocus_extra_css() {
+
+	$colors_array = get_theme_mod( 'colors_manager' );
+	$bg           = $colors_array['colors']['bg'];     // White
+	$link         = $colors_array['colors']['txt'];   // Orange
+	$extra        = $colors_array['colors']['extra'];  // Light Gray
+
+	/**
+	 * WHITE --------------------
+	 */
+	?>
+
+	@media screen and (max-width: 37.5em) {
+
+		/* background-color */
+
+		.hfeed #main .hentry.grid-item-featured .entry-header-wrap,
+		.hfeed #main .hentry.grid-item-featured .entry-header-wrap .posted-on,
+		.hfeed #main .hentry.grid-item-featured .edit-link a {
+
+			color: <?php echo $bg; ?>;
+		}
+	}
+
+	@media screen and (min-width: 37.5em) {
+
+		/* border-top-color */
+
+		.top-navigation .children > li.toggled-on,
+		.top-navigation .sub-menu > li.toggled-on,
+		.top-navigation div > ul > li > .children,
+		.top-navigation div > ul > li > .sub-menu {
+			border-top-color: <?php echo $bg; ?>;
+		}
+
+		/* border-bottom-color */
+
+		.top-navigation .children .children,
+		.top-navigation .children .sub-menu,
+		.top-navigation .sub-menu .children,
+		.top-navigation .sub-menu .sub-menu {
+			border-bottom-color: <?php echo $bg; ?>;
+		}
+	}
+
+	<?php
+	/**
+	 * ORANGE --------------------
+	 */
+	?>
+
+	@media screen and (max-width: 37.5em) {
+
+		/* background-color */
+
+		.hfeed .hentry.grid-item-featured {
+			background-color: <?php echo $link; ?>;
+		}
+
+		#masthead .top-navigation div > ul li a {
+			color: <?php echo $link; ?>;
+		}
+	}
+
+	@media screen and (min-width: 37.5em) {
+
+		/* background-color */
+
+		.top-navigation .children,
+		.top-navigation .sub-menu,
+		.top-navigation div > ul li.toggled-on {
+			background-color: <?php echo $link; ?>;
+		}
+	}
+	<?php
+}
+add_theme_support( 'custom_colors_extra_css', 'altofocus_extra_css' );
+
+/**
+ * Additional color palettes
+ */
+add_color_palette( array(
+	'#f0eeec',
+	'#325cb8'
+), __( 'Beige on Blue', 'altofocus' ) );
+
+add_color_palette( array(
+	'#ffffff',
+	'#000000'
+), __( 'Black on White', 'altofocus' ) );
+
+add_color_palette( array(
+	'#000000',
+	'#c44d58'
+), __( 'Red on Black', 'altofocus' ) );
+
+add_color_palette( array(
+	'#cecece',
+	'#22a961'
+), __( 'Purple on Tan', 'altofocus' ) );
+
+add_color_palette( array(
+	'#1c3c59',
+	'#ecaa91'
+), __( 'Salmon on Navy Blue', 'altofocus' ) );
+
+add_color_palette( array(
+	'#ffe5b2',
+	'#b11623'
+), __( 'Burgundy on Banana', 'altofocus' ) );

altofocus/inc/wpcom.php

@@ -0,0 +1,81 @@
+<?php
+/**
+ * WordPress.com-specific functions and definitions.
+ *
+ * This file is centrally included from `wp-content/mu-plugins/wpcom-theme-compat.php`.
+ *
+ * @package AltoFocus
+ */
+
+/**
+ * Adds support for wp.com-specific theme functions.
+ *
+ * @global array $themecolors
+ */
+function altofocus_wpcom_setup() {
+
+	global $themecolors;
+
+	// Set theme colors for third party services.
+	if ( ! isset( $themecolors ) ) {
+
+		$themecolors = array(
+			'bg'     => '#ffffff',
+			'border' => '#e38900',
+			'text'   => '',
+			'link'   => '',
+			'url'    => '',
+		);
+	}
+
+	// Add Print styles
+	add_theme_support( 'print-style' );
+}
+add_action( 'after_setup_theme', 'altofocus_wpcom_setup' );
+
+/**
+ * Reset a custom background arguments for WP.com to use the default callback.
+ */
+function altofocus_wpcom_custom_background_args( $args ) {
+
+	$args = array(
+		'default-attachment' => 'fixed',
+		'default-color'      => 'ffffff',
+		'default-image'      => '',
+		'default-position-x' => 'center',
+		'default-position-y' => 'center',
+		'default-repeat'     => 'no-repeat',
+		'default-size'       => 'auto',
+		'wp-head-callback'   => '_custom_background_cb'
+	);
+
+	return $args;
+}
+add_filter( 'altofocus_custom_background_args', 'altofocus_wpcom_custom_background_args' );
+
+/**
+ * De-queue Google fonts if custom fonts are being used instead
+ */
+function altofocus_dequeue_fonts() {
+
+	if ( class_exists( 'TypekitData' ) && class_exists( 'CustomDesign' ) && CustomDesign::is_upgrade_active() ) {
+
+		$customfonts = TypekitData::get( 'families' );
+
+		if ( $customfonts && $customfonts['site-title']['id'] && $customfonts['headings']['id'] && $customfonts['body-text']['id'] ) {
+
+			wp_dequeue_style( 'altofocus-libre-baskerville' );
+			wp_dequeue_style( 'altofocus-karla' );
+		}
+	}
+}
+add_action( 'wp_enqueue_scripts', 'altofocus_dequeue_fonts' );
+
+/**
+ * WordPress.com specific styles
+ */
+function altofocus_wpcom_styles() {
+
+	wp_enqueue_style( 'altofocus-wpcom', get_template_directory_uri() . '/inc/style-wpcom.css', '20170303' );
+}
+add_action( 'wp_enqueue_scripts', 'altofocus_wpcom_styles' );

altofocus/index.php

@@ -0,0 +1,62 @@
+<?php
+/**
+ * The main template file.
+ *
+ * This is the most generic template file in a WordPress theme
+ * and one of the two required files for a theme (the other being style.css).
+ * It is used to display a page when nothing more specific matches a query.
+ * E.g., it puts together the home page when no home.php file exists.
+ *
+ * @link https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package AltoFocus
+ */
+
+get_header(); ?>
+
+	<div id="primary" class="content-area">
+
+	<?php if ( have_posts() ) : ?>
+
+		<?php if ( is_home() && ! is_front_page() ) : ?>
+			<header class="page-header">
+				<h1 class="page-title"><?php single_post_title(); ?></h1>
+			</header>
+		<?php endif; ?>
+
+		<main id="main" class="site-main" role="main">
+
+		<?php
+			// Get the featured post ids
+			$feautured_id_array = altofocus_get_featured_post_ids();
+
+			/* Start the Loop */
+			while ( have_posts() ) : the_post();
+
+				/*
+				 * Include the Post-Format-specific template for the content.
+				 * If you want to override this in a child theme, then include a file
+				 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
+				 */
+				get_template_part( 'components/post/content', get_post_format() );
+
+			endwhile;
+
+			the_posts_navigation(); ?>
+
+		</main>
+
+	<?php else : ?>
+
+		<main id="main" class="site-main" role="main">
+
+			<?php get_template_part( 'components/post/content', 'none' ); ?>
+
+		</main>
+
+	<?php endif; ?>
+
+	</div>
+<?php
+// get_sidebar();
+get_footer();

altofocus/languages/altofocus.pot

@@ -0,0 +1,251 @@
+# Copyright (C) 2018 Automattic, Inc
+# This file is distributed under the GNU General Public License v2 or later.
+msgid ""
+msgstr ""
+"Project-Id-Version: AltoFocus 1.0.1-wpcom\n"
+"Report-Msgid-Bugs-To: http://wordpress.org/support/theme/altofocus\n"
+"POT-Creation-Date: 2018-02-03 01:38:04+00:00\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"PO-Revision-Date: 2018-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+
+#: 404.php:16
+msgid "Oops! That page can&rsquo;t be found."
+msgstr ""
+
+#: 404.php:19
+msgid ""
+"It looks like nothing was found at this location. Maybe try one of the links "
+"below or a search?"
+msgstr ""
+
+#: comments.php:31
+msgctxt "comments title"
+msgid "One Comment"
+msgid_plural "%1$s Comments"
+msgstr[0] ""
+msgstr[1] ""
+
+#: comments.php:47
+msgid "Comment navigation"
+msgstr ""
+
+#: comments.php:50
+msgid "Older Comments"
+msgstr ""
+
+#: comments.php:51
+msgid "Newer Comments"
+msgstr ""
+
+#: comments.php:62
+msgid "Comments are closed."
+msgstr ""
+
+#: components/footer/site-info.php:3
+msgid "http://wordpress.org/"
+msgstr ""
+
+#: components/footer/site-info.php:3
+msgid "Proudly powered by %s"
+msgstr ""
+
+#: components/footer/site-info.php:5
+msgid "Theme: %1$s by %2$s."
+msgstr ""
+
+#: components/navigation/navigation-top.php:14
+msgid "Menu"
+msgstr ""
+
+#. translators: %s: Name of current post
+#: components/page/content-page.php:19 components/post/content.php:43
+#: inc/template-tags.php:209
+msgid "Edit %s"
+msgstr ""
+
+#: components/page/content-page.php:32 components/post/content-single.php:100
+msgid "Pages:"
+msgstr ""
+
+#: components/post/content-none.php:14
+msgid "Nothing Found"
+msgstr ""
+
+#: components/post/content-none.php:20
+msgid ""
+"Ready to publish your first post? <a href=\"%1$s\">Get started here</a>."
+msgstr ""
+
+#: components/post/content-none.php:24
+msgid ""
+"Sorry, but nothing matched your search terms. Please try again with some "
+"different keywords."
+msgstr ""
+
+#: components/post/content-none.php:30
+msgid ""
+"It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps "
+"searching can help."
+msgstr ""
+
+#: components/post/content-single.php:84
+msgid "0"
+msgstr ""
+
+#: components/post/content-single.php:84
+msgid "1"
+msgstr ""
+
+#: components/post/content-single.php:84
+msgid "%"
+msgstr ""
+
+#: functions.php:51
+msgid "Top"
+msgstr ""
+
+#: functions.php:113
+msgid "Footer"
+msgstr ""
+
+#. translators: If there are characters in your language that are not supported
+#. by Libre Baskerville, translate this to 'off'. Do not translate into your
+#. own language.
+#: functions.php:137
+msgctxt "Libre Baskerville font: on or off"
+msgid "on"
+msgstr ""
+
+#. translators: To add an additional Libre Baskerville character subset
+#. specific to your language, translate this to 'greek', 'cyrillic' or
+#. 'vietnamese'. Do not translate into your own language.
+#: functions.php:144
+msgctxt "Libre Baskerville font: add new subset (greek, cyrillic, vietnamese)"
+msgid "no-subset"
+msgstr ""
+
+#. translators: If there are characters in your language that are not supported
+#. by Karla SC, translate this to 'off'. Do not translate into your own
+#. language.
+#: functions.php:179
+msgctxt "Karla font: on or off"
+msgid "on"
+msgstr ""
+
+#. translators: To add an additional Karla SC character subset specific to your
+#. language, translate this to 'greek', 'cyrillic' or 'vietnamese'. Do not
+#. translate into your own language.
+#: functions.php:186
+msgctxt "Karla font: add new subset (greek, cyrillic, vietnamese)"
+msgid "no-subset"
+msgstr ""
+
+#: functions.php:261
+msgid "expand child menu"
+msgstr ""
+
+#: functions.php:262
+msgid "collapse child menu"
+msgstr ""
+
+#: functions.php:267 single.php:22
+msgid "Next"
+msgstr ""
+
+#: functions.php:268 single.php:21
+msgid "Previous"
+msgstr ""
+
+#: header.php:24
+msgid "Skip to content"
+msgstr ""
+
+#: inc/template-tags.php:195
+msgctxt "post author"
+msgid "Written by %s"
+msgstr ""
+
+#. translators: used between list items, there is a space after the comma
+#: inc/template-tags.php:231
+msgid "Categories %1$s"
+msgstr ""
+
+#. translators: used between list items, there is a space after the comma
+#: inc/template-tags.php:238
+msgid "Tags %1$s"
+msgstr ""
+
+#: inc/wpcom-colors.php:68
+msgid "Background Color"
+msgstr ""
+
+#: inc/wpcom-colors.php:145
+msgid "Link Color"
+msgstr ""
+
+#: inc/wpcom-colors.php:155 inc/wpcom-colors.php:165
+msgid "Category Color 1"
+msgstr ""
+
+#: inc/wpcom-colors.php:203
+msgid "Hover Color"
+msgstr ""
+
+#: inc/wpcom-colors.php:440
+msgid "Beige on Blue"
+msgstr ""
+
+#: inc/wpcom-colors.php:445
+msgid "Black on White"
+msgstr ""
+
+#: inc/wpcom-colors.php:450
+msgid "Red on Black"
+msgstr ""
+
+#: inc/wpcom-colors.php:455
+msgid "Purple on Tan"
+msgstr ""
+
+#: inc/wpcom-colors.php:460
+msgid "Salmon on Navy Blue"
+msgstr ""
+
+#: inc/wpcom-colors.php:465
+msgid "Burgundy on Banana"
+msgstr ""
+
+#: search.php:18
+msgid "Search Results for: %s"
+msgstr ""
+
+#. Theme Name of the plugin/theme
+#: wp-content/themes/pub/altofocus/style.css
+msgid "AltoFocus"
+msgstr ""
+
+#. Theme URI of the plugin/theme
+#: wp-content/themes/pub/altofocus/style.css
+msgid "https://wordpress.com/themes/altofocus/"
+msgstr ""
+
+#. Description of the plugin/theme
+#: wp-content/themes/pub/altofocus/style.css
+msgid ""
+"AltoFocus is a theme for photographers, artists, and other creative types in "
+"search of a simple and easy way to display their work."
+msgstr ""
+
+#. Author of the plugin/theme
+#: wp-content/themes/pub/altofocus/style.css
+msgid "Automattic, Inc"
+msgstr ""
+
+#. Author URI of the plugin/theme
+#: wp-content/themes/pub/altofocus/style.css
+msgid "http://automattic.com"
+msgstr ""

altofocus/languages/no.po

@@ -0,0 +1,216 @@
+# Translation of WordPress.com - Themes - Altofocus in Norwegian
+# This file is distributed under the same license as the WordPress.com - Themes - Altofocus package.
+msgid ""
+msgstr ""
+"PO-Revision-Date: 2017-11-25 17:35:37+0000\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=n != 1;\n"
+"X-Generator: GlotPress/2.4.0-alpha\n"
+"Language: no\n"
+"Project-Id-Version: WordPress.com - Themes - Altofocus\n"
+
+#: components/footer/site-info.php:3
+msgid "http://wordpress.org/"
+msgstr "http://wordpress.org/"
+
+#: functions.php:113
+msgid "Footer"
+msgstr "Bunntekst"
+
+#: inc/wpcom-colors.php:465
+msgid "Burgundy on Banana"
+msgstr "Burgunder på Banangult"
+
+#: search.php:18
+msgid "Search Results for: %s"
+msgstr "Søkeresultater for: %s"
+
+#: inc/wpcom-colors.php:460
+msgid "Salmon on Navy Blue"
+msgstr "Lakserosa på Formelt blått"
+
+#: inc/wpcom-colors.php:455
+msgid "Purple on Tan"
+msgstr "Lilla på Lysebrunt"
+
+#: inc/wpcom-colors.php:450
+msgid "Red on Black"
+msgstr "Rødt på Svart"
+
+#: inc/wpcom-colors.php:445
+msgid "Black on White"
+msgstr "Svart på Hvitt"
+
+#: inc/wpcom-colors.php:440
+msgid "Beige on Blue"
+msgstr "Beige på Blå"
+
+#: inc/wpcom-colors.php:203
+msgid "Hover Color"
+msgstr "Oversvevingsfarge"
+
+#: inc/wpcom-colors.php:155 inc/wpcom-colors.php:165
+msgid "Category Color 1"
+msgstr "Kategorifarge 1"
+
+#: inc/wpcom-colors.php:145
+msgid "Link Color"
+msgstr "Lenkefargen"
+
+#: inc/wpcom-colors.php:68
+msgid "Background Color"
+msgstr "Bakgrunnsfarge"
+
+#. translators: used between list items, there is a space after the comma
+#: inc/template-tags.php:238
+msgid "Tags %1$s"
+msgstr "Stikkordene %1$s"
+
+#. translators: used between list items, there is a space after the comma
+#: inc/template-tags.php:231
+msgid "Categories %1$s"
+msgstr "Kategoriene %1$s"
+
+#: inc/template-tags.php:195
+msgctxt "post author"
+msgid "Written by %s"
+msgstr "Skrevet av %s"
+
+#: header.php:24
+msgid "Skip to content"
+msgstr "Gå til innhold"
+
+#: functions.php:268 single.php:21
+msgid "Previous"
+msgstr "Forrige"
+
+#: functions.php:267 single.php:22
+msgid "Next"
+msgstr "Neste"
+
+#: functions.php:262
+msgid "collapse child menu"
+msgstr "lukk undermenyen"
+
+#: functions.php:261
+msgid "expand child menu"
+msgstr "utvid undermenyen"
+
+#. translators: To add an additional Karla SC character subset specific to your
+#. language, translate this to 'greek', 'cyrillic' or 'vietnamese'. Do not
+#. translate into your own language.
+#: functions.php:186
+msgctxt "Karla font: add new subset (greek, cyrillic, vietnamese)"
+msgid "no-subset"
+msgstr "no-subset"
+
+#. translators: If there are characters in your language that are not supported
+#. by Karla SC, translate this to 'off'. Do not translate into your own
+#. language.
+#: functions.php:179
+msgctxt "Karla font: on or off"
+msgid "on"
+msgstr "on"
+
+#. translators: To add an additional Libre Baskerville character subset
+#. specific to your language, translate this to 'greek', 'cyrillic' or
+#. 'vietnamese'. Do not translate into your own language.
+#: functions.php:144
+msgctxt "Libre Baskerville font: add new subset (greek, cyrillic, vietnamese)"
+msgid "no-subset"
+msgstr "no-subset"
+
+#. translators: If there are characters in your language that are not supported
+#. by Libre Baskerville, translate this to 'off'. Do not translate into your
+#. own language.
+#: functions.php:137
+msgctxt "Libre Baskerville font: on or off"
+msgid "on"
+msgstr "on"
+
+#: functions.php:51
+msgid "Top"
+msgstr "Topp"
+
+#: components/post/content-single.php:84
+msgid "%"
+msgstr "%"
+
+#: components/post/content-single.php:84
+msgid "1"
+msgstr "1"
+
+#: components/post/content-single.php:84
+msgid "0"
+msgstr "0"
+
+#: components/post/content-none.php:30
+msgid "It seems we can’t find what you’re looking for. Perhaps searching can help."
+msgstr "Vi klarer ikke å finne det du leter etter. Prøv å søke."
+
+#: components/post/content-none.php:24
+msgid "Sorry, but nothing matched your search terms. Please try again with some different keywords."
+msgstr "Beklager, men intet passet med dine søkeord. Vennligst prøv igjen med andre søkeord."
+
+#: components/post/content-none.php:20
+msgid "Ready to publish your first post? <a href=\"%1$s\">Get started here</a>."
+msgstr "Klar for å publisere ditt første innlegg? <a href=\"%1$s\">Kom i gang her</a>."
+
+#: components/post/content-none.php:14
+msgid "Nothing Found"
+msgstr "Ingenting funnet"
+
+#: components/page/content-page.php:32 components/post/content-single.php:100
+msgid "Pages:"
+msgstr "Sider:"
+
+#. translators: %s: Name of current post
+#: components/page/content-page.php:19 components/post/content.php:43
+#: inc/template-tags.php:209
+msgid "Edit %s"
+msgstr "Rediger %s"
+
+#: components/navigation/navigation-top.php:14
+msgid "Menu"
+msgstr "Meny"
+
+#: components/footer/site-info.php:5
+msgid "Theme: %1$s by %2$s."
+msgstr "Tema: %1$s av %2$s."
+
+#: components/footer/site-info.php:3
+msgid "Proudly powered by %s"
+msgstr "Stolt drevet av %s"
+
+#: comments.php:62
+msgid "Comments are closed."
+msgstr "Kommentarer er stengt."
+
+#: comments.php:51
+msgid "Newer Comments"
+msgstr "Nyere kommentarer"
+
+#: comments.php:50
+msgid "Older Comments"
+msgstr "Eldre kommentarer"
+
+#: comments.php:47
+msgid "Comment navigation"
+msgstr "Kommentarnavigasjon"
+
+#: comments.php:31
+msgctxt "comments title"
+msgid "One Comment"
+msgid_plural "%1$s Comments"
+msgstr[0] "Én kommentar"
+msgstr[1] "%1$s kommentarer"
+
+#: 404.php:19
+msgid "It looks like nothing was found at this location. Maybe try one of the links below or a search?"
+msgstr "Det ble tydeligvis ikke funnet noe her. Kanskje forsøke en av lenkene under eller et søk?"
+
+#: 404.php:16
+msgid "Oops! That page can&rsquo;t be found."
+msgstr "Auda! Den siden finnes ikke."

altofocus/languages/pt-br.po

@@ -0,0 +1,221 @@
+# Translation of WordPress.com - Themes - Altofocus in Portuguese (Brazil)
+# This file is distributed under the same license as the WordPress.com - Themes - Altofocus package.
+msgid ""
+msgstr ""
+"PO-Revision-Date: 2018-02-06 19:45:41+0000\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+"X-Generator: GlotPress/2.4.0-alpha\n"
+"Language: pt_BR\n"
+"Project-Id-Version: WordPress.com - Themes - Altofocus\n"
+
+#: components/footer/site-info.php:3
+msgid "http://wordpress.org/"
+msgstr "http://br.wordpress.org/"
+
+#: functions.php:113
+msgid "Footer"
+msgstr "Rodapé"
+
+#: inc/wpcom-colors.php:465
+msgid "Burgundy on Banana"
+msgstr "Vinho e amarelo"
+
+#. Description of the plugin/theme
+#: wp-content/themes/pub/altofocus/style.css
+msgid "AltoFocus is a theme for photographers, artists, and other creative types in search of a simple and easy way to display their work."
+msgstr "AltoFocus é um tema para fotógrafos, artistas e demais criativos em busca de uma maneira simples e fácil de mostrar seus trabalhos."
+
+#: search.php:18
+msgid "Search Results for: %s"
+msgstr "Resultados da busca por: %s"
+
+#: inc/wpcom-colors.php:460
+msgid "Salmon on Navy Blue"
+msgstr "Salmão e azul"
+
+#: inc/wpcom-colors.php:455
+msgid "Purple on Tan"
+msgstr "Roxo e amarelado"
+
+#: inc/wpcom-colors.php:450
+msgid "Red on Black"
+msgstr "Vermelho e preto"
+
+#: inc/wpcom-colors.php:445
+msgid "Black on White"
+msgstr "Preto e Branco"
+
+#: inc/wpcom-colors.php:440
+msgid "Beige on Blue"
+msgstr "Bége e azul"
+
+#: inc/wpcom-colors.php:203
+msgid "Hover Color"
+msgstr "Cor ao Mover"
+
+#: inc/wpcom-colors.php:155 inc/wpcom-colors.php:165
+msgid "Category Color 1"
+msgstr "Categoria de cor 1"
+
+#: inc/wpcom-colors.php:145
+msgid "Link Color"
+msgstr "Cor de Link"
+
+#: inc/wpcom-colors.php:68
+msgid "Background Color"
+msgstr "Cor do fundo"
+
+#. translators: used between list items, there is a space after the comma
+#: inc/template-tags.php:238
+msgid "Tags %1$s"
+msgstr "Tags %1$s"
+
+#. translators: used between list items, there is a space after the comma
+#: inc/template-tags.php:231
+msgid "Categories %1$s"
+msgstr "Categorias %1$s"
+
+#: inc/template-tags.php:195
+msgctxt "post author"
+msgid "Written by %s"
+msgstr "Publicado por %s"
+
+#: header.php:24
+msgid "Skip to content"
+msgstr "Ir para conteúdo"
+
+#: functions.php:268 single.php:21
+msgid "Previous"
+msgstr "Anterior"
+
+#: functions.php:267 single.php:22
+msgid "Next"
+msgstr "Próximo"
+
+#: functions.php:262
+msgid "collapse child menu"
+msgstr "colapsar submenu"
+
+#: functions.php:261
+msgid "expand child menu"
+msgstr "expandir submenu"
+
+#. translators: To add an additional Karla SC character subset specific to your
+#. language, translate this to 'greek', 'cyrillic' or 'vietnamese'. Do not
+#. translate into your own language.
+#: functions.php:186
+msgctxt "Karla font: add new subset (greek, cyrillic, vietnamese)"
+msgid "no-subset"
+msgstr "no-subset"
+
+#. translators: If there are characters in your language that are not supported
+#. by Karla SC, translate this to 'off'. Do not translate into your own
+#. language.
+#: functions.php:179
+msgctxt "Karla font: on or off"
+msgid "on"
+msgstr "on"
+
+#. translators: To add an additional Libre Baskerville character subset
+#. specific to your language, translate this to 'greek', 'cyrillic' or
+#. 'vietnamese'. Do not translate into your own language.
+#: functions.php:144
+msgctxt "Libre Baskerville font: add new subset (greek, cyrillic, vietnamese)"
+msgid "no-subset"
+msgstr "no-subset"
+
+#. translators: If there are characters in your language that are not supported
+#. by Libre Baskerville, translate this to 'off'. Do not translate into your
+#. own language.
+#: functions.php:137
+msgctxt "Libre Baskerville font: on or off"
+msgid "on"
+msgstr "em "
+
+#: functions.php:51
+msgid "Top"
+msgstr "Topo"
+
+#: components/post/content-single.php:84
+msgid "%"
+msgstr "%"
+
+#: components/post/content-single.php:84
+msgid "1"
+msgstr "1"
+
+#: components/post/content-single.php:84
+msgid "0"
+msgstr "0"
+
+#: components/post/content-none.php:30
+msgid "It seems we can’t find what you’re looking for. Perhaps searching can help."
+msgstr "Parece que não encontramos o que você está procurando. Talvez a ferramenta de pesquisa possa ajudar."
+
+#: components/post/content-none.php:24
+msgid "Sorry, but nothing matched your search terms. Please try again with some different keywords."
+msgstr "Não encontramos nada para estes termos de busca. Tente novamente com palavras-chave diferentes."
+
+#: components/post/content-none.php:20
+msgid "Ready to publish your first post? <a href=\"%1$s\">Get started here</a>."
+msgstr "Pronto para publicar seu primeiro post? <a href=\"%1$s\">Comece aqui</a>."
+
+#: components/post/content-none.php:14
+msgid "Nothing Found"
+msgstr "Nenhum resultado"
+
+#: components/page/content-page.php:32 components/post/content-single.php:100
+msgid "Pages:"
+msgstr "Páginas"
+
+#. translators: %s: Name of current post
+#: components/page/content-page.php:19 components/post/content.php:43
+#: inc/template-tags.php:209
+msgid "Edit %s"
+msgstr "Editar %s"
+
+#: components/navigation/navigation-top.php:14
+msgid "Menu"
+msgstr "Menu"
+
+#: components/footer/site-info.php:5
+msgid "Theme: %1$s by %2$s."
+msgstr "Tema: %1$s %2$s."
+
+#: components/footer/site-info.php:3
+msgid "Proudly powered by %s"
+msgstr "Orgulhosamente feito com %s"
+
+#: comments.php:62
+msgid "Comments are closed."
+msgstr "Os comentários estão fechados."
+
+#: comments.php:51
+msgid "Newer Comments"
+msgstr "Comentários mais recentes"
+
+#: comments.php:50
+msgid "Older Comments"
+msgstr "Comentários mais antigos"
+
+#: comments.php:47
+msgid "Comment navigation"
+msgstr "Navegação entre comentários"
+
+#: comments.php:31
+msgctxt "comments title"
+msgid "One Comment"
+msgid_plural "%1$s Comments"
+msgstr[0] "1 comentário"
+msgstr[1] "%1$s comentários"
+
+#: 404.php:19
+msgid "It looks like nothing was found at this location. Maybe try one of the links below or a search?"
+msgstr "Parece que nada foi encontrado neste lugar. Quem sabe você possa tentar um dos links abaixo ou uma busca?"
+
+#: 404.php:16
+msgid "Oops! That page can&rsquo;t be found."
+msgstr "Ops! Essa página não pode ser encontrada."

altofocus/languages/ro.po

@@ -0,0 +1,222 @@
+# Translation of WordPress.com - Themes - Altofocus in Romanian
+# This file is distributed under the same license as the WordPress.com - Themes - Altofocus package.
+msgid ""
+msgstr ""
+"PO-Revision-Date: 2017-11-11 01:46:44+0000\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=3; plural=(n==1 ? 0 : (n==0 || (n%100 > 0 && n%100 < 20)) ? 1 : 2);\n"
+"X-Generator: GlotPress/2.4.0-alpha\n"
+"Language: ro\n"
+"Project-Id-Version: WordPress.com - Themes - Altofocus\n"
+
+#: components/footer/site-info.php:3
+msgid "http://wordpress.org/"
+msgstr "http://wordpress.org/"
+
+#: functions.php:113
+msgid "Footer"
+msgstr "Subsol"
+
+#: inc/wpcom-colors.php:465
+msgid "Burgundy on Banana"
+msgstr "Burgundy pe banan"
+
+#. Description of the plugin/theme
+#: wp-content/themes/pub/altofocus/style.css
+msgid "AltoFocus is a theme for photographers, artists, and other creative types in search of a simple and easy way to display their work."
+msgstr "AltoFocus este o temă pentru fotografi, artiști și alte tipuri de creatori în căutarea unui mod simplu și ușor de a-și afișa munca lor."
+
+#: search.php:18
+msgid "Search Results for: %s"
+msgstr "Rezultatele căutării pentru: %s"
+
+#: inc/wpcom-colors.php:460
+msgid "Salmon on Navy Blue"
+msgstr "Somon pe bleumarin"
+
+#: inc/wpcom-colors.php:455
+msgid "Purple on Tan"
+msgstr "Purpuriu pe cafeniu"
+
+#: inc/wpcom-colors.php:450
+msgid "Red on Black"
+msgstr "Roșu pe negru"
+
+#: inc/wpcom-colors.php:445
+msgid "Black on White"
+msgstr "Negru pe alb"
+
+#: inc/wpcom-colors.php:440
+msgid "Beige on Blue"
+msgstr "Bej pe albastru"
+
+#: inc/wpcom-colors.php:203
+msgid "Hover Color"
+msgstr "Culoare trece peste"
+
+#: inc/wpcom-colors.php:155 inc/wpcom-colors.php:165
+msgid "Category Color 1"
+msgstr "Culoare categorie 1"
+
+#: inc/wpcom-colors.php:145
+msgid "Link Color"
+msgstr "Culoare legătură"
+
+#: inc/wpcom-colors.php:68
+msgid "Background Color"
+msgstr "Culoare fundal"
+
+#. translators: used between list items, there is a space after the comma
+#: inc/template-tags.php:238
+msgid "Tags %1$s"
+msgstr "Etichete %1$s"
+
+#. translators: used between list items, there is a space after the comma
+#: inc/template-tags.php:231
+msgid "Categories %1$s"
+msgstr "Categorii %1$s"
+
+#: inc/template-tags.php:195
+msgctxt "post author"
+msgid "Written by %s"
+msgstr "Scris de %s"
+
+#: header.php:24
+msgid "Skip to content"
+msgstr "Sari la conținut"
+
+#: functions.php:268 single.php:21
+msgid "Previous"
+msgstr "Precedent"
+
+#: functions.php:267 single.php:22
+msgid "Next"
+msgstr "Următor"
+
+#: functions.php:262
+msgid "collapse child menu"
+msgstr "restrânge meniul copil"
+
+#: functions.php:261
+msgid "expand child menu"
+msgstr "extinde meniul copil"
+
+#. translators: To add an additional Karla SC character subset specific to your
+#. language, translate this to 'greek', 'cyrillic' or 'vietnamese'. Do not
+#. translate into your own language.
+#: functions.php:186
+msgctxt "Karla font: add new subset (greek, cyrillic, vietnamese)"
+msgid "no-subset"
+msgstr "no-subset"
+
+#. translators: If there are characters in your language that are not supported
+#. by Karla SC, translate this to 'off'. Do not translate into your own
+#. language.
+#: functions.php:179
+msgctxt "Karla font: on or off"
+msgid "on"
+msgstr "on"
+
+#. translators: To add an additional Libre Baskerville character subset
+#. specific to your language, translate this to 'greek', 'cyrillic' or
+#. 'vietnamese'. Do not translate into your own language.
+#: functions.php:144
+msgctxt "Libre Baskerville font: add new subset (greek, cyrillic, vietnamese)"
+msgid "no-subset"
+msgstr "no-subset"
+
+#. translators: If there are characters in your language that are not supported
+#. by Libre Baskerville, translate this to 'off'. Do not translate into your
+#. own language.
+#: functions.php:137
+msgctxt "Libre Baskerville font: on or off"
+msgid "on"
+msgstr "on"
+
+#: functions.php:51
+msgid "Top"
+msgstr "Sus"
+
+#: components/post/content-single.php:84
+msgid "%"
+msgstr "%"
+
+#: components/post/content-single.php:84
+msgid "1"
+msgstr "1"
+
+#: components/post/content-single.php:84
+msgid "0"
+msgstr "0"
+
+#: components/post/content-none.php:30
+msgid "It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help."
+msgstr "Se pare că nu putem găsi ceea ce cauți. Probabil o căutare poate ajuta."
+
+#: components/post/content-none.php:24
+msgid "Sorry, but nothing matched your search terms. Please try again with some different keywords."
+msgstr "Regret, dar nu s-a potrivit nimic cu criteriul tău de căutare. Te rog încearcă din nou cu alte cuvinte cheie."
+
+#: components/post/content-none.php:20
+msgid "Ready to publish your first post? <a href=\"%1$s\">Get started here</a>."
+msgstr "Gata să-ți publici primul articol? <a href=\"%1$s\">Începe de aici</a>."
+
+#: components/post/content-none.php:14
+msgid "Nothing Found"
+msgstr "N-am găsit nimic"
+
+#: components/page/content-page.php:32 components/post/content-single.php:100
+msgid "Pages:"
+msgstr "Pagini:"
+
+#. translators: %s: Name of current post
+#: components/page/content-page.php:19 components/post/content.php:43
+#: inc/template-tags.php:209
+msgid "Edit %s"
+msgstr "Editează %s"
+
+#: components/navigation/navigation-top.php:14
+msgid "Menu"
+msgstr "Meniu"
+
+#: components/footer/site-info.php:5
+msgid "Theme: %1$s by %2$s."
+msgstr "Temă: %1$s de %2$s."
+
+#: components/footer/site-info.php:3
+msgid "Proudly powered by %s"
+msgstr "Propulsat cu mândrie de %s"
+
+#: comments.php:62
+msgid "Comments are closed."
+msgstr "Comentariile sunt închise"
+
+#: comments.php:51
+msgid "Newer Comments"
+msgstr "Comentarii mai noi"
+
+#: comments.php:50
+msgid "Older Comments"
+msgstr "Comentarii mai vechi"
+
+#: comments.php:47
+msgid "Comment navigation"
+msgstr "Navigare în comentariu"
+
+#: comments.php:31
+msgctxt "comments title"
+msgid "One Comment"
+msgid_plural "%1$s Comments"
+msgstr[0] "Un comentariu"
+msgstr[1] "%1$s comentarii"
+msgstr[2] "%1$s de comentarii"
+
+#: 404.php:19
+msgid "It looks like nothing was found at this location. Maybe try one of the links below or a search?"
+msgstr "Se pare că nu a fost găsit nimic la această locație. Poate încerci una din legăturile de mai jos sau o căutare?"
+
+#: 404.php:16
+msgid "Oops! That page can&rsquo;t be found."
+msgstr "Hopa! Acea pagină nu poate fi găsită"

altofocus/page.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * The template for displaying all pages.
+ *
+ * This is the template that displays all pages by default.
+ * Please note that this is the WordPress construct of pages
+ * and that other 'pages' on your WordPress site may use a
+ * different template.
+ *
+ * @link https://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package AltoFocus
+ */
+
+get_header(); ?>
+
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main" role="main">
+
+			<?php
+			while ( have_posts() ) : the_post();
+
+				get_template_part( 'components/page/content', 'page' );
+
+				// If comments are open or we have at least one comment, load up the comment template.
+				if ( comments_open() || get_comments_number() ) :
+
+					comments_template();
+				endif;
+
+			endwhile; // End of the loop.
+			?>
+
+		</main>
+	</div>
+<?php
+get_footer();

altofocus/readme.txt

@@ -0,0 +1,36 @@
+=== AltoFocus ===
+
+Contributors: automattic
+Tags: responsive-layout, one-column, two-columns, three-columns, custom-background, custom-colors, custom-menu, featured-images, theme-options, threaded-comments, translation-ready
+
+Requires at least: 4.0
+Tested up to: 4.7
+Stable tag: 1.0.0
+License: GPLv2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+== Description ==
+
+AltoFocus is a theme for photographers, artists, and other creative types in search of a simple and easy way to display their work.
+
+== Installation ==
+
+1. In your admin panel, go to Appearance > Themes and click the Add New button.
+2. Click Upload and Choose File, then select the theme's .zip file. Click Install Now.
+3. Click Activate to use your new theme right away.
+
+== Frequently Asked Questions ==
+
+= Does this theme support any plugins? =
+
+AltoFocus includes support for Jetpack's Infinite Scroll as well as other features.
+
+== Changelog ==
+
+= 1.0 - Apr 20 2017 =
+* Initial release
+
+== Credits ==
+
+* Based on https://github.com/Automattic/theme-components/, (C) 2015-2016 Automattic, Inc., [GPLv2 or later](https://www.gnu.org/licenses/gpl-2.0.html)
+* normalize.css http://necolas.github.io/normalize.css/, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, [MIT](http://opensource.org/licenses/MIT)

altofocus/rtl.css

@@ -0,0 +1,1592 @@
+/*
+Theme Name: AltoFocus
+
+Adding support for language written in a Right To Left (RTL) direction is easy -
+it's just a matter of overwriting all the horizontal positioning attributes
+of your CSS stylesheet in a separate stylesheet file named rtl.css.
+
+https://codex.wordpress.org/Right_to_Left_Languagecomponentsupport
+
+*/
+
+/*--------------------------------------------------------------
+>>> TABLE OF CONTENTS:
+----------------------------------------------------------------
+# Variables & Mixins
+# Normalize
+# Accessibility
+# Alignments
+# Clearings
+# Typography
+# Forms
+# Buttons
+# Formatting
+# Lists
+# Tables
+# Navigation
+# Links
+# Layout
+	## Posts
+	## Pages
+# Comments
+# Widgets
+# Infinite scroll
+# Media
+	## Galleries
+# Components
+# Plugins
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Variables & Mixins
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## Color Variables */
+/*--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## Typographic Variables */
+/*--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## Global Structure */
+/*--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## Typographic Mixins */
+/*--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Animations
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## Animations */
+/*--------------------------------------------------------------*/
+@-webkit-keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  50% {
+    -webkit-transform: scaleY(1.1);
+    -moz-transform: scaleY(1.1);
+    -ms-transform: scaleY(1.1);
+    -o-transform: scaleY(1.1);
+    transform: scaleY(1.1);
+  }
+}
+
+@-moz-keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  50% {
+    -webkit-transform: scaleY(1.1);
+    -moz-transform: scaleY(1.1);
+    -ms-transform: scaleY(1.1);
+    -o-transform: scaleY(1.1);
+    transform: scaleY(1.1);
+  }
+}
+
+@-o-keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  50% {
+    -webkit-transform: scaleY(1.1);
+    -moz-transform: scaleY(1.1);
+    -ms-transform: scaleY(1.1);
+    -o-transform: scaleY(1.1);
+    transform: scaleY(1.1);
+  }
+}
+
+@keyframes bounce-reveal-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  50% {
+    -webkit-transform: scaleY(1.1);
+    -moz-transform: scaleY(1.1);
+    -ms-transform: scaleY(1.1);
+    -o-transform: scaleY(1.1);
+    transform: scaleY(1.1);
+  }
+}
+
+@-webkit-keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  50% {
+    -webkit-transform: scaleY(0.9);
+    -moz-transform: scaleY(0.9);
+    -ms-transform: scaleY(0.9);
+    -o-transform: scaleY(0.9);
+    transform: scaleY(0.9);
+  }
+}
+
+@-moz-keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  50% {
+    -webkit-transform: scaleY(0.9);
+    -moz-transform: scaleY(0.9);
+    -ms-transform: scaleY(0.9);
+    -o-transform: scaleY(0.9);
+    transform: scaleY(0.9);
+  }
+}
+
+@-o-keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  50% {
+    -webkit-transform: scaleY(0.9);
+    -moz-transform: scaleY(0.9);
+    -ms-transform: scaleY(0.9);
+    -o-transform: scaleY(0.9);
+    transform: scaleY(0.9);
+  }
+}
+
+@keyframes bounce-hide-y {
+  0%,
+  100% {
+    -webkit-transform: scaleY(1);
+    -moz-transform: scaleY(1);
+    -ms-transform: scaleY(1);
+    -o-transform: scaleY(1);
+    transform: scaleY(1);
+  }
+  50% {
+    -webkit-transform: scaleY(0.9);
+    -moz-transform: scaleY(0.9);
+    -ms-transform: scaleY(0.9);
+    -o-transform: scaleY(0.9);
+    transform: scaleY(0.9);
+  }
+}
+
+@-webkit-keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  33% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  66% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+}
+
+@-moz-keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  33% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  66% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+}
+
+@-o-keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  33% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  66% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+}
+
+@keyframes bounce-reveal {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  33% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  66% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+}
+
+@-webkit-keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0);
+  }
+  33% {
+    -webkit-transform: translateX(-10px);
+    -moz-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    -o-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+  66% {
+    -webkit-transform: translateX(3px);
+    -moz-transform: translateX(3px);
+    -ms-transform: translateX(3px);
+    -o-transform: translateX(3px);
+    transform: translateX(3px);
+  }
+}
+
+@-moz-keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0);
+  }
+  33% {
+    -webkit-transform: translateX(-10px);
+    -moz-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    -o-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+  66% {
+    -webkit-transform: translateX(3px);
+    -moz-transform: translateX(3px);
+    -ms-transform: translateX(3px);
+    -o-transform: translateX(3px);
+    transform: translateX(3px);
+  }
+}
+
+@-o-keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0);
+  }
+  33% {
+    -webkit-transform: translateX(-10px);
+    -moz-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    -o-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+  66% {
+    -webkit-transform: translateX(3px);
+    -moz-transform: translateX(3px);
+    -ms-transform: translateX(3px);
+    -o-transform: translateX(3px);
+    transform: translateX(3px);
+  }
+}
+
+@keyframes bounce-left {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0);
+  }
+  33% {
+    -webkit-transform: translateX(-10px);
+    -moz-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    -o-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+  66% {
+    -webkit-transform: translateX(3px);
+    -moz-transform: translateX(3px);
+    -ms-transform: translateX(3px);
+    -o-transform: translateX(3px);
+    transform: translateX(3px);
+  }
+}
+
+@-webkit-keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: translateX(1);
+    -moz-transform: translateX(1);
+    -ms-transform: translateX(1);
+    -o-transform: translateX(1);
+    transform: translateX(1);
+  }
+  33% {
+    -webkit-transform: translateX(10px);
+    -moz-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    -o-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+  66% {
+    -webkit-transform: translateX(-3px);
+    -moz-transform: translateX(-3px);
+    -ms-transform: translateX(-3px);
+    -o-transform: translateX(-3px);
+    transform: translateX(-3px);
+  }
+}
+
+@-moz-keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: translateX(1);
+    -moz-transform: translateX(1);
+    -ms-transform: translateX(1);
+    -o-transform: translateX(1);
+    transform: translateX(1);
+  }
+  33% {
+    -webkit-transform: translateX(10px);
+    -moz-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    -o-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+  66% {
+    -webkit-transform: translateX(-3px);
+    -moz-transform: translateX(-3px);
+    -ms-transform: translateX(-3px);
+    -o-transform: translateX(-3px);
+    transform: translateX(-3px);
+  }
+}
+
+@-o-keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: translateX(1);
+    -moz-transform: translateX(1);
+    -ms-transform: translateX(1);
+    -o-transform: translateX(1);
+    transform: translateX(1);
+  }
+  33% {
+    -webkit-transform: translateX(10px);
+    -moz-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    -o-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+  66% {
+    -webkit-transform: translateX(-3px);
+    -moz-transform: translateX(-3px);
+    -ms-transform: translateX(-3px);
+    -o-transform: translateX(-3px);
+    transform: translateX(-3px);
+  }
+}
+
+@keyframes bounce-right {
+  0%,
+  100% {
+    -webkit-transform: translateX(1);
+    -moz-transform: translateX(1);
+    -ms-transform: translateX(1);
+    -o-transform: translateX(1);
+    transform: translateX(1);
+  }
+  33% {
+    -webkit-transform: translateX(10px);
+    -moz-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    -o-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+  66% {
+    -webkit-transform: translateX(-3px);
+    -moz-transform: translateX(-3px);
+    -ms-transform: translateX(-3px);
+    -o-transform: translateX(-3px);
+    transform: translateX(-3px);
+  }
+}
+
+@-webkit-keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  33% {
+    -webkit-transform: scale(1.25);
+    -moz-transform: scale(1.25);
+    -ms-transform: scale(1.25);
+    -o-transform: scale(1.25);
+    transform: scale(1.25);
+  }
+  66% {
+    -webkit-transform: scale(0.85);
+    -moz-transform: scale(0.85);
+    -ms-transform: scale(0.85);
+    -o-transform: scale(0.85);
+    transform: scale(0.85);
+  }
+}
+
+@-moz-keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  33% {
+    -webkit-transform: scale(1.25);
+    -moz-transform: scale(1.25);
+    -ms-transform: scale(1.25);
+    -o-transform: scale(1.25);
+    transform: scale(1.25);
+  }
+  66% {
+    -webkit-transform: scale(0.85);
+    -moz-transform: scale(0.85);
+    -ms-transform: scale(0.85);
+    -o-transform: scale(0.85);
+    transform: scale(0.85);
+  }
+}
+
+@-o-keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  33% {
+    -webkit-transform: scale(1.25);
+    -moz-transform: scale(1.25);
+    -ms-transform: scale(1.25);
+    -o-transform: scale(1.25);
+    transform: scale(1.25);
+  }
+  66% {
+    -webkit-transform: scale(0.85);
+    -moz-transform: scale(0.85);
+    -ms-transform: scale(0.85);
+    -o-transform: scale(0.85);
+    transform: scale(0.85);
+  }
+}
+
+@keyframes bounce-reveal-large {
+  0%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  33% {
+    -webkit-transform: scale(1.25);
+    -moz-transform: scale(1.25);
+    -ms-transform: scale(1.25);
+    -o-transform: scale(1.25);
+    transform: scale(1.25);
+  }
+  66% {
+    -webkit-transform: scale(0.85);
+    -moz-transform: scale(0.85);
+    -ms-transform: scale(0.85);
+    -o-transform: scale(0.85);
+    transform: scale(0.85);
+  }
+}
+
+@-webkit-keyframes bounce-zoom {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  25% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  75% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+  100% {
+    -webkit-transform: scale(1.125);
+    -moz-transform: scale(1.125);
+    -ms-transform: scale(1.125);
+    -o-transform: scale(1.125);
+    transform: scale(1.125);
+  }
+}
+
+@-moz-keyframes bounce-zoom {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  25% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  75% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+  100% {
+    -webkit-transform: scale(1.125);
+    -moz-transform: scale(1.125);
+    -ms-transform: scale(1.125);
+    -o-transform: scale(1.125);
+    transform: scale(1.125);
+  }
+}
+
+@-o-keyframes bounce-zoom {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  25% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  75% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+  100% {
+    -webkit-transform: scale(1.125);
+    -moz-transform: scale(1.125);
+    -ms-transform: scale(1.125);
+    -o-transform: scale(1.125);
+    transform: scale(1.125);
+  }
+}
+
+@keyframes bounce-zoom {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  25% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  75% {
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+  100% {
+    -webkit-transform: scale(1.125);
+    -moz-transform: scale(1.125);
+    -ms-transform: scale(1.125);
+    -o-transform: scale(1.125);
+    transform: scale(1.125);
+  }
+}
+
+/*--------------------------------------------------------------
+# UI
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## UI Mixins */
+/*--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Breakpoints
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## Breakpoint Mixins */
+/*--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Normalize
+--------------------------------------------------------------*/
+
+body {
+  direction: rtl;
+  unicode-bidi: embed;
+}
+
+/*--------------------------------------------------------------
+# Accessibility
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Alignments
+--------------------------------------------------------------*/
+
+.alignleft {
+  display: inline;
+  float: right;
+  margin-left: 1.5em;
+  margin-right: inherit;
+}
+
+.alignright {
+  display: inline;
+  float: left;
+  margin-left: inherit;
+  margin-right: 1.5em;
+}
+
+/*--------------------------------------------------------------
+# Clearings
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Forms
+--------------------------------------------------------------*/
+
+textarea {
+  padding-left: inherit;
+  padding-right: 3px;
+}
+
+/*--------------------------------------------------------------
+# Buttons
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Formattings
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Lists
+--------------------------------------------------------------*/
+
+ul, ol {
+  margin: 0 25px 1.5em 0;
+}
+
+li > ul,
+li > ol {
+  margin-bottom: 0;
+  margin-left: inherit;
+  margin-right: 1.5em;
+}
+
+/*--------------------------------------------------------------
+# Tables
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Navigation
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## Top Navigation */
+/*--------------------------------------------------------------*/
+
+.top-navigation {
+  text-align: right;
+  align-self: flex-start;
+}
+
+.top-navigation .col-width {
+  width: 100%;
+}
+
+.top-navigation > div {
+  float: left;
+}
+
+.top-navigation > div > ul {
+  text-align: right;
+}
+
+.top-navigation .sub-menu li > a,
+.top-navigation .children li > a {
+  margin-left: inherit;
+  padding-left: inherit;
+  margin-right: 28px;
+  padding-right: 0;
+}
+
+.top-navigation .sub-menu li > a:after,
+.top-navigation .children li > a:after {
+  left: inherit;
+  right: -15px;
+}
+
+/*
+ * Menu Toggle
+ */
+.menu-toggle {
+  text-align: right;
+}
+
+.menu-toggle:before {
+  margin-left: 5px;
+  margin-right: inherit;
+}
+
+/*--------------------------------------------------------------*/
+/* !## Mobile and Down Navigation */
+/*--------------------------------------------------------------*/
+
+@media screen and (max-width: 37.5em) {
+  /*
+	 * Top Navigation
+	 */
+  .top-navigation {
+    text-align: left;
+  }
+  .top-navigation .sub-menu,
+  .top-navigation .children {
+    padding-left: inherit;
+    padding-right: 15px;
+  }
+  .top-navigation .sub-menu:before, .top-navigation .sub-menu:before,
+  .top-navigation .children:before,
+  .top-navigation .children:before {
+    right: 0;
+    left: inherit;
+  }
+  .top-navigation li:after {
+    left: inherit;
+    right: 0;
+  }
+  .top-navigation li.menu-item-has-children > a {
+    padding-left: 43.75px;
+    padding-right: inherit;
+  }
+  /*
+	 * Dropdown toggle buttons
+	 */
+  .dropdown-toggle {
+    left: 5px;
+    right: inherit;
+  }
+  /*
+	 * Menu Toggle
+	 */
+  .menu-toggle {
+    left: 10px;
+    right: inherit;
+  }
+}
+
+/*--------------------------------------------------------------*/
+/* !## Phablet and Up Navigation */
+/*--------------------------------------------------------------*/
+@media screen and (min-width: 37.5em) {
+  /*
+	 * Top Navigation
+	 */
+  .top-navigation {
+    clear: left;
+    float: left;
+  }
+  .top-navigation div > ul {
+    text-align: right;
+  }
+  .top-navigation div > ul > li a {
+    text-align: right;
+  }
+  .top-navigation div > ul > li.menu-item-has-children {
+    margin-left: inherit;
+    margin-right: -20px;
+  }
+  .top-navigation div > ul > li.menu-item-has-children > a {
+    margin-left: inherit;
+    padding-left: inherit;
+    margin-right: 28px;
+    padding-right: 0;
+  }
+  .top-navigation .sub-menu .sub-menu,
+  .top-navigation .sub-menu .children,
+  .top-navigation .children .sub-menu,
+  .top-navigation .children .children {
+    padding-left: inherit;
+    padding-right: 15px;
+  }
+  /*
+	 * Dropdown toggle buttons
+	 */
+  .dropdown-toggle {
+    float: right;
+    left: inherit;
+    right: 5px;
+  }
+}
+
+/*--------------------------------------------------------------*/
+/* !## Footer Social Menu */
+/*--------------------------------------------------------------*/
+
+.site-footer .jetpack-social-navigation li a {
+  padding: 0 0 0 10px;
+}
+
+/*--------------------------------------------------------------*/
+/* !## Fixed Post Navigation */
+/*--------------------------------------------------------------*/
+
+@media screen and (min-width: 75em) {
+
+  .post-navigation-fixed .nav-links .nav-previous,
+  .post-navigation-fixed .nav-links .nav-next {
+    float: right;
+    margin-left: inherit;
+    margin-right: 25px;
+    right: 0;
+  }
+  .post-navigation-fixed .nav-links .nav-next {
+    float: left;
+    margin-right: inherit;
+    margin-left: 25px;
+  }
+  .post-navigation-fixed .nav-links a .meta-nav {
+    margin-left: inherit;
+    margin-right: -5px;
+  }
+  .post-navigation-fixed .nav-links .nav-next a .meta-nav {
+    margin-left: inherit;
+    margin-right: -3px;
+  }
+}
+
+.comment-navigation .screen-reader-text,
+.posts-navigation .screen-reader-text,
+.post-navigation .screen-reader-text {
+  left: inherit;
+  right: inherit;
+}
+
+.comment-navigation .nav-previous,
+.posts-navigation .nav-previous,
+.post-navigation .nav-previous {
+  float: right;
+}
+
+.comment-navigation .nav-next,
+.posts-navigation .nav-next,
+.post-navigation .nav-next {
+  float: left;
+}
+
+.post-navigation-fixed .nav-links a .meta-nav {
+  -webkit-transform: rotate(180deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
+      -ms-transform: rotate(180deg); /* IE 9 */
+          transform: rotate(180deg); /* IE 10, Fx 16+, Op 12.1+ */
+}
+
+
+/*--------------------------------------------------------------
+# Links
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Layout
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+## Content
+--------------------------------------------------------------*/
+
+.content-area {
+  float: right;
+}
+
+/*--------------------------------------------------------------
+## Isotope Grid
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+## Sidebars
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+## Responsive Layout Styles
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Comments
+--------------------------------------------------------------*/
+
+.comment-body .reply {
+  text-align: right;
+}
+
+.comment-body .comment-metadata {
+  padding: 0 12.5px 0 0;
+  text-align: left;
+}
+
+.comment-body .avatar {
+  margin-left: 12.5px;
+  margin-right: inherit;
+}
+
+.comment-list #respond, .comment-list
+.comment-respond {
+  margin-left: inherit;
+  margin-right: 0;
+}
+
+@media screen and (min-width: 50em) {
+  .comments-title {
+    padding: 2.25em 12.5px 2.25em 5px;
+  }
+  .comment-body {
+    margin-left: inherit;
+    margin-right: calc((100% / 8) * 2);
+  }
+  .comment .children {
+    margin-left: inherit;
+    margin-right: 5%;
+  }
+  .page .site-content .comments-area:before {
+    left: inherit;
+    right: 0;
+  }
+  .no-comments {
+    margin-left: inherit;
+    margin-right: 25%;
+  }
+}
+
+@media screen and (min-width: 75em) {
+  .comments-title {
+    padding: 2.25em 12.5px 2.25em 69px;
+  }
+  .comment-body {
+    margin-left: inherit;
+    margin-right: calc((100% / 8) * 2);
+  }
+  .comment-body .avatar {
+    margin-right: inherit;
+    right: inherit;
+    margin-left: 0;
+    left: calc( 100% + 5px);
+  }
+}
+
+/*--------------------------------------------------------------
+# Widgets / Sidebar
+--------------------------------------------------------------*/
+
+.widget > *:not(.widget-title) {
+  float: right;
+}
+
+#secondary .widget_rss li cite {
+  margin-left: 25px;
+  margin-right: inherit;
+}
+
+#secondary .widget_search .screen-reader-text {
+  float: right;
+}
+
+#secondary .widget_search .search-field {
+  float: right;
+}
+
+@media screen and (min-width: 50em) {
+  .widget-title {
+    float: right;
+  }
+  #secondary .widget_calendar .calendar_wrap {
+	margin-left: inherit;
+    margin-right: calc( 25%);
+  }
+  #secondary .widget_calendar .widget-title {
+    margin-left: -25%;
+    margin-right: inherit;
+  }
+  #secondary .widget_calendar .widget-title + .calendar_wrap {
+    margin-left: inherit;
+    margin-right: calc( 25%);
+  }
+  #secondary .widget_calendar table {
+    text-align: right;
+  }
+  #secondary .widget_calendar caption {
+    text-align: right;
+  }
+  #secondary .widget_search .screen-reader-text {
+    float: right;
+    left: inherit;
+    right: inherit;
+  }
+  #secondary .widget_search .search-submit {
+    margin-left: inherit;
+    margin-right: 27%;
+  }
+  #secondary .widget_nav_menu > * {
+    float: left;
+  }
+}
+
+/*--------------------------------------------------------------
+# Infinite scroll
+--------------------------------------------------------------*/
+
+.infinite-loader .spinner[style] {
+  left: inherit !important;
+  right: inherit !important;
+}
+
+/*--------------------------------------------------------------
+# Media
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+## Galleries
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Components
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Header
+--------------------------------------------------------------*/
+
+.site-identity {
+  padding-left: 37.5px;
+  padding-right: inherit;
+}
+
+@media screen and (max-width: 37.5em) {
+  .site-branding {
+    text-align: right;
+  }
+  .site-branding .site-identity {
+    padding-left: 100px;
+    padding-right: inherit;
+  }
+}
+
+@media screen and (min-width: 37.5em) {
+  .site-branding {
+    left: inherit;
+    padding: 0 0 0 30%;
+    right: 0;
+  }
+}
+
+/*--------------------------------------------------------------
+# Posts
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## Archives */
+/*--------------------------------------------------------------*/
+
+.hfeed .hentry:before {
+  left: inherit;
+  right: 0;
+}
+
+.hfeed .hentry:before {
+  left: inherit;
+  right: -12.5px;
+}
+
+.hfeed .has-isotope #infinite-handle,
+.hfeed .has-isotope .infinite-loader {
+  margin-left: auto;
+  margin-right: inherit;
+}
+
+.hfeed .search-form .screen-reader-text {
+  float: right;
+}
+
+.hfeed .search-form .search-field {
+  float: right;
+}
+
+@media screen and (min-width: 37.5em) {
+  .hfeed .site-main .hentry {
+    float: right;
+  }
+  .hfeed .hentry {
+    float: right;
+  }
+  .hfeed .post-thumbnail:after {
+    left: inherit;
+    right: 18.75px;
+  }
+  .hfeed .entry-header {
+    left: inherit;
+    right: 18.75px;
+  }
+  .hfeed .edit-link {
+    left: inherit;
+    right: 50%;
+    transform: translate(50%, 0);
+  }
+}
+
+@media screen and (min-width: 50em) {
+  .hfeed .post-thumbnail:after {
+    left: inherit;
+    right: 25px;
+  }
+  .hfeed .entry-header {
+    left: inherit;
+    right: 25px;
+  }
+}
+
+@media screen and (min-width: 60em) {
+  .hfeed .post-thumbnail:after {
+    left: inherit;
+    right: 37.5px;
+  }
+  .hfeed .entry-header {
+    left: inherit;
+    right: 37.5px;
+  }
+  .hfeed:not(.home):not(.blog) .site-main {
+    margin-left: 37.5px;
+    margin-right: auto;
+  }
+  .hfeed:not(.home):not(.blog) .site-main .not-found .page-header {
+    left: inherit;
+  }
+  .hfeed:not(.home):not(.blog) .site-main #infinite-handle,
+  .hfeed:not(.home):not(.blog) .site-main .infinite-loader {
+    left: calc( 10% + 37.5px);
+    right: inherit;
+  }
+  .hfeed .content-area .page-header {
+    left: inherit;
+    right: 62.5px;
+  }
+  .hfeed .content-area .page-header.sticky {
+    right: inherit;
+    left: calc( 80%);
+  }
+}
+
+/*--------------------------------------------------------------*/
+/* !## Posts */
+/*--------------------------------------------------------------*/
+
+.comments-link:before {
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: #111111 ;
+  border-left-color: #111111 ;
+  box-shadow: -1px 3px 4px rgba(0, 0, 0, 0.25);
+  left: inherit;
+  right: 32px;
+}
+
+.comments-link:after {
+  border: 10px solid;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: #fff;
+  border-left-color: #fff;
+  left: inherit;
+  right: 31px;
+}
+
+.entry-footer > * {
+  margin-left: 25px;
+  margin-right: inherit;
+}
+
+.entry-footer > *:last-child {
+  margin-left: 0;
+  margin-right: inherit;
+}
+
+.entry-footer .comments-link {
+  margin-left: calc((100% / 8) * 1);
+  margin-right: inherit;
+}
+
+/*--------------------------------------------------------------*/
+/* !## Single Posts */
+/*--------------------------------------------------------------*/
+
+.single .hentry .entry-title {
+  float: right;
+}
+
+.single .hentry .entry-meta {
+  padding-left: inherit;
+  padding-right: 12.5px;
+  float: right;
+}
+
+.single .hentry .comments-link {
+  float: right;
+  margin-left: inherit;
+  margin-right: 12.5px;
+}
+
+.single .hentry:not(.has-post-thumbnail):before {
+  left: inherit;
+  right: 0;
+}
+
+.single .hentry:not(.has-post-thumbnail):before {
+  margin-left: inherit;
+  margin-right: -50%;
+}
+
+@media screen and (min-width: 37.5em) {
+  .single .entry-media:after {
+    left: inherit;
+    right: 0;
+  }
+  .single .gallery-item .image-caption {
+    left: inherit;
+    right: 50%;
+    transform: translate3d(50%, 10px, 0);
+  }
+  .single .gallery-item:hover .image-caption {
+    transform: translate3d(50%, -1.5em, 0);
+  }
+}
+
+@media screen and (min-width: 50em) {
+  .single .hentry .entry-title {
+    float: right;
+  }
+  .single .hentry .entry-meta {
+    float: left;
+  }
+  .single .hentry .comments-link {
+    left: calc(100% + 12.5px);
+    margin-left: inherit;
+    margin-right: 0;
+	right: inherit;
+  }
+  .single .hentry .entry-content {
+    float: right;
+  }
+  .single .hentry .entry-footer {
+    float: left;
+    margin-left: -10%;
+    margin-right: inherit;
+  }
+}
+
+/*--------------------------------------------------------------
+# Pages
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## Single Page */
+/*--------------------------------------------------------------*/
+
+.page .hentry.page:before {
+  left: inherit;
+  right: 0;
+}
+
+.page .hentry.page:before {
+  margin-left: inherit;
+  margin-right: -50%;
+}
+
+@media screen and (min-width: 50em) {
+  .page .hentry.page .entry-title {
+    float: right;
+  }
+  .page .hentry.page .entry-meta {
+    float: left;
+  }
+}
+
+/*--------------------------------------------------------------*/
+/* !## Static Front Page */
+/*--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# Footer
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------*/
+/* !## Site Footer */
+/*--------------------------------------------------------------*/
+
+@media screen and (min-width: 50em) {
+  .site-info {
+    clear: right;
+    float: right;
+  }
+  .site-footer .jetpack-social-navigation {
+    clear: left;
+    float: left;
+  }
+  .site-footer .jetpack-social-navigation ul {
+    text-align: left;
+  }
+}
+
+/*--------------------------------------------------------------
+# Plugins
+--------------------------------------------------------------*/
+/*
+ * jQuery FlexSlider v2.6.1
+ * http://www.woothemes.com/flexslider/
+ *
+ * Copyright 2012 WooThemes
+ * Free to use under the GPLv2 and later license.
+ * http://www.gnu.org/licenses/gpl-2.0.html
+ *
+ * Contributing author: Tyler Smith (@mbmufffin)
+ *
+ */
+
+/* ====================================================================================================================
+ * RESETS
+ * ====================================================================================================================*/
+
+/* ====================================================================================================================
+ * BASE STYLES
+ * ====================================================================================================================*/
+
+/* ====================================================================================================================
+ * DEFAULT THEME
+ * ====================================================================================================================*/
+
+.carousel li {
+  margin-left: 5px;
+  margin-right: inherit;
+}
+
+/*
+.flex-direction-nav .flex-prev {
+  left: inherit;
+  right: 0;
+}
+
+.flex-direction-nav .flex-next {
+  left: 0;
+  right: inherit;
+}
+*/
+
+.flex-pauseplay a {
+  left: inherit;
+  right: 10px;
+}
+
+.flex-control-thumbs li {
+  float: right;
+}
+
+/**
+ * Tablet and Down
+ */
+/*
+@media screen and (max-width: 50em) {
+
+  .flex-direction-nav .flex-prev {
+    left: inherit;
+    right: 10px;
+  }
+  .flex-direction-nav .flex-next {
+    left: 10px;
+    right: inherit;
+  }
+}
+*/
+
+/**
+ * Tablet and Up
+ */
+/*
+@media screen and (min-width: 50em) {
+  .entry-media .flex-direction-nav .flex-prev {
+    left: inherit;
+    right: -50px;
+  }
+  .entry-media .flex-direction-nav .flex-next {
+    left: -50px;
+    right: inherit;
+  }
+}
+*/
+
+/*--------------------------------------------------------------*/
+/* !## Postflair / Sharedaddy */
+/*--------------------------------------------------------------*/
+
+.hentry .entry-content > #jp-post-flair .sd-title,
+.hentry .entry-content > .sd-sharing-enabled .sd-title {
+  margin-left: 25px;
+  margin-right: inherit;
+}
+
+.hentry .entry-content > #jp-post-flair .jp-relatedposts-headline,
+.hentry .entry-content > .sd-sharing-enabled .jp-relatedposts-headline {
+  margin-left: 25px;
+  margin-right: inherit;
+}
+
+@media screen and (max-width: 37.5em) {
+  .hentry .entry-content > #jp-post-flair .sd-title,
+  .hentry .entry-content > .sd-sharing-enabled .sd-title {
+    margin-left: 0;
+    margin-right: inherit;
+  }
+}

altofocus/search.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * The template for displaying search results pages.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
+ *
+ * @package AltoFocus
+ */
+
+get_header(); ?>
+
+	<div id="primary" class="content-area">
+
+	<?php
+		if ( have_posts() ) : ?>
+
+		<header class="page-header">
+			<h1 class="page-title"><?php printf( esc_html__( 'Search Results for: %s', 'altofocus' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
+		</header>
+
+		<main id="main" class="site-main" role="main">
+
+			<?php
+			/* Start the Loop */
+			while ( have_posts() ) : the_post();
+
+				/**
+				 * Run the loop for the search to output the results.
+				 * If you want to overload this in a child theme then include a file
+				 * called content-search.php and that will be used instead.
+				 */
+				get_template_part( 'components/post/content', get_post_format() );
+
+			endwhile;
+
+			the_posts_navigation(); ?>
+
+		</main>
+
+		<?php else : ?>
+
+		<main id="main" class="site-main" role="main">
+
+			<?php get_template_part( 'components/post/content', 'none' ); ?>
+
+		</main>
+
+		<?php endif; ?>
+
+	</div>
+<?php
+get_footer();

altofocus/sidebar.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * The sidebar containing the main widget area.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package AltoFocus
+ */
+
+if ( ! is_active_sidebar( 'sidebar-1' ) ) {
+	return;
+}
+?>
+
+<aside id="secondary" class="widget-area" role="complementary">
+	<div class="widget-area-wrap">
+		<?php dynamic_sidebar( 'sidebar-1' ); ?>
+	</div>
+</aside>

altofocus/single.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * The template for displaying all single posts.
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
+ *
+ * @package AltoFocus
+ */
+
+get_header(); ?>
+
+	<div id="primary" class="content-area">
+		<main id="main" class="site-main" role="main">
+
+		<?php
+		while ( have_posts() ) : the_post();
+
+			get_template_part( 'components/post/content', 'single' );
+
+			the_post_navigation( array(
+				'prev_text' => '%title <span class="meta-nav" aria-hidden="true">' . esc_html__( 'Previous', 'altofocus' ) . '</span>',
+				'next_text' => '%title <span class="meta-nav" aria-hidden="true">' . esc_html__( 'Next', 'altofocus' ) . '</span>'
+			) );
+
+			// If comments are open or we have at least one comment, load up the comment template.
+			if ( comments_open() || get_comments_number() ) :
+				comments_template();
+			endif;
+
+		endwhile; // End of the loop.
+		?>
+
+		</main>
+	</div>
+<?php
+get_sidebar();
+get_footer();