\n// - Bold/italics \n// - Small text \n// - Headings -\n// - Anchors \n// - Dividers \n// - Lists \n// - Blockquotes \n// - Code blocks \n// - Abbreviations \n// - Citations \n// - Keystrokes \n\n/// Font family for header elements.\n/// @type String | List\n$header-font-family: $body-font-family !default;\n\n/// Font weight of headers.\n/// @type String\n$header-font-weight: $global-weight-normal !default;\n\n/// Font style (e.g. italicized) of headers.\n/// @type String\n$header-font-style: normal !default;\n\n/// Font stack used for elements that use monospaced type, such as code samples\n/// @type String | List\n$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;\n\n/// Color of headers.\n/// @type Color\n$header-color: inherit !default;\n\n/// Line height of headers.\n/// @type Number\n$header-lineheight: 1.4 !default;\n\n/// Bottom margin of headers.\n/// @type Number\n$header-margin-bottom: 0.5rem !default;\n\n/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.\n/// @type Map\n$header-styles: (\n small: (\n 'h1': ('font-size': 24),\n 'h2': ('font-size': 20),\n 'h3': ('font-size': 19),\n 'h4': ('font-size': 18),\n 'h5': ('font-size': 17),\n 'h6': ('font-size': 16),\n ),\n medium: (\n 'h1': ('font-size': 48),\n 'h2': ('font-size': 40),\n 'h3': ('font-size': 31),\n 'h4': ('font-size': 25),\n 'h5': ('font-size': 20),\n 'h6': ('font-size': 16),\n ),\n) !default;\n\n// $header-styles map is built from $header-sizes in order to ensure downward compatibility\n// when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss\n@function build_from_header-sizes($header-sizes) {\n @warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';\n $header-styles: ();\n @each $size, $headers in $header-sizes {\n $header-map: ();\n @each $header, $font-size in $headers {\n $header-map: map-merge($header-map, ($header: ('font-size': $font-size))); \n }\n $header-styles: map-merge($header-styles, ($size: $header-map));\n }\n @return $header-styles;\n}\n\n// If it exists $headers-sizes is used to build $header-styles. See the documentation.\n@if variable-exists(header-sizes) {\n $header-styles: build_from_header-sizes($header-sizes);\n}\n\n/// Text rendering method of headers.\n/// @type String\n$header-text-rendering: optimizeLegibility !default;\n\n/// Font size of `` elements.\n/// @type Number\n$small-font-size: 80% !default;\n\n/// Color of `` elements when placed inside headers.\n/// @type Color\n$header-small-font-color: $medium-gray !default;\n\n/// Line height of text inside `` elements.\n/// @type Number\n$paragraph-lineheight: 1.6 !default;\n\n/// Bottom margin of paragraphs.\n/// @type Number\n$paragraph-margin-bottom: 1rem !default;\n\n/// Text rendering method for paragraph text.\n/// @type String\n$paragraph-text-rendering: optimizeLegibility !default;\n\n/// Text color of code samples.\n/// @type Color\n$code-color: $black !default;\n\n/// Font family of code samples.\n/// @type String | List\n$code-font-family: $font-family-monospace !default;\n\n/// Font weight of text in code samples.\n/// @type String\n$code-font-weight: $global-weight-normal !default;\n\n/// Background color of code samples.\n/// @type Color\n$code-background: $light-gray !default;\n\n/// Border around code samples.\n/// @type List\n$code-border: 1px solid $medium-gray !default;\n\n/// Padding around text of code samples.\n/// @type Number | List\n$code-padding: rem-calc(2 5 1) !default;\n\n/// Default color for links.\n/// @type Color\n$anchor-color: $primary-color !default;\n\n/// Default color for links on hover.\n/// @type Color\n$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;\n\n/// Default text decoration for links.\n/// @type String\n$anchor-text-decoration: none !default;\n\n/// Default text decoration for links on hover.\n/// @type String\n$anchor-text-decoration-hover: none !default;\n\n/// Maximum width of a divider.\n/// @type Number\n$hr-width: $global-width !default;\n\n/// Default border for a divider.\n/// @type List\n$hr-border: 1px solid $medium-gray !default;\n\n/// Default margin for a divider.\n/// @type Number | List\n$hr-margin: rem-calc(20) auto !default;\n\n/// Line height for items in a list.\n/// @type Number\n$list-lineheight: $paragraph-lineheight !default;\n\n/// Bottom margin for items in a list.\n/// @type Number\n$list-margin-bottom: $paragraph-margin-bottom !default;\n\n/// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`).\n/// @type String\n$list-style-type: disc !default;\n\n/// Positioning for bullets on unordered list items.\n/// @type String\n$list-style-position: outside !default;\n\n/// Left (or right) margin for lists.\n/// @type Number\n$list-side-margin: 1.25rem !default;\n\n/// Left (or right) margin for a list inside a list.\n/// @type Number\n$list-nested-side-margin: 1.25rem !default;\n\n/// Bottom margin for `` elements.\n/// @type Number\n$defnlist-margin-bottom: 1rem !default;\n\n/// Font weight for `` elements.\n/// @type String\n$defnlist-term-weight: $global-weight-bold !default;\n\n/// Spacing between `` and `` elements.\n/// @type Number\n$defnlist-term-margin-bottom: 0.3rem !default;\n\n/// Text color of `` elements.\n/// @type Color\n$blockquote-color: $dark-gray !default;\n\n/// Padding inside a `` element.\n/// @type Number | List\n$blockquote-padding: rem-calc(9 20 0 19) !default;\n\n/// Side border for `` elements.\n/// @type List\n$blockquote-border: 1px solid $medium-gray !default;\n\n/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\n }\n }\n\n // Abbreviations\n abbr, abbr[title] {\n border-bottom: $abbr-underline;\n cursor: help;\n text-decoration: none;\n }\n\n // Figures\n figure {\n margin: 0;\n }\n \n // Code\n code {\n padding: $code-padding;\n\n border: $code-border;\n background-color: $code-background;\n\n font-family: $code-font-family;\n font-weight: $code-font-weight;\n color: $code-color;\n }\n\n // Keystrokes\n kbd {\n margin: 0;\n padding: $keystroke-padding;\n\n background-color: $keystroke-background;\n\n font-family: $keystroke-font;\n color: $keystroke-color;\n\n @if has-value($keystroke-radius) {\n border-radius: $keystroke-radius;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n$global-font-size: 100% !default;\n\n/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.\n///\n/// @param {Number} $num - Number to strip unit from.\n///\n/// @returns {Number} The same number, sans unit.\n@function strip-unit($num) {\n @return $num / ($num * 0 + 1);\n}\n\n/// Converts one or more pixel values into matching rem values.\n///\n/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.\n/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.\n///\n/// @returns {List} A list of converted values.\n@function rem-calc($values, $base: null) {\n $rem-values: ();\n $count: length($values);\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // If the base font size is a %, then multiply it by 16px\n // This is because 100% font size = 16px in most all browsers\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n // Using rem as base allows correct scaling\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if $count == 1 {\n @return -zf-to-rem($values, $base);\n }\n\n @for $i from 1 through $count {\n $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));\n }\n\n @return $rem-values;\n}\n\n// Converts a unitless, pixel, or rem value to em, for use in breakpoints.\n@function -zf-bp-to-em($value) {\n // Pixel and unitless values are converted to rems\n @if unit($value) == 'px' or unitless($value) {\n $value: rem-calc($value, $base: 16px);\n }\n\n // Then the value is converted to ems\n @return strip-unit($value) * 1em;\n}\n\n/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.\n/// @access private\n///\n/// @param {Number} $value - Pixel value to convert.\n/// @param {Number} $base [null] - Base for pixel conversion.\n///\n/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.\n@function -zf-to-rem($value, $base: null) {\n // Check if the value is a number\n @if type-of($value) != 'number' {\n @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';\n @return $value;\n }\n\n // Transform em into rem if someone hands over 'em's\n @if unit($value) == 'em' {\n $value: strip-unit($value) * 1rem;\n }\n\n // Calculate rem if units for $value is not rem or em\n @if unit($value) != 'rem' {\n $value: strip-unit($value) / strip-unit($base) * 1rem;\n }\n\n // Turn 0rem into 0\n @if $value == 0rem {\n $value: 0;\n }\n\n @return $value;\n}\n\n/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.\n///\n/// @param {Number} $value - Value to convert to a unitless line height\n/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size\n///\n/// @return {Number} - Unitless number\n@function unitless-calc($value, $base: null) {\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // First, lets convert our $base to pixels\n\n // If the base font size is a %, then multiply it by 16px\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if unit($base) == 'em' {\n $base: strip-unit($base) * 16px;\n }\n\n // Now lets convert our value to pixels too\n @if unit($value) == '%' {\n $value: ($value / 100%) * $base;\n }\n\n @if unit($value) == 'rem' {\n $value: strip-unit($value) * $base;\n }\n\n @if unit($value) == 'em' {\n $value: strip-unit($value) * $base;\n }\n\n // 'px'\n @if unit($value) == 'px' {\n @return strip-unit($value) / strip-unit($base);\n }\n\n // assume that line-heights greatern then 10 are meant to be absolute in 'px'\n @if unitless($value) and ($value > 10) {\n @return $value / strip-unit($base);\n }\n\n @return $value;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group breakpoints\n////\n\n/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.\n/// @type Map\n$breakpoints: (\n small: 0,\n medium: 640px,\n large: 1024px,\n xlarge: 1200px,\n xxlarge: 1440px,\n) !default;\n\n/// The largest named breakpoint in which to include print as a media type\n/// @type Keyword\n$print-breakpoint: large !default;\n\n$-zf-zero-breakpoint: small !default;\n\n$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');\n\n@if nth(map-values($breakpoints), 1) != 0 {\n @error 'Your smallest breakpoint (defined in $breakpoints) must be set to \"0\".';\n}\n@else {\n $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);\n}\n\n/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.\n/// @type List\n$breakpoint-classes: (small medium large) !default;\n\n/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.\n///\n/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.\n@function breakpoint($val: $-zf-zero-breakpoint) {\n // Size or keyword\n $bp: nth($val, 1);\n // Value for max-width media queries\n $bp-max: 0;\n // Direction of media query (up, down, or only)\n $dir: if(length($val) > 1, nth($val, 2), up);\n // Eventual output\n $str: '';\n // Is it a named media query?\n $named: false;\n\n // Orientation media queries have a unique syntax\n @if $bp == 'landscape' or $bp == 'portrait' {\n @return '(orientation: #{$bp})';\n }\n @else if $bp == 'retina' {\n @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';\n }\n\n // Try to pull a named breakpoint out of the $breakpoints map\n @if type-of($bp) == 'string' {\n @if map-has-key($breakpoints, $bp) {\n @if $dir == 'only' or $dir == 'down' {\n $bp-max: -zf-map-next($breakpoints, $bp);\n }\n\n $bp: map-get($breakpoints, $bp);\n $named: true;\n }\n @else {\n $bp: 0;\n @warn 'breakpoint(): \"#{$val}\" is not defined in your $breakpoints setting.';\n }\n }\n\n // Convert any pixel, rem, or unitless value to em\n $bp: -zf-bp-to-em($bp);\n @if $bp-max {\n $bp-max: -zf-bp-to-em($bp-max) - (1/16);\n }\n\n // Conditions to skip media query creation\n // - It's a named breakpoint that resolved to \"0 down\" or \"0 up\"\n // - It's a numeric breakpoint that resolved to \"0 \" + anything\n @if $bp > 0em or $dir == 'only' or $dir == 'down' {\n // `only` ranges use the format `(min-width: n) and (max-width: n)`\n @if $dir == 'only' {\n // Only named media queries can have an \"only\" range\n @if $named == true {\n // Only use \"min-width\" if the floor is greater than 0\n @if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n\n // Only add \"and\" to the media query if there's a ceiling\n @if $bp-max != null {\n $str: $str + ' and ';\n }\n }\n\n // Only use \"max-width\" if there's a ceiling\n @if $bp-max != null {\n $str: $str + '(max-width: #{$bp-max})';\n }\n }\n @else {\n @warn 'breakpoint(): Only named media queries can have an `only` range.';\n }\n }\n\n // `down` ranges use the format `(max-width: n)`\n @else if $dir == 'down' {\n $max: if($named, $bp-max, $bp);\n\n // Skip media query creation if input value is exactly \"0 down\",\n // unless the function was called as \"small down\", in which case it's just \"small only\"\n @if $named or $bp > 0em {\n @if $max != null {\n $str: $str + '(max-width: #{$max})';\n }\n }\n }\n\n // `up` ranges use the format `(min-width: n)`\n @else if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n }\n }\n\n @return $str;\n}\n\n/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:\n/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.\n/// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.\n/// - If a rem value is passed, the unit will be changed to em.\n/// - If an em value is passed, the value will be used as-is.\n///\n/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.\n///\n/// @output If the breakpoint is \"0px and larger\", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.\n@mixin breakpoint($value) {\n $str: breakpoint($value);\n $bp: index($-zf-breakpoints-keys, $value);\n $pbp: index($-zf-breakpoints-keys, $print-breakpoint);\n\n $old-zf-size: null;\n\n // Make breakpoint size available as a variable\n @if global-variable-exists(-zf-size) {\n $old-zf-size: $-zf-size;\n }\n $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords\n\n // If $str is still an empty string, no media query is needed\n @if $str == '' {\n @content;\n }\n\n // Otherwise, wrap the content in a media query\n @else {\n // For named breakpoints less than or equal to $print-breakpoint, add print to the media types\n @if $bp != null and $bp <= $pbp {\n @media print, screen and #{$str} {\n @content;\n }\n }\n @else {\n @media screen and #{$str} {\n @content;\n }\n }\n }\n\n @if $old-zf-size != null {\n // Restore the old breakpoint size\n $-zf-size: $old-zf-size !global;\n } @else {\n $-zf-size: null !global;\n }\n}\n\n/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.\n/// @access private\n///\n/// @param {Map} $map - Map to convert.\n///\n/// @returns {String} A string containing the map's contents.\n@function -zf-bp-serialize($map) {\n $str: '';\n @each $key, $value in $map {\n $str: $str + $key + '=' + -zf-bp-to-em($value) + '&';\n }\n $str: str-slice($str, 1, -2);\n\n @return $str;\n}\n\n/// Find the next key in a map.\n/// @access private\n///\n/// @param {Map} $map - Map to traverse.\n/// @param {Mixed} $key - Key to use as a starting point.\n///\n/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.\n@function -zf-map-next($map, $key) {\n\n // Store the keys of the map as a list\n $values: map-keys($map);\n\n $i: 0;\n\n // If the Key Exists, Get the index of the key within the map and add 1 to it for the next breakpoint in the map\n @if (map-has-key($map, $key)) {\n $i: index($values, $key) + 1;\n }\n\n // If the key doesn't exist, or it's the last key in the map, return null\n @if ($i > length($map) or $i == 0) {\n @return null;\n }\n // Otherwise, return the value\n @else {\n @return map-get($map, nth($values, $i));\n }\n\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $key - Key to use as last breakpoint.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-breakpoints-less-than($key) {\n $list: ();\n $found_key: false;\n\n @each $name in $-zf-breakpoints-keys {\n @if ($name == $key) {\n $found_key: true;\n }\n @if not $found_key {\n $list: append($list, $name);\n }\n }\n @return $list;\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $breakpoing - a named or non-named breakpoing.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-closest-named-breakpoint($breakpoint) {\n $last: $-zf-zero-breakpoint;\n $found: false;\n\n $value: unitless-calc($breakpoint, 1px);\n @each $key, $val in $breakpoints {\n @if not $found {\n @if unitless-calc($val) > $value {\n $found: true;\n } @else {\n $last: $key;\n }\n }\n }\n\n @return $last;\n}\n\n/// Get a value for a breakpoint from a responsive config map or single value.\n/// - If the config is a single value, return it regardless of `$value`.\n/// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.\n/// - If the config is a map and does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.\n/// @access private\n///\n/// @param {Number|Map} $map - Responsive config map or single value.\n/// @param {Keyword} $value - Breakpoint name to use.\n///\n/// @return {Mixed} The corresponding breakpoint value.\n@function -zf-get-bp-val($map, $value) {\n // If the given map is a single value, return it\n @if type-of($map) == 'number' {\n @return $map;\n }\n\n\n // Check if the breakpoint name exists globally\n @if not map-has-key($breakpoints, $value) {\n @if type-of($value) == 'number' {\n $value: -zf-closest-named-breakpoint($value);\n } @else {\n @return null;\n }\n }\n // Check if the breakpoint name exists in the local config map\n @else if map-has-key($map, $value) {\n // If it does, just return the value\n @return map-get($map, $value);\n }\n // Otherwise, find the next lowest breakpoint and return that value\n @else {\n $anchor: null;\n $found: false;\n\n @each $key, $val in $breakpoints {\n @if not $found {\n @if map-has-key($map, $key) {\n $anchor: $key;\n }\n @if $key == $value {\n $found: true;\n }\n }\n }\n\n @return map-get($map, $anchor);\n }\n}\n\n$small-up: '';\n$small-only: '';\n\n@if map-has-key($breakpoints, small) {\n $small-up: screen;\n $small-only: unquote('screen and #{breakpoint(small only)}');\n}\n\n$medium-up: '';\n$medium-only: '';\n\n@if map-has-key($breakpoints, medium) {\n $medium-up: unquote('screen and #{breakpoint(medium)}');\n $medium-only: unquote('screen and #{breakpoint(medium only)}');\n}\n\n$large-up: '';\n$large-only: '';\n\n@if map-has-key($breakpoints, large) {\n $large-up: unquote('screen and #{breakpoint(large)}');\n $large-only: unquote('screen and #{breakpoint(large only)}');\n}\n\n$xlarge-up: '';\n$xlarge-only: '';\n\n@if map-has-key($breakpoints, xlarge) {\n $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');\n $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');\n}\n\n$xxlarge-up: '';\n\n@if map-has-key($breakpoints, xxlarge) {\n $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group typography-helpers\n////\n\n/// Default font size for lead paragraphs.\n/// @type Number\n$lead-font-size: $global-font-size * 1.25 !default;\n\n/// Default line height for lead paragraphs.\n/// @type String\n$lead-lineheight: 1.6 !default;\n\n/// Default line height for subheaders.\n/// @type Number\n$subheader-lineheight: 1.4 !default;\n\n/// Default font color for subheaders.\n/// @type Color\n$subheader-color: $dark-gray !default;\n\n/// Default font weight for subheaders.\n/// @type String\n$subheader-font-weight: $global-weight-normal !default;\n\n/// Default top margin for subhheaders.\n/// @type Number\n$subheader-margin-top: 0.2rem !default;\n\n/// Default bottom margin for subheaders.\n/// @type Number\n$subheader-margin-bottom: 0.5rem !default;\n\n/// Default font size for statistic numbers.\n/// @type Number\n$stat-font-size: 2.5rem !default;\n\n@mixin foundation-typography-helpers {\n // Use to create a subheading under a main header\n // Make sure you pair the two elements in a element, like this:\n // \n // Heading\n // Subheading\n // \n .subheader {\n margin-top: $subheader-margin-top;\n margin-bottom: $subheader-margin-bottom;\n\n font-weight: $subheader-font-weight;\n line-height: $subheader-lineheight;\n color: $subheader-color;\n }\n\n // Use to style an introductory lead, deck, blurb, etc.\n .lead {\n font-size: $lead-font-size;\n line-height: $lead-lineheight;\n }\n\n // Use to style a large number to display a statistic\n .stat {\n font-size: $stat-font-size;\n line-height: 1;\n\n p + & {\n margin-top: -1rem;\n }\n }\n\n ul, ol {\n // Use to remove numbers from ordered list & bullets from unordered list\n &.no-bullet {\n margin-#{$global-left}: 0;\n list-style: none;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@mixin foundation-text-alignment {\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @each $align in (left, right, center, justify) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-text-#{$align} {\n text-align: $align;\n }\n }\n @else {\n .text-#{$align} {\n text-align: $align;\n }\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// If `true`, all elements will have transparent backgrounds when printed, to save on ink.\n/// @type Boolean\n/// @group global\n$print-transparent-backgrounds: true !default;\n$print-hrefs: true !default;\n\n// sass-lint:disable-all\n\n@mixin foundation-print-styles {\n .show-for-print { display: none !important; }\n\n @media print {\n * {\n @if $print-transparent-backgrounds {\n background: transparent !important;\n }\n\n box-shadow: none !important;\n\n color: black !important; // Black prints faster: h5bp.com/s\n text-shadow: none !important;\n }\n\n .show-for-print { display: block !important; }\n .hide-for-print { display: none !important; }\n\n table.show-for-print { display: table !important; }\n thead.show-for-print { display: table-header-group !important; }\n tbody.show-for-print { display: table-row-group !important; }\n tr.show-for-print { display: table-row !important; }\n td.show-for-print { display: table-cell !important; }\n th.show-for-print { display: table-cell !important; }\n\n // Display the URL of a link after the text\n a,\n a:visited { text-decoration: underline;}\n @if $print-hrefs {\n a[href]:after { content: ' (' attr(href) ')'; }\n }\n\n // Don't display the URL for images or JavaScript/internal links\n .ir a:after,\n a[href^='javascript:']:after,\n a[href^='#']:after { content: ''; }\n\n // Display what an abbreviation stands for after the text\n abbr[title]:after { content: ' (' attr(title) ')'; }\n\n // Prevent page breaks in the middle of a blockquote or preformatted text block\n pre,\n blockquote {\n border: 1px solid $dark-gray;\n page-break-inside: avoid;\n }\n\n // h5bp.com/t\n thead { display: table-header-group; }\n\n tr,\n img { page-break-inside: avoid; }\n\n img { max-width: 100% !important; }\n\n @page { margin: 0.5cm; }\n\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n\n // Avoid page breaks after a heading\n h2,\n h3 { page-break-after: avoid; }\n\n // Helper to re-allow page breaks in the middle of certain elements (e.g. pre, blockquote, tr)\n .print-break-inside {\n page-break-inside: auto;\n }\n }\n}\n","/* ==========================================================================\n Layout extends and mixins\n========================================================================== */\n\n @import 'xy-grid/xy-grid';\n\n/* ==========================================================================\n Layout\n========================================================================== */\n\n.container {\n @include xy-grid-container;\n}\n\n.grid {\n @include xy-grid;\n\n .grid {\n @include xy-gutters($negative: true);\n }\n}\n\n.cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &--auto {\n @include xy-cell-base(auto);\n }\n\n &--shrink {\n @include xy-cell-base(shrink);\n }\n\n &--full { \n @include xy-cell;\n }\n\n &--half {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n }\n\n &--third { \n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 3);\n }\n }\n\n &--two-thirds {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n }\n\n &--quarter {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n\n @include breakpoint(large) {\n @include xy-cell(1 of 4);\n }\n }\n}\n\n.align {\n &--center {\n @include flex-align($x: center);\n }\n\n &--justify {\n @include flex-align($x: justify);\n }\n\n &--end {\n @include flex-align($x: right);\n }\n}\n\n.v-align {\n &--center {\n height: 100%;\n @include flex-align($y: middle);\n }\n}\n\n.hide-mobile {\n @include breakpoint (small only) {\n display: none;\n }\n}\n\n.show-desktop {\n display: none;\n\n @include breakpoint (large) {\n display: block;\n }\n}\n\n.mb {\n &-2 {\n margin-bottom: $global-margin*2;\n }\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @elseif (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin: 0 auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @elseif type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @elseif ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @elseif ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @elseif ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @elseif ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @elseif ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n }\n }\n\n // Get our gutters from map if available, if not map just return the value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","/* ==========================================================================\n Banner extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Banner\n ========================================================================== */\n\n.banner {\n background-color: get-color(primary);\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n padding: $global-padding/2 0;\n color: $white;\n\n h2 {\n margin: 0;\n }\n }\n}","/* ==========================================================================\n Footer extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Footer\n ========================================================================== */\n\n.footer {\n background-color: $light-gray;\n padding: $global-padding*2 0;\n color: $dark-gray;\n}","/* ==========================================================================\n Hero extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Hero\n ========================================================================== */\n\n.hero {\n background-image: url('../img/hero.jpg');\n background-size: cover;\n background-position: center;\n min-height: 300px;\n height: 60vh;\n margin-bottom: $global-margin*5;\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n height: 100%;\n }\n\n > .container {\n height: 50vh;\n }\n\n &__content {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n\n h1 {\n font-family: 'Kaushan Script', cursive;\n color: $white;\n text-shadow: 0px 6px 10px $black;\n font-size: 3rem;\n text-align: center;\n }\n\n @include breakpoint(medium) {\n h1 {\n font-size: 4rem;\n }\n }\n\n @include breakpoint(large) {\n h1 {\n font-size: 7rem;\n }\n }\n }\n}","/* ==========================================================================\n Masthead extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Masthead\n ========================================================================== */\n\n.masthead {\n &__inner {\n @include xy-grid;\n @include flex-align($x: justify, $y: middle);\n }\n\n &__logo,\n &__cta {\n @include xy-cell-base(shrink);\n }\n\n &__cta {\n .button {\n margin: $global-margin 0;\n }\n }\n}","/* ==========================================================================\n Section extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Section\n ========================================================================== */\n\n.section {\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n @include xy-cell;\n text-align: center;\n\n @include breakpoint(large) {\n @include xy-cell(2 of 3);\n }\n }\n}","/* ==========================================================================\n Tiles extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Tiles\n ========================================================================== */\n\n.tile {\n @include xy-cell(100%, false, $grid-margin-gutters, padding);\n position: relative;\n\n @include breakpoint (medium) {\n @include xy-cell(1 of 3, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (large) {\n @include xy-cell(1 of 4, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (xlarge) {\n @include xy-cell(20%, false, $grid-margin-gutters, padding);\n }\n\n &__content {\n padding: $global-padding;\n background: rgb(0,0,0);\n background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0));\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: 1;\n }\n\n &__body {\n color: $white;\n }\n\n &s {\n list-style-type: none;\n margin: 0 0 $global-margin*5;\n @include xy-grid;\n }\n}","/* ==========================================================================\n Backgrounds extends and mixins\n ========================================================================== */\n\n@mixin bg($name, $hex) {\n &--#{$name} {\n background-color: $hex;\n\n @if color-contrast($hex, $black) < 8 {\n color: $white;\n\n a {\n color: $black;\n\n &:hover,\n &:focus,\n &:active {\n color: scale-color($hex, $lightness: -40%);\n }\n }\n }\n }\n}\n\n/* ==========================================================================\n Backgrounds\n ========================================================================== */\n\n.bg {\n @each $color, $hex in $foundation-palette {\n @include bg($color, $hex);\n }\n\n @include bg( 'primary', get-color(primary) );\n @include bg( 'secondary', get-color(secondary) );\n @include bg( 'light-gray', $light-gray );\n @include bg( 'medium-gray', $medium-gray );\n @include bg( 'dark-gray', $dark-gray );\n}","/* ==========================================================================\n Buttons extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Buttons\n ========================================================================== */\n\n.button {\n @include button(false, $button-background, $button-background-hover, $button-color, solid);\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group button\n////\n\n/// Font family for button elements.\n/// @type Font\n$button-font-family: inherit !default;\n\n/// Padding inside buttons.\n/// @type List\n$button-padding: 0.85em 1em !default;\n\n/// Margin around buttons.\n/// @type List\n$button-margin: 0 0 $global-margin 0 !default;\n\n/// Default fill for buttons. Can either be `solid` or `hollow`.\n/// @type Keyword\n$button-fill: solid !default;\n\n/// Default background color for buttons.\n/// @type Color\n$button-background: $primary-color !default;\n\n/// Background color on hover for buttons.\n/// @type Color\n$button-background-hover: scale-color($button-background, $lightness: -15%) !default;\n\n/// Font color for buttons.\n/// @type List\n$button-color: $white !default;\n\n/// Alternative font color for buttons.\n/// @type List\n$button-color-alt: $black !default;\n\n/// Border radius for buttons, defaulted to global-radius.\n/// @type Number\n$button-radius: $global-radius !default;\n\n/// Border width for hollow outline buttons\n/// @type Number\n$button-hollow-border-width: 1px !default;\n\n/// Sizes for buttons.\n/// @type Map\n$button-sizes: (\n tiny: 0.6rem,\n small: 0.75rem,\n default: 0.9rem,\n large: 1.25rem,\n) !default;\n\n/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.\n/// @type Map\n$button-palette: $foundation-palette !default;\n\n/// opacity for a disabled button.\n/// @type List\n$button-opacity-disabled: 0.25 !default;\n\n/// Background color lightness on hover for buttons.\n/// @type Number\n$button-background-hover-lightness: -20% !default;\n\n/// Color lightness on hover for hollow buttons.\n/// @type Number\n$button-hollow-hover-lightness: -50% !default;\n\n// Internal: flip from margin-right to margin-left for defaults\n@if $global-text-direction == 'rtl' {\n $button-margin: 0 0 $global-margin $global-margin !default;\n}\n\n/// transitions for buttons.\n/// @type List\n$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;\n\n/// Additional responsive classes for .expanded\n/// @type Boolean\n$button-responsive-expanded: false !default;\n\n// TODO: Document button-base() mixin\n@mixin button-base {\n @include disable-mouse-outline;\n display: inline-block;\n vertical-align: middle;\n margin: $button-margin;\n font-family: $button-font-family;\n\n @if (type-of($button-padding) == 'map') {\n @each $size, $padding in $button-padding {\n @include breakpoint($size) {\n padding: $padding;\n }\n }\n }\n @else {\n padding: $button-padding;\n }\n\n -webkit-appearance: none;\n border: 1px solid transparent;\n border-radius: $button-radius;\n transition: $button-transition;\n font-size: map-get($button-sizes, default);\n line-height: 1;\n text-align: center;\n cursor: pointer;\n}\n\n/// Expands a button to make it full-width.\n/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.\n@mixin button-expand($expand: true) {\n @if $expand {\n display: block;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n }\n @else {\n display: inline-block;\n width: auto;\n margin: $button-margin;\n }\n}\n\n/// Sets the visual style of a button.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n@mixin button-style(\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $background-hover-lightness: $button-background-hover-lightness\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n @if $background-hover == auto {\n $background-hover: scale-color($background, $lightness: $background-hover-lightness);\n }\n\n background-color: $background;\n color: $color;\n\n &:hover, &:focus {\n background-color: $background-hover;\n color: $color;\n }\n}\n\n/// Removes background fill on hover and focus for hollow buttons.\n@mixin button-hollow {\n &,\n &:hover,\n &:focus {\n background-color: transparent;\n }\n\n &.disabled,\n &[disabled] {\n &,\n &:hover, &:focus {\n background-color: transparent;\n }\n }\n}\n\n@mixin button-hollow-style(\n $color: $button-background,\n $hover-lightness: $button-hollow-hover-lightness,\n $border-width: $button-hollow-border-width\n) {\n $color-hover: scale-color($color, $lightness: $hover-lightness);\n\n border: $border-width solid $color;\n color: $color;\n\n &:hover, &:focus {\n border-color: $color-hover;\n color: $color-hover;\n &.disabled,\n &[disabled] {\n border: $border-width solid $color;\n color: $color;\n }\n }\n}\n\n/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.\n/// @param [Color] $background [$button-background] - Background color of the disabled button.\n/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.\n@mixin button-disabled(\n $background: $button-background,\n $color: $button-color\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n opacity: $button-opacity-disabled;\n cursor: not-allowed;\n\n &, &:hover, &:focus {\n background-color: $background;\n color: $color;\n }\n}\n\n/// Adds a dropdown arrow to a button.\n/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.\n/// @param {Color} $color [white] - Color of the arrow.\n/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.\n@mixin button-dropdown(\n $size: 0.4em,\n $color: $white,\n $offset: get-side($button-padding, right)\n) {\n &::after {\n @include css-triangle($size, $color, down);\n position: relative;\n top: 0.4em; // Aligns the arrow with the text of the button\n\n display: inline-block;\n float: #{$global-right};\n margin-#{$global-left}: $offset;\n }\n}\n\n/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.\n/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.\n@mixin button(\n $expand: false,\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $style: $button-fill\n) {\n @include button-base;\n\n @if $style == solid {\n @include button-style($background, $background-hover, $color);\n }\n @else if $style == hollow {\n @include button-hollow;\n @include button-hollow-style($background);\n }\n\n @if $expand {\n @include button-expand;\n }\n}\n\n@mixin foundation-button {\n .button {\n @include button;\n\n // Sizes\n @each $size, $value in map-remove($button-sizes, default) {\n &.#{$size} {\n font-size: $value;\n }\n }\n\n &.expanded { @include button-expand; }\n\n @if $button-responsive-expanded {\n @each $size in $breakpoint-classes {\n @include breakpoint(#{$size} only) {\n &.#{$size}-only-expanded {\n @include button-expand;\n }\n }\n @if $size != $-zf-zero-breakpoint {\n @include breakpoint(#{$size} down) {\n &.#{$size}-down-expanded {\n @include button-expand;\n }\n }\n\n @include breakpoint(#{$size}) {\n &.#{$size}-expanded {\n @include button-expand;\n }\n }\n }\n }\n }\n\n // Colors\n @each $name, $color in $button-palette {\n @if $button-fill != hollow {\n &.#{$name} {\n @include button-style($color, auto, auto);\n }\n }\n @else {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n\n &.#{$name}.dropdown::after {\n border-top-color: $color;\n }\n }\n }\n\n // Disabled style\n &.disabled,\n &[disabled] {\n @include button-disabled;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-disabled($color, auto);\n }\n }\n }\n\n // Hollow style\n @if $button-fill != hollow {\n &.hollow {\n @include button-hollow;\n @include button-hollow-style;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n }\n }\n }\n\n // Clear style\n @if $button-fill != clear {\n &.clear {\n @include button-hollow;\n @include button-hollow-style;\n\n &, &:hover, &:focus {\n &, &.disabled, &[disabled] {\n border-color: transparent;\n }\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n\n &, &:hover,\n &:focus {\n &,\n &.disabled,\n &[disabled] {\n border-color: transparent;\n }\n }\n }\n }\n }\n }\n\n // Dropdown arrow\n &.dropdown {\n @include button-dropdown;\n\n @if $button-fill == hollow {\n &::after {\n border-top-color: $button-background;\n }\n }\n\n &.hollow {\n &::after {\n border-top-color: $button-background;\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n &::after {\n border-top-color: $color;\n }\n }\n }\n }\n }\n\n // Button with dropdown arrow only\n &.arrow-only::after {\n top: -0.1em;\n float: none;\n margin-#{$global-left}: 0;\n }\n }\n a.button {\n &:hover,\n &:focus {\n text-decoration: none;\n }\n }\n}\n","/* ==========================================================================\n Table extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Table\n ========================================================================== */\n\ntable {\n @include table($table-stripe);\n margin: $global-margin*6 0;\n text-align: left;\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n// sass-lint:disable force-element-nesting, no-qualifying-elements\n\n////\n/// @group table\n////\n\n/// Default color for table background.\n/// @type Color\n$table-background: $white !default;\n\n/// Default scale for darkening the striped table rows and the table border.\n/// @type Number\n$table-color-scale: 5% !default;\n\n/// Default style for table border.\n/// @type List\n$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;\n\n/// Default padding for table.\n/// @type Number\n$table-padding: rem-calc(8 10 10) !default;\n\n/// Default scale for darkening the table rows on hover.\n/// @type Number\n$table-hover-scale: 2% !default;\n\n/// Default color of standard rows on hover.\n/// @type List\n$table-row-hover: darken($table-background, $table-hover-scale) !default;\n\n/// Default color of striped rows on hover.\n/// @type List\n$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;\n\n/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.\n/// @type Boolean\n$table-is-striped: true !default;\n\n/// Default background color for striped rows.\n/// @type Color\n$table-striped-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.\n/// @type Keyword\n$table-stripe: even !default;\n\n/// Default color for header background.\n/// @type Color\n$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;\n\n/// Default color of header rows on hover.\n/// @type List\n$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;\n\n/// Default color for footer background.\n/// @type Color\n$table-foot-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default color of footer rows on hover.\n/// @type List\n$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;\n\n/// Default font color for header.\n/// @type Color\n$table-head-font-color: $body-font-color !default;\n\n/// Default font color for footer.\n/// @type Color\n$table-foot-font-color: $body-font-color !default;\n\n/// Default value for showing the header when using stacked tables.\n/// @type Boolean\n$show-header-for-stacked: false !default;\n\n/// Breakpoint at which stacked table switches from mobile to desktop view.\n/// @type Breakpoint\n$table-stack-breakpoint: medium !default;\n\n@mixin -zf-table-stripe($stripe: $table-stripe) {\n tr {\n // If stripe is set to even, darken the even rows.\n @if $stripe == even {\n &:nth-child(even) {\n border-bottom: 0;\n background-color: $table-striped-background;\n }\n }\n\n // If stripe is set to odd, darken the odd rows.\n @else if $stripe == odd {\n &:nth-child(odd) {\n background-color: $table-striped-background;\n }\n }\n }\n}\n\n@mixin -zf-table-unstripe() {\n tr {\n border-bottom: 0;\n border-bottom: $table-border;\n background-color: $table-background;\n }\n}\n\n@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {\n thead,\n tbody,\n tfoot {\n border: $table-border;\n background-color: $table-background;\n }\n\n // Caption\n caption {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n }\n\n // Table head\n thead {\n background: $table-head-background;\n color: $table-head-font-color;\n }\n\n // Table foot\n tfoot {\n background: $table-foot-background;\n color: $table-foot-font-color;\n }\n\n // Table head and foot\n thead,\n tfoot {\n // Rows within head and foot\n tr {\n background: transparent;\n }\n\n // Cells within head and foot\n th,\n td {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n text-align: #{$global-left};\n }\n }\n\n // Table rows\n tbody {\n th,\n td {\n padding: $table-padding;\n }\n }\n\n // If tables are striped\n @if $is-striped == true {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n\n &.unstriped {\n tbody {\n @include -zf-table-unstripe();\n background-color: $table-background;\n }\n }\n }\n\n // If tables are not striped\n @else if $is-striped == false {\n tbody {\n @include -zf-table-unstripe();\n }\n\n &.striped {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n }\n }\n}\n\n/// Adds the general styles for tables.\n/// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.\n@mixin table(\n $stripe: $table-stripe,\n $nest: false\n) {\n border-collapse: collapse;\n width: 100%;\n margin-bottom: $global-margin;\n border-radius: $global-radius;\n\n @if $nest {\n @include -zf-table-children-styles($stripe);\n }\n @else {\n @at-root {\n @include -zf-table-children-styles($stripe);\n }\n }\n}\n\n/// Adds the ability to horizontally scroll the table when the content overflows horizontally.\n@mixin table-scroll {\n display: block;\n width: 100%;\n overflow-x: auto;\n}\n\n/// Slightly darkens the table rows on hover.\n@mixin table-hover {\n thead tr {\n //Darkens the table header rows on hover.\n &:hover {\n background-color: $table-head-row-hover;\n }\n }\n\n tfoot tr {\n //Darkens the table footer rows on hover.\n &:hover {\n background-color: $table-foot-row-hover;\n }\n }\n\n tbody tr {\n //Darkens the non-striped table rows on hover.\n &:hover {\n background-color: $table-row-hover;\n }\n }\n\n @if $table-is-striped == true {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &:not(.unstriped) tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &:not(.unstriped) tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n\n @else if $table-is-striped == false {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &.striped tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &.striped tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n}\n\n/// Adds styles for a stacked table. Useful for small-screen layouts.\n/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.\n@mixin table-stack($header: $show-header-for-stacked) {\n @if $header {\n thead {\n th {\n display: block;\n }\n }\n }\n @else {\n thead {\n display: none;\n }\n }\n\n tfoot {\n display: none;\n }\n\n tr,\n th,\n td {\n display: block;\n }\n\n td {\n border-top: 0;\n }\n}\n\n@mixin foundation-table($nest: false) {\n table {\n @include table($nest: $nest);\n }\n\n table.stack {\n @include breakpoint($table-stack-breakpoint down) {\n @include table-stack;\n }\n }\n\n table.scroll {\n @include table-scroll;\n }\n\n table.hover {\n @include table-hover;\n }\n\n .table-scroll {\n overflow-x: auto;\n\n table {\n width: auto;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n"]}
\n// - Code blocks \n// - Abbreviations \n// - Citations \n// - Keystrokes \n\n/// Font family for header elements.\n/// @type String | List\n$header-font-family: $body-font-family !default;\n\n/// Font weight of headers.\n/// @type String\n$header-font-weight: $global-weight-normal !default;\n\n/// Font style (e.g. italicized) of headers.\n/// @type String\n$header-font-style: normal !default;\n\n/// Font stack used for elements that use monospaced type, such as code samples\n/// @type String | List\n$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;\n\n/// Color of headers.\n/// @type Color\n$header-color: inherit !default;\n\n/// Line height of headers.\n/// @type Number\n$header-lineheight: 1.4 !default;\n\n/// Bottom margin of headers.\n/// @type Number\n$header-margin-bottom: 0.5rem !default;\n\n/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.\n/// @type Map\n$header-styles: (\n small: (\n 'h1': ('font-size': 24),\n 'h2': ('font-size': 20),\n 'h3': ('font-size': 19),\n 'h4': ('font-size': 18),\n 'h5': ('font-size': 17),\n 'h6': ('font-size': 16),\n ),\n medium: (\n 'h1': ('font-size': 48),\n 'h2': ('font-size': 40),\n 'h3': ('font-size': 31),\n 'h4': ('font-size': 25),\n 'h5': ('font-size': 20),\n 'h6': ('font-size': 16),\n ),\n) !default;\n\n// $header-styles map is built from $header-sizes in order to ensure downward compatibility\n// when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss\n@function build_from_header-sizes($header-sizes) {\n @warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';\n $header-styles: ();\n @each $size, $headers in $header-sizes {\n $header-map: ();\n @each $header, $font-size in $headers {\n $header-map: map-merge($header-map, ($header: ('font-size': $font-size))); \n }\n $header-styles: map-merge($header-styles, ($size: $header-map));\n }\n @return $header-styles;\n}\n\n// If it exists $headers-sizes is used to build $header-styles. See the documentation.\n@if variable-exists(header-sizes) {\n $header-styles: build_from_header-sizes($header-sizes);\n}\n\n/// Text rendering method of headers.\n/// @type String\n$header-text-rendering: optimizeLegibility !default;\n\n/// Font size of `` elements.\n/// @type Number\n$small-font-size: 80% !default;\n\n/// Color of `` elements when placed inside headers.\n/// @type Color\n$header-small-font-color: $medium-gray !default;\n\n/// Line height of text inside `` elements.\n/// @type Number\n$paragraph-lineheight: 1.6 !default;\n\n/// Bottom margin of paragraphs.\n/// @type Number\n$paragraph-margin-bottom: 1rem !default;\n\n/// Text rendering method for paragraph text.\n/// @type String\n$paragraph-text-rendering: optimizeLegibility !default;\n\n/// Text color of code samples.\n/// @type Color\n$code-color: $black !default;\n\n/// Font family of code samples.\n/// @type String | List\n$code-font-family: $font-family-monospace !default;\n\n/// Font weight of text in code samples.\n/// @type String\n$code-font-weight: $global-weight-normal !default;\n\n/// Background color of code samples.\n/// @type Color\n$code-background: $light-gray !default;\n\n/// Border around code samples.\n/// @type List\n$code-border: 1px solid $medium-gray !default;\n\n/// Padding around text of code samples.\n/// @type Number | List\n$code-padding: rem-calc(2 5 1) !default;\n\n/// Default color for links.\n/// @type Color\n$anchor-color: $primary-color !default;\n\n/// Default color for links on hover.\n/// @type Color\n$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;\n\n/// Default text decoration for links.\n/// @type String\n$anchor-text-decoration: none !default;\n\n/// Default text decoration for links on hover.\n/// @type String\n$anchor-text-decoration-hover: none !default;\n\n/// Maximum width of a divider.\n/// @type Number\n$hr-width: $global-width !default;\n\n/// Default border for a divider.\n/// @type List\n$hr-border: 1px solid $medium-gray !default;\n\n/// Default margin for a divider.\n/// @type Number | List\n$hr-margin: rem-calc(20) auto !default;\n\n/// Line height for items in a list.\n/// @type Number\n$list-lineheight: $paragraph-lineheight !default;\n\n/// Bottom margin for items in a list.\n/// @type Number\n$list-margin-bottom: $paragraph-margin-bottom !default;\n\n/// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`).\n/// @type String\n$list-style-type: disc !default;\n\n/// Positioning for bullets on unordered list items.\n/// @type String\n$list-style-position: outside !default;\n\n/// Left (or right) margin for lists.\n/// @type Number\n$list-side-margin: 1.25rem !default;\n\n/// Left (or right) margin for a list inside a list.\n/// @type Number\n$list-nested-side-margin: 1.25rem !default;\n\n/// Bottom margin for `` elements.\n/// @type Number\n$defnlist-margin-bottom: 1rem !default;\n\n/// Font weight for `` elements.\n/// @type String\n$defnlist-term-weight: $global-weight-bold !default;\n\n/// Spacing between `` and `` elements.\n/// @type Number\n$defnlist-term-margin-bottom: 0.3rem !default;\n\n/// Text color of `` elements.\n/// @type Color\n$blockquote-color: $dark-gray !default;\n\n/// Padding inside a `` element.\n/// @type Number | List\n$blockquote-padding: rem-calc(9 20 0 19) !default;\n\n/// Side border for `` elements.\n/// @type List\n$blockquote-border: 1px solid $medium-gray !default;\n\n/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\n }\n }\n\n // Abbreviations\n abbr, abbr[title] {\n border-bottom: $abbr-underline;\n cursor: help;\n text-decoration: none;\n }\n\n // Figures\n figure {\n margin: 0;\n }\n \n // Code\n code {\n padding: $code-padding;\n\n border: $code-border;\n background-color: $code-background;\n\n font-family: $code-font-family;\n font-weight: $code-font-weight;\n color: $code-color;\n }\n\n // Keystrokes\n kbd {\n margin: 0;\n padding: $keystroke-padding;\n\n background-color: $keystroke-background;\n\n font-family: $keystroke-font;\n color: $keystroke-color;\n\n @if has-value($keystroke-radius) {\n border-radius: $keystroke-radius;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n$global-font-size: 100% !default;\n\n/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.\n///\n/// @param {Number} $num - Number to strip unit from.\n///\n/// @returns {Number} The same number, sans unit.\n@function strip-unit($num) {\n @return $num / ($num * 0 + 1);\n}\n\n/// Converts one or more pixel values into matching rem values.\n///\n/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.\n/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.\n///\n/// @returns {List} A list of converted values.\n@function rem-calc($values, $base: null) {\n $rem-values: ();\n $count: length($values);\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // If the base font size is a %, then multiply it by 16px\n // This is because 100% font size = 16px in most all browsers\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n // Using rem as base allows correct scaling\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if $count == 1 {\n @return -zf-to-rem($values, $base);\n }\n\n @for $i from 1 through $count {\n $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));\n }\n\n @return $rem-values;\n}\n\n// Converts a unitless, pixel, or rem value to em, for use in breakpoints.\n@function -zf-bp-to-em($value) {\n // Pixel and unitless values are converted to rems\n @if unit($value) == 'px' or unitless($value) {\n $value: rem-calc($value, $base: 16px);\n }\n\n // Then the value is converted to ems\n @return strip-unit($value) * 1em;\n}\n\n/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.\n/// @access private\n///\n/// @param {Number} $value - Pixel value to convert.\n/// @param {Number} $base [null] - Base for pixel conversion.\n///\n/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.\n@function -zf-to-rem($value, $base: null) {\n // Check if the value is a number\n @if type-of($value) != 'number' {\n @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';\n @return $value;\n }\n\n // Transform em into rem if someone hands over 'em's\n @if unit($value) == 'em' {\n $value: strip-unit($value) * 1rem;\n }\n\n // Calculate rem if units for $value is not rem or em\n @if unit($value) != 'rem' {\n $value: strip-unit($value) / strip-unit($base) * 1rem;\n }\n\n // Turn 0rem into 0\n @if $value == 0rem {\n $value: 0;\n }\n\n @return $value;\n}\n\n/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.\n///\n/// @param {Number} $value - Value to convert to a unitless line height\n/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size\n///\n/// @return {Number} - Unitless number\n@function unitless-calc($value, $base: null) {\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // First, lets convert our $base to pixels\n\n // If the base font size is a %, then multiply it by 16px\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if unit($base) == 'em' {\n $base: strip-unit($base) * 16px;\n }\n\n // Now lets convert our value to pixels too\n @if unit($value) == '%' {\n $value: ($value / 100%) * $base;\n }\n\n @if unit($value) == 'rem' {\n $value: strip-unit($value) * $base;\n }\n\n @if unit($value) == 'em' {\n $value: strip-unit($value) * $base;\n }\n\n // 'px'\n @if unit($value) == 'px' {\n @return strip-unit($value) / strip-unit($base);\n }\n\n // assume that line-heights greatern then 10 are meant to be absolute in 'px'\n @if unitless($value) and ($value > 10) {\n @return $value / strip-unit($base);\n }\n\n @return $value;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group breakpoints\n////\n\n/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.\n/// @type Map\n$breakpoints: (\n small: 0,\n medium: 640px,\n large: 1024px,\n xlarge: 1200px,\n xxlarge: 1440px,\n) !default;\n\n/// The largest named breakpoint in which to include print as a media type\n/// @type Keyword\n$print-breakpoint: large !default;\n\n$-zf-zero-breakpoint: small !default;\n\n$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');\n\n@if nth(map-values($breakpoints), 1) != 0 {\n @error 'Your smallest breakpoint (defined in $breakpoints) must be set to \"0\".';\n}\n@else {\n $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);\n}\n\n/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.\n/// @type List\n$breakpoint-classes: (small medium large) !default;\n\n/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.\n///\n/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.\n@function breakpoint($val: $-zf-zero-breakpoint) {\n // Size or keyword\n $bp: nth($val, 1);\n // Value for max-width media queries\n $bp-max: 0;\n // Direction of media query (up, down, or only)\n $dir: if(length($val) > 1, nth($val, 2), up);\n // Eventual output\n $str: '';\n // Is it a named media query?\n $named: false;\n\n // Orientation media queries have a unique syntax\n @if $bp == 'landscape' or $bp == 'portrait' {\n @return '(orientation: #{$bp})';\n }\n @else if $bp == 'retina' {\n @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';\n }\n\n // Try to pull a named breakpoint out of the $breakpoints map\n @if type-of($bp) == 'string' {\n @if map-has-key($breakpoints, $bp) {\n @if $dir == 'only' or $dir == 'down' {\n $bp-max: -zf-map-next($breakpoints, $bp);\n }\n\n $bp: map-get($breakpoints, $bp);\n $named: true;\n }\n @else {\n $bp: 0;\n @warn 'breakpoint(): \"#{$val}\" is not defined in your $breakpoints setting.';\n }\n }\n\n // Convert any pixel, rem, or unitless value to em\n $bp: -zf-bp-to-em($bp);\n @if $bp-max {\n $bp-max: -zf-bp-to-em($bp-max) - (1/16);\n }\n\n // Conditions to skip media query creation\n // - It's a named breakpoint that resolved to \"0 down\" or \"0 up\"\n // - It's a numeric breakpoint that resolved to \"0 \" + anything\n @if $bp > 0em or $dir == 'only' or $dir == 'down' {\n // `only` ranges use the format `(min-width: n) and (max-width: n)`\n @if $dir == 'only' {\n // Only named media queries can have an \"only\" range\n @if $named == true {\n // Only use \"min-width\" if the floor is greater than 0\n @if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n\n // Only add \"and\" to the media query if there's a ceiling\n @if $bp-max != null {\n $str: $str + ' and ';\n }\n }\n\n // Only use \"max-width\" if there's a ceiling\n @if $bp-max != null {\n $str: $str + '(max-width: #{$bp-max})';\n }\n }\n @else {\n @warn 'breakpoint(): Only named media queries can have an `only` range.';\n }\n }\n\n // `down` ranges use the format `(max-width: n)`\n @else if $dir == 'down' {\n $max: if($named, $bp-max, $bp);\n\n // Skip media query creation if input value is exactly \"0 down\",\n // unless the function was called as \"small down\", in which case it's just \"small only\"\n @if $named or $bp > 0em {\n @if $max != null {\n $str: $str + '(max-width: #{$max})';\n }\n }\n }\n\n // `up` ranges use the format `(min-width: n)`\n @else if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n }\n }\n\n @return $str;\n}\n\n/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:\n/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.\n/// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.\n/// - If a rem value is passed, the unit will be changed to em.\n/// - If an em value is passed, the value will be used as-is.\n///\n/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.\n///\n/// @output If the breakpoint is \"0px and larger\", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.\n@mixin breakpoint($value) {\n $str: breakpoint($value);\n $bp: index($-zf-breakpoints-keys, $value);\n $pbp: index($-zf-breakpoints-keys, $print-breakpoint);\n\n $old-zf-size: null;\n\n // Make breakpoint size available as a variable\n @if global-variable-exists(-zf-size) {\n $old-zf-size: $-zf-size;\n }\n $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords\n\n // If $str is still an empty string, no media query is needed\n @if $str == '' {\n @content;\n }\n\n // Otherwise, wrap the content in a media query\n @else {\n // For named breakpoints less than or equal to $print-breakpoint, add print to the media types\n @if $bp != null and $bp <= $pbp {\n @media print, screen and #{$str} {\n @content;\n }\n }\n @else {\n @media screen and #{$str} {\n @content;\n }\n }\n }\n\n @if $old-zf-size != null {\n // Restore the old breakpoint size\n $-zf-size: $old-zf-size !global;\n } @else {\n $-zf-size: null !global;\n }\n}\n\n/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.\n/// @access private\n///\n/// @param {Map} $map - Map to convert.\n///\n/// @returns {String} A string containing the map's contents.\n@function -zf-bp-serialize($map) {\n $str: '';\n @each $key, $value in $map {\n $str: $str + $key + '=' + -zf-bp-to-em($value) + '&';\n }\n $str: str-slice($str, 1, -2);\n\n @return $str;\n}\n\n/// Find the next key in a map.\n/// @access private\n///\n/// @param {Map} $map - Map to traverse.\n/// @param {Mixed} $key - Key to use as a starting point.\n///\n/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.\n@function -zf-map-next($map, $key) {\n\n // Store the keys of the map as a list\n $values: map-keys($map);\n\n $i: 0;\n\n // If the Key Exists, Get the index of the key within the map and add 1 to it for the next breakpoint in the map\n @if (map-has-key($map, $key)) {\n $i: index($values, $key) + 1;\n }\n\n // If the key doesn't exist, or it's the last key in the map, return null\n @if ($i > length($map) or $i == 0) {\n @return null;\n }\n // Otherwise, return the value\n @else {\n @return map-get($map, nth($values, $i));\n }\n\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $key - Key to use as last breakpoint.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-breakpoints-less-than($key) {\n $list: ();\n $found_key: false;\n\n @each $name in $-zf-breakpoints-keys {\n @if ($name == $key) {\n $found_key: true;\n }\n @if not $found_key {\n $list: append($list, $name);\n }\n }\n @return $list;\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $breakpoing - a named or non-named breakpoing.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-closest-named-breakpoint($breakpoint) {\n $last: $-zf-zero-breakpoint;\n $found: false;\n\n $value: unitless-calc($breakpoint, 1px);\n @each $key, $val in $breakpoints {\n @if not $found {\n @if unitless-calc($val) > $value {\n $found: true;\n } @else {\n $last: $key;\n }\n }\n }\n\n @return $last;\n}\n\n/// Get a value for a breakpoint from a responsive config map or single value.\n/// - If the config is a single value, return it regardless of `$value`.\n/// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.\n/// - If the config is a map and does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.\n/// @access private\n///\n/// @param {Number|Map} $map - Responsive config map or single value.\n/// @param {Keyword} $value - Breakpoint name to use.\n///\n/// @return {Mixed} The corresponding breakpoint value.\n@function -zf-get-bp-val($map, $value) {\n // If the given map is a single value, return it\n @if type-of($map) == 'number' {\n @return $map;\n }\n\n\n // Check if the breakpoint name exists globally\n @if not map-has-key($breakpoints, $value) {\n @if type-of($value) == 'number' {\n $value: -zf-closest-named-breakpoint($value);\n } @else {\n @return null;\n }\n }\n // Check if the breakpoint name exists in the local config map\n @else if map-has-key($map, $value) {\n // If it does, just return the value\n @return map-get($map, $value);\n }\n // Otherwise, find the next lowest breakpoint and return that value\n @else {\n $anchor: null;\n $found: false;\n\n @each $key, $val in $breakpoints {\n @if not $found {\n @if map-has-key($map, $key) {\n $anchor: $key;\n }\n @if $key == $value {\n $found: true;\n }\n }\n }\n\n @return map-get($map, $anchor);\n }\n}\n\n$small-up: '';\n$small-only: '';\n\n@if map-has-key($breakpoints, small) {\n $small-up: screen;\n $small-only: unquote('screen and #{breakpoint(small only)}');\n}\n\n$medium-up: '';\n$medium-only: '';\n\n@if map-has-key($breakpoints, medium) {\n $medium-up: unquote('screen and #{breakpoint(medium)}');\n $medium-only: unquote('screen and #{breakpoint(medium only)}');\n}\n\n$large-up: '';\n$large-only: '';\n\n@if map-has-key($breakpoints, large) {\n $large-up: unquote('screen and #{breakpoint(large)}');\n $large-only: unquote('screen and #{breakpoint(large only)}');\n}\n\n$xlarge-up: '';\n$xlarge-only: '';\n\n@if map-has-key($breakpoints, xlarge) {\n $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');\n $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');\n}\n\n$xxlarge-up: '';\n\n@if map-has-key($breakpoints, xxlarge) {\n $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group typography-helpers\n////\n\n/// Default font size for lead paragraphs.\n/// @type Number\n$lead-font-size: $global-font-size * 1.25 !default;\n\n/// Default line height for lead paragraphs.\n/// @type String\n$lead-lineheight: 1.6 !default;\n\n/// Default line height for subheaders.\n/// @type Number\n$subheader-lineheight: 1.4 !default;\n\n/// Default font color for subheaders.\n/// @type Color\n$subheader-color: $dark-gray !default;\n\n/// Default font weight for subheaders.\n/// @type String\n$subheader-font-weight: $global-weight-normal !default;\n\n/// Default top margin for subhheaders.\n/// @type Number\n$subheader-margin-top: 0.2rem !default;\n\n/// Default bottom margin for subheaders.\n/// @type Number\n$subheader-margin-bottom: 0.5rem !default;\n\n/// Default font size for statistic numbers.\n/// @type Number\n$stat-font-size: 2.5rem !default;\n\n@mixin foundation-typography-helpers {\n // Use to create a subheading under a main header\n // Make sure you pair the two elements in a element, like this:\n // \n // Heading\n // Subheading\n // \n .subheader {\n margin-top: $subheader-margin-top;\n margin-bottom: $subheader-margin-bottom;\n\n font-weight: $subheader-font-weight;\n line-height: $subheader-lineheight;\n color: $subheader-color;\n }\n\n // Use to style an introductory lead, deck, blurb, etc.\n .lead {\n font-size: $lead-font-size;\n line-height: $lead-lineheight;\n }\n\n // Use to style a large number to display a statistic\n .stat {\n font-size: $stat-font-size;\n line-height: 1;\n\n p + & {\n margin-top: -1rem;\n }\n }\n\n ul, ol {\n // Use to remove numbers from ordered list & bullets from unordered list\n &.no-bullet {\n margin-#{$global-left}: 0;\n list-style: none;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@mixin foundation-text-alignment {\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @each $align in (left, right, center, justify) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-text-#{$align} {\n text-align: $align;\n }\n }\n @else {\n .text-#{$align} {\n text-align: $align;\n }\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// If `true`, all elements will have transparent backgrounds when printed, to save on ink.\n/// @type Boolean\n/// @group global\n$print-transparent-backgrounds: true !default;\n$print-hrefs: true !default;\n\n// sass-lint:disable-all\n\n@mixin foundation-print-styles {\n .show-for-print { display: none !important; }\n\n @media print {\n * {\n @if $print-transparent-backgrounds {\n background: transparent !important;\n }\n\n box-shadow: none !important;\n\n color: black !important; // Black prints faster: h5bp.com/s\n text-shadow: none !important;\n }\n\n .show-for-print { display: block !important; }\n .hide-for-print { display: none !important; }\n\n table.show-for-print { display: table !important; }\n thead.show-for-print { display: table-header-group !important; }\n tbody.show-for-print { display: table-row-group !important; }\n tr.show-for-print { display: table-row !important; }\n td.show-for-print { display: table-cell !important; }\n th.show-for-print { display: table-cell !important; }\n\n // Display the URL of a link after the text\n a,\n a:visited { text-decoration: underline;}\n @if $print-hrefs {\n a[href]:after { content: ' (' attr(href) ')'; }\n }\n\n // Don't display the URL for images or JavaScript/internal links\n .ir a:after,\n a[href^='javascript:']:after,\n a[href^='#']:after { content: ''; }\n\n // Display what an abbreviation stands for after the text\n abbr[title]:after { content: ' (' attr(title) ')'; }\n\n // Prevent page breaks in the middle of a blockquote or preformatted text block\n pre,\n blockquote {\n border: 1px solid $dark-gray;\n page-break-inside: avoid;\n }\n\n // h5bp.com/t\n thead { display: table-header-group; }\n\n tr,\n img { page-break-inside: avoid; }\n\n img { max-width: 100% !important; }\n\n @page { margin: 0.5cm; }\n\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n\n // Avoid page breaks after a heading\n h2,\n h3 { page-break-after: avoid; }\n\n // Helper to re-allow page breaks in the middle of certain elements (e.g. pre, blockquote, tr)\n .print-break-inside {\n page-break-inside: auto;\n }\n }\n}\n","/* ==========================================================================\n Layout extends and mixins\n========================================================================== */\n\n @import 'xy-grid/xy-grid';\n\n/* ==========================================================================\n Layout\n========================================================================== */\n\n.container {\n @include xy-grid-container;\n}\n\n.grid {\n @include xy-grid;\n\n .grid {\n @include xy-gutters($negative: true);\n }\n}\n\n.cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &--auto {\n @include xy-cell-base(auto);\n }\n\n &--shrink {\n @include xy-cell-base(shrink);\n }\n\n &--full { \n @include xy-cell;\n }\n\n &--half {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n }\n\n &--third { \n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 3);\n }\n }\n\n &--two-thirds {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n }\n\n &--quarter {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n\n @include breakpoint(large) {\n @include xy-cell(1 of 4);\n }\n }\n}\n\n.align {\n &--center {\n @include flex-align($x: center);\n }\n\n &--justify {\n @include flex-align($x: justify);\n }\n\n &--end {\n @include flex-align($x: right);\n }\n}\n\n.v-align {\n &--center {\n height: 100%;\n @include flex-align($y: middle);\n }\n}\n\n.hide-mobile {\n @include breakpoint (small only) {\n display: none;\n }\n}\n\n.show-desktop {\n display: none;\n\n @include breakpoint (large) {\n display: block;\n }\n}\n\n.mb {\n &-2 {\n margin-bottom: $global-margin*2;\n }\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @elseif (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin: 0 auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @elseif type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @elseif ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @elseif ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @elseif ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @elseif ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @elseif ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n }\n }\n\n // Get our gutters from map if available, if not map just return the value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","/* ==========================================================================\n Banner extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Banner\n ========================================================================== */\n\n.banner {\n background-color: get-color(primary);\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n padding: $global-padding/2 0;\n color: $white;\n\n h2 {\n margin: 0;\n }\n }\n}","/* ==========================================================================\n Footer extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Footer\n ========================================================================== */\n\n.footer {\n background-color: $light-gray;\n padding: $global-padding*2 0;\n color: $dark-gray;\n}","/* ==========================================================================\n Hero extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Hero\n ========================================================================== */\n\n.hero {\n background-image: url('../img/hero.jpg');\n background-size: cover;\n background-position: center;\n min-height: 300px;\n height: 60vh;\n margin-bottom: $global-margin*5;\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n height: 100%;\n }\n\n > .container {\n height: 50vh;\n }\n\n &__content {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n\n h1 {\n font-family: 'Kaushan Script', cursive;\n color: $white;\n text-shadow: 0px 6px 10px $black;\n font-size: 3rem;\n text-align: center;\n }\n\n @include breakpoint(medium) {\n h1 {\n font-size: 4rem;\n }\n }\n\n @include breakpoint(large) {\n h1 {\n font-size: 7rem;\n }\n }\n }\n}","/* ==========================================================================\n Masthead extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Masthead\n ========================================================================== */\n\n.masthead {\n &__inner {\n @include xy-grid;\n @include flex-align($x: justify, $y: middle);\n }\n\n &__logo,\n &__cta {\n @include xy-cell-base(shrink);\n }\n\n &__cta {\n .button {\n margin: $global-margin 0;\n }\n }\n}","/* ==========================================================================\n Section extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Section\n ========================================================================== */\n\n.section {\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n @include xy-cell;\n text-align: center;\n\n @include breakpoint(large) {\n @include xy-cell(2 of 3);\n }\n }\n}","/* ==========================================================================\n Tiles extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Tiles\n ========================================================================== */\n\n.tile {\n @include xy-cell(100%, false, $grid-margin-gutters, padding);\n position: relative;\n\n @include breakpoint (medium) {\n @include xy-cell(1 of 3, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (large) {\n @include xy-cell(1 of 4, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (xlarge) {\n @include xy-cell(20%, false, $grid-margin-gutters, padding);\n }\n\n &__content {\n padding: $global-padding;\n background: rgb(0,0,0);\n background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0));\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: 1;\n }\n\n &__body {\n color: $white;\n }\n\n &s {\n list-style-type: none;\n margin: 0 0 $global-margin*5;\n @include xy-grid;\n }\n}","/* ==========================================================================\n Backgrounds extends and mixins\n ========================================================================== */\n\n@mixin bg($name, $hex) {\n &--#{$name} {\n background-color: $hex;\n\n @if color-contrast($hex, $black) < 8 {\n color: $white;\n\n a {\n color: $black;\n\n &:hover,\n &:focus,\n &:active {\n color: scale-color($hex, $lightness: -40%);\n }\n }\n }\n }\n}\n\n/* ==========================================================================\n Backgrounds\n ========================================================================== */\n\n.bg {\n @each $color, $hex in $foundation-palette {\n @include bg($color, $hex);\n }\n\n @include bg( 'primary', get-color(primary) );\n @include bg( 'secondary', get-color(secondary) );\n @include bg( 'light-gray', $light-gray );\n @include bg( 'medium-gray', $medium-gray );\n @include bg( 'dark-gray', $dark-gray );\n}","/* ==========================================================================\n Buttons extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Buttons\n ========================================================================== */\n\n.button {\n @include button(false, $button-background, $button-background-hover, $button-color, solid);\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group button\n////\n\n/// Font family for button elements.\n/// @type Font\n$button-font-family: inherit !default;\n\n/// Padding inside buttons.\n/// @type List\n$button-padding: 0.85em 1em !default;\n\n/// Margin around buttons.\n/// @type List\n$button-margin: 0 0 $global-margin 0 !default;\n\n/// Default fill for buttons. Can either be `solid` or `hollow`.\n/// @type Keyword\n$button-fill: solid !default;\n\n/// Default background color for buttons.\n/// @type Color\n$button-background: $primary-color !default;\n\n/// Background color on hover for buttons.\n/// @type Color\n$button-background-hover: scale-color($button-background, $lightness: -15%) !default;\n\n/// Font color for buttons.\n/// @type List\n$button-color: $white !default;\n\n/// Alternative font color for buttons.\n/// @type List\n$button-color-alt: $black !default;\n\n/// Border radius for buttons, defaulted to global-radius.\n/// @type Number\n$button-radius: $global-radius !default;\n\n/// Border width for hollow outline buttons\n/// @type Number\n$button-hollow-border-width: 1px !default;\n\n/// Sizes for buttons.\n/// @type Map\n$button-sizes: (\n tiny: 0.6rem,\n small: 0.75rem,\n default: 0.9rem,\n large: 1.25rem,\n) !default;\n\n/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.\n/// @type Map\n$button-palette: $foundation-palette !default;\n\n/// opacity for a disabled button.\n/// @type List\n$button-opacity-disabled: 0.25 !default;\n\n/// Background color lightness on hover for buttons.\n/// @type Number\n$button-background-hover-lightness: -20% !default;\n\n/// Color lightness on hover for hollow buttons.\n/// @type Number\n$button-hollow-hover-lightness: -50% !default;\n\n// Internal: flip from margin-right to margin-left for defaults\n@if $global-text-direction == 'rtl' {\n $button-margin: 0 0 $global-margin $global-margin !default;\n}\n\n/// transitions for buttons.\n/// @type List\n$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;\n\n/// Additional responsive classes for .expanded\n/// @type Boolean\n$button-responsive-expanded: false !default;\n\n// TODO: Document button-base() mixin\n@mixin button-base {\n @include disable-mouse-outline;\n display: inline-block;\n vertical-align: middle;\n margin: $button-margin;\n font-family: $button-font-family;\n\n @if (type-of($button-padding) == 'map') {\n @each $size, $padding in $button-padding {\n @include breakpoint($size) {\n padding: $padding;\n }\n }\n }\n @else {\n padding: $button-padding;\n }\n\n -webkit-appearance: none;\n border: 1px solid transparent;\n border-radius: $button-radius;\n transition: $button-transition;\n font-size: map-get($button-sizes, default);\n line-height: 1;\n text-align: center;\n cursor: pointer;\n}\n\n/// Expands a button to make it full-width.\n/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.\n@mixin button-expand($expand: true) {\n @if $expand {\n display: block;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n }\n @else {\n display: inline-block;\n width: auto;\n margin: $button-margin;\n }\n}\n\n/// Sets the visual style of a button.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n@mixin button-style(\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $background-hover-lightness: $button-background-hover-lightness\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n @if $background-hover == auto {\n $background-hover: scale-color($background, $lightness: $background-hover-lightness);\n }\n\n background-color: $background;\n color: $color;\n\n &:hover, &:focus {\n background-color: $background-hover;\n color: $color;\n }\n}\n\n/// Removes background fill on hover and focus for hollow buttons.\n@mixin button-hollow {\n &,\n &:hover,\n &:focus {\n background-color: transparent;\n }\n\n &.disabled,\n &[disabled] {\n &,\n &:hover, &:focus {\n background-color: transparent;\n }\n }\n}\n\n@mixin button-hollow-style(\n $color: $button-background,\n $hover-lightness: $button-hollow-hover-lightness,\n $border-width: $button-hollow-border-width\n) {\n $color-hover: scale-color($color, $lightness: $hover-lightness);\n\n border: $border-width solid $color;\n color: $color;\n\n &:hover, &:focus {\n border-color: $color-hover;\n color: $color-hover;\n &.disabled,\n &[disabled] {\n border: $border-width solid $color;\n color: $color;\n }\n }\n}\n\n/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.\n/// @param [Color] $background [$button-background] - Background color of the disabled button.\n/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.\n@mixin button-disabled(\n $background: $button-background,\n $color: $button-color\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n opacity: $button-opacity-disabled;\n cursor: not-allowed;\n\n &, &:hover, &:focus {\n background-color: $background;\n color: $color;\n }\n}\n\n/// Adds a dropdown arrow to a button.\n/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.\n/// @param {Color} $color [white] - Color of the arrow.\n/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.\n@mixin button-dropdown(\n $size: 0.4em,\n $color: $white,\n $offset: get-side($button-padding, right)\n) {\n &::after {\n @include css-triangle($size, $color, down);\n position: relative;\n top: 0.4em; // Aligns the arrow with the text of the button\n\n display: inline-block;\n float: #{$global-right};\n margin-#{$global-left}: $offset;\n }\n}\n\n/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.\n/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.\n@mixin button(\n $expand: false,\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $style: $button-fill\n) {\n @include button-base;\n\n @if $style == solid {\n @include button-style($background, $background-hover, $color);\n }\n @else if $style == hollow {\n @include button-hollow;\n @include button-hollow-style($background);\n }\n\n @if $expand {\n @include button-expand;\n }\n}\n\n@mixin foundation-button {\n .button {\n @include button;\n\n // Sizes\n @each $size, $value in map-remove($button-sizes, default) {\n &.#{$size} {\n font-size: $value;\n }\n }\n\n &.expanded { @include button-expand; }\n\n @if $button-responsive-expanded {\n @each $size in $breakpoint-classes {\n @include breakpoint(#{$size} only) {\n &.#{$size}-only-expanded {\n @include button-expand;\n }\n }\n @if $size != $-zf-zero-breakpoint {\n @include breakpoint(#{$size} down) {\n &.#{$size}-down-expanded {\n @include button-expand;\n }\n }\n\n @include breakpoint(#{$size}) {\n &.#{$size}-expanded {\n @include button-expand;\n }\n }\n }\n }\n }\n\n // Colors\n @each $name, $color in $button-palette {\n @if $button-fill != hollow {\n &.#{$name} {\n @include button-style($color, auto, auto);\n }\n }\n @else {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n\n &.#{$name}.dropdown::after {\n border-top-color: $color;\n }\n }\n }\n\n // Disabled style\n &.disabled,\n &[disabled] {\n @include button-disabled;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-disabled($color, auto);\n }\n }\n }\n\n // Hollow style\n @if $button-fill != hollow {\n &.hollow {\n @include button-hollow;\n @include button-hollow-style;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n }\n }\n }\n\n // Clear style\n @if $button-fill != clear {\n &.clear {\n @include button-hollow;\n @include button-hollow-style;\n\n &, &:hover, &:focus {\n &, &.disabled, &[disabled] {\n border-color: transparent;\n }\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n\n &, &:hover,\n &:focus {\n &,\n &.disabled,\n &[disabled] {\n border-color: transparent;\n }\n }\n }\n }\n }\n }\n\n // Dropdown arrow\n &.dropdown {\n @include button-dropdown;\n\n @if $button-fill == hollow {\n &::after {\n border-top-color: $button-background;\n }\n }\n\n &.hollow {\n &::after {\n border-top-color: $button-background;\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n &::after {\n border-top-color: $color;\n }\n }\n }\n }\n }\n\n // Button with dropdown arrow only\n &.arrow-only::after {\n top: -0.1em;\n float: none;\n margin-#{$global-left}: 0;\n }\n }\n a.button {\n &:hover,\n &:focus {\n text-decoration: none;\n }\n }\n}\n","/* ==========================================================================\n Table extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Table\n ========================================================================== */\n\ntable {\n @include table($table-stripe);\n margin: $global-margin*6 0;\n text-align: left;\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n// sass-lint:disable force-element-nesting, no-qualifying-elements\n\n////\n/// @group table\n////\n\n/// Default color for table background.\n/// @type Color\n$table-background: $white !default;\n\n/// Default scale for darkening the striped table rows and the table border.\n/// @type Number\n$table-color-scale: 5% !default;\n\n/// Default style for table border.\n/// @type List\n$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;\n\n/// Default padding for table.\n/// @type Number\n$table-padding: rem-calc(8 10 10) !default;\n\n/// Default scale for darkening the table rows on hover.\n/// @type Number\n$table-hover-scale: 2% !default;\n\n/// Default color of standard rows on hover.\n/// @type List\n$table-row-hover: darken($table-background, $table-hover-scale) !default;\n\n/// Default color of striped rows on hover.\n/// @type List\n$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;\n\n/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.\n/// @type Boolean\n$table-is-striped: true !default;\n\n/// Default background color for striped rows.\n/// @type Color\n$table-striped-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.\n/// @type Keyword\n$table-stripe: even !default;\n\n/// Default color for header background.\n/// @type Color\n$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;\n\n/// Default color of header rows on hover.\n/// @type List\n$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;\n\n/// Default color for footer background.\n/// @type Color\n$table-foot-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default color of footer rows on hover.\n/// @type List\n$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;\n\n/// Default font color for header.\n/// @type Color\n$table-head-font-color: $body-font-color !default;\n\n/// Default font color for footer.\n/// @type Color\n$table-foot-font-color: $body-font-color !default;\n\n/// Default value for showing the header when using stacked tables.\n/// @type Boolean\n$show-header-for-stacked: false !default;\n\n/// Breakpoint at which stacked table switches from mobile to desktop view.\n/// @type Breakpoint\n$table-stack-breakpoint: medium !default;\n\n@mixin -zf-table-stripe($stripe: $table-stripe) {\n tr {\n // If stripe is set to even, darken the even rows.\n @if $stripe == even {\n &:nth-child(even) {\n border-bottom: 0;\n background-color: $table-striped-background;\n }\n }\n\n // If stripe is set to odd, darken the odd rows.\n @else if $stripe == odd {\n &:nth-child(odd) {\n background-color: $table-striped-background;\n }\n }\n }\n}\n\n@mixin -zf-table-unstripe() {\n tr {\n border-bottom: 0;\n border-bottom: $table-border;\n background-color: $table-background;\n }\n}\n\n@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {\n thead,\n tbody,\n tfoot {\n border: $table-border;\n background-color: $table-background;\n }\n\n // Caption\n caption {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n }\n\n // Table head\n thead {\n background: $table-head-background;\n color: $table-head-font-color;\n }\n\n // Table foot\n tfoot {\n background: $table-foot-background;\n color: $table-foot-font-color;\n }\n\n // Table head and foot\n thead,\n tfoot {\n // Rows within head and foot\n tr {\n background: transparent;\n }\n\n // Cells within head and foot\n th,\n td {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n text-align: #{$global-left};\n }\n }\n\n // Table rows\n tbody {\n th,\n td {\n padding: $table-padding;\n }\n }\n\n // If tables are striped\n @if $is-striped == true {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n\n &.unstriped {\n tbody {\n @include -zf-table-unstripe();\n background-color: $table-background;\n }\n }\n }\n\n // If tables are not striped\n @else if $is-striped == false {\n tbody {\n @include -zf-table-unstripe();\n }\n\n &.striped {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n }\n }\n}\n\n/// Adds the general styles for tables.\n/// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.\n@mixin table(\n $stripe: $table-stripe,\n $nest: false\n) {\n border-collapse: collapse;\n width: 100%;\n margin-bottom: $global-margin;\n border-radius: $global-radius;\n\n @if $nest {\n @include -zf-table-children-styles($stripe);\n }\n @else {\n @at-root {\n @include -zf-table-children-styles($stripe);\n }\n }\n}\n\n/// Adds the ability to horizontally scroll the table when the content overflows horizontally.\n@mixin table-scroll {\n display: block;\n width: 100%;\n overflow-x: auto;\n}\n\n/// Slightly darkens the table rows on hover.\n@mixin table-hover {\n thead tr {\n //Darkens the table header rows on hover.\n &:hover {\n background-color: $table-head-row-hover;\n }\n }\n\n tfoot tr {\n //Darkens the table footer rows on hover.\n &:hover {\n background-color: $table-foot-row-hover;\n }\n }\n\n tbody tr {\n //Darkens the non-striped table rows on hover.\n &:hover {\n background-color: $table-row-hover;\n }\n }\n\n @if $table-is-striped == true {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &:not(.unstriped) tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &:not(.unstriped) tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n\n @else if $table-is-striped == false {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &.striped tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &.striped tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n}\n\n/// Adds styles for a stacked table. Useful for small-screen layouts.\n/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.\n@mixin table-stack($header: $show-header-for-stacked) {\n @if $header {\n thead {\n th {\n display: block;\n }\n }\n }\n @else {\n thead {\n display: none;\n }\n }\n\n tfoot {\n display: none;\n }\n\n tr,\n th,\n td {\n display: block;\n }\n\n td {\n border-top: 0;\n }\n}\n\n@mixin foundation-table($nest: false) {\n table {\n @include table($nest: $nest);\n }\n\n table.stack {\n @include breakpoint($table-stack-breakpoint down) {\n @include table-stack;\n }\n }\n\n table.scroll {\n @include table-scroll;\n }\n\n table.hover {\n @include table-hover;\n }\n\n .table-scroll {\n overflow-x: auto;\n\n table {\n width: auto;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n"]}
\n// - Abbreviations \n// - Citations \n// - Keystrokes \n\n/// Font family for header elements.\n/// @type String | List\n$header-font-family: $body-font-family !default;\n\n/// Font weight of headers.\n/// @type String\n$header-font-weight: $global-weight-normal !default;\n\n/// Font style (e.g. italicized) of headers.\n/// @type String\n$header-font-style: normal !default;\n\n/// Font stack used for elements that use monospaced type, such as code samples\n/// @type String | List\n$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;\n\n/// Color of headers.\n/// @type Color\n$header-color: inherit !default;\n\n/// Line height of headers.\n/// @type Number\n$header-lineheight: 1.4 !default;\n\n/// Bottom margin of headers.\n/// @type Number\n$header-margin-bottom: 0.5rem !default;\n\n/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.\n/// @type Map\n$header-styles: (\n small: (\n 'h1': ('font-size': 24),\n 'h2': ('font-size': 20),\n 'h3': ('font-size': 19),\n 'h4': ('font-size': 18),\n 'h5': ('font-size': 17),\n 'h6': ('font-size': 16),\n ),\n medium: (\n 'h1': ('font-size': 48),\n 'h2': ('font-size': 40),\n 'h3': ('font-size': 31),\n 'h4': ('font-size': 25),\n 'h5': ('font-size': 20),\n 'h6': ('font-size': 16),\n ),\n) !default;\n\n// $header-styles map is built from $header-sizes in order to ensure downward compatibility\n// when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss\n@function build_from_header-sizes($header-sizes) {\n @warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';\n $header-styles: ();\n @each $size, $headers in $header-sizes {\n $header-map: ();\n @each $header, $font-size in $headers {\n $header-map: map-merge($header-map, ($header: ('font-size': $font-size))); \n }\n $header-styles: map-merge($header-styles, ($size: $header-map));\n }\n @return $header-styles;\n}\n\n// If it exists $headers-sizes is used to build $header-styles. See the documentation.\n@if variable-exists(header-sizes) {\n $header-styles: build_from_header-sizes($header-sizes);\n}\n\n/// Text rendering method of headers.\n/// @type String\n$header-text-rendering: optimizeLegibility !default;\n\n/// Font size of `` elements.\n/// @type Number\n$small-font-size: 80% !default;\n\n/// Color of `` elements when placed inside headers.\n/// @type Color\n$header-small-font-color: $medium-gray !default;\n\n/// Line height of text inside `` elements.\n/// @type Number\n$paragraph-lineheight: 1.6 !default;\n\n/// Bottom margin of paragraphs.\n/// @type Number\n$paragraph-margin-bottom: 1rem !default;\n\n/// Text rendering method for paragraph text.\n/// @type String\n$paragraph-text-rendering: optimizeLegibility !default;\n\n/// Text color of code samples.\n/// @type Color\n$code-color: $black !default;\n\n/// Font family of code samples.\n/// @type String | List\n$code-font-family: $font-family-monospace !default;\n\n/// Font weight of text in code samples.\n/// @type String\n$code-font-weight: $global-weight-normal !default;\n\n/// Background color of code samples.\n/// @type Color\n$code-background: $light-gray !default;\n\n/// Border around code samples.\n/// @type List\n$code-border: 1px solid $medium-gray !default;\n\n/// Padding around text of code samples.\n/// @type Number | List\n$code-padding: rem-calc(2 5 1) !default;\n\n/// Default color for links.\n/// @type Color\n$anchor-color: $primary-color !default;\n\n/// Default color for links on hover.\n/// @type Color\n$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;\n\n/// Default text decoration for links.\n/// @type String\n$anchor-text-decoration: none !default;\n\n/// Default text decoration for links on hover.\n/// @type String\n$anchor-text-decoration-hover: none !default;\n\n/// Maximum width of a divider.\n/// @type Number\n$hr-width: $global-width !default;\n\n/// Default border for a divider.\n/// @type List\n$hr-border: 1px solid $medium-gray !default;\n\n/// Default margin for a divider.\n/// @type Number | List\n$hr-margin: rem-calc(20) auto !default;\n\n/// Line height for items in a list.\n/// @type Number\n$list-lineheight: $paragraph-lineheight !default;\n\n/// Bottom margin for items in a list.\n/// @type Number\n$list-margin-bottom: $paragraph-margin-bottom !default;\n\n/// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`).\n/// @type String\n$list-style-type: disc !default;\n\n/// Positioning for bullets on unordered list items.\n/// @type String\n$list-style-position: outside !default;\n\n/// Left (or right) margin for lists.\n/// @type Number\n$list-side-margin: 1.25rem !default;\n\n/// Left (or right) margin for a list inside a list.\n/// @type Number\n$list-nested-side-margin: 1.25rem !default;\n\n/// Bottom margin for `` elements.\n/// @type Number\n$defnlist-margin-bottom: 1rem !default;\n\n/// Font weight for `` elements.\n/// @type String\n$defnlist-term-weight: $global-weight-bold !default;\n\n/// Spacing between `` and `` elements.\n/// @type Number\n$defnlist-term-margin-bottom: 0.3rem !default;\n\n/// Text color of `` elements.\n/// @type Color\n$blockquote-color: $dark-gray !default;\n\n/// Padding inside a `` element.\n/// @type Number | List\n$blockquote-padding: rem-calc(9 20 0 19) !default;\n\n/// Side border for `` elements.\n/// @type List\n$blockquote-border: 1px solid $medium-gray !default;\n\n/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\n }\n }\n\n // Abbreviations\n abbr, abbr[title] {\n border-bottom: $abbr-underline;\n cursor: help;\n text-decoration: none;\n }\n\n // Figures\n figure {\n margin: 0;\n }\n \n // Code\n code {\n padding: $code-padding;\n\n border: $code-border;\n background-color: $code-background;\n\n font-family: $code-font-family;\n font-weight: $code-font-weight;\n color: $code-color;\n }\n\n // Keystrokes\n kbd {\n margin: 0;\n padding: $keystroke-padding;\n\n background-color: $keystroke-background;\n\n font-family: $keystroke-font;\n color: $keystroke-color;\n\n @if has-value($keystroke-radius) {\n border-radius: $keystroke-radius;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n$global-font-size: 100% !default;\n\n/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.\n///\n/// @param {Number} $num - Number to strip unit from.\n///\n/// @returns {Number} The same number, sans unit.\n@function strip-unit($num) {\n @return $num / ($num * 0 + 1);\n}\n\n/// Converts one or more pixel values into matching rem values.\n///\n/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.\n/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.\n///\n/// @returns {List} A list of converted values.\n@function rem-calc($values, $base: null) {\n $rem-values: ();\n $count: length($values);\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // If the base font size is a %, then multiply it by 16px\n // This is because 100% font size = 16px in most all browsers\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n // Using rem as base allows correct scaling\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if $count == 1 {\n @return -zf-to-rem($values, $base);\n }\n\n @for $i from 1 through $count {\n $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));\n }\n\n @return $rem-values;\n}\n\n// Converts a unitless, pixel, or rem value to em, for use in breakpoints.\n@function -zf-bp-to-em($value) {\n // Pixel and unitless values are converted to rems\n @if unit($value) == 'px' or unitless($value) {\n $value: rem-calc($value, $base: 16px);\n }\n\n // Then the value is converted to ems\n @return strip-unit($value) * 1em;\n}\n\n/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.\n/// @access private\n///\n/// @param {Number} $value - Pixel value to convert.\n/// @param {Number} $base [null] - Base for pixel conversion.\n///\n/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.\n@function -zf-to-rem($value, $base: null) {\n // Check if the value is a number\n @if type-of($value) != 'number' {\n @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';\n @return $value;\n }\n\n // Transform em into rem if someone hands over 'em's\n @if unit($value) == 'em' {\n $value: strip-unit($value) * 1rem;\n }\n\n // Calculate rem if units for $value is not rem or em\n @if unit($value) != 'rem' {\n $value: strip-unit($value) / strip-unit($base) * 1rem;\n }\n\n // Turn 0rem into 0\n @if $value == 0rem {\n $value: 0;\n }\n\n @return $value;\n}\n\n/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.\n///\n/// @param {Number} $value - Value to convert to a unitless line height\n/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size\n///\n/// @return {Number} - Unitless number\n@function unitless-calc($value, $base: null) {\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // First, lets convert our $base to pixels\n\n // If the base font size is a %, then multiply it by 16px\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if unit($base) == 'em' {\n $base: strip-unit($base) * 16px;\n }\n\n // Now lets convert our value to pixels too\n @if unit($value) == '%' {\n $value: ($value / 100%) * $base;\n }\n\n @if unit($value) == 'rem' {\n $value: strip-unit($value) * $base;\n }\n\n @if unit($value) == 'em' {\n $value: strip-unit($value) * $base;\n }\n\n // 'px'\n @if unit($value) == 'px' {\n @return strip-unit($value) / strip-unit($base);\n }\n\n // assume that line-heights greatern then 10 are meant to be absolute in 'px'\n @if unitless($value) and ($value > 10) {\n @return $value / strip-unit($base);\n }\n\n @return $value;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group breakpoints\n////\n\n/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.\n/// @type Map\n$breakpoints: (\n small: 0,\n medium: 640px,\n large: 1024px,\n xlarge: 1200px,\n xxlarge: 1440px,\n) !default;\n\n/// The largest named breakpoint in which to include print as a media type\n/// @type Keyword\n$print-breakpoint: large !default;\n\n$-zf-zero-breakpoint: small !default;\n\n$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');\n\n@if nth(map-values($breakpoints), 1) != 0 {\n @error 'Your smallest breakpoint (defined in $breakpoints) must be set to \"0\".';\n}\n@else {\n $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);\n}\n\n/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.\n/// @type List\n$breakpoint-classes: (small medium large) !default;\n\n/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.\n///\n/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.\n@function breakpoint($val: $-zf-zero-breakpoint) {\n // Size or keyword\n $bp: nth($val, 1);\n // Value for max-width media queries\n $bp-max: 0;\n // Direction of media query (up, down, or only)\n $dir: if(length($val) > 1, nth($val, 2), up);\n // Eventual output\n $str: '';\n // Is it a named media query?\n $named: false;\n\n // Orientation media queries have a unique syntax\n @if $bp == 'landscape' or $bp == 'portrait' {\n @return '(orientation: #{$bp})';\n }\n @else if $bp == 'retina' {\n @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';\n }\n\n // Try to pull a named breakpoint out of the $breakpoints map\n @if type-of($bp) == 'string' {\n @if map-has-key($breakpoints, $bp) {\n @if $dir == 'only' or $dir == 'down' {\n $bp-max: -zf-map-next($breakpoints, $bp);\n }\n\n $bp: map-get($breakpoints, $bp);\n $named: true;\n }\n @else {\n $bp: 0;\n @warn 'breakpoint(): \"#{$val}\" is not defined in your $breakpoints setting.';\n }\n }\n\n // Convert any pixel, rem, or unitless value to em\n $bp: -zf-bp-to-em($bp);\n @if $bp-max {\n $bp-max: -zf-bp-to-em($bp-max) - (1/16);\n }\n\n // Conditions to skip media query creation\n // - It's a named breakpoint that resolved to \"0 down\" or \"0 up\"\n // - It's a numeric breakpoint that resolved to \"0 \" + anything\n @if $bp > 0em or $dir == 'only' or $dir == 'down' {\n // `only` ranges use the format `(min-width: n) and (max-width: n)`\n @if $dir == 'only' {\n // Only named media queries can have an \"only\" range\n @if $named == true {\n // Only use \"min-width\" if the floor is greater than 0\n @if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n\n // Only add \"and\" to the media query if there's a ceiling\n @if $bp-max != null {\n $str: $str + ' and ';\n }\n }\n\n // Only use \"max-width\" if there's a ceiling\n @if $bp-max != null {\n $str: $str + '(max-width: #{$bp-max})';\n }\n }\n @else {\n @warn 'breakpoint(): Only named media queries can have an `only` range.';\n }\n }\n\n // `down` ranges use the format `(max-width: n)`\n @else if $dir == 'down' {\n $max: if($named, $bp-max, $bp);\n\n // Skip media query creation if input value is exactly \"0 down\",\n // unless the function was called as \"small down\", in which case it's just \"small only\"\n @if $named or $bp > 0em {\n @if $max != null {\n $str: $str + '(max-width: #{$max})';\n }\n }\n }\n\n // `up` ranges use the format `(min-width: n)`\n @else if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n }\n }\n\n @return $str;\n}\n\n/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:\n/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.\n/// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.\n/// - If a rem value is passed, the unit will be changed to em.\n/// - If an em value is passed, the value will be used as-is.\n///\n/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.\n///\n/// @output If the breakpoint is \"0px and larger\", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.\n@mixin breakpoint($value) {\n $str: breakpoint($value);\n $bp: index($-zf-breakpoints-keys, $value);\n $pbp: index($-zf-breakpoints-keys, $print-breakpoint);\n\n $old-zf-size: null;\n\n // Make breakpoint size available as a variable\n @if global-variable-exists(-zf-size) {\n $old-zf-size: $-zf-size;\n }\n $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords\n\n // If $str is still an empty string, no media query is needed\n @if $str == '' {\n @content;\n }\n\n // Otherwise, wrap the content in a media query\n @else {\n // For named breakpoints less than or equal to $print-breakpoint, add print to the media types\n @if $bp != null and $bp <= $pbp {\n @media print, screen and #{$str} {\n @content;\n }\n }\n @else {\n @media screen and #{$str} {\n @content;\n }\n }\n }\n\n @if $old-zf-size != null {\n // Restore the old breakpoint size\n $-zf-size: $old-zf-size !global;\n } @else {\n $-zf-size: null !global;\n }\n}\n\n/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.\n/// @access private\n///\n/// @param {Map} $map - Map to convert.\n///\n/// @returns {String} A string containing the map's contents.\n@function -zf-bp-serialize($map) {\n $str: '';\n @each $key, $value in $map {\n $str: $str + $key + '=' + -zf-bp-to-em($value) + '&';\n }\n $str: str-slice($str, 1, -2);\n\n @return $str;\n}\n\n/// Find the next key in a map.\n/// @access private\n///\n/// @param {Map} $map - Map to traverse.\n/// @param {Mixed} $key - Key to use as a starting point.\n///\n/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.\n@function -zf-map-next($map, $key) {\n\n // Store the keys of the map as a list\n $values: map-keys($map);\n\n $i: 0;\n\n // If the Key Exists, Get the index of the key within the map and add 1 to it for the next breakpoint in the map\n @if (map-has-key($map, $key)) {\n $i: index($values, $key) + 1;\n }\n\n // If the key doesn't exist, or it's the last key in the map, return null\n @if ($i > length($map) or $i == 0) {\n @return null;\n }\n // Otherwise, return the value\n @else {\n @return map-get($map, nth($values, $i));\n }\n\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $key - Key to use as last breakpoint.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-breakpoints-less-than($key) {\n $list: ();\n $found_key: false;\n\n @each $name in $-zf-breakpoints-keys {\n @if ($name == $key) {\n $found_key: true;\n }\n @if not $found_key {\n $list: append($list, $name);\n }\n }\n @return $list;\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $breakpoing - a named or non-named breakpoing.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-closest-named-breakpoint($breakpoint) {\n $last: $-zf-zero-breakpoint;\n $found: false;\n\n $value: unitless-calc($breakpoint, 1px);\n @each $key, $val in $breakpoints {\n @if not $found {\n @if unitless-calc($val) > $value {\n $found: true;\n } @else {\n $last: $key;\n }\n }\n }\n\n @return $last;\n}\n\n/// Get a value for a breakpoint from a responsive config map or single value.\n/// - If the config is a single value, return it regardless of `$value`.\n/// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.\n/// - If the config is a map and does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.\n/// @access private\n///\n/// @param {Number|Map} $map - Responsive config map or single value.\n/// @param {Keyword} $value - Breakpoint name to use.\n///\n/// @return {Mixed} The corresponding breakpoint value.\n@function -zf-get-bp-val($map, $value) {\n // If the given map is a single value, return it\n @if type-of($map) == 'number' {\n @return $map;\n }\n\n\n // Check if the breakpoint name exists globally\n @if not map-has-key($breakpoints, $value) {\n @if type-of($value) == 'number' {\n $value: -zf-closest-named-breakpoint($value);\n } @else {\n @return null;\n }\n }\n // Check if the breakpoint name exists in the local config map\n @else if map-has-key($map, $value) {\n // If it does, just return the value\n @return map-get($map, $value);\n }\n // Otherwise, find the next lowest breakpoint and return that value\n @else {\n $anchor: null;\n $found: false;\n\n @each $key, $val in $breakpoints {\n @if not $found {\n @if map-has-key($map, $key) {\n $anchor: $key;\n }\n @if $key == $value {\n $found: true;\n }\n }\n }\n\n @return map-get($map, $anchor);\n }\n}\n\n$small-up: '';\n$small-only: '';\n\n@if map-has-key($breakpoints, small) {\n $small-up: screen;\n $small-only: unquote('screen and #{breakpoint(small only)}');\n}\n\n$medium-up: '';\n$medium-only: '';\n\n@if map-has-key($breakpoints, medium) {\n $medium-up: unquote('screen and #{breakpoint(medium)}');\n $medium-only: unquote('screen and #{breakpoint(medium only)}');\n}\n\n$large-up: '';\n$large-only: '';\n\n@if map-has-key($breakpoints, large) {\n $large-up: unquote('screen and #{breakpoint(large)}');\n $large-only: unquote('screen and #{breakpoint(large only)}');\n}\n\n$xlarge-up: '';\n$xlarge-only: '';\n\n@if map-has-key($breakpoints, xlarge) {\n $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');\n $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');\n}\n\n$xxlarge-up: '';\n\n@if map-has-key($breakpoints, xxlarge) {\n $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group typography-helpers\n////\n\n/// Default font size for lead paragraphs.\n/// @type Number\n$lead-font-size: $global-font-size * 1.25 !default;\n\n/// Default line height for lead paragraphs.\n/// @type String\n$lead-lineheight: 1.6 !default;\n\n/// Default line height for subheaders.\n/// @type Number\n$subheader-lineheight: 1.4 !default;\n\n/// Default font color for subheaders.\n/// @type Color\n$subheader-color: $dark-gray !default;\n\n/// Default font weight for subheaders.\n/// @type String\n$subheader-font-weight: $global-weight-normal !default;\n\n/// Default top margin for subhheaders.\n/// @type Number\n$subheader-margin-top: 0.2rem !default;\n\n/// Default bottom margin for subheaders.\n/// @type Number\n$subheader-margin-bottom: 0.5rem !default;\n\n/// Default font size for statistic numbers.\n/// @type Number\n$stat-font-size: 2.5rem !default;\n\n@mixin foundation-typography-helpers {\n // Use to create a subheading under a main header\n // Make sure you pair the two elements in a element, like this:\n // \n // Heading\n // Subheading\n // \n .subheader {\n margin-top: $subheader-margin-top;\n margin-bottom: $subheader-margin-bottom;\n\n font-weight: $subheader-font-weight;\n line-height: $subheader-lineheight;\n color: $subheader-color;\n }\n\n // Use to style an introductory lead, deck, blurb, etc.\n .lead {\n font-size: $lead-font-size;\n line-height: $lead-lineheight;\n }\n\n // Use to style a large number to display a statistic\n .stat {\n font-size: $stat-font-size;\n line-height: 1;\n\n p + & {\n margin-top: -1rem;\n }\n }\n\n ul, ol {\n // Use to remove numbers from ordered list & bullets from unordered list\n &.no-bullet {\n margin-#{$global-left}: 0;\n list-style: none;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@mixin foundation-text-alignment {\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @each $align in (left, right, center, justify) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-text-#{$align} {\n text-align: $align;\n }\n }\n @else {\n .text-#{$align} {\n text-align: $align;\n }\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// If `true`, all elements will have transparent backgrounds when printed, to save on ink.\n/// @type Boolean\n/// @group global\n$print-transparent-backgrounds: true !default;\n$print-hrefs: true !default;\n\n// sass-lint:disable-all\n\n@mixin foundation-print-styles {\n .show-for-print { display: none !important; }\n\n @media print {\n * {\n @if $print-transparent-backgrounds {\n background: transparent !important;\n }\n\n box-shadow: none !important;\n\n color: black !important; // Black prints faster: h5bp.com/s\n text-shadow: none !important;\n }\n\n .show-for-print { display: block !important; }\n .hide-for-print { display: none !important; }\n\n table.show-for-print { display: table !important; }\n thead.show-for-print { display: table-header-group !important; }\n tbody.show-for-print { display: table-row-group !important; }\n tr.show-for-print { display: table-row !important; }\n td.show-for-print { display: table-cell !important; }\n th.show-for-print { display: table-cell !important; }\n\n // Display the URL of a link after the text\n a,\n a:visited { text-decoration: underline;}\n @if $print-hrefs {\n a[href]:after { content: ' (' attr(href) ')'; }\n }\n\n // Don't display the URL for images or JavaScript/internal links\n .ir a:after,\n a[href^='javascript:']:after,\n a[href^='#']:after { content: ''; }\n\n // Display what an abbreviation stands for after the text\n abbr[title]:after { content: ' (' attr(title) ')'; }\n\n // Prevent page breaks in the middle of a blockquote or preformatted text block\n pre,\n blockquote {\n border: 1px solid $dark-gray;\n page-break-inside: avoid;\n }\n\n // h5bp.com/t\n thead { display: table-header-group; }\n\n tr,\n img { page-break-inside: avoid; }\n\n img { max-width: 100% !important; }\n\n @page { margin: 0.5cm; }\n\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n\n // Avoid page breaks after a heading\n h2,\n h3 { page-break-after: avoid; }\n\n // Helper to re-allow page breaks in the middle of certain elements (e.g. pre, blockquote, tr)\n .print-break-inside {\n page-break-inside: auto;\n }\n }\n}\n","/* ==========================================================================\n Layout extends and mixins\n========================================================================== */\n\n @import 'xy-grid/xy-grid';\n\n/* ==========================================================================\n Layout\n========================================================================== */\n\n.container {\n @include xy-grid-container;\n}\n\n.grid {\n @include xy-grid;\n\n .grid {\n @include xy-gutters($negative: true);\n }\n}\n\n.cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &--auto {\n @include xy-cell-base(auto);\n }\n\n &--shrink {\n @include xy-cell-base(shrink);\n }\n\n &--full { \n @include xy-cell;\n }\n\n &--half {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n }\n\n &--third { \n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 3);\n }\n }\n\n &--two-thirds {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n }\n\n &--quarter {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n\n @include breakpoint(large) {\n @include xy-cell(1 of 4);\n }\n }\n}\n\n.align {\n &--center {\n @include flex-align($x: center);\n }\n\n &--justify {\n @include flex-align($x: justify);\n }\n\n &--end {\n @include flex-align($x: right);\n }\n}\n\n.v-align {\n &--center {\n height: 100%;\n @include flex-align($y: middle);\n }\n}\n\n.hide-mobile {\n @include breakpoint (small only) {\n display: none;\n }\n}\n\n.show-desktop {\n display: none;\n\n @include breakpoint (large) {\n display: block;\n }\n}\n\n.mb {\n &-2 {\n margin-bottom: $global-margin*2;\n }\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @elseif (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin: 0 auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @elseif type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @elseif ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @elseif ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @elseif ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @elseif ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @elseif ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n }\n }\n\n // Get our gutters from map if available, if not map just return the value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","/* ==========================================================================\n Banner extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Banner\n ========================================================================== */\n\n.banner {\n background-color: get-color(primary);\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n padding: $global-padding/2 0;\n color: $white;\n\n h2 {\n margin: 0;\n }\n }\n}","/* ==========================================================================\n Footer extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Footer\n ========================================================================== */\n\n.footer {\n background-color: $light-gray;\n padding: $global-padding*2 0;\n color: $dark-gray;\n}","/* ==========================================================================\n Hero extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Hero\n ========================================================================== */\n\n.hero {\n background-image: url('../img/hero.jpg');\n background-size: cover;\n background-position: center;\n min-height: 300px;\n height: 60vh;\n margin-bottom: $global-margin*5;\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n height: 100%;\n }\n\n > .container {\n height: 50vh;\n }\n\n &__content {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n\n h1 {\n font-family: 'Kaushan Script', cursive;\n color: $white;\n text-shadow: 0px 6px 10px $black;\n font-size: 3rem;\n text-align: center;\n }\n\n @include breakpoint(medium) {\n h1 {\n font-size: 4rem;\n }\n }\n\n @include breakpoint(large) {\n h1 {\n font-size: 7rem;\n }\n }\n }\n}","/* ==========================================================================\n Masthead extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Masthead\n ========================================================================== */\n\n.masthead {\n &__inner {\n @include xy-grid;\n @include flex-align($x: justify, $y: middle);\n }\n\n &__logo,\n &__cta {\n @include xy-cell-base(shrink);\n }\n\n &__cta {\n .button {\n margin: $global-margin 0;\n }\n }\n}","/* ==========================================================================\n Section extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Section\n ========================================================================== */\n\n.section {\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n @include xy-cell;\n text-align: center;\n\n @include breakpoint(large) {\n @include xy-cell(2 of 3);\n }\n }\n}","/* ==========================================================================\n Tiles extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Tiles\n ========================================================================== */\n\n.tile {\n @include xy-cell(100%, false, $grid-margin-gutters, padding);\n position: relative;\n\n @include breakpoint (medium) {\n @include xy-cell(1 of 3, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (large) {\n @include xy-cell(1 of 4, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (xlarge) {\n @include xy-cell(20%, false, $grid-margin-gutters, padding);\n }\n\n &__content {\n padding: $global-padding;\n background: rgb(0,0,0);\n background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0));\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: 1;\n }\n\n &__body {\n color: $white;\n }\n\n &s {\n list-style-type: none;\n margin: 0 0 $global-margin*5;\n @include xy-grid;\n }\n}","/* ==========================================================================\n Backgrounds extends and mixins\n ========================================================================== */\n\n@mixin bg($name, $hex) {\n &--#{$name} {\n background-color: $hex;\n\n @if color-contrast($hex, $black) < 8 {\n color: $white;\n\n a {\n color: $black;\n\n &:hover,\n &:focus,\n &:active {\n color: scale-color($hex, $lightness: -40%);\n }\n }\n }\n }\n}\n\n/* ==========================================================================\n Backgrounds\n ========================================================================== */\n\n.bg {\n @each $color, $hex in $foundation-palette {\n @include bg($color, $hex);\n }\n\n @include bg( 'primary', get-color(primary) );\n @include bg( 'secondary', get-color(secondary) );\n @include bg( 'light-gray', $light-gray );\n @include bg( 'medium-gray', $medium-gray );\n @include bg( 'dark-gray', $dark-gray );\n}","/* ==========================================================================\n Buttons extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Buttons\n ========================================================================== */\n\n.button {\n @include button(false, $button-background, $button-background-hover, $button-color, solid);\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group button\n////\n\n/// Font family for button elements.\n/// @type Font\n$button-font-family: inherit !default;\n\n/// Padding inside buttons.\n/// @type List\n$button-padding: 0.85em 1em !default;\n\n/// Margin around buttons.\n/// @type List\n$button-margin: 0 0 $global-margin 0 !default;\n\n/// Default fill for buttons. Can either be `solid` or `hollow`.\n/// @type Keyword\n$button-fill: solid !default;\n\n/// Default background color for buttons.\n/// @type Color\n$button-background: $primary-color !default;\n\n/// Background color on hover for buttons.\n/// @type Color\n$button-background-hover: scale-color($button-background, $lightness: -15%) !default;\n\n/// Font color for buttons.\n/// @type List\n$button-color: $white !default;\n\n/// Alternative font color for buttons.\n/// @type List\n$button-color-alt: $black !default;\n\n/// Border radius for buttons, defaulted to global-radius.\n/// @type Number\n$button-radius: $global-radius !default;\n\n/// Border width for hollow outline buttons\n/// @type Number\n$button-hollow-border-width: 1px !default;\n\n/// Sizes for buttons.\n/// @type Map\n$button-sizes: (\n tiny: 0.6rem,\n small: 0.75rem,\n default: 0.9rem,\n large: 1.25rem,\n) !default;\n\n/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.\n/// @type Map\n$button-palette: $foundation-palette !default;\n\n/// opacity for a disabled button.\n/// @type List\n$button-opacity-disabled: 0.25 !default;\n\n/// Background color lightness on hover for buttons.\n/// @type Number\n$button-background-hover-lightness: -20% !default;\n\n/// Color lightness on hover for hollow buttons.\n/// @type Number\n$button-hollow-hover-lightness: -50% !default;\n\n// Internal: flip from margin-right to margin-left for defaults\n@if $global-text-direction == 'rtl' {\n $button-margin: 0 0 $global-margin $global-margin !default;\n}\n\n/// transitions for buttons.\n/// @type List\n$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;\n\n/// Additional responsive classes for .expanded\n/// @type Boolean\n$button-responsive-expanded: false !default;\n\n// TODO: Document button-base() mixin\n@mixin button-base {\n @include disable-mouse-outline;\n display: inline-block;\n vertical-align: middle;\n margin: $button-margin;\n font-family: $button-font-family;\n\n @if (type-of($button-padding) == 'map') {\n @each $size, $padding in $button-padding {\n @include breakpoint($size) {\n padding: $padding;\n }\n }\n }\n @else {\n padding: $button-padding;\n }\n\n -webkit-appearance: none;\n border: 1px solid transparent;\n border-radius: $button-radius;\n transition: $button-transition;\n font-size: map-get($button-sizes, default);\n line-height: 1;\n text-align: center;\n cursor: pointer;\n}\n\n/// Expands a button to make it full-width.\n/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.\n@mixin button-expand($expand: true) {\n @if $expand {\n display: block;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n }\n @else {\n display: inline-block;\n width: auto;\n margin: $button-margin;\n }\n}\n\n/// Sets the visual style of a button.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n@mixin button-style(\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $background-hover-lightness: $button-background-hover-lightness\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n @if $background-hover == auto {\n $background-hover: scale-color($background, $lightness: $background-hover-lightness);\n }\n\n background-color: $background;\n color: $color;\n\n &:hover, &:focus {\n background-color: $background-hover;\n color: $color;\n }\n}\n\n/// Removes background fill on hover and focus for hollow buttons.\n@mixin button-hollow {\n &,\n &:hover,\n &:focus {\n background-color: transparent;\n }\n\n &.disabled,\n &[disabled] {\n &,\n &:hover, &:focus {\n background-color: transparent;\n }\n }\n}\n\n@mixin button-hollow-style(\n $color: $button-background,\n $hover-lightness: $button-hollow-hover-lightness,\n $border-width: $button-hollow-border-width\n) {\n $color-hover: scale-color($color, $lightness: $hover-lightness);\n\n border: $border-width solid $color;\n color: $color;\n\n &:hover, &:focus {\n border-color: $color-hover;\n color: $color-hover;\n &.disabled,\n &[disabled] {\n border: $border-width solid $color;\n color: $color;\n }\n }\n}\n\n/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.\n/// @param [Color] $background [$button-background] - Background color of the disabled button.\n/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.\n@mixin button-disabled(\n $background: $button-background,\n $color: $button-color\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n opacity: $button-opacity-disabled;\n cursor: not-allowed;\n\n &, &:hover, &:focus {\n background-color: $background;\n color: $color;\n }\n}\n\n/// Adds a dropdown arrow to a button.\n/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.\n/// @param {Color} $color [white] - Color of the arrow.\n/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.\n@mixin button-dropdown(\n $size: 0.4em,\n $color: $white,\n $offset: get-side($button-padding, right)\n) {\n &::after {\n @include css-triangle($size, $color, down);\n position: relative;\n top: 0.4em; // Aligns the arrow with the text of the button\n\n display: inline-block;\n float: #{$global-right};\n margin-#{$global-left}: $offset;\n }\n}\n\n/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.\n/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.\n@mixin button(\n $expand: false,\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $style: $button-fill\n) {\n @include button-base;\n\n @if $style == solid {\n @include button-style($background, $background-hover, $color);\n }\n @else if $style == hollow {\n @include button-hollow;\n @include button-hollow-style($background);\n }\n\n @if $expand {\n @include button-expand;\n }\n}\n\n@mixin foundation-button {\n .button {\n @include button;\n\n // Sizes\n @each $size, $value in map-remove($button-sizes, default) {\n &.#{$size} {\n font-size: $value;\n }\n }\n\n &.expanded { @include button-expand; }\n\n @if $button-responsive-expanded {\n @each $size in $breakpoint-classes {\n @include breakpoint(#{$size} only) {\n &.#{$size}-only-expanded {\n @include button-expand;\n }\n }\n @if $size != $-zf-zero-breakpoint {\n @include breakpoint(#{$size} down) {\n &.#{$size}-down-expanded {\n @include button-expand;\n }\n }\n\n @include breakpoint(#{$size}) {\n &.#{$size}-expanded {\n @include button-expand;\n }\n }\n }\n }\n }\n\n // Colors\n @each $name, $color in $button-palette {\n @if $button-fill != hollow {\n &.#{$name} {\n @include button-style($color, auto, auto);\n }\n }\n @else {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n\n &.#{$name}.dropdown::after {\n border-top-color: $color;\n }\n }\n }\n\n // Disabled style\n &.disabled,\n &[disabled] {\n @include button-disabled;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-disabled($color, auto);\n }\n }\n }\n\n // Hollow style\n @if $button-fill != hollow {\n &.hollow {\n @include button-hollow;\n @include button-hollow-style;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n }\n }\n }\n\n // Clear style\n @if $button-fill != clear {\n &.clear {\n @include button-hollow;\n @include button-hollow-style;\n\n &, &:hover, &:focus {\n &, &.disabled, &[disabled] {\n border-color: transparent;\n }\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n\n &, &:hover,\n &:focus {\n &,\n &.disabled,\n &[disabled] {\n border-color: transparent;\n }\n }\n }\n }\n }\n }\n\n // Dropdown arrow\n &.dropdown {\n @include button-dropdown;\n\n @if $button-fill == hollow {\n &::after {\n border-top-color: $button-background;\n }\n }\n\n &.hollow {\n &::after {\n border-top-color: $button-background;\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n &::after {\n border-top-color: $color;\n }\n }\n }\n }\n }\n\n // Button with dropdown arrow only\n &.arrow-only::after {\n top: -0.1em;\n float: none;\n margin-#{$global-left}: 0;\n }\n }\n a.button {\n &:hover,\n &:focus {\n text-decoration: none;\n }\n }\n}\n","/* ==========================================================================\n Table extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Table\n ========================================================================== */\n\ntable {\n @include table($table-stripe);\n margin: $global-margin*6 0;\n text-align: left;\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n// sass-lint:disable force-element-nesting, no-qualifying-elements\n\n////\n/// @group table\n////\n\n/// Default color for table background.\n/// @type Color\n$table-background: $white !default;\n\n/// Default scale for darkening the striped table rows and the table border.\n/// @type Number\n$table-color-scale: 5% !default;\n\n/// Default style for table border.\n/// @type List\n$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;\n\n/// Default padding for table.\n/// @type Number\n$table-padding: rem-calc(8 10 10) !default;\n\n/// Default scale for darkening the table rows on hover.\n/// @type Number\n$table-hover-scale: 2% !default;\n\n/// Default color of standard rows on hover.\n/// @type List\n$table-row-hover: darken($table-background, $table-hover-scale) !default;\n\n/// Default color of striped rows on hover.\n/// @type List\n$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;\n\n/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.\n/// @type Boolean\n$table-is-striped: true !default;\n\n/// Default background color for striped rows.\n/// @type Color\n$table-striped-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.\n/// @type Keyword\n$table-stripe: even !default;\n\n/// Default color for header background.\n/// @type Color\n$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;\n\n/// Default color of header rows on hover.\n/// @type List\n$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;\n\n/// Default color for footer background.\n/// @type Color\n$table-foot-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default color of footer rows on hover.\n/// @type List\n$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;\n\n/// Default font color for header.\n/// @type Color\n$table-head-font-color: $body-font-color !default;\n\n/// Default font color for footer.\n/// @type Color\n$table-foot-font-color: $body-font-color !default;\n\n/// Default value for showing the header when using stacked tables.\n/// @type Boolean\n$show-header-for-stacked: false !default;\n\n/// Breakpoint at which stacked table switches from mobile to desktop view.\n/// @type Breakpoint\n$table-stack-breakpoint: medium !default;\n\n@mixin -zf-table-stripe($stripe: $table-stripe) {\n tr {\n // If stripe is set to even, darken the even rows.\n @if $stripe == even {\n &:nth-child(even) {\n border-bottom: 0;\n background-color: $table-striped-background;\n }\n }\n\n // If stripe is set to odd, darken the odd rows.\n @else if $stripe == odd {\n &:nth-child(odd) {\n background-color: $table-striped-background;\n }\n }\n }\n}\n\n@mixin -zf-table-unstripe() {\n tr {\n border-bottom: 0;\n border-bottom: $table-border;\n background-color: $table-background;\n }\n}\n\n@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {\n thead,\n tbody,\n tfoot {\n border: $table-border;\n background-color: $table-background;\n }\n\n // Caption\n caption {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n }\n\n // Table head\n thead {\n background: $table-head-background;\n color: $table-head-font-color;\n }\n\n // Table foot\n tfoot {\n background: $table-foot-background;\n color: $table-foot-font-color;\n }\n\n // Table head and foot\n thead,\n tfoot {\n // Rows within head and foot\n tr {\n background: transparent;\n }\n\n // Cells within head and foot\n th,\n td {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n text-align: #{$global-left};\n }\n }\n\n // Table rows\n tbody {\n th,\n td {\n padding: $table-padding;\n }\n }\n\n // If tables are striped\n @if $is-striped == true {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n\n &.unstriped {\n tbody {\n @include -zf-table-unstripe();\n background-color: $table-background;\n }\n }\n }\n\n // If tables are not striped\n @else if $is-striped == false {\n tbody {\n @include -zf-table-unstripe();\n }\n\n &.striped {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n }\n }\n}\n\n/// Adds the general styles for tables.\n/// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.\n@mixin table(\n $stripe: $table-stripe,\n $nest: false\n) {\n border-collapse: collapse;\n width: 100%;\n margin-bottom: $global-margin;\n border-radius: $global-radius;\n\n @if $nest {\n @include -zf-table-children-styles($stripe);\n }\n @else {\n @at-root {\n @include -zf-table-children-styles($stripe);\n }\n }\n}\n\n/// Adds the ability to horizontally scroll the table when the content overflows horizontally.\n@mixin table-scroll {\n display: block;\n width: 100%;\n overflow-x: auto;\n}\n\n/// Slightly darkens the table rows on hover.\n@mixin table-hover {\n thead tr {\n //Darkens the table header rows on hover.\n &:hover {\n background-color: $table-head-row-hover;\n }\n }\n\n tfoot tr {\n //Darkens the table footer rows on hover.\n &:hover {\n background-color: $table-foot-row-hover;\n }\n }\n\n tbody tr {\n //Darkens the non-striped table rows on hover.\n &:hover {\n background-color: $table-row-hover;\n }\n }\n\n @if $table-is-striped == true {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &:not(.unstriped) tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &:not(.unstriped) tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n\n @else if $table-is-striped == false {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &.striped tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &.striped tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n}\n\n/// Adds styles for a stacked table. Useful for small-screen layouts.\n/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.\n@mixin table-stack($header: $show-header-for-stacked) {\n @if $header {\n thead {\n th {\n display: block;\n }\n }\n }\n @else {\n thead {\n display: none;\n }\n }\n\n tfoot {\n display: none;\n }\n\n tr,\n th,\n td {\n display: block;\n }\n\n td {\n border-top: 0;\n }\n}\n\n@mixin foundation-table($nest: false) {\n table {\n @include table($nest: $nest);\n }\n\n table.stack {\n @include breakpoint($table-stack-breakpoint down) {\n @include table-stack;\n }\n }\n\n table.scroll {\n @include table-scroll;\n }\n\n table.hover {\n @include table-hover;\n }\n\n .table-scroll {\n overflow-x: auto;\n\n table {\n width: auto;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n"]}
` elements.\n/// @type Number\n$paragraph-lineheight: 1.6 !default;\n\n/// Bottom margin of paragraphs.\n/// @type Number\n$paragraph-margin-bottom: 1rem !default;\n\n/// Text rendering method for paragraph text.\n/// @type String\n$paragraph-text-rendering: optimizeLegibility !default;\n\n/// Text color of code samples.\n/// @type Color\n$code-color: $black !default;\n\n/// Font family of code samples.\n/// @type String | List\n$code-font-family: $font-family-monospace !default;\n\n/// Font weight of text in code samples.\n/// @type String\n$code-font-weight: $global-weight-normal !default;\n\n/// Background color of code samples.\n/// @type Color\n$code-background: $light-gray !default;\n\n/// Border around code samples.\n/// @type List\n$code-border: 1px solid $medium-gray !default;\n\n/// Padding around text of code samples.\n/// @type Number | List\n$code-padding: rem-calc(2 5 1) !default;\n\n/// Default color for links.\n/// @type Color\n$anchor-color: $primary-color !default;\n\n/// Default color for links on hover.\n/// @type Color\n$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;\n\n/// Default text decoration for links.\n/// @type String\n$anchor-text-decoration: none !default;\n\n/// Default text decoration for links on hover.\n/// @type String\n$anchor-text-decoration-hover: none !default;\n\n/// Maximum width of a divider.\n/// @type Number\n$hr-width: $global-width !default;\n\n/// Default border for a divider.\n/// @type List\n$hr-border: 1px solid $medium-gray !default;\n\n/// Default margin for a divider.\n/// @type Number | List\n$hr-margin: rem-calc(20) auto !default;\n\n/// Line height for items in a list.\n/// @type Number\n$list-lineheight: $paragraph-lineheight !default;\n\n/// Bottom margin for items in a list.\n/// @type Number\n$list-margin-bottom: $paragraph-margin-bottom !default;\n\n/// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`).\n/// @type String\n$list-style-type: disc !default;\n\n/// Positioning for bullets on unordered list items.\n/// @type String\n$list-style-position: outside !default;\n\n/// Left (or right) margin for lists.\n/// @type Number\n$list-side-margin: 1.25rem !default;\n\n/// Left (or right) margin for a list inside a list.\n/// @type Number\n$list-nested-side-margin: 1.25rem !default;\n\n/// Bottom margin for `
` elements.\n/// @type Color\n$blockquote-color: $dark-gray !default;\n\n/// Padding inside a `` element.\n/// @type Number | List\n$blockquote-padding: rem-calc(9 20 0 19) !default;\n\n/// Side border for `` elements.\n/// @type List\n$blockquote-border: 1px solid $medium-gray !default;\n\n/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\n }\n }\n\n // Abbreviations\n abbr, abbr[title] {\n border-bottom: $abbr-underline;\n cursor: help;\n text-decoration: none;\n }\n\n // Figures\n figure {\n margin: 0;\n }\n \n // Code\n code {\n padding: $code-padding;\n\n border: $code-border;\n background-color: $code-background;\n\n font-family: $code-font-family;\n font-weight: $code-font-weight;\n color: $code-color;\n }\n\n // Keystrokes\n kbd {\n margin: 0;\n padding: $keystroke-padding;\n\n background-color: $keystroke-background;\n\n font-family: $keystroke-font;\n color: $keystroke-color;\n\n @if has-value($keystroke-radius) {\n border-radius: $keystroke-radius;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n$global-font-size: 100% !default;\n\n/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.\n///\n/// @param {Number} $num - Number to strip unit from.\n///\n/// @returns {Number} The same number, sans unit.\n@function strip-unit($num) {\n @return $num / ($num * 0 + 1);\n}\n\n/// Converts one or more pixel values into matching rem values.\n///\n/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.\n/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.\n///\n/// @returns {List} A list of converted values.\n@function rem-calc($values, $base: null) {\n $rem-values: ();\n $count: length($values);\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // If the base font size is a %, then multiply it by 16px\n // This is because 100% font size = 16px in most all browsers\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n // Using rem as base allows correct scaling\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if $count == 1 {\n @return -zf-to-rem($values, $base);\n }\n\n @for $i from 1 through $count {\n $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));\n }\n\n @return $rem-values;\n}\n\n// Converts a unitless, pixel, or rem value to em, for use in breakpoints.\n@function -zf-bp-to-em($value) {\n // Pixel and unitless values are converted to rems\n @if unit($value) == 'px' or unitless($value) {\n $value: rem-calc($value, $base: 16px);\n }\n\n // Then the value is converted to ems\n @return strip-unit($value) * 1em;\n}\n\n/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.\n/// @access private\n///\n/// @param {Number} $value - Pixel value to convert.\n/// @param {Number} $base [null] - Base for pixel conversion.\n///\n/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.\n@function -zf-to-rem($value, $base: null) {\n // Check if the value is a number\n @if type-of($value) != 'number' {\n @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';\n @return $value;\n }\n\n // Transform em into rem if someone hands over 'em's\n @if unit($value) == 'em' {\n $value: strip-unit($value) * 1rem;\n }\n\n // Calculate rem if units for $value is not rem or em\n @if unit($value) != 'rem' {\n $value: strip-unit($value) / strip-unit($base) * 1rem;\n }\n\n // Turn 0rem into 0\n @if $value == 0rem {\n $value: 0;\n }\n\n @return $value;\n}\n\n/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.\n///\n/// @param {Number} $value - Value to convert to a unitless line height\n/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size\n///\n/// @return {Number} - Unitless number\n@function unitless-calc($value, $base: null) {\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // First, lets convert our $base to pixels\n\n // If the base font size is a %, then multiply it by 16px\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if unit($base) == 'em' {\n $base: strip-unit($base) * 16px;\n }\n\n // Now lets convert our value to pixels too\n @if unit($value) == '%' {\n $value: ($value / 100%) * $base;\n }\n\n @if unit($value) == 'rem' {\n $value: strip-unit($value) * $base;\n }\n\n @if unit($value) == 'em' {\n $value: strip-unit($value) * $base;\n }\n\n // 'px'\n @if unit($value) == 'px' {\n @return strip-unit($value) / strip-unit($base);\n }\n\n // assume that line-heights greatern then 10 are meant to be absolute in 'px'\n @if unitless($value) and ($value > 10) {\n @return $value / strip-unit($base);\n }\n\n @return $value;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group breakpoints\n////\n\n/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.\n/// @type Map\n$breakpoints: (\n small: 0,\n medium: 640px,\n large: 1024px,\n xlarge: 1200px,\n xxlarge: 1440px,\n) !default;\n\n/// The largest named breakpoint in which to include print as a media type\n/// @type Keyword\n$print-breakpoint: large !default;\n\n$-zf-zero-breakpoint: small !default;\n\n$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');\n\n@if nth(map-values($breakpoints), 1) != 0 {\n @error 'Your smallest breakpoint (defined in $breakpoints) must be set to \"0\".';\n}\n@else {\n $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);\n}\n\n/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.\n/// @type List\n$breakpoint-classes: (small medium large) !default;\n\n/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.\n///\n/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.\n@function breakpoint($val: $-zf-zero-breakpoint) {\n // Size or keyword\n $bp: nth($val, 1);\n // Value for max-width media queries\n $bp-max: 0;\n // Direction of media query (up, down, or only)\n $dir: if(length($val) > 1, nth($val, 2), up);\n // Eventual output\n $str: '';\n // Is it a named media query?\n $named: false;\n\n // Orientation media queries have a unique syntax\n @if $bp == 'landscape' or $bp == 'portrait' {\n @return '(orientation: #{$bp})';\n }\n @else if $bp == 'retina' {\n @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';\n }\n\n // Try to pull a named breakpoint out of the $breakpoints map\n @if type-of($bp) == 'string' {\n @if map-has-key($breakpoints, $bp) {\n @if $dir == 'only' or $dir == 'down' {\n $bp-max: -zf-map-next($breakpoints, $bp);\n }\n\n $bp: map-get($breakpoints, $bp);\n $named: true;\n }\n @else {\n $bp: 0;\n @warn 'breakpoint(): \"#{$val}\" is not defined in your $breakpoints setting.';\n }\n }\n\n // Convert any pixel, rem, or unitless value to em\n $bp: -zf-bp-to-em($bp);\n @if $bp-max {\n $bp-max: -zf-bp-to-em($bp-max) - (1/16);\n }\n\n // Conditions to skip media query creation\n // - It's a named breakpoint that resolved to \"0 down\" or \"0 up\"\n // - It's a numeric breakpoint that resolved to \"0 \" + anything\n @if $bp > 0em or $dir == 'only' or $dir == 'down' {\n // `only` ranges use the format `(min-width: n) and (max-width: n)`\n @if $dir == 'only' {\n // Only named media queries can have an \"only\" range\n @if $named == true {\n // Only use \"min-width\" if the floor is greater than 0\n @if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n\n // Only add \"and\" to the media query if there's a ceiling\n @if $bp-max != null {\n $str: $str + ' and ';\n }\n }\n\n // Only use \"max-width\" if there's a ceiling\n @if $bp-max != null {\n $str: $str + '(max-width: #{$bp-max})';\n }\n }\n @else {\n @warn 'breakpoint(): Only named media queries can have an `only` range.';\n }\n }\n\n // `down` ranges use the format `(max-width: n)`\n @else if $dir == 'down' {\n $max: if($named, $bp-max, $bp);\n\n // Skip media query creation if input value is exactly \"0 down\",\n // unless the function was called as \"small down\", in which case it's just \"small only\"\n @if $named or $bp > 0em {\n @if $max != null {\n $str: $str + '(max-width: #{$max})';\n }\n }\n }\n\n // `up` ranges use the format `(min-width: n)`\n @else if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n }\n }\n\n @return $str;\n}\n\n/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:\n/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.\n/// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.\n/// - If a rem value is passed, the unit will be changed to em.\n/// - If an em value is passed, the value will be used as-is.\n///\n/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.\n///\n/// @output If the breakpoint is \"0px and larger\", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.\n@mixin breakpoint($value) {\n $str: breakpoint($value);\n $bp: index($-zf-breakpoints-keys, $value);\n $pbp: index($-zf-breakpoints-keys, $print-breakpoint);\n\n $old-zf-size: null;\n\n // Make breakpoint size available as a variable\n @if global-variable-exists(-zf-size) {\n $old-zf-size: $-zf-size;\n }\n $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords\n\n // If $str is still an empty string, no media query is needed\n @if $str == '' {\n @content;\n }\n\n // Otherwise, wrap the content in a media query\n @else {\n // For named breakpoints less than or equal to $print-breakpoint, add print to the media types\n @if $bp != null and $bp <= $pbp {\n @media print, screen and #{$str} {\n @content;\n }\n }\n @else {\n @media screen and #{$str} {\n @content;\n }\n }\n }\n\n @if $old-zf-size != null {\n // Restore the old breakpoint size\n $-zf-size: $old-zf-size !global;\n } @else {\n $-zf-size: null !global;\n }\n}\n\n/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.\n/// @access private\n///\n/// @param {Map} $map - Map to convert.\n///\n/// @returns {String} A string containing the map's contents.\n@function -zf-bp-serialize($map) {\n $str: '';\n @each $key, $value in $map {\n $str: $str + $key + '=' + -zf-bp-to-em($value) + '&';\n }\n $str: str-slice($str, 1, -2);\n\n @return $str;\n}\n\n/// Find the next key in a map.\n/// @access private\n///\n/// @param {Map} $map - Map to traverse.\n/// @param {Mixed} $key - Key to use as a starting point.\n///\n/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.\n@function -zf-map-next($map, $key) {\n\n // Store the keys of the map as a list\n $values: map-keys($map);\n\n $i: 0;\n\n // If the Key Exists, Get the index of the key within the map and add 1 to it for the next breakpoint in the map\n @if (map-has-key($map, $key)) {\n $i: index($values, $key) + 1;\n }\n\n // If the key doesn't exist, or it's the last key in the map, return null\n @if ($i > length($map) or $i == 0) {\n @return null;\n }\n // Otherwise, return the value\n @else {\n @return map-get($map, nth($values, $i));\n }\n\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $key - Key to use as last breakpoint.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-breakpoints-less-than($key) {\n $list: ();\n $found_key: false;\n\n @each $name in $-zf-breakpoints-keys {\n @if ($name == $key) {\n $found_key: true;\n }\n @if not $found_key {\n $list: append($list, $name);\n }\n }\n @return $list;\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $breakpoing - a named or non-named breakpoing.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-closest-named-breakpoint($breakpoint) {\n $last: $-zf-zero-breakpoint;\n $found: false;\n\n $value: unitless-calc($breakpoint, 1px);\n @each $key, $val in $breakpoints {\n @if not $found {\n @if unitless-calc($val) > $value {\n $found: true;\n } @else {\n $last: $key;\n }\n }\n }\n\n @return $last;\n}\n\n/// Get a value for a breakpoint from a responsive config map or single value.\n/// - If the config is a single value, return it regardless of `$value`.\n/// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.\n/// - If the config is a map and does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.\n/// @access private\n///\n/// @param {Number|Map} $map - Responsive config map or single value.\n/// @param {Keyword} $value - Breakpoint name to use.\n///\n/// @return {Mixed} The corresponding breakpoint value.\n@function -zf-get-bp-val($map, $value) {\n // If the given map is a single value, return it\n @if type-of($map) == 'number' {\n @return $map;\n }\n\n\n // Check if the breakpoint name exists globally\n @if not map-has-key($breakpoints, $value) {\n @if type-of($value) == 'number' {\n $value: -zf-closest-named-breakpoint($value);\n } @else {\n @return null;\n }\n }\n // Check if the breakpoint name exists in the local config map\n @else if map-has-key($map, $value) {\n // If it does, just return the value\n @return map-get($map, $value);\n }\n // Otherwise, find the next lowest breakpoint and return that value\n @else {\n $anchor: null;\n $found: false;\n\n @each $key, $val in $breakpoints {\n @if not $found {\n @if map-has-key($map, $key) {\n $anchor: $key;\n }\n @if $key == $value {\n $found: true;\n }\n }\n }\n\n @return map-get($map, $anchor);\n }\n}\n\n$small-up: '';\n$small-only: '';\n\n@if map-has-key($breakpoints, small) {\n $small-up: screen;\n $small-only: unquote('screen and #{breakpoint(small only)}');\n}\n\n$medium-up: '';\n$medium-only: '';\n\n@if map-has-key($breakpoints, medium) {\n $medium-up: unquote('screen and #{breakpoint(medium)}');\n $medium-only: unquote('screen and #{breakpoint(medium only)}');\n}\n\n$large-up: '';\n$large-only: '';\n\n@if map-has-key($breakpoints, large) {\n $large-up: unquote('screen and #{breakpoint(large)}');\n $large-only: unquote('screen and #{breakpoint(large only)}');\n}\n\n$xlarge-up: '';\n$xlarge-only: '';\n\n@if map-has-key($breakpoints, xlarge) {\n $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');\n $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');\n}\n\n$xxlarge-up: '';\n\n@if map-has-key($breakpoints, xxlarge) {\n $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group typography-helpers\n////\n\n/// Default font size for lead paragraphs.\n/// @type Number\n$lead-font-size: $global-font-size * 1.25 !default;\n\n/// Default line height for lead paragraphs.\n/// @type String\n$lead-lineheight: 1.6 !default;\n\n/// Default line height for subheaders.\n/// @type Number\n$subheader-lineheight: 1.4 !default;\n\n/// Default font color for subheaders.\n/// @type Color\n$subheader-color: $dark-gray !default;\n\n/// Default font weight for subheaders.\n/// @type String\n$subheader-font-weight: $global-weight-normal !default;\n\n/// Default top margin for subhheaders.\n/// @type Number\n$subheader-margin-top: 0.2rem !default;\n\n/// Default bottom margin for subheaders.\n/// @type Number\n$subheader-margin-bottom: 0.5rem !default;\n\n/// Default font size for statistic numbers.\n/// @type Number\n$stat-font-size: 2.5rem !default;\n\n@mixin foundation-typography-helpers {\n // Use to create a subheading under a main header\n // Make sure you pair the two elements in a element, like this:\n // \n // Heading\n // Subheading\n // \n .subheader {\n margin-top: $subheader-margin-top;\n margin-bottom: $subheader-margin-bottom;\n\n font-weight: $subheader-font-weight;\n line-height: $subheader-lineheight;\n color: $subheader-color;\n }\n\n // Use to style an introductory lead, deck, blurb, etc.\n .lead {\n font-size: $lead-font-size;\n line-height: $lead-lineheight;\n }\n\n // Use to style a large number to display a statistic\n .stat {\n font-size: $stat-font-size;\n line-height: 1;\n\n p + & {\n margin-top: -1rem;\n }\n }\n\n ul, ol {\n // Use to remove numbers from ordered list & bullets from unordered list\n &.no-bullet {\n margin-#{$global-left}: 0;\n list-style: none;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@mixin foundation-text-alignment {\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @each $align in (left, right, center, justify) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-text-#{$align} {\n text-align: $align;\n }\n }\n @else {\n .text-#{$align} {\n text-align: $align;\n }\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// If `true`, all elements will have transparent backgrounds when printed, to save on ink.\n/// @type Boolean\n/// @group global\n$print-transparent-backgrounds: true !default;\n$print-hrefs: true !default;\n\n// sass-lint:disable-all\n\n@mixin foundation-print-styles {\n .show-for-print { display: none !important; }\n\n @media print {\n * {\n @if $print-transparent-backgrounds {\n background: transparent !important;\n }\n\n box-shadow: none !important;\n\n color: black !important; // Black prints faster: h5bp.com/s\n text-shadow: none !important;\n }\n\n .show-for-print { display: block !important; }\n .hide-for-print { display: none !important; }\n\n table.show-for-print { display: table !important; }\n thead.show-for-print { display: table-header-group !important; }\n tbody.show-for-print { display: table-row-group !important; }\n tr.show-for-print { display: table-row !important; }\n td.show-for-print { display: table-cell !important; }\n th.show-for-print { display: table-cell !important; }\n\n // Display the URL of a link after the text\n a,\n a:visited { text-decoration: underline;}\n @if $print-hrefs {\n a[href]:after { content: ' (' attr(href) ')'; }\n }\n\n // Don't display the URL for images or JavaScript/internal links\n .ir a:after,\n a[href^='javascript:']:after,\n a[href^='#']:after { content: ''; }\n\n // Display what an abbreviation stands for after the text\n abbr[title]:after { content: ' (' attr(title) ')'; }\n\n // Prevent page breaks in the middle of a blockquote or preformatted text block\n pre,\n blockquote {\n border: 1px solid $dark-gray;\n page-break-inside: avoid;\n }\n\n // h5bp.com/t\n thead { display: table-header-group; }\n\n tr,\n img { page-break-inside: avoid; }\n\n img { max-width: 100% !important; }\n\n @page { margin: 0.5cm; }\n\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n\n // Avoid page breaks after a heading\n h2,\n h3 { page-break-after: avoid; }\n\n // Helper to re-allow page breaks in the middle of certain elements (e.g. pre, blockquote, tr)\n .print-break-inside {\n page-break-inside: auto;\n }\n }\n}\n","/* ==========================================================================\n Layout extends and mixins\n========================================================================== */\n\n @import 'xy-grid/xy-grid';\n\n/* ==========================================================================\n Layout\n========================================================================== */\n\n.container {\n @include xy-grid-container;\n}\n\n.grid {\n @include xy-grid;\n\n .grid {\n @include xy-gutters($negative: true);\n }\n}\n\n.cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &--auto {\n @include xy-cell-base(auto);\n }\n\n &--shrink {\n @include xy-cell-base(shrink);\n }\n\n &--full { \n @include xy-cell;\n }\n\n &--half {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n }\n\n &--third { \n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 3);\n }\n }\n\n &--two-thirds {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n }\n\n &--quarter {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n\n @include breakpoint(large) {\n @include xy-cell(1 of 4);\n }\n }\n}\n\n.align {\n &--center {\n @include flex-align($x: center);\n }\n\n &--justify {\n @include flex-align($x: justify);\n }\n\n &--end {\n @include flex-align($x: right);\n }\n}\n\n.v-align {\n &--center {\n height: 100%;\n @include flex-align($y: middle);\n }\n}\n\n.hide-mobile {\n @include breakpoint (small only) {\n display: none;\n }\n}\n\n.show-desktop {\n display: none;\n\n @include breakpoint (large) {\n display: block;\n }\n}\n\n.mb {\n &-2 {\n margin-bottom: $global-margin*2;\n }\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @elseif (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin: 0 auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @elseif type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @elseif ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @elseif ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @elseif ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @elseif ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @elseif ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n }\n }\n\n // Get our gutters from map if available, if not map just return the value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","/* ==========================================================================\n Banner extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Banner\n ========================================================================== */\n\n.banner {\n background-color: get-color(primary);\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n padding: $global-padding/2 0;\n color: $white;\n\n h2 {\n margin: 0;\n }\n }\n}","/* ==========================================================================\n Footer extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Footer\n ========================================================================== */\n\n.footer {\n background-color: $light-gray;\n padding: $global-padding*2 0;\n color: $dark-gray;\n}","/* ==========================================================================\n Hero extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Hero\n ========================================================================== */\n\n.hero {\n background-image: url('../img/hero.jpg');\n background-size: cover;\n background-position: center;\n min-height: 300px;\n height: 60vh;\n margin-bottom: $global-margin*5;\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n height: 100%;\n }\n\n > .container {\n height: 50vh;\n }\n\n &__content {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n\n h1 {\n font-family: 'Kaushan Script', cursive;\n color: $white;\n text-shadow: 0px 6px 10px $black;\n font-size: 3rem;\n text-align: center;\n }\n\n @include breakpoint(medium) {\n h1 {\n font-size: 4rem;\n }\n }\n\n @include breakpoint(large) {\n h1 {\n font-size: 7rem;\n }\n }\n }\n}","/* ==========================================================================\n Masthead extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Masthead\n ========================================================================== */\n\n.masthead {\n &__inner {\n @include xy-grid;\n @include flex-align($x: justify, $y: middle);\n }\n\n &__logo,\n &__cta {\n @include xy-cell-base(shrink);\n }\n\n &__cta {\n .button {\n margin: $global-margin 0;\n }\n }\n}","/* ==========================================================================\n Section extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Section\n ========================================================================== */\n\n.section {\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n @include xy-cell;\n text-align: center;\n\n @include breakpoint(large) {\n @include xy-cell(2 of 3);\n }\n }\n}","/* ==========================================================================\n Tiles extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Tiles\n ========================================================================== */\n\n.tile {\n @include xy-cell(100%, false, $grid-margin-gutters, padding);\n position: relative;\n\n @include breakpoint (medium) {\n @include xy-cell(1 of 3, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (large) {\n @include xy-cell(1 of 4, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (xlarge) {\n @include xy-cell(20%, false, $grid-margin-gutters, padding);\n }\n\n &__content {\n padding: $global-padding;\n background: rgb(0,0,0);\n background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0));\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: 1;\n }\n\n &__body {\n color: $white;\n }\n\n &s {\n list-style-type: none;\n margin: 0 0 $global-margin*5;\n @include xy-grid;\n }\n}","/* ==========================================================================\n Backgrounds extends and mixins\n ========================================================================== */\n\n@mixin bg($name, $hex) {\n &--#{$name} {\n background-color: $hex;\n\n @if color-contrast($hex, $black) < 8 {\n color: $white;\n\n a {\n color: $black;\n\n &:hover,\n &:focus,\n &:active {\n color: scale-color($hex, $lightness: -40%);\n }\n }\n }\n }\n}\n\n/* ==========================================================================\n Backgrounds\n ========================================================================== */\n\n.bg {\n @each $color, $hex in $foundation-palette {\n @include bg($color, $hex);\n }\n\n @include bg( 'primary', get-color(primary) );\n @include bg( 'secondary', get-color(secondary) );\n @include bg( 'light-gray', $light-gray );\n @include bg( 'medium-gray', $medium-gray );\n @include bg( 'dark-gray', $dark-gray );\n}","/* ==========================================================================\n Buttons extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Buttons\n ========================================================================== */\n\n.button {\n @include button(false, $button-background, $button-background-hover, $button-color, solid);\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group button\n////\n\n/// Font family for button elements.\n/// @type Font\n$button-font-family: inherit !default;\n\n/// Padding inside buttons.\n/// @type List\n$button-padding: 0.85em 1em !default;\n\n/// Margin around buttons.\n/// @type List\n$button-margin: 0 0 $global-margin 0 !default;\n\n/// Default fill for buttons. Can either be `solid` or `hollow`.\n/// @type Keyword\n$button-fill: solid !default;\n\n/// Default background color for buttons.\n/// @type Color\n$button-background: $primary-color !default;\n\n/// Background color on hover for buttons.\n/// @type Color\n$button-background-hover: scale-color($button-background, $lightness: -15%) !default;\n\n/// Font color for buttons.\n/// @type List\n$button-color: $white !default;\n\n/// Alternative font color for buttons.\n/// @type List\n$button-color-alt: $black !default;\n\n/// Border radius for buttons, defaulted to global-radius.\n/// @type Number\n$button-radius: $global-radius !default;\n\n/// Border width for hollow outline buttons\n/// @type Number\n$button-hollow-border-width: 1px !default;\n\n/// Sizes for buttons.\n/// @type Map\n$button-sizes: (\n tiny: 0.6rem,\n small: 0.75rem,\n default: 0.9rem,\n large: 1.25rem,\n) !default;\n\n/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.\n/// @type Map\n$button-palette: $foundation-palette !default;\n\n/// opacity for a disabled button.\n/// @type List\n$button-opacity-disabled: 0.25 !default;\n\n/// Background color lightness on hover for buttons.\n/// @type Number\n$button-background-hover-lightness: -20% !default;\n\n/// Color lightness on hover for hollow buttons.\n/// @type Number\n$button-hollow-hover-lightness: -50% !default;\n\n// Internal: flip from margin-right to margin-left for defaults\n@if $global-text-direction == 'rtl' {\n $button-margin: 0 0 $global-margin $global-margin !default;\n}\n\n/// transitions for buttons.\n/// @type List\n$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;\n\n/// Additional responsive classes for .expanded\n/// @type Boolean\n$button-responsive-expanded: false !default;\n\n// TODO: Document button-base() mixin\n@mixin button-base {\n @include disable-mouse-outline;\n display: inline-block;\n vertical-align: middle;\n margin: $button-margin;\n font-family: $button-font-family;\n\n @if (type-of($button-padding) == 'map') {\n @each $size, $padding in $button-padding {\n @include breakpoint($size) {\n padding: $padding;\n }\n }\n }\n @else {\n padding: $button-padding;\n }\n\n -webkit-appearance: none;\n border: 1px solid transparent;\n border-radius: $button-radius;\n transition: $button-transition;\n font-size: map-get($button-sizes, default);\n line-height: 1;\n text-align: center;\n cursor: pointer;\n}\n\n/// Expands a button to make it full-width.\n/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.\n@mixin button-expand($expand: true) {\n @if $expand {\n display: block;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n }\n @else {\n display: inline-block;\n width: auto;\n margin: $button-margin;\n }\n}\n\n/// Sets the visual style of a button.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n@mixin button-style(\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $background-hover-lightness: $button-background-hover-lightness\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n @if $background-hover == auto {\n $background-hover: scale-color($background, $lightness: $background-hover-lightness);\n }\n\n background-color: $background;\n color: $color;\n\n &:hover, &:focus {\n background-color: $background-hover;\n color: $color;\n }\n}\n\n/// Removes background fill on hover and focus for hollow buttons.\n@mixin button-hollow {\n &,\n &:hover,\n &:focus {\n background-color: transparent;\n }\n\n &.disabled,\n &[disabled] {\n &,\n &:hover, &:focus {\n background-color: transparent;\n }\n }\n}\n\n@mixin button-hollow-style(\n $color: $button-background,\n $hover-lightness: $button-hollow-hover-lightness,\n $border-width: $button-hollow-border-width\n) {\n $color-hover: scale-color($color, $lightness: $hover-lightness);\n\n border: $border-width solid $color;\n color: $color;\n\n &:hover, &:focus {\n border-color: $color-hover;\n color: $color-hover;\n &.disabled,\n &[disabled] {\n border: $border-width solid $color;\n color: $color;\n }\n }\n}\n\n/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.\n/// @param [Color] $background [$button-background] - Background color of the disabled button.\n/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.\n@mixin button-disabled(\n $background: $button-background,\n $color: $button-color\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n opacity: $button-opacity-disabled;\n cursor: not-allowed;\n\n &, &:hover, &:focus {\n background-color: $background;\n color: $color;\n }\n}\n\n/// Adds a dropdown arrow to a button.\n/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.\n/// @param {Color} $color [white] - Color of the arrow.\n/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.\n@mixin button-dropdown(\n $size: 0.4em,\n $color: $white,\n $offset: get-side($button-padding, right)\n) {\n &::after {\n @include css-triangle($size, $color, down);\n position: relative;\n top: 0.4em; // Aligns the arrow with the text of the button\n\n display: inline-block;\n float: #{$global-right};\n margin-#{$global-left}: $offset;\n }\n}\n\n/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.\n/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.\n@mixin button(\n $expand: false,\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $style: $button-fill\n) {\n @include button-base;\n\n @if $style == solid {\n @include button-style($background, $background-hover, $color);\n }\n @else if $style == hollow {\n @include button-hollow;\n @include button-hollow-style($background);\n }\n\n @if $expand {\n @include button-expand;\n }\n}\n\n@mixin foundation-button {\n .button {\n @include button;\n\n // Sizes\n @each $size, $value in map-remove($button-sizes, default) {\n &.#{$size} {\n font-size: $value;\n }\n }\n\n &.expanded { @include button-expand; }\n\n @if $button-responsive-expanded {\n @each $size in $breakpoint-classes {\n @include breakpoint(#{$size} only) {\n &.#{$size}-only-expanded {\n @include button-expand;\n }\n }\n @if $size != $-zf-zero-breakpoint {\n @include breakpoint(#{$size} down) {\n &.#{$size}-down-expanded {\n @include button-expand;\n }\n }\n\n @include breakpoint(#{$size}) {\n &.#{$size}-expanded {\n @include button-expand;\n }\n }\n }\n }\n }\n\n // Colors\n @each $name, $color in $button-palette {\n @if $button-fill != hollow {\n &.#{$name} {\n @include button-style($color, auto, auto);\n }\n }\n @else {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n\n &.#{$name}.dropdown::after {\n border-top-color: $color;\n }\n }\n }\n\n // Disabled style\n &.disabled,\n &[disabled] {\n @include button-disabled;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-disabled($color, auto);\n }\n }\n }\n\n // Hollow style\n @if $button-fill != hollow {\n &.hollow {\n @include button-hollow;\n @include button-hollow-style;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n }\n }\n }\n\n // Clear style\n @if $button-fill != clear {\n &.clear {\n @include button-hollow;\n @include button-hollow-style;\n\n &, &:hover, &:focus {\n &, &.disabled, &[disabled] {\n border-color: transparent;\n }\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n\n &, &:hover,\n &:focus {\n &,\n &.disabled,\n &[disabled] {\n border-color: transparent;\n }\n }\n }\n }\n }\n }\n\n // Dropdown arrow\n &.dropdown {\n @include button-dropdown;\n\n @if $button-fill == hollow {\n &::after {\n border-top-color: $button-background;\n }\n }\n\n &.hollow {\n &::after {\n border-top-color: $button-background;\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n &::after {\n border-top-color: $color;\n }\n }\n }\n }\n }\n\n // Button with dropdown arrow only\n &.arrow-only::after {\n top: -0.1em;\n float: none;\n margin-#{$global-left}: 0;\n }\n }\n a.button {\n &:hover,\n &:focus {\n text-decoration: none;\n }\n }\n}\n","/* ==========================================================================\n Table extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Table\n ========================================================================== */\n\ntable {\n @include table($table-stripe);\n margin: $global-margin*6 0;\n text-align: left;\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n// sass-lint:disable force-element-nesting, no-qualifying-elements\n\n////\n/// @group table\n////\n\n/// Default color for table background.\n/// @type Color\n$table-background: $white !default;\n\n/// Default scale for darkening the striped table rows and the table border.\n/// @type Number\n$table-color-scale: 5% !default;\n\n/// Default style for table border.\n/// @type List\n$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;\n\n/// Default padding for table.\n/// @type Number\n$table-padding: rem-calc(8 10 10) !default;\n\n/// Default scale for darkening the table rows on hover.\n/// @type Number\n$table-hover-scale: 2% !default;\n\n/// Default color of standard rows on hover.\n/// @type List\n$table-row-hover: darken($table-background, $table-hover-scale) !default;\n\n/// Default color of striped rows on hover.\n/// @type List\n$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;\n\n/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.\n/// @type Boolean\n$table-is-striped: true !default;\n\n/// Default background color for striped rows.\n/// @type Color\n$table-striped-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.\n/// @type Keyword\n$table-stripe: even !default;\n\n/// Default color for header background.\n/// @type Color\n$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;\n\n/// Default color of header rows on hover.\n/// @type List\n$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;\n\n/// Default color for footer background.\n/// @type Color\n$table-foot-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default color of footer rows on hover.\n/// @type List\n$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;\n\n/// Default font color for header.\n/// @type Color\n$table-head-font-color: $body-font-color !default;\n\n/// Default font color for footer.\n/// @type Color\n$table-foot-font-color: $body-font-color !default;\n\n/// Default value for showing the header when using stacked tables.\n/// @type Boolean\n$show-header-for-stacked: false !default;\n\n/// Breakpoint at which stacked table switches from mobile to desktop view.\n/// @type Breakpoint\n$table-stack-breakpoint: medium !default;\n\n@mixin -zf-table-stripe($stripe: $table-stripe) {\n tr {\n // If stripe is set to even, darken the even rows.\n @if $stripe == even {\n &:nth-child(even) {\n border-bottom: 0;\n background-color: $table-striped-background;\n }\n }\n\n // If stripe is set to odd, darken the odd rows.\n @else if $stripe == odd {\n &:nth-child(odd) {\n background-color: $table-striped-background;\n }\n }\n }\n}\n\n@mixin -zf-table-unstripe() {\n tr {\n border-bottom: 0;\n border-bottom: $table-border;\n background-color: $table-background;\n }\n}\n\n@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {\n thead,\n tbody,\n tfoot {\n border: $table-border;\n background-color: $table-background;\n }\n\n // Caption\n caption {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n }\n\n // Table head\n thead {\n background: $table-head-background;\n color: $table-head-font-color;\n }\n\n // Table foot\n tfoot {\n background: $table-foot-background;\n color: $table-foot-font-color;\n }\n\n // Table head and foot\n thead,\n tfoot {\n // Rows within head and foot\n tr {\n background: transparent;\n }\n\n // Cells within head and foot\n th,\n td {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n text-align: #{$global-left};\n }\n }\n\n // Table rows\n tbody {\n th,\n td {\n padding: $table-padding;\n }\n }\n\n // If tables are striped\n @if $is-striped == true {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n\n &.unstriped {\n tbody {\n @include -zf-table-unstripe();\n background-color: $table-background;\n }\n }\n }\n\n // If tables are not striped\n @else if $is-striped == false {\n tbody {\n @include -zf-table-unstripe();\n }\n\n &.striped {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n }\n }\n}\n\n/// Adds the general styles for tables.\n/// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.\n@mixin table(\n $stripe: $table-stripe,\n $nest: false\n) {\n border-collapse: collapse;\n width: 100%;\n margin-bottom: $global-margin;\n border-radius: $global-radius;\n\n @if $nest {\n @include -zf-table-children-styles($stripe);\n }\n @else {\n @at-root {\n @include -zf-table-children-styles($stripe);\n }\n }\n}\n\n/// Adds the ability to horizontally scroll the table when the content overflows horizontally.\n@mixin table-scroll {\n display: block;\n width: 100%;\n overflow-x: auto;\n}\n\n/// Slightly darkens the table rows on hover.\n@mixin table-hover {\n thead tr {\n //Darkens the table header rows on hover.\n &:hover {\n background-color: $table-head-row-hover;\n }\n }\n\n tfoot tr {\n //Darkens the table footer rows on hover.\n &:hover {\n background-color: $table-foot-row-hover;\n }\n }\n\n tbody tr {\n //Darkens the non-striped table rows on hover.\n &:hover {\n background-color: $table-row-hover;\n }\n }\n\n @if $table-is-striped == true {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &:not(.unstriped) tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &:not(.unstriped) tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n\n @else if $table-is-striped == false {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &.striped tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &.striped tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n}\n\n/// Adds styles for a stacked table. Useful for small-screen layouts.\n/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.\n@mixin table-stack($header: $show-header-for-stacked) {\n @if $header {\n thead {\n th {\n display: block;\n }\n }\n }\n @else {\n thead {\n display: none;\n }\n }\n\n tfoot {\n display: none;\n }\n\n tr,\n th,\n td {\n display: block;\n }\n\n td {\n border-top: 0;\n }\n}\n\n@mixin foundation-table($nest: false) {\n table {\n @include table($nest: $nest);\n }\n\n table.stack {\n @include breakpoint($table-stack-breakpoint down) {\n @include table-stack;\n }\n }\n\n table.scroll {\n @include table-scroll;\n }\n\n table.hover {\n @include table-hover;\n }\n\n .table-scroll {\n overflow-x: auto;\n\n table {\n width: auto;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n"]}
` element.\n/// @type Number | List\n$blockquote-padding: rem-calc(9 20 0 19) !default;\n\n/// Side border for `` elements.\n/// @type List\n$blockquote-border: 1px solid $medium-gray !default;\n\n/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\n }\n }\n\n // Abbreviations\n abbr, abbr[title] {\n border-bottom: $abbr-underline;\n cursor: help;\n text-decoration: none;\n }\n\n // Figures\n figure {\n margin: 0;\n }\n \n // Code\n code {\n padding: $code-padding;\n\n border: $code-border;\n background-color: $code-background;\n\n font-family: $code-font-family;\n font-weight: $code-font-weight;\n color: $code-color;\n }\n\n // Keystrokes\n kbd {\n margin: 0;\n padding: $keystroke-padding;\n\n background-color: $keystroke-background;\n\n font-family: $keystroke-font;\n color: $keystroke-color;\n\n @if has-value($keystroke-radius) {\n border-radius: $keystroke-radius;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n$global-font-size: 100% !default;\n\n/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.\n///\n/// @param {Number} $num - Number to strip unit from.\n///\n/// @returns {Number} The same number, sans unit.\n@function strip-unit($num) {\n @return $num / ($num * 0 + 1);\n}\n\n/// Converts one or more pixel values into matching rem values.\n///\n/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.\n/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.\n///\n/// @returns {List} A list of converted values.\n@function rem-calc($values, $base: null) {\n $rem-values: ();\n $count: length($values);\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // If the base font size is a %, then multiply it by 16px\n // This is because 100% font size = 16px in most all browsers\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n // Using rem as base allows correct scaling\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if $count == 1 {\n @return -zf-to-rem($values, $base);\n }\n\n @for $i from 1 through $count {\n $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));\n }\n\n @return $rem-values;\n}\n\n// Converts a unitless, pixel, or rem value to em, for use in breakpoints.\n@function -zf-bp-to-em($value) {\n // Pixel and unitless values are converted to rems\n @if unit($value) == 'px' or unitless($value) {\n $value: rem-calc($value, $base: 16px);\n }\n\n // Then the value is converted to ems\n @return strip-unit($value) * 1em;\n}\n\n/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.\n/// @access private\n///\n/// @param {Number} $value - Pixel value to convert.\n/// @param {Number} $base [null] - Base for pixel conversion.\n///\n/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.\n@function -zf-to-rem($value, $base: null) {\n // Check if the value is a number\n @if type-of($value) != 'number' {\n @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';\n @return $value;\n }\n\n // Transform em into rem if someone hands over 'em's\n @if unit($value) == 'em' {\n $value: strip-unit($value) * 1rem;\n }\n\n // Calculate rem if units for $value is not rem or em\n @if unit($value) != 'rem' {\n $value: strip-unit($value) / strip-unit($base) * 1rem;\n }\n\n // Turn 0rem into 0\n @if $value == 0rem {\n $value: 0;\n }\n\n @return $value;\n}\n\n/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.\n///\n/// @param {Number} $value - Value to convert to a unitless line height\n/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size\n///\n/// @return {Number} - Unitless number\n@function unitless-calc($value, $base: null) {\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // First, lets convert our $base to pixels\n\n // If the base font size is a %, then multiply it by 16px\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if unit($base) == 'em' {\n $base: strip-unit($base) * 16px;\n }\n\n // Now lets convert our value to pixels too\n @if unit($value) == '%' {\n $value: ($value / 100%) * $base;\n }\n\n @if unit($value) == 'rem' {\n $value: strip-unit($value) * $base;\n }\n\n @if unit($value) == 'em' {\n $value: strip-unit($value) * $base;\n }\n\n // 'px'\n @if unit($value) == 'px' {\n @return strip-unit($value) / strip-unit($base);\n }\n\n // assume that line-heights greatern then 10 are meant to be absolute in 'px'\n @if unitless($value) and ($value > 10) {\n @return $value / strip-unit($base);\n }\n\n @return $value;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group breakpoints\n////\n\n/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.\n/// @type Map\n$breakpoints: (\n small: 0,\n medium: 640px,\n large: 1024px,\n xlarge: 1200px,\n xxlarge: 1440px,\n) !default;\n\n/// The largest named breakpoint in which to include print as a media type\n/// @type Keyword\n$print-breakpoint: large !default;\n\n$-zf-zero-breakpoint: small !default;\n\n$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');\n\n@if nth(map-values($breakpoints), 1) != 0 {\n @error 'Your smallest breakpoint (defined in $breakpoints) must be set to \"0\".';\n}\n@else {\n $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);\n}\n\n/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.\n/// @type List\n$breakpoint-classes: (small medium large) !default;\n\n/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.\n///\n/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.\n@function breakpoint($val: $-zf-zero-breakpoint) {\n // Size or keyword\n $bp: nth($val, 1);\n // Value for max-width media queries\n $bp-max: 0;\n // Direction of media query (up, down, or only)\n $dir: if(length($val) > 1, nth($val, 2), up);\n // Eventual output\n $str: '';\n // Is it a named media query?\n $named: false;\n\n // Orientation media queries have a unique syntax\n @if $bp == 'landscape' or $bp == 'portrait' {\n @return '(orientation: #{$bp})';\n }\n @else if $bp == 'retina' {\n @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';\n }\n\n // Try to pull a named breakpoint out of the $breakpoints map\n @if type-of($bp) == 'string' {\n @if map-has-key($breakpoints, $bp) {\n @if $dir == 'only' or $dir == 'down' {\n $bp-max: -zf-map-next($breakpoints, $bp);\n }\n\n $bp: map-get($breakpoints, $bp);\n $named: true;\n }\n @else {\n $bp: 0;\n @warn 'breakpoint(): \"#{$val}\" is not defined in your $breakpoints setting.';\n }\n }\n\n // Convert any pixel, rem, or unitless value to em\n $bp: -zf-bp-to-em($bp);\n @if $bp-max {\n $bp-max: -zf-bp-to-em($bp-max) - (1/16);\n }\n\n // Conditions to skip media query creation\n // - It's a named breakpoint that resolved to \"0 down\" or \"0 up\"\n // - It's a numeric breakpoint that resolved to \"0 \" + anything\n @if $bp > 0em or $dir == 'only' or $dir == 'down' {\n // `only` ranges use the format `(min-width: n) and (max-width: n)`\n @if $dir == 'only' {\n // Only named media queries can have an \"only\" range\n @if $named == true {\n // Only use \"min-width\" if the floor is greater than 0\n @if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n\n // Only add \"and\" to the media query if there's a ceiling\n @if $bp-max != null {\n $str: $str + ' and ';\n }\n }\n\n // Only use \"max-width\" if there's a ceiling\n @if $bp-max != null {\n $str: $str + '(max-width: #{$bp-max})';\n }\n }\n @else {\n @warn 'breakpoint(): Only named media queries can have an `only` range.';\n }\n }\n\n // `down` ranges use the format `(max-width: n)`\n @else if $dir == 'down' {\n $max: if($named, $bp-max, $bp);\n\n // Skip media query creation if input value is exactly \"0 down\",\n // unless the function was called as \"small down\", in which case it's just \"small only\"\n @if $named or $bp > 0em {\n @if $max != null {\n $str: $str + '(max-width: #{$max})';\n }\n }\n }\n\n // `up` ranges use the format `(min-width: n)`\n @else if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n }\n }\n\n @return $str;\n}\n\n/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:\n/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.\n/// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.\n/// - If a rem value is passed, the unit will be changed to em.\n/// - If an em value is passed, the value will be used as-is.\n///\n/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.\n///\n/// @output If the breakpoint is \"0px and larger\", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.\n@mixin breakpoint($value) {\n $str: breakpoint($value);\n $bp: index($-zf-breakpoints-keys, $value);\n $pbp: index($-zf-breakpoints-keys, $print-breakpoint);\n\n $old-zf-size: null;\n\n // Make breakpoint size available as a variable\n @if global-variable-exists(-zf-size) {\n $old-zf-size: $-zf-size;\n }\n $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords\n\n // If $str is still an empty string, no media query is needed\n @if $str == '' {\n @content;\n }\n\n // Otherwise, wrap the content in a media query\n @else {\n // For named breakpoints less than or equal to $print-breakpoint, add print to the media types\n @if $bp != null and $bp <= $pbp {\n @media print, screen and #{$str} {\n @content;\n }\n }\n @else {\n @media screen and #{$str} {\n @content;\n }\n }\n }\n\n @if $old-zf-size != null {\n // Restore the old breakpoint size\n $-zf-size: $old-zf-size !global;\n } @else {\n $-zf-size: null !global;\n }\n}\n\n/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.\n/// @access private\n///\n/// @param {Map} $map - Map to convert.\n///\n/// @returns {String} A string containing the map's contents.\n@function -zf-bp-serialize($map) {\n $str: '';\n @each $key, $value in $map {\n $str: $str + $key + '=' + -zf-bp-to-em($value) + '&';\n }\n $str: str-slice($str, 1, -2);\n\n @return $str;\n}\n\n/// Find the next key in a map.\n/// @access private\n///\n/// @param {Map} $map - Map to traverse.\n/// @param {Mixed} $key - Key to use as a starting point.\n///\n/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.\n@function -zf-map-next($map, $key) {\n\n // Store the keys of the map as a list\n $values: map-keys($map);\n\n $i: 0;\n\n // If the Key Exists, Get the index of the key within the map and add 1 to it for the next breakpoint in the map\n @if (map-has-key($map, $key)) {\n $i: index($values, $key) + 1;\n }\n\n // If the key doesn't exist, or it's the last key in the map, return null\n @if ($i > length($map) or $i == 0) {\n @return null;\n }\n // Otherwise, return the value\n @else {\n @return map-get($map, nth($values, $i));\n }\n\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $key - Key to use as last breakpoint.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-breakpoints-less-than($key) {\n $list: ();\n $found_key: false;\n\n @each $name in $-zf-breakpoints-keys {\n @if ($name == $key) {\n $found_key: true;\n }\n @if not $found_key {\n $list: append($list, $name);\n }\n }\n @return $list;\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $breakpoing - a named or non-named breakpoing.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-closest-named-breakpoint($breakpoint) {\n $last: $-zf-zero-breakpoint;\n $found: false;\n\n $value: unitless-calc($breakpoint, 1px);\n @each $key, $val in $breakpoints {\n @if not $found {\n @if unitless-calc($val) > $value {\n $found: true;\n } @else {\n $last: $key;\n }\n }\n }\n\n @return $last;\n}\n\n/// Get a value for a breakpoint from a responsive config map or single value.\n/// - If the config is a single value, return it regardless of `$value`.\n/// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.\n/// - If the config is a map and does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.\n/// @access private\n///\n/// @param {Number|Map} $map - Responsive config map or single value.\n/// @param {Keyword} $value - Breakpoint name to use.\n///\n/// @return {Mixed} The corresponding breakpoint value.\n@function -zf-get-bp-val($map, $value) {\n // If the given map is a single value, return it\n @if type-of($map) == 'number' {\n @return $map;\n }\n\n\n // Check if the breakpoint name exists globally\n @if not map-has-key($breakpoints, $value) {\n @if type-of($value) == 'number' {\n $value: -zf-closest-named-breakpoint($value);\n } @else {\n @return null;\n }\n }\n // Check if the breakpoint name exists in the local config map\n @else if map-has-key($map, $value) {\n // If it does, just return the value\n @return map-get($map, $value);\n }\n // Otherwise, find the next lowest breakpoint and return that value\n @else {\n $anchor: null;\n $found: false;\n\n @each $key, $val in $breakpoints {\n @if not $found {\n @if map-has-key($map, $key) {\n $anchor: $key;\n }\n @if $key == $value {\n $found: true;\n }\n }\n }\n\n @return map-get($map, $anchor);\n }\n}\n\n$small-up: '';\n$small-only: '';\n\n@if map-has-key($breakpoints, small) {\n $small-up: screen;\n $small-only: unquote('screen and #{breakpoint(small only)}');\n}\n\n$medium-up: '';\n$medium-only: '';\n\n@if map-has-key($breakpoints, medium) {\n $medium-up: unquote('screen and #{breakpoint(medium)}');\n $medium-only: unquote('screen and #{breakpoint(medium only)}');\n}\n\n$large-up: '';\n$large-only: '';\n\n@if map-has-key($breakpoints, large) {\n $large-up: unquote('screen and #{breakpoint(large)}');\n $large-only: unquote('screen and #{breakpoint(large only)}');\n}\n\n$xlarge-up: '';\n$xlarge-only: '';\n\n@if map-has-key($breakpoints, xlarge) {\n $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');\n $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');\n}\n\n$xxlarge-up: '';\n\n@if map-has-key($breakpoints, xxlarge) {\n $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group typography-helpers\n////\n\n/// Default font size for lead paragraphs.\n/// @type Number\n$lead-font-size: $global-font-size * 1.25 !default;\n\n/// Default line height for lead paragraphs.\n/// @type String\n$lead-lineheight: 1.6 !default;\n\n/// Default line height for subheaders.\n/// @type Number\n$subheader-lineheight: 1.4 !default;\n\n/// Default font color for subheaders.\n/// @type Color\n$subheader-color: $dark-gray !default;\n\n/// Default font weight for subheaders.\n/// @type String\n$subheader-font-weight: $global-weight-normal !default;\n\n/// Default top margin for subhheaders.\n/// @type Number\n$subheader-margin-top: 0.2rem !default;\n\n/// Default bottom margin for subheaders.\n/// @type Number\n$subheader-margin-bottom: 0.5rem !default;\n\n/// Default font size for statistic numbers.\n/// @type Number\n$stat-font-size: 2.5rem !default;\n\n@mixin foundation-typography-helpers {\n // Use to create a subheading under a main header\n // Make sure you pair the two elements in a element, like this:\n // \n // Heading\n // Subheading\n // \n .subheader {\n margin-top: $subheader-margin-top;\n margin-bottom: $subheader-margin-bottom;\n\n font-weight: $subheader-font-weight;\n line-height: $subheader-lineheight;\n color: $subheader-color;\n }\n\n // Use to style an introductory lead, deck, blurb, etc.\n .lead {\n font-size: $lead-font-size;\n line-height: $lead-lineheight;\n }\n\n // Use to style a large number to display a statistic\n .stat {\n font-size: $stat-font-size;\n line-height: 1;\n\n p + & {\n margin-top: -1rem;\n }\n }\n\n ul, ol {\n // Use to remove numbers from ordered list & bullets from unordered list\n &.no-bullet {\n margin-#{$global-left}: 0;\n list-style: none;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@mixin foundation-text-alignment {\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @each $align in (left, right, center, justify) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-text-#{$align} {\n text-align: $align;\n }\n }\n @else {\n .text-#{$align} {\n text-align: $align;\n }\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// If `true`, all elements will have transparent backgrounds when printed, to save on ink.\n/// @type Boolean\n/// @group global\n$print-transparent-backgrounds: true !default;\n$print-hrefs: true !default;\n\n// sass-lint:disable-all\n\n@mixin foundation-print-styles {\n .show-for-print { display: none !important; }\n\n @media print {\n * {\n @if $print-transparent-backgrounds {\n background: transparent !important;\n }\n\n box-shadow: none !important;\n\n color: black !important; // Black prints faster: h5bp.com/s\n text-shadow: none !important;\n }\n\n .show-for-print { display: block !important; }\n .hide-for-print { display: none !important; }\n\n table.show-for-print { display: table !important; }\n thead.show-for-print { display: table-header-group !important; }\n tbody.show-for-print { display: table-row-group !important; }\n tr.show-for-print { display: table-row !important; }\n td.show-for-print { display: table-cell !important; }\n th.show-for-print { display: table-cell !important; }\n\n // Display the URL of a link after the text\n a,\n a:visited { text-decoration: underline;}\n @if $print-hrefs {\n a[href]:after { content: ' (' attr(href) ')'; }\n }\n\n // Don't display the URL for images or JavaScript/internal links\n .ir a:after,\n a[href^='javascript:']:after,\n a[href^='#']:after { content: ''; }\n\n // Display what an abbreviation stands for after the text\n abbr[title]:after { content: ' (' attr(title) ')'; }\n\n // Prevent page breaks in the middle of a blockquote or preformatted text block\n pre,\n blockquote {\n border: 1px solid $dark-gray;\n page-break-inside: avoid;\n }\n\n // h5bp.com/t\n thead { display: table-header-group; }\n\n tr,\n img { page-break-inside: avoid; }\n\n img { max-width: 100% !important; }\n\n @page { margin: 0.5cm; }\n\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n\n // Avoid page breaks after a heading\n h2,\n h3 { page-break-after: avoid; }\n\n // Helper to re-allow page breaks in the middle of certain elements (e.g. pre, blockquote, tr)\n .print-break-inside {\n page-break-inside: auto;\n }\n }\n}\n","/* ==========================================================================\n Layout extends and mixins\n========================================================================== */\n\n @import 'xy-grid/xy-grid';\n\n/* ==========================================================================\n Layout\n========================================================================== */\n\n.container {\n @include xy-grid-container;\n}\n\n.grid {\n @include xy-grid;\n\n .grid {\n @include xy-gutters($negative: true);\n }\n}\n\n.cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &--auto {\n @include xy-cell-base(auto);\n }\n\n &--shrink {\n @include xy-cell-base(shrink);\n }\n\n &--full { \n @include xy-cell;\n }\n\n &--half {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n }\n\n &--third { \n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 3);\n }\n }\n\n &--two-thirds {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n }\n\n &--quarter {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n\n @include breakpoint(large) {\n @include xy-cell(1 of 4);\n }\n }\n}\n\n.align {\n &--center {\n @include flex-align($x: center);\n }\n\n &--justify {\n @include flex-align($x: justify);\n }\n\n &--end {\n @include flex-align($x: right);\n }\n}\n\n.v-align {\n &--center {\n height: 100%;\n @include flex-align($y: middle);\n }\n}\n\n.hide-mobile {\n @include breakpoint (small only) {\n display: none;\n }\n}\n\n.show-desktop {\n display: none;\n\n @include breakpoint (large) {\n display: block;\n }\n}\n\n.mb {\n &-2 {\n margin-bottom: $global-margin*2;\n }\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @elseif (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin: 0 auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @elseif type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @elseif ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @elseif ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @elseif ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @elseif ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @elseif ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n }\n }\n\n // Get our gutters from map if available, if not map just return the value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","/* ==========================================================================\n Banner extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Banner\n ========================================================================== */\n\n.banner {\n background-color: get-color(primary);\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n padding: $global-padding/2 0;\n color: $white;\n\n h2 {\n margin: 0;\n }\n }\n}","/* ==========================================================================\n Footer extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Footer\n ========================================================================== */\n\n.footer {\n background-color: $light-gray;\n padding: $global-padding*2 0;\n color: $dark-gray;\n}","/* ==========================================================================\n Hero extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Hero\n ========================================================================== */\n\n.hero {\n background-image: url('../img/hero.jpg');\n background-size: cover;\n background-position: center;\n min-height: 300px;\n height: 60vh;\n margin-bottom: $global-margin*5;\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n height: 100%;\n }\n\n > .container {\n height: 50vh;\n }\n\n &__content {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n\n h1 {\n font-family: 'Kaushan Script', cursive;\n color: $white;\n text-shadow: 0px 6px 10px $black;\n font-size: 3rem;\n text-align: center;\n }\n\n @include breakpoint(medium) {\n h1 {\n font-size: 4rem;\n }\n }\n\n @include breakpoint(large) {\n h1 {\n font-size: 7rem;\n }\n }\n }\n}","/* ==========================================================================\n Masthead extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Masthead\n ========================================================================== */\n\n.masthead {\n &__inner {\n @include xy-grid;\n @include flex-align($x: justify, $y: middle);\n }\n\n &__logo,\n &__cta {\n @include xy-cell-base(shrink);\n }\n\n &__cta {\n .button {\n margin: $global-margin 0;\n }\n }\n}","/* ==========================================================================\n Section extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Section\n ========================================================================== */\n\n.section {\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n @include xy-cell;\n text-align: center;\n\n @include breakpoint(large) {\n @include xy-cell(2 of 3);\n }\n }\n}","/* ==========================================================================\n Tiles extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Tiles\n ========================================================================== */\n\n.tile {\n @include xy-cell(100%, false, $grid-margin-gutters, padding);\n position: relative;\n\n @include breakpoint (medium) {\n @include xy-cell(1 of 3, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (large) {\n @include xy-cell(1 of 4, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (xlarge) {\n @include xy-cell(20%, false, $grid-margin-gutters, padding);\n }\n\n &__content {\n padding: $global-padding;\n background: rgb(0,0,0);\n background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0));\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: 1;\n }\n\n &__body {\n color: $white;\n }\n\n &s {\n list-style-type: none;\n margin: 0 0 $global-margin*5;\n @include xy-grid;\n }\n}","/* ==========================================================================\n Backgrounds extends and mixins\n ========================================================================== */\n\n@mixin bg($name, $hex) {\n &--#{$name} {\n background-color: $hex;\n\n @if color-contrast($hex, $black) < 8 {\n color: $white;\n\n a {\n color: $black;\n\n &:hover,\n &:focus,\n &:active {\n color: scale-color($hex, $lightness: -40%);\n }\n }\n }\n }\n}\n\n/* ==========================================================================\n Backgrounds\n ========================================================================== */\n\n.bg {\n @each $color, $hex in $foundation-palette {\n @include bg($color, $hex);\n }\n\n @include bg( 'primary', get-color(primary) );\n @include bg( 'secondary', get-color(secondary) );\n @include bg( 'light-gray', $light-gray );\n @include bg( 'medium-gray', $medium-gray );\n @include bg( 'dark-gray', $dark-gray );\n}","/* ==========================================================================\n Buttons extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Buttons\n ========================================================================== */\n\n.button {\n @include button(false, $button-background, $button-background-hover, $button-color, solid);\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group button\n////\n\n/// Font family for button elements.\n/// @type Font\n$button-font-family: inherit !default;\n\n/// Padding inside buttons.\n/// @type List\n$button-padding: 0.85em 1em !default;\n\n/// Margin around buttons.\n/// @type List\n$button-margin: 0 0 $global-margin 0 !default;\n\n/// Default fill for buttons. Can either be `solid` or `hollow`.\n/// @type Keyword\n$button-fill: solid !default;\n\n/// Default background color for buttons.\n/// @type Color\n$button-background: $primary-color !default;\n\n/// Background color on hover for buttons.\n/// @type Color\n$button-background-hover: scale-color($button-background, $lightness: -15%) !default;\n\n/// Font color for buttons.\n/// @type List\n$button-color: $white !default;\n\n/// Alternative font color for buttons.\n/// @type List\n$button-color-alt: $black !default;\n\n/// Border radius for buttons, defaulted to global-radius.\n/// @type Number\n$button-radius: $global-radius !default;\n\n/// Border width for hollow outline buttons\n/// @type Number\n$button-hollow-border-width: 1px !default;\n\n/// Sizes for buttons.\n/// @type Map\n$button-sizes: (\n tiny: 0.6rem,\n small: 0.75rem,\n default: 0.9rem,\n large: 1.25rem,\n) !default;\n\n/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.\n/// @type Map\n$button-palette: $foundation-palette !default;\n\n/// opacity for a disabled button.\n/// @type List\n$button-opacity-disabled: 0.25 !default;\n\n/// Background color lightness on hover for buttons.\n/// @type Number\n$button-background-hover-lightness: -20% !default;\n\n/// Color lightness on hover for hollow buttons.\n/// @type Number\n$button-hollow-hover-lightness: -50% !default;\n\n// Internal: flip from margin-right to margin-left for defaults\n@if $global-text-direction == 'rtl' {\n $button-margin: 0 0 $global-margin $global-margin !default;\n}\n\n/// transitions for buttons.\n/// @type List\n$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;\n\n/// Additional responsive classes for .expanded\n/// @type Boolean\n$button-responsive-expanded: false !default;\n\n// TODO: Document button-base() mixin\n@mixin button-base {\n @include disable-mouse-outline;\n display: inline-block;\n vertical-align: middle;\n margin: $button-margin;\n font-family: $button-font-family;\n\n @if (type-of($button-padding) == 'map') {\n @each $size, $padding in $button-padding {\n @include breakpoint($size) {\n padding: $padding;\n }\n }\n }\n @else {\n padding: $button-padding;\n }\n\n -webkit-appearance: none;\n border: 1px solid transparent;\n border-radius: $button-radius;\n transition: $button-transition;\n font-size: map-get($button-sizes, default);\n line-height: 1;\n text-align: center;\n cursor: pointer;\n}\n\n/// Expands a button to make it full-width.\n/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.\n@mixin button-expand($expand: true) {\n @if $expand {\n display: block;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n }\n @else {\n display: inline-block;\n width: auto;\n margin: $button-margin;\n }\n}\n\n/// Sets the visual style of a button.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n@mixin button-style(\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $background-hover-lightness: $button-background-hover-lightness\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n @if $background-hover == auto {\n $background-hover: scale-color($background, $lightness: $background-hover-lightness);\n }\n\n background-color: $background;\n color: $color;\n\n &:hover, &:focus {\n background-color: $background-hover;\n color: $color;\n }\n}\n\n/// Removes background fill on hover and focus for hollow buttons.\n@mixin button-hollow {\n &,\n &:hover,\n &:focus {\n background-color: transparent;\n }\n\n &.disabled,\n &[disabled] {\n &,\n &:hover, &:focus {\n background-color: transparent;\n }\n }\n}\n\n@mixin button-hollow-style(\n $color: $button-background,\n $hover-lightness: $button-hollow-hover-lightness,\n $border-width: $button-hollow-border-width\n) {\n $color-hover: scale-color($color, $lightness: $hover-lightness);\n\n border: $border-width solid $color;\n color: $color;\n\n &:hover, &:focus {\n border-color: $color-hover;\n color: $color-hover;\n &.disabled,\n &[disabled] {\n border: $border-width solid $color;\n color: $color;\n }\n }\n}\n\n/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.\n/// @param [Color] $background [$button-background] - Background color of the disabled button.\n/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.\n@mixin button-disabled(\n $background: $button-background,\n $color: $button-color\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n opacity: $button-opacity-disabled;\n cursor: not-allowed;\n\n &, &:hover, &:focus {\n background-color: $background;\n color: $color;\n }\n}\n\n/// Adds a dropdown arrow to a button.\n/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.\n/// @param {Color} $color [white] - Color of the arrow.\n/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.\n@mixin button-dropdown(\n $size: 0.4em,\n $color: $white,\n $offset: get-side($button-padding, right)\n) {\n &::after {\n @include css-triangle($size, $color, down);\n position: relative;\n top: 0.4em; // Aligns the arrow with the text of the button\n\n display: inline-block;\n float: #{$global-right};\n margin-#{$global-left}: $offset;\n }\n}\n\n/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.\n/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.\n@mixin button(\n $expand: false,\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $style: $button-fill\n) {\n @include button-base;\n\n @if $style == solid {\n @include button-style($background, $background-hover, $color);\n }\n @else if $style == hollow {\n @include button-hollow;\n @include button-hollow-style($background);\n }\n\n @if $expand {\n @include button-expand;\n }\n}\n\n@mixin foundation-button {\n .button {\n @include button;\n\n // Sizes\n @each $size, $value in map-remove($button-sizes, default) {\n &.#{$size} {\n font-size: $value;\n }\n }\n\n &.expanded { @include button-expand; }\n\n @if $button-responsive-expanded {\n @each $size in $breakpoint-classes {\n @include breakpoint(#{$size} only) {\n &.#{$size}-only-expanded {\n @include button-expand;\n }\n }\n @if $size != $-zf-zero-breakpoint {\n @include breakpoint(#{$size} down) {\n &.#{$size}-down-expanded {\n @include button-expand;\n }\n }\n\n @include breakpoint(#{$size}) {\n &.#{$size}-expanded {\n @include button-expand;\n }\n }\n }\n }\n }\n\n // Colors\n @each $name, $color in $button-palette {\n @if $button-fill != hollow {\n &.#{$name} {\n @include button-style($color, auto, auto);\n }\n }\n @else {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n\n &.#{$name}.dropdown::after {\n border-top-color: $color;\n }\n }\n }\n\n // Disabled style\n &.disabled,\n &[disabled] {\n @include button-disabled;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-disabled($color, auto);\n }\n }\n }\n\n // Hollow style\n @if $button-fill != hollow {\n &.hollow {\n @include button-hollow;\n @include button-hollow-style;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n }\n }\n }\n\n // Clear style\n @if $button-fill != clear {\n &.clear {\n @include button-hollow;\n @include button-hollow-style;\n\n &, &:hover, &:focus {\n &, &.disabled, &[disabled] {\n border-color: transparent;\n }\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n\n &, &:hover,\n &:focus {\n &,\n &.disabled,\n &[disabled] {\n border-color: transparent;\n }\n }\n }\n }\n }\n }\n\n // Dropdown arrow\n &.dropdown {\n @include button-dropdown;\n\n @if $button-fill == hollow {\n &::after {\n border-top-color: $button-background;\n }\n }\n\n &.hollow {\n &::after {\n border-top-color: $button-background;\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n &::after {\n border-top-color: $color;\n }\n }\n }\n }\n }\n\n // Button with dropdown arrow only\n &.arrow-only::after {\n top: -0.1em;\n float: none;\n margin-#{$global-left}: 0;\n }\n }\n a.button {\n &:hover,\n &:focus {\n text-decoration: none;\n }\n }\n}\n","/* ==========================================================================\n Table extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Table\n ========================================================================== */\n\ntable {\n @include table($table-stripe);\n margin: $global-margin*6 0;\n text-align: left;\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n// sass-lint:disable force-element-nesting, no-qualifying-elements\n\n////\n/// @group table\n////\n\n/// Default color for table background.\n/// @type Color\n$table-background: $white !default;\n\n/// Default scale for darkening the striped table rows and the table border.\n/// @type Number\n$table-color-scale: 5% !default;\n\n/// Default style for table border.\n/// @type List\n$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;\n\n/// Default padding for table.\n/// @type Number\n$table-padding: rem-calc(8 10 10) !default;\n\n/// Default scale for darkening the table rows on hover.\n/// @type Number\n$table-hover-scale: 2% !default;\n\n/// Default color of standard rows on hover.\n/// @type List\n$table-row-hover: darken($table-background, $table-hover-scale) !default;\n\n/// Default color of striped rows on hover.\n/// @type List\n$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;\n\n/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.\n/// @type Boolean\n$table-is-striped: true !default;\n\n/// Default background color for striped rows.\n/// @type Color\n$table-striped-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.\n/// @type Keyword\n$table-stripe: even !default;\n\n/// Default color for header background.\n/// @type Color\n$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;\n\n/// Default color of header rows on hover.\n/// @type List\n$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;\n\n/// Default color for footer background.\n/// @type Color\n$table-foot-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default color of footer rows on hover.\n/// @type List\n$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;\n\n/// Default font color for header.\n/// @type Color\n$table-head-font-color: $body-font-color !default;\n\n/// Default font color for footer.\n/// @type Color\n$table-foot-font-color: $body-font-color !default;\n\n/// Default value for showing the header when using stacked tables.\n/// @type Boolean\n$show-header-for-stacked: false !default;\n\n/// Breakpoint at which stacked table switches from mobile to desktop view.\n/// @type Breakpoint\n$table-stack-breakpoint: medium !default;\n\n@mixin -zf-table-stripe($stripe: $table-stripe) {\n tr {\n // If stripe is set to even, darken the even rows.\n @if $stripe == even {\n &:nth-child(even) {\n border-bottom: 0;\n background-color: $table-striped-background;\n }\n }\n\n // If stripe is set to odd, darken the odd rows.\n @else if $stripe == odd {\n &:nth-child(odd) {\n background-color: $table-striped-background;\n }\n }\n }\n}\n\n@mixin -zf-table-unstripe() {\n tr {\n border-bottom: 0;\n border-bottom: $table-border;\n background-color: $table-background;\n }\n}\n\n@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {\n thead,\n tbody,\n tfoot {\n border: $table-border;\n background-color: $table-background;\n }\n\n // Caption\n caption {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n }\n\n // Table head\n thead {\n background: $table-head-background;\n color: $table-head-font-color;\n }\n\n // Table foot\n tfoot {\n background: $table-foot-background;\n color: $table-foot-font-color;\n }\n\n // Table head and foot\n thead,\n tfoot {\n // Rows within head and foot\n tr {\n background: transparent;\n }\n\n // Cells within head and foot\n th,\n td {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n text-align: #{$global-left};\n }\n }\n\n // Table rows\n tbody {\n th,\n td {\n padding: $table-padding;\n }\n }\n\n // If tables are striped\n @if $is-striped == true {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n\n &.unstriped {\n tbody {\n @include -zf-table-unstripe();\n background-color: $table-background;\n }\n }\n }\n\n // If tables are not striped\n @else if $is-striped == false {\n tbody {\n @include -zf-table-unstripe();\n }\n\n &.striped {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n }\n }\n}\n\n/// Adds the general styles for tables.\n/// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.\n@mixin table(\n $stripe: $table-stripe,\n $nest: false\n) {\n border-collapse: collapse;\n width: 100%;\n margin-bottom: $global-margin;\n border-radius: $global-radius;\n\n @if $nest {\n @include -zf-table-children-styles($stripe);\n }\n @else {\n @at-root {\n @include -zf-table-children-styles($stripe);\n }\n }\n}\n\n/// Adds the ability to horizontally scroll the table when the content overflows horizontally.\n@mixin table-scroll {\n display: block;\n width: 100%;\n overflow-x: auto;\n}\n\n/// Slightly darkens the table rows on hover.\n@mixin table-hover {\n thead tr {\n //Darkens the table header rows on hover.\n &:hover {\n background-color: $table-head-row-hover;\n }\n }\n\n tfoot tr {\n //Darkens the table footer rows on hover.\n &:hover {\n background-color: $table-foot-row-hover;\n }\n }\n\n tbody tr {\n //Darkens the non-striped table rows on hover.\n &:hover {\n background-color: $table-row-hover;\n }\n }\n\n @if $table-is-striped == true {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &:not(.unstriped) tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &:not(.unstriped) tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n\n @else if $table-is-striped == false {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &.striped tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &.striped tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n}\n\n/// Adds styles for a stacked table. Useful for small-screen layouts.\n/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.\n@mixin table-stack($header: $show-header-for-stacked) {\n @if $header {\n thead {\n th {\n display: block;\n }\n }\n }\n @else {\n thead {\n display: none;\n }\n }\n\n tfoot {\n display: none;\n }\n\n tr,\n th,\n td {\n display: block;\n }\n\n td {\n border-top: 0;\n }\n}\n\n@mixin foundation-table($nest: false) {\n table {\n @include table($nest: $nest);\n }\n\n table.stack {\n @include breakpoint($table-stack-breakpoint down) {\n @include table-stack;\n }\n }\n\n table.scroll {\n @include table-scroll;\n }\n\n table.hover {\n @include table-hover;\n }\n\n .table-scroll {\n overflow-x: auto;\n\n table {\n width: auto;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n"]}
` elements.\n/// @type List\n$blockquote-border: 1px solid $medium-gray !default;\n\n/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\n }\n }\n\n // Abbreviations\n abbr, abbr[title] {\n border-bottom: $abbr-underline;\n cursor: help;\n text-decoration: none;\n }\n\n // Figures\n figure {\n margin: 0;\n }\n \n // Code\n code {\n padding: $code-padding;\n\n border: $code-border;\n background-color: $code-background;\n\n font-family: $code-font-family;\n font-weight: $code-font-weight;\n color: $code-color;\n }\n\n // Keystrokes\n kbd {\n margin: 0;\n padding: $keystroke-padding;\n\n background-color: $keystroke-background;\n\n font-family: $keystroke-font;\n color: $keystroke-color;\n\n @if has-value($keystroke-radius) {\n border-radius: $keystroke-radius;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n$global-font-size: 100% !default;\n\n/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.\n///\n/// @param {Number} $num - Number to strip unit from.\n///\n/// @returns {Number} The same number, sans unit.\n@function strip-unit($num) {\n @return $num / ($num * 0 + 1);\n}\n\n/// Converts one or more pixel values into matching rem values.\n///\n/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.\n/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.\n///\n/// @returns {List} A list of converted values.\n@function rem-calc($values, $base: null) {\n $rem-values: ();\n $count: length($values);\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // If the base font size is a %, then multiply it by 16px\n // This is because 100% font size = 16px in most all browsers\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n // Using rem as base allows correct scaling\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if $count == 1 {\n @return -zf-to-rem($values, $base);\n }\n\n @for $i from 1 through $count {\n $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));\n }\n\n @return $rem-values;\n}\n\n// Converts a unitless, pixel, or rem value to em, for use in breakpoints.\n@function -zf-bp-to-em($value) {\n // Pixel and unitless values are converted to rems\n @if unit($value) == 'px' or unitless($value) {\n $value: rem-calc($value, $base: 16px);\n }\n\n // Then the value is converted to ems\n @return strip-unit($value) * 1em;\n}\n\n/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.\n/// @access private\n///\n/// @param {Number} $value - Pixel value to convert.\n/// @param {Number} $base [null] - Base for pixel conversion.\n///\n/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.\n@function -zf-to-rem($value, $base: null) {\n // Check if the value is a number\n @if type-of($value) != 'number' {\n @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';\n @return $value;\n }\n\n // Transform em into rem if someone hands over 'em's\n @if unit($value) == 'em' {\n $value: strip-unit($value) * 1rem;\n }\n\n // Calculate rem if units for $value is not rem or em\n @if unit($value) != 'rem' {\n $value: strip-unit($value) / strip-unit($base) * 1rem;\n }\n\n // Turn 0rem into 0\n @if $value == 0rem {\n $value: 0;\n }\n\n @return $value;\n}\n\n/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.\n///\n/// @param {Number} $value - Value to convert to a unitless line height\n/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size\n///\n/// @return {Number} - Unitless number\n@function unitless-calc($value, $base: null) {\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // First, lets convert our $base to pixels\n\n // If the base font size is a %, then multiply it by 16px\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if unit($base) == 'em' {\n $base: strip-unit($base) * 16px;\n }\n\n // Now lets convert our value to pixels too\n @if unit($value) == '%' {\n $value: ($value / 100%) * $base;\n }\n\n @if unit($value) == 'rem' {\n $value: strip-unit($value) * $base;\n }\n\n @if unit($value) == 'em' {\n $value: strip-unit($value) * $base;\n }\n\n // 'px'\n @if unit($value) == 'px' {\n @return strip-unit($value) / strip-unit($base);\n }\n\n // assume that line-heights greatern then 10 are meant to be absolute in 'px'\n @if unitless($value) and ($value > 10) {\n @return $value / strip-unit($base);\n }\n\n @return $value;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group breakpoints\n////\n\n/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.\n/// @type Map\n$breakpoints: (\n small: 0,\n medium: 640px,\n large: 1024px,\n xlarge: 1200px,\n xxlarge: 1440px,\n) !default;\n\n/// The largest named breakpoint in which to include print as a media type\n/// @type Keyword\n$print-breakpoint: large !default;\n\n$-zf-zero-breakpoint: small !default;\n\n$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');\n\n@if nth(map-values($breakpoints), 1) != 0 {\n @error 'Your smallest breakpoint (defined in $breakpoints) must be set to \"0\".';\n}\n@else {\n $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);\n}\n\n/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.\n/// @type List\n$breakpoint-classes: (small medium large) !default;\n\n/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.\n///\n/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.\n@function breakpoint($val: $-zf-zero-breakpoint) {\n // Size or keyword\n $bp: nth($val, 1);\n // Value for max-width media queries\n $bp-max: 0;\n // Direction of media query (up, down, or only)\n $dir: if(length($val) > 1, nth($val, 2), up);\n // Eventual output\n $str: '';\n // Is it a named media query?\n $named: false;\n\n // Orientation media queries have a unique syntax\n @if $bp == 'landscape' or $bp == 'portrait' {\n @return '(orientation: #{$bp})';\n }\n @else if $bp == 'retina' {\n @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';\n }\n\n // Try to pull a named breakpoint out of the $breakpoints map\n @if type-of($bp) == 'string' {\n @if map-has-key($breakpoints, $bp) {\n @if $dir == 'only' or $dir == 'down' {\n $bp-max: -zf-map-next($breakpoints, $bp);\n }\n\n $bp: map-get($breakpoints, $bp);\n $named: true;\n }\n @else {\n $bp: 0;\n @warn 'breakpoint(): \"#{$val}\" is not defined in your $breakpoints setting.';\n }\n }\n\n // Convert any pixel, rem, or unitless value to em\n $bp: -zf-bp-to-em($bp);\n @if $bp-max {\n $bp-max: -zf-bp-to-em($bp-max) - (1/16);\n }\n\n // Conditions to skip media query creation\n // - It's a named breakpoint that resolved to \"0 down\" or \"0 up\"\n // - It's a numeric breakpoint that resolved to \"0 \" + anything\n @if $bp > 0em or $dir == 'only' or $dir == 'down' {\n // `only` ranges use the format `(min-width: n) and (max-width: n)`\n @if $dir == 'only' {\n // Only named media queries can have an \"only\" range\n @if $named == true {\n // Only use \"min-width\" if the floor is greater than 0\n @if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n\n // Only add \"and\" to the media query if there's a ceiling\n @if $bp-max != null {\n $str: $str + ' and ';\n }\n }\n\n // Only use \"max-width\" if there's a ceiling\n @if $bp-max != null {\n $str: $str + '(max-width: #{$bp-max})';\n }\n }\n @else {\n @warn 'breakpoint(): Only named media queries can have an `only` range.';\n }\n }\n\n // `down` ranges use the format `(max-width: n)`\n @else if $dir == 'down' {\n $max: if($named, $bp-max, $bp);\n\n // Skip media query creation if input value is exactly \"0 down\",\n // unless the function was called as \"small down\", in which case it's just \"small only\"\n @if $named or $bp > 0em {\n @if $max != null {\n $str: $str + '(max-width: #{$max})';\n }\n }\n }\n\n // `up` ranges use the format `(min-width: n)`\n @else if $bp > 0em {\n $str: $str + '(min-width: #{$bp})';\n }\n }\n\n @return $str;\n}\n\n/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:\n/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.\n/// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.\n/// - If a rem value is passed, the unit will be changed to em.\n/// - If an em value is passed, the value will be used as-is.\n///\n/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.\n///\n/// @output If the breakpoint is \"0px and larger\", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.\n@mixin breakpoint($value) {\n $str: breakpoint($value);\n $bp: index($-zf-breakpoints-keys, $value);\n $pbp: index($-zf-breakpoints-keys, $print-breakpoint);\n\n $old-zf-size: null;\n\n // Make breakpoint size available as a variable\n @if global-variable-exists(-zf-size) {\n $old-zf-size: $-zf-size;\n }\n $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords\n\n // If $str is still an empty string, no media query is needed\n @if $str == '' {\n @content;\n }\n\n // Otherwise, wrap the content in a media query\n @else {\n // For named breakpoints less than or equal to $print-breakpoint, add print to the media types\n @if $bp != null and $bp <= $pbp {\n @media print, screen and #{$str} {\n @content;\n }\n }\n @else {\n @media screen and #{$str} {\n @content;\n }\n }\n }\n\n @if $old-zf-size != null {\n // Restore the old breakpoint size\n $-zf-size: $old-zf-size !global;\n } @else {\n $-zf-size: null !global;\n }\n}\n\n/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.\n/// @access private\n///\n/// @param {Map} $map - Map to convert.\n///\n/// @returns {String} A string containing the map's contents.\n@function -zf-bp-serialize($map) {\n $str: '';\n @each $key, $value in $map {\n $str: $str + $key + '=' + -zf-bp-to-em($value) + '&';\n }\n $str: str-slice($str, 1, -2);\n\n @return $str;\n}\n\n/// Find the next key in a map.\n/// @access private\n///\n/// @param {Map} $map - Map to traverse.\n/// @param {Mixed} $key - Key to use as a starting point.\n///\n/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.\n@function -zf-map-next($map, $key) {\n\n // Store the keys of the map as a list\n $values: map-keys($map);\n\n $i: 0;\n\n // If the Key Exists, Get the index of the key within the map and add 1 to it for the next breakpoint in the map\n @if (map-has-key($map, $key)) {\n $i: index($values, $key) + 1;\n }\n\n // If the key doesn't exist, or it's the last key in the map, return null\n @if ($i > length($map) or $i == 0) {\n @return null;\n }\n // Otherwise, return the value\n @else {\n @return map-get($map, nth($values, $i));\n }\n\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $key - Key to use as last breakpoint.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-breakpoints-less-than($key) {\n $list: ();\n $found_key: false;\n\n @each $name in $-zf-breakpoints-keys {\n @if ($name == $key) {\n $found_key: true;\n }\n @if not $found_key {\n $list: append($list, $name);\n }\n }\n @return $list;\n}\n\n/// Return a list of our named breakpoints less than $key. Useful for dealing with\n/// responsive gutters for the grid.\n/// @access private\n///\n/// @param {String} $breakpoing - a named or non-named breakpoing.\n///\n/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero\n@function -zf-closest-named-breakpoint($breakpoint) {\n $last: $-zf-zero-breakpoint;\n $found: false;\n\n $value: unitless-calc($breakpoint, 1px);\n @each $key, $val in $breakpoints {\n @if not $found {\n @if unitless-calc($val) > $value {\n $found: true;\n } @else {\n $last: $key;\n }\n }\n }\n\n @return $last;\n}\n\n/// Get a value for a breakpoint from a responsive config map or single value.\n/// - If the config is a single value, return it regardless of `$value`.\n/// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.\n/// - If the config is a map and does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.\n/// @access private\n///\n/// @param {Number|Map} $map - Responsive config map or single value.\n/// @param {Keyword} $value - Breakpoint name to use.\n///\n/// @return {Mixed} The corresponding breakpoint value.\n@function -zf-get-bp-val($map, $value) {\n // If the given map is a single value, return it\n @if type-of($map) == 'number' {\n @return $map;\n }\n\n\n // Check if the breakpoint name exists globally\n @if not map-has-key($breakpoints, $value) {\n @if type-of($value) == 'number' {\n $value: -zf-closest-named-breakpoint($value);\n } @else {\n @return null;\n }\n }\n // Check if the breakpoint name exists in the local config map\n @else if map-has-key($map, $value) {\n // If it does, just return the value\n @return map-get($map, $value);\n }\n // Otherwise, find the next lowest breakpoint and return that value\n @else {\n $anchor: null;\n $found: false;\n\n @each $key, $val in $breakpoints {\n @if not $found {\n @if map-has-key($map, $key) {\n $anchor: $key;\n }\n @if $key == $value {\n $found: true;\n }\n }\n }\n\n @return map-get($map, $anchor);\n }\n}\n\n$small-up: '';\n$small-only: '';\n\n@if map-has-key($breakpoints, small) {\n $small-up: screen;\n $small-only: unquote('screen and #{breakpoint(small only)}');\n}\n\n$medium-up: '';\n$medium-only: '';\n\n@if map-has-key($breakpoints, medium) {\n $medium-up: unquote('screen and #{breakpoint(medium)}');\n $medium-only: unquote('screen and #{breakpoint(medium only)}');\n}\n\n$large-up: '';\n$large-only: '';\n\n@if map-has-key($breakpoints, large) {\n $large-up: unquote('screen and #{breakpoint(large)}');\n $large-only: unquote('screen and #{breakpoint(large only)}');\n}\n\n$xlarge-up: '';\n$xlarge-only: '';\n\n@if map-has-key($breakpoints, xlarge) {\n $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');\n $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');\n}\n\n$xxlarge-up: '';\n\n@if map-has-key($breakpoints, xxlarge) {\n $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group typography-helpers\n////\n\n/// Default font size for lead paragraphs.\n/// @type Number\n$lead-font-size: $global-font-size * 1.25 !default;\n\n/// Default line height for lead paragraphs.\n/// @type String\n$lead-lineheight: 1.6 !default;\n\n/// Default line height for subheaders.\n/// @type Number\n$subheader-lineheight: 1.4 !default;\n\n/// Default font color for subheaders.\n/// @type Color\n$subheader-color: $dark-gray !default;\n\n/// Default font weight for subheaders.\n/// @type String\n$subheader-font-weight: $global-weight-normal !default;\n\n/// Default top margin for subhheaders.\n/// @type Number\n$subheader-margin-top: 0.2rem !default;\n\n/// Default bottom margin for subheaders.\n/// @type Number\n$subheader-margin-bottom: 0.5rem !default;\n\n/// Default font size for statistic numbers.\n/// @type Number\n$stat-font-size: 2.5rem !default;\n\n@mixin foundation-typography-helpers {\n // Use to create a subheading under a main header\n // Make sure you pair the two elements in a element, like this:\n // \n // Heading\n // Subheading\n // \n .subheader {\n margin-top: $subheader-margin-top;\n margin-bottom: $subheader-margin-bottom;\n\n font-weight: $subheader-font-weight;\n line-height: $subheader-lineheight;\n color: $subheader-color;\n }\n\n // Use to style an introductory lead, deck, blurb, etc.\n .lead {\n font-size: $lead-font-size;\n line-height: $lead-lineheight;\n }\n\n // Use to style a large number to display a statistic\n .stat {\n font-size: $stat-font-size;\n line-height: 1;\n\n p + & {\n margin-top: -1rem;\n }\n }\n\n ul, ol {\n // Use to remove numbers from ordered list & bullets from unordered list\n &.no-bullet {\n margin-#{$global-left}: 0;\n list-style: none;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@mixin foundation-text-alignment {\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @each $align in (left, right, center, justify) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-text-#{$align} {\n text-align: $align;\n }\n }\n @else {\n .text-#{$align} {\n text-align: $align;\n }\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// If `true`, all elements will have transparent backgrounds when printed, to save on ink.\n/// @type Boolean\n/// @group global\n$print-transparent-backgrounds: true !default;\n$print-hrefs: true !default;\n\n// sass-lint:disable-all\n\n@mixin foundation-print-styles {\n .show-for-print { display: none !important; }\n\n @media print {\n * {\n @if $print-transparent-backgrounds {\n background: transparent !important;\n }\n\n box-shadow: none !important;\n\n color: black !important; // Black prints faster: h5bp.com/s\n text-shadow: none !important;\n }\n\n .show-for-print { display: block !important; }\n .hide-for-print { display: none !important; }\n\n table.show-for-print { display: table !important; }\n thead.show-for-print { display: table-header-group !important; }\n tbody.show-for-print { display: table-row-group !important; }\n tr.show-for-print { display: table-row !important; }\n td.show-for-print { display: table-cell !important; }\n th.show-for-print { display: table-cell !important; }\n\n // Display the URL of a link after the text\n a,\n a:visited { text-decoration: underline;}\n @if $print-hrefs {\n a[href]:after { content: ' (' attr(href) ')'; }\n }\n\n // Don't display the URL for images or JavaScript/internal links\n .ir a:after,\n a[href^='javascript:']:after,\n a[href^='#']:after { content: ''; }\n\n // Display what an abbreviation stands for after the text\n abbr[title]:after { content: ' (' attr(title) ')'; }\n\n // Prevent page breaks in the middle of a blockquote or preformatted text block\n pre,\n blockquote {\n border: 1px solid $dark-gray;\n page-break-inside: avoid;\n }\n\n // h5bp.com/t\n thead { display: table-header-group; }\n\n tr,\n img { page-break-inside: avoid; }\n\n img { max-width: 100% !important; }\n\n @page { margin: 0.5cm; }\n\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n\n // Avoid page breaks after a heading\n h2,\n h3 { page-break-after: avoid; }\n\n // Helper to re-allow page breaks in the middle of certain elements (e.g. pre, blockquote, tr)\n .print-break-inside {\n page-break-inside: auto;\n }\n }\n}\n","/* ==========================================================================\n Layout extends and mixins\n========================================================================== */\n\n @import 'xy-grid/xy-grid';\n\n/* ==========================================================================\n Layout\n========================================================================== */\n\n.container {\n @include xy-grid-container;\n}\n\n.grid {\n @include xy-grid;\n\n .grid {\n @include xy-gutters($negative: true);\n }\n}\n\n.cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &--auto {\n @include xy-cell-base(auto);\n }\n\n &--shrink {\n @include xy-cell-base(shrink);\n }\n\n &--full { \n @include xy-cell;\n }\n\n &--half {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n }\n\n &--third { \n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 3);\n }\n }\n\n &--two-thirds {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n }\n\n &--quarter {\n @include xy-cell;\n\n @include breakpoint(medium) {\n @include xy-cell(1 of 2);\n }\n\n @include breakpoint(large) {\n @include xy-cell(1 of 4);\n }\n }\n}\n\n.align {\n &--center {\n @include flex-align($x: center);\n }\n\n &--justify {\n @include flex-align($x: justify);\n }\n\n &--end {\n @include flex-align($x: right);\n }\n}\n\n.v-align {\n &--center {\n height: 100%;\n @include flex-align($y: middle);\n }\n}\n\n.hide-mobile {\n @include breakpoint (small only) {\n display: none;\n }\n}\n\n.show-desktop {\n display: none;\n\n @include breakpoint (large) {\n display: block;\n }\n}\n\n.mb {\n &-2 {\n margin-bottom: $global-margin*2;\n }\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @elseif (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin: 0 auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @elseif type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @elseif ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @elseif ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @elseif ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @elseif ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @elseif ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n }\n }\n\n // Get our gutters from map if available, if not map just return the value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","/* ==========================================================================\n Banner extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Banner\n ========================================================================== */\n\n.banner {\n background-color: get-color(primary);\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n padding: $global-padding/2 0;\n color: $white;\n\n h2 {\n margin: 0;\n }\n }\n}","/* ==========================================================================\n Footer extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Footer\n ========================================================================== */\n\n.footer {\n background-color: $light-gray;\n padding: $global-padding*2 0;\n color: $dark-gray;\n}","/* ==========================================================================\n Hero extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Hero\n ========================================================================== */\n\n.hero {\n background-image: url('../img/hero.jpg');\n background-size: cover;\n background-position: center;\n min-height: 300px;\n height: 60vh;\n margin-bottom: $global-margin*5;\n\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n height: 100%;\n }\n\n > .container {\n height: 50vh;\n }\n\n &__content {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n @include breakpoint(medium) {\n @include xy-cell(2 of 3);\n }\n\n h1 {\n font-family: 'Kaushan Script', cursive;\n color: $white;\n text-shadow: 0px 6px 10px $black;\n font-size: 3rem;\n text-align: center;\n }\n\n @include breakpoint(medium) {\n h1 {\n font-size: 4rem;\n }\n }\n\n @include breakpoint(large) {\n h1 {\n font-size: 7rem;\n }\n }\n }\n}","/* ==========================================================================\n Masthead extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Masthead\n ========================================================================== */\n\n.masthead {\n &__inner {\n @include xy-grid;\n @include flex-align($x: justify, $y: middle);\n }\n\n &__logo,\n &__cta {\n @include xy-cell-base(shrink);\n }\n\n &__cta {\n .button {\n margin: $global-margin 0;\n }\n }\n}","/* ==========================================================================\n Section extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Section\n ========================================================================== */\n\n.section {\n &__inner {\n @include xy-grid;\n @include flex-align($x: center, $y: middle);\n }\n\n &__content {\n @include xy-cell;\n text-align: center;\n\n @include breakpoint(large) {\n @include xy-cell(2 of 3);\n }\n }\n}","/* ==========================================================================\n Tiles extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Tiles\n ========================================================================== */\n\n.tile {\n @include xy-cell(100%, false, $grid-margin-gutters, padding);\n position: relative;\n\n @include breakpoint (medium) {\n @include xy-cell(1 of 3, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (large) {\n @include xy-cell(1 of 4, false, $grid-margin-gutters, padding);\n }\n\n @include breakpoint (xlarge) {\n @include xy-cell(20%, false, $grid-margin-gutters, padding);\n }\n\n &__content {\n padding: $global-padding;\n background: rgb(0,0,0);\n background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0));\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n opacity: 1;\n }\n\n &__body {\n color: $white;\n }\n\n &s {\n list-style-type: none;\n margin: 0 0 $global-margin*5;\n @include xy-grid;\n }\n}","/* ==========================================================================\n Backgrounds extends and mixins\n ========================================================================== */\n\n@mixin bg($name, $hex) {\n &--#{$name} {\n background-color: $hex;\n\n @if color-contrast($hex, $black) < 8 {\n color: $white;\n\n a {\n color: $black;\n\n &:hover,\n &:focus,\n &:active {\n color: scale-color($hex, $lightness: -40%);\n }\n }\n }\n }\n}\n\n/* ==========================================================================\n Backgrounds\n ========================================================================== */\n\n.bg {\n @each $color, $hex in $foundation-palette {\n @include bg($color, $hex);\n }\n\n @include bg( 'primary', get-color(primary) );\n @include bg( 'secondary', get-color(secondary) );\n @include bg( 'light-gray', $light-gray );\n @include bg( 'medium-gray', $medium-gray );\n @include bg( 'dark-gray', $dark-gray );\n}","/* ==========================================================================\n Buttons extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Buttons\n ========================================================================== */\n\n.button {\n @include button(false, $button-background, $button-background-hover, $button-color, solid);\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group button\n////\n\n/// Font family for button elements.\n/// @type Font\n$button-font-family: inherit !default;\n\n/// Padding inside buttons.\n/// @type List\n$button-padding: 0.85em 1em !default;\n\n/// Margin around buttons.\n/// @type List\n$button-margin: 0 0 $global-margin 0 !default;\n\n/// Default fill for buttons. Can either be `solid` or `hollow`.\n/// @type Keyword\n$button-fill: solid !default;\n\n/// Default background color for buttons.\n/// @type Color\n$button-background: $primary-color !default;\n\n/// Background color on hover for buttons.\n/// @type Color\n$button-background-hover: scale-color($button-background, $lightness: -15%) !default;\n\n/// Font color for buttons.\n/// @type List\n$button-color: $white !default;\n\n/// Alternative font color for buttons.\n/// @type List\n$button-color-alt: $black !default;\n\n/// Border radius for buttons, defaulted to global-radius.\n/// @type Number\n$button-radius: $global-radius !default;\n\n/// Border width for hollow outline buttons\n/// @type Number\n$button-hollow-border-width: 1px !default;\n\n/// Sizes for buttons.\n/// @type Map\n$button-sizes: (\n tiny: 0.6rem,\n small: 0.75rem,\n default: 0.9rem,\n large: 1.25rem,\n) !default;\n\n/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.\n/// @type Map\n$button-palette: $foundation-palette !default;\n\n/// opacity for a disabled button.\n/// @type List\n$button-opacity-disabled: 0.25 !default;\n\n/// Background color lightness on hover for buttons.\n/// @type Number\n$button-background-hover-lightness: -20% !default;\n\n/// Color lightness on hover for hollow buttons.\n/// @type Number\n$button-hollow-hover-lightness: -50% !default;\n\n// Internal: flip from margin-right to margin-left for defaults\n@if $global-text-direction == 'rtl' {\n $button-margin: 0 0 $global-margin $global-margin !default;\n}\n\n/// transitions for buttons.\n/// @type List\n$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;\n\n/// Additional responsive classes for .expanded\n/// @type Boolean\n$button-responsive-expanded: false !default;\n\n// TODO: Document button-base() mixin\n@mixin button-base {\n @include disable-mouse-outline;\n display: inline-block;\n vertical-align: middle;\n margin: $button-margin;\n font-family: $button-font-family;\n\n @if (type-of($button-padding) == 'map') {\n @each $size, $padding in $button-padding {\n @include breakpoint($size) {\n padding: $padding;\n }\n }\n }\n @else {\n padding: $button-padding;\n }\n\n -webkit-appearance: none;\n border: 1px solid transparent;\n border-radius: $button-radius;\n transition: $button-transition;\n font-size: map-get($button-sizes, default);\n line-height: 1;\n text-align: center;\n cursor: pointer;\n}\n\n/// Expands a button to make it full-width.\n/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.\n@mixin button-expand($expand: true) {\n @if $expand {\n display: block;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n }\n @else {\n display: inline-block;\n width: auto;\n margin: $button-margin;\n }\n}\n\n/// Sets the visual style of a button.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n@mixin button-style(\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $background-hover-lightness: $button-background-hover-lightness\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n @if $background-hover == auto {\n $background-hover: scale-color($background, $lightness: $background-hover-lightness);\n }\n\n background-color: $background;\n color: $color;\n\n &:hover, &:focus {\n background-color: $background-hover;\n color: $color;\n }\n}\n\n/// Removes background fill on hover and focus for hollow buttons.\n@mixin button-hollow {\n &,\n &:hover,\n &:focus {\n background-color: transparent;\n }\n\n &.disabled,\n &[disabled] {\n &,\n &:hover, &:focus {\n background-color: transparent;\n }\n }\n}\n\n@mixin button-hollow-style(\n $color: $button-background,\n $hover-lightness: $button-hollow-hover-lightness,\n $border-width: $button-hollow-border-width\n) {\n $color-hover: scale-color($color, $lightness: $hover-lightness);\n\n border: $border-width solid $color;\n color: $color;\n\n &:hover, &:focus {\n border-color: $color-hover;\n color: $color-hover;\n &.disabled,\n &[disabled] {\n border: $border-width solid $color;\n color: $color;\n }\n }\n}\n\n/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.\n/// @param [Color] $background [$button-background] - Background color of the disabled button.\n/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.\n@mixin button-disabled(\n $background: $button-background,\n $color: $button-color\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n opacity: $button-opacity-disabled;\n cursor: not-allowed;\n\n &, &:hover, &:focus {\n background-color: $background;\n color: $color;\n }\n}\n\n/// Adds a dropdown arrow to a button.\n/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.\n/// @param {Color} $color [white] - Color of the arrow.\n/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.\n@mixin button-dropdown(\n $size: 0.4em,\n $color: $white,\n $offset: get-side($button-padding, right)\n) {\n &::after {\n @include css-triangle($size, $color, down);\n position: relative;\n top: 0.4em; // Aligns the arrow with the text of the button\n\n display: inline-block;\n float: #{$global-right};\n margin-#{$global-left}: $offset;\n }\n}\n\n/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.\n/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.\n@mixin button(\n $expand: false,\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $style: $button-fill\n) {\n @include button-base;\n\n @if $style == solid {\n @include button-style($background, $background-hover, $color);\n }\n @else if $style == hollow {\n @include button-hollow;\n @include button-hollow-style($background);\n }\n\n @if $expand {\n @include button-expand;\n }\n}\n\n@mixin foundation-button {\n .button {\n @include button;\n\n // Sizes\n @each $size, $value in map-remove($button-sizes, default) {\n &.#{$size} {\n font-size: $value;\n }\n }\n\n &.expanded { @include button-expand; }\n\n @if $button-responsive-expanded {\n @each $size in $breakpoint-classes {\n @include breakpoint(#{$size} only) {\n &.#{$size}-only-expanded {\n @include button-expand;\n }\n }\n @if $size != $-zf-zero-breakpoint {\n @include breakpoint(#{$size} down) {\n &.#{$size}-down-expanded {\n @include button-expand;\n }\n }\n\n @include breakpoint(#{$size}) {\n &.#{$size}-expanded {\n @include button-expand;\n }\n }\n }\n }\n }\n\n // Colors\n @each $name, $color in $button-palette {\n @if $button-fill != hollow {\n &.#{$name} {\n @include button-style($color, auto, auto);\n }\n }\n @else {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n\n &.#{$name}.dropdown::after {\n border-top-color: $color;\n }\n }\n }\n\n // Disabled style\n &.disabled,\n &[disabled] {\n @include button-disabled;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-disabled($color, auto);\n }\n }\n }\n\n // Hollow style\n @if $button-fill != hollow {\n &.hollow {\n @include button-hollow;\n @include button-hollow-style;\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n }\n }\n }\n }\n\n // Clear style\n @if $button-fill != clear {\n &.clear {\n @include button-hollow;\n @include button-hollow-style;\n\n &, &:hover, &:focus {\n &, &.disabled, &[disabled] {\n border-color: transparent;\n }\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-hollow-style($color);\n\n &, &:hover,\n &:focus {\n &,\n &.disabled,\n &[disabled] {\n border-color: transparent;\n }\n }\n }\n }\n }\n }\n\n // Dropdown arrow\n &.dropdown {\n @include button-dropdown;\n\n @if $button-fill == hollow {\n &::after {\n border-top-color: $button-background;\n }\n }\n\n &.hollow {\n &::after {\n border-top-color: $button-background;\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n &::after {\n border-top-color: $color;\n }\n }\n }\n }\n }\n\n // Button with dropdown arrow only\n &.arrow-only::after {\n top: -0.1em;\n float: none;\n margin-#{$global-left}: 0;\n }\n }\n a.button {\n &:hover,\n &:focus {\n text-decoration: none;\n }\n }\n}\n","/* ==========================================================================\n Table extends and mixins\n ========================================================================== */\n\n/* ==========================================================================\n Table\n ========================================================================== */\n\ntable {\n @include table($table-stripe);\n margin: $global-margin*6 0;\n text-align: left;\n}","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n// sass-lint:disable force-element-nesting, no-qualifying-elements\n\n////\n/// @group table\n////\n\n/// Default color for table background.\n/// @type Color\n$table-background: $white !default;\n\n/// Default scale for darkening the striped table rows and the table border.\n/// @type Number\n$table-color-scale: 5% !default;\n\n/// Default style for table border.\n/// @type List\n$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;\n\n/// Default padding for table.\n/// @type Number\n$table-padding: rem-calc(8 10 10) !default;\n\n/// Default scale for darkening the table rows on hover.\n/// @type Number\n$table-hover-scale: 2% !default;\n\n/// Default color of standard rows on hover.\n/// @type List\n$table-row-hover: darken($table-background, $table-hover-scale) !default;\n\n/// Default color of striped rows on hover.\n/// @type List\n$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;\n\n/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.\n/// @type Boolean\n$table-is-striped: true !default;\n\n/// Default background color for striped rows.\n/// @type Color\n$table-striped-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.\n/// @type Keyword\n$table-stripe: even !default;\n\n/// Default color for header background.\n/// @type Color\n$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;\n\n/// Default color of header rows on hover.\n/// @type List\n$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;\n\n/// Default color for footer background.\n/// @type Color\n$table-foot-background: smart-scale($table-background, $table-color-scale) !default;\n\n/// Default color of footer rows on hover.\n/// @type List\n$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;\n\n/// Default font color for header.\n/// @type Color\n$table-head-font-color: $body-font-color !default;\n\n/// Default font color for footer.\n/// @type Color\n$table-foot-font-color: $body-font-color !default;\n\n/// Default value for showing the header when using stacked tables.\n/// @type Boolean\n$show-header-for-stacked: false !default;\n\n/// Breakpoint at which stacked table switches from mobile to desktop view.\n/// @type Breakpoint\n$table-stack-breakpoint: medium !default;\n\n@mixin -zf-table-stripe($stripe: $table-stripe) {\n tr {\n // If stripe is set to even, darken the even rows.\n @if $stripe == even {\n &:nth-child(even) {\n border-bottom: 0;\n background-color: $table-striped-background;\n }\n }\n\n // If stripe is set to odd, darken the odd rows.\n @else if $stripe == odd {\n &:nth-child(odd) {\n background-color: $table-striped-background;\n }\n }\n }\n}\n\n@mixin -zf-table-unstripe() {\n tr {\n border-bottom: 0;\n border-bottom: $table-border;\n background-color: $table-background;\n }\n}\n\n@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {\n thead,\n tbody,\n tfoot {\n border: $table-border;\n background-color: $table-background;\n }\n\n // Caption\n caption {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n }\n\n // Table head\n thead {\n background: $table-head-background;\n color: $table-head-font-color;\n }\n\n // Table foot\n tfoot {\n background: $table-foot-background;\n color: $table-foot-font-color;\n }\n\n // Table head and foot\n thead,\n tfoot {\n // Rows within head and foot\n tr {\n background: transparent;\n }\n\n // Cells within head and foot\n th,\n td {\n padding: $table-padding;\n font-weight: $global-weight-bold;\n text-align: #{$global-left};\n }\n }\n\n // Table rows\n tbody {\n th,\n td {\n padding: $table-padding;\n }\n }\n\n // If tables are striped\n @if $is-striped == true {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n\n &.unstriped {\n tbody {\n @include -zf-table-unstripe();\n background-color: $table-background;\n }\n }\n }\n\n // If tables are not striped\n @else if $is-striped == false {\n tbody {\n @include -zf-table-unstripe();\n }\n\n &.striped {\n tbody {\n @include -zf-table-stripe($stripe);\n }\n }\n }\n}\n\n/// Adds the general styles for tables.\n/// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.\n@mixin table(\n $stripe: $table-stripe,\n $nest: false\n) {\n border-collapse: collapse;\n width: 100%;\n margin-bottom: $global-margin;\n border-radius: $global-radius;\n\n @if $nest {\n @include -zf-table-children-styles($stripe);\n }\n @else {\n @at-root {\n @include -zf-table-children-styles($stripe);\n }\n }\n}\n\n/// Adds the ability to horizontally scroll the table when the content overflows horizontally.\n@mixin table-scroll {\n display: block;\n width: 100%;\n overflow-x: auto;\n}\n\n/// Slightly darkens the table rows on hover.\n@mixin table-hover {\n thead tr {\n //Darkens the table header rows on hover.\n &:hover {\n background-color: $table-head-row-hover;\n }\n }\n\n tfoot tr {\n //Darkens the table footer rows on hover.\n &:hover {\n background-color: $table-foot-row-hover;\n }\n }\n\n tbody tr {\n //Darkens the non-striped table rows on hover.\n &:hover {\n background-color: $table-row-hover;\n }\n }\n\n @if $table-is-striped == true {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &:not(.unstriped) tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &:not(.unstriped) tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n\n @else if $table-is-striped == false {\n // Darkens the even striped table rows.\n @if($table-stripe == even) {\n &.striped tr:nth-of-type(even):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n\n // Darkens the odd striped table rows.\n @elseif($table-stripe == odd) {\n &.striped tr:nth-of-type(odd):hover {\n background-color: $table-row-stripe-hover;\n }\n }\n }\n}\n\n/// Adds styles for a stacked table. Useful for small-screen layouts.\n/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.\n@mixin table-stack($header: $show-header-for-stacked) {\n @if $header {\n thead {\n th {\n display: block;\n }\n }\n }\n @else {\n thead {\n display: none;\n }\n }\n\n tfoot {\n display: none;\n }\n\n tr,\n th,\n td {\n display: block;\n }\n\n td {\n border-top: 0;\n }\n}\n\n@mixin foundation-table($nest: false) {\n table {\n @include table($nest: $nest);\n }\n\n table.stack {\n @include breakpoint($table-stack-breakpoint down) {\n @include table-stack;\n }\n }\n\n table.scroll {\n @include table-scroll;\n }\n\n table.hover {\n @include table-hover;\n }\n\n .table-scroll {\n overflow-x: auto;\n\n table {\n width: auto;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n"]}