@charset "UTF-8";
/* ----------------------------------------
    Disclaimer
---------------------------------------- */
/*!
 * Made by Vruchtvlees © 2007-2020
 *
 * Vruchtvlees: Digital, Strategy & Design realises
 * potential of ambitious brands. With enthusiasm and
 * driven by design, we research the underlying problem
 * and explore different solutions. That results into
 * Dutch Digital Design: internationally renowned
 * (digital) solutions that people love and help
 * brands grow.
 *
 * @site        https://www.vruchtvlees.com/
 * @facebook    https://www.facebook.com/vruchtvlees/
 * @instagram   https://www.instagram.com/vruchtvlees/
 * @twitter     https://twitter.com/vruchtvlees
 */
/*! Latest update to file: 28-2-2020 */
/* ----------------------------------------
    Functions
---------------------------------------- */
/* ----------------------------------------
    Casting to Boolean
---------------------------------------- */
/**
 * This function will return a
 * boolean based on given value.
 *
 * @author          Hugo Giraudel
 * @link            https://github.com/HugoGiraudel
 *
 * @param value     { boolean/string/list/map }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Variable Exists
---------------------------------------- */
/**
 * This function will check if the value
 * is defined within the project.
 *
 * @param value     { parameter }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Number
---------------------------------------- */
/**
 * This function will check if the value
 * is a number.
 *
 * @author          Hugo Giraudel
 * @link            https://github.com/HugoGiraudel
 *
 * @param value     { number }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Number
---------------------------------------- */
/**
 * This function will check if the value
 * is a pixel value. This function is based
 * on a
 *
 * @param value     { number }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Global
---------------------------------------- */
/**
 * This function will check if a given value
 * is declared within the global scope.
 *
 * @param value     { paramater }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Strip Unit
---------------------------------------- */
/**
 * This function will check if a given value
 * is declared within the global scope.
 *
 * @param value     { value }
 * @returns         { number }
 */
/* ----------------------------------------
    First Value
---------------------------------------- */
/**
 * This function will return the first
 * value in a list or a map
 *
 * Use map-get to retrieve a specific value
 * associated with the key given.
 *
 * @param value     { list/map }
 * @returns         { string } first value of map
 */
/* ----------------------------------------
    Last Value
---------------------------------------- */
/**
 * This function will return the last
 * value in a list or a map
 *
 * Use map-get to retrieve a specific value
 * associated with the key given.
 *
 * @param value     { list/map }
 * @returns         { string } last value of map
 */
/* ----------------------------------------
    Random Select
---------------------------------------- */
/**
 * This function will return a random value
 * from a list or map with related values.
 *
 * This function is a joke!
 *
 * @param value     { list/map }
 * @returns         { string } last value of map
 */
/* ----------------------------------------
    Color Function
---------------------------------------- */
/**
 * This function will return a color
 * from $global-colors map in config/color.
 *
 * @param key       { value }
 * @returns         { color }
 *
 * EXAMPLE
 *
 * .demo-class {
 *    background: color('blue');
 * }
 */
/* ----------------------------------------
    Color Function
---------------------------------------- */
/**
 * This function will return a color
 * from $global-branding map in config/color.
 *
 * @param key       { value }
 * @returns         { color }
 *
 * EXAMPLE
 *
 * .demo-class {
 *    background: branding(primary, dark);
 * }
 */
/* ----------------------------------------
    Color Level Function
---------------------------------------- */
/**
 * This function will return a color based
 * on a level from 1 till 10.
 *
 * @param key       { value }
 * @param level     { number } from 1 to 10
 * @returns         { color }
 *
 * EXAMPLE
 *
 * .demo-class {
 *    background: color-level('blue', 5);
 * }
 */
/* ----------------------------------------
    Contains Light
---------------------------------------- */
/**
 * This function will return a boolean
 * for a light color within the brand
 * colors map.
 *
 * @param colors    { map }
 * @returns         { boolean/color } default return color
 */
/* ----------------------------------------
    Contains Dark
---------------------------------------- */
/**
 * This function will return a boolean
 * for a dark color within the brand
 * colors map.
 *
 * @param colors    { map }
 * @returns         { boolean/color } default return color
 */
/* ----------------------------------------
    Contrast
---------------------------------------- */
/**
 * This function will return a contract color
 *
 * @param colors    { color }
 * @returns         { color } default return color
 */
/* ----------------------------------------
    Calculate Size
---------------------------------------- */
/**
 * This function calculates a em value based
 * on the number of pixels added as $size.
 * Function will check for a pixel value.
 *
 * @param size     { number } in px or unitless
 * @param return   { size } in em value
 */
/* ----------------------------------------
    Font Size
---------------------------------------- */
/**
 * This is a additional function that doesn't
 * have to be included an can therefore be
 * used inside maps. For cleaner code!
 *
 * @param size     { number } in px or unitless number
 * @param return   { size } in em value
 */
/* ----------------------------------------
    Font Merge
---------------------------------------- */
/**
 * This is a additional function that calls
 * the map-blend function for cleaner syntax.
 *
 * @param map1      { map }
 * @param map1      { map }
 * @returns         { map } merged map1 and map2
 */
/* ----------------------------------------
    Media Query
---------------------------------------- */
/**
 * This helper function will format a given
 * breakpoint (based on the config) to a
 * Bourbon Neat media value.
 *
 * @param breakpoint  { string }
 * @param type        { string }
 * @returns           { string }
 */
/* ----------------------------------------
    Gutter
---------------------------------------- */
/**
 * This function will retrieve a a given
 * gutter of a breakpoint map.
 *
 * @param breakpoint  { map }
 * @param type        { string }
 * @returns           { string }
 */
/* ----------------------------------------
    Grid Width
---------------------------------------- */
/**
 * This function will return the width of
 * a specified amount of columns
 *
 * @param amount      { numbers }
 * @param breakpoint  { map }
 * @returns           { width }
 */
/* ----------------------------------------
     List Casting
---------------------------------------- */
/**
 * This function will return a list of
 * given values.
 *
 * @author          Hugo Giraudel
 * @link            https://github.com/HugoGiraudel
 *
 * @param args      { string/list/map }
 * @returns         { list }
 */
/* ----------------------------------------
    List Convert Pair
---------------------------------------- */
/**
 * This function will accept a map with
 * key value pairs and output a proper
 * CSS property value pair
 *
 * @param map       { list }
 * @returns         { string }
 */
/* ----------------------------------------
     List Empty
---------------------------------------- */
/**
 * This function will check if a list
 * is empty
 *
 * @param list      { list }
 * @returns         { boolean }
 */
/* ----------------------------------------
    List Contains
---------------------------------------- */
/**
 * This function will check if a list
 * contains a specific value.
 *
 * @param list      { list }
 * @param value     { string }
 * @returns         { boolean }
 */
/* ----------------------------------------
     Map Empty
---------------------------------------- */
/**
 * This function will check if a list
 * is empty.
 *
 * @param map       { map }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Map Add Pair
---------------------------------------- */
/**
 * This function will accept a key value
 * pair to be added to a existing map.
 *
 * @param map       { map }
 * @param new       { map } value pairs
 * @returns         { map }
 */
/* ----------------------------------------
    Map Return Pair
---------------------------------------- */
/**
 * This function will return a list of
 * a key value pair based on a given key
 * within a map.
 *
 * @param map       { map }
 * @param key       { string }
 * @returns         { pair }
 */
/* ----------------------------------------
    Map Collection
---------------------------------------- */
/**
 * This function will return a collection
 * of given maps as one major map!
 *
 * @param maps      { map }
 * @returns         { map }
 */
/* ----------------------------------------
    Map Fetch
---------------------------------------- */
/**
 * This function will take several keys
 * to find a specific value contained
 * within a multidimensional map.
 *
 * @param maps      { map }
 * @param keys      { string }
 * @returns         { map }
 */
/* ----------------------------------------
     Map Blend
---------------------------------------- */
/**
 * This function will recursively merge two
 * maps for global and local scope flexibility.
 * So you can extend or change some of the
 * global values stored within a map.
 *
 * @author          Zsolt Pentz
 * @link            https://github.com/pentzzsolt
 *
 * @param map1      { map } global map
 * @param map1      { map } local map
 * @returns         { map } combined map
 */
/* ----------------------------------------
     Map Reverse
---------------------------------------- */
/**
 * This function will reverse the order of
 * a given map en output the new map
 *
 * @author          Sean McEmerson
 * @link            https://github.com/seanislegend
 *
 * @param map       { map }
 * @returns         { map } reversed map
 */
/* ----------------------------------------
     String Casting
---------------------------------------- */
/**
 * This function will return a string
 * of a given value.
 *
 * @author          Hugo Giraudel
 * @link            https://github.com/HugoGiraudel
 *
 * @param value     { list/map }
 */
/* ----------------------------------------
    String Contains
---------------------------------------- */
/**
 * This function will find if a specific
 * word is present in a string.
 *
 * @requires string { string }
 * @requires find   { string }
 */
/* ----------------------------------------
    String Replace
---------------------------------------- */
/**
 * This function will find a character
 * within in a string.
 *
 * @author          Jonathan Neal
 * @link            https://github.com/jonathantneal
 *
 * @requires string { string }
 * @requires search { string }
 * @params replace  { string }
 */
/* ----------------------------------------
    String to List
---------------------------------------- */
/**
 * This function will convert a string to
 * a list, added some custom tweaks to
 * original code.
 *
 * @author          Beni Buess
 * @link            https://github.com/benib
 *
 * @requires string { string }
 * @params separator { string }
 * @params start    { number }
 * @returns         { string }
 */
/* ----------------------------------------
    Mixins
---------------------------------------- */
/* ----------------------------------------
    Float
---------------------------------------- */
/**
 * This is a mixin that will set a float
 * to the given element.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include float;
 * }
 */
/* ----------------------------------------
    Position
---------------------------------------- */
/**
 * This is a mixin that will return property
 * and values for a given map value.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include position();
 * }
 */
/* ----------------------------------------
    Position Absolute
---------------------------------------- */
/**
 * This is a shorthand mixin to absolute
 * position a element.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include absolute((top: 0px, left: 0px));
 * }
 */
/* ----------------------------------------
    Position Relative
---------------------------------------- */
/**
 * This is a shorthand mixin to relative
 * position a element.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include relative((top: 0px, left: 0px));
 * }
 */
/* ----------------------------------------
    Position Fixed
---------------------------------------- */
/**
 * This is a shorthand mixin to fixed
 * position a element.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include fixed((top: 0px, left: 0px));
 * }
 */
/* ----------------------------------------
    Center Block
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include center;
 * }
 */
/* ----------------------------------------
    Inner Block
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    &__inner {
 *      @include inner(2rem, 4rem);
 *    }
 * }
 */
/* ----------------------------------------
    Flex Center
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include flex-center;
 * }
 */
/* ----------------------------------------
    Flex Vertical Center
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include flex-vertical-center;
 * }
 */
/* ----------------------------------------
    Default Flex Child
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include flex-child;
 * }
 */
/* ----------------------------------------
    Flex Grow Child
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include flex-child-grow;
 * }
 */
/* ----------------------------------------
    Flex Space Between
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include flex-space-between;
 * }
 */
/* ----------------------------------------
    To Props
---------------------------------------- */
/**
 * This is a mixin that will return property
 * and values for a given map value.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include to-props(top: 0px, left: 0px);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    top: 0px;
 *    left: 0px;
 * }
 */
/* ----------------------------------------
    Prefix
---------------------------------------- */
/**
 * @author          Hugo Giraudel
 * @link            https://github.com/HugoGiraudel
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include prefix((
 *      transform: translate(50px)
 *    ), webkit);
 * }
 */
/* ----------------------------------------
    Pseudo Selector
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    &:before {
 *      @include pseudo;
 *    }
 * }
 */
/* ----------------------------------------
    No Drag
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include no-drag;
 * }
 */
/* ----------------------------------------
    Debug Variable Output
---------------------------------------- */
/**
 * This mixin will set a before tag on
 * it's parent element and display the
 * the contents of variable within.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include debug-output($global-colors);
 * }
 */
/* ----------------------------------------
    Debug Selector
---------------------------------------- */
/**
 * This mixin will set a before tag on
 * it's parent element and display the
 * name of the selector.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include debug-selector;
 * }
 */
/* ----------------------------------------
    Debug Example
---------------------------------------- */
/**
 * This mixin will set a before tag on
 * the first element within it's parent.
 * Used to get going styling all UI
 * components in the example page.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include debug-example();
 * }
 */
/* ----------------------------------------
    Debug Responsive Values
---------------------------------------- */
/**
 * This mixin will set a before tag on
 * it's parent and show the value of the
 * available breakpoints depending on
 * the current viewport for debugging
 * purposes.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include debug-responsive();
 * }
 */
/* ----------------------------------------
    Clearfix
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include grid-clearfix;
 * }
 */
/* ----------------------------------------
    Fetch Color
---------------------------------------- */
/**
 * This mixin is used to fetch a particular
 * color of the global configured map.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include branding(background, primary, default);
 * }
 *
 * OUTPUT
 *
 * .demo-class-blue {
 *    background: #000
 * }
 */
/* ----------------------------------------
    Fetch Shorthand
---------------------------------------- */
/**
 * This shorthand will fetch a color for
 * a given key from the primary color values.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include primary(dark);
 * }
 *
 * OUTPUT
 *
 * .demo-class-blue {
 *    background: #000
 * }
 */
/* ----------------------------------------
    Color Combinations
---------------------------------------- */
/**
 * This mixin will use the root element
 * as a prefix for every color available
 * within a combination. Check the config
 * folder for the color combinations.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include color-combinations;
 * }
 *
 * OUTPUT
 *
 * .demo-class-blue {
 *    background: blue;
 *    color: black;
 * }
 */
/* ----------------------------------------
    Fetch Combination
---------------------------------------- */
/**
 * This mixin will return a contrasting
 * color based on a given background color.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include combi(banana);
 * }
 */
/* ----------------------------------------
    Contrast Color
---------------------------------------- */
/**
 * This mixin will return a contrasting
 * color based on a given background color.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include contrast(#000);
 * }
 */
/* ----------------------------------------
    Contrast Color B/W
---------------------------------------- */
/**
 * This mixin will return a contrasting
 * black or white color based on a given
 * background color.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include contrast(#000);
 * }
 */
/* ----------------------------------------
    SVG Fill
---------------------------------------- */
/**
 * This mixin will fill a svg, you can
 * still tweak the values as content of
 * the mixin.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include svg(color('black'));
 * }
 */
/* ----------------------------------------
    Font Styles
---------------------------------------- */
/**
 * This mixin will return all key value
 * pairs that are associated with a map
 * of font related styling.
 *
 * @type            { string }  the selected style
 * @font-map        { map }     default selected $global-text from config/fonts
 * @returns         { string }  all key value pairs
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include font(default);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    font-size: 1em;
 *    color: #000;
 * }
 */
