/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
.v-accordion-btn {
  cursor: pointer;
  display: block;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.v-accordion-btn button {
    width: 100%;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
.calendar {
  border: 1px solid #ffffff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.calendar button {
    background: none;
    border: 0;
    color: inherit;
    font-size: 1em;
}
.calendar__header {
    border-bottom: 1px solid #ffffff;
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    padding: 1rem;
    position: relative;
    text-align: center;
    width: 100%;
}
.calendar button div {
    display: inline;
}
.calendar__nav {
    color: #ffffff;
    cursor: pointer;
    display: block;
    fill: #ffffff;
    height: 1.3rem;
    width: 0.9rem;
}
.calendar__nav svg {
      height: 100%;
      width: 100%;
}
.calendar__next, .calendar__previous {
    position: absolute;
    text-decoration: none;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.calendar__next {
    right: 10px;
    -webkit-transform: rotate(180deg) translateY(6px);
            transform: rotate(180deg) translateY(6px);
}
.calendar__previous {
    left: 10px;
}
.calendar__month {
    margin-left: .25em;
    margin-right: .25em;
}
.calendar__wrapper {
    border-collapse: collapse;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 2em auto;
    padding: 3rem 1rem 0;
    width: 100%;
}
.calendar__head {
    grid-column: span 7;
    grid-row: span 1;
}
.calendar__body {
    display: grid;
    grid-column: span 7;
}
.calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.calendar__weekday {
    display: block;
    grid-column: span 1;
}
.calendar__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.calendar__day {
    grid-column: span 1;
}
.calendar__day--disabled {
      color: #757575;
      cursor: not-allowed;
}
.calendar__day--active {
      background-color: #2b2b2b;
      color: #ffffff;
}
.calendar__link {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    color: inherit;
    display: block;
    height: 100%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding: 1rem;
    text-decoration: none;
    width: 100%;
}
.calendar__link:focus {
      border-color: #ffffff;
}
.calendar__date {
    display: block;
    text-align: center;
}
.calendar .o-radio-button + label {
    border-color: transparent;
    color: inherit;
    height: auto;
    line-height: inherit;
    min-height: 2rem;
    min-width: 2rem;
}
.calendar .o-radio-button:checked + label {
    background: #ffffff;
    color: #000000;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
.v-carousel-block {
  margin-bottom: 7.5rem;
  margin-top: 7.5rem;
  overflow: hidden;
  position: relative;
}
@media (min-width: 46em) {
.v-carousel-block {
      margin-bottom: 10rem;
      margin-top: 10rem;
      padding-right: 7rem;
}
}
.v-carousel-block__header {
  position: relative;
}
.v-carousel-block__arrow {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: none;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: 40px;
  top: 40px;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transform-origin: center;
          transform-origin: center;
  z-index: 40;
}
.v-carousel-block__arrow:focus {
    outline: 2px solid #88e287;
}
@media (min-width: 46em) {
.v-carousel-block__arrow {
      right: -5px;
}
}
.v-carousel-block__arrow > div {
    fill: #ffffff;
    height: 20px;
    width: 20px;
}
.v-carousel-block__arrow--prev {
    -webkit-transform: none;
            transform: none;
}
.v-carousel-block__arrow--next {
    -webkit-transform: translate3d(40px, 0, 0) rotate(180deg);
            transform: translate3d(40px, 0, 0) rotate(180deg);
}
@media (min-width: 46em) {
.v-carousel-block__arrow--next {
        -webkit-transform: translate3d(60px, 0, 0) rotate(180deg);
                transform: translate3d(60px, 0, 0) rotate(180deg);
}
}
.v-carousel-block__arrow--show {
    display: block;
    opacity: 1;
}
.VueCarousel-slide {
  height: 0;
  padding-bottom: 89.6%;
  position: relative;
}
.VueCarousel-slide:after {
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.7)));
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 40;
}
@media (min-width: 46em) {
.VueCarousel-slide {
      padding-bottom: 80%;
}
}
@media (min-width: 66em) {
.VueCarousel-slide {
      padding-bottom: 59%;
}
}
.VueCarousel-slide .v-carousel-block__image {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}
.VueCarousel-navigation-button {
  display: none;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
.v-date-selector {
  margin-bottom: 0;
}
.v-date-selector__error {
    font-family: dDinNormal, "sans-serif";
    font-size: initial;
    letter-spacing: 0;
    text-transform: none;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
.v-dropdown {
  height: 5.6rem;
  overflow: hidden;
  position: relative;
  width: 32.5rem;
}
.v-dropdown:after, .v-dropdown:before {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 0;
}
.v-dropdown:after {
    border-top: 8px solid #757575;
    -webkit-transform: translate(0, 2px);
            transform: translate(0, 2px);
    z-index: 40;
}
.v-dropdown:before {
    border-top: 8px solid black;
    z-index: 60;
}
.v-dropdown--focus:after, .v-dropdown--focus:before {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 0;
}
.v-dropdown--focus:after {
    border-top: 8px solid #ffffff;
    -webkit-transform: translate(0, 2px);
            transform: translate(0, 2px);
    z-index: 40;
}
.v-dropdown--focus:before {
    border-top: 8px solid #000000;
    z-index: 60;
}
.v-dropdown__list {
    background-color: #000000;
    border: solid 1px #757575;
    border-radius: 0;
    color: #757575;
    cursor: pointer;
    height: 100%;
    padding: 1.4rem 2.5rem;
    width: 100%;
    -webkit-appearance: none;
}
.v-dropdown__list:focus {
      border: solid 1px #ffffff;
      color: white;
      outline: 0;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
@media (min-width: 66em) {
.v-food-menu {
    display: none;
}
}
.v-food-menu--active {
  display: block;
}
.v-food-menu__body {
  display: none;
}
@media (min-width: 66em) {
.v-food-menu--active .v-food-menu__body {
      display: block;
}
}
.v-food-menu--visible .v-food-menu__body {
    display: block;
}
@media (min-width: 66em) {
.v-food-menu__body-layout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
}
.v-food-menu__body-item {
  margin-top: 3rem;
}
@media (min-width: 66em) {
.v-food-menu__body-item {
      margin-top: 0;
      width: 40%;
}
}
@media (min-width: 66em) {
.v-food-menu__body-item:nth-child(n+3) {
      margin-top: 5.2rem;
}
}
@media (min-width: 66em) {
.v-food-menu__meta {
    display: none;
}
}
@media (max-width: 65.99em) {
.v-food-menu__section {
    margin-bottom: 3.2rem;
    padding-bottom: 3.2rem;
}
}
.v-food-menu__footer {
  margin-top: 5.2rem;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
/**
 * Colour settings
 */
.v-food-menu-filters {
  margin-top: 1.6rem;
}
@media (min-width: 66em) {
.v-food-menu-filters {
      margin-top: 4rem;
}
}
.v-food-menu-filters__body {
    max-height: 50vh;
    padding: 0;
    -webkit-transition-property: max-height, padding;
    transition-property: max-height, padding;
    -webkit-transition-duration: .5s;
            transition-duration: .5s;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
}
@media (min-width: 66em) {
.v-food-menu-filters__body {
        display: block;
}
}
.v-food-menu-filters__body--visible {
      display: block;
}
.v-food-menu-filters__inner {
    padding: 0;
}
.v-food-menu-filters__item-wrapper {
    -ms-flex-item-align: start;
        align-self: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 0 !important;
}
@media (min-width: 66em) {
.v-food-menu-filters__item-wrapper {
        display: inline-block;
}
}
.v-food-menu-filters__item {
    background-color: transparent;
    border-color: transparent;
    color: #757575;
    cursor: pointer;
    margin-bottom: 0.8rem;
    outline: none;
}
@media (min-width: 66em) {
.v-food-menu-filters__item {
        margin-bottom: 1.6rem;
}
}
@media (max-width: 65.99em) {
.v-food-menu-filters__item {
        padding: 0;
}
}
.v-food-menu-filters__item--active {
      color: #ffffff !important;
}
.v-food-menu-filters__hidden-input {
    height: 1px;
    opacity: 0;
    width: 1px;
}
.v-food-menu-filters__hidden-input:focus + .v-food-menu-filters__item {
      outline: 2px solid #88e287;
}
.v-food-menu-filters__instruction {
    color: #ffffff;
    margin-bottom: 1.6rem;
}
@media (min-width: 66em) {
.v-food-menu-filters__instruction {
        font-size: 14px;
        font-size: 1.4rem;
        line-height: 1.7;
        letter-spacing: 0.3rem;
        font-weight: 700;
        letter-spacing: 0.2rem;
        margin-bottom: 0;
        position: relative;
        text-transform: uppercase;
}
}
.v-food-menu-filters__icon {
    color: #757575;
    display: inline-block;
    height: 1rem;
    width: 1.8rem;
}
.v-food-menu-filters__icon > div {
      height: 100%;
      width: 100%;
}
.v-food-menu-filters__icon svg {
      fill: currentColor;
}
.v-food-menu-filters__instruction, .v-food-menu-filters__item {
    display: block;
}
@media (min-width: 66em) {
.v-food-menu-filters__instruction, .v-food-menu-filters__item {
        display: inline-block;
        margin-right: 3.2rem;
}
}
.v-food-menu-filters__meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.v-food-menu-filters__expand-all-btn, .v-food-menu-filters__dropdown-btn {
    background: none;
    border: 0;
    color: #ffffff;
    position: relative;
}
@media (min-width: 66em) {
.v-food-menu-filters__expand-all-btn, .v-food-menu-filters__dropdown-btn {
        display: none;
}
}
.v-food-menu-filters__dropdown-btn {
    padding-left: 3rem;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
/**
 * Colour settings
 */
.v-food-menu-item {
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 0.8rem;
}
.v-food-menu-item--disabled {
    color: #2b2b2b;
}
.v-food-menu-item__title {
    color: inherit;
    display: block;
    max-width: 46rem;
}
.v-food-menu-item--disabled .v-food-menu-item__title {
      color: #757575;
}
@media (min-width: 66em) {
.v-food-menu-item__title {
        max-width: 32rem;
}
}
.v-food-menu-item__text {
    display: block;
    max-width: 46rem;
}
.v-food-menu-item--disabled .v-food-menu-item__text {
      color: #757575;
}
@media (min-width: 66em) {
.v-food-menu-item__text {
        max-width: 32rem;
}
}
.v-food-menu-item__price {
    padding-left: 0.5rem;
    text-align: right;
    width: 4rem;
}
.v-food-menu-item--disabled .v-food-menu-item__price {
      color: #757575;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
.v-food-menu-selectors {
  display: none;
}
@media (min-width: 66em) {
.v-food-menu-selectors {
      display: block;
}
}
.c-menu-buttons {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 -1.6rem;
}
.c-btn.c-menu-buttons__item {
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0 1.6rem;
}
.c-btn--line-disabled.c-menu-buttons__item {
  border-color: #757575;
  color: #757575;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
/* [1] */
/* [1] */
.lottie-wrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
  overflow: hidden;
  position: relative;
}
.lottie-wrapper .lottie {
    width: 100%;
}
@media (max-width: 1645px) {
.lottie-wrapper .lottie svg {
        height: unset !important;
        width: unset !important;
}
}
@media (max-width: 1645px) {
.lottie-wrapper .lottie {
        width: auto;
}
}
.c-homepage-anim {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
.c-homepage-anim__bg-image {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
}
.fade-enter-active {
  -webkit-transition: opacity 3s ease-in-out;
  transition: opacity 3s ease-in-out;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter {
  opacity: 0;
}
#lottie svg {
  -webkit-transform: scale(2) !important;
          transform: scale(2) !important;
}
#lottie-logo svg {
  height: auto !important;
  left: 50%;
  min-width: 15%;
  position: absolute;
  top: 50vh;
  -webkit-transform: translate(-52%, -54%) !important;
          transform: translate(-52%, -54%) !important;
  width: 24.5vh !important;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
.v-skip-nav-btn {
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0;
  background-color: #ffffff;
  color: #000000;
  display: block;
  left: 0;
  opacity: 0;
  padding: 2.4rem 3.9rem;
  position: absolute;
  text-transform: uppercase;
  top: -1000px;
  z-index: -1;
}
@media (min-width: 46em) {
.v-skip-nav-btn {
      font-size: 20px;
      font-size: 2rem;
      line-height: 1.2;
      letter-spacing: 0;
}
}
@media (min-width: 66em) {
.v-skip-nav-btn {
      font-size: 20px;
      font-size: 2rem;
      line-height: 1.2;
      letter-spacing: 0;
}
}
.v-skip-nav-btn:focus {
    opacity: 1;
    top: 0;
    z-index: 65;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
/**
 * 1 Prevent iOS grow/shrinking viewport bug
 * 2 Leave sapce for webkit focus style on buttons
 */
.v-text-carousel {
  margin-bottom: 8.5rem;
  overflow: hidden;
  /* 1 */
  padding-top: 0.5rem;
  /* 2 */
  position: relative;
  /**
     * 1 - force container on IE11 to be wide enough
     */
}
@media (min-width: 46em) {
.v-text-carousel {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
}
}
.v-text-carousel__header {
    position: relative;
}
.v-text-carousel__images-wrapper {
    margin-bottom: 3.2rem;
}
@media (min-width: 46em) {
.v-text-carousel__images-wrapper {
        left: 0;
        margin-bottom: 0;
        position: absolute;
        width: 60%;
}
}
.v-text-carousel__images {
    height: 0;
    overflow: hidden;
    padding-bottom: 89.6%;
    position: relative;
}
@media (min-width: 46em) {
.v-text-carousel__images {
        padding-bottom: 140%;
}
}
@media (min-width: 54em) {
.v-text-carousel__images {
        padding-bottom: 75%;
}
}
.v-text-carousel__image-wrapper {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 10;
}
.v-text-carousel__image {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
    -webkit-transition-duration: 0.6s;
            transition-duration: 0.6s;
    width: 100%;
}
@media (min-width: 46em) {
.v-text-carousel__image:after {
        background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.7)));
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
        content: '';
        height: 100%;
        position: absolute;
        right: 0;
        width: 100%;
        z-index: 40;
}
}
.v-text-carousel__header {
    display: block;
    height: 40px;
    z-index: 40;
}
.v-text-carousel__arrow {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: transparent;
    border-radius: 0;
    border: none;
    cursor: pointer;
    display: none;
    left: 20px;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 0;
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transition-duration: .3s;
            transition-duration: .3s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
    z-index: 40;
}
.v-text-carousel__arrow:focus {
      outline: 2px solid #88e287;
}
.v-text-carousel__arrow[aria-hidden='true']:focus {
      outline: none;
}
.v-text-carousel__arrow > div {
      fill: #ffffff;
      height: 20px;
      width: 20px;
}
.v-text-carousel__arrow--prev {
      -webkit-transform: translate3d(0, 60px, 0) rotate(-90deg);
              transform: translate3d(0, 60px, 0) rotate(-90deg);
}
.v-text-carousel__arrow--next {
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
}
.v-text-carousel__arrow--show {
      opacity: 1;
      display: block;
}
.v-text-carousel__text-wrapper {
    position: relative;
}
@media (min-width: 46em) {
.v-text-carousel__text-wrapper {
        height: 100%;
        width: calc(40% + 72px);
}
}
@media (min-width: 46em) {
.v-text-carousel__text-block {
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      height: 100%;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      max-width: 24em;
      -webkit-transition-property: opacity, -webkit-transform;
      transition-property: opacity, -webkit-transform;
      transition-property: transform, opacity;
      transition-property: transform, opacity, -webkit-transform;
      /**
             * 1 - prevent child elements from overflowing on IE11
             */
}
.v-text-carousel__text-block > * {
        max-width: 100%;
        /* 1 */
}
}
.v-text-carousel__title {
    text-align: center;
}
@media (min-width: 46em) {
.v-text-carousel__title {
        text-align: left;
}
}
.v-text-carousel__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0 -0.7rem;
    min-width: 18rem;
    /* 1 */
}
.v-text-carousel__link {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 0 0.7rem !important;
}

/**
 * Animation enter/leave classes
 * Animate text vertically in on mobile and
 * horizontally on tablet and up
 */
.text-enter {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
@media (min-width: 46em) {
.text-enter {
      -webkit-transform: translate3d(100%, 0, 0);
              transform: translate3d(100%, 0, 0);
}
}
.text-enter-to {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.text-leave-active,
.text-enter-active {
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}
.text-enter-active {
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
}
.text-leave-active {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.text-leave-to {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}
@media (min-width: 46em) {
.text-leave-to {
      -webkit-transform: translate3d(-100%, 0, 0);
              transform: translate3d(-100%, 0, 0);
}
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
.v-input {
  display: block;
  font-size: 14rem;
  margin-bottom: 1.6rem;
  padding-top: 3.2rem;
  position: relative;
}
.v-input__label, .v-input__message {
    position: absolute;
    top: 0;
}
.v-input__label {
    left: 0;
    pointer-events: none;
    -webkit-transform: translate3d(1.6rem, 45px, 0);
            transform: translate3d(1.6rem, 45px, 0);
    -webkit-transition-duration: .3s;
            transition-duration: .3s;
    -webkit-transition-property: color, -webkit-transform;
    transition-property: color, -webkit-transform;
    transition-property: transform, color;
    transition-property: transform, color, -webkit-transform;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
}
.v-input__message {
    right: 0;
}
.v-input--active .v-input__label {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
.v-input--active .v-input__input {
    border: 1px solid #ffffff;
}
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fade-in {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
/**
 * The breakpoint at which a hover state is applied from.
 * This is typically due to the fact we do not want hover styles
 * applied to touch devices.
 */
.v-hamburger {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  float: left;
  height: 38px;
  left: 0;
  margin: 0 2.8rem 0 0;
  padding: 0;
  position: relative;
  top: 23px;
  width: 38px;
  z-index: 31;
}
.v-hamburger:focus {
    outline: 2px solid #88e287;
}
.v-hamburger[aria-expanded="true"] ~ .c-top-panel__branding {
    display: none;
}
@media (min-width: 46em) {
.v-hamburger {
      top: 35px;
}
}
@media (min-width: 66em) {
.v-hamburger {
      top: 39px;
}
}
@media (min-width: 85em) {
.v-hamburger {
      margin-right: 1.6rem;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
}
}
.v-hamburger__stick {
    background-color: #adadad;
    height: 2px;
    left: 0;
    position: absolute;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: 0.25s;
            transition-duration: 0.25s;
    -webkit-transition-timing-function: "ease-in-out";
            transition-timing-function: "ease-in-out";
    -webkit-transform-origin: center;
            transform-origin: center;
    top: 19px;
    width: 38px;
    /**
         * Layouts with a header image need a white
         * hamburger on mobile
         */
}
.v-hamburger__stick:first-child {
      -webkit-transform: translateY(-5px);
              transform: translateY(-5px);
}
.v-hamburger__stick:last-child {
      -webkit-transform: translateY(5px);
              transform: translateY(5px);
}
@media (max-width: 45.99em) {
.page-template-private-hire .v-hamburger__stick,
      .page-template-menu .v-hamburger__stick,
      .single-locations .v-hamburger__stick {
        background-color: #ffffff;
}
}
.v-hamburger--active .v-hamburger__stick {
    background-color: #adadad;
}
.v-hamburger--active .v-hamburger__stick:first-child {
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
}
.v-hamburger--active .v-hamburger__stick:last-child {
      -webkit-transform: translateY(0) rotate(-45deg);
              transform: translateY(0) rotate(-45deg);
}
@charset "UTF-8";
/* ==========================================================================
   INUITCSS
   ========================================================================== */
/**
 * inuitcss, by @csswizardry
 *
 * github.com/inuitcss | inuitcss.com
 */
/**
 * CONTENTS
 *
 * SETTINGS
 * Config...............Project-level configuration and feature switches.
 * Core.................inuitcss’ core and setup settings.
 * Global...............Project-wide variables and settings.
 *
 * TOOLS
 * Font-size............A mixin which guarantees baseline-friendly line-heights.
 * Clearfix.............Micro clearfix mixin.
 * Hidden...............Mixin for hiding elements.
 * Sass MQ..............inuitcss’ default media query manager.
 *
 * GENERIC
 * Box-sizing...........Better default `box-sizing`.
 * Normalize.css........A level playing field using @necolas’ Normalize.css.
 * Reset................A tiny reset to complement Normalize.css.
 * Shared...............Sensibly and tersely share some global commonalities
 *                      (particularly useful when managing vertical rhythm).
 *
 * ELEMENTS
 * Page.................Set up our document’s default `font-size` and
 *                      `line-height`.
 * Headings.............Very minimal (i.e. only font-size information) for
 *                      headings 1 through 6.
 * Images...............Base image styles.
 * Tables...............Simple table styles.
 *
 * OBJECTS
 * Wrapper..............Page constraint object.
 * Layout...............Generic layout module.
 * Media................Image- and text-like content side by side. The
 *                      poster-child of OOCSS.
 * Flag.................Table-layout-based advancement on the Media object.
 * List-bare............Lists with no bullets or indents.
 * List-inline..........A list whose items all site in a line.
 * Box..................Simple boxing abstraction.
 * Block................Image-on-top-of-text object.
 * Ratio................A container for maintaining aspect ratio of content.
 * Crop.................Provide a cropping context for media (images, etc.).
 * Table................Classes for manipulating `table`s.
 * Pack.................Pack items into available horizontal space.
 *
 * COMPONENTS
 * Buttons..............An example button component, and how it fits into the
 *                      inuitcss framework.
 *
 * UTILITIES
 * Clearfix.............Bind our clearfix onto a utility class.
 * Widths...............Simple width helper classes.
 * Headings.............Reassigning our heading styles to helper classes.
 * Spacings.............Nudge bits of the DOM around with these spacing
 *                      classes.
 * Responsive-Spacings..Enhances the function of normal spacings for
 *                      responsive usage.
 * Print................Reset-like styles taken from the HTML5 Boilerplate.
 * Hide.................Helper classes to hide content
 */
/* ==========================================================================
   #DEV TOOLS
   ========================================================================== */
/* ==========================================================================
   #CONFIG
   ========================================================================== */
/**
 * A map of global config settings. Define any project-level configuration,
 * feature switches, etc. in here.
 */
/* ==========================================================================
   #GLOBAL
   ========================================================================== */
/**
 * The global settings file contains any project-wide variables; things that
 * need to be made available to the entire codebase.
 */
/**
 * CONTENT OVERLAP OFFSETS
 *
 * Use to overlap text on top of the an image with an offset to the right
 */
/**
 * OVERRIDE INUIT DEFAULTS
 */
/* ==========================================================================
   #RESPONSIVE
   ========================================================================== */
/**
 * The responsive settings file contains any project-wide responsive settings;
 * This includes all SASS-MQ settings for breakpoints
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout settings file contains settings specific to the laying out of
 * elements across the project;
 * This includes a map for adjusting z-indexes, and any component sizes that
 * need to be defined at the global level.
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Set max-widths for as many breakpoints required.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors settings file contains all colors used throughout the project;
 * hex color codes should not be used anywhere outside of this file
 *
 * First, a series of palette colors are defined.
 * Then, a set of monochrome and theme colors are defined from those.
 * We should ONLY use the theme and monochrome colors throughout the scss,
 * so that changing them in the future is easier.
 *
 * E.g. $color-primary: $color-red -> $color-primary: $color-green
 * This is a one-line change in this colors file, but changing $color-red to
 * $color-green across the whole project would require changing many files.
 */
/**
 * PALETTE
 */
/**
 * MONOCHROME
 */
/**
 * THEME
 */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text settings file contains any project-wide text and type settings;
 * Font families are given variable names here for use throughout the scss.
 * Font sizings are also provided here, which are mapped out and provide
 * responsive sizings to change across devices.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions settings file contains any project-wide predefined
 * easing curves and transitions (duration, ease, delay) that can be applied.
 */
/* stylelint-disable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* stylelint-enable number-no-trailing-zeros, function-comma-space-after, number-leading-zero */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * Settings in this partial control the heights of o-sizer when --full-height
 * modifier is applied.
 *
 * The desired behaviour that these settings apply is to provide sections and
 * blocks of content with a min height when screens are too shallow.
 * E.g. at largeDesk width and a screen height at 500px, the section will
 * default to 768px.
 *
 * If the screensize height is larger than the value of the respective breakpoint
 * keyed map value in $sizer-min-heights then the section will default to 100vh
 */
/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ==========================================================================
   #ALIASES
   ========================================================================== */
/**
 * The aliases tools file contains aliases for shortening long variable, mixin
 * and function names to make them easier to use throughout the project.
 */
/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors tools file contains functions for accessing the core map colors
 * defined in _settings.colors.
 */
/* ==========================================================================
   #HELPERS
   ========================================================================== */
/**
 * The helpers tools file contains functions to help the other tools to work
 * more easily, and reduce the code they require.
 */
/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * The layout tools file contains functions for accessing the layout settings
 * defined in _settings.layout.
 */
/* ==========================================================================
   #MIXINS
   ========================================================================== */
/**
 * The mixins tools file contains functions for generating common CSS patterns;
 * Most notable is the keyframes mixin for generating keyframes cross-browser.
 */
/* stylelint-disable at-rule-no-vendor-prefix */
/* stylelint-enable at-rule-no-vendor-prefix */
/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text tools file contains functions for accessing the core text map
 * defined in _settings.text.
 *
 * There are two ways of using the text, either the mixins below, or the utility
 * helper classes in _utilities.text.
 *
 * You will want to use these tools when you have a component that needs styling
 * with settings from the global text map, and where that component must always
 * be styled that way -- if it's just a one off, use the utility helpers.
 *
 *
 * Most of the time, you'll want to use the text-styles() function. This will
 * generate a list of styles for a specific font type.
 *
 * E.g. @include text-styles('base') might give you a font-size, a line-height
 * and a letter spacing, and will also make use of the inuit-font-size() mixin
 * for the font-size and line-height.
 *
 * The text-styles() mixin will also generate responsive styles if you ask it
 * too. The second parameter, $responsive, takes a boolean, and if true, will
 * generate all the text-styles set in the 'responsive' part of the global
 * text map for that size, within their own media queries.
 *
 * You can also generate these manually on their own, using
 * text-styles-responsive-only().
 * This is good for when you need the classes for the responsive sizings to be
 * different to the base, such as in the _utilities.text class.
 * (u-text--big and u-text--big.u-text--responsive).
 *
 * Finally, if you just need a part of the text map for a size, you can
 * use text-size, text-height or text-spacing. These are functions, and will
 * just return the value you specified.
 */
/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
/**
 * The transitions tools file contains functions for interacting with the
 * transitions settings, _settings.transitions.scss - specifically the
 * predefined easing and transition maps.
 */
/* ==========================================================================
   #SIZER
   ========================================================================== */
/**
 * A set of tools to access values from the sizer settings found
 * in /resources/sass/settings/_settings.sizer.scss
 */
/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * The wrapper tools file contains functions for accessing the wrapper settings
 * defined in resources/sass/setting/_settings.wrapper.scss
 *
 * A $_size must be set when using wrapper(). This correlates to the device size
 * (see the settings file).
 *
 * The $_args do not need to be set but are used to drill deeper and more
 * explicitly into the $wrapper-map. For example, if you wanted just the
 * max-width of the desk wrapper, you would call wrapper('desk', 'max-width').
 */
/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/*! 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 {
  -webkit-box-sizing: content-box;
          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 */
  -webkit-text-decoration: underline dotted;
          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 {
  -webkit-box-sizing: border-box;
          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"] {
  -webkit-box-sizing: border-box;
          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;
}

/* ==========================================================================
   #RESET
   ========================================================================== */
/**
 * A very simple reset that sits on top of Normalize.css.
 */
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
  margin: 0;
  padding: 0;
}

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
  margin-bottom: 0;
}

/**
 * Remove default table spacing.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
 * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
 *    on fieldsets.
 */
fieldset {
  min-width: 0;
  /* [1] */
  border: 0;
}

/* ==========================================================================
   #SHARED
   ========================================================================== */
/**
 * Shared declarations for certain elements.
 */
/**
 * Always declare margins in the same direction:
 * csswizardry.com/2012/06/single-direction-margin-declarations
 */
address,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, ol, ul,
figure,
hr,
table,
fieldset {
  margin-bottom: 3.2rem;
}

/**
 * Consistent indentation for lists.
 */
dd, ol, ul {
  margin-left: 3.2rem;
}

/* ==========================================================================
   #PAGE
   ========================================================================== */
/**
 * Simple page-level setup.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */
html {
  font-size: 1em;
  /* [1] */
  line-height: 2;
  /* [1] */
  overflow-y: scroll;
  /* [2] */
  min-height: 100%;
  /* [3] */
}

/* ==========================================================================
   #IMAGES
   ========================================================================== */
/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 */
img {
  max-width: 100%;
  /* [1] */
  font-style: italic;
  /* [2] */
  vertical-align: middle;
  /* [3] */
}

/**
   * If a `width` and/or `height` attribute has been explicitly defined, let’s
   * not make the image fluid.
   */
img[width],
img[height] {
  max-width: none;
}

/* ==========================================================================
   #TABLES
   ========================================================================== */
/**
 * 1. Ensure tables fill up as much space as possible.
 */
table {
  width: 100%;
  /* [1] */
}

/* ==========================================================================
   #PAGE
   ========================================================================== */
/**
 * Simple page-level setup.
 *
 * 1. Set the default `background-color` for the entire project. This will also
 *    affect the color shown when scrolling past the limits of the page on
 *    browser's that allow it, such as Chrome.
 * 2. Set the default text `color` for the entire project. This will be the
 *    color used for all text unless a different one is supplied.
 * 3. Set the default `font-family` for the entire project. This is useful as
 *    the content font, if there is a specific one.
 * 4. When user clicks an anchor link, take them there nicely
 */
html {
  background-color: #000000;
  /* [1] */
  color: #ffffff;
  /* [2] */
  font-family: dDinNormal, "sans-serif", serif;
  /* [3] */
  font-size: 16px;
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  /* [4] */
}

/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Reset the default styles of the headers so that the text is not bold.
 */
h1 {
  font-weight: normal;
}

h2 {
  font-weight: normal;
}

h3 {
  font-weight: normal;
}

h4 {
  font-weight: normal;
}

h5 {
  font-weight: normal;
}

h6 {
  font-weight: normal;
}

/* ==========================================================================
   #FONTS
   ========================================================================== */
/**
*
* D-Din font variations in styles Normal, Bold, Italic, Exp
*
*/
@font-face {
  font-family: dDinNormal;
  src: url("../fonts/D-DIN.woff2") format("woff2"), url("../fonts/D-DIN.woff") format("woff");
}

@font-face {
  font-family: dDinItalic;
  src: url("../fonts/D-DIN-Italic.woff2") format("woff2"), url("../fonts/D-DIN-Italic.woff") format("woff");
}

@font-face {
  font-family: dDinBold;
  src: url("../fonts/D-DIN-Bold.woff2") format("woff2"), url("../fonts/D-DIN-Bold.woff") format("woff");
}

/* ==========================================================================
   #IMAGES
   ========================================================================== */
/**
 * Specific styles for the default img elements
 *
 * 1. Set all base images to 100% width, unless they have an explictly defined
 * width or height on them already. This allows them to be responsive and
 * contained.
 */
img:not([width]):not([height]) {
  width: 100%;
  /* [1] */
}

/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Simple default styling for links.
 *
 * 1. Set the default `color` to be same as the surrounding text color
 * 2. Set the default `text-decoration` to be same as the surrounding decoration
 */
a {
  color: inherit;
  /* [1] */
  text-decoration: inherit;
  /* [2] */
}

[tabindex]:focus,
a:focus, button:focus {
  outline: #88e287 solid 2px;
}

/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Page-level constraining and wrapping elements.
 */
.o-wrapper {
  padding-right: 3.2rem;
  padding-left: 3.2rem;
  margin-right: auto;
  margin-left: auto;
  max-width: 1172px;
}

.o-wrapper:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * Grid-like layout system.
 *
 * The layout object provides us with a column-style layout system. This file
 * contains the basic structural elements, but classes should be complemented
 * with width utilities, for example:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *   </div>
 *
 * The above will create a two-column structure in which each column will
 * fluidly fill half of the width of the parent. We can have more complex
 * systems:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/1  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *   </div>
 *
 * The above will create a system in which the first item will be 100% width
 * until we enter our medium breakpoint, when it will become 33.333% width. The
 * second and third items will be 50% of their parent, until they also become
 * 33.333% width at the medium breakpoint.
 *
 * We can also manipulate entire layout systems by adding a series of modifiers
 * to the `.o-layout` block. For example:
 *
 *   <div class="o-layout  o-layout--reverse">
 *
 * This will reverse the displayed order of the system so that it runs in the
 * opposite order to our source, effectively flipping the system over.
 *
 *   <div class="o-layout  o-layout--[right|center]">
 *
 * This will cause the system to fill up from either the centre or the right
 * hand side. Default behaviour is to fill up the layout system from the left.
 *
 * There are plenty more options available to us: explore them below.
 */
/* Default/mandatory classes
   ========================================================================== */
/**
 * 1. Allows us to use the layout object on any type of element.
 * 2. We need to defensively reset any box-model properties.
 * 3. Use the negative margin trick for multi-row grids:
 *    http://csswizardry.com/2011/08/building-better-grid-systems/
 */
.o-layout {
  display: block;
  /* [1] */
  margin: 0;
  /* [2] */
  padding: 0;
  /* [2] */
  list-style: none;
  /* [1] */
  margin-left: -3.2rem;
  /* [3] */
  font-size: 0;
}

/**
   * 1. Required in order to combine fluid widths with fixed gutters.
   * 2. Allows us to manipulate grids vertically, with text-level properties,
   *    etc.
   * 3. Default item alignment is with the tops of each other, like most
   *    traditional grid/layout systems.
   * 4. By default, all layout items are full-width (mobile first).
   * 5. Gutters provided by left padding:
   *    http://csswizardry.com/2011/08/building-better-grid-systems/
   * 6. Fallback for old IEs not supporting `rem` values.
   */
.o-layout__item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* [1] */
  display: inline-block;
  /* [2] */
  vertical-align: top;
  /* [3] */
  width: 100%;
  /* [4] */
  padding-left: 3.2rem;
  /* [5] */
  font-size: 16px;
  /* [6] */
  font-size: 1rem;
}

/* Gutter size modifiers
   ========================================================================== */
.o-layout--flush {
  margin-left: 0;
}

.o-layout--flush > .o-layout__item {
  padding-left: 0;
}

.o-layout--tiny {
  margin-left: -0.8rem;
}

.o-layout--tiny > .o-layout__item {
  padding-left: 0.8rem;
}

.o-layout--small {
  margin-left: -1.6rem;
}

.o-layout--small > .o-layout__item {
  padding-left: 1.6rem;
}

.o-layout--large {
  margin-left: -6.4rem;
}

.o-layout--large > .o-layout__item {
  padding-left: 6.4rem;
}

.o-layout--huge {
  margin-left: -12.8rem;
}

.o-layout--huge > .o-layout__item {
  padding-left: 12.8rem;
}

/* Vertical alignment modifiers
   ========================================================================== */
/**
 * Align all grid items to the middles of each other.
 */
.o-layout--middle > .o-layout__item {
  vertical-align: middle;
}

/**
 * Align all grid items to the bottoms of each other.
 */
.o-layout--bottom > .o-layout__item {
  vertical-align: bottom;
}

/**
 * Stretch all grid items of each row to have an equal-height.
 * Please be aware that this modifier class doesn’t take any effect in IE9 and
 * below and other older browsers due to the lack of `display: flex` support.
 */
.o-layout--stretch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.o-layout--stretch > .o-layout__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.o-layout--stretch.o-layout--center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.o-layout--stretch.o-layout--right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.o-layout--stretch.o-layout--left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

/* Fill order modifiers
   ========================================================================== */
/**
 * Fill up the layout system from the centre.
 */
.o-layout--center {
  text-align: center;
}

.o-layout--center > .o-layout__item {
  text-align: left;
}

/**
 * Fill up the layout system from the right-hand side.
 */
.o-layout--right {
  text-align: right;
}

.o-layout--right > .o-layout__item {
  text-align: left;
}

/**
 * Fill up the layout system from the left-hand side. This will likely only be
 * needed when using in conjunction with `.o-layout--reverse`.
 */
.o-layout--left {
  text-align: left;
}

.o-layout--left > .o-layout__item {
  text-align: left;
}

/**
 * Reverse the rendered order of the grid system.
 */
.o-layout--reverse {
  direction: rtl;
}

.o-layout--reverse > .o-layout__item {
  direction: ltr;
}

/* Auto-widths modifier
   ========================================================================== */
/**
 * Cause layout items to take up a non-explicit amount of width.
 */
.o-layout--auto > .o-layout__item {
  width: auto;
}

/* ==========================================================================
   #LIST-BARE
   ========================================================================== */
/**
 * Strip list-like appearance from lists by removing their bullets and any
 * indentation.
 *
 * Note: Declaring the item class might not be necessary everywhere,
 * but is for example in <dl> lists for the <dd> children.
 */
.o-list-bare {
  list-style: none;
  margin-left: 0;
}

.o-list-bare__item {
  margin-left: 0;
}

/* ==========================================================================
   #CHECK (ICON)
   ========================================================================== */
.o-check {
  fill: #ffffff;
  height: 20px;
  margin-left: 2rem;
  position: relative;
  top: -3px;
  width: 2rem;
}

/* ==========================================================================
   #CHECKBOX
   ========================================================================== */
/**
 * Custom CSS checkbox
 * Expected HTML:
 * <input
 *     class="o-checkbox"
 *     id="id-needed"
 *     name="name-needed"
 *     type="checkbox"
 *     value="value-needed"
 * >
 * <label for="id-needed">Tick me quick</label>
 */
.o-checkbox {
  cursor: pointer;
  opacity: 0;
  position: absolute;
}

.o-checkbox__label {
  display: block;
  padding-left: 3.5rem;
  position: relative;
}

.o-checkbox:focus ~ .checked {
  outline: 2px solid #88e287;
}

.o-checkbox.error ~ .checked {
  border-color: #ff7373;
}

.checked {
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #2b2b2b;
  content: '';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 1.8rem;
  left: 0;
  position: absolute;
  top: 7px;
  width: 1.8rem;
}

.o-checkbox:checked ~ .checked {
  background: transparent url("../img/check-grey.svg") center center no-repeat;
  background-size: 12px 12px;
  border-color: #757575;
  content: '';
}

/* ==========================================================================
   #ICON
   ========================================================================== */
/**
 * Adjust the svg icons object so that it resizes correctly.
 *
 * Set any default fills and strokes for SVGs.
 */
.o-icon, .o-icon__svg {
  fill: inherit;
  height: inherit;
  stroke: inherit;
  width: inherit;
}

.o-icon--caret {
  fill: none;
  stroke: #000000;
}

/* ==========================================================================
   #BUTTON GROUP
   ========================================================================== */
/**
 * Handles spacing and layout of multiple buttons.
 *
 * Utilising the $inuit-spacing-sizes map, create spacing variations of
 * the buttons.
 */
.o-button-group {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  /**
     * Family group
     *
     * Applied only to palm devices, the --daddy applied
     * item spans 100% width whilst default items become 50% in width
     */
}

.o-button-group__item {
  display: block;
}

@media (min-width: 46em) {
  .o-button-group__item {
    display: inline-block;
  }
}

.o-button-group- {
  margin-left: -3.2rem;
  margin-right: -3.2rem;
}

.o-button-group- .o-button-group__item {
  margin-left: 3.2rem;
  margin-right: 3.2rem;
}

.o-button-group--tiny {
  margin-left: -3.2rem;
  margin-right: -3.2rem;
}

.o-button-group--tiny .o-button-group__item {
  margin-left: 0.8rem;
  margin-right: 0.8rem;
}

.o-button-group--small {
  margin-left: -3.2rem;
  margin-right: -3.2rem;
}

.o-button-group--small .o-button-group__item {
  margin-left: 1.6rem;
  margin-right: 1.6rem;
}

.o-button-group--big {
  margin-left: -3.2rem;
  margin-right: -3.2rem;
}

.o-button-group--big .o-button-group__item {
  margin-left: 4.8rem;
  margin-right: 4.8rem;
}

.o-button-group--large {
  margin-left: -3.2rem;
  margin-right: -3.2rem;
}

.o-button-group--large .o-button-group__item {
  margin-left: 6.4rem;
  margin-right: 6.4rem;
}

.o-button-group--huge {
  margin-left: -3.2rem;
  margin-right: -3.2rem;
}

.o-button-group--huge .o-button-group__item {
  margin-left: 12.8rem;
  margin-right: 12.8rem;
}

.o-button-group--none {
  margin-left: -3.2rem;
  margin-right: -3.2rem;
}

.o-button-group--none .o-button-group__item {
  margin-left: 0;
  margin-right: 0;
}

.o-button-group--family {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -0.8rem;
}

.o-button-group--family .o-button-group__item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  padding: 0.8rem;
}

@media (max-width: 45.99em) {
  .o-button-group--family .o-button-group__item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
            flex: 1 1 50%;
  }
}

@media (max-width: 45.99em) {
  .o-button-group--family .o-button-group__item--daddy {
    -webkit-box-flex: 2;
        -ms-flex: 2 1 100%;
            flex: 2 1 100%;
  }
}

@media (max-width: 500px) {
  .o-button-group .o-button-group__item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }
}

/* ==========================================================================
   #FLEX
   ========================================================================== */
/**
 * Use Flex to tweak position of elements in their containers. It is advised
 * against using Flex for full page layouts, as CSS Grids handles this better.
 *
 * Flex is not supported in IE9, so bear this in mind when using it.
 *
 * <div class="o-flex">
 *   <div></div>
 *   <div></div>
 * </div>
 *
 * Several modifier classes are provided to handle the flex functionality.
 *
 * For example, `o-flex--justify-space-between` will space the children out
 * evenly within the object, and o-flex--align-center will center them
 * vertically.
 *
 * <div class="o-flex o-flex--justify-space-between o-flex--align-center">
 *   <div></div>
 *   <div></div>
 * </div>
 *
 * The following SASS maps can be adjusted to specify which modifiers you need.
 *
 * $flex-align-items, $flex-align-self, $flex-justify-content
 */
.o-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.o-flex--wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.o-flex--column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.o-flex--align-baseline {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.o-flex--align-flex-start {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.o-flex--align-flex-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.o-flex--align-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.o-flex--align-stretch {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.o-flex--self-baseline {
  -ms-flex-item-align: baseline;
      align-self: baseline;
}

.o-flex--self-flex-start {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.o-flex--self-flex-end {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.o-flex--self-center {
  -ms-flex-item-align: center;
      align-self: center;
}

.o-flex--self-stretch {
  -ms-flex-item-align: stretch;
      align-self: stretch;
}

.o-flex--justify-flex-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.o-flex--justify-flex-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.o-flex--justify-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.o-flex--justify-space-around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.o-flex--justify-space-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* ==========================================================================
   #INPUT
   ========================================================================== */
/**
 * Style an input
 * Don't style directly on 'input' as
 * it causes too many hard to find issues with
 * radios/checkboxes/hidden inputs
 */
::-webkit-input-placeholder,
label,
input,
textarea,
select {
  font-size: initial;
}
::-moz-placeholder,
label,
input,
textarea,
select {
  font-size: initial;
}
::-ms-input-placeholder,
label,
input,
textarea,
select {
  font-size: initial;
}
::placeholder,
label,
input,
textarea,
select {
  font-size: initial;
}

.o-input {
  background: transparent;
  border: 1px solid #2b2b2b;
  border-radius: 0;
  color: #ffffff;
  display: block;
  font-family: dDinNormal, "sans-serif";
  outline: none;
  padding: 2.2rem 2.3rem 2rem;
  vertical-align: middle;
  width: 100%;
}

.o-input::-webkit-input-placeholder {
  color: #757575;
  opacity: 1;
}

.o-input::-moz-placeholder {
  color: #757575;
  opacity: 1;
}

.o-input::-ms-input-placeholder {
  color: #757575;
  opacity: 1;
}

.o-input::placeholder {
  color: #757575;
  opacity: 1;
}

.o-input:focus {
  border-color: #ffffff;
  color: #ffffff;
  outline: 1px solid #88e287;
}

/**
 * 1. Resizing = so important for UX but don't let users
 *    break the design by resizing horizontally
 */
.o-input--textarea {
  min-height: 10em;
  resize: vertical;
  /* [1] */
}

/**
 * 1. Some browsers add an extra up/down control for time inputs. This can
 *    add unwanted height, margin or padding. This removes that
 */
.o-input--datetime {
  padding: 2rem 2.3rem;
}

.o-input--datetime::-webkit-inner-spin-button {
  display: none;
  /* [1] */
}

/**
 * Turn input[type="file"] into a label with
 * a button.
 * Expected HTML =
 * <input type="file" id="id-needed" class="o-input o-input--file">
 * <label for="id-needed" data-input="Upload">Upload files</label>
 * the data input attribute is used to set the copy on the
 * 'fake' button.
 * Appearance: Upload files: [ Upload ]
 */
.o-input--file {
  height: .1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: .1px;
  z-index: -1;
}

.o-input--file + label {
  color: #757575;
  display: block;
  padding-right: 12.5rem;
  position: relative;
  text-align: right;
}

.o-input--file + label:after {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #000000;
  content: attr(data-input);
  display: block;
  height: 4rem;
  line-height: 4rem;
  padding: 0 3rem;
  position: absolute;
  right: 0;
  top: -4px;
}

.o-input--file:focus + label:after {
  outline: 1px dotted #000000;
  outline: -webkit-focus-ring-color auto 5px;
}

.success .o-input,
.success .vdp-datepicker__calendar,
.success .o-select--light,
.success .o-layout__contact-form label {
  border-color: #ffffff;
}

.error {
  font-size: initial;
}

.error .o-input,
.error .vdp-datepicker__calendar,
.error .o-select--light,
.error .o-layout__contact-form {
  border-color: #ff7373;
}

.error .o-input::-webkit-input-placeholder,
.error .vdp-datepicker__calendar::-webkit-input-placeholder,
.error .o-select--light::-webkit-input-placeholder,
.error .o-layout__contact-form::-webkit-input-placeholder {
  opacity: 0;
}

.error label,
.error .error {
  color: #ff7373 !important;
}

.error-message {
  color: #ff7373 !important;
  display: none;
  font-size: initial;
  width: 100%;
}

.error-message.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* ==========================================================================
   #LIST BARE
   ========================================================================== */
.o-list-bare__link {
  display: block;
  font-size: initial;
}

.o-list-bare--inline {
  margin: -0.4rem;
}

.o-list-bare--inline .o-list-bare__item {
  display: inline-block;
  margin: 0.4rem;
}

.o-list-bare--inline-flex {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.o-list-bare--inline-flex .o-list-bare__item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* ==========================================================================
   #OFFSET BORDER
   ========================================================================== */
.o-offset-border {
  position: relative;
}

.o-offset-border--left:before {
  background: #757575;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 1px;
}

@media (min-width: 46em) {
  .o-offset-border--left:before {
    left: -29px;
  }
}

@media (min-width: 66em) {
  .o-offset-border--left:before {
    left: -60px;
  }
}

/* ==========================================================================
   #RADIO BUTTON
   ========================================================================== */
/**
 * makes a radio button look like a button
 * Expected HTML:
 * <input
 *     class="o-radio-button"
 *     id="id-needed"
 *     name="name-needed"
 *     type="radio"
 *     value="value-needed"
 * >
 * <label for="id-needed">I look like a button</label>
 */
.o-radio-button {
  cursor: pointer;
  opacity: 0;
  position: absolute;
}

.o-radio-button + label {
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: transparent;
  border: 1px solid #2b2b2b;
  color: #ffffff;
  content: '';
  display: block;
  height: 5.6rem;
  line-height: 5.6rem;
  min-width: 5.6rem;
  padding: 0 1rem;
  text-align: center;
}

.o-radio-button + label:hover {
  background: #2b2b2b;
}

.o-radio-button + label:focus {
  border-color: #ffffff;
}

.o-radio-button:checked + label {
  background: #ffffff;
  color: #000000;
}

/* ==========================================================================
   #SELECT
   ========================================================================== */
/**
 * Custom select:
 * HTML expected:
 * <label for="id-needed">Choose an option</label>
 * <select
 *     class="o-checkbox"
 *     id="id-needed"
 *     name="name-needed"
 * >
 *  <option value="">Choose</option>
 *  <option value="1">One</option>
 * </select>
 *
 * If a label isn't present, then add an aria-label attribute to the
 * select tag for WCAG 2.0 Level AA
 */
/**
  * 1. Remove arrow in Firefox/Safari/Chrome (needs autoprefix to work)
  * 2. Remove arrow on MSIE11
  */
.o-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* [1] */
  background: #000000 url("../img/select-white.svg") calc(100% - 25px) center no-repeat;
  border: 1px solid;
  border-radius: 0;
  color: #ffffff;
  font-family: dDinNormal, "sans-serif";
  padding: 1.9rem 5rem 2.1rem 2.3rem;
  width: 100%;
}

.o-select:focus {
  outline: 2px solid #88e287;
}

.o-select::-ms-expand {
  display: none;
  /* [2] */
}

.o-select--light {
  background-image: url("../img/select-grey.svg");
  border-color: #2b2b2b;
  color: #757575;
}

.o-select--light:focus {
  background-image: url("../img/select-white.svg");
  border-color: #ffffff;
  color: #ffffff;
  outline: 1px solid #88e287;
}

/* ==========================================================================
   #TIME LIST
   ========================================================================== */
/**
 * Handles a list of opening times
 */
.o-time-list {
  list-style: none;
}

.o-time-list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0;
  padding: 0;
}

.o-time-list__key,
.o-time-list__value {
  width: 50%;
}

/**
 * 1. Wraps on IE11 otherwise
 */
.o-time-list__value {
  white-space: nowrap;
  /* [1] */
}

/* ==========================================================================
   #WRAPPER
   ========================================================================== */
/**
 * Page-level constraining and wrapping elements.
 */
.o-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 1172px;
  padding-left: 25px;
  padding-right: 25px;
}

.o-wrapper:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

@media (min-width: 46em) {
  .o-wrapper--small {
    padding-left: 64px;
    padding-right: 64px;
  }
}

@media (min-width: 66em) {
  .o-wrapper--small {
    padding-left: 95px;
    padding-right: 95px;
  }
}

@media (min-width: 46em) {
  .o-wrapper--xsmall {
    padding-left: 128px;
    padding-right: 128px;
  }
}

@media (min-width: 66em) {
  .o-wrapper--xsmall {
    padding-left: 190px;
    padding-right: 190px;
  }
}

.o-wrapper--no-pad {
  padding-left: 0;
  padding-right: 0;
}

.o-wrapper--no-pad-mobile {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 46em) {
  .o-wrapper--no-pad-mobile {
    padding-left: 25px;
    padding-right: 25px;
  }
}

.o-form__label {
  font-family: dDinBold, "arial", "serif";
  font-size: 1.6rem;
  letter-spacing: 0.4rem;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.o-layout__contact-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.o-layout__contact-form label {
  color: #ffffff;
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}

/* ==========================================================================
   #BUTTONS
   ========================================================================== */
/**
 * 1. Force all button-styled elements to appear clickable.
 * 2. Allow us to style box model properties.
 * 3. Reset/normalize some styles.
 * 4. Line different sized buttons up a little nicer.
 */
.c-btn {
  border: none;
  /* [3] */
  border-radius: 0;
  /* [3] */
  cursor: pointer;
  /* [1] */
  display: inline-block;
  /* [2] */
  font-family: dDinBold, "arial", "serif";
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  margin: 0;
  /* [3] */
  text-align: center;
  /* [3] */
  text-decoration: none;
  /* [3] */
  vertical-align: middle;
  /* [4] */
}

.c-btn {
  background-color: #000000;
  border: 1px solid;
  color: #ffffff;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-property: opacity, background-color, color;
  transition-property: opacity, background-color, color;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
  /* Hover states
   ========================================================================== */
  /* Style variants
   ========================================================================== */
  /**
     * 5. Reset side padding on 100% width buttons
     *    so they always centrally align on mobile
     */
  /**
     * A right aligned button on desktop
     * but 100% width on mobile/device
     */
}

.c-btn:hover {
  color: #757575;
  cursor: url("../img/logo-white.svg"), auto;
}

.c-btn--box {
  margin-bottom: 3.2rem;
}

.c-btn--large {
  letter-spacing: 0.4rem;
  padding: 2.1rem 3.9rem;
  text-transform: uppercase;
}

.c-btn--inline {
  outline: none;
  padding: 1.8rem;
}

.c-btn--border {
  border: solid 1px #757575;
}

.c-btn--border:hover {
  border-color: #ffffff;
  color: #ffffff;
  opacity: 1;
}

.c-btn--medium {
  padding: 2.4rem 3.2rem;
}

.c-btn--small {
  padding: 1.6rem;
}

.c-btn--ample {
  width: 31.4rem;
}

.c-btn--wide {
  width: 38rem;
}

.c-btn--flex {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-btn--fullwidth {
  padding-left: 0;
  /* [5] */
  padding-right: 0;
  /* [5] */
  width: 100%;
}

.c-btn--submit {
  display: block;
  width: 100%;
}

@media (min-width: 66em) {
  .c-btn--submit {
    margin-left: auto;
    max-width: 50%;
  }
}

.c-btn--transparent {
  background-color: transparent;
}

.c-btn--regular {
  font-family: dDinNormal, "sans-serif";
}

.active:focus,
.focus:focus {
  outline: 2px solid #88e287;
}

/* ==========================================================================
   #OBJECTS
   ========================================================================== */
.c-text-image-block__region {
  background-image: url("../img/london.png");
  display: block;
  height: 54.5rem;
}

.c-text-image-block__list {
  padding: 3.2rem;
}

.c-text-image-block__list:before {
  border-top: solid 1px;
  content: '';
  height: 1px;
  opacity: .4px;
  position: absolute;
  width: 45rem;
}

.c-text-image-block__list--item {
  list-style-type: none;
}

.c-text-image-block__list--item:first-child {
  padding-top: 6.4rem;
}

.c-text-image-block__list--item h2 {
  display: inline-block;
}

/* ==========================================================================
   #SECTIONS
   ========================================================================== */
/**
 * The section component is a full-width wrapper of content. By default, it gives
 * a position relative wrapper to allow the line-grid component to position
 * correctly.
 */
.c-section {
  margin: 6.4rem 0;
  position: relative;
}

/* ==========================================================================
   #BACKGROUND
   ========================================================================== */
.c-background__image {
  -webkit-animation: fade-in 1s forwards;
          animation: fade-in 1s forwards;
  /* stylelint-disable-line no-unknown-animations */
  background-repeat: no-repeat;
  height: 100vh;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 10px;
  width: auto !important;
  z-index: -1;
}

/* ==========================================================================
   #BRANDING
   ========================================================================== */
.c-branding {
  position: relative;
}

.c-branding__icon {
  color: #2b2b2b;
  height: 67px;
  width: 67px;
}

.c-branding--tab .c-branding__icon {
  height: 96px;
  width: 96px;
}

@media (min-width: 66em) {
  .c-branding--tab .c-branding__icon {
    height: 134px;
    width: 134px;
  }
}

.c-branding__text {
  font-size: 2.8rem;
  font-weight: bold;
  letter-spacing: 0.07rem;
  margin-bottom: 0;
}

.c-branding--default .c-branding__text {
  left: 52px;
  top: 16.75px;
}

.c-branding .o-icon {
  fill: currentColor;
}

/* ==========================================================================
   #TABBED-HEADING
   ========================================================================== */
.c-tabbed-heading {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: -2.5rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 46em) {
  .c-tabbed-heading {
    margin-top: 8.5rem;
  }
}

@media (max-width: 45.99em) {
  .c-tabbed-heading {
    margin-left: 64px;
    margin-right: 64px;
  }
}

.c-tabbed-heading__tab {
  display: none;
  position: absolute;
  z-index: -1;
}

@media (min-width: 46em) {
  .c-tabbed-heading__tab {
    display: block;
    margin-left: -1rem;
  }
}

.c-tabbed-heading__text {
  margin: 0 auto;
}

@media (min-width: 46em) {
  .c-tabbed-heading__text {
    margin: 0 64px;
  }
}

@media (min-width: 66em) {
  .c-tabbed-heading__text {
    margin: 0 95px;
  }
}

.c-tabbed-heading-image {
  display: block;
}

@media (min-width: 46em) {
  .c-tabbed-heading-image {
    display: none;
  }
}

.c-tabbed-heading-content {
  display: block;
  line-height: 1.5;
  margin-bottom: 5rem;
  margin-left: 64px;
  margin-right: 64px;
  position: relative;
  z-index: 1;
}

@media (min-width: 66em) {
  .c-tabbed-heading-content {
    margin-bottom: 9rem;
    margin-left: 95px;
    max-width: 40rem;
  }
}

/* ==========================================================================
   #IMAGE-HEADER
   ========================================================================== */
.c-image-header {
  -webkit-animation: fade-in 2s forwards 500ms;
          animation: fade-in 2s forwards 500ms;
  /* stylelint-disable-line no-unknown-animations */
  margin: 0;
  opacity: 0;
}

@media (min-width: 46em) {
  .c-image-header {
    margin-top: 10rem;
  }
  .c-image-header__image-wrapper {
    width: 94%;
  }
  .c-image-header--left .c-image-header__image-wrapper {
    margin-right: auto;
  }
  .c-image-header--right .c-image-header__image-wrapper {
    margin-left: auto;
  }
}

@media (min-width: 66em) {
  .c-image-header {
    margin-top: 12rem;
  }
}

.c-image-header__image-wrapper {
  height: 0;
  padding-bottom: 89.6%;
  position: relative;
}

@media (min-width: 46em) {
  .c-image-header__image-wrapper {
    padding-bottom: 72%;
  }
}

@media (min-width: 66em) {
  .c-image-header__image-wrapper {
    padding-bottom: 44%;
  }
}

@media (min-width: 85em) {
  .c-image-header__image-wrapper {
    padding-bottom: 37.5%;
  }
}

@media (min-width: 120em) {
  .c-image-header__image-wrapper {
    padding-bottom: 33.3%;
  }
}

.c-image-header__image {
  height: 100%;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 45% 40%;
     object-position: 45% 40%;
  position: absolute;
  top: 0;
  width: 100%;
}

.c-image-header__image-top-gradient {
  display: none;
  position: absolute;
}

@media (max-width: 53.99em) {
  .c-image-header__image-top-gradient {
    background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(to bottom, #000000, rgba(0, 0, 0, 0));
    display: block;
    height: 80px;
    opacity: .3;
    top: 0;
    width: 100%;
  }
}

.c-image-header__image-bottom-gradient {
  background: -webkit-gradient(linear, left bottom, left top, from(#000000), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, #000000, rgba(0, 0, 0, 0));
  bottom: 0;
  height: 150px;
  opacity: .7;
  position: absolute;
  -webkit-transition: height .3s ease;
  transition: height .3s ease;
  width: 100%;
}

@media (max-width: 53.99em) {
  .c-image-header__image-bottom-gradient {
    height: 144px;
  }
}

.c-image-header__title {
  margin-top: -2.3rem;
  position: relative;
  text-align: center;
  z-index: 1;
}

@media (min-width: 46em) {
  .c-image-header__title {
    margin-top: -2.8rem;
    text-align: left;
  }
}

@media (min-width: 66em) {
  .c-image-header__title {
    margin-top: -3.7rem;
  }
}

.c-image-header__meta {
  margin-left: 0;
}

/* ==========================================================================
   #FOOTER
   ========================================================================== */
.c-footer__inner {
  border-top: 1px solid #2b2b2b;
  padding-top: 7.6rem;
}

@media (min-width: 46em) {
  .c-footer__inner {
    padding-top: 9.5rem;
  }
}

.c-footer__branding {
  display: inline-block;
  height: 67px;
  position: relative;
}

@media (min-width: 32em) {
  .c-footer__branding {
    display: block;
    height: 89px;
  }
}

@media (min-width: 66em) {
  .c-footer__branding {
    margin-left: 2.5rem;
  }
}

.c-footer .c-branding__icon {
  position: absolute;
  right: -57px;
  top: -12px;
  z-index: 0;
}

@media (min-width: 32em) {
  .c-footer .c-branding__icon {
    position: relative;
    right: auto;
    top: auto;
  }
}

.c-footer .c-branding__icon .o-icon__svg {
  fill: currentColor;
  height: 67px;
  width: 67px;
}

@media (min-width: 32em) {
  .c-footer .c-branding__icon .o-icon__svg {
    height: 89px;
    width: 89px;
  }
}

.c-footer .c-branding__text {
  left: auto;
  position: relative;
  top: auto;
  z-index: 1;
}

@media (min-width: 32em) {
  .c-footer .c-branding__text {
    left: 65px;
    position: absolute;
    top: 20px;
  }
}

@media (min-width: 66em) {
  .c-footer .c-branding__text {
    left: 70px;
    top: 20px;
  }
}

.c-footer__copyright {
  color: #adadad;
  margin-bottom: 7.2rem;
  margin-top: 4.5rem;
}

@media (min-width: 46em) {
  .c-footer__copyright {
    margin-top: -2.6rem;
  }
}

@media (min-width: 66em) {
  .c-footer__copyright {
    margin-left: 9.7rem;
    margin-top: -1.7rem;
  }
}

.c-footer__nav {
  padding-top: 1.8rem;
}

@media (min-width: 46em) {
  .c-footer__nav {
    padding-top: 3.1rem;
  }
}

.c-footer__nav-link {
  color: #adadad;
  display: block;
  padding: 0.4rem 0;
}

/* ==========================================================================
   #NEWSLETTER
   ========================================================================== */
.c-newsletter {
  margin-top: 7.5rem;
}

.c-newsletter .v-input {
  float: left;
  padding-top: 0;
  width: 70%;
  /**
            * 1 Avoid iOS zoom-in on-focus bug
            */
}

.c-newsletter .v-input .c-input-text {
  background-color: #000000;
  border: solid 1px #2b2b2b;
  color: #ffffff;
  font-size: 1.6rem;
  /* 1 */
  line-height: 1.5em;
  padding: 1.6rem;
  width: 100%;
}

.c-newsletter .v-input .c-input-text:focus {
  border: 1px solid #ffffff;
}

.c-newsletter .v-input .c-input-text::-webkit-input-placeholder {
  color: #757575;
  opacity: 1;
}

.c-newsletter .v-input .c-input-text::-moz-placeholder {
  color: #757575;
  opacity: 1;
}

.c-newsletter .v-input .c-input-text::-ms-input-placeholder {
  color: #757575;
  opacity: 1;
}

.c-newsletter .v-input .c-input-text::placeholder {
  color: #757575;
  opacity: 1;
}

.c-newsletter .v-input .c-input-text.error {
  border-color: #ff7373;
}

.c-newsletter button {
  border-color: #2b2b2b;
  color: #adadad;
  font-size: initial;
  line-height: 2.4rem;
  padding: 1.6rem;
  width: 30%;
}

.c-newsletter button:hover, .c-newsletter button:focus {
  color: #ffffff;
}

.c-newsletter button:focus {
  border: 1px solid #ffffff;
}

.c-newsletter label {
  color: #757575;
}

.c-newsletter__field {
  clear: both;
}

.c-newsletter .mc-interests-wrapper label {
  display: block;
}

/* ==========================================================================
   #NAV
   ========================================================================== */
.c-nav {
  height: 100%;
  position: absolute;
  top: 25%;
  width: 100%;
}

@media (min-width: 46em) {
  .c-nav {
    left: 0%;
    top: 45%;
  }
}

.c-nav .c-nav__list {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 35%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style: none;
  margin: 0;
}

@media (min-width: 46em) {
  .c-nav .c-nav__list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: auto;
    margin: 0 auto;
    max-width: 1192px;
    padding: 0 1rem;
  }
  .c-nav .c-nav__list:hover {
    color: #757575;
  }
}

.c-nav .c-nav__item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 25%;
          flex: 1 0 25%;
  text-align: center;
}

@media (min-width: 46em) {
  .c-nav .c-nav__item {
    display: block;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    list-style-type: none;
  }
  .c-nav .c-nav__item:not(:first-child) {
    margin-left: 3.2rem;
  }
}

@media (max-width: 45.99em) {
  .c-nav .c-nav__item--last-item {
    margin-bottom: 6.4rem;
  }
}

.c-nav .c-nav__link {
  color: currentColor;
  /**
         * 1. hide with background size as this allows us to preload the
         *    background-image before our first hover state
         */
}

@media (min-width: 46em) {
  .c-nav .c-nav__link {
    background: transparent url("../img/logo-grey.svg") center center no-repeat;
    background-size: 0 0;
    /* [1] */
    display: block;
    min-height: 72px;
    min-width: 72px;
    padding-top: 1.5rem;
  }
  .c-nav .c-nav__link:hover {
    background-size: 72px 72px;
    color: #ffffff;
  }
}

.c-nav .c-nav__text {
  color: #757575;
  letter-spacing: 0.4rem;
  margin-bottom: 3.2rem;
  text-align: center;
  width: 280px;
}

@media (min-width: 46em) {
  .c-nav .c-nav__text {
    bottom: 20px;
    left: 50%;
    position: fixed;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: 100%;
  }
}

.c-nav-menu--active + .c-top-panel .c-top-panel__action {
  display: none;
}

/**
 * --- Animation settings ---
 */
/**
 * Nav slide out motion settings.
 * Usally when a user clicks the hamburger but can be triggered elsewhere.
 */
/**
 * Main menu overlay settings.
 * Typically after clicking link in main nav menu list to cover main nav
 */
/**
 * Shared positioning for menu and menu bg
 */
.c-nav-menu {
  bottom: 0;
  min-height: 100%;
  right: -100%;
  top: 0;
  width: 100%;
}

.c-nav-menu--bg, .c-nav-menu--slide {
  bottom: 0;
  min-height: 100%;
  opacity: 0;
  overflow-x: scroll;
  position: fixed;
  right: -100%;
  top: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  width: 100%;
  z-index: 30;
}

@media (max-width: 45.99em) {
  .c-nav-menu--bg, .c-nav-menu--slide {
    overflow-y: scroll;
  }
}

.c-nav-menu--active .c-nav-menu--bg, .c-nav-menu--active .c-nav-menu--slide {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}

.c-nav-menu--bg {
  background-color: #000000;
}

.c-nav-menu--bg--image {
  background-position: right;
  background-repeat: no-repeat;
  height: 100vh;
  position: absolute;
  right: 0;
  top: 10px;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-timing-function: opacity;
          transition-timing-function: opacity;
  width: auto !important;
}

.c-nav-menu--slide {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}

/* ==========================================================================
   #TOP PANEL
   ========================================================================== */
.c-top-panel {
  -webkit-animation: fade-in 1s forwards 500ms;
          animation: fade-in 1s forwards 500ms;
  /* stylelint-disable-line no-unknown-animations */
  background: #000000;
  height: 76px;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 60;
}

@media (min-width: 54em) {
  .c-top-panel {
    height: 100px;
  }
}

@media (min-width: 66em) {
  .c-top-panel {
    height: 120px;
  }
}

.c-top-panel--top {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(75%, rgba(0, 0, 0, 0.35)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0) 100%);
  height: auto;
}

.c-top-panel__branding {
  left: 50%;
  position: absolute;
  top: 23px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media (min-width: 46em) {
  .c-top-panel__branding {
    float: left;
    left: auto;
    margin-top: 3.5rem;
    position: relative;
    top: auto;
    -webkit-transform: none;
            transform: none;
  }
}

@media (min-width: 66em) {
  .c-top-panel__branding {
    margin-top: 4.3rem;
  }
}

.c-top-panel .c-branding__text {
  font-size: 2.4rem;
  letter-spacing: 0.05rem;
  line-height: 1.33em;
}

.c-top-panel__action {
  position: absolute;
  right: 25px;
  top: 35px;
}

@media (min-width: 66em) {
  .c-top-panel__action {
    top: 40px;
  }
}

.c-top-panel__action-mobile {
  display: block;
}

.c-top-panel__action-list {
  display: block;
  margin: 0 -1.5rem;
}

.c-top-panel__action-item {
  display: inline-block;
  margin: 0 1.5rem;
}

.c-top-panel__action-item:focus {
  outline: 2px solid #88e287;
}

/* ==========================================================================
   #HERO
   ========================================================================== */
.c-hero {
  background-color: #000000;
  height: 100vh;
  position: relative;
  width: 100%;
}

.c-hero:after {
  -webkit-box-shadow: 0 0 400px black inset;
          box-shadow: 0 0 400px black inset;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.c-hero__background-image {
  -webkit-animation: fade-in 200ms forwards;
          animation: fade-in 200ms forwards;
  /* stylelint-disable-line no-unknown-animations */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media (min-width: 66em) {
  .c-hero__background-image--video {
    background-image: none !important;
  }
}

.c-hero__background-video {
  height: 100%;
  width: 100%;
}

@media (max-width: 65.99em) {
  .c-hero__background-video {
    display: none;
  }
}

.c-hero__intro-text {
  -webkit-animation: fade-in 1s forwards 500ms;
          animation: fade-in 1s forwards 500ms;
  /* stylelint-disable-line no-unknown-animations */
  bottom: 3.2rem;
  left: 0;
  letter-spacing: 0.4rem;
  opacity: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 1;
}

.c-hero__subtitle {
  color: #adadad;
}

.c-hero__subtitle:focus {
  outline: 2px solid #88e287;
}

.c-staggered-box {
  color: #ffffff;
  position: relative;
  /**
    * 1. We are expecting an image that is 576x544 from Tablet upwards
    */
}

@media (min-width: 32em) {
  .c-staggered-box-parent--alt {
    margin-left: 20%;
  }
}

@media (min-width: 66em) {
  .c-staggered-box-parent--alt {
    margin-left: 0;
  }
}

.c-staggered-box--alt {
  border-top: 1px solid #757575;
  padding-top: 4.7rem;
}

@media (min-width: 32em) {
  .c-staggered-box--alt {
    border-top: none;
    padding-top: 0;
  }
}

@media (min-width: 66em) {
  .c-staggered-box--alt {
    -webkit-transform: translateY(-145px);
            transform: translateY(-145px);
  }
}

.c-staggered-box__image-wrapper {
  height: 0;
  position: relative;
}

@media (min-width: 32em) {
  .c-staggered-box__image-wrapper {
    padding-bottom: 94%;
    /* [1] */
  }
}

.c-staggered-box__image-wrapper:after {
  background: rgba(0, 0, 0, 0.54);
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.c-staggered-box__image, .c-staggered-box__image--default {
  display: none;
}

@media (min-width: 32em) {
  .c-staggered-box__image, .c-staggered-box__image--default {
    display: block;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    -webkit-transition-duration: 0.7s;
            transition-duration: 0.7s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
    width: 100%;
  }
}

@media (min-width: 32em) {
  .c-staggered-box__image {
    opacity: 0;
  }
}

@media (min-width: 32em) {
  .c-staggered-box--engaged .c-staggered-box__image--active {
    opacity: 1;
  }
}

.c-staggered-box__image--default {
  opacity: 1;
}

@media (min-width: 32em) {
  .c-staggered-box--engaged .c-staggered-box__image--default {
    opacity: .5;
  }
}

@media (min-width: 32em) {
  .c-staggered-box--engaged.c-staggered-box--active .c-staggered-box__image--default {
    opacity: 0;
  }
}

@media (min-width: 32em) {
  .c-staggered-box__copy {
    height: 100%;
    left: 0;
    padding: 5rem;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

@media (min-width: 66em) {
  .c-staggered-box__copy {
    padding: 4.5rem 5.5rem;
  }
}

.c-staggered-box__country {
  -webkit-transition-duration: 0.7s;
          transition-duration: 0.7s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}

.c-staggered-box--engaged .c-staggered-box__country {
  opacity: .4;
}

.c-staggered-box--engaged .c-staggered-box__country--active {
  opacity: 1;
}

.c-staggered-box__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

@media (min-width: 32em) {
  .c-staggered-box__list {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    margin-top: 2rem;
    padding-top: 3rem;
    -webkit-transition-duration: 0.7s;
            transition-duration: 0.7s;
    -webkit-transition-property: border;
    transition-property: border;
    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
  }
  .c-staggered-box--engaged .c-staggered-box__list {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
}

.c-staggered-box__list-item {
  display: block;
  margin: 1rem 0 0;
  padding: 0;
  -webkit-transition-duration: 0.7s;
          transition-duration: 0.7s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}

.c-staggered-box--engaged .c-staggered-box__list-item {
  opacity: .4;
}

.c-staggered-box--engaged .c-staggered-box__list-item--active {
  opacity: 1;
}

.c-staggered-box__list-link {
  display: block;
}

.c-staggered-box__list-link--inactive {
  color: #757575;
}

@media (min-width: 32em) {
  .c-staggered-box__list-link--inactive {
    color: inherit;
  }
}

.c-staggered-box__list-link .o-icon__svg {
  display: inline-block;
  fill: currentColor;
  height: 17px;
  margin-left: 1.7rem;
  position: relative;
  top: 4px;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  width: 20px;
}

@media (min-width: 32em) {
  .c-staggered-box__list-link .o-icon__svg {
    display: none;
  }
}

.c-staggered-box__restaurant {
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  vertical-align: middle;
  /**
        * 1 Avoid our arrow breaking onto a new line on
        * mobile
        */
}

@media (min-width: 32em) {
  .c-staggered-box__restaurant {
    margin-right: 1.4rem;
  }
}

.c-staggered-box__list-link--active .c-staggered-box__restaurant {
  max-width: calc(100% - 45px);
  /* 1 */
}

@media (min-width: 32em) {
  .c-staggered-box__list-link--active .c-staggered-box__restaurant {
    max-width: none;
  }
}

.c-staggered-box__status {
  display: block;
  margin-top: 1rem;
}

@media (min-width: 32em) {
  .c-staggered-box__status {
    display: inline-block;
    vertical-align: middle;
  }
}

.c-staggered-box__button {
  display: none;
}

@media (min-width: 66em) {
  .c-staggered-box__button {
    display: block;
    float: right;
    margin-right: 10rem;
    margin-top: 11.5rem;
  }
}

/* ==========================================================================
   #LOCATION-LIST
   ========================================================================== */
/**
 * Max-width settings across devices
 */
/**
 * 1. Fake vertically centre the list, don't use flexbox
 *    because if the list gets very long this won't look
 *    good
 */
.c-location-list {
  margin: 0 auto 5rem;
  max-width: 100%;
  min-height: 100vh;
  padding-top: 25vh;
  /* [1] */
  /**
     * 2 Allow footer to peak through at bottom of short page
     * 3 Set a px value for consistency on desktops. We don't
     *   a too tall a gap on wide but not tall screens
     */
}

@media (min-width: 46em) {
  .c-location-list {
    margin-bottom: 10rem;
    max-width: 380px;
    padding-top: 35vh;
    /* [1] */
  }
}

@media (min-width: 66em) {
  .c-location-list {
    max-width: 395px;
    min-height: calc(100vh - 210px);
    /* 2 */
    padding-top: 27.5rem;
    /* 3 */
  }
}

/**
 * 4 Force line break without using a <br>
 */
.c-location-list__title {
  margin: 0 auto 4.5rem;
  max-width: 9em;
  /* 4 */
}

@media (min-width: 46em) {
  .c-location-list__title {
    max-width: 395px;
    /* 4 */
  }
}

@media (min-width: 66em) {
  .c-location-list__title {
    max-width: 380px;
  }
}

.c-location-list__list {
  list-style: none;
  margin: 0 auto;
  max-width: 395px;
  padding: 0;
  width: 100%;
}

.c-location-list__item {
  display: block;
  margin: 0 0 1rem;
  padding: 0;
}

@media (min-width: 46em) {
  .c-location-list__item {
    margin-bottom: 2rem;
  }
}

.c-location-list__link {
  display: block;
}

#CybotCookiebotDialog {
  border: solid 1px #757575 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  left: 1.6rem !important;
  max-height: 99vh !important;
  overflow-y: auto !important;
  padding-bottom: 0 !important;
  right: 1.6rem !important;
  -webkit-transform: scale(1) !important;
          transform: scale(1) !important;
  width: auto !important;
}

@media (min-width: 85em) {
  #CybotCookiebotDialog {
    left: calc((100% - 1334px) / 2) !important;
    right: calc((100% - 1334px) / 2) !important;
  }
}

#CybotCookiebotDialog #CybotCookiebotDialogBody {
  padding-bottom: 3.2rem;
  padding-top: 3.2rem;
}

@media (min-width: 46em) {
  #CybotCookiebotDialog #CybotCookiebotDialogBody {
    padding-bottom: 4rem;
    padding-top: 4rem;
  }
}

#CybotCookiebotDialog #CybotCookiebotDialogDetailBody {
  padding-bottom: 16px;
  width: auto;
}

#CybotCookiebotDialog #CybotCookiebotDialogBody,
#CybotCookiebotDialog #CybotCookiebotDialogDetailBody {
  max-width: 1168px;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (min-width: 42em) {
  #CybotCookiebotDialog #CybotCookiebotDialogBody,
  #CybotCookiebotDialog #CybotCookiebotDialogDetailBody {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContent {
  padding: 0;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle {
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.3;
  letter-spacing: 0;
  font-family: dDinBold, "arial", "serif";
  margin-bottom: 1.6rem;
  margin-top: 0;
}

@media (min-width: 46em) {
  #CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  #CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentText {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: #adadad;
  font-family: dDinNormal, "sans-serif";
  margin-bottom: 0.8rem;
  max-width: 870px;
}

@media (min-width: 46em) {
  #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

#CybotCookiebotDialog,
#CybotCookiebotDialog #CybotCookiebotDialogDetail {
  background-color: #000000 !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyButtons {
  margin-bottom: 0;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  border: 4px solid #ffffff;
  font-family: dDinNormal, "sans-serif";
  font-weight: normal;
  margin-top: 1.6rem;
  max-width: 224px;
  min-width: 224px;
  padding-bottom: 1.2rem;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
  padding-top: 1.2rem;
  white-space: normal;
}

@media (min-width: 46em) {
  #CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  #CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

@media (max-width: 45.99em) {
  #CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
    display: block;
    margin-right: 0 !important;
    max-width: none;
    min-width: auto;
    width: auto !important;
  }
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonDecline {
  background-color: transparent;
  color: #ffffff;
  display: inline-block !important;
  margin: 16px 16px 0 0;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonAccept {
  background-color: #ffffff;
  color: #000000;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyLink {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  background-image: none;
  border: 0;
  font-family: dDinNormal, "sans-serif";
  font-weight: 200;
  margin-top: 2.4rem;
  padding-top: 0;
  position: relative;
}

@media (min-width: 46em) {
  #CybotCookiebotDialog #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyLink {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  #CybotCookiebotDialog #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyLink {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyLink:after {
  background-image: url("../img/select-white.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 1.6rem;
}

@media (max-width: 45.99em) {
  #CybotCookiebotDialog #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyLink {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelDetailsButtonExpanded,
#CybotCookiebotDialog .CybotCookiebotDialogBodyLinkExpanded {
  background-image: none !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelDetailsButtonExpanded:after,
#CybotCookiebotDialog .CybotCookiebotDialogBodyLinkExpanded:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

#CybotCookiebotDialog #CybotCookiebotDialogDetailBodyContentTextOverview {
  display: block;
}

/* ==========================================================================
   #INFO BLOCK
   ========================================================================== */
/**
 * Custom CSS checkbox
 * Expected HTML:
 * <div class="c-info-block">
 *  <h2 class="c-info-block__title">Heading</h2>
 *  <div class="c-info-block__content">HTML content in here</div>
 * </div>
 */
@media (min-width: 66em) {
  .c-info-block {
    margin-top: 7.2rem;
  }
  .c-info-block + .c-info-block {
    margin-top: 0;
  }
}

/* ==========================================================================
   #CAREER LIST
   ========================================================================== */
.c-career-list {
  margin-bottom: 6.4rem;
  margin-top: 6.4rem;
}

@media (min-width: 46em) {
  .c-career-list {
    margin-top: 6.4rem;
  }
}

.c-career-list__item {
  margin-bottom: 1.6rem;
}

.c-career-list__btn {
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

@media (min-width: 22em) {
  .c-career-list__btn {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
}

@media (min-width: 46em) {
  .c-career-list__btn {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
  }
}

@media (min-width: 66em) {
  .c-career-list__btn {
    -webkit-transform: none;
            transform: none;
  }
}

/* ==========================================================================
   #APPLY HEADER
   ========================================================================== */
.c-apply-header {
  position: relative;
}

.c-apply-header__icon {
  fill: #757575;
  height: 1.7rem;
  left: -40px;
  position: absolute;
  top: 8px;
  width: 2rem;
}

@media (min-width: 66em) {
  .c-apply-header__icon {
    left: -60px;
  }
}

.c-apply-header__icon:hover {
  fill: #adadad;
}

/* ==========================================================================
   #NOTICE
   ========================================================================== */
.c-notice {
  display: block;
  width: 270px;
  z-index: 40;
  /**
     * Position
     */
  /**
     * Themes
     */
}

.c-notice__wrapper {
  padding: 3.2rem;
}

.c-notice__text {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 3;
  color: #adadad;
}

.c-notice__text a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
}

.c-notice--fixed {
  bottom: 16px;
  position: fixed;
  right: 16px;
}

.c-notice--neutral {
  background: #000000;
  border: 1px solid #ffffff;
}

.c-wysiwyg-content {
  border-bottom: 0;
  border-left: 0;
}

.c-wysiwyg-content table {
  border: 1px #2b2b2b solid;
  position: relative;
}

@media (min-width: 46em) {
  .c-wysiwyg-content table {
    min-width: 78vw;
  }
}

.c-wysiwyg-content tbody {
  display: block;
  overflow-x: scroll;
  width: 90vw;
}

@media (min-width: 46em) {
  .c-wysiwyg-content tbody {
    display: table-row-group;
  }
}

.c-wysiwyg-content tbody tr td,
.c-wysiwyg-content tbody tr th {
  border-bottom: 1px #2b2b2b solid;
  border-left: 1px #2b2b2b solid;
  border-right: 0;
  border-top: 0;
  font-size: inherit;
  line-height: 1.33;
  min-width: 10rem;
  padding: 1rem 1.5rem;
  vertical-align: top;
}

table .c-wysiwyg-content p {
  font-size: inherit;
}

/* ==========================================================================
   #APPLY-FORM - Gravity Form ID 1
   (Overrides for base Gravity form styling)
   ========================================================================== */
#gform_wrapper_1 {
  font-size: initial;
}

#gform_wrapper_1 input,
#gform_wrapper_1 textarea {
  background: transparent;
  border: 1px solid #2b2b2b;
  color: #ffffff;
  display: block;
  font-family: dDinNormal, "sans-serif";
  font-size: initial;
  outline: none;
  padding: 2.2rem 2.3rem 2rem;
  vertical-align: middle;
  width: 100%;
}

#gform_wrapper_1 input::-webkit-input-placeholder,
#gform_wrapper_1 textarea::-webkit-input-placeholder {
  color: #757575;
  opacity: 1;
}

#gform_wrapper_1 input::-moz-placeholder,
#gform_wrapper_1 textarea::-moz-placeholder {
  color: #757575;
  opacity: 1;
}

#gform_wrapper_1 input::-ms-input-placeholder,
#gform_wrapper_1 textarea::-ms-input-placeholder {
  color: #757575;
  opacity: 1;
}

#gform_wrapper_1 input::placeholder,
#gform_wrapper_1 textarea::placeholder {
  color: #757575;
  opacity: 1;
}

#gform_wrapper_1 input:focus,
#gform_wrapper_1 textarea:focus {
  border-color: #ffffff;
  color: #ffffff;
  outline: 1px solid #88e287;
}

#gform_wrapper_1 #gform_submit_button_1 {
  background-color: #000000;
  border: 1px solid;
  color: #ffffff;
  font-family: dDinBold, "arial", "serif";
  letter-spacing: 0.4rem;
  line-height: 1.5em;
  margin-left: auto;
  max-width: 50%;
  text-transform: uppercase;
  -webkit-transition: all .3s ease 50ms;
  transition: all .3s ease 50ms;
  vertical-align: middle;
  width: 100%;
}

#gform_wrapper_1 #gform_submit_button_1:hover {
  cursor: url("../img/logo-white.svg"), auto;
  opacity: .5;
}

#gform_wrapper_1.gform_validation_error .validation_error,
#gform_wrapper_1.gform_validation_error .gfield_error,
#gform_wrapper_1.gform_validation_error .validation_message {
  background-color: rgba(0, 0, 0, 0);
  border-width: 0;
  color: #ffffff;
}

.gform_ajax_spinner {
  display: none;
}

@media (min-width: 46em) {
  #field_1_1,
  #field_1_2 {
    display: inline-block;
    width: 50%;
  }
}

.gform_wrapper .top_label .gfield_label, .gform_wrapper legend.gfield_label {
  font-family: dDinBold, "arial", "serif";
  font-size: 1.6rem;
  letter-spacing: 0.4rem;
  line-height: 1.5em;
  text-transform: uppercase;
}

.gfield_required {
  color: #ffffff !important;
}

#gform_wrapper_1.gform_wrapper.gform_validation_error .gfield_contains_required .medium {
  border-color: #ffffff;
}

#gform_wrapper_1.gform_wrapper.gform_validation_error .gfield_contains_required.gfield_error .medium {
  border-color: #ff7373;
}

#gform_wrapper_1.gform_wrapper.gform_validation_error .gfield_contains_required.gfield_error .gfield_required {
  color: #ff7373 !important;
}

#gform_wrapper_1.gform_wrapper.gform_validation_error #field_1_1.gfield_error,
#gform_wrapper_1.gform_wrapper.gform_validation_error #field_1_2.gfield_error {
  padding-right: 1.6rem;
}

#gform_wrapper_1.gform_wrapper.gform_validation_error .validation_message {
  color: #ff7373 !important;
}

#gform_wrapper_1.gform_wrapper.gform_validation_error .gfield_error .gfield_label {
  font-family: dDinBold, "arial", "serif";
  color: #ff7373;
  font-size: 1.6rem;
  letter-spacing: 0.4rem;
  line-height: 1.5em;
  text-transform: uppercase;
}

