@charset "UTF-8";
/**
 * @file
 * Long Text Field Component
 *
 * Theming long text search fields
 */
/**
  * Imports
 */
/**
 * @file
 * Global Settings
 *
 * Setting files contain **global** configurations that are shared by more than
 * one modules.
 * Local configurations should be contained into the modules (objects,
 * components, etc.) that are related to.
 */
/**
 * @file
 * Settings
 *
 * Setting files contain **global** configurations that are shared by more than
 * one modules. Settings that are connected to one and only module are a part
 * of the module itself.
 * Local configurations should be contained into the modules (objects,
 * components, etc.) that are related to.
 * It's important not to output any CSS in the first 2 layers.
 */
/**
 * @file
 * Breakpoints
 */
/**
 * Default breakpoints
 *
 * Default global breakpoints map. These are the default breakpoints map that
 * will be shared across all shake modules. You can change it also locally to
 * each module. Don't forget you have to use only pixels or ems here!
 *
 * @type Map
 *
 * @example
 *   @include breakpoint(medium) {
 * }
 *
 */
/**
 * Default breakpoint suffix
 *
 * Global breakpoint suffix naming setting.
 * All breakpoint specific styles have a `@breakpoint-name` suffix by default.
 * The `\` character is used to escape the `@` character.
 *
 * @type String
 */
/**
 * Sample for custom breakpoints
 *
 * @type Map
 *
 * @example
 *   .c-header {
 *     margin-right: 3rem;
 *
 *     @include breakpoint(large, $my-breakpoints) {
 *       margin-right: 0;
 *     }
 *   }
 *
 * Using a custom breakpoints map without size
 * You can use `null` value for breakpoint without size like orientation only.
 *
 * @example
 *   $portrait: (
 *     null   : screen and (orientation: portrait),
 *     small  : screen and (orientation: portrait) and (min-width: 20em), // 320px
 *     xlarge : screen and (orientation: portrait) and (min-width: 80em) // 1280px
 *   );
 *
 * @example
 *   .c-header {
 *     margin-right: 3rem;
 *
 *     @include breakpoint($portrait) {
 *       margin-right: 0;
 *     }
 *   }
 */
/**
 * max-width
 */
/**
 * @file
 * Grid Object Settings
 */
/**
 * Gutter
 */
/**
 * Define Gutter Sizes
 */
/**
 * Responsive Aliases for Gutters
 */
/**
 * Default gutters
 *
 * This setting is shared between multiple objects and utilities as the default
 * value for gutters. You can change it also locally to each module.
 *
 * @type Number | List | Map
 */
/**
 * Additional grid gutters
 *
 * If you use additionally Container object with custom gutters
 * you have to set custom those custom gutters for Grid object too!
 *
 * You can use a nested map in case you would like to specify responsive gutter
 * sizes.
 *
 * @type Map
 *
 * @example
 *   $grid-gutter-extra: (
 *     wide: (
 *       null : 2rem,
 *       tablet-l: 4rem
 *     )
 *   );
 */
/**
* @file
 * Color Settings
 *
 * - Only global color variables. Local color variables you can find in module
 *   files in `3.base` or `5.components` directories.
 * - Only assigned colors. You can't use any color tools here.
 * - Here are only color variables and maps, no any assigned color variables.
 */
/**
 * Color definitions
 *
 * Named colors stored as shades. If it's possible choose from these colors
 * only.
 */
/**
 * Grayscale colors for Drupal components
 *
 * You can change but don't remove them.
 */
/**
 * Different shades of the default grey color
 */
/**
 * Design needed global color definitions
 */
/**
 * System colors
 *
 * These colors are used for system messages, alerts, and other system
 * components.
 */
/**
 * Global colors by functions
 *
 * Here we associate the defined named colors to functions.
 * If possible use colors by functions only.
 */
/**
 * @file
 * Container Object Settings
 *
 * See details in 4.objects/_objects.container.scss.
 */
/**
 * Imports
 */
/**
 * Default container
 *
 * IMPORTANT! If you don't need map (multiple values for container size), use a
 * single value, not use a map with only null key!
 */
/**
 * Additional container sizes
 *
 * Allows you to specify more sets of max-width for your container. You can use
 * a nested map in case you would like to specify a responsive size.
 *
 * @type Map
 *
 * @example
 *   $container-size-extra: (
 *     large: (
 *       null : 30rem,
 *       small: 120rem
 *     )
 *   );
 */
/**
 * Default container gutters
 *
 * It will create a default container with 10px padding in mobile and 20px in
 * tablets and up.
 *
 * @example
 *   $objects-container-gutter-default: (
 *     null : 1rem,
 *     small: 2rem
 *   );
 *
 * Container with extra responsive gutter size
 * It will create one extra container named 'large' that will have 20px padding
 * in mobile and 40px padding in tablets and up.
 *
 * @example
 *   $objects-container-gutter-default: (
 *     large: (
 *       null : 2rem,
 *       small: 4rem
 *     )
 *   );
 */
/**
 * Additional container gutters
 *
 * Allows you to specify more sets of padding left and right of your container.
 * You can use a nested map in case you would like to specify responsive gutter
 * sizes.
 *
 * @type Map
 *
 * @example
 *   $container-gutter-extra: (
 *     large: (
 *       null : 2rem,
 *       small: 4rem
 *     )
 *   );
 */
/**
* @file
 * Form Settings
 *
 * Only global wide form settings. We can use them in any form-related
 * component as default settings.
 */
/**
 * Form Borders
 */
/**
 * @file
 * Function Settings
 */
/**
 * Accessibility
 * Respect user's OS settings for transitions and animations.
 */
