@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: 48px;
  font-size: 3rem;
  line-height: 1;
}

h2 {
  font-size: 38px;
  font-size: 2.375rem;
  line-height: 1.2631578947;
}

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-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: ", ";
}

/* ==========================================================================
   #BLOCK
   ========================================================================== */
/**
 * Stacked image-with-text object. A simple abstraction to cover a very commonly
 * occurring design pattern.
 */
.o-block {
  display: block;
  text-align: center;
}

.o-block__img {
  margin-bottom: 24px;
  /* Size variants.
     ====================================================================== */
}
.o-block--flush > .o-block__img {
  margin-bottom: 0;
}
.o-block--tiny > .o-block__img {
  margin-bottom: 6px;
}
.o-block--small > .o-block__img {
  margin-bottom: 12px;
}
.o-block--large > .o-block__img {
  margin-bottom: 48px;
}
.o-block--huge > .o-block__img {
  margin-bottom: 96px;
}

.o-block__body {
  display: block;
}

/* Alignment variants.
   ========================================================================== */
.o-block--right {
  text-align: right;
}

.o-block--left {
  text-align: left;
}

/* ==========================================================================
   #RATIO
   ========================================================================== */
/**
 * Create ratio-bound content blocks, to keep media (e.g. images, videos) in
 * their correct aspect ratios.
 *
 * http://alistapart.com/article/creating-intrinsic-ratios-for-video
 *
 * 1. Default cropping is a 1:1 ratio (i.e. a perfect square).
 */
.o-ratio {
  position: relative;
  display: block;
  overflow: hidden;
}
.o-ratio:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
  /* [1] */
}

.o-ratio__content,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* stylelint-disable */
/* Ratio variants.
   ========================================================================== */
/**
 * Generate a series of ratio classes to be used like so:
 *
 *   <div class="o-ratio  o-ratio--16:9">
 *
 */
.o-ratio--2\:1:before {
  padding-bottom: 50%;
}

.o-ratio--4\:3:before {
  padding-bottom: 75%;
}

.o-ratio--16\:9:before {
  padding-bottom: 56.25%;
}

/* stylelint-enable */
/* ==========================================================================
   #CROP
   ========================================================================== */
/**
 * Provide a cropping container in order to display media (usually images)
 * cropped to certain ratios.
 *
 * 1. Set up a positioning context in which the image can sit.
 * 2. This is the crucial part: where the cropping happens.
 */
.o-crop {
  position: relative;
  /* [1] */
  display: block;
  overflow: hidden;
  /* [2] */
}

/**
 * Apply this class to the content (usually `img`) that needs cropping.
 *
 * 1. Image’s default positioning is top-left in the cropping box.
 * 2. Make sure the media doesn’t stop itself too soon.
 */
.o-crop__content {
  position: absolute;
  top: 0;
  /* [1] */
  left: 0;
  /* [1] */
  max-width: none;
  /* [2] */
}

/**
 * We can position the media in different locations within the cropping area.
 */
.o-crop__content--right {
  right: 0;
  left: auto;
}

.o-crop__content--bottom {
  top: auto;
  bottom: 0;
}

.o-crop__content--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* stylelint-disable */
/* Crop-ratio variants.
   ========================================================================== */
/**
 * Generate a series of crop classes to be used like so:
 *
 *   <div class="o-crop  o-crop--16:9">
 *
 */
.o-crop--2\:1 {
  padding-bottom: 50%;
}

.o-crop--4\:3 {
  padding-bottom: 75%;
}

.o-crop--16\:9 {
  padding-bottom: 56.25%;
}

/* stylelint-enable */
/* ==========================================================================
   #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;
}

/* ==========================================================================
   #PACK
   ========================================================================== */
/**
 * The pack object simply causes any number of elements pack up horizontally to
 * automatically fill an equal, fluid width of their parent.
 *
 * 1. Fill all available space.
 * 2. Remove any leftover styling from lists.
 * 3. Cause children to be automatically equally sized.
 */
.o-pack {
  width: 100%;
  /* [1] */
  margin-left: 0;
  /* [2] */
  display: table;
  table-layout: fixed;
  /* [3] */
}

/**
 * 1. Cause children to adopt table-like structure.
 */
.o-pack__item {
  display: table-cell;
  /* [1] */
  /* Vertical alignment variants.
     ====================================================================== */
}
.o-pack--middle > .o-pack__item {
  vertical-align: middle;
}
.o-pack--bottom > .o-pack__item {
  vertical-align: bottom;
}

/* Unequal-width items.
   ========================================================================== */
.o-pack--auto {
  table-layout: auto;
}

/* Size variants.
   ========================================================================== */
.o-pack--tiny {
  border-spacing: 6px;
}

.o-pack--small {
  border-spacing: 12px;
}

.o-pack--large {
  border-spacing: 48px;
}

.o-pack--huge {
  border-spacing: 96px;
}

/* Reversed order packs
   ========================================================================== */
.o-pack--rev {
  direction: rtl;
}
.o-pack--rev > .o-pack__item {
  direction: ltr;
}

/* ==========================================================================
   #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: 32.8125em) {
  .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: 47.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: 55em) {
  .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: 78.75em) {
  .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: 48px !important;
  font-size: 3rem !important;
  line-height: 1 !important;
}

.u-h2 {
  font-size: 38px !important;
  font-size: 2.375rem !important;
  line-height: 1.2631578947 !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: Poppins, sans-serif!important;
  color: #1b1f5a!important;
}

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

.u-brand-color,
.u-brand-colour {
  color: #1b1f5a!important;
}

/*------------------------------------*\
    $ACCENT
\*------------------------------------*/
.u-accent {
  font-family: Poppins, sans-serif!important;
  color: #FF6D00!important;
}

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

.u-accent-color,
.u-accent-colour {
  color: #FF6D00!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: 48px;
  font-size: 3rem;
  line-height: 1;
}

.u-beta {
  font-size: 38px;
  font-size: 2.375rem;
  line-height: 1.2631578947;
}

.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: 96px;
  font-size: 6rem;
  line-height: 1;
}

.u-giga {
  font-size: 72px;
  font-size: 4.5rem;
  line-height: 1;
}

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

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