.gform_confirmation_message {
  font-size: initial;
}

/* ==========================================================================
   #CLEARFIX
   ========================================================================== */
/**
 * Attach our clearfix mixin to a utility class.
 */
.u-clearfix:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

/* ==========================================================================
   #WIDTHS
   ========================================================================== */
/**
 * inuitcss generates a series of utility classes that give a fluid width to
 * whichever element they’re applied, e.g.:
 *
 *   <img src="" alt="" class="u-1/2" />
 *
 * These classes are most commonly used in conjunction with our layout system,
 * e.g.:
 *
 *   <div class="o-layout__item  u-1/2">
 *
 * By default, inuitcss will also generate responsive variants of each of these
 * classes by using your Sass MQ configuration, e.g.:
 *
 *   <div class="o-layout__item  u-1/1  u-1/2@tablet  u-1/3@desktop">
 *
 * Optionally, inuitcss can generate offset classes which can push and pull
 * elements left and right by a specified amount, e.g.:
 *
 *   <div class="o-layout__item  u-2/3  u-pull-1/3">
 *
 * This is useful for making very granular changes to the rendered order of
 * items in a layout.
 *
 * N.B. This option is turned off by default.
 */
/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in
 * your markup:
 *
 * <div class="u-7/12">
 *
 * The following will generate widths helper classes based on the fractions
 * defined in the `$inuit-fractions` list.
 */