/**
 * @file
 * Theming Settings
 */
/**
 * Global Border Radius
 */
/**
 * Transitions
 */
/**
 * @file
 * Type Settings
 *
 * Global typography settings:
 * - Font-family declarations
 * - Font-size declarations
 * - Text color declarations
 */
/**
 * Font family settings
 *
 * Recommended to use only system fonts. If you need to use custom webfont you
 * can use as fallback font-stack.
 */
/**
 * Font-stacks by functions
 */
/**
 * Line-height
 */
/**
 * Responsive font sizes
 *
 * @example
 *   breakpoint-name: ( font-size, optional-line-height )
 *
 * Breakpoint names come from $breakpoints declared in
 * `1.settings/_settings.breakpoints`.
 *
 * 'null' means no breakpoint (default)
 */
/** Body (default) Font-size
 * We use this to set the default font size and line-height
 * for the `<body>` element in `3.base/_3.base.type`.
 */
/**
 * Heading Font Sizes
 */
/**
 * @file
 * Global Tools
 *
 * Globally used mixins and functions.
 * It’s important not to output any CSS in the first 2 layers.
 */
/**
 * @file
 * Tools
 *
 * Tools are sets of globally used sass mixins and functions. Mixins that are
 * connected to one and only module are a part of the module itself.
 * It’s important not to output any css in the first 2 layers.
 */
/**
 * Mixin tools
 */
/**
 * @file
 * CSS Box-Model Tool
 *
 * CSS Box-model-related mixins.
 *
 * @author Krisztian Pinter <krisz@keeteean.com>
 */
/**
 * Square mixin
 *
 * Use it, when you need the same width and height with square shape.
 *
 * @parameter {string} $value - Amount of desired width and height in any unit.
 *
 * @example
 *   @use "../tools";
 *
 *   @include tools.square(6rem);
 */
/**
 * Circle mixin
 *
 * Use it, when you need the same width and height width circle shape.
 *
 * @parameter {string} $value - Amount of desired width and height in any unit.
 *
 * @example
 *   @use "../tools";
 *
 *   @include circle(6rem);
 */
/**
 * @file
 * Long Text Field Component
 *
 * Theming long text search fields
 */
/**
  * Imports
 */
/**
 * @file
 * Breakpoint Tool
 *
 * Part of Shake.sass, borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 * @link https://www.iotacss.com/docs/tools/breakpoint/
 *
 * @require {map} breakpoint settings <1.settings/_settings.breakpoints.scss>
 *
 *
 * Use it wherever you need it.
 *
 * @parameter {map} $breakpoint-size
 *   Size of the breakpoint you want to use from the $breakpoint-sizes map.
 *
 * @parameter {map} $breakpoint-sizes
 *   A Sass map that contains all the breakpoints
 *
 * @example
 *   @include breakpoint($breakpoint-size, settings.$breakpoint-sizes);
 *
 * Examples
 *
 * Using the global default settings.$breakpoints breakpoints map.
 * @example
 *   @use "../settings";
 *   @use "../tools";
 *
 *   settings.$breakpoints: (
 *     small  : "screen and (min-width: 30em)", // 480px
 *     medium : "screen and (min-width: 48px)", // 768px
 *     large  : "screen and (min-width: 64px)", // 1024px
 *     xlarge : "screen and (min-width: 75px)", // 1200px
 *     xxlarge: "screen and (min-width: 87.5px)" // 1400px
 *   );
 *
 *   .c-header {
 *      margin-right: 3rem;
 *
 *      @include tools.breakpoint(tablet-s) {
 *        margin-right: 0;
 *      }
 *   }
 *
 * Using a custom breakpoints map.
 * @example
 *   $my-breakpoints : (
 *     small  : screen and (min-width: 20em), // 320px
 *     xlarge : screen and (min-width: 80em) // 1280px
 *   );
 *
 * @example
 *   @use "../settings";
 *   @use "../tools";
 *
 *   .c-header {
 *     margin-right: 3rem;
 *
 *     @include tools.breakpoint(xlarge, settings.$my-breakpoints) {
 *       margin-right: 0;
 *     }
 *   }
 *
 * Using a custom breakpoints map without size.
 * You can use `null` value for breakpoint without size like orientation only.
 *
 * @example
 *   $portrait : (
 *     null   : screen and (orientation: portrait),
 *     small  : screen and (orientation: portrait) and (min-width: 20em), // 320px
 *     xlarge : screen and (orientation: portrait) and (min-width: 80em) // 1280px
 *   );
 *
 * @example
 *   @use "../settings";
 *   @use "../tools";
 *
 *   .c-header {
 *     margin-right: 3rem;
 *
 *     @include tools.breakpoint(settings.$portrait) {
 *       margin-right: 0;
 *     }
 *   }
 */
/**
 * Imports
 */
/**
 * Breakpoint Mixin
 *
 * @parameter {map} $breakpoint-size
 *   Size of the breakpoint you want to use from the $breakpoint-sizes map.
 *
 * @parameter {map} $breakpoint-sizes
 *   A Sass map that contains all the breakpoints
 *
 * @example
 *   @include breakpoint($breakpoint-size, $breakpoint-sizes);
 */
/**
 * @file
 * Long Text Field Component
 *
 * Theming long text search fields
 */
/**
  * Imports
 */
/**
 * @file
 * Button Tool
 *
 * Button mixins for different DOMs.
 */
/**
 * Imports
 */
/**
 * @file
 * Long Text Field Component
 *
 * Theming long text search fields
 */
/**
  * Imports
 */
/**
 * @file
 * Transitions Tool
 */