@media screen and (min-width: 920px) {
  .u-mega\@nav {
    font-size: 64px !important;
    font-size: 4rem !important;
    line-height: 1.125 !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;
}

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

/**
 * 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-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;
  width: 80%;
  height: 40%;
}

.u-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-clr, .clr {
  display: block;
  clear: both;
}

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

.u-show {
  display: block;
}

.u-underline:after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 100px;
  padding-top: 14px;
  margin-bottom: 14px;
  border-bottom: 3px solid #91857c;
}

.u-underline--brand:after {
  border-color: #1b1f5a;
}

.u-border--all {
  border: 3px solid #91857c;
}

.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;
}

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

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

.u-bg--primary-dark {
  background-color: #03040c;
}

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

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

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

.u-bg--promo {
  background-color: #D10A11;
}

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

.u-bg--dark {
  background-color: #91857c;
}

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

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

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

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

.u-text--primary-dark {
  color: #03040c;
}

.u-text--secondary {
  color: #333aa8;
}

.u-text--tertiary {
  color: #03040c;
}

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

.u-text--promo {
  color: #FF6D00;
}

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

.u-text--dark {
  color: #91857c;
}

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

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

/*------------------------------------*\
    $FLEX
\*------------------------------------*/
.u-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.u-inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.u-flex-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.u-flex-row-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

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

.u-flex-col-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

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

.u-flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.u-flex-no-wrap {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

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

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

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

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

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

.u-self-auto {
  -ms-flex-item-align: auto;
  align-self: auto;
}

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

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

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

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

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

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

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

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

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

.u-content-center {
  -ms-flex-line-pack: center;
  align-content: center;
}

.u-content-start {
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.u-content-end {
  -ms-flex-line-pack: end;
  align-content: flex-end;
}

.u-content-between {
  -ms-flex-line-pack: justify;
  align-content: space-between;
}

.u-content-around {
  -ms-flex-line-pack: distribute;
  align-content: space-around;
}

.u-flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
}

.u-flex-auto {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.u-flex-initial {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.u-flex-none {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.u-flex-grow-0 {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
}

.u-flex-grow {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.u-flex-grow-2 {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}

.u-flex-shrink-0 {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.u-flex-shrink {
  -ms-flex-negative: 1;
  flex-shrink: 1;
}

.u-order-1 {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.u-order-2 {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

.u-order-3 {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
}

.u-order-4 {
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
  order: 4;
}

.u-order-5 {
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 5;
  order: 5;
}

.u-order-6 {
  -webkit-box-ordinal-group: 7;
  -ms-flex-order: 6;
  order: 6;
}

.u-order-7 {
  -webkit-box-ordinal-group: 8;
  -ms-flex-order: 7;
  order: 7;
}

.u-order-8 {
  -webkit-box-ordinal-group: 9;
  -ms-flex-order: 8;
  order: 8;
}

.u-order-9 {
  -webkit-box-ordinal-group: 10;
  -ms-flex-order: 9;
  order: 9;
}

.u-order-10 {
  -webkit-box-ordinal-group: 11;
  -ms-flex-order: 10;
  order: 10;
}

.u-order-11 {
  -webkit-box-ordinal-group: 12;
  -ms-flex-order: 11;
  order: 11;
}

.u-order-12 {
  -webkit-box-ordinal-group: 13;
  -ms-flex-order: 12;
  order: 12;
}

.u-order-first {
  -webkit-box-ordinal-group: -9998;
  -ms-flex-order: -9999;
  order: -9999;
}

.u-order-last {
  -webkit-box-ordinal-group: 10000;
  -ms-flex-order: 9999;
  order: 9999;
}

.u-order-none {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

html, body {
  font-family: "Poppins", Helvetica, sans-serif;
}

body {
  color: #91857c;
  background: #f4f4f4;
}

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: #333aa8;
  text-shadow: none;
}

::selection {
  background: #333aa8;
  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: 600;
  font-family: "Poppins", sans-serif;
  margin-bottom: 12px;
  margin-bottom: 0.75rem;
}

h5 {
  color: #1b1f5a;
}

@media screen and (max-width: 525px) {
  h1 {
    font-size: 38px;
    font-size: 2.375rem;
    line-height: 1.2631578947;
  }

  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: 18px;
  font-size: 1.125rem;
  line-height: 1.3333333333;
}

p {
  word-wrap: break-word;
}

/*------------------------------------*\
    $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: " “ " " ” ";
   /* p:before{
        content:" “ ";
        content:open-quote;
        font-size: 8em;
        color:$txt-color;

       position: absolute;
        top:0;
        bottom:0;
        left:10px;
    }
    p:after{
        content:"";
        content:no-close-quote;
    }
    p:last-of-type:after{
        content:" ” ";
        content:close-quote;
        font-size: 8em;
        color:$txt-color;

        position: absolute;
         top:0;
        bottom:0;
        right:10px;
    }

    q:before{
        content:"\2018";
        content:open-quote;
    }
    q:after{
        content:"\2019";
        content:close-quote;
    }*/
}
blockquote p {
  padding: 2em;
}

/**
 *
   <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: 2em;
}
.source:before {
  content: "\2014";
}

a {
  color: #91857c;
  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: #1b1f5a;
  text-decoration: underline;
}

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

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

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

.img--center {
  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: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.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: 1024px) {
  /*main{
    max-width: 1140px;
    margin:0 auto;
  }
  */
}
@media screen and (min-width: 1024px) {
  .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, .o-options {
  line-height: 1;
  /**
   * Remove whitespace caused by `inline-block`.
   */
  letter-spacing: -0.31em;
  word-spacing: -0.43em;
  white-space: nowrap;
}
.o-nav--block > li, .o-options > li {
  letter-spacing: normal;
  word-spacing: normal;
}
.o-nav--block > li > a, .o-options > 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;
}

/*------------------------------------*\
    $OPTIONS
\*------------------------------------*/
/**
 * Link-group nav, used for displaying related options. Extends `.nav--block`
 * but could also extend `.nav--fit`. Extend with colours and ‘current states’
 * in your theme stylesheet.
 *
  <ul class="nav  options">
      <li><a></a></li>
      <li><a></a></li>
      <li><a></a></li>
      <li><a></a></li>
   </ul>
 *
 * Demo: jsfiddle.net/inuitcss/vwfaf
 *
 */
.o-options > li > a {
  border: 0 solid #666;
  border-width: 1px;
  border-left-width: 0;
}
.o-options > li:first-child > a {
  border-left-width: 1px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.o-options > li:last-child > a {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/*------------------------------------*\
    $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?tf43s5");
  src: url("/cdn/fonts/psicon.eot?#iefix1cxok1") format("embedded-opentype"), url("/cdn/fonts/psicon.ttf?tf43s5") format("truetype"), url("/cdn/fonts/psicon.woff?tf43s5") format("woff"), url("/cdn/fonts/psicon.svg?tf43s5#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-mountain:before {
  content: "\e909";
}

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

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

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

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

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

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

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

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

.icon-thumbs-up2:before {
  content: "\e903";
}

.icon-grid:before {
  content: "\e620";
}

.icon-yt-round:before {
  content: "\e618";
}

.icon-insta-round:before {
  content: "\e619";
}

.icon-fb-round:before {
  content: "\e61b";
}

.icon-webcams:before {
  content: "\e616";
}

.icon-meteo:before {
  content: "\e617";
}

.icon-arrow-up:before {
  content: "\ea3a";
}

.icon-arrow-right:before {
  content: "\ea3c";
}

.icon-arrow-down:before {
  content: "\ea3e";
}

.icon-arrow-left:before {
  content: "\ea40";
}

.icon-skype:before {
  content: "\eac5";
}

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

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

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

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

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

.icon-image:before {
  content: "\e90d";
}

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

.icon-users:before {
  content: "\e972";
}

.icon-heart:before {
  content: "\e9da";
}

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

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

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

.icon-pinterest2:before {
  content: "\e623";
}

.icon-envelop:before {
  content: "\e945";
}

.icon-circle-up:before {
  content: "\ea41";
}

.icon-circle-right:before {
  content: "\ea42";
}

.icon-circle-down:before {
  content: "\ea43";
}

.icon-circle-left:before {
  content: "\ea44";
}

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

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

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

.icon-globe:before {
  content: "\e61a";
}

.icon-camera:before {
  content: "\e613";
}

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

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

.icon-cart:before {
  content: "\e601";
}

.icon-phone:before {
  content: "\e602";
}

.icon-location:before {
  content: "\e603";
}

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

.icon-user:before {
  content: "\e605";
}

.icon-download:before {
  content: "\e606";
}

.icon-upload:before {
  content: "\e607";
}

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

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

.icon-vimeo:before {
  content: "\e60a";
}

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

.icon-star:before {
  content: "\f005";
}

.icon-trophy:before {
  content: "\f091";
}

.icon-thumbs-up:before {
  content: "\f164";
}

.icon-thumbs-down:before {
  content: "\f165";
}

.icon-bed:before {
  content: "\f236";
}

.icon-hotel:before {
  content: "\f236";
}

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

.icon-navicon:before {
  content: "\f0c9";
}

.icon-remove:before {
  content: "\e60d";
}

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

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

.icon-youtube2:before {
  content: "\e61c";
}

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

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

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

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

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

.icon-eye-open:before {
  content: "\e611";
}

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

.o-circle {
  border-radius: 100%;
  display: inline-block;
  line-height: 1;
  border: 1px solid currentColor;
  padding: .2em;
}

/*
.o-circle:before {

    content: '';
    position: absolute;
    top: 0; left: 0;
    border: 1px solid currentColor;

}
*/
.o-circle--selected {
  background: #1b1f5a;
  border: 1px solid #1b1f5a;
  color: #fff;
}

.o-border {
  border: 1px solid #666;
}

.o-border--bottom {
  border-bottom: 1px solid #666;
}

.o-border--top {
  border-top: 1px solid #666;
}

.o-border--thick {
  border-width: 8px;
}

.o-border--primary {
  border-color: #1b1f5a;
}

/*------------------------------------*\
    $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, .o-arrow--bottom-center--white {
  position: relative;
}
.o-arrow--top-center:before, .o-arrow--bottom-center:before, .o-arrow--bottom-center--white:before, .o-arrow--top-center:after, .o-arrow--bottom-center:after, .o-arrow--bottom-center--white:after {
  content: "";
  position: absolute;
  border-collapse: separate;
}
.o-arrow--top-center:before, .o-arrow--bottom-center:before, .o-arrow--bottom-center--white:before {
  border: 12px solid transparent;
}
.o-arrow--top-center:after, .o-arrow--bottom-center:after, .o-arrow--bottom-center--white: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--white:before, .o-arrow--bottom-center:after, .o-arrow--bottom-center--white:after {
  top: 100%;
}

.o-arrow--bottom-center:before, .o-arrow--top-center:before, .o-arrow--bottom-center--white:before, .o-arrow--bottom-center:after, .o-arrow--top-center:after, .o-arrow--bottom-center--white:after {
  left: 50%;
  margin-left: -12px;
}
.o-arrow--bottom-center:after, .o-arrow--top-center:after, .o-arrow--bottom-center--white: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-arrow--bottom-center--white:before {
  border-top-color: #fff !important;
}
.o-arrow--bottom-center--white:after {
  border-top-color: #fff !important;
}

/*------------------------------------*\
    $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, .o-arrow--bottom-center--white {
  position: relative;
}
.o-arrow--top-center:before, .o-arrow--bottom-center:before, .o-arrow--bottom-center--white:before, .o-arrow--top-center:after, .o-arrow--bottom-center:after, .o-arrow--bottom-center--white:after {
  content: "";
  position: absolute;
  border-collapse: separate;
}
.o-arrow--top-center:before, .o-arrow--bottom-center:before, .o-arrow--bottom-center--white:before {
  border: 12px solid transparent;
}
.o-arrow--top-center:after, .o-arrow--bottom-center:after, .o-arrow--bottom-center--white: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--white:before, .o-arrow--bottom-center:after, .o-arrow--bottom-center--white:after {
  top: 100%;
}

.o-arrow--bottom-center:before, .o-arrow--top-center:before, .o-arrow--bottom-center--white:before, .o-arrow--bottom-center:after, .o-arrow--top-center:after, .o-arrow--bottom-center--white:after {
  left: 50%;
  margin-left: -12px;
}
.o-arrow--bottom-center:after, .o-arrow--top-center:after, .o-arrow--bottom-center--white: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-marker {
  position: relative;
}

.o-marker:before {
  content: " ";
  position: absolute;
  top: 0;
  left: -24px;
  border: 1px solid #1b1f5a;
  height: 60%;
}

.o-marker--white:before {
  border: 1px solid #fff;
}

.o-marker--full:before {
  height: 100%;
}

/*
.o-marker{
  position: relative;
 // display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

 // color:$primary-color;
  padding-left:$inuit-global-spacing-unit+10px;
  font-weight: 600;
  line-height: 1;
}
.o-marker:before {

  position: absolute;
  left: 0;
  top: 50%;
  @include vendor(transform,translateY(-46%));

  font-size: 80%;
  font-family: 'psicon';
    content: "\e90f";
}

/*
.o-marker:after {

  position: absolute;
  right: 0;
  top: 50%;
  @include vendor(transform,translateY( -50%));

  line-height: 1;
  font-size: 60%;
  font-style: normal;
  font-weight: normal;
  font-family: 'primo';
    content: "\e906";
}

@media screen and (max-width: $mq-lg) {
  .o-bolt:before,.o-bolt:after{display:none;}
}
@media screen and (min-width: $mq-lg) {
  .o-bolt  {padding:0 2em;}
}
*/
/* Containers */
.o-container {
  margin: 0 auto;
  max-width: 1170px;
}

@media screen and (min-width: 920px) {
  .o-container {
    width: 80%;
  }
}
/* 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 * {
  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 * {
  -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 figure {
  position: relative;
  margin: 0;
}

.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%;
}

/* 
 *  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: -100px 0 0 0;
  z-index: 99997;
  background: transparent;
  width: 120px;
  height: 200px;
  padding: 17px;
}

.fancybox-navigation button:before {
  content: "";
  position: absolute;
  top: 50px;
  right: 10px;
  width: 100px;
  height: 100px;
  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;
}

/*! jQuery UI - v1.12.1 - 2018-03-27
* http://jqueryui.com
* Includes: core.css, datepicker.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=base&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cc0000&fcError=5f3f3f&borderColorError=f1a899&bgTextureError=flat&bgColorError=fddfdf&iconColorHighlight=777620&fcHighlight=777620&borderColorHighlight=dad55e&bgTextureHighlight=flat&bgColorHighlight=fffa90&iconColorActive=ffffff&fcActive=ffffff&borderColorActive=003eff&bgTextureActive=flat&bgColorActive=007fff&iconColorHover=555555&fcHover=2b2b2b&borderColorHover=cccccc&bgTextureHover=flat&bgColorHover=ededed&iconColorDefault=777777&fcDefault=454545&borderColorDefault=c5c5c5&bgTextureDefault=flat&bgColorDefault=f6f6f6&iconColorContent=444444&fcContent=333333&borderColorContent=dddddd&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=444444&fcHeader=333333&borderColorHeader=dddddd&bgTextureHeader=flat&bgColorHeader=e9e9e9&cornerRadius=3px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
* Copyright jQuery Foundation and other contributors; Licensed MIT */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
  /* support: IE8 */
}

.ui-front {
  z-index: 100;
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
  pointer-events: none;
}

/* Icons
----------------------------------*/
.ui-icon {
  display: inline-block;
  vertical-align: middle;
  margin-top: -.25em;
  position: relative;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

.ui-widget-icon-block {
  left: 50%;
  margin-left: -8px;
  display: block;
}

/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-datepicker {
  width: 17em;
  padding: .2em .2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: .2em 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%;
}

.ui-datepicker table {
  width: 100%;
  font-size: .9em;
  border-collapse: collapse;
  margin: 0 0 .4em;
}

.ui-datepicker th {
  padding: .7em .3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: .2em;
  text-align: right;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: .7em 0 0 0;
  padding: 0 .2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: .5em .2em .4em;
  cursor: pointer;
  padding: .2em .6em .3em .6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto .4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
  left: .5em;
  top: .3em;
}

/* Component containers
----------------------------------*/
.ui-widget {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 1em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 1em;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}

.ui-widget-content {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
}

.ui-widget-content a {
  color: #333333;
}

.ui-widget-header {
  border: 1px solid #dddddd;
  background: #e9e9e9;
  color: #333333;
  font-weight: bold;
}

.ui-widget-header a {
  color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #454545;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #cccccc;
  background: #ededed;
  font-weight: normal;
  color: #2b2b2b;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
  color: #2b2b2b;
  text-decoration: none;
}

.ui-visual-focus {
  box-shadow: 0 0 3px 1px #5e9ed6;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: normal;
  color: #ffffff;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #ffffff;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #ffffff;
  text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}

.ui-state-checked {
  border: 1px solid #dad55e;
  background: #fffa90;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #777620;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #f1a899;
  background: #fddfdf;
  color: #5f3f3f;
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #5f3f3f;
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #5f3f3f;
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: .7;
  filter: Alpha(Opacity=70);
  /* support: IE8 */
  font-weight: normal;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: .35;
  filter: Alpha(Opacity=35);
  /* support: IE8 */
  background-image: none;
}

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35);
  /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  width: 16px;
  height: 16px;
}

.ui-icon,
.ui-widget-content .ui-icon {
  background-image: url("images/ui-icons_444444_256x240.png");
}

.ui-widget-header .ui-icon {
  background-image: url("images/ui-icons_444444_256x240.png");
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
  background-image: url("images/ui-icons_555555_256x240.png");
}

.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
  background-image: url("images/ui-icons_ffffff_256x240.png");
}

.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
  background-image: url("images/ui-icons_777620_256x240.png");
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background-image: url("images/ui-icons_cc0000_256x240.png");
}

.ui-button .ui-icon {
  background-image: url("images/ui-icons_777777_256x240.png");
}

/* positioning */
.ui-icon-blank {
  background-position: 16px 16px;
}

.ui-icon-caret-1-n {
  background-position: 0 0;
}

.ui-icon-caret-1-ne {
  background-position: -16px 0;
}

.ui-icon-caret-1-e {
  background-position: -32px 0;
}

.ui-icon-caret-1-se {
  background-position: -48px 0;
}

.ui-icon-caret-1-s {
  background-position: -65px 0;
}

.ui-icon-caret-1-sw {
  background-position: -80px 0;
}

.ui-icon-caret-1-w {
  background-position: -96px 0;
}

.ui-icon-caret-1-nw {
  background-position: -112px 0;
}

.ui-icon-caret-2-n-s {
  background-position: -128px 0;
}

.ui-icon-caret-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
  background-position: -65px -16px;
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
  background-position: -65px -32px;
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
  background-position: 1px -48px;
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}

.ui-icon-arrow-4 {
  background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}

.ui-icon-extlink {
  background-position: -32px -80px;
}

.ui-icon-newwin {
  background-position: -48px -80px;
}

.ui-icon-refresh {
  background-position: -64px -80px;
}

.ui-icon-shuffle {
  background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}

.ui-icon-folder-open {
  background-position: -16px -96px;
}

.ui-icon-document {
  background-position: -32px -96px;
}

.ui-icon-document-b {
  background-position: -48px -96px;
}

.ui-icon-note {
  background-position: -64px -96px;
}

.ui-icon-mail-closed {
  background-position: -80px -96px;
}

.ui-icon-mail-open {
  background-position: -96px -96px;
}

.ui-icon-suitcase {
  background-position: -112px -96px;
}

.ui-icon-comment {
  background-position: -128px -96px;
}

.ui-icon-person {
  background-position: -144px -96px;
}

.ui-icon-print {
  background-position: -160px -96px;
}

.ui-icon-trash {
  background-position: -176px -96px;
}

.ui-icon-locked {
  background-position: -192px -96px;
}

.ui-icon-unlocked {
  background-position: -208px -96px;
}

.ui-icon-bookmark {
  background-position: -224px -96px;
}

.ui-icon-tag {
  background-position: -240px -96px;
}

.ui-icon-home {
  background-position: 0 -112px;
}

.ui-icon-flag {
  background-position: -16px -112px;
}

.ui-icon-calendar {
  background-position: -32px -112px;
}

.ui-icon-cart {
  background-position: -48px -112px;
}

.ui-icon-pencil {
  background-position: -64px -112px;
}

.ui-icon-clock {
  background-position: -80px -112px;
}

.ui-icon-disk {
  background-position: -96px -112px;
}

.ui-icon-calculator {
  background-position: -112px -112px;
}

.ui-icon-zoomin {
  background-position: -128px -112px;
}

.ui-icon-zoomout {
  background-position: -144px -112px;
}

.ui-icon-search {
  background-position: -160px -112px;
}

.ui-icon-wrench {
  background-position: -176px -112px;
}

.ui-icon-gear {
  background-position: -192px -112px;
}

.ui-icon-heart {
  background-position: -208px -112px;
}

.ui-icon-star {
  background-position: -224px -112px;
}

.ui-icon-link {
  background-position: -240px -112px;
}

.ui-icon-cancel {
  background-position: 0 -128px;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-close {
  background-position: -80px -128px;
}

.ui-icon-closethick {
  background-position: -96px -128px;
}

.ui-icon-key {
  background-position: -112px -128px;
}

.ui-icon-lightbulb {
  background-position: -128px -128px;
}

.ui-icon-scissors {
  background-position: -144px -128px;
}

.ui-icon-clipboard {
  background-position: -160px -128px;
}

.ui-icon-copy {
  background-position: -176px -128px;
}

.ui-icon-contact {
  background-position: -192px -128px;
}

.ui-icon-image {
  background-position: -208px -128px;
}

.ui-icon-video {
  background-position: -224px -128px;
}

.ui-icon-script {
  background-position: -240px -128px;
}

.ui-icon-alert {
  background-position: 0 -144px;
}

.ui-icon-info {
  background-position: -16px -144px;
}

.ui-icon-notice {
  background-position: -32px -144px;
}

.ui-icon-help {
  background-position: -48px -144px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-bullet {
  background-position: -80px -144px;
}

.ui-icon-radio-on {
  background-position: -96px -144px;
}

.ui-icon-radio-off {
  background-position: -112px -144px;
}

.ui-icon-pin-w {
  background-position: -128px -144px;
}

.ui-icon-pin-s {
  background-position: -144px -144px;
}

.ui-icon-play {
  background-position: 0 -160px;
}

.ui-icon-pause {
  background-position: -16px -160px;
}

.ui-icon-seek-next {
  background-position: -32px -160px;
}

.ui-icon-seek-prev {
  background-position: -48px -160px;
}

.ui-icon-seek-end {
  background-position: -64px -160px;
}

.ui-icon-seek-start {
  background-position: -80px -160px;
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
  background-position: -80px -160px;
}

.ui-icon-stop {
  background-position: -96px -160px;
}

.ui-icon-eject {
  background-position: -112px -160px;
}

.ui-icon-volume-off {
  background-position: -128px -160px;
}

.ui-icon-volume-on {
  background-position: -144px -160px;
}

.ui-icon-power {
  background-position: 0 -176px;
}

.ui-icon-signal-diag {
  background-position: -16px -176px;
}

.ui-icon-signal {
  background-position: -32px -176px;
}

.ui-icon-battery-0 {
  background-position: -48px -176px;
}

.ui-icon-battery-1 {
  background-position: -64px -176px;
}

.ui-icon-battery-2 {
  background-position: -80px -176px;
}

.ui-icon-battery-3 {
  background-position: -96px -176px;
}

.ui-icon-circle-plus {
  background-position: 0 -192px;
}

.ui-icon-circle-minus {
  background-position: -16px -192px;
}

.ui-icon-circle-close {
  background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}

.ui-icon-circle-check {
  background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
  background: #aaaaaa;
  opacity: .3;
  filter: Alpha(Opacity=30);
  /* support: IE8 */
}

.ui-widget-shadow {
  -webkit-box-shadow: 0px 0px 5px #666666;
  box-shadow: 0px 0px 5px #666666;
}

.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: 3.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;
  border-radius: 100px;
  background: #fff;
  opacity: .6;
  line-height: 0;
}

a.c-back-top i {
  color: #666;
}

/*.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;
  color: #1b1f5a;
  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;
  }
}
*/
/* ==========================================================================
   #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: "Poppins", sans-serif;
  text-align: center;
  /* [4] */
  margin: 0;
  /* [4] */
  cursor: pointer;
  /* [5] */
  font-weight: 700;
  padding: 12px 24px;
  transition: 0.3333333333s;
  border-radius: 3px;
  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 {
  background-color: #e8e7e5;
  color: #666;
}

/* Style variants
   ========================================================================== */
.c-btn--primary {
  background-color: #1b1f5a;
}
.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: #333aa8;
}
.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: #03040c;
}

.c-btn--tertiary {
  background-color: #03040c;
}
.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: #FF6D00;
}
.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;
}

.c-btn--promo {
  background-color: #D10A11;
}
.c-btn--promo, .c-btn--promo:hover, .c-btn--promo:active, .c-btn--promo:focus {
  text-decoration: none;
  color: #fff;
}
.c-btn--promo:hover, .c-btn--promo:focus {
  background-color: #1b1f5a;
}

/* Ghost buttons
   ========================================================================== */
/**
 * Ghost buttons have see-through backgrounds and are bordered.
 */
.c-btn--ghost {
  color: currentColor;
  border: 2px solid currentColor;
  padding: 10px 22px;
}
.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: #1b1f5a;
}
.c-btn--ghost.c-btn--small {
  padding: 4px 10px;
}
.c-btn--ghost.c-btn--large {
  padding: 22px 46px;
}
.c-btn--ghost.c-btn--primary {
  color: #1b1f5a;
}
.c-btn--ghost.c-btn--primary:hover, .c-btn--ghost.c-btn--primary:focus {
  color: #666;
}
.c-btn--ghost.c-btn--secondary {
  color: #333aa8;
}
.c-btn--ghost.c-btn--secondary:hover, .c-btn--ghost.c-btn--secondary:focus {
  color: #666;
}
.c-btn--ghost.c-btn--tertiary {
  color: #03040c;
}
.c-btn--ghost.c-btn--tertiary:hover, .c-btn--ghost.c-btn--tertiary:focus {
  color: #666;
}
.c-btn--ghost.c-btn--accent {
  color: #FF6D00;
}
.c-btn--ghost.c-btn--accent:hover, .c-btn--ghost.c-btn--accent:focus {
  color: #666;
}

