/** Shopify CDN: Minification failed

Line 13406:11 Unexpected "'.ie11'"

**/
/*==============================================================================

 ###TABLE OF CONTENTS


 #SETTINGS ............................. Global variables and config

 Color Variables
 Typography Variables .................. Font size, Line height, Font Face
 Grid & Breakpoints Variables .......... Grid gutter, Breakpoints, Grid utilities
 Assorted Variables .................... Spacing, Sizing, Z-Index, Select Icon


 #TOOLS................................. Functions and mixins

 Typography Functions .................. px to REM and Line Height functions
 Clearfix Mixin ........................ Simple clearfix based on CSS-tricks.com
 Media Query Mixin ..................... Simple media query mixin
 Responsive Helper Classes Mixins ...... Show/Hide and Text align classes by breakpoint
 Accessibility / Visibility Mixins ..... Visually hidden classes
 Placeholder Mixin ..................... Placeholder styling across browsers
 Keyframes Mixin ....................... Animation mixins


 #GENERIC .............................. Resets. A clean slate to work from.

 Normalize ............................. Modified reset based off Normalize
 Custom Reset .......................... Custom based on Eric Meyer and CSS Wizardry


 #ELEMENTS ............................. Base styling of HTML elements

 Page .................................. HTML, Body, *, Box-sizing
 Links ................................. Base anchor styling
 Forms ................................. Base form element styling
 Typography ............................ H1-H6, paragraphs
 Images & Media ........................ Image, iFrame, Video


 #OBJECTS .............................. Structural CSS classes

 Grid .................................. Grid structure and variations
 Container ............................. Containers (wrappers) and variatons


 #VENDOR ............................... 3rd party CSS

 Flickity .............................. v2.2.1 - Modified CSS for Slider
 PLYR .................................. v3.5.10 - Modified CSS for video player


 #COMPONENTS ........................... Components, sections, and templates

 Icons ................................. Basic styling of SVG icons

 Headings .............................. Heading classes
 Links ................................. Link classes and variations

 Buttons ............................... Button classes and variations

 Images ................................ LazyLoading and image transitions
 Aspect Ratio .......................... Structural image containers
 Image Overlay ......................... Simple image overlay
 Placeholder Images .................... Styling of Shopify section placeholders

 Linklist .............................. Block style link list styling
 Inline List ........................... Inline list component

 Table ................................. Responsive tables
 Form .................................. Form classes and variations
 Select ................................ Select classes and variations
 Alerts ................................ Alerts generally used for form responses

 Empty State ........................... Classes for empty pages such as empty cart page
 Segment ............................... Simple structure used on style page

 RTE ................................... Styling of RTE elements
 Pagination ............................ Pagination classes
 Breadcrumbs ........................... Breadcrumbs styling
 Custom Switcher ....................... Custom dropdown component
 Collapsibles .......................... Basic collapsibles structure
 Modal ................................. Modal structure and styling
 Drawers ............................... Drawers component used for mobile menu and cart
 Mobile Nav ............................ Mobile nav styling
 AJAX Cart ............................. AJAX Cart used in our drawer
 Cart .................................. Cart page structure and styling
 Quantity Selector ..................... Quantity selector component

 Back to Top ........................... Component across the site to return to top of page


 #SECTIONS ............................. Shopify Sections, Blocks, and Pages

 Sections .............................. Structure and styling for Shopify sections
 Header ................................ Main site header section including dropdown, megamenu, and AJAX search
 Footer ................................ Main site footer section

 Announcement Bar ...................... Announcement bar section
 Cookies ............................... Cookies bar section
 Popup ................................. Newsletter popup section

 Split ................................. Homepage Split Panels section
 Featured Split ........................ Homepage Featured Split used in Featured Product section
 Image with Text ....................... Image w/ Text section used across the site such as homepage contact section, PLP footer section
 Experiences Section ................... Experiences section
 Featured Products ..................... Featured products section
 Slideshow ............................. Slideshow using Flickity
 Hero .................................. Hero / Image w/ Text Overlay / Hero Video
 Featured Blocks ....................... Used on List Collections template
 Newsletter ............................ Newsletter section

 Product ............................... Product page structure and styling
 Product Recommendations ............... Recommendations section on PDP
 Collection / Product Grid ............. Collection page structure and styling
 Collection Product Item ............... Product loop styling

 Blog Posts Article Item ............... Article item styling
 Blog .................................. Blog page structure and styling
 Article ............................... Article page structure and styling

 Page .................................. Page structure and template styling
 About ................................. About page
 FAQ ................................... FAQ / Delivery page
 Contact ............................... Contact page
 Experiences ........................... Experiences page

 Login Pages ........................... Login, Register, Reset, Activate templates
 Account ............................... Account pages
 Order ................................. Order template
 Addresses ............................. Addresses template
 Captcha ............................... Shopify captcha template

 Password .............................. Password protection template
 Giftcard .............................. Gift card template


 #UTILITIES ............................ Specific utility and helper classes

==============================================================================*/
/*==============================================================================
  #SETTINGS
==============================================================================*/
/* Color Variables
  ============================================================================*/
/* Typography Variables
  ============================================================================*/
/* Font Face
  ============================================================================*/
/**
 * FONT PERFORMANCE
 * https://www.amazeelabs.com/en/journal/css-font-display
 *
 * We use `font-display: swap` to reduce block rendering. This can lead
 * to Flash of Unstyled Text (FOUT). The benefit is it guarantees to show our
 * custom font when loaded.
 *
 * If we want to prioritise performance, we can set `font-display: fallback`.
 * However, this has a short swap period. If custom font is not loaded in ~3s
 * the fallback font will be used.
 */
@font-face {
  font-family: 'TradeGothicPro';
  src: url("338926_0_0.woff2") format("woff2"), url("338926_0_0.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'OpenSans';
  src: url("open-sans-regular.woff2") format("woff2"), url("open-sans-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'OpenSans';
  src: url("open-sans-semibold.woff2") format("woff2"), url("open-sans-semibold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'SangBleuSerifLight';
  src: url("SangBleuSerif-Light-WebS.woff2") format("woff2"), url("SangBleuSerif-Light-WebS.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Lato';
  src: url("lato-regular.woff2") format("woff2"), url("lato-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'FelixTitlingMTStd';
  src: url("FelixTitling-Regular-TheConnaught.woff2") format("woff2"), url("FelixTitling-Regular-TheConnaught.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'InterFace';
  src: url("338B09_3_0.woff2") format("woff2"), url("338B09_3_0.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'InterFace';
  src: url("338B09_1_0.woff2") format("woff2"), url("338B09_1_0.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: 'InterFace';
  src: url("338B09_2_0.woff2") format("woff2"), url("338B09_2_0.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

/* Font Stacks
  ============================================================================*/
/* Grid & Breakpoints Variables
  ============================================================================*/
/*============================================================================
  Generate breakpoint-specific column widths and push classes
==============================================================================*/
/* Assorted Variables
  ============================================================================*/
/*================ Spacing Variables ================*/
/*================ Z-Index ================*/
/*================ Transitions ================*/
/*================ SVG ================*/
/*==============================================================================
  #TOOLS
==============================================================================*/
/* Typography Functions
  ============================================================================*/
/*============================================================================
  font-size: rem(24)
  Expected argument is a px value and unitless.
==============================================================================*/
/*============================================================================
  line-height: line-height(28, 18)
  Expected arguments are px values and unitless.
==============================================================================*/
/* Clearfix
  ============================================================================*/
/**
 * https://css-tricks.com/snippets/css/clear-fix/
 */
/* Media Query Mixin
  ============================================================================*/
/**
 * This uses the $breakpoints in SETTINGS / Grid & Breakpoint Variables
 */
/* Responsive Helpers
  ============================================================================*/
/*================ Responsive Show/Hide Helper ================*/
/**
 * Creates responsive helper classes based on our breakpoints such as
 * `small--hide`, `medium-up--show`
 */
/*================ Responsive Text Alignment Helper ================*/
/**
 * Creates responsive text helper classes based on our breakpoints such as
 * `small--text-right`, `medium-up--text-center`
 */
/* Accessibility / Visibility Helpers
  ============================================================================*/
/**
 * Mixin to hide elements visually but keep for accessibility
 */
/* Placeholder Mixin
  ============================================================================*/
/**
 * Vendor classes for setting form placeholder text.

    Parameters:
      $color - CSS color value
      $opacity - Opacity value
      $text-transform - Text Transform value

    Usage:
      .container {
        @include placeholder(#777, 0.5, uppercase)
      }
 */
/* Keyframes Mixin
  ============================================================================*/
/*==============================================================================
  #GENERIC
==============================================================================*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/**
 * Edited version of normalize
 * - Removed DOCUMENT code
 * - Removed `body` styling from SECTIONS
 * - Removed `h1` styling from SECTIONS
 */
/* Sections
   ========================================================================== */
/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block; }

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

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

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

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

/**
 * 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 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; }

/*
* Fake H1 element
*/
fh1 {
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold; }

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

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 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; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

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

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

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

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

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

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

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

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

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

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[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 Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

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

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

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

/* Reset
  ============================================================================*/
/**
 * A very simple reset that sits on top of Normalize.css.
 */
body,
h1, fh1, h2, fh2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
form, fieldset, legend,
figure,
table, th, td,
caption, dialog,
hr {
  margin: 0;
  padding: 0; }

/**
 * HTML5 display definitions
 */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline; }

/**
 * 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; }

/**
 * Minor form resets
 */
input,
label,
select,
button,
textarea {
  display: inline-block;
  vertical-align: middle;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  margin: 0;
  border: 0;
  appearance: none;
  background: none;
  border-radius: 0;
  color: inherit;
  outline: 0;
  white-space: normal; }

button {
  letter-spacing: inherit;
  text-transform: inherit;
  background: transparent;
  cursor: pointer;
  user-select: none; }

textarea {
  resize: vertical; }

select::-ms-expand {
  display: none; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  appearance: none; }

input[type="radio"]::-ms-check,
input[type="checkbox"]::-ms-check {
  display: none; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none; }

/* IE FIX - hide the clear field cross icon on search
 * REF: https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs
 *
 * Hide the reveal password eye icon.
 */
input::-ms-reveal,
input::-ms-clear {
  width: 0;
  height: 0; }

dialog {
  border: 0;
  background-color: transparent; }

/*==============================================================================
  #ELEMENTS
==============================================================================*/
/* Page
  ============================================================================*/
/**
 * 1. Font smoothing for Mac OS X. This property can have some negative affects
 *    if using very light fonts especially Raleway.
 * 2. Text size adjust to ensure mobile devices do not alter font sizes.
 * 3. Touch action that enables no-delay taps (FastClick-esque) on supporting
 *    browsers.
 */
html {
  box-sizing: border-box;
  font-family: "Lato", "Trebuchet MS", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.57;
  color: black;
  -webkit-font-smoothing: antialiased;
  /* [1] */
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  /* [2] */
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -ms-touch-action: manipulation;
  /* [3] */
  touch-action: manipulation; }

html,
body {
  background-color: white !important; }

/**
 * We use box-sizing inherit to make it easier to change the box-sizing in
 * plugins or other components that leverage other behavior.
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*,
*:before,
*:after {
  box-sizing: inherit; }

/**
 * We remove outlines from many focusable elements for aesthetic purposes.
 * However, we want to maintain accessibility, so if we recognise a user is
 * tabbing, we add a class to the body, and bring the focus back.
 */
html:not(.is-tabbing) *:focus {
  outline: none; }

/* Links
  ============================================================================*/
a {
  color: inherit;
  background-color: transparent;
  text-decoration: none; }

/* Forms
  ============================================================================*/
/**
 * Ensure form elements inherit font styling
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  line-height: 1.57;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; }

/**
 * General reset of inputs.
 * 1. Set webkit appearance to none to remove iOS default styling.
 */
input {
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  -webkit-appearance: none;
  /* [1] */ }

/**
 * Reset of button styles
 */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  cursor: pointer; }

input[type="search"] {
  -webkit-appearance: none; }

/**
 * Styling of disabled buttons
 */
button[disabled],
input[disabled] {
  cursor: default; }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  background-image: url(//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/ico-select.svg);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: transparent;
  background-size: 11px;
  padding-right: 28px;
  text-indent: 0.01px;
  text-overflow: '';
  cursor: pointer;
  color: inherit; }

/* Typography
  ============================================================================*/
h1, fh1, h2, fh2, h3, h4, h5, h6 {
  font-size: 1rem;
  font-weight: normal; }

p {
  margin-bottom: 1rem; }

hr {
  height: 1px;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  margin: 1rem 0; }

pre {
  margin-bottom: 1rem;
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

/* Images & Media
  ============================================================================*/
img,
iframe {
  max-width: 100%; }

audio, canvas, iframe, video, img {
  vertical-align: middle; }

iframe, object {
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
  outline: none; }

/*==============================================================================
  #OBJECTS
==============================================================================*/
/* Grid
  ============================================================================*/
/**
 * Based on CSS Wizardry grid
 */
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -20px; }
  .grid:after {
    content: '';
    display: table;
    clear: both; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .grid {
      margin-left: -24px; } }
  @media only screen and (min-width: 1025px) {
    .grid {
      margin-left: -74px; } }

.grid__item {
  float: left;
  padding-left: 20px;
  width: 100%;
  min-height: 1px; }
  .grid__item[class*='--push'] {
    position: relative; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .grid__item {
      padding-left: 24px; } }
  @media only screen and (min-width: 1025px) {
    .grid__item {
      padding-left: 74px; } }

/*============================================================================
  Gutterless grids have all the properties of regular grids, minus any spacing.
==============================================================================*/
.grid--full {
  margin-left: 0; }
  .grid--full > .grid__item {
    padding-left: 0; }

/*============================================================================
  Vertical spacing grids
==============================================================================*/
/**
 * This adds vertical spacing to grid items. Useful when you have grids that
 * wrap to multiple rows such as the collection list.
 *
 * 1. We add a negative margin to the grid to account for the grid items.
 */
.grid--items-have-spacing {
  margin-bottom: -20px;
  /* [1] */ }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .grid--items-have-spacing {
      margin-bottom: -24px; } }
  @media only screen and (min-width: 1025px) {
    .grid--items-have-spacing {
      margin-bottom: -74px; } }
  .grid--items-have-spacing > .grid__item,
  .grid--items-have-spacing > .flex-grid__item {
    margin-bottom: 20px; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .grid--items-have-spacing > .grid__item,
      .grid--items-have-spacing > .flex-grid__item {
        margin-bottom: 24px; } }
    @media only screen and (min-width: 1025px) {
      .grid--items-have-spacing > .grid__item,
      .grid--items-have-spacing > .flex-grid__item {
        margin-bottom: 74px; } }

/*============================================================================
  Reversed grids allow you to structure your source in the opposite
  order to how your rendered layout will appear.
==============================================================================*/
.grid--rev {
  direction: rtl;
  text-align: left; }
  .grid--rev > .grid__item {
    direction: ltr;
    text-align: left;
    float: right; }

/*============================================================================
  Flex Grid
  - Simple flexbox grid that can make use of breakpoint classes below
    as the normal float grid
==============================================================================*/
.flex-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .flex-grid {
      margin-left: -24px; } }
  @media only screen and (min-width: 1025px) {
    .flex-grid {
      margin-left: -74px; } }

.flex-grid__item {
  padding-left: 20px;
  width: 100%; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .flex-grid__item {
      padding-left: 24px; } }
  @media only screen and (min-width: 1025px) {
    .flex-grid__item {
      padding-left: 74px; } }

/*============================================================================
  Grid Columns
    - Create width classes, prepended by the breakpoint name.
==============================================================================*/
/*================ Grid push classes ================*/
/*================ Clearfix helper on uniform grids ================*/
/*================ Build Base Grid Classes ================*/
/** Whole */
.one-whole {
  width: 100%; }

/* Halves */
.one-half {
  width: 50%; }

/* Thirds */
.one-third {
  width: 33.33333%; }

.two-thirds {
  width: 66.66667%; }

/* Quarters */
.one-quarter {
  width: 25%; }

.two-quarters {
  width: 50%; }

.three-quarters {
  width: 75%; }

/* Fifths */
.one-fifth {
  width: 20%; }

.two-fifths {
  width: 40%; }

.three-fifths {
  width: 60%; }

.four-fifths {
  width: 80%; }

/* Sixths */
.one-sixth {
  width: 16.66667%; }

.two-sixths {
  width: 33.33333%; }

.three-sixths {
  width: 50%; }

.four-sixths {
  width: 66.66667%; }

.five-sixths {
  width: 83.33333%; }

/* Eighths */
.one-eighth {
  width: 12.5%; }

.two-eighths {
  width: 25%; }

.three-eighths {
  width: 37.5%; }

.four-eighths {
  width: 50%; }

.five-eighths {
  width: 62.5%; }

.six-eighths {
  width: 75%; }

.seven-eighths {
  width: 87.5%; }

/* Tenths */
.one-tenth {
  width: 10%; }

.two-tenths {
  width: 20%; }

.three-tenths {
  width: 30%; }

.four-tenths {
  width: 40%; }

.five-tenths {
  width: 50%; }

.six-tenths {
  width: 60%; }

.seven-tenths {
  width: 70%; }

.eight-tenths {
  width: 80%; }

.nine-tenths {
  width: 90%; }

/* Twelfths */
.one-twelfth {
  width: 8.33333%; }

.two-twelfths {
  width: 16.66667%; }

.three-twelfths {
  width: 25%; }

.four-twelfths {
  width: 33.33333%; }

.five-twelfths {
  width: 41.66667%; }

.six-twelfths {
  width: 50%; }

.seven-twelfths {
  width: 58.33333%; }

.eight-twelfths {
  width: 66.66667%; }

.nine-twelfths {
  width: 75%; }

.ten-twelfths {
  width: 83.33333%; }

.eleven-twelfths {
  width: 91.66667%; }

.show {
  display: block !important; }

.hide {
  display: none !important; }

.text-left {
  text-align: left !important; }

.text-right {
  text-align: right !important; }

.text-center {
  text-align: center !important; }

/*================ Build Responsive Grid Classes ================*/
@media only screen and (max-width: 767px) {
  /** Whole */
  .small--one-whole {
    width: 100%; }

  /* Halves */
  .small--one-half {
    width: 50%; }

  /* Thirds */
  .small--one-third {
    width: 33.33333%; }

  .small--two-thirds {
    width: 66.66667%; }

  /* Quarters */
  .small--one-quarter {
    width: 25%; }

  .small--two-quarters {
    width: 50%; }

  .small--three-quarters {
    width: 75%; }

  /* Fifths */
  .small--one-fifth {
    width: 20%; }

  .small--two-fifths {
    width: 40%; }

  .small--three-fifths {
    width: 60%; }

  .small--four-fifths {
    width: 80%; }

  /* Sixths */
  .small--one-sixth {
    width: 16.66667%; }

  .small--two-sixths {
    width: 33.33333%; }

  .small--three-sixths {
    width: 50%; }

  .small--four-sixths {
    width: 66.66667%; }

  .small--five-sixths {
    width: 83.33333%; }

  /* Eighths */
  .small--one-eighth {
    width: 12.5%; }

  .small--two-eighths {
    width: 25%; }

  .small--three-eighths {
    width: 37.5%; }

  .small--four-eighths {
    width: 50%; }

  .small--five-eighths {
    width: 62.5%; }

  .small--six-eighths {
    width: 75%; }

  .small--seven-eighths {
    width: 87.5%; }

  /* Tenths */
  .small--one-tenth {
    width: 10%; }

  .small--two-tenths {
    width: 20%; }

  .small--three-tenths {
    width: 30%; }

  .small--four-tenths {
    width: 40%; }

  .small--five-tenths {
    width: 50%; }

  .small--six-tenths {
    width: 60%; }

  .small--seven-tenths {
    width: 70%; }

  .small--eight-tenths {
    width: 80%; }

  .small--nine-tenths {
    width: 90%; }

  /* Twelfths */
  .small--one-twelfth {
    width: 8.33333%; }

  .small--two-twelfths {
    width: 16.66667%; }

  .small--three-twelfths {
    width: 25%; }

  .small--four-twelfths {
    width: 33.33333%; }

  .small--five-twelfths {
    width: 41.66667%; }

  .small--six-twelfths {
    width: 50%; }

  .small--seven-twelfths {
    width: 58.33333%; }

  .small--eight-twelfths {
    width: 66.66667%; }

  .small--nine-twelfths {
    width: 75%; }

  .small--ten-twelfths {
    width: 83.33333%; }

  .small--eleven-twelfths {
    width: 91.66667%; }

  .grid--uniform .small--one-half:nth-child(2n+1),
  .grid--uniform .small--one-third:nth-child(3n+1),
  .grid--uniform .small--one-quarter:nth-child(4n+1),
  .grid--uniform .small--one-fifth:nth-child(5n+1),
  .grid--uniform .small--one-sixth:nth-child(6n+1),
  .grid--uniform .small--two-sixths:nth-child(3n+1),
  .grid--uniform .small--three-sixths:nth-child(2n+1),
  .grid--uniform .small--one-eighth:nth-child(8n+1),
  .grid--uniform .small--two-eighths:nth-child(4n+1),
  .grid--uniform .small--four-eighths:nth-child(2n+1),
  .grid--uniform .small--five-tenths:nth-child(2n+1),
  .grid--uniform .small--one-twelfth:nth-child(12n+1),
  .grid--uniform .small--two-twelfths:nth-child(6n+1),
  .grid--uniform .small--three-twelfths:nth-child(4n+1),
  .grid--uniform .small--four-twelfths:nth-child(3n+1),
  .grid--uniform .small--six-twelfths:nth-child(2n+1) {
    clear: both; }

  .small--show {
    display: block !important; }

  .small--hide {
    display: none !important; }

  .small--text-left {
    text-align: left !important; }

  .small--text-right {
    text-align: right !important; }

  .small--text-center {
    text-align: center !important; } }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /** Whole */
  .medium--one-whole {
    width: 100%; }

  /* Halves */
  .medium--one-half {
    width: 50%; }

  /* Thirds */
  .medium--one-third {
    width: 33.33333%; }

  .medium--two-thirds {
    width: 66.66667%; }

  /* Quarters */
  .medium--one-quarter {
    width: 25%; }

  .medium--two-quarters {
    width: 50%; }

  .medium--three-quarters {
    width: 75%; }

  /* Fifths */
  .medium--one-fifth {
    width: 20%; }

  .medium--two-fifths {
    width: 40%; }

  .medium--three-fifths {
    width: 60%; }

  .medium--four-fifths {
    width: 80%; }

  /* Sixths */
  .medium--one-sixth {
    width: 16.66667%; }

  .medium--two-sixths {
    width: 33.33333%; }

  .medium--three-sixths {
    width: 50%; }

  .medium--four-sixths {
    width: 66.66667%; }

  .medium--five-sixths {
    width: 83.33333%; }

  /* Eighths */
  .medium--one-eighth {
    width: 12.5%; }

  .medium--two-eighths {
    width: 25%; }

  .medium--three-eighths {
    width: 37.5%; }

  .medium--four-eighths {
    width: 50%; }

  .medium--five-eighths {
    width: 62.5%; }

  .medium--six-eighths {
    width: 75%; }

  .medium--seven-eighths {
    width: 87.5%; }

  /* Tenths */
  .medium--one-tenth {
    width: 10%; }

  .medium--two-tenths {
    width: 20%; }

  .medium--three-tenths {
    width: 30%; }

  .medium--four-tenths {
    width: 40%; }

  .medium--five-tenths {
    width: 50%; }

  .medium--six-tenths {
    width: 60%; }

  .medium--seven-tenths {
    width: 70%; }

  .medium--eight-tenths {
    width: 80%; }

  .medium--nine-tenths {
    width: 90%; }

  /* Twelfths */
  .medium--one-twelfth {
    width: 8.33333%; }

  .medium--two-twelfths {
    width: 16.66667%; }

  .medium--three-twelfths {
    width: 25%; }

  .medium--four-twelfths {
    width: 33.33333%; }

  .medium--five-twelfths {
    width: 41.66667%; }

  .medium--six-twelfths {
    width: 50%; }

  .medium--seven-twelfths {
    width: 58.33333%; }

  .medium--eight-twelfths {
    width: 66.66667%; }

  .medium--nine-twelfths {
    width: 75%; }

  .medium--ten-twelfths {
    width: 83.33333%; }

  .medium--eleven-twelfths {
    width: 91.66667%; }

  .grid--uniform .medium--one-half:nth-child(2n+1),
  .grid--uniform .medium--one-third:nth-child(3n+1),
  .grid--uniform .medium--one-quarter:nth-child(4n+1),
  .grid--uniform .medium--one-fifth:nth-child(5n+1),
  .grid--uniform .medium--one-sixth:nth-child(6n+1),
  .grid--uniform .medium--two-sixths:nth-child(3n+1),
  .grid--uniform .medium--three-sixths:nth-child(2n+1),
  .grid--uniform .medium--one-eighth:nth-child(8n+1),
  .grid--uniform .medium--two-eighths:nth-child(4n+1),
  .grid--uniform .medium--four-eighths:nth-child(2n+1),
  .grid--uniform .medium--five-tenths:nth-child(2n+1),
  .grid--uniform .medium--one-twelfth:nth-child(12n+1),
  .grid--uniform .medium--two-twelfths:nth-child(6n+1),
  .grid--uniform .medium--three-twelfths:nth-child(4n+1),
  .grid--uniform .medium--four-twelfths:nth-child(3n+1),
  .grid--uniform .medium--six-twelfths:nth-child(2n+1) {
    clear: both; }

  .medium--show {
    display: block !important; }

  .medium--hide {
    display: none !important; }

  .medium--text-left {
    text-align: left !important; }

  .medium--text-right {
    text-align: right !important; }

  .medium--text-center {
    text-align: center !important; } }
@media only screen and (min-width: 768px) {
  /** Whole */
  .medium-up--one-whole {
    width: 100%; }

  /* Halves */
  .medium-up--one-half {
    width: 50%; }

  /* Thirds */
  .medium-up--one-third {
    width: 33.33333%; }

  .medium-up--two-thirds {
    width: 66.66667%; }

  /* Quarters */
  .medium-up--one-quarter {
    width: 25%; }

  .medium-up--two-quarters {
    width: 50%; }

  .medium-up--three-quarters {
    width: 75%; }

  /* Fifths */
  .medium-up--one-fifth {
    width: 20%; }

  .medium-up--two-fifths {
    width: 40%; }

  .medium-up--three-fifths {
    width: 60%; }

  .medium-up--four-fifths {
    width: 80%; }

  /* Sixths */
  .medium-up--one-sixth {
    width: 16.66667%; }

  .medium-up--two-sixths {
    width: 33.33333%; }

  .medium-up--three-sixths {
    width: 50%; }

  .medium-up--four-sixths {
    width: 66.66667%; }

  .medium-up--five-sixths {
    width: 83.33333%; }

  /* Eighths */
  .medium-up--one-eighth {
    width: 12.5%; }

  .medium-up--two-eighths {
    width: 25%; }

  .medium-up--three-eighths {
    width: 37.5%; }

  .medium-up--four-eighths {
    width: 50%; }

  .medium-up--five-eighths {
    width: 62.5%; }

  .medium-up--six-eighths {
    width: 75%; }

  .medium-up--seven-eighths {
    width: 87.5%; }

  /* Tenths */
  .medium-up--one-tenth {
    width: 10%; }

  .medium-up--two-tenths {
    width: 20%; }

  .medium-up--three-tenths {
    width: 30%; }

  .medium-up--four-tenths {
    width: 40%; }

  .medium-up--five-tenths {
    width: 50%; }

  .medium-up--six-tenths {
    width: 60%; }

  .medium-up--seven-tenths {
    width: 70%; }

  .medium-up--eight-tenths {
    width: 80%; }

  .medium-up--nine-tenths {
    width: 90%; }

  /* Twelfths */
  .medium-up--one-twelfth {
    width: 8.33333%; }

  .medium-up--two-twelfths {
    width: 16.66667%; }

  .medium-up--three-twelfths {
    width: 25%; }

  .medium-up--four-twelfths {
    width: 33.33333%; }

  .medium-up--five-twelfths {
    width: 41.66667%; }

  .medium-up--six-twelfths {
    width: 50%; }

  .medium-up--seven-twelfths {
    width: 58.33333%; }

  .medium-up--eight-twelfths {
    width: 66.66667%; }

  .medium-up--nine-twelfths {
    width: 75%; }

  .medium-up--ten-twelfths {
    width: 83.33333%; }

  .medium-up--eleven-twelfths {
    width: 91.66667%; }

  .grid--uniform .medium-up--one-half:nth-child(2n+1),
  .grid--uniform .medium-up--one-third:nth-child(3n+1),
  .grid--uniform .medium-up--one-quarter:nth-child(4n+1),
  .grid--uniform .medium-up--one-fifth:nth-child(5n+1),
  .grid--uniform .medium-up--one-sixth:nth-child(6n+1),
  .grid--uniform .medium-up--two-sixths:nth-child(3n+1),
  .grid--uniform .medium-up--three-sixths:nth-child(2n+1),
  .grid--uniform .medium-up--one-eighth:nth-child(8n+1),
  .grid--uniform .medium-up--two-eighths:nth-child(4n+1),
  .grid--uniform .medium-up--four-eighths:nth-child(2n+1),
  .grid--uniform .medium-up--five-tenths:nth-child(2n+1),
  .grid--uniform .medium-up--one-twelfth:nth-child(12n+1),
  .grid--uniform .medium-up--two-twelfths:nth-child(6n+1),
  .grid--uniform .medium-up--three-twelfths:nth-child(4n+1),
  .grid--uniform .medium-up--four-twelfths:nth-child(3n+1),
  .grid--uniform .medium-up--six-twelfths:nth-child(2n+1) {
    clear: both; }

  .medium-up--show {
    display: block !important; }

  .medium-up--hide {
    display: none !important; }

  .medium-up--text-left {
    text-align: left !important; }

  .medium-up--text-right {
    text-align: right !important; }

  .medium-up--text-center {
    text-align: center !important; } }
@media only screen and (max-width: 1024px) {
  /** Whole */
  .medium-down--one-whole {
    width: 100%; }

  /* Halves */
  .medium-down--one-half {
    width: 50%; }

  /* Thirds */
  .medium-down--one-third {
    width: 33.33333%; }

  .medium-down--two-thirds {
    width: 66.66667%; }

  /* Quarters */
  .medium-down--one-quarter {
    width: 25%; }

  .medium-down--two-quarters {
    width: 50%; }

  .medium-down--three-quarters {
    width: 75%; }

  /* Fifths */
  .medium-down--one-fifth {
    width: 20%; }

  .medium-down--two-fifths {
    width: 40%; }

  .medium-down--three-fifths {
    width: 60%; }

  .medium-down--four-fifths {
    width: 80%; }

  /* Sixths */
  .medium-down--one-sixth {
    width: 16.66667%; }

  .medium-down--two-sixths {
    width: 33.33333%; }

  .medium-down--three-sixths {
    width: 50%; }

  .medium-down--four-sixths {
    width: 66.66667%; }

  .medium-down--five-sixths {
    width: 83.33333%; }

  /* Eighths */
  .medium-down--one-eighth {
    width: 12.5%; }

  .medium-down--two-eighths {
    width: 25%; }

  .medium-down--three-eighths {
    width: 37.5%; }

  .medium-down--four-eighths {
    width: 50%; }

  .medium-down--five-eighths {
    width: 62.5%; }

  .medium-down--six-eighths {
    width: 75%; }

  .medium-down--seven-eighths {
    width: 87.5%; }

  /* Tenths */
  .medium-down--one-tenth {
    width: 10%; }

  .medium-down--two-tenths {
    width: 20%; }

  .medium-down--three-tenths {
    width: 30%; }

  .medium-down--four-tenths {
    width: 40%; }

  .medium-down--five-tenths {
    width: 50%; }

  .medium-down--six-tenths {
    width: 60%; }

  .medium-down--seven-tenths {
    width: 70%; }

  .medium-down--eight-tenths {
    width: 80%; }

  .medium-down--nine-tenths {
    width: 90%; }

  /* Twelfths */
  .medium-down--one-twelfth {
    width: 8.33333%; }

  .medium-down--two-twelfths {
    width: 16.66667%; }

  .medium-down--three-twelfths {
    width: 25%; }

  .medium-down--four-twelfths {
    width: 33.33333%; }

  .medium-down--five-twelfths {
    width: 41.66667%; }

  .medium-down--six-twelfths {
    width: 50%; }

  .medium-down--seven-twelfths {
    width: 58.33333%; }

  .medium-down--eight-twelfths {
    width: 66.66667%; }

  .medium-down--nine-twelfths {
    width: 75%; }

  .medium-down--ten-twelfths {
    width: 83.33333%; }

  .medium-down--eleven-twelfths {
    width: 91.66667%; }

  .grid--uniform .medium-down--one-half:nth-child(2n+1),
  .grid--uniform .medium-down--one-third:nth-child(3n+1),
  .grid--uniform .medium-down--one-quarter:nth-child(4n+1),
  .grid--uniform .medium-down--one-fifth:nth-child(5n+1),
  .grid--uniform .medium-down--one-sixth:nth-child(6n+1),
  .grid--uniform .medium-down--two-sixths:nth-child(3n+1),
  .grid--uniform .medium-down--three-sixths:nth-child(2n+1),
  .grid--uniform .medium-down--one-eighth:nth-child(8n+1),
  .grid--uniform .medium-down--two-eighths:nth-child(4n+1),
  .grid--uniform .medium-down--four-eighths:nth-child(2n+1),
  .grid--uniform .medium-down--five-tenths:nth-child(2n+1),
  .grid--uniform .medium-down--one-twelfth:nth-child(12n+1),
  .grid--uniform .medium-down--two-twelfths:nth-child(6n+1),
  .grid--uniform .medium-down--three-twelfths:nth-child(4n+1),
  .grid--uniform .medium-down--four-twelfths:nth-child(3n+1),
  .grid--uniform .medium-down--six-twelfths:nth-child(2n+1) {
    clear: both; }

  .medium-down--show {
    display: block !important; }

  .medium-down--hide {
    display: none !important; }

  .medium-down--text-left {
    text-align: left !important; }

  .medium-down--text-right {
    text-align: right !important; }

  .medium-down--text-center {
    text-align: center !important; } }
@media only screen and (min-width: 1025px) and (max-width: 1439px) {
  /** Whole */
  .large--one-whole {
    width: 100%; }

  /* Halves */
  .large--one-half {
    width: 50%; }

  /* Thirds */
  .large--one-third {
    width: 33.33333%; }

  .large--two-thirds {
    width: 66.66667%; }

  /* Quarters */
  .large--one-quarter {
    width: 25%; }

  .large--two-quarters {
    width: 50%; }

  .large--three-quarters {
    width: 75%; }

  /* Fifths */
  .large--one-fifth {
    width: 20%; }

  .large--two-fifths {
    width: 40%; }

  .large--three-fifths {
    width: 60%; }

  .large--four-fifths {
    width: 80%; }

  /* Sixths */
  .large--one-sixth {
    width: 16.66667%; }

  .large--two-sixths {
    width: 33.33333%; }

  .large--three-sixths {
    width: 50%; }

  .large--four-sixths {
    width: 66.66667%; }

  .large--five-sixths {
    width: 83.33333%; }

  /* Eighths */
  .large--one-eighth {
    width: 12.5%; }

  .large--two-eighths {
    width: 25%; }

  .large--three-eighths {
    width: 37.5%; }

  .large--four-eighths {
    width: 50%; }

  .large--five-eighths {
    width: 62.5%; }

  .large--six-eighths {
    width: 75%; }

  .large--seven-eighths {
    width: 87.5%; }

  /* Tenths */
  .large--one-tenth {
    width: 10%; }

  .large--two-tenths {
    width: 20%; }

  .large--three-tenths {
    width: 30%; }

  .large--four-tenths {
    width: 40%; }

  .large--five-tenths {
    width: 50%; }

  .large--six-tenths {
    width: 60%; }

  .large--seven-tenths {
    width: 70%; }

  .large--eight-tenths {
    width: 80%; }

  .large--nine-tenths {
    width: 90%; }

  /* Twelfths */
  .large--one-twelfth {
    width: 8.33333%; }

  .large--two-twelfths {
    width: 16.66667%; }

  .large--three-twelfths {
    width: 25%; }

  .large--four-twelfths {
    width: 33.33333%; }

  .large--five-twelfths {
    width: 41.66667%; }

  .large--six-twelfths {
    width: 50%; }

  .large--seven-twelfths {
    width: 58.33333%; }

  .large--eight-twelfths {
    width: 66.66667%; }

  .large--nine-twelfths {
    width: 75%; }

  .large--ten-twelfths {
    width: 83.33333%; }

  .large--eleven-twelfths {
    width: 91.66667%; }

  .grid--uniform .large--one-half:nth-child(2n+1),
  .grid--uniform .large--one-third:nth-child(3n+1),
  .grid--uniform .large--one-quarter:nth-child(4n+1),
  .grid--uniform .large--one-fifth:nth-child(5n+1),
  .grid--uniform .large--one-sixth:nth-child(6n+1),
  .grid--uniform .large--two-sixths:nth-child(3n+1),
  .grid--uniform .large--three-sixths:nth-child(2n+1),
  .grid--uniform .large--one-eighth:nth-child(8n+1),
  .grid--uniform .large--two-eighths:nth-child(4n+1),
  .grid--uniform .large--four-eighths:nth-child(2n+1),
  .grid--uniform .large--five-tenths:nth-child(2n+1),
  .grid--uniform .large--one-twelfth:nth-child(12n+1),
  .grid--uniform .large--two-twelfths:nth-child(6n+1),
  .grid--uniform .large--three-twelfths:nth-child(4n+1),
  .grid--uniform .large--four-twelfths:nth-child(3n+1),
  .grid--uniform .large--six-twelfths:nth-child(2n+1) {
    clear: both; }

  .large--show {
    display: block !important; }

  .large--hide {
    display: none !important; }

  .large--text-left {
    text-align: left !important; }

  .large--text-right {
    text-align: right !important; }

  .large--text-center {
    text-align: center !important; } }
@media only screen and (min-width: 1025px) {
  /** Whole */
  .large-up--one-whole {
    width: 100%; }

  /* Halves */
  .large-up--one-half {
    width: 50%; }

  /* Thirds */
  .large-up--one-third {
    width: 33.33333%; }

  .large-up--two-thirds {
    width: 66.66667%; }

  /* Quarters */
  .large-up--one-quarter {
    width: 25%; }

  .large-up--two-quarters {
    width: 50%; }

  .large-up--three-quarters {
    width: 75%; }

  /* Fifths */
  .large-up--one-fifth {
    width: 20%; }

  .large-up--two-fifths {
    width: 40%; }

  .large-up--three-fifths {
    width: 60%; }

  .large-up--four-fifths {
    width: 80%; }

  /* Sixths */
  .large-up--one-sixth {
    width: 16.66667%; }

  .large-up--two-sixths {
    width: 33.33333%; }

  .large-up--three-sixths {
    width: 50%; }

  .large-up--four-sixths {
    width: 66.66667%; }

  .large-up--five-sixths {
    width: 83.33333%; }

  /* Eighths */
  .large-up--one-eighth {
    width: 12.5%; }

  .large-up--two-eighths {
    width: 25%; }

  .large-up--three-eighths {
    width: 37.5%; }

  .large-up--four-eighths {
    width: 50%; }

  .large-up--five-eighths {
    width: 62.5%; }

  .large-up--six-eighths {
    width: 75%; }

  .large-up--seven-eighths {
    width: 87.5%; }

  /* Tenths */
  .large-up--one-tenth {
    width: 10%; }

  .large-up--two-tenths {
    width: 20%; }

  .large-up--three-tenths {
    width: 30%; }

  .large-up--four-tenths {
    width: 40%; }

  .large-up--five-tenths {
    width: 50%; }

  .large-up--six-tenths {
    width: 60%; }

  .large-up--seven-tenths {
    width: 70%; }

  .large-up--eight-tenths {
    width: 80%; }

  .large-up--nine-tenths {
    width: 90%; }

  /* Twelfths */
  .large-up--one-twelfth {
    width: 8.33333%; }

  .large-up--two-twelfths {
    width: 16.66667%; }

  .large-up--three-twelfths {
    width: 25%; }

  .large-up--four-twelfths {
    width: 33.33333%; }

  .large-up--five-twelfths {
    width: 41.66667%; }

  .large-up--six-twelfths {
    width: 50%; }

  .large-up--seven-twelfths {
    width: 58.33333%; }

  .large-up--eight-twelfths {
    width: 66.66667%; }

  .large-up--nine-twelfths {
    width: 75%; }

  .large-up--ten-twelfths {
    width: 83.33333%; }

  .large-up--eleven-twelfths {
    width: 91.66667%; }

  .grid--uniform .large-up--one-half:nth-child(2n+1),
  .grid--uniform .large-up--one-third:nth-child(3n+1),
  .grid--uniform .large-up--one-quarter:nth-child(4n+1),
  .grid--uniform .large-up--one-fifth:nth-child(5n+1),
  .grid--uniform .large-up--one-sixth:nth-child(6n+1),
  .grid--uniform .large-up--two-sixths:nth-child(3n+1),
  .grid--uniform .large-up--three-sixths:nth-child(2n+1),
  .grid--uniform .large-up--one-eighth:nth-child(8n+1),
  .grid--uniform .large-up--two-eighths:nth-child(4n+1),
  .grid--uniform .large-up--four-eighths:nth-child(2n+1),
  .grid--uniform .large-up--five-tenths:nth-child(2n+1),
  .grid--uniform .large-up--one-twelfth:nth-child(12n+1),
  .grid--uniform .large-up--two-twelfths:nth-child(6n+1),
  .grid--uniform .large-up--three-twelfths:nth-child(4n+1),
  .grid--uniform .large-up--four-twelfths:nth-child(3n+1),
  .grid--uniform .large-up--six-twelfths:nth-child(2n+1) {
    clear: both; }

  .large-up--show {
    display: block !important; }

  .large-up--hide {
    display: none !important; }

  .large-up--text-left {
    text-align: left !important; }

  .large-up--text-right {
    text-align: right !important; }

  .large-up--text-center {
    text-align: center !important; } }
@media only screen and (max-width: 1439px) {
  /** Whole */
  .large-down--one-whole {
    width: 100%; }

  /* Halves */
  .large-down--one-half {
    width: 50%; }

  /* Thirds */
  .large-down--one-third {
    width: 33.33333%; }

  .large-down--two-thirds {
    width: 66.66667%; }

  /* Quarters */
  .large-down--one-quarter {
    width: 25%; }

  .large-down--two-quarters {
    width: 50%; }

  .large-down--three-quarters {
    width: 75%; }

  /* Fifths */
  .large-down--one-fifth {
    width: 20%; }

  .large-down--two-fifths {
    width: 40%; }

  .large-down--three-fifths {
    width: 60%; }

  .large-down--four-fifths {
    width: 80%; }

  /* Sixths */
  .large-down--one-sixth {
    width: 16.66667%; }

  .large-down--two-sixths {
    width: 33.33333%; }

  .large-down--three-sixths {
    width: 50%; }

  .large-down--four-sixths {
    width: 66.66667%; }

  .large-down--five-sixths {
    width: 83.33333%; }

  /* Eighths */
  .large-down--one-eighth {
    width: 12.5%; }

  .large-down--two-eighths {
    width: 25%; }

  .large-down--three-eighths {
    width: 37.5%; }

  .large-down--four-eighths {
    width: 50%; }

  .large-down--five-eighths {
    width: 62.5%; }

  .large-down--six-eighths {
    width: 75%; }

  .large-down--seven-eighths {
    width: 87.5%; }

  /* Tenths */
  .large-down--one-tenth {
    width: 10%; }

  .large-down--two-tenths {
    width: 20%; }

  .large-down--three-tenths {
    width: 30%; }

  .large-down--four-tenths {
    width: 40%; }

  .large-down--five-tenths {
    width: 50%; }

  .large-down--six-tenths {
    width: 60%; }

  .large-down--seven-tenths {
    width: 70%; }

  .large-down--eight-tenths {
    width: 80%; }

  .large-down--nine-tenths {
    width: 90%; }

  /* Twelfths */
  .large-down--one-twelfth {
    width: 8.33333%; }

  .large-down--two-twelfths {
    width: 16.66667%; }

  .large-down--three-twelfths {
    width: 25%; }

  .large-down--four-twelfths {
    width: 33.33333%; }

  .large-down--five-twelfths {
    width: 41.66667%; }

  .large-down--six-twelfths {
    width: 50%; }

  .large-down--seven-twelfths {
    width: 58.33333%; }

  .large-down--eight-twelfths {
    width: 66.66667%; }

  .large-down--nine-twelfths {
    width: 75%; }

  .large-down--ten-twelfths {
    width: 83.33333%; }

  .large-down--eleven-twelfths {
    width: 91.66667%; }

  .grid--uniform .large-down--one-half:nth-child(2n+1),
  .grid--uniform .large-down--one-third:nth-child(3n+1),
  .grid--uniform .large-down--one-quarter:nth-child(4n+1),
  .grid--uniform .large-down--one-fifth:nth-child(5n+1),
  .grid--uniform .large-down--one-sixth:nth-child(6n+1),
  .grid--uniform .large-down--two-sixths:nth-child(3n+1),
  .grid--uniform .large-down--three-sixths:nth-child(2n+1),
  .grid--uniform .large-down--one-eighth:nth-child(8n+1),
  .grid--uniform .large-down--two-eighths:nth-child(4n+1),
  .grid--uniform .large-down--four-eighths:nth-child(2n+1),
  .grid--uniform .large-down--five-tenths:nth-child(2n+1),
  .grid--uniform .large-down--one-twelfth:nth-child(12n+1),
  .grid--uniform .large-down--two-twelfths:nth-child(6n+1),
  .grid--uniform .large-down--three-twelfths:nth-child(4n+1),
  .grid--uniform .large-down--four-twelfths:nth-child(3n+1),
  .grid--uniform .large-down--six-twelfths:nth-child(2n+1) {
    clear: both; }

  .large-down--show {
    display: block !important; }

  .large-down--hide {
    display: none !important; }

  .large-down--text-left {
    text-align: left !important; }

  .large-down--text-right {
    text-align: right !important; }

  .large-down--text-center {
    text-align: center !important; } }
@media only screen and (min-width: 1440px) {
  /** Whole */
  .widescreen--one-whole {
    width: 100%; }

  /* Halves */
  .widescreen--one-half {
    width: 50%; }

  /* Thirds */
  .widescreen--one-third {
    width: 33.33333%; }

  .widescreen--two-thirds {
    width: 66.66667%; }

  /* Quarters */
  .widescreen--one-quarter {
    width: 25%; }

  .widescreen--two-quarters {
    width: 50%; }

  .widescreen--three-quarters {
    width: 75%; }

  /* Fifths */
  .widescreen--one-fifth {
    width: 20%; }

  .widescreen--two-fifths {
    width: 40%; }

  .widescreen--three-fifths {
    width: 60%; }

  .widescreen--four-fifths {
    width: 80%; }

  /* Sixths */
  .widescreen--one-sixth {
    width: 16.66667%; }

  .widescreen--two-sixths {
    width: 33.33333%; }

  .widescreen--three-sixths {
    width: 50%; }

  .widescreen--four-sixths {
    width: 66.66667%; }

  .widescreen--five-sixths {
    width: 83.33333%; }

  /* Eighths */
  .widescreen--one-eighth {
    width: 12.5%; }

  .widescreen--two-eighths {
    width: 25%; }

  .widescreen--three-eighths {
    width: 37.5%; }

  .widescreen--four-eighths {
    width: 50%; }

  .widescreen--five-eighths {
    width: 62.5%; }

  .widescreen--six-eighths {
    width: 75%; }

  .widescreen--seven-eighths {
    width: 87.5%; }

  /* Tenths */
  .widescreen--one-tenth {
    width: 10%; }

  .widescreen--two-tenths {
    width: 20%; }

  .widescreen--three-tenths {
    width: 30%; }

  .widescreen--four-tenths {
    width: 40%; }

  .widescreen--five-tenths {
    width: 50%; }

  .widescreen--six-tenths {
    width: 60%; }

  .widescreen--seven-tenths {
    width: 70%; }

  .widescreen--eight-tenths {
    width: 80%; }

  .widescreen--nine-tenths {
    width: 90%; }

  /* Twelfths */
  .widescreen--one-twelfth {
    width: 8.33333%; }

  .widescreen--two-twelfths {
    width: 16.66667%; }

  .widescreen--three-twelfths {
    width: 25%; }

  .widescreen--four-twelfths {
    width: 33.33333%; }

  .widescreen--five-twelfths {
    width: 41.66667%; }

  .widescreen--six-twelfths {
    width: 50%; }

  .widescreen--seven-twelfths {
    width: 58.33333%; }

  .widescreen--eight-twelfths {
    width: 66.66667%; }

  .widescreen--nine-twelfths {
    width: 75%; }

  .widescreen--ten-twelfths {
    width: 83.33333%; }

  .widescreen--eleven-twelfths {
    width: 91.66667%; }

  .grid--uniform .widescreen--one-half:nth-child(2n+1),
  .grid--uniform .widescreen--one-third:nth-child(3n+1),
  .grid--uniform .widescreen--one-quarter:nth-child(4n+1),
  .grid--uniform .widescreen--one-fifth:nth-child(5n+1),
  .grid--uniform .widescreen--one-sixth:nth-child(6n+1),
  .grid--uniform .widescreen--two-sixths:nth-child(3n+1),
  .grid--uniform .widescreen--three-sixths:nth-child(2n+1),
  .grid--uniform .widescreen--one-eighth:nth-child(8n+1),
  .grid--uniform .widescreen--two-eighths:nth-child(4n+1),
  .grid--uniform .widescreen--four-eighths:nth-child(2n+1),
  .grid--uniform .widescreen--five-tenths:nth-child(2n+1),
  .grid--uniform .widescreen--one-twelfth:nth-child(12n+1),
  .grid--uniform .widescreen--two-twelfths:nth-child(6n+1),
  .grid--uniform .widescreen--three-twelfths:nth-child(4n+1),
  .grid--uniform .widescreen--four-twelfths:nth-child(3n+1),
  .grid--uniform .widescreen--six-twelfths:nth-child(2n+1) {
    clear: both; }

  .widescreen--show {
    display: block !important; }

  .widescreen--hide {
    display: none !important; }

  .widescreen--text-left {
    text-align: left !important; }

  .widescreen--text-right {
    text-align: right !important; }

  .widescreen--text-center {
    text-align: center !important; } }
@media only screen and (min-width: 1680px) {
  /** Whole */
  .massive--one-whole {
    width: 100%; }

  /* Halves */
  .massive--one-half {
    width: 50%; }

  /* Thirds */
  .massive--one-third {
    width: 33.33333%; }

  .massive--two-thirds {
    width: 66.66667%; }

  /* Quarters */
  .massive--one-quarter {
    width: 25%; }

  .massive--two-quarters {
    width: 50%; }

  .massive--three-quarters {
    width: 75%; }

  /* Fifths */
  .massive--one-fifth {
    width: 20%; }

  .massive--two-fifths {
    width: 40%; }

  .massive--three-fifths {
    width: 60%; }

  .massive--four-fifths {
    width: 80%; }

  /* Sixths */
  .massive--one-sixth {
    width: 16.66667%; }

  .massive--two-sixths {
    width: 33.33333%; }

  .massive--three-sixths {
    width: 50%; }

  .massive--four-sixths {
    width: 66.66667%; }

  .massive--five-sixths {
    width: 83.33333%; }

  /* Eighths */
  .massive--one-eighth {
    width: 12.5%; }

  .massive--two-eighths {
    width: 25%; }

  .massive--three-eighths {
    width: 37.5%; }

  .massive--four-eighths {
    width: 50%; }

  .massive--five-eighths {
    width: 62.5%; }

  .massive--six-eighths {
    width: 75%; }

  .massive--seven-eighths {
    width: 87.5%; }

  /* Tenths */
  .massive--one-tenth {
    width: 10%; }

  .massive--two-tenths {
    width: 20%; }

  .massive--three-tenths {
    width: 30%; }

  .massive--four-tenths {
    width: 40%; }

  .massive--five-tenths {
    width: 50%; }

  .massive--six-tenths {
    width: 60%; }

  .massive--seven-tenths {
    width: 70%; }

  .massive--eight-tenths {
    width: 80%; }

  .massive--nine-tenths {
    width: 90%; }

  /* Twelfths */
  .massive--one-twelfth {
    width: 8.33333%; }

  .massive--two-twelfths {
    width: 16.66667%; }

  .massive--three-twelfths {
    width: 25%; }

  .massive--four-twelfths {
    width: 33.33333%; }

  .massive--five-twelfths {
    width: 41.66667%; }

  .massive--six-twelfths {
    width: 50%; }

  .massive--seven-twelfths {
    width: 58.33333%; }

  .massive--eight-twelfths {
    width: 66.66667%; }

  .massive--nine-twelfths {
    width: 75%; }

  .massive--ten-twelfths {
    width: 83.33333%; }

  .massive--eleven-twelfths {
    width: 91.66667%; }

  .grid--uniform .massive--one-half:nth-child(2n+1),
  .grid--uniform .massive--one-third:nth-child(3n+1),
  .grid--uniform .massive--one-quarter:nth-child(4n+1),
  .grid--uniform .massive--one-fifth:nth-child(5n+1),
  .grid--uniform .massive--one-sixth:nth-child(6n+1),
  .grid--uniform .massive--two-sixths:nth-child(3n+1),
  .grid--uniform .massive--three-sixths:nth-child(2n+1),
  .grid--uniform .massive--one-eighth:nth-child(8n+1),
  .grid--uniform .massive--two-eighths:nth-child(4n+1),
  .grid--uniform .massive--four-eighths:nth-child(2n+1),
  .grid--uniform .massive--five-tenths:nth-child(2n+1),
  .grid--uniform .massive--one-twelfth:nth-child(12n+1),
  .grid--uniform .massive--two-twelfths:nth-child(6n+1),
  .grid--uniform .massive--three-twelfths:nth-child(4n+1),
  .grid--uniform .massive--four-twelfths:nth-child(3n+1),
  .grid--uniform .massive--six-twelfths:nth-child(2n+1) {
    clear: both; }

  .massive--show {
    display: block !important; }

  .massive--hide {
    display: none !important; }

  .massive--text-left {
    text-align: left !important; }

  .massive--text-right {
    text-align: right !important; }

  .massive--text-center {
    text-align: center !important; } }
/*================ Build Grid Push Classes ================*/
@media only screen and (max-width: 767px) {
  /* Halves */
  .small--push-one-half {
    left: 50%; }

  /* Thirds */
  .small--push-one-third {
    left: 33.33333%; }

  .small--push-two-thirds {
    left: 66.66667%; }

  /* Quarters */
  .small--push-one-quarter {
    left: 25%; }

  .small--push-two-quarters {
    left: 50%; }

  .small--push-three-quarters {
    left: 75%; }

  /* Fifths */
  .small--push-one-fifth {
    left: 20%; }

  .small--push-two-fifths {
    left: 40%; }

  .small--push-three-fifths {
    left: 60%; }

  .small--push-four-fifths {
    left: 80%; }

  /* Sixths */
  .small--push-one-sixth {
    left: 16.66667%; }

  .small--push-two-sixths {
    left: 33.33333%; }

  .small--push-three-sixths {
    left: 50%; }

  .small--push-four-sixths {
    left: 66.66667%; }

  .small--push-five-sixths {
    left: 83.33333%; }

  /* Eighths */
  .small--push-one-eighth {
    left: 12.5%; }

  .small--push-two-eighths {
    left: 25%; }

  .small--push-three-eighths {
    left: 37.5%; }

  .small--push-four-eighths {
    left: 50%; }

  .small--push-five-eighths {
    left: 62.5%; }

  .small--push-six-eighths {
    left: 75%; }

  .small--push-seven-eighths {
    left: 87.5%; }

  /* Tenths */
  .small--push-one-tenth {
    left: 10%; }

  .small--push-two-tenths {
    left: 20%; }

  .small--push-three-tenths {
    left: 30%; }

  .small--push-four-tenths {
    left: 40%; }

  .small--push-five-tenths {
    left: 50%; }

  .small--push-six-tenths {
    left: 60%; }

  .small--push-seven-tenths {
    left: 70%; }

  .small--push-eight-tenths {
    left: 80%; }

  .small--push-nine-tenths {
    left: 90%; }

  /* Twelfths */
  .small--push-one-twelfth {
    left: 8.33333%; }

  .small--push-two-twelfths {
    left: 16.66667%; }

  .small--push-three-twelfths {
    left: 25%; }

  .small--push-four-twelfths {
    left: 33.33333%; }

  .small--push-five-twelfths {
    left: 41.66667%; }

  .small--push-six-twelfths {
    left: 50%; }

  .small--push-seven-twelfths {
    left: 58.33333%; }

  .small--push-eight-twelfths {
    left: 66.66667%; }

  .small--push-nine-twelfths {
    left: 75%; }

  .small--push-ten-twelfths {
    left: 83.33333%; }

  .small--push-eleven-twelfths {
    left: 91.66667%; } }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Halves */
  .medium--push-one-half {
    left: 50%; }

  /* Thirds */
  .medium--push-one-third {
    left: 33.33333%; }

  .medium--push-two-thirds {
    left: 66.66667%; }

  /* Quarters */
  .medium--push-one-quarter {
    left: 25%; }

  .medium--push-two-quarters {
    left: 50%; }

  .medium--push-three-quarters {
    left: 75%; }

  /* Fifths */
  .medium--push-one-fifth {
    left: 20%; }

  .medium--push-two-fifths {
    left: 40%; }

  .medium--push-three-fifths {
    left: 60%; }

  .medium--push-four-fifths {
    left: 80%; }

  /* Sixths */
  .medium--push-one-sixth {
    left: 16.66667%; }

  .medium--push-two-sixths {
    left: 33.33333%; }

  .medium--push-three-sixths {
    left: 50%; }

  .medium--push-four-sixths {
    left: 66.66667%; }

  .medium--push-five-sixths {
    left: 83.33333%; }

  /* Eighths */
  .medium--push-one-eighth {
    left: 12.5%; }

  .medium--push-two-eighths {
    left: 25%; }

  .medium--push-three-eighths {
    left: 37.5%; }

  .medium--push-four-eighths {
    left: 50%; }

  .medium--push-five-eighths {
    left: 62.5%; }

  .medium--push-six-eighths {
    left: 75%; }

  .medium--push-seven-eighths {
    left: 87.5%; }

  /* Tenths */
  .medium--push-one-tenth {
    left: 10%; }

  .medium--push-two-tenths {
    left: 20%; }

  .medium--push-three-tenths {
    left: 30%; }

  .medium--push-four-tenths {
    left: 40%; }

  .medium--push-five-tenths {
    left: 50%; }

  .medium--push-six-tenths {
    left: 60%; }

  .medium--push-seven-tenths {
    left: 70%; }

  .medium--push-eight-tenths {
    left: 80%; }

  .medium--push-nine-tenths {
    left: 90%; }

  /* Twelfths */
  .medium--push-one-twelfth {
    left: 8.33333%; }

  .medium--push-two-twelfths {
    left: 16.66667%; }

  .medium--push-three-twelfths {
    left: 25%; }

  .medium--push-four-twelfths {
    left: 33.33333%; }

  .medium--push-five-twelfths {
    left: 41.66667%; }

  .medium--push-six-twelfths {
    left: 50%; }

  .medium--push-seven-twelfths {
    left: 58.33333%; }

  .medium--push-eight-twelfths {
    left: 66.66667%; }

  .medium--push-nine-twelfths {
    left: 75%; }

  .medium--push-ten-twelfths {
    left: 83.33333%; }

  .medium--push-eleven-twelfths {
    left: 91.66667%; } }
@media only screen and (min-width: 768px) {
  /* Halves */
  .medium-up--push-one-half {
    left: 50%; }

  /* Thirds */
  .medium-up--push-one-third {
    left: 33.33333%; }

  .medium-up--push-two-thirds {
    left: 66.66667%; }

  /* Quarters */
  .medium-up--push-one-quarter {
    left: 25%; }

  .medium-up--push-two-quarters {
    left: 50%; }

  .medium-up--push-three-quarters {
    left: 75%; }

  /* Fifths */
  .medium-up--push-one-fifth {
    left: 20%; }

  .medium-up--push-two-fifths {
    left: 40%; }

  .medium-up--push-three-fifths {
    left: 60%; }

  .medium-up--push-four-fifths {
    left: 80%; }

  /* Sixths */
  .medium-up--push-one-sixth {
    left: 16.66667%; }

  .medium-up--push-two-sixths {
    left: 33.33333%; }

  .medium-up--push-three-sixths {
    left: 50%; }

  .medium-up--push-four-sixths {
    left: 66.66667%; }

  .medium-up--push-five-sixths {
    left: 83.33333%; }

  /* Eighths */
  .medium-up--push-one-eighth {
    left: 12.5%; }

  .medium-up--push-two-eighths {
    left: 25%; }

  .medium-up--push-three-eighths {
    left: 37.5%; }

  .medium-up--push-four-eighths {
    left: 50%; }

  .medium-up--push-five-eighths {
    left: 62.5%; }

  .medium-up--push-six-eighths {
    left: 75%; }

  .medium-up--push-seven-eighths {
    left: 87.5%; }

  /* Tenths */
  .medium-up--push-one-tenth {
    left: 10%; }

  .medium-up--push-two-tenths {
    left: 20%; }

  .medium-up--push-three-tenths {
    left: 30%; }

  .medium-up--push-four-tenths {
    left: 40%; }

  .medium-up--push-five-tenths {
    left: 50%; }

  .medium-up--push-six-tenths {
    left: 60%; }

  .medium-up--push-seven-tenths {
    left: 70%; }

  .medium-up--push-eight-tenths {
    left: 80%; }

  .medium-up--push-nine-tenths {
    left: 90%; }

  /* Twelfths */
  .medium-up--push-one-twelfth {
    left: 8.33333%; }

  .medium-up--push-two-twelfths {
    left: 16.66667%; }

  .medium-up--push-three-twelfths {
    left: 25%; }

  .medium-up--push-four-twelfths {
    left: 33.33333%; }

  .medium-up--push-five-twelfths {
    left: 41.66667%; }

  .medium-up--push-six-twelfths {
    left: 50%; }

  .medium-up--push-seven-twelfths {
    left: 58.33333%; }

  .medium-up--push-eight-twelfths {
    left: 66.66667%; }

  .medium-up--push-nine-twelfths {
    left: 75%; }

  .medium-up--push-ten-twelfths {
    left: 83.33333%; }

  .medium-up--push-eleven-twelfths {
    left: 91.66667%; } }
@media only screen and (max-width: 1024px) {
  /* Halves */
  .medium-down--push-one-half {
    left: 50%; }

  /* Thirds */
  .medium-down--push-one-third {
    left: 33.33333%; }

  .medium-down--push-two-thirds {
    left: 66.66667%; }

  /* Quarters */
  .medium-down--push-one-quarter {
    left: 25%; }

  .medium-down--push-two-quarters {
    left: 50%; }

  .medium-down--push-three-quarters {
    left: 75%; }

  /* Fifths */
  .medium-down--push-one-fifth {
    left: 20%; }

  .medium-down--push-two-fifths {
    left: 40%; }

  .medium-down--push-three-fifths {
    left: 60%; }

  .medium-down--push-four-fifths {
    left: 80%; }

  /* Sixths */
  .medium-down--push-one-sixth {
    left: 16.66667%; }

  .medium-down--push-two-sixths {
    left: 33.33333%; }

  .medium-down--push-three-sixths {
    left: 50%; }

  .medium-down--push-four-sixths {
    left: 66.66667%; }

  .medium-down--push-five-sixths {
    left: 83.33333%; }

  /* Eighths */
  .medium-down--push-one-eighth {
    left: 12.5%; }

  .medium-down--push-two-eighths {
    left: 25%; }

  .medium-down--push-three-eighths {
    left: 37.5%; }

  .medium-down--push-four-eighths {
    left: 50%; }

  .medium-down--push-five-eighths {
    left: 62.5%; }

  .medium-down--push-six-eighths {
    left: 75%; }

  .medium-down--push-seven-eighths {
    left: 87.5%; }

  /* Tenths */
  .medium-down--push-one-tenth {
    left: 10%; }

  .medium-down--push-two-tenths {
    left: 20%; }

  .medium-down--push-three-tenths {
    left: 30%; }

  .medium-down--push-four-tenths {
    left: 40%; }

  .medium-down--push-five-tenths {
    left: 50%; }

  .medium-down--push-six-tenths {
    left: 60%; }

  .medium-down--push-seven-tenths {
    left: 70%; }

  .medium-down--push-eight-tenths {
    left: 80%; }

  .medium-down--push-nine-tenths {
    left: 90%; }

  /* Twelfths */
  .medium-down--push-one-twelfth {
    left: 8.33333%; }

  .medium-down--push-two-twelfths {
    left: 16.66667%; }

  .medium-down--push-three-twelfths {
    left: 25%; }

  .medium-down--push-four-twelfths {
    left: 33.33333%; }

  .medium-down--push-five-twelfths {
    left: 41.66667%; }

  .medium-down--push-six-twelfths {
    left: 50%; }

  .medium-down--push-seven-twelfths {
    left: 58.33333%; }

  .medium-down--push-eight-twelfths {
    left: 66.66667%; }

  .medium-down--push-nine-twelfths {
    left: 75%; }

  .medium-down--push-ten-twelfths {
    left: 83.33333%; }

  .medium-down--push-eleven-twelfths {
    left: 91.66667%; } }
@media only screen and (min-width: 1025px) and (max-width: 1439px) {
  /* Halves */
  .large--push-one-half {
    left: 50%; }

  /* Thirds */
  .large--push-one-third {
    left: 33.33333%; }

  .large--push-two-thirds {
    left: 66.66667%; }

  /* Quarters */
  .large--push-one-quarter {
    left: 25%; }

  .large--push-two-quarters {
    left: 50%; }

  .large--push-three-quarters {
    left: 75%; }

  /* Fifths */
  .large--push-one-fifth {
    left: 20%; }

  .large--push-two-fifths {
    left: 40%; }

  .large--push-three-fifths {
    left: 60%; }

  .large--push-four-fifths {
    left: 80%; }

  /* Sixths */
  .large--push-one-sixth {
    left: 16.66667%; }

  .large--push-two-sixths {
    left: 33.33333%; }

  .large--push-three-sixths {
    left: 50%; }

  .large--push-four-sixths {
    left: 66.66667%; }

  .large--push-five-sixths {
    left: 83.33333%; }

  /* Eighths */
  .large--push-one-eighth {
    left: 12.5%; }

  .large--push-two-eighths {
    left: 25%; }

  .large--push-three-eighths {
    left: 37.5%; }

  .large--push-four-eighths {
    left: 50%; }

  .large--push-five-eighths {
    left: 62.5%; }

  .large--push-six-eighths {
    left: 75%; }

  .large--push-seven-eighths {
    left: 87.5%; }

  /* Tenths */
  .large--push-one-tenth {
    left: 10%; }

  .large--push-two-tenths {
    left: 20%; }

  .large--push-three-tenths {
    left: 30%; }

  .large--push-four-tenths {
    left: 40%; }

  .large--push-five-tenths {
    left: 50%; }

  .large--push-six-tenths {
    left: 60%; }

  .large--push-seven-tenths {
    left: 70%; }

  .large--push-eight-tenths {
    left: 80%; }

  .large--push-nine-tenths {
    left: 90%; }

  /* Twelfths */
  .large--push-one-twelfth {
    left: 8.33333%; }

  .large--push-two-twelfths {
    left: 16.66667%; }

  .large--push-three-twelfths {
    left: 25%; }

  .large--push-four-twelfths {
    left: 33.33333%; }

  .large--push-five-twelfths {
    left: 41.66667%; }

  .large--push-six-twelfths {
    left: 50%; }

  .large--push-seven-twelfths {
    left: 58.33333%; }

  .large--push-eight-twelfths {
    left: 66.66667%; }

  .large--push-nine-twelfths {
    left: 75%; }

  .large--push-ten-twelfths {
    left: 83.33333%; }

  .large--push-eleven-twelfths {
    left: 91.66667%; } }
@media only screen and (min-width: 1025px) {
  /* Halves */
  .large-up--push-one-half {
    left: 50%; }

  /* Thirds */
  .large-up--push-one-third {
    left: 33.33333%; }

  .large-up--push-two-thirds {
    left: 66.66667%; }

  /* Quarters */
  .large-up--push-one-quarter {
    left: 25%; }

  .large-up--push-two-quarters {
    left: 50%; }

  .large-up--push-three-quarters {
    left: 75%; }

  /* Fifths */
  .large-up--push-one-fifth {
    left: 20%; }

  .large-up--push-two-fifths {
    left: 40%; }

  .large-up--push-three-fifths {
    left: 60%; }

  .large-up--push-four-fifths {
    left: 80%; }

  /* Sixths */
  .large-up--push-one-sixth {
    left: 16.66667%; }

  .large-up--push-two-sixths {
    left: 33.33333%; }

  .large-up--push-three-sixths {
    left: 50%; }

  .large-up--push-four-sixths {
    left: 66.66667%; }

  .large-up--push-five-sixths {
    left: 83.33333%; }

  /* Eighths */
  .large-up--push-one-eighth {
    left: 12.5%; }

  .large-up--push-two-eighths {
    left: 25%; }

  .large-up--push-three-eighths {
    left: 37.5%; }

  .large-up--push-four-eighths {
    left: 50%; }

  .large-up--push-five-eighths {
    left: 62.5%; }

  .large-up--push-six-eighths {
    left: 75%; }

  .large-up--push-seven-eighths {
    left: 87.5%; }

  /* Tenths */
  .large-up--push-one-tenth {
    left: 10%; }

  .large-up--push-two-tenths {
    left: 20%; }

  .large-up--push-three-tenths {
    left: 30%; }

  .large-up--push-four-tenths {
    left: 40%; }

  .large-up--push-five-tenths {
    left: 50%; }

  .large-up--push-six-tenths {
    left: 60%; }

  .large-up--push-seven-tenths {
    left: 70%; }

  .large-up--push-eight-tenths {
    left: 80%; }

  .large-up--push-nine-tenths {
    left: 90%; }

  /* Twelfths */
  .large-up--push-one-twelfth {
    left: 8.33333%; }

  .large-up--push-two-twelfths {
    left: 16.66667%; }

  .large-up--push-three-twelfths {
    left: 25%; }

  .large-up--push-four-twelfths {
    left: 33.33333%; }

  .large-up--push-five-twelfths {
    left: 41.66667%; }

  .large-up--push-six-twelfths {
    left: 50%; }

  .large-up--push-seven-twelfths {
    left: 58.33333%; }

  .large-up--push-eight-twelfths {
    left: 66.66667%; }

  .large-up--push-nine-twelfths {
    left: 75%; }

  .large-up--push-ten-twelfths {
    left: 83.33333%; }

  .large-up--push-eleven-twelfths {
    left: 91.66667%; } }
@media only screen and (max-width: 1439px) {
  /* Halves */
  .large-down--push-one-half {
    left: 50%; }

  /* Thirds */
  .large-down--push-one-third {
    left: 33.33333%; }

  .large-down--push-two-thirds {
    left: 66.66667%; }

  /* Quarters */
  .large-down--push-one-quarter {
    left: 25%; }

  .large-down--push-two-quarters {
    left: 50%; }

  .large-down--push-three-quarters {
    left: 75%; }

  /* Fifths */
  .large-down--push-one-fifth {
    left: 20%; }

  .large-down--push-two-fifths {
    left: 40%; }

  .large-down--push-three-fifths {
    left: 60%; }

  .large-down--push-four-fifths {
    left: 80%; }

  /* Sixths */
  .large-down--push-one-sixth {
    left: 16.66667%; }

  .large-down--push-two-sixths {
    left: 33.33333%; }

  .large-down--push-three-sixths {
    left: 50%; }

  .large-down--push-four-sixths {
    left: 66.66667%; }

  .large-down--push-five-sixths {
    left: 83.33333%; }

  /* Eighths */
  .large-down--push-one-eighth {
    left: 12.5%; }

  .large-down--push-two-eighths {
    left: 25%; }

  .large-down--push-three-eighths {
    left: 37.5%; }

  .large-down--push-four-eighths {
    left: 50%; }

  .large-down--push-five-eighths {
    left: 62.5%; }

  .large-down--push-six-eighths {
    left: 75%; }

  .large-down--push-seven-eighths {
    left: 87.5%; }

  /* Tenths */
  .large-down--push-one-tenth {
    left: 10%; }

  .large-down--push-two-tenths {
    left: 20%; }

  .large-down--push-three-tenths {
    left: 30%; }

  .large-down--push-four-tenths {
    left: 40%; }

  .large-down--push-five-tenths {
    left: 50%; }

  .large-down--push-six-tenths {
    left: 60%; }

  .large-down--push-seven-tenths {
    left: 70%; }

  .large-down--push-eight-tenths {
    left: 80%; }

  .large-down--push-nine-tenths {
    left: 90%; }

  /* Twelfths */
  .large-down--push-one-twelfth {
    left: 8.33333%; }

  .large-down--push-two-twelfths {
    left: 16.66667%; }

  .large-down--push-three-twelfths {
    left: 25%; }

  .large-down--push-four-twelfths {
    left: 33.33333%; }

  .large-down--push-five-twelfths {
    left: 41.66667%; }

  .large-down--push-six-twelfths {
    left: 50%; }

  .large-down--push-seven-twelfths {
    left: 58.33333%; }

  .large-down--push-eight-twelfths {
    left: 66.66667%; }

  .large-down--push-nine-twelfths {
    left: 75%; }

  .large-down--push-ten-twelfths {
    left: 83.33333%; }

  .large-down--push-eleven-twelfths {
    left: 91.66667%; } }
@media only screen and (min-width: 1440px) {
  /* Halves */
  .widescreen--push-one-half {
    left: 50%; }

  /* Thirds */
  .widescreen--push-one-third {
    left: 33.33333%; }

  .widescreen--push-two-thirds {
    left: 66.66667%; }

  /* Quarters */
  .widescreen--push-one-quarter {
    left: 25%; }

  .widescreen--push-two-quarters {
    left: 50%; }

  .widescreen--push-three-quarters {
    left: 75%; }

  /* Fifths */
  .widescreen--push-one-fifth {
    left: 20%; }

  .widescreen--push-two-fifths {
    left: 40%; }

  .widescreen--push-three-fifths {
    left: 60%; }

  .widescreen--push-four-fifths {
    left: 80%; }

  /* Sixths */
  .widescreen--push-one-sixth {
    left: 16.66667%; }

  .widescreen--push-two-sixths {
    left: 33.33333%; }

  .widescreen--push-three-sixths {
    left: 50%; }

  .widescreen--push-four-sixths {
    left: 66.66667%; }

  .widescreen--push-five-sixths {
    left: 83.33333%; }

  /* Eighths */
  .widescreen--push-one-eighth {
    left: 12.5%; }

  .widescreen--push-two-eighths {
    left: 25%; }

  .widescreen--push-three-eighths {
    left: 37.5%; }

  .widescreen--push-four-eighths {
    left: 50%; }

  .widescreen--push-five-eighths {
    left: 62.5%; }

  .widescreen--push-six-eighths {
    left: 75%; }

  .widescreen--push-seven-eighths {
    left: 87.5%; }

  /* Tenths */
  .widescreen--push-one-tenth {
    left: 10%; }

  .widescreen--push-two-tenths {
    left: 20%; }

  .widescreen--push-three-tenths {
    left: 30%; }

  .widescreen--push-four-tenths {
    left: 40%; }

  .widescreen--push-five-tenths {
    left: 50%; }

  .widescreen--push-six-tenths {
    left: 60%; }

  .widescreen--push-seven-tenths {
    left: 70%; }

  .widescreen--push-eight-tenths {
    left: 80%; }

  .widescreen--push-nine-tenths {
    left: 90%; }

  /* Twelfths */
  .widescreen--push-one-twelfth {
    left: 8.33333%; }

  .widescreen--push-two-twelfths {
    left: 16.66667%; }

  .widescreen--push-three-twelfths {
    left: 25%; }

  .widescreen--push-four-twelfths {
    left: 33.33333%; }

  .widescreen--push-five-twelfths {
    left: 41.66667%; }

  .widescreen--push-six-twelfths {
    left: 50%; }

  .widescreen--push-seven-twelfths {
    left: 58.33333%; }

  .widescreen--push-eight-twelfths {
    left: 66.66667%; }

  .widescreen--push-nine-twelfths {
    left: 75%; }

  .widescreen--push-ten-twelfths {
    left: 83.33333%; }

  .widescreen--push-eleven-twelfths {
    left: 91.66667%; } }
@media only screen and (min-width: 1680px) {
  /* Halves */
  .massive--push-one-half {
    left: 50%; }

  /* Thirds */
  .massive--push-one-third {
    left: 33.33333%; }

  .massive--push-two-thirds {
    left: 66.66667%; }

  /* Quarters */
  .massive--push-one-quarter {
    left: 25%; }

  .massive--push-two-quarters {
    left: 50%; }

  .massive--push-three-quarters {
    left: 75%; }

  /* Fifths */
  .massive--push-one-fifth {
    left: 20%; }

  .massive--push-two-fifths {
    left: 40%; }

  .massive--push-three-fifths {
    left: 60%; }

  .massive--push-four-fifths {
    left: 80%; }

  /* Sixths */
  .massive--push-one-sixth {
    left: 16.66667%; }

  .massive--push-two-sixths {
    left: 33.33333%; }

  .massive--push-three-sixths {
    left: 50%; }

  .massive--push-four-sixths {
    left: 66.66667%; }

  .massive--push-five-sixths {
    left: 83.33333%; }

  /* Eighths */
  .massive--push-one-eighth {
    left: 12.5%; }

  .massive--push-two-eighths {
    left: 25%; }

  .massive--push-three-eighths {
    left: 37.5%; }

  .massive--push-four-eighths {
    left: 50%; }

  .massive--push-five-eighths {
    left: 62.5%; }

  .massive--push-six-eighths {
    left: 75%; }

  .massive--push-seven-eighths {
    left: 87.5%; }

  /* Tenths */
  .massive--push-one-tenth {
    left: 10%; }

  .massive--push-two-tenths {
    left: 20%; }

  .massive--push-three-tenths {
    left: 30%; }

  .massive--push-four-tenths {
    left: 40%; }

  .massive--push-five-tenths {
    left: 50%; }

  .massive--push-six-tenths {
    left: 60%; }

  .massive--push-seven-tenths {
    left: 70%; }

  .massive--push-eight-tenths {
    left: 80%; }

  .massive--push-nine-tenths {
    left: 90%; }

  /* Twelfths */
  .massive--push-one-twelfth {
    left: 8.33333%; }

  .massive--push-two-twelfths {
    left: 16.66667%; }

  .massive--push-three-twelfths {
    left: 25%; }

  .massive--push-four-twelfths {
    left: 33.33333%; }

  .massive--push-five-twelfths {
    left: 41.66667%; }

  .massive--push-six-twelfths {
    left: 50%; }

  .massive--push-seven-twelfths {
    left: 58.33333%; }

  .massive--push-eight-twelfths {
    left: 66.66667%; }

  .massive--push-nine-twelfths {
    left: 75%; }

  .massive--push-ten-twelfths {
    left: 83.33333%; }

  .massive--push-eleven-twelfths {
    left: 91.66667%; } }
/* Container
  ============================================================================*/
.o-container {
  margin: 0 auto;
  padding: 0 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .o-container {
      padding: 0 30px; } }
  @media only screen and (min-width: 1025px) {
    .o-container {
      padding: 0 50px; } }
  @media only screen and (min-width: 1440px) {
    .o-container {
      max-width: 1680px; } }

/**
 * Modifier used on text-heavy/RTE pages
 */
.o-container--medium {
  max-width: 820px; }

/**
 * Modifier used on cart template
 */
.o-container--large {
  max-width: 1036px; }

/**
 * Modifier that uses extra large gutters on large screens
 */
@media only screen and (min-width: 1025px) {
  .o-container--gutter-x-large {
    padding: 0 122px; } }
@media only screen and (min-width: 1440px) {
  .o-container--gutter-x-large {
    max-width: 1680px; } }

@media only screen and (min-width: 1440px) {
  .o-container--max {
    margin: 0 auto;
    max-width: 1680px; } }

/**
 * Modifier used for editorial pages such as About and Blog Articles
 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .o-container--editorial {
    max-width: 542px; } }
@media only screen and (min-width: 1025px) {
  .o-container--editorial {
    max-width: 924px; } }

/**
 * Used on Contact page
 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .o-container--small {
    max-width: 524px; } }
@media only screen and (min-width: 1025px) {
  .o-container--small {
    max-width: 645px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .o-container--newsletter {
    max-width: 510px; } }
@media only screen and (min-width: 1025px) {
  .o-container--newsletter {
    max-width: 536px; } }

/*==============================================================================
  #VENDOR
==============================================================================*/
/*============================================================================
  Flickity v2.2.1
  https://flickity.metafizzy.co
==============================================================================*/
.flickity-enabled {
  position: relative; }

.flickity-enabled:focus {
  outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%; }

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%; }

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab; }

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing; }

/* ---- flickity-button ---- */
.flickity-button {
  position: absolute;
  border: none;
  color: #a3d1ba; }

.flickity-button:hover {
  cursor: pointer; }

.flickity-button:focus {
  outline: none; }

.flickity-button:active {
  opacity: 0.6; }

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */ }

.flickity-button-icon {
  fill: #a3d1ba; }

/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  top: 50%;
  padding: 20px;
  /* vertically center */
  transform: translateY(-50%); }

.flickity-prev-next-button.previous {
  left: 20px; }

.flickity-prev-next-button.next {
  right: 0; }

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px; }

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px; }

.flickity-prev-next-button .flickity-button-icon {
  width: 18px;
  height: 18px; }

/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: 28px;
  padding: 0 20px;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .flickity-page-dots {
      bottom: 50px;
      padding: 0 30px; } }
  @media only screen and (min-width: 1025px) {
    .flickity-page-dots {
      bottom: 25px;
      padding: 0 50px;
      text-align: right; } }

.flickity-rtl .flickity-page-dots {
  direction: rtl; }

/**
 * Edited with our own version of dots
 */
.flickity-page-dots .dot {
  cursor: pointer;
  display: inline-block;
  margin: 0 8px;
  height: 10px;
  width: 10px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.flickity-page-dots .dot.is-selected {
  background-color: #a3d1ba; }

.flickity-page-dots .dot:only-child {
  visibility: hidden; }

/*============================================================================
  PLYR v3.5.10
  https://github.com/sampotts/plyr/blob/master/dist/plyr.css

  - Edited
  - Replaced default accent colour of `#00b3ff` with `$color-secondary`
==============================================================================*/
@keyframes plyr-progress {
  to {
    background-position: 25px 0; } }

@keyframes plyr-popup {
  0% {
    opacity: .5;
    transform: translateY(10px); }

  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes plyr-fade-in {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

.plyr {
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: subpixel-antialiased;
  align-items: center;
  direction: ltr;
  display: flex;
  flex-direction: column;
  font-family: Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  height: 100%;
  line-height: 1.7;
  max-width: 100%;
  min-width: 200px;
  position: relative;
  text-shadow: none;
  transition: box-shadow .3s ease;
  z-index: 0; }

.plyr audio, .plyr iframe, .plyr video {
  display: block;
  height: 100%;
  width: 100%; }

.plyr button {
  font: inherit;
  line-height: inherit;
  width: auto; }

.plyr:focus {
  outline: 0; }

.plyr--full-ui {
  box-sizing: border-box; }

.plyr--full-ui *, .plyr--full-ui ::after, .plyr--full-ui ::before {
  box-sizing: inherit; }

.plyr--full-ui a, .plyr--full-ui button, .plyr--full-ui input, .plyr--full-ui label {
  touch-action: manipulation; }

.plyr__badge {
  background: #4a5764;
  border-radius: 2px;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  padding: 3px 4px; }

.plyr--full-ui ::-webkit-media-text-track-container {
  display: none; }

.plyr__captions {
  animation: plyr-fade-in .3s ease;
  bottom: 0;
  color: #fff;
  display: none;
  font-size: 14px;
  left: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  transition: transform .4s ease-in-out;
  width: 100%; }

.plyr__captions .plyr__caption {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 185%;
  padding: .2em .5em;
  white-space: pre-wrap; }

.plyr__captions .plyr__caption div {
  display: inline; }

.plyr__captions span:empty {
  display: none; }

@media (min-width: 480px) {
  .plyr__captions {
    font-size: 16px;
    padding: 20px; } }
@media (min-width: 768px) {
  .plyr__captions {
    font-size: 18px; } }
.plyr--captions-active .plyr__captions {
  display: block; }

.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
  transform: translateY(-40px); }

.plyr__control {
  background: 0 0;
  border: 0;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  padding: 7px;
  position: relative;
  transition: all .3s ease; }

.plyr__control svg {
  display: block;
  fill: currentColor;
  height: 18px;
  pointer-events: none;
  width: 18px; }

.plyr__control:focus {
  outline: 0; }

.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
  outline: 0; }

a.plyr__control {
  text-decoration: none; }

a.plyr__control::after, a.plyr__control::before {
  display: none; }

.plyr__control.plyr__control--pressed .icon--not-pressed, .plyr__control.plyr__control--pressed .label--not-pressed, .plyr__control:not(.plyr__control--pressed) .icon--pressed, .plyr__control:not(.plyr__control--pressed) .label--pressed {
  display: none; }

.plyr--full-ui ::-webkit-media-controls {
  display: none; }

.plyr__controls {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  text-align: center; }

.plyr__controls .plyr__progress__container {
  flex: 1;
  min-width: 0; }

.plyr__controls .plyr__controls__item {
  margin-left: 2.5px; }

.plyr__controls .plyr__controls__item:first-child {
  margin-left: 0;
  margin-right: auto; }

.plyr__controls .plyr__controls__item.plyr__progress__container {
  padding-left: 2.5px; }

.plyr__controls .plyr__controls__item.plyr__time {
  padding: 0 5px; }

.plyr__controls .plyr__controls__item.plyr__progress__container:first-child, .plyr__controls .plyr__controls__item.plyr__time + .plyr__time, .plyr__controls .plyr__controls__item.plyr__time:first-child {
  padding-left: 0; }

.plyr__controls:empty {
  display: none; }

.plyr [data-plyr=airplay], .plyr [data-plyr=captions], .plyr [data-plyr=fullscreen], .plyr [data-plyr=pip] {
  display: none; }

.plyr--airplay-supported [data-plyr=airplay], .plyr--captions-enabled [data-plyr=captions], .plyr--fullscreen-enabled [data-plyr=fullscreen], .plyr--pip-supported [data-plyr=pip] {
  display: inline-block; }

.plyr__menu {
  display: flex;
  position: relative; }

.plyr__menu .plyr__control svg {
  transition: transform .3s ease; }

.plyr__menu .plyr__control[aria-expanded=true] svg {
  transform: rotate(90deg); }

.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
  display: none; }

.plyr__menu__container {
  animation: plyr-popup .2s ease;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  color: #4a5764;
  font-size: 16px;
  margin-bottom: 10px;
  position: absolute;
  right: -3px;
  text-align: left;
  white-space: nowrap;
  z-index: 3; }

.plyr__menu__container > div {
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

.plyr__menu__container::after {
  border: 4px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.9);
  content: '';
  height: 0;
  position: absolute;
  right: 15px;
  top: 100%;
  width: 0; }

.plyr__menu__container [role=menu] {
  padding: 7px; }

.plyr__menu__container [role=menuitem], .plyr__menu__container [role=menuitemradio] {
  margin-top: 2px; }

.plyr__menu__container [role=menuitem]:first-child, .plyr__menu__container [role=menuitemradio]:first-child {
  margin-top: 0; }

.plyr__menu__container .plyr__control {
  align-items: center;
  color: #4a5764;
  display: flex;
  font-size: 14px;
  padding: 4px 11px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%; }

.plyr__menu__container .plyr__control > span {
  align-items: inherit;
  display: flex;
  width: 100%; }

.plyr__menu__container .plyr__control::after {
  border: 4px solid transparent;
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%); }

.plyr__menu__container .plyr__control--forward {
  padding-right: 28px; }

.plyr__menu__container .plyr__control--forward::after {
  border-left-color: rgba(74, 87, 100, 0.8);
  right: 5px; }

.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after, .plyr__menu__container .plyr__control--forward:hover::after {
  border-left-color: currentColor; }

.plyr__menu__container .plyr__control--back {
  font-weight: 500;
  margin: 7px;
  margin-bottom: 3px;
  padding-left: 28px;
  position: relative;
  width: calc(100% - 14px); }

.plyr__menu__container .plyr__control--back::after {
  border-right-color: rgba(74, 87, 100, 0.8);
  left: 7px; }

.plyr__menu__container .plyr__control--back::before {
  background: rgba(114, 133, 151, 0.2);
  box-shadow: 0 1px 0 #fff;
  content: '';
  height: 1px;
  left: 0;
  margin-top: 4px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%; }

.plyr__menu__container .plyr__control--back.plyr__tab-focus::after, .plyr__menu__container .plyr__control--back:hover::after {
  border-right-color: currentColor; }

.plyr__menu__container .plyr__control[role=menuitemradio] {
  padding-left: 7px; }

.plyr__menu__container .plyr__control[role=menuitemradio]::after, .plyr__menu__container .plyr__control[role=menuitemradio]::before {
  border-radius: 100%; }

.plyr__menu__container .plyr__control[role=menuitemradio]::before {
  background: rgba(0, 0, 0, 0.1);
  content: '';
  display: block;
  flex-shrink: 0;
  height: 16px;
  margin-right: 10px;
  transition: all .3s ease;
  width: 16px; }

.plyr__menu__container .plyr__control[role=menuitemradio]::after {
  background: #fff;
  border: 0;
  height: 6px;
  left: 12px;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform .3s ease,opacity .3s ease;
  width: 6px; }

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  background: #a3d1ba; }

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after {
  opacity: 1;
  transform: translateY(-50%) scale(1); }

.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus::before, .plyr__menu__container .plyr__control[role=menuitemradio]:hover::before {
  background: rgba(0, 0, 0, 0.1); }

.plyr__menu__container .plyr__menu__value {
  align-items: center;
  display: flex;
  margin-left: auto;
  margin-right: -5px;
  overflow: hidden;
  padding-left: 25px;
  pointer-events: none; }

.plyr--full-ui input[type=range] {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  border-radius: 26px;
  color: #a3d1ba;
  display: block;
  height: 19px;
  margin: 0;
  padding: 0;
  transition: box-shadow .3s ease;
  width: 100%; }

.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  height: 5px;
  -webkit-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  -webkit-user-select: none;
  user-select: none;
  background-image: linear-gradient(to right, currentColor var(--value, 0), transparent var(--value, 0)); }

.plyr--full-ui input[type=range]::-webkit-slider-thumb {
  background: #fff;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2);
  height: 13px;
  position: relative;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  width: 13px;
  -webkit-appearance: none;
  margin-top: -4px; }

.plyr--full-ui input[type=range]::-moz-range-track {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  height: 5px;
  -moz-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  user-select: none; }

.plyr--full-ui input[type=range]::-moz-range-thumb {
  background: #fff;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2);
  height: 13px;
  position: relative;
  -moz-transition: all .2s ease;
  transition: all .2s ease;
  width: 13px; }

.plyr--full-ui input[type=range]::-moz-range-progress {
  background: currentColor;
  border-radius: 2.5px;
  height: 5px; }

.plyr--full-ui input[type=range]::-ms-track {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  height: 5px;
  -ms-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  -ms-user-select: none;
  user-select: none;
  color: transparent; }

.plyr--full-ui input[type=range]::-ms-fill-upper {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  height: 5px;
  -ms-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  -ms-user-select: none;
  user-select: none; }

.plyr--full-ui input[type=range]::-ms-fill-lower {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  height: 5px;
  -ms-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  -ms-user-select: none;
  user-select: none;
  background: currentColor; }

.plyr--full-ui input[type=range]::-ms-thumb {
  background: #fff;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2);
  height: 13px;
  position: relative;
  -ms-transition: all .2s ease;
  transition: all .2s ease;
  width: 13px;
  margin-top: 0; }

.plyr--full-ui input[type=range]::-ms-tooltip {
  display: none; }

.plyr--full-ui input[type=range]:focus {
  outline: 0; }

.plyr--full-ui input[type=range]::-moz-focus-outer {
  border: 0; }

.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
  outline: 0; }

.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
  box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
  outline: 0; }

.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
  box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
  outline: 0; }

.plyr__poster {
  background-color: #000;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity .2s ease;
  width: 100%;
  z-index: 1; }

.plyr--stopped.plyr__poster-enabled .plyr__poster {
  opacity: 1; }

.plyr__time {
  font-size: 14px; }

.plyr__time + .plyr__time::before {
  content: '\2044';
  margin-right: 10px; }

@media (max-width: 767px) {
  .plyr__time + .plyr__time {
    display: none; } }
.plyr__tooltip {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  color: #4a5764;
  font-size: 14px;
  font-weight: 500;
  left: 50%;
  line-height: 1.3;
  margin-bottom: 10px;
  opacity: 0;
  padding: 5px 7.5px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 10px) scale(0.8);
  transform-origin: 50% 100%;
  transition: transform .2s .1s ease,opacity .2s .1s ease;
  white-space: nowrap;
  z-index: 2; }

.plyr__tooltip::before {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255, 255, 255, 0.9);
  bottom: -4px;
  content: '';
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2; }

.plyr .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr .plyr__control:hover .plyr__tooltip, .plyr__tooltip--visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1); }

.plyr .plyr__control:hover .plyr__tooltip {
  z-index: 3; }

.plyr__controls > .plyr__control:first-child .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
  left: 0;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 0 100%; }

.plyr__controls > .plyr__control:first-child .plyr__tooltip::before, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip::before {
  left: 16px; }

.plyr__controls > .plyr__control:last-child .plyr__tooltip {
  left: auto;
  right: 0;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 100% 100%; }

.plyr__controls > .plyr__control:last-child .plyr__tooltip::before {
  left: auto;
  right: 16px;
  transform: translateX(50%); }

.plyr__controls > .plyr__control:first-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip, .plyr__controls > .plyr__control:first-child.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:first-child:hover .plyr__tooltip, .plyr__controls > .plyr__control:last-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:last-child.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:last-child:hover .plyr__tooltip {
  transform: translate(0, 0) scale(1); }

.plyr__progress {
  left: 6.5px;
  margin-right: 13px;
  position: relative; }

.plyr__progress input[type=range], .plyr__progress__buffer {
  margin-left: -6.5px;
  margin-right: -6.5px;
  width: calc(100% + 13px); }

.plyr__progress input[type=range] {
  position: relative;
  z-index: 2; }

.plyr__progress .plyr__tooltip {
  font-size: 14px;
  left: 0; }

.plyr__progress__buffer {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  border-radius: 100px;
  height: 5px;
  left: 0;
  margin-top: -2.5px;
  padding: 0;
  position: absolute;
  top: 50%; }

.plyr__progress__buffer::-webkit-progress-bar {
  background: 0 0; }

.plyr__progress__buffer::-webkit-progress-value {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  -webkit-transition: width .2s ease;
  transition: width .2s ease; }

.plyr__progress__buffer::-moz-progress-bar {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  -moz-transition: width .2s ease;
  transition: width .2s ease; }

.plyr__progress__buffer::-ms-fill {
  border-radius: 100px;
  -ms-transition: width .2s ease;
  transition: width .2s ease; }

.plyr--loading .plyr__progress__buffer {
  animation: plyr-progress 1s linear infinite;
  background-image: linear-gradient(-45deg, rgba(35, 41, 47, 0.6) 25%, transparent 25%, transparent 50%, rgba(35, 41, 47, 0.6) 50%, rgba(35, 41, 47, 0.6) 75%, transparent 75%, transparent);
  background-repeat: repeat-x;
  background-size: 25px 25px;
  color: transparent; }

.plyr--video.plyr--loading .plyr__progress__buffer {
  background-color: rgba(255, 255, 255, 0.25); }

.plyr--audio.plyr--loading .plyr__progress__buffer {
  background-color: rgba(193, 201, 209, 0.66); }

.plyr__volume {
  align-items: center;
  display: flex;
  max-width: 110px;
  min-width: 80px;
  position: relative;
  width: 20%; }

.plyr__volume input[type=range] {
  margin-left: 5px;
  margin-right: 5px;
  position: relative;
  z-index: 2; }

.plyr--is-ios .plyr__volume {
  min-width: 0;
  width: auto; }

.plyr--audio {
  display: block; }

.plyr--audio .plyr__controls {
  background: #fff;
  border-radius: inherit;
  color: #4a5764;
  padding: 10px; }

.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
  background: #a3d1ba;
  color: #fff; }

.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(193, 201, 209, 0.66); }

.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
  background-color: rgba(193, 201, 209, 0.66); }

.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
  background-color: rgba(193, 201, 209, 0.66); }

.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1); }

.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1); }

.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1); }

.plyr--audio .plyr__progress__buffer {
  color: rgba(193, 201, 209, 0.66); }

.plyr--video {
  background: #000;
  overflow: hidden; }

.plyr--video.plyr--menu-open {
  overflow: visible; }

.plyr__video-wrapper {
  background: #000;
  height: 100%;
  margin: auto;
  overflow: hidden;
  width: 100%; }

.plyr__video-embed, .plyr__video-wrapper--fixed-ratio {
  height: 0;
  padding-bottom: 56.25%; }

.plyr__video-embed iframe, .plyr__video-wrapper--fixed-ratio video {
  border: 0;
  left: 0;
  position: absolute;
  top: 0; }

.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
  padding-bottom: 240%;
  position: relative;
  transform: translateY(-38.28125%); }

.plyr--video .plyr__controls {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  bottom: 0;
  color: #fff;
  left: 0;
  padding: 20px 5px 5px;
  position: absolute;
  right: 0;
  transition: opacity .4s ease-in-out,transform .4s ease-in-out;
  z-index: 3; }

@media (min-width: 480px) {
  .plyr--video .plyr__controls {
    padding: 35px 10px 10px; } }
.plyr--video.plyr--hide-controls .plyr__controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%); }

.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
  background: #a3d1ba;
  color: #fff; }

.plyr__control--overlaid {
  background: rgba(0, 179, 255, 0.8);
  border: 0;
  border-radius: 100%;
  color: #fff;
  display: none;
  left: 50%;
  padding: 15px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; }

.plyr__control--overlaid svg {
  left: 2px;
  position: relative; }

.plyr__control--overlaid:focus, .plyr__control--overlaid:hover {
  background: #a3d1ba; }

.plyr--playing .plyr__control--overlaid {
  opacity: 0;
  visibility: hidden; }

.plyr--full-ui.plyr--video .plyr__control--overlaid {
  display: block; }

.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(255, 255, 255, 0.25); }

.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
  background-color: rgba(255, 255, 255, 0.25); }

.plyr--full-ui.plyr--video input[type=range]::-ms-track {
  background-color: rgba(255, 255, 255, 0.25); }

.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5); }

.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5); }

.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5); }

.plyr--video .plyr__progress__buffer {
  color: rgba(255, 255, 255, 0.25); }

.plyr:-webkit-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%; }

.plyr:-ms-fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%; }

.plyr:fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%; }

.plyr:-webkit-full-screen video {
  height: 100%; }

.plyr:-ms-fullscreen video {
  height: 100%; }

.plyr:fullscreen video {
  height: 100%; }

.plyr:-webkit-full-screen .plyr__video-wrapper {
  height: 100%;
  position: static; }

.plyr:-ms-fullscreen .plyr__video-wrapper {
  height: 100%;
  position: static; }

.plyr:fullscreen .plyr__video-wrapper {
  height: 100%;
  position: static; }

.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
  display: block; }

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
  display: block; }

.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
  display: block; }

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none; }

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none; }

.plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none; }

.plyr:-webkit-full-screen.plyr--hide-controls {
  cursor: none; }

.plyr:-ms-fullscreen.plyr--hide-controls {
  cursor: none; }

.plyr:fullscreen.plyr--hide-controls {
  cursor: none; }

@media (min-width: 1024px) {
  .plyr:-webkit-full-screen .plyr__captions {
    font-size: 21px; }

  .plyr:-ms-fullscreen .plyr__captions {
    font-size: 21px; }

  .plyr:fullscreen .plyr__captions {
    font-size: 21px; } }
.plyr:-webkit-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%; }

.plyr:-webkit-full-screen video {
  height: 100%; }

.plyr:-webkit-full-screen .plyr__video-wrapper {
  height: 100%;
  position: static; }

.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
  display: block; }

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none; }

.plyr:-webkit-full-screen.plyr--hide-controls {
  cursor: none; }

@media (min-width: 1024px) {
  .plyr:-webkit-full-screen .plyr__captions {
    font-size: 21px; } }
.plyr:-moz-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%; }

.plyr:-moz-full-screen video {
  height: 100%; }

.plyr:-moz-full-screen .plyr__video-wrapper {
  height: 100%;
  position: static; }

.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {
  display: block; }

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none; }

.plyr:-moz-full-screen.plyr--hide-controls {
  cursor: none; }

@media (min-width: 1024px) {
  .plyr:-moz-full-screen .plyr__captions {
    font-size: 21px; } }
.plyr:-ms-fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%; }

.plyr:-ms-fullscreen video {
  height: 100%; }

.plyr:-ms-fullscreen .plyr__video-wrapper {
  height: 100%;
  position: static; }

.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
  display: block; }

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none; }

.plyr:-ms-fullscreen.plyr--hide-controls {
  cursor: none; }

@media (min-width: 1024px) {
  .plyr:-ms-fullscreen .plyr__captions {
    font-size: 21px; } }
.plyr--fullscreen-fallback {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
  bottom: 0;
  display: block;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000000; }

.plyr--fullscreen-fallback video {
  height: 100%; }

.plyr--fullscreen-fallback .plyr__video-wrapper {
  height: 100%;
  position: static; }

.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
  display: block; }

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
  display: none; }

.plyr--fullscreen-fallback.plyr--hide-controls {
  cursor: none; }

@media (min-width: 1024px) {
  .plyr--fullscreen-fallback .plyr__captions {
    font-size: 21px; } }
.plyr__ads {
  border-radius: inherit;
  bottom: 0;
  cursor: pointer;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1; }

.plyr__ads > div, .plyr__ads > div iframe {
  height: 100%;
  position: absolute;
  width: 100%; }

.plyr__ads::after {
  background: rgba(35, 41, 47, 0.8);
  border-radius: 2px;
  bottom: 10px;
  color: #fff;
  content: attr(data-badge-text);
  font-size: 11px;
  padding: 2px 6px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  z-index: 3; }

.plyr__ads::after:empty {
  display: none; }

.plyr__cues {
  background: currentColor;
  display: block;
  height: 5px;
  left: 0;
  margin: -2.5px 0 0;
  opacity: .8;
  position: absolute;
  top: 50%;
  width: 3px;
  z-index: 3; }

.plyr__preview-thumb {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  margin-bottom: 10px;
  opacity: 0;
  padding: 3px;
  pointer-events: none;
  position: absolute;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 50% 100%;
  transition: transform .2s .1s ease,opacity .2s .1s ease;
  z-index: 2; }

.plyr__preview-thumb--is-shown {
  opacity: 1;
  transform: translate(0, 0) scale(1); }

.plyr__preview-thumb::before {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255, 255, 255, 0.9);
  bottom: -4px;
  content: '';
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2; }

.plyr__preview-thumb__image-container {
  background: #c1c9d1;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  z-index: 0; }

.plyr__preview-thumb__image-container img {
  height: 100%;
  left: 0;
  max-height: none;
  max-width: none;
  position: absolute;
  top: 0;
  width: 100%; }

.plyr__preview-thumb__time-container {
  bottom: 6px;
  left: 0;
  position: absolute;
  right: 0;
  white-space: nowrap;
  z-index: 3; }

.plyr__preview-thumb__time-container span {
  background-color: rgba(0, 0, 0, 0.55);
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  padding: 3px 6px; }

.plyr__preview-scrubbing {
  bottom: 0;
  filter: blur(1px);
  height: 100%;
  left: 0;
  margin: auto;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .3s ease;
  width: 100%;
  z-index: 1; }

.plyr__preview-scrubbing--is-shown {
  opacity: 1; }

.plyr__preview-scrubbing img {
  height: 100%;
  left: 0;
  max-height: none;
  max-width: none;
  -o-object-fit: contain;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%; }

.plyr--no-transition {
  transition: none !important; }

.plyr__sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  border: 0 !important;
  height: 1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

.plyr [hidden] {
  display: none !important; }

/*==============================================================================
  #FANCY SELECT
  - No default styles are being used. This is all custom styling.
  - Different styling is used on the checkout page as `assets/fancySelect.css`
    and `assets/mhg-selector.scss.liquid` override these styles.
==============================================================================*/
.fancy-select {
  position: relative;
  color: black;
  font-size: 1rem;
  line-height: 1.57; }

.fancy-select select {
  display: none !important; }

.fancy-select.disabled {
  opacity: 0.5; }

.fancy-select .trigger {
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: white;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 0;
  background-image: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/chevron-down-claridges.png?v=100636956963661944581771411948") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important; }

.fancy-select .trigger.open {
  z-index: 2; }

.fancy-select ul.options {
  list-style: none;
  margin: 0;
  margin-top: -62px;
  padding-top: 62px;
  position: absolute;
  top: 0;
  left: -13px;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  max-height: 240px;
  width: calc(100% + 33px);
  min-width: 200px;
  overflow: auto;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.5); }
  @media only screen and (max-width: 767px) {
    .fancy-select ul.options {
      width: 100%;
      left: 0;
      top: 100%;
      margin-top: 0;
      padding-top: 0;
      border-top: 0; } }

.fancy-select ul.options.open {
  visibility: visible;
  opacity: 1; }

.fancy-select ul.options.overflowing {
  top: auto;
  bottom: 40px; }

.fancy-select ul.options.overflowing.open {
  top: -1px;
  bottom: auto; }
  @media only screen and (max-width: 767px) {
    .fancy-select ul.options.overflowing.open {
      top: 100%; } }

.fancy-select ul.options li {
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.5;
  transition: opacity 0.35s ease-in-out; }
  .fancy-select ul.options li:hover {
    opacity: 1; }
  .fancy-select ul.options li:first-child {
    padding-top: 18px; }
  .fancy-select ul.options li:last-child {
    padding-bottom: 18px; }

/*==============================================================================
  #COMPONENTS
==============================================================================*/
/* Icons
  ============================================================================*/
.icon {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  fill: currentColor; }
  .icon.icon--hamburger {
    width: 18px;
    height: 13px;
    margin-top: -6px; }

/*==============================================================================
  #Headings
==============================================================================*/
.heading {
  font-family: "SangBleuSerifLight", serif;
  font-style: normal;
  font-weight: normal;
  text-transform: none; }

.heading-h1 {
  font-family: "SangBleuSerifLight", serif;
  font-size: 1.875rem;
  line-height: 1.17;
  text-transform: none; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .heading-h1 {
      font-size: 4rem;
      line-height: 1.16; } }
  @media only screen and (min-width: 1025px) {
    .heading-h1 {
      font-size: 5rem;
      line-height: 1.13; } }

.heading-h2 {
  font-family: "SangBleuSerifLight", serif;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.17;
  text-transform: none;
  color: #ad924e;
  /*  color: $color-heading-text;*/ }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .heading-h2 {
      font-size: 1.875rem;
      line-height: 1.33; } }
  @media only screen and (min-width: 1025px) {
    .heading-h2 {
      font-size: 2.5rem;
      line-height: 1.25; } }

.heading-h3 {
  font-family: "SangBleuSerifLight", serif;
  text-transform: none;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0.57px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .heading-h3 {
      font-size: 0.875rem;
      line-height: 1.43;
      letter-spacing: 0.5px; } }
  @media only screen and (min-width: 1025px) {
    .heading-h3 {
      font-size: 1rem;
      line-height: 1.1;
      letter-spacing: 0.5px; } }

.heading-h4 {
  font-family: "Lato", "Trebuchet MS", sans-serif;
  font-size: 0.875rem;
  line-height: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .heading-h4 {
      font-size: 0.875rem; } }
  @media only screen and (min-width: 1025px) {
    .heading-h4 {
      font-size: 0.875rem;
      letter-spacing: 0.5px; } }

.heading-h5 {
  font-family: "Lato", "Trebuchet MS", sans-serif;
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.5px;
  text-transform: uppercase; }
  @media only screen and (min-width: 1025px) {
    .heading-h5 {
      line-height: 1.57; } }

.text-para, .select-wrapper select, .rte p, .rte ul, .rte ol, .shopify-challenge__message {
  font-family: "Lato", "Trebuchet MS", sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.5px; }
  @media only screen and (min-width: 1025px) {
    .text-para, .select-wrapper select, .rte p, .rte ul, .rte ol, .shopify-challenge__message {
      line-height: 1.57; } }

.text-blockquote, .rte blockquote,
.rte blockquote p {
  font-family: "SangBleuSerifLight", serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  text-transform: none; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .text-blockquote, .rte blockquote,
    .rte blockquote p {
      font-size: 1.125rem;
      line-height: 1.33;
      letter-spacing: 0.5px; } }
  @media only screen and (min-width: 1025px) {
    .text-blockquote, .rte blockquote,
    .rte blockquote p {
      font-size: 1.25rem;
      line-height: 1.5;
      letter-spacing: 0.5px; } }

.text-navigation {
  font-size: 0.875rem;
  letter-spacing: 2px; }
  @media only screen and (min-width: 1025px) {
    .text-navigation {
      font-size: 0.75rem; } }

.text-btn {
  font-family: "SangBleuSerifLight", serif;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  text-transform: uppercase; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .text-btn {
      font-size: 1.125rem; } }
  @media only screen and (min-width: 1025px) {
    .text-btn {
      font-size: 1.25rem; } }

/*==============================================================================
  #Links
==============================================================================*/
.link {
  cursor: pointer; }

.link--underline {
  border-bottom: 1px solid; }

.link--active {
  color: #6bd5a0; }

.link--hover {
  transition: color 0.35s ease-in-out; }
  .link--hover:hover {
    color: #6bd5a0; }

.link--subtle {
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.35s ease-in-out; }
  .link--subtle:hover {
    color: #6bd5a0; }

.link--with-icon {
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.35s ease-in-out; }
  .link--with-icon .icon {
    width: 6px;
    height: 6px;
    margin-left: 2px;
    color: #a3d1ba; }
  .link--with-icon g {
    stroke-width: 1.5; }
  .link--with-icon:hover {
    color: #6bd5a0;
    /*color: $color-hover;*/ }

/**
 * This special link features a diamond icon and a line placed next to
 * the link text. On hover, the diamond icon moves to the right, while
 * the line grows in width from 0 to 50px.
 *
 * This was originally created using pseudo elements on a link element,
 * however there were too many problems.
 *
 * This solution requires manually adding extra child elements to the
 * link.
 */
/**
 * 1. Set flexbox so we can easily align text, icon, and line. Set as
 *    inline so the link does not span 100% width of parent.
 * 2. Center align items
 */
.link--special {
  position: relative;
  font-weight: 300;
  display: inline-flex;
  /* [1] */
  align-items: center;
  /* [2] */
  font-family: "SangBleuSerifLight", serif;
  font-size: 1rem;
  text-transform: uppercase; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .link--special {
      font-size: 1.125rem;
      letter-spacing: 0.5px; } }
  @media only screen and (min-width: 1025px) {
    .link--special {
      font-size: 1.25rem;
      letter-spacing: 0.5px; } }

/**
 * Add spacing between text and icon/line elements beside it
 */
.link--special-text {
  margin-right: 10px; }

/**
 * 1. Set styling and size of icon
 * 2. Set pointer events none to prevent erratic behaviour on hover
 * 3. Rotate element 45degrees so it appears like a diamond
 * 4. Set transform origin to center
 * 5. Add transition which works when hovering out
 */
.link--special-icon {
  width: 9px;
  /* [1] */
  height: 9px;
  /* [1] */
  background-color: #a3d1ba;
  /* [1] */
  pointer-events: none;
  /* [2] */
  position: relative;
  transform: rotate(45deg);
  /* [3] */
  transform-origin: center;
  /* [4] */
  transition: transform 0.35s ease-in-out;
  /* [4] */ }

/**
 * 1. Styling and size of line
 * 2. Set pointer events none to prevent erratic behaviour on hover
 * 3. Add transition which works when hovering out
 */
.link--special-line {
  height: 1px;
  /* [1] */
  width: 0;
  /* [1] */
  background-color: #a3d1ba;
  /* [1] */
  pointer-events: none;
  /* [2] */
  position: relative;
  transition: width 0.3s ease-in-out;
  /* [3] */ }

/**
 * On hover compatible devices
 * 1. Move icon to the right 50px and ensure it maintains 45 deg rotation
 * 2. Set transition on hover
 *
 * 3. Increase width of line to 50px
 * 4. Set transition on hover
 */
@media (-moz-touch-enabled: 0), (hover: hover) {
  .link--special:hover .link--special-icon {
    transform: translate(50px, 0) rotate(45deg);
    /* [1] */
    transition: transform 0.35s ease-in-out;
    /* [2] */ }

  .link--special:hover .link--special-line {
    width: 50px;
    /* [3] */
    transition: width 0.35s ease-in-out;
    /* [4] */ } }
.ie11 .link--special:hover .link--special-icon {
  transform: translate(50px, 0) rotate(45deg);
  /* [1] */
  transition: transform 0.35s ease-in-out;
  /* [2] */ }
.ie11 .link--special:hover .link--special-line {
  width: 50px;
  /* [3] */
  transition: width 0.35s ease-in-out;
  /* [4] */ }

.link--special-native {
  position: relative;
  display: inline-block;
  font-family: "SangBleuSerifLight", serif;
  font-size: 1rem;
  text-transform: uppercase; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .link--special-native {
      font-size: 1.125rem;
      letter-spacing: 0.5px; } }
  @media only screen and (min-width: 1025px) {
    .link--special-native {
      font-size: 1.5rem;
      letter-spacing: 0.5px; } }
  .link--special-native:before {
    content: '';
    height: 1px;
    width: 0;
    background-color: #a3d1ba;
    pointer-events: none;
    position: absolute;
    right: 9px;
    top: 10px;
    transform: translateX(0);
    transition: width .425s ease-in-out, transform .425s ease-in-out; }
  .link--special-native:after {
    content: '';
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #a3d1ba;
    pointer-events: none;
    margin-left: 9px;
    transform: translate(0, -1px) rotate(45deg);
    transition: transform 0.35s ease-in-out; }

.link--special-native:hover:before {
  content: '';
  width: 50px;
  transform: translateX(50px); }
.link--special-native:hover:after {
  transform: translate(50px, -1px) rotate(45deg); }

/**
 * We wrap this around links and/or buttons for easy block level styling and
 * spacing.
 */
.link-wrapper {
  margin-top: 1rem; }

/*==============================================================================
  #Buttons
==============================================================================*/
.btn, .shopify-challenge__container .shopify-challenge__button {
  position: relative;
  display: inline-block;
  padding: 9px 24px 8px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: "SangBleuSerifLight", serif;
  font-size: 1rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
  background-color: #a3d1ba;
  color: black;
  -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out; }
  .btn:hover, .shopify-challenge__container .shopify-challenge__button:hover {
    background-color: #6bd5a0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .btn, .shopify-challenge__container .shopify-challenge__button {
      font-size: 1.125rem; } }
  @media only screen and (min-width: 1025px) {
    .btn, .shopify-challenge__container .shopify-challenge__button {
      font-size: 1.25rem; } }

/**
 * target IE11
 * https://stackoverflow.com/questions/35485760/targeting-ie-11-in-css-not-working
 */
.btn--primary {
  background-color: #a3d1ba;
  color: black; }
  .btn--primary:hover {
    background-color: #6bd5a0; }

.btn--primary:focus {
  background-color: #6bd5a0; }

.btn--primary-forced {
  background-color: #a3d1ba !important;
  color: black !important; }
  .btn--primary-forced:hover {
    background-color: #6bd5a0 !important; }

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

.btn--min-width {
  min-width: 200px; }

.btn[disabled], .shopify-challenge__container [disabled].shopify-challenge__button {
  cursor: not-allowed;
  background-color: #f2f0ef;
  color: white; }

/*================ Button loading indicator ================*/
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.btn--loading {
  position: relative;
  text-indent: -9999px;
  cursor: not-allowed; }
  .btn--loading:before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -12px;
    border-radius: 50%;
    border: 2px solid #fff;
    border-top-color: transparent;
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear; }

/*==============================================================================
  #Images
==============================================================================*/
/**
 * This is needed to help LazySizes calculate the correct size
 */
.lazyload[data-sizes="auto"] {
  width: 100%; }

/**
 * A simple fade-in animation for lazyloaded images
 */
.image--fade-in {
  opacity: 0;
  -webkit-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out; }

.lazyloaded.image--fade-in {
  opacity: 1; }

/*==============================================================================
  #Aspect Ratio
==============================================================================*/
/**
 * Aspect Ratio wrapper for img elements. Largely based on Prestige theme and
 * https://css-tricks.com/aspect-ratio-boxes/
 *
 * We use the padding-bottom intrinsic ratio hack to allow the merchant to
 * choose short, square, or tall product images which ensures some consistency
 * if the product images are different sizes.
 *
 * The padding-bottom is added to a psuedo-element. This ensures that in case
 * we have some text content, it doesn't get clipped off. Further info here:
 * https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6
 */
/**
 * 1. Set relative positioning context
 * 2. Horizontally center
 * 3. Setup our psuedo element which will have padding-bottom added to it
 */
.aspect-ratio {
  position: relative;
  /* [1] */
  margin-left: auto;
  /* [2] */
  margin-right: auto;
  /* [2] */ }
  .aspect-ratio:before {
    content: '';
    /* [3] */
    display: block;
    /* [3] */ }

.aspect-ratio > img {
  max-height: 100%;
  max-width: 100%; }

/**
 * If using natural proportions, we absolutely position the image, and add
 * padding-bottom to an inline style property. The padding bottom is figured
 * in the liquid snippet, and uses Shopify's `image.aspect_ratio` object
 */
.aspect-ratio--natural > img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

/**
 * We absolutely position our fixed aspect ratio images.
 */
.aspect-ratio--square > img,
.aspect-ratio--short > img,
.aspect-ratio--tall > img,
.aspect-ratio--wide > img {
  position: absolute;
  width: 100%;
  height: 100%; }

/**
 * CONTAIN MODIFIER
 * 1. We use left/top 50% and translate -50% to ensure the images are centered
 *    in their container
 * 2. Use object-fit to contain the image, and use a backup polyfill from
 *    LazySizes for browsers that don't support it natively.
 */
.aspect-ratio--contain.aspect-ratio--square > img,
.aspect-ratio--contain.aspect-ratio--short > img,
.aspect-ratio--contain.aspect-ratio--tall > img,
.aspect-ratio--contain.aspect-ratio--wide > img {
  left: 50%;
  /* [1] */
  top: 50%;
  /* [1] */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* [1] */
  object-fit: contain;
  /* [2] */
  font-family: "object-fit: contain";
  /* [2] */ }

/**
 * COVER MODIFIER
 * 1. We absolutely position the image to the top left edge
 * 2. Use object-fit to cover the full space, and use a backup polyfill from
 *    LazySizes for browsers that don't support it natively.
 */
.aspect-ratio--cover.aspect-ratio--square > img,
.aspect-ratio--cover.aspect-ratio--short > img,
.aspect-ratio--cover.aspect-ratio--tall > img,
.aspect-ratio--cover.aspect-ratio--wide > img {
  left: 0;
  /* [1] */
  top: 0;
  /* [1] */
  object-fit: cover;
  /* [2] */
  font-family: "object-fit: cover";
  /* [2] */ }

/**
 * Fixed aspect ratios applied to the psuedo-element
 */
.aspect-ratio--square:before {
  padding-bottom: 100%;
  /* 1:1 aspect ratio */ }

.aspect-ratio--short:before {
  padding-bottom: 75%;
  /* 4:3 aspect ratio */ }

.aspect-ratio--tall:before {
  padding-bottom: 150%;
  /* 2:3 aspect ratio; */ }

.aspect-ratio--wide:before {
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio; */ }

/*==============================================================================
  #Image Overlay
==============================================================================*/
/**
 * A simple image overlay modifier we can use on images.
 */
.image--overlay {
  position: relative; }

.image--overlay::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #fff;
  opacity: 0; }

/*==============================================================================
  #Placeholder Images
==============================================================================*/
/**
 * Used for Shopify placeholder images in our Shopify Sections.
 */
.placeholder-background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  opacity: 0.7; }

.placeholder-background__svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%; }

/*==============================================================================
  #Linklist
==============================================================================*/
.linklist {
  margin: 0;
  padding: 0;
  list-style: none; }

.linklist__item {
  display: block; }

.linklist__link {
  display: inline-block; }

/*==============================================================================
  #Inline List
==============================================================================*/
.inline-list {
  margin: 0;
  padding: 0;
  list-style: none;
  margin: -6px 0; }

.inline-list__item {
  display: inline-block;
  margin: 6px 8px; }
  .inline-list__item:first-child {
    margin-left: 0; }
  .inline-list__item:last-child {
    margin-right: 0; }

.inline-list__link {
  display: inline-block; }

/*==============================================================================
  #Table
==============================================================================*/
/**
 * A wrapping element for our tables. This makes our tables responsive on
 * smaller devices by setting a horizontal scroll overflow.
 */
.table-wrapper-overflow {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

/**
 * 1. Make tables full width
 * 2. Set text alignment to center
 * 3. Nowrap is needed to ensure text doesn't wrap. Otherwise, table cells could
 *    be severely cramped and long on mobile.
 */
.table, .rte table {
  width: 100%;
  /* [1] */
  text-align: center;
  /* [2] */
  white-space: nowrap;
  /* [3] */
  font-size: 0.75rem;
  letter-spacing: 0.43px; }
  @media only screen and (min-width: 768px) {
    .table, .rte table {
      font-size: 1rem;
      letter-spacing: 0.5px; } }
  .table th, .rte table th, .table td, .rte table td {
    padding: 5px;
    vertical-align: top; }
    @media only screen and (min-width: 768px) {
      .table th, .rte table th, .table td, .rte table td {
        padding: 10px; } }
  .table th, .rte table th {
    font-weight: normal; }
  .table th:first-child, .rte table th:first-child,
  .table td:first-child,
  .rte table td:first-child {
    padding-left: 0;
    text-align: left;
    width: 25%; }
  .table th:last-child, .rte table th:last-child,
  .table td:last-child,
  .rte table td:last-child {
    padding-right: 0; }
  .table tr:first-child, .rte table tr:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
  .table p, .rte table p {
    margin-bottom: 0; }

/**
 * A table that converts rows to blocks on mobile using data-labels to
 * insert column titles.
 */
@media only screen and (max-width: 767px) {
  .table-responsive-stack {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 0.75rem;
    letter-spacing: 0.43px;
    /**
     * Hide thead or first row on small screens
     */ }
    .table-responsive-stack thead,
    .table-responsive-stack tr:first-child {
      display: none; }
    .table-responsive-stack tr {
      display: block;
      padding: 20px 0;
      border-top: 1px solid rgba(0, 0, 0, 0.2); }
    .table-responsive-stack th, .table-responsive-stack td {
      display: block;
      text-align: right;
      padding: 1rem; }
    .table-responsive-stack td:before {
      content: attr(data-label);
      padding-right: 1rem;
      float: left;
      text-transform: uppercase; } }
@media only screen and (min-width: 768px) {
  .table-responsive-stack {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 1rem;
    letter-spacing: 0.5px; }
    .table-responsive-stack th, .table-responsive-stack td {
      padding: 10px;
      vertical-align: top; }
    .table-responsive-stack th {
      font-weight: normal; }
    .table-responsive-stack th:first-child,
    .table-responsive-stack td:first-child {
      padding-left: 0;
      text-align: left; }
    .table-responsive-stack th:last-child,
    .table-responsive-stack td:last-child {
      padding-right: 0; }
    .table-responsive-stack tr:first-child {
      border-bottom: 1px solid rgba(0, 0, 0, 0.2); } }

/*==============================================================================
  #Form
==============================================================================*/
.form {
  width: 100%;
  margin-left: auto;
  margin-right: auto; }

/**
 * Max-width container used on account forms
 */
.form--tiny {
  max-width: 450px; }

.form--guest-checkout {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.2); }

/* Form Header
  ============================================================================*/
.form__header {
  margin-bottom: 30px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .form__header {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 1025px) {
    .form__header {
      margin-bottom: 16px; } }

/**
 * Modifier with larger spacing
 */
@media only screen and (min-width: 1025px) {
  .form__header--loose {
    margin-bottom: 35px; } }

/**
 * Used above forms to provide general details
 */
.form__description {
  margin-top: 48px; }
  @media only screen and (min-width: 768px) {
    .form__description {
      margin-top: 44px; } }

/* Form Item
  ============================================================================*/
/**
 * A wrapper for all form items
 */
.form__item {
  width: 100%;
  position: relative;
  margin-bottom: 1rem; }

.form__item--minimal {
  margin-bottom: 0; }

.form__item:only-child {
  margin-bottom: 0; }

/**
 * A flexbox component for two columns with space between. Used in account
 * address forms to show a `set as default address` checkbox on left and
 * required fields disclaimer on right.
 */
.form__item--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  margin-top: 24px; }
  .form__item--flex > div {
    margin: 0; }

/* Form Inputs
  ============================================================================*/
/**
 * A standard form input design that's largely unused. We use a modifier for
 * styled inputs. We add a `text-para` class in the HTML to get correct
 * text styling.
 */
.form__input,
.form__textarea {
  -webkit-appearance: none;
  display: block;
  width: 100%;
  padding: 18px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 0;
  line-height: 1.57;
  resize: none; }
  .form__input::-webkit-input-placeholder,
  .form__textarea::-webkit-input-placeholder {
    color: black;
    opacity: 0.5; }
  .form__input::-moz-placeholder,
  .form__textarea::-moz-placeholder {
    color: black;
    opacity: 0.5; }
  .form__input:-ms-input-placeholder,
  .form__textarea:-ms-input-placeholder {
    color: black;
    opacity: 0.5; }
  .form__input::placeholder,
  .form__textarea::placeholder {
    color: black;
    opacity: 0.5; }

.form__textarea {
  min-height: 184px; }

/**
 * Styled inputs are minimal with only a bottom border
 */
.form__input--minimal,
.form__textarea--minimal {
  border: 0;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5); }

/* Form Labels
  ============================================================================*/
/**
 * A standard form label placed above a form input. These are largely unused
 * as we use Placeholders.
 */
.form__label {
  display: block;
  margin-bottom: 0.5rem;
  text-align: left;
  cursor: pointer; }

/* Form Checkbox & Radio Buttons
  ============================================================================*/
/**
 * A checkbox pattern that hides the input and uses pseudoselectors to show
 * styling. In this case, a checked box will show a small square.
 */
.form__checkbox-wrapper,
.form__radio-wrapper {
  margin: 18px 0;
  position: relative;
  text-align: left; }

/**
 * Vertical spacing between radio buttons
 */
.form__radio-wrapper + .form__radio-wrapper {
  margin: 30px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .form__radio-wrapper + .form__radio-wrapper {
      margin: 14px 0; } }
  @media only screen and (min-width: 1025px) {
    .form__radio-wrapper + .form__radio-wrapper {
      margin: 18px 0; } }

.form__checkbox-label,
.form__radio-label {
  display: inline-block;
  cursor: pointer; }

/**
 * Hide input elements visually
 */
.form__checkbox-input,
.form__radio-input {
  position: absolute;
  margin: 0;
  opacity: 0; }

/**
 * The text element including the psuedoselectors to create the visual input
 */
.form__checkbox-text,
.form__radio-text {
  position: relative;
  display: block;
  padding-left: 28px;
  line-height: 1; }
  .form__checkbox-text:before,
  .form__radio-text:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 1px solid;
    background: transparent; }
    @media only screen and (min-width: 768px) {
      .form__checkbox-text:before,
      .form__radio-text:before {
        width: 14px;
        height: 14px; } }
  .form__checkbox-text:after,
  .form__radio-text:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    opacity: 0;
    background: black;
    -webkit-transition: opacity 0.35s ease-in-out;
    transition: opacity 0.35s ease-in-out; }
    @media only screen and (min-width: 768px) {
      .form__checkbox-text:after,
      .form__radio-text:after {
        width: 14px;
        height: 14px; } }

/**
 * Styling of checked input
 */
.form__checkbox-input:checked + .form__checkbox-text:after,
.form__radio-input:checked + .form__radio-text:after {
  opacity: 1; }

/* Form Alert
  ============================================================================*/
.form__alert {
  margin-top: 20px; }
  @media only screen and (min-width: 1025px) {
    .form__alert {
      margin-top: 8px; } }

/* Form Submit
  ============================================================================*/
.form__submit {
  margin-top: 24px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .form__submit {
      margin-top: 20px; } }
  @media only screen and (min-width: 1025px) {
    .form__submit {
      margin-top: 20px; } }

/* Form Footer
  ============================================================================*/
.form__footer {
  margin-top: 24px; }
  @media only screen and (min-width: 1025px) {
    .form__footer {
      margin-top: 13px; } }

/**
 * A flex modifier that places two items in a row
 */
.form__footer--flex {
  display: flex;
  align-items: center;
  justify-content: space-between; }

/**
 * A modifier that stacks and centers items on mobile.
 */
.form__footer--flex-stack {
  display: flex; }
  @media only screen and (max-width: 767px) {
    .form__footer--flex-stack {
      flex-wrap: wrap;
      justify-content: center;
      text-align: center; }
      .form__footer--flex-stack > div {
        width: 100%; }
      .form__footer--flex-stack > div + div {
        margin-top: 1rem; } }
  @media only screen and (min-width: 768px) {
    .form__footer--flex-stack {
      align-items: flex-start;
      justify-content: space-between; }
      .form__footer--flex-stack > div + div {
        padding-left: 10px;
        text-align: right; }
      .form__footer--flex-stack > div {
        width: 50%; } }

/**
 * Used in Back in Stock modal
 */
.form__disclaimer {
  font-size: 1rem;
  letter-spacing: 0.5px;
  font-style: italic;
  color: rgba(0, 0, 0, 0.5); }
  @media only screen and (min-width: 1025px) {
    .form__disclaimer {
      margin-bottom: 0; } }

/*==============================================================================
  #Select
==============================================================================*/
/**
 * We wrap our select elements in `.select-wrapper` including a `select` element and an SVG icon. This allows for easier styling.
 */
/**
 * Default select element is 100% width with a border and padding all round
 */
.select-wrapper {
  position: relative;
  vertical-align: middle; }

.select-wrapper svg {
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
  vertical-align: baseline;
  fill: #a3d1ba;
  color: #a3d1ba; }

/**
 * 1. Disable built in styles
 * 2. Remove blue background on IE when a value is selected
 */
.select-wrapper select {
  -webkit-appearance: none;
  /* [1] */
  -moz-appearance: none;
  /* [1] */
  display: inline-block;
  width: 100%;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 0;
  background-image: none;
  color: inherit;
  cursor: pointer; }
  .select-wrapper select:focus::-ms-value {
    background: #fff;
    /* [2] */
    color: #000;
    /* [2] */ }

/**
 * 3. Ensure option value is easy to read
 */
.select-wrapper option {
  background: white;
  color: black; }

/**
 * Minimal modifier removes horizontal padding, and keeps only a bottom border.
 */
.select-wrapper--minimal select {
  padding-left: 0;
  padding-right: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5); }

.select-wrapper--minimal svg {
  right: 0; }

/*==============================================================================
  #Alerts
==============================================================================*/
.alert {
  display: block; }

.alert--error {
  color: #a3d1ba; }

.alert--success {
  color: #a3d1ba; }

.alert--warning {
  color: #a3d1ba; }

.alert__error-list {
  list-style: none; }

/*==============================================================================
  #Empty State
==============================================================================*/
.empty-state {
  text-align: center; }

.empty-state--loose {
  margin: 4rem 0; }
  @media only screen and (min-width: 768px) {
    .empty-state--loose {
      margin: 8rem 0; } }

.empty-state--loose-bottom {
  margin-bottom: 60vh; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .empty-state--loose-bottom {
      margin-bottom: 70vh; } }
  @media only screen and (min-width: 1025px) {
    .empty-state--loose-bottom {
      margin-bottom: 80vh; } }

.empty-state__action {
  display: inline-block;
  margin-top: 30px; }

.empty-state__title {
  margin-bottom: 1rem; }

.empty-state__title:only-child {
  margin-bottom: 0; }

/*==============================================================================
  #Segment
==============================================================================*/
/**
 * Add vertical spacing between segments
 */
.segment + .segment {
  margin-top: 50px; }

.segment__title {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.5; }

.segment__content {
  padding: 1rem 0; }

.segment__action-list {
  margin-top: 1rem; }

.segment__action-item + .segment__action-item {
  margin-left: 1.25rem; }

.segment__button-wrapper {
  margin-top: 32px; }

.segment__form {
  margin-top: 2rem;
  margin-bottom: 4rem; }

/*==============================================================================
  #RTE
==============================================================================*/
.rte {
  /**
   * Wrapping 2 images in a `strong` tag will display them equally in a single
   * row.
   */
  /**
   * The largest RTE headings using Felix font. Used in:
   * - The Edit Blockquote
   * - The Edit Largest Headings
   */
  /**
   * Second largest RTE headings using Felix. Used in:
   * - Footer pages section headings
   */
  /**
   * Third largest RTE headings using Interface uppercase. Used in:
   * - The Edit
   */
  /**
   * Interface uppercase heading used in:
   * - Footer pages
   */
  /**
   * Interface uppercase heading used in:
   * - The Edit citation for blockquote
   */ }
  .rte::after {
    content: '';
    display: block;
    clear: both; }
  .rte iframe {
    max-width: 100%; }
  .rte img {
    display: block;
    margin: 40px auto; }
  .rte p + strong {
    display: block;
    margin: 40px auto; }
  .rte strong > img {
    width: 50%;
    float: left;
    padding-left: 5px;
    margin-top: 0; }
    @media only screen and (min-width: 768px) {
      .rte strong > img {
        padding-left: 18px; } }
  .rte strong > img:first-child {
    padding-left: 0;
    padding-right: 5px; }
    @media only screen and (min-width: 768px) {
      .rte strong > img:first-child {
        padding-right: 18px; } }
  .rte h1, .rte fh1 {
    margin: 30px 0 20px;
    font-family: "SangBleuSerifLight", serif;
    font-size: 1.25rem;
    line-height: 1.5;
    color: #ad924e; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .rte h1, .rte fh1 {
        font-size: 1.125rem;
        line-height: 1.33;
        letter-spacing: 0.5px; } }
    @media only screen and (min-width: 1025px) {
      .rte h1, .rte fh1 {
        font-size: 1.25rem;
        line-height: 1.5;
        letter-spacing: 0.5px; } }
  .rte h2, .rte fh2 {
    margin: 20px 0;
    font-family: "SangBleuSerifLight", serif;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: 0.57px;
    color: #ad924e; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .rte h2, .rte fh2 {
        font-size: 0.875rem;
        line-height: 1.43;
        letter-spacing: 0.5px; } }
    @media only screen and (min-width: 1025px) {
      .rte h2, .rte fh2 {
        font-size: 1rem;
        line-height: 1.1;
        letter-spacing: 0.5px; } }
  .rte h3 {
    margin: 30px 0 20px;
    font-family: "Lato", "Trebuchet MS", sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
    line-height: 1.33;
    letter-spacing: 2px; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .rte h3 {
        font-size: 0.875rem;
        line-height: 1.43;
        letter-spacing: 2px; } }
    @media only screen and (min-width: 1025px) {
      .rte h3 {
        font-size: 1rem;
        line-height: 1.57;
        letter-spacing: 2.5px; } }
  .rte h4 {
    margin: 20px 0 0;
    font-family: "Lato", "Trebuchet MS", sans-serif;
    text-transform: uppercase;
    font-size: 0.875rem;
    line-height: 1.43;
    letter-spacing: 0.5px; }
    @media only screen and (min-width: 1025px) {
      .rte h4 {
        line-height: 1.57; } }
  .rte h5 {
    margin: 15px 0 36px;
    font-family: "Lato", "Trebuchet MS", sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
    line-height: 1.33;
    letter-spacing: 2px;
    text-align: center; }
  .rte a:not(.btn) {
    color: rgba(0, 0, 0, 0.5);
    transition: color 0.35s ease-in-out; }
    .rte a:not(.btn):hover {
      color: #6bd5a0; }
  .rte ul, .rte ol {
    margin-left: 0;
    margin-bottom: 18px;
    padding-left: 0;
    list-style-position: inside;
    list-style: none; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .rte ul, .rte ol {
        margin-bottom: 26px; } }
    @media only screen and (min-width: 1025px) {
      .rte ul, .rte ol {
        margin-bottom: 30px; } }
  .rte li {
    margin: 5px 0;
    padding: 0 0 0 20px;
    background-image: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/list-diamond-claridges.png?v=143646661453224244791771411948");
    background-repeat: no-repeat;
    background-position: 0 8px; }
  .rte table + table,
  .rte .table-wrapper-overflow + .table-wrapper-overflow {
    margin-top: 30px; }
  .rte p + table,
  .rte p + .table-wrapper-overflow {
    margin-bottom: 25px; }

/**
 * On The Edit article pages, text elements appear smaller than
 * images on larger screens.
 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .article-template-section .rte h1, .article-template-section .rte fh1, .article-template-section .rte h2, .article-template-section .rte fh2, .article-template-section .rte h3, .article-template-section .rte h4, .article-template-section .rte h5, .article-template-section .rte h6,
  .article-template-section .rte p,
  .article-template-section .rte blockquote,
  .article-template-section .rte ul, .article-template-section .rte ol,
  .article-template-section .rte table {
    padding: 0 50px; } }
@media only screen and (min-width: 1025px) {
  .article-template-section .rte h1, .article-template-section .rte fh1, .article-template-section .rte h2, .article-template-section .rte fh2, .article-template-section .rte h3, .article-template-section .rte h4, .article-template-section .rte h5, .article-template-section .rte h6,
  .article-template-section .rte p,
  .article-template-section .rte blockquote,
  .article-template-section .rte ul, .article-template-section .rte ol,
  .article-template-section .rte table {
    padding: 0 91px; } }

span.h3-heading {
  display: block; }

/*==============================================================================
  #Pagination
==============================================================================*/
.pagination {
  margin: 55px 0 70px;
  text-align: center;
  font-family: "SangBleuSerifLight", serif;
  font-size: 1.125rem;
  letter-spacing: 0.5px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .pagination {
      margin: 118px 0 84px; } }
  @media only screen and (min-width: 1025px) {
    .pagination {
      margin: 96px 0 106px;
      font-size: 1.25rem;
      letter-spacing: normal; } }

.pagination__nav {
  display: inline-block;
  list-style: none; }

.pagination__nav-item {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 6px;
  vertical-align: middle;
  border-bottom: 1px solid transparent;
  transition: color 0.35s ease-in-out; }
  .pagination__nav-item .icon {
    width: 12px;
    height: 12px;
    vertical-align: -1px; }
  .pagination__nav-item:hover {
    color: #6bd5a0; }

.pagination__nav-item--active {
  border-bottom-color: #a3d1ba; }

/*==============================================================================
  #Breadcrumbs
==============================================================================*/
.breadcrumbs {
  margin: 17px 0 17px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .breadcrumbs {
      margin: 17px 0; } }
  @media only screen and (min-width: 1025px) {
    .breadcrumbs {
      margin: 33px 0; } }

.breadcrumbs__list {
  display: flex;
  list-style: none;
  font-size: 0.5rem;
  letter-spacing: 1.2px;
  text-transform: uppercase; }
  @media only screen and (min-width: 1025px) {
    .breadcrumbs__list {
      font-size: 0.625rem;
      letter-spacing: 1.5px; } }

.breadcrumbs__item {
  color: rgba(0, 0, 0, 0.5); }

.breadcrumbs__item a {
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.35s ease-in-out; }
  .breadcrumbs__item a:hover {
    color: #6bd5a0; }

.breadcrumbs__separator {
  margin: 0 5px; }

.breadcrumbs__active {
  color: black; }

/*==============================================================================
  #Custom Switcher
==============================================================================*/
/**
 * A custom designed navigation dropdown powered by JS.
 */
.custom-switcher-wrapper {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.5px;
  position: relative;
  margin: 0 -12px 57px; }

.custom-switcher-button {
  display: block;
  width: 100%;
  position: relative;
  text-align: left;
  padding: 18px 12px;
  border: 1px solid transparent;
  -webkit-transition: border-color 0.35s ease-in-out;
  transition: border-color 0.35s ease-in-out; }
  .custom-switcher-button:after {
    content: '';
    height: 1px;
    width: calc(100% - 24px);
    background-color: black;
    position: absolute;
    top: 100%;
    left: 12px; }

.custom-switcher-wrapper--is-active .custom-switcher-button {
  border-top-color: black;
  border-right-color: black;
  border-left-color: black; }

.custom-switcher-button .icon {
  position: absolute;
  right: 12px;
  top: 24px;
  width: 12px;
  height: 12px;
  color: #a3d1ba;
  -webkit-transition: -webkit-transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out; }

.custom-switcher-wrapper--is-active .icon {
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg); }

.custom-switcher {
  position: absolute;
  background-color: white;
  width: 100%;
  z-index: 10;
  border: 1px solid;
  border-top: 0;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  opacity: 0;
  visibility: hidden; }

.custom-switcher-wrapper--is-active .custom-switcher {
  opacity: 1;
  visibility: visible; }

.custom-switcher__list {
  list-style: none; }

.custom-switcher__link {
  display: block;
  padding: 18px 12px; }

/*==============================================================================
  #Collapsibles
==============================================================================*/
/**
 * General styling is done on specific collapsible elements so we can have
 * differing styles.
 */
.collapsible {
  overflow: hidden; }

/**
 * Collapsible panel when closed
 */
.collapsible__panel {
  height: 0;
  visibility: hidden;
  overflow: hidden;
  -webkit-transition: height 0.35s ease-in-out, visibility 0s ease-in-out 0.35s;
  transition: height 0.35s ease-in-out, visibility 0s ease-in-out 0.35s; }

/**
 * Collapsible panel when open
 */
.collapsible--is-open > .collapsible__panel {
  height: auto;
  visibility: visible;
  -webkit-transition: height 0.35s ease-in-out;
  transition: height 0.35s ease-in-out; }

/**
 * Collapsible panel content
 */
.collapsible__icon {
  transition: transform 0.35s ease-in-out; }

/**
 * Collapsible icon when open. We show a minus symbol.
 */
.collapsible__heading[aria-expanded="true"] .collapsible__icon {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

/*==============================================================================
  #Modal
==============================================================================*/
.no-scroll {
  overflow: hidden; }

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; }
  .modal::before {
    position: fixed;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none; }

.modal.modal--is-visible {
  visibility: visible;
  opacity: 1; }
  .modal.modal--is-visible .modal__content {
    transition: visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1); }

/* Modal content
  ============================================================================*/
.modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: visibility 0.25s ease-in-out; }
  @media only screen and (min-width: 768px) {
    .modal__content {
      top: 50%;
      left: 50%;
      width: 708px;
      height: auto; } }
  @media only screen and (min-width: 1025px) {
    .modal__content {
      top: 50%;
      left: 50%;
      width: 798px;
      height: auto; } }

.modal__content--center {
  display: flex;
  flex-direction: column;
  justify-content: center; }

.modal__content--full {
  height: 100%;
  width: 100%; }

/* Modal close
  ============================================================================*/
.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .modal__close {
      top: 28px;
      right: 36px; } }
  @media only screen and (min-width: 1025px) {
    .modal__close {
      top: 32px;
      right: 32px; } }

.modal__close-left {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .modal__close-left {
      top: 28px;
      left: 36px; } }
  @media only screen and (min-width: 1025px) {
    .modal__close-left {
      top: 32px;
      left: 32px; } }

.modal__close .svg {
  width: 12px;
  height: 12px; }
  @media only screen and (min-width: 768px) {
    .modal__close .svg {
      width: 14px;
      height: 14px; } }

/* Modal body
  ============================================================================*/
.modal__body {
  padding: 118px 20px 55px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .modal__body {
      padding: 56px 60px; } }
  @media only screen and (min-width: 1025px) {
    .modal__body {
      padding: 73px 81px; } }

.modal__body--flush {
  padding: 0; }
  @media only screen and (min-width: 768px) {
    .modal__body--flush {
      padding: 0; } }

/* Modal text
  ============================================================================*/
.modal__title {
  margin-bottom: 43px;
  text-align: center;
  font-family: "SangBleuSerifLight", serif;
  font-size: 1.5rem;
  line-height: 1.17;
  text-transform: none;
  display: block; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .modal__title {
      margin-bottom: 30px;
      text-align: left;
      font-size: 1.875rem;
      line-height: 1.07; } }
  @media only screen and (min-width: 1025px) {
    .modal__title {
      margin-bottom: 36px;
      text-align: left;
      font-size: 1.25rem;
      letter-spacing: 0.5px; } }

.modal__copy {
  margin: 48px 0 30px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .modal__copy {
      margin: 24px 0 6px; } }
  @media only screen and (min-width: 1025px) {
    .modal__copy {
      margin: 36px 0 18px; } }

/* Modal footer
  ============================================================================*/
.modal__footer {
  margin-top: 24px; }
  @media only screen and (min-width: 1025px) {
    .modal__footer {
      margin-top: 14px; } }

/* Modal modifiers
  ============================================================================*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .modal--age-check .modal__content {
    width: 462px; } }
@media only screen and (min-width: 1025px) {
  .modal--age-check .modal__content {
    width: 569px; } }

.modal--age-check .form {
  margin: 35px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .modal--age-check .form {
      margin: 34px 0; } }
  @media only screen and (min-width: 1025px) {
    .modal--age-check .form {
      margin: 28px 0; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .modal--preorder .modal__content,
  .modal--back-in-stock .modal__content {
    width: 522px; } }
@media only screen and (min-width: 1025px) {
  .modal--preorder .modal__content,
  .modal--back-in-stock .modal__content {
    width: 569px; } }

.modal--back-in-stock .form__submit {
  margin-top: 29px; }
  @media only screen and (min-width: 768px) {
    .modal--back-in-stock .form__submit {
      margin-top: 20px; } }

.modal--back-in-stock .form__footer {
  margin-top: 24px; }
  @media only screen and (min-width: 768px) {
    .modal--back-in-stock .form__footer {
      margin-top: 14px; } }

.back-in-stock__response {
  margin: 24px 0; }
  @media only screen and (min-width: 768px) {
    .back-in-stock__response {
      margin: 14px 0; } }

.back-in-stock__response--error {
  color: #a3d1ba; }

/*==============================================================================
  #Drawers
==============================================================================*/
/**
 * The drawers use transforms which hide them off-screen. When active, we use
 * transforms to bring them into view.
 *
 * 1. Fixed positioning to make drawer 100% height
 * 2. Set default width of drawers
 * 3. General colour styling
 * 4. Only use standard touch action gestures
 * 5. Use momentum based scrolling for improved UX
 * 6. Set visibility to hidden
 * 7. Transition properties for visibility and transforms
 */
.drawer {
  position: fixed;
  /* [1] */
  top: 0;
  /* [1] */
  left: 0;
  /* [1] */
  bottom: 0;
  /* [1] */
  z-index: 60;
  /* [1] */
  width: 100%;
  /* [2] */
  color: black;
  /* [3] */
  background-color: white;
  /* [3] */
  -ms-touch-action: manipulation;
  /* [4] */
  touch-action: manipulation;
  /* [4] */
  -webkit-overflow-scrolling: touch;
  /* [5] */
  visibility: hidden;
  /* [6] */
  -webkit-transition: visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* [7] */
  transition: visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .drawer:focus {
    outline: none; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer {
      width: 50%; } }
  @media only screen and (min-width: 1025px) {
    .drawer {
      width: 400px; } }
  @media only screen and (min-width: 1680px) {
    .drawer {
      width: 530px; } }

/**
 * Menu drawer has a different width on medium breakpoint
 */
.drawer--menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%); }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer--menu {
      width: 490px;
      -webkit-transform: translateX(-490px);
      transform: translateX(-490px); } }
  @media only screen and (min-width: 1025px) {
    .drawer--menu {
      -webkit-transform: translateX(-400px);
      transform: translateX(-400px); } }
  @media only screen and (min-width: 1680px) {
    .drawer--menu {
      -webkit-transform: translateX(-530px);
      transform: translateX(-530px); } }

/**
 * We move our drawers off-screen with transform using the drawer width
 */
.drawer--menu.drawer--is-open {
  visibility: visible;
  -webkit-transform: translateX(0);
  transform: translateX(0); }

.drawer--filters {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%); }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer--filters {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%); } }
  @media only screen and (min-width: 1025px) {
    .drawer--filters {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%); } }

.drawer--filters.drawer--is-open {
  visibility: visible;
  -webkit-transform: translateX(0);
  transform: translateX(0); }

.drawer--cart,
.drawer--sort {
  right: 0;
  left: auto;
  -webkit-transform: translateX(100%);
  transform: translateX(100%); }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer--cart,
    .drawer--sort {
      -webkit-transform: translateX(100%);
      transform: translateX(100%); } }
  @media only screen and (min-width: 1025px) {
    .drawer--cart,
    .drawer--sort {
      -webkit-transform: translateX(100%);
      transform: translateX(100%); } }

.drawer--cart.drawer--is-open,
.drawer--sort.drawer--is-open {
  visibility: visible;
  -webkit-transform: translateX(0);
  transform: translateX(0); }

/* Drawer overlay
  ============================================================================*/
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 34;
  background-color: #000;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }

.drawer-overlay.drawer-overlay--is-visible {
  opacity: 0.15;
  visibility: visible; }

/* Drawer content
  ============================================================================*/
/**
 * Flexbox is used to stack our drawer content into a header, body, and footer.
 *
 * 1. Set flexbox context
 * 2. Stack flex items
 * 3. Set 100% height
 * 4. Relative positioning needed to establish a stacking context as this is a
 *    child of a fixed positioned element.
 */
.drawer__content {
  display: flex;
  /* [1] */
  flex-direction: column;
  /* [2] */
  height: 100%;
  /* [3] */
  position: relative;
  /* [4] */ }

/* Drawer header
  ============================================================================*/
/**
 * 1. Match header height
 * 2. Add horizontal spacing
 * 3. Use flexbox to center content
 */
.drawer__header {
  height: 60px;
  /* [1] */
  padding: 0 24px;
  /* [2] */
  display: flex;
  /* [3] */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer__header {
      height: 80px; } }
  @media only screen and (min-width: 1025px) {
    .drawer__header {
      height: 100px; } }

.drawer--menu .drawer__header {
  justify-content: flex-start; }

.drawer--menu .drawer__close {
  margin-right: 24px;
  justify-content: flex-start; }

.drawer--menu .drawer__cart-link {
  font-size: 0.875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-left: auto; }

.drawer__close-button .icon {
  width: 16px;
  height: 14px;
  margin-top: -2px; }
  .drawer__close-button .icon g {
    stroke-width: 1.15; }

.drawer__search-link {
  margin-left: auto; }

.drawer__title {
  margin-top: 0;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.17;
  color: #ad924e; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer__title {
      font-size: 1.5rem;
      line-height: 1.33; } }
  @media only screen and (min-width: 1025px) {
    .drawer__title {
      font-size: 1.5rem;
      line-height: 1;
      letter-spacing: 0.5px; } }

@media only screen and (max-width: 767px) {
  .drawer--cart .drawer__title {
    margin-top: 43px; } }

/* Drawer Body
  ============================================================================*/
/**
 * 1. Set the body to adjust to available space
 * 2. Show scroll if necessary
 */
.drawer__body {
  flex: 1 1 0%;
  /* [1] */
  overflow: auto;
  /* [2] */ }

/**
 * 1. Display as flex
 * 2. Set to flex-start so container does not stretch and we can add
 *    spacing properties
 * 3. Add vertical spacing
 */
.drawer--menu .drawer__body {
  display: flex;
  /* [1] */
  align-items: center;
  /* [2] */
  justify-content: center;
  flex-wrap: wrap;
  padding: 48px 0 0;
  /* [3] */ }

/**
 * A modifier class for the body if it has a child drawer panel. We want
 * the drawer__panel to be positioned relative to the drawer__body
 */
.drawer__body--has-drawer-panel {
  position: relative; }

/**
 * Hide overflow on main drawer when child drawer panel is open
 */
.drawer--drawer-panel-is-open > .drawer__content > .drawer__body {
  overflow: hidden; }

/* Drawer Footer
  ============================================================================*/
/**
 * 1. Set height equal to header
 * 2. Add horizontal spacing
 * 3. Center content using flexbox
 */
.drawer--menu .drawer__footer {
  height: 60px;
  /* [1] */
  padding: 0 24px;
  /* [2] */
  display: flex;
  /* [3] */
  align-items: center;
  justify-content: center;
  background-color: #f2f0ef; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer--menu .drawer__footer {
      height: 80px; } }

.drawer__footer-link {
  font-size: 1rem;
  line-height: 1.14;
  letter-spacing: 2px;
  text-transform: uppercase; }

/* Drawer Footer
  ============================================================================*/
/**
 * 1. Set height equal to header
 * 2. Add horizontal spacing
 * 3. Center content using flexbox
 */
.drawer--menu .drawer__body-footer {
  margin-top: auto;
  height: 60px;
  /* [1] */
  width: 100%;
  padding: 0 24px;
  /* [2] */
  display: flex;
  /* [3] */
  align-items: center;
  justify-content: center;
  background-color: #f2f0ef; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer--menu .drawer__body-footer {
      height: 80px; } }

.drawer__footer-link {
  font-size: 1rem;
  line-height: 1.14;
  letter-spacing: 2px;
  text-transform: uppercase; }

/* Drawer Panel
  ============================================================================*/
/**
 * The menu drawer uses an off-canvas drawer panel for child/dropdown links.
 * 1. Position absolutely to the drawer body.
 * 2. Set z-index so it overlays the parent drawer.
 * 3. Set similar properties as `.drawer` class
 */
.drawer__panel {
  position: absolute;
  /* [1] */
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  z-index: 1;
  /* [2] */
  background-color: white;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: hidden;
  -webkit-transition: visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); }

.drawer--is-open .drawer__panel--is-open {
  visibility: visible;
  transform: translateX(0); }

.drawer__panel .drawer__body {
  padding: 0 24px; }

/* Drawer Cart
  ============================================================================*/
/**
 * Our standard drawer pattern is a `drawer__content` parent element, with
 * children of header, body, and footer. Using flexbox and 100% height we can
 * create a fixed header and footer with a flexible/scrollable body.
 *
 * The cart drawer can't use this pattern. We are using AJAX to replace the cart
 * content. We can't replace the drawer header as we'd need to reinitialise the
 * drawer close Javascript.
 *
 * We have to place the header outside of the `drawer__content`.
 * The`drawer__content` wraps around the body and footer only. The below code
 * are the adjustments needed.
 *
 * 1. Set a fixed height for the drawer header
 * 2. Set a stacking context for the header otherwise the close button is not
 *    clickable
 */
@media only screen and (max-width: 767px) {
  .drawer--cart {
    overflow: auto; } }

.drawer--cart .drawer__header {
  position: relative;
  /* [2] */
  height: auto; }

.drawer--cart .drawer__header--empty {
  height: auto !important; }

.drawer--cart .drawer__close {
  margin-top: 16px;
  margin-left: auto; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer--cart .drawer__close {
      margin-top: 26px;
      margin-bottom: 32px; } }
  @media only screen and (min-width: 1025px) {
    .drawer--cart .drawer__close {
      margin-top: 32px;
      margin-bottom: 40px; } }

/**
 * Drawer Cart class that summarises cart contents such as cart count
 */
.drawer__summary {
  width: 100%; }

/**
 * Structure/styling for empty cart message
 */
.drawer__empty {
  margin: 50px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer__empty {
      margin: 65px 0; } }
  @media only screen and (min-width: 1025px) {
    .drawer__empty {
      margin: 35px 0; } }

/**
 * Styling for drawer cart count
 */
.drawer__count,
.drawer__error {
  margin: 0 0 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer__count,
    .drawer__error {
      margin: 0 0 24px; } }
  @media only screen and (min-width: 1025px) {
    .drawer__count,
    .drawer__error {
      margin: 0 0 25px; } }

.drawer__error {
  display: none; }

/**
 * Structure for cart drawer body
 */
.drawer--cart .drawer__body {
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap; }
  @media only screen and (max-width: 767px) {
    .drawer--cart .drawer__body {
      overflow: initial; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer--cart .drawer__body {
      padding: 0 30px; } }
  @media only screen and (min-width: 1025px) {
    .drawer--cart .drawer__body {
      padding: 0 40px; } }

/**
 * Structure for drawer cart content.
 * 1. We set content height to 100% minus drawer header height
 */
.drawer--cart .drawer__content {
  height: calc(100% - 93px);
  /* [1] */ }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer--cart .drawer__content {
      height: calc(100% - 181px); } }
  @media only screen and (min-width: 1025px) {
    .drawer--cart .drawer__content {
      height: calc(100% - 181px); } }

.ajax-cart__summary {
  width: 100%; }

/**
 * Structure of cart drawer footer
 */
.drawer--cart .drawer__footer {
  padding: 0 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer--cart .drawer__footer {
      padding: 0 30px; } }
  @media only screen and (min-width: 1025px) {
    .drawer--cart .drawer__footer {
      padding: 0 40px; } }

/*==============================================================================
  #Mobile Nav
==============================================================================*/
/*==============================================================================
  #Mobile Nav
==============================================================================*/
.mobile-nav {
  width: 100%; }

.mobile-nav__list {
  margin: 0;
  padding: 0;
  list-style: none; }

.mobile-nav__item {
  text-align: center; }
  .mobile-nav__item:last-child {
    margin-bottom: 0; }

.mobile-nav__heading {
  display: block;
  margin-bottom: 25px;
  font-family: "SangBleuSerifLight", serif;
  line-height: 1.33;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: black; }

.mobile-nav__link {
  display: inline-block;
  position: relative;
  text-transform: none;
  color: #ad924e; }

.mobile-nav__title {
  cursor: pointer;
  margin-bottom: 38px;
  display: inline-block;
  position: relative;
  text-transform: capitalize;
  color: #ad924e; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mobile-nav__title {
      margin-bottom: 70px; } }

.mobile-nav__item--primary {
  margin-bottom: 70px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mobile-nav__item--primary {
      margin-bottom: 90px; } }

.mobile-nav__item--secondary {
  margin-bottom: 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mobile-nav__item--secondary {
      margin-bottom: 56px; } }

.mobile-nav__item--has-children {
  margin-bottom: 40px; }
  .mobile-nav__item--has-children .mobile-nav__list--grandchild {
    margin-top: 20px; }

.mobile-nav__item--grandchild {
  margin-bottom: 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mobile-nav__item--grandchild {
      margin-bottom: 25px; } }
  .mobile-nav__item--grandchild:last-child {
    margin-bottom: 0; }

.mobile-nav__link--primary,
.mobile-nav__title {
  font-family: "SangBleuSerifLight", serif;
  font-size: 1.5rem;
  line-height: 1; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mobile-nav__link--primary,
    .mobile-nav__title {
      font-size: 2rem;
      line-height: 1.13; } }

.mobile-nav__link--secondary,
.mobile-nav__link--grandchild {
  font-size: 0.75rem;
  line-height: 1.14;
  letter-spacing: 2px;
  color: black;
  text-transform: uppercase; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mobile-nav__link--secondary,
    .mobile-nav__link--grandchild {
      letter-spacing: 2px; } }

.mobile-nav__link .icon,
.mobile-nav__title .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  fill: #a3d1ba;
  color: #a3d1ba; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mobile-nav__link .icon,
    .mobile-nav__title .icon {
      width: 15px; } }

.mobile-nav__link--primary .icon {
  right: -25px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mobile-nav__link--primary .icon {
      right: -40px; } }

.mobile-nav__title .icon {
  left: -25px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mobile-nav__title .icon {
      left: -40px; } }

.mobile-nav--mega-menu .mega-menu__action {
  margin-bottom: 50px; }

/*==============================================================================
  #AJAX CART
==============================================================================*/
/**
 * Empty Cart styling
 */
.ajax-cart__empty {
  margin: 50px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .ajax-cart__empty {
      margin: 65px 0; } }
  @media only screen and (min-width: 1025px) {
    .ajax-cart__empty {
      margin: 35px 0; } }

.ajax-cart__empty p {
  margin-bottom: 20px; }

.ajax-cart__count {
  text-align: center;
  margin: 50px 0 35px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .ajax-cart__count {
      margin: 65px 0 24px; } }
  @media only screen and (min-width: 1025px) {
    .ajax-cart__count {
      margin: 35px 0; } }

/* Ajax Cart Item
  ============================================================================*/
.ajax-cart-item {
  position: relative;
  margin-bottom: 19px;
  display: flex;
  align-items: flex-start;
  font-size: 0.75rem;
  letter-spacing: 0.5px; }
  @media only screen and (min-width: 1025px) {
    .ajax-cart-item {
      font-size: 0.875rem; } }

.ajax-cart-item--first {
  border-top: 1px solid rgba(84, 53, 71, 0.2);
  padding-top: 19px;
  width: 100%; }

.ajax-cart-item--last {
  border-bottom: 1px solid rgba(84, 53, 71, 0.2);
  padding-bottom: 19px; }
  @media only screen and (max-width: 767px) {
    .ajax-cart-item--last {
      margin-bottom: 0; } }

.ajax-cart-item__image-wrapper {
  flex: 0 1 28%;
  margin-right: 20px; }
  @media only screen and (max-width: 767px) {
    .ajax-cart-item__image-wrapper {
      flex: 0 1 35.7%;
      margin-right: 16px; } }

.ajax-cart-item__image {
  width: 100%; }

.ajax-cart-item__info {
  flex: 0 1 72%; }
  @media only screen and (max-width: 767px) {
    .ajax-cart-item__info {
      flex: 0 1 64.3%; } }

.ajax-cart-item__title {
  display: inline-block;
  margin-bottom: 6px;
  padding-right: 24px; }

.ajax-cart-item__preorder {
  color: #a3d1ba; }

.ajax-cart-item__quantity {
  margin-bottom: 6px; }

.ajax-cart-item p {
  margin-bottom: 6px; }

.ajax-cart-item li {
  margin-bottom: 6px; }

.ajax-cart-item__property-list {
  list-style: none; }

.ajax-cart-item__remove {
  position: absolute;
  top: 0;
  right: 0; }

.ajax-cart-item--first .ajax-cart-item__remove {
  top: 19px; }

.ajax-cart-item__remove .icon {
  width: 10px;
  height: 10px;
  color: #a3d1ba; }

/* Ajax Cart Footer
  ============================================================================*/
.ajax-cart__subtotal {
  width: 100%;
  padding-top: 12px;
  margin-bottom: 26px;
  border-top: 1px solid rgba(84, 53, 71, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .ajax-cart__subtotal {
      padding-top: 12px;
      margin-bottom: 26px; } }
  @media only screen and (min-width: 1025px) {
    .ajax-cart__subtotal {
      padding-top: 12px;
      margin-bottom: 26px; } }

.ajax-cart__disclaimer {
  margin: 24px 0 36px;
  text-align: center; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .ajax-cart__disclaimer {
      margin: 12px 0 20px; } }
  @media only screen and (min-width: 1025px) {
    .ajax-cart__disclaimer {
      margin: 15px 0 32px; } }

@media only screen and (max-width: 767px) {
  .ajax-cart__disclaimer a {
    color: #a3d1ba; } }

/*==============================================================================
  #CART
==============================================================================*/
/**
 * Ensure cart appears to take full screen so footer only shows on scroll
 */
.template-cart main {
  min-height: 100vh; }

/* Cart Headings
  ============================================================================*/
.cart__head {
  margin-bottom: 20px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  display: flex;
  justify-content: space-between; }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .cart__head-item--product {
    width: 62.5%; } }
@media only screen and (min-width: 1025px) {
  .cart__head-item--product {
    width: 70%; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .cart__head-item--quantity {
    width: 18.75%;
    padding-left: 24px;
    margin-right: auto; } }
@media only screen and (min-width: 1025px) {
  .cart__head-item--quantity {
    width: 15%;
    padding-left: 20px;
    margin-right: auto; } }

.cart__head-item--price {
  text-align: right; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .cart__head-item--price {
      width: 18.75%; } }
  @media only screen and (min-width: 1025px) {
    .cart__head-item--price {
      width: 15%; } }

/* Cart Item
  ============================================================================*/
.cart-item {
  width: 100%;
  margin: 20px 0; }
  @media only screen and (max-width: 767px) {
    .cart-item {
      display: flex;
      justify-content: space-between; } }
  @media only screen and (min-width: 768px) {
    .cart-item {
      display: flex;
      justify-content: space-between; } }

.cart-item--first {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding-top: 20px; }
  @media only screen and (min-width: 768px) {
    .cart-item--first {
      border-top: none;
      padding-top: 0; } }

.cart-item--last {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 20px; }

/* Cart Item Image
  ============================================================================*/
.cart-item__image-wrapper {
  width: 35.7%; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .cart-item__image-wrapper {
      width: 13.39%; } }
  @media only screen and (min-width: 1025px) {
    .cart-item__image-wrapper {
      width: 15%; } }

.cart-item__image {
  width: 100%; }

.cart-item__image-link {
  display: block; }

.cart-item__image {
  display: block; }

/* Cart Item Info
  ============================================================================*/
.cart-item__info {
  display: flex;
  flex-direction: column;
  width: 64.3%;
  padding-left: 30px;
  padding-right: 30px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .cart-item__info {
      width: 49.11%; } }
  @media only screen and (min-width: 1025px) {
    .cart-item__info {
      width: 55%; } }

.cart-item__title {
  display: inline-block; }

.cart-item__preorder {
  color: #a3d1ba; }

.cart-item__variants-list {
  list-style: none; }
  @media only screen and (max-width: 767px) {
    .cart-item__variants-list {
      margin-top: auto; } }

.cart-item__property-list {
  list-style: none; }

/* Cart Item Actions
  ============================================================================*/
.quantity-selector__label {
  margin-right: 5px; }

.cart-item__quantity--large {
  margin-right: auto; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .cart-item__quantity--large {
      width: 18.75%;
      margin-right: auto;
      padding-left: 24px; } }
  @media only screen and (min-width: 1025px) {
    .cart-item__quantity--large {
      width: 15%;
      margin-right: auto;
      padding-left: 20px; } }

.cart-item__remove-wrapper--small {
  width: auto;
  align-self: flex-start;
  text-align: right; }

.cart-item__remove-wrapper--small .icon {
  width: 11px;
  height: 11px; }
  .cart-item__remove-wrapper--small .icon g#Path {
    stroke: #a3d1ba; }

.cart-item__remove-wrapper--large {
  margin-top: auto;
  line-height: 1; }

@media (-moz-touch-enabled: 0), (hover: hover) {
  [data-tooltip] {
    position: relative; }
    [data-tooltip]::before {
      position: absolute;
      content: attr(data-tooltip);
      bottom: calc(100% + 3px);
      left: 50%;
      padding: 2px 11px;
      white-space: nowrap;
      background: #000;
      color: #fff;
      font-size: 0.75rem;
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
      border-radius: 3px;
      box-shadow: 0 1px rgba(0, 0, 0, 0.065);
      transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
      z-index: 1;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%); }
    [data-tooltip]::after {
      position: absolute;
      content: '';
      left: calc(50% - 7px);
      bottom: calc(100% - 2px);
      width: 0;
      height: 0;
      border-width: 6px;
      border-style: solid;
      border-color: transparent transparent #000 #000;
      visibility: hidden;
      z-index: 1;
      opacity: 0;
      transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.1); }
    [data-tooltip]:hover::before, [data-tooltip]:hover::after {
      opacity: 1;
      visibility: visible; }

  [data-tooltip-position="bottom-left"]::before {
    top: calc(100% + 4px);
    bottom: auto;
    left: auto;
    right: -6px;
    -webkit-transform: none;
    transform: none; }
  [data-tooltip-position="bottom-left"]::after {
    top: calc(100% - 1px);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    left: calc(50% - 6px); } }
/* Cart Item Price
  ============================================================================*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .cart-item__price {
    text-align: right;
    width: 18.75%; } }
@media only screen and (min-width: 1025px) {
  .cart-item__price {
    text-align: right;
    width: 15%; } }

/* Cart Footer
  ============================================================================*/
/* Cart Summary
  ============================================================================*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .cart__note {
    padding: 24px 0; } }
@media only screen and (min-width: 1025px) {
  .cart__note {
    padding: 13px 0; } }

.cart__subtotal {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 25px 0;
  display: flex;
  justify-content: space-between; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .cart__subtotal {
      padding: 24px 0; } }
  @media only screen and (min-width: 1025px) {
    .cart__subtotal {
      padding: 13px 0; } }

/* Cart Actions
  ============================================================================*/
.cart__actions {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 30px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .cart__actions {
      border-bottom: 0;
      padding: 24px 0 28px; } }
  @media only screen and (min-width: 1025px) {
    .cart__actions {
      border-bottom: 0;
      padding: 19px 0 14px; } }

.cart__continue {
  margin-top: 35px;
  text-align: center; }
  @media only screen and (min-width: 768px) {
    .cart__continue {
      margin-top: 0; } }

/*==============================================================================
  #QUANTITY SELECTOR
==============================================================================*/
.quantity-selector {
  display: flex;
  align-items: center;
  padding: 0;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 15px; }
  .quantity-selector label {
    min-width: 118px;
    padding-right: 25px; }
  .quantity-selector input.quantity-input {
    border: 0;
    width: 60px;
    border: 0;
    text-align: center;
    background-color: transparent; }
    .quantity-selector input.quantity-input:focus {
      outline: 0 !important; }
    .quantity-selector input.quantity-input::-webkit-inner-spin-button, .quantity-selector input.quantity-input::-webkit-outer-spin-button {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      margin: 0; }
  .quantity-selector input[type=number] {
    -moz-appearance: textfield; }

.quantity-selector__label {
  display: inline-block;
  margin-right: 4px; }

.quantity-selector__button .icon {
  width: 10px;
  height: 10px;
  color: #a3d1ba; }
  @media only screen and (min-width: 1025px) {
    .quantity-selector__button .icon {
      margin-top: -2px; } }

.quantity-selector__input {
  margin: 0 5px;
  text-align: center;
  width: 40px;
  border: 0;
  border-radius: 0; }

.quantity-selector__count {
  text-align: center;
  margin: 0 5px; }

/*==============================================================================
  #BACK TO TOP
==============================================================================*/
.back-to-top__wrapper {
  margin-top: 0px;
  text-align: right; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .back-to-top__wrapper {
      margin-top: 78px; } }
  @media only screen and (min-width: 1025px) {
    .back-to-top__wrapper {
      margin-top: 94px; } }

.back-to-top {
  display: inline-block;
  margin-bottom: 15px;
  font-size: 1rem;
  line-height: 1.14;
  letter-spacing: 2.3px;
  text-transform: uppercase;
  text-align: right;
  transition: color 0.35s ease-in-out; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .back-to-top {
      margin-bottom: 29px; } }
  @media only screen and (min-width: 1025px) {
    .back-to-top {
      margin-bottom: 16px;
      font-size: 1rem;
      letter-spacing: 2.5px; } }
  .back-to-top:hover {
    color: #6bd5a0; }

.back-to-top .icon {
  fill: #a3d1ba;
  color: #a3d1ba;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  margin-top: -3px; }
  @media only screen and (min-width: 1025px) {
    .back-to-top .icon {
      width: 16px;
      height: 16px;
      margin-top: -5px; } }

/*==============================================================================
  #Sections
  - Shopify Sections structural properties
==============================================================================*/
/**
 * We use margins to add vertical space between sections
 */
.section--spacing {
  margin: 57px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .section--spacing {
      margin: 70px 0; } }
  @media only screen and (min-width: 1025px) {
    .section--spacing {
      margin: 100px 0; } }

/**
 * In some cases, it is better to use padding than margins for vertical space.
 * For example, if we want to use a background colour, or add a border between
 * sections.
 */
.section--padding {
  margin: 0;
  padding: 57px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .section--padding {
      padding: 70px 0; } }
  @media only screen and (min-width: 1025px) {
    .section--padding {
      padding: 100px 0; } }

/**
 * Add a top border to our sections. We remove margin, and use padding instead.
 */
.section--bordered {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  margin-top: 0;
  margin-bottom: 0;
  padding: 57px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .section--bordered {
      padding: 70px 0; } }
  @media only screen and (min-width: 1025px) {
    .section--bordered {
      padding: 100px 0; } }

/* Section headers
  ============================================================================*/
/**
 * Used on certain sections and pages particularly those with page hero
 * elements and further text such as collection, blog, and experiences
 * templates.
 */
.section-header {
  margin-bottom: 33px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .section-header {
      margin-bottom: 38px; } }
  @media only screen and (min-width: 1025px) {
    .section-header {
      margin-bottom: 33px; } }

.section-header--center {
  text-align: center; }

.section-header--loose {
  margin-bottom: 33px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .section-header--loose {
      margin-bottom: 70px; } }
  @media only screen and (min-width: 1025px) {
    .section-header--loose {
      margin-bottom: 100px; } }

.section-header--with-hero {
  margin-top: 50px;
  margin-bottom: 50px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .section-header--with-hero {
      margin-top: 76px;
      margin-bottom: 64px; } }
  @media only screen and (min-width: 1025px) {
    .section-header--with-hero {
      margin-top: 42px;
      margin-bottom: 80px; } }

.section-header__heading + .section-header__text {
  margin-top: 25px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .section-header__heading + .section-header__text {
      margin-top: 32px; } }
  @media only screen and (min-width: 1025px) {
    .section-header__heading + .section-header__text {
      margin-top: 42px; } }

.section-header__text {
  max-width: 720px;
  margin: 0 auto; }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .section-header__text--small {
    max-width: 480px; } }

/*==============================================================================
  #Header
==============================================================================*/
/**
 * We use a sticky header. A sticky element will stop being  sticky once it
 * reaches the bottom of its parent container. We have to apply it to the
 * outermost section class whose parent is the page container, which is why
 * we're applying sticky on `shopify-section-header` instead of the child
 * `header` class.
 *
 * 1. `position: sticky` is not fully supported. We use `stickybits` JS to mimic
 *    sticky. It turns these elements to `position: fixed`. If it falls back to
 *    fixed positioning, we need to ensure the element is full-width and has a
 *    z-index.
 */
.shopify-section--header {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  /* [1] */
  top: 0;
  /* [1] */
  left: 0;
  /* [1] */
  z-index: 10;
  /* [1] */ }

.header {
  width: 100%;
  background-color: white; }

/**
 * We use JS to check for scroll and add this class to show a minimal header.
 * 1. Reduce header height
 * 2. Hide large logo, and show small logo
 */
@media only screen and (min-width: 1025px) {
  .header--has-scrolled .header__content {
    height: 50px;
    /* [1] */ }
  .header--has-scrolled .header__logo--normal {
    opacity: 0;
    /* [2] */
    visibility: hidden; }
  .header--has-scrolled .header__logo--small {
    opacity: 1;
    /* [2] */
    visibility: visible; } }

/* Header Content
  ============================================================================*/
/**
 * 1. Set header height across breakpoints
 * 2. Ensure header content stretches full width
 * 3. Set flexbox to easily layout and align header items
 * 4. Add height transition
 */
.header__content {
  height: 60px;
  /* [1] */
  width: 100%;
  /* [2] */
  display: flex;
  /* [3] */
  align-items: center;
  justify-content: space-between;
  transition: height 0.35s ease-in-out;
  /* [4] */ }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .header__content {
      height: 80px;
      /* [1] */ } }
  @media only screen and (min-width: 1025px) {
    .header__content {
      height: 100px;
      /* [1] */ } }

/**
 * This ensures all items are equal size. We set a width on our logo item
 * to decrease the size, but still ensure the logo is centered.
 */
.header__item {
  flex: 1 1 0%; }

/* Header Primary Nav
  ============================================================================*/
/* Header Logo and Transparent Logo
  ============================================================================*/
/**
 * 1. Set maximum width of flex item container for logo. This number is based on
 *    the SVG provided in the mockups.
 * 2. Center item
 */
.header__item--logo {
  width: 100%;
  max-width: 85px;
  /* [1] */
  text-align: center;
  /* [2] */ }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .header__item--logo {
      max-width: 102px;
      /* [1] */ } }
  @media only screen and (min-width: 1025px) {
    .header__item--logo {
      max-width: 175px;
      /* [1] */ } }
  .header__item--logo svg {
    vertical-align: middle; }

/**
 * 1. Set position relative as we have a small logo absolutely positioned which
 *    will show on scroll.
 * 2. Set logo link as block element
 */
.header__logo-link {
  position: relative;
  /* [1] */
  display: block;
  /* [2] */ }

/**
 * 1. Center logo image
 * 2. Set image as block
 * 3. Set 100% width to fill container.
 */
.header__logo-image {
  margin: 0 auto;
  /* [1] */
  display: block;
  /* [2] */
  width: 100%;
  /* [3] */ }

/**
 * An absolutely positioned small logo that is hidden until scroll
 */
.header__logo--small {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 107px;
  opacity: 0;
  visibility: hidden; }
  @media only screen and (max-width: 767px) {
    .header__logo--small {
      opacity: 1;
      visibility: visible; } }

@media only screen and (max-width: 767px) {
  .header__logo--normal {
    opacity: 0; } }

/**
 * On scroll the header height reduces, and we replace a large logo with a
 * smaller logo. When scrolling back to top, this would often lead to the
 * larger logo transitioning too quickly and appearing before the header
 * height had a chance to increase back to normal.
 *
 * 1. On scroll down, transition the normal logo to hide quickly
 * 2. On scroll down, transition the small logo to show with a delay so it
 *    appears once large logo is hidden.
 * 3. On return to top, transition the small logo to hide quickly
 * 4. On return to top, transition the normal logo to show with a delay so
 *    it appears once the small logo is hidden, and the header height has
 *    fully increased
 */
.header--has-scrolled .header__logo--normal {
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; }

.header--has-scrolled .header__logo--small {
  transition: opacity 0.25s ease-in-out 0.25s, visibility 0.25s ease-in-out 0.25s; }

.header--has-not-scrolled .header__logo--small {
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; }

.header--has-not-scrolled .header__logo--normal {
  transition: opacity 0.25s ease-in-out 0.25s, visibility 0.25s ease-in-out 0.25s; }

/**
 * On the homepage we use an H1 for SEO purposes. This removes H1 styling.
 */
h1.header__logo {
  margin-bottom: 0;
  font-size: 0;
  letter-spacing: 0;
  line-height: 1; }

/* Header Secondary Nav
  ============================================================================*/
/* Header Nav
  ============================================================================*/
/**
 * General styling of header navigation elements
 */
.header-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase; }
  @media only screen and (min-width: 1025px) {
    .header-nav {
      font-size: 0.75rem; } }

.header-nav__item {
  display: inline-block; }

/**
 * 1. Add right margin to all items except the last.
 */
.header-nav__item {
  /*  @include mq($large-up) {
      margin-right: 28px;
    }
  */ }
  @media only screen and (max-width: 767px) {
    .header-nav__item {
      margin-right: 24px; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .header-nav__item {
      margin-right: 40px; } }
  .header-nav__item:last-child {
    margin-right: 0; }

/*Additional CSS*/
ul.header-nav.header-nav--inline.large-down--hide {
  display: flex;
  flex: nowrap; }

ul.header-nav.header-nav--inline.large-down--hide .header-nav__item {
  padding: 15px 14px; }

ul.header-nav.header-nav--inline.large-down--hide .header-nav__item:first-child {
  padding-left: 0; }

nav.header__secondary-nav .header-nav__item {
  margin-right: 24px; }

/*Additional CSS*/
/**
 * 1. Set block level so we can add styles to links
 */
.header-nav__link {
  display: block; }

.header-nav__link--main {
  position: relative;
  /* [1] */
  transition: color 0.35s ease-in-out; }
  @media only screen and (min-width: 1025px) {
    .header-nav__link--main {
      line-height: 100px; } }

@media only screen and (min-width: 1025px) {
  .header--has-scrolled .header-nav__link--main {
    line-height: 50px; } }

.header-nav__link--main:hover {
  color: #6bd5a0; }

/**
 * Styling of active dropdown link
 */
.header-nav__item--main--dropdown-is-open .header-nav__link--main {
  color: #6bd5a0; }

/**
 * 1. A magic number to move the search icon so it aligns with surrounding text
 */
.header-nav__item--search .icon {
  margin-top: -1px;
  /* [1] */
  margin-right: 4px;
  width: 14px;
  height: 14px; }

.shopify-section--header .icon--search {
  color: #a3d1ba; }

/* Dropdown
  ============================================================================*/
/**
 * Slide down animation
 */
@-webkit-keyframes slide-down {
  from {
    height: 0; }

  to {
    height: 380px; } }

@keyframes slide-down {
  from {
    height: 0; }

  to {
    height: 380px; } }

/**
 * Slide up animation
 */
@-webkit-keyframes slide-up {
  from {
    height: 380px; }

  to {
    height: 0; } }

@keyframes slide-up {
  from {
    height: 380px; }

  to {
    height: 0; } }

/**
 * Slide down animation for search
 */
@-webkit-keyframes slide-down-search {
  from {
    height: 0; }

  to {
    height: 100vh; } }

@keyframes slide-down-search {
  from {
    height: 0; }

  to {
    height: 100vh; } }

/**
 * Slide up animation for search
 */
@-webkit-keyframes slide-up-search {
  from {
    height: 100vh; }

  to {
    height: 0; } }

@keyframes slide-up-search {
  from {
    height: 100vh; }

  to {
    height: 0; } }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }

  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }

  to {
    opacity: 0; } }

/**
 * 1. Absolutely position dropdown below header
 * 2. Set height to 0 as we use animation to show full height using slide down
 *    animation
 */
.dropdown {
  position: absolute;
  /* [1] */
  top: 100%;
  /* [1] */
  left: 0;
  width: 100%;
  height: 0;
  /* [2] */
  background-color: white;
  color: black;
  text-align: left;
  visibility: hidden;
  -webkit-animation: slide-up 0.8s ease;
  animation: slide-up 0.8s ease;
  -webkit-transition: visibility 0.8s ease;
  transition: visibility 0.8s ease; }
  .header-nav__item--main--dropdown-is-open .dropdown {
    height: 380px;
    visibility: visible;
    -webkit-animation: slide-down 0.8s ease;
    animation: slide-down 0.8s ease;
    -webkit-transition: visibility 0.8s ease;
    transition: visibility 0.8s ease; }

.search--is-open .header-nav__link--main {
  color: #a3d1ba; }

.dropdown--search {
  height: 0;
  overflow: auto;
  -webkit-animation: slide-up-search 0.8s ease;
  animation: slide-up-search 0.8s ease;
  -webkit-transition: opacity 0.8s ease, visibility 0.8s ease;
  transition: opacity 0.8s ease, visibility 0.8s ease; }
  .search--is-open .dropdown--search {
    visibility: visible;
    height: 100vh;
    -webkit-animation: slide-down-search 0.8s ease;
    animation: slide-down-search 0.8s ease;
    -webkit-transition: opacity 0.8s ease, visibility 0.8s ease;
    transition: opacity 0.8s ease, visibility 0.8s ease; }

/**
 * Dropdown overlay styling
 */
.dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  background-color: #000;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.35s ease-in-out 0.25s, visibility 0.35s ease-in-out 0.25s;
  transition: opacity 0.35s ease-in-out 0.25s, visibility 0.35s ease-in-out 0.25s; }

.dropdown-overlay.dropdown-overlay--is-visible {
  opacity: 0.15;
  visibility: visible;
  -webkit-transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out; }

/**
 * Set padding according to design specs.
 */
.dropdown__content {
  padding: 35px 50px;
  animation: fadeOut .2s forwards;
  opacity: 0; }
  .header-nav__item--main--dropdown-is-open .dropdown__content {
    display: flex;
    animation: fadeIn .2s forwards .35s; }
  .search--is-open .dropdown__content {
    display: flex;
    animation: fadeIn .65s forwards .35s; }

/**
 * 1. Use flexbox to layout dropdown content with navigation on left and
 *    image on right.
 */
.dropdown__content {
  display: none;
  justify-content: space-between;
  flex-wrap: wrap; }

/**
 * 1. Display flex, wrap, and set to columns
 * 2. Ensure flex content is aligned to start so columns aren't spaced apart
 * 3. Set a maximum height based on 6 list items which are line height 18px +
 *    margin bottom 25px = 43px. 43px * 6 items = 268. Better to use REM for
 *    relative units.
 */
/**
* Base dropdown nav styles
*/
.dropdown-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start; }

/* Style for items that have grandchildren */
.dropdown-nav__item--has-children {
  margin-right: 2.5rem;
  margin-bottom: 1.5625rem;
  /* Change layout for child items that have grandchildren */
  /* Container for grandchild items */ }
  @media screen and (min-width: 1301px) {
    .dropdown-nav__item--has-children {
      margin-right: 3.4375rem; } }
  .dropdown-nav__item--has-children > .dropdown-nav__link {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5625rem; }
  .dropdown-nav__item--has-children > .dropdown-nav--grandchild {
    position: static;
    display: block;
    box-shadow: none;
    padding: 0; }
    .dropdown-nav__item--has-children > .dropdown-nav--grandchild .dropdown-nav__item {
      margin-bottom: 1.5625rem; }
      .dropdown-nav__item--has-children > .dropdown-nav--grandchild .dropdown-nav__item:last-child {
        margin-bottom: 0; }
    .dropdown-nav__item--has-children > .dropdown-nav--grandchild .dropdown-nav__link--grandchild {
      padding: 0; }

/* Heading style for parent items with children */
.dropdown-nav__heading {
  display: block;
  margin-bottom: 1.5625rem;
  font-family: "SangBleuSerifLight", serif;
  line-height: 1.33;
  letter-spacing: 1px;
  text-transform: uppercase; }

.dropdown--three-tier .dropdown__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between; }

.dropdown--three-tier .dropdown-nav--child {
  flex: 1;
  margin-right: 2.5rem; }

/* Layout for dropdowns that have grandchildren */
.dropdown--three-tier .dropdown-nav--child {
  flex-direction: row;
  flex-wrap: wrap;
  width: 73.5%;
  padding-right: 2.5rem; }
.dropdown--three-tier .dropdown__content {
  padding: 35px 50px; }

/* Keep original vertical layout for simple dropdowns */
.dropdown--one-tier .dropdown-nav__item,
.dropdown--two-tier .dropdown-nav__item {
  margin-right: 0;
  margin-bottom: 1.5625rem; }
  .dropdown--one-tier .dropdown-nav__item:last-child,
  .dropdown--two-tier .dropdown-nav__item:last-child {
    margin-bottom: 0; }

/* Rest of the styles remain unchanged */
.dropdown-nav__link {
  transition: color 0.35s ease-in-out; }
  .dropdown-nav__link:hover {
    color: #6bd5a0; }

.dropdown__action {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
  height: 380px;
  width: auto; }

.dropdown__image {
  height: 300px; }

.dropdown__image-link {
  height: 100%;
  width: auto; }
  @media screen and (max-width: 1300px) {
    .dropdown__image-link:first-child {
      display: none; } }

@media screen and (min-width: 1301px) and (max-width: 1420px) {
  .dropdown__action, .dropdown__image {
    height: 240px; } }
@media screen and (min-width: 1421px) and (max-width: 1510px) {
  .dropdown__action, .dropdown__image {
    height: 270px; } }
.dropdown__image {
  width: auto;
  display: block;
  object-fit: contain; }

/* old styles before horizontal imagery added
.dropdown__action {
  width: 26.5%;
}

.dropdown__image-link-content {
  opacity: 0;
  visibility: hidden;
  transition: visibility $trans, opacity $trans;
}

.dropdown__image-link--is-active .dropdown__image-link-content {
  opacity: 1;
  visibility: visible;
  transition: visibility $trans, opacity $trans;
}


.dropdown__image-link:hover {
  .dropdown__image-text {
    color: $color-hover;
  }
}

.dropdown__image-text {
  margin-top: 10px;
  font-size: rem(12);
  line-height: 1.25;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color $trans;
}
*/
.dropdown-nav__item .icon--chevron-right {
  width: 6px;
  height: 6px;
  margin-top: -2px;
  color: #a3d1ba; }
  .dropdown-nav__item .icon--chevron-right g {
    stroke-width: 1.5; }

/* Megamenu
  ============================================================================*/
/**
 * Navigation items can also have a mega menu style showing up to 4 image
 * blocks.
 */
@media only screen and (min-width: 1025px) {
  .mega-menu__content {
    padding: 35px 0;
    display: none;
    justify-content: space-between;
    margin: 0 -26px;
    animation: fadeOut .25s forwards;
    opacity: 0; }
    .header-nav__item--main--dropdown-is-open .mega-menu__content {
      display: flex;
      animation: fadeIn .65s forwards .35s; } }

.mega-menu__item {
  margin-bottom: 52px;
  text-align: center; }
  @media only screen and (min-width: 1025px) {
    .mega-menu__item {
      text-align: left;
      width: 25%;
      margin: 0 26px; } }

.mega-menu__link-wrapper {
  display: block; }

.mega-menu__heading {
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.14;
  letter-spacing: 2.3px;
  margin-bottom: 12px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mega-menu__heading {
      letter-spacing: 2px;
      margin-bottom: 23px; } }
  @media only screen and (min-width: 1025px) {
    .mega-menu__heading {
      margin-top: 12px;
      font-size: 0.75rem;
      line-height: 1.25;
      letter-spacing: 2px;
      transition: color 0.35s ease-in-out; } }

.mega-menu__text {
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.5px;
  margin-bottom: 25px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mega-menu__text {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 1025px) {
    .mega-menu__text {
      margin-top: 5px;
      font-size: 0.875rem;
      line-height: 1.57;
      letter-spacing: 0.5px;
      text-transform: none; } }

.mega-menu__heading,
.mega-menu__text,
.mega-menu__action {
  transition: color 0.5s ease-in-out; }

@media only screen and (max-width: 767px) {
  .mega-menu__image-wrapper {
    width: 54%;
    margin: 0 auto; } }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .mega-menu__image-wrapper {
    width: 36%;
    margin: 0 auto; } }

/**
 * On hover of mega menu images we zoom in using scale transform.
 * 1. Add transition for scale transform
 * 2. Set overflow hidden on image parent so the image doesn't scale beyond it's wrapper.
 * 3. Add hover transform
 */
@media only screen and (min-width: 1025px) {
  .mega-menu__image {
    transition: -webkit-transform 0.5s ease-in-out;
    /* [1] */
    transition: transform 0.5s ease-in-out;
    /* [1] */ } }

@media only screen and (min-width: 1025px) {
  .mega-menu .aspect-ratio {
    overflow: hidden;
    /* [2] */ } }

@media only screen and (min-width: 1025px) {
  .mega-menu__link-wrapper:hover .mega-menu__heading,
  .mega-menu__link-wrapper:hover .mega-menu__text {
    color: #6bd5a0; }
  .mega-menu__link-wrapper:hover .mega-menu__image {
    -webkit-transform: scale(1.3);
    /* [2] */
    transform: scale(1.3); } }

/**
 * Styling of mega menu 'View all' link
 */
.mega-menu__action {
  margin-top: 50px;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.14;
  letter-spacing: 2.3px; }
  @media only screen and (min-width: 1025px) {
    .mega-menu__action {
      margin-top: 0;
      margin-bottom: 30px;
      width: 100%;
      text-align: center;
      font-size: 0.75rem;
      line-height: 1.33;
      letter-spacing: 2px;
      text-transform: uppercase;
      opacity: 0;
      animation: fadeOut .25s forwards; }
      .header-nav__item--main--dropdown-is-open .mega-menu__action {
        animation: fadeIn .65s forwards .35s; } }
  .mega-menu__action:hover {
    color: #6bd5a0; }

/* Header Search
  ============================================================================*/
/**
 * On large screens, the search opens as a full screen dropdown under the
 * header.
 *
 * On mobile and tablet, the search opens in a full screen modal.
 */
/**
 * Ensure the search modal on smaller screens can be opened within the
 * menu drawer and has higher stacking context.
 */
.modal--search {
  z-index: 61; }

/**
 * Styling of dropdown search on large screens.
 * 1. Ensure minimum 100vh height
 * 2. Add scrollbars if necessary
 */
.dropdown--search .dropdown__content {
  min-height: 100vh;
  overflow: auto;
  padding-top: 100px;
  padding: 100px 122px; }

.ajax-search {
  width: 100%; }

/**
 * 1. Use flexbox to combine input and button
 */
.ajax-search__form {
  display: flex;
  /* [1] */
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5); }

.ajax-search__icon {
  padding-right: 28px; }
  .ajax-search__icon .icon {
    width: 18px;
    height: 18px; }

/**
 * 1. Make input element take up full space
 */
.ajax-search__input {
  flex: 1;
  /* [1] */
  padding: 16px 0;
  border: 0;
  font-family: "SangBleuSerifLight", serif;
  font-size: 1rem;
  line-height: 1; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .ajax-search__input {
      padding: 14px 0;
      font-size: 1.125rem;
      letter-spacing: 0.5px;
      line-height: normal; } }
  @media only screen and (min-width: 1025px) {
    .ajax-search__input {
      padding: 26px 0;
      font-size: 2rem;
      letter-spacing: 0.5px;
      line-height: 1.25; } }
  .ajax-search__input::-webkit-input-placeholder {
    color: black;
    opacity: 0.3;
    text-transform: none; }
  .ajax-search__input::-moz-placeholder {
    color: black;
    opacity: 0.3;
    text-transform: none; }
  .ajax-search__input:-ms-input-placeholder {
    color: black;
    opacity: 0.3;
    text-transform: none; }
  .ajax-search__input::placeholder {
    color: black;
    opacity: 0.3;
    text-transform: none; }

/**
 * Styling of search button icon
 */
.ajax-search__btn {
  color: #a3d1ba; }
  .ajax-search__btn .icon {
    width: 18px;
    height: 18px; }

/**
 * Styling of search results container
 */
.ajax-search__results-container {
  margin-top: 60px;
  width: 100%;
  text-transform: none;
  margin-bottom: 60px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .ajax-search__results-container {
      margin-top: 60px; } }
  @media only screen and (min-width: 1025px) {
    .ajax-search__results-container {
      margin-top: 100px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .modal--search .modal__body {
    padding-left: 30px;
    padding-right: 30px; }

  .modal--search .modal__title {
    margin-top: 96px;
    text-align: center;
    margin-bottom: 66px; } }
/*==============================================================================
  #FOOTER
==============================================================================*/
.footer {
  background-color: black;
  color: white; }

.footer a {
  color: white;
  transition: color 0.35s ease-in-out; }

.footer .link:hover {
  color: #6bd5a0; }

/* Footer content
  ============================================================================*/
/**
 * On small screens, the footer content stacks.
 * 1. On larger screens, use flexbox for layout.
 */
.footer__content {
  padding-top: 40px; }
  @media only screen and (min-width: 768px) {
    .footer__content {
      padding-top: 30px;
      display: flex;
      /* [1] */
      justify-content: space-between; } }
  @media only screen and (min-width: 1025px) {
    .footer__content {
      padding-top: 40px; } }

/* Footer item contact
  ============================================================================*/
/**
 * 1. Set 50% width on larger screens
 * 2. Set to shrink and not grow on large screens
 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .footer__item--contact {
    width: 50%;
    /* [1] */ } }
@media only screen and (min-width: 1025px) {
  .footer__item--contact {
    flex: 0 1 50%;
    /* [2] */ } }

@media only screen and (max-width: 767px) {
  body.template-collection .back-to-top {
    padding-top: 80px; } }

.footer__contact {
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 1.25px;
  text-transform: uppercase; }
  @media only screen and (max-width: 767px) {
    .footer__contact {
      margin-bottom: 13px; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__contact {
      font-size: 0.875rem;
      line-height: 1.5;
      letter-spacing: 2px; } }
  @media only screen and (min-width: 1025px) {
    .footer__contact {
      font-size: 0.75rem;
      line-height: 1.5;
      letter-spacing: 2px; } }

.footer__contact-logo {
  text-align: center;
  margin-bottom: 15px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__contact-logo {
      text-align: left; } }
  @media only screen and (min-width: 1025px) {
    .footer__contact-logo {
      text-align: left; } }

.theme-berkeley .footer__contact-logo svg,
.theme-connaught .footer__contact-logo svg {
  width: 156px;
  height: 41px; }
  @media only screen and (min-width: 1025px) {
    .theme-berkeley .footer__contact-logo svg,
    .theme-connaught .footer__contact-logo svg {
      width: 160px;
      height: 42px; } }

.theme-claridges .footer__contact-logo svg {
  width: 153px;
  height: 58px; }
  @media only screen and (min-width: 1025px) {
    .theme-claridges .footer__contact-logo svg {
      width: 153px;
      height: 58px; } }

.footer__contact-copy {
  text-align: center; }
  @media only screen and (min-width: 768px) {
    .footer__contact-copy {
      text-align: left; } }

.footer__contact-address {
  margin-bottom: 15px; }
  .footer__contact-address p {
    margin-bottom: 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__contact-address {
      margin-bottom: 20px; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__contact-address {
      margin-bottom: 16px; } }

/* Footer item links
  ============================================================================*/
/**
 * On mobile and tablet we show collapsibles for links. On larger screens,
 * we show 3 columns for links.
 */
/**
 * 1. Set 50% width
 * 2. Set to grow but not shrink on large screens
 * 3. Set as flexbox container so we layout link columns in a row
 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .footer__item--links {
    width: 50%; } }
@media only screen and (min-width: 1025px) {
  .footer__item--links {
    margin-top: 42px;
    /* Matches height of SVG footer logo */
    flex: 1 0 50%;
    display: flex; }
    .theme-claridges .footer__item--links {
      margin-top: 58px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .footer__collapsibles {
    margin-top: 54px; }
    .theme-claridges .footer__collapsibles {
      margin-top: 68px; } }

.footer__collapsibles .collapsible {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); }

/**
 * Styling of collapsibles heading
 * 1. Use flexbox to align heading left and icon right
 */
.footer__collapsibles .collapsible__heading {
  display: flex;
  /* [1] */
  justify-content: space-between;
  align-items: center;
  padding: 27px 0;
  width: 100%;
  font-family: "SangBleuSerifLight", serif;
  font-size: 0.75rem;
  line-height: 1.14;
  text-transform: uppercase; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__collapsibles .collapsible__heading {
      padding: 19px 0;
      font-size: 1.125rem;
      line-height: normal;
      letter-spacing: 0.5px; } }

.footer__collapsibles .collapsible__panel-content {
  padding-bottom: 27px; }
  @media only screen and (max-width: 767px) {
    .footer__collapsibles .collapsible__panel-content {
      padding-top: 8px; } }

.footer__collapsibles .collapsible .icon {
  color: white; }

.footer .dash {
  color: white; }

/**
 * 1. Ensure footer links are aligned to the right
 */
.footer__links {
  padding-right: 60px; }
  .footer__links:last-child {
    padding-right: 0; }
  @media only screen and (min-width: 1025px) {
    .footer__links {
      margin-left: auto;
      /* [1] */ } }

.footer__heading {
  display: block;
  margin-bottom: 25px;
  font-size: 1rem;
  font-family: "SangBleuSerifLight", serif;
  line-height: 1.33;
  letter-spacing: 1px;
  text-transform: uppercase; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__heading {
      font-size: 1.125rem; } }
  @media only screen and (min-width: 1025px) {
    .footer__heading {
      font-size: 0.75rem; } }

.footer-linklist {
  list-style: none; }

.footer-linklist__item {
  margin-bottom: 24px;
  font-size: 0.75rem;
  letter-spacing: 1.25px;
  text-transform: uppercase; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer-linklist__item {
      margin-bottom: 24px;
      font-size: 0.875rem;
      letter-spacing: 2px; } }
  @media only screen and (min-width: 1025px) {
    .footer-linklist__item {
      margin-bottom: 24px;
      font-size: 0.75rem;
      letter-spacing: 2px; } }
  .footer-linklist__item:last-child {
    margin-bottom: 0; }

.footer-linklist--contact .footer-linklist__item {
  margin-bottom: 10px; }
  .footer-linklist--contact .footer-linklist__item:last-child {
    margin-bottom: 0; }
  @media only screen and (min-width: 1025px) {
    .footer-linklist--contact .footer-linklist__item {
      margin-bottom: 16px; } }

/* Footer social
  ============================================================================*/
/**
 * On widescreen we make sure social icons in the footer are left aligned
 * with the final footer link column (Maybourne Hotel Group). The footer
 * link column is the child of a flex parent. We take the pixel width of
 * this column at widescreen sizes and use for max-width below.
 */
.footer__social {
  padding: 44px 0;
  text-align: center; }
  @media only screen and (min-width: 768px) {
    .footer__social {
      padding: 48px 0;
      text-align: right; } }
  @media only screen and (min-width: 1025px) {
    .footer__social {
      padding: 52px 0; } }
  @media only screen and (min-width: 1440px) {
    .footer__social {
      max-width: 267px;
      margin-left: auto; } }

.footer__social .inline-list {
  margin: 0; }
  @media only screen and (min-width: 1440px) {
    .footer__social .inline-list {
      display: flex;
      justify-content: end; } }

.footer__social .inline-list__item {
  margin: 0 20px; }
  @media only screen and (min-width: 1025px) {
    .footer__social .inline-list__item {
      margin: 0 16px; } }
  .footer__social .inline-list__item:first-child {
    margin-left: 0; }
  .footer__social .inline-list__item:last-child {
    margin-right: 0; }

.footer__social .icon {
  width: 24px;
  height: 24px; }
  @media only screen and (min-width: 1025px) {
    .footer__social .icon {
      width: 18px;
      height: 18px; } }

/* Footer aside
  ============================================================================*/
.footer__aside {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .footer__aside .o-container {
    width: 100%; }
  @media only screen and (min-width: 1025px) {
    .footer__aside {
      padding: 24px 50px; } }

.footer__legal-list {
  display: block;
  list-style: none;
  padding: 28px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  font-size: 0.5625rem;
  line-height: 1.4;
  letter-spacing: 1.25px;
  text-align: center; }
  @media only screen and (min-width: 768px) {
    .footer__legal-list {
      order: 1;
      padding: 0;
      border-top: 0;
      font-size: 0.875rem;
      line-height: 1.33;
      letter-spacing: 2px; } }
  @media only screen and (min-width: 1025px) {
    .footer__legal-list {
      font-size: 0.75rem;
      line-height: 1.25; } }

.footer__legal-item {
  display: inline-block;
  margin: 5px 8px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__legal-item {
      margin: 5px 20px; }
      .footer__legal-item:last-child {
        margin-right: 0; } }
  @media only screen and (min-width: 1025px) {
    .footer__legal-item {
      margin: 5px 13px; }
      .footer__legal-item:last-child {
        margin-right: 0; } }
  @media only screen and (min-width: 1440px) {
    .footer__legal-item {
      margin: 5px 8px; }
      .footer__legal-item:last-child {
        margin-right: 0; } }

@media only screen and (max-width: 767px) {
  .footer__legal-item:first-child {
    margin-left: 0; }
  .footer__legal-item:last-child {
    margin-right: 0; } }

.footer__copyright {
  padding: 0;
  text-align: center;
  font-size: 0.625rem;
  line-height: 2.4;
  letter-spacing: 0.36px;
  color: rgba(255, 255, 255, 0.5); }
  .footer__copyright.footer_txt {
    padding: 0; }
  @media only screen and (min-width: 768px) {
    .footer__copyright {
      padding: 0;
      border-top: 0;
      text-align: left;
      font-size: 0.75rem;
      line-height: 1.67;
      letter-spacing: 0.43px; } }
  @media only screen and (min-width: 1025px) {
    .footer__copyright {
      font-size: 0.875rem;
      line-height: 1.71;
      letter-spacing: 0.5px; } }

/*==============================================================================
  #Announcement Bar
==============================================================================*/
.announcement-bar {
  position: relative;
  display: none;
  padding: 9px 0;
  font-size: 0.625rem;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase; }
  .announcement-bar a {
    text-decoration: underline; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .announcement-bar {
      padding: 7px 0; } }
  @media only screen and (min-width: 1025px) {
    .announcement-bar {
      padding: 7px 0; } }

.announcement-bar--is-active {
  display: block; }

.theme-berkeley .announcement-bar__link,
.theme-claridges .announcement-bar__link {
  transition: color 0.35s ease-in-out; }
  .theme-berkeley .announcement-bar__link:hover,
  .theme-claridges .announcement-bar__link:hover {
    color: #6bd5a0; }

.theme-connaught .announcement-bar__link {
  border-color: transparent;
  transition: border-color 0.35s ease-in-out;
  padding-bottom: 1px; }
  .theme-connaught .announcement-bar__link:hover {
    border-color: rgba(255, 255, 255, 0.3); }

.announcement-bar__close {
  position: absolute;
  right: 10px;
  top: 8px;
  cursor: pointer; }
  .announcement-bar__close .icon {
    width: 10px;
    height: 10px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .announcement-bar__close {
      top: 6px;
      right: 30px; } }
  @media only screen and (min-width: 1025px) {
    .announcement-bar__close {
      top: 6px;
      right: 10px; } }

/*==============================================================================
  #Cookies Bar
==============================================================================*/
.cookies-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  opacity: 0;
  visibility: hidden;
  /* [2] */
  width: 100%;
  padding: 10px 45px;
  font-size: 0.625rem;
  letter-spacing: 1px;
  line-height: 1.6;
  text-transform: uppercase;
  text-align: left;
  background-color: #f6f6f6;
  color: black;
  -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out;
  /* [7] */
  transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .cookies-bar {
      text-align: center;
      padding: 12px 100px; } }
  @media only screen and (min-width: 1025px) {
    .cookies-bar {
      text-align: center;
      padding: 12px 100px; } }

.cookies-bar--is-active {
  opacity: 1;
  visibility: visible; }

.cookies-bar__close {
  display: block;
  cursor: pointer; }
  @media only screen and (min-width: 768px) {
    .cookies-bar__close {
      position: absolute;
      right: 30px;
      top: 12px; } }
  @media only screen and (min-width: 1025px) {
    .cookies-bar__close {
      right: 48px; } }

.cookies-bar__content {
  margin: 0 auto; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .cookies-bar__content {
      max-width: 420px; } }

#onetrust-banner-sdk.otFlat {
  padding: 0 20px !important; }

#onetrust-banner-sdk.vertical-align-content #onetrust-button-group-parent {
  text-align: right; }
#onetrust-banner-sdk button {
  font-family: "Lato", "Trebuchet MS", sans-serif !important; }

#onetrust-banner-sdk button {
  color: black !important;
  border: none !important; }
  #onetrust-banner-sdk button:hover {
    background: #6bd5a0 !important;
    opacity: 1 !important; }
  #onetrust-banner-sdk button.cookie-setting-link {
    color: black !important; }
    #onetrust-banner-sdk button.cookie-setting-link:hover {
      background: none !important; }

#onetrust-pc-sdk #accept-recommended-container button {
  float: right !important; }
#onetrust-pc-sdk .save-preference-btn-handler {
  float: right !important; }
#onetrust-pc-sdk #manage-cookies-text {
  font-family: "SangBleuSerifLight", serif !important; }

#onetrust-pc-sdk #pc-policy-text a {
  color: black !important; }
#onetrust-pc-sdk .category-host-list-container a {
  color: black !important;
  text-decoration: underline; }
  #onetrust-pc-sdk .category-host-list-container a:hover {
    color: black !important; }

#onetrust-consent-sdk #onetrust-pc-sdk button {
  color: black !important;
  font-family: "Lato", "Trebuchet MS", sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  padding: 14px 20px 15px; }
  #onetrust-consent-sdk #onetrust-pc-sdk button:hover {
    /*background: $color-button-bg-primary-hover!important;*/
    opacity: 1 !important; }
  #onetrust-consent-sdk #onetrust-pc-sdk button.close-icon {
    color: black !important; }
    #onetrust-consent-sdk #onetrust-pc-sdk button.close-icon:hover {
      background: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/close.svg?v=5641") !important;
      background-size: 100% !important;
      width: 10px;
      height: 10px; }

#onetrust-pc-sdk h3,
#onetrust-pc-sdk h4,
#onetrust-pc-sdk #pc-title {
  font-family: "SangBleuSerifLight", serif !important;
  color: #ad924e !important;
  font-weight: normal !important; }

#onetrust-pc-sdk h3 {
  font-family: "Lato", "Trebuchet MS", sans-serif !important; }
#onetrust-pc-sdk .category-item p {
  font-family: "Lato", "Trebuchet MS", sans-serif !important;
  font-size: 16px !important; }

#onetrust-pc-sdk #hosts-list-container .host-notice h4 {
  font-family: "Lato", "Trebuchet MS", sans-serif !important;
  font-size: 14px !important; }
#onetrust-pc-sdk .accordion-text .ot-switch {
  width: 55px !important;
  overflow: hidden; }
#onetrust-pc-sdk .accordion-text .switch-label {
  height: 23px;
  position: relative; }
#onetrust-pc-sdk .accordion-text.category-item {
  margin-top: 30px !important; }
  #onetrust-pc-sdk .accordion-text.category-item .switch-inner {
    display: flex !important;
    align-items: center; }
  #onetrust-pc-sdk .accordion-text.category-item .switch-nob {
    right: 34px !important;
    border: none;
    top: 3px;
    margin: 0; }
#onetrust-pc-sdk .switch-checkbox:checked + .switch-label .switch-nob {
  right: 4px !important;
  top: 3px; }
#onetrust-pc-sdk .switch-checkbox:checked + .switch-label .switch-inner:after {
  right: -100%; }

#onetrust-pc-sdk .switch-inner:before {
  content: "ON" !important;
  padding-left: 7px;
  font-size: 13px;
  line-height: 23px;
  display: flex !important;
  align-items: center;
  height: 24px !important; }
#onetrust-pc-sdk .switch-inner:after {
  content: "OFF";
  position: absolute;
  right: 1px;
  top: 6px;
  font-size: 13px;
  line-height: 100%;
  height: 24px !important; }

.otFlat#onetrust-banner-sdk {
  overflow: hidden !important; }

.pc-logo-container {
  background: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/svg-logo-claridges.svg?v=52271321611190987021771411948") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 120px !important;
  background-size: 100% !important;
  height: 55px !important;
  margin: 0 auto 35px !important; }

.pc-logo {
  visibility: hidden;
  background: none !important; }

/* cookie policy page */
#cookie-policy-title {
  display: none; }

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy #cookie-policy-description,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-cookie-policy-group-desc,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-table-header,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy span {
  font-family: "Lato", "Trebuchet MS", sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.57;
  letter-spacing: 0.5px;
  color: black !important; }

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-cookie-policy-group {
  font-family: "SangBleuSerifLight", serif !important;
  font-weight: normal !important; }

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a, #ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a:hover {
  background: none; }

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy table {
  border-radius: 0px; }

#onetrust-banner-sdk a, #onetrust-pc-sdk a, #ot-sdk-cookie-policy a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.5) !important;
  transition: color 0.35s ease-in-out;
  font-weight: normal !important; }

#onetrust-banner-sdk a:hover, #onetrust-pc-sdk a:hover, #ot-sdk-cookie-policy a:hover {
  color: #6bd5a0 !important; }

.ot-sdk-show-settings {
  font-weight: 400;
  font-size: 14px;
  padding: 14px 20px 15px !important;
  text-transform: uppercase;
  letter-spacing: .08em; }

/*==============================================================================
  #Popup
==============================================================================*/
.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out; }
  .popup::before {
    position: fixed;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none; }

.popup.popup--is-visible {
  visibility: visible;
  opacity: 1; }
  .popup.popup--is-visible .popup__content {
    transition: visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1); }

.popup__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-height: 100vh;
  background-color: white;
  overflow: auto;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: visibility 0.35s ease-in-out;
  width: 280px;
  max-width: 280px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .popup__content {
      width: 708px;
      max-width: 708px; } }
  @media only screen and (min-width: 1025px) {
    .popup__content {
      max-width: 826px;
      width: 826px;
      height: auto; } }

.popup__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  cursor: pointer;
  line-height: 1; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .popup__close {
      top: 27px;
      right: 27px; } }
  @media only screen and (min-width: 1025px) {
    .popup__close {
      top: 33px;
      right: 33px; } }

.popup__close .icon {
  width: 11px;
  height: 11px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .popup__close .icon {
      width: 14px;
      height: 14px; } }
  @media only screen and (min-width: 1025px) {
    .popup__close .icon {
      width: 18px;
      height: 18px; } }

.popup__body {
  padding: 46px 20px 30px; }
  @media only screen and (min-width: 768px) {
    .popup__body {
      padding: 0;
      display: flex;
      align-items: center; } }

.popup__image-wrapper {
  width: 48%;
  height: 100%; }
  @media only screen and (min-width: 1025px) {
    .popup__image-wrapper {
      width: 45%; } }

.popup__image {
  width: 100%;
  height: 100%;
  object-fit: cover; }

@media only screen and (min-width: 768px) {
  .popup__info {
    width: 52%;
    padding-right: 24px; } }
@media only screen and (min-width: 1025px) {
  .popup__info {
    width: 55%;
    padding: 30px 50px; } }

.popup__heading {
  font-size: 1.5rem;
  line-height: 1.17; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .popup__heading {
      font-size: 1.875rem;
      line-height: 1.25; } }
  @media only screen and (min-width: 1025px) {
    .popup__heading {
      font-size: 1.75rem;
      line-height: 1.14;
      letter-spacing: 0.7px; } }

.popup-newsletter__form {
  margin-top: 36px;
  margin-bottom: 15px; }

.popup-newsletter__input {
  width: 100%;
  font-size: 1rem;
  letter-spacing: 0.5px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid; }
  .popup-newsletter__input::-webkit-input-placeholder {
    color: black;
    opacity: 0.5; }
  .popup-newsletter__input::-moz-placeholder {
    color: black;
    opacity: 0.5; }
  .popup-newsletter__input:-ms-input-placeholder {
    color: black;
    opacity: 0.5; }
  .popup-newsletter__input::placeholder {
    color: black;
    opacity: 0.5; }

.popup-newsletter__btn {
  margin-top: 20px; }

.popup__note,
.popup__note p {
  margin-top: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.43px;
  color: rgba(0, 0, 0, 0.5); }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .popup__note,
    .popup__note p {
      font-size: 0.625rem;
      line-height: 1.6;
      letter-spacing: 0.36px; } }
  @media only screen and (min-width: 1025px) {
    .popup__note,
    .popup__note p {
      font-size: 0.75rem;
      line-height: 1.33;
      letter-spacing: 0.43px;
      font-style: italic; } }

.popup__note a {
  transition: color 0.35s ease-in-out; }
  .popup__note a:hover {
    color: #6bd5a0; }
  @media only screen and (max-width: 767px) {
    .popup__note a {
      color: #a3d1ba; } }

/*==============================================================================
  #SPLIT
  - Used in homepage Split Panels section
==============================================================================*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .split {
    padding: 0 24px; } }
@media only screen and (min-width: 1025px) {
  .split {
    padding: 0 122px; } }

/**
 * 1. Set to flex on medium and larger screens
 * 2. Vertically center elements on medium screens
 */
.split__content {
  display: flex;
  flex-wrap: wrap; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .split__content {
      align-items: center; } }

/* Split Item
  ============================================================================*/
@media only screen and (max-width: 767px) {
  .split__item {
    width: 100%; } }

/**
 * Styling of single image item
 */
.split__item--image {
  margin-bottom: 34px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .split__item--image {
      margin-bottom: 0;
      width: 50%;
      padding-left: 24px; } }
  @media only screen and (min-width: 1025px) {
    .split__item--image {
      margin-bottom: 0;
      width: 50%; } }

@media only screen and (min-width: 768px) {
  .split--reverse .split__item--image {
    order: -1; } }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .split--reverse .split__item--image {
    padding-left: 0;
    padding-right: 24px; } }

/**
 * Styling of item with text and image
 */
@media only screen and (max-width: 767px) {
  .split__item--text-and-image {
    order: 1; } }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .split__item--text-and-image {
    width: 50%; } }
@media only screen and (min-width: 1025px) {
  .split__item--text-and-image {
    width: 50%; } }

/**
 * Styling of single item image that wraps for medium screens only
 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .split__item--image-wrap {
    margin-top: 70px;
    width: 100%; } }

/* Split Image Wrapper
  ============================================================================*/
.split__image-wrapper {
  width: 100%; }

/**
 * Styling of single image wrapper
 */
.split__image-wrapper--single-image {
  width: 73.75%;
  margin-left: auto; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .split__image-wrapper--single-image {
      width: 100%;
      margin-left: 0; } }
  @media only screen and (min-width: 1025px) {
    .split__image-wrapper--single-image {
      width: 100%;
      margin-left: 0;
      padding-left: 74px; } }

.split--reverse .split__image-wrapper--single-image {
  margin-right: auto;
  margin-left: 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .split--reverse .split__image-wrapper--single-image {
      margin-left: auto;
      margin-right: 0; } }
  @media only screen and (min-width: 1025px) {
    .split--reverse .split__image-wrapper--single-image {
      margin-left: auto;
      margin-right: 0;
      padding-left: 0;
      padding-right: 74px; } }

/**
 * Styling of image with text image wrapper
 */
@media only screen and (min-width: 1025px) {
  .split__image-wrapper--with-text {
    width: 76.92%;
    margin-right: auto; } }

@media only screen and (min-width: 1025px) {
  .split--reverse .split__image-wrapper--with-text {
    margin-left: auto;
    margin-right: 0; } }

/**
 * Styling of medium screen image wrap wrapper
 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .split__image-wrapper--image-wrap {
    width: 52.5%;
    margin-right: auto; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .split--reverse .split__image-wrapper--image-wrap {
    margin-left: auto;
    margin-right: 0; } }

/* Split Text
  ============================================================================*/
.split__text {
  padding: 0 20px;
  margin-bottom: 58px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .split__text {
      padding: 0; } }
  @media only screen and (min-width: 1025px) {
    .split__text {
      padding: 0;
      margin: 72px 0 79px; } }

.split__heading {
  font-family: "SangBleuSerifLight", serif;
  font-size: 1.875rem;
  line-height: 1.17;
  text-transform: none; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .split__heading {
      line-height: 1.33; } }
  @media only screen and (min-width: 1025px) {
    .split__heading {
      font-size: 2.5rem;
      line-height: 1.25; } }

.split__link-wrapper {
  margin-top: 20px; }
  @media only screen and (min-width: 1025px) {
    .split__link-wrapper {
      margin-top: 29px; } }

/**
 * Uses link--special class. Custom font properties.
 */
/* Split Image
  ============================================================================*/
.split__image {
  width: 100%; }

/*==============================================================================
  #Featured Split
  - Used in featured product homepage section
==============================================================================*/
/**
 * On tablet and larger screens, the heading is placed above the
 * main Flex content.
 */
.featured-split__single-heading {
  width: 50%;
  margin-left: auto;
  padding-left: 24px;
  padding-right: 30px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .featured-split__single-heading {
      padding-left: 15px;
      padding-right: 30px; } }
  @media only screen and (min-width: 1025px) {
    .featured-split__single-heading {
      padding-left: 61px;
      padding-right: 122px; } }

.featured-split--reverse .featured-split__single-heading {
  margin-right: auto;
  margin-left: 0;
  padding-right: 24px;
  padding-left: 30px; }
  @media only screen and (min-width: 1025px) {
    .featured-split--reverse .featured-split__single-heading {
      padding-right: 74px;
      padding-left: 122px; } }

@media only screen and (min-width: 768px) {
  .featured-split__single-heading .featured-split__heading {
    padding: 0;
    margin-bottom: 0; } }

/**
 * 1. Set to flex on medium and larger screens
 */
@media only screen and (min-width: 768px) {
  .featured-split__content {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap; } }

/* Featured split Item
  ============================================================================*/
/**
 * Styling of single image item
 */
.featured-split__item--image {
  margin-bottom: 40px;
  padding: 0 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .featured-split__item--image {
      margin-bottom: 0;
      width: 50%;
      padding-left: 0;
      padding-right: 15px; } }
  @media only screen and (min-width: 1025px) {
    .featured-split__item--image {
      margin-bottom: 0;
      width: 50%;
      padding-left: 0;
      padding-right: 61px; } }
  @media only screen and (min-width: 1680px) {
    .featured-split__item--image {
      padding-left: 122px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .featured-split--reverse .featured-split__item--image {
    margin-bottom: 0;
    width: 50%;
    padding-right: 0;
    padding-left: 15px; } }
@media only screen and (min-width: 1025px) {
  .featured-split--reverse .featured-split__item--image {
    margin-bottom: 0;
    width: 50%;
    padding-right: 0;
    padding-left: 61px; } }
@media only screen and (min-width: 1680px) {
  .featured-split--reverse .featured-split__item--image {
    padding-right: 122px; } }

/**
 * Styling of item with text and image
 */
.featured-split__item--text-and-image {
  padding: 0 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .featured-split__item--text-and-image {
      margin-top: 50px;
      padding-left: 15px;
      padding-right: 30px;
      width: 50%; } }
  @media only screen and (min-width: 1025px) {
    .featured-split__item--text-and-image {
      margin-top: 74px;
      padding-left: 61px;
      padding-right: 122px;
      width: 50%; } }

@media only screen and (min-width: 768px) {
  .featured-split--reverse .featured-split__item--text-and-image {
    order: -1; } }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .featured-split--reverse .featured-split__item--text-and-image {
    padding-right: 15px;
    padding-left: 30px;
    width: 50%; } }
@media only screen and (min-width: 1025px) {
  .featured-split--reverse .featured-split__item--text-and-image {
    padding-right: 61px;
    padding-left: 122px;
    width: 50%; } }

/* Featured split Image Wrapper
  ============================================================================*/
.featured-split__image-wrapper {
  width: 100%; }

/**
 * Styling of single image wrapper
 */
.featured-split__image-wrapper--single-image {
  width: 100%; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .featured-split__image-wrapper--single-image {
      width: 100%; } }
  @media only screen and (min-width: 1025px) {
    .featured-split__image-wrapper--single-image {
      width: 100%; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .featured-split--reverse .featured-split__image-wrapper--single-image {
    margin-left: auto;
    margin-right: 0; } }
@media only screen and (min-width: 1025px) {
  .featured-split--reverse .featured-split__image-wrapper--single-image {
    margin-left: auto;
    margin-right: 0; } }

/**
 * Styling of image with text image wrapper
 */
.featured-split__image-wrapper--with-text {
  margin-bottom: 36px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .featured-split__image-wrapper--with-text {
      margin-bottom: 53px; } }
  @media only screen and (min-width: 1025px) {
    .featured-split__image-wrapper--with-text {
      margin-bottom: 80px;
      width: 100%;
      margin-left: auto; } }

@media only screen and (min-width: 1025px) {
  .featured-split--reverse .featured-split__image-wrapper--with-text {
    margin-left: 0;
    margin-right: auto; } }

/* Featured split Text
  ============================================================================*/
.featured-split__heading {
  margin-bottom: 24px; }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .featured-split__text {
    padding: 0;
    max-width: 90.2%;
    margin-left: auto; } }
@media only screen and (min-width: 1025px) {
  .featured-split__text {
    padding: 0;
    margin: 80px 0 0;
    max-width: 85.18%;
    margin-left: auto; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .featured-split--reverse .featured-split__text {
    margin-left: 0;
    margin-right: auto; } }
@media only screen and (min-width: 1025px) {
  .featured-split--reverse .featured-split__text {
    margin-left: 0;
    margin-right: auto; } }

.featured-split__link-wrapper {
  margin-top: 36px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .featured-split__link-wrapper {
      margin-top: 22px; } }
  @media only screen and (min-width: 1025px) {
    .featured-split__link-wrapper {
      margin-top: 40px; } }

/**
 * Uses link--special class. We adjust some font properties.
 */
/* Featured split Image
  ============================================================================*/
.featured-split__image {
  width: 100%; }

/*==============================================================================
  #Featured Split Icon
  - Used in featured product homepage section including 3rd image for icon
==============================================================================*/
/**
 * On tablet and larger screens, the heading is placed above the
 * main Flex content.
 */
.featured-split-icon__single-heading {
  width: 50%;
  padding-left: 12px;
  margin-left: auto; }
  @media only screen and (min-width: 1025px) {
    .featured-split-icon__single-heading {
      padding-left: 61px; } }

.featured-split-icon--reverse .featured-split-icon__single-heading {
  margin-right: auto;
  margin-left: 0;
  padding-left: 0;
  padding-right: 12px; }
  @media only screen and (min-width: 1025px) {
    .featured-split-icon--reverse .featured-split-icon__single-heading {
      padding-left: 0;
      padding-right: 61px; } }

/**
 * Mobile title
 */
@media only screen and (max-width: 767px) {
  .featured-split-icon__heading {
    margin-bottom: 34px; } }

/**
 * 1. Set to flex on medium and larger screens
 */
@media only screen and (min-width: 768px) {
  .featured-split-icon__content {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap; } }

/* Featured split Item
  ============================================================================*/
/**
 * Styling of panel with portrait image and text
 */
.featured-split-icon__item--image-with-text {
  margin-bottom: 40px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .featured-split-icon__item--image-with-text {
      margin-bottom: 0;
      width: 50%;
      padding-right: 12px; } }
  @media only screen and (min-width: 1025px) {
    .featured-split-icon__item--image-with-text {
      margin-bottom: 0;
      width: 50%;
      padding-right: 61px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .featured-split-icon--reverse .featured-split-icon__item--image-with-text {
    margin-bottom: 0;
    width: 50%;
    padding-right: 0;
    padding-left: 12px; } }
@media only screen and (min-width: 1025px) {
  .featured-split-icon--reverse .featured-split-icon__item--image-with-text {
    margin-bottom: 0;
    width: 50%;
    padding-right: 0;
    padding-left: 61px; } }

/**
 * Styling of panel with image and icon
 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .featured-split-icon__item--image-and-icon {
    margin-top: 60px;
    padding-left: 12px;
    width: 50%; } }
@media only screen and (min-width: 1025px) {
  .featured-split-icon__item--image-and-icon {
    margin-top: 54px;
    padding-left: 61px;
    width: 50%; } }

@media only screen and (min-width: 768px) {
  .featured-split-icon--reverse .featured-split-icon__item--image-and-icon {
    order: -1; } }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .featured-split-icon--reverse .featured-split-icon__item--image-and-icon {
    padding-left: 0;
    padding-right: 12px;
    width: 50%; } }
@media only screen and (min-width: 1025px) {
  .featured-split-icon--reverse .featured-split-icon__item--image-and-icon {
    padding-left: 0;
    padding-right: 61px;
    width: 50%; } }

/* Featured split Image Wrapper
  ============================================================================*/
.featured-split-icon__image-wrapper {
  width: 100%; }

/**
 * Styling of portrait image wrapper
 */
.featured-split-icon__image-wrapper--portrait-image {
  width: 100%; }

/**
 * Styling of landscape image
 */
.featured-split-icon__image-wrapper--landscape-image {
  margin-bottom: 40px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .featured-split-icon__image-wrapper--landscape-image {
      margin-bottom: 53px; } }
  @media only screen and (min-width: 1025px) {
    .featured-split-icon__image-wrapper--landscape-image {
      margin-bottom: 80px; } }

.featured-split-icon__image-wrapper--icon-image {
  width: 50%;
  margin-left: auto;
  margin-bottom: 40px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .featured-split-icon__image-wrapper--icon-image {
      margin-bottom: 53px;
      width: 85.18%;
      margin-left: auto; } }
  @media only screen and (min-width: 1025px) {
    .featured-split-icon__image-wrapper--icon-image {
      width: 85.18%;
      margin-left: auto;
      margin-bottom: 80px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .featured-split-icon--reverse .featured-split-icon__image-wrapper--icon-image {
    margin-left: 0;
    margin-right: auto; } }
@media only screen and (min-width: 1025px) {
  .featured-split-icon--reverse .featured-split-icon__image-wrapper--icon-image {
    margin-left: 0;
    margin-right: auto; } }

/* Featured split Text
  ============================================================================*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .featured-split-icon__text {
    margin: 50px 0 0;
    max-width: 90.2%;
    margin-right: auto; } }
@media only screen and (min-width: 1025px) {
  .featured-split-icon__text {
    margin: 80px 0 0;
    max-width: 84.44%;
    margin-right: auto; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .featured-split-icon--reverse .featured-split-icon__text {
    margin-right: 0;
    margin-left: auto; } }
@media only screen and (min-width: 1025px) {
  .featured-split-icon--reverse .featured-split-icon__text {
    margin-right: 0;
    margin-left: auto; } }

.featured-split-icon__link-wrapper {
  margin-top: 36px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .featured-split-icon__link-wrapper {
      margin-top: 22px; } }
  @media only screen and (min-width: 1025px) {
    .featured-split-icon__link-wrapper {
      margin-top: 40px; } }

/**
 * Uses link--special class. We adjust some font properties.
 */
/* Featured split Image
  ============================================================================*/
.featured-split-icon__image {
  width: 100%; }

/*==============================================================================
  #Image With Text
  - A simple section that allows the user to place an image next to text.
  - On mobile, text stacks underneath image. On desktop, image and text are
    next to each other.
==============================================================================*/
.image-with-text__content {
  padding: 55px 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .image-with-text__content {
      padding: 65px 0;
      align-items: center; } }
  @media only screen and (min-width: 1025px) {
    .image-with-text__content {
      padding: 80px 0;
      align-items: center; } }

.image-with-text__item--image {
  width: 100%; }
  @media only screen and (max-width: 767px) {
    .image-with-text__item--image {
      order: 1; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .image-with-text__item--image {
      width: 48.5%; } }
  @media only screen and (min-width: 1025px) {
    .image-with-text__item--image {
      width: 50%;
      padding-right: 61px; } }

.image-with-text__image-wrapper {
  margin: 0 auto;
  width: 62.5%;
  position: relative; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .image-with-text__image-wrapper {
      width: 50%; } }
  @media only screen and (min-width: 1025px) {
    .image-with-text__image-wrapper {
      width: 50%; } }

.image-with-text__image {
  width: 100%; }

.collection-footer-section .image-with-text__content {
  padding: 40px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .collection-footer-section .image-with-text__content {
      padding: 60px 0; } }
  @media only screen and (min-width: 1025px) {
    .collection-footer-section .image-with-text__content {
      padding: 100px 0; } }

@media only screen and (min-width: 1025px) {
  .collection-footer-section .image-with-text__item--text {
    padding-top: 0; } }

.collection-footer-section .image-with-text__image-wrapper {
  margin: 0;
  width: 100%;
  position: relative; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .collection-footer-section .image-with-text__image-wrapper {
      width: 100%;
      padding-right: 30px; } }
  @media only screen and (min-width: 1025px) {
    .collection-footer-section .image-with-text__image-wrapper {
      width: 100%;
      padding-right: 61px; } }

/* Text
  ============================================================================*/
.image-with-text__item--text {
  width: 100%;
  margin-bottom: 64px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .image-with-text__item--text {
      margin-bottom: 0;
      width: 51.5%; } }
  @media only screen and (min-width: 1025px) {
    .image-with-text__item--text {
      padding-top: 20px;
      margin-bottom: 0;
      width: 50%;
      padding-left: 61px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .collection-footer-section .image-with-text__item--text {
    padding-left: 30px; } }
@media only screen and (min-width: 1025px) {
  .collection-footer-section .image-with-text__item--text {
    padding-left: 61px; } }

@media only screen and (min-width: 1025px) {
  .image-with-text__copy {
    max-width: 85%;
    display: flex;
    flex-wrap: wrap;
    gap: 50px 0; } }

/**
 * Uses .h2 styling
 */
.image-with-text__text {
  margin-top: 27px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .image-with-text__text {
      margin-top: 15px; } }
  @media only screen and (min-width: 1025px) {
    .image-with-text__text {
      margin-top: 42px; } }

.image-with-text__link-wrapper {
  margin-top: 30px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .image-with-text__link-wrapper {
      margin-top: 26px; } }
  @media only screen and (min-width: 1025px) {
    .image-with-text__link-wrapper {
      margin-top: 34px; } }

/**
 * Uses link--special class. These are specific font changes.
 */
/*==============================================================================
  #Experiences Section
==============================================================================*/
/**
 * 1. Init Flickity slider
 * 2. Disable Flickity slider on larger screens. As we're using on our grid
 *    class, we need to clear floats again.
 */
.js-experiences-slider:after {
  content: 'flickity';
  /* [1] */
  display: none; }
  @media only screen and (min-width: 768px) {
    .js-experiences-slider:after {
      content: '';
      /* [2] */
      display: table;
      clear: both; } }

/**
 * Styling of flickity arrows
 */
.js-experiences-slider .flickity-button-icon {
  fill: #fff; }

.js-experiences-slider .flickity-button {
  color: #fff; }

/**
 * On mobile, the mockups call for the slide arrows to be vertically centered
 * on the images. However, the slide element also includes text beneath the
 * image which means we can't exactly vertically center on the image. These
 * are magic numbers to roughly center the arrows on the image. This can easily
 * look off if there is a lot of text content.
 */
.js-experiences-slider .flickity-prev-next-button {
  top: 37.5%;
  transform: translateY(-10%); }

.experience-item__link-wrapper {
  display: block; }

.experience-item__info {
  padding: 20px 0 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .experience-item__info {
      padding: 20px 0 0; } }
  @media only screen and (min-width: 1025px) {
    .experience-item__info {
      padding: 20px 0 0; } }

/**
 * Main styling is from .h4 class. We add specific margin properties.
 */
.experience-item__heading {
  display: block;
  margin-bottom: 11px;
  transition: color 0.35s ease-in-out; }
  @media only screen and (min-width: 1025px) {
    .experience-item__heading {
      margin-bottom: 19px; } }
  .experience-item__heading:hover {
    color: #6bd5a0; }

/*==============================================================================
  #Featured Products
==============================================================================*/
/**
 * 1. Init Flickity slider
 * 2. Disable Flickity slider on larger screens. As we're using on our grid
 *    class, we need to clear floats again.
 */
.js-featured-products-slider:after {
  content: 'flickity';
  /* [1] */
  display: none; }
  @media only screen and (min-width: 768px) {
    .js-featured-products-slider:after {
      content: '';
      /* [2] */
      display: table;
      clear: both; } }

/*==============================================================================
  #Slideshow
==============================================================================*/
/**
 * Hide slideshow arrows
 */
.slideshow-section .flickity-prev-next-button {
  height: 100%;
  padding: 15px; }

.slideshow-section .flickity-button-icon {
  fill: transparent; }

.slideshow-section .flickity-prev-next-button.previous {
  left: 0; }

.slideshow-section .flickity-prev-next-button.next {
  right: 0; }

/**
 * This slideshow is quite complicated in it's use of many elements with
 * positioning properties. We set a position relative on our outermost element.
 */
.slideshow__wrapper {
  position: relative; }

/**
 * 1. Set relative positioning context
 * 2. Defensive code to ensure overflows are hidden
 */
.slideshow {
  position: relative;
  /* [1] */
  overflow: hidden;
  /* [2] */ }

/* Slideshow Heights Desktop
  ============================================================================*/
@media only screen and (min-width: 1025px) {
  .slideshow--height--natural {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; } }
.slideshow--height--small {
  height: 300px; }

.slideshow--height--medium {
  height: 450px; }

.slideshow--height--large {
  height: 600px; }

.slideshow--height--x-large {
  height: 750px; }

.slideshow--height--full {
  height: 100vh;
  height: calc(100vh - 100px); }

/* Slideshow Heights Mobile
  ============================================================================*/
/**
 * This declares the height of the slideshow for mobile and tablet based on
 * section settings.
 */
@media only screen and (max-width: 1024px) {
  .slideshow--mobile-height--natural {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

  .slideshow--mobile-height--small {
    height: 275px; }

  .slideshow--mobile-height--medium {
    height: 350px; }

  .slideshow--mobile-height--large {
    height: 425px; }

  .slideshow--mobile-height--x-large {
    height: 500px; }

  .slideshow--mobile-height--full {
    height: 100vh;
    height: calc(100vh - 80px); } }
@media only screen and (max-width: 767px) {
  .slideshow--mobile-height--full {
    height: 100vh;
    height: calc(100vh - 60px); } }
/* Slides
  ============================================================================*/
/**
 * 1. Set relative positioning context on our main slide
 * 2. Set 100% height to ensure our child elements / background images don't
 *    collapse
 */
.slide {
  position: relative;
  width: 100%;
  height: 100%; }

/* Slide Images
  ============================================================================*/
.slide__image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

/**
 * We are using background images for our slides.
 * 1. Set positioning context
 * 2. Ensure background image stretches full width and height
 * 3. Set general background image settings
 */
.slide__image {
  position: absolute;
  /* [1] */
  top: 0;
  /* [2] */
  left: 0;
  /* [2] */
  height: 100%;
  /* [2] */
  width: 100%;
  /* [2] */
  background-repeat: no-repeat;
  /* [3] */
  background-size: cover;
  /* [3] */
  background-position: top center;
  /* [3] */ }

/* Slide Text Content
  ============================================================================*/
/**
 * We position the slide text content over the slide image. The section settings
 * allow the merchant to place the content in numerous positions. We use Flexbox
 * to achieve this.
 */
.slide__content-wrapper {
  width: 100%;
  height: 100%;
  padding: 34px 20px 60px;
  position: relative; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .slide__content-wrapper {
      padding: 0 68px; } }
  @media only screen and (min-width: 1025px) {
    .slide__content-wrapper {
      padding: 0 122px; } }

.slide__content {
  height: 100%;
  display: flex;
  flex-direction: column; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .slide__content {
      justify-content: center; } }
  @media only screen and (min-width: 1025px) {
    .slide__content {
      justify-content: center; } }

/**
 * Uses .h1 class styling. Set a max width on heading
 */
@media only screen and (min-width: 1025px) {
  .slide__heading {
    max-width: 900px; } }

.slide__btn-wrapper {
  margin-top: auto;
  text-align: center; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .slide__btn-wrapper {
      margin-top: 30px;
      text-align: left; } }
  @media only screen and (min-width: 1025px) {
    .slide__btn-wrapper {
      margin-top: 24px;
      text-align: left; } }

/*==============================================================================
  #Hero / #Image with Text Overlay
==============================================================================*/
/**
 * In some cases we use a `natural` image size which requires absolute
 * positioning and padding. We set a relative positioning context so the
 * section doesn't cover other parts of the site.
 */
.hero-image__content {
  position: relative; }

/**
 * 1. Set relative positioning context
 * 2. Defensive code to ensure overflows are hidden
 */
.hero {
  position: relative;
  overflow: hidden;
  background-color: #f2f0ef; }

/**
 * A hero container. Useful if you want to add some spacing/other styling in
 * future. For now, we set the height and width to ensure nothing collapses.
 */
.hero__container {
  height: 100%;
  width: 100%; }

/* Hero Image
  ============================================================================*/
/**
 * We use background images. Absolutely position the element, ensure it fills
 * 100% of it's container, and add some basic background image properties.
 */
.hero__image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center; }

/* Hero Heights Desktop
  ============================================================================*/
@media only screen and (min-width: 768px) {
  .hero--height--natural {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; } }
.hero--height--small {
  height: 300px; }

.hero--height--medium {
  height: 450px; }

.hero--height--large {
  height: 600px; }

.hero--height--x-large {
  height: 750px; }

.hero--height--full {
  height: 100vh; }

/* Hero Heights Mobile
  ============================================================================*/
/**
 * This declares the height of the slideshow for mobile based on section
 * settings.
 */
@media only screen and (max-width: 767px) {
  .hero--mobile-height--natural {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

  .hero--mobile-height--small {
    height: 275px; }

  .hero--mobile-height--medium {
    height: 350px; }

  .hero--mobile-height--large {
    height: 425px; }

  .hero--mobile-height--x-large {
    height: 500px; }

  .hero--mobile-height--full {
    height: 100vh; } }
/* Hero video
  ============================================================================*/
.hero-video {
  height: 100vh;
  background-color: #f2f0ef;
  color: black; }

.hero-video__container {
  position: relative;
  height: 100%;
  overflow: hidden; }

.hero-video__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

/*==============================================================================
  #Featured Blocks
  - Uses in list-collections section with `collection-item` snippet
==============================================================================*/
.featured-blocks-item__link-wrapper {
  position: relative;
  display: block; }

.featured-blocks-item__image-wrapper {
  position: relative; }

.featured-blocks-item__image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center; }

.featured-blocks-item__image--small {
  height: 250px; }

.featured-blocks-item__image--medium {
  height: 300px; }

.featured-blocks-item__image--large {
  height: 350px; }

.featured-blocks-item__image--x-large {
  height: 400px; }

.featured-blocks-item__info {
  padding: 2rem;
  text-align: center; }

@media only screen and (min-width: 1025px) {
  .featured-blocks-item__image--small {
    height: 400px; }

  .featured-blocks-item__image--medium {
    height: 475px; }

  .featured-blocks-item__image--large {
    height: 550px; }

  .featured-blocks-item__image--x-large {
    height: 625px; } }
/*==============================================================================
  #NEWSLETTER
==============================================================================*/
.newsletter__bg {
  padding: 56px 0 46px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .newsletter__bg {
      padding: 60px 0; } }
  @media only screen and (min-width: 1025px) {
    .newsletter__bg {
      padding: 100px 0; } }

/**
 * Product pages have a sticky add to cart that sits atop the footer. This
 * can cover the newsletter section. Add extra space to account for this.
 */
@media only screen and (max-width: 767px) {
  .template-product .newsletter__bg {
    padding-bottom: 86px; } }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .template-product .newsletter__bg {
    padding-bottom: 90px; } }
@media only screen and (min-width: 1025px) {
  .template-product .newsletter__bg {
    padding-bottom: 120px; } }

@media only screen and (min-width: 768px) {
  .newsletter__content {
    display: flex;
    justify-content: space-between; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .newsletter__info {
    width: 50%;
    padding: 0 12px; } }
@media only screen and (min-width: 1025px) {
  .newsletter__info {
    width: 50%;
    padding-right: 37px; } }

/**
 * Uses .h2 styling
 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .newsletter__action {
    width: 50%;
    padding-left: 12px;
    margin-left: auto; } }
@media only screen and (min-width: 1025px) {
  .newsletter__action {
    width: 50%;
    padding-left: 37px; } }

/**
 * 1. magic number to align email placeholder with left sided heading.
 */
.newsletter__form-wrapper {
  margin-top: 40px; }
  .newsletter__form-wrapper .btn, .newsletter__form-wrapper .shopify-challenge__container .shopify-challenge__button, .shopify-challenge__container .newsletter__form-wrapper .shopify-challenge__button {
    height: 72px; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .newsletter__form-wrapper .btn, .newsletter__form-wrapper .shopify-challenge__container .shopify-challenge__button, .shopify-challenge__container .newsletter__form-wrapper .shopify-challenge__button {
        height: auto; } }
    @media only screen and (min-width: 1025px) {
      .newsletter__form-wrapper .btn, .newsletter__form-wrapper .shopify-challenge__container .shopify-challenge__button, .shopify-challenge__container .newsletter__form-wrapper .shopify-challenge__button {
        height: auto; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .newsletter__form-wrapper {
      margin-top: -14px;
      /* [1] */
      max-width: 85.6%;
      margin-left: auto; } }
  @media only screen and (min-width: 1025px) {
    .newsletter__form-wrapper {
      margin-top: -14px;
      margin-left: auto;
      max-width: 450px; } }

.newsletter__input {
  width: 100%;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  font-size: 1rem;
  letter-spacing: 0.5px; }
  .newsletter__input::-webkit-input-placeholder {
    color: black;
    opacity: 0.5; }
  .newsletter__input::-moz-placeholder {
    color: black;
    opacity: 0.5; }
  .newsletter__input:-ms-input-placeholder {
    color: black;
    opacity: 0.5; }
  .newsletter__input::placeholder {
    color: black;
    opacity: 0.5; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .newsletter__input {
      padding: 15px 0; } }
  @media only screen and (min-width: 1025px) {
    .newsletter__input {
      padding: 12px 0; } }

.newsletter__btn {
  margin-top: 20px; }

.newsletter__note,
.newsletter__note p {
  margin-top: 15px;
  font-size: 0.75rem;
  letter-spacing: 0.43px;
  color: rgba(0, 0, 0, 0.5); }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .newsletter__note,
    .newsletter__note p {
      font-size: 0.625rem;
      letter-spacing: 0.36px;
      line-height: 1.6; } }
  @media only screen and (min-width: 1025px) {
    .newsletter__note,
    .newsletter__note p {
      font-size: 0.875rem;
      letter-spacing: 0.5px;
      line-height: 1.71; } }

.newsletter__note a {
  transition: color 0.35s ease-in-out; }
  .newsletter__note a:hover {
    color: #6bd5a0; }
  @media only screen and (max-width: 767px) {
    .newsletter__note a {
      color: #a3d1ba; } }

/*==============================================================================
  #Product
==============================================================================*/
/**
 * Add extra bottom padding to product pages so the sticky add to cart
 * does obstruct any other elements.
 */
.template-product .main-content {
  padding-bottom: 100px; }

/**
 * 1. On tablet and larger screens, we create a 2 column layout using flexbox
 */
.product__main {
  background-color: #f6f6f6;
  padding: 6px 20px 38px; }
  @media only screen and (min-width: 768px) {
    .product__main {
      display: flex;
      /* [1] */
      align-items: flex-start;
      padding: 0; } }

/* Product Images
  ============================================================================*/
/**
 * 1. Set 50% width for our flex item
 * 2. On larger screens, place the images on the right side
 */
.product__images {
  position: relative;
  margin-bottom: 25px; }
  @media only screen and (min-width: 768px) {
    .product__images {
      margin-bottom: 0;
      width: 50%;
      /* [1] */
      flex-basis: 50%;
      /* [1] */
      order: 1;
      /* [2] */ } }
  @media only screen and (min-width: 1025px) {
    .product__images {
      margin-bottom: 30px; } }

/**
 * Set position relative on slider wrapper so we can position our slider
 */
.product__slider-wrapper {
  position: relative; }

/**
 * Set widths for product slide. On tablet and larger screen, we set a less
 * than 100% width so we can show a glimpse of the next slide
 */
.product__slide {
  width: 100%; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product__slide {
      width: 92.66667%; } }
  @media only screen and (min-width: 1025px) {
    .product__slide {
      width: 83%; } }
  @media only screen and (min-width: 768px) {
    .product__slide {
      border-left: 1px solid transparent;
      border-right: 1px solid transparent; }
      .product__slide:last-child {
        border-right: 0; }
      .product__slide:first-child {
        border-left: 0; }
      .product__slide:only-child {
        border-left: 0;
        border-right: 0; } }

/**
 * Through liquid and JS we can group images by variant colour using alt tags.
 * We add classes to hidden images to remove them from view.
 */
.product__slide--is-hidden {
  display: none; }

/**
 * Product slide wrapping element
 */
.product__slide-size-limiter {
  margin: 0 auto; }

.product__image {
  width: 100%; }

/**
 * Custom cursor to zoom in
 */
.product__slide--is-visible.is-selected .zoomImg {
  cursor: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/cursor-zoom-in-claridges.svg?v=35155250000696187851771411948") 18 18, zoom-in; }

/**
 * Custom cursor to zoom out
 */
.product__slide--is-visible.is-selected .zoomImg.image--is-zoomed {
  cursor: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/cursor-zoom-out-claridges.svg?v=38599272207244551431771411948") 18 18, zoom-out; }

/**
 * Styling of slider dots. On small screens, we position to bottom center.
 * On larger screens, we positon to bottom right.
 */
.product__slider .flickity-page-dots {
  text-align: center;
  bottom: 22px;
  display: block; }
  @media only screen and (min-width: 768px) {
    .product__slider .flickity-page-dots {
      counter-reset: a; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product__slider .flickity-page-dots {
      text-align: right;
      padding: 0;
      right: 10.8%;
      bottom: 12px; } }
  @media only screen and (min-width: 1025px) {
    .product__slider .flickity-page-dots {
      text-align: right;
      padding: 0;
      right: 20.13%;
      bottom: initial;
      /* bottom: 25px; */
      top: 67px;
      display: none; } }

@media only screen and (min-width: 768px) {
  .product__slider .flickity-page-dots .dot::after {
    content: counter(a);
    counter-increment: a; } }

.product__slider .flickity-page-dots .dot {
  cursor: pointer;
  display: inline-block;
  margin: 0 8px;
  height: 8px;
  width: 8px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }
  @media only screen and (min-width: 768px) {
    .product__slider .flickity-page-dots .dot {
      font-family: "SangBleuSerifLight", serif;
      margin: 0;
      padding: 4px 8px;
      border-bottom: 1px solid transparent;
      color: black;
      height: auto;
      width: auto;
      background-color: transparent;
      -webkit-transform: none;
      transform: none; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product__slider .flickity-page-dots .dot {
      font-size: 0.875rem; } }
  @media only screen and (min-width: 1025px) {
    .product__slider .flickity-page-dots .dot {
      padding: 5px 10px;
      font-size: 1.25rem; } }

.product__slider .flickity-page-dots .dot.is-selected {
  background-color: #a3d1ba; }
  @media only screen and (min-width: 768px) {
    .product__slider .flickity-page-dots .dot.is-selected {
      background-color: transparent;
      border-bottom: 1px solid #a3d1ba; } }

@media only screen and (min-width: 768px) {
  .product__slider .flickity-button {
    color: transparent; } }

@media only screen and (min-width: 768px) {
  .product__slider .flickity-prev-next-button {
    /* FSD - 02-09-2024 */
    top: 10px;
    transform: none;
    height: 25px;
    padding: 0;
    margin-right: 10px;
    width: 25px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center; } }
.product__slider .flickity-prev-next-button svg {
  height: 12px; }
  .product__slider .flickity-prev-next-button svg path {
    fill: #AD924E; }

.product__slider .flickity-button.flickity-prev-next-button.previous {
  left: 0;
  right: auto; }
  @media only screen and (min-width: 768px) {
    .product__slider .flickity-button.flickity-prev-next-button.previous {
      left: auto;
      /* FSD - 02-09-2024 */
      right: calc(20% + 10px); } }

.product__slider .flickity-button.flickity-prev-next-button.next {
  right: 0; }
  @media only screen and (min-width: 768px) {
    .product__slider .flickity-button.flickity-prev-next-button.next {
      right: 17%; } }

/* Product meta
  ============================================================================*/
@media only screen and (min-width: 768px) {
  .product__meta-wrapper {
    width: 50%;
    flex-basis: 50%;
    padding: 30px 24px 60px 30px; } }
@media only screen and (min-width: 1025px) {
  .product__meta-wrapper {
    /* padding: 38px $gutter-x-large 130px; */
    /* FSD - 02-09-2024 */
    padding: 48px 89px 66px 122px; } }
@media only screen and (min-width: 1680px) {
  .product__meta-wrapper {
    padding: 38px 122px 130px 50px;
    max-width: 840px;
    margin-left: auto; } }

@media only screen and (min-width: 768px) {
  .product--has-hamper-no-upc .product__meta-wrapper {
    width: 50%;
    flex-basis: 50%;
    padding: 30px 24px 60px 30px;
    padding-bottom: 0; } }
@media only screen and (min-width: 1025px) {
  .product--has-hamper-no-upc .product__meta-wrapper {
    padding: 38px 122px 130px;
    padding-bottom: 0; } }
@media only screen and (min-width: 1680px) {
  .product--has-hamper-no-upc .product__meta-wrapper {
    padding-bottom: 0; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product__breadcrumbs {
    margin-bottom: 30px; } }
@media only screen and (min-width: 1025px) {
  .product__breadcrumbs {
    margin-bottom: 8px;
    margin-top: 0px; } }

/* Product header
  ============================================================================*/
.product__header {
  margin-bottom: 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product__header {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 1025px) {
    .product__header {
      margin-bottom: 24px; } }

.product__title {
  margin-bottom: 5px;
  font-family: "SangBleuSerifLight", serif;
  font-size: 1.5rem;
  line-height: 1.17;
  text-transform: none;
  color: #ad924e;
  /*  color: $color-heading-text;*/ }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product__title {
      margin-bottom: 20px;
      font-size: 1.5625rem;
      line-height: 1.28; } }
  @media only screen and (min-width: 1025px) {
    .product__title {
      margin-bottom: 24px;
      font-size: 2.5rem;
      line-height: 1.25;
      font-weight: 300; } }

.product__price-wrapper {
  margin-bottom: 0;
  font-family: "SangBleuSerifLight", serif; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product__price-wrapper {
      margin-bottom: 30px;
      font-size: 1.125rem; } }
  @media only screen and (min-width: 1025px) {
    .product__price-wrapper {
      margin-bottom: 32px;
      font-size: 1.25rem;
      letter-spacing: 0.5px; } }

/* Product description
  ============================================================================*/
.product__description {
  margin-bottom: 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product__description {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 1025px) {
    .product__description {
      margin-bottom: 40px; } }
  @media only screen and (min-width: 1025px) {
    .product__description p {
      margin-bottom: 24px; } }

.product__description--small {
  margin-top: 55px;
  padding-bottom: 10px; }

.product__alert {
  margin: 31px 0 35px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product__alert {
      margin-top: 19px;
      margin-bottom: 17px; } }
  @media only screen and (min-width: 1025px) {
    .product__alert {
      margin-top: -6px;
      margin-bottom: 27px; } }

/* Product Accordion
============================================================================*/
.product__accordion {
  margin: 0px 0 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.2); }

.product__accordion--small {
  margin-top: 15px; }
  .product__accordion--small .accordion__title {
    font-size: 1rem; }
  .product__accordion--small .accordion__trigger {
    padding: 12px 0; }
    .product__accordion--small .accordion__trigger .icon {
      width: 24px;
      height: 24px; }

.product__accordion--large {
  margin-top: 30px; }
  .product__accordion--large .accordion__title {
    font-size: 1.25rem; }
  .product__accordion--large .accordion__trigger {
    padding: 15px 0; }
    .product__accordion--large .accordion__trigger .icon {
      width: 14px;
      height: 14px; }

.accordion__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left; }
  .accordion__trigger:focus {
    outline: none; }
  .accordion__trigger:focus-visible {
    outline: 2px solid #a3d1ba;
    outline-offset: 2px; }
    .accordion__trigger:focus-visible .accordion__title {
      color: #a3d1ba; }
  .accordion__trigger .icon-minus {
    display: none; }
  .accordion__trigger[aria-expanded="true"] .icon-plus {
    display: none; }
  .accordion__trigger[aria-expanded="true"] .icon-minus {
    display: block; }

.accordion__title {
  font-family: "SangBleuSerifLight", serif;
  color: #ad924e; }

.accordion__content {
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease; }
  .accordion__content[hidden] {
    display: block; }
  .accordion__content .rte {
    padding-bottom: 20px; }

/* Product form
  ============================================================================*/
/**
 * On scroll, the product form transforms into a fixed bar at the bottom of the
 * viewport.
 */
/**
 * We wrap the product-form in a container. This element will have padding added
 * to it on scroll, equal to the product form height. This minimizes page jumps
 * when we convert the product form to a fixed element.
 */
/**
 * The fixed form bar has a product title, and shows the price in the add to
 * cart button. We hide these on our normal static form.
 */
.add-to-cart-separator,
.add-to-cart-price,
.product-form__title {
  display: none; }

/* Product form - Fixed form styling
  ============================================================================*/
/**
 * We add 2 separate classes on scroll. The `product-form--is-fixed` will
 * make the element fixed. It will also hide it using opacity and transform
 * so we can animate it.
 *
 * The `product-form--is-fixed-and-visible` class allows us to animate by
 * setting opacity to 1, and transforming to make it appear as if the bar
 * slides up from the bottom of the screen.
 */
/**
 * 1. Remove bottom margin. !important is used to override media queries as we
 *    have different bottom margin depending on breakpoints.
 * 2. Hide the element so we can animate with another class.
 * 3. Set fixed positioning
 * 4. Set add to cart button price and separator to show
 */
.product-form--is-fixed {
  margin-bottom: 0;
  /* [1] */
  opacity: 0;
  /* [2] */
  transform: translateY(100%);
  /* [2] */
  position: fixed;
  /* [3] */
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: #f6f6f6; }
  .product-form--is-fixed .add-to-cart-separator,
  .product-form--is-fixed .add-to-cart-price {
    display: inline;
    /* [4] */ }
  .product-form--is-fixed .product-modal__link {
    display: none; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-form--is-fixed {
      margin-bottom: 0;
      /* [1] */ } }
  @media only screen and (min-width: 1025px) {
    .product-form--is-fixed {
      margin-bottom: 0;
      /* [1] */ } }

/**
 * This class gets added after `product-form--is-fixed` so we have a smooth
 * transition.
 */
.product-form--is-fixed-and-visible {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.2s ease-in-out, opacity 0.1s ease-in-out; }

/* Fixed form styling for Small screens
  ============================================================================*/
/**
 * On small screens we only show the add to cart button so the variants are
 * hidden.
 */
@media only screen and (max-width: 767px) {
  .product-form--is-fixed .product-form__variants {
    display: none; } }
/* Fixed form styling for medium screens
  ============================================================================*/
/**
 * On medium screens we show the product title, selected variants, and add to
 * cart.
 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-form--is-fixed {
    display: flex;
    align-items: center;
    padding: 0; }
    .product-form--is-fixed .product-form__title {
      display: block;
      padding: 18px 18px 18px 30px;
      flex: 1 1 auto;
      font-size: 1.125rem;
      letter-spacing: 0.5px; }
    .product-form--is-fixed .product-form__variants {
      margin-bottom: 0;
      display: flex;
      flex: 1 0 auto;
      justify-content: flex-end; }
    .product-form--is-fixed .variant-button {
      margin: 0; }
    .product-form--is-fixed .variant-button label {
      display: none; }
    .product-form--is-fixed .variant-button label,
    .product-form--is-fixed .variant-button__label--swatch .variant-button__swatch-background {
      cursor: default; }
    .product-form--is-fixed .variant-button input[type='radio']:checked + label {
      display: block; }
    .product-form--is-fixed .product-form__option {
      margin-bottom: 0;
      margin-right: 24px;
      font-size: 0.875rem; }
    .product-form--is-fixed .product-form__label {
      width: auto;
      padding-right: 16px; }
    .product-form--is-fixed .add-to-cart-btn,
    .product-form--is-fixed .back-in-stock-btn,
    .product-form--is-fixed .atc-preorder-btn {
      margin-left: 37px;
      width: 35%;
      padding: 17px;
      align-self: stretch; } }
@media screen and (min-width: 1154px) and (max-width: 1280px) {
  .product-form__option .product-variant-column {
    margin-right: 48px; } }
@media screen and (min-width: 1025px) {
  .product-form__option .product-variant-column {
    flex-wrap: wrap; }

  .product-form__option {
    padding-right: 0px; }

  .product-form__option .product-variant-column .product-form__label {
    max-width: 104px !important; } }
@media screen and (min-width: 1280px) {
  .product-form__option .product-variant-column {
    flex-wrap: nowrap; }

  .product-form__option {
    padding-right: 90px; }

  .product-form__option .product-variant-column .product-form__label {
    max-width: 118px; } }
/* Fixed form styling for large screens
  ============================================================================*/
/**
 * On large screens we show the product title, all variants, and add to cart.
 */
@media only screen and (min-width: 1025px) {
  .product-form--is-fixed {
    display: flex;
    align-items: center;
    padding: 0; }
    .product-form--is-fixed .product-form__title {
      display: block;
      padding: 18px 18px 18px 50px;
      flex: 1 1 auto;
      font-size: 1.25rem;
      letter-spacing: 0.5px; }
    .product-form--is-fixed .product-form__variants {
      margin-bottom: 0;
      display: flex;
      flex: 1 0 auto;
      justify-content: flex-end; }
    .product-form--is-fixed .product-form__option {
      margin-bottom: 0;
      margin-right: 48px;
      font-size: 1rem; }
    .product-form--is-fixed .product-form__label {
      width: auto;
      padding-right: 16px; }
    .product-form--is-fixed .add-to-cart-btn,
    .product-form--is-fixed .back-in-stock-btn,
    .product-form--is-fixed .atc-preorder-btn {
      width: 35%;
      padding: 17px;
      align-self: stretch; } }
@media only screen and (max-width: 767px) {
  .back-in-stock-btn {
    padding-left: 2px;
    padding-right: 2px; } }

/* Product Form Variants
  ============================================================================*/
.product-form__variants {
  margin-bottom: 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-form__variants {
      margin-bottom: 24px; } }
  @media only screen and (min-width: 1025px) {
    .product-form__variants {
      margin-bottom: 20px; } }
  .product-form__variants .variant-button__label--default.disabled {
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer; }

.product_variant-section {
  position: relative; }

.product-form__option {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap; }
  .product-form__option .product-variant-column {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    position: relative; }
    @media only screen and (max-width: 767px) {
      .product-form__option .product-variant-column {
        flex-wrap: wrap; } }
    @media only screen and (max-width: 767px) {
      .product-form__option .product-variant-column .product-form__selector-wrapper--buttons {
        width: 100%;
        margin-top: 5px; } }
    .product-form__option .product-variant-column .product-variant-column {
      width: calc(100% - 100px);
      margin: 0; }
      @media only screen and (max-width: 767px) {
        .product-form__option .product-variant-column .product-variant-column {
          width: 100%; } }
    .product-form__option .product-variant-column .product-form__label {
      flex: 0 0 100%;
      max-width: 118px;
      margin-top: 4px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-form__option {
      margin-bottom: 12px; } }
  @media only screen and (min-width: 1025px) {
    .product-form__option {
      margin-bottom: 10px; } }
  .no-js .product-form__option {
    display: none; }

.product-form__label {
  padding-right: 18px;
  width: 100%; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-form__label {
      width: 17.64%;
      padding-right: 20px; } }
  @media only screen and (min-width: 1025px) {
    .product-form__label {
      width: auto;
      padding-right: 20px;
      flex: 0 1 20%; } }

@media only screen and (max-width: 575px) {
  .product-event .product__meta-wrapper .product_event {
    display: flex;
    flex-wrap: wrap; } }
.product-event .product__meta-wrapper #variant-select {
  width: 100%;
  border: solid 1px #6bd5a0;
  font-family: "SangBleuSerifLight", serif;
  font-size: 1.25rem;
  font-weight: 300;
  text-align: center;
  padding: 0 10px;
  text-transform: uppercase;
  height: 60px;
  float: left;
  margin-bottom: 10px; }
  @media only screen and (max-width: 575px) {
    .product-event .product__meta-wrapper #variant-select {
      width: 100%;
      font-size: 1rem;
      order: 2;
      margin-bottom: 10px; } }
.product-event .product__meta-wrapper .quantity-selector {
  width: 100%;
  border: solid 1px #6bd5a0;
  margin-left: auto;
  margin-right: 0;
  height: 60px;
  display: flex;
  justify-content: space-between;
  padding: 0 14px 3px; }
  @media only screen and (max-width: 575px) {
    .product-event .product__meta-wrapper .quantity-selector {
      width: 100%;
      order: 1;
      margin-bottom: 10px; } }
  .product-event .product__meta-wrapper .quantity-selector label {
    display: none; }
  .product-event .product__meta-wrapper .quantity-selector input.quantity-input {
    width: calc(100% - 105px);
    font-family: "SangBleuSerifLight", serif;
    font-size: 1.25rem; }
  .product-event .product__meta-wrapper .quantity-selector .quantity-selector__button .icon {
    width: 20px;
    height: 20px; }
.product-event .product__meta-wrapper .product-variant-column {
  display: none; }
.product-event .product__meta-wrapper #AddToCart-product-template {
  display: none; }
@media only screen and (max-width: 575px) {
  .product-event .product__meta-wrapper .product__description--small {
    margin-top: 30px; } }

/**
 * The master selector wrapper that controls variants. This is the source of
 * truth. We hide this unless a user has no JS.
 */
.product-form__selector-wrapper--master {
  display: none; }
  .product-form__selector-wrapper--master .no-js {
    display: block; }

/**
 * Display variant buttons in a row using flexbox.
 */
.product-form__selector {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
  margin-left: -8px; }
  @media only screen and (min-width: 1025px) {
    .product-form__selector {
      gap: 0 10px; } }

.variant-button {
  margin: 2px 5px; }

/**
 * Hide variant button radio buttons as we use label elements for styling.
 */
.variant-button__input {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0; }
  .variant-button__input:checked + label {
    color: #000; }

/**
 * Add a border to default labels. An active variant will have a coloured border.
 */
.variant-button__label--default {
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  padding: 0 4px;
  cursor: pointer;
  color: #00000066; }

/**
 * Styling of active default variant label
 */
.variant-button--default input[type='radio']:checked + label {
  border-bottom-color: #a3d1ba; }

.variant-button__label--default.disabled {
  color: #f2f0ef;
  cursor: not-allowed; }

/**
 * Swatch labels have a span element for a background colour
 * swatch. Active variants will have a black border on the
 * parent element.
 */
.variant-button__label--swatch .variant-button__swatch-background {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer; }

.variant-button__label--swatch {
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: border-color 0.35s ease-in-out; }

.variant-button--swatch:hover label {
  border-color: #000; }

/**
 * Styling of active variant label
 */
.variant-button--swatch input[type='radio']:checked + label {
  border-color: #000; }

.variant-button__label--default.disabled {
  color: #f2f0ef;
  cursor: not-allowed; }

/**
 * Styling of modal links for size guide and allergens
 */
.product-modal__link {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.35s ease-in-out; }
  .product-modal__link:hover {
    color: #6bd5a0; }
  .product-modal__link .icon {
    width: 10px;
    height: 10px;
    margin-left: 2px;
    margin-top: -2px; }
    .product-modal__link .icon g {
      stroke: #a3d1ba; }

.product-modal__link--size {
  margin-left: auto; }

.product-modal__link--food {
  display: block;
  margin: 35px 0; }
  .product-modal__link--food.size-guide_modal {
    margin: -3px 0 0 auto;
    position: absolute;
    right: 0;
    top: 7px; }
    @media only screen and (min-width: 1025px) {
      .product-modal__link--food.size-guide_modal {
        top: 7px; } }
    @media only screen and (max-width: 767px) {
      .product-modal__link--food.size-guide_modal {
        margin: -5px 0 0 auto;
        position: absolute; } }

/* Product Delivery
  ============================================================================*/
.product__delivery {
  margin-top: 24px;
  margin-bottom: 12px; }
  @media only screen and (min-width: 768px) {
    .product__delivery {
      margin-top: 24px;
      margin-bottom: 12px; } }
  @media only screen and (min-width: 1025px) {
    .product__delivery {
      margin-top: 24px;
      margin-bottom: 12px; } }

.product__delivery-item {
  display: flex;
  align-items: center;
  margin-top: 10px; }
  @media only screen and (min-width: 768px) {
    .product__delivery-item {
      margin-top: 12px; } }

.product__delivery-icon {
  margin-right: 7px;
  height: 30px;
  width: 30px;
  border: 1px solid rgba(0, 0, 0, 0.17);
  padding: 2px; }
  @media only screen and (min-width: 768px) {
    .product__delivery-icon {
      margin-right: 7px; } }

img.product__delivery-icon-image {
  width: 36px; }

.product__delivery-icon .icon {
  width: 30px;
  height: 30px; }

/* Product Actions / Share
  ============================================================================*/
.product__actions {
  margin-top: 12px; }

.product__share {
  display: flex;
  align-items: flex-start; }

.product__share-btn {
  position: relative;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.35s ease-in-out; }
  .product__share-btn:hover {
    color: #6bd5a0;
    /*color: $color-hover;*/ }

.product__share-btn .icon {
  margin-right: 2px; }

.product__share .icon--chevron-right,
.product__share .icon--chevron-left {
  transition: visibility 0.25s ease-in-out, opacity 0.35s ease-in-out;
  width: 7px;
  height: 7px; }
  .product__share .icon--chevron-right g,
  .product__share .icon--chevron-left g {
    stroke-width: 2; }
  .product__share .icon--chevron-right polyline,
  .product__share .icon--chevron-left polyline {
    stroke: #a3d1ba; }

.product__share--is-open .icon--chevron-right {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.25s ease-in-out, opacity 0.35s ease-in-out; }

.product__share-list {
  list-style: none;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: 0;
  transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out; }

.product__share--is-open .product__share-list {
  opacity: 1;
  visibility: visible; }

.product__share-list-item {
  margin: 0 12px; }
  .product__share-list-item .icon {
    margin-top: -2px; }

/* Product Universal
  ============================================================================*/
.product-universal {
  margin: 60px 0 50px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-universal {
      margin: 80px 0 74px; } }
  @media only screen and (min-width: 1025px) {
    .product-universal {
      margin: 100px 0; } }

@media only screen and (min-width: 1025px) {
  .product-universal__content {
    display: flex;
    align-items: center;
    justify-content: space-between; } }

@media only screen and (min-width: 1025px) {
  .product-universal__image-wrapper {
    width: 50%;
    padding-right: 61px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-universal__info {
    margin-left: -24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between; } }
@media only screen and (min-width: 1025px) {
  .product-universal__info {
    width: 50%;
    padding-left: 61px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-universal__copy {
    width: 50%;
    padding-left: 24px; } }

@media only screen and (min-width: 1025px) {
  .product-universal__copy + .product-universal__copy {
    margin-top: 32px; } }

.product-universal__copy h4 {
  margin-top: 34px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-universal__copy h4 {
      margin-top: 0px; } }
  @media only screen and (min-width: 1025px) {
    .product-universal__copy h4 {
      margin-top: 0;
      margin-bottom: 32px; } }

.product-universal__copy h4 + p {
  margin-top: 22px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-universal__copy h4 + p {
      margin-top: 21px; } }
  @media only screen and (min-width: 1025px) {
    .product-universal__copy h4 + p {
      margin-top: 0; } }

/* Hamper products
  ============================================================================*/
.hamper-products__wrapper {
  background-color: #f6f6f6;
  padding: 54px 0 25px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .hamper-products__wrapper {
      padding: 52px 0 74px; } }
  @media only screen and (min-width: 1025px) {
    .hamper-products__wrapper {
      padding: 90px 0 94px; } }

@media only screen and (max-width: 767px) {
  .product--has-hamper-no-upc .hamper-products__wrapper {
    padding-top: 0; } }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product--has-hamper-no-upc .hamper-products__wrapper {
    padding-top: 80px; } }
@media only screen and (min-width: 1025px) {
  .product--has-hamper-no-upc .hamper-products__wrapper {
    padding-top: 100px; } }

.hamper-products {
  background-color: #f6f6f6;
  overflow: hidden;
  transition: height 0.35s ease-in-out; }
  @media only screen and (max-width: 767px) {
    .hamper-products {
      height: 228px; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .hamper-products {
      height: 285px; } }
  @media only screen and (min-width: 1025px) {
    .hamper-products {
      height: auto; } }

.hamper-products--is-open .hamper-products {
  height: auto;
  transition: height 0.35s ease-in-out; }

.hamper-products__heading {
  margin-bottom: 46px;
  font-size: 1.5rem;
  line-height: 1.17; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .hamper-products__heading {
      margin-bottom: 51px;
      font-size: 1.5625rem;
      line-height: 1.4; } }
  @media only screen and (min-width: 1025px) {
    .hamper-products__heading {
      margin-bottom: 70px;
      font-size: 2.5rem;
      line-height: 1.25; } }

.hamper-products__toggle-wrapper {
  margin-top: 40px; }

.hamper-products__toggle {
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.5px;
  cursor: pointer; }

.hamper-products__toggle .icon {
  width: 12px;
  height: 12px; }

.hamper-products__toggle .icon--plus g {
  stroke: #a3d1ba; }

.hamper-products__toggle .icon--minus {
  fill: #a3d1ba;
  display: none; }

.hamper-products__toggle .less {
  display: none; }

.hamper-products--is-open .icon--plus {
  display: none; }

.hamper-products--is-open .icon--minus {
  display: inline-block; }

.hamper-products--is-open .more {
  display: none; }

.hamper-products--is-open .less {
  display: inline-block; }

.hamper-products__copy {
  margin-top: 40px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .hamper-products__copy {
      max-width: 66%;
      margin-top: 40px; } }
  @media only screen and (min-width: 1025px) {
    .hamper-products__copy {
      max-width: 55%;
      margin-top: 40px; } }

.view_hamper_details_btn {
  cursor: pointer; }

@media only screen and (max-width: 767px) {
  .modal--hampers .modal__content {
    margin: 0 auto;
    height: auto;
    max-height: calc(100% - 100px);
    background: 0 0;
    width: calc(100% - 40px); } }
.modal--hampers .modal__content .modal__body {
  padding: 70px;
  background: #ffffff; }
  @media only screen and (max-width: 767px) {
    .modal--hampers .modal__content .modal__body {
      padding: 30px 18px; } }
  .modal--hampers .modal__content .modal__body .qv-product-box {
    display: flex;
    flex-wrap: wrap; }
    .modal--hampers .modal__content .modal__body .qv-product-box .qv-product-images {
      flex: 0 0 50%;
      max-width: 50%;
      aspect-ratio: 0.75; }
      @media only screen and (max-width: 767px) {
        .modal--hampers .modal__content .modal__body .qv-product-box .qv-product-images {
          flex: 0 0 100%;
          max-width: 100%;
          margin: 0 0 19px; } }
      .modal--hampers .modal__content .modal__body .qv-product-box .qv-product-images img {
        aspect-ratio: 0.75; }
    .modal--hampers .modal__content .modal__body .qv-product-box .qv-product-details {
      flex: 0 0 50%;
      max-width: 50%;
      padding-left: 16px; }
      @media only screen and (max-width: 767px) {
        .modal--hampers .modal__content .modal__body .qv-product-box .qv-product-details {
          flex: 0 0 100%;
          max-width: 100%;
          padding-left: 0; } }
      .modal--hampers .modal__content .modal__body .qv-product-box .qv-product-details .qv-product-title {
        font-size: 1.5625rem;
        line-height: 1.4;
        letter-spacing: 0;
        text-align: left;
        margin: 0 0 30px;
        text-transform: capitalize;
        color: #ad924e;
        font-family: 'SangBleuSerifLight'; }
        @media only screen and (max-width: 767px) {
          .modal--hampers .modal__content .modal__body .qv-product-box .qv-product-details .qv-product-title {
            line-height: 1.25;
            font-size: 1.5rem;
            margin: 0 0 20px; } }
      .modal--hampers .modal__content .modal__body .qv-product-box .qv-product-details .qv-product-description p {
        font-family: 'Lato';
        color: black;
        letter-spacing: 0.5px;
        line-height: 1.57;
        font-size: 0.875rem; }
        .modal--hampers .modal__content .modal__body .qv-product-box .qv-product-details .qv-product-description p:last-child {
          margin: 0; }
        @media only screen and (max-width: 767px) {
          .modal--hampers .modal__content .modal__body .qv-product-box .qv-product-details .qv-product-description p {
            line-height: 1.43; } }
.modal--hampers .modal__content .modal__close {
  top: 20px;
  right: 30px;
  color: black; }
  @media only screen and (max-width: 767px) {
    .modal--hampers .modal__content .modal__close {
      top: 0;
      right: 10px; } }
  .modal--hampers .modal__content .modal__close .icon {
    width: 12px;
    height: 12px; }
    @media only screen and (max-width: 767px) {
      .modal--hampers .modal__content .modal__close .icon {
        width: 10px;
        height: 10px; } }

/* Product Video
  ============================================================================*/
.product-video {
  margin: 57px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-video {
      margin: 70px 0; } }
  @media only screen and (min-width: 1025px) {
    .product-video {
      margin: 100px 0; } }

.product-video__video {
  width: 100%;
  height: 100%; }

/* Product Quote
  ============================================================================*/
.product-quote {
  margin: 57px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-quote {
      margin: 70px 0; } }
  @media only screen and (min-width: 1025px) {
    .product-quote {
      margin: 100px 0; } }

@media only screen and (min-width: 768px) {
  .product-quote__content {
    display: flex; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-quote__text {
    width: 58.2%; } }
@media only screen and (min-width: 1025px) {
  .product-quote__text {
    width: 55.18%; } }

.product-quote__quote {
  display: block;
  font-size: 1.5rem;
  line-height: 1.17; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-quote__quote {
      font-size: 1.5625rem;
      line-height: 1.4; } }
  @media only screen and (min-width: 1025px) {
    .product-quote__quote {
      font-size: 2.5rem;
      line-height: 1.25; } }

.product-quote__citation {
  display: block;
  margin-top: 18px;
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 2px;
  font-style: normal;
  text-transform: none; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-quote__citation {
      margin-top: 15px;
      font-size: 0.875rem;
      line-height: 1.14;
      letter-spacing: 2.3px; } }
  @media only screen and (min-width: 1025px) {
    .product-quote__citation {
      margin-top: 26px;
      font-size: 0.75rem;
      line-height: 1.33;
      letter-spacing: 2px; } }

.product-quote__illustration-wrapper {
  width: 50%;
  margin-left: auto; }
  @media only screen and (max-width: 767px) {
    .product-quote__illustration-wrapper {
      margin-top: 40px; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-quote__illustration-wrapper {
      width: 19.5%;
      margin-right: 40px; } }
  @media only screen and (min-width: 1025px) {
    .product-quote__illustration-wrapper {
      width: 19.14%;
      margin-right: 0; } }

.product-quote__illustration {
  width: 100%; }

/* Product Split
  ============================================================================*/
/**
 * Used for Additional Product Content 1 which includes a landscape image,
 * portrait image, and text content
 */
.product-split {
  margin: 57px 0; }
  @media only screen and (max-width: 767px) {
    .product-split {
      padding: 0 20px; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-split {
      margin: 70px 0; } }
  @media only screen and (min-width: 1025px) {
    .product-split {
      margin: 100px 0; } }

@media only screen and (min-width: 768px) {
  .product-split__content {
    display: flex;
    flex-wrap: wrap; } }

.product-split__item--landscape {
  margin-bottom: 40px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-split__item--landscape {
      width: 100%;
      padding: 0 30px;
      margin-bottom: 60px; } }
  @media only screen and (min-width: 1025px) {
    .product-split__item--landscape {
      margin-bottom: 0;
      width: 50%;
      padding-right: 61px; } }
  @media only screen and (min-width: 1680px) {
    .product-split__item--landscape {
      padding-left: 122px; } }

@media only screen and (min-width: 768px) {
  .product-split--reverse .product-split__item--landscape {
    order: 1; } }
@media only screen and (min-width: 1025px) {
  .product-split--reverse .product-split__item--landscape {
    padding-left: 61px;
    padding-right: 0; } }
@media only screen and (min-width: 1680px) {
  .product-split--reverse .product-split__item--landscape {
    padding-right: 122px; } }

.product-split__item--portrait {
  margin-bottom: 35px; }
  @media only screen and (min-width: 768px) {
    .product-split__item--portrait {
      margin-bottom: 0;
      width: 50%; } }
  @media only screen and (min-width: 1025px) {
    .product-split__item--portrait {
      margin-top: 18.73%;
      padding-left: 61px;
      padding-right: 122px; } }

@media only screen and (min-width: 1025px) {
  .product-split--reverse .product-split__item--portrait {
    padding-left: 122px;
    padding-right: 61px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-split__item--text {
    width: 50%; } }

.product-split__image-wrapper {
  width: 100%; }

.product-split__item--landscape .product-split__image-wrapper {
  width: 100%; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-split__item--landscape .product-split__image-wrapper {
      width: 66%;
      margin-left: auto; } }
  @media only screen and (min-width: 1025px) {
    .product-split__item--landscape .product-split__image-wrapper {
      width: 100%;
      margin-right: auto; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-split--reverse .product-split__item--landscape .product-split__image-wrapper {
    margin-left: 0;
    margin-right: auto; } }
@media only screen and (min-width: 1025px) {
  .product-split--reverse .product-split__item--landscape .product-split__image-wrapper {
    margin-right: 0;
    margin-left: auto; } }

.product-split__item--portrait .product-split__image-wrapper {
  width: 100%; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-split__item--portrait .product-split__image-wrapper {
      width: 82.3%;
      margin-right: auto; } }
  @media only screen and (min-width: 1025px) {
    .product-split__item--portrait .product-split__image-wrapper {
      width: 100%; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-split--reverse .product-split__item--portrait .product-split__image-wrapper {
    margin-right: 0;
    margin-left: auto; } }
@media only screen and (min-width: 1680px) {
  .product-split--reverse .product-split__item--portrait .product-split__image-wrapper {
    padding-right: 0; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-split__item--text .product-split__text {
    padding-left: 24px;
    padding-right: 30px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-split--reverse .product-split__item--text .product-split__text {
    padding-right: 24px;
    padding-left: 30px; } }

.product-split__image {
  width: 100%; }

.product-split__text h4 {
  margin-bottom: 22px; }
.product-split__text p + h4 {
  margin-top: 30px; }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-split__text h4 {
    margin-bottom: 24px; }
  .product-split__text p + h4 {
    margin-top: 37px; } }
@media only screen and (min-width: 1025px) {
  .product-split__text {
    padding-left: 122px;
    padding-right: 62px;
    margin-top: 60px; }
    .product-split__text h4 {
      margin-bottom: 30px; }
    .product-split__text p + h4 {
      margin-top: 50px; } }

.product-split__link-wrapper {
  margin-top: 40px; }

.product-split__link {
  font-size: 1rem;
  text-transform: uppercase; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-split__link {
      font-size: 1.125rem;
      letter-spacing: 0.5px; } }
  @media only screen and (min-width: 1025px) {
    .product-split__link {
      font-size: 1.25rem;
      letter-spacing: 0.5px; } }

/* Product Split Grid
  ============================================================================*/
/**
 * Used for Additional Product Content 2 which includes a portrait image, title,
 * text, and an illustration icon
 */
.product-split-grid__wrapper {
  padding: 40px 0;
  background-color: white; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-split-grid__wrapper {
      padding: 80px 0; } }
  @media only screen and (min-width: 1025px) {
    .product-split-grid__wrapper {
      padding: 80px 0; } }

.theme-berkeley .product-split-grid__wrapper {
  background-color: white; }

@media only screen and (min-width: 768px) {
  .product-split-grid {
    display: flex; } }

@media only screen and (min-width: 768px) {
  .product-split-grid__item {
    width: 50%; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-split-grid__item--image {
    padding-right: 12px; } }
@media only screen and (min-width: 1025px) {
  .product-split-grid__item--image {
    padding-right: 61px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .product-split-grid__item--text {
    padding-left: 12px; } }
@media only screen and (min-width: 1025px) {
  .product-split-grid__item--text {
    padding-left: 61px;
    display: flex;
    flex-direction: column; } }

.product-split-grid__title {
  margin-bottom: 40px;
  font-size: 1.5rem;
  line-height: 1.17; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-split-grid__title {
      margin-bottom: 27px;
      font-size: 1.5625rem;
      line-height: 1.4; } }
  @media only screen and (min-width: 1025px) {
    .product-split-grid__title {
      margin-bottom: 21px;
      margin-top: 52px;
      font-size: 2.5rem;
      line-height: 1.25; } }

.product-split-grid__image-wrapper {
  width: 100%; }
  @media only screen and (max-width: 767px) {
    .product-split-grid__image-wrapper {
      margin-bottom: 25px; } }

.product-split-grid__text {
  margin-bottom: 36px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-split-grid__text {
      margin-bottom: 50px; } }
  @media only screen and (min-width: 1025px) {
    .product-split-grid__text {
      margin-bottom: 50px; } }

.product-split-grid__illustration-wrapper {
  width: 50%;
  margin-left: auto; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-split-grid__illustration-wrapper {
      width: 22.6%; } }
  @media only screen and (min-width: 1025px) {
    .product-split-grid__illustration-wrapper {
      width: 18.65%;
      margin-top: auto; } }

/*==============================================================================
  #PRODUCT RECOMMENDATIONS
==============================================================================*/
.product-recommendations__bg {
  padding: 86px 0 79px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-recommendations__bg {
      padding: 80px 0; } }
  @media only screen and (min-width: 1025px) {
    .product-recommendations__bg {
      padding: 92px 0 130px; } }

.product-recommendations__heading {
  text-align: center;
  margin-bottom: 79px;
  font-size: 0.875rem;
  line-height: 1.14;
  letter-spacing: 2.3px;
  text-transform: uppercase; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-recommendations__heading {
      margin-bottom: 60px; } }
  @media only screen and (min-width: 1025px) {
    .product-recommendations__heading {
      margin-bottom: 60px;
      font-size: 1rem;
      letter-spacing: 2.5px; } }

.js-product-rec-slider:after {
  content: 'flickity';
  /* [1] */
  display: none; }
  @media only screen and (min-width: 768px) {
    .js-product-rec-slider:after {
      content: '';
      /* [2] */
      display: table;
      clear: both; } }

/*==============================================================================
  Product mobile zoom gallery
============================================================================*/
.pswp--open, .pswp__bg {
  background: #fff; }

.pswp__counter, .pswp__top-bar {
  display: none; }

.pswp__caption__center, .pswp__caption {
  display: none; }

.product__images .opengallery {
  display: none; }
  @media only screen and (max-width: 767px) {
    .product__images .opengallery {
      display: none;
      font-size: 0;
      background: url(//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/claridges-zoom-icon.svg?v=35407459063319360871771411948) no-repeat;
      background-size: 100%;
      width: 25px;
      height: 25px;
      position: absolute;
      bottom: 20px;
      right: 20px; } }

.product__main .pswp .nontrols-btn {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: auto;
  /* FSD - 02-09-2024 */
  display: none; }
  .product__main .pswp .nontrols-btn button {
    opacity: 1;
    visibility: visible; }
    .product__main .pswp .nontrols-btn button.pswp__button--arrow--left, .product__main .pswp .nontrols-btn button.pswp__button--arrow--right {
      width: 50px; }
    .product__main .pswp .nontrols-btn button.pswp__button--close {
      margin-top: 0;
      font-size: 0;
      background: url(//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/claridges-close.svg?v=69327156177782981291771411948) no-repeat;
      width: 13px;
      height: 13px;
      background-size: 100%;
      position: fixed;
      top: 15px;
      right: 20px; }
    .product__main .pswp .nontrols-btn button:before {
      background: none; }
    .product__main .pswp .nontrols-btn button svg {
      width: 18px;
      height: 18px; }
.product__main .pswp--open,
.product__main .pswp__bg {
  background: #f9f8f6; }

/*==============================================================================
  #Collection / Product Grid
==============================================================================*/
/* Collection reload animation
  ============================================================================*/
@-webkit-keyframes collection-reload {
  0% {
    opacity: 0; }

  50% {
    opacity: 0.3; }

  100% {
    opacity: 0; } }

@keyframes collection-reload {
  0% {
    opacity: 0; }

  50% {
    opacity: 0.3; }

  100% {
    opacity: 0; } }

.collection-reload {
  opacity: 0;
  transition-duration: 0.3s;
  animation: collection-reload 1.5s ease infinite 1.5s; }

/* Collection Toolbar
  ============================================================================*/
.collection-toolbar {
  margin-bottom: 30px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .collection-toolbar {
      margin-bottom: 33px; } }
  @media only screen and (min-width: 1025px) {
    .collection-toolbar {
      margin-bottom: 60px; } }

/**
 * Set toolbar header to flex for easy alignment.
 */
.collection-toolbar__header {
  display: flex;
  justify-content: space-between; }

.collection-toolbar__title {
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.625rem;
  line-height: 2.2;
  letter-spacing: 1.38px;
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.35s ease-in-out; }
  .collection-toolbar__title.link--active {
    color: black; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .collection-toolbar__title {
      font-size: 0.875rem;
      line-height: 1.57;
      letter-spacing: 2px; } }
  @media only screen and (min-width: 1025px) {
    .collection-toolbar__title {
      font-size: 0.75rem;
      line-height: 1.33;
      letter-spacing: 2px; } }
  .collection-toolbar__title:hover {
    color: #6bd5a0; }

/**
 * This part of the the header controls the filters and view all button.
 */
.collection-toolbar__header-filter {
  display: flex; }

.collection-toolbar__title--view-all {
  margin-right: 21px;
  border-bottom: solid 1px #a3d1ba; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .collection-toolbar__title--view-all {
      margin-right: 40px; } }
  @media only screen and (min-width: 1025px) {
    .collection-toolbar__title--view-all {
      margin-right: 34px; } }

.collection-toolbar__title--filter .icon {
  margin-top: -3px;
  margin-left: 9px;
  width: 14px;
  height: 13px; }
  .collection-toolbar__title--filter .icon g {
    stroke: #a3d1ba; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .collection-toolbar__title--filter .icon {
      margin-left: 6px; } }
  @media only screen and (min-width: 1025px) {
    .collection-toolbar__title--filter .icon {
      margin-left: 12px; } }

.collection-toolbar__title--has-active-tags {
  color: #a3d1ba; }
  .collection-toolbar__title--has-active-tags g {
    stroke: #a3d1ba; }

.collection-toolbar__title--sort .icon {
  margin-left: 9px;
  width: 17px;
  height: 11px;
  color: #a3d1ba; }

/**
 * Hide the sort button on mobile when the filters are open.
 */
@media only screen and (max-width: 767px) {
  .collection-toolbar--filters-is-open .collection-toolbar__header-sort {
    display: none; } }

/* Collection Toolbar Main
  ============================================================================*/
/**
 * Styling of the main area where our filters and sort options will show.
 */
.collection-toolbar__main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

/**
 * Set width of filters area. Matches width of filter header area.
 */
.collection-toolbar__main-filters {
  width: 100%;
  padding-left: 104px;
  display: flex; }

/**
 * Set width of sort options area. Matches width of sort header area.
 */
.collection-toolbar__main-sort {
  width: 100%; }

/**
 * We set 0 height for the filters and sort. We use JS to open the filters
 * and add a height allowing for a transition.
 */
.collection-toolbar__main-filters,
.collection-toolbar__main-sort {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease-in-out, height 0.35s ease-in-out, visibility 0.35s ease-in-out; }

/**
 * If there are active filters, we use this active class.
 */
.collection-toolbar--filters-is-open .collection-toolbar__main-filters,
.collection-toolbar--sort-is-open .collection-toolbar__main-sort {
  height: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease-in-out, height 0.35s ease-in-out, visibility 0.35s ease-in-out; }

.collection-toolbar .icon--plus {
  display: inline-block; }
.collection-toolbar .icon--minus {
  display: none; }

.collection-toolbar--filters-is-open .collection-toolbar__title--filter {
  color: #a3d1ba; }
@media only screen and (min-width: 1025px) {
  .collection-toolbar--filters-is-open .icon--plus {
    display: none; } }
@media only screen and (min-width: 1025px) {
  .collection-toolbar--filters-is-open .icon--minus {
    display: inline-block; } }

.collection-toolbar--sort-is-open .collection-toolbar__title--sort {
  color: #a3d1ba; }

/* Collection Filters
  ============================================================================*/
@media only screen and (max-width: 1024px) {
  .filter-group-list {
    display: flex;
    flex-direction: column; } }
@media only screen and (min-width: 1025px) {
  .filter-group-list {
    padding: 25px 0 0;
    flex: 1 0 auto;
    display: flex;
    flex-wrap: wrap; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .drawer--filters .link-wrapper {
    margin-top: 125px;
    margin-bottom: 43px;
    text-align: center; } }

/**
 * 1. Margin-top auto does not work on IE11. Use align-self instead.
 */
.collection-toolbar__title--clear {
  font-size: 0.875rem;
  line-height: 1.14;
  letter-spacing: 2.3px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .collection-toolbar__title--clear {
      line-height: 1;
      letter-spacing: 2px; } }
  @media only screen and (min-width: 1025px) {
    .collection-toolbar__title--clear {
      font-size: 0.75rem;
      line-height: 1.33;
      letter-spacing: 2px;
      flex: 0 1 auto;
      margin-top: auto;
      align-self: flex-end;
      /* [1] */
      margin-bottom: 9px; } }

.collection-toolbar__title--clear .icon {
  width: 14px;
  height: 14px;
  margin-top: -3px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .collection-toolbar__title--clear .icon {
      width: 13px;
      height: 12px;
      margin-top: -1px; } }
  @media only screen and (min-width: 1025px) {
    .collection-toolbar__title--clear .icon {
      width: 12px;
      height: 12px;
      margin-top: -2px; } }
  .collection-toolbar__title--clear .icon g {
    stroke: #a3d1ba; }

@media only screen and (min-width: 1025px) {
  .filter-group {
    flex: 0 0 25%; } }

.filter-group__title {
  margin-bottom: 36px;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 2.3px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .filter-group__title {
      text-align: center;
      font-size: 0.875rem;
      line-height: 1.57;
      letter-spacing: 2px; } }
  @media only screen and (min-width: 1025px) {
    .filter-group__title {
      text-align: left;
      margin-bottom: 15px;
      font-size: 0.75rem;
      line-height: 1.33;
      letter-spacing: 2px; } }

.filter-group__list {
  margin-bottom: 54px;
  list-style: none;
  display: flex;
  flex-wrap: wrap; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .filter-group__list {
      margin-bottom: 58px; } }
  @media only screen and (min-width: 1025px) {
    .filter-group__list {
      margin-bottom: 0;
      flex-direction: column;
      padding-right: 10px;
      max-height: 240px; } }
  @media only screen and (min-width: 1440px) {
    .filter-group__list {
      flex-direction: column;
      padding-right: 10px; } }

.filter-group-colour__list {
  padding-bottom: 54px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -15px -15px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .filter-group-colour__list {
      padding-bottom: 58px; } }
  @media only screen and (min-width: 1025px) {
    .filter-group-colour__list {
      justify-content: flex-start; } }

.filter-group-colour__list .filter-group__item {
  width: auto;
  margin: 15px 15px; }

.filter-group__item {
  margin-bottom: 13px;
  width: 50%; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .filter-group__item {
      margin-bottom: 9px; } }
  @media only screen and (min-width: 1025px) {
    .filter-group__item {
      margin-bottom: 9px;
      font-size: 1rem;
      letter-spacing: 0.5px;
      width: auto; } }

.filter-group__tag {
  position: relative;
  display: inline-block;
  padding-left: 22px;
  font-size: 0.75rem;
  text-transform: uppercase; }
  .filter-group__tag:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 12px;
    height: 12px;
    border: 1px solid black;
    background: transparent; }
  .filter-group__tag:after {
    content: "";
    position: absolute;
    top: 6px;
    left: 2px;
    width: 8px;
    height: 8px;
    opacity: 0;
    background: black;
    transition: opacity 0.35s ease-in-out; }

.filter-group__tag--swatch {
  text-indent: -9999px;
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%; }

.filter-group__tag--swatch:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid white;
  border-radius: 50%;
  margin: -1px;
  z-index: 2; }

.filter-group__tag--swatch:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid white;
  border-radius: 50%;
  z-index: 1;
  margin: -2px; }

.filter-group__item--active .filter-group__tag--swatch:after {
  border-color: #000; }

.filter-group__item--active .filter-group__tag:after {
  opacity: 1; }

.filter-group__item--disabled .filter-group__tag,
.filter-group__item--disabled .filter-group__tag--swatch {
  opacity: 0.4; }

.drawer--filters .drawer__body {
  padding: 0 24px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .drawer--filters .drawer__body {
      padding: 0 30px; } }

.collection-drawer__title {
  margin-top: 58px;
  margin-bottom: 54px;
  font-size: 1.5rem;
  line-height: 1.17;
  text-align: center;
  color: #ad924e; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .collection-drawer__title {
      margin-top: 153px;
      margin-bottom: 66px;
      font-size: 1.875rem;
      line-height: 1.33; } }

/* Collection Sort
  ============================================================================*/
.drawer--sort .drawer__close {
  margin-left: auto; }

.sort__list {
  list-style: none; }
  @media only screen and (min-width: 1025px) {
    .sort__list {
      margin-top: 25px; } }

.sort__item {
  margin-bottom: 36px;
  font-size: 0.875rem;
  letter-spacing: 2.3px;
  text-transform: uppercase;
  text-align: center; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .sort__item {
      margin-bottom: 56px;
      letter-spacing: 2px; } }
  @media only screen and (min-width: 1025px) {
    .sort__item {
      text-align: right;
      margin-bottom: 10px;
      font-size: 0.75rem;
      letter-spacing: 2px; } }

.sort__link {
  transition: color 0.35s ease-in-out; }
  .sort__link:hover {
    color: #6bd5a0; }

.sort__item--active .sort__link {
  color: #a3d1ba; }

/*==============================================================================
  #Collection Product Item
==============================================================================*/
.product-item__link-wrapper {
  display: block; }

/* Product Item Image
  ============================================================================*/
.product-item__image-wrapper {
  position: relative;
  display: block;
  background-color: #ebeae8; }

.product-item__image {
  display: block;
  width: 100%; }

.product-item__image--secondary {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  object-fit: cover;
  font-family: "object-fit: cover"; }

/**
 * If using a device with hover, we show the secondary image on hover
 */
@media (-moz-touch-enabled: 0), (hover: hover) {
  .product-item__image-wrapper--has-secondary-image:hover .product-item__image--primary {
    opacity: 0;
    transition: opacity 0.5s ease-in-out; }
  .product-item__image-wrapper--has-secondary-image:hover .product-item__image--secondary {
    opacity: 1;
    transition: opacity 0.5s ease-in-out; } }
.ie11 .product-item__image-wrapper--has-secondary-image:hover .product-item__image--primary {
  opacity: 0;
  transition: opacity 0.5s ease-in-out; }
.ie11 .product-item__image-wrapper--has-secondary-image:hover .product-item__image--secondary {
  opacity: 1;
  transition: opacity 0.5s ease-in-out; }

/**
 * If using a non-hover device, we hide our secondary image and ensure it does
 * not load
 */
@media (-moz-touch-enabled: 1), (hover: none) {
  html:not('.ie11') .product-item__image--secondary {
    display: none; } }
/* Product Item Info
  ============================================================================*/
.product-item__info {
  margin-top: 8px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-item__info {
      margin-top: 5px; } }
  @media only screen and (min-width: 1025px) {
    .product-item__info {
      margin-top: 11px; } }

.product-item__title, .product-item__price-wrapper {
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.5px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .product-item__title, .product-item__price-wrapper {
      font-size: 0.875rem;
      line-height: 1.57;
      letter-spacing: 0.58px; } }
  @media only screen and (min-width: 1025px) {
    .product-item__title, .product-item__price-wrapper {
      font-size: 0.875rem;
      line-height: 1.5;
      letter-spacing: 0.5px; } }

.product-item__price--current {
  margin-right: 0.5rem; }

.product-item__price--compare {
  text-decoration: line-through; }

/* Product Item Image sizes for List Collections template
  ============================================================================*/
.product-item__image--small {
  height: 250px; }

.product-item__image--medium {
  height: 300px; }

.product-item__image--large {
  height: 350px; }

.product-item__image--x-large {
  height: 400px; }

/*==============================================================================
  #Blog Posts Article Item
==============================================================================*/
.article-item__link-wrapper {
  display: block; }

.article-item__image-wrapper {
  position: relative;
  display: block; }

.article-item__image {
  display: block;
  width: 100%; }

.article-item__info {
  margin-top: 30px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .article-item__info {
      margin-top: 24px; } }
  @media only screen and (min-width: 1025px) {
    .article-item__info {
      margin-top: 35px; } }

.article-item__title {
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 23px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .article-item__title {
      margin-bottom: 18px;
      font-size: 1.125rem;
      line-height: normal;
      letter-spacing: 0.5px; } }
  @media only screen and (min-width: 1025px) {
    .article-item__title {
      margin-bottom: 20px;
      font-size: 1.25rem;
      line-height: 1.4;
      letter-spacing: 0.5px; } }

.article-item__excerpt {
  margin-bottom: 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .article-item__excerpt {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 1025px) {
    .article-item__excerpt {
      margin-bottom: 0; } }

.article-item__excerpt p {
  margin-bottom: 0; }

.article-item .link-wrapper {
  margin-top: 0; }

.blog-grid {
  margin-bottom: -55px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .blog-grid {
      margin-bottom: -75px; } }
  @media only screen and (min-width: 1025px) {
    .blog-grid {
      margin-bottom: -109px; } }

.blog-grid .article-item {
  margin-bottom: 55px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .blog-grid .article-item {
      margin-bottom: 75px; } }
  @media only screen and (min-width: 1025px) {
    .blog-grid .article-item {
      margin-bottom: 109px; } }

/*==============================================================================
  #BLOG
==============================================================================*/
/*==============================================================================
  #ARTICLE
  - Styling of articles handled by RTE and Page components
==============================================================================*/
/*==============================================================================
  #PAGE
==============================================================================*/
.o-page-bottom {
  margin-bottom: 89px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .o-page-bottom {
      margin-bottom: 122px; } }
  @media only screen and (min-width: 1025px) {
    .o-page-bottom {
      margin-bottom: 157px; } }

/* Flex Page Layout
  ============================================================================*/
/**
 * A flexbox layout consisting of a sidebar and content on medium and larger
 * screens. Currently used on account pages.
 */
@media only screen and (min-width: 768px) {
  .page__layout {
    display: flex;
    align-items: flex-start; } }

/**
 * Sidebar styling
 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .page__sidebar {
    width: 25%; } }
@media only screen and (min-width: 1025px) {
  .page__sidebar {
    width: 16.66666%; } }

/**
 * Main body styling
 */
.page__body {
  max-width: 942px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .page__body {
      width: 75%;
      padding-left: 77px; } }
  @media only screen and (min-width: 1025px) {
    .page__body {
      width: 83.33333%;
      padding-left: 61px; } }

/* Page Nav
  ============================================================================*/
/**
 * Navigation used on `page__sidebar` in conjunction with `page__layout`
 */
.page__nav-list {
  list-style: none; }

.page__nav-item {
  margin-bottom: 16px;
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 2px;
  text-transform: uppercase; }

.page__nav-item:last-child {
  margin-bottom: 0;
  margin-top: 30px; }

.page__nav-link--active {
  border-bottom: 1px solid; }

/* Page Header
  ============================================================================*/
/**
 * Page header structural properties
 */
.page__header {
  margin: 50px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .page__header {
      margin: 70px 0 84px; } }
  @media only screen and (min-width: 1025px) {
    .page__header {
      margin: 48px 0 90px; } }

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

/**
 * Modifier for larger spacing. Used on Search page.
 * 1. Header is 90px height. Logo is 52px height. 19px vertical spacing.
 *    100px - 19px = 81px
 */
.page__header--loose {
  margin: 50px 0; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .page__header--loose {
      margin: 70px 0 84px; } }
  @media only screen and (min-width: 1025px) {
    .page__header--loose {
      margin: 81px 0 100px; } }

/**
 * Flush modifiers to remove spacing
 * Used on account, orders, and orders pages
 */
.page__header--flush {
  margin: 0 !important; }

.page__header--flush-top {
  margin-top: 0 !important; }

/**
 * Used on about page
 */
.page__header--flush-bottom {
  margin-bottom: 0 !important; }

/**
 * Used on search template.
 */
.page__subheading {
  margin-top: 30px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .page__subheading {
      margin-top: 44px; } }
  @media only screen and (min-width: 1025px) {
    .page__subheading {
      margin-top: 20px; } }

/* Page Content
  ============================================================================*/
/* Page Hero
  ============================================================================*/
/**
 * A hero element for pages offering different heights in section settings.
 */
/**
 * This div is necessary only if the merchant chooses a natural image size.
 */
.page__heading + .page-hero__wrapper {
  margin-top: 34px;
  margin-bottom: 30px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .page__heading + .page-hero__wrapper {
      margin-top: 30px;
      margin-bottom: 35px; } }
  @media only screen and (min-width: 1025px) {
    .page__heading + .page-hero__wrapper {
      margin-top: 70px;
      margin-bottom: 40px; } }

.page-hero__wrapper {
  position: relative; }

.page-hero {
  margin: 57px 0;
  position: relative;
  overflow: hidden;
  background-color: #f2f0ef;
  color: #fff; }
  @media only screen and (min-width: 768px) {
    .page-hero {
      margin: 100px 0; } }

.page-hero--flush {
  margin: 0 !important; }

.page-hero--flush-top {
  margin-top: 0 !important; }

.page-hero--flush-bottom {
  margin-bottom: 0 !important; }

/**
 * Page header hero heights
 */
.page-hero--height--natural {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.page-hero--height--small {
  height: 160px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .page-hero--height--small {
      height: 310px; } }
  @media only screen and (min-width: 1025px) {
    .page-hero--height--small {
      height: 350px; } }

.page-hero--height--medium {
  height: 160px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .page-hero--height--medium {
      height: 400px;
      height: 30vw; } }
  @media only screen and (min-width: 1025px) {
    .page-hero--height--medium {
      height: 450px;
      height: 30vw; } }

.page-hero--height--large {
  height: 160px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .page-hero--height--large {
      height: 440px; } }
  @media only screen and (min-width: 1025px) {
    .page-hero--height--large {
      height: 500px; } }

.page-hero--height--x-large {
  height: 160px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .page-hero--height--x-large {
      height: 530px; } }
  @media only screen and (min-width: 1025px) {
    .page-hero--height--x-large {
      height: 600px; } }

.page-hero--height--full {
  height: 100vh; }

.page-hero__container {
  height: 100%;
  width: 100%; }

.page-hero__image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }

.page-hero__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

/*==============================================================================
  #About Page
==============================================================================*/
.about-block {
  margin: 34px 0; }
  @media only screen and (min-width: 1025px) {
    .about-block {
      margin: 60px 0; } }

@media only screen and (min-width: 1025px) {
  .about-block--first {
    margin-top: 34px; } }

.about__intro-text {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.57px;
  text-align: center; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .about__intro-text {
      letter-spacing: 0.44px;
      padding: 0 50px; } }
  @media only screen and (min-width: 1025px) {
    .about__intro-text {
      font-size: 1.125rem;
      letter-spacing: 0.5px;
      padding: 0 91px; } }

.about__text-heading {
  font-size: 1rem;
  line-height: 1;
  letter-spacing: normal;
  font-family: "SangBleuSerifLight", serif;
  margin-bottom: 21px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .about__text-heading {
      font-size: 1.125rem;
      letter-spacing: 0.5px;
      margin-bottom: 25px; } }
  @media only screen and (min-width: 1025px) {
    .about__text-heading {
      font-size: 1.25rem;
      line-height: 1;
      letter-spacing: 0.5px;
      margin-bottom: 22px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .about__text-text {
    padding: 0 50px; } }
@media only screen and (min-width: 1025px) {
  .about__text-text {
    padding: 0 91px; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .about__single-image--small .about__image-wrapper {
    padding: 0 50px; } }
@media only screen and (min-width: 1025px) {
  .about__single-image--small .about__image-wrapper {
    padding: 0 186px; } }

.about__images {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -4px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .about__images {
      margin: 0 -8px; } }
  @media only screen and (min-width: 1025px) {
    .about__images {
      margin: 0 -20px; } }

.about__images .about__image-wrapper {
  width: 33.333333%;
  margin: 0 4px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .about__images .about__image-wrapper {
      margin: 0 8px; } }
  @media only screen and (min-width: 1025px) {
    .about__images .about__image-wrapper {
      margin: 0 20px; } }

/*==============================================================================
  #FAQ / Delivery Page
==============================================================================*/
.faq__heading {
  margin-top: 55px;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 3px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .faq__heading {
      margin-top: 48px;
      font-size: 1.125rem;
      line-height: normal;
      letter-spacing: 0.5px;
      margin-bottom: 14px; } }
  @media only screen and (min-width: 1025px) {
    .faq__heading {
      margin-top: 50px;
      font-size: 1.25rem;
      letter-spacing: 0.5px;
      margin-bottom: 18px; } }
  .faq__heading:first-child {
    margin-top: 0; }

.theme-claridges .faq__heading {
  color: #ad924e; }

.faq__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }

.faq__question {
  display: block;
  width: 100%;
  position: relative;
  padding: 19px 0;
  padding-right: 20px;
  color: rgba(0, 0, 0, 0.5);
  text-align: left; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .faq__question {
      padding: 16px 0; } }
  @media only screen and (min-width: 1025px) {
    .faq__question {
      padding: 15px 0; } }

.faq__icon {
  position: absolute;
  right: 0;
  top: 19px; }
  .faq__icon svg {
    width: 12px;
    height: 12px; }
  .faq__icon polyline {
    stroke: #a3d1ba; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .faq__icon {
      top: 16px; }
      .faq__icon svg {
        width: 14px;
        height: 14px; } }
  @media only screen and (min-width: 1025px) {
    .faq__icon {
      top: 15px; }
      .faq__icon svg {
        width: 14px;
        height: 14px; } }

.faq__item .collapsible__panel-content {
  padding-top: 12px;
  padding-bottom: 22px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .faq__item .collapsible__panel-content {
      padding-top: 4px;
      padding-bottom: 16px; } }
  @media only screen and (min-width: 1025px) {
    .faq__item .collapsible__panel-content {
      padding-top: 12px;
      padding-bottom: 27px; } }
  @media only screen and (max-width: 767px) {
    .faq__item .collapsible__panel-content table {
      width: 767px;
      margin-bottom: 20px; } }
    @media only screen and (max-width: 767px) and (max-width: 767px) {
      .faq__item .collapsible__panel-content table td.fixed {
        background: #f9f8f6;
        min-width: 150px;
        max-width: 150px;
        width: 150px;
        left: 0;
        position: sticky;
        position: -webkit-sticky;
        border-left: none !important; }
        .faq__item .collapsible__panel-content table td.fixed:before {
          width: 100%;
          height: 100%;
          border: solid 1px black;
          content: "";
          position: absolute;
          left: 0;
          top: 1px;
          border-top: none; }
        .faq__item .collapsible__panel-content table td.fixed.bg {
          background: #a3d1ba; } }

/*==============================================================================
  #CONTACT PAGE
==============================================================================*/
.contact__section + .contact__section {
  margin-top: 56px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .contact__section + .contact__section {
      margin-top: 70px; } }
  @media only screen and (min-width: 1025px) {
    .contact__section + .contact__section {
      margin-top: 33px; } }

.contact__title {
  font-family: "SangBleuSerifLight", serif;
  text-transform: none;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 37px;
  text-align: center; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .contact__title {
      font-size: 1.5625rem;
      line-height: 1.4;
      margin-bottom: 47px; } }
  @media only screen and (min-width: 1025px) {
    .contact__title {
      font-size: 1.25rem;
      line-height: 1.4;
      letter-spacing: 0.5px;
      margin-bottom: 40px; } }

.contact__title--form {
  margin-bottom: 19px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .contact__title--form {
      margin-bottom: 29px; } }
  @media only screen and (min-width: 1025px) {
    .contact__title--form {
      margin-bottom: 22px; } }

/*==============================================================================
  #EXPERIENCES PAGE
==============================================================================*/
.experience__link-wrapper {
  display: block; }

.experience__image-wrapper {
  position: relative;
  display: block; }

.experience__image {
  display: block;
  width: 100%; }

.experience__info {
  margin-top: 30px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .experience__info {
      margin-top: 24px; } }
  @media only screen and (min-width: 1025px) {
    .experience__info {
      margin-top: 35px; } }

.experience__title {
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 23px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .experience__title {
      margin-bottom: 18px;
      font-size: 1.125rem;
      line-height: normal;
      letter-spacing: 0.5px; } }
  @media only screen and (min-width: 1025px) {
    .experience__title {
      margin-bottom: 20px;
      font-size: 1.25rem;
      line-height: 1.4;
      letter-spacing: 0.5px; } }

.experience__excerpt {
  margin-bottom: 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .experience__excerpt {
      margin-bottom: 30px; } }
  @media only screen and (min-width: 1025px) {
    .experience__excerpt {
      margin-bottom: 0; } }

.experience__excerpt p {
  margin-bottom: 0; }

.experience .link-wrapper {
  margin-top: 0; }

.experience-grid {
  margin-bottom: -55px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .experience-grid {
      margin-bottom: -75px; } }
  @media only screen and (min-width: 1025px) {
    .experience-grid {
      margin-bottom: -109px; } }

.experience-grid .experience {
  margin-bottom: 55px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .experience-grid .experience {
      margin-bottom: 75px; } }
  @media only screen and (min-width: 1025px) {
    .experience-grid .experience {
      margin-bottom: 109px; } }

/*==============================================================================
  #NEWSLETTER PAGE
==============================================================================*/
.newsletter-page__form-wrapper {
  margin-top: 30px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .newsletter-page__form-wrapper {
      margin-top: 52px; } }
  @media only screen and (min-width: 1025px) {
    .newsletter-page__form-wrapper {
      margin-top: 22px; } }

@keyframes fade-in {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes shimmer {
  0% {
    background-position: -150% 0; }

  100% {
    background-position: 150% 0; } }

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

  100% {
    opacity: 0; } }

.newsletter-page__form {
  position: relative;
  min-height: 400px; }

.newsletter-page__form-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  min-height: 400px;
  width: 100%;
  overflow: hidden;
  animation: shimmer 2.2s linear infinite;
  background: #fdfbfa;
  background: linear-gradient(100deg, #fdfbfa 40%, #f9f2ef 63%, #fdfbfa 79%);
  background-size: 400% 100%; }

.globo-formbuilder + .newsletter-page__form-placeholder {
  animation: fade-out .5s linear forwards; }

.newsletter-page__form .globo-formbuilder {
  animation: fade-in 1s linear forwards; }

/*==============================================================================
  #PAGE TEMPLATE SPECIFIC STYLING
==============================================================================*/
/**
 * In general, tables do not wrap text and use an overflow scroll
 * container. This prevents a large column of text on mobile.
 * We reset this to wrap for tables on our various page templates.
 */
.imported-content .table, .imported-content .rte table, .rte .imported-content table,
.imported-content table {
  white-space: normal;
  /* [1] */ }

.imported-content tr:first-child td {
  background-color: #a3d1ba;
  color: white;
  text-align: center; }
  @media only screen and (min-width: 1025px) {
    .imported-content tr:first-child td {
      white-space: nowrap; } }

.theme-berkeley .imported-content tr:first-child td {
  color: white; }

.theme-claridges .imported-content tr:first-child td {
  color: black; }

.imported-content .table th:first-child, .imported-content .rte table th:first-child, .rte .imported-content table th:first-child, .rte table th:first-child, .table td:first-child, .rte table td:first-child, .rte table td:first-child {
  padding-left: 15px; }

.imported-content .table th:last-child, .imported-content .rte table th:last-child, .rte .imported-content table th:last-child, .rte table th:last-child, .table td:last-child, .rte table td:last-child, .rte table td:last-child {
  padding-right: 15px; }

.imported-content .table th, .imported-content .rte table th, .rte .imported-content table th, .rte table th, .table td, .rte table td, .rte table td {
  border: 1px solid black !important;
  text-align: left;
  padding: 15px; }

.imported-content .table th, .imported-content .rte table th, .rte .imported-content table th, .rte table th, .table td, .rte table td, .rte table td,
.imported-content .table p,
.imported-content .rte table p,
.rte .imported-content table p, .imported-content table p {
  font-size: 0.875rem; }

.imported-content em {
  font-size: 0.75rem;
  line-height: 1.57; }

/*==============================================================================
  #Login Pages
==============================================================================*/
/**
 * On larger screens we use 2 column layout of form and image using Flexbox.
 * 1. Set as flexbox
 * 2. Add min-height fallback in px for non vh supporting browsers
 * 3. Add min-height minus header
 */
@media only screen and (min-width: 1025px) {
  .page-flex {
    display: flex;
    min-height: 700px;
    min-height: calc(100vh - 100px); } }

@media only screen and (min-width: 1025px) {
  .page-flex__item {
    width: 50%; } }

/**
 * Add 100px bottom padding to match 100px bottom margin on
 * breadcrumbs.
 */
@media only screen and (min-width: 1025px) {
  .page-flex__item:first-child {
    padding-bottom: 100px; } }

/**
 * 1. Ensure bg image wrapper is 100% height
 */
.page-flex__bg-image-wrapper {
  height: 100%; }

/**
 * 1. Ensure image fills container
 * 2. Set bg properties
 */
.page-flex__bg-image {
  width: 100%;
  /* [1] */
  height: 100%;
  /* [1] */
  background-repeat: no-repeat;
  /* [2] */
  background-size: cover;
  background-position: center; }

/**
IE form dropdown fix
**/
select:focus::-ms-value {
  background-color: white;
  color: black; }

/*==============================================================================
  #Privacy Page
==============================================================================*/
.page-privacy-policy .rte ul {
  margin-left: 24px; }

.page-privacy-policy p span {
  display: inline-block; }

/*==============================================================================
  #Account Pages
==============================================================================*/
.account .breadcrumbs {
  margin-bottom: 48px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .account .breadcrumbs {
      margin-bottom: 66px; } }
  @media only screen and (min-width: 1025px) {
    .account .breadcrumbs {
      margin-bottom: 100px; } }

.account__title {
  font-family: "SangBleuSerifLight", serif;
  text-transform: none;
  color: #ad924e;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 21px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .account__title {
      font-size: 1.5625rem;
      line-height: 1.4;
      margin-bottom: 45px; } }
  @media only screen and (min-width: 1025px) {
    .account__title {
      font-size: 1.25rem;
      line-height: 1;
      letter-spacing: 0.5px;
      margin-bottom: 34px; } }

@media only screen and (max-width: 767px) {
  .account__title--small {
    margin-bottom: 31px; } }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .account__title--small {
    font-size: 1.125rem;
    letter-spacing: 0.5;
    margin-bottom: 29px; } }

/**
 * Ensure button links have matching line height to paragraph text
 */
@media only screen and (max-width: 767px) {
  .account button.link {
    line-height: 1.5; } }

/* Account page
  ============================================================================*/
.account__details {
  margin-bottom: 38px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .account__details {
      margin-bottom: 52px;
      padding-bottom: 64px; } }
  @media only screen and (min-width: 1025px) {
    .account__details {
      margin-bottom: 40px;
      padding-bottom: 30px; } }

.account__details .link-wrapper {
  margin-top: 29px; }
  @media only screen and (min-width: 1025px) {
    .account__details .link-wrapper {
      margin-top: 41px; } }

/* Account page Orders
  ============================================================================*/
.account__orders .link-wrapper {
  padding-top: 25px;
  border-top: 1px solid rgba(0, 0, 0, 0.2); }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .account__orders .link-wrapper {
      margin-top: 0; } }
  @media only screen and (min-width: 1025px) {
    .account__orders .link-wrapper {
      margin-top: 0; } }

.account__orders .link-wrapper + .link-wrapper {
  border-bottom: 0;
  padding-bottom: 0;
  margin-top: 34px; }

.account .table, .account .rte table, .rte .account table {
  table-layout: fixed;
  border-collapse: inherit; }
  .account .table tr:first-child, .account .rte table tr:first-child, .rte .account table tr:first-child {
    border: none !important; }
  .account .table th, .account .rte table th, .rte .account table th {
    text-transform: none;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 23px; }
  .account .table td, .account .rte table td, .rte .account table td {
    white-space: normal;
    border: none !important;
    text-align: center;
    font-family: "Lato", "Trebuchet MS", sans-serif;
    font-size: 16px; }
    .account .table td:first-child, .account .rte table td:first-child, .rte .account table td:first-child {
      text-align: left;
      padding-left: 0; }
  .account .table tfoot tr.tr--subtotal td, .account .rte table tfoot tr.tr--subtotal td, .rte .account table tfoot tr.tr--subtotal td {
    border-top: solid 1px rgba(0, 0, 0, 0.2) !important;
    padding: 14px 0 0; }
  .account .table tfoot tr.tr--subtotal-last td, .account .rte table tfoot tr.tr--subtotal-last td, .rte .account table tfoot tr.tr--subtotal-last td {
    padding-top: 0; }
  .account .table tfoot tr.tr--total td, .account .rte table tfoot tr.tr--total td, .rte .account table tfoot tr.tr--total td {
    border-top: solid 1px rgba(0, 0, 0, 0.2) !important;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2) !important;
    padding: 14px 0 16px; }

.account .table__section--first td {
  padding-top: 23px; }

.account .table__section--last td {
  padding-bottom: 23px; }

.account .tr--subtotal td {
  padding-top: 23px; }

.account .tr--total td {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-top: 23px;
  padding-bottom: 23px; }

.account .tr--subtotal-last td {
  padding-bottom: 23px; }

/**
 * On mobile, order summary and order items summary are not listed in a table.
 * They are stacked into blocks.
 */
.order-table__item {
  position: relative;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }

.order-table__summary {
  padding-right: 30px; }

.order-table__link {
  position: absolute;
  top: -2px;
  right: 0; }

.order-table__flex {
  display: flex;
  justify-content: space-between; }
  .order-table__flex span + span {
    padding-left: 10px; }

.order-table__flex + .order-table__flex {
  margin-top: 12px; }

.order__fulfillment {
  margin-top: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1rem;
  line-height: 1.5; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .order__fulfillment {
      margin-top: 24px; } }
  @media only screen and (min-width: 1025px) {
    .order__fulfillment {
      margin-top: 14px; } }

@media only screen and (max-width: 767px) {
  .order__address--shipping {
    margin-top: 54px; } }

.order__address p:last-child {
  margin-bottom: 0; }

/*==============================================================================
  #Order Template
==============================================================================*/
.order__addresses {
  margin-top: 57px; }
  .order__addresses .order__address {
    margin-bottom: 35px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .order__addresses {
      margin-top: 70px; } }
  @media only screen and (min-width: 1025px) {
    .order__addresses {
      margin-top: 80px; } }

.order__status {
  margin-bottom: 24px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .order__status {
      margin-bottom: 20px; } }
  @media only screen and (min-width: 1025px) {
    .order__status {
      margin-bottom: 28px; } }

@media only screen and (max-width: 767px) {
  .template-order .page__header .account__title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px; } }

.order-table {
  border-bottom: solid 1px rgba(0, 0, 0, 0.2);
  padding-bottom: 34px; }

/*==============================================================================
  #Addresses Template
==============================================================================*/
/**
 * On smaller screens add vertical spacing between address items
 */
@media only screen and (max-width: 767px) {
  .addresses__list .grid__item + .grid__item .addresses__item {
    margin-top: 34px;
    padding-top: 38px;
    border-top: 1px solid rgba(0, 0, 0, 0.2); } }

/**
 * On larger screens, add spacing between address items
 */
@media only screen and (min-width: 768px) {
  .addresses__item {
    margin-top: 52px;
    padding-top: 52px;
    border-top: 1px solid rgba(0, 0, 0, 0.2); } }

/**
 * Remove top spacing from first two items on large screens, as we already
 * have existing margin.
 */
@media only screen and (min-width: 768px) {
  .addresses__list .grid--uniform .grid__item:nth-child(1) .addresses__item,
  .addresses__list .grid--uniform .grid__item:nth-child(2) .addresses__item {
    margin-top: 0;
    border-top: 0;
    padding-top: 0; } }

/**
 * Styling of last address item on mobile
 */
@media only screen and (max-width: 767px) {
  .addresses__item--last {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 34px; } }

.addresses__action-list {
  margin-top: 29px; }

.addresses__action-link--edit {
  margin-right: 14px; }

.addresses__action-link--delete {
  margin-left: 14px; }

/**
 * Styling of address modals
 */
.modal--address .modal__body {
  padding: 0 20px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .modal--address .modal__body {
      padding: 0; } }
  @media only screen and (min-width: 1025px) {
    .modal--address .modal__body {
      padding: 0; } }

.modal--address .form {
  margin-top: 118px;
  margin-bottom: 90px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .modal--address .form {
      max-width: 464px;
      margin-top: 176px;
      margin-bottom: 77px; } }
  @media only screen and (min-width: 1025px) {
    .modal--address .form {
      max-width: 535px;
      margin-top: 100px;
      margin-bottom: 140px; } }

.modal--address .form__title {
  font-size: 1.5rem;
  line-height: 1.17; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .modal--address .form__title {
      font-size: 1.5625rem;
      line-height: 1.4; } }
  @media only screen and (min-width: 1025px) {
    .modal--address .form__title {
      font-size: 1.25rem;
      line-height: 1.4;
      letter-spacing: 0.5px; } }

.modal--address .modal__close {
  top: 20px;
  right: 20px; }
  .modal--address .modal__close .icon {
    color: #a3d1ba; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .modal--address .modal__close {
      top: 30px;
      right: 30px; } }
  @media only screen and (min-width: 1025px) {
    .modal--address .modal__close {
      top: 40px;
      right: 40px; } }

label.error {
  color: #a3d1ba; }

/*==============================================================================
  #Captcha
==============================================================================*/
.shopify-challenge__container {
  margin-top: 84px;
  margin-bottom: 200px;
  margin-bottom: 50vh;
  text-align: center; }
  @media only screen and (min-width: 1025px) {
    .shopify-challenge__container {
      margin-top: 120px;
      margin-bottom: 300px;
      margin-bottom: 60vh; } }

/*==============================================================================
  #Password
==============================================================================*/
.simple-header {
  padding: 30px 0;
  text-align: center;
  position: relative;
  z-index: 1; }

.password-page__image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }

.password-page__content {
  position: relative;
  z-index: 1; }

.password-page__main-wrapper {
  margin-top: 1.5rem; }
  @media only screen and (min-width: 768px) {
    .password-page__main-wrapper {
      margin-top: 2rem; } }

.password-page__main {
  max-width: 580px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2rem; }

.password-page__message {
  margin: 0 0 1.5rem; }
  @media only screen and (min-width: 768px) {
    .password-page__message {
      margin: 0 0 2rem; } }

.password-page__social {
  margin-bottom: 2.5rem; }

/*==============================================================================
  #Gift Card
==============================================================================*/
.giftcard__content {
  padding-bottom: 4rem; }

.giftcard__main {
  max-width: 480px;
  margin: 0 auto; }

.giftcard__header {
  padding: 2rem; }

.giftcard__amount {
  margin: 0; }

.giftcard__tag {
  margin-bottom: 1.5rem; }

.giftcard__instructions {
  margin-bottom: 1rem; }

.giftcard__image-wrapper {
  position: relative; }

.giftcard__image {
  display: inline-block;
  margin: 0 auto; }

.giftcard__code {
  position: absolute;
  bottom: 1rem;
  text-align: center;
  width: 100%;
  z-index: 10;
  font-size: 1.25rem; }

.giftcard__code-inner {
  display: inline-block;
  vertical-align: baseline;
  background-color: #fff;
  padding: 0.5rem;
  max-width: 450px;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }

.giftcard__code-text {
  font-size: 1.5rem;
  text-transform: uppercase;
  border: 1px dashed;
  padding: 0.5rem;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1; }

.giftcard__qr-code {
  margin-top: 2rem; }
  .giftcard__qr-code img {
    margin: 0 auto; }

.giftcard__actions {
  margin-top: 2rem; }

.action-link {
  display: inline-block;
  margin-top: 1rem; }

.action-link__print {
  display: block;
  vertical-align: baseline;
  width: 17px;
  height: 17px;
  vertical-align: middle;
  margin: 0 auto;
  opacity: 1;
  background-image: url("/cdn/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png");
  background-repeat: no-repeat;
  background-position: 0 0; }
  .svg .action-link__print {
    background-image: url("/cdn/s/assets/gift-card/icon-print-6a10b2fb86d223b8c783c9696eaf4c31.svg"); }
  .action-link:hover .action-link__print {
    opacity: 0.4; }

/*==============================================================================
  #APPS
==============================================================================*/
/*==============================================================================
  #Powerful Form Builder
==============================================================================*/
/**
 * We use Globo Powerful Form Editor app. It shows a shortcode for a brief
 * period of time before loading the form. This hides the shortcode.
 */
.contact__form,
.newsletter-page__form {
  color: transparent;
  font-size: 0; }

/**
 * Container
 */
.globo-form-app {
  max-width: none !important;
  margin: 0 !important;
  background-color: white !important; }
  .globo-form-app .panels + p {
    opacity: 0;
    visibility: hidden; }

/**
 * Form labels
 */
.globo-form-app .globo-form-control label[for].classic-label {
  display: none; }

.globo-form-app .globo-form-control label[for=file].classic-label {
  display: block !important;
  margin-top: 20px !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.5px !important;
  color: black !important; }

.globo-form-app .globo-form-control input[type=file] {
  color: transparent !important; }

.globo-form-app .globo-form-control input[type=file]::-webkit-file-upload-button {
  visibility: hidden !important; }

.globo-form-app .globo-form-control input[type=file]::before {
  content: 'Attach a File' !important;
  display: inline-block !important;
  padding: 17px 24px !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  outline: none !important;
  white-space: nowrap !important;
  -webkit-user-select: none !important;
  cursor: pointer !important;
  font-family: "SangBleuSerifLight", serif !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  text-align: center !important;
  background-color: #a3d1ba !important;
  color: black !important;
  -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out !important; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .globo-form-app .globo-form-control input[type=file]::before {
      font-size: 1.125rem !important; } }
  @media only screen and (min-width: 1025px) {
    .globo-form-app .globo-form-control input[type=file]::before {
      font-size: 1.25rem !important; } }

.globo-form-app .globo-form-control input[type=file]:hover::before {
  background-color: #6bd5a0 !important; }

.globo-form-app .globo-form-control input[type=file]:active::before {
  background-color: #6bd5a0 !important; }

/**
 * Error messages
 */
.globo-form-app .globo-form-control .help-block.error {
  color: #a3d1ba !important; }

/**
 * Form items
 */
.globo-form-app .globo-form-control {
  margin-bottom: 0 !important; }

/**
 * Form fields
 */
.globo-form-app .globo-form-control input,
.globo-form-app .globo-form-control select,
.globo-form-app .globo-form-control textarea {
  -webkit-appearance: none !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  background-color: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5) !important;
  border-radius: 0 !important;
  line-height: 1.57 !important;
  height: auto !important;
  color: black !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  resize: none; }
  .globo-form-app .globo-form-control input::-webkit-input-placeholder,
  .globo-form-app .globo-form-control select::-webkit-input-placeholder,
  .globo-form-app .globo-form-control textarea::-webkit-input-placeholder {
    color: black;
    opacity: 0.5; }
  .globo-form-app .globo-form-control input::-moz-placeholder,
  .globo-form-app .globo-form-control select::-moz-placeholder,
  .globo-form-app .globo-form-control textarea::-moz-placeholder {
    color: black;
    opacity: 0.5; }
  .globo-form-app .globo-form-control input:-ms-input-placeholder,
  .globo-form-app .globo-form-control select:-ms-input-placeholder,
  .globo-form-app .globo-form-control textarea:-ms-input-placeholder {
    color: black;
    opacity: 0.5; }
  .globo-form-app .globo-form-control input::placeholder,
  .globo-form-app .globo-form-control select::placeholder,
  .globo-form-app .globo-form-control textarea::placeholder {
    color: black;
    opacity: 0.5; }

/**
 * Select styling
 * Add chevron icons
 */
.globo-form-app .globo-form-control select {
  background-image: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/chevron-down-claridges.png?v=100636956963661944581771411948");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-color: transparent;
  background-size: 12px;
  color: color-body-text !important; }

.globo-form-app .globo-form-control select:invalid,
.globo-form-app .globo-form-control select option[value=""] {
  color: rgba(0, 0, 0, 0.5) !important; }

/**
 * Button styling
 */
/* 2024 - add wizard__footer styles */
.globo-form-app .footer button.submit,
.globo-form-app .footer button.action.loading .spinner,
.globo-form-app .wizard__footer button.submit,
.globo-form-app .wizard__footer button.action.loading .spinner {
  background-color: #a3d1ba !important;
  color: black !important; }

.globo-form-app .footer button.action:hover,
.globo-form-app .wizard__footer button.action:hover {
  background-color: #6bd5a0 !important;
  box-shadow: none !important;
  -webkit-filter: none !important;
  filter: none !important; }

.globo-form-app .footer button.action,
.globo-form-app .wizard__footer button.action {
  position: relative !important;
  /* display: inline-block !important; */
  padding: 17px 24px !important;
  width: 100% !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  font-family: "SangBleuSerifLight", serif !important;
  font-size: 16;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  text-align: center !important;
  -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out !important; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .globo-form-app .footer button.action,
    .globo-form-app .wizard__footer button.action {
      font-size: 1.125rem !important; } }
  @media only screen and (min-width: 1025px) {
    .globo-form-app .footer button.action,
    .globo-form-app .wizard__footer button.action {
      font-size: 1.25rem !important; } }

/**
 * Hide app credit
 */
.globo-form-app .block-container + p {
  display: none; }

/**
 * Form submit message styling
 */
.globo-form-app .message {
  width: 100%;
  padding: 10px;
  background: #f4f6f8;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  font-size: 1rem !important;
  padding: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  margin-top: 25px !important; }

.globo-form-app .message.error {
  color: #c00;
  background: #fdf3f0;
  color: #a3d1ba !important;
  background-color: transparent !important; }

.globo-form-app .message.success {
  background: #eff7ed;
  color: #212b36;
  color: #a3d1ba !important;
  background-color: transparent !important; }

.globo-form-app .message .content {
  margin: 0; }

.globo-form-app .message .dismiss {
  width: 14px;
  height: 14px;
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 12px;
  display: none !important; }

.globo-form-app .message + .footer {
  margin-top: 24px; }

/* Product size guide
  ============================================================================*/
.rte .size-guide-table p {
  font-size: 14px;
  line-height: 22px; }
.rte .size-guide-table .table-wrapper-overflow {
  margin-bottom: 40px;
  padding-bottom: 20px; }
@media only screen and (max-width: 767px) {
  .rte .size-guide-table table {
    width: 767px; } }
.rte .size-guide-table table tr {
  border: none; }
.rte .size-guide-table table th {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-color: gainsboro !important;
  padding: 0 0 5px 0;
  text-align: center; }
  .rte .size-guide-table table th:first-child {
    text-align: left; }
  @media only screen and (max-width: 767px) {
    .rte .size-guide-table table th.fixed {
      background: white;
      min-width: 110px;
      max-width: 110px;
      width: 110px;
      left: 0;
      position: sticky;
      position: -webkit-sticky;
      z-index: 1; }
      .rte .size-guide-table table th.fixed:after {
        width: 100%;
        height: 1px;
        background: #dcdcdc;
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px; } }
.rte .size-guide-table table td {
  border: none !important;
  padding: 8px 0 0 0;
  text-align: center; }
  .rte .size-guide-table table td:first-child {
    text-align: left; }
  @media only screen and (max-width: 767px) {
    .rte .size-guide-table table td.fixed {
      background: white;
      min-width: 110px;
      max-width: 110px;
      width: 110px;
      left: 0;
      position: sticky;
      position: -webkit-sticky; } }

/*==============================================================================
  #Customer Fields App
==============================================================================*/
/**
 * Form element. Does not have a class so we need to target by ID.
 */
form#create_customer {
  width: 100%;
  margin: 0 auto;
  max-width: 450px; }

/**
 * Outermost element within form
 */
.cf-form-inner {
  animation: cf-fadein 500ms cubic-bezier(0.11, 0.33, 0.24, 1); }

.cf-form-step {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 -.5em;
  margin: 0 !important; }

/**
 * Outermost container element for each field. Sets a 100% width.
 */
/**
 * Wrapping element for a field that sets spacing between fields.
 * 1. Remove margin and padding but keep rest of styles.
 */
.cf-field {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid transparent;
  box-sizing: border-box;
  align-items: flex-start;
  position: relative; }

/**
 * Styling of form input elements
 */
.cf-field input[type=email], .cf-field input[type=number], .cf-field input[type=password], .cf-field input[type=tel], .cf-field input[type=text], .cf-field textarea {
  width: 100%;
  max-width: none;
  text-align: left;
  -webkit-appearance: none !important;
  display: block !important;
  padding: 18px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5) !important;
  border-radius: 0 !important;
  line-height: 1.57 !important;
  resize: none !important; }
  .cf-field input[type=email]::-webkit-input-placeholder, .cf-field input[type=number]::-webkit-input-placeholder, .cf-field input[type=password]::-webkit-input-placeholder, .cf-field input[type=tel]::-webkit-input-placeholder, .cf-field input[type=text]::-webkit-input-placeholder, .cf-field textarea::-webkit-input-placeholder {
    color: black;
    opacity: 0.5; }
  .cf-field input[type=email]::-moz-placeholder, .cf-field input[type=number]::-moz-placeholder, .cf-field input[type=password]::-moz-placeholder, .cf-field input[type=tel]::-moz-placeholder, .cf-field input[type=text]::-moz-placeholder, .cf-field textarea::-moz-placeholder {
    color: black;
    opacity: 0.5; }
  .cf-field input[type=email]:-ms-input-placeholder, .cf-field input[type=number]:-ms-input-placeholder, .cf-field input[type=password]:-ms-input-placeholder, .cf-field input[type=tel]:-ms-input-placeholder, .cf-field input[type=text]:-ms-input-placeholder, .cf-field textarea:-ms-input-placeholder {
    color: black;
    opacity: 0.5; }
  .cf-field input[type=email]::placeholder, .cf-field input[type=number]::placeholder, .cf-field input[type=password]::placeholder, .cf-field input[type=tel]::placeholder, .cf-field input[type=text]::placeholder, .cf-field textarea::placeholder {
    color: black;
    opacity: 0.5; }

.cf-field textarea {
  min-height: 184px; }

/**
 * Styling of select elements
 */
.cf-field__select, .cf-field__select select {
  width: 100%; }

.cf-select-wrap {
  position: relative; }

.cf-select-wrap select {
  padding-right: 30px !important;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  display: block !important;
  width: 100% !important;
  padding: 18px 0 !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5) !important;
  border-radius: 0 !important;
  line-height: 1.57 !important;
  height: auto !important;
  color: black !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  background-image: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/chevron-down-claridges.png?v=100636956963661944581771411948") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-color: transparent !important;
  background-size: 12px !important;
  color: color-body-text !important;
  padding-right: 0 !important; }

.cf-down-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid;
  display: none !important; }

.cf-select-wrap .cf-down-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

/**
 * Error styling for invalid field
 */
.cf-field[data-cf-invalid=true] {
  background: #fdf5f5;
  border-color: #ce2525;
  border-radius: 3px;
  background: transparent !important;
  border: 0 !important; }

/**
 * Styling of field errors list
 */
.cf-field[data-cf-invalid=true] .cf-field-errors {
  margin: 8px 0 0 2px;
  padding: 0;
  margin-left: 0 !important; }

.cf-field[data-cf-invalid=true] .cf-field-errors li {
  color: #a3d1ba !important;
  margin: 0 0 .5em;
  list-style-type: none; }

/**
 * Form Actions section including button and errors summary if applicable
 */
.cf-fields-wrapper .cf-form-actions, .cf-form-inner .cf-form-actions {
  margin-top: 2em; }

/**
 * Errors summary wrapper
 */
.cf-fields-wrapper .cf-form-actions .cf-step-invalid, .cf-form-inner .cf-form-actions .cf-step-invalid {
  margin: 15px 0; }

/**
 * Styling of errors summary
 */
.cf-fields-wrapper .cf-form-actions .cf-step-invalid .cf-error-message, .cf-form-inner .cf-form-actions .cf-step-invalid .cf-error-message {
  display: inline-block;
  background: #fdf5f5;
  border: 1px solid #ce2525;
  color: #ce2525;
  border-radius: 3px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 1em;
  background-color: transparent !important;
  border: 0 !important;
  color: #a3d1ba !important;
  padding: 0 0 20px !important;
  font-weight: normal !important; }

/**
 * Errors summary p tags
 */
.cf-fields-wrapper .cf-form-actions .cf-step-invalid .cf-error-message p, .cf-form-inner .cf-form-actions .cf-step-invalid .cf-error-message p {
  margin: 0; }

/**
 * Errors summary list
 */
/**
 * Structure for each error
 */
.cf-fields-wrapper .cf-form-actions .cf-step-invalid .cf-error-message .cf-field-errors, .cf-form-inner .cf-form-actions .cf-step-invalid .cf-error-message .cf-field-errors {
  margin-top: 1em; }

/**
 * A B tag is used for the title of each error field
 */
.cf-fields-wrapper .cf-form-actions .cf-step-invalid .cf-error-message .cf-field-errors, .cf-form-inner .cf-form-actions .cf-step-invalid .cf-error-message .cf-field-errors b {
  font-weight: normal !important;
  color: #a3d1ba !important; }

/**
 * Styling of list of errors for each invalid field
 */
.cf-fields-wrapper .cf-form-actions .cf-step-invalid .cf-error-message ul, .cf-form-inner .cf-form-actions .cf-step-invalid .cf-error-message ul {
  margin-top: .5em;
  list-style: disc;
  font-weight: 400;
  margin-bottom: 0;
  padding-left: 1.2em;
  list-style: none !important;
  padding-left: 0 !important; }

/**
 * Styling of each list element that is invalid for an invalid field
 */
.cf-fields-wrapper .cf-form-actions .cf-step-invalid .cf-error-message ul, .cf-form-inner .cf-form-actions .cf-step-invalid .cf-error-message li {
  margin-bottom: 0.5em !important; }

/**
 * Button styling
 */
.cf-fields-wrapper .cf-form-actions button, .cf-form-inner .cf-form-actions button {
  margin: 0 1em 1em 0;
  position: relative;
  display: inline-block;
  margin: 0 !important;
  width: 100%; }

/*==============================================================================
  #UTILITIES
==============================================================================*/
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0; }

.icon-fallback-text {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0; }

.text-left {
  text-align: left !important; }

.text-center {
  text-align: center !important; }

.text-right {
  text-align: right !important; }

.text-justify {
  text-align: justify !important; }

/*==============================================================================
  #Corporate  Gifting Page
==============================================================================*/
.corporate-gift-slider img {
  width: 100%; }

@media only screen and (max-width: 767px) {
  .corporate-gifting-section .breadcrumbs {
    margin-bottom: 50px; } }

.title-headline {
  margin: 0 auto 90px auto;
  max-width: 700px;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .title-headline {
      max-width: 100%;
      margin-bottom: 50px; } }
  .title-headline h2 {
    font-family: "SangBleuSerifLight", serif;
    font-size: 1.5rem;
    line-height: 1.17;
    margin-bottom: 50px;
    text-transform: none;
    color: #ad924e; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .title-headline h2 {
        margin-bottom: 20px;
        font-size: 1.5625rem;
        line-height: 1.28; } }
    @media only screen and (min-width: 1025px) {
      .title-headline h2 {
        margin-bottom: 30px;
        font-size: 2.5rem;
        line-height: 1.25; } }
  .title-headline p {
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    line-height: 1.57; }
  .title-headline .text-lg p {
    font-size: 1.125rem;
    line-height: 1.67; }
    @media only screen and (max-width: 767px) {
      .title-headline .text-lg p {
        font-size: 0.875rem;
        line-height: 1.57; } }

/*Video Panel Css Start Here*/
.video-block-section {
  margin-bottom: 100px; }
  @media only screen and (max-width: 767px) {
    .video-block-section {
      margin-bottom: 50px; } }
  .video-block-section .video-panel {
    margin: 0 auto;
    max-width: 820px;
    text-align: center; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .video-block-section .video-panel {
        padding: 0px 30px; } }
    @media only screen and (max-width: 767px) {
      .video-block-section .video-panel {
        max-width: 100%;
        padding: 0px 20px; } }
    .video-block-section .video-panel .video-box {
      overflow: hidden; }
      .video-block-section .video-panel .video-box .plyr .plyr__control {
        background: transparent;
        border: 0;
        display: block;
        left: 50%;
        padding: 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        cursor: pointer;
        outline: none;
        transition: all .3s ease;
        -moz-transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
        opacity: 0;
        visibility: hidden;
        box-shadow: none; }
        .video-block-section .video-panel .video-box .plyr .plyr__control svg {
          opacity: 0 !important;
          visibility: hidden;
          height: 0px; }
        .video-block-section .video-panel .video-box .plyr .plyr__control:before {
          background: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/play-video-claridges.svg?v=154974340758563323051771411948") !important;
          background-repeat: no-repeat !important;
          background-position: center !important;
          display: inline-block;
          width: 70px;
          height: 70px;
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
          @media only screen and (max-width: 767px) {
            .video-block-section .video-panel .video-box .plyr .plyr__control:before {
              width: 50px;
              height: 50px; } }
        .video-block-section .video-panel .video-box .plyr .plyr__control .plyr__sr-only {
          clip: rect(1px, 1px, 1px, 1px);
          overflow: hidden;
          border: 0 !important;
          height: 1px !important;
          padding: 0 !important;
          position: absolute !important;
          width: 1px !important; }
      .video-block-section .video-panel .video-box .plyr.plyr--paused .plyr__control:before {
        background: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/play-video-claridges.svg?v=154974340758563323051771411948") !important;
        background-repeat: no-repeat !important;
        background-position: center !important; }
      .video-block-section .video-panel .video-box:hover .plyr .plyr__control {
        opacity: 1;
        visibility: visible; }

.video-block-section .video-box > * {
  outline: none; }

.mute-unmute {
  display: none !important; }

/*Video Panel Css End Here*/
.gift-inspire-products {
  margin-bottom: 100px; }
  @media only screen and (max-width: 767px) {
    .gift-inspire-products {
      margin-bottom: 50px; } }
  .gift-inspire-products .previous,
  .gift-inspire-products .next {
    padding: 0px; }
    .gift-inspire-products .previous:before,
    .gift-inspire-products .next:before {
      display: inline-block;
      width: 18px;
      height: 34px;
      content: ""; }
      @media only screen and (max-width: 767px) {
        .gift-inspire-products .previous:before,
        .gift-inspire-products .next:before {
          width: 14px;
          height: 26px; } }
    .gift-inspire-products .previous svg,
    .gift-inspire-products .next svg {
      display: none;
      width: 30px;
      height: 30px; }
      @media only screen and (max-width: 1024px) {
        .gift-inspire-products .previous svg,
        .gift-inspire-products .next svg {
          width: 20px;
          height: 20px; } }
  @media only screen and (max-width: 1024px) {
    .gift-inspire-products .previous {
      left: 25px; } }
  @media only screen and (max-width: 767px) {
    .gift-inspire-products .previous {
      left: 30px; } }
  .gift-inspire-products .previous:before {
    background: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/icon-left-claridges.svg?v=13133477125284775801771411948");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; }
  .gift-inspire-products .next {
    right: -50px; }
    @media only screen and (max-width: 1024px) {
      .gift-inspire-products .next {
        right: 5px; } }
    @media only screen and (max-width: 767px) {
      .gift-inspire-products .next {
        right: 10px; } }
    .gift-inspire-products .next:before {
      background: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/icon-right-claridges.svg?v=151407379840254890511771411948");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; }
  .gift-inspire-products .flickity-page-dots {
    display: none !important; }
    @media only screen and (max-width: 767px) {
      .gift-inspire-products .flickity-page-dots {
        position: relative;
        bottom: 0px; } }

.gift-services-panel {
  margin-bottom: 130px; }
  @media only screen and (max-width: 767px) {
    .gift-services-panel {
      margin-bottom: 50px; } }
  .gift-services-panel .title-headline p {
    padding: 0px 80px; }
    @media only screen and (max-width: 767px) {
      .gift-services-panel .title-headline p {
        padding: 0; } }
  @media only screen and (max-width: 767px) {
    .gift-services-panel .destop-version {
      display: none; } }
  .gift-services-panel .mobile-version {
    display: none; }
    @media only screen and (max-width: 767px) {
      .gift-services-panel .mobile-version {
        display: block; } }
  .gift-services-panel .previous,
  .gift-services-panel .next {
    padding: 0px; }
    .gift-services-panel .previous:before,
    .gift-services-panel .next:before {
      display: inline-block;
      width: 18px;
      height: 34px;
      content: ""; }
      @media only screen and (max-width: 767px) {
        .gift-services-panel .previous:before,
        .gift-services-panel .next:before {
          width: 14px;
          height: 26px; } }
    .gift-services-panel .previous svg,
    .gift-services-panel .next svg {
      display: none;
      width: 30px;
      height: 30px; }
      @media only screen and (max-width: 1024px) {
        .gift-services-panel .previous svg,
        .gift-services-panel .next svg {
          width: 20px;
          height: 20px; } }
  @media only screen and (max-width: 767px) {
    .gift-services-panel .previous {
      left: 30px; } }
  .gift-services-panel .previous:before {
    background: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/icon-left-claridges.svg?v=13133477125284775801771411948");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; }
  .gift-services-panel .next {
    right: -50px; }
    @media only screen and (max-width: 1024px) {
      .gift-services-panel .next {
        right: -20px; } }
    @media only screen and (max-width: 767px) {
      .gift-services-panel .next {
        right: 10px; } }
    .gift-services-panel .next:before {
      background: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/icon-right-claridges.svg?v=151407379840254890511771411948");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; }
  .gift-services-panel .flickity-page-dots {
    display: none !important; }
    @media only screen and (max-width: 767px) {
      .gift-services-panel .flickity-page-dots {
        position: relative;
        bottom: 0px; } }
  .gift-services-panel .flickity-prev-next-button {
    top: 35%; }
  @media only screen and (max-width: 1024px) {
    .gift-services-panel .featured-products__content {
      padding: 0; } }
  @media only screen and (min-width: 1025px) {
    .gift-services-panel .featured-products__content .o-container--gutter-x-large {
      padding: 0px 68px; } }
  .gift-services-panel .service-item .service-item-image {
    text-align: center;
    margin-bottom: 25px; }
  .gift-services-panel .service-item .service-item-info h4 {
    font-family: "SangBleuSerifLight", serif;
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    text-transform: none;
    color: #ad924e; }
    @media only screen and (min-width: 1025px) and (max-width: 1439px) {
      .gift-services-panel .service-item .service-item-info h4 {
        font-size: 1.125rem; } }
    @media only screen and (max-width: 1024px) {
      .gift-services-panel .service-item .service-item-info h4 {
        font-size: 1rem; } }
    @media only screen and (max-width: 767px) {
      .gift-services-panel .service-item .service-item-info h4 {
        font-size: 1.25rem; } }
  .gift-services-panel .service-item .service-item-info p {
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    line-height: 1.57; }

.gift-submit-panel {
  margin-bottom: 145px; }
  @media only screen and (max-width: 767px) {
    .gift-submit-panel {
      margin-bottom: 50px; } }
  .gift-submit-panel .title-headline p {
    padding: 0px 80px; }
    @media only screen and (max-width: 767px) {
      .gift-submit-panel .title-headline p {
        padding: 0; } }
  @media only screen and (max-width: 767px) {
    .gift-submit-panel .gift-submit-form {
      padding: 0; } }
  .gift-submit-panel .gift-submit-form .globo-form-app .message.success {
    color: #543547 !important;
    font-size: 1rem !important; }
  .gift-submit-panel .gift-submit-form .globo-form-app form .globo-form-control textarea {
    height: 130px !important; }
  .gift-submit-panel .gift-submit-form .globo-form-app form .globo-form-control select {
    background-image: none !important; }
  .gift-submit-panel .gift-submit-form .globo-form-app form .fancy-select .trigger {
    background-color: white;
    background-image: url("//www.claridgesflowers.co.uk/cdn/shop/t/19/assets/mhg-arrow-form-claridges.svg?v=120436263843814972101771411948") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 13px !important; }
  .gift-submit-panel .gift-submit-form .globo-form-app form .footer .classic-button {
    font-size: 1.25rem !important; }
    @media only screen and (max-width: 767px) {
      .gift-submit-panel .gift-submit-form .globo-form-app form .footer .classic-button {
        font-size: 1rem !important; } }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s; }

.gift-voucher-panel {
  background: #f2f0f0;
  padding: 70px 0px; }
  @media only screen and (max-width: 767px) {
    .gift-voucher-panel {
      padding: 35px 0px; } }
  @media only screen and (max-width: 767px) {
    .gift-voucher-panel .grid {
      display: flex;
      flex-wrap: wrap; }
      .gift-voucher-panel .grid .voucher-left-info {
        order: 2; } }
  .gift-voucher-panel .gift-voucher-image {
    text-align: center; }
  .gift-voucher-panel .gift-voucher-info {
    padding: 50px 0px 0px 0px; }
    @media only screen and (max-width: 767px) {
      .gift-voucher-panel .gift-voucher-info {
        padding: 0px;
        margin-bottom: 35px; } }
    .gift-voucher-panel .gift-voucher-info h2 {
      font-family: "SangBleuSerifLight", serif;
      font-size: 1.5rem;
      line-height: 1.17;
      margin-bottom: 20px;
      text-transform: none;
      color: #ad924e; }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .gift-voucher-panel .gift-voucher-info h2 {
          margin-bottom: 20px;
          font-size: 1.5625rem;
          line-height: 1.28; } }
      @media only screen and (min-width: 1025px) {
        .gift-voucher-panel .gift-voucher-info h2 {
          margin-bottom: 30px;
          font-size: 2.5rem;
          line-height: 1.25; } }
    .gift-voucher-panel .gift-voucher-info .link {
      font-size: 1.25rem; }
      @media only screen and (max-width: 767px) {
        .gift-voucher-panel .gift-voucher-info .link {
          font-size: 1rem; } }

.provenance-section .gift-title .title-headline {
  margin: 90px auto;
  max-width: 100%; }
  @media (max-width: 1199px) {
    .provenance-section .gift-title .title-headline {
      margin: 60px auto; } }
  @media only screen and (max-width: 767px) {
    .provenance-section .gift-title .title-headline {
      margin: 35px auto; } }
  .provenance-section .gift-title .title-headline h2 {
    margin-bottom: 30px; }
    @media (max-width: 991px) {
      .provenance-section .gift-title .title-headline h2 {
        margin-bottom: 20px; } }
    @media only screen and (max-width: 767px) {
      .provenance-section .gift-title .title-headline h2 {
        margin-bottom: 10px; } }
  .provenance-section .gift-title .title-headline .text-lg {
    margin: auto;
    max-width: 795px; }
.provenance-section .gift-voucher-testimonial {
  margin: 100px 0;
  padding: 0;
  background: white; }
  @media (max-width: 1199px) {
    .provenance-section .gift-voucher-testimonial {
      margin: 60px 0; } }
  @media only screen and (max-width: 767px) {
    .provenance-section .gift-voucher-testimonial {
      margin: 35px 0; } }
  .provenance-section .gift-voucher-testimonial .grid {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    align-items: center; }
    .provenance-section .gift-voucher-testimonial .grid .voucher-left-info {
      order: 1; }
      @media only screen and (max-width: 767px) {
        .provenance-section .gift-voucher-testimonial .grid .voucher-left-info {
          margin-bottom: 20px; } }
    .provenance-section .gift-voucher-testimonial .grid .voucher-right-info {
      order: 2; }
      .provenance-section .gift-voucher-testimonial .grid .voucher-right-info .gift-voucher-info {
        margin-bottom: 0; }
        .provenance-section .gift-voucher-testimonial .grid .voucher-right-info .gift-voucher-info h2 {
          color: black; }
          @media only screen and (max-width: 767px) {
            .provenance-section .gift-voucher-testimonial .grid .voucher-right-info .gift-voucher-info h2 {
              margin-bottom: 10px; } }
.provenance-section .gift-voucher-product {
  margin-bottom: 200px; }
  @media (max-width: 1199px) {
    .provenance-section .gift-voucher-product {
      margin-bottom: 100px; } }
  @media (max-width: 991px) {
    .provenance-section .gift-voucher-product {
      margin-bottom: 60px; } }
  @media only screen and (max-width: 767px) {
    .provenance-section .gift-voucher-product {
      margin-bottom: 40px; } }
  .provenance-section .gift-voucher-product .grid {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap; }
    .provenance-section .gift-voucher-product .grid .grid__item {
      float: none;
      display: flex;
      flex-direction: column; }
      @media only screen and (max-width: 767px) {
        .provenance-section .gift-voucher-product .grid .grid__item {
          padding-bottom: 15px;
          min-height: 100%; } }
      .provenance-section .gift-voucher-product .grid .grid__item .gift-voucher-info {
        margin-bottom: 0;
        flex-grow: 1; }
        .provenance-section .gift-voucher-product .grid .grid__item .gift-voucher-info .experience__title {
          font-size: 1.875rem;
          margin: 0 0 5px;
          text-transform: capitalize; }
          @media (max-width: 1199px) {
            .provenance-section .gift-voucher-product .grid .grid__item .gift-voucher-info .experience__title {
              font-size: 1.5625rem; } }
          @media only screen and (max-width: 767px) {
            .provenance-section .gift-voucher-product .grid .grid__item .gift-voucher-info .experience__title {
              font-size: 1.25rem; } }
      .provenance-section .gift-voucher-product .grid .grid__item .gift-voucher-image {
        height: 400px; }
        @media only screen and (max-width: 767px) {
          .provenance-section .gift-voucher-product .grid .grid__item .gift-voucher-image {
            height: auto; } }
        .provenance-section .gift-voucher-product .grid .grid__item .gift-voucher-image img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
          @media only screen and (max-width: 767px) {
            .provenance-section .gift-voucher-product .grid .grid__item .gift-voucher-image img {
              height: auto;
              object-fit: inherit; } }
@media (max-width: 1199px) {
  .provenance-section .gift-inspire-products {
    margin-bottom: 50px; } }
.provenance-section .gift-inspire-products .product-item__info .product-item__title {
  margin-bottom: 3px;
  font-size: 1rem;
  line-height: 1.5; }
.provenance-section .gift-inspire-products .product-item__info .product-item__price-wrapper {
  font-size: 1rem;
  line-height: 1.5; }
.provenance-section .gift-inspire-products .flickity-prev-next-button {
  margin-top: -40px; }
@media (max-width: 1199px) {
  .provenance-section .section-header--loose {
    margin-bottom: 50px; } }
@media (max-width: 991px) {
  .provenance-section .section-header--loose {
    margin-bottom: 30px; } }
@media only screen and (max-width: 767px) {
  .provenance-section .section-header--loose {
    margin-bottom: 25px; } }
.provenance-section .provenance-articles .flickity-prev-next-button {
  margin-top: 100px; }

/* globo css dc customiize */
.globo-form-id-4102 .globo-form-app .footer, .globo-form-id-4102 .globo-form-app .gfb__footer {
  margin-top: 20px; }

/* Size Guide Modal Start*/
.size-guide-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  visibility: visible;
  opacity: 1; }

.size-guide-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; }
  .size-guide-modal:before {
    background-color: rgba(0, 0, 0, 0.05); }

#sizeGuideModal .close-btn {
  position: absolute;
  right: 14px;
  top: 16px;
  cursor: pointer; }
  @media only screen and (max-width: 1024px) {
    #sizeGuideModal .close-btn {
      right: 8px;
      top: 8px; } }
  @media only screen and (max-width: 767px) {
    #sizeGuideModal .close-btn {
      right: 30px;
      top: 18px; } }
#sizeGuideModal .modal-content {
  background-color: #ffffff;
  max-width: 1016px;
  width: 100%;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  padding: 40px; }
  @media only screen and (max-width: 1024px) {
    #sizeGuideModal .modal-content {
      width: 95%;
      padding: 25px; } }
  @media only screen and (max-width: 767px) {
    #sizeGuideModal .modal-content {
      width: 100%;
      top: 0;
      transform: translateY(0);
      padding: 70px 25px 25px 25px; } }
#sizeGuideModal .content-wrapper {
  display: flex;
  flex-wrap: wrap; }
  #sizeGuideModal .content-wrapper .left-content {
    width: calc(100% - 345px);
    padding-right: 40px;
    display: flex;
    flex-wrap: wrap; }
    @media only screen and (max-width: 1024px) {
      #sizeGuideModal .content-wrapper .left-content {
        width: calc(100% - 280px);
        padding-right: 25px; } }
    @media only screen and (max-width: 767px) {
      #sizeGuideModal .content-wrapper .left-content {
        width: 100%;
        padding-right: 0; } }
    #sizeGuideModal .content-wrapper .left-content .modal_top-content {
      width: 100%; }
      @media only screen and (max-width: 767px) {
        #sizeGuideModal .content-wrapper .left-content .modal_top-content p {
          display: none; } }
    #sizeGuideModal .content-wrapper .left-content h2 {
      font-family: "SangBleuSerifLight", serif;
      font-size: 1.313rem;
      color: #ad924e;
      font-weight: 300;
      margin-bottom: 10px; }
      @media only screen and (max-width: 767px) {
        #sizeGuideModal .content-wrapper .left-content h2 {
          text-align: center;
          font-size: 1.5rem;
          margin-bottom: 20px; } }
    #sizeGuideModal .content-wrapper .left-content .size-guide-row {
      display: flex;
      flex-wrap: wrap;
      margin-left: -10px;
      margin-right: -10px;
      margin-top: auto; }
      @media only screen and (max-width: 767px) {
        #sizeGuideModal .content-wrapper .left-content .size-guide-row {
          margin-bottom: 20px; } }
    #sizeGuideModal .content-wrapper .left-content .size-guide-item {
      width: 25%;
      padding: 0 10px; }
      @media only screen and (max-width: 575px) {
        #sizeGuideModal .content-wrapper .left-content .size-guide-item {
          width: 50%;
          margin-bottom: 10px; } }
      #sizeGuideModal .content-wrapper .left-content .size-guide-item h3 {
        font-size: 0.875rem;
        margin-bottom: 3px; }
      #sizeGuideModal .content-wrapper .left-content .size-guide-item img {
        width: 100%;
        display: block; }
    #sizeGuideModal .content-wrapper .left-content .disclaimer {
      margin: auto 0 0 0; }
  #sizeGuideModal .content-wrapper .image-right {
    max-width: 345px;
    width: 100%; }
    #sizeGuideModal .content-wrapper .image-right.modal_mobile-img {
      display: none; }
      @media only screen and (max-width: 767px) {
        #sizeGuideModal .content-wrapper .image-right.modal_mobile-img {
          display: block;
          margin-bottom: 20px; } }
    #sizeGuideModal .content-wrapper .image-right img {
      width: 100%;
      display: block; }
    @media only screen and (max-width: 1024px) {
      #sizeGuideModal .content-wrapper .image-right {
        max-width: 280px; } }
    @media only screen and (max-width: 767px) {
      #sizeGuideModal .content-wrapper .image-right {
        max-width: 100%;
        display: none; } }
  #sizeGuideModal .content-wrapper .modal_mobile-content {
    display: none; }
    @media only screen and (max-width: 767px) {
      #sizeGuideModal .content-wrapper .modal_mobile-content {
        display: block; } }

/* Size Guide Modal End*/
/*three colum css start*/
.three-colum-wrapper .block {
  height: 100%; }
  .three-colum-wrapper .block .product-item__image-wrapper {
    height: 100%; }
.three-colum-wrapper .grid--uniform .medium-up--one-third:nth-child(3n+1) {
  clear: none; }
.three-colum-wrapper .aspect-ratio::before {
  padding-bottom: 133.33333333333334%; }
.three-colum-wrapper .rectangle-img .aspect-ratio::before {
  padding-bottom: 61.37%; }
.three-colum-wrapper .block-content .block-title {
  font-family: "SangBleuSerifLight", serif;
  font-size: 1.313rem;
  font-weight: 300;
  margin: 10px 0 8px 0; }
.three-colum-wrapper .block-content p {
  font-size: 0.875rem; }
.three-colum-wrapper .block-content a {
  font-size: 0.875rem;
  color: #999999;
  display: inline-block; }

.page-bespoke-classes .three-colum-wrapper .grid,
.page-services-single-page .three-colum-wrapper .grid {
  display: flex;
  flex-wrap: wrap; }
.page-bespoke-classes .three-colum-wrapper .aspect-ratio,
.page-services-single-page .three-colum-wrapper .aspect-ratio {
  height: 100%; }

/*three colum css end*/
/*one panel css start*/
.one-panel-wrapper .o-container.full-width-banner {
  max-width: 100%;
  padding: 0; }
.one-panel-wrapper .block-panel img {
  width: 100%; }
  .one-panel-wrapper .block-panel img.block-panel__image--desktop {
    display: block; }
  .one-panel-wrapper .block-panel img.block-panel__image--mobile {
    display: none; }
.one-panel-wrapper .block-panel__content {
  max-width: 555px; }
  .one-panel-wrapper .block-panel__content .block-panel__title {
    font-family: "SangBleuSerifLight", serif;
    font-size: 1.313rem;
    font-weight: 300;
    margin: 10px 0 8px 0; }
  .one-panel-wrapper .block-panel__content p {
    font-size: 0.875rem; }
  .one-panel-wrapper .block-panel__content a {
    font-size: 0.875rem;
    color: #999999;
    display: inline-block; }

/*one panel css end*/
/*rich text css start*/
.page-services-single-page .rich-text-section {
  padding: 80px 0; }
  @media only screen and (max-width: 767px) {
    .page-services-single-page .rich-text-section {
      padding: 45px 0; } }

.rich-text-section {
  text-align: center;
  padding: 150px 0; }
  @media only screen and (max-width: 1439px) {
    .rich-text-section {
      padding: 120px 0; } }
  @media only screen and (max-width: 767px) {
    .rich-text-section {
      padding: 45px 0; } }
  .rich-text-section .h1 {
    font-family: "SangBleuSerifLight", serif;
    font-size: 2.5rem;
    color: #ad924e;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 60px; }
    @media only screen and (max-width: 767px) {
      .rich-text-section .h1 {
        font-size: 1.5rem; } }
  .rich-text-section .h2 {
    font-family: "SangBleuSerifLight", serif;
    font-size: 1.313rem;
    color: #ad924e;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 30px; }
    @media only screen and (max-width: 767px) {
      .rich-text-section .h2 {
        font-size: 1.5rem; } }
  .rich-text-section .rich-text-section__content {
    max-width: 860px;
    margin: auto;
    text-align: left; }
  .rich-text-section .h1 + .rich-text-section__content {
    font-family: "SangBleuSerifLight", serif;
    font-size: 1.313rem;
    font-weight: 300;
    text-align: center;
    max-width: 1170px;
    margin: auto; }
    @media only screen and (max-width: 767px) {
      .rich-text-section .h1 + .rich-text-section__content {
        font-size: 0.875rem; } }

/*rich text css end*/
/*contact form css start*/
.globo-formbuilder {
  max-width: 694px;
  padding-left: 20px;
  padding-right: 20px;
  margin: auto; }
  .globo-formbuilder .globo-form-app .header {
    margin-bottom: 75px; }
  .globo-formbuilder h3 {
    font-family: "SangBleuSerifLight", serif;
    font-size: 2.5rem !important;
    font-weight: 300 !important;
    color: #ad924e !important;
    line-height: 1.1 !important; }
    @media only screen and (max-width: 767px) {
      .globo-formbuilder h3 {
        font-size: 1.5rem !important;
        margin-bottom: 45px !important; } }
  .globo-formbuilder .gfb-style-material_filled .globo-form-control:not([data-type="file2"], [data-type="imageOptions"], [data-type="rating-level"], [data-type="feedback"], [data-type="matrix"], [data-type="rating-star2"], [data-type="checkbox"], [data-type="radio"], [data-type="colorSwatches"], [data-type="rangeSlider"], [data-type="switcher"], [data-type="button"], [data-type="signature"]) .globo-form-input {
    color: #212b36;
    line-height: 1.5;
    font-size: var(--gfb-form-default-font-size);
    font-weight: 400;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    border: 0;
    vertical-align: top;
    margin-bottom: 20px;
    padding: 0;
    background-color: transparent !important;
    overflow: visible;
    border-radius: 0; }
  .globo-formbuilder .gfb-style-material_filled .globo-form-control:not([data-type="file2"], [data-type="imageOptions"], [data-type="rating-level"], [data-type="feedback"], [data-type="matrix"], [data-type="rating-star2"], [data-type="checkbox"], [data-type="radio"], [data-type="colorSwatches"], [data-type="rangeSlider"], [data-type="switcher"], [data-type="button"], [data-type="signature"]) .globo-label {
    transform: none !important;
    position: relative !important;
    left: 0 !important;
    margin: 0 !important;
    font-weight: normal !important; }
  .globo-formbuilder .gfb-style-material_filled .globo-form-control:not([data-type="file2"], [data-type="imageOptions"], [data-type="rating-level"], [data-type="feedback"], [data-type="matrix"], [data-type="rating-star2"], [data-type="checkbox"], [data-type="radio"], [data-type="colorSwatches"], [data-type="rangeSlider"], [data-type="switcher"], [data-type="button"], [data-type="signature"]).has-error .globo-form-input {
    border-top: 0;
    border-left: 0;
    border-right: 0; }
  .globo-formbuilder .gfb-style-material_filled .gfb__footer {
    max-width: 325px;
    margin: auto; }

/*contact form css end*/
/*image text block css start*/
.image-text-block {
  max-width: 662px;
  margin: auto;
  display: block;
  padding: 0 20px; }
  .image-text-block .image-section {
    max-width: 350px;
    margin: 0 auto 60px;
    display: block; }
    @media only screen and (max-width: 767px) {
      .image-text-block .image-section {
        max-width: 450px;
        margin-bottom: 20px; } }
    .image-text-block .image-section img {
      display: block;
      width: 100%; }

/*image text block css end*/
/*custom title section start*/
.custom-title-section {
  text-align: center;
  max-width: 662px;
  margin: 0 auto 50px;
  padding: 100px 20px 0; }
  @media only screen and (max-width: 767px) {
    .custom-title-section {
      padding: 45px 20px 0; } }
  .custom-title-section h2 {
    font-family: "SangBleuSerifLight", serif;
    font-size: 2.5rem;
    color: #ad924e;
    font-weight: 300; }
    @media only screen and (max-width: 767px) {
      .custom-title-section h2 {
        font-size: 1.5rem;
        margin-bottom: 30px; } }
  .custom-title-section .btn, .custom-title-section .shopify-challenge__container .shopify-challenge__button, .shopify-challenge__container .custom-title-section .shopify-challenge__button {
    max-width: 322px;
    margin: 25px auto 0; }

/*custom title section end*/
/*mini cart css start*/
.cart-product-recommendations {
  width: 100%;
  margin-top: auto; }
  .cart-product-recommendations h2 {
    margin-bottom: 20px; }
  .cart-product-recommendations .product {
    display: flex;
    margin-bottom: 10px; }
    .cart-product-recommendations .product a {
      display: flex;
      align-items: flex-start;
      width: calc(100% - 130px); }
    .cart-product-recommendations .product .product__img {
      max-width: 55px; }
    .cart-product-recommendations .product .mini-cart-details {
      width: calc(100% - 55px);
      padding-left: 13px; }
      .cart-product-recommendations .product .mini-cart-details .product__title {
        font-size: 0.70rem;
        color: black;
        margin: 0; }
      .cart-product-recommendations .product .mini-cart-details .product__price {
        font-size: 0.75rem; }
    .cart-product-recommendations .product .add-to-cart-btn {
      width: 124px;
      height: 30px;
      font-size: 0.75rem;
      padding: 1px 5px 0; }

/*mini cart css end*/
/*icon blocks css start*/
.icon-blocks {
  padding: 20px 0 80px; }
  @media only screen and (min-width: 768px) {
    .icon-blocks {
      padding: 20px 0; } }

.icon-blocks__title {
  text-align: center;
  margin-bottom: 40px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .icon-blocks__title {
      margin-bottom: 60px; } }

.icon-block {
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column; }

.icon-block__image-wrapper {
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 340px; }

.icon-block__image {
  width: 100%;
  height: auto;
  display: block; }

.icon-block__content {
  flex: 1;
  display: flex;
  flex-direction: column; }

.icon-block__heading {
  font-family: "SangBleuSerifLight", serif;
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1.17;
  text-transform: none;
  color: #ad924e;
  margin-bottom: 5px;
  min-height: 2em;
  display: flex;
  align-items: center;
  justify-content: center; }

.icon-block__text {
  color: black;
  flex: 1; }
  .icon-block__text p {
    margin: 0; }

/* New CTA styles */
.icon-block__cta {
  margin-top: 20px;
  padding-top: 10px;
  display: flex;
  justify-content: center; }
  .icon-block__cta .btn, .icon-block__cta .shopify-challenge__container .shopify-challenge__button, .shopify-challenge__container .icon-block__cta .shopify-challenge__button {
    min-width: 120px;
    /* Ensures consistent button width */ }

@media only screen and (max-width: 767px) {
  .icon-blocks__grid.flickity-enabled .grid__item {
    width: 100%;
    margin-right: 20px; }

  .flickity-viewport {
    transition: height 0.3s ease-in-out; }

  .flickity-page-dots {
    position: relative;
    bottom: 0;
    padding: 20px 0 0; }
    .flickity-page-dots .dot {
      width: 8px;
      height: 8px;
      margin: 0 4px;
      background: rgba(0, 0, 0, 0.2); }
      .flickity-page-dots .dot.is-selected {
        background: rgba(0, 0, 0, 0.6); }

  .icon-block__image {
    display: block;
    width: 100%;
    height: auto; } }
/*icon blocks css end*/
@media screen and (max-width: 749px) {
  .slideshow__slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; }

  .slideshow .slide__content,
  .slideshow .slideshow__slide-content {
    position: static !important;
    transform: none !important;
    text-align: center !important;
    width: 90% !important;
    margin: auto !important;
    padding-top: 15% !important; }

  .slideshow .slide__heading {
    text-align: center !important; } }
@media screen and (max-width: 749px) {
  /* Disable slider initialization */
  .experiences-section .js-experiences-slider.flickity-enabled {
    display: block !important; }

  /* Force grid to display as block */
  .experiences-section .grid--collection-list {
    display: block !important;
    transform: none !important; }

  /* Stack all grid items */
  .experiences-section .grid__item.medium-up--one-third {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: static !important;
    left: auto !important;
    margin-bottom: 2rem !important;
    display: block !important; }

  /* Hide any Flickity controls */
  .experiences-section .flickity-button,
  .experiences-section .flickity-page-dots {
    display: none !important; } }