.u-1\/1 {
  width: 100% !important;
}

.u-1\/2 {
  width: 50% !important;
}

.u-2\/2 {
  width: 100% !important;
}

.u-1\/3 {
  width: 33.33333333% !important;
}

.u-2\/3 {
  width: 66.66666667% !important;
}

.u-3\/3 {
  width: 100% !important;
}

.u-1\/4 {
  width: 25% !important;
}

.u-2\/4 {
  width: 50% !important;
}

.u-3\/4 {
  width: 75% !important;
}

.u-4\/4 {
  width: 100% !important;
}

.u-1\/5 {
  width: 20% !important;
}

.u-2\/5 {
  width: 40% !important;
}

.u-3\/5 {
  width: 60% !important;
}

.u-4\/5 {
  width: 80% !important;
}

.u-5\/5 {
  width: 100% !important;
}

.u-1\/6 {
  width: 16.66666667% !important;
}

.u-2\/6 {
  width: 33.33333333% !important;
}

.u-3\/6 {
  width: 50% !important;
}

.u-4\/6 {
  width: 66.66666667% !important;
}

.u-5\/6 {
  width: 83.33333333% !important;
}

.u-6\/6 {
  width: 100% !important;
}

.u-1\/8 {
  width: 12.5% !important;
}

.u-2\/8 {
  width: 25% !important;
}

