@charset "UTF-8";
/*----------------------------------------------------------------------------*\
    $DESCRIPTION
    Theme stylesheet, extends Blocss CSS Framework and defines all imports
\*----------------------------------------------------------------------------*/
/*
* _config.scss
*
* Contains all reset and basic styles, as well as definitions for the grid and column layout.
*
* NOTE: Usage of units: 'px' only for sprites (background-position, width and height), breakpoints, as well as border-width. For everything else use 'em'.
*/
/* GLOBAL CONSTANTS */
/* Default values */
/*----------------------------------------------------------------------------*\
    Fonts & sizes
\*----------------------------------------------------------------------------*/
/*
$milli					:	12px;
$micro					:	10px;
*/
/*----------------------------------------------------------------------------*\
    Breakpoints 
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    Colors
\*----------------------------------------------------------------------------*/
/*  Frameworks
\*----------------------------------------------------------------------------*/
/*!
Pure v0.5.0
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yui/pure/blob/master/LICENSE.md
*/
/*!
normalize.css v1.1.3 | MIT License | git.io/normalize
Copyright (c) Nicolas Gallagher and Jonathan Neal
*/
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */
[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
    font-size: 100%;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */
/**
 * Address margins handled incorrectly in IE 6/7.
 */
body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */
h1, .h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2, .h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3, .h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4, .h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5, .h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6, .h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
}

/**
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */
abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */
b,
strong {
    font-weight: bold;
}

