/* ============================================================================
	SASS Mixins and Global Classes
============================================================================ */
/*	Breakpoint Mixins
============================================================================ */
/*	Mobile Padding
	Usage: add .mobile-padding to add necessary viewport padding for mobile elements
============================================================================ */
/*	Fill Viewport:
	Makes an element fill the viewport while centering the content within the grid
	Also adds mobile padding depending on screen size
	Usage:	.fill-viewport makes an element and its contents go full-width
			.fill-viewport-centered makes an element go full-width, while centering content to the grid
============================================================================ */
.fill-viewport {
  margin: 0;
  width: 100%; }
  @media (max-width: 767px) {
    .fill-viewport {
      padding-left: 1em;
      padding-right: 1em; } }

.fill-viewport-centered {
  margin: 0;
  width: 100%; }
  @media (max-width: 767px) {
    .fill-viewport-centered {
      padding-left: 1em;
      padding-right: 1em; } }
  @media (min-width: 768px) {
    .fill-viewport-centered > * {
      margin: 0 auto;
      padding: 0 10px;
      max-width: 960px; } }

/*	Font Sizing mixin
	Automatic conversion to REM-based font sizes with px-based fallback
============================================================================ */
/*	Typekit Fonts mixin
	Logically-grouped Typekit font families.
	Usage: @include typekit(proxima-nova, light);
============================================================================ */
/*	Cross-browser background opacity
	Usage with colors or preferably variables:
	@include background-opacity(#333, 0.5);
============================================================================ */
/*	===========================================================================
	Font Stacks
	======================================================================== */
/*	===========================================================================
	Colors
	======================================================================== */
/*	Custom Colors
	These are colors specific to this project. We'll base everything on these.
	======================================================================== */
/*	Global Colors
	These are pre-configured sitewide colors. Set the values using the above
	Custom Colors.
	======================================================================== */
/*	===========================================================================
	Global Styles
	======================================================================== */