/* Define constants for the application and to configure the blueprint framework. */
/* ===== Compass Imports ===== */
/* DO NOT include Blueprint here. We are using Susy for the grid, and if Blueprint is here, it will mess things up */
/* @import "compass/css3/columns" */
/* @import "compass/css3/hyphenation"; */
/* Needed for the link-colors() function */
/* Needed for the horizontal-list() function */
/* When remembering whether or not there's a hyphen in white-space is too hard */
/* Use pie-clearfix when there is no width set ont the element to avoid edge cases */
/* Use to calculate color legibility: http://compass-style.org/reference/compass/utilities/color/contrast/ */
/* Other interesting functions: 
	@import "compass/utilities/color/contrast";
		detailed here: http://compass-style.org/reference/compass/utilities/color/contrast/
		Used to pass two colors into a get out the most readable color. 
		Good for situations where we dont want to create a new color, 
		but be sure that colors from variables are always going to be readable
*/
/* ===== Grid ===== */
/* Susy: Un-obtrusive grids for designers By: Eric A. Meyer and OddBird Site: susy.oddbird.net */
/* Settings  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that on or off.  We are using Susy 1.0. Update your GEM file by deleting the old an downloading the new.  */
/* Important, needed for calculations */
/* Alternate grids 

$total-max-width: 980px;
$total-columns: 18; 
$column-width: 28px;
$gutter-width: 24px;
$grid-padding: $gutter-width;
$container-style: fluid; 

$total-max-width: 980px;
$total-columns: 16; 
$column-width: 40px;
$gutter-width: 20px;
$grid-padding: $gutter-width;
$container-style: fluid; 

*/
/* ===== Variables ===== */
/* Colors */
/* Confusing, but in some cases, this can be set to a dark color */
/* RevSys Colors */
/* Typography */
/* True here means that all computed values will be in EMs */
/* Allows the adjust-font-size-to and lines-for-font-size mixins to round to the nearest half line height to avoid large spacing between lines. */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Sizes */
/* 
	Compass will convert the font sizes from px to em and fit it into the vertical rhythm automatically with the necessary margin 
	A neat trick, for sure. More on using the vertical rhythm properties and mixins: http://compass-style.org/reference/compass/typography/vertical_rhythm/
	
	Note: The line height is relative to the constant $base-line-height. 
	The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems. 
	Don’t worry about nested elements etc, Compass will do the maths for you :)
*/
/* Defaults */
/* Positive is down */
/* Define constants for the application and to configure the blueprint framework. */
/* ===== Compass Imports ===== */
/* DO NOT include Blueprint here. We are using Susy for the grid, and if Blueprint is here, it will mess things up */
/* @import "compass/css3/columns" */
/* @import "compass/css3/hyphenation"; */
/* Needed for the link-colors() function */
/* Needed for the horizontal-list() function */
/* When remembering whether or not there's a hyphen in white-space is too hard */
/* Use pie-clearfix when there is no width set ont the element to avoid edge cases */
/* Use to calculate color legibility: http://compass-style.org/reference/compass/utilities/color/contrast/ */
/* Other interesting functions: 
	@import "compass/utilities/color/contrast";
		detailed here: http://compass-style.org/reference/compass/utilities/color/contrast/
		Used to pass two colors into a get out the most readable color. 
		Good for situations where we dont want to create a new color, 
		but be sure that colors from variables are always going to be readable
*/
/* ===== Grid ===== */
/* Susy: Un-obtrusive grids for designers By: Eric A. Meyer and OddBird Site: susy.oddbird.net */
/* Settings  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that on or off.  We are using Susy 1.0. Update your GEM file by deleting the old an downloading the new.  */
/* Important, needed for calculations */
/* Alternate grids 

$total-max-width: 980px;
$total-columns: 18; 
$column-width: 28px;
$gutter-width: 24px;
$grid-padding: $gutter-width;
$container-style: fluid; 

$total-max-width: 980px;
$total-columns: 16; 
$column-width: 40px;
$gutter-width: 20px;
$grid-padding: $gutter-width;
$container-style: fluid; 

*/
/* ===== Variables ===== */
/* Colors */
/* Confusing, but in some cases, this can be set to a dark color */
/* RevSys Colors */
/* Typography */
/* True here means that all computed values will be in EMs */
/* Allows the adjust-font-size-to and lines-for-font-size mixins to round to the nearest half line height to avoid large spacing between lines. */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Sizes */
/* 
	Compass will convert the font sizes from px to em and fit it into the vertical rhythm automatically with the necessary margin 
	A neat trick, for sure. More on using the vertical rhythm properties and mixins: http://compass-style.org/reference/compass/typography/vertical_rhythm/
	
	Note: The line height is relative to the constant $base-line-height. 
	The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems. 
	Don’t worry about nested elements etc, Compass will do the maths for you :)
*/
/* Defaults */
/* Positive is down */
/* Functional mixins – Items we would like to keep consistent from project to project */
/* Turn numbers with units into unitless numbers: https://github.com/nex3/sass/issues/533 */
/* Shorthand for a set of useful text/line-height resizing functions. easier to remember... */
/* Easy little function to do the math of pixel to EM conversion for us. Needs a base-font-size set in _base.scss */
/*  Font-size-adjust: the problem and a solution Not widely supported, can't use this yet */
/* Since we can't use the above, let's create our own way to do it. */
/* Quickly apply border styles to elements */
/* Talk of depreciating the Compass mixin, so we pull it in here and make small adjustments */
/* Namespace the box-sizing mixin so we can add support for IE6/7 */
/* Vertical and Horizontal gradient mixins to make things easier. */
/*  Set all the up-and-coming input text types here for easier reference  Does not include types that are not meant to be displayed full width, such as:  type=number, type=range, type=date, type=color */
/*  Cross browser @keyframe definition set  Compass doesn't have one yet, so we namespace this so as not to conflict with a future release */
/*  Cross browser animation definition set  Compass doesn't have one yet, so we namespace this so as not to conflict with a future release  $timing: linear | ease | ease-in | ease-out | ease-in-out $delay: seconds before animation starts $count: how many times the animation will loop $direction: normal | alternate (Play even-numbered iterations of the animation in the forward direction and odd-numbered iterations in the reverse direction.) $fill-mode: none | forwards | backwards | both forwards (The animation’s final keyframe continues to apply after the final iteration of the animation completes) backwards (The animation’s initial keyframe is applied as soon as the animation style is applied to an element.  This only affects animations that have a nonzero value for -webkit-animation-delay) both (The animation’s initial keyframe is applied as soon as the animation style is applied to an element,  and the animation’s final keyframe continues to apply after the final iteration of the animation completes.  The initial keyframe only affects animations that have a nonzero value for -webkit-animation-delay) */
/*  Cross browser method to apply word-breaking and hyphenation (where supported)  Should be able to use the built-in Compass method, hyphenation(), but the library won't load right now */
/* Keep this in all mix-in files if you can. Useful stuff */
/* Manage our preferred reset as a Mix-in instead of replying on Compass or Blueprint */
/* HTML5 Boilerplate Non-semantic helper classes */
/* Add in the HTML5 Boilerplate rules for print (generic). Modify as needed. */
/* Style mixins for this project */
/* ! ==== Local Mix-ins  ==== */
/* Since we include this file everywhere, we should be able to use these in style.scss as well as layout.scss */
/* Headers.  We use mixins so we can manage these in one place.  Used in style.scss and mce.scss  */
/* Drop Shadow effect – equal offset for right and bottom */
/* Hide visually but leave available for screen readers */
/* ! ===== Animation Effects ===== */
/* translate3d(0,0,0) is a null transform hack that kicks hardware acceleration into effect. For desktop browsers, this means a smoother animation and text will not be re-rendered on animation end */
/* Keyframes for pulse effects */
@-webkit-keyframes white-pulse { from { -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 0); -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 0); box-shadow: 0 0 2em rgba(255, 255, 255, 0); }
  to { -webkit-box-shadow: 0 0 2em white; -moz-box-shadow: 0 0 2em white; box-shadow: 0 0 2em white; } }