.u-3\/8 {
  width: 37.5% !important;
}

.u-4\/8 {
  width: 50% !important;
}

.u-5\/8 {
  width: 62.5% !important;
}

.u-6\/8 {
  width: 75% !important;
}

.u-7\/8 {
  width: 87.5% !important;
}

.u-8\/8 {
  width: 100% !important;
}

.u-1\/10 {
  width: 10% !important;
}

.u-2\/10 {
  width: 20% !important;
}

.u-3\/10 {
  width: 30% !important;
}

.u-4\/10 {
  width: 40% !important;
}

.u-5\/10 {
  width: 50% !important;
}

.u-6\/10 {
  width: 60% !important;
}

.u-7\/10 {
  width: 70% !important;
}

.u-8\/10 {
  width: 80% !important;
}

.u-9\/10 {
  width: 90% !important;
}

.u-10\/10 {
  width: 100% !important;
}

/**
 * If we’re using Sass-MQ, automatically generate grid system(s) for each of our
 * defined breakpoints, and give them a Responsive Suffix, e.g.:
 *
 * <div class="u-3/12@mobile">
 */
@media (min-width: 18em) {
  .u-1\/1\@tinyPalm {
    width: 100% !important;
  }
  .u-1\/2\@tinyPalm {
    width: 50% !important;
  }
  .u-2\/2\@tinyPalm {
    width: 100% !important;
  }
  .u-1\/3\@tinyPalm {
    width: 33.33333333% !important;
  }
  .u-2\/3\@tinyPalm {
    width: 66.66666667% !important;
  }
  .u-3\/3\@tinyPalm {
    width: 100% !important;
  }
  .u-1\/4\@tinyPalm {
    width: 25% !important;
  }
  .u-2\/4\@tinyPalm {
    width: 50% !important;
  }
  .u-3\/4\@tinyPalm {
    width: 75% !important;
  }
  .u-4\/4\@tinyPalm {
    width: 100% !important;
  }
  .u-1\/5\@tinyPalm {
    width: 20% !important;
  }
  .u-2\/5\@tinyPalm {
    width: 40% !important;
  }
  .u-3\/5\@tinyPalm {
    width: 60% !important;
  }
  .u-4\/5\@tinyPalm {
    width: 80% !important;
  }
  .u-5\/5\@tinyPalm {
    width: 100% !important;
  }
  .u-1\/6\@tinyPalm {
    width: 16.66666667% !important;
  }
  .u-2\/6\@tinyPalm {
    width: 33.33333333% !important;
  }
  .u-3\/6\@tinyPalm {
    width: 50% !important;
  }
  .u-4\/6\@tinyPalm {
    width: 66.66666667% !important;
  }
  .u-5\/6\@tinyPalm {
    width: 83.33333333% !important;
  }
  .u-6\/6\@tinyPalm {
    width: 100% !important;
  }
  .u-1\/8\@tinyPalm {
    width: 12.5% !important;
  }
  .u-2\/8\@tinyPalm {
    width: 25% !important;
  }
  .u-3\/8\@tinyPalm {
    width: 37.5% !important;
  }
  .u-4\/8\@tinyPalm {
    width: 50% !important;
  }
  .u-5\/8\@tinyPalm {
    width: 62.5% !important;
  }
  .u-6\/8\@tinyPalm {
    width: 75% !important;
  }
  .u-7\/8\@tinyPalm {
    width: 87.5% !important;
  }
  .u-8\/8\@tinyPalm {
    width: 100% !important;
  }
  .u-1\/10\@tinyPalm {
    width: 10% !important;
  }
  .u-2\/10\@tinyPalm {
    width: 20% !important;
  }
  .u-3\/10\@tinyPalm {
    width: 30% !important;
  }
  .u-4\/10\@tinyPalm {
    width: 40% !important;
  }
  .u-5\/10\@tinyPalm {
    width: 50% !important;
  }
  .u-6\/10\@tinyPalm {
    width: 60% !important;
  }
  .u-7\/10\@tinyPalm {
    width: 70% !important;
  }
  .u-8\/10\@tinyPalm {
    width: 80% !important;
  }
  .u-9\/10\@tinyPalm {
    width: 90% !important;
  }
  .u-10\/10\@tinyPalm {
    width: 100% !important;
  }
}