/* 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: 32px;
  font-size: 2rem;
  line-height: 1.5;
  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: #1b1f5a;
}

/*** COMPARE BUTTON ***/
.c-btn--compare {
  color: #91857c;
  border: 2px solid #91857c;
  background-color: transparent;
  padding: 4px 10px;
  border-radius: 100px;
  text-decoration: none;
}
.c-btn--compare:hover, .c-btn--compare:active, .c-btn--compare:focus, .c-btn--compare.active {
  background-color: #1b1f5a;
  border-color: #1b1f5a;
  text-decoration: none;
}
.c-btn--compare:hover, .c-btn--compare:focus, .c-btn--compare.active {
  color: #fff;
  text-decoration: none;
}

/* ==========================================================================
   #TAGS
   ========================================================================== */
.c-tag {
  display: inline-block;
  /* [1] */
  vertical-align: middle;
  /* [2] */
  font-family: "Poppins", sans-serif;
  text-align: center;
  /* [4] */
  margin: 0;
  /* [4] */
  cursor: pointer;
  /* [5] */
  padding: 0.375rem 0.75rem;
  transition: 0.3333333333s;
  border-radius: 100px;
  border: none;
  background-color: #e8e7e5;
  /**/
  margin: .2em;
}
.c-tag, .c-tag:hover, .c-tag:active, .c-tag:focus {
  text-decoration: none;
  /* [4] */
  color: #666;
}
.c-tag:hover {
  background-color: #1b1f5a;
  color: #fff;
}
.c-tag.active, .c-tag.active:hover {
  background-color: #666;
  color: #fff;
}

