/**
 * Debug styles
 * DBS>Interactive
 */
/**
 * Global Mixins
 * DBS>Interactive
 */
/**
 * Helpful mixin for font size scaling.
 *
 * Decimal values should not be used here!
 * The results will not be what you'd expect.
 *
 * @usage
 * 		@include font-scale(-1) - smaller
 * 		@include font-scale(0) = 1em (.8em in mobile)
 * 		@include font-scale(1) - larger
 * 			etc...
 */
/**
 * Fixes clear bug in certain situations
 *
 * @group layout
 * @link http://fuseinteractive.ca/blog/understanding-humble-clearfix#.VJ853sAEo Understanding the humble clearfix
 * @example scss - Usage
 *   @extend clearFix; // That's It!
 */
.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

/**
 * An easy way to truncate text with an ellipsis. Requires the element to be block or inline-block.
 *
 * @group Typography
 * @link http://web-design-weekly.com/2013/05/12/handy-sass-mixins/ Handy Sass Mixins
 * @example scss - Usage
 *   .text-truncate {
 *	  @extend text-truncate;
 *   }
 */
/**
 * Hide On Breakpoint
 *
 * @param {Variable} $bp - Breakpoint variable, ie $largeScreen
 * @param {String} $determinate ('min') - Whether it is max-width or min-width based
 * @group General
 * @link https://github.com/GumbyFramework/Gumby/blob/master/sass/functions/_visibility.scss Gumby Framework
 * @example scss - Basic Usage
 *   .class{
 *	  @include hideOn($largeScreen);
 *   }
 *
 * @example scss - Reversed Determinate
 *   @include hideOn($baby, 'max');
 */
/**
 * Show On Breakpoint
 *
 * @param {Variable} $bp - Breakpoint variable, ie $largeScreen
 * @param {String} $determinate ('min') - Whether it is max-width or min-width based
 * @group General
 * @link https://github.com/GumbyFramework/Gumby/blob/master/sass/functions/_visibility.scss Gumby Framework
 * @example scss - Basic Usage
 *   .class{
 *	  @include showOn($largeScreen);
 *   }
 *
 * @example scss - Reversed Determinate
 *   @include showOn($baby, 'max');
 */
/**
 * Size mixin - Sets width and height.
 *
 * When only one argument is specified, both the height and width are set to the same value.
 *
 * @param width - required
 * @param height
 */
/**
 * REFLEX ISH GRID
 */
/**
 * Exponent function
 *
 * NOTE: This does NOT work for decimal values
 *
 *   @see: https://css-tricks.com/snippets/sass/power-function/
 */
/**
 * Object Fit
 *
 * If a browser supports object-fit it will use it with the params
 * given. Otherwise it will fall back on a more basic image centering method.
 *
 * @param size - required (cover, contain, auto, etc.)
 * @param position - required (center, left, right, top, bottom right, etc.)
 */
/**
 * Aspect Ratio
 *
 * Used to create a padding box that an image/video can be placed in.
 *
 * Example @include aspect-ratio(16, 9);
 */
/**
 * Slate Layout Mixins
 * DBS>Interactive
 */
/**
 * Default responsive padding mixin for layout content
 */
/**
 * Default responsive margin mixin for layout content
 */
/**
 * Used for mimicking the vertical space provided by the default-margin mixin, but
 * with padding for colored background layouts.
 */
/**
 * Mixin to keep space (either margin or padding) between cells consistent
 *
 * It takes 2 arguments:
 * 		@param $space_property = { 'margin'|'padding' }
 * 		@param $reverse = { true|false }
 */
/**
 * Responsive layout mixin to constrain a width to containSize.
 */
/**
 * Theme Variables - colors, font sizes, breakpoint etc.
 * All the variables will goes here based on project tech specification
 * DBS>Interactive
 */
/**
 * Fonts
 */
/**
 * Type style definitions
 */
/**
 * To add a new font:
 * DBS>Interactive
 *
 * Take the fonts and upload them here:
 * https://transfonter.org/
 *
 * Download the resulting files and copy the woff and woff2
 * files into the appropriate directory.
 *
 * Make sure that the font-weight and font-style match the appropriate font files.
 *
 * We generally remove all of the unnecessary glyphs from the font family to make the files as
 * small as possible. If the font is a Google Font, you can copy all of its available glyphs
 * by clicking the "Glyphs" tab on the font's page. Paste those into the "characters" field on 
 * Transfonter and delete all of the characters that are not typically going to be used on an  
 * English language site. When you do this correctly the files downloaded from Transfonter will
 * be prefixed with "subset-". If the site has multiple languages, then don't do that.
 */
@font-face {
  font-family: 'Encode Sans Condensed';
  src: url("../fonts/encode-sans-condensed/subset-EncodeSansCondensed-Light.woff2") format("woff2"), url("../fonts/encode-sans-condensed/subset-EncodeSansCondensed-Light.woff") format("woff");
  font-weight: 300;
  font-display: swap;
  font-style: normal; }

@font-face {
  font-family: 'Encode Sans Condensed';
  src: url("../fonts/encode-sans-condensed/subset-EncodeSansCondensed-Regular.woff2") format("woff2"), url("../fonts/encode-sans-condensed/subset-EncodeSansCondensed-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  font-style: italic; }

@font-face {
  font-family: 'Encode Sans Condensed';
  src: url("../fonts/encode-sans-condensed/subset-EncodeSansCondensed-SemiBold.woff2") format("woff2"), url("../fonts/encode-sans-condensed/subset-EncodeSansCondensed-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
  font-style: normal; }

@font-face {
  font-family: 'Encode Sans Condensed';
  src: url("../fonts/encode-sans-condensed/subset-EncodeSansCondensed-Bold.woff2") format("woff2"), url("../fonts/encode-sans-condensed/subset-EncodeSansCondensed-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  font-style: normal; }

@font-face {
  font-family: 'Lato';
  src: url("../fonts/lato/subset-Lato-Regular.woff2") format("woff2"), url("../fonts/lato/subset-Lato-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  font-style: normal; }

@font-face {
  font-family: 'Lato';
  src: url("../fonts/lato/subset-Lato-Italic.woff2") format("woff2"), url("../fonts/lato/subset-Lato-Italic.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  font-style: italic; }

@font-face {
  font-family: 'Lato';
  src: url("../fonts/lato/subset-Lato-Bold.woff2") format("woff2"), url("../fonts/lato/subset-Lato-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  font-style: normal; }

@font-face {
  font-family: 'Lato';
  src: url("../fonts/lato/subset-Lato-BoldItalic.woff2") format("woff2"), url("../fonts/lato/subset-Lato-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  font-style: italic; }

.debug-current-template {
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0.5em;
  background: #000;
  pointer-events: none;
  color: #fff; }
  body.wcag-aaa-dark .debug-current-template,
  body.wcag-aaa-light .debug-current-template {
    background: transparent; }

.srcset-debug {
  position: relative;
  display: block;
  line-height: 0; }
  .srcset-debug__currentsrc {
    font-size: 0.64em;
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #ffffff;
    padding: 1em; }
    @media (min-width: 48em) {
      .srcset-debug__currentsrc {
        font-size: 0.8em; } }