@media (min-width: 22em) {
  .u-1\/1\@smallPalm {
    width: 100% !important;
  }
  .u-1\/2\@smallPalm {
    width: 50% !important;
  }
  .u-2\/2\@smallPalm {
    width: 100% !important;
  }
  .u-1\/3\@smallPalm {
    width: 33.33333333% !important;
  }
  .u-2\/3\@smallPalm {
    width: 66.66666667% !important;
  }
  .u-3\/3\@smallPalm {
    width: 100% !important;
  }
  .u-1\/4\@smallPalm {
    width: 25% !important;
  }
  .u-2\/4\@smallPalm {
    width: 50% !important;
  }
  .u-3\/4\@smallPalm {
    width: 75% !important;
  }
  .u-4\/4\@smallPalm {
    width: 100% !important;
  }
  .u-1\/5\@smallPalm {
    width: 20% !important;
  }
  .u-2\/5\@smallPalm {
    width: 40% !important;
  }
  .u-3\/5\@smallPalm {
    width: 60% !important;
  }
  .u-4\/5\@smallPalm {
    width: 80% !important;
  }
  .u-5\/5\@smallPalm {
    width: 100% !important;
  }
  .u-1\/6\@smallPalm {
    width: 16.66666667% !important;
  }
  .u-2\/6\@smallPalm {
    width: 33.33333333% !important;
  }
  .u-3\/6\@smallPalm {
    width: 50% !important;
  }
  .u-4\/6\@smallPalm {
    width: 66.66666667% !important;
  }
  .u-5\/6\@smallPalm {
    width: 83.33333333% !important;
  }
  .u-6\/6\@smallPalm {
    width: 100% !important;
  }
  .u-1\/8\@smallPalm {
    width: 12.5% !important;
  }
  .u-2\/8\@smallPalm {
    width: 25% !important;
  }
  .u-3\/8\@smallPalm {
    width: 37.5% !important;
  }
  .u-4\/8\@smallPalm {
    width: 50% !important;
  }
  .u-5\/8\@smallPalm {
    width: 62.5% !important;
  }
  .u-6\/8\@smallPalm {
    width: 75% !important;
  }
  .u-7\/8\@smallPalm {
    width: 87.5% !important;
  }
  .u-8\/8\@smallPalm {
    width: 100% !important;
  }
  .u-1\/10\@smallPalm {
    width: 10% !important;
  }
  .u-2\/10\@smallPalm {
    width: 20% !important;
  }
  .u-3\/10\@smallPalm {
    width: 30% !important;
  }
  .u-4\/10\@smallPalm {
    width: 40% !important;
  }
  .u-5\/10\@smallPalm {
    width: 50% !important;
  }
  .u-6\/10\@smallPalm {
    width: 60% !important;
  }
  .u-7\/10\@smallPalm {
    width: 70% !important;
  }
  .u-8\/10\@smallPalm {
    width: 80% !important;
  }
  .u-9\/10\@smallPalm {
    width: 90% !important;
  }
  .u-10\/10\@smallPalm {
    width: 100% !important;
  }
}