@-moz-keyframes white-pulse { from { -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 0); -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 0); box-shadow: 0 0 2em rgba(255, 255, 255, 0); }
  to { -webkit-box-shadow: 0 0 2em white; -moz-box-shadow: 0 0 2em white; box-shadow: 0 0 2em white; } }

@-ms-keyframes white-pulse { from { -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 0); -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 0); box-shadow: 0 0 2em rgba(255, 255, 255, 0); }
  to { -webkit-box-shadow: 0 0 2em white; -moz-box-shadow: 0 0 2em white; box-shadow: 0 0 2em white; } }

@-o-keyframes white-pulse { from { -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 0); -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 0); box-shadow: 0 0 2em rgba(255, 255, 255, 0); }
  to { -webkit-box-shadow: 0 0 2em white; -moz-box-shadow: 0 0 2em white; box-shadow: 0 0 2em white; } }

@keyframes white-pulse { from { -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 0); -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 0); box-shadow: 0 0 2em rgba(255, 255, 255, 0); }
  to { -webkit-box-shadow: 0 0 2em white; -moz-box-shadow: 0 0 2em white; box-shadow: 0 0 2em white; } }

@-webkit-keyframes dark-pulse { from { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0); box-shadow: 0 0 2em rgba(0, 0, 0, 0); }
  to { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); } }