.c-card {
  color: #34444b;
  padding-left: 0;
  padding-right: 0;
  max-width: 90%;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  -o-perspective: 600px;
  perspective: 600px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: transform 0.22s ease;
  -moz-transition: transform 0.22s ease;
  -ms-transition: transform 0.22s ease;
  -o-transition: transform 0.22s ease;
  transition: transform 0.22s ease;
  /*
  -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-card: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-card__main-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.c-card__img {
  /*
  height: 160px;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: left;
  background-position: center 0%;
  */
  margin-bottom: 10px;
  position: relative;
}

.card__next, .card__prev {
  font-size: 1.375em;
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 10px;
  padding: 5px 10px;
  z-index: 99999;
  color: #fff;
}

.card__next {
  left: auto;
  right: 10px;
}

.card__next:hover, .card__prev:hover {
  color: #fff;
  text-decoration: none;
  opacity: .6;
}

.c-card-front {
  overflow: hidden;
  position: relative;
  background-color: #fcfafa;
  background-repeat: no-repeat;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  box-shadow: 0 0px 0px transparent;
  padding-bottom: 20px;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -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-card-front:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.c-card-back {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 800;
  width: 100%;
  height: 100%;
  background-color: #fcfafa;
  background-repeat: no-repeat;
  padding-bottom: 80px;
  -webkit-transform: rotateY(-179 deg);
  -moz-transform: rotateY(-179 deg);
  -ms-transform: rotateY(-179 deg);
  -o-transform: rotateY(-179 deg);
  transform: rotateY(-179 deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -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-card.flip .c-card-front {
  z-index: 900;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.c-card.flip .c-card-back {
  z-index: 1000;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   #FEATURED
   ========================================================================== */
.c-featured {
  position: relative;
}

.c-featured__img {
  width: 100%;
  height: auto;
}

.c-featured__actions {
  width: 80%;
  max-width: 1170px;
  z-index: 100;
  margin: 1em auto;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

.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;
}

@media screen and (min-width: 920px) {
  .c-featured__actions {
    display: block;
    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: 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%);
  }
}
/*
@media screen and (min-width:$mq-lg) {
  .c-featured__actions{
   // @include font-size($mega-size);

     // bottom:40%;
    //  top: 50%;
    @include vendor(transform,translate(-50%, -30% ));
  }
}*/
.site-footer {
  position: relative;
  background: #1b1f5a url("/cdn/img/bg-footer.png") no-repeat left bottom;
  /* 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;
  min-width: 320px;
}

.site-footer a {
  color: #fff;
  /* text-decoration: underline;*/
}

/*.footer-menu{float:left;padding-left:em(20px);}*/
.footer-nav {
  display: block;
  text-align: left;
}

.footer-nav a {
  color: #fff;
  display: block;
  font-weight: 500;
  font-size: 1.2em;
  font-family: "Poppins", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

.footer-nav ul a {
  font-size: 1em;
  color: #e8e7e5;
}

.footer-nav a:hover, .footer-nav li.active a, .footer-nav a.active {
  color: #333aa8;
}

.social-items a {
  margin: 0 .225em;
  text-decoration: none;
  color: #fff;
}

@media screen and (min-width: 1024px) {
  .footer-nav {
    text-align: left;
    display: inline-block;
  }
}
.mc-form input {
  width: auto;
}

#ps-logo {
  position: absolute;
  left: 0;
  bottom: 4px;
  background: transparent url(footer-logo-ps.png) no-repeat right 3px;
  color: #ccc;
  line-height: 1;
  padding-right: 20px;
  padding-bottom: 10px;
  text-decoration: none;
  z-index: 99;
}

#ps-logo:hover {
  color: #000;
  background: transparent url(footer-logo-ps.png) no-repeat right -41px;
}

/* FORM */
.c-form {
  font-size: 1.2em;
  font-weight: 700;
}

.c-form input[type="text"],
.c-form input[type="password"],
.c-form input[type="number"],
.c-form textarea,
.c-form select,
.c-form label {
  width: 100%;
  margin-bottom: 1em;
}

.c-form ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #1b1f5a;
}

.c-form ::-moz-placeholder {
  /* Firefox 19+ */
  color: #1b1f5a;
}

.c-form :-ms-input-placeholder {
  /* IE 10+ */
  color: #1b1f5a;
}

.c-form :-moz-placeholder {
  /* Firefox 18- */
  color: #1b1f5a;
}

.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: #1b1f5a;
}

.c-form--white label {
  display: none;
}

.c-form--white ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #333aa8;
}