@media (min-width: 32em) {
  .u-1\/1\@mediumPalm {
    width: 100% !important;
  }
  .u-1\/2\@mediumPalm {
    width: 50% !important;
  }
  .u-2\/2\@mediumPalm {
    width: 100% !important;
  }
  .u-1\/3\@mediumPalm {
    width: 33.33333333% !important;
  }
  .u-2\/3\@mediumPalm {
    width: 66.66666667% !important;
  }
  .u-3\/3\@mediumPalm {
    width: 100% !important;
  }
  .u-1\/4\@mediumPalm {
    width: 25% !important;
  }
  .u-2\/4\@mediumPalm {
    width: 50% !important;
  }
  .u-3\/4\@mediumPalm {
    width: 75% !important;
  }
  .u-4\/4\@mediumPalm {
    width: 100% !important;
  }
  .u-1\/5\@mediumPalm {
    width: 20% !important;
  }
  .u-2\/5\@mediumPalm {
    width: 40% !important;
  }
  .u-3\/5\@mediumPalm {
    width: 60% !important;
  }
  .u-4\/5\@mediumPalm {
    width: 80% !important;
  }
  .u-5\/5\@mediumPalm {
    width: 100% !important;
  }
  .u-1\/6\@mediumPalm {
    width: 16.66666667% !important;
  }
  .u-2\/6\@mediumPalm {
    width: 33.33333333% !important;
  }
  .u-3\/6\@mediumPalm {
    width: 50% !important;
  }
  .u-4\/6\@mediumPalm {
    width: 66.66666667% !important;
  }
  .u-5\/6\@mediumPalm {
    width: 83.33333333% !important;
  }
  .u-6\/6\@mediumPalm {
    width: 100% !important;
  }
  .u-1\/8\@mediumPalm {
    width: 12.5% !important;
  }
  .u-2\/8\@mediumPalm {
    width: 25% !important;
  }
  .u-3\/8\@mediumPalm {
    width: 37.5% !important;
  }
  .u-4\/8\@mediumPalm {
    width: 50% !important;
  }
  .u-5\/8\@mediumPalm {
    width: 62.5% !important;
  }
  .u-6\/8\@mediumPalm {
    width: 75% !important;
  }
  .u-7\/8\@mediumPalm {
    width: 87.5% !important;
  }
  .u-8\/8\@mediumPalm {
    width: 100% !important;
  }
  .u-1\/10\@mediumPalm {
    width: 10% !important;
  }
  .u-2\/10\@mediumPalm {
    width: 20% !important;
  }
  .u-3\/10\@mediumPalm {
    width: 30% !important;
  }
  .u-4\/10\@mediumPalm {
    width: 40% !important;
  }
  .u-5\/10\@mediumPalm {
    width: 50% !important;
  }
  .u-6\/10\@mediumPalm {
    width: 60% !important;
  }
  .u-7\/10\@mediumPalm {
    width: 70% !important;
  }
  .u-8\/10\@mediumPalm {
    width: 80% !important;
  }
  .u-9\/10\@mediumPalm {
    width: 90% !important;
  }
  .u-10\/10\@mediumPalm {
    width: 100% !important;
  }
}

@media (min-width: 42em) {
  .u-1\/1\@palm {
    width: 100% !important;
  }
  .u-1\/2\@palm {
    width: 50% !important;
  }
  .u-2\/2\@palm {
    width: 100% !important;
  }
  .u-1\/3\@palm {
    width: 33.33333333% !important;
  }
  .u-2\/3\@palm {
    width: 66.66666667% !important;
  }
  .u-3\/3\@palm {
    width: 100% !important;
  }
  .u-1\/4\@palm {
    width: 25% !important;
  }
  .u-2\/4\@palm {
    width: 50% !important;
  }
  .u-3\/4\@palm {
    width: 75% !important;
  }
  .u-4\/4\@palm {
    width: 100% !important;
  }
  .u-1\/5\@palm {
    width: 20% !important;
  }
  .u-2\/5\@palm {
    width: 40% !important;
  }
  .u-3\/5\@palm {
    width: 60% !important;
  }
  .u-4\/5\@palm {
    width: 80% !important;
  }
  .u-5\/5\@palm {
    width: 100% !important;
  }
  .u-1\/6\@palm {
    width: 16.66666667% !important;
  }
  .u-2\/6\@palm {
    width: 33.33333333% !important;
  }
  .u-3\/6\@palm {
    width: 50% !important;
  }
  .u-4\/6\@palm {
    width: 66.66666667% !important;
  }
  .u-5\/6\@palm {
    width: 83.33333333% !important;
  }
  .u-6\/6\@palm {
    width: 100% !important;
  }
  .u-1\/8\@palm {
    width: 12.5% !important;
  }
  .u-2\/8\@palm {
    width: 25% !important;
  }
  .u-3\/8\@palm {
    width: 37.5% !important;
  }
  .u-4\/8\@palm {
    width: 50% !important;
  }
  .u-5\/8\@palm {
    width: 62.5% !important;
  }
  .u-6\/8\@palm {
    width: 75% !important;
  }
  .u-7\/8\@palm {
    width: 87.5% !important;
  }
  .u-8\/8\@palm {
    width: 100% !important;
  }
  .u-1\/10\@palm {
    width: 10% !important;
  }
  .u-2\/10\@palm {
    width: 20% !important;
  }
  .u-3\/10\@palm {
    width: 30% !important;
  }
  .u-4\/10\@palm {
    width: 40% !important;
  }
  .u-5\/10\@palm {
    width: 50% !important;
  }
  .u-6\/10\@palm {
    width: 60% !important;
  }
  .u-7\/10\@palm {
    width: 70% !important;
  }
  .u-8\/10\@palm {
    width: 80% !important;
  }
  .u-9\/10\@palm {
    width: 90% !important;
  }
  .u-10\/10\@palm {
    width: 100% !important;
  }
}

@media (min-width: 46em) {
  .u-1\/1\@device {
    width: 100% !important;
  }
  .u-1\/2\@device {
    width: 50% !important;
  }
  .u-2\/2\@device {
    width: 100% !important;
  }
  .u-1\/3\@device {
    width: 33.33333333% !important;
  }
  .u-2\/3\@device {
    width: 66.66666667% !important;
  }
  .u-3\/3\@device {
    width: 100% !important;
  }
  .u-1\/4\@device {
    width: 25% !important;
  }
  .u-2\/4\@device {
    width: 50% !important;
  }
  .u-3\/4\@device {
    width: 75% !important;
  }
  .u-4\/4\@device {
    width: 100% !important;
  }
  .u-1\/5\@device {
    width: 20% !important;
  }
  .u-2\/5\@device {
    width: 40% !important;
  }
  .u-3\/5\@device {
    width: 60% !important;
  }
  .u-4\/5\@device {
    width: 80% !important;
  }
  .u-5\/5\@device {
    width: 100% !important;
  }
  .u-1\/6\@device {
    width: 16.66666667% !important;
  }
  .u-2\/6\@device {
    width: 33.33333333% !important;
  }
  .u-3\/6\@device {
    width: 50% !important;
  }
  .u-4\/6\@device {
    width: 66.66666667% !important;
  }
  .u-5\/6\@device {
    width: 83.33333333% !important;
  }
  .u-6\/6\@device {
    width: 100% !important;
  }
  .u-1\/8\@device {
    width: 12.5% !important;
  }
  .u-2\/8\@device {
    width: 25% !important;
  }
  .u-3\/8\@device {
    width: 37.5% !important;
  }
  .u-4\/8\@device {
    width: 50% !important;
  }
  .u-5\/8\@device {
    width: 62.5% !important;
  }
  .u-6\/8\@device {
    width: 75% !important;
  }
  .u-7\/8\@device {
    width: 87.5% !important;
  }
  .u-8\/8\@device {
    width: 100% !important;
  }
  .u-1\/10\@device {
    width: 10% !important;
  }
  .u-2\/10\@device {
    width: 20% !important;
  }
  .u-3\/10\@device {
    width: 30% !important;
  }
  .u-4\/10\@device {
    width: 40% !important;
  }
  .u-5\/10\@device {
    width: 50% !important;
  }
  .u-6\/10\@device {
    width: 60% !important;
  }
  .u-7\/10\@device {
    width: 70% !important;
  }
  .u-8\/10\@device {
    width: 80% !important;
  }
  .u-9\/10\@device {
    width: 90% !important;
  }
  .u-10\/10\@device {
    width: 100% !important;
  }
}

@media (min-width: 54em) {
  .u-1\/1\@smallDesk {
    width: 100% !important;
  }
  .u-1\/2\@smallDesk {
    width: 50% !important;
  }
  .u-2\/2\@smallDesk {
    width: 100% !important;
  }
  .u-1\/3\@smallDesk {
    width: 33.33333333% !important;
  }
  .u-2\/3\@smallDesk {
    width: 66.66666667% !important;
  }
  .u-3\/3\@smallDesk {
    width: 100% !important;
  }
  .u-1\/4\@smallDesk {
    width: 25% !important;
  }
  .u-2\/4\@smallDesk {
    width: 50% !important;
  }
  .u-3\/4\@smallDesk {
    width: 75% !important;
  }
  .u-4\/4\@smallDesk {
    width: 100% !important;
  }
  .u-1\/5\@smallDesk {
    width: 20% !important;
  }
  .u-2\/5\@smallDesk {
    width: 40% !important;
  }
  .u-3\/5\@smallDesk {
    width: 60% !important;
  }
  .u-4\/5\@smallDesk {
    width: 80% !important;
  }
  .u-5\/5\@smallDesk {
    width: 100% !important;
  }
  .u-1\/6\@smallDesk {
    width: 16.66666667% !important;
  }
  .u-2\/6\@smallDesk {
    width: 33.33333333% !important;
  }
  .u-3\/6\@smallDesk {
    width: 50% !important;
  }
  .u-4\/6\@smallDesk {
    width: 66.66666667% !important;
  }
  .u-5\/6\@smallDesk {
    width: 83.33333333% !important;
  }
  .u-6\/6\@smallDesk {
    width: 100% !important;
  }
  .u-1\/8\@smallDesk {
    width: 12.5% !important;
  }
  .u-2\/8\@smallDesk {
    width: 25% !important;
  }
  .u-3\/8\@smallDesk {
    width: 37.5% !important;
  }
  .u-4\/8\@smallDesk {
    width: 50% !important;
  }
  .u-5\/8\@smallDesk {
    width: 62.5% !important;
  }
  .u-6\/8\@smallDesk {
    width: 75% !important;
  }
  .u-7\/8\@smallDesk {
    width: 87.5% !important;
  }
  .u-8\/8\@smallDesk {
    width: 100% !important;
  }
  .u-1\/10\@smallDesk {
    width: 10% !important;
  }
  .u-2\/10\@smallDesk {
    width: 20% !important;
  }
  .u-3\/10\@smallDesk {
    width: 30% !important;
  }
  .u-4\/10\@smallDesk {
    width: 40% !important;
  }
  .u-5\/10\@smallDesk {
    width: 50% !important;
  }
  .u-6\/10\@smallDesk {
    width: 60% !important;
  }
  .u-7\/10\@smallDesk {
    width: 70% !important;
  }
  .u-8\/10\@smallDesk {
    width: 80% !important;
  }
  .u-9\/10\@smallDesk {
    width: 90% !important;
  }
  .u-10\/10\@smallDesk {
    width: 100% !important;
  }
}

@media (min-width: 66em) {
  .u-1\/1\@desk {
    width: 100% !important;
  }
  .u-1\/2\@desk {
    width: 50% !important;
  }
  .u-2\/2\@desk {
    width: 100% !important;
  }
  .u-1\/3\@desk {
    width: 33.33333333% !important;
  }
  .u-2\/3\@desk {
    width: 66.66666667% !important;
  }
  .u-3\/3\@desk {
    width: 100% !important;
  }
  .u-1\/4\@desk {
    width: 25% !important;
  }
  .u-2\/4\@desk {
    width: 50% !important;
  }
  .u-3\/4\@desk {
    width: 75% !important;
  }
  .u-4\/4\@desk {
    width: 100% !important;
  }
  .u-1\/5\@desk {
    width: 20% !important;
  }
  .u-2\/5\@desk {
    width: 40% !important;
  }
  .u-3\/5\@desk {
    width: 60% !important;
  }
  .u-4\/5\@desk {
    width: 80% !important;
  }
  .u-5\/5\@desk {
    width: 100% !important;
  }
  .u-1\/6\@desk {
    width: 16.66666667% !important;
  }
  .u-2\/6\@desk {
    width: 33.33333333% !important;
  }
  .u-3\/6\@desk {
    width: 50% !important;
  }
  .u-4\/6\@desk {
    width: 66.66666667% !important;
  }
  .u-5\/6\@desk {
    width: 83.33333333% !important;
  }
  .u-6\/6\@desk {
    width: 100% !important;
  }
  .u-1\/8\@desk {
    width: 12.5% !important;
  }
  .u-2\/8\@desk {
    width: 25% !important;
  }
  .u-3\/8\@desk {
    width: 37.5% !important;
  }
  .u-4\/8\@desk {
    width: 50% !important;
  }
  .u-5\/8\@desk {
    width: 62.5% !important;
  }
  .u-6\/8\@desk {
    width: 75% !important;
  }
  .u-7\/8\@desk {
    width: 87.5% !important;
  }
  .u-8\/8\@desk {
    width: 100% !important;
  }
  .u-1\/10\@desk {
    width: 10% !important;
  }
  .u-2\/10\@desk {
    width: 20% !important;
  }
  .u-3\/10\@desk {
    width: 30% !important;
  }
  .u-4\/10\@desk {
    width: 40% !important;
  }
  .u-5\/10\@desk {
    width: 50% !important;
  }
  .u-6\/10\@desk {
    width: 60% !important;
  }
  .u-7\/10\@desk {
    width: 70% !important;
  }
  .u-8\/10\@desk {
    width: 80% !important;
  }
  .u-9\/10\@desk {
    width: 90% !important;
  }
  .u-10\/10\@desk {
    width: 100% !important;
  }
}

@media (min-width: 75em) {
  .u-1\/1\@largeDesk {
    width: 100% !important;
  }
  .u-1\/2\@largeDesk {
    width: 50% !important;
  }
  .u-2\/2\@largeDesk {
    width: 100% !important;
  }
  .u-1\/3\@largeDesk {
    width: 33.33333333% !important;
  }
  .u-2\/3\@largeDesk {
    width: 66.66666667% !important;
  }
  .u-3\/3\@largeDesk {
    width: 100% !important;
  }
  .u-1\/4\@largeDesk {
    width: 25% !important;
  }
  .u-2\/4\@largeDesk {
    width: 50% !important;
  }
  .u-3\/4\@largeDesk {
    width: 75% !important;
  }
  .u-4\/4\@largeDesk {
    width: 100% !important;
  }
  .u-1\/5\@largeDesk {
    width: 20% !important;
  }
  .u-2\/5\@largeDesk {
    width: 40% !important;
  }
  .u-3\/5\@largeDesk {
    width: 60% !important;
  }
  .u-4\/5\@largeDesk {
    width: 80% !important;
  }
  .u-5\/5\@largeDesk {
    width: 100% !important;
  }
  .u-1\/6\@largeDesk {
    width: 16.66666667% !important;
  }
  .u-2\/6\@largeDesk {
    width: 33.33333333% !important;
  }
  .u-3\/6\@largeDesk {
    width: 50% !important;
  }
  .u-4\/6\@largeDesk {
    width: 66.66666667% !important;
  }
  .u-5\/6\@largeDesk {
    width: 83.33333333% !important;
  }
  .u-6\/6\@largeDesk {
    width: 100% !important;
  }
  .u-1\/8\@largeDesk {
    width: 12.5% !important;
  }
  .u-2\/8\@largeDesk {
    width: 25% !important;
  }
  .u-3\/8\@largeDesk {
    width: 37.5% !important;
  }
  .u-4\/8\@largeDesk {
    width: 50% !important;
  }
  .u-5\/8\@largeDesk {
    width: 62.5% !important;
  }
  .u-6\/8\@largeDesk {
    width: 75% !important;
  }
  .u-7\/8\@largeDesk {
    width: 87.5% !important;
  }
  .u-8\/8\@largeDesk {
    width: 100% !important;
  }
  .u-1\/10\@largeDesk {
    width: 10% !important;
  }
  .u-2\/10\@largeDesk {
    width: 20% !important;
  }
  .u-3\/10\@largeDesk {
    width: 30% !important;
  }
  .u-4\/10\@largeDesk {
    width: 40% !important;
  }
  .u-5\/10\@largeDesk {
    width: 50% !important;
  }
  .u-6\/10\@largeDesk {
    width: 60% !important;
  }
  .u-7\/10\@largeDesk {
    width: 70% !important;
  }
  .u-8\/10\@largeDesk {
    width: 80% !important;
  }
  .u-9\/10\@largeDesk {
    width: 90% !important;
  }
  .u-10\/10\@largeDesk {
    width: 100% !important;
  }
}

@media (min-width: 85em) {
  .u-1\/1\@wideDesk {
    width: 100% !important;
  }
  .u-1\/2\@wideDesk {
    width: 50% !important;
  }
  .u-2\/2\@wideDesk {
    width: 100% !important;
  }
  .u-1\/3\@wideDesk {
    width: 33.33333333% !important;
  }
  .u-2\/3\@wideDesk {
    width: 66.66666667% !important;
  }
  .u-3\/3\@wideDesk {
    width: 100% !important;
  }
  .u-1\/4\@wideDesk {
    width: 25% !important;
  }
  .u-2\/4\@wideDesk {
    width: 50% !important;
  }
  .u-3\/4\@wideDesk {
    width: 75% !important;
  }
  .u-4\/4\@wideDesk {
    width: 100% !important;
  }
  .u-1\/5\@wideDesk {
    width: 20% !important;
  }
  .u-2\/5\@wideDesk {
    width: 40% !important;
  }
  .u-3\/5\@wideDesk {
    width: 60% !important;
  }
  .u-4\/5\@wideDesk {
    width: 80% !important;
  }
  .u-5\/5\@wideDesk {
    width: 100% !important;
  }
  .u-1\/6\@wideDesk {
    width: 16.66666667% !important;
  }
  .u-2\/6\@wideDesk {
    width: 33.33333333% !important;
  }
  .u-3\/6\@wideDesk {
    width: 50% !important;
  }
  .u-4\/6\@wideDesk {
    width: 66.66666667% !important;
  }
  .u-5\/6\@wideDesk {
    width: 83.33333333% !important;
  }
  .u-6\/6\@wideDesk {
    width: 100% !important;
  }
  .u-1\/8\@wideDesk {
    width: 12.5% !important;
  }
  .u-2\/8\@wideDesk {
    width: 25% !important;
  }
  .u-3\/8\@wideDesk {
    width: 37.5% !important;
  }
  .u-4\/8\@wideDesk {
    width: 50% !important;
  }
  .u-5\/8\@wideDesk {
    width: 62.5% !important;
  }
  .u-6\/8\@wideDesk {
    width: 75% !important;
  }
  .u-7\/8\@wideDesk {
    width: 87.5% !important;
  }
  .u-8\/8\@wideDesk {
    width: 100% !important;
  }
  .u-1\/10\@wideDesk {
    width: 10% !important;
  }
  .u-2\/10\@wideDesk {
    width: 20% !important;
  }
  .u-3\/10\@wideDesk {
    width: 30% !important;
  }
  .u-4\/10\@wideDesk {
    width: 40% !important;
  }
  .u-5\/10\@wideDesk {
    width: 50% !important;
  }
  .u-6\/10\@wideDesk {
    width: 60% !important;
  }
  .u-7\/10\@wideDesk {
    width: 70% !important;
  }
  .u-8\/10\@wideDesk {
    width: 80% !important;
  }
  .u-9\/10\@wideDesk {
    width: 90% !important;
  }
  .u-10\/10\@wideDesk {
    width: 100% !important;
  }
}