/**
 * Imports
 */
/**
 * Global transition mixin
 *
 * @example
 *   @use "../tools";
 *
 *   .c-button {
 *     @include tools.global-transition;
 *   }
 */
/**
 * @file
 * Type Tool
 *
 * Inline typography related mixins.
 */
/**
 * Imports
 */
/**
 * @file
 * Internal Libraries
 *
 * Required helper Sass function and mixins for tools and other sass files.
 */
/**
 * @file
 * Negative Units
 *
 * Create negative values from positive ones.
 *
 * Part of Shake.sass, borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 *
 * @type Function
 */
/**
 * Imports
 */
/**
 * @file
 * Internal Validators
 *
 * Required Sass property validators for tools or other Sass mixins.
 */
/**
 * @file
 * Is It a Color?
 *
 * Check the given value's type is color or not.
 *
 * Part of Shake.sass, borrowed from bourbon.
 *
 * @type Function
 */
/**
 * Is Color Function
 *
 * @parameter {string | number | map} $color - The given css value.
 * @return {boolean}
 */
/**
 * @file
 * Is It a Sass Map?
 *
 * Check the given value's type is sass map or not.
 *
 * Part of Shake.sass, borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 *
 * @type Function
 */
/**
 * Is Sass Map Function
 *
 * @parameter {string | number | map} $map - The given css value.
 */
/**
 * @file
 * Is It a Number?
 *
 * Check the given value's type is number or not.
 *
 * Part of Shake.sass, borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 *
 * @type Function
 */
/**
 * Is Number Function
 *
 * @parameter {string | number | map} $number - The given css value.
 */
/**
 * @file
 * Does Sass Map Contain a Null Key?
 *
 * Check the given Sass map has a null named key.
 *
 * Part of Shake.sass, borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 *
 * @type Function
 */
/**
 * Does Sass Map Contain a Null Key Function
 *
 * @parameter {map} $map - The given Sass map.
 */
/**
 * Negative Units Function
 *
 * @parameter {string | number | map} $values - The given css value.
 */
/**
 * @file
 * Extract Type Size
 *
 * Get font-size and line-height values from $sizes type variable.
 *
 * Part of Shake.sass, borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 *
 * @type Mixin
 */
/**
 * Imports
 */
/**
 * Extract Type Sizes Mixin
 *
 * @parameter {map} $sizes - font-sizes and line-heights
 */
/**
 * @file
 * Negative Units
 *
 * Create negative values from positive ones.
 *
 * Part of Shake.sass, borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 *
 * @type Function
 */
/**
 * Imports
 */
/**
 * @file
 * Generate Unit
 *
 * Generate responsive units like font-sizes or gutters.
 * Note for gutters we divide them by 2 here!
 *
 * Part of Shake.sass, borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 * @author Krisztian Pinter <krisz@keeteean.com>
 *
 * @type Mixin
 *
 * @require {Function} _is-number <2.tools/validators/_is-number.scss>
 * @require {Function} _is-map <2.tools/validators/_is-map.scss>
 * @require {Function} _map-contains-null <2.tools/validators/_map-contains-null.scss>
 */
/**
 * Imports
 */
/**
 * Generate Unit Mixin
 *
 * @parameter {string} $property - A css property ex.: padding.
 * @parameter {string} $suffix - Sub-property of $property, ex.: left.
 * @parameter {map | number} $units - Values for combined $property and $suffix.
 * @parameter {string} $half - Should divide values from $unites by 2 or not.
 *   Default is `null` (not), if you need this, just type `half` in the end.
 */
/**
 * @file
 * Generate Type Sizes
 *
 * Generate responsive font-size and line-height.
 *
 * Part of Shake.sass, borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 *
 * @type Mixin
 *
 * @require {Mixin} extract-type-sizes <2.tools/libraries/_extract-type-sizes.scss>
 */
/**
 * Imports
 */
/**
 * Generate Type Sizes Mixin
 *
 * @parameter {map | string} $values - font-sizes
 * @parameter {map} $breakpoints - given breakpoint map
 */
/**
 * @file
 * Long Text Field Component
 *
 * Theming long text search fields
 */
/**
  * Imports
 */
/**
 * Responsive Type Tool
 *
 * Type tool contains a mixin that helps you create smart, flexible and
 * responsive typography.
 *
 * Part of Shake.sass, some parts borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 * @author Krisztian Pinter <krisz@keeteean.com>
 * @link https://www.iotacss.com/docs/tools/type
 *
 * @require {Mixin} generate-type-sizes <2.tools/libraries/_generate-type-sizes.scss>
 * @require {Mixin} extract-type-sizes <2.tools/libraries/_extract-type-sizes.scss>
 *
 *
 * Use it wherever you need it.
 *
 * @example
 *   @use "../settings";
 *   @use "../tools";
 *
 *   @include tools.type($sizes, $breakpoints: settings.$breakpoints);
 *
 *
 * Type mixin accepts two parameters:
 *
 * @parameter {number | list | map} $sizes
 *   A Sass map that contains font sizes and line heights for breakpoints.
 *
 * @parameter {map} $breakpoints
 *   A Sass map that contains all the breakpoints.
 *   Default value is settings.$breakpoints.
 *
 *
 * Examples
 *
 * Font size typography
 *
 * It will create a font size on `<h1>` tag that will have 16px font-size.
 *
 * @example
 *   @use "../tools";
 *
 *   h1 {
 *     @include tools.type(1.6rem);
 *   }
 *
 * Font size and line height typography
 *
 * It will create a font size on `<h1>` tag that will have 16px font-size and
 * 20px line-height.
 *
 * @example
 *   @use "../tools";
 *
 *   h1 {
 *     @include tools.type(1.6rem 2rem);
 *   }
 *
 * Responsive font size typography
 *
 * It will create a font size on `<h1>` tag that will have 12px font-size on
 * mobiles and 16px on tablets and up.
 *
 * @example
 *   @use "../tools";
 *
 *   h1 {
 *     @include tools.type(
 *       (
 *         null : 1.2rem,
 *         small: 1.6rem
 *        )
 *     );
 *   }
 *
 * Responsive font size typography with line height
 *
 * It will create a font size on `<h1>` tag that will have 12px font-size and
 * 16px line-height on mobiles and 16px font-size and 20px line-height on
 * tablets and up.
 *
 * @example
 *   @use "../tools";
 *
 *   h1 {
 *     @include tools.type(
 *       (
 *         null : (1.2rem, 1.6rem),
 *         small: (1.6rem, 2rem)
 *        )
 *     );
 *   }
 */
