@charset "UTF-8";
/* ==========================================================================
   INUITCSS
   ========================================================================== */
/**
 * inuitcss, by @csswizardry
 *
 * github.com/inuitcss | inuitcss.com
 */
/**
 * This is an example inuitcss manifest file. DO NOT MODIFY THIS FILE DIRECTLY.
 * Instead, copy and paste it into your own CSS directory and make additions,
 * extensions, and modifications there.
 */
/**
 * CONTENTS
 *
 * SETTINGS
 * Config...............Project-level configuration and feature switches.
 * Core.................inuitcss’ core and setup settings.
 * Global...............Project-wide variables and settings.
 *
 * TOOLS
 * Rem..................Tools for converting pixel inputs into their rem
 *                      equivalents.
 * Font-size............A mixin which guarantees baseline-friendly line-heights.
 * Clearfix.............Micro clearfix mixin.
 * Hidden...............Mixin for hiding elements.
 * Sass MQ..............inuitcss’ default media query manager.
 *
 * GENERIC
 * Box-sizing...........Better default `box-sizing`.
 * Normalize.css........A level playing field using @necolas’ Normalize.css.
 * Reset................A tiny reset to complement Normalize.css.
 * Shared...............Sensibly and tersely share some global commonalities
 *                      (particularly useful when managing vertical rhythm).
 *
 * ELEMENTS
 * Page.................Set up our document’s default `font-size` and
 *                      `line-height`.
 * Headings.............Very minimal (i.e. only font-size information) for
 *                      headings 1 through 6.
 * Images...............Base image styles.
 * Tables...............Simple table styles.
 *
 * OBJECTS
 * Wrapper..............Page constraint object.
 * Layout...............Generic layout module.
 * Media................Image- and text-like content side by side. The
 *                      poster-child of OOCSS.
 * Flag.................Table-layout-based advancement on the Media object.
 * List-bare............Lists with no bullets or indents.
 * List-inline..........A list whose items all site in a line.
 * Box..................Simple boxing abstraction.
 * Block................Image-on-top-of-text object.
 * Ratio................A container for maintaining aspect ratio of content.
 * Crop.................Provide a cropping context for media (images, etc.).
 * Tables...............Classes for manipulating `table`s.
 * Pack.................Pack items into available horizontal space.
 *
 * COMPONENTS
 * Buttons..............An example button component, and how it fits into the
 *                      inuitcss framework.
 *
 * UTILITIES
 * Clearfix.............Bind our clearfix onto a utility class.
 * Widths...............Simple width helper classes.
 * Headings.............Reassigning our heading styles to helper classes.
 * Spacing..............Nudge bits of the DOM around with these spacing
 *                      classes.
 * Print................Reset-like styles taken from the HTML5 Boilerplate.
 * Hide.................Helper classes to hide content
 */
/* ========================================================================
//   #GLOBAL
//   ======================================================================== */
/* FOR HOVER OVERLAY */
/*------------------------------------*\
    $QUOTES
\*------------------------------------*/
/**
 * English quote marks?
 */
/**
 * If you want English quotes then please do not edit these; they’re only here
 * because Sass needs them.
 */
/**
 * If you need non-English quotes, please alter the following values accordingly:
 */
/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
  box-sizing: border-box;
}

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

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */
}

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

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

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

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

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

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

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

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

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

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

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

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

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

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

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

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Simple default styles for headings 1 through 6. Anything more opinionated
 * than simple font-size changes should likely be applied via classes (see:
 * http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
 */
h1 {
  font-size: 64px;
  font-size: 4rem;
  line-height: 1.125;
}

h2 {
  font-size: 60px;
  font-size: 3.75rem;
  line-height: 1.2;
}

h3 {
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.5;
}

h4 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.7142857143;
}

h5 {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1;
}

h6 {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
}

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

/**
 * 1. If a `width` and/or `height` attribute have been explicitly defined, let’s
 *    not make the image fluid.


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

/* ==========================================================================
   #WRAPPERS
   ========================================================================== */
/**
 * Page-level constraining and wrapping elements.
 */
/* stylelint-disable */
/* stylelint-enable */
.o-wrapper {
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
}
.o-wrapper:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

/* Size variants.
   ========================================================================== */
.o-wrapper--tiny {
  padding-right: 6px;
  padding-left: 6px;
}

.o-wrapper--small {
  padding-right: 12px;
  padding-left: 12px;
}

.o-wrapper--large {
  padding-right: 48px;
  padding-left: 48px;
}

.o-wrapper--huge {
  padding-right: 96px;
  padding-left: 96px;
}

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

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

/* Gutter size modifiers.
   ========================================================================== */
.o-layout--tiny {
  margin-left: -6px;
}
.o-layout--tiny > .o-layout__item {
  padding-left: 6px;
}

.o-layout--small {
  margin-left: -12px;
}
.o-layout--small > .o-layout__item {
  padding-left: 12px;
}

.o-layout--large {
  margin-left: -48px;
}
.o-layout--large > .o-layout__item {
  padding-left: 48px;
}

.o-layout--huge {
  margin-left: -96px;
}
.o-layout--huge > .o-layout__item {
  padding-left: 96px;
}

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

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

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

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

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

/**
 * Reverse the rendered order of the grid system.
 */
.o-layout--reverse {
  direction: rtl;
}
.o-layout--reverse > .o-layout__item {
  direction: ltr;
  text-align: left;
}

/* ==========================================================================
   #MEDIA
   ========================================================================== */
/**
 * Place any image- and text-like content side-by-side, as per:
 * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 */
.o-media {
  display: block;
}
.o-media:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

.o-media__img {
  float: left;
  margin-right: 24px;
}
.o-media__img > img {
  display: block;
}

.o-media__body {
  overflow: hidden;
  display: block;
}
.o-media__body,
.o-media__body > :last-child {
  margin-bottom: 0;
}

/* Size variants
   ========================================================================== */
/**
 * Modify the amount of space between our image and our text. We also have
 * reversible options for all available sizes.
 */
.o-media--tiny > .o-media__img {
  margin-right: 6px;
}
.o-media--tiny.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 6px;
}

.o-media--small > .o-media__img {
  margin-right: 12px;
}
.o-media--small.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 12px;
}

.o-media--large > .o-media__img {
  margin-right: 48px;
}
.o-media--large.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 48px;
}

.o-media--huge > .o-media__img {
  margin-right: 96px;
}
.o-media--huge.o-media--reverse > .o-media__img {
  margin-right: 0;
  margin-left: 96px;
}

/* Reversed media objects
   ========================================================================== */
.o-media--reverse > .o-media__img {
  float: right;
  margin-right: 0;
  margin-left: 24px;
}

/* Gutterless media objects
   ========================================================================== */
.o-media--flush > .o-media__img {
  margin-right: 0;
  margin-left: 0;
}

/* ==========================================================================
   #LIST-BARE
   ========================================================================== */
/**
 * Strip list-like appearance from lists by removing their bullets, and any
 * indentation.
 */
.o-list-bare {
  list-style: none;
  margin-left: 0;
}

/* ==========================================================================
   #LIST-INLINE
   ========================================================================== */
/**
 * The list-inline object simply displays a list of items in one line.
 */
.o-list-inline {
  margin-left: 0;
  list-style: none;
}

.o-list-inline__item {
  display: inline-block;
}

/* Delimited list.
   ========================================================================== */
/**
 * By default, applying this class will comma separate your list items. You can
 * change the delimiter by predefining the following variable:
 */
/**
 * 1. Fallback for old IEs not supporting `rem` values.
 */
.o-list-inline--delimited {
  font-size: 0;
}
.o-list-inline--delimited > .o-list-inline__item {
  font-size: 16px;
  /* [1] */
  font-size: 1rem;
}
.o-list-inline--delimited > .o-list-inline__item + .o-list-inline__item:before {
  content: ", ";
}

/* ==========================================================================
   #TABLES
   ========================================================================== */
/**
 * A simple object for manipulating the structure of HTML `table`s.
 */
.o-table {
  width: 100%;
}

/* Equal-width table cells.
   ========================================================================== */
/**
 * `table-layout: fixed` forces all cells within a table to occupy the same
 * width as each other. This also has performance benefits: because the browser
 * does not need to (re)calculate cell dimensions based on content it discovers,
 * the table can be rendered very quickly. Further reading:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
 */
.o-table--fixed {
  table-layout: fixed;
}

/* Size variants.
   ========================================================================== */
.o-table--tiny th,
.o-table--tiny td {
  padding: 6px;
}

.o-table--small th,
.o-table--small td {
  padding: 12px;
}

.o-table--large th,
.o-table--large td {
  padding: 48px;
}

.o-table--huge th,
.o-table--huge td {
  padding: 96px;
}

/* ==========================================================================
   #GRID
   ========================================================================== */
/**
 * This plugin provides a flexbox grid for inuitcss. Support for IE9 currently
 * prevents inuitcss from using the flexbox layout mode.
 *
 * Cells are full-width and will stack on top of each other by default:
 *
 * <div class="o-grid">
 *   <div class="o-grid__cell">
 *   </div>
 *   <div class="o-grid__cell">
 *   </div>
 * </div>
 *
 * Cells will in most cases be accompanied by utility classes that divide
 * the grid into fractions. These are provided by inuitcss:
 *
 * <div class="o-grid">
 *   <div class="o-grid__cell u-1/2">
 *   </div>
 *   <div class="o-grid__cell u-1/2">
 *   </div>
 * </div>
 *
 * Several modifier classes are provided. For example, `o-grid--auto` will
 * divide the space equally between all containing cells without the need
 * for width utility classes.
 *
 * <div class="o-grid--auto">
 *   <div class="o-grid__cell">
 *   </div>
 *   <div class="o-grid__cell">
 *   </div>
 * </div>
 */
/* The grid
   ========================================================================== */
/**
 * 1. Add a negative margin only on one side. That way we aren't required to
 *    use a wrapper with the same amount of spacing, though it's common to do so.
 */
.o-grid {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin-left: -24px;
  /* [1] */
}

/**
 * 1. Default gutters. Also neutralizes the left margin on `o-grid`.
 */
.o-grid__cell {
  flex: 0 1 auto;
  padding-left: 24px;
  /* [1] */
  width: 100%;
}

/* Horizontal alignment
   ========================================================================== */
.o-grid--center {
  justify-content: center;
}

.o-grid--right {
  justify-content: flex-end;
}

.o-grid--left {
  justify-content: flex-start;
}

/* Vertical alignment
   ========================================================================== */
.o-grid--middle {
  align-items: center;
}

.o-grid--bottom {
  align-items: flex-end;
}

/* Content distribution
   ========================================================================== */
.o-grid--around {
  justify-content: space-around;
}

.o-grid--between {
  justify-content: space-between;
}

.o-grid--reverse {
  flex-direction: row-reverse;
}

/* No gutters
   ========================================================================== */
.o-grid--flush {
  margin-left: 0;
}
.o-grid--flush > .o-grid__cell {
  padding-left: 0;
}

/* Automatically size cells by distributing them equally
   ========================================================================== */