.c-form--white ::-moz-placeholder {
  /* Firefox 19+ */
  color: #333aa8;
}

.c-form--white :-ms-input-placeholder {
  /* IE 10+ */
  color: #333aa8;
}

.c-form--white :-moz-placeholder {
  /* Firefox 18- */
  color: #333aa8;
}

@media screen and (min-width: 480px) {
  #form-button {
    padding-left: 1em;
    text-align: left;
  }
}
.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";
}

.c-table-pricing {
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}
.c-table-pricing tbody {
  width: 100%;
}
.c-table-pricing tbody tr {
  border-bottom-color: #fff;
  cursor: pointer;
}
.c-table-pricing tbody tr:hover {
  background-color: #91857c;
}

.c-table-pricing a {
  color: #fff;
}

.c-table-pricing a:hover {
  text-decoration: underline;
}

.c-table-pricing::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #333aa8;
}

.c-table-pricing::-webkit-scrollbar {
  width: 6px;
  background-color: #333aa8;
}

.c-table-pricing::-webkit-scrollbar-thumb {
  background-color: #fff;
}

/*
.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 {
  width: 100%;
  margin: 1em 0;
  /*padding:0 0 2.5% 0;
  background:#ccc;
  float:left;*/
  list-style: none;
  display: block;
  clear: both;
}