/**
 * Font Antialiasing
 *
 * Makes font thickness to look the same in Firefox and Webkit.
 * You can set this globally too in `3.base/_base.reset.scss`.
 *
 * @example
 *   @use "../tools";
 *
 *   h1 {
 *     @include tools.font-smooth;
 *   }
 */
/**
 * @file
 * Tools
 *
 * Tools are sets of globally used sass mixins and functions. Mixins that are
 * connected to one and only module are a part of the module itself.
 * It’s important not to output any css in the first 2 layers.
 */
/**
 * Mixin tools
 */
/**
 * Button mixin
 */
/**
 * @file
 * Clearfix Tool
 *
 * The clearfix utility is used on elements that need to automatically clear
 * their child elements.
 *
 * Part of Shake.sass, based on iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 * @author Krisztian Pinter <krisz@keeteean.com>
 * @see 6.utilities/_utilities.clearfix for BEM css classed version
 *
 * Use it wherever you need it.
 *
 *
 * @example
 *   .o-grid {
 *     @include clearfix;
 *   }
 */
/**
 * Clearfix mixin
 */
/**
 * @file
 * Color Mixins
 *
 * Part of Shake.sass.
 * @author Krisztian Pinter <krisz@keeteean.com>
 *
 * Mixins and functions for color calculations, generations.
 */
/**
 * Simple color and background color generator
 *
 * Add color then background color from Sass variables.
 *
 *
 * @example
 *   @use "../settings";
 *   @use "../tools";
 *
 *  @include tools.colors(settings.$color-text-primary, settings.$color-background-primary);
 */
/**
 * Colors mixin
 *
 * @parameter {string} $color - Color variable.
 * @parameter {string} $background-color - Background color variable.
 */
/**
 * @file
 * Type Tool
 *
 * Inline typography related mixins.
 */
/**
 * Imports
 */
/**
 * @file
 * Long Text Field Component
 *
 * Theming long text search fields
 */
/**
  * Imports
 */
/**
 * @file
 * Container Tool
 *
 * The container tool is responsible for creating smart, flexible and
 * responsive containers.
 *
 * Here you can setup the default and custom containers with size (`max-with`)
 * and paddings. Then use it as mixin.
 *
 * Part of Shake.sass, based on iota.css
 * @author Dimitris Psaropoulos <info@harby.me>
 * @author Krisztian Pinter <krisz@keeteean.com>
 *
 * @require {mixin} _generate-unit <2.tools/libraries/_generate-unit.scss>
 * @see 4.objects/_objects.container.scss for BEM class based default and custom
 * containers
 */
/**
 * Imports
 */
/**
 * Settings
 */
/**
 * Default container gutter
 *
 * Allows you to specify the default set of padding left and right of your
 * container. You can use a map in case you would like to specify responsive
 * gutter sizes.
 *
 * @type Number | List | Map
 */
/**
 * Default container size
 *
 * Allows you to specify the default max-width of your container. You can use a
 * map in case you would like to specify a responsive size.
 *
 * @type String | Map
 */
/**
 * Container padding
 *
 * It's calculate the required responsive padding.
 *
 * @type Mixin
 * @parameter {number | map} $size - Padding values.
 */
/**
 * Container size
 *
 * It's calculate the required responsive container size (max-width).
 *
 * @type Mixin
 * @parameter {number | map} $size - Max-width values.
 */
/**
 * Container mixin
 *
 * With container mixin you can generate the default and custom sized
 * containers.
 *
 * @type Mixin
 * @parameter {number | map} $padding - Padding values.
 * @parameter {number | map} $size - Container size (max-width) values.
 * @require {mixin} _container-padding
 * @require {mixin} _container-size
 *
 *
 * Examples
 *
 * Default container
 *
 * @example
 *   @use "../tools";
 *
 *   .section__container {
 *      @include tools.make-container;
 *   }
 *
 * Custom container
 *
 * You can define custom padding and sizes (widths) but you can use the
 * default `$container-gutter-default` and
 * `$container-size-default` ones too.
 *
 * @example
 *   @use "../tools";
 *
 *   $container-gutter-gallery : (
 *     null   : 1.2rem,
 *     medium : 2.4rem
 *   );
 *   $container-size-gallery : (
 *     null   : 100%,
 *     medium : 102.4rem
 *   );
 *
 *   .gallery__container {
 *     @include tools.make-container(
 *       $padding: $container-gutter-gallery,
 *       $size: $container-size-gallery
 *     )
 */
/**
 * @file
 * Form Tool
 *
 * Part of Shake.sass.
 * @author Krisztian Pinter <krisz@keeteean.com>
 *
 * Form related mixins and functions.
 */