.o-grid--auto > .o-grid__cell {
  flex: 1 0 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * If we’re using Sass-MQ, automatically generate grid system(s) for each of our
 * defined breakpoints, and give them a Responsive Suffix, e.g.:
 *
 * <div class="u-3/12@mobile">
 */
@media (min-width: 42.5em) {
  .u-1\/1\@sm {
    width: 100% !important;
  }

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

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

  .u-1\/3\@sm {
    width: 33.3333333333% !important;
  }

  .u-2\/3\@sm {
    width: 66.6666666667% !important;
  }

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

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

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

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

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

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

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

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

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

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

  .u-1\/6\@sm {
    width: 16.6666666667% !important;
  }

  .u-2\/6\@sm {
    width: 33.3333333333% !important;
  }

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

  .u-4\/6\@sm {
    width: 66.6666666667% !important;
  }

  .u-5\/6\@sm {
    width: 83.3333333333% !important;
  }

  .u-6\/6\@sm {
    width: 100% !important;
  }
}
@media (min-width: 57.5em) {
  .u-1\/1\@md {
    width: 100% !important;
  }

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

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

  .u-1\/3\@md {
    width: 33.3333333333% !important;
  }

  .u-2\/3\@md {
    width: 66.6666666667% !important;
  }

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

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

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

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

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

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

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

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

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

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

  .u-1\/6\@md {
    width: 16.6666666667% !important;
  }

  .u-2\/6\@md {
    width: 33.3333333333% !important;
  }

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

  .u-4\/6\@md {
    width: 66.6666666667% !important;
  }

  .u-5\/6\@md {
    width: 83.3333333333% !important;
  }

  .u-6\/6\@md {
    width: 100% !important;
  }
}
@media (min-width: 64em) {
  .u-1\/1\@lg {
    width: 100% !important;
  }

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

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

  .u-1\/3\@lg {
    width: 33.3333333333% !important;
  }

  .u-2\/3\@lg {
    width: 66.6666666667% !important;
  }

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

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

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

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

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

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

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

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

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

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

  .u-1\/6\@lg {
    width: 16.6666666667% !important;
  }

  .u-2\/6\@lg {
    width: 33.3333333333% !important;
  }

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

  .u-4\/6\@lg {
    width: 66.6666666667% !important;
  }

  .u-5\/6\@lg {
    width: 83.3333333333% !important;
  }

  .u-6\/6\@lg {
    width: 100% !important;
  }
}
@media (min-width: 73.125em) {
  .u-1\/1\@wd {
    width: 100% !important;
  }

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

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

  .u-1\/3\@wd {
    width: 33.3333333333% !important;
  }

  .u-2\/3\@wd {
    width: 66.6666666667% !important;
  }

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

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

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

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

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

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

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

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

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

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

  .u-1\/6\@wd {
    width: 16.6666666667% !important;
  }

  .u-2\/6\@wd {
    width: 33.3333333333% !important;
  }

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

  .u-4\/6\@wd {
    width: 66.6666666667% !important;
  }

  .u-5\/6\@wd {
    width: 83.3333333333% !important;
  }

  .u-6\/6\@wd {
    width: 100% !important;
  }
}
/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Redefine all of our basic heading styles against utility classes so as to
 * allow for double stranded heading hierarchy, e.g. we semantically need an H2,
 * but we want it to be sized like an H1:
 *
 *   <h2 class="u-h1"></h2>
 *
 */
.u-h1 {
  font-size: 64px !important;
  font-size: 4rem !important;
  line-height: 1.125 !important;
}

.u-h2 {
  font-size: 60px !important;
  font-size: 3.75rem !important;
  line-height: 1.2 !important;
}

.u-h3 {
  font-size: 32px !important;
  font-size: 2rem !important;
  line-height: 1.5 !important;
}

.u-h4 {
  font-size: 28px !important;
  font-size: 1.75rem !important;
  line-height: 1.7142857143 !important;
}

.u-h5 {
  font-size: 24px !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
}

.u-h6 {
  font-size: 20px !important;
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
}

/* ==========================================================================
   #SPACING
   ========================================================================== */
/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left-large {}
 *   .u-margin-right-small {}
 *   .u-padding {}
 *   .u-padding-right-none {}
 */
/* stylelint-disable string-quotes */
.u-padding {
  padding: 24px !important;
}

.u-padding-tiny {
  padding: 6px !important;
}

.u-padding-small {
  padding: 12px !important;
}

.u-padding-large {
  padding: 48px !important;
}

.u-padding-huge {
  padding: 96px !important;
}

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

.u-padding-top {
  padding-top: 24px !important;
}

.u-padding-top-tiny {
  padding-top: 6px !important;
}

.u-padding-top-small {
  padding-top: 12px !important;
}

.u-padding-top-large {
  padding-top: 48px !important;
}

.u-padding-top-huge {
  padding-top: 96px !important;
}

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

.u-padding-right {
  padding-right: 24px !important;
}

.u-padding-right-tiny {
  padding-right: 6px !important;
}

.u-padding-right-small {
  padding-right: 12px !important;
}

.u-padding-right-large {
  padding-right: 48px !important;
}

.u-padding-right-huge {
  padding-right: 96px !important;
}

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

.u-padding-bottom {
  padding-bottom: 24px !important;
}

.u-padding-bottom-tiny {
  padding-bottom: 6px !important;
}

.u-padding-bottom-small {
  padding-bottom: 12px !important;
}

.u-padding-bottom-large {
  padding-bottom: 48px !important;
}

.u-padding-bottom-huge {
  padding-bottom: 96px !important;
}

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

.u-padding-left {
  padding-left: 24px !important;
}

.u-padding-left-tiny {
  padding-left: 6px !important;
}

.u-padding-left-small {
  padding-left: 12px !important;
}

.u-padding-left-large {
  padding-left: 48px !important;
}

.u-padding-left-huge {
  padding-left: 96px !important;
}

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

.u-margin {
  margin: 24px !important;
}

.u-margin-tiny {
  margin: 6px !important;
}

.u-margin-small {
  margin: 12px !important;
}

.u-margin-large {
  margin: 48px !important;
}

.u-margin-huge {
  margin: 96px !important;
}

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

.u-margin-top {
  margin-top: 24px !important;
}

.u-margin-top-tiny {
  margin-top: 6px !important;
}

.u-margin-top-small {
  margin-top: 12px !important;
}

.u-margin-top-large {
  margin-top: 48px !important;
}

.u-margin-top-huge {
  margin-top: 96px !important;
}

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

.u-margin-right {
  margin-right: 24px !important;
}

.u-margin-right-tiny {
  margin-right: 6px !important;
}

.u-margin-right-small {
  margin-right: 12px !important;
}

.u-margin-right-large {
  margin-right: 48px !important;
}

.u-margin-right-huge {
  margin-right: 96px !important;
}

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

.u-margin-bottom {
  margin-bottom: 24px !important;
}

.u-margin-bottom-tiny {
  margin-bottom: 6px !important;
}

.u-margin-bottom-small {
  margin-bottom: 12px !important;
}

.u-margin-bottom-large {
  margin-bottom: 48px !important;
}

.u-margin-bottom-huge {
  margin-bottom: 96px !important;
}

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

.u-margin-left {
  margin-left: 24px !important;
}

.u-margin-left-tiny {
  margin-left: 6px !important;
}

.u-margin-left-small {
  margin-left: 12px !important;
}

.u-margin-left-large {
  margin-left: 48px !important;
}

.u-margin-left-huge {
  margin-left: 96px !important;
}

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

/* stylelint-enable string-quotes */
/* ==========================================================================
   #PRINT
   ========================================================================== */
/**
 * Very crude, reset-like styles taken from the HTML5 Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles
 * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282
 */
@media print {
  /**
   * 1. Black prints faster: http://www.sanbeiji.com/archives/953
   */
  *,
  *:before,
  *:after,
  *:first-letter,
  *:first-line {
    background: transparent !important;
    color: #000 !important;
    /* [1] */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /**
   * Don't show links that are fragment identifiers, or use the `javascript:`
   * pseudo protocol.
   */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /**
   * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* ==========================================================================
   #HIDE
   ========================================================================== */
/**
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.u-hidden-visually {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

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

/**
 * Create vendor-prefixed CSS in one go, e.g.
 *
   `@include vendor(border-radius, 4px);`
 *
 */
/* center */
/**
* Font Size calculation : ems
* Returns an em value according to the target.
* $target: font-size to return
* $context: By default it uses the default font-size. You can also pass it a context to avoid problems of compound font sizes.
* $unitless: If you want to remove the em from the result.
* Examples
* Example 1: em(20)
* return: 1.25em depending on a root font-size of 16px
* Example 2: em(20, 24)
* return: 0.8333333em depending on a context font-size of 24px
* Example 3: em(20, $unitless: false)
* returns 0.8333333
*/
/**
 * CSS arrows!!! But... before you read on, you might want to grab a coffee...
 *
 * This mixin creates a CSS arrow on a given element. We can have the arrow
 * appear in one of 12 locations, thus:
 *
 *       01    02    03
 *    +------------------+
 * 12 |                  | 04
 *    |                  |
 * 11 |                  | 05
 *    |                  |
 * 10 |                  | 06
 *    +------------------+
 *       09    08    07
 *
 * You pass this position in along with a desired arrow color and optional
 * border color, for example:
 *
 * `@include arrow(top, left, red)`
 *
 * for just a single, red arrow, or:
 *
 * `@include arrow(bottom, center, red, black)`
 *
 * which will create a red triangle with a black border which sits at the bottom
 * center of the element. Call the mixin thus:
 *
   .foo{
       background-color:#BADA55;
       border:1px solid #ACE;
       @include arrow(top, left, #BADA55, #ACE);
   }
 *
 */
/* ==========================================================================
   #CLEARFIX
   ========================================================================== */
/**
 * Attach our clearfix mixin to a utility class.
 */
.cf:after, .o-nav:after, .u-cf:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

/*------------------------------------*\
    $BRAND
\*------------------------------------*/
/**
 * `.brand` is a quick and simple way to apply your brand face and/or color to
 * any element using a handy helper class.
 */
.u-brand {
  font-family: Noto Serif SC, sans-serif!important;
  color: #3F3F3F!important;
}

.u-brand-face {
  font-family: Noto Serif SC, sans-serif!important;
}

.u-brand-color,
.u-brand-colour {
  color: #3F3F3F!important;
}

/*------------------------------------*\
    $ACCENT
\*------------------------------------*/
.u-accent {
  font-family: Noto Serif SC, sans-serif!important;
  color: #949292!important;
}

.u-accent-face {
  font-family: Noto Serif SC, sans-serif!important;
}

.u-accent-color,
.u-accent-colour {
  color: #949292!important;
}

/*------------------------------------*\
    $HEADINGS
\*------------------------------------*/
/**
 * As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
 *
 * When we define a heading we also define a corresponding class to go with it.
 * This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded
 * heading hierarchy.
 */
.u-alpha {
  font-size: 64px;
  font-size: 4rem;
  line-height: 1.125;
}

.u-beta {
  font-size: 60px;
  font-size: 3.75rem;
  line-height: 1.2;
}

.u-gamma {
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.5;
}

.u-delta {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.7142857143;
}

.u-epsilon {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1;
}

.u-zeta {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
}

/**
 * Heading groups and generic any-heading class.
 * To target any heading of any level simply apply a class of `.hN`, e.g.:
 *
   <hgroup>
       <h1 class=hN>inuit.css</h1>
       <h2 class=hN>Best. Framework. Ever!</h2>
   </hgroup>
 *
 */
.u-hN {
  margin-bottom: 0;
}

.u-hH {
  min-height: 2.75em;
}

/**
 * A series of classes for setting massive type; for use in heroes, mastheads,
 * promos, etc.
 */
.u-tera {
  font-size: 74px;
  font-size: 4.625rem;
  line-height: 1.2972972973;
}

.u-giga {
  font-size: 64px;
  font-size: 4rem;
  line-height: 1.125;
}

.u-mega {
  font-size: 56px;
  font-size: 3.5rem;
  line-height: 1.2857142857;
}

.u-kilo {
  font-size: 48px;
  font-size: 3rem;
  line-height: 1;
}

@media screen and (max-width: 680px) {
  .u-mega {
    font-size: 64px !important;
    font-size: 4rem !important;
    line-height: 1.125 !important;
  }

  .u-h1 {
    font-size: 60px !important;
    font-size: 3.75rem !important;
    line-height: 1.2 !important;
  }

  .u-h2 {
    font-size: 32px !important;
    font-size: 2rem !important;
    line-height: 1.5 !important;
  }

  .u-h3 {
    font-size: 28px !important;
    font-size: 1.75rem !important;
    line-height: 1.7142857143 !important;
  }

  .u-h4 {
    font-size: 24px !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
  }
}
/*------------------------------------*\
    $SMALLPRINT
\*------------------------------------*/
/**
 * A series of classes for setting tiny type; for use in smallprint etc.
 */
.u-smallprint,
.u-milli {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
}

.u-micro {
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 2.4;
}

/*------------------------------------*\
    $HELPER
\*------------------------------------*/
/**
 * A series of helper classes to use arbitrarily. Only use a helper class if an
 * element/component doesn’t already have a class to which you could apply this
 * styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
 * that ruleset as opposed to adding the `.float--left` class to the markup.
 *
 * A lot of these classes carry `!important` as you will always want them to win
 * out over other selectors.
 */
/**
 * Add/remove floats
 */
.u-float--right {
  float: right !important;
}

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

.u-float--none {
  float: none !important;
}

/**
 * Text alignment
 */
.u-text--left {
  text-align: left  !important;
}

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

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

.u-text--justify {
  text-align: justify !important;
}

/**
 * Font weights
 */
.u-weight--light {
  font-weight: 300 !important;
}

.u-weight--normal {
  font-weight: 400 !important;
}

.u-weight--semibold {
  font-weight: 600 !important;
}

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

.u-weight--extrabold {
  font-weight: 800 !important;
}

/**
 * Text styles
 */
.u-style--italic {
  font-style: italic;
}

/**
* Display
*/
.u-display--block {
  display: block;
}

.u-display--inline-block {
  display: inline-block;
}

/**
 * Add/remove margins
 */
.u-push {
  margin: 24px !important;
}

.u-push--top {
  margin-top: 24px !important;
}

.u-push--right {
  margin-right: 24px !important;
}

.u-push--bottom {
  margin-bottom: 24px !important;
}

.u-push--left {
  margin-left: 24px !important;
}

.u-push--ends {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.u-push--sides {
  margin-right: 24px !important;
  margin-left: 24px !important;
}

.u-push-half {
  margin: 12px !important;
}

.u-push-half--top {
  margin-top: 12px !important;
}

.u-push-half--right {
  margin-right: 12px !important;
}

.u-push-half--bottom {
  margin-bottom: 12px !important;
}

.u-push-half--left {
  margin-left: 12px !important;
}

.u-push-half--ends {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.u-push-half--sides {
  margin-right: 12px !important;
  margin-left: 12px !important;
}

.u-push-em2--top {
  margin-top: 2em !important;
}

.u-push-large {
  margin: 48px !important;
}

.u-push-large--top {
  margin-top: 48px !important;
}

.u-push-large--right {
  margin-right: 48px !important;
}

.u-push-large--bottom {
  margin-bottom: 48px !important;
}

.u-push-large--left {
  margin-left: 48px !important;
}

.u-push-large--ends {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.u-push-large--sides {
  margin-right: 48px !important;
  margin-left: 48px !important;
}

.u-push-huge {
  margin: 96px !important;
}

.u-push-huge--top {
  margin-top: 96px !important;
}

.u-push-huge--right {
  margin-right: 96px !important;
}

.u-push-huge--bottom {
  margin-bottom: 96px !important;
}

.u-push-huge--left {
  margin-left: 96px !important;
}

.u-push-huge--ends {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}

.u-push-huge--sides {
  margin-right: 96px !important;
  margin-left: 96px !important;
}

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

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

.u-flush--right {
  margin-right: 0 !important;
}

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

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

.u-flush--ends {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.u-flush--sides {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.u-pull {
  margin: -24px !important;
}

.u-pull--top {
  margin-top: -24px !important;
}

.u-pull--right {
  margin-right: -24px !important;
}

.u-pull--bottom {
  margin-bottom: -24px !important;
}

.u-pull--left {
  margin-left: -24px !important;
}

.u-pull--ends {
  margin-top: -24px !important;
  margin-bottom: -24px !important;
}

.u-pull--sides {
  margin-right: -24px !important;
  margin-left: -24px !important;
}

.u-pull-half {
  margin: -12px !important;
}

.u-pull-half--top {
  margin-top: -12px !important;
}

.u-pull-half--right {
  margin-right: -12px !important;
}

.u-pull-half--bottom {
  margin-bottom: -12px !important;
}

.u-pull-half--left {
  margin-left: -12px !important;
}

.u-pull-half--ends {
  margin-top: -12px !important;
  margin-bottom: -12px !important;
}

.u-pull-half--sides {
  margin-right: -12px !important;
  margin-left: -12px !important;
}

.u-pull-large {
  margin: -48px !important;
}

.u-pull-large--top {
  margin-top: -48px !important;
}

.u-pull-large--right {
  margin-right: -48px !important;
}

.u-pull-large--bottom {
  margin-bottom: -48px !important;
}

.u-pull-large--left {
  margin-left: -48px !important;
}

.u-pull-large--ends {
  margin-top: -48px !important;
  margin-bottom: -48px !important;
}

.u-pull-large--sides {
  margin-right: -48px !important;
  margin-left: -48px !important;
}

.u-pull-huge {
  margin: -96px !important;
}

.u-pull-huge--top {
  margin-top: -96px !important;
}

.u-pull-huge--right {
  margin-right: -96px !important;
}

.u-pull-huge--bottom {
  margin-bottom: -96px !important;
}

.u-pull-huge--left {
  margin-left: -96px !important;
}

.u-pull-huge--ends {
  margin-top: -96px !important;
  margin-bottom: -96px !important;
}

.u-pull-huge--sides {
  margin-right: -96px !important;
  margin-left: -96px !important;
}

/**
 * Add/remove paddings
 */
.u-soft {
  padding: 24px !important;
}

.u-soft--top {
  padding-top: 24px !important;
}

.u-soft--right {
  padding-right: 24px !important;
}

.u-soft--bottom {
  padding-bottom: 24px !important;
}

.u-soft--left {
  padding-left: 24px !important;
}

.u-soft--ends {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.u-soft--sides {
  padding-right: 24px !important;
  padding-left: 24px !important;
}

.u-soft-half {
  padding: 12px !important;
}

.u-soft-half--top {
  padding-top: 12px !important;
}

.u-soft-half--right {
  padding-right: 12px !important;
}

.u-soft-half--bottom {
  padding-bottom: 12px !important;
}

.u-soft-half--left {
  padding-left: 12px !important;
}

.u-soft-half--ends {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.u-soft-half--sides {
  padding-right: 12px !important;
  padding-left: 12px !important;
}

.u-soft-large {
  padding: 48px !important;
}

.u-soft-large--top {
  padding-top: 48px !important;
}

.u-soft-large--right {
  padding-right: 48px !important;
}

.u-soft-large--bottom {
  padding-bottom: 48px !important;
}

.u-soft-large--left {
  padding-left: 48px !important;
}

.u-soft-large--ends {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.u-soft-large--sides {
  padding-right: 48px !important;
  padding-left: 48px !important;
}

.u-soft-huge {
  padding: 96px !important;
}

.u-soft-huge--top {
  padding-top: 96px !important;
}

.u-soft-huge--right {
  padding-right: 96px !important;
}

.u-soft-huge--bottom {
  padding-bottom: 96px !important;
}

.u-soft-huge--left {
  padding-left: 96px !important;
}

.u-soft-huge--ends {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.u-soft-huge--sides {
  padding-right: 96px !important;
  padding-left: 96px !important;
}

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

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

.u-hard--right {
  padding-right: 0 !important;
}

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

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

.u-hard--ends {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.u-hard--sides {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/**
 * Add a help cursor to any element that gives the user extra information on
 * `:hover`.
 */
.u-informative {
  cursor: help !important;
}

/**
 * Mute an object by reducing its opacity.
 */
.u-muted {
  opacity: 0.5 !important;
  filter: alpha(opacity=50) !important;
}

/**
 * Align items to the right where they imply progression/movement forward, e.g.:
 *
   <p class=proceed><a href=#>Read more...</a></p>
 *
 */
.u-proceed {
  text-align: right !important;
}

/**
 * Add a right-angled quote to links that imply movement, e.g.:
 *
   <a href=# class=go>Read more</a>
 *
 */
.u-go:after {
  content: " " "»" !important;
}

/**
 * Apply capital case to an element (usually a `strong`).
 */
.u-caps {
  text-transform: uppercase !important;
}

.u-lineheight--null {
  line-height: 0 !important;
}

.u-lineheight--one {
  line-height: 1 !important;
}

.u-vertical-center {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 40%;
}

.u-absolute-center {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

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

.u-clr, .clr {
  display: block;
  clear: both;
}

@media screen and (max-width: 980px) {
  .u-no-mobile {
    display: none !important;
  }
}
@media screen and (min-width: 980px) {
  .u-mobile-only {
    display: none !important;
  }

  .u-pull-up {
    margin-top: -56px !important;
  }
}
.u-hide {
  display: none;
}

.u-show, .u-block {
  display: block;
}

.u-clear {
  clear: both;
}

.u-border--all {
  border: 3px solid #1d1d1b;
}

.u-columns--2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
  -webkit-column-width: 400px;
  -moz-column-width: 400px;
  -ms-column-width: 400px;
  -o-column-width: 400px;
  column-width: 400px;
}

.u-columns--3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  -o-column-count: 3;
  column-count: 3;
  -webkit-column-width: 400px;
  -moz-column-width: 400px;
  -ms-column-width: 400px;
  -o-column-width: 400px;
  column-width: 400px;
}

.u-column-span {
  -webkit-column-span: all;
  -moz-column-span: all;
  -ms-column-span: all;
  -o-column-span: all;
  column-span: all;
}

.u-p {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

.u-word-break {
  word-break: break-all;
}

.u-overflow-wrap {
  overflow-wrap: break-word;
}

.u-position--relative {
  position: relative;
}

.u-z-index--1 {
  z-index: 1;
}

.u-z-index--neg1 {
  z-index: -1;
}

.u-btn-pad {
  padding: 12px 24px;
}

/*
.u-vertical-align-container{
   display: table;
}
.u-vertical-align--middle{
   display: table-cell;
   vertical-align: middle;
}
*/
.u-valign-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/** BACKGROUND **/
.u-bg--primary {
  background-color: #B44D3CFF;
}

.u-bg--primary-light {
  background-color: #efd2ce;
}

.u-bg--primary-dark {
  background-color: #682c23;
}

.u-bg--secondary {
  background-color: #647883;
}

.u-bg--tertiary {
  background-color: #e5e9e4;
}

.u-bg--accent {
  background-color: #949292;
}

.u-bg--light {
  background-color: #EEF0F2;
}

.u-bg--dark {
  background-color: #1d1d1b;
}

.u-bg--white {
  background: #fff;
}

.u-bg--black {
  background: #000;
}

/** TEXT **/
.u-text--primary {
  color: #B44D3CFF;
}

.u-text--primary-light {
  color: #efd2ce;
}

.u-text--primary-dark {
  color: #682c23;
}

.u-text--secondary {
  color: #647883;
}

.u-text--tertiary {
  color: #e5e9e4;
}

.u-text--accent {
  color: #949292;
}

.u-text--light {
  color: #EEF0F2;
}

.u-text--dark {
  color: #1d1d1b;
}

.u-text--white {
  color: #fff;
}

.u-text--black {
  color: #000;
}

.u-overline:before {
  content: "";
  display: block;
  margin: 10px auto;
  width: 100px;
  height: 3px;
  background: currentColor;
}

.u-overline--brand:before {
  background: #3F3F3F;
}

.u-overline--accent:before {
  background: #949292;
}

.u-overline--primary:before {
  background: #B44D3CFF;
}

.u-overline--secondary:before {
  background: #647883;
}

.u-overline--tertiary:before {
  background: #e5e9e4;
}

.u-overline--white:before {
  background: #fff;
}

.u-overline--shadow:before {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.u-overline--left:before {
  margin-left: 0;
}

html, body {
  font-family: "Catamaran", sans-serif;
  font-size: 1em;
}

body {
  color: #1d1d1b;
  background: #fff;
}

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #949292;
  text-shadow: none;
}

::selection {
  background: #949292;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 400;
  font-family: "Noto Serif SC", sans-serif;
  margin-bottom: 12px;
  margin-bottom: 0.75rem;
}

@media screen and (max-width: 680px) {
  h1 {
    font-size: 60px;
    font-size: 3.75rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 32px;
    font-size: 2rem;
    line-height: 1.5;
  }

  h3 {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.7142857143;
  }

  h4 {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1;
  }
}
/*------------------------------------*\
    $PARAGRAPHS
\*------------------------------------*/
/**
 * The `.lede` class is used to make the introductory text (usually a paragraph)
 * of a document slightly larger.
 */
.lede,
.lead {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2;
}

p {
  word-wrap: break-word;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
}

/*------------------------------------*\
    $QUOTES
\*------------------------------------*/
/**
 * If English quotes are set in `_vars.scss`, define them here.
 */
/**
 * Big up @boblet: html5doctor.com/blockquote-q-cite
 */
/**
 * Inline quotes.
 */
q {
  quotes: "‘" "’" "“" "”";
}
q:before {
  content: "\2018";
  content: open-quote;
}
q:after {
  content: "\2019";
  content: close-quote;
}
q q:before {
  content: "\201C";
  content: open-quote;
}
q q:after {
  content: "\201D";
  content: close-quote;
}

blockquote {
  quotes: " “ " " ” ";
}
blockquote p {
  padding: 2em;
}
blockquote p:before {
  content: " “ ";
  content: open-quote;
  font-size: 8em;
  color: #1d1d1b;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
}
blockquote p:after {
  content: "";
  content: no-close-quote;
}
blockquote p:last-of-type:after {
  content: " ” ";
  content: close-quote;
  font-size: 8em;
  color: #1d1d1b;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
}
blockquote q:before {
  content: "\2018";
  content: open-quote;
}
blockquote q:after {
  content: "\2019";
  content: close-quote;
}

/**
 *
   <blockquote>
       <p>Insanity: doing the same thing over and over again and expecting
       different results.</p>
       <b class=source>Albert Einstein</b>
   </blockquote>
 *
 */
blockquote {
  /**
   * .4em is roughly equal to the width of the opening “ that we wish to hang.
   */
  text-indent: -0.41em;
}
blockquote p:last-of-type {
  margin-bottom: 0;
}

.source {
  display: block;
  text-indent: 0;
  padding-left: 4em;
}
.source:before {
  content: "\2014";
}

a {
  color: #949292;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  webkit-backface-visibility: hidden;
}

a:hover, a.active {
  color: #B44D3CFF;
}

img {
  max-width: 100%;
  height: auto;
}

/**
 * Image placement variations.
 */
.img--right, .img--right img {
  float: right;
  margin-bottom: 24px;
  margin-left: 24px;
}

.img--left, .img--left img {
  float: left;
  margin-right: 24px;
  margin-bottom: 24px;
}

.img--center, .img--center img {
  display: block;
  margin-right: auto;
  margin-bottom: 24px;
  margin-left: auto;
}

.img--full {
  display: block;
  width: 100%;
  height: auto;
  margin-right: auto;
  margin-bottom: 24px;
  margin-left: auto;
}

.img--fill {
  display: block;
  width: 100%;
  height: auto;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

/**
 * Keep your images on your baseline.
 *
 * Please note, these will not work too nicely with fluid images and will
 * distort when resized below a certain width. Use with caution.
 */
.img--short {
  height: 120px;
}

.img--medium {
  height: 240px;
}

.img--tall {
  height: 360px;
}

/**
 * Images in `figure` elements.
 */
figure > img {
  display: block;
}

.img--round-corners {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
}

.img--shadow {
  -webkit-box-shadow: 3px 3px 10px #555;
  -moz-box-shadow: 3px 3px 10px #555;
  -ms-box-shadow: 3px 3px 10px #555;
  -o-box-shadow: 3px 3px 10px #555;
  box-shadow: 3px 3px 10px #555;
}

.img--width {
  width: 50%;
}

.img--max-width {
  max-width: 240px;
}

.img--height {
  height: 50%;
}

.img--max-height {
  max-height: 240px;
}

.svg--white {
  fill: #fff;
}

.svg-icon {
  display: inline-flex;
  align-self: center;
  position: relative;
  height: 1em;
  width: 1em;
}

.svg-icon svg {
  height: 1em;
  width: 1em;
}

.svg-icon.svg-baseline svg, .svg-icon.svg-baseline img {
  bottom: -0.0125em;
  position: absolute;
}

/*------------------------------------*\
    $TABLES
\*------------------------------------*/
/**
 * We have a lot at our disposal for making very complex table constructs, e.g.:
 *
   <table class="table--bordered  table--striped  table--data">
       <colgroup>
           <col class=t10>
           <col class=t10>
           <col class=t10>
           <col>
       </colgroup>
       <thead>
           <tr>
               <th colspan=3>Foo</th>
               <th>Bar</th>
           </tr>
           <tr>
               <th>Lorem</th>
               <th>Ipsum</th>
               <th class=numerical>Dolor</th>
               <th>Sit</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <th rowspan=3>Sit</th>
               <td>Dolor</td>
               <td class=numerical>03.788</td>
               <td>Lorem</td>
           </tr>
           <tr>
               <td>Dolor</td>
               <td class=numerical>32.210</td>
               <td>Lorem</td>
           </tr>
           <tr>
               <td>Dolor</td>
               <td class=numerical>47.797</td>
               <td>Lorem</td>
           </tr>
           <tr>
               <th rowspan=2>Sit</th>
               <td>Dolor</td>
               <td class=numerical>09.640</td>
               <td>Lorem</td>
           </tr>
           <tr>
               <td>Dolor</td>
               <td class=numerical>12.117</td>
               <td>Lorem</td>
           </tr>
       </tbody>
   </table>
 *
 */
table {
  width: 100%;
}

th,
td {
  padding: 6px;
  text-align: left;
}
@media screen and (min-width: 480px) {
  th,
  td {
    padding: 12px;
  }
}

/**
 * Cell alignments
 */
[colspan] {
  text-align: center;
}

[colspan="1"] {
  text-align: left;
}

[rowspan] {
  vertical-align: middle;
}

[rowspan="1"] {
  vertical-align: top;
}

.numerical {
  text-align: right;
}

/**
 * In the HTML above we see several `col` elements with classes whose numbers
 * represent a percentage width for that column. We leave one column free of a
 * class so that column can soak up the effects of any accidental breakage in
 * the table.
 */
.t5 {
  width: 5%;
}

.t10 {
  width: 10%;
}

.t12 {
  width: 12.5%;
}

/* 1/8 */
.t15 {
  width: 15%;
}

.t20 {
  width: 20%;
}

.t25 {
  width: 25%;
}

/* 1/4 */
.t30 {
  width: 30%;
}

.t33 {
  width: 33.333%;
}

/* 1/3 */
.t35 {
  width: 35%;
}

.t37 {
  width: 37.5%;
}

/* 3/8 */
.t40 {
  width: 40%;
}

.t45 {
  width: 45%;
}

.t50 {
  width: 50%;
}

/* 1/2 */
.t55 {
  width: 55%;
}

.t60 {
  width: 60%;
}

.t62 {
  width: 62.5%;
}

/* 5/8 */
.t65 {
  width: 65%;
}

.t66 {
  width: 66.666%;
}

/* 2/3 */
.t70 {
  width: 70%;
}

.t75 {
  width: 75%;
}

/* 3/4*/
.t80 {
  width: 80%;
}

.t85 {
  width: 85%;
}

.t87 {
  width: 87.5%;
}

/* 7/8 */
.t90 {
  width: 90%;
}

.t95 {
  width: 95%;
}

/**
 * Bordered tables
 */
.table--bordered th,
.table--bordered td {
  border: 1px solid #666;
}
.table--bordered th:empty,
.table--bordered td:empty {
  border: none;
}
.table--bordered thead tr:last-child th {
  border-bottom-width: 2px;
}
.table--bordered tbody tr th:last-of-type {
  border-right-width: 2px;
}

/**
 * Striped tables
 */
.table--striped tbody tr:nth-of-type(odd) {
  background-color: #ffc;
  /* Override this color in your theme stylesheet */
}

/**
 * Data table
 */
.table--data {
  font: 12px/1.5 sans-serif;
}

/**
 * Lined tables
 */
.table--lined tbody tr {
  border-bottom: 1px solid #ffc;
}
.table--lined tbody tr:last-child {
  border-bottom: none;
}

/*------------------------------------*\
    $FORMS
\*------------------------------------*/
/**
 *
 * Demo: jsfiddle.net/inuitcss/MhHHU
 *
 */
fieldset {
  padding: 24px;
}

/**
 * Text inputs
 *
 * Instead of a `[type]` selector for each kind of form input, we just use a
 * class to target any/every one, e.g.:
   <input type=text class=text-input>
   <input type=email class=text-input>
   <input type=password class=text-input>
 *
 */
.text-input,
textarea {
  /**
   * Style these via your theme stylesheet.
   */
}

/**
 * Group sets of form fields in a list, e.g.:
 *
   <ul class=form-fields>
       <li>
           <label />
           <input />
       </li>
       <li>
           <label />
           <select />
       </li>
       <li>
           <label />
           <input />
       </li>
   </ul>
 *
 */
.form-fields {
  list-style: none;
  margin: 0;
}

.form-fields > li {
  margin-bottom: 24px;
}

.form-fields > li:last-child {
  margin-bottom: 0;
}

/**
 * Labels
 *
 * Define a `.label` class as well as a `label` element. This means we can apply
 * label-like styling to meta-labels for groups of options where a `label`
 * element is not suitable, e.g.:
 *
   <li>
       <span class=label>Select an option below:</span>
       <ul class="multi-list  four-cols">
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
       </ul>
   </li>
 *
 */
label,
.label {
  display: block;
}

/**
 * Extra help text in `label`s, e.g.:
 *
   <label>Card number <small class=additional>No spaces</small></label>
 *
 */
.additional {
  display: block;
  font-weight: normal;
}

/*
 * Groups of checkboxes and radios, e.g.:
 *
   <li>
       <ul class=check-list>
           <li>
               <input /> <label />
           </li>
           <li>
               <input /> <label />
           </li>
       </ul>
   </li>
 *
 */
.check-list {
  list-style: none;
  margin: 0;
}

/*
 * Labels in check-lists
 */
.check-label,
.check-list label,
.check-list .label {
  display: inline-block;
}

/**
 * Spoken forms are for forms that read like spoken word, e.g.:
 *
   <li class=spoken-form>
       Hello, my <label for=spoken-name>name</label> is
       <input type=text class=text-input id=spoken-name>. My home
       <label for=country>country</label> is
       <select id=country>
           <option>UK</option>
           <option>US</option>
           <option>Other</option>
       </select>
   </li>
 *
 */
.spoken-form label {
  display: inline-block;
  font: inherit;
}

/**
 * Extra help text displayed after a field when that field is in focus, e.g.:
 *
   <label for=email>Email:</label>
   <input type=email class=text-input id=email>
   <small class=extra-help>.edu emails only</small>
 *
 * We leave the help text in the document flow and merely set it to
 * `visibility:hidden;`. This means that it won’t interfere with anything once
 * it reappears.
 *
 */
/*small*/
.extra-help {
  display: inline-block;
  visibility: hidden;
}

.text-input:active + .extra-help,
.text-input:focus + .extra-help {
  visibility: visible;
}

/*
html,body{
  height: 100%;
}
*/
@media screen and (min-width: 1170px) {
  /*main{
    max-width: 1140px;
    margin:0 auto;
  }
  */
}
@media screen and (min-width: 1170px) {
  .main {
    position: relative;
  }

  /* STICKY FOOTER
  .wrap {
    min-height: 100%;
    margin-bottom: -$footer-height;
    position: relative;
  }
  .wrap:after {
    content: "";
    display: block;
  }
  .site-footer,.wrap:after {
    height: $footer-height;
  }
  //.site-footer{height: $footer-height;}

*/
}
.o-header-image {
  position: relative;
  line-height: 0;
}

.o-header-image img {
  width: 100%;
  height: auto;
}

.o-header-image__caption {
  display: block;
  position: absolute;
  z-index: 2;
  bottom: 0;
  padding: 1em;
  line-height: 1;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   #LAYOUT - MOD
   ========================================================================== */
.o-layout--space > .o-layout__item {
  margin-bottom: 24px;
}

/* ==========================================================================
   #GRID - MOD
   ========================================================================== */
.o-grid--space > .o-grid__cell {
  padding-bottom: 24px;
}

.o-grid--space-small {
  margin-left: 12px;
}
.o-grid--space-small > .o-grid__cell {
  padding-left: 12px;
  padding-bottom: 12px;
}

.o-grid--tiny {
  margin-left: -6px;
}
.o-grid--tiny > .o-grid__cell {
  padding-left: 6px;
}

.o-grid--small {
  margin-left: -12px;
}
.o-grid--small > .o-grid__cell {
  padding-left: 12px;
}

.o-grid--large {
  margin-left: -48px;
}
.o-grid--large > .o-grid__cell {
  padding-left: 48px;
}

.o-grid--huge {
  margin-left: -96px;
}
.o-grid--huge > .o-grid__cell {
  padding-left: 96px;
}

/*------------------------------------*\
    $NAV
\*------------------------------------*/
/**
 * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
 * When used on an `ol` or `ul`, this class throws the list into horizontal mode
 * e.g.:
 *
   <ul class=nav>
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * Demo: jsfiddle.net/inuitcss/Vnph4
 *
 */
.o-nav {
  list-style: none;
  margin-left: 0;
}
.o-nav > li,
.o-nav > li > a {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

/**
 * `.o-nav--stacked` extends `.o-nav` and throws the list into vertical mode, e.g.:
 *
   <ul class="nav  nav--stacked">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.o-nav--stacked > li {
  display: list-item;
}
.o-nav--stacked > li > a {
  display: block;
}

/**
 * `.o-nav--banner` extends `.o-nav` and centres the list, e.g.:
 *
   <ul class="nav  nav--banner">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.o-nav--banner {
  text-align: center;
}

/**
 * Give nav links a big, blocky hit area. Extends `.o-nav`, e.g.:
 *
   <ul class="nav  nav--block">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.o-nav--block {
  line-height: 1;
  /**
   * Remove whitespace caused by `inline-block`.
   */
  letter-spacing: -0.31em;
  word-spacing: -0.43em;
  white-space: nowrap;
}
.o-nav--block > li {
  letter-spacing: normal;
  word-spacing: normal;
}
.o-nav--block > li > a {
  padding: 12px;
}

/**
 * Force a nav to occupy 100% of the available width of its parent. Extends
 * `.o-nav`, e.g.:
 *
   <ul class="nav  nav--fit">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * Thanks to @pimpl for this idea!
 */
.o-nav--fit {
  display: table;
  width: 100%;
}
.o-nav--fit > li {
  display: table-cell;
}
.o-nav--fit > li > a {
  display: block;
}

/**
 * Make a list of keywords. Extends `.o-nav`, e.g.:
 *
   `<ul class="nav  nav--keywords>`
 *
 */
.o-nav--keywords > li:after {
  content: "\002C" "\00A0";
}
.o-nav--keywords > li:last-child:after {
  display: none;
}

/*------------------------------------*\
    $BREADCRUMB
\*------------------------------------*/
/**
 * Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.:
 *
   <ol class="nav  breadcrumb">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>The Board</a></li>
       <li class=current><a href=#>Directors</a></li>
   </ol>
 *
 * Demo: jsfiddle.net/inuitcss/rkAY9
 *
 */
.o-breadcrumb > li + li:before {
  content: "\00A0" "\00BB" "\00A0";
}

/**
 * For denoting a path-like structure, GitHub style, e.g.:
 *
   <ol class="nav  breadcrumb--path">
       <li class=breadcrumb__root><a href=#>inuit.css</a></li>
       <li><a href=#>inuit.css</a></li>
       <li><a href=#>partials</a></li>
       <li class=current><a href=#>objects</a></li>
   </ol>
 *
 */
.o-breadcrumb--path > li + li:before {
  content: "\00A0" "\002F" "\00A0 ";
}

/**
 * Assign a delimiter on the fly through a data attribute, e.g.:
 *
   <ol class="nav  breadcrumb">
       <li><a href=#>Home</a></li>
       <li data-breadcrumb="|"><a href=#>About</a></li>
       <li data-breadcrumb="|"><a href=#>The Board</a></li>
       <li data-breadcrumb="|" class=current><a href=#>Directors</a></li>
   </ol>
 *
 */
.o-breadcrumb > li + li[data-breadcrumb]:before {
  content: attr(data-breadcrumb) " ";
}

/**
 * Denote the root of the tree.
 */
.o-breadcrumb__root {
  font-weight: bold;
}

.o-breadcrumb a {
  text-decoration: none;
}

@font-face {
  font-family: 'psicon';
  src: url("/cdn/fonts/psicon.eot?ver2vf");
  src: url("/cdn/fonts/psicon.eot?ver2vf#iefix") format("embedded-opentype"), url("/cdn/fonts/psicon.ttf?ver2vf") format("truetype"), url("/cdn/fonts/psicon.woff?ver2vf") format("woff"), url("/cdn/fonts/psicon.svg?ver2vf#psicon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'psicon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon--pull {
  margin-left: -1em;
}

.icon-tripadvisor:before {
  content: "\e90a";
}

.icon-home:before {
  content: "\e902";
}

.icon-google:before {
  content: "\ea88";
}

.icon-google-plus:before {
  content: "\ea8b";
}

.icon-facebook:before {
  content: "\ea90";
}

.icon-instagram:before {
  content: "\ea92";
}

.icon-twitter:before {
  content: "\ea96";
}

.icon-youtube:before {
  content: "\ea9d";
}

.icon-linkedin:before {
  content: "\eaca";
}

.icon-pinterest:before {
  content: "\ead2";
}

.icon-surface:before {
  content: "\e900";
}

.icon-baths:before {
  content: "\e901";
}

.icon-beds:before {
  content: "\e907";
}

.icon-calendar:before {
  content: "\e908";
}

.icon-people:before {
  content: "\e909";
}

.icon-ps-ico:before {
  content: "\e903";
}

.icon-search:before {
  content: "\e904";
}

.icon-youtube-play:before {
  content: "\e905";
}

.icon-icon-map-marker:before {
  content: "\e906";
}

.icon-chevron-right:before {
  content: "\e90e";
}

.icon-chevron-left:before {
  content: "\e90f";
}

.icon-chevron-down:before {
  content: "\e910";
}

.icon-chevron-up:before {
  content: "\e911";
}

.icon-arrow_back:before {
  content: "\e5c4";
}

.icon-arrow_downward:before {
  content: "\e5db";
}

.icon-arrow_forward:before {
  content: "\e5c8";
}

.icon-arrow_upward:before {
  content: "\e5d8";
}

.icon-close:before {
  content: "\e5cd";
}

.icon-menu:before {
  content: "\e5d2";
}

/* PNG ICONS */
a.pdf {
  background: transparent url(icons/pdf.png) center left no-repeat;
  display: inline-block;
  padding-left: 36px;
  line-height: 36px;
}

/*
a[href$='.pdf'] {
background:transparent url(icons/pdf.png) center left no-repeat;
display:inline-block;
padding-left:36px;
line-height:36px;
}
a[href$='.doc'] {
background:transparent url(icons/doc.png) center left no-repeat;
display:inline-block;
padding-left:36px;
line-height:36px;
}
a[href$='.xls'] {
background:transparent url(icons/xls.png) center left no-repeat;
display:inline-block;
padding-left:36px;
line-height:36px;
}
a[href$='.xlsx'] {
background:transparent url(icons/xlsx.png) center left no-repeat;
display:inline-block;
padding-left:36px;
line-height:36px;
}
a[href$='.rtf'] {
background:transparent url(icons/rtf.png) center left no-repeat;
display:inline-block;
padding-left:36px;
line-height:36px;
}
a[href$='.ppt'] {
background:transparent url(icons/ppt.png) center left no-repeat;
display:inline-block;
padding-left:36px;
line-height:36px;
}


a[href$='.zip'] {
background:transparent url(icons/zip.png) center left no-repeat;
display:inline-block;
padding-left:36px;
line-height:36px;
}

a.file[href$='.jpg'],a.file[href$='.jpeg'] {
background:transparent url(icons/jpg.png) center left no-repeat;
display:inline-block;
padding-left:36px;
line-height:36px;
}
a.file[href$='.png'] {
background:transparent url(icons/png.png) center left no-repeat;
display:inline-block;
padding-left:36px;
line-height:36px;
}
/*
a[href$='.gif'] {
background:transparent url(icons/gif.png) center left no-repeat;
display:inline-block;
padding-left:36px;
line-height:36px;
}

a[href$='.bmp'] {
background:transparent url(icons/bmp.png) center left no-repeat;
display:inline-block;
padding-left:36px;
line-height:36px;
}
*/
.o-alert {
  margin-bottom: 1em;
  padding: 8px 35px 8px 14px;
  background-color: #fcf8e3;
  border: 1px solid #f2e187;
  /*  -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  font-size: 12px;
  font-size: 1.2rem;
  color: #9c8611;
}

.o-alert .o-alert-heading {
  color: inherit;
}

.o-alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  float: right;
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: bold;
  line-height: 18px;
  color: inherit;
}

.o-alert--success {
  background-color: #c5e6c5;
  border-color: #a2d6a2;
  color: #347834;
}

.o-alert--warning {
  background-color: #fee7c7;
  border-color: #fcd296;
  color: #c17305;
}

.o-alert--error {
  background-color: #f4cac8;
  border-color: #eba19e;
  color: #da4f49;
}

.o-alert--inverse {
  background-color: #414141;
  border-color: #000000;
  color: #ffffff;
}

.o-alert--block {
  padding-top: 14px;
  padding-bottom: 14px;
}

.o-alert--block .o-alert__heading {
  margin-bottom: 0.1875em;
  font-size: inherit;
  font-weight: bold;
}

.o-alert--block > p,
.o-alert--block > ul {
  margin-bottom: 0;
}

.o-alert--block p + p {
  margin-top: 5px;
}

/*------------------------------------*\
    $ARROWS
\*------------------------------------*/
/**
 * It is a common design treatment to give an element a triangular points-out
 * arrow, we typically build these with CSS. These following classes allow us to
 * generate these arbitrarily with a mixin, `@arrow()`.
 */
/**
 * Forms the basis for any/all CSS arrows.
 */
.o-arrow--top-center, .o-arrow--bottom-center {
  position: relative;
}
.o-arrow--top-center:before, .o-arrow--bottom-center:before, .o-arrow--top-center:after, .o-arrow--bottom-center:after {
  content: "";
  position: absolute;
  border-collapse: separate;
}
.o-arrow--top-center:before, .o-arrow--bottom-center:before {
  border: 12px solid transparent;
}
.o-arrow--top-center:after, .o-arrow--bottom-center:after {
  border: 11px solid transparent;
}

/**
 * Define individual edges so we can combine what we need, when we need.
 */
.o-arrow--top-center:before, .o-arrow--top-center:after {
  bottom: 100%;
}

.o-arrow--bottom-center:before, .o-arrow--bottom-center:after {
  top: 100%;
}

.o-arrow--bottom-center:before, .o-arrow--top-center:before, .o-arrow--bottom-center:after, .o-arrow--top-center:after {
  left: 50%;
  margin-left: -12px;
}
.o-arrow--bottom-center:after, .o-arrow--top-center:after {
  margin-left: -11px;
}

.o-arrow--bottom-center:before {
  border-top-color: inherit !important;
}
.o-arrow--bottom-center:after {
  border-top-color: inherit !important;
}

.o-arrow--top-center:before {
  border-bottom-color: inherit !important;
}
.o-arrow--top-center:after {
  border-bottom-color: inherit !important;
}

.o-underline:after {
  content: "";
  display: block;
  width: 100%;
  padding-top: 14px;
  border-bottom: 3px solid #1d1d1b;
}

.o-underline--center:after {
  margin: 0 auto;
}

.o-underline--space:after {
  margin-bottom: 14px;
}

.o-underline--half:after {
  width: 50%;
}

.o-underline--third:after {
  width: 33.333333%;
}

.o-underline--quarter:after {
  width: 25%;
}

.o-underline--100:after {
  width: 100px;
}

.o-underline--white:after {
  border-color: #fff;
}

.o-underline--brand:after {
  border-color: #B44D3CFF;
}

/* Containers */
.o-container {
  margin: 0 24px;
}

@media screen and (min-width: 1170px) {
  .o-container {
    margin: 0 auto;
    max-width: 1280px;
  }
}
/* Flexible iFrame */
.o-flex-container, .o-video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  z-index: 1;
}

.o-video-container {
  padding-bottom: 52.25%;
}

.o-flex-container iframe,
.o-flex-container object,
.o-flex-container embed,
.o-video-container iframe,
.o-video-container object,
.o-video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.o-map-container {
  position: relative;
  padding-bottom: 36.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.o-map-container iframe,
.o-map-container object,
.o-map-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.o-fb-container {
  position: relative;
  padding-bottom: 80%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  z-index: 1;
  min-height: 480px;
  /**/
}

.o-fb-container iframe,
.o-fb-container div,
.o-fb-container object,
.o-fb-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.o-hover-fadein img {
  opacity: .8;
  -webkit-transition: all 0.66s ease;
  -moz-transition: all 0.66s ease;
  -ms-transition: all 0.66s ease;
  -o-transition: all 0.66s ease;
  transition: all 0.66s ease;
}

.o-hover-fadein:hover img {
  opacity: 1;
}

.o-hover-zoom {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
}

/*.o-hover-zoom img,.o-hover-zoom * {*/
.o-hover-zoom img {
  display: block;
  position: relative;
  margin-bottom: 0;
  -webkit-transition: all 0.66s ease;
  -moz-transition: all 0.66s ease;
  -ms-transition: all 0.66s ease;
  -o-transition: all 0.66s ease;
  transition: all 0.66s ease;
}

/*.o-hover-zoom:hover img,.o-hover-zoom:hover * {*/
.o-hover-zoom:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

/* Shine */
.o-hover-shine {
  position: relative;
  display: inline-block;
}

.o-hover-shine figure {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.o-hover-shine figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}

.o-hover-shine figure:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}
/* Overlay */
.o-hover-overlay {
  position: relative;
  overflow: hidden;
  display: block;
}

.o-hover-overlay .o-hover-overlay__overlay {
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.o-hover-overlay:hover .o-hover-overlay__overlay {
  opacity: 1;
}

.o-hover-overlay__image {
  width: 100%;
}

.o-hover-overlay__details {
  position: absolute;
  z-index: 2;
  text-align: center;
  padding-left: .5em;
  padding-right: .5em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.o-hover-overlay:hover .o-hover-overlay__details {
  top: 50%;
  left: 50%;
  opacity: 1;
}

.o-hover-overlay__title {
  color: #fff;
  line-height: 1.4;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
}

.o-hover-overlay__text {
  display: block;
  color: #fff;
  line-height: 1.4;
  padding-top: 1em;
  text-transform: uppercase;
}

/*
.o-hover-overlay__text:before {
  content : "";
  position: absolute;
  left    : 35%;
  bottom  : 30px;
  height  : 2px;
  width   : 30%;
  border-bottom:2px solid #fff;
}
*/
.fadeIn-bottom {
  top: 80%;
}

.fadeIn-top {
  top: 20%;
}

.fadeIn-left {
  left: 20%;
}

.fadeIn-right {
  left: 80%;
}

.o-hover-filter {
  position: relative;
  -webkit-filter: brightness(75%) contrast(140%);
  -moz-filter: brightness(75%) contrast(140%);
  -ms-filter: brightness(75%) contrast(140%);
  -o-filter: brightness(75%) contrast(140%);
  filter: brightness(75%) contrast(140%);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.o-hover-filter:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
}

.o-hero-image {
  max-width: 100%;
  margin: auto;
}

/*
.o-hero-image::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .8) 0, rgba(0, 0, 0, 0) 100%);
  margin-top: -150px;
  height: 150px;
  width: 100%;
  content: '';
}*/
.o-hero-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, black 0, rgba(0, 0, 0, 0) 40%);
  opacity: .6;
}

.index .o-hero-image::after {
  opacity: .3;
}

.o-hero-image--max img {
  max-height: 180px;
  min-height: 180px;
}

.o-bg-cover {
  background-size: cover;
  background-position: 50% 50%;
  height: 460px;
}

/*
@media screen and (min-width: $mq-sm) {
	.o-bg-cover{
		height:460px;

	}
}*/
   /*
@media screen and (min-width: $mq-md) {
	.o-bg-cover{
		height:auto;
		min-height:460px;
	}
}

@media screen and (min-width: $mq-lg) {
	.o-bg-cover{
		height:auto;
		min-height:340px;
	}
}
@media screen and (min-width: $mq-wd) {
	.o-bg-cover{
		height:auto;
		min-height:460px;
	}
}

*/
.o-bg-cover__link {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/**
 * Tooltip Styles
 */
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid rgba(51, 51, 51, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1;
}

/* 
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.owl-carousel .owl-animated-in {
  z-index: 0;
}

.owl-carousel .owl-animated-out {
  z-index: 1;
}

.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

/* 
 *  Core Owl Carousel CSS File
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}

.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
}

.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
  cursor: pointer;
  cursor: hand;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel.owl-loaded {
  display: block;
}

.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}

.owl-carousel.owl-hidden {
  opacity: 0;
}

.owl-carousel .owl-refresh .owl-item {
  display: none;
}

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
}

.owl-carousel.owl-text-select-on .owl-item {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

.owl-carousel .owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}

.owl-carousel.owl-rtl {
  direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
  float: right;
}

/* No Js */
.no-js .owl-carousel {
  display: block;
}

/* 
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}

.owl-carousel .owl-item img {
  transform-style: preserve-3d;
}

/* 
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transition: scale 100ms ease;
  -moz-transition: scale 100ms ease;
  -ms-transition: scale 100ms ease;
  -o-transition: scale 100ms ease;
  transition: scale 100ms ease;
}

.owl-carousel .owl-video-play-icon:hover {
  -webkit-transition: scale(1.3, 1.3);
  -moz-transition: scale(1.3, 1.3);
  -ms-transition: scale(1.3, 1.3);
  -o-transition: scale(1.3, 1.3);
  transition: scale(1.3, 1.3);
}

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none;
}

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
}

/**
 * Owl Carousel v2.2.0
 * Copyright 2013-2016 David Deutsch
 * Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
 */
/*
 * 	Default theme - Owl Carousel CSS File
 */
.owl-theme .owl-nav {
  margin-top: 10px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.owl-theme .owl-nav [class*='owl-'] {
  color: #FFF;
  font-size: 14px;
  margin: 5px;
  padding: 4px 7px;
  background: #D6D6D6;
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
}

.owl-theme .owl-nav [class*='owl-']:hover {
  background: #869791;
  color: #FFF;
  text-decoration: none;
}

.owl-theme .owl-nav .disabled {
  opacity: 0.5;
  cursor: default;
}

.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 10px;
}

.owl-theme .owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.owl-theme .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  background: #D6D6D6;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity 200ms ease;
  border-radius: 30px;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #869791;
}

body.fancybox-active {
  overflow: hidden;
}

body.fancybox-iosfix {
  position: fixed;
  left: 0;
  right: 0;
}

.fancybox-is-hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
}

.fancybox-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99992;
  -webkit-tap-highlight-color: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.fancybox-outer,
.fancybox-inner,
.fancybox-bg,
.fancybox-stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.fancybox-outer {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fancybox-bg {
  background: #1e1e1e;
  opacity: 0;
  transition-duration: inherit;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71);
}

.fancybox-is-open .fancybox-bg {
  opacity: 0.87;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fancybox-infobar,
.fancybox-toolbar,
.fancybox-caption-wrap {
  position: absolute;
  direction: ltr;
  z-index: 99997;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility 0s linear .25s;
  box-sizing: border-box;
}

.fancybox-show-infobar .fancybox-infobar,
.fancybox-show-toolbar .fancybox-toolbar,
.fancybox-show-caption .fancybox-caption-wrap {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s, visibility 0s;
}

.fancybox-infobar {
  top: 0;
  left: 0;
  font-size: 13px;
  padding: 0 10px;
  height: 44px;
  min-width: 44px;
  line-height: 44px;
  color: #ccc;
  text-align: center;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: subpixel-antialiased;
  mix-blend-mode: exclusion;
}

.fancybox-toolbar {
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
}

.fancybox-stage {
  overflow: hidden;
  direction: ltr;
  z-index: 99994;
  -webkit-transform: translate3d(0, 0, 0);
}

.fancybox-is-closing .fancybox-stage {
  overflow: visible;
}

.fancybox-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  outline: none;
  white-space: normal;
  box-sizing: border-box;
  text-align: center;
  z-index: 99994;
  -webkit-overflow-scrolling: touch;
  display: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

.fancybox-slide::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}

.fancybox-is-sliding .fancybox-slide,
.fancybox-slide--previous,
.fancybox-slide--current,
.fancybox-slide--next {
  display: block;
}

.fancybox-slide--image {
  overflow: visible;
}

.fancybox-slide--image::before {
  display: none;
}

.fancybox-slide--video .fancybox-content,
.fancybox-slide--video iframe {
  background: #000;
}

.fancybox-slide--map .fancybox-content,
.fancybox-slide--map iframe {
  background: #E5E3DF;
}

.fancybox-slide--next {
  z-index: 99995;
}

.fancybox-slide > * {
  display: inline-block;
  position: relative;
  padding: 24px;
  margin: 44px 0 44px;
  border-width: 0;
  vertical-align: middle;
  text-align: left;
  background-color: #fff;
  overflow: auto;
  box-sizing: border-box;
}

.fancybox-slide > title,
.fancybox-slide > style,
.fancybox-slide > meta,
.fancybox-slide > link,
.fancybox-slide > script,
.fancybox-slide > base {
  display: none;
}

.fancybox-slide .fancybox-image-wrap {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: 0;
  z-index: 99995;
  background: transparent;
  cursor: default;
  overflow: visible;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

.fancybox-can-zoomOut .fancybox-image-wrap {
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.fancybox-can-zoomIn .fancybox-image-wrap {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.fancybox-can-drag .fancybox-image-wrap {
  cursor: -webkit-grab;
  cursor: grab;
}

.fancybox-is-dragging .fancybox-image-wrap {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.fancybox-image,
.fancybox-spaceball {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  max-height: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fancybox-spaceball {
  z-index: 1;
}

.fancybox-slide--iframe .fancybox-content {
  padding: 0;
  width: 80%;
  height: 80%;
  max-width: calc(100% - 100px);
  max-height: calc(100% - 88px);
  overflow: visible;
  background: #fff;
}

.fancybox-iframe {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.fancybox-error {
  margin: 0;
  padding: 40px;
  width: 100%;
  max-width: 380px;
  background: #fff;
  cursor: default;
}

.fancybox-error p {
  margin: 0;
  padding: 0;
  color: #444;
  font-size: 16px;
  line-height: 20px;
}

/* Buttons */
.fancybox-button {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: rgba(30, 30, 30, 0.6);
  transition: color .3s ease;
  cursor: pointer;
  outline: none;
}

.fancybox-button,
.fancybox-button:visited,
.fancybox-button:link {
  color: #ccc;
}

.fancybox-button:focus,
.fancybox-button:hover {
  color: #fff;
}

.fancybox-button[disabled] {
  color: #ccc;
  cursor: default;
  opacity: 0.6;
}

.fancybox-button svg {
  display: block;
  position: relative;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.fancybox-button svg path {
  fill: currentColor;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 3;
}

.fancybox-button--share svg path {
  stroke-width: 1;
}

.fancybox-button--play svg path:nth-child(2) {
  display: none;
}

.fancybox-button--pause svg path:nth-child(1) {
  display: none;
}

.fancybox-button--zoom svg path {
  fill: transparent;
}

/* Navigation arrows */
.fancybox-navigation {
  display: none;
}

.fancybox-show-nav .fancybox-navigation {
  display: block;
}

.fancybox-navigation button {
  position: absolute;
  top: 50%;
  margin: -50px 0 0 0;
  z-index: 99997;
  background: transparent;
  width: 60px;
  height: 100px;
  padding: 17px;
}

.fancybox-navigation button:before {
  content: "";
  position: absolute;
  top: 30px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: rgba(30, 30, 30, 0.6);
}

.fancybox-navigation .fancybox-button--arrow_left {
  left: 0;
}

.fancybox-navigation .fancybox-button--arrow_right {
  right: 0;
}

/* Close button on the top right corner of html content */
.fancybox-close-small {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  z-index: 10;
  cursor: pointer;
}

.fancybox-close-small:after {
  content: 'x';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  font: 22px/30px Arial,"Helvetica Neue",Helvetica,sans-serif;
  color: #888;
  font-weight: 300;
  text-align: center;
  border-radius: 50%;
  border-width: 0;
  background-color: transparent;
  transition: background-color .25s;
  box-sizing: border-box;
  z-index: 2;
}

.fancybox-close-small:focus {
  outline: none;
}

.fancybox-close-small:focus:after {
  outline: 1px dotted #888;
}

.fancybox-close-small:hover:after {
  color: #555;
  background: #eee;
}

.fancybox-slide--image .fancybox-close-small,
.fancybox-slide--iframe .fancybox-close-small {
  top: 0;
  right: -40px;
}

.fancybox-slide--image .fancybox-close-small:after,
.fancybox-slide--iframe .fancybox-close-small:after {
  font-size: 35px;
  color: #aaa;
}

.fancybox-slide--image .fancybox-close-small:hover:after,
.fancybox-slide--iframe .fancybox-close-small:hover:after {
  color: #fff;
  background: transparent;
}

.fancybox-is-scaling .fancybox-close-small,
.fancybox-is-zoomable.fancybox-can-drag .fancybox-close-small {
  display: none;
}

/* Caption */
.fancybox-caption-wrap {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 2vw 0 2vw;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
}

.fancybox-caption {
  padding: 30px 0;
  font-size: 14px;
  color: #fff;
  line-height: 20px;
  -webkit-text-size-adjust: none;
}

.fancybox-caption a,
.fancybox-caption button,
.fancybox-caption select {
  pointer-events: all;
  position: relative;
  /* Fix IE11 */
}

.fancybox-caption a {
  color: #fff;
  text-decoration: underline;
}

/* Loading indicator */
.fancybox-slide > .fancybox-loading {
  border: 6px solid rgba(100, 100, 100, 0.4);
  border-top: 6px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  height: 50px;
  width: 50px;
  -webkit-animation: fancybox-rotate .8s infinite linear;
  animation: fancybox-rotate .8s infinite linear;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  z-index: 99999;
}

@-webkit-keyframes fancybox-rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fancybox-rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
/* Transition effects */
.fancybox-animated {
  transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
}

/* transitionEffect: slide */
.fancybox-fx-slide.fancybox-slide--previous {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
}

.fancybox-fx-slide.fancybox-slide--next {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  opacity: 0;
}

.fancybox-fx-slide.fancybox-slide--current {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* transitionEffect: fade */
.fancybox-fx-fade.fancybox-slide--previous,
.fancybox-fx-fade.fancybox-slide--next {
  opacity: 0;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.fancybox-fx-fade.fancybox-slide--current {
  opacity: 1;
}

/* transitionEffect: zoom-in-out */
.fancybox-fx-zoom-in-out.fancybox-slide--previous {
  -webkit-transform: scale3d(1.5, 1.5, 1.5);
  transform: scale3d(1.5, 1.5, 1.5);
  opacity: 0;
}

.fancybox-fx-zoom-in-out.fancybox-slide--next {
  -webkit-transform: scale3d(0.5, 0.5, 0.5);
  transform: scale3d(0.5, 0.5, 0.5);
  opacity: 0;
}

.fancybox-fx-zoom-in-out.fancybox-slide--current {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

/* transitionEffect: rotate */
.fancybox-fx-rotate.fancybox-slide--previous {
  -webkit-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  transform: rotate(-360deg);
  opacity: 0;
}

.fancybox-fx-rotate.fancybox-slide--next {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
  opacity: 0;
}

.fancybox-fx-rotate.fancybox-slide--current {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1;
}

/* transitionEffect: circular */
.fancybox-fx-circular.fancybox-slide--previous {
  -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
  transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
  opacity: 0;
}

.fancybox-fx-circular.fancybox-slide--next {
  -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
  transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
  opacity: 0;
}

.fancybox-fx-circular.fancybox-slide--current {
  -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  opacity: 1;
}

/* transitionEffect: tube */
.fancybox-fx-tube.fancybox-slide--previous {
  -webkit-transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
  transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
}

.fancybox-fx-tube.fancybox-slide--next {
  -webkit-transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
  transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
}

.fancybox-fx-tube.fancybox-slide--current {
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}

/* Share */
.fancybox-share {
  padding: 30px;
  border-radius: 3px;
  background: #f4f4f4;
  max-width: 90%;
  text-align: center;
}

.fancybox-share h1 {
  color: #222;
  margin: 0 0 20px 0;
  font-size: 35px;
  font-weight: 700;
}

.fancybox-share p {
  margin: 0;
  padding: 0;
}

p.fancybox-share__links {
  margin-right: -10px;
}

.fancybox-share__button {
  display: inline-block;
  text-decoration: none;
  margin: 0 10px 10px 0;
  padding: 0 15px;
  min-width: 130px;
  border: 0;
  border-radius: 3px;
  background: #fff;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  line-height: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #fff;
  transition: all .2s;
}

.fancybox-share__button:hover {
  text-decoration: none;
}

.fancybox-share__button--fb {
  background: #3b5998;
}

.fancybox-share__button--fb:hover {
  background: #344e86;
}

.fancybox-share__button--pt {
  background: #bd081d;
}

.fancybox-share__button--pt:hover {
  background: #aa0719;
}

.fancybox-share__button--tw {
  background: #1da1f2;
}

.fancybox-share__button--tw:hover {
  background: #0d95e8;
}

.fancybox-share__button svg {
  position: relative;
  top: -1px;
  width: 25px;
  height: 25px;
  margin-right: 7px;
  vertical-align: middle;
}

.fancybox-share__button svg path {
  fill: #fff;
}

.fancybox-share__input {
  box-sizing: border-box;
  width: 100%;
  margin: 10px 0 0 0;
  padding: 10px 15px;
  background: transparent;
  color: #5d5b5b;
  font-size: 14px;
  outline: none;
  border: 0;
  border-bottom: 2px solid #d7d7d7;
}

/* Thumbs */
.fancybox-thumbs {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 212px;
  margin: 0;
  padding: 2px 2px 4px 2px;
  background: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  box-sizing: border-box;
  z-index: 99995;
}

.fancybox-thumbs-x {
  overflow-y: hidden;
  overflow-x: auto;
}

.fancybox-show-thumbs .fancybox-thumbs {
  display: block;
}

.fancybox-show-thumbs .fancybox-inner {
  right: 212px;
}

.fancybox-thumbs > ul {
  list-style: none;
  position: absolute;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 0;
  white-space: nowrap;
}

.fancybox-thumbs-x > ul {
  overflow: hidden;
}

.fancybox-thumbs-y > ul::-webkit-scrollbar {
  width: 7px;
}

.fancybox-thumbs-y > ul::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.fancybox-thumbs-y > ul::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 10px;
}

.fancybox-thumbs > ul > li {
  float: left;
  overflow: hidden;
  padding: 0;
  margin: 2px;
  width: 100px;
  height: 75px;
  max-width: calc(50% - 4px);
  max-height: calc(100% - 8px);
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-sizing: border-box;
}

li.fancybox-thumbs-loading {
  background: rgba(0, 0, 0, 0.1);
}

.fancybox-thumbs > ul > li > img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  max-height: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fancybox-thumbs > ul > li:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 4px solid #4ea7f9;
  z-index: 99991;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fancybox-thumbs > ul > li.fancybox-thumbs-active:before {
  opacity: 1;
}

/* Styling for Small-Screen Devices */
@media all and (max-width: 800px) {
  .fancybox-thumbs {
    width: 110px;
  }

  .fancybox-show-thumbs .fancybox-inner {
    right: 110px;
  }

  .fancybox-thumbs > ul > li {
    max-width: calc(100% - 10px);
  }
}
/*csslint box-model:false*/
/*
Box-model set to false because we're setting a height on select elements, which
also have border and padding. This is done because some browsers don't render
the padding. We explicitly set the box-model for select elements to border-box,
so we can ignore the csslint warning.
*/
.pure-form input[type="text"],
.pure-form input[type="password"],
.pure-form input[type="email"],
.pure-form input[type="url"],
.pure-form input[type="date"],
.pure-form input[type="month"],
.pure-form input[type="time"],
.pure-form input[type="datetime"],
.pure-form input[type="datetime-local"],
.pure-form input[type="week"],
.pure-form input[type="number"],
.pure-form input[type="search"],
.pure-form input[type="tel"],
.pure-form input[type="color"],
.pure-form select,
.pure-form textarea {
  padding: 0.5em 0.6em;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 3px;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type]) {
  padding: 0.5em 0.6em;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
.pure-form input[type="color"] {
  padding: 0.2em 0.5em;
}

.pure-form input[type="text"]:focus,
.pure-form input[type="password"]:focus,
.pure-form input[type="email"]:focus,
.pure-form input[type="url"]:focus,
.pure-form input[type="date"]:focus,
.pure-form input[type="month"]:focus,
.pure-form input[type="time"]:focus,
.pure-form input[type="datetime"]:focus,
.pure-form input[type="datetime-local"]:focus,
.pure-form input[type="week"]:focus,
.pure-form input[type="number"]:focus,
.pure-form input[type="search"]:focus,
.pure-form input[type="tel"]:focus,
.pure-form input[type="color"]:focus,
.pure-form select:focus,
.pure-form textarea:focus {
  outline: 0;
  border-color: #129FEA;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type]):focus {
  outline: 0;
  border-color: #129FEA;
}

.pure-form input[type="file"]:focus,
.pure-form input[type="radio"]:focus,
.pure-form input[type="checkbox"]:focus {
  outline: thin solid #129FEA;
  outline: 1px auto #129FEA;
}

.pure-form .pure-checkbox,
.pure-form .pure-radio {
  margin: 0.5em 0;
  display: block;
}

.pure-form input[type="text"][disabled],
.pure-form input[type="password"][disabled],
.pure-form input[type="email"][disabled],
.pure-form input[type="url"][disabled],
.pure-form input[type="date"][disabled],
.pure-form input[type="month"][disabled],
.pure-form input[type="time"][disabled],
.pure-form input[type="datetime"][disabled],
.pure-form input[type="datetime-local"][disabled],
.pure-form input[type="week"][disabled],
.pure-form input[type="number"][disabled],
.pure-form input[type="search"][disabled],
.pure-form input[type="tel"][disabled],
.pure-form input[type="color"][disabled],
.pure-form select[disabled],
.pure-form textarea[disabled] {
  cursor: not-allowed;
  background-color: #eaeded;
  color: #cad2d3;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type])[disabled] {
  cursor: not-allowed;
  background-color: #eaeded;
  color: #cad2d3;
}

.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly] {
  background-color: #eee;
  /* menu hover bg color */
  color: #777;
  /* menu text color */
  border-color: #ccc;
}

.pure-form input:focus:invalid,
.pure-form textarea:focus:invalid,
.pure-form select:focus:invalid {
  color: #b94a48;
  border-color: #e9322d;
}

.pure-form input[type="file"]:focus:invalid:focus,
.pure-form input[type="radio"]:focus:invalid:focus,
.pure-form input[type="checkbox"]:focus:invalid:focus {
  outline-color: #e9322d;
}

.pure-form select {
  /* Normalizes the height; padding is not sufficient. */
  border: 1px solid #ccc;
  background-color: white;
}

.pure-form select[multiple] {
  height: auto;
}

.pure-form label {
  margin: 0.5em 0 0.2em;
}

.pure-form fieldset {
  margin: 0;
  padding: 0.35em 0 0.75em;
  border: 0;
}

.pure-form legend {
  display: block;
  width: 100%;
  padding: 0.3em 0;
  margin-bottom: 0.3em;
  color: #333;
  border-bottom: 1px solid #e5e5e5;
}

.pure-form-stacked input[type="text"],
.pure-form-stacked input[type="password"],
.pure-form-stacked input[type="email"],
.pure-form-stacked input[type="url"],
.pure-form-stacked input[type="date"],
.pure-form-stacked input[type="month"],
.pure-form-stacked input[type="time"],
.pure-form-stacked input[type="datetime"],
.pure-form-stacked input[type="datetime-local"],
.pure-form-stacked input[type="week"],
.pure-form-stacked input[type="number"],
.pure-form-stacked input[type="search"],
.pure-form-stacked input[type="tel"],
.pure-form-stacked input[type="color"],
.pure-form-stacked input[type="file"],
.pure-form-stacked select,
.pure-form-stacked label,
.pure-form-stacked textarea {
  display: block;
  margin: 0.25em 0;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form-stacked input:not([type]) {
  display: block;
  margin: 0.25em 0;
}

.pure-form-aligned input,
.pure-form-aligned textarea,
.pure-form-aligned select,
.pure-form-aligned .pure-help-inline,
.pure-form-message-inline {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: middle;
}

.pure-form-aligned textarea {
  vertical-align: top;
}

/* Aligned Forms */
.pure-form-aligned .pure-control-group {
  margin-bottom: 0.5em;
}

.pure-form-aligned .pure-control-group label {
  text-align: right;
  display: inline-block;
  vertical-align: middle;
  width: 15em;
  margin: 0 1em 0 0;
}

.pure-form-aligned .pure-controls {
  margin: 1.5em 0 0 15em;
}

.pure-form-aligned .pure-control-group.full {
  margin-bottom: 0.5em;
  display: table;
  width: 100%;
}

.pure-form-aligned .pure-control-group.full label {
  text-align: left;
  vertical-align: middle;
  width: 15em;
  margin: 0 1em 0 0;
  display: table-cell;
  white-space: nowrap;
}

.pure-form-aligned .pure-control-group.full span {
  display: table-cell;
}

.pure-form-aligned .pure-control-group.full input[type="text"],
.pure-form-aligned .pure-control-group.full input[type="email"],
.pure-form-aligned .pure-control-group.full input[type="password"],
.pure-form-aligned .pure-control-group.full input[type="tel"],
.pure-form-aligned .pure-control-group.full textarea {
  width: 100%;
}

/*
*/
.pure-form-aligned .pure-controls.full {
  margin: 1.5em 0 0 15em;
}

/* Rounded Inputs */
.pure-form input.pure-input-rounded,
.pure-form .pure-input-rounded {
  border-radius: 2em;
  padding: 0.5em 1em;
}

/* Grouped Inputs */
.pure-form .pure-group fieldset {
  margin-bottom: 10px;
}

.pure-form .pure-group input,
.pure-form .pure-group textarea {
  display: block;
  padding: 10px;
  margin: 0 0 -1px;
  border-radius: 0;
  position: relative;
  top: -1px;
}

.pure-form .pure-group input:focus,
.pure-form .pure-group textarea:focus {
  z-index: 3;
}

.pure-form .pure-group input:first-child,
.pure-form .pure-group textarea:first-child {
  top: 1px;
  border-radius: 4px 4px 0 0;
  margin: 0;
}

.pure-form .pure-group input:first-child:last-child,
.pure-form .pure-group textarea:first-child:last-child {
  top: 1px;
  border-radius: 4px;
  margin: 0;
}

.pure-form .pure-group input:last-child,
.pure-form .pure-group textarea:last-child {
  top: -2px;
  border-radius: 0 0 4px 4px;
  margin: 0;
}

.pure-form .pure-group button {
  margin: 0.35em 0;
}

.pure-form .pure-input-1 {
  width: 100%;
}

.pure-form .pure-input-3-4 {
  width: 75%;
}

.pure-form .pure-input-2-3 {
  width: 66%;
}

.pure-form .pure-input-1-2 {
  width: 50%;
}

.pure-form .pure-input-1-3 {
  width: 33%;
}

.pure-form .pure-input-1-4 {
  width: 25%;
}

/* Inline help for forms */
/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
.pure-form .pure-help-inline,
.pure-form-message-inline {
  display: inline-block;
  padding-left: 0.3em;
  color: #666;
  vertical-align: middle;
  font-size: 0.875em;
}

/* Block help for forms */
.pure-form-message {
  display: block;
  color: #666;
  font-size: 0.875em;
}

@media only screen and (max-width: 480px) {
  .pure-form button[type="submit"] {
    margin: 0.7em 0 0;
  }

  .pure-form input:not([type]),
  .pure-form input[type="text"],
  .pure-form input[type="password"],
  .pure-form input[type="email"],
  .pure-form input[type="url"],
  .pure-form input[type="date"],
  .pure-form input[type="month"],
  .pure-form input[type="time"],
  .pure-form input[type="datetime"],
  .pure-form input[type="datetime-local"],
  .pure-form input[type="week"],
  .pure-form input[type="number"],
  .pure-form input[type="search"],
  .pure-form input[type="tel"],
  .pure-form input[type="color"],
  .pure-form label {
    margin-bottom: 0.3em;
    display: block;
  }

  .pure-group input:not([type]),
  .pure-group input[type="text"],
  .pure-group input[type="password"],
  .pure-group input[type="email"],
  .pure-group input[type="url"],
  .pure-group input[type="date"],
  .pure-group input[type="month"],
  .pure-group input[type="time"],
  .pure-group input[type="datetime"],
  .pure-group input[type="datetime-local"],
  .pure-group input[type="week"],
  .pure-group input[type="number"],
  .pure-group input[type="search"],
  .pure-group input[type="tel"],
  .pure-group input[type="color"] {
    margin-bottom: 0;
  }

  .pure-form-aligned .pure-control-group label, .pure-form-aligned .pure-control-group.full label {
    margin-bottom: 0.3em;
    text-align: left;
    display: block;
    width: 100%;
  }

  .pure-form-aligned .pure-controls {
    margin: 1.5em 0 0 0;
  }

  /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
  .pure-form .pure-help-inline,
  .pure-form-message-inline,
  .pure-form-message {
    display: block;
    font-size: 0.75em;
    /* Increased bottom padding to make it group with its related input element. */
    padding: 0.2em 0 0.8em;
  }
}
label.error {
  color: red;
}

.cc-window {
  opacity: 1;
  transition: opacity 1s ease;
}

.cc-window.cc-invisible {
  opacity: 0;
}

.cc-animate.cc-revoke {
  transition: transform 1s ease;
}

.cc-animate.cc-revoke.cc-top {
  transform: translateY(-2em);
}

.cc-animate.cc-revoke.cc-bottom {
  transform: translateY(2em);
}

.cc-animate.cc-revoke.cc-active.cc-bottom, .cc-animate.cc-revoke.cc-active.cc-top, .cc-revoke:hover {
  transform: translateY(0);
}

.cc-grower {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s;
}

.cc-link, .cc-revoke:hover {
  text-decoration: underline;
}

.cc-revoke, .cc-window {
  position: fixed;
  overflow: hidden;
  box-sizing: border-box;
  font-family: Helvetica,Calibri,Arial,sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  z-index: 9999;
}

.cc-window.cc-static {
  position: static;
}

.cc-window.cc-floating {
  padding: 2em;
  max-width: 24em;
  -ms-flex-direction: column;
  flex-direction: column;
}

.cc-window.cc-banner {
  padding: 1em 1.8em;
  width: 100%;
  -ms-flex-direction: row;
  flex-direction: row;
}

.cc-revoke {
  padding: .5em;
}

.cc-header {
  font-size: 18px;
  font-weight: 700;
}

.cc-btn, .cc-close, .cc-link, .cc-revoke {
  cursor: pointer;
}

.cc-link {
  opacity: .8;
  display: inline-block;
  padding: .2em;
}

.cc-link:hover {
  opacity: 1;
}

.cc-link:active, .cc-link:visited {
  color: initial;
}

.cc-btn {
  display: block;
  padding: .4em .8em;
  font-size: .9em;
  font-weight: 700;
  border-width: 2px;
  border-style: solid;
  text-align: center;
  white-space: nowrap;
}

.cc-banner .cc-btn:last-child {
  min-width: 140px;
}

.cc-highlight .cc-btn:first-child {
  background-color: transparent;
  border-color: transparent;
}

.cc-highlight .cc-btn:first-child:focus, .cc-highlight .cc-btn:first-child:hover {
  background-color: transparent;
  text-decoration: underline;
}

.cc-close {
  display: block;
  position: absolute;
  top: .5em;
  right: .5em;
  font-size: 1.6em;
  opacity: .9;
  line-height: .75;
}

.cc-close:focus, .cc-close:hover {
  opacity: 1;
}

.cc-revoke.cc-top {
  top: 0;
  left: 3em;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em;
}

.cc-revoke.cc-bottom {
  bottom: 0;
  left: 3em;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
}

.cc-revoke.cc-left {
  left: 3em;
  right: unset;
}

.cc-revoke.cc-right {
  right: 3em;
  left: unset;
}

.cc-top {
  top: 1em;
}

.cc-left {
  left: 1em;
}

.cc-right {
  right: 1em;
}

.cc-bottom {
  bottom: 1em;
}

.cc-floating > .cc-link {
  margin-bottom: 1em;
}

.cc-floating .cc-message {
  display: block;
  margin-bottom: 1em;
}

.cc-window.cc-floating .cc-compliance {
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.cc-window.cc-banner {
  -ms-flex-align: center;
  align-items: center;
}

.cc-banner.cc-top {
  left: 0;
  right: 0;
  top: 0;
}

.cc-banner.cc-bottom {
  left: 0;
  right: 0;
  bottom: 0;
}

.cc-banner .cc-message {
  -ms-flex: 1;
  flex: 1;
}

.cc-compliance {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: justify;
  align-content: space-between;
}

.cc-compliance > .cc-btn {
  -ms-flex: 1;
  flex: 1;
}

.cc-btn + .cc-btn {
  margin-left: .5em;
}

@media print {
  .cc-revoke, .cc-window {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  .cc-btn {
    white-space: normal;
  }
}
@media screen and (max-width: 414px) and (orientation: portrait), screen and (max-width: 736px) and (orientation: landscape) {
  .cc-window.cc-top {
    top: 0;
  }

  .cc-window.cc-bottom {
    bottom: 0;
  }

  .cc-window.cc-banner, .cc-window.cc-left, .cc-window.cc-right {
    left: 0;
    right: 0;
  }

  .cc-window.cc-banner {
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .cc-window.cc-banner .cc-compliance {
    -ms-flex: 1;
    flex: 1;
  }

  .cc-window.cc-floating {
    max-width: none;
  }

  .cc-window .cc-message {
    margin-bottom: 1em;
  }

  .cc-window.cc-banner {
    -ms-flex-align: unset;
    align-items: unset;
  }
}
.cc-floating.cc-theme-classic {
  padding: 1.2em;
  border-radius: 5px;
}

.cc-floating.cc-type-info.cc-theme-classic .cc-compliance {
  text-align: center;
  display: inline;
  -ms-flex: none;
  flex: none;
}

.cc-theme-classic .cc-btn {
  border-radius: 5px;
}

.cc-theme-classic .cc-btn:last-child {
  min-width: 140px;
}

.cc-floating.cc-type-info.cc-theme-classic .cc-btn {
  display: inline-block;
}

.cc-theme-edgeless.cc-window {
  padding: 0;
}

.cc-floating.cc-theme-edgeless .cc-message {
  margin: 2em 2em 1.5em;
}

.cc-banner.cc-theme-edgeless .cc-btn {
  margin: 0;
  padding: .8em 1.8em;
  height: 100%;
}

.cc-banner.cc-theme-edgeless .cc-message {
  margin-left: 1em;
}

.cc-floating.cc-theme-edgeless .cc-btn + .cc-btn {
  margin-left: 0;
}

/* ==========================================================================
   $BASE-PICKER
   ========================================================================== */
/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
.picker {
  font-size: 16px;
  text-align: left;
  line-height: 1.2;
  color: #000000;
  position: absolute;
  z-index: 10000;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/**
 * The picker input element.
 */
.picker__input {
  cursor: default;
}

/**
 * When the picker is opened, the input element is “activated”.
 */
.picker__input.picker__input--active {
  border-color: #0089ec;
}

/**
 * The holder is the only “scrollable” top-level container element.
 */
.picker__holder {
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/*!
 * Default mobile-first, responsive styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */
/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
/**
 * Make the holder and frame fullscreen.
 */
.picker__holder,
.picker__frame {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

/**
 * The holder should overlay the entire screen.
 */
.picker__holder {
  position: fixed;
  transition: background 0.15s ease-out, -webkit-transform 0s 0.15s;
  transition: background 0.15s ease-out, transform 0s 0.15s;
  -webkit-backface-visibility: hidden;
}

/**
 * The frame that bounds the box contents of the picker.
 */
.picker__frame {
  position: absolute;
  margin: 0 auto;
  min-width: 256px;
  max-width: 666px;
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  transition: all 0.15s ease-out;
}

@media (min-height: 33.875em) {
  .picker__frame {
    overflow: visible;
    top: auto;
    bottom: -100%;
    max-height: 80%;
  }
}
@media (min-height: 40.125em) {
  .picker__frame {
    margin-bottom: 7.5%;
  }
}
/**
 * The wrapper sets the stage to vertically align the box contents.
 */
.picker__wrap {
  display: table;
  width: 100%;
  height: 100%;
}

@media (min-height: 33.875em) {
  .picker__wrap {
    display: block;
  }
}
/**
 * The box contains all the picker contents.
 */
.picker__box {
  background: #ffffff;
  display: table-cell;
  vertical-align: middle;
}

@media (min-height: 26.5em) {
  .picker__box {
    font-size: 1.25em;
  }
}
@media (min-height: 33.875em) {
  .picker__box {
    display: block;
    font-size: 1.33em;
    border: 1px solid #777777;
    border-top-color: #898989;
    border-bottom-width: 0;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
  }
}
@media (min-height: 40.125em) {
  .picker__box {
    font-size: 1.5em;
    border-bottom-width: 1px;
    border-radius: 5px;
  }
}
/**
 * When the picker opens...
 */
.picker--opened .picker__holder {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
  zoom: 1;
  background: rgba(0, 0, 0, 0.32);
  transition: background 0.15s ease-out;
}

.picker--opened .picker__frame {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}

@media (min-height: 33.875em) {
  .picker--opened .picker__frame {
    top: auto;
    bottom: 0;
  }
}
/* ==========================================================================
   $BASE-DATE-PICKER
   ========================================================================== */
/**
 * The picker box.
 */
.picker__box {
  padding: 0 1em;
}

/**
 * The header containing the month and year stuff.
 */
.picker__header {
  text-align: center;
  position: relative;
  margin-top: .75em;
}

/**
 * The month and year labels.
 */
.picker__month,
.picker__year {
  font-weight: 500;
  display: inline-block;
  margin-left: .25em;
  margin-right: .25em;
}

.picker__year {
  color: #999999;
  font-size: .8em;
  font-style: italic;
}

/**
 * The month and year selectors.
 */
.picker__select--month,
.picker__select--year {
  border: 1px solid #b7b7b7;
  height: 2em;
  padding: .5em;
  margin-left: .25em;
  margin-right: .25em;
}

@media (min-width: 24.5em) {
  .picker__select--month,
  .picker__select--year {
    margin-top: -0.5em;
  }
}
.picker__select--month {
  width: 35%;
}

.picker__select--year {
  width: 22.5%;
}

.picker__select--month:focus,
.picker__select--year:focus {
  border-color: #0089ec;
}

/**
 * The month navigation buttons.
 */
.picker__nav--prev,
.picker__nav--next {
  position: absolute;
  padding: .5em 1.25em;
  width: 1em;
  height: 1em;
  box-sizing: content-box;
  top: -0.25em;
}

@media (min-width: 24.5em) {
  .picker__nav--prev,
  .picker__nav--next {
    top: -0.33em;
  }
}
.picker__nav--prev {
  left: -1em;
  padding-right: 1.25em;
}

@media (min-width: 24.5em) {
  .picker__nav--prev {
    padding-right: 1.5em;
  }
}
.picker__nav--next {
  right: -1em;
  padding-left: 1.25em;
}

@media (min-width: 24.5em) {
  .picker__nav--next {
    padding-left: 1.5em;
  }
}
.picker__nav--prev:before,
.picker__nav--next:before {
  content: " ";
  border-top: .5em solid transparent;
  border-bottom: .5em solid transparent;
  border-right: 0.75em solid #000000;
  width: 0;
  height: 0;
  display: block;
  margin: 0 auto;
}

.picker__nav--next:before {
  border-right: 0;
  border-left: 0.75em solid #000000;
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
}

.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
  cursor: default;
  background: none;
  border-right-color: #f5f5f5;
  border-left-color: #f5f5f5;
}

/**
 * The calendar table of dates
 */
.picker__table {
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size: inherit;
  width: 100%;
  margin-top: .75em;
  margin-bottom: .5em;
}

@media (min-height: 33.875em) {
  .picker__table {
    margin-bottom: .75em;
  }
}
.picker__table td {
  margin: 0;
  padding: 0;
}

/**
 * The weekday labels
 */
.picker__weekday {
  width: 14.285714286%;
  font-size: .75em;
  padding-bottom: .25em;
  color: #999999;
  font-weight: 500;
  /* Increase the spacing a tad */
}

@media (min-height: 33.875em) {
  .picker__weekday {
    padding-bottom: .5em;
  }
}
/**
 * The days on the calendar
 */
.picker__day {
  padding: .3125em 0;
  font-weight: 200;
  border: 1px solid transparent;
}

.picker__day--today {
  position: relative;
}

.picker__day--today:before {
  content: " ";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 0;
  height: 0;
  border-top: 0.5em solid #0059bc;
  border-left: .5em solid transparent;
}

.picker__day--disabled:before {
  border-top-color: #aaaaaa;
}

.picker__day--outfocus {
  color: #dddddd;
}

.picker__day--infocus:hover,
.picker__day--outfocus:hover {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
}

.picker__day--highlighted {
  border-color: #0089ec;
}

.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
  background: #0089ec;
  color: #ffffff;
}

.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #dddddd;
  cursor: default;
}

.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
  background: #bbbbbb;
}

/**
 * The footer containing the "today", "clear", and "close" buttons.
 */
.picker__footer {
  text-align: center;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
  border: 1px solid #ffffff;
  background: #ffffff;
  font-size: .8em;
  padding: .66em 0;
  font-weight: bold;
  width: 33%;
  display: inline-block;
  vertical-align: bottom;
}

.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
  border-bottom-color: #b1dcfb;
}

.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
  background: #b1dcfb;
  border-color: #0089ec;
  outline: none;
}

.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
  position: relative;
  display: inline-block;
  height: 0;
}

.picker__button--today:before,
.picker__button--clear:before {
  content: " ";
  margin-right: .45em;
}

.picker__button--today:before {
  top: -0.05em;
  width: 0;
  border-top: 0.66em solid #0059bc;
  border-left: .66em solid transparent;
}

.picker__button--clear:before {
  top: -0.25em;
  width: .66em;
  border-top: 3px solid #ee2200;
}

.picker__button--close:before {
  content: "\D7";
  top: -0.1em;
  vertical-align: top;
  font-size: 1.1em;
  margin-right: .35em;
  color: #777777;
}

.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #dddddd;
  cursor: default;
}

.picker__button--today[disabled]:before {
  border-top-color: #aaaaaa;
}

/* ==========================================================================
   $DEFAULT-DATE-PICKER
   ========================================================================== */
.c-back-top {
  text-decoration: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  z-index: 9999;
  font-size: 2em;
  position: fixed;
  bottom: 10px;
  right: 10px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  padding: .3em .4em;
  background: #B44D3CFF;
  border-radius: 0px;
  opacity: .6;
  line-height: 0;
}

a.c-back-top i {
  color: #fff;
}

/*.c-back-top i {color:#fff; }

.c-back-top:before {
  content: "\ea41";
  opacity: 1;
}
*/
.c-back-top.c-back-top--visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}

.c-back-top.c-back-top-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .6;
}

.c-back-top:hover, .c-back-top.c-back-top-fade-out:hover, .c-back-top:hover i, .c-back-top:hover i:before,
a.c-back-top:hover i, a.c-back-top:hover i:before {
  opacity: 1;
  text-decoration: none;
}

/*
@media only screen and (min-width: map-get($mq-breakpoints, md)) {
  .c-back-top {
    right: 20px;
    bottom:220px;
  }
}
@media only screen and (min-width: 1024px) {
  .c-back-top {
    right: 40px;
    bottom: 40px;
  }
}
*/
.js-back-top, .js-back-top:hover {
  text-decoration: none;
}

/* ==========================================================================
   #BUTTONS
   ========================================================================== */
/**
 * This is an example component. Extend inuitcss by building your own components
 * that make up your UI. Component classes are prefixed with a `c-`.
 */
/**
 * 1. Allow us to style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 4. Reset/normalize some styles.
 * 5. Force all button-styled elements to appear clickable.
 */
.c-btn {
  display: inline-block;
  /* [1] */
  vertical-align: middle;
  /* [2] */
  font-family: "Noto Serif SC", sans-serif;
  text-align: center;
  /* [4] */
  margin: 0;
  /* [4] */
  cursor: pointer;
  /* [5] */
  padding: 12px 24px;
  transition: 0.3333333333s;
  border-radius: 0px;
  border: none;
  background-color: #666;
  /**/
}
.c-btn, .c-btn:hover, .c-btn:active, .c-btn:focus {
  text-decoration: none;
  /* [4] */
  color: #fff;
}
.c-btn:hover, .c-btn:focus, .c-btn.active {
  background-color: #EEF0F2;
  color: #666;
}

/* Style variants
   ========================================================================== */
.c-btn--primary {
  background-color: #B44D3CFF;
}
.c-btn--primary, .c-btn--primary:hover, .c-btn--primary:active, .c-btn--primary:focus {
  text-decoration: none;
  /* [4] */
  color: #fff;
}
.c-btn--primary:hover, .c-btn--primary:focus {
  color: #fff;
  background-color: #666;
}

.c-btn--secondary {
  background-color: #647883;
}
.c-btn--secondary, .c-btn--secondary:hover, .c-btn--secondary:active, .c-btn--secondary:focus {
  text-decoration: none;
  color: #fff;
}
.c-btn--secondary:hover, .c-btn--secondary:focus {
  color: #fff;
  background-color: #e5e9e4;
}

.c-btn--tertiary {
  background-color: #e5e9e4;
}
.c-btn--tertiary, .c-btn--tertiary:hover, .c-btn--tertiary:active, .c-btn--tertiary:focus {
  text-decoration: none;
  color: #fff;
}
.c-btn--tertiary:hover, .c-btn--tertiary:focus {
  background-color: #666;
}

.c-btn--accent {
  background-color: #949292;
}
.c-btn--accent, .c-btn--accent:hover, .c-btn--accent:active, .c-btn--accent:focus {
  text-decoration: none;
  color: #fff;
}
.c-btn--accent:hover, .c-btn--accent:focus {
  background-color: #666;
}

/* Ghost buttons
   ========================================================================== */
/**
 * Ghost buttons have see-through backgrounds and are bordered.
 */
.c-btn--ghost {
  color: currentColor;
  border: 1px solid currentColor;
  padding: 11px 23px;
}
.c-btn--ghost, .c-btn--ghost:hover, .c-btn--ghost:active, .c-btn--ghost:focus {
  background-color: transparent;
}
.c-btn--ghost:hover, .c-btn--ghost:focus {
  color: #B44D3CFF;
}
.c-btn--ghost.c-btn--small {
  padding: 5px 11px;
}
.c-btn--ghost.c-btn--large {
  padding: 23px 47px;
}
.c-btn--ghost.c-btn--primary {
  color: #B44D3CFF;
}
.c-btn--ghost.c-btn--primary:hover, .c-btn--ghost.c-btn--primary:focus {
  color: #666;
}
.c-btn--ghost.c-btn--secondary {
  color: #647883;
}
.c-btn--ghost.c-btn--secondary:hover, .c-btn--ghost.c-btn--secondary:focus {
  color: #666;
}
.c-btn--ghost.c-btn--tertiary {
  color: #e5e9e4;
}
.c-btn--ghost.c-btn--tertiary:hover, .c-btn--ghost.c-btn--tertiary:focus {
  color: #666;
}
.c-btn--ghost.c-btn--accent {
  color: #949292;
}
.c-btn--ghost.c-btn--accent:hover, .c-btn--ghost.c-btn--accent:focus {
  color: #666;
}
.c-btn--ghost.c-btn--white {
  color: #fff;
}
.c-btn--ghost.c-btn--white:hover, .c-btn--ghost.c-btn--white:focus {
  color: #949292;
}

/* Size variants
   ========================================================================== */
.c-btn--small {
  padding: 0.375rem 0.75rem;
}

.c-btn--large {
  padding: 1.5rem 3rem;
}

.c-btn--full {
  width: 100%;
}

/* Pill button
   ========================================================================== */
.c-btn--pill {
  border-radius: 100px;
}

/* ACTION BUTTON
   ========================================================================== */
.c-btn-action {
  text-align: left;
}

/*
.c-btn--action i{
  @include font-size($mega-size);
  line-height: 0;
}
*/
.c-btn-action {
  position: relative;
  display: inline-block;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-left: 2em;
}

.c-btn-action:before {
  position: absolute;
  left: .3em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  line-height: 1;
  font-size: 120%;
  font-style: normal;
  font-weight: normal;
  font-family: 'psicon';
  content: "\ea3c";
}

.c-btn-action--large {
  font-size: 48px;
  font-size: 3rem;
  line-height: 1;
  padding-left: 4.25rem;
  line-height: .9;
}

.c-btn-action--down:before {
  position: absolute;
  left: .3em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  line-height: 1;
  font-size: 120%;
  font-style: normal;
  font-weight: normal;
  font-family: 'psicon';
  content: "\ea3e";
}

.c-btn-action--left:before {
  position: absolute;
  left: .3em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  line-height: 1;
  font-size: 120%;
  font-style: normal;
  font-weight: normal;
  font-family: 'psicon';
  content: "\ea40";
}

.c-btn--white {
  background-color: #fff;
}
.c-btn--white, .c-btn--white:hover, .c-btn--white:active, .c-btn--white:focus {
  text-decoration: none;
  color: #666;
}
.c-btn--white:hover, .c-btn--white:focus {
  background-color: #fff;
  color: #B44D3CFF;
}

/*** COMPARE BUTTON ***/
.c-btn--compare {
  color: #949292;
  border: 1px solid #949292;
  background-color: transparent;
  padding: 5px 11px;
  border-radius: 100px;
  text-decoration: none;
}
.c-btn--compare:hover, .c-btn--compare:active, .c-btn--compare:focus, .c-btn--compare.active {
  background-color: #B44D3CFF;
  border-color: #B44D3CFF;
  text-decoration: none;
}
.c-btn--compare:hover, .c-btn--compare:focus, .c-btn--compare.active {
  color: #fff;
  text-decoration: none;
}

/* FORM */
.c-form input,
.c-form input[type="number"],
.c-form textarea,
.c-form select,
.c-form label {
  width: 100%;
  padding: 0.7em 0.6em;
}

.c-form--flush input,
.c-form--flush textarea,
.c-form--flush select,
.c-form--flush label {
  margin-bottom: 0;
}

.c-form label {
  display: none;
}

#form-contact label {
  display: block;
}

.c-form--search input {
  margin: 0;
}

.c-form input[type="radio"],
.c-form input[type="checkbox"] {
  width: auto;
}

.c-form ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #647883;
}

.c-form ::-moz-placeholder {
  /* Firefox 19+ */
  color: #647883;
}

.c-form :-ms-input-placeholder {
  /* IE 10+ */
  color: #647883;
}

.c-form :-moz-placeholder {
  /* Firefox 18- */
  color: #647883;
}

.c-form--large input[type="text"],
.c-form--large input[type="password"],
.c-form--large input[type="number"],
.c-form--large textarea,
.c-form--large select,
.c-form--large label {
  font-size: 1.2em;
  font-weight: 700;
}

/*
.rounded-form
*/
.rounded-form input[type="text"],
.rounded-form input[type="password"],
.rounded-form input[type="email"],
.rounded-form input[type="url"],
.rounded-form input[type="date"],
.rounded-form input[type="month"],
.rounded-form input[type="time"],
.rounded-form input[type="datetime"],
.rounded-form input[type="datetime-local"],
.rounded-form input[type="week"],
.rounded-form input[type="number"],
.rounded-form input[type="search"],
.rounded-form input[type="tel"],
.rounded-form input[type="color"],
.rounded-form select {
  border-radius: 100px;
}

.rounded-form textarea {
  border-radius: 20px;
}

/* FORM WHITE FOR DARK BACKGROUNDS */
.c-form--white {
  color: #fff;
}

.c-form--white input[type="text"],
.c-form--white input[type="password"],
.c-form--white input[type="number"],
.c-form--white textarea,
.c-form--white select,
.c-form--white label {
  color: #fff;
  border: 2px solid #fff;
  background: #B44D3CFF;
}

.c-form--white label {
  display: none;
}

.c-form--white ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #647883;
}

.c-form--white ::-moz-placeholder {
  /* Firefox 19+ */
  color: #647883;
}

.c-form--white :-ms-input-placeholder {
  /* IE 10+ */
  color: #647883;
}

.c-form--white :-moz-placeholder {
  /* Firefox 18- */
  color: #647883;
}

@media screen and (min-width: 480px) {
  #form-button {
    padding-left: 1em;
    text-align: left;
  }
}
@media screen and (min-width: 980px) {
  .c-form--flush input,
  .c-form--flush textarea,
  .c-form--flush select,
  .c-form--flush label {
    margin-bottom: 0;
  }
}
.toggle-icon {
  font-family: 'psicon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  margin: .2em 0 0 .2em;
  transition: .3s;
}

.toggle-icon:before {
  content: "\ea3e";
}

.close .toggle-icon:before {
  content: "\e608";
}

#picker-container,
#apicker-container,
#dpicker-container {
  position: relative;
}

/*
.calendar:after{
  font-family: 'psicon';
  content: "\e900";

  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}
*/
.input-calendar {
  background-image: url("/cdn/css/calendar.gif");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.c-site-header {
  position: relative;
  clear: both;
  z-index: 2;
  font-weight: 400;
  text-align: center;
  width: 100%;
  vertical-align: middle;
  font-family: "Noto Serif SC", sans-serif;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.c-site-topbar {
  display: block;
  background: #000;
  padding: .4em;
}

.c-site-logo {
  position: relative;
  z-index: 9;
  display: inline-block;
  text-decoration: none;
  padding: .4em;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.c-site-logo img {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.c-site-logo:hover img {
  opacity: .6;
}

.c-tools, .c-langs {
  display: inline-block;
}

.c-tools a, .c-langs a {
  color: #fff;
  display: inline-block;
  margin: .2em;
  text-decoration: none;
  background: none;
}

.c-tools--white a {
  color: #fff;
}

.c-langs {
  font-size: 0.75em;
  white-space: nowrap;
}

.c-tools a:hover, .c-langs a:hover {
  opacity: 1;
  color: #B44D3CFF;
  text-decoration: underline;
}

.c-langs a.active {
  font-weight: 600;
}

/*
@media screen and (min-width: $mq-sm) {

 .c-tools {
   // width:auto;
    float:right;
   // margin-left: 3em;
    vertical-align:middle;
   // text-align: right;
  }
  .c-langs{float:right;margin-left: 3em;}
}
*/
@media screen and (min-width: 980px) {
  .c-tools {
    float: right;
    vertical-align: middle;
  }

  .c-site-header {
    position: fixed;
    padding: 0 50px;
  }

  .c-site-header.sticky {
    background: #000;
  }

  .c-site-header.sticky .c-site-logo img.u-no-mobile {
    width: 60px;
    height: auto;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .c-site-header .o-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-align: center;
    align-items: center;
  }

  .c-site-header .c-main-nav-holder {
    flex-grow: 2;
  }

  .c-site-topbar {
    position: fixed;
    z-index: 3;
    width: 100%;
    height: 40px;
    margin-bottom: 40px;
  }

  .c-site-logo {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: none;
  }
}
.site-footer {
  position: relative;
  background: #949292;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  padding: 0 2em;
  display: block;
}

.site-footer input[type="email"] {
  padding: .7em;
  width: 100%;
}

.site-footer a {
  color: #fff;
}

.footer-nav {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 400;
}

.footer-nav a {
  font-family: "Noto Serif SC", sans-serif;
  color: #fff;
  display: block;
  font-size: 1em;
  margin-bottom: .4em;
}

.footer-nav--sub a {
  font-family: "Catamaran", sans-serif;
  font-size: 0.875em;
}

.footer-nav li {
  display: block;
}

.footer-nav a:hover, .footer-nav li.active a, .footer-nav a.active, .site-footer a:hover {
  color: #000;
}

.social-items a {
  margin: 0 .225em;
  text-decoration: none;
}

@media screen and (min-width: 980px) {
  .footer-nav--main {
    display: table;
    width: 100%;
  }
  .footer-nav--main > li {
    display: table-cell;
  }
  .footer-nav--main > li > a {
    display: block;
  }
}
.mc-form input {
  width: auto;
  padding: .4em;
}

#ps-logo {
  position: absolute;
  left: 0;
  bottom: 4px;
  color: #3F3F3F;
  line-height: 1;
  text-decoration: none;
  z-index: 99;
  font-size: 2.25em;
}

#ps-logo:hover {
  color: #fff;
}

.c-main-nav-holder {
  vertical-align: middle;
  position: relative;
}

.c-main-nav {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1em;
  font-family: "Noto Serif SC", sans-serif;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  position: relative;
  /* z-index: 9999;*/
}

.c-main-nav.js {
  display: none;
}

.c-main-nav > li {
  display: block;
  vertical-align: middle;
}

.c-main-nav > li.u-no-mobile {
  display: none;
}

.c-main-nav > li > a {
  text-decoration: none;
  color: #949292;
  font-size: 0.875em;
  padding: .625em;
  display: inline-block;
  text-align: left;
}

.c-main-nav a:hover, .c-main-nav .active a {
  color: #B44D3CFF;
  /*background-color:$roll-color;*/
}

.c-main-nav a br {
  display: none;
}

.c-nav-trigger {
  width: 100%;
  display: block;
  font-size: 1.5em;
  font-weight: 600;
  text-align: left;
  padding: .625em;
  color: #949292;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.c-nav-trigger:hover {
  color: #B44D3CFF;
  cursor: pointer;
}

.c-nav-trigger span {
  float: right;
}

/*
.c-subnav{
  position: absolute;
  display: block;
 // width: 100%;
  top: 40px;
  left: 0;
  z-index: 9999;
  background:rgba(0,0,0,.6);

  -webkit-transition: all .3s ease .15s;
  -moz-transition: all .3s ease .15s;
  -o-transition: all .3s ease .15s;
  -ms-transition: all .3s ease .15s;
  transition: all .3s ease .15s;
}
.c-subnav li{display: block;text-align: left;}
.c-subnav a{display: block;padding:.4em;}
*/
@media screen and (min-width: 680px) {
  .c-nav-trigger {
    display: none;
  }

  .c-main-nav.js {
    display: block;
    margin: 0 auto 0;
    text-align: center;
  }

  .c-main-nav li {
    display: inline-block;
    zoom: 1;
    border: none;
  }

  .c-main-nav li.u-no-mobile {
    display: inline-block;
  }

  .c-main-nav > li > a {
    padding: .6em .8em;
    background-color: transparent;
  }

  .c-main-nav li.u-no-mobile a {
    border: none;
  }

  .c-main-nav a:hover, .c-main-nav a.active {
    color: #B44D3CFF;
  }

  .c-main-nav li.u-no-mobile a, .c-main-nav li.u-no-mobile a:hover {
    border: none;
  }

  .c-main-nav a br {
    display: block;
  }
}
@media screen and (min-width: 980px) {
  .c-main-nav-holder {
    display: table-cell;
    vertical-align: middle;
  }

  .c-main-nav.js {
    display: table;
  }

  .c-main-nav.js li {
    display: table-cell;
  }

  .c-main-nav > li > a {
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  }

  .c-main-nav a:hover,
  .c-main-nav a.active {
    background: #fff;
    color: #000;
    text-shadow: none;
  }

  .c-main-nav li.c-langs a:hover,
  .c-main-nav li.c-langs a.active {
    background: transparent;
  }

  .c-subnav li {
    display: block;
  }

  .c-main-nav > li:hover > .c-nav-megadrop,
  .c-main-nav > li:hover > ul.c-subnav {
    display: block;
    opacity: 1;
    visibility: visible;
    overflow: visible;
  }
}
@media screen and (min-width: 1170px) {
  .c-main-nav > li > a {
    font-size: 1.125em;
  }
}
/**/
/*
@media screen and (min-width: 1320px) {
.c-main-nav >li > a{
     padding:1.2em ;
   }
}
*/
.c-nav-megadrop {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 9999;
  display: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  /*
   width: 80%;
   margin: 0 auto;
   */
  max-width: 1280px;
  padding: 4px 4px 2px 0;
  font-weight: 400;
  background: #fff;
  -webkit-transition: all .3s ease .15s;
  -moz-transition: all .3s ease .15s;
  -o-transition: all .3s ease .15s;
  -ms-transition: all .3s ease .15s;
  transition: all .3s ease .15s;
}

.c-nav-megadrop a {
  color: #949292;
}

.c-nav-megadrop a:hover {
  color: #B44D3CFF;
  opacity: 1;
}

.c-nav-megadrop .o-grid.o-grid--space-small {
  margin-left: 2px;
}

.c-nav-megadrop .o-grid.o-grid--space-small > .o-grid__cell {
  padding-left: 2px;
  padding-bottom: 2px;
}

.c-nav-sub {
  text-align: center;
  font-size: 0.8125em;
  font-weight: 800;
  text-transform: uppercase;
  background-color: #EEF0F2;
  display: block;
}

.c-nav-sub li:after {
  content: ' |';
}

.c-nav-sub li:last-child:after {
  content: '';
}

/**/
.c-nav-sub a {
  padding: 12px;
  display: inline-block;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  text-decoration: none;
  position: relative;
}

.c-nav-sub a:hover, .c-nav-sub li.active a {
  color: #B44D3CFF;
}

.c-nav-sub a:hover:before, .c-nav-sub li.active a:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 1px;
  bottom: 0;
  left: 25%;
  border-bottom: 1px dotted #B44D3CFF;
}

/* ==========================================================================
   #FEATURED
   ========================================================================== */
.c-featured {
  position: relative;
}

.c-featured__img {
  width: 100%;
  height: auto;
  -webkit-filter: brightness(75%) contrast(140%);
  -moz-filter: brightness(75%) contrast(140%);
  -ms-filter: brightness(75%) contrast(140%);
  -o-filter: brightness(75%) contrast(140%);
  filter: brightness(75%) contrast(140%);
}

.c-featured__actions {
  z-index: 1;
  padding: 24px;
  font-family: "Noto Serif SC", sans-serif;
  font-weight: 400;
}

/*
.c-featured__title{
  @include font-size($h1-size,1);
}
*/
.c-featured__logo {
  width: 60%;
  height: auto;
  fill: #fff;
}

.c-featured__btn {
  position: absolute;
  left: 50%;
  bottom: -20px;
  z-index: 99;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

.c-featured__icons li {
  padding-right: 24px;
}

.c-featured__actions a {
  font-family: "Catamaran", sans-serif;
}

@media screen and (min-width: 980px) {
  /*
  .c-featured {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  */
  /*.
  c-featured__actions{
    padding: 0;
    display: block;
   // @include font-size($h1-size);

    color: #fff;
    text-shadow:1px 1px 3px rgba(0,0,0,0.8);
    line-height: 1.425em;
      margin:0 auto;

     position: absolute;
      left: 50%;
      bottom:20%;
      @include vendor(transform,translate(-50%));

  }
  */
  .c-featured__actions {
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    /*
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left:  0;
        margin: auto;
    
        height:20%;
        */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-48%, -40%);
    width: 80%;
  }

  .c-featured__title {
    font-size: 74px;
    font-size: 4.625rem;
    line-height: 1;
  }

  .c-featured__actions a {
    color: #fff;
  }

  .c-featured__actions a:hover {
    color: #1d1d1b;
  }
}
/*
@media screen and (min-width:$mq-lg) {
  .c-featured__actions{
   // @include font-size($mega-size);
    //bottom:0;
      top: 50%;
    @include vendor(transform,translate(-50%, -30% ));
  }
}
*/
.c-infocard {
  padding-left: 0;
  padding-right: 0;
  /*
   margin-bottom: 40px;
   margin-left: auto;
   margin-right: auto;
   */
  /*
  -moz-transition: -moz-transform 0.22s ease;
  -o-transition: -o-transform 0.22s ease;
  -webkit-transition: -webkit-transform 0.22s ease;
  transition: transform 0.22s ease;
  */
}

.c-infocard:hover {
  /*
  -moz-transform: translateY(-3px);
  -o-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
*/
  -webkit-transform: translateY(-3px);
  -moz-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  -o-transform: translateY(-3px);
  transform: translateY(-3px);
}

.c-infocard__main-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.c-infocard__img {
  height: 160px;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: left;
  background-position: center 0%;
  /* margin-bottom: 10px;*/
}

.c-contact-us {
  position: relative;
  display: block;
  color: #fff;
  background: #1d1d1b;
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.7142857143;
  font-family: Noto Serif SC, sans-serif!important;
  text-align: center;
}

.c-contact-us a {
  color: #fff;
}

.c-contact-us a:hover {
  color: #e5e9e4;
  text-decoration: none;
}

/**/
/* CSS Document */
#calendar-holder {
  padding: 10px 0;
  text-align: center;
}

.calendar {
  margin: 0;
  padding: 0;
  font-size: 1.2em;
  background: #fff;
  text-align: center;
}

.calendar th.month-head {
  padding-top: .6em;
}

.calendar th.days-head {
  color: #cccbcb;
  font-weight: bold;
}

.calendar-yearnav {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendar caption {
  margin: 0;
  padding: .3em 0;
  background: #ffa51e;
}

.calendar tr {
  /*background: transparent;
  border-bottom: 1px solid #000;*/
}

.calendar thead {
  border-bottom: 1px solid #cccbcb;
}

.calendar th, .calendar td, .calendar-yearnav th, .calendar-yearnav td {
  padding: .2em;
}

.calendar th, .calendar-yearnav th, .calendar-yearnav td {
  font-weight: 400;
  /*	color: #fff;
  	background: #fff;
  	color: #fff;
  	background: transparent;*/
  text-align: center;
}

.calendar th.prev, .calendar-yearnav th.prev {
  text-align: left;
}

.calendar th.next, .calendar-yearnav th.next {
  text-align: right;
}

.calendar td {
  border-bottom: 1px solid #eee;
  color: #cccbcb;
  padding: 0.4em;
  text-align: center;
}

.calendar a {
  color: #000;
  text-decoration: none;
  display: block;
}

.calendar a:hover {
  color: #000;
}

.calendar td.today {
  border: 1px solid #3E3A34;
}

/*.calendar td.start,.calendar td.selected.start {
	border-left: 1px solid #000;
	}
.calendar td.end, .calendar td.selected.end {
	border-right: 1px solid #000;
	}*/
.calendar td.selected {
  border: 1px dotted #ff7800;
}

.calendar td.highlighted {
  background: #fc9;
}

.calendar td.low {
  background: #aaa;
}

.calendar td.mid {
  background: #888;
}

.calendar td.high {
  background: #666;
}

.legend .event {
  border-bottom: 1px solid #eee;
}

.legend .event,
.calendar td.event,
.calendar th.event,
.calendar-yearnav td.event,
.calendar-yearnav th.event {
  background: #fff;
  color: #000;
}

.calendar .event a {
  color: #000;
}

.calendar .event a:hover {
  color: #000;
}

.legend .booked,
.calendar td.booked,
.calendar th.booked,
.calendar-yearnav td.booked,
.calendar-yearnav th.booked {
  background: #c6c6c6;
  color: #999;
}

.calendar th.booked a {
  color: #999;
}

.calendar th.booked a:hover {
  color: #000;
}

.legend .pending,
.calendar td.pending,
.calendar th.pending,
.calendar-yearnav td.pending,
.calendar-yearnav th.pending {
  background: #fff;
  color: #88CFEF;
}

.calendar .pending a {
  color: #88CFEF;
}

.calendar .pending a:hover {
  color: #000;
}

.legend .promo,
.calendar td.promo,
.calendar th.promo,
.calendar-yearnav td.promo,
.calendar-yearnav th.promo {
  background: #b53f30;
  color: #fff;
}

.calendar .promo a {
  color: #fff;
}

.calendar .promo a:hover {
  color: #000;
}

.calendar td.passed {
  text-decoration: line-through;
}

.calendar td:hover,
.calendar td.active,
.calendar td.today:hover,
.calendar td.selected:hover,
.calendar td.highlighted:hover {
  background: #eee;
}

.calendar td.promo.active a {
  color: #000;
}

table.calendar td.pad {
  color: #999;
  /*background: #fff;*/
}

/*
table.calendar td.pad:hover {
	background: none;
	border: 0;
	}
*/
.sunday, .saturday {
  background: #fc9;
  /*border:1px dotted #fc9;*/
}

.c-calendar__month {
  padding: 0;
  list-style: none;
  width: 100%;
  margin: 0;
  min-height: 340px;
}

.c-calendar__month:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.c-calendar__month li {
  width: 100%;
  display: inline;
}

.c-calendar__month li table {
  width: 100%;
}

/*
@media screen and (min-width:$mq-sm) {
		.c-calendar__month li {
			float: left;
			width:33%;
		}
}
*/
#year {
  padding: 0;
  list-style: none;
}

#year:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#year li, #month li {
  width: 100%;
  padding: 0 1.1em .5em 0;
  display: inline;
}

#year li table {
  width: 100%;
}

@media screen and (min-width: 680px) {
  #year li {
    float: left;
    width: 33%;
  }
}
.calendar-nav {
  width: 100%;
  display: block;
}
.calendar-nav:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}

.calendar-nav i {
  font-size: 2em;
}

.calendar-nav .prev {
  float: left;
  display: inline-block;
  margin-left: 1em;
}

.calendar-nav .next {
  float: right;
  display: inline-block;
  margin-right: 1em;
}

@media screen and (min-width: 980px) {
  .calendar-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .calendar-nav:after {
    content: none;
  }

  .calendar-nav .prev {
    margin-left: -4em;
  }

  .calendar-nav .next {
    margin-right: -4em;
  }
}
/*
.c-gallery{
  margin:1em 0;
  padding:0;
  list-style: none;
}

.c-gallery li {display: inline-block;margin-left:2%;padding:.1em;}
.c-gallery li:nth-child(2n+1){clear:left;margin-left: 0;}
.c-gallery img {
  width: 100% !important;
  height: auto !important;
  margin-bottom: 2px;
}
*/
.c-gallery, .c-gallery--tsrs {
  width: 100%;
  list-style: none;
  display: block;
  clear: both;
}

.c-gallery li, .c-gallery--tsrs li {
  position: relative;
  display: inline;
  width: 100%;
  padding: 1px;
}

.c-gallery li img, .c-gallery--tsrs li img {
  width: 100%;
}

/*
.c-gallery li a{text-decoration: none;position: relative;}
.c-gallery li a i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4em;
  transition: all 0.4s ease-in-out;
  color:$primary-color;
}
*/
.c-gallery--fluid {
  list-style: none;
  margin: 0 0 24px 0;
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

.c-gallery--fluid img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

.c-gallery--fluid li {
  margin: 5px;
  display: inline-block;
  position: relative;
}

.c-gallery--fluid li a i {
  font-size: 4em;
  transition: all 0.4s ease-in-out;
  color: #B44D3CFF;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.c-gallery--fluid li a:hover i {
  color: #fff;
}

@media screen and (min-width: 680px) {
  .c-gallery--fluid {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media screen and (min-width: 980px) {
  .c-gallery li, .c-gallery--tsrs li {
    position: relative;
    display: inline-block;
    padding: 1px;
    float: left;
    width: 50%;
  }

  .c-gallery li img, .c-gallery--tsrs li img {
    margin-bottom: 0;
  }

  /* .c-gallery li img {width:auto; max-width:100%;}*/
  .c-gallery--fluid {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media screen and (min-width: 1170px) {
  .c-gallery li {
    width: 25%;
  }

  .c-gallery--fluid {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}
.c-tsr {
  -webkit-backface-visibility: hidden;
  line-height: 0;
  margin: 3px;
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
}

/*
@media screen and (min-width: $mq-md) {
  .c-tsr{
    width: auto;
  }
}
*/
.c-tsr--push-top {
  margin-top: .3em;
}

.c-tsr--push-bottom {
  margin-bottom: .4em;
}

.c-tsr--push-left {
  margin-left: .3em;
}

.c-tsr--push-right {
  margin-right: .3em;
}

.c-tsr--half {
  width: 48%;
  width: calc(50% - 6px);
  display: inline-block;
}

/*
.c-tsr__img {

  height: 420px;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: left;
  background-position: center 0%;

  margin-bottom: 10px;
  display: block;
  width: 100%;
//  height: auto;

//  @include vendor(filter,brightness(75%) contrast(140%));
//  @include vendor(transition, all 0.4s ease);


}

.c-tsr__img:hover{
//  @include vendor(filter,none);

//  @include vendor(filter,brightness(1.75) contrast(140%));
//  @include vendor(filter,brightness(1.25));
//  @include vendor(transition, all 0.4s ease);


}*/
.c-tsr img {
  display: block;
  position: relative;
  margin-bottom: 0;
  -webkit-transition: all 0.66s ease;
  -moz-transition: all 0.66s ease;
  -ms-transition: all 0.66s ease;
  -o-transition: all 0.66s ease;
  transition: all 0.66s ease;
  width: 100%;
}

.c-tsr:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

/*
.c-tsr:hover .c-tsr__btn{
  opacity:1;
  @include vendor(transition,all 0.22s ease-in-out);
}
*/
/*
.c-tsr__content{position: absolute;bottom: 0;left: 0;display: block;width: 100%;padding: 2em;}
*/
.c-tsr__ico {
  position: absolute;
  z-index: 99;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 12px;
  font-size: 52px;
  font-size: 3.25rem;
  line-height: 1.3846153846;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.c-tsr__title {
  font-size: 1.5em;
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.22s ease-in-out;
  -moz-transition: all 0.22s ease-in-out;
  -ms-transition: all 0.22s ease-in-out;
  -o-transition: all 0.22s ease-in-out;
  transition: all 0.22s ease-in-out;
}

/*
.c-tsr__subtitle{
    font-size:em(20px);
}

*/
@media screen and (min-width: 960px) {
  .c-tsr__subtitle {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: "normal";
  }
}
.c-tsr__content {
  text-align: left;
  color: #fff;
  line-height: 1.4;
  display: block;
  width: 100%;
  position: absolute;
  padding: 1em;
  bottom: 0;
  left: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
  /* IE6-9 */
}

.c-tsr__btn {
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.0909090909;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  border: 1px solid #fff;
  padding: .245em;
  line-height: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.22s ease-in-out;
  -moz-transition: all 0.22s ease-in-out;
  -ms-transition: all 0.22s ease-in-out;
  -o-transition: all 0.22s ease-in-out;
  transition: all 0.22s ease-in-out;
}

.c-tsr__btn--bottom {
  top: auto;
  bottom: 10%;
}

.c-tsr__txt {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

.c-tsr--space {
  margin-bottom: 24px;
}

.c-tsr--primary {
  border-bottom: 5px solid #B44D3CFF;
}

.c-item-header {
  min-height: 50px;
  position: relative;
}

.c-item-header .c-item-header__content {
  position: absolute;
  bottom: 5px;
}

.c-icon-list {
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.5;
}

.c-icon-list li {
  width: 50%;
}

/* ==========================================================================
   #FEATURED
   ========================================================================== */
@media screen and (min-width: 980px) {
  .c-page-intro {
    margin-left: auto;
    margin-right: auto;
    max-width: 50em;
    width: 66.66667%;
  }
}
/**
* SITE SPECIFIC MODS
**/
/* MAP */
#map {
  min-height: 520px;
}

/** PARAGRAPHS & LISTS **/
p {
  text-align: justify;
}

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

.o-breadcrumb {
  margin-bottom: 0;
}

.editor-content ul {
  text-align: justify;
}

.editor-content {
  position: relative;
}

/** IMAGES **/
.editor-content img {
  max-width: 100%;
  height: auto;
}

.editor-content .o-grid__cell img {
  width: 100%;
}

.editor-content--backgrounds .column_one {
  background-color: #EEF0F2;
}

.editor-content--backgrounds .column_two {
  background-color: #1d1d1b;
}

/** TABLES **/
.editor-content table {
  table-layout: fixed;
  margin-left: -48px;
}

.editor-content th,
.editor-content td {
  vertical-align: top;
  text-align: left;
  padding: 0;
  padding-left: 48px;
}

@media screen and (max-width: 980px) {
  .editor-content .o-grid {
    display: inline-block;
  }

  .editor-content .o-grid__cell {
    flex: none;
  }

  /* Force table to not be like tables anymore */
  .editor-content table, .editor-content thead, .editor-content tbody, .editor-content th, .editor-content td, .editor-content tr {
    display: block;
  }
}
@media screen and (max-width: 680px) {
  .u-soft {
    padding: 0 !important;
  }
}
/* LINKS */
.link {
  text-decoration: underline;
}

/*** OWL SLIDER ***/
.c-featured .owl-holder, .c-featured .o-hero-image {
  background: #EEF0F2;
}

@media screen and (min-width: 980px) {
  .c-featured .owl-holder, .c-featured .o-hero-image {
    min-height: 420px;
  }
}
/*
@media screen and (min-width: $mq-lg) {
.c-featured .owl-holder,.c-featured  .o-hero-image {min-height:520px;}
}
*/
.owl-dots {
  margin-top: 1em;
}

.owl-theme .owl-dots .owl-dot span {
  border: 1px solid #666;
  width: 15px;
  height: 15px;
  margin: 5px 7px;
  background: none;
  border-radius: 0;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #666;
}

.owl-theme .owl-nav {
  margin-top: 0;
}

.owl-slider .owl-nav {
  margin-top: 0;
  float: right;
}

/*
#calendar .owl-nav {
  width: 100%;
  text-align: center;
}*/
/*#calendar .owl-carousel{ margin-top:50px }*/
#calendar .owl-prev, #calendar .owl-next {
  position: absolute;
  top: 0px;
}

#calendar .owl-prev {
  left: 0;
}

#calendar .owl-next {
  right: 0;
}

.owl-theme .owl-nav .owl-prev,
.owl-theme .owl-nav .owl-next {
  font-size: 3.2em;
  line-height: 0;
  padding: 0;
  background: #B44D3CFF;
  color: #fff;
  border: 1px solid #B44D3CFF;
  -webkit-transition: all 0.22s ease-in-out;
  -moz-transition: all 0.22s ease-in-out;
  -ms-transition: all 0.22s ease-in-out;
  -o-transition: all 0.22s ease-in-out;
  transition: all 0.22s ease-in-out;
  border-radius: 0;
}

.owl-theme .owl-nav .owl-prev:hover,
.owl-theme .owl-nav .owl-next:hover {
  background: transparent;
  color: #B44D3CFF;
}

#calendar .owl-prev:hover,
#calendar .owl-next:hover {
  background: #fff;
}

/*
.owl-theme .owl-nav .owl-prev,
.owl-theme .owl-nav .owl-next{float:left; }
*/
/*
.owl-carousel .owl-controls .owl-nav{ bottom: 10px;}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next{
position: absolute;
right:10px;
bottom:10px;
 }
.owl-carousel .owl-controls .owl-nav .owl-prev{
right:40px;
}
*/
div.owl--text {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
  font-weight: 700;
}

div.owl--text h1 {
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.5;
}

div.owl--text h4 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

@media screen and (min-width: 980px) {
  div.owl--text h1 {
    font-size: 64px;
    font-size: 4rem;
    line-height: 1.125;
  }

  div.owl--text h4 {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.7142857143;
  }
}
/* FANCYBOX

.fancybox-container {font-family:$brand-face;}

body.fancybox-active {
 overflow: visible !important;
}
*/
.ib-container {
  margin-bottom: 10px;
}

a.ib-container {
  text-decoration: none;
}

.ib-container .ib-title {
  font-size: 22px;
  font-weight: 400;
  padding: 10px;
  margin: 0;
}

.ib-container .ib-content {
  font-size: 1.2em;
}

.infoBox .ib-close {
  position: absolute;
  top: 2px;
  right: 2px;
}

.infoBox:after {
  content: " ";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  position: absolute;
  bottom: -10px;
  left: 110px;
}

.btn-compare {
  position: relative;
  z-index: 99;
}

.btn-compare:hover {
  background: #B44D3CFF;
  color: #fff;
}

.modal-container {
  max-width: 500px;
  padding: 30px;
}

.u-bg--brand {
  background-image: url("/cdn/img/bg-body.png");
  background-position: left top;
  background-repeat: no-repeat;
}

.u-bg--chamonix {
  background-image: url("/cdn/img/bg-chamonix.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: fixed;
  background-position: center center;
}

.u-bg--cover {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}

.u-bg--fixed {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: fixed;
  background-position: center center;
  min-height: 640px;
}

.u-bg--access {
  background: #949292;
  background: -moz-linear-gradient(0deg, #949292 78%, white 78%);
  background: -webkit-linear-gradient(0deg, #949292 78%, white 78%);
  background: linear-gradient(0deg, #949292 78%, white 78%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#949292",endColorstr="#ffffff",GradientType=1);
}

@media screen and (min-width: 980px) {
  .u-bg--access {
    background: #949292;
    background: -moz-linear-gradient(0deg, #949292 65%, white 65%);
    background: -webkit-linear-gradient(0deg, #949292 65%, white 65%);
    background: linear-gradient(0deg, #949292 65%, white 65%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#949292",endColorstr="#ffffff",GradientType=1);
  }
}
.u-text--white a {
  color: #fff;
}

.u-text--white a:hover {
  color: #B44D3CFF;
}

.u-pull-max--top {
  margin-top: -330px !important;
}

.u-pull-max--bottom {
  margin-bottom: -330px !important;
}

.u-pull-mq {
  margin-bottom: -220px !important;
}

@media screen and (min-width: 980px) {
  .u-pull-mq {
    margin-bottom: -330px !important;
  }
}

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