/* ----------------------------------------
    Font Value
---------------------------------------- */
/**
 * This mixin will return all specific key value
 * pair that are associated with a map of font
 * related styling.
 *
 * @type            { string }  the related type of style
 * @prop            { string }  selected css property
 * @font-map        { map }     default selected $text from config/fonts
 * @returns         { string }  key value pair
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include font(default, font-weight);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    font-weight: 700;
 * }
 */
/* ----------------------------------------
    Font Exclude
---------------------------------------- */
/**
 * This mixin will return all specific key value
 * pair that are associated with a map and exclude
 * given properties.
 *
 * @type            { string }
 * @excl            { string }
 * @font-map        { map }
 * @returns         { string }  key value pair
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include font-exclude(default, font-weight);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    font-size: 1em;
 *    line-height: 1.5em;
 * }
 */
/* ----------------------------------------
    Font Face
---------------------------------------- */
/**
 * This mixin will set a custom font
 * face given given values.
 *
 * @author          Jonathan Neal
 * @link            https://github.com/jonathantneal
 *
 * @name            { string } name of the font
 * @file            { string } name of the file
 * @weight          { string } font-weight
 * @style           { string } font-style
 * @exts            { string } format
 * @returns         { string } complete font-face
 */
/* ----------------------------------------
    Font Smoothing
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include font-smoothing(antialiased);
 * }
 */
/* ----------------------------------------
    Font Heading
---------------------------------------- */
/**
 * This mixin will return all specific key value
 * pair that are associated with a map of font
 * related styling.
 *
 * @param start     { number }
 * @param end       { number }
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include header(1,3){
 *      @include font-size(20px);
 *    }
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    h1, h2, h3 {
 *      font-size 1.5em;
 *    }
 * }
 */
/* ----------------------------------------
    Font Size
---------------------------------------- */
/**
 * This mixin will take a number or px value
 * and calculate the em value.
 *
 * @param size      { number/value }
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include font-size(16px);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    font-size 1em
 * }
 */
/* ----------------------------------------
    Line Height
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include line-height(16px);
 * }
 */
/* ----------------------------------------
    Letter Spacing
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include letter-spacing(1px);
 * }
 */
/* ----------------------------------------
    Line Break
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include line-break;
 * }
 */
/* ----------------------------------------
    Line Clamp
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include line-clamp(5);
 * }
 */
/* ----------------------------------------
    Ellipsis
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include ellipsis(100%);
 * }
 */
/* ----------------------------------------
    Root
---------------------------------------- */
/* ----------------------------------------
    Placeholder
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include placeholder {
 *      @include font-size(14px);
 *      color: red;
 *    }
 * }
 */
/* ----------------------------------------
    Align Items
---------------------------------------- */
/**
 * Can be useful to declare distance in-between
 * items within a grid structure. Specify the
 * amount of items within a row to set a
 * margin between the rows.
 */
/* ----------------------------------------
    Flex container
---------------------------------------- */
/**
 * This mixin is used to add flex grid
 * It takes a map with columns and gutter as input
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include flex-container($grid-main);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    display: flex;
 *    flex-wrap: wrap;
 *    margin-left: -2rem;
 * }
 */
/* ----------------------------------------
    Flex column
---------------------------------------- */
/**
 * This mixin is used to create a flex column
 * It takes how many columns it should take and the grid setting.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include flex-column(2, $grid-main, .demo-class--flat);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    width: 100%;
 *    max-width: calc(50% - 2rem);
 *    margin-left: 2rem;
 * }
 *
 * .demo-class:nth-child(n+3):not(.demo-class--flat) {
 *    margin-top: 2rem;
 * }
 */
/* ----------------------------------------
    Breakpoints
---------------------------------------- */
/**
 * This mixin will set media queries based
 * on selected parameters.
 *
 * @requires viewport   { string/list }
 * @params type         { string } min or max default: max
 * @params orientation  { string } landscape or portrait
 * @params screen       { string } default: screen
 * @params breakpoints  { map } default: $global-breakpoints
 *
 * EXAMPLE
 *
 * .demo-class {
 *    padding: 20px;
 *
 *    @include mq(phone tablet) {
 *      padding: 30px;
 *    }
 *
 *    @include mq(tablet, 'min') {
 *      padding: 40px;
 *    }
 *
 *    @include mq(phone tablet, 'max', landscape) {
 *      padding: 30px;
 *    }
 * }
 *
 * OUTPUT
 *
 * @media screen and (min-width: 420px) and (max-width: 959px) {
 *   .demo-class {
 *     padding: 30px; }
 *   }
 * }
 *
 * @media screen and (min-width: 960px) {
 *   .demo-class {
 *     padding: 40px; }
 *   }
 * }
 *
 * @media screen and (min-width: 420px) and (max-width: 959px) and (orientation: landscape) {
 *   .demo-class {
 *     padding: 30px; }
 *   }
 * }
 */
/* ----------------------------------------
    Aspect Ratio
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include aspect-ratio(16,9);
 * }
 */
/* ----------------------------------------
     Theme Styling
---------------------------------------- */
/**
 * This function will output content if
 * a given string is equal to the current
 * theme. The $theme variable is created
 * within the sass-loader of the webpack
 * file an can be tweaked within this
 * configuration.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include theme('design') {
 *       background: color('pink');
 *    }
 *
 *    @include theme('digital') {
 *       background: color('blue');
 *    }
 * }
 */
/* ----------------------------------------
    Classes
---------------------------------------- */
/* ----------------------------------------
    Absolute Middle
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @extend %abs-middle-content;
 * }
 */
/* ----------------------------------------
    Middle
---------------------------------------- */
/**
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @extend %middle-content;
 * }
 *
 */
/* ----------------------------------------
    Cover Image
---------------------------------------- */
/**
 *
 * EXAMPLE
 *
 * .demo-class
 *    @extend %cover-img;
 * }
 *
 */
/* ----------------------------------------
    Full Screen
---------------------------------------- */
/**
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @extend %fullscreen;
 * }
 *
 */
/* ----------------------------------------
    Overlay
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @extend %overlay;
 * }
 */
/* ----------------------------------------
    Video Player
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @extend %player;
 * }
 */
/* ----------------------------------------
    Spacer
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @extend .padding-width-20;
 * }
 */
/* ----------------------------------------
    Create Spacers
---------------------------------------- */
/* ----------------------------------------
    Animations
---------------------------------------- */
/* ----------------------------------------
    Fade Animation
---------------------------------------- */
/**
 * Example usage
 *
 * .demo-class {
 *    animation: fade-in 0.75s ease-in-out;
 *    animation-iteration-count: 1;
 *    animation-fill-mode: forwards;
 * }
 *
 */
@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/* ----------------------------------------
    Pop Animation
---------------------------------------- */
/**
 * Example usage
 *
 * .demo-class {
 *    animation: pop 0.75s ease-in-out;
 *    animation-iteration-count: 1;
 *    animation-fill-mode: forwards;
 * }
 *
 */
@keyframes pop-in {
  0% {
    transform: scale(0); }
  40% {
    transform: scale(1.1); }
  65% {
    transform: scale(0.95); }
  80% {
    transform: scale(1.025); }
  100% {
    transform: scale(1); } }

@keyframes pop-out {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(0); } }

/* ----------------------------------------
    Pulse Animation
---------------------------------------- */
/**
 * Example usage
 *
 * .demo-class {
 *    animation: pulse 1.75s ease-in-out;
 *    animation-iteration-count: infinite;
 * }
 *
 */
@keyframes pulse {
  0% {
    transform: translateY(-50%) scale(1); }
  50% {
    transform: translateY(-50%) scale(1.05); }
  90%, 100% {
    transform: translateY(-50%) scale(1); } }

/* ----------------------------------------
    Skew Animation
---------------------------------------- */
/**
 * Example usage
 *
 * .demo-class {
 *    animation: skew 0.75s ease-in-out;
 *    animation-iteration-count: 1;
 *    animation-fill-mode: forwards;
 * }
 *
 */
@keyframes skew {
  0% {
    transform: skewX(0deg); }
  100% {
    transform: skewX(-10deg); } }

/* ----------------------------------------
    Turn Animation
---------------------------------------- */
/**
 * Example usage
 *
 * .demo-class {
 *    animation: spin 0.75s ease-in-out;
 *    animation-iteration-count: 1;
 *    animation-fill-mode: forwards;
 * }
 *
 */
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes anti-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-360deg); } }

/* ----------------------------------------
    Generators
---------------------------------------- */
/* ----------------------------------------
    Branding Colors
---------------------------------------- */
/**
 * This map includes all main colors
 * that will be used within the project.
 */
/* ----------------------------------------
    Branding Combinations
---------------------------------------- */
/**
 * I case you wan't to use specific color
 * combinations, you can add these to this
 * multi dimensional map. These should
 * always consist of a background and
 * color combination.
 */
/* ----------------------------------------
    Branding Values
---------------------------------------- */
/**
 * Cluster brand variables within this map
 * with custom names. Comes in handy if you
 * have specific names for certain color
 * values. Use map-fetch function to get the
 * value of particular map, there are also
 * some shorthand mixins to include colors.
 */
/* ----------------------------------------
    Export Colors JS
---------------------------------------- */

/* ----------------------------------------
    Color Classes
---------------------------------------- */
/**
 * This loop will generate color classes
 * looking for the available primary
 * selected colors.
 */
/* ----------------------------------------
    Color Combination Classes
---------------------------------------- */
/**
 * This loop will generate combination
 * classes looking for the available
 * combinations as declared inside the
 * color configuration.
 */
/* ----------------------------------------
    Font Face
---------------------------------------- */
/* ----------------------------------------
    Font Variables
---------------------------------------- */
/* ----------------------------------------
    Text Styles
---------------------------------------- */
/**
 * This sections specifies some of the
 * core font styling. You can declare
 * new maps inside this global variable
 * for use with the font mixin.
 */
/* ----------------------------------------
    Text Weight
---------------------------------------- */
/**
 * This sections specifies the weights of
 * the fonts that are used in numbers.
 */
/* ----------------------------------------
    Export Fonts JS
---------------------------------------- */

/* ----------------------------------------
    Font Classes
---------------------------------------- */
/**
 * This loop will generate color classes
 * looking for the available primary
 * selected colors.
 */
/* ----------------------------------------
    Breakpoints
---------------------------------------- */
/**
 * These breakpoints can be used within
 * the media query mixin. Feel free to
 * tweak or declare new values within
 * this map, the mixin will automatically
 * include them as an option.
 */