@-moz-keyframes dark-pulse { from { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0); box-shadow: 0 0 2em rgba(0, 0, 0, 0); }
  to { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); } }

@-ms-keyframes dark-pulse { from { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0); box-shadow: 0 0 2em rgba(0, 0, 0, 0); }
  to { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); } }

@-o-keyframes dark-pulse { from { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0); box-shadow: 0 0 2em rgba(0, 0, 0, 0); }
  to { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); } }

@keyframes dark-pulse { from { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0); box-shadow: 0 0 2em rgba(0, 0, 0, 0); }
  to { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); } }

/* Import Media Query mixins */
/* Define constants for the application and to configure the blueprint framework. */
/* ===== Compass Imports ===== */
/* DO NOT include Blueprint here. We are using Susy for the grid, and if Blueprint is here, it will mess things up */
/* @import "compass/css3/columns" */
/* @import "compass/css3/hyphenation"; */
/* Needed for the link-colors() function */
/* Needed for the horizontal-list() function */
/* When remembering whether or not there's a hyphen in white-space is too hard */
/* Use pie-clearfix when there is no width set ont the element to avoid edge cases */
/* Use to calculate color legibility: http://compass-style.org/reference/compass/utilities/color/contrast/ */
/* Other interesting functions: 
	@import "compass/utilities/color/contrast";
		detailed here: http://compass-style.org/reference/compass/utilities/color/contrast/
		Used to pass two colors into a get out the most readable color. 
		Good for situations where we dont want to create a new color, 
		but be sure that colors from variables are always going to be readable
*/
/* ===== Grid ===== */
/* Susy: Un-obtrusive grids for designers By: Eric A. Meyer and OddBird Site: susy.oddbird.net */
/* Settings  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that on or off.  We are using Susy 1.0. Update your GEM file by deleting the old an downloading the new.  */
/* Important, needed for calculations */
/* Alternate grids 

$total-max-width: 980px;
$total-columns: 18; 
$column-width: 28px;
$gutter-width: 24px;
$grid-padding: $gutter-width;
$container-style: fluid; 

$total-max-width: 980px;
$total-columns: 16; 
$column-width: 40px;
$gutter-width: 20px;
$grid-padding: $gutter-width;
$container-style: fluid; 

*/
/* ===== Variables ===== */
/* Colors */
/* Confusing, but in some cases, this can be set to a dark color */
/* RevSys Colors */
/* Typography */
/* True here means that all computed values will be in EMs */
/* Allows the adjust-font-size-to and lines-for-font-size mixins to round to the nearest half line height to avoid large spacing between lines. */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Sizes */
/* 
	Compass will convert the font sizes from px to em and fit it into the vertical rhythm automatically with the necessary margin 
	A neat trick, for sure. More on using the vertical rhythm properties and mixins: http://compass-style.org/reference/compass/typography/vertical_rhythm/
	
	Note: The line height is relative to the constant $base-line-height. 
	The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems. 
	Don’t worry about nested elements etc, Compass will do the maths for you :)
*/
/* Defaults */
/* Positive is down */
/* Define constants for the application and to configure the blueprint framework. */
/* ===== Compass Imports ===== */
/* DO NOT include Blueprint here. We are using Susy for the grid, and if Blueprint is here, it will mess things up */
/* @import "compass/css3/columns" */
/* @import "compass/css3/hyphenation"; */
/* Needed for the link-colors() function */
/* Needed for the horizontal-list() function */
/* When remembering whether or not there's a hyphen in white-space is too hard */
/* Use pie-clearfix when there is no width set ont the element to avoid edge cases */
/* Use to calculate color legibility: http://compass-style.org/reference/compass/utilities/color/contrast/ */
/* Other interesting functions: 
	@import "compass/utilities/color/contrast";
		detailed here: http://compass-style.org/reference/compass/utilities/color/contrast/
		Used to pass two colors into a get out the most readable color. 
		Good for situations where we dont want to create a new color, 
		but be sure that colors from variables are always going to be readable
*/
/* ===== Grid ===== */
/* Susy: Un-obtrusive grids for designers By: Eric A. Meyer and OddBird Site: susy.oddbird.net */
/* Settings  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that on or off.  We are using Susy 1.0. Update your GEM file by deleting the old an downloading the new.  */
/* Important, needed for calculations */
/* Alternate grids 

$total-max-width: 980px;
$total-columns: 18; 
$column-width: 28px;
$gutter-width: 24px;
$grid-padding: $gutter-width;
$container-style: fluid; 

$total-max-width: 980px;
$total-columns: 16; 
$column-width: 40px;
$gutter-width: 20px;
$grid-padding: $gutter-width;
$container-style: fluid; 

*/
/* ===== Variables ===== */
/* Colors */
/* Confusing, but in some cases, this can be set to a dark color */
/* RevSys Colors */
/* Typography */
/* True here means that all computed values will be in EMs */
/* Allows the adjust-font-size-to and lines-for-font-size mixins to round to the nearest half line height to avoid large spacing between lines. */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Sizes */
/* 
	Compass will convert the font sizes from px to em and fit it into the vertical rhythm automatically with the necessary margin 
	A neat trick, for sure. More on using the vertical rhythm properties and mixins: http://compass-style.org/reference/compass/typography/vertical_rhythm/
	
	Note: The line height is relative to the constant $base-line-height. 
	The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems. 
	Don’t worry about nested elements etc, Compass will do the maths for you :)
*/
/* Defaults */
/* Positive is down */
/* Functional mixins – Items we would like to keep consistent from project to project */
/* Turn numbers with units into unitless numbers: https://github.com/nex3/sass/issues/533 */
/* Shorthand for a set of useful text/line-height resizing functions. easier to remember... */
/* Easy little function to do the math of pixel to EM conversion for us. Needs a base-font-size set in _base.scss */
/*  Font-size-adjust: the problem and a solution Not widely supported, can't use this yet */
/* Since we can't use the above, let's create our own way to do it. */
/* Quickly apply border styles to elements */
/* Talk of depreciating the Compass mixin, so we pull it in here and make small adjustments */
/* Namespace the box-sizing mixin so we can add support for IE6/7 */
/* Vertical and Horizontal gradient mixins to make things easier. */
/*  Set all the up-and-coming input text types here for easier reference  Does not include types that are not meant to be displayed full width, such as:  type=number, type=range, type=date, type=color */
/*  Cross browser @keyframe definition set  Compass doesn't have one yet, so we namespace this so as not to conflict with a future release */
/*  Cross browser animation definition set  Compass doesn't have one yet, so we namespace this so as not to conflict with a future release  $timing: linear | ease | ease-in | ease-out | ease-in-out $delay: seconds before animation starts $count: how many times the animation will loop $direction: normal | alternate (Play even-numbered iterations of the animation in the forward direction and odd-numbered iterations in the reverse direction.) $fill-mode: none | forwards | backwards | both forwards (The animation’s final keyframe continues to apply after the final iteration of the animation completes) backwards (The animation’s initial keyframe is applied as soon as the animation style is applied to an element.  This only affects animations that have a nonzero value for -webkit-animation-delay) both (The animation’s initial keyframe is applied as soon as the animation style is applied to an element,  and the animation’s final keyframe continues to apply after the final iteration of the animation completes.  The initial keyframe only affects animations that have a nonzero value for -webkit-animation-delay) */
/*  Cross browser method to apply word-breaking and hyphenation (where supported)  Should be able to use the built-in Compass method, hyphenation(), but the library won't load right now */
/* Keep this in all mix-in files if you can. Useful stuff */
/* Manage our preferred reset as a Mix-in instead of replying on Compass or Blueprint */
/* HTML5 Boilerplate Non-semantic helper classes */
/* Add in the HTML5 Boilerplate rules for print (generic). Modify as needed. */
/* Style mixins for this project */
/* ! ==== Local Mix-ins  ==== */
/* Since we include this file everywhere, we should be able to use these in style.scss as well as layout.scss */
/* Headers.  We use mixins so we can manage these in one place.  Used in style.scss and mce.scss  */
/* Drop Shadow effect – equal offset for right and bottom */
/* Hide visually but leave available for screen readers */
/* ! ===== Animation Effects ===== */
/* translate3d(0,0,0) is a null transform hack that kicks hardware acceleration into effect. For desktop browsers, this means a smoother animation and text will not be re-rendered on animation end */
/* Keyframes for pulse effects */
@-webkit-keyframes white-pulse { from { -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 0); -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 0); box-shadow: 0 0 2em rgba(255, 255, 255, 0); }
  to { -webkit-box-shadow: 0 0 2em white; -moz-box-shadow: 0 0 2em white; box-shadow: 0 0 2em white; } }