/**
 * Webkit autofill mixin
 *
 * With it you can theming autofilled inputs easily.
 * You must declare the font color, other rules optionally.
 *
 * @example
 *   @use "../settings";
 *   @use "../tools";
 *
 *   @include tools.autofill(settings.$color-primary) {
 *     background: lighten(settings.$color-primary, 30%);
 *  }
 */
/**
 * @file
 * Full Width Image Tool
 *
 * Apply it to an img element or use Utility version of it.
 * You will need a parent element with relative position.
 *
 * Part of Shake.sass
 * @author Krisztian Pinter <krisz@keeteean.com>
 *
 * @parameter {string} $fit - Object-fit property. You can use `cover` or
 * `contain`. Default is `cover`.
 *
 * @example
 *   @use "../tools";
 *
 *   .c-slider {
 *     &__slide {
 *       position: relative;
 *
 *       img {
 *         @include tools.full-width-image(contain);
 *       }
 *     }
 *   }
 */
/**
 * Full Width Image mixin
 * @parameter {string} $fit - Object-fit property. You can use `cover` or
 *   `contain`. Default is `cover`.
 */
/**
 * @file
 * Type Tool
 *
 * Inline typography related mixins.
 */
/**
 * Imports
 */
/**
 * @file
 * Long Text Field Component
 *
 * Theming long text search fields
 */
/**
  * Imports
 */
/**
 * @file
 * Grid Tool
 *
 * The Grid Tool is responsible for building a smart, flexible and responsive
 * grid. However you can achieve this only by Sass mixins, so you won't need
 * css classes for that, but there is in Grid Object where the base grid mixins
 * has already been included from here.
 *
 * Part of Shake.sass, based on iota.css with some Bootstrap 4 flavour.
 * @author Dimitris Psaropoulos <info@harby.me>
 * @author Krisztian Pinter <krisz@keeteean.com>
 *
 * We use Flexbox to create grid, so we don't generate too much css here, only
 * the essential ones. Then you can extend (not @extend) that more properties
 * as you need, like: `flex-direction`, `justify-content` or vertical spacing.
 *
 * **IMPORTANT!** Don't use grid mixins alone only together, or it will cause
 * wrong paddings and even broke your layout! So please don't use just
 * `make-grid` or `make-column` alone only both together. In case of you don't
 * need the exact column with (e.x. `25%`), just write custom flexbox rules.
 *
 * Let's see a semantic example for a typical responsive entry lister:
 *
 * @example
 *   index.html
 *
 *   <div class="o-container">
 *     <ul class="entry__list">
 *       <li class="entry">an entry</li>
 *       <li class="entry">an entry</li>
 *       <li class="entry">an entry</li>
 *       <li class="entry entry--double">an entry</li>
 *       <li class="entry">an entry</li>
 *     </ul>
 *   </div>
 *
 *   style.scss
 *   @use "../tools";
 *
 *   .entry__list {
 *     @include tools.make-grid();
 *     flex-direction: row;
 *   }
 *
 *   .entry {
 *     @include tools.make-column();
 *     @include tools.breakpoint(medium) {
 *       @include tools.column-size(6,12);
 *     }

 *     @include tools.breakpoint(large) {
 *       @include tools.column-size(4,12);
 *     }

 *     &--double {
 *       @include tools.breakpoint(medium) {
 *         @include tools.column-size(6,12);
 *       }

 *       @include tools.breakpoint(large) {
 *         @include tools.column-size(8,12);
 *       }
 *     }
 *   }
 */
/**
 * Imports
 */
/**
 * Settings
 *
 * We use the default global gutters for gaps between columns. But you can
 * define additional gutters. There is an empty `$grid-gutter-extra`
 * Sass map for that, but if you need, you can create more.
 */
/**
 * Create Grid
 *
 * With `make-grid` mixin you can create grid element from the parent of
 * columns element. In the most cases this will be the row element.
 * It has one parameter: the gutter size. By default this is the global
 * gutter. But you can add any value. In this way, if you don't want any
 * gutter, just type 0.
 *
 * @type Mixin
 * @parameter {map | number} $gutter - The gutter size between columns: with
 * the last `half` parameter this value will be divide by 2!
 * @require {mixin} libraries.generate-unit <2.tools/libraries/generate-unit>
 * @require {mixin} libraries.negative-unit <2.tools/libraries/negative-unit>
 *
 *
 * Examples
 *
 * Grid with default gutter
 *
 * The default gutter comes from `1.settings/_settings.grid.scss` and here
 * we divide that by 2 for two sides.
 *
 * @example
 *   @use "../tools";
 *
 *   .entry__list {
 *     @include tools.make-grid();
 *   }
 *
 * Grid with custom responsive gutters
 *
 * @example
 *   @use "../tools";
 *
 *   $grid-gutter-extra: (
 *       null    : .6rem,
 *       medium  : 1.2rem,
 *       large   : 2.4rem
 *   );
 *
 *   .entry__list {
 *     @include tools.make-grid($grid-gutter-extra);
 *   }
 *
 * Grid with simple, non-responsive gutters
 *
 * @example
 *   @use "../tools";
 *
 *   .entry__list {
 *     @include tools.make-grid(1.5rem);
 *   }
 *
 * Grid without any gutters (collapsed)
 *
 * @example
 *   @use "../tools";
 *
 *   .entry__list {
 *     @include tools.make-grid(0);
 *   }
 */