blockquote, .blockquote--quotation {
    margin: 1em 40px;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 6/7/8/9.
 */
mark {
    background: #ff0;
    color: #000;
}

/**
 * Address margins set differently in IE 6/7.
 */
p,
pre {
    margin: 1em 0;
}

/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */
code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/**
 * Address CSS quotes not supported in IE 6/7.
 */
q {
    quotes: none;
}

/**
 * Address `quotes` property not supported in Safari 4.
 */
q:before,
q:after {
    content: '';
    content: none;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
    font-size: 80%;
}

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

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */
/**
 * Address margins set differently in IE 6/7.
 */
dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/**
 * Address paddings set differently in IE 6/7.
 */
menu,
ol,
ul {
    padding: 0 0 0 40px;
}

/**
 * Correct list images handled incorrectly in IE 7.
 */
nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */
img {
    border: 0;
    /* 1 */
    -ms-interpolation-mode: bicubic;
    /* 2 */
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */
figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Correct margin displayed oddly in IE 6/7.
 */
form {
    margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */
legend {
    border: 0;
    /* 1 */
    padding: 0;
    white-space: normal;
    /* 2 */
    *margin-left: -7px;
    /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
    font-size: 100%;
    /* 1 */
    margin: 0;
    /* 2 */
    vertical-align: baseline;
    /* 3 */
    *vertical-align: middle;
    /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
    *overflow: visible;
    /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
    *height: 13px;
    /* 3 */
    *width: 13px;
    /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    -moz-box-sizing: content-box;
    /* 2 */
    box-sizing: content-box;
}

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

/**
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
    overflow: auto;
    /* 1 */
    vertical-align: top;
    /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*csslint important:false*/
/* ==========================================================================
   Pure Base Extras
   ========================================================================== */
/**
 * Extra rules that Pure adds on top of Normalize.css
 */
/**
 * Always hide an element when it has the `hidden` HTML attribute.
 */
[hidden] {
    display: none !important;
}

/**
 * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
 * aspect ratio.
 */
.pure-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
.pure-g {
    letter-spacing: -0.31em;
    /* Webkit: collapse white-space between units */
    *letter-spacing: normal;
    /* reset IE < 8 */
    *word-spacing: -0.43em;
    /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed;
    /* Webkit: fixes text-rendering: optimizeLegibility */
    /*
    Sets the font stack to fonts known to work properly with the above letter
    and word spacings. See: https://github.com/yui/pure/issues/41/

    The following font stack makes Pure Grids work on all known environments.

    * FreeSans: Ships with many Linux distros, including Ubuntu

    * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
      Arial to get picked up by the browser, even though neither is available
      in Chrome OS.

    * Droid Sans: Ships with all versions of Android.

    * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
    */
    /*
    Use flexbox when possible to avoid `letter-spacing` side-effects.

    NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
    `-moz-` prefix version is omitted.
    */
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    /* IE10 uses display: flexbox */
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
}

/* Opera as of 12 on Windows needs word-spacing.
   The ".opera-only" selector is used to prevent actual prefocus styling
   and is not required in markup.
*/
.opera-only :-o-prefocus,
.pure-g {
    word-spacing: -0.43em;
}

.pure-u {
    display: inline-block;
    *display: inline;
    /* IE < 8: fake inline-block */
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

/*
Resets the font family back to the OS/browser's default sans-serif font,
this the same font stack that Normalize.css sets for the `body`.
*/
.pure-u-1,
.pure-u-1-1,
.pure-u-1-2,
.pure-u-1-3,
.pure-u-2-3,
.pure-u-1-4,
.pure-u-3-4,
.pure-u-1-5,
.pure-u-2-5,
.pure-u-3-5,
.pure-u-4-5,
.pure-u-5-5,
.pure-u-1-6,
.pure-u-5-6,
.pure-u-1-8,
.pure-u-3-8,
.pure-u-5-8,
.pure-u-7-8,
.pure-u-1-12,
.pure-u-5-12,
.pure-u-7-12,
.pure-u-11-12,
.pure-u-1-24,
.pure-u-2-24,
.pure-u-3-24,
.pure-u-4-24,
.pure-u-5-24,
.pure-u-6-24,
.pure-u-7-24,
.pure-u-8-24,
.pure-u-9-24,
.pure-u-10-24,
.pure-u-11-24,
.pure-u-12-24,
.pure-u-13-24,
.pure-u-14-24,
.pure-u-15-24,
.pure-u-16-24,
.pure-u-17-24,
.pure-u-18-24,
.pure-u-19-24,
.pure-u-20-24,
.pure-u-21-24,
.pure-u-22-24,
.pure-u-23-24,
.pure-u-24-24 {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.pure-u-1-24 {
    width: 4.1667%;
    *width: 4.1357%;
}

.pure-u-1-12,
.pure-u-2-24 {
    width: 8.3333%;
    *width: 8.3023%;
}

.pure-u-1-8,
.pure-u-3-24 {
    width: 12.5000%;
    *width: 12.4690%;
}

.pure-u-1-6,
.pure-u-4-24 {
    width: 16.6667%;
    *width: 16.6357%;
}

.pure-u-1-5 {
    width: 20%;
    *width: 19.9690%;
}

.pure-u-5-24 {
    width: 20.8333%;
    *width: 20.8023%;
}

.pure-u-1-4,
.pure-u-6-24 {
    width: 25%;
    *width: 24.9690%;
}

.pure-u-7-24 {
    width: 29.1667%;
    *width: 29.1357%;
}

.pure-u-1-3,
.pure-u-8-24 {
    width: 33.3333%;
    *width: 33.3023%;
}

.pure-u-3-8,
.pure-u-9-24 {
    width: 37.5000%;
    *width: 37.4690%;
}

.pure-u-2-5 {
    width: 40%;
    *width: 39.9690%;
}

.pure-u-5-12,
.pure-u-10-24 {
    width: 41.6667%;
    *width: 41.6357%;
}

.pure-u-11-24 {
    width: 45.8333%;
    *width: 45.8023%;
}

.pure-u-1-2,
.pure-u-12-24 {
    width: 50%;
    *width: 49.9690%;
}

.pure-u-13-24 {
    width: 54.1667%;
    *width: 54.1357%;
}

.pure-u-7-12,
.pure-u-14-24 {
    width: 58.3333%;
    *width: 58.3023%;
}

.pure-u-3-5 {
    width: 60%;
    *width: 59.9690%;
}

.pure-u-5-8,
.pure-u-15-24 {
    width: 62.5000%;
    *width: 62.4690%;
}

.pure-u-2-3,
.pure-u-16-24 {
    width: 66.6667%;
    *width: 66.6357%;
}

.pure-u-17-24 {
    width: 70.8333%;
    *width: 70.8023%;
}

.pure-u-3-4,
.pure-u-18-24 {
    width: 75%;
    *width: 74.9690%;
}

.pure-u-19-24 {
    width: 79.1667%;
    *width: 79.1357%;
}

.pure-u-4-5 {
    width: 80%;
    *width: 79.9690%;
}

.pure-u-5-6,
.pure-u-20-24 {
    width: 83.3333%;
    *width: 83.3023%;
}

.pure-u-7-8,
.pure-u-21-24 {
    width: 87.5000%;
    *width: 87.4690%;
}

.pure-u-11-12,
.pure-u-22-24 {
    width: 91.6667%;
    *width: 91.6357%;
}

.pure-u-23-24 {
    width: 95.8333%;
    *width: 95.8023%;
}

.pure-u-1,
.pure-u-1-1,
.pure-u-5-5,
.pure-u-24-24 {
    width: 100%;
}

.pure-button {
    /* Structure */
    display: inline-block;
    *display: inline;
    /*IE 6/7*/
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/*csslint outline-none:false*/
.pure-button {
    font-family: inherit;
    font-size: 100%;
    *font-size: 90%;
    /*IE 6/7 - To reduce IE's oversized button text*/
    *overflow: visible;
    /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
    padding: 0.5em 1em;
    color: #444;
    /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.8);
    /* rgba supported */
    *color: #444;
    /* IE 6 & 7 */
    border: 1px solid #999;
    /*IE 6/7/8*/
    border: none transparent;
    /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
}

.pure-button-hover,
.pure-button:hover,
.pure-button:focus {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
}

.pure-button:focus {
    outline: 0;
}

.pure-button-active,
.pure-button:active {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
}

.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active {
    border: none;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    filter: alpha(opacity=40);
    -khtml-opacity: 0.40;
    -moz-opacity: 0.40;
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
}

.pure-button-hidden {
    display: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
    background-color: #0078e7;
    color: #fff;
}

.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: 4px;
    -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: 4px;
    -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;
    outline: thin dotted \9;
    /* IE6-9 */
    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;
    outline: thin dotted \9;
    /* IE6-9 */
    border-color: #129FEA;
}

.pure-form input[type="file"]:focus,
.pure-form input[type="radio"]:focus,
.pure-form input[type="checkbox"]:focus {
    outline: thin dotted #333;
    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: #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: #ee5f5b;
}

.pure-form input:focus:invalid:focus,
.pure-form textarea:focus:invalid:focus,
.pure-form select:focus:invalid:focus {
    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 {
    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 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: 10em;
    margin: 0 1em 0 0;
}

.pure-form-aligned .pure-controls {
    margin: 1.5em 0 0 10em;
}

/* 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 {
    display: block;
    padding: 10px;
    margin: 0;
    border-radius: 0;
    position: relative;
    top: -1px;
}

.pure-form .pure-group input:focus {
    z-index: 2;
}

.pure-form .pure-group input:first-child {
    top: 1px;
    border-radius: 4px 4px 0 0;
}

.pure-form .pure-group input:last-child {
    top: -2px;
    border-radius: 0 0 4px 4px;
}

.pure-form .pure-group button {
    margin: 0.35em 0;
}

.pure-form .pure-input-1 {
    width: 100%;
}

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

/*csslint adjoining-classes:false, outline-none:false*/
/*TODO: Remove this lint rule override after a refactor of this code.*/
.pure-menu ul {
    position: absolute;
    visibility: hidden;
}

.pure-menu.pure-menu-open {
    visibility: visible;
    z-index: 2;
    width: 100%;
}

.pure-menu ul {
    left: -10000px;
    list-style: none;
    margin: 0;
    padding: 0;
    top: -10000px;
    z-index: 1;
}

.pure-menu > ul {
    position: relative;
}

.pure-menu-open > ul {
    left: 0;
    top: 0;
    visibility: visible;
}

.pure-menu-open > ul:focus {
    outline: 0;
}

.pure-menu li {
    position: relative;
}

.pure-menu a,
.pure-menu .pure-menu-heading {
    display: block;
    color: inherit;
    line-height: 1.5em;
    padding: 5px 20px;
    text-decoration: none;
    white-space: nowrap;
}

.pure-menu.pure-menu-horizontal > .pure-menu-heading {
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0;
    vertical-align: middle;
}

.pure-menu.pure-menu-horizontal > ul {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}

.pure-menu li a {
    padding: 5px 20px;
}

.pure-menu-can-have-children > .pure-menu-label:after {
    content: '\25B8';
    float: right;
    /* These specific fonts have the Unicode char we need. */
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif;
    margin-right: -20px;
    margin-top: -1px;
}

.pure-menu-can-have-children > .pure-menu-label {
    padding-right: 30px;
}

.pure-menu-separator {
    background-color: #dfdfdf;
    display: block;
    height: 1px;
    font-size: 0;
    margin: 7px 2px;
    overflow: hidden;
}

.pure-menu-hidden {
    display: none;
}

/* FIXED MENU */
.pure-menu-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* HORIZONTAL MENU CODE */
/* Initial menus should be inline-block so that they are horizontal */
.pure-menu-horizontal li {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}

/* Submenus should still be display: block; */
.pure-menu-horizontal li li {
    display: block;
}

/* Content after should be down arrow */
.pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label:after {
    content: "\25BE";
}

/*Add extra padding to elements that have the arrow so that the hover looks nice */
.pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label {
    padding-right: 30px;
}

/* Adjusting separator for vertical menus */
.pure-menu-horizontal li.pure-menu-separator {
    height: 50%;
    width: 1px;
    margin: 0 7px;
}

/* Submenus should be horizontal separator again */
.pure-menu-horizontal li li.pure-menu-separator {
    height: 1px;
    width: auto;
    margin: 7px 2px;
}

/*csslint adjoining-classes:false*/
/*TODO: Remove this lint rule override after a refactor of this code.*/
/* MAIN MENU STYLING */
.pure-menu.pure-menu-open,
.pure-menu.pure-menu-horizontal li .pure-menu-children {
    background: #fff;
    /* Old browsers */
    border: 1px solid #b7b7b7;
}

/* remove borders for horizontal menus */
.pure-menu.pure-menu-horizontal,
.pure-menu.pure-menu-horizontal .pure-menu-heading {
    border: none;
}

/* LINK STYLES */
.pure-menu a {
    border: 1px solid transparent;
    border-left: none;
    border-right: none;
}

.pure-menu a,
.pure-menu .pure-menu-can-have-children > li:after {
    color: #777;
}

.pure-menu .pure-menu-can-have-children > li:hover:after {
    color: #fff;
}

/* Focus style for a dropdown menu-item when the parent has been opened */
.pure-menu .pure-menu-open {
    background: #dedede;
}

.pure-menu li a:hover,
.pure-menu li a:focus {
    background: #eee;
}

/* DISABLED STATES */
.pure-menu li.pure-menu-disabled a:hover,
.pure-menu li.pure-menu-disabled a:focus {
    background: #fff;
    color: #bfbfbf;
}

.pure-menu .pure-menu-disabled > a {
    background-image: none;
    border-color: transparent;
    cursor: default;
}

.pure-menu .pure-menu-disabled > a,
.pure-menu .pure-menu-can-have-children.pure-menu-disabled > a:after {
    color: #bfbfbf;
}

/* HEADINGS */
.pure-menu .pure-menu-heading {
    color: #565d64;
    text-transform: uppercase;
    font-size: 90%;
    margin-top: 0.5em;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #dfdfdf;
}

/* ACTIVE MENU ITEM */
.pure-menu .pure-menu-selected a {
    color: #000;
}

/* FIXED MENU */
.pure-menu.pure-menu-open.pure-menu-fixed {
    border: none;
    border-bottom: 1px solid #b7b7b7;
}

/*csslint box-model:false*/
/*TODO: Remove this lint rule override after a refactor of this code.*/
.pure-paginator {
    /* `pure-g` Grid styles */
    letter-spacing: -0.31em;
    /* Webkit: collapse white-space between units */
    *letter-spacing: normal;
    /* reset IE < 8 */
    *word-spacing: -0.43em;
    /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed;
    /* Webkit: fixes text-rendering: optimizeLegibility */
    /* `pure-paginator` Specific styles */
    list-style: none;
    margin: 0;
    padding: 0;
}

.opera-only :-o-prefocus,
.pure-paginator {
    word-spacing: -0.43em;
}

/* `pure-u` Grid styles */
.pure-paginator li {
    display: inline-block;
    *display: inline;
    /* IE < 8: fake inline-block */
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.pure-paginator .pure-button {
    border-radius: 0;
    padding: 0.8em 1.4em;
    vertical-align: top;
    height: 1.1em;
}

.pure-paginator .pure-button:focus,
.pure-paginator .pure-button:active {
    outline-style: none;
}

.pure-paginator .prev,
.pure-paginator .next {
    color: #C0C1C3;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.pure-paginator .prev {
    border-radius: 2px 0 0 2px;
}

.pure-paginator .next {
    border-radius: 0 2px 2px 0;
}

@media (max-width: 480px) {
    .pure-menu-horizontal {
        width: 100%;
    }

    .pure-menu-children li {
        display: block;
        border-bottom: 1px solid black;
    }
}

.pure-table {
    /* Remove spacing between table cells (from Normalize.css) */
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.pure-table caption {
    color: #000;
    font: italic 85%/1 arial, sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td,
.pure-table th {
    border-left: 1px solid #cbcbcb;
    /*  inner column border */
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    /*to make ths where the title is really long work*/
    padding: 0.5em 1em;
    /* cell padding */
}

.pure-table td:first-child,
.pure-table th:first-child {
    border-left-width: 0;
}

.pure-table thead {
    background: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}

/*
striping:
   even - #fff (white)
   odd  - #f2f2f2 (light gray)
*/
.pure-table td {
    background-color: transparent;
}

.pure-table-odd td {
    background-color: #f2f2f2;
}

/* nth-child selector for modern browsers */
.pure-table-striped tr:nth-child(2n-1) td {
    background-color: #f2f2f2;
}

/* BORDERED TABLES */
.pure-table-bordered td {
    border-bottom: 1px solid #cbcbcb;
}

.pure-table-bordered tbody > tr:last-child td,
.pure-table-horizontal tbody > tr:last-child td {
    border-bottom-width: 0;
}

/* HORIZONTAL BORDERED TABLES */
.pure-table-horizontal td,
.pure-table-horizontal th {
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #cbcbcb;
}

.pure-table-horizontal tbody > tr:last-child td {
    border-bottom-width: 0;
}

/*!
Pure v0.5.0
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yui/pure/blob/master/LICENSE.md
*/
/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
.pure-g {
    letter-spacing: -0.31em;
    /* Webkit: collapse white-space between units */
    *letter-spacing: normal;
    /* reset IE < 8 */
    *word-spacing: -0.43em;
    /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed;
    /* Webkit: fixes text-rendering: optimizeLegibility */
    /*
    Sets the font stack to fonts known to work properly with the above letter
    and word spacings. See: https://github.com/yui/pure/issues/41/

    The following font stack makes Pure Grids work on all known environments.

    * FreeSans: Ships with many Linux distros, including Ubuntu

    * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
      Arial to get picked up by the browser, even though neither is available
      in Chrome OS.

    * Droid Sans: Ships with all versions of Android.

    * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
        
    * DISABLED DUE TO SETTING CUSTOM FONT IN MAIN CSS

    */
    /*font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;*/
    /*
    Use flexbox when possible to avoid `letter-spacing` side-effects.

    NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
    `-moz-` prefix version is omitted.
    */
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    /* IE10 uses display: flexbox */
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
}

/* Opera as of 12 on Windows needs word-spacing.
   The ".opera-only" selector is used to prevent actual prefocus styling
   and is not required in markup.
*/
.opera-only :-o-prefocus,
.pure-g {
    word-spacing: -0.43em;
}

.pure-u {
    display: inline-block;
    *display: inline;
    /* IE < 8: fake inline-block */
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

/*
Resets the font family back to the OS/browser's default sans-serif font,
this the same font stack that Normalize.css sets for the `body`.
*/
/*!
Pure v0.5.0
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yui/pure/blob/master/LICENSE.md
*/
.pure-u-1,
.pure-u-1-1,
.pure-u-1-2,
.pure-u-1-3,
.pure-u-2-3,
.pure-u-1-4,
.pure-u-3-4,
.pure-u-1-5,
.pure-u-2-5,
.pure-u-3-5,
.pure-u-4-5,
.pure-u-5-5,
.pure-u-1-6,
.pure-u-5-6,
.pure-u-1-8,
.pure-u-3-8,
.pure-u-5-8,
.pure-u-7-8,
.pure-u-1-12,
.pure-u-5-12,
.pure-u-7-12,
.pure-u-11-12,
.pure-u-1-24,
.pure-u-2-24,
.pure-u-3-24,
.pure-u-4-24,
.pure-u-5-24,
.pure-u-6-24,
.pure-u-7-24,
.pure-u-8-24,
.pure-u-9-24,
.pure-u-10-24,
.pure-u-11-24,
.pure-u-12-24,
.pure-u-13-24,
.pure-u-14-24,
.pure-u-15-24,
.pure-u-16-24,
.pure-u-17-24,
.pure-u-18-24,
.pure-u-19-24,
.pure-u-20-24,
.pure-u-21-24,
.pure-u-22-24,
.pure-u-23-24,
.pure-u-24-24 {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.pure-u-1-24 {
    width: 4.1667%;
    *width: 4.1357%;
}

.pure-u-1-12,
.pure-u-2-24 {
    width: 8.3333%;
    *width: 8.3023%;
}

.pure-u-1-8,
.pure-u-3-24 {
    width: 12.5000%;
    *width: 12.4690%;
}

.pure-u-1-6,
.pure-u-4-24 {
    width: 16.6667%;
    *width: 16.6357%;
}

.pure-u-1-5 {
    width: 20%;
    *width: 19.9690%;
}

.pure-u-5-24 {
    width: 20.8333%;
    *width: 20.8023%;
}

.pure-u-1-4,
.pure-u-6-24 {
    width: 25%;
    *width: 24.9690%;
}

.pure-u-7-24 {
    width: 29.1667%;
    *width: 29.1357%;
}

.pure-u-1-3,
.pure-u-8-24 {
    width: 33.3333%;
    *width: 33.3023%;
}

.pure-u-3-8,
.pure-u-9-24 {
    width: 37.5000%;
    *width: 37.4690%;
}

.pure-u-2-5 {
    width: 40%;
    *width: 39.9690%;
}

.pure-u-5-12,
.pure-u-10-24 {
    width: 41.6667%;
    *width: 41.6357%;
}

.pure-u-11-24 {
    width: 45.8333%;
    *width: 45.8023%;
}

.pure-u-1-2,
.pure-u-12-24 {
    width: 50%;
    *width: 49.9690%;
}

.pure-u-13-24 {
    width: 54.1667%;
    *width: 54.1357%;
}

.pure-u-7-12,
.pure-u-14-24 {
    width: 58.3333%;
    *width: 58.3023%;
}

.pure-u-3-5 {
    width: 60%;
    *width: 59.9690%;
}

.pure-u-5-8,
.pure-u-15-24 {
    width: 62.5000%;
    *width: 62.4690%;
}

.pure-u-2-3,
.pure-u-16-24 {
    width: 66.6667%;
    *width: 66.6357%;
}

.pure-u-17-24 {
    width: 70.8333%;
    *width: 70.8023%;
}

.pure-u-3-4,
.pure-u-18-24 {
    width: 75%;
    *width: 74.9690%;
}

.pure-u-19-24 {
    width: 79.1667%;
    *width: 79.1357%;
}

.pure-u-4-5 {
    width: 80%;
    *width: 79.9690%;
}

.pure-u-5-6,
.pure-u-20-24 {
    width: 83.3333%;
    *width: 83.3023%;
}

.pure-u-7-8,
.pure-u-21-24 {
    width: 87.5000%;
    *width: 87.4690%;
}

.pure-u-11-12,
.pure-u-22-24 {
    width: 91.6667%;
    *width: 91.6357%;
}

.pure-u-23-24 {
    width: 95.8333%;
    *width: 95.8023%;
}

.pure-u-1,
.pure-u-1-1,
.pure-u-5-5,
.pure-u-24-24 {
    width: 100%;
}

/*!
Pure v0.5.0
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yui/pure/blob/master/LICENSE.md
*/
@media screen and (min-width: 35.5em) {
    .pure-u-sm-1,
    .pure-u-sm-1-1,
    .pure-u-sm-1-2,
    .pure-u-sm-1-3,
    .pure-u-sm-2-3,
    .pure-u-sm-1-4,
    .pure-u-sm-3-4,
    .pure-u-sm-1-5,
    .pure-u-sm-2-5,
    .pure-u-sm-3-5,
    .pure-u-sm-4-5,
    .pure-u-sm-5-5,
    .pure-u-sm-1-6,
    .pure-u-sm-5-6,
    .pure-u-sm-1-8,
    .pure-u-sm-3-8,
    .pure-u-sm-5-8,
    .pure-u-sm-7-8,
    .pure-u-sm-1-12,
    .pure-u-sm-5-12,
    .pure-u-sm-7-12,
    .pure-u-sm-11-12,
    .pure-u-sm-1-24,
    .pure-u-sm-2-24,
    .pure-u-sm-3-24,
    .pure-u-sm-4-24,
    .pure-u-sm-5-24,
    .pure-u-sm-6-24,
    .pure-u-sm-7-24,
    .pure-u-sm-8-24,
    .pure-u-sm-9-24,
    .pure-u-sm-10-24,
    .pure-u-sm-11-24,
    .pure-u-sm-12-24,
    .pure-u-sm-13-24,
    .pure-u-sm-14-24,
    .pure-u-sm-15-24,
    .pure-u-sm-16-24,
    .pure-u-sm-17-24,
    .pure-u-sm-18-24,
    .pure-u-sm-19-24,
    .pure-u-sm-20-24,
    .pure-u-sm-21-24,
    .pure-u-sm-22-24,
    .pure-u-sm-23-24,
    .pure-u-sm-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-sm-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .pure-u-sm-1-12,
    .pure-u-sm-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .pure-u-sm-1-8,
    .pure-u-sm-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .pure-u-sm-1-6,
    .pure-u-sm-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .pure-u-sm-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .pure-u-sm-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .pure-u-sm-1-4,
    .pure-u-sm-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .pure-u-sm-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .pure-u-sm-1-3,
    .pure-u-sm-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .pure-u-sm-3-8,
    .pure-u-sm-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .pure-u-sm-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .pure-u-sm-5-12,
    .pure-u-sm-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .pure-u-sm-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .pure-u-sm-1-2,
    .pure-u-sm-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .pure-u-sm-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .pure-u-sm-7-12,
    .pure-u-sm-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .pure-u-sm-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .pure-u-sm-5-8,
    .pure-u-sm-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .pure-u-sm-2-3,
    .pure-u-sm-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .pure-u-sm-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .pure-u-sm-3-4,
    .pure-u-sm-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .pure-u-sm-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .pure-u-sm-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .pure-u-sm-5-6,
    .pure-u-sm-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .pure-u-sm-7-8,
    .pure-u-sm-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .pure-u-sm-11-12,
    .pure-u-sm-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .pure-u-sm-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .pure-u-sm-1,
    .pure-u-sm-1-1,
    .pure-u-sm-5-5,
    .pure-u-sm-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 48em) {
    .pure-u-md-1,
    .pure-u-md-1-1,
    .pure-u-md-1-2,
    .pure-u-md-1-3,
    .pure-u-md-2-3,
    .pure-u-md-1-4,
    .pure-u-md-3-4,
    .pure-u-md-1-5,
    .pure-u-md-2-5,
    .pure-u-md-3-5,
    .pure-u-md-4-5,
    .pure-u-md-5-5,
    .pure-u-md-1-6,
    .pure-u-md-5-6,
    .pure-u-md-1-8,
    .pure-u-md-3-8,
    .pure-u-md-5-8,
    .pure-u-md-7-8,
    .pure-u-md-1-12,
    .pure-u-md-5-12,
    .pure-u-md-7-12,
    .pure-u-md-11-12,
    .pure-u-md-1-24,
    .pure-u-md-2-24,
    .pure-u-md-3-24,
    .pure-u-md-4-24,
    .pure-u-md-5-24,
    .pure-u-md-6-24,
    .pure-u-md-7-24,
    .pure-u-md-8-24,
    .pure-u-md-9-24,
    .pure-u-md-10-24,
    .pure-u-md-11-24,
    .pure-u-md-12-24,
    .pure-u-md-13-24,
    .pure-u-md-14-24,
    .pure-u-md-15-24,
    .pure-u-md-16-24,
    .pure-u-md-17-24,
    .pure-u-md-18-24,
    .pure-u-md-19-24,
    .pure-u-md-20-24,
    .pure-u-md-21-24,
    .pure-u-md-22-24,
    .pure-u-md-23-24,
    .pure-u-md-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-md-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .pure-u-md-1-12,
    .pure-u-md-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .pure-u-md-1-8,
    .pure-u-md-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .pure-u-md-1-6,
    .pure-u-md-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .pure-u-md-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .pure-u-md-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .pure-u-md-1-4,
    .pure-u-md-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .pure-u-md-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .pure-u-md-1-3,
    .pure-u-md-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .pure-u-md-3-8,
    .pure-u-md-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .pure-u-md-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .pure-u-md-5-12,
    .pure-u-md-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .pure-u-md-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .pure-u-md-1-2,
    .pure-u-md-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .pure-u-md-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .pure-u-md-7-12,
    .pure-u-md-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .pure-u-md-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .pure-u-md-5-8,
    .pure-u-md-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .pure-u-md-2-3,
    .pure-u-md-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .pure-u-md-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .pure-u-md-3-4,
    .pure-u-md-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .pure-u-md-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .pure-u-md-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .pure-u-md-5-6,
    .pure-u-md-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .pure-u-md-7-8,
    .pure-u-md-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .pure-u-md-11-12,
    .pure-u-md-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .pure-u-md-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .pure-u-md-1,
    .pure-u-md-1-1,
    .pure-u-md-5-5,
    .pure-u-md-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 64em) {
    .pure-u-lg-1,
    .pure-u-lg-1-1,
    .pure-u-lg-1-2,
    .pure-u-lg-1-3,
    .pure-u-lg-2-3,
    .pure-u-lg-1-4,
    .pure-u-lg-3-4,
    .pure-u-lg-1-5,
    .pure-u-lg-2-5,
    .pure-u-lg-3-5,
    .pure-u-lg-4-5,
    .pure-u-lg-5-5,
    .pure-u-lg-1-6,
    .pure-u-lg-5-6,
    .pure-u-lg-1-8,
    .pure-u-lg-3-8,
    .pure-u-lg-5-8,
    .pure-u-lg-7-8,
    .pure-u-lg-1-12,
    .pure-u-lg-5-12,
    .pure-u-lg-7-12,
    .pure-u-lg-11-12,
    .pure-u-lg-1-24,
    .pure-u-lg-2-24,
    .pure-u-lg-3-24,
    .pure-u-lg-4-24,
    .pure-u-lg-5-24,
    .pure-u-lg-6-24,
    .pure-u-lg-7-24,
    .pure-u-lg-8-24,
    .pure-u-lg-9-24,
    .pure-u-lg-10-24,
    .pure-u-lg-11-24,
    .pure-u-lg-12-24,
    .pure-u-lg-13-24,
    .pure-u-lg-14-24,
    .pure-u-lg-15-24,
    .pure-u-lg-16-24,
    .pure-u-lg-17-24,
    .pure-u-lg-18-24,
    .pure-u-lg-19-24,
    .pure-u-lg-20-24,
    .pure-u-lg-21-24,
    .pure-u-lg-22-24,
    .pure-u-lg-23-24,
    .pure-u-lg-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-lg-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .pure-u-lg-1-12,
    .pure-u-lg-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .pure-u-lg-1-8,
    .pure-u-lg-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .pure-u-lg-1-6,
    .pure-u-lg-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .pure-u-lg-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .pure-u-lg-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .pure-u-lg-1-4,
    .pure-u-lg-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .pure-u-lg-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .pure-u-lg-1-3,
    .pure-u-lg-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .pure-u-lg-3-8,
    .pure-u-lg-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .pure-u-lg-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .pure-u-lg-5-12,
    .pure-u-lg-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .pure-u-lg-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .pure-u-lg-1-2,
    .pure-u-lg-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .pure-u-lg-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .pure-u-lg-7-12,
    .pure-u-lg-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .pure-u-lg-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .pure-u-lg-5-8,
    .pure-u-lg-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .pure-u-lg-2-3,
    .pure-u-lg-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .pure-u-lg-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .pure-u-lg-3-4,
    .pure-u-lg-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .pure-u-lg-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .pure-u-lg-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .pure-u-lg-5-6,
    .pure-u-lg-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .pure-u-lg-7-8,
    .pure-u-lg-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .pure-u-lg-11-12,
    .pure-u-lg-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .pure-u-lg-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .pure-u-lg-1,
    .pure-u-lg-1-1,
    .pure-u-lg-5-5,
    .pure-u-lg-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 80em) {
    .pure-u-xl-1,
    .pure-u-xl-1-1,
    .pure-u-xl-1-2,
    .pure-u-xl-1-3,
    .pure-u-xl-2-3,
    .pure-u-xl-1-4,
    .pure-u-xl-3-4,
    .pure-u-xl-1-5,
    .pure-u-xl-2-5,
    .pure-u-xl-3-5,
    .pure-u-xl-4-5,
    .pure-u-xl-5-5,
    .pure-u-xl-1-6,
    .pure-u-xl-5-6,
    .pure-u-xl-1-8,
    .pure-u-xl-3-8,
    .pure-u-xl-5-8,
    .pure-u-xl-7-8,
    .pure-u-xl-1-12,
    .pure-u-xl-5-12,
    .pure-u-xl-7-12,
    .pure-u-xl-11-12,
    .pure-u-xl-1-24,
    .pure-u-xl-2-24,
    .pure-u-xl-3-24,
    .pure-u-xl-4-24,
    .pure-u-xl-5-24,
    .pure-u-xl-6-24,
    .pure-u-xl-7-24,
    .pure-u-xl-8-24,
    .pure-u-xl-9-24,
    .pure-u-xl-10-24,
    .pure-u-xl-11-24,
    .pure-u-xl-12-24,
    .pure-u-xl-13-24,
    .pure-u-xl-14-24,
    .pure-u-xl-15-24,
    .pure-u-xl-16-24,
    .pure-u-xl-17-24,
    .pure-u-xl-18-24,
    .pure-u-xl-19-24,
    .pure-u-xl-20-24,
    .pure-u-xl-21-24,
    .pure-u-xl-22-24,
    .pure-u-xl-23-24,
    .pure-u-xl-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-xl-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .pure-u-xl-1-12,
    .pure-u-xl-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .pure-u-xl-1-8,
    .pure-u-xl-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .pure-u-xl-1-6,
    .pure-u-xl-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .pure-u-xl-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .pure-u-xl-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .pure-u-xl-1-4,
    .pure-u-xl-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .pure-u-xl-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .pure-u-xl-1-3,
    .pure-u-xl-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .pure-u-xl-3-8,
    .pure-u-xl-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .pure-u-xl-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .pure-u-xl-5-12,
    .pure-u-xl-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .pure-u-xl-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .pure-u-xl-1-2,
    .pure-u-xl-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .pure-u-xl-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .pure-u-xl-7-12,
    .pure-u-xl-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .pure-u-xl-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .pure-u-xl-5-8,
    .pure-u-xl-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .pure-u-xl-2-3,
    .pure-u-xl-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .pure-u-xl-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .pure-u-xl-3-4,
    .pure-u-xl-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .pure-u-xl-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .pure-u-xl-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .pure-u-xl-5-6,
    .pure-u-xl-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .pure-u-xl-7-8,
    .pure-u-xl-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .pure-u-xl-11-12,
    .pure-u-xl-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .pure-u-xl-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .pure-u-xl-1,
    .pure-u-xl-1-1,
    .pure-u-xl-5-5,
    .pure-u-xl-24-24 {
        width: 100%;
    }
}

/*!*
 * Powered by Blocss v5.0.6 | MIT License | blocss.github.io/blocss
 * by @bramsmulders (Bram Smulders)
 */
/*----------------------------------------------------------------------------*\
    DEFAULTS
    Blocss' default variables. Redefine and override them in your
    application-level `_vars.scss` file.
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    $CONTENTS
\*----------------------------------------------------------------------------*/
/**
 * TYPOGRAPHY                   Defines the typographic baseline
 * SPACING                      Spacing units to properly size your UI
 * RESPONSIVE                   Define your breakpoints
 * MISC
 */
/*----------------------------------------------------------------------------*\
    $TYPOGRAPHY
    Defines the typographic baseline.
    We define every size in pixels, the underlying system converts the
    respective units to the responsive REM value.
\*----------------------------------------------------------------------------*/
/**
 * Base font size & line height
 * We predefine a nice big font size, wich reads very nice on a big screen.
 * As per: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/
 */
/**
 * Sizes (in pixels)
 */
/**
 * Base font family
 */
/*----------------------------------------------------------------------------*\
    $SPACING
    Spacing units to properly size your UI
    As per: http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style
\*----------------------------------------------------------------------------*/
/**
 * Enable vertical rhythm?
 *
 * Enabling this will ensure all margins, paddings, lineheights etc. will
 * follow the default line height.
 *
 * Disabling this will render all line-heights according
 * to the `$line-height-ratio` variable
 */
/**
 * Assign our `$base-line-height` to a new spacing var for
 * more transparency
 */
/*----------------------------------------------------------------------------*\
    $RESPONSIVE
    Define your breakpoints. The first value is the appendix that shall be used
    for your classes (e.g. `.unit-6-12--palm`), the second value is the media
    query that the breakpoint fires at.
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    $MISC
\*----------------------------------------------------------------------------*/
/**
 * Would you like to show a baseline grid? This is handy during development.
 */
/**
 * Would you like to show media queries? This is handy during development.
 */
/**
 * Legacy support
 */
/**
 * Enable debug mode to highlight possible markup/accessibility
 * quirks in your code
 */
/*----------------------------------------------------------------------------*\
    $MIXINS
    A set of usefull Sass mixins, wich can be used troughout you project
\*----------------------------------------------------------------------------*/
/*  Functions
\*----------------------------------------------------------------------------*/
/**
 * Value to rem
 */
/**
 * Value to em
 */
/**
 * A small, internally-used function to remove the units from a given value.
 */
/*  CSS3
\*----------------------------------------------------------------------------*/
/**
 * Prefixer
 * Example: @include prefixer(border-radius, 5px 10px, webkit moz o ms spec);
 */
/**
 * Rem converter
 *
 * 1. Provide pixel fallback for ie8
 * 2. Loop over values
 * 3. Run trough prefixer
 *
 * Sample: @include rem(margin, 0 auto 300px, webkit moz spec, !important);
 */
/**
 * Multi rem converter
 * Remmify multiple properties in one swoop
 *
 * Beware: if only one set is provided, the mixin will fail.
 * In that case use the normal rem mixin instead
 *
 * Sample:
   @include multi-rem(
       (padding, $space 1em)
       (margin, $space auto, true)
       (border-radius, 50%)
   );
 */
/*  Typography & vertical rhythm
\*----------------------------------------------------------------------------*/
/**
 * Font face shorthand
 */
/**
 * Calculates font, rem font size & line height
 * $multiplier: multiplies line height by the given value
 * $line-height: include line height or not
 * The line height parameter can also be used as the multiplier
 *
 * Sample usage @include font-size(18px, 2);
 */
/**
 * Truncate overly long strings
 * sample value truncate(100%)
 */
/*  Media Queries
\*----------------------------------------------------------------------------*/
/**
 * Enclose a block of code with a media query as named in `$breakpoints`.
 */
/* normalize.css v3.0.0 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
    font-family: sans-serif;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/**
 * Remove default margin.
 */
body {
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
    display: inline-block;
    /* 1 */
    vertical-align: baseline;
    /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
    display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
    background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
    outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
    font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1, .h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
    background: #ff0;
    color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
    font-size: 80%;
}

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

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
    margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
    overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
    color: inherit;
    /* 1 */
    font: inherit;
    /* 2 */
    margin: 0;
    /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10.
 */
button {
    overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8+, and Opera
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
    line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    -moz-box-sizing: content-box;
    /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
    border: 0;
    /* 1 */
    padding: 0;
    /* 2 */
}

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

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
    font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

/*----------------------------------------------------------------------------*\
    $BASE
    A thin layer on top of normalize.css that provides a starting point more
    suitable for web applications. Removes the default spacing and border for
    appropriate elements.
\*----------------------------------------------------------------------------*/
/**
 * Toplevel HTML element
 * Assign our `$base-font-size` & predefine some defaults
 *
 * 1. Apply the `$base-font-size`, `$line-height-ratio` & `$face-base`
 * 2. Always add the horizontal scrollbar to prevent layout shifting
 */
html {
    font: 1.375em/1.18182 "ScalaSansWebPro", "Arial", "Helvetica", sans-serif;
    /* 1 */
    overflow-y: scroll;
    /* 2 */
    min-height: 100%;
}

/**
 * Border box ALL the things
 * As Per: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/**
 * The usual resetting of margins, paddings, borders etc.
 */
blockquote, .blockquote--quotation,
dl,
dd,
ol,
ul,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
p,
pre,
fieldset,
hr {
    margin: 0;
}

fieldset,
ol,
ul {
    padding: 0;
}

iframe,
fieldset {
    border: 0;
}

/**
 * Remove extra vertical spacing when nesting lists.
 */
li > ul,
li > ol {
    margin-bottom: 0;
}

/**
 * 1. Fix an odd quirk whereby, without this, code blocks are rendered at a
 *    font-size smaller than 1em.
 */
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    /* 1 */
}

/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */
[tabindex="-1"]:focus {
    outline: none !important;
}

/**
 * Image
 *
 * 1. By default all images are fluid
 * 2. Render `alt` visually offset when images don't load
 */
img {
    max-width: 100%;
    /* 1 */
    font-style: italic;
    /* 2 */
}

/**
 * Non-fluid images if you specify `width` and/or `height` attributes.
 */
img[width],
img[height] {
    max-width: none;
}

/*----------------------------------------------------------------------------*\
    $SHARED
    Shared behaviour
\*----------------------------------------------------------------------------*/
/**
 * Applies vertical rhythm to designated elements
 * As per: http://csswizardry.com/2012/06/single-direction-margin-declarations
 */
hgroup,
.hgroup,
ul,
ol,
dl,
blockquote,
.blockquote--quotation,
p,
address,
table,
fieldset,
pre,
hr {
    /* 1 */
    /* 3 */
    margin-bottom: 26px;
    /* 2 */
    /* 3 */
    margin-bottom: 1.18182rem;
}

/**
 * Default indentation value for lists
 */
ul,
ol,
dd {
    /* 1 */
    /* 3 */
    margin-left: 26px;
    /* 2 */
    /* 3 */
    margin-left: 1.18182rem;
}

/**
 * Micro clearfix
 * As per: nicolasgallagher.com/micro-clearfix-hack
 */
.cf:after {
    content: "";
    display: table;
    clear: both;
}

/*----------------------------------------------------------------------------*\
    $TYPOGRAPHY
    Pragmatic & practical font sizing
    As per: http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/
\*----------------------------------------------------------------------------*/
/*  Sizes
    Apply various font sizes by class
\*----------------------------------------------------------------------------*/
.giga {
    /* 1 */
    /* 3 */
    font-size: 96px;
    /* 2 */
    /* 3 */
    font-size: 4.36364rem;
    line-height: 1.08333;
}

.mega {
    /* 1 */
    /* 3 */
    font-size: 72px;
    /* 2 */
    /* 3 */
    font-size: 3.27273rem;
    line-height: 1.08333;
}

.kilo {
    /* 1 */
    /* 3 */
    font-size: 48px;
    /* 2 */
    /* 3 */
    font-size: 2.18182rem;
    line-height: 1.08333;
}

.alpha, h1, .h1, .heading-light_size-extralarge, .heading-regular_size-extralarge, .heading-medium_size-extralarge {
    /* 1 */
    /* 3 */
    font-size: 44px;
    /* 2 */
    /* 3 */
    font-size: 2rem;
    line-height: 1.18182;
}

.beta, h2, .h2, .heading-light_size-large, .heading-regular_size-large, .heading-medium_size-large {
    /* 1 */
    /* 3 */
    font-size: 40px;
    /* 2 */
    /* 3 */
    font-size: 1.81818rem;
    line-height: 1.3;
}

.gamma, h3, .h3, .heading-light_size-medium, .heading-regular_size-medium, .heading-medium_size-medium {
    /* 1 */
    /* 3 */
    font-size: 26px;
    /* 2 */
    /* 3 */
    font-size: 1.18182rem;
    line-height: 1;
}

.delta, h4, .h4, .heading-light_size-small, .heading-regular_size-small {
    /* 1 */
    /* 3 */
    font-size: 22px;
    /* 2 */
    /* 3 */
    font-size: 1rem;
    line-height: 1.18182;
}

.epsilon, h5, .h5 {
    /* 1 */
    /* 3 */
    font-size: 18px;
    /* 2 */
    /* 3 */
    font-size: 0.81818rem;
    line-height: 1.44444;
}

.zeta, h6, .h6 {
    /* 1 */
    /* 3 */
    font-size: 16px;
    /* 2 */
    /* 3 */
    font-size: 0.72727rem;
    line-height: 1.625;
}

.normalis {
    /* 1 */
    /* 3 */
    font-size: 22px;
    /* 2 */
    /* 3 */
    font-size: 1rem;
    line-height: 1.18182;
}

.milli {
    /* 1 */
    /* 3 */
    font-size: 14px;
    /* 2 */
    /* 3 */
    font-size: 0.63636rem;
    line-height: 1.85714;
}

.micro {
    /* 1 */
    /* 3 */
    font-size: 12px;
    /* 2 */
    /* 3 */
    font-size: 0.54545rem;
    line-height: 2.16667;
}

/*  Headings
\*----------------------------------------------------------------------------*/
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-weight: bold;
}

/**
 * Double stranded heading hierarchy
 */
/**
 * Heading groups and generic any-heading class.
 * To target any heading of any level simply apply a class of `.hN`
 * Sample markup:
<div class="hgroup">
    <h1 class="hN"></h1>
    <h2 class="hN"></h2>
</hgroup>
 */
hgroup .hN,
.hgroup .hN {
    margin-bottom: 0;
}

/*----------------------------------------------------------------------------*\
    $MODULE
    Removes the `margin-bottom` of a modules last-childs
    As per: http://css-tricks.com/spacing-the-bottom-of-modules/
\*----------------------------------------------------------------------------*/
.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0;
}

/*  Generic styles
\*----------------------------------------------------------------------------*/
.center {
    text-align: center;
}

.left-aligned {
    text-align: left;
}

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

.center-margin {
    margin: 0 auto;
}

.right-side {
    float: right;
}

.left-side {
    float: left;
}

.gutter {
    margin: 26px 26px;
}

.gutter-hor {
    margin: 0 26px;
}

.gutter-left {
    margin-left: 26px;
}

.gutter-right {
    margin-right: 26px;
}

.gutter-hor-half {
    margin: 0 13px;
}

.no-margin {
    margin: 0;
}

.uppercase {
    text-transform: uppercase;
}

.normalcase {
    text-transform: initial;
}

.no-underline {
    text-decoration: none;
}

.no-overflow {
    overflow: hidden;
    height: inherit;
    /* Todo: test in all browsers */
}

.font-black {
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
}

.font-bold {
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
}

.font-regular {
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
}

.layer-absolute {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

input {
    height: 46px;
    /*line-height: 46px;*/
    font-size: 1rem;
    padding: 0 0.3rem;
    max-width: 100%;
    /* For e.g. inputs in columns, to make sure they never size outside their column container */
}

/*Plain input white border, white text, black background*/
input.primary {
    color: #777777;
    background-color: #000A0B;
    border: 1px solid #fff;
}

/*Plain input white border, white text, yellow background*/
input.secondary {
    color: #000a0a;
    background-color: #fede0f;
    border: 1px solid #000a0a;
}

/*Plain input black border, black text, white background*/
input.plain {
    color: #000a0a;
    background-color: #fff;
    border: 1px solid #000a0a;
}

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

.block-height,
.block-normal-height {
    height: 250px;
    min-height: 250px;
}

.block-height.fixed,
.block-normal-height.fixed {
    max-height: 250px;
}

.block-height.flex,
.block-normal-height.flex {
    height: auto;
    max-height: none;
}

.block-height-275 {
    height: 275px;
    min-height: 275px;
}

.block-height-275.fixed {
    max-height: 275px;
}

.block-height-275.flex {
    height: auto;
    max-height: none;
}

.block-height-300 {
    height: 300px;
    min-height: 300px;
}

.block-height-300.fixed {
    max-height: 300px;
}

.block-height-300.flex {
    height: auto;
    max-height: none;
}

.block-height-400 {
    height: 400px;
    min-height: 400px;
}

.block-height-400.fixed {
    max-height: 400px;
}

.block-height-400.flex {
    height: auto;
    max-height: none;
}

.block-extra-height {
    height: 600px;
    min-height: 600px;
}

.block-extra-height.fixed {
    max-height: 600px;
}

.block-extra-height.flex {
    height: auto;
    max-height: none;
}

.block-double-height {
    height: 500px;
    min-height: 500px;
}

.block-double-height.fixed {
    max-height: 500px;
}

.block-double-height.flex {
    height: auto;
    max-height: none;
}

.block-ketelwijzer-height {
    height: 733px;
    min-height: 733px;
}

.block-ketelwijzer-height.fixed {
    max-height: 733px;
}

.block-ketelwijzer-height.flex {
    height: auto;
    max-height: none;
}

.block-full-width {
    width: 100%;
}

.mobile-only {
    display: none;
    visibility: hidden;
    opacity: 0;
}

.mobile-only.inline {
    display: none;
}

.lap-only {
    display: block;
    visibility: visible;
    opacity: 1;
}

.lap-only.inline {
    display: inline-block;
}

@media only screen and (max-width: 768px) {
    .mobile-only {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    .mobile-only.inline {
        display: inline-block;
    }

    .lap-only {
        display: none;
        visibility: hidden;
        opacity: 0;
    }

    .lap-only.inline {
        display: none;
    }

    .mobile-flex-height {
        height: auto;
        max-height: none !important;
    }
}

/********************************************* COLORS ***********************************************/
.brand-a {
    color: #fede0f;
}

.brand-a-background {
    background-color: #fede0f;
}

.brand-b {
    color: #ffd006;
}

.brand-b-background {
    background-color: #ffd006;
}

.brand-c {
    color: #ed381a;
}

.brand-c-background {
    background-color: #ed381a;
}

.facebook-a {
    color: #00539e;
}

.facebook-a-background {
    background-color: #00539e;
}

.facebook-b {
    color: #003d74;
}

.facebook-b-background {
    background-color: #003d74;
}

.grey-a {
    color: #000a0a;
}

.grey-a-background {
    background-color: #000a0a;
}

.grey-b {
    color: #171717;
}

.grey-b-background {
    background-color: #171717;
}

.grey-c {
    color: #1e1e1e;
}

.grey-c-background {
    background-color: #1e1e1e;
}

.grey-d {
    color: #282828;
}

.grey-e-background {
    background-color: #333333;
}

.grey-f {
    color: #777777;
}

.grey-f-background {
    background-color: #777777;
}

.grey-g {
    color: #eeeeee;
}

.grey-g-background {
    background-color: #eeeeee;
}

.grey-h {
    color: #f6f6f6;
}

.grey-h-background {
    background-color: #f6f6f6;
}

.grey-i {
    color: #cccccc;
}

.grey-i-background {
    background-color: #cccccc;
}

.white {
    color: #fff;
}

.white-background {
    background-color: #fff;
}

.black {
    color: #000;
}

.black-background {
    background-color: #000;
}

.black-background-40 {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Flex embed videos */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container {
    position: relative;
    padding-bottom: 54.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    background-color: #000a0a;
}

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

@media only screen and (max-width: 768px) {
    .video-container {
        padding-bottom: 133%;
    }
}

/*  Atoms
    These are basic tags, such as form labels, inputs or buttons. They also
    include more abstract elements like color palettes, fonts, and animations.
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    $BODY
\*----------------------------------------------------------------------------*/
body {
    color: #ffffff;
    background-color: #282828;
    width: 100%;
    min-height: 100%;
}

/*----------------------------------------------------------------------------*\
    $Wrapper
\*----------------------------------------------------------------------------*/
.wrapper {
    /*position: relative;
  min-height: 100%;
  background: #000;
  overflow: hidden;*/
}

/*----------------------------------------------------------------------------*\
    $SITE RETAIN
\*----------------------------------------------------------------------------*/
.site-retain {
    /* 1 */
    /* 3 */
    max-width: 973px;
    /* 2 */
    /* 3 */
    max-width: 44.22727rem;
    /* 1 */
    /* 3 */
    padding: 0 13px;
    /* 2 */
    /* 3 */
    padding: 0 0.59091rem;
    margin: 0 auto;
}

@media only screen and (min-width: 769px) {
    .site-retain {
        /* 1 */
        /* 3 */
        max-width: 986px;
        /* 2 */
        /* 3 */
        max-width: 44.81818rem;
        /* 1 */
        /* 3 */
        padding: 0 26px;
        /* 2 */
        /* 3 */
        padding: 0 1.18182rem;
    }
}

/*----------------------------------------------------------------------------*\
    $Primary content
\*----------------------------------------------------------------------------*/
.primary-content {
    position: relative;
    z-index: 1;
    /* 1 */
    /* 3 */
    padding-top: 40px;
    /* 2 */
    /* 3 */
    padding-top: 1.81818rem;
}

@media only screen and (min-width: 769px) {
    .primary-content {
        /* 1 */
        /* 3 */
        padding-top: 140px;
        /* 2 */
        /* 3 */
        padding-top: 6.36364rem;
    }
}

.shadow-overlay {
    display: block;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    opacity: 0;
    background: #000;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    z-index: 2;
}

.shadow-overlay.is-active {
    position: fixed;
    opacity: 0.8;
    height: 100%;
    width: 100%;
}

/*----------------------------------------------------------------------------*\
    $TYPOGRAPHY
    Pragmatic & practical font sizing
    As per: http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/
\*----------------------------------------------------------------------------*/
/*  Sizes
    Apply various font sizes by class
\*----------------------------------------------------------------------------*/
.giga {
    /* 1 */
    /* 3 */
    font-size: 96px;
    /* 2 */
    /* 3 */
    font-size: 4.36364rem;
    line-height: 1.08333;
}

.mega {
    /* 1 */
    /* 3 */
    font-size: 72px;
    /* 2 */
    /* 3 */
    font-size: 3.27273rem;
    line-height: 1.08333;
}

.kilo {
    /* 1 */
    /* 3 */
    font-size: 48px;
    /* 2 */
    /* 3 */
    font-size: 2.18182rem;
    line-height: 1.08333;
}

.alpha, h1, .h1, .heading-light_size-extralarge, .heading-regular_size-extralarge, .heading-medium_size-extralarge {
    /* 1 */
    /* 3 */
    font-size: 44px;
    /* 2 */
    /* 3 */
    font-size: 2rem;
    line-height: 1.18182;
}

.beta, h2, .h2, .heading-light_size-large, .heading-regular_size-large, .heading-medium_size-large {
    /* 1 */
    /* 3 */
    font-size: 40px;
    /* 2 */
    /* 3 */
    font-size: 1.81818rem;
    line-height: 1.3;
}

.gamma, h3, .h3, .heading-light_size-medium, .heading-regular_size-medium, .heading-medium_size-medium {
    /* 1 */
    /* 3 */
    font-size: 26px;
    /* 2 */
    /* 3 */
    font-size: 1.18182rem;
    line-height: 1;
}

.delta, h4, .h4, .heading-light_size-small, .heading-regular_size-small {
    /* 1 */
    /* 3 */
    font-size: 22px;
    /* 2 */
    /* 3 */
    font-size: 1rem;
    line-height: 1.18182;
}

.epsilon, h5, .h5 {
    /* 1 */
    /* 3 */
    font-size: 18px;
    /* 2 */
    /* 3 */
    font-size: 0.81818rem;
    line-height: 1.44444;
}

.zeta, h6, .h6 {
    /* 1 */
    /* 3 */
    font-size: 16px;
    /* 2 */
    /* 3 */
    font-size: 0.72727rem;
    line-height: 1.625;
}

.normalis {
    /* 1 */
    /* 3 */
    font-size: 22px;
    /* 2 */
    /* 3 */
    font-size: 1rem;
    line-height: 1.18182;
}

.milli {
    /* 1 */
    /* 3 */
    font-size: 14px;
    /* 2 */
    /* 3 */
    font-size: 0.63636rem;
    line-height: 1.85714;
}

.micro {
    /* 1 */
    /* 3 */
    font-size: 12px;
    /* 2 */
    /* 3 */
    font-size: 0.54545rem;
    line-height: 2.16667;
}

h2, .h2, h3, .h3 {
    font-familiy: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
}

h1, .h1 {
    font-familiy: "ScalaSansWebProBlack", "Arial", "Helvetica", sans-serif;
}

/*----------------------------------------------------------------------------*\
    Headers
\*----------------------------------------------------------------------------*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: bold;
}

.shadow-dark {
    text-shadow: 1px 1px #000a0a;
}

.shadow-light {
    text-shadow: 1px 1px #777777;
}

/*  $INCLUDES
    Including the files to properly display the necessary fonts.
\*----------------------------------------------------------------------------*/
/*'ScalaSansWebPro', Helvetica, Arial, sans-serif;*/
@font-face {
    font-family: 'ScalaSansWebPro';
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/ScalaSansScWebPro.eot");
    src: url("../fonts/ScalaSansScWebPro.eot?#iefix") format("embedded-opentype"), url("../fonts/ScalaSansScWebPro.woff") format("woff");
}

@font-face {
    font-family: 'ScalaSansWebProBold';
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/ScalaSansScWebPro-Bold.eot");
    src: url("../fonts/ScalaSansScWebPro-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ScalaSansScWebPro-Bold.woff") format("woff");
}

@font-face {
    font-family: 'ScalaSansWebProBlack';
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/ScalaSansWebPro-Black.eot");
    src: url("../fonts/ScalaSansWebPro-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/ScalaSansWebPro-Black.woff") format("woff");
}

.font-scala {
    font-family: 'ScalaSansWebPro';
}

.font-scala-bold {
    font-family: 'ScalaSansWebProBold';
}

.font-scala-black {
    font-family: 'ScalaSansWebProBlack';
}

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?99257756#fontello') format('svg');
  }
}
*/
/*----------------------------------------------------------------------------*\
    $HEADINGS
\*----------------------------------------------------------------------------*/
h1, .h1 {
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
    text-transform: uppercase;
}

h2, .h2, h3, .h3 {
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
}

h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
}

/*  $Headings lighter weight
\*----------------------------------------------------------------------------*/
.heading--light, .heading-light_size-small, .heading-light_size-medium, .heading-light_size-large, .heading-light_size-extralarge {
    font-weight: 200;
}

.heading--medium, .heading-medium_size-medium, .heading-medium_size-large, .heading-medium_size-extralarge {
    font-weight: 300;
}

/*  $Center, left, right
\*----------------------------------------------------------------------------*/
.heading--center {
    text-align: center;
}

.heading--left {
    text-align: left;
}

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

/*  $Arrow
\*----------------------------------------------------------------------------*/
.heading--arrow:after {
    content: "";
    display: inline-block;
    /* 1 */
    /* 3 */
    height: 29px;
    /* 2 */
    /* 3 */
    height: 1.31818rem;
    /* 1 */
    /* 3 */
    width: 15px;
    /* 2 */
    /* 3 */
    width: 0.68182rem;
    /* 1 */
    /* 3 */
    margin-left: 15px;
    /* 2 */
    /* 3 */
    margin-left: 0.68182rem;
    /* 1 */
    /* 3 */
    margin-bottom: -4px;
    /* 2 */
    /* 3 */
    margin-bottom: -0.18182rem;
    background-image: url("../images/arrow-title-theme-light.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/*  $Padded
\*----------------------------------------------------------------------------*/
.heading--padded {
    /* 1 */
    /* 3 */
    margin-bottom: 26px;
    /* 2 */
    /* 3 */
    margin-bottom: 1.18182rem;
}

/*  $Flat
\*----------------------------------------------------------------------------*/
.heading--flat {
    margin-bottom: 0;
}

/*  $Brand
\*----------------------------------------------------------------------------*/
.heading--brand {
    color: #fede0f;
}

/*  $Layer modifier
\*----------------------------------------------------------------------------*/
.layer--base-dark-b .content-block:not(.tile) h1, .layer--base-dark-b .content-block:not(.tile) .h1,
.layer--base-dark-b .content-block:not(.tile) h2,
.layer--base-dark-b .content-block:not(.tile) .h2,
.layer--base-dark-b .content-block:not(.tile) h3,
.layer--base-dark-b .content-block:not(.tile) .h3,
.layer--base-dark-b .content-block:not(.tile) h4,
.layer--base-dark-b .content-block:not(.tile) .h4,
.layer--base-dark-b .content-block:not(.tile) h5,
.layer--base-dark-b .content-block:not(.tile) .h5,
.layer--base-dark-b .content-block:not(.tile) h6,
.layer--base-dark-b .content-block:not(.tile) .h6 {
    color: #fede0f;
}

/*  $Cms classes
\*----------------------------------------------------------------------------*/
.heading-light_size-small {
    line-height: 1.25;
}

.heading-light_size-medium {
    line-height: 1.25;
}

.heading-light_size-large {
    line-height: 1.25;
}

.heading-light_size-extralarge {
    line-height: 1.25;
}

.heading-regular_size-small {
    line-height: 1.25;
}

.heading-regular_size-medium {
    line-height: 1.25;
}

.heading-regular_size-large {
    line-height: 1.25;
}

.heading-regular_size-extralarge {
    line-height: 1.25;
}

.heading-medium_size-medium {
    line-height: 1.25;
}

.heading-medium_size-large {
    line-height: 1.25;
}

.heading-medium_size-extralarge {
    line-height: 1.25;
}

.heading-nouppercase {
    text-transform: none;
}

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

@media only screen and (min-width: 769px) {
    .alpha, h1, .h1, .heading-light_size-extralarge, .heading-regular_size-extralarge, .heading-medium_size-extralarge {
        /* 1 */
        /* 3 */
        font-size: 44px;
        /* 2 */
        /* 3 */
        font-size: 2rem;
        line-height: 1.18182;
        line-height: 1.25;
        /* 1 */
        /* 3 */
        margin-bottom: 13px;
        /* 2 */
        /* 3 */
        margin-bottom: 0.59091rem;
    }

    .beta, h2, .h2, .heading-light_size-large, .heading-regular_size-large, .heading-medium_size-large {
        /* 1 */
        /* 3 */
        font-size: 40px;
        /* 2 */
        /* 3 */
        font-size: 1.81818rem;
        line-height: 1.3;
        line-height: 1.25;
        /* 1 */
        /* 3 */
        margin-bottom: 13px;
        /* 2 */
        /* 3 */
        margin-bottom: 0.59091rem;
    }

    .gamma, h3, .h3, .heading-light_size-medium, .heading-regular_size-medium, .heading-medium_size-medium {
        /* 1 */
        /* 3 */
        font-size: 26px;
        /* 2 */
        /* 3 */
        font-size: 1.18182rem;
        line-height: 1;
        line-height: 1.25;
        /* 1 */
        /* 3 */
        margin-bottom: 13px;
        /* 2 */
        /* 3 */
        margin-bottom: 0.59091rem;
    }

    .delta, h4, .h4, .heading-light_size-small, .heading-regular_size-small {
        /* 1 */
        /* 3 */
        font-size: 22px;
        /* 2 */
        /* 3 */
        font-size: 1rem;
        line-height: 1.18182;
        line-height: 1.25;
        /* 1 */
        /* 3 */
        margin-bottom: 13px;
        /* 2 */
        /* 3 */
        margin-bottom: 0.59091rem;
    }

    .epsilon, h5, .h5 {
        /* 1 */
        /* 3 */
        font-size: 18px;
        /* 2 */
        /* 3 */
        font-size: 0.81818rem;
        line-height: 1.44444;
        line-height: 1.25;
        /* 1 */
        /* 3 */
        margin-bottom: 13px;
        /* 2 */
        /* 3 */
        margin-bottom: 0.59091rem;
    }

    /*  $Flat
  \*----------------------------------------------------------------------------*/
    .heading--flat {
        margin-bottom: 0;
    }

    /*  $Padded
  \*----------------------------------------------------------------------------*/
    .heading--padded {
        /* 1 */
        /* 3 */
        margin-bottom: 52px;
        /* 2 */
        /* 3 */
        margin-bottom: 2.36364rem;
    }
}

.viewport-image {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-image should be set inline so dynamic images are possible (don't want image url in css ofcourse!) */
}

.viewport-image.contain {
    background-size: contain;
}

/*----------------------------------------------------------------------------*\
    $LOGO
\*----------------------------------------------------------------------------*/
.remeha-logo {
    display: block;
    position: relative;
    text-indent: -9999px;
    background-image: url(../images/Remeha/remeha-logo.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
    width: 134px;
    height: 70px;
    text-align: center;
    margin: 0;
    border: 0;
}

/*----------------------------------------------------------------------------*\
    $LOGO SMALL
\*----------------------------------------------------------------------------*/
.remeha-small-logo {
    height: 50px;
}

.remeha-small-logo > div.logo-small {
    float: left;
    text-indent: -9999px;
    background: transparent url(../images/Remeha/sprite-remeha.png) -1px -1px no-repeat;
    width: 34px;
    height: 21px;
    border: 0;
    margin: 14px 0 0;
}

.remeha-small-logo > span {
    margin-left: 13px;
    float: left;
    color: #777777;
    line-height: 50px;
}

/*----------------------------------------------------------------------------*\
    ICONS
\*----------------------------------------------------------------------------*/
.icon--arrow-down, .icon--arrow-left, .icon--arrow-right, .icon--cross {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.icon--arrow-down {
    background-image: url(../images/Svg/arrow_down.svg);
}

.icon--arrow-left {
    background-image: url(../images/Svg/arrow_left.svg);
}

.icon--arrow-right {
    background-image: url(../images/Svg/arrow_right.svg);
}

.icon--cross {
    background-image: url(../images/Svg/cross.svg);
}

/*----------------------------------------------------------------------------*\
    MEDALS SMALL
\*----------------------------------------------------------------------------*/
.medal {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -20px;
}

.medal.medal-kieskeurig {
    background-image: url(../images/medal-kieskeurig.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.medal.medal-consumentenbond {
    height: 94px;
    background-image: url(../images/medal-consumentenbond.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.medal.medal-topright {
    right: 0;
    margin-right: 70px;
    left: auto;
}

/*----------------------------------------------------------------------------*\
    PRODUCT STICKER
\*----------------------------------------------------------------------------*/
.product-sticker {
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -121px;
    background-color: #fede0f;
    border-radius: 38px;
    overflow: hidden;
    color: #000a0a;
    text-transform: uppercase;
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
    font-size: 0.727em;
}

.product-sticker .inside {
    display: table-cell;
    width: 75px;
    height: 75px;
    vertical-align: middle;
}

.product-sticker .inside.dark {
    background-color: #000a0a;
    color: #fede0f;
    font-size: 0.545em;
}

/*----------------------------------------------------------------------------*\
    GALLERY SMALL - Lightsabre
\*----------------------------------------------------------------------------*/
.gallery-wrapper {
    margin: 0 0 26px 0;
}

.gallery-wrapper ul, .gallery-wrapper ol {
    margin: 0;
    padding: 0;
}

.gallery-wrapper ul > li, .gallery-wrapper ol > li {
    margin: 0;
    padding: 0;
}

.gallery-wrapper .lightSlider > li {
    position: relative;
}

.gallery-wrapper .lightSlider > li > img {
    display: block;
    margin: 0 auto;
}

.gallery-wrapper .lightSlider > li .title {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    opacity: 0.8;
    text-align: center;
    background-color: #000a0a;
    padding: 13px;
    color: #ffffff;
}

.gallery-wrapper .lSSlideOuter {
    border: 1px solid #cccccc;
    background-color: #e6e6e6;
}

.gallery-wrapper .lSSlideOuter .lSPager.lSGallery li {
    opacity: 0.3;
}

.gallery-wrapper .lSAction > a {
    top: 0;
    border: 0;
    height: 100%;
    background-image: url("../images/LightSlider/controls.png");
    background-position-y: 50%;
    background-repeat: no-repeat;
}

.gallery-wrapper.demo-gallery {
    min-width: 260px;
    min-height: 460px;
}

/*----------------------------------------------------------------------------*\
    $INLINE-ELEMENTS
\*----------------------------------------------------------------------------*/
mark {
    background: #fede0f;
}

/*----------------------------------------------------------------------------*\
    $PARAGRAPH
\*----------------------------------------------------------------------------*/
/*  $Layer modifier
\*----------------------------------------------------------------------------*/
.layer--grey-a p {
    color: #333333;
}

.layer--brand p {
    color: #000a0a;
}

/*---------------------------------------------------------------------------*/
.search-result-block {
    border-bottom: 1px solid #cccccc;
    margin: 0 0 26px 0;
}

.search-result-block strong {
    margin-bottom: 7px;
    display: block;
}

/*---------------------------------------------------------------------------*/
.comment-block {
    padding: 13px;
    margin: 0 26px 26px 26px;
    font-size: 16px;
}

.comment-block > div {
    margin: 26px 0;
}

/*---------------------------------------------------------------------------*/
.text-area .pure-u-1-2 {
    width: 44%;
}

.text-area .margin-left {
    margin-left: 5%;
}

.text-area .paragraph-image-left img {
    float: left;
    margin: 0 26px 26px 0;
}

.text-area .paragraph-image-right img {
    float: right;
    margin: 0 0 26px 26px;
}

p {
    font-size: 18px;
}

p .introduction {
    font-weight: 600;
}

p .introduction::after {
    content: ' - ';
}

hr {
    border: 0;
    height: 1px;
    width: 100%;
    margin: 7px 0 26px;
    background-color: #ccc;
}

/*---------------------------------------------------------------------------*/
blockquote, .blockquote--quotation {
    position: relative;
    max-width: 32em;
    /* 1 */
    /* 3 */
    font-size: 18pt;
    /* 2 */
    /* 3 */
    font-size: 1.09091rem;
    line-height: 1.08333;
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
    font-weight: 200;
    border-top: 0.25rem solid #fede0f;
    border-bottom: 0.25rem solid #fede0f;
    margin: 26px 0;
}

blockquote > p, .blockquote--quotation > p {
    margin: 26px 0 0 26px;
}

blockquote > p:before, .blockquote--quotation > p:before {
    content: "“";
}

blockquote > p.source, .blockquote--quotation > p.source {
    font-size: 14px;
    font-weight: 100;
    margin: 26px 0 26px 26px;
}

blockquote > p.source:before, .blockquote--quotation > p.source:before {
    content: "";
}

.blockquote--quotation:before {
    content: "“";
    position: absolute;
    top: 0;
    /* 1 */
    /* 3 */
    left: -52px;
    /* 2 */
    /* 3 */
    left: -2.36364rem;
    display: block;
    /* 1 */
    /* 3 */
    font-size: 90px;
    /* 2 */
    /* 3 */
    font-size: 4.09091rem;
    line-height: 1.15556;
    line-height: 1;
}

.blockquote--quotation.is-centered {
    text-align: center;
    margin-left: 0;
}

.blockquote--quotation.is-centered:before {
    position: relative;
    display: block;
    top: auto;
    left: auto;
    /* 1 */
    /* 3 */
    margin-bottom: -55px;
    /* 2 */
    /* 3 */
    margin-bottom: -2.5rem;
}

/*---------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    $LISTS
\*----------------------------------------------------------------------------*/
dl dd {
    margin-top: 0.1rem;
    margin-bottom: 0.25rem;
}

dl dt {
    margin-top: 0.25rem;
    font-weight: bold;
}

ul,
ol {
    font-size: 16px;
    line-height: 0.95rem;
    margin: 0 0 52px 26px;
}

ul > li,
ol > li {
    margin: 0 0 1rem;
    padding: 0 0 0 30px;
}

ul > li *:last-child,
ol > li *:last-child {
    margin-bottom: 0;
}

ul > li ul, ul > li ol,
ol > li ul,
ol > li ol {
    margin: 13px 0 0;
}

ul > li ul > li, ul > li ol > li,
ol > li ul > li,
ol > li ol > li {
    padding: 0 0 0.5rem 20px;
    margin: 0 0 0 30px;
}

ul > li ul > li *:last-child, ul > li ol > li *:last-child,
ol > li ul > li *:last-child,
ol > li ol > li *:last-child {
    margin-bottom: 0;
}

ul.checkmark, ul.checkmark,
ol.checkmark,
ol.checkmark {
    list-style-image: url("../images/Svg/check.svg");
    margin: 0 0 52px 32px;
}

.tabs {
    display: inline-block;
    width: 100%;
    float: none;
    list-style: none;
    position: relative;
    margin: 26px 0 26px 26px;
    text-align: left;
    font-size: 18px;
    font-weight: normal;
}

.tabs > li {
    float: left;
    display: block;
    padding: 0;
}

.tabs label {
    display: block;
    padding: 16px 26px;
    color: #777777;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    background-color: #fafafa;
    cursor: pointer;
    position: relative;
    heigth: 60px;
    z-index: 3;
    -webkit-transition-duration: all 0.2s ease-in-out;
    transition-duration: all 0.2s ease-in-out;
}

.tabs label:hover {
    color: #000a0a;
    background: #ffffff;
}

.tabs .tab-content {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    color: #000a0a;
    background: #ffffff;
    z-index: 2;
    display: none;
    overflow: hidden;
    padding: 0 16px 0 0;
}

.tabs [id^="tab"]:checked + label {
    top: 0;
    color: #000a0a;
    background: #ffffff;
    border-bottom: 0;
}

.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
    display: block;
}

.tabs hr {
    margin: 26px 0;
}

.faq {
    display: inline-block;
    width: 100%;
    float: none;
    list-style: none;
    position: relative;
    margin: 26px 0 26px 26px;
    text-align: left;
    font-size: 18px;
    font-weight: normal;
    border-bottom: 1px solid #cccccc;
    margin: 0 0 26px;
}

.faq > li {
    display: block;
    padding: 0;
    margin: 0;
}

.faq label {
    display: block;
    padding: 16px 46px 16px 26px;
    border: 1px solid #cccccc;
    border-bottom: 0;
    color: #000a0a;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    heigth: 60px;
    z-index: 3;
    -webkit-transition-duration: all 0.2s ease-in-out;
    transition-duration: all 0.2s ease-in-out;
}

.faq label .handle {
    position: absolute;
    top: 18px;
    right: 20px;
    display: block;
    width: 18px;
    height: 12px;
    background-image: url("../images/Svg/arrow_down.svg");
    background-repeat: no-repeat;
}

.faq label:hover {
    color: #000a0a;
    background: #ffffff;
}

.faq .tab-content {
    position: relative;
    width: 100%;
    color: #000a0a;
    background-color: #eeeeee;
    z-index: 2;
    display: none;
    overflow: hidden;
    padding: 26px;
    border: 1px solid #cccccc;
    border-top: 0;
    border-bottom: 0;
}

.faq [id^="tab"]:checked + label {
    top: 0;
    color: #000a0a;
    background-color: #eeeeee;
    border-bottom: 0;
}

.faq [id^="tab"]:checked + label .handle {
    background-image: url("../images/Svg/arrow_up.png");
}

.faq [id^="tab"]:checked ~ [id^="tab-content"] {
    display: block;
}

.options legend {
    font-size: 1rem;
    float: left;
}

.options ul {
    float: left;
    list-style-type: none;
    margin-left: 2.5rem;
}

.options ul > li {
    float: left;
    margin-right: 2.5rem;
}

/*  $Panel
\*----------------------------------------------------------------------------*/
/*  $Stripe
\*----------------------------------------------------------------------------*/
/*  $Arrow
\*----------------------------------------------------------------------------*/
/*  $Number
\*----------------------------------------------------------------------------*/
/*  $Check
\*----------------------------------------------------------------------------*/
/*  $Layer modifier
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    $TABLES
\*----------------------------------------------------------------------------*/
/*
Adaptation https://css-tricks.com/examples/ResponsiveTables/
*/
table {
    width: 100%;
    border-collapse: collapse;
}

table tr:nth-of-type(2n+1) {
    background: none repeat scroll 0% 0% #fafafa;
}

table td, table th {
    padding: 13px;
    border: 1px solid #CCC;
    text-align: left;
}

table th {
    background: none repeat scroll 0% 0% #333;
    color: #FFF;
    font-weight: bold;
}

@media only screen and (max-width: 768px) {
    table.responsive {
        /* Force table to not be like tables anymore */
        display: block;
        min-width: 280px;
        /* Hide table headers (but not display: none;, for accessibility) */
        /*
    Label the data - note that labels cannot be too long
    */
    }

    table.responsive thead, table.responsive tbody, table.responsive th, table.responsive td, table.responsive tr {
        display: block;
    }

    table.responsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table.responsive tr {
        border: 1px solid #ccc;
    }

    table.responsive td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    table.responsive td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 13px;
        left: 6px;
        width: 45%;
        padding-right: 13px;
        white-space: nowrap;
    }

    table.responsive.demotable td:nth-of-type(1):before {
        content: "Head 1";
    }

    table.responsive.demotable td:nth-of-type(2):before {
        content: "Head 2";
    }

    table.responsive.demotable td:nth-of-type(3):before {
        content: "Head 3";
    }

    table.responsive.demotable td:nth-of-type(4):before {
        content: "Head 4";
    }

    table.responsive.demotable td:nth-of-type(5):before {
        content: "Head 5";
    }
}

table.test {
    color: #000a0a;
    border: 1px solid #d4d4d4;
    border-collapse: separate;
    text-align: left;
    width: 100%;
    background-color: #ffffff;
}

table.test tr:nth-child(even) {
    background-color: #fafafa;
}

table.test tr:last-child td {
    border-bottom: none;
}

table.test th {
    /* 1 */
    /* 3 */
    font-size: 18px;
    /* 2 */
    /* 3 */
    font-size: 0.81818rem;
    line-height: 1.44444;
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
    font-weight: 600;
    /* 1 */
    /* 3 */
    padding: 26px;
    /* 2 */
    /* 3 */
    padding: 1.18182rem;
    background-color: #eeeeee;
    border-bottom: 1px solid #d4d4d4;
}

table.test td {
    /* 1 */
    /* 3 */
    font-size: 16px;
    /* 2 */
    /* 3 */
    font-size: 0.72727rem;
    line-height: 1.625;
    /* 1 */
    /* 3 */
    padding: 13px 26px;
    /* 2 */
    /* 3 */
    padding: 0.59091rem 1.18182rem;
    border-bottom: 1px solid #d4d4d4;
}

table.test.compact th {
    /* 1 */
    /* 3 */
    padding: 13px;
    /* 2 */
    /* 3 */
    padding: 0.59091rem;
}

table.test.compact td {
    /* 1 */
    /* 3 */
    padding: 13px;
    /* 2 */
    /* 3 */
    padding: 0.59091rem;
}

.product-rating {
    display: block;
    min-width: 250px;
}

.product-rating .row-wrapper {
    display: inline-block;
}

.product-rating .row-wrapper ul.score {
    float: left;
    line-height: 20px;
    list-style-type: none;
    margin: 0;
}

.product-rating .row-wrapper ul.score li {
    margin: 0;
    padding: 0;
    float: left;
    height: 20px;
    width: 16px;
    background-image: url(../images/Svg/rating.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.product-rating .row-wrapper ul.score li.active {
    background-image: url(../images/Svg/rating_filled.svg);
}

.product-rating .label {
    float: left;
    padding-left: 13px;
    font-size: 16px;
}

/*  $Layer modifier
\*----------------------------------------------------------------------------*/
.layer--base-dark-b table {
    color: #1e1e1e;
}

/*----------------------------------------------------------------------------*\
    $LAYER
\*----------------------------------------------------------------------------*/
.layer {
    position: relative;
    z-index: 1;
}

.layer.is-hidden {
    display: none;
}

.layer.layer--hide-overflow {
    overflow: hidden;
}

/*  $Colours
\*----------------------------------------------------------------------------*/
.layer--brand-a {
    background: #fede0f;
}

.layer--grey-a {
    background: #000a0a;
}

.layer--grey-b {
    background: #171717;
}

.layer--grey-c {
    background: #1e1e1e;
}

.layer--grey-d {
    background: #282828;
}

.layer--grey-e {
    background: #333333;
}

.layer--grey-f {
    background: #777777;
}

.layer--white {
    color: #000a0a;
    background: #ffffff;
}

/*  $Sizes
\*----------------------------------------------------------------------------*/
.layer--extra-large {
    /* 1 */
    /* 3 */
    padding: 78px 0 52px 0;
    /* 2 */
    /* 3 */
    padding: 3.54545rem 0 2.36364rem 0;
}

.layer--large {
    /* 1 */
    /* 3 */
    padding: 39px 0 26px 0;
    /* 2 */
    /* 3 */
    padding: 1.77273rem 0 1.18182rem 0;
}

.layer--medium {
    /* 1 */
    /* 3 */
    padding: 26px 0 0 0;
    /* 2 */
    /* 3 */
    padding: 1.18182rem 0 0 0;
}

.layer--small {
    /* 1 */
    /* 3 */
    padding: 26px 0 0 0;
    /* 2 */
    /* 3 */
    padding: 1.18182rem 0 0 0;
}

@media only screen and (min-width: 769px) {
    /*  $Sizes
  \*----------------------------------------------------------------------------*/
    .layer--extra-large {
        /* 1 */
        /* 3 */
        padding: 130px 0 104px 0;
        /* 2 */
        /* 3 */
        padding: 5.90909rem 0 4.72727rem 0;
    }

    .layer--large {
        /* 1 */
        /* 3 */
        padding: 78px 0 52px 0;
        /* 2 */
        /* 3 */
        padding: 3.54545rem 0 2.36364rem 0;
    }

    .layer--medium {
        /* 1 */
        /* 3 */
        padding: 52px 0 26px 0;
        /* 2 */
        /* 3 */
        padding: 2.36364rem 0 1.18182rem 0;
    }

    .layer--small {
        /* 1 */
        /* 3 */
        padding: 26px 0 0 0;
        /* 2 */
        /* 3 */
        padding: 1.18182rem 0 0 0;
    }
}

/*----------------------------------------------------------------------------*\
    $TEXT-FIELDS
\*----------------------------------------------------------------------------*/
label {
    display: block;
    font-size: 18px;
}

label > abbr {
    color: #ed381a;
}

input[type=submit], input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=tel],
input[type=search], input[type=number] {
    display: block;
    /* 1 */
    /* 3 */
    padding: 11px 26px 11px 26px;
    /* 2 */
    /* 3 */
    padding: 0.5rem 1.18182rem 0.5rem 1.18182rem;
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
    font-size: 16px;
    color: #000a0a;
    border: 1px solid #000a0a;
    height: 46px;
    outline: 0;
}

input[type=submit]:focus, input[type=text]:focus,
input[type=password]:focus,
input[type=url]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=search]:focus, input[type=number]:focus {
    border: 1px solid #fede0f;
    outline: 0;
}

input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=tel],
input[type=search] {
    /* 1 */
    /* 3 */
    min-width: 220px;
    /* 2 */
    /* 3 */
    min-width: 10rem;
}

input[type=number] {
    /* 1 */
    /* 3 */
    min-width: 100px;
    /* 2 */
    /* 3 */
    min-width: 4.54545rem;
}

textarea {
    min-width: 20rem;
    /* 1 */
    /* 3 */
    height: 140px;
    /* 2 */
    /* 3 */
    height: 6.36364rem;
    /* 1 */
    /* 3 */
    padding: 13px 26px;
    /* 2 */
    /* 3 */
    padding: 0.59091rem 1.18182rem;
    max-width: 100%;
    color: #000a0a;
    border: 1px solid #333333;
    outline: 0;
    cursor: initial;
}

textarea:focus {
    border: 1px solid #fede0f;
}

input.dark {
    border: 1px solid #ffffff;
    background: transparent;
}

/*  $Input
\*----------------------------------------------------------------------------*/
input[type=text].input-small {
    min-width: 3rem;
    /* 1 */
    /* 3 */
    max-width: 108px;
    /* 2 */
    /* 3 */
    max-width: 4.90909rem;
}

input[type=text].input-smallest {
    min-width: 1.5rem;
    /* 1 */
    /* 3 */
    max-width: 78px;
    /* 2 */
    /* 3 */
    max-width: 3.54545rem;
}

/*----------------------------------------------------------------------------*\
    $File-upload
\*----------------------------------------------------------------------------*/
.file-upload {
    overflow: hidden;
}

.file-upload + .file-upload {
    /* 1 */
    /* 3 */
    margin-top: 26px;
    /* 2 */
    /* 3 */
    margin-top: 1.18182rem;
}

/*  $Content
\*----------------------------------------------------------------------------*/
.file-upload__content {
    /* 1 */
    /* 3 */
    width: 180px;
    /* 2 */
    /* 3 */
    width: 8.18182rem;
    /* 1 */
    /* 3 */
    padding: 11px 26px 11px 26px;
    /* 2 */
    /* 3 */
    padding: 0.5rem 1.18182rem 0.5rem 1.18182rem;
    /* 1 */
    /* 3 */
    border-radius: 3px;
    /* 2 */
    /* 3 */
    border-radius: 0.13636rem;
    /* 1 */
    /* 3 */
    border-radius: 3px 0 0 3px;
    /* 2 */
    /* 3 */
    border-radius: 0.13636rem 0 0 0.13636rem;
    border: 1px solid #333333;
    outline: 0;
    float: left;
    /* 1 */
    /* 3 */
    padding: 12px 26px;
    /* 2 */
    /* 3 */
    padding: 0.54545rem 1.18182rem;
    border-right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-upload__content:focus {
    box-shadow: 0 0 0 2px #fede0f;
}

/*  $Button
\*----------------------------------------------------------------------------*/
.file-upload__button.button--brand, .file-upload__button.button--primary, .file-upload__button.button--light, .file-upload__button.button--secondary {
    position: relative;
    overflow: hidden;
    float: left;
    /* 1 */
    /* 3 */
    padding: 13px 26px;
    /* 2 */
    /* 3 */
    padding: 0.59091rem 1.18182rem;
    /* 1 */
    /* 3 */
    border-radius: 0 8px 8px 0;
    /* 2 */
    /* 3 */
    border-radius: 0 0.36364rem 0.36364rem 0;
}

.file-upload__button.button--brand:after, .file-upload__button.button--primary:after, .file-upload__button.button--light:after, .file-upload__button.button--secondary:after {
    display: none;
}

.file-upload__button input {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 2000px;
    cursor: pointer;
    opacity: 0;
}

/*  $More
\*----------------------------------------------------------------------------*/
.file-upload__more {
    /* 1 */
    /* 3 */
    font-size: 12px;
    /* 2 */
    /* 3 */
    font-size: 0.54545rem;
    line-height: 2.16667;
    line-height: 1.5;
    /* 1 */
    /* 3 */
    padding-top: 6px;
    /* 2 */
    /* 3 */
    padding-top: 0.27273rem;
    margin-bottom: 0;
    display: inline-block;
}

@media only screen and (min-width: 769px) {
    .file-upload__content {
        /* 1 */
        /* 3 */
        width: 240px;
        /* 2 */
        /* 3 */
        width: 10.90909rem;
    }
}

/*----------------------------------------------------------------------------*\
    $CHECKBOX
    These are styled base on wtfforms techniques: http://wtfforms.com/
\*----------------------------------------------------------------------------*/
/* TODO: See if we can make the selection png extend outside the checkbox. If not, we may have to resort to
using an image for the checkbox, but that could cause scaling problems. SVG box maybe? */
.checkbox {
    position: relative;
    display: inline-block;
    padding-left: 30px;
    color: #000a0a;
    cursor: pointer;
    margin: 0 2.5rem 26px 0;
    /* 1 */
    /* 3 */
    line-height: 28px;
    /* 2 */
    /* 3 */
    line-height: 1.27273rem;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.checkbox p {
    margin-bottom: 0;
}

.checkbox .checkbox__indicator {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    /* 1 */
    /* 3 */
    height: 16px;
    /* 2 */
    /* 3 */
    height: 0.72727rem;
    /* 1 */
    /* 3 */
    width: 16px;
    /* 2 */
    /* 3 */
    width: 0.72727rem;
    color: #000a0a;
    text-align: center;
    border: 1px solid #000a0a;
    background-color: #ffffff;
    background-size: 90% 90%;
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: box-shadow 0.1s;
    transition: box-shadow 0.1s;
    margin: 5px;
}

.checkbox-wrapper {
    position: relative;
}

.checkbox-wrapper > div {
    margin-bottom: 5px;
}

.checkbox input:checked ~ .checkbox__indicator {
    background-image: url("../images/checkbox-checked.png");
}

/*----------------------------------------------------------------------------*\
   ON OFF switch based on radio inputs
\*----------------------------------------------------------------------------*/
.radio-onoff {
    margin-left: 7px;
}

.radio-onoff .radio-item {
    position: relative;
    display: inline-block;
    color: #000a0a;
    cursor: pointer;
}

.radio-onoff .radio-item input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.radio-onoff .radio-item .radio__indicator {
    left: 0;
    display: block;
    height: 46px;
    line-height: 46px;
    color: #000a0a;
    text-align: center;
    border: 1px solid #777777;
    background-color: #ffffff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: box-shadow 0.1s;
    transition: box-shadow 0.1s;
    padding: 0 26px;
    margin-left: -7px;
}

.radio-onoff .radio-item input:checked ~ .radio__indicator {
    background-color: #000a0a;
    color: #ffffff;
}

/*----------------------------------------------------------------------------*\
   Ordinary radio inputs
\*----------------------------------------------------------------------------*/
.radio {
    position: relative;
    display: inline-block;
    padding-left: 28px;
    color: #000a0a;
    cursor: pointer;
    margin-right: 2.5rem;
}

.radio input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.radio label {
    font-size: 16px;
    /* 1 */
    /* 3 */
    line-height: 24px;
    /* 2 */
    /* 3 */
    line-height: 1.09091rem;
}

.radio .radio__indicator {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    /* 1 */
    /* 3 */
    height: 18px;
    /* 2 */
    /* 3 */
    height: 0.81818rem;
    /* 1 */
    /* 3 */
    width: 18px;
    /* 2 */
    /* 3 */
    width: 0.81818rem;
    background-image: url(../images/Svg/radiobutton.svg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: box-shadow 0.1s;
    transition: box-shadow 0.1s;
}

.radio input:checked ~ .radio__indicator {
    background-image: url(../images/Svg/radiobutton_filled.svg);
}

.radio .radio input:focus ~ .radio__indicator {
    box-shadow: 0 0 0 1px #fede0f;
}

/*  $List
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    $SELECT-MENU
    These are styled base on wtfforms techniques: http://wtfforms.com/
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    $Buttons
\*----------------------------------------------------------------------------*/
.button {
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
    /* 1 */
    /* 3 */
    font-size: 16px;
    /* 2 */
    /* 3 */
    font-size: 0.72727rem;
    padding: 0 20px;
    line-height: 46px;
    height: 46px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    -webkit-transition: background 0.1s, color 0.1s;
    transition: background 0.1s, color 0.1s;
    border: none;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.button span {
    white-space: nowrap;
}

.button:after {
    content: "";
    /* 1 */
    /* 3 */
    height: 15px;
    /* 2 */
    /* 3 */
    height: 0.68182rem;
    /* 1 */
    /* 3 */
    width: 7px;
    /* 2 */
    /* 3 */
    width: 0.31818rem;
    display: block;
    position: absolute;
    /* 1 */
    /* 3 */
    top: 17px;
    /* 2 */
    /* 3 */
    top: 0.77273rem;
    /* 1 */
    /* 3 */
    right: 26px;
    /* 2 */
    /* 3 */
    right: 1.18182rem;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Black button, white text, grey hover */
.button--primary {
    color: #ffffff;
    background: #000a0a;
}

.button--primary:hover {
    color: #ffffff;
    background: #1e1e1e;
}

/* White button, black text, black hover */
.button--secondary {
    color: #000a0a;
    background: #ffffff;
    border: 1px solid #000a0a;
}

.button--secondary:hover {
    color: #ffffff;
    background: #000a0a;
}

/* Yellow button, black text, white hover */
.button--brand {
    color: #000a0a;
    background: #fede0f;
    border: 1px solid #fede0f;
}

.button--brand:hover {
    color: #000a0a;
    background: #ffffff;
    border: 1px solid #ffffff;
}

/* Black button (yellow border), white text, white hover */
.button--brand-inverse {
    color: #ffffff;
    background: #000a0a;
    border: 1px solid #fede0f;
}

.button--brand-inverse:hover {
    color: #000a0a;
    background: #fede0f;
}

.button--brand-b-inverse {
    color: #ffffff;
    background: #000a0a;
    border: 1px solid #fede0f;
}

.button--brand-b-inverse:hover {
    color: #000a0a;
    background: #ffd006;
}

/*  $Social
\*----------------------------------------------------------------------------*/
/*  $Tab
\*----------------------------------------------------------------------------*/
/*  $Lazy-load
\*----------------------------------------------------------------------------*/
/*  $Layer modifier
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    $Tile
\*----------------------------------------------------------------------------*/
.tile {
    /* 1 */
    /* 3 */
    margin-bottom: 26px;
    /* 2 */
    /* 3 */
    margin-bottom: 1.18182rem;
    /* 1 */
    /* 3 */
    padding: 26px;
    /* 2 */
    /* 3 */
    padding: 1.18182rem;
    background: #333333;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    box-shadow: 0 3px 0 #282828;
    /* 1 */
    /* 3 */
    border-radius: 8px;
    /* 2 */
    /* 3 */
    border-radius: 0.36364rem;
}

/*----------------------------------------------------------------------------*\
    $Links
\*----------------------------------------------------------------------------*/
a {
    color: #000a0a;
    text-decoration: none;
    border-bottom: 1px solid #777777;
}

a:hover {
    color: #777777;
}

/*  $Arrow
\*----------------------------------------------------------------------------*/
/*  $Layer modifier
\*----------------------------------------------------------------------------*/
.layer--grey-a a:not(.button--primary):not(.button--secondary):not(.button--brand):not(.button--light):not(.button--social),
.layer--grey-b a:not(.button--primary):not(.button--secondary):not(.button--brand):not(.button--light):not(.button--social) {
    color: #777777;
}

.layer--brand-a a:not(.button--primary):not(.button--secondary):not(.button--brand):not(.button--light):not(.button--social) {
    color: #000a0a;
}

/*----------------------------------------------------------------------------*\
    $Divider
\*----------------------------------------------------------------------------*/
.divider {
    position: relative;
    background: #1e1e1e;
    /* 1 */
    /* 3 */
    height: 2px;
    /* 2 */
    /* 3 */
    height: 0.09091rem;
    z-index: 19;
    /* 1 */
    /* 3 */
    margin-top: -1px;
    /* 2 */
    /* 3 */
    margin-top: -0.04545rem;
    /* 1 */
    /* 3 */
    margin-bottom: -1px;
    /* 2 */
    /* 3 */
    margin-bottom: -0.04545rem;
}

.layer.is-hidden + .divider__holder {
    display: none;
}

/*----------------------------------------------------------------------------*\
    $Meta date
\*----------------------------------------------------------------------------*/
.meta-date {
    color: #777777;
    /* 1 */
    /* 3 */
    margin-right: 7px;
    /* 2 */
    /* 3 */
    margin-right: 0.31818rem;
}

/*----------------------------------------------------------------------------*\
    $Meta Category
\*----------------------------------------------------------------------------*/
.meta-category {
    color: #777777;
    /* 1 */
    /* 3 */
    margin-right: 7px;
    /* 2 */
    /* 3 */
    margin-right: 0.31818rem;
}

/*----------------------------------------------------------------------------*\
    $Tooltip
\*----------------------------------------------------------------------------*/
.tt-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><rect fill='transparent' height='16px' width='16px'/><path d='m-0.00585,15.97412l15.99617,0l0,-15.99617l-15.99617,0l0,15.99617zm0.88867,-15.1075l14.21882,0l0,14.21881l-14.21882,0l0,-14.21881z' fill=' black'/><path d='m8.3324,9.8992l-1.79407,0l0,-0.1055c0,-0.3166 0.10553,-0.6332 0.21107,-0.9498c0.10553,-0.3166 0.3166,-0.63323 0.73874,-1.05536l0.42214,-0.52767c0.52772,-0.63321 0.84422,-1.16088 0.84422,-1.68855c0,-0.42214 -0.1055,-0.63321 -0.3165,-0.84427c-0.31665,-0.21107 -0.63326,-0.3166 -1.16093,-0.3166c-0.52767,0 -1.26641,0.10553 -2.11069,0.52767l0,-1.37195c0.42214,-0.10553 0.73874,-0.21107 0.94981,-0.3166c0.21107,0 0.42214,0 0.73874,0c0.21107,-0.10554 0.52767,-0.10554 0.73874,-0.10554c0.94983,0 1.79403,0.21107 2.32173,0.52767c0.5277,0.42214 0.8443,0.94981 0.8443,1.58301c0,0.21107 0,0.42214 -0.1055,0.63321c0,0.21107 -0.1056,0.3166 -0.2111,0.52767c-0.2111,0.21107 -0.4221,0.42214 -0.7387,0.73874l-0.4222,0.3166c-0.3166,0.3166 -0.5277,0.6332 -0.7387,0.94977c-0.1056,0.2111 -0.2111,0.5277 -0.2111,0.9498l0,0.5277l0,0l0,0zm-1.79407,1.1609l1.79407,0l0,1.4775l-1.79407,0l0,-1.4775z' fill=' black'/></svg>");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    cursor: pointer;
}

.tt-icon:hover {
    background-color: #fede0f;
}

.tooltip {
    display: inline-block;
    position: relative;
    width: 19px;
    height: 19px;
    background-image: url(../images/Svg/tool.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    border: 0;
}

.tooltip .content {
    font-size: 14px;
    z-index: 10;
    display: none;
    padding: 26px;
    margin-bottom: 26px;
    left: -115px;
    width: 250px;
}

.tooltip:hover {
    background-color: #fede0f;
    text-decoration: none;
    background-image: url(../images/Svg/tool_hover.svg);
}

.tooltip:hover .content {
    display: inline;
    position: absolute;
    bottom: 0;
    color: #000a0a;
    border: 1px solid #000a0a;
    background: #ffffff;
}

.tooltip .callout {
    z-index: 20;
    position: absolute;
    width: 22px;
    height: 12px;
    left: 45%;
    bottom: -12px;
    border: 0;
    background-image: url(../images/tooltip/tooltip-arrow-bottom.gif);
}

.tooltip .callout.left {
    z-index: 20;
    position: absolute;
    top: 30px;
    left: -12px;
    width: 22px;
    height: 12px;
    border: 0;
    background-image: url(../images/tooltip/tooltip-arrow-left.gif);
}

/*----------------------------------------------------------------------------*\
    $Content header back button
\*----------------------------------------------------------------------------*/
.header .button-back {
    position: absolute;
    left: 0;
    top: 0;
}

.header .button-back > a {
    display: block;
    color: #000a0a;
    background-color: #fede0f;
    height: 70px;
    position: relative;
    width: 250px;
    z-index: 10;
}

.header .button-back > a > div {
    position: absolute;
    top: 18px;
    left: 26px;
}

.header .button-back > a > p {
    position: absolute;
    top: 15px;
    left: 52px;
}

@media only screen and (max-width: 768px) {
    .header .button-back a {
        width: 62px;
    }

    .header .button-back a > div {
        position: absolute;
        top: 18px;
        left: 26px;
    }

    .header .button-back a > p {
        display: none;
    }
}

/*----------------------------------------------------------------------------*\
    $Share links at content header
\*----------------------------------------------------------------------------*/
.button-share {
    position: absolute;
    right: 0;
    top: 0;
}

.button-share a {
    color: #000a0a;
    line-height: 70px;
    margin-right: 26px;
}

/*----------------------------------------------------------------------------*\
    $Detail title
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    $SECTION MORE LINK
\*----------------------------------------------------------------------------*/
.section-more-link {
    text-align: center;
    /* 1 */
    /* 3 */
    padding: 18px;
    /* 2 */
    /* 3 */
    padding: 0.81818rem;
}

.section-more-link a {
    border-bottom: none;
}

.section-more-link a span {
    border-bottom: solid 1px #777777;
}

/*----------------------------------------------------------------------------*\
    $Star rating
\*----------------------------------------------------------------------------*/
.star-rating-wrapper {
    padding-bottom: 5px;
}

.star-rating-wrapper .stars-rating {
    float: left;
    margin: 0 0 0 5px;
    padding-top: 3px;
    list-style-type: none;
    /* 1 */
    /* 3 */
    height: 22px;
    /* 2 */
    /* 3 */
    height: 1rem;
    /* 1 */
    /* 3 */
    line-height: 22px;
    /* 2 */
    /* 3 */
    line-height: 1rem;
}

.star-rating-wrapper .stars-rating li {
    /* 1 */
    /* 3 */
    width: 14px;
    /* 2 */
    /* 3 */
    width: 0.63636rem;
    float: left;
    margin: 0;
    padding: 0;
}

.star-rating-wrapper .stars-rating .star {
    width: 100%;
    height: auto;
    max-width: 14px;
}

.star-rating-wrapper .stars-rating .star path {
    fill: #777777;
}

.star-rating-wrapper .stars-rating .star.star-active path {
    fill: #ff7900;
}

.star-rating-wrapper .average-rate {
    float: left;
    color: #ff7900;
    /* 1 */
    /* 3 */
    font-size: 18px;
    /* 2 */
    /* 3 */
    font-size: 0.81818rem;
    line-height: 1.44444;
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
}

.star-rating-wrapper .reviews-rate {
    float: left;
    color: #0061ac;
    /* 1 */
    /* 3 */
    font-size: 16px;
    /* 2 */
    /* 3 */
    font-size: 0.72727rem;
    line-height: 1.625;
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
    margin-left: 10px;
}

.star-rating-wrapper .star-rating-logo {
    float: left;
    margin-left: 15px;
}

/*----------------------------------------------------------------------------*\
    $Lightbox
\*----------------------------------------------------------------------------*/
.lightbox-sample-page {
    background-color: #ffffff;
}

.mfp-bg {
    background-color: #000000;
    opacity: 0.95;
}

.mfp-content {
    padding-top: 100px;
    position: static;
}

.mfp-custom-close {
    position: absolute;
    width: 80px;
    height: auto;
    margin: 0 0 0 -40px;
    padding: 0.2em;
    cursor: pointer;
    left: 50%;
    top: 46px;
    text-align: center;
    /* 1 */
    /* 3 */
    font-size: 16px;
    /* 2 */
    /* 3 */
    font-size: 0.72727rem;
    line-height: 1.625;
    color: #ffffff;
}

.mfp-custom-close path {
    fill: #ffffff;
}

.mfp-custom-close:hover {
    color: #fede0f;
}

.mfp-custom-close:hover path {
    fill: #fede0f;
}

.lightbox-content {
    width: 750px;
    margin: 0 auto;
}

.lightbox-content h3.titlebar, .lightbox-content .titlebar.h3 {
    /* 1 */
    /* 3 */
    font-size: 26px;
    /* 2 */
    /* 3 */
    font-size: 1.18182rem;
    line-height: 1;
    font-weight: normal;
}

.socials-lightbox {
    max-width: 1000px;
    width: auto;
}

.socials-lightbox h3.titlebar, .socials-lightbox .titlebar.h3 {
    text-align: center;
}

.social-items-lb [class*=pure-u] {
    /* 1 */
    /* 3 */
    padding-top: 40px;
    /* 2 */
    /* 3 */
    padding-top: 1.81818rem;
    text-align: center;
}

.social-item-lb {
    width: 164px;
    height: 164px;
    display: block;
    line-height: 164px;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    text-align: center;
    padding: 0 5px 0 5px;
    background-color: #000;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    margin: 0 auto;
}

.social-item-lb.facebook {
    border-bottom-color: #00539e;
}

.social-item-lb.facebook:hover {
    background-color: #00539e;
}

.social-item-lb.twitter {
    border-bottom-color: #2daae1;
}

.social-item-lb.twitter:hover {
    background-color: #2daae1;
}

.social-item-lb.googleplus {
    border-bottom-color: #d15231;
}

.social-item-lb.googleplus:hover {
    background-color: #d15231;
}

.social-item-lb.mail {
    border-bottom-color: #fede0f;
}

.social-item-lb.mail:hover {
    background-color: #fede0f;
}

.social-item-lb img {
    vertical-align: middle;
}

@media only screen and (max-width: 768px) {
    .social-item-lb {
        width: 124px;
        height: 124px;
        line-height: 124px;
    }
}

.youtube-embed > iframe {
    margin: 0 auto;
    display: block;
}

@media only screen and (max-width: 768px) {
    .youtube-embed > iframe {
        width: 100% !important;
        height: 300px;
        margin: 0 auto;
        display: block;
    }
}

/*----------------------------------------------------------------------------*\
    $EasyResponsiveTabs
	Based on https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
\*----------------------------------------------------------------------------*/
.responsive-tabs-wrapper {
    color: #000a0a;
    background-color: #ffffff;
    padding: 26px 0;
}

.responsive-tabs-wrapper .resp-tabs-list {
    display: table;
    width: 100%;
}

.responsive-tabs-wrapper .resp-tabs-list .resp-tab-item {
    display: table-cell;
    float: none;
    border: 1px solid #cccccc;
    border-left: 0;
    width: auto;
    text-align: center;
    font-size: 16px;
}

.responsive-tabs-wrapper .resp-tabs-list .resp-tab-item.resp-tab-active {
    border-bottom: 0;
}

.responsive-tabs-wrapper .resp-tabs-list .resp-tab-item:first-child {
    border-left: 1px solid #cccccc;
}

.responsive-tabs-wrapper .resp-tab-content {
    border: 0;
}

.responsive-tabs-wrapper .resp-tabs-container .resp-accordion {
    font-size: 18px;
    border-top: 1px solid #cccccc !important;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
}

.responsive-tabs-wrapper .resp-tabs-container .resp-accordion.resp-tab-active {
    background: #ffffff !important;
    border-bottom: 1px solid #cccccc !important;
}

.responsive-tabs-wrapper .resp-tabs-container .resp-accordion.resp-tab-active .resp-arrow {
    background-image: url(../images/Svg/arrow_down.svg);
}

.responsive-tabs-wrapper .resp-tabs-container .resp-accordion .resp-arrow {
    float: left;
    width: 23px;
    height: 18px;
    border: 0;
    background-image: url(../images/Svg/arrow_right.svg);
    background-repeat: no-repeat;
    background-position: 0 50%;
}

.responsive-tabs-wrapper .resp-tabs-container .resp-accordion:last-child {
    border-bottom: 1px solid #cccccc !important;
}

.responsive-tabs-wrapper.faq .resp-tabs-container .resp-accordion .resp-arrow {
    float: right;
    width: 23px;
    height: 18px;
    border: 0;
    background-image: url(../images/Svg/arrow_up.svg);
    background-repeat: no-repeat;
    background-position: 0 50%;
}

.responsive-tabs-wrapper.faq .resp-tabs-container .resp-accordion.resp-tab-active .resp-arrow {
    background-image: url(../images/Svg/arrow_down.svg);
}

@media only screen and (max-width: 768px) {
    .responsive-tabs-wrapper .resp-tabs-list {
        display: none;
    }
}

/*  Molecules
    Molecules are groups of elements that function together as a unit. (for
    example a search form molecule)
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    $Header switch links
\*----------------------------------------------------------------------------*/
.switch-bar {
    background-color: #282828;
    /* dark-grey */
    height: 30px;
    line-height: 30px;
    min-width: 260px;
    font-size: 14px;
}

.switch-bar a {
    color: #777777;
    text-decoration: none;
    border: 0;
    margin-left: 0.8rem;
}

.switch-bar a.active {
    color: #fede0f;
}

@media only screen and (max-width: 768px) {
    .switch-bar {
        margin-right: -48px;
    }

    .switch-bar > a {
        margin-left: 0.3rem;
    }
}

/*----------------------------------------------------------------------------*\
    $Hamburger menu
\*----------------------------------------------------------------------------*/
.menu-wrapper .menu-handle {
    display: block;
    position: relative;
    max-width: 200px;
    height: 78px;
    line-height: 72px;
    cursor: pointer;
    text-indent: -9999px;
    font-size: 16px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.menu-wrapper .menu-handle .hamburger-menu {
    float: left;
    height: 18px;
    width: 26px;
    background-image: url(../images/Svg/hamburger-white.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 26px 13px 26px 26px;
}

.menu-wrapper .menu-handle:hover {
    color: #fede0f;
}

.menu-wrapper .menu-handle:hover .hamburger-menu {
    background-image: url(../images/Svg/hamburger-yellow.svg);
}

.menu-wrapper .menu-slide-out {
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 0;
    overflow: hidden;
    color: #000;
    background-color: #fff;
    border-bottom: 1px solid black;
    z-index: 11;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.menu-wrapper .trigger-checkbox:checked ~ .menu-slide-out {
    height: auto;
}

.menu-wrapper .trigger-checkbox:checked ~ label {
    color: #fede0f;
}

.menu-wrapper .trigger-checkbox:checked ~ label .hamburger-menu {
    background-image: url(../images/Svg/cross-yellow.svg);
}

.menu-wrapper .menu-slide-wrapper {
    margin: 2rem 8rem 0 8rem;
    line-height: 2rem;
    min-width: 3rem;
}

.menu-wrapper .menu-slide-wrapper .nav {
    margin: 0 0 2.2rem 0;
}

.menu-wrapper .menu-slide-wrapper .nav .nav-item {
    line-height: 1.6rem;
    margin: 0;
    padding: 0;
}

.menu-wrapper .menu-slide-wrapper .nav .nav-item > a {
    font-size: 18px;
    color: #000;
    text-decoration: none;
    margin-bottom: 0.3rem;
}

@media only screen and (max-width: 768px) {
    .menu-wrapper .menu-slide-out {
        top: 70px;
    }

    .menu-wrapper .menu-slide-wrapper {
        margin: 1rem;
    }
}

@media only screen and (min-width: 769px) {
    .menu-wrapper .menu-handle {
        text-indent: 0;
    }
}

/*----------------------------------------------------------------------------*\
    $Logo
\*----------------------------------------------------------------------------*/
.header-logo {
    width: 135px;
    height: 70px;
    margin: 0 auto;
    position: relative;
}

.header-logo > a {
    display: block;
    border: 0;
}

.header-logo > a > .subtitle {
    display: none;
    position: absolute;
    top: 0;
    left: 135px;
    width: 11rem;
    height: 70px;
    line-height: 72px;
    padding-left: 12px;
    color: #ffffff;
}

@media only screen and (min-width: 961px) {
    .header-logo {
        width: 400px;
    }

    .header-logo > a > .subtitle {
        display: block;
        position: absolute;
        top: 0;
        left: 135px;
        width: 11rem;
        height: 70px;
        line-height: 72px;
        padding-left: 12px;
        color: #ffffff;
    }
}

/*----------------------------------------------------------------------------*\
    $Site search menu
\*----------------------------------------------------------------------------*/
.site-search-wrapper {
    min-width: 65px;
}

.site-search-wrapper .site-search-handle {
    display: block;
    position: relative;
    max-width: 200px;
    height: 70px;
    line-height: 70px;
    cursor: pointer;
    text-indent: -9999px;
    font-size: 1em;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.site-search-wrapper .site-search-handle .search-icon {
    float: left;
    height: 18px;
    width: 18px;
    background-image: url(../images/Svg/search-white.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 26px;
}

.site-search-wrapper .site-search-handle:hover {
    color: #fede0f;
}

.site-search-wrapper .site-search-handle:hover .search-icon {
    background-image: url(../images/Svg/search-yellow.svg);
}

.site-search-wrapper .search-menu-slide-out {
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 0;
    overflow: hidden;
    color: #000;
    background-color: #fff;
    border-bottom: 1px solid black;
    opacity: 0;
    visibility: hidden;
    z-index: 11;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.site-search-wrapper .trigger-checkbox:checked ~ .search-menu-slide-out {
    height: auto;
    opacity: 1;
    visibility: visible;
}

.site-search-wrapper .trigger-checkbox:checked ~ label {
    color: #fede0f;
}

.site-search-wrapper .trigger-checkbox:checked ~ label .search-icon {
    background-image: url(../images/Svg/cross-yellow.svg);
}

.site-search-wrapper .search-menu-slide-wrapper {
    margin: 26px;
    font-size: 22px;
}

.site-search-wrapper .search-menu-slide-wrapper form {
    width: 100%;
}

.site-search-wrapper .search-menu-slide-wrapper form .search-wrapper {
    border-bottom: 4px solid #000a0a;
    position: relative;
    height: 60px;
    width: 60%;
    margin: 0 auto;
}

.site-search-wrapper .search-menu-slide-wrapper form .search-wrapper .site-search-input {
    float: left;
    width: 100%;
    height: 46px;
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 22px;
    background: #ffffff;
}

.site-search-wrapper .search-menu-slide-wrapper form .search-wrapper .site-search-submit {
    float: left;
    border: 0;
    margin: 0;
    padding: 0;
    height: 46px;
    width: 62px;
    margin-left: -62px;
    text-indent: -9999px;
    background: #ffffff url(../images/Svg/search-black.svg) no-repeat 50% 50%;
}

.site-search-wrapper .search-menu-slide-wrapper form .search-wrapper .site-search-submit:hover {
    background: #ffffff url(../images/Svg/search-yellow.svg) no-repeat 50% 50%;
}

@media only screen and (max-width: 768px) {
    .site-search-wrapper .search-menu-slide-out {
        top: 70px;
    }

    .site-search-wrapper .search-menu-slide-wrapper {
        min-width: 250px;
    }

    .site-search-wrapper .search-menu-slide-wrapper form .search-wrapper {
        width: 95%;
    }
}

/*----------------------------------------------------------------------------*\
    $Header switch links
\*----------------------------------------------------------------------------*/
#footer .to-top-bar {
    display: block;
    background-color: #282828;
    color: #fff;
    text-align: center;
    position: relative;
}

#footer .to-top-bar a {
    width: 100%;
    height: 60px;
    display: block;
    border: 0;
    color: #cccccc;
    outline: 0;
    line-height: 60px;
}

#footer .to-top-bar a:focus {
    box-shadow: 0px 0px 1px 1px #fede0f;
}

/*----------------------------------------------------------------------------*\
    $Footer navigation bar
\*----------------------------------------------------------------------------*/
#footer .navigation-bar {
    background-color: #000a0a;
    font-size: 16px;
    line-height: 28px;
}

#footer .navigation-bar ul {
    list-style: none;
    margin-left: 0;
}

#footer .navigation-bar ul li {
    padding: 0;
    margin: 0;
}

#footer .navigation-bar p, #footer .navigation-bar a {
    color: #C3C3C1;
    line-height: 28px;
    margin: 0;
}

#footer .navigation-bar .remeha-logo-small {
    float: left;
    text-indent: -9999px;
    background: transparent url(../images/Remeha/sprite-remeha.png) -1px -1px no-repeat;
    width: 34px;
    height: 21px;
    border: 0;
    margin: 0;
}

#footer .navigation-bar .footer-social-links .icons {
    margin: 13px 0 0;
}

#footer .navigation-bar .footer-social-links .icons a {
    margin-right: 7px;
}

#footer .navigation-bar .footer-newsletter input {
    font-size: 16px;
    width: 80%;
}

#footer .navigation-bar .footer-mobile {
    font-size: 16px;
    padding: 1rem;
}

#footer .navigation-bar .footer-mobile > ul {
    margin: 0 0 1rem 0;
}

#footer .navigation-bar .footer-mobile > ul a {
    border: 0;
}

#footer .navigation-bar .footer-mobile .social-wrapper {
    margin: 1rem auto 0;
    display: block;
    width: 154px;
}

#footer .navigation-bar .footer-mobile .social-wrapper a {
    margin: 1rem 0.3rem;
}

.social {
    float: left;
    text-indent: -9999px;
    background: transparent url(../images/Remeha/sprite-social-media.png) -1px -1px no-repeat;
    width: 37px;
    height: 37px;
    border: 0;
    margin: 0 0.3rem 0.3rem 0;
}

.social.facebook {
    background-position: -1px -1px;
}

.social.facebook:hover {
    background-position: -1px -39px;
}

.social.twitter {
    background-position: -40px -1px;
}

.social.twitter:hover {
    background-position: -40px -39px;
}

.social.youtube {
    background-position: -79px -1px;
}

.social.youtube:hover {
    background-position: -79px -39px;
}

/*----------------------------------------------------------------------------*\
    $Header switch links
\*----------------------------------------------------------------------------*/
#footer .legal-bar {
    font-size: 0.85rem;
    max-height: 50px;
    height: 50px;
    font-size: 14px;
}

#footer .legal-bar .legal-logo {
    margin: 0 auto;
    width: 240px;
}

#footer .legal-bar .legal-links {
    float: right;
}

#footer .legal-bar .legal-links ul {
    list-style: none;
    margin: 0;
}

#footer .legal-bar .legal-links li {
    float: left;
    line-height: 50px;
}

#footer .legal-bar .legal-links li a {
    color: #777777;
    border: 0;
    margin: 0 8px;
}



/*----------------------------------------------------------------------------*\
    Product overview
\*----------------------------------------------------------------------------*/
.usp-block {
    padding: 26px;
    overflow: hidden;
}

.usp-block p {
    font-size: 20px;
    margin: 0 20px 20px 0;
}

.usp-block .row-wrapper {
    font-size: 18px;
}

.usp-wrapper {
    margin: 39px 0;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

.usp-wrapper .button-find-installer {
    margin-bottom: 26px;
}

/*----------------------------------------------------------------------------*\
    Product overview
\*----------------------------------------------------------------------------*/
.comments-container-block .comments .comment-holder-header {
    border: 1px solid #cccccc;
    background-color: #f6f6f6;
    padding: 26px;
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
    font-weight: 600;
}

.comments-container-block .comments-form {
    padding: 26px;
    border: 1px solid #cccccc;
    min-width: 230px;
}

.comments-container-block .comments-form .field-wrapper {
    display: inline-block;
    padding: 0 13px 13px 0;
    margin: 0;
}

.comments-container-block .comments-form .field-wrapper.large {
    width: 100%;
    min-width: 8rem;
}

.comments-container-block .comments-form .field-wrapper.large input {
    width: 100%;
    min-width: 8rem;
}

.comments-container-block .comments-form .field-wrapper.message {
    width: 100%;
    min-width: 8rem;
}

.comments-container-block .comments-form .field-wrapper.message textarea {
    width: 100%;
    min-width: 8rem;
}

.comments-container-block .comments-form .field-wrapper label, .comments-container-block .comments-form .field-wrapper input {
    margin-bottom: 8px;
}

.comments-container-block .comments-form .field-wrapper .button {
    margin: 0 13px 13px 0;
}

@media only screen and (max-width: 768px) {
    .comments-container-block .comments-form .contact-form-wrapper .form-intro {
        width: 90%;
    }

    .comments-container-block .comments-form .contact-form-wrapper .field-wrapper.mini {
        width: 30%;
    }

    .comments-container-block .comments-form .contact-form-wrapper .field-wrapper.small {
        width: 50%;
    }

    .comments-container-block .comments-form .contact-form-wrapper .field-wrapper.medium {
        width: 100%;
    }

    .comments-container-block .comments-form .contact-form-wrapper .field-wrapper.large {
        width: 100%;
    }

    .comments-container-block .comments-form .contact-form-wrapper .field-wrapper.message {
        width: 100%;
    }

    .comments-container-block .comments-form .contact-form-wrapper .field-wrapper input {
        width: 100%;
    }

    .comments-container-block .comments-form .contact-form-wrapper .field-wrapper textarea {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
}

/*----------------------------------------------------------------------------*\
    Product overview
\*----------------------------------------------------------------------------*/
.share-bar {
    min-height: 70px;
    margin: 0 0 26px 0;
}

.share-bar ul {
    margin: 0;
}

.share-bar ul li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    border: 1px solid #cccccc;
    margin-bottom: -1px;
    margin-left: -1px;
}

.share-bar ul li .text {
    float: left;
    padding: 0 26px;
    line-height: 70px;
    height: 68px;
}

.share-bar ul li a {
    display: block;
    height: 68px;
    border: 0;
    border-right: 1px solid #cccccc;
    padding: 0 20px;
}

.share-bar ul li a span {
    display: none;
    float: left;
    font-size: 16px;
    margin: 25px 0 0 0;
}

.share-bar ul li a .icon {
    float: left;
    width: 37px;
    height: 37px;
    background-image: url(../images/Remeha/sprite-social-media.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    margin: 15px 0 0 0;
    padding: 0;
    line-height: 68px;
}

.share-bar ul li a .icon.icon-facebook {
    background-position: -158px -2px;
}

.share-bar ul li a .icon.icon-twitter {
    background-position: -196px -2px;
}

.share-bar ul li a .icon.icon-googleplus {
    background-position: -120px -2px;
}

.share-bar ul li a:hover span {
    color: #ffffff;
    display: block;
}

.share-bar ul li a:hover .icon.icon-facebook {
    background-position-y: -39px;
}

.share-bar ul li a:hover .icon.icon-twitter {
    background-position-y: -39px;
}

.share-bar ul li a:hover .icon.icon-googleplus {
    background-position-y: -39px;
}

.share-bar ul li a.button-facebook:hover {
    -webkit-transition-delay: 0;
    transition-delay: 0;
    background-color: #00539e;
}

.share-bar ul li a.button-twitter:hover {
    -webkit-transition-delay: 0;
    transition-delay: 0;
    background-color: #2daae1;
}

.share-bar ul li a.button-googleplus:hover {
    -webkit-transition-delay: 0;
    transition-delay: 0;
    background-color: #d15231;
}

@media only screen and (max-width: 768px) {
    .share-bar ul li a:hover span {
        display: none !important;
        visibility: hidden;
        opacity: 0;
    }
}

/*  Organisms
    Organisms are groups of molecules (and possibly atoms) joined together to
    form distinct section of an interface. (for example a masthead organism)
\*----------------------------------------------------------------------------*/
.main-menu-wrapper {
    height: 70px;
    min-height: 70px;
    background-color: #000a0a;
}

.header .header-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 65px;
}

.header .header-text h3, .header .header-text .h3 {
    line-height: 70px;
}

@media only screen and (max-width: 768px) {
    .header .header-text {
        position: relative;
    }
}

.page-content-header {
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #eeeeee;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.page-content-header .header-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.page-content-header .header-text.back {
    margin-left: 225px;
}

.page-content-header .header-text h3, .page-content-header .header-text .h3 {
    line-height: 70px;
}

.page-content-header .button-back {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.page-content-header .button-back > a {
    display: block;
    color: #000a0a;
    background-color: #fede0f;
    height: 70px;
    position: relative;
    width: 250px;
}

.page-content-header .button-back > a > div {
    position: absolute;
    top: 18px;
    left: 26px;
}

.page-content-header .button-back > a > p {
    position: absolute;
    top: 15px;
    left: 52px;
}

.page-content-header .button-share {
    position: absolute;
    right: 0;
    top: 0;
}

.page-content-header .button-share a {
    color: #000a0a;
    line-height: 70px;
    margin-right: 26px;
}

@media only screen and (max-width: 768px) {
    .page-content-header .header-text.back {
        margin-left: 65px;
    }

    .page-content-header .button-back a {
        width: 65px;
    }

    .page-content-header .button-back a p {
        display: none;
        visibility: hidden;
    }
}

/*----------------------------------------------------------------------------*\
    $Footer
\*----------------------------------------------------------------------------*/
.contact-block {
    display: block;
    text-align: center;
    background-color: #333333;
    padding: 26px;
}

.contact-block .contact {
    float: left;
    width: 100%;
    position: relative;
    border: 0;
}

.contact-block .contact h3, .contact-block .contact .h3 {
    margin: 1.2rem 0 0.5rem;
}

.contact-block .contact p {
    margin: 0.5rem 0 1.5rem;
}

.contact-block .contact .button {
    margin-bottom: 13px;
}

.contact-block-installer {
    display: table;
    width: 100%;
    line-height: 24px;
}

.contact-block-installer .wrapper {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.contact-block-installer .wrapper p {
    line-height: 26px;
}

.contact-block-installer .wrapper .report-issue-link {
    color: #ffffff;
}

.contact-block-installer span {
    font-size: 18px;
    line-height: 46px;
}

@media only screen and (max-width: 768px) {
    .contact-block-installer .wrapper p {
        margin-bottom: 0.5rem;
    }
}

.history-block .text h3, .history-block .text .h3, .history-block .text h5, .history-block .text .h5 {
    font-family: "Gotham SSm A", "Gotham SSm B", "Arial", "Helvetica", sans-serif;
}

.history-block .text p {
    font-size: 16px;
}

.testimonials-content-wrapper {
    width: 75%;
    margin: 0 auto;
    height: 226px;
    max-height: 226px;
}

@media only screen and (min-width: 961px) {
    .testimonials-content-wrapper {
        width: 65%;
    }
}

@media only screen and (max-width: 768px) {
    .testimonials-content-wrapper {
        width: 90%;
    }
}

.testimonials-block {
    display: block;
    position: relative;
    background-color: #333333;
    background-image: url(../images/Remeha/bg-testimonials.jpg);
    background-size: cover;
    padding: 2.5rem 0 0;
}

.testimonials-block .content {
    background-color: #fff;
    height: 155px;
    max-height: 155px;
    text-align: center;
    padding: 26px;
    overflow: hidden;
}

.testimonials-block .content > div {
    vertical-align: middle;
    position: relative;
    max-height: 5rem;
    overflow: hidden;
}

.testimonials-block .testimonials-inner {
    margin: 0 auto;
    display: block;
}

.testimonials-block .testimonials-inner .owl-controls {
    margin: 10px 15px 0 0;
}

.testimonials-block .testimonials-inner .owl-controls .owl-nav {
    display: none;
}

.testimonials-block .testimonials-inner .header {
    border: 0;
    margin: 0;
}

.testimonials-block .header {
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #eeeeee;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.testimonials-block .content p {
    color: #000a0a;
    font-size: 16px;
    line-height: 1rem;
}

.testimonials-block .footer {
    min-height: 36px;
    height: 36px;
}

.testimonials-block .footer .rating {
    float: right;
    max-height: 36px;
    display: inline-block;
    width: 125px;
}

.testimonials-block .footer .rating .stars-rating {
    margin: 0 auto;
    list-style-type: none;
    height: 36px;
    line-height: 36px;
    margin-left: 18px;
}

.testimonials-block .footer .rating .stars-rating li {
    float: left;
    width: 18px;
    margin: 0;
    padding: 0;
}

.testimonials-block .footer .rating .stars-rating .star {
    width: 14px;
    height: 14px;
    margin: 0 2px;
}

.testimonials-block .footer .rating .stars-rating .star path {
    fill: #ffd006;
}

.testimonials-block .footer .rating .stars-rating .star.star-active path {
    fill: #000a0a;
}

.testimonials-block .footer .name-date {
    float: right;
    display: inline-block;
    height: 36px;
    min-height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 16px;
    padding: 0 13px;
    white-space: nowrap;
}

/********************************************
 * Marketing block MEDIUM
 ********************************************/
.marketing-block {
    position: relative;
    overflow: hidden;
}

.marketing-block > a {
    display: block;
    border: 0;
}

.marketing-block > a .content-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    padding: 0 52px;
}

.marketing-block > a .content-wrapper > h1, .marketing-block > a .content-wrapper > .h1 {
    margin: 0;
    line-height: 2rem;
}

.marketing-block > a .content-wrapper > p {
    margin: 0;
    line-height: 1rem;
}

.marketing-block > a .content-left {
    margin-right: 50%;
}

.marketing-block > a .content-right {
    margin-left: 50%;
}

.marketing-block > a > .content {
    display: table;
    width: 100%;
}

.marketing-block > a > .content-hover {
    display: table;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.marketing-block > a > .content-hover .button {
    margin: 0 auto;
    position: relative;
}

.marketing-block > a > .content-hover .button .icon-wrapper {
    position: absolute;
    top: 5px;
}

.marketing-block > a > .content-hover .button .icon-margin {
    margin-left: 35px;
}

.marketing-block > a > .content-hover .button:hover.button--secondary {
    background-color: #ffffff;
    color: #000a0a;
}

.marketing-block > a:hover > .content-hover {
    opacity: 1;
    visibility: visible;
}

.marketing-block > a:hover > .content-hover .content-wrapper {
    text-align: center;
}

.marketing-block > a:hover > .content-hover .content-wrapper > h2, .marketing-block > a:hover > .content-hover .content-wrapper > .h2 {
    margin: 0 0 0.3rem;
    line-height: 2rem;
}

.marketing-block > a:hover > .content-hover .content-wrapper > p {
    margin: 0 auto;
    font-size: 18px;
    margin-bottom: 1.5rem;
}

.marketing-block > a > .background-hover {
    opacity: 0;
    visibility: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.marketing-block > a:hover > .background-hover {
    opacity: 0.95;
    visibility: visible;
}

/********************************************
 * Marketing block LARGE
 ********************************************/
.marketing-block.large > a > .content .content-wrapper {
    text-align: center;
}

.marketing-block.large > a > .content .content-wrapper > h1, .marketing-block.large > a > .content .content-wrapper > .h1 {
    margin: 0;
    line-height: 2rem;
}

.marketing-block.large > a > .content .content-wrapper > p {
    color: #000a0a;
}

.marketing-block.large > a > .background-hover {
    background-color: #333333;
}

@media only screen and (max-width: 768px) {
    .marketing-block > a .content-wrapper {
        padding: 7px 0 7px 7px;
    }

    .marketing-block > a:hover > .content-hover .content-wrapper > p {
        margin-bottom: 0.5rem;
    }
}

/********************************************
 * Find an installer block
 ********************************************/
.find-installer-block {
    position: relative;
    overflow: hidden;
    display: table;
    width: 100%;
}

.find-installer-block .wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    max-height: 225px;
    padding: 0 52px;
}

.find-installer-block .wrapper > h3, .find-installer-block .wrapper > .h3 {
    margin: 0;
}

.find-installer-block .wrapper > p {
    margin: 0 0 0.8rem;
}

.find-installer-block .wrapper > input {
    color: #ffffff;
    margin: 0 auto 0.6rem;
    width: 14rem;
    max-width: 90%;
}

@media only screen and (max-width: 768px) {
    .find-installer-block .wrapper {
        padding: 0;
    }
}

.cv-check-block .find-installer-block {
    color: #000a0a;
}

.cv-check-block .find-installer-block input.dark {
    border-color: #000a0a;
    color: #000a0a;
}

/********************************************
 * Product carousel
 * TODO: show prev/next items faded
 ********************************************/
.product-carousel-block {
    display: block;
    height: inherit;
    width: 100%;
    background-image: -webkit-radial-gradient(50% 50%, circle closest-side, #333333 50%, #1e1e1e 100%);
    background-image: radial-gradient(50% 50%, circle closest-side, #333333 50%, #1e1e1e 100%);
}

.product-carousel-block .content-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.product-carousel-block .content-wrapper .content-inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.product-carousel-block .content-wrapper .content-inner .owl-carousel {
    margin-top: 100px;
}

.product-carousel-block .content-wrapper .content-inner .item {
    display: inline-block;
}

.product-carousel-block .content-wrapper .content-inner .item > .img {
    width: inherit;
    margin: 0 auto;
    min-width: 400px;
    position: relative;
}

.product-carousel-block .content-wrapper .content-inner .item > .img > img {
    width: auto !important;
    margin: 0 auto;
}

.product-carousel-block .content-wrapper .content-inner .item > .title {
    width: inherit;
    margin: 0 auto;
    opacity: 0;
    min-width: 400px;
}

.product-carousel-block .content-wrapper .content-inner .item > .title > h4, .product-carousel-block .content-wrapper .content-inner .item > .title > .h4 {
    margin: 0;
}

.product-carousel-block .content-wrapper .content-inner .owl-item {
    opacity: 0.5;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.product-carousel-block .content-wrapper .content-inner .owl-item.active {
    opacity: 1;
}

.product-carousel-block .content-wrapper .content-inner .owl-item.active .title {
    opacity: 1;
}

.product-carousel-block .content-wrapper .content-inner .owl-controls .owl-nav > div {
    position: absolute;
    top: 120px;
    width: 13%;
    margin: 0;
    padding: 6px;
    border-radius: 0;
    background: none;
    height: 40px;
    line-height: 40px;
}

.product-carousel-block .content-wrapper .content-inner .owl-controls .owl-nav .owl-prev {
    left: 0;
    text-align: right;
}

.product-carousel-block .content-wrapper .content-inner .owl-controls .owl-nav .owl-next {
    right: 0;
    text-align: left;
}

.product-carousel-block .content-wrapper .content-inner .owl-controls .owl-dots {
    text-align: right;
    padding: 10px 0 0;
}

.product-carousel-block .content-wrapper .content-inner .owl-controls .owl-dots .owl-dot span {
    background: #333333;
}

.product-carousel-block .content-wrapper .content-inner .owl-controls .owl-dots .owl-dot.active span {
    background: #fede0f;
}

/********************************************
 * CV ketel block
 ********************************************/
.cv-check-block {
    background-color: #fede0f;
    color: #ffffff;
}

.cv-check-block .content-wrapper {
    display: table;
    width: 100%;
}

.cv-check-block .content-wrapper .content {
    display: inline-block;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.cv-check-block .content-wrapper .content h3, .cv-check-block .content-wrapper .content .h3 {
    margin: 0;
}

.cv-check-block .content-wrapper .content > .button-wrapper {
    margin: 0.5rem;
}

.cv-check-block .content-wrapper .content > p:last-child {
    margin: 0;
}

/********************************************
 * Find an installer block
 ********************************************/
.facebook-feed-block {
    background-color: #00539e;
    position: relative;
    overflow: hidden;
}

.facebook-feed-block .content-wrapper {
    display: table;
    width: 100%;
}

.facebook-feed-block .content-wrapper .content {
    display: inline-block;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 0 26px;
}

.facebook-feed-block .link-facebook {
    display: block;
    position: absolute;
    color: #ffffff;
    background-color: #003d74;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    border: 0;
    padding-top: 5px;
    line-height: 45px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.facebook-feed-block .link-facebook > img {
    display: block;
    opacity: 1;
    margin: 6px auto;
}

.facebook-feed-block .link-facebook > span {
    padding: 0 20px;
    display: none;
    opacity: 0;
    font-size: 18px;
}

.facebook-feed-block .link-facebook:hover {
    width: auto;
}

.facebook-feed-block .link-facebook:hover > img {
    display: none;
    opacity: 0;
}

.facebook-feed-block .link-facebook:hover > span {
    display: block;
    opacity: 1;
}

.facebook-feed-block .timestamp {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    line-height: 45px;
    text-align: right;
    font-style: italic;
}

/********************************************
 * Find an installer block
 ********************************************/
.product-rating-block {
    position: relative;
    overflow: hidden;
    background-color: #eaeaea;
}

.product-rating-block .content-wrapper {
    display: inline-block;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 0 26px;
    position: relative;
}

.product-rating-block .content {
    display: table;
    width: 100%;
}

.product-rating-block .content .image-wrapper {
    display: inline-block;
    position: relative;
}

.product-rating-block .content > .product-score {
    background: #000a0a;
    position: absolute;
    width: 70px;
    height: 70px;
    line-height: 70px;
    top: 0;
    right: 0;
    text-align: center;
}

.product-rating-block .content > .product-score > .score-fraction {
    vertical-align: super;
}

.product-rating-block > .background-hover {
    background-color: #f6f6f6;
    opacity: 0;
    visibility: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.product-rating-block:hover > .background-hover {
    opacity: 0.9;
    visibility: visible;
}

.product-rating-block > .content-hover {
    display: table;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.product-rating-block > .content-hover h3, .product-rating-block > .content-hover .h3 {
    margin: 0;
}

.product-rating-block > .content-hover > .button {
    margin: 0 auto;
}

.product-rating-block:hover > .content-hover {
    opacity: 1;
    visibility: visible;
}

.product-rating-block:hover > .content-hover .content-wrapper {
    text-align: center;
}

/* -------------------------------------------------------------------------------------------*/
.installer-help-tool-block {
    display: table;
    text-align: center;
    position: relative;
    width: 100%;
}

.installer-help-tool-block > div {
    display: table-cell;
    vertical-align: middle;
}

.installer-help-tool-block .video {
    overflow: hidden;
}

.installer-help-tool-block .content .titleWrapper {
    max-width: 80%;
    margin: 9.5rem auto 0;
}

@media only screen and (max-width: 768px) {
    .installer-help-tool-block .content .titleWrapper {
        max-width: 95%;
        margin: 3.5rem auto 0;
        min-width: 250px;
    }

    .installer-help-tool-block .content .titleWrapper h1, .installer-help-tool-block .content .titleWrapper .h1 {
        font-size: 40px;
    }
}

.installer-help-tool-block .content p {
    visibility: visible;
}

.installer-help-tool-block .overlay .trigger-installer-help {
    display: none;
}

@media only screen and (max-width: 768px) {
    .installer-help-tool-block .overlay .button-wrapper {
        margin-top: 318px;
    }
}

.installer-help-tool-block .overlay .button-wrapper {
    margin-top: 418px;
}

.installer-help-tool-block .overlay .button-wrapper .search-field {
    display: inline-block;
    height: 70px;
    width: 35%;
    color: #777777;
    border: 1px solid #fede0f;
    font-size: 26px;
    background-color: rgba(0, 0, 0, 0.4);
}

.installer-help-tool-block .overlay .button-wrapper .search-button {
    margin-bottom: 26px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    height: 70px;
    line-height: 70px;
    border: 1px solid #fede0f;
    text-align: center;
    padding-right: 52px;
}

.installer-help-tool-block .overlay .button-wrapper .search-button > span {
    display: block;
    position: relative;
}

.installer-help-tool-block .overlay .button-wrapper .search-button > span .button-text text-align:center
.off {
    display: inline;
}

.installer-help-tool-block .overlay .button-wrapper .search-button > span .button-text .on {
    display: none;
}

.installer-help-tool-block .overlay .button-wrapper .search-button > span span.icon {
    position: absolute;
    right: -32px;
    top: 26px;
}

.installer-help-tool-block .overlay .button-wrapper .search-button > span span.icon--arrow-down {
    opacity: 1;
}

.installer-help-tool-block .overlay .button-wrapper .search-button > span span.icon--cross {
    opacity: 0;
}

.installer-help-tool-block .overlay .trigger-installer-help:checked ~ .button-wrapper .search-field {
    display: none;
}

.installer-help-tool-block .overlay .trigger-installer-help:checked ~ .button-wrapper .search-button {
    width: 100%;
}

.installer-help-tool-block .overlay .trigger-installer-help:checked ~ .button-wrapper .search-button .button-text .off {
    display: none;
}

.installer-help-tool-block .overlay .trigger-installer-help:checked ~ .button-wrapper .search-button .button-text .on {
    display: inline;
}

.installer-help-tool-block .overlay .trigger-installer-help:checked ~ .button-wrapper .search-button:hover {
    background-color: #fede0f;
}

.installer-help-tool-block .overlay .trigger-installer-help:checked ~ .button-wrapper .search-button .icon--arrow-down {
    opacity: 0;
}

.installer-help-tool-block .overlay .trigger-installer-help:checked ~ .button-wrapper .search-button .icon--cross {
    opacity: 1;
}

.installer-help-tool-block .overlay .trigger-installer-help:checked ~ .help-slide-out {
    height: auto;
    opacity: 1;
}

.installer-help-tool-block .overlay .help-slide-out {
    position: absolute;
    top: 488px;
    left: 0;
    background-color: #ffffff;
    width: 100%;
    text-align: center;
    z-index: 10;
    overflow: hidden;
    border-bottom: 1px solid #000;
    height: 0;
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.installer-help-tool-block .overlay .help-slide-out .search-field {
    position: relative;
    width: 100%;
    margin-top: 26px;
}

.installer-help-tool-block .overlay .help-slide-out .search-field .search-field-wrapper {
    margin: 0 auto;
    height: 50px;
}

.installer-help-tool-block .overlay .help-slide-out .search-field .search-field-wrapper .search-box {
    display: inline-block;
    width: 40%;
}

.installer-help-tool-block .overlay .help-slide-out .search-field .search-field-wrapper .search-button {
    margin-left: 26px;
}

.installer-help-tool-block .overlay .help-slide-out .directly-to-buttons {
    position: relative;
    margin: 26px 0;
}

.installer-help-tool-block .overlay .help-slide-out .directly-to-buttons a {
    width: 235px;
    margin: 0 13px 26px;
}

@media only screen and (max-width: 768px) {
    .installer-help-tool-block .overlay .help-slide-out .directly-to-buttons a {
        float: none;
        margin: 0 7px 26px 7px;
    }
}

.installer-help-tool-block .overlay .help-slide-out .to-product-wrapper {
    margin: 26px auto;
}

@media only screen and (max-width: 768px) {
    .installer-heating-selection-tool-block .content p {
        visibility: hidden;
    }
}

/* -------------------------------------------------------------------------------------------*/
.consumer-help-tool-block {
    display: table;
    text-align: center;
    position: relative;
    width: 100%;
}

.consumer-help-tool-block > div {
    display: table-cell;
    vertical-align: middle;
}

.consumer-help-tool-block .video {
    overflow: hidden;
}

.consumer-help-tool-block .video-overlay {
    background-color: #000a0a;
    opacity: 0.2;
}

.consumer-help-tool-block .content .titleWrapper {
    max-width: 60%;
    margin: 9.5rem auto 0;
}

@media only screen and (max-width: 768px) {
    .consumer-help-tool-block .content .titleWrapper {
        max-width: 95%;
        margin: 3.5rem auto 0;
    }

    .consumer-help-tool-block .content .titleWrapper h1, .consumer-help-tool-block .content .titleWrapper .h1 {
        font-size: 40px;
    }
}

.consumer-help-tool-block .overlay .trigger-consumer-help {
    display: none;
}

@media only screen and (max-width: 768px) {
    .consumer-help-tool-block .overlay .button-wrapper {
        margin-top: 278px;
    }
}

.consumer-help-tool-block .overlay .button-wrapper {
    margin-top: 378px;
}

.consumer-help-tool-block .overlay .button-wrapper .search-button {
    margin-bottom: 26px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    height: 70px;
    line-height: 70px;
    border: 1px solid #fede0f;
    text-align: center;
    padding-right: 52px;
}

.consumer-help-tool-block .overlay .button-wrapper .search-button > span {
    display: block;
    position: relative;
}

.consumer-help-tool-block .overlay .button-wrapper .search-button > span.button-text {
    text-align: center;
}

.consumer-help-tool-block .overlay .button-wrapper .search-button > span span.icon {
    position: absolute;
    right: -32px;
    top: 26px;
}

.consumer-help-tool-block .overlay .button-wrapper .search-button > span span.icon--arrow-down {
    opacity: 1;
}

.consumer-help-tool-block .overlay .button-wrapper .search-button > span span.icon--cross {
    opacity: 0;
}

.consumer-help-tool-block .overlay .trigger-consumer-help:checked ~ .button-wrapper .search-button {
    width: 100%;
}

.consumer-help-tool-block .overlay .trigger-consumer-help:checked ~ .button-wrapper .search-button:hover {
    background-color: #fede0f;
}

.consumer-help-tool-block .overlay .trigger-consumer-help:checked ~ .button-wrapper .search-button .icon--arrow-down {
    opacity: 0;
}

.consumer-help-tool-block .overlay .trigger-consumer-help:checked ~ .button-wrapper .search-button .icon--cross {
    opacity: 1;
}

.consumer-help-tool-block .overlay .trigger-consumer-help:checked ~ .help-slide-out {
    height: auto;
    opacity: 1;
}

.consumer-help-tool-block .overlay .help-slide-out {
    position: absolute;
    top: 448px;
    left: 0;
    background-color: #ffffff;
    width: 100%;
    text-align: center;
    z-index: 10;
    overflow: hidden;
    height: 0;
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.consumer-help-tool-block .overlay .help-slide-out .search-field {
    position: relative;
    width: 100%;
    margin-top: 26px;
}

.consumer-help-tool-block .overlay .help-slide-out .search-field .search-field-wrapper {
    margin: 0 auto;
    height: 50px;
    white-space: nowrap;
}

.consumer-help-tool-block .overlay .help-slide-out .search-field .search-field-wrapper .search-box {
    display: inline-block;
    width: 40%;
}

.consumer-help-tool-block .overlay .help-slide-out .search-field .search-field-wrapper .search-button {
    margin-left: 13px;
}

.consumer-help-tool-block .overlay .help-slide-out .directly-to-buttons {
    width: 100%;
    position: relative;
}

.consumer-help-tool-block .overlay .help-slide-out .directly-to-buttons .quickly-to-text {
    margin: 26px auto;
}

.consumer-help-tool-block .overlay .help-slide-out .directly-to-buttons .button {
    margin-bottom: 26px;
}

.installer-heating-selection-tool-block {
    text-align: center;
    background-color: #ffffff;
    color: #000a0a;
    position: relative;
}

.installer-heating-selection-tool-block .wrapper {
    text-align: left;
    font-size: 18px;
}

.installer-heating-selection-tool-block .wrapper .header {
    margin: 26px 0 0;
}

.installer-heating-selection-tool-block .wrapper .form-field {
    margin-bottom: 13px;
}

.installer-heating-selection-tool-block .wrapper .form-field .select-wrapper {
    width: 180px;
}

.installer-heating-selection-tool-block .wrapper .form-field.label {
    margin-bottom: 4px;
}

.installer-heating-selection-tool-block .footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    line-height: 60px;
    border-top: 1px solid black;
    text-align: right;
    font-size: 18px;
}

.installer-heating-selection-tool-block .footer > a {
    color: #000a0a;
    border: 0;
}

.installer-heating-selection-tool-block .footer > a img {
    margin: 0 13px;
}

@media only screen and (min-width: 961px) {
    .installer-heating-selection-tool-block .wrapper .form-field .select-wrapper {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .installer-heating-selection-tool-block {
        height: 700px;
    }
}

/*
 * Remeha frontend - (c) 2014 Colours
 *  Contains:
 *  - Ketelwijzer
 */


/********************************************
 * CV ketel block
 ********************************************/
.cta-block {
    background-color: #fede0f;
    color: #ffffff;
    padding: 0 26px;
}

.cta-block .content-wrapper {
    display: table;
    width: 100%;
}

.cta-block .content-wrapper .content {
    display: inline-block;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.cta-block .content-wrapper .content h3, .cta-block .content-wrapper .content .h3 {
    margin: 0;
}

.cta-block .content-wrapper .content p:last-child {
    margin-bottom: 0;
}

/********************************************
 * CV ketel block
 ********************************************/
.video-block {
    position: relative;
    overflow: hidden;
    background-color: #000a0a;
}

.video-block .blocking {
    z-index: 10;
    background-color: #000;
    filter: alpha(opacity=1);
    opacity: 0.01;
}

/*----------------------------------------------------------------------------*\
    Product overview
\*----------------------------------------------------------------------------*/
.product-overview {
    position: relative;
    color: #000a0a;
    background-color: #ffffff;
    width: 100%;
    overflow: hidden;
}

.product-overview .wrapper-overview {
    margin-right: 0;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
}

.product-overview .wrapper-overview .header {
    height: 70px;
    border-bottom: 1px solid #eeeeee;
    text-align: center;
    overflow: hidden;
}

@media only screen and (max-width: 768px) {
    .product-overview .wrapper-overview .header {
        margin-right: 130px;
    }
}

.product-overview .wrapper-overview .header h3, .product-overview .wrapper-overview .header .h3 {
    line-height: 70px;
}

.product-overview .wrapper-filter .filter {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    padding: 0;
    background-color: #fede0f;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
}

.product-overview .wrapper-filter .filter .filter-button-wrapper {
    position: relative;
    height: 69px;
    margin-left: -130px;
    background-color: #fede0f;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
}

.product-overview .wrapper-filter .filter .filter-button-wrapper .filter-slide-button {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 69px;
    width: 100%;
    color: #000a0a;
    border: 0;
    /* 1 */
    /* 3 */
    font-size: 16px;
    /* 2 */
    /* 3 */
    font-size: 0.72727rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 13px;
    cursor: pointer;
}

.product-overview .wrapper-filter .filter .filter-button-wrapper .filter-slide-button .icon {
    position: absolute;
    top: 25px;
    left: 0px;
}

.product-overview .wrapper-filter .filter .filter-button-wrapper .filter-slide-button .label {
    position: absolute;
    top: 27px;
    left: 30px;
}

.product-overview .wrapper-filter .filter .button {
    width: 100%;
    text-align: left;
    border: 1px solid #000a0a;
    margin-bottom: 13px;
}

.product-overview .wrapper-filter .filter .button:hover {
    color: #ffffff;
    background-color: #000a0a;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper {
    position: relative;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper .button-cv {
    display: block;
    width: 183px;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper .cv-button-slide-out {
    position: absolute;
    left: 0;
    top: 46px;
    width: auto;
    height: 0;
    overflow: hidden;
    color: #ffffff;
    background-color: #000a0a;
    border: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 11;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper .cv-button-slide-out .cv-slide-wrapper .checkbox {
    color: #ffffff;
    margin: 0 0 7px 0;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper .cv-button-slide-out .cv-slide-wrapper .linkholder {
    margin-bottom: 13px;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper .cv-button-slide-out .cv-slide-wrapper .linkholder > a {
    color: #ffffff;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper .trigger-checkbox:checked ~ .cv-button-slide-out {
    height: auto;
    opacity: 1;
    visibility: visible;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper .trigger-checkbox:checked ~ label {
    margin-bottom: 148px;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper .trigger-checkbox:checked ~ label .button {
    background-color: #000a0a;
    color: #ffffff;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper .search-menu-slide-wrapper {
    margin: 26px;
    font-size: 22px;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper .search-menu-slide-wrapper form {
    width: 100%;
}

.product-overview .wrapper-filter .filter .cv-button-wrapper .search-menu-slide-wrapper form .search-wrapper {
    border-bottom: 4px solid #000a0a;
    position: relative;
    height: 60px;
    width: 60%;
    margin: 0 auto;
}

.product-overview .trigger-filter-checkbox:checked ~ .wrapper-filter .filter {
    width: 235px;
    padding: 0 26px;
}

.product-overview .trigger-filter-checkbox:checked ~ .wrapper-filter .filter .filter-button-wrapper {
    margin-left: 0;
}

.product-overview .trigger-filter-checkbox:checked ~ .wrapper-overview {
    margin-right: 235px;
}

/*
 * Product tile  FLIP
 */
.product-tile-flip {
    text-align: center;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    margin-right: -1px;
    margin-bottom: -1px;
    position: relative;
}

.product-tile-flip .flip-container {
    -webkit-perspective: 1000;
    perspective: 1000;
    position: relative;
    height: 368px;
    background-color: #ffffff;
}

.product-tile-flip .flip-container:hover .flipper, .product-tile-flip .flip-container.hover .flipper {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.product-tile-flip .flip-container .flipper {
    -webkit-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

.product-tile-flip .front,
.product-tile-flip .back {
    position: absolute;
    top: 0;
    left: 0;
}

.product-tile-flip .front {
    color: #000a0a;
    border: 0;
}

.product-tile-flip .front .title {
    display: inline-block;
    margin: 26px 0;
}

.product-tile-flip .front .img {
    position: relative;
    margin: 0 0 26px;
}

.product-tile-flip .front .subtitle {
    margin: 0 0 26px;
}

.product-tile-flip .back .content-wrapper {
    display: table;
    width: 100%;
    height: 100%;
}

.product-tile-flip .back .content-wrapper .content {
    display: table-cell;
    height: inherit;
    vertical-align: middle;
}

.product-tile-flip .back .content-wrapper .content .product-rating {
    font-size: 18px;
    margin-bottom: 26px;
}

/*
 * Product tile
 */
.product-tile {
    text-align: center;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    margin-right: -1px;
    margin-bottom: -1px;
    padding-top: 1px;
    position: relative;
    cursor: pointer;
}

.product-tile .content {
    color: #000a0a;
    border: 0;
}

.product-tile .content .title {
    display: inline-block;
    margin: 26px 0;
}

.product-tile .content .img {
    position: relative;
    margin: 0 0 26px;
}

.product-tile .content .subtitle {
    margin: 0 0 26px;
}

.product-tile .content:hover {
    color: #000a0a;
}

.product-tile .hover-content {
    opacity: 0;
    visibility: hidden;
    background-color: #fede0f;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.product-tile .hover-content .content-wrapper {
    display: table;
    width: 100%;
    height: 100%;
}

.product-tile .hover-content .content-wrapper .content {
    display: table-cell;
    height: inherit;
    vertical-align: middle;
}

.product-tile .hover-content .content-wrapper .content .product-rating {
    font-size: 18px;
    margin-bottom: 26px;
}

.product-tile .hover-content .content-wrapper .content a {
    z-index: 10;
}

.product-tile .hover-content .content-wrapper .content a.close-button {
    position: absolute;
    top: 10px;
    right: 18px;
    width: 32px;
    height: 32px;
    background-image: url(../images/Svg/cross.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 26px;
    border: 0;
}

.product-tile:hover .hover-content {
    opacity: 1;
    visibility: visible;
}

@media only screen and (max-width: 768px) {
    .product-overview .header {
        text-align: left;
        margin-left: 13px;
    }
}

/*----------------------------------------------------------------------------*\
    Product details
\*----------------------------------------------------------------------------*/
.direct-downloads {
    text-align: center;
    padding: 26px 0;
}

.direct-downloads .download-buttons {
    width: 80%;
    margin: 0 auto;
}

.direct-downloads .download-buttons > a {
    display: inline-block;
    margin: 13px 7px 0;
    border: 1px solid #000a0a;
}

.direct-downloads .download-buttons > a > span {
    display: inline-block;
}

@media only screen and (max-width: 768px) {
    .direct-downloads .download-buttons {
        width: 100%;
    }
}

.direct-downloads .download-link {
    margin: 26px 0 0;
}

.direct-downloads .download-link > a {
    border: 0;
}

.direct-downloads .download-link > a > span {
    border-bottom: 1px solid #777777;
}

.product-infotext .content-wrapper {
    min-height: 265px;
}

.product-infotext .content-wrapper .text-wrapper {
    padding: 26px 0 0 13px;
}

.product-infotext .content-wrapper .text-wrapper h3, .product-infotext .content-wrapper .text-wrapper .h3 {
    margin-bottom: 26px;
}

.product-infotext .content-wrapper .image-wrapper {
    padding: 13px 0 0;
    width: 30%;
    min-height: 255px;
    text-align: center;
}

.product-infotext .specs-link-wrapper {
    text-align: center;
    margin: 0 0 26px;
}

.product-infotext .specs-link-wrapper > a {
    border: 0;
}

.product-infotext .specs-link-wrapper > a > span {
    border-bottom: 1px solid #777777;
    display: inline-block;
}

.product-detail-carousel-block {
    position: relative;
}

.product-detail-carousel-block .owl-carousel .owl-controls .owl-nav {
    display: none;
}

.product-detail-carousel-block .owl-carousel .owl-controls .owl-dots {
    position: absolute;
    bottom: 13px;
    right: 13px;
}

.product-detail-carousel-block.installer > div {
    margin: 52px 0;
}

.product-detail-carousel-block.installer .owl-carousel .owl-controls .owl-dots {
    position: absolute;
    bottom: -37px;
    right: 13px;
}

/* ---------------------------------------------------------------------------------------*/
.product-details-consumer {
    position: relative;
    color: #000a0a;
    background-color: #ffffff;
}

.product-details-consumer .header {
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #eeeeee;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.product-details-consumer .header .button-share {
    position: absolute;
    right: 0;
    top: 0;
}

.product-details-consumer .header .button-share a {
    color: #000a0a;
    line-height: 70px;
    margin-right: 26px;
}

/* ---------------------------------------------------------------------------------------*/
.product-details-installer {
    position: relative;
    color: #000a0a;
    background-color: #ffffff;
}

.product-details-installer .header {
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #eeeeee;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.product-details-installer .header .button-share {
    position: absolute;
    right: 0;
    top: 0;
}

.product-details-installer .header .button-share a {
    color: #000a0a;
    line-height: 70px;
    margin-right: 26px;
}

.product-details-installer .installer-right-column {
    padding: 39px 26px 26px;
}

@media only screen and (max-width: 768px) {
    .product-details-consumer .main-content {
        width: 100%;
    }

    .product-details-installer .main-content {
        width: 100%;
    }
}

.news-footer {
    padding: 26px 0;
    border-top: 1px solid #cccccc;
}

/* --------------------------------------------------------------------------*
 * News article 
 * --------------------------------------------------------------------------*/
.news-article-block {
    width: 65%;
    margin: 0 auto 52px;
    font-size: 16px;
}

.news-article-block .article-date {
    text-align: center;
    font-size: 16px;
    padding: 26px;
}

.news-article-block .article-text {
    margin-bottom: 26px;
}

.news-article-block .article-text p strong {
    font-size: 18px;
}

.news-article-block .article-text img {
    max-width: 50%;
    height: auto;
}

.news-article-block .article-text img.left {
    float: left;
    padding: 13px 13px 13px 0;
}

.news-article-block .article-text img.right {
    float: right;
    padding: 13px 0 13px 13px;
}

/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------*
 * News overview 
 * --------------------------------------------------------------------------*/
.news-block {
    position: relative;
    overflow: hidden;
}

.news-block > a {
    display: block;
    border: 0;
}

.news-block > a .content-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 0 15%;
}

.news-block > a .content-wrapper > h3, .news-block > a .content-wrapper > .h3 {
    margin: 0 0 1rem;
    line-height: 28px;
}

.news-block > a .content-wrapper > p {
    margin: 0;
    line-height: 46px;
}

.news-block > a .content-wrapper > p.no-date {
    line-height: normal;
}

.news-block > a > .content {
    display: table;
    width: 100%;
}

.news-block > a > .content-hover {
    display: table;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.news-block > a > .content-hover > p {
    display: block;
    margin-bottom: 10px;
}

.news-block > a > .content-hover > .button {
    margin: 0 auto;
}

.news-block > a:hover > .content-hover {
    opacity: 1;
    visibility: visible;
}

.news-block > a:hover > .content-hover .content-wrapper > h3, .news-block > a:hover > .content-hover .content-wrapper > .h3 {
    margin: 0 auto 1rem;
    line-height: 28px;
}

.news-block > a:hover > .content-hover .content-wrapper > p {
    margin: 0 auto;
    font-size: 18px;
    margin-bottom: 1.5rem;
}

.news-block > a > .background-hover {
    background-color: #000a0a;
    opacity: 0;
    visibility: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.news-block > a:hover > .background-hover {
    opacity: 1;
    visibility: visible;
}

/* --------------------------------------------------------------------------- */
.news-block.large > a > .content .content-wrapper {
    text-align: center;
}

.news-block.large > a > .content .content-wrapper > h1, .news-block.large > a > .content .content-wrapper > .h1 {
    margin: 0;
    line-height: 2rem;
}

.news-block.large > a > .content .content-wrapper > p {
    color: #000a0a;
}

.news-block.large > a > .background-hover {
    background-color: #333333;
}

/*----------------------------------------------------------------------------*/
.search-results-block {
    position: relative;
    color: #000a0a;
    background-color: #ffffff;
    font-size: 16px;
}

.search-results-block .header {
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #eeeeee;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.search-results-block .search-wrapper {
    width: 80%;
    margin: 0 auto;
}

.search-results-block .search-wrapper .new-search-wrapper {
    margin: 80px 0 90px;
}

.search-results-block .search-wrapper .new-search-wrapper form {
    width: 80%;
    margin: 0 auto;
}

.search-results-block .search-wrapper .new-search-wrapper form .new-search-field-wrapper {
    font-size: 18px;
}

.search-results-block .search-wrapper .new-search-wrapper form .new-search-field-wrapper input {
    padding: 0;
}

.search-results-block .search-wrapper .new-search-wrapper form .new-search-field-wrapper span {
    display: block;
    overflow: hidden;
    padding-right: 13px;
    border: 1px solid #000a0a;
}

.search-results-block .search-wrapper .new-search-wrapper form .new-search-field-wrapper span .site-search-input {
    padding: 0 13px;
    height: 46px;
    width: 100%;
    margin: 0 -1px;
    border: 0;
}

.search-results-block .search-wrapper .new-search-wrapper form .new-search-field-wrapper .site-search-submit {
    float: right;
    color: #ffffff;
    height: 48px;
    margin-left: 13px;
    padding: 0 20px;
}

.search-results-block .search-wrapper .new-search-wrapper form .search-string {
    margin-top: 13px;
    text-align: center;
}

.search-results-block .search-wrapper .more-results {
    padding: 35px 0 80px;
    text-align: center;
}

/*----------------------------------------------------------------------------*/
.contact-form-block {
    background-color: #ffffff;
    color: #000a0a;
}

.contact-form-block .contact-form-wrapper {
    position: relative;
}

.contact-form-block .contact-form-wrapper .contact-form-inner {
    width: 80%;
    max-width: 900px;
    margin: 26px auto;
}

.contact-form-block .contact-form-wrapper .contact-form-inner h3, .contact-form-block .contact-form-wrapper .contact-form-inner .h3 {
    margin-bottom: 52px;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .form-intro {
    width: 65%;
    text-align: center;
    margin: 0 auto 13px;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper {
    display: inline-block;
    margin: 0 13px 13px 0;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.mini {
    width: 80px;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.mini input {
    width: 100%;
    min-width: 2rem;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.small {
    width: 110px;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.small input {
    width: 100%;
    min-width: 4rem;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.medium {
    width: 280px;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.medium input {
    width: 100%;
    min-width: 8rem;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.large {
    width: 407px;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.large input {
    width: 100%;
    min-width: 8rem;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper .message {
    margin-bottom: 26px;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper label, .contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper input {
    margin-bottom: 8px;
}

.contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper .button {
    margin: 0 13px 13px 0;
}

@media only screen and (max-width: 768px) {
    .contact-form-block .contact-form-wrapper .contact-form-inner {
        width: 90%;
    }

    .contact-form-block .contact-form-wrapper .contact-form-inner .form-intro {
        width: 90%;
    }

    .contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.mini {
        width: 30%;
    }

    .contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.small {
        width: 50%;
    }

    .contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.medium {
        width: 100%;
    }

    .contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.large {
        width: 100%;
    }

    .contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper.message {
        width: 100%;
    }

    .contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper input {
        width: 100%;
    }

    .contact-form-block .contact-form-wrapper .contact-form-inner .field-wrapper textarea {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
}

/*----------------------------------------------------------------------------*/
.text-advanced-block {
    position: relative;
    width: 65%;
    margin: 0 auto;
    padding: 26px 0;
}

.child-overview-block {
    position: relative;
}

/* --------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------- */
.child-block {
    position: relative;
    overflow: hidden;
}

.child-block > a {
    display: block;
    border: 0;
}

.child-block > a .content-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 0 52px;
}

.child-block > a .content-wrapper > h2, .child-block > a .content-wrapper > .h2 {
    margin: 0;
    line-height: 2rem;
}

.child-block > a .content-wrapper > p {
    margin: 0;
    line-height: 1rem;
}

.child-block > a > .content {
    display: table;
    width: 100%;
}

.child-block > a > .content-hover {
    display: table;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.child-block > a > .content-hover > p {
    display: block;
    margin-bottom: 10px;
}

.child-block > a > .content-hover > .button {
    margin: 0 auto;
}

.child-block > a:hover > .content-hover {
    opacity: 1;
    visibility: visible;
}

.child-block > a:hover > .content-hover .content-wrapper {
    text-align: center;
}

.child-block > a:hover > .content-hover .content-wrapper > p {
    margin: 0 auto;
    width: 70%;
    font-size: 18px;
    margin-bottom: 0.8rem;
}

.child-block > a > .background-hover {
    opacity: 0;
    visibility: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.child-block > a:hover > .background-hover {
    opacity: 1;
    visibility: visible;
}

.child-block.large > a > .content .content-wrapper {
    text-align: center;
}

.child-block.large > a > .content .content-wrapper > h1, .child-block.large > a > .content .content-wrapper > .h1 {
    margin: 0;
    line-height: 2rem;
}

.child-block.large > a > .content .content-wrapper > p {
    color: #000a0a;
}

.child-block.large > a > .background-hover {
    background-color: #333333;
}

/* --------------------------------------------------------------------------- */
.child-article-block {
    width: 65%;
    margin: 0 auto 52px;
    font-size: 16px;
}

.child-article-block .article-date {
    text-align: center;
    font-size: 16px;
    padding: 26px;
}

.child-article-block .article-text {
    margin-bottom: 26px;
}

.child-article-block .article-text p strong {
    font-size: 18px;
}

.child-article-block .article-text img {
    max-width: 50%;
    height: auto;
}

.child-article-block .article-text img.left {
    float: left;
    padding: 13px 13px 13px 0;
}

.child-article-block .article-text img.right {
    float: right;
    padding: 13px 0 13px 13px;
}

.faq-content {
    position: relative;
    width: 65%;
    margin: 26px auto;
}

.faq-content .tab-content p {
    font-size: 16px;
}

.faq-content .faq-item .faq-item-header {
    text-align: center;
}

.faq-content .faq-item .faq-item-header h4, .faq-content .faq-item .faq-item-header .h4 {
    font-size: 18px;
}

/* --------------------------------------------------------------------------- */
.iframe-wrapper .iframe-introduction {
    width: 65%;
    margin: 26px auto;
}

.iframe-wrapper iframe {
    display: block;
    width: 65%;
    height: auto;
    min-height: 400px;
    margin: 0 auto 26px;
    border: 1px solid #cccccc;
}

/* --------------------------------------------------------------------------- */
.maps-block {
    position: relative;
    background-color: #ffffff;
}

.maps-block .maps-range-bar .range-bar {
    display: inline-block;
    margin: 26px auto;
    max-width: 80%;
}

.maps-block .maps-range-bar .range-bar .field-wrapper {
    float: left;
    margin: 0 7px 13px;
}

.maps-block .maps-range-bar .range-bar .field-wrapper.city {
    width: 300px;
    max-width: 100%;
}

.maps-block .maps-range-bar .range-bar .field-wrapper.range {
    width: 6rem;
    min-width: 6rem;
    text-align: left;
    position: relative;
    height: 46px;
}

.maps-block .maps-range-bar .range-bar .field-wrapper input, .maps-block .maps-range-bar .range-bar .field-wrapper textarea {
    width: inherit;
}

.maps-block .maps-range-bar .range-bar .field-wrapper > textarea {
    min-width: 5rem;
}

.maps-block .maps-range-bar .icons-bar {
    width: 80%;
    display: inline-block;
    margin: 0 0 26px;
}

.maps-block .maps-range-bar .icons-bar .company-logo {
    display: inline-block;
    border-bottom: 0;
}

.maps-block .maps-range-bar .icons-bar .company-logo .text {
    color: #000a0a;
    line-height: 16px;
    border-bottom: 1px solid #cccccc;
}

.maps-block .maps-range-bar .icons-bar .company-logo img {
    margin: 0 13px;
}

.maps-block .maps-content-bar {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.maps-block .maps-content-bar .maps-wrapper {
    position: relative;
}

.maps-block .maps-content-bar .maps-wrapper iframe {
    position: absolute;
    top: 0;
}

.maps-block .maps-content-bar .maps-wrapper #map-canvas {
    width: 100%;
    height: 800px;
}

.maps-block .maps-contact-form {
    margin: 52px 0;
}

.maps-block .maps-contact-form .form-wrapper {
    width: 60%;
    margin: 0 auto;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper {
    display: inline-block;
    margin: 0 13px 13px 0;
    max-width: 100%;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper.mini {
    width: 80px;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper.mini input {
    width: 100%;
    min-width: 2rem;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper.small {
    width: 110px;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper.small input {
    width: 100%;
    min-width: 4rem;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper.medium {
    width: 280px;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper.medium input {
    width: 100%;
    min-width: 8rem;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper.large {
    width: 407px;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper.large input {
    width: 100%;
    min-width: 5rem;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper label, .maps-block .maps-contact-form .form-wrapper .field-wrapper input {
    margin-bottom: 8px;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper input, .maps-block .maps-contact-form .form-wrapper .field-wrapper textarea {
    width: inherit;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper > textarea {
    min-width: 5rem;
}

.maps-block .maps-contact-form .form-wrapper .field-wrapper .button {
    margin: 0 13px 13px 0;
}

.maps-list-item {
    display: block;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #cccccc;
    padding: 26px;
    cursor: pointer;
}

.maps-list-item .item-wrapper .item-selector .checkbox {
    margin: 0 15% 15px;
}

.maps-list-item .item-wrapper .item-name-address h3, .maps-list-item .item-wrapper .item-name-address .h3 {
    margin-bottom: 4px;
}

.maps-list-item .item-wrapper .item-distrance-route {
    padding: 5px 0 0;
}

.maps-list-item.selected {
    background-color: #fede0f;
}

.maps-list-item.selected .item-wrapper .item-selector .checkbox__indicator {
    background-image: url("../images/checkbox-checked.png");
}

.maps-list-item:hover {
    color: #000a0a;
}

.maps-list-item:last-child {
    border-bottom: 0;
}

/* --------------------------------------------------------------------------- */
/*  Some extra, custom formatting styles for the styleguide
\*----------------------------------------------------------------------------*/
.sg-pattern-head {
    border: 0 !important;
    font-size: 2rem !important;
    padding: 1rem 0;
    text-indent: 1rem;
    padding: 0.5rem 0 !important;
}

.sg-pattern-head a {
    border: 0;
    color: #777777 !important;
}

.sg-colors li {
    list-style-type: none;
}

/*! blocss-helpers v1.0.1 | MIT License | github.com/Blocss */
/*----------------------------------------------------------------------------*\
    $HELPERS
    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 `.nav` left then add `float:left;`
    to that ruleset as opposed to adding the `.float--left` class to the markup.
\*----------------------------------------------------------------------------*/
/**
 * Define which namespaced breakpoints you would like to generate for the
 * `.visuallyhidden` class. This is handy if you only need visuallyhidden on,
 * say, palm, or you only need a new unit breakpoint at mobile sizes. It allows
 * you to only compile as much CSS as you need. All are empty by
 * default, but you can add breakpoints at will.
 *
 * $breakpoint-has-x:       ('palm', 'desk');
 *
 * Note: the name of the breakpoint must exist in the list of `$breakpoints`
 *       in the Blocss base repository
 */
/*  Structural
\*----------------------------------------------------------------------------*/
/**
 * Display helpers
 */
.display--block {
    display: block !important;
}

.display--inline-block {
    display: inline-block !important;
}

.display--inline {
    display: inline !important;
}

/**
 * Vertical rhythm helpers
 *
 * ^deprecated: `.flatten`
 */
.flatten,
.sign--flat {
    margin-bottom: 0 !important;
}

/* half margin-bottom */
.sign--half {
    /* 1 */
    /* 3 */
    margin-bottom: 13px;
    /* 2 */
    /* 3 */
    margin-bottom: 0.59091rem;
}

/* margin-bottom */
.sign {
    /* 1 */
    /* 3 */
    margin-bottom: 26px;
    /* 2 */
    /* 3 */
    margin-bottom: 1.18182rem;
}

/* doubled up margin-bottom */
.sign--large {
    /* 1 */
    /* 3 */
    margin-bottom: 52px;
    /* 2 */
    /* 3 */
    margin-bottom: 2.36364rem;
}

/**
 * Add/remove floats
 */
.float--right {
    float: right !important;
}

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

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

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

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

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

/**
 * Font weight
 *
 * ^deprecated: `.weight--x`
 */
.text--light,
.weight--light {
    font-weight: 300 !important;
}

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

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

/**
 * Capitals/lowercase
 *
 * ^deprecated: non prefixed with `text--`
 */
.text--caps,
.caps {
    text-transform: uppercase !important;
}

.text--lowercase,
.lowercase {
    text-transform: lowercase !important;
}

.text--firstcap,
.firstcap {
    text-transform: capitalize !important;
}

/**
 * Line height helpers
 */
.line--flat {
    line-height: 1;
}

.line--small {
    line-height: 0.98485;
}

.line--normalis {
    line-height: 1.18182;
}

.line--large {
    line-height: 1.37879;
}

/*  Misc
\*----------------------------------------------------------------------------*/
/**
 * Hide from screanreaders & browsers
 */
.hidden {
    display: none !important;
    visibility: hidden;
}

/**
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
    visibility: hidden;
}

/**
 * Hide only visually, but have it available for screenreaders
 * as per: h5bp.com/v
 */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/**
 * Visuallyhidden based on breakpoint
 */
@media only screen and (max-width: 768px) {
    .visuallyhidden--palm {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
}

@media only screen and (min-width: 769px) {
    .visuallyhidden--lap {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
}

@media only screen and (min-width: 961px) {
    .visuallyhidden--desk {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
}