.c-gallery li {
  position: relative;
  display: inline;
  width: 100%;
  padding: 1px;
}

.c-gallery 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: #1b1f5a;
}

.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;
}

/**/
.c-gallery--fluid li a i {
  font-size: 4em;
  transition: all 0.4s ease-in-out;
  color: #1b1f5a;
  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: 525px) {
  .c-gallery--fluid {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media screen and (min-width: 920px) {
  .c-gallery li {
    position: relative;
    display: inline;
    width: 50%;
    padding: 1px;
    float: left;
  }

  .c-gallery li img {
    margin-bottom: 0;
  }

  /* .c-gallery li img {width:auto; max-width:100%;}*/
  .c-gallery--fluid, .c-gallery--portfolio {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media screen and (min-width: 1024px) {
  .c-gallery li {
    display: inline-block;
    width: 33.33333%;
    padding: 1px;
    float: left;
  }

  .c-gallery--fluid, .c-gallery--portfolio {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}
.c-site-header {
  position: relative;
  z-index: 999;
  clear: both;
  font-weight: 400;
  text-align: center;
  width: 100%;
  vertical-align: middle;
  -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;
  font-family: "Poppins", sans-serif;
}

.c-site-logo {
  position: relative;
  z-index: 999;
  display: inline-block;
  text-decoration: none;
  padding: 0;
  margin: 0 auto 1em 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-logo img {
  width: 15em;
  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-logo: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);
}

.contacts {
  text-align: center;
  padding: .2em;
  position: relative;
  z-index: 99;
}

.tools {
  display: table;
  width: 100%;
  height: 100%;
}

/*
.tools a{
  color:$nav-link-color;
  display: inline-block;
  margin:.2em;
  vertical-align: middle;
  text-decoration: none;
  background: none;
}
.tools a:hover{opacity: 1;color:$nav-roll-color;}
.tools a.btn-fb:hover{color:#36609f;}
*/
/*
@media screen and (min-width: $mq-md) {
  .main{padding-top:$header-height;}
}
*/
@media screen and (min-width: 920px) {
  .c-site-logo {
    /*  position:absolute;
      left:20px;
      top:10px;
      z-index: 10;
      */
    margin-left: 1em;
    margin-bottom: 1em;
    float: left;
  }

  .c-site-logo img {
    width: 15em;
    height: auto;
  }

  .tools {
    width: auto;
    float: right;
    vertical-align: middle;
    text-align: right;
  }
}
@media screen and (min-width: 1024px) {
  .c-site-logo img {
    width: 15em;
    height: auto;
  }
}
.c-main-nav-holder {
  vertical-align: middle;
  position: relative;
}

.c-main-nav {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1em;
  font-family: "Poppins", sans-serif;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  display: block;
  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: #91857c;
  font-size: 0.875em;
  padding: .625em;
  display: block;
  text-align: left;
}

.c-main-nav a:hover, .c-main-nav .active a {
  color: #1b1f5a;
  /*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: #91857c;
  -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: #1b1f5a;
  cursor: pointer;
}

.c-nav-trigger span {
  float: right;
}

.c-megadrop {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  z-index: 9999;
  display: block;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  /**/
  width: 80%;
  margin: 0 auto;
  max-width: 1170px;
  padding: 12px 12px 0 0;
  background: rgba(0, 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-megadrop a {
  color: #91857c;
}

.c-megadrop a:hover {
  color: #1b1f5a;
}

.c-megadrop .o-grid.o-grid--space-small {
  margin-left: 2px;
}

.c-subnav {
  position: absolute;
  display: block;
  top: 40px;
  left: 0;
  z-index: 9999;
  background: rgba(0, 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: 525px) {
  .c-nav-trigger {
    display: none;
  }

  .c-main-nav.js {
    display: block;
    width: auto;
    margin: 0 auto 0;
  }

  .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 {
    color: #91857c;
    padding: .6em .8em;
    text-align: center;
    background-color: transparent;
  }

  .c-main-nav li.u-no-mobile a {
    border: none;
  }

  .c-main-nav a:hover, .c-main-nav .active a {
    color: #1b1f5a;
  }

  .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: 920px) {
  .c-main-nav.js {
    padding-top: 2.5em;
  }

  .c-main-nav > li > a {
    font-size: 1em;
  }

  .c-subnav li {
    display: block;
  }

  .c-main-nav > li:hover > .c-megadrop,
  .c-main-nav > li:hover > ul.c-subnav {
    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-page a i {
  position: relative;
}

.c-nav-page a i::before {
  position: absolute;
  top: 2px;
}

.c-nav-page a i.icon-chevron-right::before {
  left: 10px;
}

.c-nav-page a i.icon-chevron-left::before {
  right: 10px;
}

.c-nav-sub {
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 100px;
  background-color: #e8e7e5;
}

.c-nav-sub li:after {
  content: ' |';
}

.c-nav-sub li:last-child:after {
  content: '';
}

.c-nav-sub a {
  padding: 12px;
  -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;
}

.c-nav-sub a:hover, .c-nav-sub li.active a {
  color: #1b1f5a;
}

.c-tsr {
  position: relative;
  display: block;
  color: #fff;
  background: #000;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  -webkit-backface-visibility: hidden;
  line-height: 0;
  -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 img {
  width: 100%;
  height: auto;
  opacity: .6;
  -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:hover img {
  opacity: 1;
  -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: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;
  padding: .6em;
  top: 0;
  right: 0;
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.5;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.c-tsr__title {
  text-transform: uppercase;
  font-weight: 400;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  line-height: 1;
  display: block;
  width: 100%;
  position: absolute;
  top: 10px;
}

.c-tsr__content {
  text-align: right;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  color: #fff;
  line-height: 1;
  display: block;
  width: 100%;
  position: absolute;
  padding: .6em;
  bottom: 0;
  right: 0;
}

.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: 2px 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 #1b1f5a;
}

.c-item-header {
  min-height: 50px;
  position: relative;
}

.c-item-header .c-item-header__content {
  position: absolute;
  bottom: 5px;
}

.c-icon-list li {
  padding-right: 12px;
}

/* ==========================================================================
   #FEATURED
   ========================================================================== */
.c-overlay {
  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);
}

.c-overlay__outer,
.c-overlay__inner,
.c-overlay__bg,
.c-overlay__stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.c-overlay__bg {
  background: #1e1e1e;
  opacity: 0.87;
}

/**
* SITE SPECIFIC MODS
**/
/* MAP */
#map {
  min-height: 520px;
}

/** PARAGRAPHS & LISTS **/
p {
  text-align: justify;
}

p.u-text--center, .u-text--center p, .c-card p {
  text-align: center;
}

.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%;
}

/** 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: 920px) {
  .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;
  }
}
/* LINKS */
.link {
  text-decoration: underline;
}

/*** OWL SLIDER ***/
.owl-dots {
  margin-top: 1em;
}

.owl-dots .owl-dot span {
  border: 1px solid #666;
  width: 20px;
  height: 20px;
  margin: 5px 7px;
  background: none;
}

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

.owl-promo .owl-dots {
  margin-top: -2em;
  position: relative;
  z-index: 9;
}

.owl-promo .owl-dots .owl-dot span {
  border: 1px solid #fff;
  background: none;
}

.owl-promo .owl-dots .owl-dot.active span,
.owl-promo .owl-dots .owl-dot:hover span {
  background: #fff;
}

.owl-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%);
  width: 100%;
}

.owl-theme .owl-nav .owl-prev, .owl-theme .owl-nav .owl-next {
  font-size: 3.2em;
  line-height: 0;
  padding: 0;
  background: none;
  -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: 100px;
  color: #666;
}

.owl-theme .owl-nav .owl-prev:hover, .owl-theme .owl-nav .owl-next:hover {
  color: #1b1f5a;
  background: none;
}

.owl-theme .owl-nav .owl-prev {
  float: left;
}

.owl-theme .owl-nav .owl-next {
  float: right;
}

.owl-carousel.owl-slider .owl-controls .owl-nav {
  top: 40%;
}

.owl-carousel.owl-slider .owl-controls .owl-nav .owl-prev,
.owl-carousel.owl-slider .owl-controls .owl-nav .owl-next {
  float: none;
  position: absolute;
  right: -40px;
}

.owl-carousel.owl-slider .owl-controls .owl-nav .owl-prev {
  right: auto;
  left: -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: 920px) {
  div.owl--text h1 {
    font-size: 48px;
    font-size: 3rem;
    line-height: 1;
  }

  div.owl--text h4 {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.7142857143;
  }
}
/* COVID 19 PROMO

/*
.c-featured--promo {background: #000; }
.c-featured--promo img {opacity: .4 }
*/
.c-main-nav > li > a.special-offers,
.c-main-nav > li > a.offres-speciales {
  color: #fff;
  background: #D10A11;
  border-radius: 100px;
}

.c-main-nav > li > a.special-offers:hover,
.c-main-nav > li > a.offres-speciales:hover,
.c-main-nav > li.active > a.special-offers,
.c-main-nav > li.active > a.offres-speciales {
  background: #1b1f5a;
}

.c-card--promo {
  height: 100%;
}

.c-card--promo .c-card-front {
  padding: 24px;
  height: 100%;
}

/*.c-card--promo .c-card-front p{ text-align:center; }*/
.c-card--promo .c-card-front ul {
  text-align: justify;
}

/* FANCYBOX

.fancybox-container {font-family:$brand-face;}

body.fancybox-active {
 overflow: visible !important;
}
*/
/*
.fancybox-button::before,
.fancybox-button::after,
.fancybox-button--left::after,
.fancybox-button--right::after {
  top: 50%; right: auto; bottom: auto;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

.fancybox-button--close::before {
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
      -ms-transform: translate(-50%,-50%) rotate(45deg);
          transform: translate(-50%,-50%) rotate(45deg);
}

.fancybox-button--close::after {
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
      -ms-transform: translate(-50%,-50%) rotate(-45deg);
          transform: translate(-50%,-50%) rotate(-45deg);
}

.fancybox-button {
  line-height: 52px;
  width: 52px; height: 52px;
}
*/
.u-bg--motif {
  background: transparent url("/cdn/img/bg-motif.png") repeat left top;
}

/*
.infoBox{
  width: 350px !important;
  top: 15px !important;
  left: 0px !important;
  background-color: #fff;
  box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
  border: 1px solid rgba(72, 181, 233, 0.6);
  border-radius: 2px 2px 10px 10px;
  font-size:2em;
}
*/
.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: #1b1f5a;
  color: #fff;
}

.c-btn--ghost.c-btn--primary.js-fancy_trigger:hover {
  background: #1b1f5a;
  border-color: #1b1f5a;
  color: #fff;
}

.modal-container {
  max-width: 500px;
  padding: 30px;
}

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