/**
 * Create Columns for Grid
 *
 * In the similar way to Grid with `make-column` mixin you can create
 * columns.
 * It has one parameter: the gutter size. By default this is the global
 * gutter. But you can add any value. In this way, if you don't want any
 * gutter, just type 0. You have to you use the same value for gid and
 * column!
 *
 * @type Mixin
 * @parameter {map | number} $gutter - The gutter size between columns: with
 * the last `half` parameter this value will be divide by 2!
 * @require {mixin} libraries.generate-unit <2.tools/libraries/generate-unit>
 *
 *
 * Examples
 *
 * Columns with default gutter
 *
 * The default gutter comes from `1.settings/_settings.grid.scss` and here
 * we divide that by 2 for two sides.
 *
 * @example
 *   @use "../tools";
 *
 *   .entry {
 *     @include tools.make-column();
 *   }
 *
 * Columns with custom responsive gutters
 *
 * @example
 *   @use "../tools";
 *
 *   $grid-gutter-extra: (
 *       null    : .6rem,
 *       medium  : 1.2rem,
 *       large   : 2.4rem
 *   );
 *
 *   .entry {
 *     @include tools.make-column($grid-gutter-extra);
 *   }
 *
 * Columns with simple, non responsive gutters
 *
 * @example
 *   @use "../tools";
 *
 *   .entry {
 *     @include tools.make-column(1.5rem);
 *   }
 *
 * Columns without any gutters (collapsed)
 *
 * @example
 *   @use "../tools";
 *
 *   .entry {
 *     @include tools.make-column(0);
 *   }
 */
/**
 * Set Column size
 *
 * Use the `column-size` mixin to set the size of columns. We use dedicated
 * mixin for this, so you can set individually for each columns and different
 * breakpoints.
 * It accept two parameter: the column size and the total number of the columns.
 * Actually it's a fraction, like: `4, 12` -> `4/12`; this means: four columns
 * of total twelve. (you will get 33.3333%).
 *
 * @type Mixin
 * @parameter {number} $column - like 4.
 * @parameter {number} $columns - like 12.
 * @require {function} calc-column-size
 *
 *
 * @example
 *   @use "../tools";
 *
 *   .entry {
 *     @include tools.make-column();
 *     @include tools.column-size(4,12);
 *   }
 */
/**
 * Column offset
 *
 * Use the `column-offset` mixin if you want to push or pull a column.
 * In normal way you can do this easily with custom left or right margins,
 * but if you want one or more column sized gap between columns, you can do
 * it easily with this mixin.
 * It has two required parameters to calculate the offset size: the column size
 * and the total number of the columns.
 * There is an optionally third parameter too: the position (before (`start`)
 * or after (`end`) of the column). By default before (`start`).
 *
 * @type Mixin
 * @parameter {number} $column - like 4.
 * @parameter {number} $columns - like 12.
 * @parameter {string} $position - start or end.
 * @require {function} calc-column-size
 *
 *
 * Examples
 *
 * Push the column on left side
 *
 * @example
 *   @use "../tools";
 *
 *   .entry {
 *     @include tools.make-column();
 *     @include tools.column-size(3,12);
 *
 *     &--center {
 *       @include tools.column-offset(3,12);
 *     }
 *   }
 *
 * Pull the column on right side
 *
 * @example
 *   @use "../tools";
 *
 *   .article__column--center {
 *     @include tools.make-column();
 *     @include tools.column-size(3,12);
 *     @include tools.column-offset(3,12, end);
 *   }
 */
/**
 * @file
 * Internet Explorer Hack Tool
 *
 * Part of Shake.sass.
 * @author Krisztian Pinter <krisz@keeteean.com>
 *
 * Media query only for Microsoft Internet Explorer browsers.
 */
/**
 * Internet Explorer 10-11 mixin
 *
 * @example
 *  @include ie {
 *    overflow: visible;
 *  }
 */
/**
 * @file
 * Button Tool
 *
 * Button mixins for different DOMs.
 */
/**
 * Imports
 */
/**
 * @file
 * Link Tool
 *
 * Part of Shake.sass.
 * @author Krisztian Pinter <krisz@keeteean.com>
 *
 * Robust theming anchor elements.
 *
 * @example
 * Given a color, use darken effect, use the same `:visited` color as `:link`, use different color
 * for other states, no `text-decoration`, no `:focus` style:
 *
 * a {
 *   @use "../tools";
 *
 *    @include tools.link($color-link);
 * }
 *
 *
 * Given a color, use lighten effect, use the same `:visited` color as for other states, use
 * `text-decoration: underlined`, no `:focus` style:
 *
 * a {
 *   @include tools.link($color-link, dark, visited, underlined);
 * }
 *
 *
 * Given a color, use darken effect, use the same `:visited` color as for other states, no
 * `text-decoration`, given a `:focus` style:
 *
 * a {
 *   @include tools.link($color-link, light, none, none, .8rem solid $color-outline);
 * }
 */
/**
 * Imports
 */
/**
 * Link mixin
 *
 * @parameter {string} $color - Text color of the link.
 * @parameter {string} $type - The type of the color.
 *   - Choose `light` if the `$color` is light, and you want it become darker on `:hover`/`:active` state.
 *   - Choose `dark` if the `$color` is dark, and you want it become lighter on `:hover`/`:active` state.
 * @parameter {string} $visited - Optionally you can use the same effect for `:visited` state as `:hover`,
 *   `:focus` and `:active` if you use here the `visited` string; default: `none`.
 * @parameter {string} $text-decoration - Optional text-decoration for `:link` and `:visited` states;
 *   default: `none`.*
 * @parameter {string} $outline - Optional outline for `:focus` state; default: `initial`.*
 *
 * * If you want to change the default value for these optional parameters, you need to explicit write
 * the default value for the previous optional parameters too.
 */