@-moz-keyframes white-pulse { from { -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 0); -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 0); box-shadow: 0 0 2em rgba(255, 255, 255, 0); }
  to { -webkit-box-shadow: 0 0 2em white; -moz-box-shadow: 0 0 2em white; box-shadow: 0 0 2em white; } }

@-ms-keyframes white-pulse { from { -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 0); -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 0); box-shadow: 0 0 2em rgba(255, 255, 255, 0); }
  to { -webkit-box-shadow: 0 0 2em white; -moz-box-shadow: 0 0 2em white; box-shadow: 0 0 2em white; } }

@-o-keyframes white-pulse { from { -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 0); -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 0); box-shadow: 0 0 2em rgba(255, 255, 255, 0); }
  to { -webkit-box-shadow: 0 0 2em white; -moz-box-shadow: 0 0 2em white; box-shadow: 0 0 2em white; } }

@keyframes white-pulse { from { -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 0); -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 0); box-shadow: 0 0 2em rgba(255, 255, 255, 0); }
  to { -webkit-box-shadow: 0 0 2em white; -moz-box-shadow: 0 0 2em white; box-shadow: 0 0 2em white; } }

@-webkit-keyframes dark-pulse { from { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0); box-shadow: 0 0 2em rgba(0, 0, 0, 0); }
  to { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); } }