@media (min-width: 120em) {
  .u-1\/1\@wide1920 {
    width: 100% !important;
  }
  .u-1\/2\@wide1920 {
    width: 50% !important;
  }
  .u-2\/2\@wide1920 {
    width: 100% !important;
  }
  .u-1\/3\@wide1920 {
    width: 33.33333333% !important;
  }
  .u-2\/3\@wide1920 {
    width: 66.66666667% !important;
  }
  .u-3\/3\@wide1920 {
    width: 100% !important;
  }
  .u-1\/4\@wide1920 {
    width: 25% !important;
  }
  .u-2\/4\@wide1920 {
    width: 50% !important;
  }
  .u-3\/4\@wide1920 {
    width: 75% !important;
  }
  .u-4\/4\@wide1920 {
    width: 100% !important;
  }
  .u-1\/5\@wide1920 {
    width: 20% !important;
  }
  .u-2\/5\@wide1920 {
    width: 40% !important;
  }
  .u-3\/5\@wide1920 {
    width: 60% !important;
  }
  .u-4\/5\@wide1920 {
    width: 80% !important;
  }
  .u-5\/5\@wide1920 {
    width: 100% !important;
  }
  .u-1\/6\@wide1920 {
    width: 16.66666667% !important;
  }
  .u-2\/6\@wide1920 {
    width: 33.33333333% !important;
  }
  .u-3\/6\@wide1920 {
    width: 50% !important;
  }
  .u-4\/6\@wide1920 {
    width: 66.66666667% !important;
  }
  .u-5\/6\@wide1920 {
    width: 83.33333333% !important;
  }
  .u-6\/6\@wide1920 {
    width: 100% !important;
  }
  .u-1\/8\@wide1920 {
    width: 12.5% !important;
  }
  .u-2\/8\@wide1920 {
    width: 25% !important;
  }
  .u-3\/8\@wide1920 {
    width: 37.5% !important;
  }
  .u-4\/8\@wide1920 {
    width: 50% !important;
  }
  .u-5\/8\@wide1920 {
    width: 62.5% !important;
  }
  .u-6\/8\@wide1920 {
    width: 75% !important;
  }
  .u-7\/8\@wide1920 {
    width: 87.5% !important;
  }
  .u-8\/8\@wide1920 {
    width: 100% !important;
  }
  .u-1\/10\@wide1920 {
    width: 10% !important;
  }
  .u-2\/10\@wide1920 {
    width: 20% !important;
  }
  .u-3\/10\@wide1920 {
    width: 30% !important;
  }
  .u-4\/10\@wide1920 {
    width: 40% !important;
  }
  .u-5\/10\@wide1920 {
    width: 50% !important;
  }
  .u-6\/10\@wide1920 {
    width: 60% !important;
  }
  .u-7\/10\@wide1920 {
    width: 70% !important;
  }
  .u-8\/10\@wide1920 {
    width: 80% !important;
  }
  .u-9\/10\@wide1920 {
    width: 90% !important;
  }
  .u-10\/10\@wide1920 {
    width: 100% !important;
  }
}

/* ==========================================================================
   #SPACINGS
   ========================================================================== */
/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left-large {}
 *   .u-margin-right-small {}
 *   .u-padding {}
 *   .u-padding-right-none {}
 *   .u-padding-horizontal {}
 *   .u-padding-vertical-small {}
 */
.u-padding {
  padding: 3.2rem !important;
}

.u-padding-tiny {
  padding: 0.8rem !important;
}

.u-padding-small {
  padding: 1.6rem !important;
}

.u-padding-big {
  padding: 4.8rem !important;
}

.u-padding-large {
  padding: 6.4rem !important;
}

.u-padding-huge {
  padding: 12.8rem !important;
}

.u-padding-none {
  padding: 0 !important;
}

.u-padding-bottom {
  padding-bottom: 3.2rem !important;
}

.u-padding-bottom-tiny {
  padding-bottom: 0.8rem !important;
}

.u-padding-bottom-small {
  padding-bottom: 1.6rem !important;
}

.u-padding-bottom-big {
  padding-bottom: 4.8rem !important;
}

.u-padding-bottom-large {
  padding-bottom: 6.4rem !important;
}

.u-padding-bottom-huge {
  padding-bottom: 12.8rem !important;
}

.u-padding-bottom-none {
  padding-bottom: 0 !important;
}

.u-padding-left {
  padding-left: 3.2rem !important;
}

.u-padding-left-tiny {
  padding-left: 0.8rem !important;
}

.u-padding-left-small {
  padding-left: 1.6rem !important;
}

.u-padding-left-big {
  padding-left: 4.8rem !important;
}

.u-padding-left-large {
  padding-left: 6.4rem !important;
}

.u-padding-left-huge {
  padding-left: 12.8rem !important;
}

.u-padding-left-none {
  padding-left: 0 !important;
}

.u-padding-top {
  padding-top: 3.2rem !important;
}

.u-padding-top-tiny {
  padding-top: 0.8rem !important;
}

.u-padding-top-small {
  padding-top: 1.6rem !important;
}

.u-padding-top-big {
  padding-top: 4.8rem !important;
}

.u-padding-top-large {
  padding-top: 6.4rem !important;
}

.u-padding-top-huge {
  padding-top: 12.8rem !important;
}

.u-padding-top-none {
  padding-top: 0 !important;
}

.u-margin {
  margin: 3.2rem !important;
}

.u-margin-tiny {
  margin: 0.8rem !important;
}

.u-margin-small {
  margin: 1.6rem !important;
}

.u-margin-big {
  margin: 4.8rem !important;
}

.u-margin-large {
  margin: 6.4rem !important;
}

.u-margin-huge {
  margin: 12.8rem !important;
}

.u-margin-none {
  margin: 0 !important;
}

.u-margin-bottom {
  margin-bottom: 3.2rem !important;
}

.u-margin-bottom-tiny {
  margin-bottom: 0.8rem !important;
}

.u-margin-bottom-small {
  margin-bottom: 1.6rem !important;
}

.u-margin-bottom-big {
  margin-bottom: 4.8rem !important;
}

.u-margin-bottom-large {
  margin-bottom: 6.4rem !important;
}

.u-margin-bottom-huge {
  margin-bottom: 12.8rem !important;
}

.u-margin-bottom-none {
  margin-bottom: 0 !important;
}

.u-margin-left {
  margin-left: 3.2rem !important;
}

.u-margin-left-tiny {
  margin-left: 0.8rem !important;
}

.u-margin-left-small {
  margin-left: 1.6rem !important;
}

.u-margin-left-big {
  margin-left: 4.8rem !important;
}

.u-margin-left-large {
  margin-left: 6.4rem !important;
}

.u-margin-left-huge {
  margin-left: 12.8rem !important;
}

.u-margin-left-none {
  margin-left: 0 !important;
}

.u-margin-top {
  margin-top: 3.2rem !important;
}

.u-margin-top-tiny {
  margin-top: 0.8rem !important;
}

.u-margin-top-small {
  margin-top: 1.6rem !important;
}

.u-margin-top-big {
  margin-top: 4.8rem !important;
}

.u-margin-top-large {
  margin-top: 6.4rem !important;
}

.u-margin-top-huge {
  margin-top: 12.8rem !important;
}

.u-margin-top-none {
  margin-top: 0 !important;
}

/* ==========================================================================
   #HIDE
   ========================================================================== */
/**
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.u-hidden-visually {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/**
 * Hide visually and from screen readers.
 */
.u-hidden {
  display: none !important;
}

/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors utilities file takes the color map and creates utility classes
 * for each property and color defined in the map.
 *
 * This can be used for color, fill, stroke, etc.
 *
 * Example:
 * $map-color-utility: (
 *     'color': (
 *         'primary': color('primary'),
 *         'primary-alt': color('primary-alt'),
 *     );
 * )
 *
 * Will produce:
 * .u-color-primary {
 *     color: $color-primary;
 * }
 * .u-color-primary-alt {
 *     color: $color-primary-alt;
 * }
 */
.u-color-primary {
  color: color("primary") !important;
}

.u-color-primary-alt {
  color: color("primary-alt") !important;
}

/* ==========================================================================
   #OBJECT FIT
   ========================================================================== */
/**
 * Attach our object fit mixin to a utility class.
 */