/**
 * @file
 * Long Text Field Component
 *
 * Theming long text search fields
 */
/**
  * Imports
 */
/**
 * @file
 * Reset Tools
 *
 * Improved Normalize.css with some goodness:
 *   - Sass variables,
 *   - switchable components:
 *       - heading font-size reset,
 *       - small font-size reset,
 *       - list bullets remover,
 *       - table element,
 *       - form elements,
 *       - button element,
 *       - font antialiasing
 *   - best practices
 *   - no static values
 *   - compatible with Stylelint rules.
 *
 * Compatible with IE10+.
 *
 * Based on normalize.css
 * @author Nicolas Gallagher
 * @author Krisztian Pinter <krisz@keeteean.com>
 * @see normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 */
/**
 * Imports
 */
/**
 *** Settings ***
 */
/**
 * Heading font size
 *
 * Makes all heading tags ( h1 - h6 ) to be equal to your body size. It forces
 * you to use heading tags with focus on your semantics and not on the way they
 * look.
 *
 * @type Boolean
 */
/**
 * Small element font size
 *
 * Makes small tag to be equal to your body size.
 * It forces you to use heading tags with focus on your semantics and not on
 * the way they look.
 *
 * @type Boolean
 */
/**
 * Code font family
 *
 * Use font-family setting for all code HTML tags.
 *
 * @type String
 */
/**
 * Font Antialiasing
 *
 * Makes font thickness to look the same in Firefox and Webkit.
 * You can set it individually too with `font-smooth` mixin.
 *
 * @type Boolean
 */
/**
 * Remove bullets from HTML unformatted (`ul`), ordered (`ol`) lists and menu
 * element with CSS classes. Encourages the use of `ul`, `ol` and `menu` for
 * any listed elements in any styles, like a navigation menu and not only for
 * bullet lists.
 *
 * Opinionated and disabled by default.
 *
 * @type Boolean
 */
/**
 * Table normalizer
 *
 * @type Boolean
 */
/**
 * Full width images
 *
 * Optionally make all images full width to fill the parent container.
 *
 * @type Boolean
 */
/**
 * HTML4 Form Elements
 *
 * Enables normalize and resets for the HTML4 form elements.
 *
 * @type Boolean
 */
/**
 * HTML5 Form Elements
 *
 * Enables normalize and resets for the HTML5 form elements.
 *
 * @type Boolean
 */
/**
 * Button element reset
 *
 * Reset the appearance of the button element:
 *   - Remove the border, padding, appearance and background,
 *  - Set the the color to currentColor,
 *  - Set cursor to pointer.
 *
 * @type Boolean
 */
/**
 *** Document ***
 */
/**
 * 1. Sets box-sizing to border-box by default.
 * 2. The browser emphasizes legibility over rendering speed and geometric
 *    precision. This enables kerning and optional ligatures in Gecko and
 *    Webkit.
 * 3. Prevent adjustments of font size after orientation changes in iOS.
 * 4. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 *    Ensure the page always fills at least the entire height of the viewport.
 * 5. Makes font thickness to look the same in Firefox and Webkit.
 */
/**
 * Sets box-sizing to all elements and before and after
 */
/**
 *** Sections ***
 */
/**
 *** Grouping content ***
 */
/**
 * Fixes the issues of main HTML5 tag with even earlier versions of IE.
 * For IE9-, please use HTML5Shiv https://github.com/aFarkas/html5shiv.
 */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
/**
 * 1. Sets heading font-size to be equal to the content font-size. Encourages
 *    the use of different heading elements to define the position of the
 *    heading in the document and not the heading look.
 *    Opinionated and disabled by default.
 * 2. Reset font-weight of all heading elements.
 */
/**
 *** Text-level semantics ***
 */
/**
 * 1. Removes default grey background in IE10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
/**
 * Modify default styling of address.
 */
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Removed italic style from <var>.
 */
/**
 * 1. Sets small tag's font-size to be equal to the content font-size for
 *    semantic reasons.
 * 2. Add the correct font size in all browsers.
 */
/**
 * Prevent `sub` and `sup` elements from affecting the line height in all
 * browsers.
 */
/**
 * Remove bullets from HTML unformatted (`ul`), ordered (`ol`) lists and menu
 * element with CSS classes. Encourages the use of `ul`, `ol` and `menu` for
 * any listed elements in any styles, like a navigation menu and not only for
 * bullet lists.
 *
 * Opinionated and disabled by default.
 */
/**
 * 1. Removes default border spacing and collapse.
 * 2. Ensure tables fill up as much space as possible.
 */
/**
 *** Embedded content ***
 */
/**
 * 1. Removes border from images inside links
 * 2. Helps images to properly behave in responsive layouts
 * 3. Optionally make all images full width to fill the parent container
 */
/**
 * Add the correct display in iOS 4-7.
 */
/**
 * Hide the overflow in IE.
 */
/**
 * Normalizing html4 form elements
 */
/**
 *** Normalizing of html5 form elements ***
 */
/**
 *** Interactive ***
 */
/**
 * Add the correct display in IE 9-.
 *
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
/**
 * Add the correct display in all browsers.
 */
/**
 * Reset default appearance of the button element
 */
/**
 *** Scripting ***
 */
/**
 * Add the correct display in IE.
 */
/**
 * @file
 * Long Text Field Component
 *
 * Theming long text search fields
 */
/**
  * Imports
 */