/* ----------------------------------------
    Hidden & Visible
---------------------------------------- */
@media screen and (min-width: 0) and (max-width: 419px) {
  .hidden--phone {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 559px) {
  .hidden--phone-wide {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 639px) {
  .hidden--phablet {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 767px) {
  .hidden--tablet-small {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 959px) {
  .hidden--tablet {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1079px) {
  .hidden--tablet-wide {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1279px) {
  .hidden--desktop {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1439px) {
  .hidden--desktop-wide {
    display: none; } }

.visible {
  display: none; }
  @media screen and (min-width: 0) and (max-width: 419px) {
    .visible--phone {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 559px) {
    .visible--phone-wide {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 639px) {
    .visible--phablet {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 767px) {
    .visible--tablet-small {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 959px) {
    .visible--tablet {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1079px) {
    .visible--tablet-wide {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1279px) {
    .visible--desktop {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1439px) {
    .visible--desktop-wide {
      display: block; } }

/* ----------------------------------------
    Export Breakpoints JS
---------------------------------------- */

/* ----------------------------------------
    Hidden & Visible
---------------------------------------- */
/**
 * These classes can be added within the
 * DOM to make an element either visible
 * or hidden within a certain view.
 */
/* ----------------------------------------
    Config Files
---------------------------------------- */
/* ----------------------------------------
    Paths
---------------------------------------- */
/**
 * Sometimes u might need to configure
 * a certain path or location, this is
 * the place to go!
 */
/* ----------------------------------------
    Breakpoints
---------------------------------------- */
/**
 * These breakpoints can be used within
 * the media query mixin. Feel free to
 * tweak or declare new values within
 * this map, the mixin will automatically
 * include them as an option.
 */
/* ----------------------------------------
    Hidden & Visible
---------------------------------------- */
@media screen and (min-width: 0) and (max-width: 419px) {
  .hidden--phone {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 559px) {
  .hidden--phone-wide {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 639px) {
  .hidden--phablet {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 767px) {
  .hidden--tablet-small {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 959px) {
  .hidden--tablet {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1079px) {
  .hidden--tablet-wide {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1279px) {
  .hidden--desktop {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1439px) {
  .hidden--desktop-wide {
    display: none; } }

.visible {
  display: none; }
  @media screen and (min-width: 0) and (max-width: 419px) {
    .visible--phone {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 559px) {
    .visible--phone-wide {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 639px) {
    .visible--phablet {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 767px) {
    .visible--tablet-small {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 959px) {
    .visible--tablet {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1079px) {
    .visible--tablet-wide {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1279px) {
    .visible--desktop {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1439px) {
    .visible--desktop-wide {
      display: block; } }

/* ----------------------------------------
    Export Breakpoints JS
---------------------------------------- */

/* ----------------------------------------
    Branding Colors
---------------------------------------- */
/**
 * This map includes all main colors
 * that will be used within the project.
 */
/* ----------------------------------------
    Branding Combinations
---------------------------------------- */
/**
 * I case you wan't to use specific color
 * combinations, you can add these to this
 * multi dimensional map. These should
 * always consist of a background and
 * color combination.
 */
/* ----------------------------------------
    Branding Values
---------------------------------------- */
/**
 * Cluster brand variables within this map
 * with custom names. Comes in handy if you
 * have specific names for certain color
 * values. Use map-fetch function to get the
 * value of particular map, there are also
 * some shorthand mixins to include colors.
 */
/* ----------------------------------------
    Export Colors JS
---------------------------------------- */

/* ----------------------------------------
    Font Face
---------------------------------------- */
/* ----------------------------------------
    Font Variables
---------------------------------------- */
/* ----------------------------------------
    Text Styles
---------------------------------------- */
/**
 * This sections specifies some of the
 * core font styling. You can declare
 * new maps inside this global variable
 * for use with the font mixin.
 */
/* ----------------------------------------
    Text Weight
---------------------------------------- */
/**
 * This sections specifies the weights of
 * the fonts that are used in numbers.
 */
/* ----------------------------------------
    Export Fonts JS
---------------------------------------- */

/* ----------------------------------------
    Grid
---------------------------------------- */
/**
 * We use the Bourbon Neat grid as a
 * default for every project. Use the
 * query function to determine a
 * certain breakpojnt. Tweak the
 * values if needed.
 */
/* ----------------------------------------
    Icons
---------------------------------------- */
/**
 * Configure (file) names of certain icons
 * to generate new classes within loops.
 */
/* ----------------------------------------
    Export Icons JS
---------------------------------------- */

/* ----------------------------------------
    App Related Files
---------------------------------------- */
/*
 * Webpack will automatically search for
 * this theme file to build a specific
 * theme related CSS output. These files
 * should only be used for elements or
 * features that are theme specific. For
 * elements that are used within both
 * themes there is a theme mixin
 * available within the support folder.
 */
@charset "UTF-8";
/**
 *
 * Vruchtvlees © 2007-2018
 *
 * Hi, welcome!
 *
 * This is the main style.scss file. One
 * stylesheet to rule them all! It includes
 * several helpful .scss files and combines
 * them into one overview of the folder
 * structure in this project, godspeed you!
 *
 */
/* ----------------------------------------
    Node Modules
---------------------------------------- */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block; }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block; }

/**
 * Add the correct display in IE.
 */
template {
  display: none; }

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none; }

/* ----------------------------------------
    Support
---------------------------------------- */
/* ----------------------------------------
    Disclaimer
---------------------------------------- */
/*!
 * Made by Vruchtvlees © 2007-2020
 *
 * Vruchtvlees: Digital, Strategy & Design realises
 * potential of ambitious brands. With enthusiasm and
 * driven by design, we research the underlying problem
 * and explore different solutions. That results into
 * Dutch Digital Design: internationally renowned
 * (digital) solutions that people love and help
 * brands grow.
 *
 * @site        https://www.vruchtvlees.com/
 * @facebook    https://www.facebook.com/vruchtvlees/
 * @instagram   https://www.instagram.com/vruchtvlees/
 * @twitter     https://twitter.com/vruchtvlees
 */
/*! Latest update to file: 28-2-2020 */
/* ----------------------------------------
    Functions
---------------------------------------- */
/* ----------------------------------------
    Casting to Boolean
---------------------------------------- */
/**
 * This function will return a
 * boolean based on given value.
 *
 * @author          Hugo Giraudel
 * @link            https://github.com/HugoGiraudel
 *
 * @param value     { boolean/string/list/map }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Variable Exists
---------------------------------------- */
/**
 * This function will check if the value
 * is defined within the project.
 *
 * @param value     { parameter }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Number
---------------------------------------- */
/**
 * This function will check if the value
 * is a number.
 *
 * @author          Hugo Giraudel
 * @link            https://github.com/HugoGiraudel
 *
 * @param value     { number }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Number
---------------------------------------- */
/**
 * This function will check if the value
 * is a pixel value. This function is based
 * on a
 *
 * @param value     { number }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Global
---------------------------------------- */
/**
 * This function will check if a given value
 * is declared within the global scope.
 *
 * @param value     { paramater }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Strip Unit
---------------------------------------- */
/**
 * This function will check if a given value
 * is declared within the global scope.
 *
 * @param value     { value }
 * @returns         { number }
 */
/* ----------------------------------------
    First Value
---------------------------------------- */
/**
 * This function will return the first
 * value in a list or a map
 *
 * Use map-get to retrieve a specific value
 * associated with the key given.
 *
 * @param value     { list/map }
 * @returns         { string } first value of map
 */
/* ----------------------------------------
    Last Value
---------------------------------------- */
/**
 * This function will return the last
 * value in a list or a map
 *
 * Use map-get to retrieve a specific value
 * associated with the key given.
 *
 * @param value     { list/map }
 * @returns         { string } last value of map
 */
/* ----------------------------------------
    Random Select
---------------------------------------- */
/**
 * This function will return a random value
 * from a list or map with related values.
 *
 * This function is a joke!
 *
 * @param value     { list/map }
 * @returns         { string } last value of map
 */
/* ----------------------------------------
    Color Function
---------------------------------------- */
/**
 * This function will return a color
 * from $global-colors map in config/color.
 *
 * @param key       { value }
 * @returns         { color }
 *
 * EXAMPLE
 *
 * .demo-class {
 *    background: color('blue');
 * }
 */
/* ----------------------------------------
    Color Function
---------------------------------------- */
/**
 * This function will return a color
 * from $global-branding map in config/color.
 *
 * @param key       { value }
 * @returns         { color }
 *
 * EXAMPLE
 *
 * .demo-class {
 *    background: branding(primary, dark);
 * }
 */
/* ----------------------------------------
    Color Level Function
---------------------------------------- */
/**
 * This function will return a color based
 * on a level from 1 till 10.
 *
 * @param key       { value }
 * @param level     { number } from 1 to 10
 * @returns         { color }
 *
 * EXAMPLE
 *
 * .demo-class {
 *    background: color-level('blue', 5);
 * }
 */
/* ----------------------------------------
    Contains Light
---------------------------------------- */
/**
 * This function will return a boolean
 * for a light color within the brand
 * colors map.
 *
 * @param colors    { map }
 * @returns         { boolean/color } default return color
 */
/* ----------------------------------------
    Contains Dark
---------------------------------------- */
/**
 * This function will return a boolean
 * for a dark color within the brand
 * colors map.
 *
 * @param colors    { map }
 * @returns         { boolean/color } default return color
 */
/* ----------------------------------------
    Contrast
---------------------------------------- */
/**
 * This function will return a contract color
 *
 * @param colors    { color }
 * @returns         { color } default return color
 */
/* ----------------------------------------
    Calculate Size
---------------------------------------- */
/**
 * This function calculates a em value based
 * on the number of pixels added as $size.
 * Function will check for a pixel value.
 *
 * @param size     { number } in px or unitless
 * @param return   { size } in em value
 */
/* ----------------------------------------
    Font Size
---------------------------------------- */
/**
 * This is a additional function that doesn't
 * have to be included an can therefore be
 * used inside maps. For cleaner code!
 *
 * @param size     { number } in px or unitless number
 * @param return   { size } in em value
 */
/* ----------------------------------------
    Font Merge
---------------------------------------- */
/**
 * This is a additional function that calls
 * the map-blend function for cleaner syntax.
 *
 * @param map1      { map }
 * @param map1      { map }
 * @returns         { map } merged map1 and map2
 */
/* ----------------------------------------
    Media Query
---------------------------------------- */
/**
 * This helper function will format a given
 * breakpoint (based on the config) to a
 * Bourbon Neat media value.
 *
 * @param breakpoint  { string }
 * @param type        { string }
 * @returns           { string }
 */
/* ----------------------------------------
    Gutter
---------------------------------------- */
/**
 * This function will retrieve a a given
 * gutter of a breakpoint map.
 *
 * @param breakpoint  { map }
 * @param type        { string }
 * @returns           { string }
 */
/* ----------------------------------------
    Grid Width
---------------------------------------- */
/**
 * This function will return the width of
 * a specified amount of columns
 *
 * @param amount      { numbers }
 * @param breakpoint  { map }
 * @returns           { width }
 */
/* ----------------------------------------
     List Casting
---------------------------------------- */
/**
 * This function will return a list of
 * given values.
 *
 * @author          Hugo Giraudel
 * @link            https://github.com/HugoGiraudel
 *
 * @param args      { string/list/map }
 * @returns         { list }
 */
/* ----------------------------------------
    List Convert Pair
---------------------------------------- */
/**
 * This function will accept a map with
 * key value pairs and output a proper
 * CSS property value pair
 *
 * @param map       { list }
 * @returns         { string }
 */
/* ----------------------------------------
     List Empty
---------------------------------------- */
/**
 * This function will check if a list
 * is empty
 *
 * @param list      { list }
 * @returns         { boolean }
 */
/* ----------------------------------------
    List Contains
---------------------------------------- */
/**
 * This function will check if a list
 * contains a specific value.
 *
 * @param list      { list }
 * @param value     { string }
 * @returns         { boolean }
 */
/* ----------------------------------------
     Map Empty
---------------------------------------- */
/**
 * This function will check if a list
 * is empty.
 *
 * @param map       { map }
 * @returns         { boolean }
 */
/* ----------------------------------------
    Map Add Pair
---------------------------------------- */
/**
 * This function will accept a key value
 * pair to be added to a existing map.
 *
 * @param map       { map }
 * @param new       { map } value pairs
 * @returns         { map }
 */
/* ----------------------------------------
    Map Return Pair
---------------------------------------- */
/**
 * This function will return a list of
 * a key value pair based on a given key
 * within a map.
 *
 * @param map       { map }
 * @param key       { string }
 * @returns         { pair }
 */
/* ----------------------------------------
    Map Collection
---------------------------------------- */
/**
 * This function will return a collection
 * of given maps as one major map!
 *
 * @param maps      { map }
 * @returns         { map }
 */
/* ----------------------------------------
    Map Fetch
---------------------------------------- */
/**
 * This function will take several keys
 * to find a specific value contained
 * within a multidimensional map.
 *
 * @param maps      { map }
 * @param keys      { string }
 * @returns         { map }
 */
/* ----------------------------------------
     Map Blend
---------------------------------------- */
/**
 * This function will recursively merge two
 * maps for global and local scope flexibility.
 * So you can extend or change some of the
 * global values stored within a map.
 *
 * @author          Zsolt Pentz
 * @link            https://github.com/pentzzsolt
 *
 * @param map1      { map } global map
 * @param map1      { map } local map
 * @returns         { map } combined map
 */
/* ----------------------------------------
     Map Reverse
---------------------------------------- */
/**
 * This function will reverse the order of
 * a given map en output the new map
 *
 * @author          Sean McEmerson
 * @link            https://github.com/seanislegend
 *
 * @param map       { map }
 * @returns         { map } reversed map
 */
/* ----------------------------------------
     String Casting
---------------------------------------- */
/**
 * This function will return a string
 * of a given value.
 *
 * @author          Hugo Giraudel
 * @link            https://github.com/HugoGiraudel
 *
 * @param value     { list/map }
 */
/* ----------------------------------------
    String Contains
---------------------------------------- */
/**
 * This function will find if a specific
 * word is present in a string.
 *
 * @requires string { string }
 * @requires find   { string }
 */
/* ----------------------------------------
    String Replace
---------------------------------------- */
/**
 * This function will find a character
 * within in a string.
 *
 * @author          Jonathan Neal
 * @link            https://github.com/jonathantneal
 *
 * @requires string { string }
 * @requires search { string }
 * @params replace  { string }
 */
/* ----------------------------------------
    String to List
---------------------------------------- */
/**
 * This function will convert a string to
 * a list, added some custom tweaks to
 * original code.
 *
 * @author          Beni Buess
 * @link            https://github.com/benib
 *
 * @requires string { string }
 * @params separator { string }
 * @params start    { number }
 * @returns         { string }
 */
/* ----------------------------------------
    Mixins
---------------------------------------- */
/* ----------------------------------------
    Float
---------------------------------------- */
/**
 * This is a mixin that will set a float
 * to the given element.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include float;
 * }
 */
/* ----------------------------------------
    Position
---------------------------------------- */
/**
 * This is a mixin that will return property
 * and values for a given map value.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include position();
 * }
 */
/* ----------------------------------------
    Position Absolute
---------------------------------------- */
/**
 * This is a shorthand mixin to absolute
 * position a element.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include absolute((top: 0px, left: 0px));
 * }
 */
/* ----------------------------------------
    Position Relative
---------------------------------------- */
/**
 * This is a shorthand mixin to relative
 * position a element.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include relative((top: 0px, left: 0px));
 * }
 */
/* ----------------------------------------
    Position Fixed
---------------------------------------- */
/**
 * This is a shorthand mixin to fixed
 * position a element.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include fixed((top: 0px, left: 0px));
 * }
 */
/* ----------------------------------------
    Center Block
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include center;
 * }
 */
/* ----------------------------------------
    Inner Block
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    &__inner {
 *      @include inner(2rem, 4rem);
 *    }
 * }
 */
/* ----------------------------------------
    Flex Center
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include flex-center;
 * }
 */
/* ----------------------------------------
    Flex Vertical Center
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include flex-vertical-center;
 * }
 */
/* ----------------------------------------
    Default Flex Child
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include flex-child;
 * }
 */
/* ----------------------------------------
    Flex Grow Child
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include flex-child-grow;
 * }
 */
/* ----------------------------------------
    Flex Space Between
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include flex-space-between;
 * }
 */
/* ----------------------------------------
    To Props
---------------------------------------- */
/**
 * This is a mixin that will return property
 * and values for a given map value.
 *
 * EXAMPLE
 *
 * .demo-class {
 *     @include to-props(top: 0px, left: 0px);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    top: 0px;
 *    left: 0px;
 * }
 */
/* ----------------------------------------
    Prefix
---------------------------------------- */
/**
 * @author          Hugo Giraudel
 * @link            https://github.com/HugoGiraudel
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include prefix((
 *      transform: translate(50px)
 *    ), webkit);
 * }
 */
/* ----------------------------------------
    Pseudo Selector
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    &:before {
 *      @include pseudo;
 *    }
 * }
 */
/* ----------------------------------------
    No Drag
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include no-drag;
 * }
 */
/* ----------------------------------------
    Debug Variable Output
---------------------------------------- */
/**
 * This mixin will set a before tag on
 * it's parent element and display the
 * the contents of variable within.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include debug-output($global-colors);
 * }
 */
/* ----------------------------------------
    Debug Selector
---------------------------------------- */
/**
 * This mixin will set a before tag on
 * it's parent element and display the
 * name of the selector.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include debug-selector;
 * }
 */
/* ----------------------------------------
    Debug Example
---------------------------------------- */
/**
 * This mixin will set a before tag on
 * the first element within it's parent.
 * Used to get going styling all UI
 * components in the example page.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include debug-example();
 * }
 */
/* ----------------------------------------
    Debug Responsive Values
---------------------------------------- */
/**
 * This mixin will set a before tag on
 * it's parent and show the value of the
 * available breakpoints depending on
 * the current viewport for debugging
 * purposes.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include debug-responsive();
 * }
 */
/* ----------------------------------------
    Clearfix
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *     @include grid-clearfix;
 * }
 */
/* ----------------------------------------
    Fetch Color
---------------------------------------- */
/**
 * This mixin is used to fetch a particular
 * color of the global configured map.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include branding(background, primary, default);
 * }
 *
 * OUTPUT
 *
 * .demo-class-blue {
 *    background: #000
 * }
 */
/* ----------------------------------------
    Fetch Shorthand
---------------------------------------- */
/**
 * This shorthand will fetch a color for
 * a given key from the primary color values.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include primary(dark);
 * }
 *
 * OUTPUT
 *
 * .demo-class-blue {
 *    background: #000
 * }
 */
/* ----------------------------------------
    Color Combinations
---------------------------------------- */
/**
 * This mixin will use the root element
 * as a prefix for every color available
 * within a combination. Check the config
 * folder for the color combinations.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include color-combinations;
 * }
 *
 * OUTPUT
 *
 * .demo-class-blue {
 *    background: blue;
 *    color: black;
 * }
 */
/* ----------------------------------------
    Fetch Combination
---------------------------------------- */
/**
 * This mixin will return a contrasting
 * color based on a given background color.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include combi(banana);
 * }
 */
/* ----------------------------------------
    Contrast Color
---------------------------------------- */
/**
 * This mixin will return a contrasting
 * color based on a given background color.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include contrast(#000);
 * }
 */
/* ----------------------------------------
    Contrast Color B/W
---------------------------------------- */
/**
 * This mixin will return a contrasting
 * black or white color based on a given
 * background color.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include contrast(#000);
 * }
 */
/* ----------------------------------------
    SVG Fill
---------------------------------------- */
/**
 * This mixin will fill a svg, you can
 * still tweak the values as content of
 * the mixin.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include svg(color('black'));
 * }
 */
/* ----------------------------------------
    Font Styles
---------------------------------------- */
/**
 * This mixin will return all key value
 * pairs that are associated with a map
 * of font related styling.
 *
 * @type            { string }  the selected style
 * @font-map        { map }     default selected $global-text from config/fonts
 * @returns         { string }  all key value pairs
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include font(default);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    font-size: 1em;
 *    color: #000;
 * }
 */
/* ----------------------------------------
    Font Value
---------------------------------------- */
/**
 * This mixin will return all specific key value
 * pair that are associated with a map of font
 * related styling.
 *
 * @type            { string }  the related type of style
 * @prop            { string }  selected css property
 * @font-map        { map }     default selected $text from config/fonts
 * @returns         { string }  key value pair
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include font(default, font-weight);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    font-weight: 700;
 * }
 */
/* ----------------------------------------
    Font Exclude
---------------------------------------- */
/**
 * This mixin will return all specific key value
 * pair that are associated with a map and exclude
 * given properties.
 *
 * @type            { string }
 * @excl            { string }
 * @font-map        { map }
 * @returns         { string }  key value pair
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include font-exclude(default, font-weight);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    font-size: 1em;
 *    line-height: 1.5em;
 * }
 */
/* ----------------------------------------
    Font Face
---------------------------------------- */
/**
 * This mixin will set a custom font
 * face given given values.
 *
 * @author          Jonathan Neal
 * @link            https://github.com/jonathantneal
 *
 * @name            { string } name of the font
 * @file            { string } name of the file
 * @weight          { string } font-weight
 * @style           { string } font-style
 * @exts            { string } format
 * @returns         { string } complete font-face
 */
/* ----------------------------------------
    Font Smoothing
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include font-smoothing(antialiased);
 * }
 */
/* ----------------------------------------
    Font Heading
---------------------------------------- */
/**
 * This mixin will return all specific key value
 * pair that are associated with a map of font
 * related styling.
 *
 * @param start     { number }
 * @param end       { number }
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include header(1,3){
 *      @include font-size(20px);
 *    }
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    h1, h2, h3 {
 *      font-size 1.5em;
 *    }
 * }
 */
/* ----------------------------------------
    Font Size
---------------------------------------- */
/**
 * This mixin will take a number or px value
 * and calculate the em value.
 *
 * @param size      { number/value }
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include font-size(16px);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    font-size 1em
 * }
 */
/* ----------------------------------------
    Line Height
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include line-height(16px);
 * }
 */
/* ----------------------------------------
    Letter Spacing
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include letter-spacing(1px);
 * }
 */
/* ----------------------------------------
    Line Break
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include line-break;
 * }
 */
/* ----------------------------------------
    Line Clamp
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include line-clamp(5);
 * }
 */
/* ----------------------------------------
    Ellipsis
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include ellipsis(100%);
 * }
 */
/* ----------------------------------------
    Root
---------------------------------------- */
/* ----------------------------------------
    Placeholder
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include placeholder {
 *      @include font-size(14px);
 *      color: red;
 *    }
 * }
 */
/* ----------------------------------------
    Align Items
---------------------------------------- */
/**
 * Can be useful to declare distance in-between
 * items within a grid structure. Specify the
 * amount of items within a row to set a
 * margin between the rows.
 */
/* ----------------------------------------
    Flex container
---------------------------------------- */
/**
 * This mixin is used to add flex grid
 * It takes a map with columns and gutter as input
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include flex-container($grid-main);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    display: flex;
 *    flex-wrap: wrap;
 *    margin-left: -2rem;
 * }
 */
/* ----------------------------------------
    Flex column
---------------------------------------- */
/**
 * This mixin is used to create a flex column
 * It takes how many columns it should take and the grid setting.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include flex-column(2, $grid-main, .demo-class--flat);
 * }
 *
 * OUTPUT
 *
 * .demo-class {
 *    width: 100%;
 *    max-width: calc(50% - 2rem);
 *    margin-left: 2rem;
 * }
 *
 * .demo-class:nth-child(n+3):not(.demo-class--flat) {
 *    margin-top: 2rem;
 * }
 */
/* ----------------------------------------
    Breakpoints
---------------------------------------- */
/**
 * This mixin will set media queries based
 * on selected parameters.
 *
 * @requires viewport   { string/list }
 * @params type         { string } min or max default: max
 * @params orientation  { string } landscape or portrait
 * @params screen       { string } default: screen
 * @params breakpoints  { map } default: $global-breakpoints
 *
 * EXAMPLE
 *
 * .demo-class {
 *    padding: 20px;
 *
 *    @include mq(phone tablet) {
 *      padding: 30px;
 *    }
 *
 *    @include mq(tablet, 'min') {
 *      padding: 40px;
 *    }
 *
 *    @include mq(phone tablet, 'max', landscape) {
 *      padding: 30px;
 *    }
 * }
 *
 * OUTPUT
 *
 * @media screen and (min-width: 420px) and (max-width: 959px) {
 *   .demo-class {
 *     padding: 30px; }
 *   }
 * }
 *
 * @media screen and (min-width: 960px) {
 *   .demo-class {
 *     padding: 40px; }
 *   }
 * }
 *
 * @media screen and (min-width: 420px) and (max-width: 959px) and (orientation: landscape) {
 *   .demo-class {
 *     padding: 30px; }
 *   }
 * }
 */
/* ----------------------------------------
    Aspect Ratio
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @include aspect-ratio(16,9);
 * }
 */
/* ----------------------------------------
     Theme Styling
---------------------------------------- */
/**
 * This function will output content if
 * a given string is equal to the current
 * theme. The $theme variable is created
 * within the sass-loader of the webpack
 * file an can be tweaked within this
 * configuration.
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @include theme('design') {
 *       background: color('pink');
 *    }
 *
 *    @include theme('digital') {
 *       background: color('blue');
 *    }
 * }
 */
/* ----------------------------------------
    Classes
---------------------------------------- */
/* ----------------------------------------
    Absolute Middle
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @extend %abs-middle-content;
 * }
 */
.style-container .vv-letter-card__overlay, .style-container .vv-color-card__overlay, .lightbox img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%); }

/* ----------------------------------------
    Middle
---------------------------------------- */
/**
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @extend %middle-content;
 * }
 *
 */
/* ----------------------------------------
    Cover Image
---------------------------------------- */
/**
 *
 * EXAMPLE
 *
 * .demo-class
 *    @extend %cover-img;
 * }
 *
 */
.image__cover {
  width: auto;
  min-width: 101%;
  height: 100%;
  max-height: auto;
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  display: block;
  object-fit: cover;
  transform: translate(-50%, -50%); }

/* ----------------------------------------
    Full Screen
---------------------------------------- */
/**
 *
 * EXAMPLE
 *
 * .demo-class {
 *    @extend %fullscreen;
 * }
 *
 */
/* ----------------------------------------
    Overlay
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @extend %overlay;
 * }
 */
/* ----------------------------------------
    Video Player
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @extend %player;
 * }
 */
/* ----------------------------------------
    Spacer
---------------------------------------- */
/**
 * EXAMPLE
 *
 * .demo-class {
 *    @extend .padding-width-20;
 * }
 */
/* ----------------------------------------
    Create Spacers
---------------------------------------- */
/* ----------------------------------------
    Animations
---------------------------------------- */
/* ----------------------------------------
    Fade Animation
---------------------------------------- */
/**
 * Example usage
 *
 * .demo-class {
 *    animation: fade-in 0.75s ease-in-out;
 *    animation-iteration-count: 1;
 *    animation-fill-mode: forwards;
 * }
 *
 */
@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/* ----------------------------------------
    Pop Animation
---------------------------------------- */
/**
 * Example usage
 *
 * .demo-class {
 *    animation: pop 0.75s ease-in-out;
 *    animation-iteration-count: 1;
 *    animation-fill-mode: forwards;
 * }
 *
 */
@keyframes pop-in {
  0% {
    transform: scale(0); }
  40% {
    transform: scale(1.1); }
  65% {
    transform: scale(0.95); }
  80% {
    transform: scale(1.025); }
  100% {
    transform: scale(1); } }

@keyframes pop-out {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(0); } }

/* ----------------------------------------
    Pulse Animation
---------------------------------------- */
/**
 * Example usage
 *
 * .demo-class {
 *    animation: pulse 1.75s ease-in-out;
 *    animation-iteration-count: infinite;
 * }
 *
 */
@keyframes pulse {
  0% {
    transform: translateY(-50%) scale(1); }
  50% {
    transform: translateY(-50%) scale(1.05); }
  90%, 100% {
    transform: translateY(-50%) scale(1); } }

/* ----------------------------------------
    Skew Animation
---------------------------------------- */
/**
 * Example usage
 *
 * .demo-class {
 *    animation: skew 0.75s ease-in-out;
 *    animation-iteration-count: 1;
 *    animation-fill-mode: forwards;
 * }
 *
 */
@keyframes skew {
  0% {
    transform: skewX(0deg); }
  100% {
    transform: skewX(-10deg); } }

/* ----------------------------------------
    Turn Animation
---------------------------------------- */
/**
 * Example usage
 *
 * .demo-class {
 *    animation: spin 0.75s ease-in-out;
 *    animation-iteration-count: 1;
 *    animation-fill-mode: forwards;
 * }
 *
 */
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes anti-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-360deg); } }

/* ----------------------------------------
    Generators
---------------------------------------- */
/* ----------------------------------------
    Branding Colors
---------------------------------------- */
/**
 * This map includes all main colors
 * that will be used within the project.
 */
/* ----------------------------------------
    Branding Combinations
---------------------------------------- */
/**
 * I case you wan't to use specific color
 * combinations, you can add these to this
 * multi dimensional map. These should
 * always consist of a background and
 * color combination.
 */
/* ----------------------------------------
    Branding Values
---------------------------------------- */
/**
 * Cluster brand variables within this map
 * with custom names. Comes in handy if you
 * have specific names for certain color
 * values. Use map-fetch function to get the
 * value of particular map, there are also
 * some shorthand mixins to include colors.
 */
/* ----------------------------------------
    Export Colors JS
---------------------------------------- */

/* ----------------------------------------
    Color Classes
---------------------------------------- */
/**
 * This loop will generate color classes
 * looking for the available primary
 * selected colors.
 */
/* ----------------------------------------
    Color Combination Classes
---------------------------------------- */
/**
 * This loop will generate combination
 * classes looking for the available
 * combinations as declared inside the
 * color configuration.
 */
/* ----------------------------------------
    Font Face
---------------------------------------- */
/* ----------------------------------------
    Font Variables
---------------------------------------- */
/* ----------------------------------------
    Text Styles
---------------------------------------- */
/**
 * This sections specifies some of the
 * core font styling. You can declare
 * new maps inside this global variable
 * for use with the font mixin.
 */
/* ----------------------------------------
    Text Weight
---------------------------------------- */
/**
 * This sections specifies the weights of
 * the fonts that are used in numbers.
 */
/* ----------------------------------------
    Export Fonts JS
---------------------------------------- */

/* ----------------------------------------
    Font Classes
---------------------------------------- */
/**
 * This loop will generate color classes
 * looking for the available primary
 * selected colors.
 */
/* ----------------------------------------
    Breakpoints
---------------------------------------- */
/**
 * These breakpoints can be used within
 * the media query mixin. Feel free to
 * tweak or declare new values within
 * this map, the mixin will automatically
 * include them as an option.
 */
/* ----------------------------------------
    Hidden & Visible
---------------------------------------- */
@media screen and (min-width: 0) and (max-width: 419px) {
  .hidden--phone {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 559px) {
  .hidden--phone-wide {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 639px) {
  .hidden--phablet {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 767px) {
  .hidden--tablet-small {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 959px) {
  .hidden--tablet {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1079px) {
  .hidden--tablet-wide {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1279px) {
  .hidden--desktop {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1439px) {
  .hidden--desktop-wide {
    display: none; } }

.visible {
  display: none; }
  @media screen and (min-width: 0) and (max-width: 419px) {
    .visible--phone {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 559px) {
    .visible--phone-wide {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 639px) {
    .visible--phablet {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 767px) {
    .visible--tablet-small {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 959px) {
    .visible--tablet {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1079px) {
    .visible--tablet-wide {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1279px) {
    .visible--desktop {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1439px) {
    .visible--desktop-wide {
      display: block; } }

/* ----------------------------------------
    Export Breakpoints JS
---------------------------------------- */

/* ----------------------------------------
    Hidden & Visible
---------------------------------------- */
/**
 * These classes can be added within the
 * DOM to make an element either visible
 * or hidden within a certain view.
 */
/* ----------------------------------------
    Config Files
---------------------------------------- */
/* ----------------------------------------
    Config Files
---------------------------------------- */
/* ----------------------------------------
    Paths
---------------------------------------- */
/**
 * Sometimes u might need to configure
 * a certain path or location, this is
 * the place to go!
 */
/* ----------------------------------------
    Breakpoints
---------------------------------------- */
/**
 * These breakpoints can be used within
 * the media query mixin. Feel free to
 * tweak or declare new values within
 * this map, the mixin will automatically
 * include them as an option.
 */
/* ----------------------------------------
    Hidden & Visible
---------------------------------------- */
@media screen and (min-width: 0) and (max-width: 419px) {
  .hidden--phone {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 559px) {
  .hidden--phone-wide {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 639px) {
  .hidden--phablet {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 767px) {
  .hidden--tablet-small {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 959px) {
  .hidden--tablet {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1079px) {
  .hidden--tablet-wide {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1279px) {
  .hidden--desktop {
    display: none; } }

@media screen and (min-width: 0) and (max-width: 1439px) {
  .hidden--desktop-wide {
    display: none; } }

.visible {
  display: none; }
  @media screen and (min-width: 0) and (max-width: 419px) {
    .visible--phone {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 559px) {
    .visible--phone-wide {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 639px) {
    .visible--phablet {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 767px) {
    .visible--tablet-small {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 959px) {
    .visible--tablet {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1079px) {
    .visible--tablet-wide {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1279px) {
    .visible--desktop {
      display: block; } }
  @media screen and (min-width: 0) and (max-width: 1439px) {
    .visible--desktop-wide {
      display: block; } }

/* ----------------------------------------
    Export Breakpoints JS
---------------------------------------- */

/* ----------------------------------------
    Branding Colors
---------------------------------------- */
/**
 * This map includes all main colors
 * that will be used within the project.
 */
/* ----------------------------------------
    Branding Combinations
---------------------------------------- */
/**
 * I case you wan't to use specific color
 * combinations, you can add these to this
 * multi dimensional map. These should
 * always consist of a background and
 * color combination.
 */
/* ----------------------------------------
    Branding Values
---------------------------------------- */
/**
 * Cluster brand variables within this map
 * with custom names. Comes in handy if you
 * have specific names for certain color
 * values. Use map-fetch function to get the
 * value of particular map, there are also
 * some shorthand mixins to include colors.
 */
/* ----------------------------------------
    Export Colors JS
---------------------------------------- */

/* ----------------------------------------
    Font Face
---------------------------------------- */
/* ----------------------------------------
    Font Variables
---------------------------------------- */
/* ----------------------------------------
    Text Styles
---------------------------------------- */
/**
 * This sections specifies some of the
 * core font styling. You can declare
 * new maps inside this global variable
 * for use with the font mixin.
 */
/* ----------------------------------------
    Text Weight
---------------------------------------- */
/**
 * This sections specifies the weights of
 * the fonts that are used in numbers.
 */
/* ----------------------------------------
    Export Fonts JS
---------------------------------------- */

/* ----------------------------------------
    Grid
---------------------------------------- */
/**
 * We use the Bourbon Neat grid as a
 * default for every project. Use the
 * query function to determine a
 * certain breakpojnt. Tweak the
 * values if needed.
 */
/* ----------------------------------------
    Icons
---------------------------------------- */
/**
 * Configure (file) names of certain icons
 * to generate new classes within loops.
 */
/* ----------------------------------------
    Export Icons JS
---------------------------------------- */

/* ----------------------------------------
    Development Helpers
---------------------------------------- */
/* ----------------------------------------
    Helpers
---------------------------------------- */
/* ----------------------------------------
    Style Guide Styling
---------------------------------------- */
/**
 * This file contains some styling that
 * is used for displaying the automated
 * style guide. This will be displayed
 * as a default when you open the project.
 * Exclude this file in production.
 */
/* ----------------------------------------
      Style Guide
  ---------------------------------------- */
.style-container {
  font-weight: 100;
  /* ----------------------------------------
        Style Snippet
    ---------------------------------------- */
  /* ----------------------------------------
        Style Block
    ---------------------------------------- */
  /* ----------------------------------------
        Font Logo
    ---------------------------------------- */
  /* ----------------------------------------
        Font Preview
    ---------------------------------------- */
  /* ----------------------------------------
        Text Preview
    ---------------------------------------- */
  /* ----------------------------------------
        Breakpoint Card
    ---------------------------------------- */
  /* ----------------------------------------
        Font Card
    ---------------------------------------- */
  /* ----------------------------------------
        Letter Card
    ---------------------------------------- */
  /* ----------------------------------------
        Color Card
    ---------------------------------------- */
  /* ----------------------------------------
        Heading Card
    ---------------------------------------- */
  /* ----------------------------------------
        Text Card
    ---------------------------------------- */
  /* ----------------------------------------
        Button Card
    ---------------------------------------- */
  /* ----------------------------------------
        Link Card
    ---------------------------------------- */
  /* ----------------------------------------
        Icon Card
    ---------------------------------------- */
  /* ----------------------------------------
        Flex
    ---------------------------------------- */ }
  .style-container strong,
  .style-container b {
    font-weight: 400; }
  .style-container hr {
    margin-top: 3rem; }
    .style-container hr:last-of-type {
      display: 0; }
  .style-container .js-copy-template {
    cursor: pointer; }
  .style-container [class*='__snippet'] {
    font-family: Roboto, monospace;
    font-size: 0.75em;
    font-style: normal;
    font-size: 10px;
    font-size: 0.625em;
    color: rgba(24, 23, 22, 0.4); }
  .style-container .vv-style-block {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: block;
    overflow: visible;
    /* nested */ }
    .style-container .vv-style-block:last-of-type {
      margin-bottom: 5rem; }
    .style-container .vv-style-block--center {
      width: 100%;
      margin: 0 auto;
      display: block;
      max-width: 1200px; }
    .style-container .vv-style-block--combi {
      margin-top: 4rem;
      background: #341D88;
      color: #FFB3BD; }
      .style-container .vv-style-block--combi [class*='__snippet'] {
        color: rgba(255, 255, 255, 0.25); }
    .style-container .vv-style-block--contain {
      border-top: 1px solid rgba(24, 23, 22, 0.1);
      border-bottom: 1px solid rgba(24, 23, 22, 0.1); }
      .style-container .vv-style-block--contain + .style-container .vv-style-block--contain {
        margin-top: 0; }
    .style-container .vv-style-block--lucky {
      margin: 2rem 0;
      padding: 2rem 0 2rem 0;
      background: #FFB3BD;
      color: #341D88; }
      .style-container .vv-style-block--lucky .vv-style-block__title,
      .style-container .vv-style-block--lucky .vv-style-block__text,
      .style-container .vv-style-block--lucky [class*='__snippet'] {
        color: #FFFFFF; }
      .style-container .vv-style-block--lucky [class*='-card'] {
        border-color: rgba(255, 255, 255, 0.25); }
      .style-container .vv-style-block--lucky + .vv-style-block--contain {
        margin-top: -2rem; }
    .style-container .vv-style-block--full {
      min-height: 100vh;
      margin-top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden; }
    .style-container .vv-style-block__head {
      padding-top: 3rem; }
      .style-container .vv-style-block__head + .vv-style-block > .vv-style-block__inner {
        padding-top: 10px; }
      .style-container .vv-style-block__head + .vv-style-block--contain {
        border-top: 0; }
    .style-container .vv-style-block__info {
      width: 100%;
      max-width: calc(100% - 3rem);
      margin-left: 3rem;
      margin-bottom: 2rem;
      margin-left: 0;
      padding-right: 2rem;
      /* responsive */ }
      .style-container .vv-style-block__info:nth-child(n+2) {
        margin-top: 3rem; }
      @media screen and (min-width: 960px) {
        .style-container .vv-style-block__info {
          width: 100%;
          max-width: calc(25% - 3rem);
          margin-left: 3rem;
          margin-bottom: 0;
          margin-left: 0; }
          .style-container .vv-style-block__info:nth-child(n+5) {
            margin-top: 3rem; } }
    .style-container .vv-style-block__content {
      width: 100%;
      max-width: calc(75% - 3rem);
      margin-left: 3rem;
      margin-left: 20px;
      overflow: visible;
      /* responsive */ }
      .style-container .vv-style-block__content:nth-child(n+2.33333) {
        margin-top: 3rem; }
      @media screen and (min-width: 0) and (max-width: 959px) {
        .style-container .vv-style-block__content {
          width: 100%;
          max-width: calc(100% - 3rem);
          margin-left: 3rem;
          width: 100%;
          margin-left: 0;
          margin-right: 0; }
          .style-container .vv-style-block__content:nth-child(n+2) {
            margin-top: 3rem; } }
    .style-container .vv-style-block__inner {
      padding: 2rem 3rem 2rem 3rem;
      /* responsive */ }
      @media screen and (min-width: 0) and (max-width: 959px) {
        .style-container .vv-style-block__inner {
          padding: 1rem 1.75rem 1rem 1.75rem; } }
      .style-container .vv-style-block__inner--compact {
        padding: 1.5rem 3rem 1.5rem 3rem;
        padding-bottom: 0;
        /* responsive */ }
        @media screen and (min-width: 0) and (max-width: 959px) {
          .style-container .vv-style-block__inner--compact {
            padding: 1rem 1.75rem 1rem 1.75rem; } }
      .style-container .vv-style-block__inner--large {
        padding: 5rem 3rem 5rem 3rem; }
    .style-container .vv-style-block__title {
      text-transform: capitalize; }
    .style-container .vv-style-block__top {
      font-size: 40px;
      font-size: 2.5em; }
  .style-container .vv-logo {
    width: 100%;
    margin: 0 auto;
    display: block;
    width: 60%; }
  .style-container .vv-font-preview {
    width: 175%;
    font-size: 150px;
    font-size: 9.375em;
    line-height: 1em; }
  .style-container .vv-text-preview {
    position: relative;
    overflow: visible; }
    .style-container .vv-text-preview__snippet {
      width: 50px;
      height: 0;
      margin: 0;
      padding: 0;
      text-align: right;
      position: absolute;
      transform: translate(-150%, 0.5em); }
  .style-container .vv-breakpoint-card {
    padding: 0 1rem;
    /* repsonsive */ }
    @media screen and (min-width: 0) and (max-width: 959px) {
      .style-container .vv-breakpoint-card {
        padding: 0; } }
    .style-container .vv-breakpoint-card__row {
      width: 100%;
      padding: 0.5em 0;
      border-bottom: 1px solid rgba(24, 23, 22, 0.1);
      display: table; }
      .style-container .vv-breakpoint-card__row:last-of-type {
        border-bottom: 0; }
    .style-container .vv-breakpoint-card__snippet, .style-container .vv-breakpoint-card__title, .style-container .vv-breakpoint-card__text {
      width: 33.33%;
      display: table-cell;
      vertical-align: middle; }
    .style-container .vv-breakpoint-card__text {
      text-align: right; }
    .style-container .vv-breakpoint-card__snippet {
      text-align: right; }
  .style-container .vv-grid {
    height: 20px;
    border: 1px solid rgba(24, 23, 22, 0.25);
    border-bottom: 0; }
    .style-container .vv-grid__snippet {
      width: 100% !important;
      margin-top: 1rem;
      padding-bottom: 0.25rem;
      clear: both; }
  .style-container .vv-font-card {
    width: calc(33.33% - 2rem);
    margin: 0 1rem 2rem;
    border: 1px solid rgba(24, 23, 22, 0.1);
    transition: box-shadow 0.25s ease;
    /* repsonsive */ }
    @media screen and (min-width: 0) and (max-width: 959px) {
      .style-container .vv-font-card {
        width: 100%;
        margin: 0 0 2rem;
        padding: 0; } }
    .style-container .vv-font-card__info {
      padding: 0.5rem 1rem 0.5rem 1rem; }
    .style-container .vv-font-card__preview {
      padding: 1rem 1.5rem 1rem 1.5rem;
      border-bottom: 1px solid rgba(24, 23, 22, 0.1);
      font-size: 100px;
      font-size: 6.25em;
      font-weight: 400;
      text-align: center; }
  .style-container .vv-letter-card {
    width: calc(100% - 2rem);
    margin-bottom: 2rem;
    border: 1px solid rgba(24, 23, 22, 0.1);
    display: flex;
    /* repsonsive */ }
    @media screen and (min-width: 0) and (max-width: 959px) {
      .style-container .vv-letter-card {
        width: 100%;
        margin: 0 0 2rem;
        font-size: 10px;
        font-size: 0.625em; } }
    .style-container .vv-letter-card__overlay {
      text-align: center; }
    .style-container .vv-letter-card__preview {
      width: 75%;
      padding: 1rem 1.5rem 1rem 1.5rem; }
    .style-container .vv-letter-card__text {
      font-size: 24px;
      font-size: 1.5em;
      line-height: 1.5em;
      word-wrap: break-word; }
    .style-container .vv-letter-card__thumb {
      width: 25%;
      height: 160px;
      padding: 1rem 1.5rem 1rem 1.5rem;
      border-right: 1px solid rgba(24, 23, 22, 0.1);
      font-size: 76px;
      font-size: 4.75em;
      position: relative;
      /* responsive */ }
      @media screen and (min-width: 0) and (max-width: 959px) {
        .style-container .vv-letter-card__thumb {
          width: 100%;
          max-width: calc(100% - 3rem);
          margin-left: 3rem;
          padding: 0 0;
          width: 100%;
          margin-left: 0;
          border-bottom: 1px solid rgba(24, 23, 22, 0.1);
          border-right: 0; }
          .style-container .vv-letter-card__thumb:nth-child(n+2) {
            margin-top: 3rem; } }
  .style-container .vv-color-card {
    width: calc(33.33% - 2rem);
    margin: 0 1rem 2rem;
    border: 1px solid rgba(24, 23, 22, 0.1);
    transition: box-shadow 0.25s ease;
    /* state */
    /* responsive */ }
    .style-container .vv-color-card:hover {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }
    @media screen and (min-width: 0) and (max-width: 959px) {
      .style-container .vv-color-card {
        width: 100%;
        margin: 0 0 2rem;
        padding: 0; } }
    .style-container .vv-color-card__info {
      padding: 0.5rem 1rem 0.5rem 1rem; }
    .style-container .vv-color-card__name {
      font-size: 14px;
      font-size: 0.875em;
      font-weight: 400;
      text-transform: uppercase; }
    .style-container .vv-color-card__overlay {
      font-size: 20px;
      font-size: 1.25em;
      text-align: center; }
    .style-container .vv-color-card__preview {
      height: 0;
      padding-bottom: 50%;
      border-bottom: 1px solid rgba(24, 23, 22, 0.1);
      display: flex;
      position: relative; }
      .style-container .vv-color-card__preview--part {
        width: 25%;
        height: 0;
        padding-bottom: 50%; }
    .style-container .vv-color-card__snippet {
      margin-top: 0.25em; }
    .style-container .vv-color-card__value {
      font-size: 12px;
      font-size: 0.75em;
      color: #666666; }
  .style-container .vv-heading-card {
    width: 100%;
    margin-bottom: 1em;
    padding: 0 1em 1em;
    border-bottom: 1px solid rgba(24, 23, 22, 0.1);
    display: table;
    /* repsonsive */ }
    .style-container .vv-heading-card:last-of-type {
      border-bottom: 0; }
    @media screen and (min-width: 0) and (max-width: 959px) {
      .style-container .vv-heading-card {
        width: 100%;
        padding: 0 0 1em; } }
    .style-container .vv-heading-card__heading, .style-container .vv-heading-card__snippet {
      display: table-cell;
      vertical-align: middle; }
    .style-container .vv-heading-card__heading h1 {
      margin: 0; }
    .style-container .vv-heading-card__heading h2 {
      margin: 0; }
    .style-container .vv-heading-card__heading h3 {
      margin: 0; }
    .style-container .vv-heading-card__heading h4 {
      margin: 0; }
    .style-container .vv-heading-card__heading h5 {
      margin: 0; }
    .style-container .vv-heading-card__heading h6 {
      margin: 0; }
    .style-container .vv-heading-card__snippet {
      text-align: right; }
  .style-container .vv-text-card {
    margin: 0 1rem 2rem;
    padding: 2rem 2rem;
    border: 1px solid rgba(24, 23, 22, 0.1);
    /* responsive */ }
    .style-container .vv-text-card p {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 5;
      line-clamp: 5;
      -webkit-box-orient: vertical;
      box-orient: vertical; }
    @media screen and (min-width: 0) and (max-width: 959px) {
      .style-container .vv-text-card {
        margin: 0 0 2rem;
        padding: 1rem 1rem; } }
    .style-container .vv-text-card__info {
      margin: 0; }
    .style-container .vv-text-card__snippet {
      margin-left: 1rem;
      display: inline; }
  .style-container .vv-style {
    margin: 0; }
  .style-container .vv-button-card {
    width: 100%;
    margin-bottom: 1em;
    padding: 0 1em 1em;
    border-bottom: 1px solid rgba(24, 23, 22, 0.1);
    display: table;
    /* repsonsive */ }
    .style-container .vv-button-card:last-of-type {
      border-bottom: 0; }
    @media screen and (min-width: 0) and (max-width: 959px) {
      .style-container .vv-button-card {
        width: 100%;
        padding: 0 0 1em; } }
    .style-container .vv-button-card__snippet {
      text-align: right;
      display: table-cell;
      vertical-align: middle; }
  .style-container .vv-anchor-card {
    width: 100%;
    margin-bottom: 1em;
    padding: 0 1em 1em;
    border-bottom: 1px solid rgba(24, 23, 22, 0.1);
    display: table; }
    .style-container .vv-anchor-card:last-of-type {
      border-bottom: 0; }
    .style-container .vv-anchor-card__anchor, .style-container .vv-anchor-card__snippet {
      display: table-cell;
      vertical-align: middle; }
    .style-container .vv-anchor-card__snippet {
      text-align: right; }
  .style-container .vv-icon-card {
    width: calc(25% - 2rem);
    height: auto;
    margin: 0 1rem 2rem;
    border: 1px solid rgba(24, 23, 22, 0.1);
    text-align: center;
    float: left; }
    .style-container .vv-icon-card [class^='icon__'] {
      width: 3rem;
      height: 3rem; }
      .style-container .vv-icon-card [class^='icon__']:before {
        width: inherit;
        height: inherit;
        margin: 0; }
    .style-container .vv-icon-card__thumb {
      width: 100%;
      height: auto;
      padding: 2rem 2rem; }
    .style-container .vv-icon-card__info {
      padding: 0.5rem 0.5rem;
      border-top: 1px solid rgba(24, 23, 22, 0.1);
      text-align: center; }
  .style-container .vv-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; }

/* ----------------------------------------
    Theme Toggle
---------------------------------------- */
.theme-toggle {
  width: auto;
  border-radius: 2px;
  background: #181716;
  color: #FFFFFF;
  font-family: Roboto, monospace;
  font-size: 0.75em;
  font-style: normal;
  font-size: 12px !important;
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  display: block; }
  .theme-toggle__button {
    padding: 0.15rem 0.3rem 0.15rem 0.3rem;
    text-transform: uppercase;
    display: inline-block;
    cursor: pointer; }
    .theme-toggle__button + .theme-toggle__button {
      border-left: 1px solid rgba(24, 23, 22, 0.15); }

/* ----------------------------------------
    Layout
---------------------------------------- */
/* ----------------------------------------
    Base
---------------------------------------- */
body {
  width: 100%;
  font-family: "Visuelt", "Helvetica", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; }
  body.is-locked {
    height: 100%;
    overflow: hidden; }

div {
  box-sizing: border-box; }

/* ----------------------------------------
    Grid
---------------------------------------- */
.grid {
  /* responsive */ }
  @media screen and (min-width: 960px) {
    .grid {
      margin-left: -3rem;
      display: flex;
      flex-wrap: wrap; } }
  @media screen and (min-width: 0) and (max-width: 959px) {
    .grid {
      margin-left: -4%;
      display: flex;
      flex-wrap: wrap; } }
  @media screen and (min-width: 0) and (max-width: 639px) {
    .grid {
      margin-left: -6%;
      display: flex;
      flex-wrap: wrap; } }
  .grid:not(.grid--stretch) {
    align-items: flex-start; }
  .grid--stretch {
    align-items: stretch; }
  .grid__item--tiny {
    width: 100%;
    max-width: calc(16.66667% - 3rem);
    margin-left: 3rem; }
    .grid__item--tiny:nth-child(n+7):not(.grid__item--flat) {
      margin-top: 3rem; }
  .grid__item--small {
    width: 100%;
    max-width: calc(25% - 3rem);
    margin-left: 3rem; }
    .grid__item--small:nth-child(n+5):not(.grid__item--flat) {
      margin-top: 3rem; }
  .grid__item--medium {
    width: 100%;
    max-width: calc(33.33333% - 3rem);
    margin-left: 3rem; }
    .grid__item--medium:nth-child(n+4):not(.grid__item--flat) {
      margin-top: 3rem; }
  .grid__item--large {
    width: 100%;
    max-width: calc(50% - 3rem);
    margin-left: 3rem; }
    .grid__item--large:nth-child(n+3):not(.grid__item--flat) {
      margin-top: 3rem; }
  .grid__item--massive {
    width: 100%;
    max-width: calc(66.66667% - 3rem);
    margin-left: 3rem; }
    .grid__item--massive:nth-child(n+2.5):not(.grid__item--flat) {
      margin-top: 3rem; }
  .grid__item--full {
    width: 100%;
    max-width: calc(100% - 3rem);
    margin-left: 3rem; }
    .grid__item--full:nth-child(n+2):not(.grid__item--flat) {
      margin-top: 3rem; }
  .grid__item--tiny, .grid__item--small, .grid__item--medium, .grid__item--large {
    /* responsive */ }
    @media screen and (max-width: 960px) {
      .grid__item--tiny, .grid__item--small, .grid__item--medium, .grid__item--large {
        width: 100%;
        max-width: calc(50% - 4%);
        margin-left: 4%; }
        .grid__item--tiny:nth-child(n+3):not(.grid__item--flat), .grid__item--small:nth-child(n+3):not(.grid__item--flat), .grid__item--medium:nth-child(n+3):not(.grid__item--flat), .grid__item--large:nth-child(n+3):not(.grid__item--flat) {
          margin-top: 4%; } }
  .grid__item--massive, .grid__item--full {
    /* responsive */ }
    @media screen and (max-width: 960px) {
      .grid__item--massive, .grid__item--full {
        width: 100%;
        max-width: calc(100% - 4%);
        margin-left: 4%; }
        .grid__item--massive:nth-child(n+2):not(.grid__item--flat), .grid__item--full:nth-child(n+2):not(.grid__item--flat) {
          margin-top: 4%; } }
  .grid__item--tiny, .grid__item--small, .grid__item--medium, .grid__item--large, .grid__item--massive, .grid__item--full {
    /* responsive */ }
    @media screen and (max-width: 640px) {
      .grid__item--tiny, .grid__item--small, .grid__item--medium, .grid__item--large, .grid__item--massive, .grid__item--full {
        width: 100%;
        max-width: calc(100% - 6%);
        margin-left: 6%; }
        .grid__item--tiny:nth-child(n+2):not(.grid__item--flat), .grid__item--small:nth-child(n+2):not(.grid__item--flat), .grid__item--medium:nth-child(n+2):not(.grid__item--flat), .grid__item--large:nth-child(n+2):not(.grid__item--flat), .grid__item--massive:nth-child(n+2):not(.grid__item--flat), .grid__item--full:nth-child(n+2):not(.grid__item--flat) {
          margin-top: 6%; } }

/* ----------------------------------------
    Main
---------------------------------------- */
main {
  width: 100%;
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 1440px;
  overflow-x: hidden; }

.main__inner {
  padding: 2rem 2rem; }

/* ----------------------------------------
    Super Container
---------------------------------------- */
.super-container,
[class*='__container'] {
  width: 100%;
  width: 100%;
  margin: 0 auto;
  display: block; }

.super-container {
  max-width: 100%;
  overflow: hidden; }

/* ----------------------------------------
    Container
---------------------------------------- */
[class*='__container'] {
  max-width: calc(1280px + 8rem);
  padding: 2rem 4rem;
  /* responsive */ }
  [class*='__container'][class*='--overflow'] {
    overflow: hidden; }
  @media screen and (min-width: 0) and (max-width: 1279px) {
    [class*='__container'] {
      padding: 2rem; } }
  @media screen and (min-width: 0) and (max-width: 959px) {
    [class*='__container'] {
      padding: 4%; } }
  @media screen and (min-width: 0) and (max-width: 639px) {
    [class*='__container'] {
      padding: 6%; } }
  [class*='__container'][class$='--tiny'] {
    padding: 0 4rem;
    /* responsive */ }
    @media screen and (min-width: 0) and (max-width: 1279px) {
      [class*='__container'][class$='--tiny'] {
        padding: 0 2rem; } }
    @media screen and (min-width: 0) and (max-width: 959px) {
      [class*='__container'][class$='--tiny'] {
        padding: 0 4%; } }
    @media screen and (min-width: 0) and (max-width: 639px) {
      [class*='__container'][class$='--tiny'] {
        padding: 0 6%; } }
  [class*='__container'][class$='--small'] {
    padding: 1rem 4rem;
    /* responsive */ }
    @media screen and (min-width: 0) and (max-width: 1279px) {
      [class*='__container'][class$='--small'] {
        padding: 1rem 2rem; } }
    @media screen and (min-width: 0) and (max-width: 959px) {
      [class*='__container'][class$='--small'] {
        padding: 2% 4%; } }
    @media screen and (min-width: 0) and (max-width: 639px) {
      [class*='__container'][class$='--small'] {
        padding: 3% 6%; } }
  [class*='__container'][class$='--medium'] {
    padding: 3rem 4rem;
    /* responsive */ }
    @media screen and (min-width: 0) and (max-width: 1279px) {
      [class*='__container'][class$='--medium'] {
        padding: 4rem 2rem; } }
    @media screen and (min-width: 0) and (max-width: 959px) {
      [class*='__container'][class$='--medium'] {
        padding: 6% 4%; } }
    @media screen and (min-width: 0) and (max-width: 639px) {
      [class*='__container'][class$='--medium'] {
        padding: 6%; } }
  [class*='__container'][class$='--large'] {
    padding: 4rem;
    /* responsive */ }
    @media screen and (min-width: 0) and (max-width: 1279px) {
      [class*='__container'][class$='--large'] {
        padding: 4rem 2rem; } }
    @media screen and (min-width: 0) and (max-width: 959px) {
      [class*='__container'][class$='--large'] {
        padding: 6% 4%; } }
    @media screen and (min-width: 0) and (max-width: 639px) {
      [class*='__container'][class$='--large'] {
        padding: 6%; } }
  [class*='__container'][class$='--massive'] {
    padding: 6rem 4rem;
    /* responsive */ }
    @media screen and (min-width: 0) and (max-width: 1279px) {
      [class*='__container'][class$='--massive'] {
        padding: 4rem 2rem; } }
    @media screen and (min-width: 0) and (max-width: 959px) {
      [class*='__container'][class$='--massive'] {
        padding: 6% 4%; } }
    @media screen and (min-width: 0) and (max-width: 639px) {
      [class*='__container'][class$='--massive'] {
        padding: 6%; } }

/* ----------------------------------------
    Section
---------------------------------------- */
section {
  width: 100%;
  margin: 0 auto;
  display: block; }

.section__inner {
  padding: 2rem 2rem;
  width: 100%;
  margin: 0 auto;
  display: block; }

/* ----------------------------------------
    Selections
---------------------------------------- */
::selection {
  background: #341d88;
  color: #FFFFFF; }

/* ----------------------------------------
    Footer Base
---------------------------------------- */
/* ----------------------------------------
    Footer Core
---------------------------------------- */
.footer__inner {
  padding: 2rem 2rem; }

/* ----------------------------------------
    Footer
---------------------------------------- */
/* ----------------------------------------
    Footer Sub
---------------------------------------- */
/* ----------------------------------------
    Header Base
---------------------------------------- */
/* ----------------------------------------
    Header Core
---------------------------------------- */
.header__inner {
  padding: 2rem 2rem; }

/* ----------------------------------------
    Header Type
---------------------------------------- */
/* ----------------------------------------
    Menu Base
---------------------------------------- */
menu {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  display: block; }
  menu menuitem a {
    text-decoration: none; }
  menu ul {
    list-style-type: none; }
  menu li a {
    text-decoration: none; }

/* ----------------------------------------
    Main Menu
---------------------------------------- */
/* ----------------------------------------
    Sub Menu
---------------------------------------- */
/* ----------------------------------------
    Navigation Base
---------------------------------------- */
/* ----------------------------------------
    Navigation Core
---------------------------------------- */
.nav {
  padding: 2rem 2rem; }

/* ----------------------------------------
    Navigation
---------------------------------------- */
/* ----------------------------------------
    UI Elements
---------------------------------------- */
/* ----------------------------------------
    Anchor
---------------------------------------- */
a:not([class*='__link']) {
  text-decoration: underline;
  color: inherit;
  /* state */ }
  a:not([class*='__link']):active, a:not([class*='__link']):hover, a:not([class*='__link']):focus {
    color: #341D88; }

/* ----------------------------------------
    Anchor Blank
---------------------------------------- */
a:not([class*='__link']) [target='_blank'] {
  /* state */ }

/* ----------------------------------------
    Anchor Contact
---------------------------------------- */
[href^='tel'],
[href^='mailto'] {
  text-decoration: none !important;
  display: inline-block;
  float: left;
  clear: right; }
  [href^='tel']:before,
  [href^='mailto']:before {
    margin-right: 0.5em;
    font-size: 0.8em;
    font-weight: 400;
    line-height: inherit;
    color: #341D88; }

[href^='tel']:before {
  content: "Tel:";
  position: relative;
  display: inline; }

[href^='mailto']:before {
  content: "Mail:";
  position: relative;
  display: inline; }

/* ----------------------------------------
    Article Text
---------------------------------------- */
article h1 {
  margin: 0;
  padding: 0;
  color: inherit; }

article h2 {
  margin: 0;
  padding: 0;
  color: inherit; }

article h3 {
  margin: 0;
  padding: 0;
  color: inherit; }

article h4 {
  margin: 0;
  padding: 0;
  color: inherit; }

article h5 {
  margin: 0;
  padding: 0;
  color: inherit; }

article h6 {
  margin: 0;
  padding: 0;
  color: inherit; }

article h1 {
  font-size: 36px;
  font-size: 2.25em; }

article h2 {
  font-size: 32px;
  font-size: 2em; }

article h3 {
  font-size: 28px;
  font-size: 1.75em; }

article h4 {
  font-size: 24px;
  font-size: 1.5em; }

article h5 {
  font-size: 20px;
  font-size: 1.25em; }

article h6 {
  font-size: 18px;
  font-size: 1.125em; }

article blockquote {
  width: 100%;
  box-sizing: border-box; }

article p {
  margin: 1em 0; }
  article p:first-of-type {
    margin-top: 0; }
  article p:last-of-type {
    margin-bottom: 0; }
  article p a {
    text-decoration: underline;
    /* state */ }

/* ----------------------------------------
    Article Lists
---------------------------------------- */
article ul,
article ol {
  width: 100%;
  margin: 1.5em 0;
  padding: 0; }
  article ul li,
  article ol li {
    margin: 0.5em 0; }

article ul {
  list-style-type: none; }
  article ul li {
    padding-left: 15px;
    position: relative; }
    article ul li:before {
      content: "\25CF";
      position: relative;
      display: "inline";
      margin: 0 1.25em;
      font-size: 0.75em;
      color: inherit;
      position: absolute;
      top: 0.2em;
      left: -15px; }

article ol li {
  margin-left: 2.25em; }

article dl {
  width: 100%; }
  article dl dt {
    width: 20%;
    font-weight: 400;
    text-align: right;
    float: left;
    clear: left; }
    article dl dt:after {
      content: ":";
      position: relative;
      display: "inline"; }
  article dl dd {
    width: 80%;
    margin-left: calc(20% + 10px); }

/* ----------------------------------------
    Article Image
---------------------------------------- */
article img {
  max-width: 100%;
  height: auto; }

article svg * {
  fill: #341D88; }

/* ----------------------------------------
    Article Table
---------------------------------------- */
article table {
  width: 100%;
  border: 1px solid #341D88;
  border-radius: 3px;
  border-collapse: collapse;
  font-weight: inherit; }

article thead,
article caption {
  background: rgba(52, 29, 136, 0.05);
  font-weight: 400;
  color: #341D88; }

article thead + tbody tr:first-of-type {
  background: inherit;
  color: inherit; }

article tfoot {
  font-size: 0.75em; }
  article tfoot tr,
  article tfoot td {
    text-align: center; }
  article tfoot tr {
    background: inherit !important;
    color: inherit !important; }

article th,
article tr,
article td {
  padding: 0.5em 0.75em;
  text-align: left; }

article th,
article td {
  border-right: 1px solid #341D88; }
  article th:last-of-type,
  article td:last-of-type {
    border-right: 0; }

article th {
  font-weight: 700; }

article tr {
  border-bottom: 1px solid #341D88; }
  article tr:first-of-type {
    border-top: 1px solid #341D88;
    background: rgba(52, 29, 136, 0.05);
    color: #341D88; }

/* ----------------------------------------
    Buttons
---------------------------------------- */
.btn, .btn-solid--blue, .btn-solid--pink, .btn-solid--emerald, .btn-solid--black, .btn-solid--grey, .btn-solid--white, .btn-ghost--blue, .btn-ghost--pink, .btn-ghost--emerald, .btn-ghost--black, .btn-ghost--grey, .btn-ghost--white {
  margin: 0;
  padding: 0.8em 1.25em 1em;
  border-radius: 3px;
  font-size: 16px;
  font-size: 1em;
  line-height: 1em;
  text-decoration: none !important;
  text-align: center;
  color: #341D88;
  display: inline-block;
  box-sizing: border-box;
  outline: none;
  user-select: none;
  cursor: pointer; }

/* ----------------------------------------
    Button Size
---------------------------------------- */
.btn--small {
  font-size: 14px;
  font-size: 0.875em; }

.btn--large {
  font-size: 18px;
  font-size: 1.125em; }

.btn--wide {
  width: 100%; }

/* ----------------------------------------
    Button Solid
---------------------------------------- */
.btn-solid--blue, .btn-solid--pink, .btn-solid--emerald, .btn-solid--black, .btn-solid--grey, .btn-solid--white {
  /* state */ }

/* ----------------------------------------
    Button Ghost
---------------------------------------- */
.btn-ghost--blue, .btn-ghost--pink, .btn-ghost--emerald, .btn-ghost--black, .btn-ghost--grey, .btn-ghost--white {
  border: 2px solid currentColor;
  background-color: inherit;
  /* state */ }

/* ----------------------------------------
    Button Colors
---------------------------------------- */
.btn-solid--blue {
  background: #341d88;
  color: #c1b5ef;
  /* state */ }
  .btn-solid--blue:active, .btn-solid--blue:hover {
    background: #24145e; }

.btn-ghost--blue {
  color: #341D88;
  /* state */ }
  .btn-ghost--blue:active, .btn-ghost--blue:hover {
    background: #341d88;
    color: #c1b5ef;
    border-color: #341D88; }

.btn-solid--pink {
  background: #ffb3bd;
  color: #b30018;
  /* state */ }
  .btn-solid--pink:active, .btn-solid--pink:hover {
    background: #ff8091; }

.btn-ghost--pink {
  color: #FFB3BD;
  /* state */ }
  .btn-ghost--pink:active, .btn-ghost--pink:hover {
    background: #ffb3bd;
    color: #b30018;
    border-color: #FFB3BD; }

.btn-solid--emerald {
  background: #96fff5;
  color: #009688;
  /* state */ }
  .btn-solid--emerald:active, .btn-solid--emerald:hover {
    background: #63fff0; }

.btn-ghost--emerald {
  color: #96FFF5;
  /* state */ }
  .btn-ghost--emerald:active, .btn-ghost--emerald:hover {
    background: #96fff5;
    color: #009688;
    border-color: #96FFF5; }

.btn-solid--black {
  background: #181716;
  color: #9b9792;
  /* state */ }
  .btn-solid--black:active, .btn-solid--black:hover {
    background: black; }

.btn-ghost--black {
  color: #181716;
  /* state */ }
  .btn-ghost--black:active, .btn-ghost--black:hover {
    background: #181716;
    color: #9b9792;
    border-color: #181716; }

.btn-solid--grey {
  background: whitesmoke;
  color: #767676;
  /* state */ }
  .btn-solid--grey:active, .btn-solid--grey:hover {
    background: gainsboro; }

.btn-ghost--grey {
  color: #F5F5F5;
  /* state */ }
  .btn-ghost--grey:active, .btn-ghost--grey:hover {
    background: whitesmoke;
    color: #767676;
    border-color: #F5F5F5; }

.btn-solid--white {
  background: white;
  color: gray;
  /* state */ }
  .btn-solid--white:active, .btn-solid--white:hover {
    background: #e6e6e6; }

.btn-ghost--white {
  color: #FFFFFF;
  /* state */ }
  .btn-ghost--white:active, .btn-ghost--white:hover {
    background: white;
    color: gray;
    border-color: #FFFFFF; }

/* ----------------------------------------
    Export Buttons JS
---------------------------------------- */

/* ----------------------------------------
    Headings
---------------------------------------- */
h1 {
  margin: 0 0 0.25em;
  font-weight: 500; }

h2 {
  margin: 0 0 0.25em;
  font-weight: 500; }

h3 {
  margin: 0 0 0.25em;
  font-weight: 500; }

h4 {
  margin: 0 0 0.25em;
  font-weight: 500; }

h5 {
  margin: 0 0 0.25em;
  font-weight: 500; }

h6 {
  margin: 0 0 0.25em;
  font-weight: 500; }

h1 {
  font-size: 48px;
  font-size: 3em; }

h2 {
  font-size: 42px;
  font-size: 2.625em; }

h3 {
  font-size: 36px;
  font-size: 2.25em; }

h4 {
  font-size: 30px;
  font-size: 1.875em; }

h5 {
  font-size: 24px;
  font-size: 1.5em; }

h6 {
  font-size: 20px;
  font-size: 1.25em; }

/* ----------------------------------------
    Blockquote
---------------------------------------- */
blockquote {
  width: 75%; }
  blockquote p {
    font-size: 1.5em;
    line-height: 1em; }
    blockquote p:before {
      content: '"';
      margin-left: -0.5em; }
    blockquote p:after {
      content: '"'; }
  blockquote + cite {
    margin-top: 0.5em; }

/* ----------------------------------------
    Paragraphs
---------------------------------------- */
p {
  margin: 0;
  line-height: 1.5em; }
  p svg {
    width: auto;
    height: 0.8em;
    margin-right: 0.5em;
    padding: 0.1em 0;
    display: inline; }

b,
strong {
  font-weight: 700; }

u {
  text-decoration: underline; }

abbr,
acronym,
dfn,
cite,
em,
i {
  font-style: italic; }

/* ----------------------------------------
    Additional Tags
---------------------------------------- */
hr {
  width: 100%;
  height: 1px;
  border: 0;
  background: rgba(24, 23, 22, 0.25); }

sup,
sub {
  height: 0;
  font-size: 0.85em;
  line-height: 0;
  vertical-align: baseline; }

sup {
  bottom: 1ex; }

sub {
  top: 0.5ex; }

small {
  font-size: 0.75em;
  line-height: 1.5em; }

big {
  font-size: 1.25em;
  line-height: 1.5em; }

/* ----------------------------------------
    Form Base
---------------------------------------- */
form {
  width: 100%;
  margin: 0; }
  form * {
    box-sizing: border-box;
    outline: none; }

/* ----------------------------------------
    Form Core
---------------------------------------- */
.form__desc {
  margin-right: 1em;
  display: inline; }

.form__group {
  margin: 1.5em 0; }
  .form__group:first-of-type {
    margin-top: 0; }
  .form__group:last-of-type {
    margin-bottom: 0; }
  .form__group--chained {
    width: auto;
    margin: 0;
    display: inline-block; }

.form__option {
  /* state */ }
  .form__option + label {
    font-weight: 400;
    cursor: pointer; }
    .form__option + label:before {
      content: "";
      position: relative;
      display: inline-block;
      width: 0.8em;
      height: 0.8em;
      margin: -0.1em 0;
      margin-right: 0.5em;
      border: 1px solid rgba(24, 23, 22, 0.1);
      transition: background 0.25s ease; }
  .form__option:checked {
    /* stylelint-disable */
    /* stylelint-enable */ }
    .form__option:checked + label:before {
      background: #341D88; }

/* ----------------------------------------
    Fieldset
---------------------------------------- */
/* ----------------------------------------
    Label
---------------------------------------- */
label {
  width: auto;
  max-width: 100%; }
  label + input,
  label + textarea,
  label + select {
    margin-top: 0.25em; }

/* ----------------------------------------
    Input Base
---------------------------------------- */
input,
textarea,
select {
  width: 100%;
  padding: 1em;
  border-radius: 2px;
  font-weight: inherit; }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder {
    color: rgba(52, 29, 136, 0.5); }
  input:-moz-placeholder, textarea:-moz-placeholder, select:-moz-placeholder {
    color: rgba(52, 29, 136, 0.5); }
  input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
    color: rgba(52, 29, 136, 0.5); }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder {
    color: rgba(52, 29, 136, 0.5); }

/* ----------------------------------------
    Input Text
---------------------------------------- */
input[type='text'],
input[type='email'] {
  border: 1px solid rgba(24, 23, 22, 0.1);
  /* state */ }

/* ----------------------------------------
    Input Number
---------------------------------------- */
/* ----------------------------------------
    Input Search
---------------------------------------- */
input[type='search'] {
  border: 1px solid #181716;
  /* state */ }

/* ----------------------------------------
    Input Password
---------------------------------------- */
/* ----------------------------------------
    Input Textarea
---------------------------------------- */
textarea {
  height: 150px;
  border: 1px solid rgba(24, 23, 22, 0.1);
  line-height: inherit;
  resize: vertical;
  /* state */ }

/* ----------------------------------------
    Input Range
---------------------------------------- */
/* ----------------------------------------
    Input Checkbox
---------------------------------------- */
input[type='checkbox'] {
  display: none; }

/* ----------------------------------------
    Input Radio
---------------------------------------- */
input[type='radio'] {
  display: none; }
  input[type='radio'] + label:before {
    border-radius: 50%; }

/* ----------------------------------------
    Select
---------------------------------------- */
select {
  height: 3rem;
  border: 1px solid rgba(24, 23, 22, 0.1);
  background: #FFFFFF; }

/* ----------------------------------------
    Button
---------------------------------------- */
[type='submit'] {
  /* state */ }

button:disabled {
  opacity: 0.25;
  cursor: not-allowed; }

/* ----------------------------------------
    Frame Block
---------------------------------------- */
iframe[src*='apple.com'] {
  height: 340px !important; }

iframe[src*='spotify.com'] {
  height: 80px !important; }

iframe[src*='vimeo.com'], iframe[src*='youtube.com'] {
  height: 360px !important; }

/* ----------------------------------------
    Icons
---------------------------------------- */
[class^='icon__'] {
  width: 1.5em;
  height: 1.5em;
  margin: 0;
  padding: 0;
  display: inline-block; }
  [class^='icon__']:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0.25em;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat; }

/* ----------------------------------------
    Icon Sizes
---------------------------------------- */
.icon--small {
  font-size: 14px;
  font-size: 0.875em; }

.icon--large {
  font-size: 30px;
  font-size: 1.875em; }

/* ----------------------------------------
    Icon Group
---------------------------------------- */
.icon-group {
  text-align: left;
  display: block; }
  .icon-group a {
    position: relative;
    display: inline-block; }
    .icon-group a:first-of-type {
      margin-left: 0; }
    .icon-group a:last-of-type {
      margin-right: 0; }
    .icon-group a:nth-of-type(even) {
      margin: 0 0.75em; }
  .icon-group svg {
    width: auto;
    height: 1em;
    position: relative; }
    .icon-group svg * {
      fill: #FFFFFF; }

/* ----------------------------------------
    Icon Color
---------------------------------------- */
.icon__facebook--blue:before, .icon__facebook--pink:before, .icon__facebook--emerald:before, .icon__facebook--black:before, .icon__facebook--grey:before, .icon__facebook--white:before, .icon__instagram--blue:before, .icon__instagram--pink:before, .icon__instagram--emerald:before, .icon__instagram--black:before, .icon__instagram--grey:before, .icon__instagram--white:before, .icon__linkedin--blue:before, .icon__linkedin--pink:before, .icon__linkedin--emerald:before, .icon__linkedin--black:before, .icon__linkedin--grey:before, .icon__linkedin--white:before, .icon__twitter--blue:before, .icon__twitter--pink:before, .icon__twitter--emerald:before, .icon__twitter--black:before, .icon__twitter--grey:before, .icon__twitter--white:before, .icon__whatsapp--blue:before, .icon__whatsapp--pink:before, .icon__whatsapp--emerald:before, .icon__whatsapp--black:before, .icon__whatsapp--grey:before, .icon__whatsapp--white:before, .icon__youtube--blue:before, .icon__youtube--pink:before, .icon__youtube--emerald:before, .icon__youtube--black:before, .icon__youtube--grey:before, .icon__youtube--white:before {
  background-image: none;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat; }

/* ----------------------------------------
    Icon Classes
---------------------------------------- */
.icon__facebook:before {
  background-image: url("../.././assets/icons/facebook.svg"); }

.icon__facebook--blue:before {
  background-color: #341D88;
  -webkit-mask-image: url("../.././assets/icons/facebook.svg");
  mask-image: url("../.././assets/icons/facebook.svg"); }

.icon__facebook--pink:before {
  background-color: #FFB3BD;
  -webkit-mask-image: url("../.././assets/icons/facebook.svg");
  mask-image: url("../.././assets/icons/facebook.svg"); }

.icon__facebook--emerald:before {
  background-color: #96FFF5;
  -webkit-mask-image: url("../.././assets/icons/facebook.svg");
  mask-image: url("../.././assets/icons/facebook.svg"); }

.icon__facebook--black:before {
  background-color: #181716;
  -webkit-mask-image: url("../.././assets/icons/facebook.svg");
  mask-image: url("../.././assets/icons/facebook.svg"); }

.icon__facebook--grey:before {
  background-color: #F5F5F5;
  -webkit-mask-image: url("../.././assets/icons/facebook.svg");
  mask-image: url("../.././assets/icons/facebook.svg"); }

.icon__facebook--white:before {
  background-color: #FFFFFF;
  -webkit-mask-image: url("../.././assets/icons/facebook.svg");
  mask-image: url("../.././assets/icons/facebook.svg"); }

.icon__instagram:before {
  background-image: url("../.././assets/icons/instagram.svg"); }

.icon__instagram--blue:before {
  background-color: #341D88;
  -webkit-mask-image: url("../.././assets/icons/instagram.svg");
  mask-image: url("../.././assets/icons/instagram.svg"); }

.icon__instagram--pink:before {
  background-color: #FFB3BD;
  -webkit-mask-image: url("../.././assets/icons/instagram.svg");
  mask-image: url("../.././assets/icons/instagram.svg"); }

.icon__instagram--emerald:before {
  background-color: #96FFF5;
  -webkit-mask-image: url("../.././assets/icons/instagram.svg");
  mask-image: url("../.././assets/icons/instagram.svg"); }

.icon__instagram--black:before {
  background-color: #181716;
  -webkit-mask-image: url("../.././assets/icons/instagram.svg");
  mask-image: url("../.././assets/icons/instagram.svg"); }

.icon__instagram--grey:before {
  background-color: #F5F5F5;
  -webkit-mask-image: url("../.././assets/icons/instagram.svg");
  mask-image: url("../.././assets/icons/instagram.svg"); }

.icon__instagram--white:before {
  background-color: #FFFFFF;
  -webkit-mask-image: url("../.././assets/icons/instagram.svg");
  mask-image: url("../.././assets/icons/instagram.svg"); }

.icon__linkedin:before {
  background-image: url("../.././assets/icons/linkedin.svg"); }

.icon__linkedin--blue:before {
  background-color: #341D88;
  -webkit-mask-image: url("../.././assets/icons/linkedin.svg");
  mask-image: url("../.././assets/icons/linkedin.svg"); }

.icon__linkedin--pink:before {
  background-color: #FFB3BD;
  -webkit-mask-image: url("../.././assets/icons/linkedin.svg");
  mask-image: url("../.././assets/icons/linkedin.svg"); }

.icon__linkedin--emerald:before {
  background-color: #96FFF5;
  -webkit-mask-image: url("../.././assets/icons/linkedin.svg");
  mask-image: url("../.././assets/icons/linkedin.svg"); }

.icon__linkedin--black:before {
  background-color: #181716;
  -webkit-mask-image: url("../.././assets/icons/linkedin.svg");
  mask-image: url("../.././assets/icons/linkedin.svg"); }

.icon__linkedin--grey:before {
  background-color: #F5F5F5;
  -webkit-mask-image: url("../.././assets/icons/linkedin.svg");
  mask-image: url("../.././assets/icons/linkedin.svg"); }

.icon__linkedin--white:before {
  background-color: #FFFFFF;
  -webkit-mask-image: url("../.././assets/icons/linkedin.svg");
  mask-image: url("../.././assets/icons/linkedin.svg"); }

.icon__twitter:before {
  background-image: url("../.././assets/icons/twitter.svg"); }

.icon__twitter--blue:before {
  background-color: #341D88;
  -webkit-mask-image: url("../.././assets/icons/twitter.svg");
  mask-image: url("../.././assets/icons/twitter.svg"); }

.icon__twitter--pink:before {
  background-color: #FFB3BD;
  -webkit-mask-image: url("../.././assets/icons/twitter.svg");
  mask-image: url("../.././assets/icons/twitter.svg"); }

.icon__twitter--emerald:before {
  background-color: #96FFF5;
  -webkit-mask-image: url("../.././assets/icons/twitter.svg");
  mask-image: url("../.././assets/icons/twitter.svg"); }

.icon__twitter--black:before {
  background-color: #181716;
  -webkit-mask-image: url("../.././assets/icons/twitter.svg");
  mask-image: url("../.././assets/icons/twitter.svg"); }

.icon__twitter--grey:before {
  background-color: #F5F5F5;
  -webkit-mask-image: url("../.././assets/icons/twitter.svg");
  mask-image: url("../.././assets/icons/twitter.svg"); }

.icon__twitter--white:before {
  background-color: #FFFFFF;
  -webkit-mask-image: url("../.././assets/icons/twitter.svg");
  mask-image: url("../.././assets/icons/twitter.svg"); }

.icon__whatsapp:before {
  background-image: url("../.././assets/icons/whatsapp.svg"); }

.icon__whatsapp--blue:before {
  background-color: #341D88;
  -webkit-mask-image: url("../.././assets/icons/whatsapp.svg");
  mask-image: url("../.././assets/icons/whatsapp.svg"); }

.icon__whatsapp--pink:before {
  background-color: #FFB3BD;
  -webkit-mask-image: url("../.././assets/icons/whatsapp.svg");
  mask-image: url("../.././assets/icons/whatsapp.svg"); }

.icon__whatsapp--emerald:before {
  background-color: #96FFF5;
  -webkit-mask-image: url("../.././assets/icons/whatsapp.svg");
  mask-image: url("../.././assets/icons/whatsapp.svg"); }

.icon__whatsapp--black:before {
  background-color: #181716;
  -webkit-mask-image: url("../.././assets/icons/whatsapp.svg");
  mask-image: url("../.././assets/icons/whatsapp.svg"); }

.icon__whatsapp--grey:before {
  background-color: #F5F5F5;
  -webkit-mask-image: url("../.././assets/icons/whatsapp.svg");
  mask-image: url("../.././assets/icons/whatsapp.svg"); }

.icon__whatsapp--white:before {
  background-color: #FFFFFF;
  -webkit-mask-image: url("../.././assets/icons/whatsapp.svg");
  mask-image: url("../.././assets/icons/whatsapp.svg"); }

.icon__youtube:before {
  background-image: url("../.././assets/icons/youtube.svg"); }

.icon__youtube--blue:before {
  background-color: #341D88;
  -webkit-mask-image: url("../.././assets/icons/youtube.svg");
  mask-image: url("../.././assets/icons/youtube.svg"); }

.icon__youtube--pink:before {
  background-color: #FFB3BD;
  -webkit-mask-image: url("../.././assets/icons/youtube.svg");
  mask-image: url("../.././assets/icons/youtube.svg"); }

.icon__youtube--emerald:before {
  background-color: #96FFF5;
  -webkit-mask-image: url("../.././assets/icons/youtube.svg");
  mask-image: url("../.././assets/icons/youtube.svg"); }

.icon__youtube--black:before {
  background-color: #181716;
  -webkit-mask-image: url("../.././assets/icons/youtube.svg");
  mask-image: url("../.././assets/icons/youtube.svg"); }

.icon__youtube--grey:before {
  background-color: #F5F5F5;
  -webkit-mask-image: url("../.././assets/icons/youtube.svg");
  mask-image: url("../.././assets/icons/youtube.svg"); }

.icon__youtube--white:before {
  background-color: #FFFFFF;
  -webkit-mask-image: url("../.././assets/icons/youtube.svg");
  mask-image: url("../.././assets/icons/youtube.svg"); }

/* ----------------------------------------
    Image Base
---------------------------------------- */
figure {
  margin: 0; }

img[src=''] {
  display: none; }

/* ----------------------------------------
    Image Core
---------------------------------------- */
/* ----------------------------------------
    Image Cover
---------------------------------------- */
/* ----------------------------------------
    Lightbox
---------------------------------------- */
.lightbox {
  width: 100%;
  height: 100%;
  background: rgba(24, 23, 22, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  display: block;
  opacity: 0;
  transform: scale(1.05);
  cursor: pointer;
  /* responsive */ }
  .lightbox img {
    width: auto;
    max-width: 90%;
    height: auto;
    max-height: 90%; }
  @media screen and (min-width: 0) and (max-width: 639px) {
    .lightbox img {
      max-width: 100%; } }

/* ----------------------------------------
    Enlarge
---------------------------------------- */
.js-enlarge {
  cursor: pointer;
  transition: opacity 0.25s ease; }
  @media screen and (min-width: 1080px) {
    .js-enlarge:hover {
      opacity: 0.75; } }

/* ----------------------------------------
    Success
---------------------------------------- */
.success {
  color: #341D88; }

/* ----------------------------------------
    Warning
---------------------------------------- */
.error {
  color: #FF9753; }

/* ----------------------------------------
    Error
---------------------------------------- */
.error {
  color: #FF5353; }

/* ----------------------------------------
    Tooltip
---------------------------------------- */
.tooltip__holder {
  position: relative;
  display: inline-block;
  cursor: help;
  /* state */ }
  .tooltip__holder--inline {
    border-bottom: 1px dotted #341D88; }
  .tooltip__holder:hover .tooltip__content {
    opacity: 1; }

/* ----------------------------------------
    Tooltip
---------------------------------------- */
.tooltip__content {
  width: auto;
  height: 1.7em;
  padding: 0.25em 1em 1em;
  border-radius: 2rem;
  background: #341D88;
  text-align: center;
  white-space: pre;
  color: #FFFFFF;
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-block;
  float: left;
  opacity: 0;
  transform: translate(-50%, -150%);
  transition: opacity 0.15s ease;
  will-change: opacity; }
  .tooltip__content:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 0.75em 0.5em 0 0.5em;
    border-style: solid;
    border-color: #341D88 transparent transparent transparent;
    position: absolute;
    bottom: -0.7em;
    left: 50%;
    transform: translateX(-50%); }

/* ----------------------------------------
    Elements
---------------------------------------- */
/* ----------------------------------------
    Card
---------------------------------------- */
/* ----------------------------------------
    Features
---------------------------------------- */
/* ----------------------------------------
    Cookie Banner
---------------------------------------- */
.cc-window {
  padding: 1.5rem !important;
  /* responsive */ }
  @media screen and (min-width: 0) and (max-width: 767px) {
    .cc-window {
      padding: 6% !important; } }

.cc-banner {
  width: 100% !important;
  justify-content: space-between;
  /* responsive */ }
  @media screen and (min-width: 0) and (max-width: 1079px) {
    .cc-banner {
      flex: none !important;
      flex-direction: column !important;
      align-items: inherit; } }

/* ----------------------------------------
    Cookie Message
---------------------------------------- */
.cc-message {
  max-width: 720px;
  /* responsive */ }
  @media screen and (min-width: 0) and (max-width: 1079px) {
    .cc-message {
      width: 100%;
      max-width: 100%;
      display: block;
      float: left;
      clear: both;
      flex: none !important;
      overflow: auto; } }

.cc-link {
  text-decoration: underline; }

/* ----------------------------------------
    Cookie Button
---------------------------------------- */
.cc-highlight {
  /* responsive */ }
  @media screen and (min-width: 0) and (max-width: 1079px) {
    .cc-highlight {
      width: 100%;
      margin-top: 1rem;
      display: block;
      float: left;
      clear: both;
      flex: none;
      overflow: auto; } }

.cc-btn {
  border-radius: 3px;
  font-weight: 400;
  outline: none;
  /* repsonsive */ }
  @media screen and (min-width: 0) and (max-width: 1079px) {
    .cc-btn {
      width: 50%;
      margin: 0 !important;
      display: block;
      float: left;
      flex: none !important;
      overflow: auto;
      box-sizing: border-box; } }
  @media screen and (min-width: 0) and (max-width: 419px) {
    .cc-btn {
      width: 100%; } }

/* ----------------------------------------
    Blocks
---------------------------------------- */
/* ----------------------------------------
    Blocks
---------------------------------------- */
/* ----------------------------------------
    Block Global
---------------------------------------- */
.blocks > [class*='block'] {
  width: 100%;
  margin: 0 auto;
  display: block; }

/* ----------------------------------------
    Block Space
---------------------------------------- */
.block__inner {
  padding: 2rem 2rem; }
  .block__inner--small {
    padding: 2rem 1rem; }
  .block__inner--medium {
    padding: 3rem 1.5rem; }
  .block__inner--large {
    padding: 4rem 2rem; }

/* ----------------------------------------
    Download Base
---------------------------------------- */
.blocks > [class*='download-block'] img {
  max-width: 100%;
  height: auto; }

/* ----------------------------------------
    Download Block
---------------------------------------- */
/* ----------------------------------------
    Image Base
---------------------------------------- */
.blocks > [class*='image-block'] img {
  max-width: 100%;
  height: auto; }

/* ----------------------------------------
    Image Block
---------------------------------------- */
/* ----------------------------------------
    Image Inline Block
---------------------------------------- */
/* ----------------------------------------
    Media Base
---------------------------------------- */
/* ----------------------------------------
    Media Block
---------------------------------------- */
/* ----------------------------------------
    Quote Base
---------------------------------------- */
/* ----------------------------------------
    Quote Block
---------------------------------------- */
/* ----------------------------------------
    Quote
---------------------------------------- */
.quote__author:before {
  content: "-";
  position: relative;
  display: inline-block;
  margin-right: 0.5em; }

/* ----------------------------------------
    Text Base
---------------------------------------- */
/* ----------------------------------------
    Text Block
---------------------------------------- */

/*# sourceMappingURL=app.css.map*/