@-moz-keyframes dark-pulse { from { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0); box-shadow: 0 0 2em rgba(0, 0, 0, 0); }
  to { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); } }

@-ms-keyframes dark-pulse { from { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0); box-shadow: 0 0 2em rgba(0, 0, 0, 0); }
  to { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); } }

@-o-keyframes dark-pulse { from { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0); box-shadow: 0 0 2em rgba(0, 0, 0, 0); }
  to { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); } }

@keyframes dark-pulse { from { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0); box-shadow: 0 0 2em rgba(0, 0, 0, 0); }
  to { -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); box-shadow: 0 0 2em rgba(0, 0, 0, 0.6); } }

/* ! ===== START Media Queries ===== 
 Important note:   When using px2em, the base EM will always be the default font size of the browser!  Even if we set the $base-font-size to be 14px, with relative font sizing in place, 16px is still really the base.  If your $base-font-size is anything but 16px, pass the 16px value to the function as a second parameter,  like so: px2em( 800px, 16px ) of your EM screen width calculations will NOT be correct.
*/
/* Breakpoints */
/*740px*/
/* ! ==== Columns at a glance ==== */
/* ! ==== Super Small Screens ==== */
/* ! ==== Small Screens ==== */
/* ! ==== Only Small Screens ==== */
/* ! ==== Medium Screens ==== */
/* ! ==== Large Screens ==== */
/* ! ==== Larger Screens ==== */
/* ! ==== Tall Screens that are not touch enabled ==== */
/* Rules passed to browsers that support media queries ALL rules must be passed through a MQ as this sheet loads without a query of its own.  We "label" the body with strings that correspond to js functions that we want to fire.  A window.resize() event checks this label and functions fire when conditions are met   The nice part is, these labels can be strings with more than one item in them.  As many JS functions that we want to fire at different widths can be controlled with tese labels.   Important note:   When using px2em, the base EM will always be the default font size of the browser!  Even if we set the $base-font-size to be 14px, with relative font sizing in place, 16px is still really the base.  If your $base-font-size is anything but 16px, pass the 16px value to the function as a second parameter,  like so: px2em( 800px, 16px ) of your EM screen width calculations will NOT be correct. */
/* Sample of setting a descriptive hook onto the body
@media (min-width: px2em( 480px )) {  body:after { content: 'actionhook'; display: none;  }
}
*/
@media (min-width: 30em) { .copyright .softbreak.second { display: none; } }
@media (min-width: 37.5em) { /* default 2 column asymmetric structure */
  .default-columns .column { float: left; }
  .default-columns > *[role="main"] { width: 65%; }
  .default-columns > *[role="complementary"], .default-columns > *[role="secondary"] { width: 35%; }
  .two-col, .four-col { /* every other, starting at the third element */ }
  .two-col .column, .four-col .column { float: left; width: 50%; }
  .two-col .column:nth-of-type(2n+3), .four-col .column:nth-of-type(2n+3) { clear: left; }
  .main-navigation li { display: inline-block; }
  .main-navigation li.jump { display: none; }
  /* footer nav into 2 columns */
  .secondary-navigation .navigation { margin: 0 -1em; }
  .secondary-navigation .navigation .home-link { display: none; }
  .secondary-navigation .navigation a { text-align: left; }
  .secondary-navigation .navigation .tier-1 { padding: 0 1em; float: left; width: 50%; /* every other, starting at the fourth element b/c we hide the first one */ }
  .secondary-navigation .navigation .tier-1:nth-of-type(2n+4) { clear: left; }
  .copyright p { margin-bottom: 0; }
  /* Animate some elements when media queries force changes */
  .column, .site-title img, .pagination, .secondary-navigation { -webkit-transition: 0.3s all ease-in-out; -moz-transition: 0.3s all ease-in-out; -ms-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; }
  /* end animation */
  .main-navigation { text-align: center; }
  figure figcaption { text-align: left; }
  .copyright { text-align: left; }
  .copyright .softbreak { display: none; } }