/**
 * @file
 * Stretched Link Tool
 *
 * Make any HTML element or a component clickable by "stretching" a nested link
 * via css.
 *
 * Part of Shake.sass, borrowed from Bootstrap 4.
 * @link https://getbootstrap.com/docs/4.3/utilities/stretched-link
 *
 * Include `stretched-link` mixin to a link (`<a>` element) to make its
 * containing block clickable via a `::after` pseudo element.
 * In most cases, this means that an element with `position: relative;` that
 * contains a link with included `stretched-link` mixin is clickable.
 *
 * @example
 *   @use "../tools";
 *
 *   .o-media {
 *     position: relative;
 *
 *     &__link {
 *       @include tools.stretched-link;
 *     }
 *   }
 *
 * You can use it as utility class too:
 * @see 6.utilities/_utilities.stretched-link.scss
 */
/**
 * Imports
 */
/**
 * Stretched Link mixin
 */
/**
 * @file
 * Text Tool
 *
 * Text block related tools
 *
 * Part of Shake.sass.
 * @author Krisztian Pinter <krisz@keeteean.com>
 * @see 6.utilities/_utilities.text.scss for BEM based class named version
 */
/**
 * Text-align Mixin
 *
 * @parameter {string} $align - Align value ex.: left.
 * @parameter {string} $last - Optional, align value for justify aligned last
 * line.
 *
 *
 * Examples
 *
 * Simple text align.
 *
 * @example
 *   @use "../tools";
 *
 *   .c-button {
 *     @include tools.text-align(center);
 *   }
 *
 * Align last line of a justify text.
 *
 * @example
 *   @use "../tools";
 *
 *   .section__lead {
 *     @include tools.text-align(justify, left);
 *   }
 */
/**
 * Text Overflow behaviors
 *
 * Text Ellipsis
 *
 * Overflow behavior: display an ellipsis to represent clipped text.
 * Only works on single line text!
 *
 * Borrowed from Spectre.css
 * @author Yan Zhu <picturepan2@hotmail.com>
 * @author Krisztian Pinter <krisz@keeteean.com>
 * @link https://picturepan2.github.io/spectre/utilities/text.html
 *
 * @example
 *   @use "../tools";
 *
 *   .article__lead {
 *     @include tools.text-ellipsis;
 *   }
 */
/**
 * Text Clip
 *
 * Overflow behavior: truncate the text.
 *
 * Borrowed from Spectre.css
 * @author Yan Zhu <picturepan2@hotmail.com>
 * @author Krisztian Pinter <krisz@keeteean.com>
 * @link https://picturepan2.github.io/spectre/utilities/text.html
 *
 * @example
 *   @use "../tools";
 *
 *   .article__lead {
 *     @include tools.text-clip;
 *   }
 */
/**
 * Text Break
 *
 * Text may be broken at arbitrary points.
 *
 * Borrowed from Spectre.css
 * @author Yan Zhu <picturepan2@hotmail.com>
 * @author Krisztian Pinter <krisz@keeteean.com>
 * @link https://picturepan2.github.io/spectre/utilities/text.html
 *
 * @example
 *   @use "../tools";
 *
 *   .article__body {
 *     @include tools.text-break;
 *   }
 */
/**
 * @file
 * Button Tool
 *
 * Button mixins for different DOMs.
 */
/**
 * Imports
 */
/**
 * @file
 * Negative Units
 *
 * Create negative values from positive ones.
 *
 * Part of Shake.sass, borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 *
 * @type Function
 */
/**
 * Imports
 */
/**
 * @file
 * CSS Triangle Tool
 *
 * Generates a triangle pointing in a specified direction.
 *
 * Part of Shake.sass, borrowed from Bourbon.
 * @link https://www.bourbon.io/docs/latest#triangle
 *
 * @example
 *   @use "../tools";
 *
 *   .button__arrow {
 *     @include tools.make-triangle(right, 10.5rem, 1rem, settings.$color-secondary);
 *   }
 */
/**
 * Imports
 */
/**
 * Make Triangle mixin
 *
 * @parameter {string} $direction
 *   The direction the triangle should point. Accepts `up`, `up-right`,
 *   `right`, `down-right`, `down`, `down-left`, `left` or `up-left`.
 *
 * @parameter {number (with unit)} $width
 *   Width of the triangle.
 *
 * @parameter {number (with unit)} $height
 *   Height of the triangle.
 *
 * @parameter {color} $color
 *   Color of the triangle.
 */
/**
 * @file
 * Visibility Tool
 *
 * Control the visibility, without modifying the display, of elements with
 * visibility utilities.
 *
 * @see 6.utilities/_utilities.visibility.scss for BEM based class named version
 */
/**
 * Visually Hidden
 *
 * Use visually-hidden mixin to hide elements on all devices except screen
 * readers.
 *
 * Part of Shake.sass, borrowed from iota.css.
 * @author Dimitris Psaropoulos <info@harby.me>
 * @author Krisztian Pinter <krisz@keeteean.com>
 * @link https://www.iotacss.com/docs/utilities/display
 *
 * @example
 *   @use "../tools";
 *
 *   .page__title {
 *     @include tools.visually-hidden;
 *   }
 */
/**
 * Focusable Visually hidden
 *
 * Use in conjunction with `visually-hidden` to only display content when it's
 * focused.
 * Useful for "Skip to main content" links.
 * @see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 *
 * borrowed from HTML5 Boilerplate
 *
 * @example
 *   @use "../tools";
 *
 *   .skip-navigation {
 *      @include visually-hidden;
 *      @include visually-hidden--focusable;
 *   }
 */
h1.c-title {
  font-size: 3.8rem;
  line-height: 1.2;
}
@media screen and (min-width: 48em) {
  h1.c-title {
    font-size: 4.6rem;
  }
}
/*# sourceMappingURL=components.typo.css.map */