.u-object-fit {
  font-family: 'object-fit: contain;';
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.u-object-fit__container--fallback {
  background-size: cover;
  display: block;
}

/* ==========================================================================
   #POSITION
   ========================================================================== */
/**
 * The position utilities file contains positioning helper classes;
 *
 * This includes `position` attribute, as well as horizontal centering.
 */
.u-absolute {
  position: absolute;
}

.u-relative {
  position: relative;
}

.u-h-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   #SVG ICONS
   ========================================================================== */
/**
 * The svg-icons utilities file contains helper classes for svg-icons;
 *
 * Most notably is the base helper, which hides the main SVG insert, allowing
 * us to xlink SVGs on the page from one main injected SVG file.
 */
.u-svg-icons {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/* ==========================================================================
   #VISIBILITY
   ========================================================================== */
/**
 * The visibility utilities file contains helper classes for hiding content at
 * certain screen sizes;
 */
.u-hide {
  display: none;
}

@media (min-width: 18em) {
  .u-hide-from-tinyPalm {
    display: none !important;
  }
}

@media (max-width: 17.99em) {
  .u-hide-until-tinyPalm {
    display: none !important;
  }
}

@media (min-width: 22em) {
  .u-hide-from-smallPalm {
    display: none !important;
  }
}

@media (max-width: 21.99em) {
  .u-hide-until-smallPalm {
    display: none !important;
  }
}

@media (min-width: 32em) {
  .u-hide-from-mediumPalm {
    display: none !important;
  }
}

@media (max-width: 31.99em) {
  .u-hide-until-mediumPalm {
    display: none !important;
  }
}

@media (min-width: 42em) {
  .u-hide-from-palm {
    display: none !important;
  }
}

@media (max-width: 41.99em) {
  .u-hide-until-palm {
    display: none !important;
  }
}

@media (min-width: 46em) {
  .u-hide-from-device {
    display: none !important;
  }
}

@media (max-width: 45.99em) {
  .u-hide-until-device {
    display: none !important;
  }
}

@media (min-width: 54em) {
  .u-hide-from-smallDesk {
    display: none !important;
  }
}

@media (max-width: 53.99em) {
  .u-hide-until-smallDesk {
    display: none !important;
  }
}

@media (min-width: 66em) {
  .u-hide-from-desk {
    display: none !important;
  }
}

@media (max-width: 65.99em) {
  .u-hide-until-desk {
    display: none !important;
  }
}

@media (min-width: 75em) {
  .u-hide-from-largeDesk {
    display: none !important;
  }
}

@media (max-width: 74.99em) {
  .u-hide-until-largeDesk {
    display: none !important;
  }
}

@media (min-width: 85em) {
  .u-hide-from-wideDesk {
    display: none !important;
  }
}

@media (max-width: 84.99em) {
  .u-hide-until-wideDesk {
    display: none !important;
  }
}

@media (min-width: 120em) {
  .u-hide-from-wide1920 {
    display: none !important;
  }
}

@media (max-width: 119.99em) {
  .u-hide-until-wide1920 {
    display: none !important;
  }
}

/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text utilities file contains many helper classes for text;
 *
 * This includes `text-transform`, `font-` styles, alignment and spacing,
 * and the text style and responsive text style class generation, using the
 * global-text-map from _settings.text.scss.
 */
/* stylelint-disable max-nesting-depth */
.u-capitalize {
  text-transform: capitalize;
}

.u-uppercase {
  text-transform: uppercase;
}

.u-italic {
  font-style: italic;
}

.u-bold {
  font-weight: 700;
}

.u-title {
  font-family: dDinBold, "arial", "serif";
}

.u-content {
  font-family: dDinNormal, "sans-serif";
}

.u-text--center {
  text-align: center;
}

.u-text--space {
  letter-spacing: 2px;
}

.u-text--space-huge {
  letter-spacing: 4px;
}

.u-text--space-large {
  letter-spacing: 3px;
}

.u-text--space-small {
  letter-spacing: 1px;
}

.u-text--huge {
  font-size: 40px;
  font-size: 4rem;
  line-height: 1.2;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--huge.u-text--responsive {
    font-size: 56px;
    font-size: 5.6rem;
    line-height: 1.14285714;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--huge.u-text--responsive {
    font-size: 72px;
    font-size: 7.2rem;
    line-height: 1.11111111;
    letter-spacing: 0;
  }
}

.u-text--large {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 1.25;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--large.u-text--responsive {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--large.u-text--responsive {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

.u-text--big {
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.3;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--big.u-text--responsive {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--big.u-text--responsive {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

.u-text--medium {
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--medium.u-text--responsive {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--medium.u-text--responsive {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0;
  }
}

.u-text--medium-base {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--medium-base.u-text--responsive {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--medium-base.u-text--responsive {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.u-text--base {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 3;
}

@media (min-width: 46em) {
  .u-text--base.u-text--responsive {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0.3rem;
  }
}

@media (min-width: 66em) {
  .u-text--base.u-text--responsive {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0.3rem;
  }
}

.u-text--small {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.3rem;
}

@media (min-width: 46em) {
  .u-text--small.u-text--responsive {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0.3rem;
  }
}

@media (min-width: 66em) {
  .u-text--small.u-text--responsive {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0.3rem;
  }
}

.u-text--smaller {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--smaller.u-text--responsive {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--smaller.u-text--responsive {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0;
  }
}

.u-text--xsmall {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: 0;
}

.u-text--h1 {
  font-size: 40px;
  font-size: 4rem;
  line-height: 1.2;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--h1.u-text--responsive {
    font-size: 56px;
    font-size: 5.6rem;
    line-height: 1;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--h1.u-text--responsive {
    font-size: 72px;
    font-size: 7.2rem;
    line-height: 1;
    letter-spacing: 0;
  }
}

.u-text--h2 {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 1.25;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--h2.u-text--responsive {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

.u-text--h2-mobile-small {
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.3;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--h2-mobile-small.u-text--responsive {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

.u-text--h3 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.4rem;
}

.u-text--h4 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.3rem;
}

.u-text--label {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: 0.3rem;
}

.u-text--nav-link {
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.67;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--nav-link.u-text--responsive {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 1.25;
  }
}

.u-text--body {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.u-text--body-big {
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.u-text--body-small {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: 0;
}

.u-reset-line-height {
  line-height: 1;
}

/* stylelint-enable max-nesting-depth */
/* ==========================================================================
   #ACCESSIBILITY
   ========================================================================== */
@media (min-width: 54em) {
  .u-accessibility-anchor {
    height: 1px;
  }
}

/* ==========================================================================
   #COLORS
   ========================================================================== */
/**
 * The colors utilities file maps the theme color map to utility classes to
 * apply the theme colors on elements.
 *
 * E.G. if "-color": "color" is defined in the map, we get:
 * .u-color-primary {
 *     color: $color-primary;
 * }
 * plus all the other colors that are in THEME or MONOCHROME maps.
 */
.u-color-white {
  color: #ffffff !important;
}

.u-color-very-light-grey {
  color: #adadad !important;
}

.u-color-light-grey {
  color: #adadad !important;
}

.u-color-grey {
  color: #757575 !important;
}

.u-color-dark-grey {
  color: #2b2b2b !important;
}

.u-color-black {
  color: #000000 !important;
}

.u-color-light-red {
  color: #ff7373 !important;
}

.u-color-green {
  color: #88e287 !important;
}

.u-color-primary {
  color: #f00 !important;
}

.u-color-primary-alt {
  color: #a00 !important;
}

.u-color-pastel-green {
  color: #88e287 !important;
}

.u-bg-white {
  background-color: #ffffff !important;
}

.u-bg-very-light-grey {
  background-color: #adadad !important;
}

.u-bg-light-grey {
  background-color: #adadad !important;
}

.u-bg-grey {
  background-color: #757575 !important;
}

.u-bg-dark-grey {
  background-color: #2b2b2b !important;
}

.u-bg-black {
  background-color: #000000 !important;
}

.u-bg-light-red {
  background-color: #ff7373 !important;
}

.u-bg-green {
  background-color: #88e287 !important;
}

.u-bg-primary {
  background-color: #f00 !important;
}

.u-bg-primary-alt {
  background-color: #a00 !important;
}

.u-bg-pastel-green {
  background-color: #88e287 !important;
}

/* ==========================================================================
   #DISPLAY
   ========================================================================== */
/**
 * Display utility classes. Currently only holds one `block` class but if others
 * are required then please create a looped class builder from a map.
 */
.u-display-block {
  display: block;
}

/* ==========================================================================
   #TEXT
   ========================================================================== */
/**
 * The text utilities file contains many helper classes for text;
 *
 * This includes `text-transform`, `font-` styles, alignment and spacing,
 * and the text style and responsive text style class generation, using the
 * global-text-map from _settings.text.scss.
 */
.u-title {
  font-family: dDinBold, "arial", "serif";
}

.u-content {
  font-family: dDinNormal, "sans-serif";
}

.u-content--small {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.3rem;
}

.u-text--initial {
  font-size: initial;
}

.u-text--large {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 1.25;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--large {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--large {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

.u-text--huge {
  font-size: 40px;
  font-size: 4rem;
  line-height: 1.2;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--huge {
    font-size: 56px;
    font-size: 5.6rem;
    line-height: 1.14285714;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--huge {
    font-size: 72px;
    font-size: 7.2rem;
    line-height: 1.11111111;
    letter-spacing: 0;
  }
}

.u-text--big {
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.3;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--big {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--big {
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1.43;
    letter-spacing: 0;
  }
}

.u-text--medium-base {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--medium-base {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--medium-base {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

.u-text--medium {
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--medium {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--medium {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0;
  }
}

.u-text--small {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.3rem;
}

@media (min-width: 46em) {
  .u-text--small {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0.3rem;
  }
}

@media (min-width: 66em) {
  .u-text--small {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0.3rem;
  }
}

.u-text--smaller {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: 0;
}

@media (min-width: 46em) {
  .u-text--smaller {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0;
  }
}

@media (min-width: 66em) {
  .u-text--smaller {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0;
  }
}

.u-text-space {
  letter-spacing: 2px;
}

.u-text-space-huge {
  letter-spacing: 4px;
}

.u-text-space-large {
  letter-spacing: 3px;
}

.u-text-space-small {
  letter-spacing: 1px;
}

.u-label {
  color: #757575;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.u-capitalize {
  text-transform: capitalize;
}

.u-uppercase {
  text-transform: uppercase;
}

.u-italic {
  font-style: italic;
}

.u-bold {
  font-weight: 700;
}

.u-light {
  font-weight: 300;
}

.u-reset-line-height {
  line-height: 1;
}

.u-subtitle-margin-left {
  margin-left: 3rem;
}

/**
 * Stylings for HTML tags added by the user in
 * long form copy where they'll add <h2>s or <h3>s everywhere
 * and we can't get them to add classes
 */
.u-rte-text {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.u-rte-text h1, .u-rte-text h2, .u-rte-text h3, .u-rte-text h4, .u-rte-text h5, .u-rte-text h6 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.3rem;
  margin-bottom: 1.6rem;
  margin-top: 1.6rem;
  text-transform: uppercase;
}

.u-rte-text dd, .u-rte-text ol, .u-rte-text ul {
  margin-left: 1em;
}

.u-text--right {
  text-align: right;
}

/* ==========================================================================
   #OBJECT FIT
   ========================================================================== */
/**
 * Attach our object fit mixin to a utility class.
 */
.u-object-fit {
  font-family: 'object-fit: contain;';
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.u-object-fit__container--fallback {
  background-size: cover;
  display: block;
}

/* ==========================================================================
   #POSITION
   ========================================================================== */
/**
 * The position utilities file contains positioning helper classes;
 *
 * This includes `position` attribute, as well as horizontal centering.
 */
.u-absolute {
  position: absolute;
}

.u-relative {
  position: relative;
}

.u-h-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.u-margin--neg-top {
  -webkit-transform: translateY(-3.2rem);
          transform: translateY(-3.2rem);
}

.u-float-left {
  float: left;
}

.u-float-right {
  float: right;
}

.u-push-right {
  margin-right: 0.8rem;
}

/* ==========================================================================
   #OVERFLOWS
   ========================================================================== */
/**
 * The overflow utilities file contains helper classes to manage how content overflows an element's box;
 *
 */
.u-overflow-hidden {
  overflow: hidden;
}

/* ==========================================================================
   #OFFSETS
   ========================================================================== */
/**
 * Offsets will apply margin to the component(s) to either push the content
 * set pixels to the left, right or top.
 */
@media (min-width: 46em) {
  .u-offset-right {
    margin-left: 64px;
  }
}

@media (min-width: 66em) {
  .u-offset-right {
    margin-left: 95px;
  }
}

@media (min-width: 46em) {
  .u-offset-left {
    margin-left: -64px;
  }
}

@media (min-width: 66em) {
  .u-offset-left {
    margin-left: -95px;
  }
}

@media (min-width: 46em) {
  .u-offset-top {
    margin-top: -64px;
  }
}

@media (min-width: 66em) {
  .u-offset-top {
    margin-top: -95px;
  }
}

/* ==========================================================================
   #TRANSITIONS
   ========================================================================== */
.u-slide-up-enter, .u-slide-up-leave-to {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.u-slide-up-enter-active, .u-slide-up-leave-active {
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.u-slide-up-enter-active {
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
          transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.u-slide-up-leave-active {
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
          transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
}

.u-slide-up-enter-to, .u-slide-up-leave {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}


.carousel_twocustom .v-text-carousel__images-wrapper {
    right: 21%;
    left: inherit;
}
.carousel_twocustom .v-text-carousel__text-wrapper {
    width: 100%;
}

.carousel_twocustom .v-text-carousel__header {
    position: absolute;
    left: 50%;
}
 
 @media only screen and (max-width: 767px) {
.carousel_twocustom .v-text-carousel {
    display: flex;
    flex-direction: column;
}
.carousel_twocustom .v-text-carousel .v-text-carousel__images-wrapper{
order: 2;
}
.carousel_twocustom .v-text-carousel .v-text-carousel__text-wrapper{
order: 1;
}
.carousel_twocustom .v-text-carousel__text-wrapper {
    margin-bottom: 3.2rem;
}
.carousel_twocustom .v-text-carousel__arrow--prev{
-webkit-transform: translate3d(0, 0px, 0) rotate(-90deg);
    transform: translate3d(0, 0px, 0) rotate(-90deg);
}
.carousel_twocustom .v-text-carousel__arrow{
left: 0;
}
.carousel_twocustom .v-text-carousel__header {
    position: relative;
    left: 50%;
}
}

@media only screen and (min-width: 768px) and (max-width: 863px) {
   .carousel_twocustom .v-text-carousel__images-wrapper {
    right: 15%;
    left: inherit;
}
}




/*NEW CSS DEV*/

a.c-btn.booknow-btntop {
    padding: 10px 30px;
}

 @media only screen and (max-width: 767px) {
   .c-top-panel__action {
    position: absolute;
    right: 25px;
    top: 15px;
}
 }










 .subscribe-footer input.wpcf7-text {
    background: transparent;
    border: 1px solid #2b2b2b;
    border-radius: 0;
    color: #ffffff;
    display: block;
    font-family: dDinNormal, "sans-serif";
    outline: none;
    padding: unset;
    vertical-align: middle;
    width: 100%;
    height: 40px;
   
    padding:10px;
}

ul.footer-sub-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

ul.footer-sub-field li {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 8px;
    width: 50%;
}

ul.footer-sub-field li.footer-checkbox , ul.footer-sub-field li.footer-email{
   width: 100%;
}

ul.footer-sub-field li.footer-email label {width: 100%;}

ul.footer-sub-field li.footer-email input{
   width:100% ;
}
input.wpcf7-form-control.wpcf7-submit.c-btn.booknow-btntop{
padding:  10px 30px;
margin: 0px 0 0 8px;
text-transform:uppercase;
}

.c-footer__nav{
   padding-top: 0;
}
h3.subscribe-footer-heading {
    margin-bottom: 10px;
/*    padding: 0 10px;*/
    font-size: 16px;
}

li.footer-checkbox .mc4wp-checkbox-contact-form-7 input[type="checkbox"] {
    margin-right: 5px;
}

.subscribe-footer .wpcf7  .ajax-loader {
    display: block;
    margin-top: 15px;
}

ul.footer-sub-field li {
    margin-bottom:10px;
}

.subscribe-footer p {
    margin-bottom: 0;
}

.subscribe-footer .wpcf7-response-output {
    margin: 0 !important;
}
.subscribe-footer {
    margin-bottom: 30px;
}

a.instagram-footer img {
    margin-top: 10px;
}

h3.subscribe-footer-heading.our-resta{
   padding:0;
}
li.footer-checkbox span {
    font-size: 14px;
}




/**** CSS added on 25-10-2023 ****/
.halfColumn {box-sizing: border-box; display: inline-block; vertical-align: top; padding-left: 3.2rem; width: 50%;}
.o-layout.o-layout_container {padding-bottom: 50px;}
.c-hero {height: 85vh;}
#lottie-logo svg {left: 50%; min-width: 12%; top: 50%; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; width: 16.5vh !important;}
a.instagram-location img {margin-bottom: 30px !important;}
.single-locations .carousel_banner .v-carousel-block{margin-bottom: 0rem;}
.page-template-private-hire .carousel_banner .v-carousel-block{margin-bottom: 0rem;}

.page-template-menu  .carousel_banner .v-carousel-block{margin-bottom: 0rem;}

@media only screen and (min-width: 0px) and (max-width: 480px) {
/*  .c-top-panel__branding {left: 74px; top: 27px; -webkit-transform: translateX(0%); transform: translateX(0%);}*/
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .o-layout_container {display: grid; grid-template-columns: repeat(1, 1fr);}
  .halfColumn {width: 100%; order: 2;}
  .halfColumn h2 {padding-top: 30px; text-align: left;}
  .o-layout_container .halfColumn.imageContainer {order: 1;}
}

/**** css add on 26-10-2023 ****/
.aboutContent .halfColumn {padding-left: 0 !important; padding-right: 3.2rem;}
.aboutContent h2 {font-size: 5rem !important; margin-bottom: 15px;}
.aboutContent p {margin-bottom: 20px;}
.aboutContent .v-text-carousel__links {margin-left: 0;}
.carousel_banner {padding: 30px 0 0 0;}

@media only screen and (min-width: 0px) and (max-width: 767px) {
   .aboutContent .halfColumn {padding-left: 0 !important; padding-right: 0;}
   .aboutContent .o-wrapper {padding: 0;}
   .aboutContent .o-wrapper .o-layout.o-layout_container {margin: 0;}
   a.instagram-header {
    display: none;
}
.c-top-panel__branding{ left: 44%;top: 28px; }
}

@media only screen and (min-width: 768px) and (max-width: 1055px) {
   .aboutContent .o-wrapper {padding: 0 !important;}
   .aboutContent .o-wrapper .o-layout.o-layout_container {margin-left: 0 !important;}
   .aboutContent .halfColumn:nth-child(2) {padding-right: 0 !important;}
}

li.mobile_insta{display:none;}
@media only screen and (min-width: 0px) and (max-width: 767px) {
   li.mobile_insta{display:block;}
  .c-nav-menu--slide .c-nav .c-nav__item--last-item{ margin-bottom: 2rem; }

}

.wpcf7-response-output {
    font-size: 14px;
}

/* MB added on 8-11-2023 */
[tabindex]:focus, a:focus, button:focus {outline: none !important;}

@media screen and (min-width: 1100px) {
  /* body.page-id-5 .o-wrapper{max-width: 90%;} */
  body .o-wrapper{max-width: 90%;}
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
  .v-hamburger{top: 23px !important;}
  .c-top-panel.c-top-panel--top.addBlack{background: black; width: 100% !important; height: 70px;}

  .video_masthead {width: 100%; margin-top: 5rem !important; position: relative; margin-bottom: 4rem !important; height: 300px !important;}
}
@media only screen and (min-width: 736px) and (max-width: 766px) {
  .c-top-panel__branding {left: 26%; top: -7px;}
  a.instagram-mobile {bottom: 90px; position: relative;}
  .c-top-panel.c-top-panel--top.addBlack{background: black; width: 100% !important;}
  .video_masthead {width: 100%; margin-top: 5rem !important; position: relative; margin-bottom: 4rem !important; height: 320px !important;}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.c-top-panel__action {top: 25px;}
/* .c-top-panel__branding{margin-top: 2.5rem;}
.v-hamburger {top: 20px;} */
.c-top-panel{height: 100px;}
.c-top-panel.c-top-panel--top.addBlack{background: black; width: 100% !important;}
.video_masthead {width: 100%; margin-top: 5rem !important; position: relative; margin-bottom: 5rem !important; height: 400px !important;}
}

/**** landscape ****/
@media only screen and (max-height: 740px) and (orientation: landscape) {
.c-nav .c-nav__text{bottom: -100px;}
}

.c-top-panel.c-top-panel--top.addBlack{background: black; width: calc(100% - 17px);}

.video_masthead {width: 100%; margin-top: 10rem; position: relative; margin-bottom: 5rem; height: calc(100vh);}
.video_masthead video {width: 100%; height: auto;}
.video_masthead iframe {width: 100%; height: auto; border: 0px; overflow:hidden; overflow-x:hidden; overflow-y:hidden; height:100%; width:100%; position:absolute; top:0px; left:0px; right:0px; bottom:0px}

.two_btn-location .c-btn--fullwidth {
    padding-left: 0;
    padding-right: 0;
    width: 75%;
}

.page-template-private-hire .u-text--medium-base h2{
      color: rgb(128, 128, 128);
}
.c-nav-menu--bg, .c-nav-menu--slide {
  z-index: 41;
}


/*Whaton CSS*/
.single-whats-on .carousel_banner .v-carousel-block {
    margin-bottom: 0rem;
}

 ul.halfWidthListingContent {margin: 0; padding: 0; display: flex; align-items: flex-start; flex-wrap: wrap;margin-bottom:15px}
  ul.halfWidthListingContent li {cursor: pointer; padding-right: 10px; display: inline-flex; align-items: flex-start; flex-wrap: wrap; position: relative;  padding-bottom: 5px; padding-left: 15px; width: 100%;}
  ul.halfWidthListingContent li::before {
    background-image: url(https://staging.zumarestaurant.com/wp-content/themes/zumbprod/build/img/arrow.svg);;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 10px;
    position: absolute;
    right: 0;
    left: 0;;top: 17px;
    -webkit-transform: translate3d(0,-5px,0);
    transform: translate3d(0,-5px,0);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease,-webkit-transform .3s ease;
    width: 10px;
}

ul.halfWidthListingContent ul li {
    position: relative;
    display: inline-flex;
}

ul.halfWidthListingContent li:hover::before {
    -webkit-transform: translate3d(5px,-5px,0);
    transform: translate3d(5px,-5px,0);
}
h2.whaton-info {
    margin-bottom: 5px !important;
}	
.whaton-content p , .whaton-content ul{
    margin-bottom: 15px;
}

.customColumn {width: 33.3334%;}
span.mainTitle {width: 100%; align-items: center; display: flex; flex-wrap: wrap; justify-content: center;}
.listingarea {/* background: #1e1808; */ margin-bottom: 30px;}
.listingarea a.imageWrapper {display: flex; overflow: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}
.listingarea a.imageWrapper img {-webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}
.listingarea a.imageWrapper:hover img {transform: scale(1.05);}
.listingarea .listingContentWrapper {padding: 20px; border: 1px solid #313131; border-top: none;}
.listingarea .listingContentWrapper h2 {margin: 0 0 10px !important 0; padding: 0; font-size: 28px; color: #fff !important; font-weight: normal; text-transform: capitalize; letter-spacing: 0; font-family: dDinNormal, "sans-serif", serif !important; line-height: 30px;}
.listingarea .listingContentWrapper p {font-size: 1.6rem; margin: 0; padding: 5px 0 20px 0;}
.listingarea .listingContentWrapper ul {margin: 0; padding: 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;}
.listingarea .listingContentWrapper ul li {margin: 0; padding: 0; display: inline-flex; align-items: center; flex-wrap: wrap;}
.listingarea .listingContentWrapper ul li a.c-btn {padding: 10px 30px; text-transform: uppercase; background: none !important;}
body.single-whats-on h1.c-image-header__title span {display: flex;}

@media only screen and (min-width: 0px) and (max-width: 639px) {
	.customColumn {width: 100%;}
	.listingarea .listingContentWrapper ul li:first-child {width: 100%; padding-bottom:  10px;}
	.whaton-content.singleWhatsOnContent {margin-right: 0 !important;}
	body.single-whats-on h1.c-image-header__title span {margin-left: 0; justify-content: center;}
}

@media only screen and (min-width: 0px) and (max-width: 735px) {
	body.single-whats-on h1.c-image-header__title span {margin-left: 0; justify-content: center;}
}

@media only screen and (min-width: 640px) and (max-width: 991px) {
	.customColumn {width: 50%;}
	.listingarea .listingContentWrapper ul li:first-child {width: 100%; padding-bottom:  10px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.customColumn {width: 33.3334%;}
	.listingarea .listingContentWrapper ul li:first-child {width: 100%; padding-bottom:  10px;}
}

@media only screen and (min-width: 1200px) and (max-width: 1330px) {
	.listingarea .listingContentWrapper ul li:first-child {width: 100%; padding-bottom:  10px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.customColumn {width: 33.3334%;}
}



/*Newsletter Footer CSS*/
.contacta-webform-table .contacta-row:nth-child(2), .contacta-webform-table .contacta-row:nth-child(3) {width: 50%;display: inline-block;}
.contacta-webform-table .contacta-col{padding-left: 0 !important}
.contacta-webform-table .contacta-row {margin-top: 0px !important;}
 .contacta-webform-table .checkbox-option {
    vertical-align: middle !important;
}
.contacta-webform-table .checkbox-option {
    position: relative;
    top: -1px;
}

.contacta-webform-table .input-block input[type="text"], .contacta-webform-table  .data-block input[type="text"] {
background: transparent;
    border: 1px solid #2b2b2b;
    border-radius: 0;
    color: #ffffff;
    display: block;
    font-family: dDinNormal, "sans-serif";
    outline: none;
    padding: unset;
    vertical-align: middle;
    width: 100%;
    height: 40px;
    padding: 10px;
}
 
.contacta-webform-table .error-msg {
    font-style: normal !important;
}

.contacta-webform-table button.btn.btn-primary {
    background-color: #000000  !important;
    border: 1px solid;
    color: #ffffff;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: opacity, background-color, color;
    transition-property: opacity, background-color, color;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    font-family: dDinBold, "arial", "serif";
    font-size: 1.6rem !important;
    letter-spacing: 0.1rem !important;
    margin: 0;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    color: #fff !important;
    border: 1px solid #fff !important;
    line-height: inherit !important;
    padding: 5px 30px !important;
    border-radius: 0 !important;
}

.contacta-webform-table button.btn.btn-primary:hover {
    color: #757575;
    cursor: url(../img/logo-white.svg), auto;
}

.contacta-webform-table .contacta-row:nth-child(5) .contacta-col label { display: none; }
.contacta-webform-table .contacta-row:nth-child(5) .contacta-col .input-field.optIn label { display: block; }

label.no-full-width.nbColumns1.label-option {
    margin-bottom: 7px;
    margin-top: 7px;
}

span.mc4wp-checkbox.mc4wp-checkbox-contact-form-7 {
    display: none;
}

.wpcf7-list-item{margin:0}
span.wpcf7-list-item-label {
    vertical-align: top;
}

.bordertopcustom{
       border-top: 1px solid #2b2b2b;
}

.listingsingle.bordertopcustom .customWrapper{
margin-top: 30px;
}

.listingarea .listingContentWrapper h2{
   min-height:60px;
}
.listingarea .listingContentWrapper p {
    min-height: 75px;
}

@media only screen and (max-width: 767px) { 
   
.listingarea .listingContentWrapper h2{
   min-height: auto;
}
.listingarea .listingContentWrapper p {
   min-height: auto;
}
   
}

ul.selected_whats_on li {
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
}

ul.selected_whats_on {
    list-style: none;
    margin-left: 0px !important;
}

ul.selected_whats_on li h4, ul.selected_whats_on li p {
    margin-bottom: 0;
}


/* css added on 30-4-24 */
ul.selected_whats_on li {font-size: 1.6rem; line-height: 1.5; letter-spacing: 0;  border-bottom: solid 1px #757575; padding: 10px 0; position: relative;  transition: .5s;}
ul.selected_whats_on li:first-child {border-top: solid 1px #757575;}
ul.selected_whats_on li:last-child {border-bottom: solid 1px #757575;}
ul.selected_whats_on li .for_arrow {transition: .5s; position: absolute; right: 30px; transform: translateY(-50%); top: 50%; fill: #ffffff; height: 15px; width: 15px; rotate: 180deg; margin-top: -10px;}
ul.selected_whats_on li:hover .for_arrow {right: 15px; transition: .5s;}
ul.selected_whats_on li h4 {font-size: 21px; font-weight: bolder;}
ul.selected_whats_on li p {color: #757575; font-size: 16px;}

.carousel_banner {position: relative;}
.carousel_banner .back_btn {position: absolute; top: 180px; left: 32px; height: 50px; z-index: 9; font-size: 18px; font-weight: 800; fill: #ffffff;}
.carousel_banner .back_btn svg{margin-right: 7px;}
.carousel_banner .back_btn svg.o-icon__svg {width: 25px; height: 25px;}
.carousel_banner .back_btn a {display: flex; align-items: center;}
.VueCarousel-slide .v-carousel-block__image{height: auto;}
.VueCarousel-slide {padding-bottom: 38%;}
@media only screen and (min-width: 0px) and (max-width: 767px) {
 .carousel_banner .back_btn {position: absolute; top: 120px; left: 20px;}
 .VueCarousel-slide .v-carousel-block__image {height: 100%;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .carousel_banner .back_btn {position: absolute; top: 150px; left: 20px;}
  .VueCarousel-slide .v-carousel-block__image {height: 100%;}
 }

 .c-qr-code {
  padding-left: 0;
}
div#CONTACTA_66559f6d09b2db4fa3844ca4 .submitBtn {
  margin-top: 15px;
}