@media (min-width: 55em) { /* default 2 column asymmetric structure */
  .default-columns > *[role="main"] { width: 70%; }
  .default-columns > *[role="complementary"], .default-columns > *[role="secondary"] { width: 30%; }
  .three-col { /* Every third, starting with the fourth element */ }
  .three-col .column { float: left; width: 33.3%; }
  .three-col .column:nth-of-type(3n+4) { clear: left; }
  .four-col { /* reset the clear pattern from the two col structure */ }
  .four-col .column { width: 25%; }
  .four-col .column:nth-of-type(2n+3) { clear: none; }
  .four-col .column:nth-of-type(4n+5) { clear: left; }
  /* More space around writing */
  .default-columns > *[role="main"] { padding-left: 2em; padding-right: 2em; }
  .default-columns > *[role="complementary"], .default-columns > *[role="secondary"] { padding-left: 1.5em; padding-right: 1.5em; }
  .services-wrapper .container > div, .services-wrapper .container > article, .product-wrapper .container > div, .product-wrapper .container > article, .writing-wrapper .container > div, .writing-wrapper .container > article { padding-left: 1em; padding-right: 1em; }
  .column-hero { margin-left: -2em; margin-right: -2em; }
  .site-title, .main-navigation { float: left; width: 50%; }
  .site-title img { margin: 0; }
  .main-navigation { max-width: 100%; max-height: 100%; overflow: visible; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; position: absolute; top: 3em; right: 0; }
  .main-navigation .navigation { text-align: right; padding: 0 1em 0 0; }
  .main-navigation .navigation li { float: none; }
  .services-wrapper .intro-title { font-size: 2.25em; }
  .services-wrapper .intro-title span { display: block; }
  .services-wrapper .intro-subhead span { display: block; }
  /*ul*/
  .client-list { margin: 0 -0.5em; overflow: hidden; *zoom: 1; }
  .client-list li { float: left; width: 50%; padding: 0 .5em; }
  .client-list li:nth-of-type(2n+3) { clear: left; }
  .breadcrumbs, .pagination, .previous-next { margin-left: -1.5em; margin-right: -1.5em; padding: 0.25em 1.25em; }
  .pagination a.prev-link:after { content: " Prev"; }
  .pagination a.next-link:before { content: "Next "; }
  /* footer nav into 4 columns */
  .secondary-navigation .navigation .tier-1 { width: 25%; }
  .secondary-navigation .navigation .tier-1:nth-of-type(2n+4) { clear: none; } }
@media (min-width: 61.25em) { .main-navigation .navigation { padding: 0; }
  .services-wrapper .intro-title { font-size: 2.5em; }
  .services-wrapper .intro-subhead { font-size: 1.5em; }
  .services-wrapper .container > div, .services-wrapper .container > article, .product-wrapper .container > div, .product-wrapper .container > article, .writing-wrapper .container > div, .writing-wrapper .container > article { padding-left: 0; padding-right: 0; }
  .secondary-navigation .navigation a { font-size: 0.8125em; } }
@media (min-width: 68.75em) { /* More space around writing */
  .default-columns > *[role="main"] { padding-left: 2em; padding-right: 2em; }
  .default-columns > *[role="complementary"], .default-columns > *[role="secondary"] { padding-left: 1.5em; padding-right: 1.5em; }
  .column-hero { margin-left: -2.5em; margin-right: -2.5em; } }
/* http://dev.w3.org/csswg/css-device-adapt/ http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ for IE10 Snap Mode on Metro */
@-ms-viewport { width: device-width; }

@viewport { width: device-width; }