@charset "UTF-8";
/**
 * The compiled sass output of this file becomes
 * the main CSS stylesheet to adress in your HTML
 */
/**
* Import project configuration
*
* Import the `_configuration.scss` file first. It holds
* all project wide variables and component override
* variables.
*/
/**
 * Project configuration
 *
 * Section: example
 *
 * COLORS       - Project agnostic colors and project aware colors
 * INTERFACE    - Element variables
 * CORE         - Define/override core values to fit project requirements
 * ABSTRACTIONS - Defaults values for abstractions
 */
/**
 * $COLORS
 *
 * 1. Project agnostic colors
 * 2. Project aware colors
 */
/**
 * 1. Project agnostic colors
 */
/**
 * 2. Project aware colors
 */
/**
 * $INTERFACE
 *
 * Define element default values
 */
/**
 * $CORE
 *
 * Override default variable values. This is the place where the project
 * core settings are defined.
 *
 * Whenever a value is adjusted, remove the `!default` flag. Otherwise
 * leave it as is.
 */
/**
 * $ABSTRACTIONS
 *
 * Override default variable values.
 *
 * Whenever a value is adjusted, remove the `!default` flag. Otherwise
 * leave it as is to pass by the defaults.
 */
/**
 * $COMPONENTS
 *
 * Override default variable values.
 *
 * Whenever a value is adjusted, remove the `!default` flag. Otherwise
 * leave it as is to pass by the defaults.
 */
/**
 * Import core files
 *
 * Import core files (order matters) right after the
 * configuration as the project related files are usally
 * build on those core abstractions and components.
 * `utils.x` classes are added at the end of this file
 * to handle the specificity graph.
 */
/**
 * Core SASS default settings
 *
 * Core variables used throughout several objects/plugins
 */
/**
 * Default variables
 */
/**
 * Framework variables
 */
/**
 * Framework media queries breakpoints
 *
 * Hold our breakpoint aliases and conditions in a list. Invoked through
 * `media-query()` mixin.
 */
/**
 * Placeholders
 */
/**
 * Core functions
 *
 * They are heavily used within core and project files.
 */
/**
 * Math helpers. Returning rounded quarter, halve, double and
 * quadruple integers.
 *
 * Usage example:
 *  .foo {
 *    padding: halve(10px);
 *  }
 *
 * Output:
 *  .foo {
 *    padding: 5px;
 *  }
 */
/**
 * Core mixins
 *
 * They are heavily used within core and project files.
 *
 * Heavily based on <https://github.com/inuitcss>
 */
/**
 * Create a fully formed type style (sizing and vertical rhythm) by passing
 * in a single value. This will generate a rem-based font-size with its pixel
 * fallback, as well as a unitless line-height which will place the element
 * on your baseline, e.g.:
 *
 * Usage example:
 *  .foo {
 *    @include font-size(12px);
 *  }
 *
 * Output:
 *  .foo {
 *    font-size: 0.75rem;
 *    line-height: 2;
 *  }
 *
 * If you do not want to generate a line-height automatically, you
 * simply pass in your own as a second paramater:
 *
 * Usage example:
 *  .foo {
 *    @include font-size(12px, 1.5);
 *  }
 *
 * This parameter can be any integer, ‘inherit’, or ‘normal’. If you don’t
 * want a line-height at all, pass in a second paramater of ‘none’ or ‘false’:
 *
 * Usage example:
 *  .foo {
 *    @include font-size(12px, none);
 *  }
 *
 */
/**
 * Generate media queries from the aliases and conditions defined in
 * `_core.variables.scss`.
 *
 * Usage example:
 *  .foo {
 *    color: green;
 *
 *    @include media-query(palm) {
 *      color: red;
 *    }
 *  }
 *
 */
/**
 * A mixin to spit out our width classes. Pass in the columns we
 * want the widths to have, and an optional suffix for responsive widths.
 *
 * This mixin is not applicable directly. Instead the mixin extension in
 * `_utils.sizes.scss` generates all width- and breakpoint classes.
 */
/**
 * Spawn a group of modifiers (tiny, small, large, huge) to arbitrary
 * classes, based on our base spacing unit settings. Pass any appropriate
 * attribute as argument.
 *
 * Don't use this on buttons or grid abstractions. These abstractions have
 * their own set of size modifiers.
 *
 * Usage example:
 *
 *  .foo {
 *    @include size-modifiers(padding);
 *
 *    padding: $base-spacing-unit;
 *  }
 *
 * Output:
 *  .foo--tiny {
 *    padding: ...
 *  }
 *  .foo--small {
 *    padding: ...
 *  }
 *
 *  a.s.o.
 *
 * ===
 *
 *  .foo {
 *    @include size-modifiers(padding-left, padding-right);
 *
 *    padding-top: $base-spacing-unit;
 *    padding-bottom: $base-spacing-unit;
 *  }
 *
 * Output:
 *  .foo--tiny {
 *    padding-left: ...
 *    padding-right: ...
 *  }
 *  .foo--small {
 *    padding-left: ...
 *    padding-right: ...
 *  }
 *
 *  a.s.o.
 *
 * ===
 *
 *  .foo {
 *    @include size-modifiers(line-height);
 *
 *    line-height: $base-spacing-unit;
 *  }
 *
 * Output:
 *  .foo--tiny {
 *    line-height: ...
 *  }
 *  .foo--small {
 *    line-height: ...
 *  }
 *
 *  a.s.o.
 *
 */
/**
 * Fork of Nicolas Gallaghers normalize.css
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device 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;
  
  /* background-image: url('../img/35.jpg');
  background-repeat: no-repeat;
  background-size: cover; */
}






/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
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/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

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

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}

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

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

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

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
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/10.
 */
img {
  border: 0;
}

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

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

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -webkit-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, 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/11.
 */
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/9/10/11, 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"] {
  -webkit-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 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 2 */
}

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

/**
 * Partial to reset several defaults, e.g. box model related
 * values of arbitrary element to establish a vertical rhythm
 * (s. `_core.rhythm.scss` also).
 */
/**
 * To establish a vertical rhythm we reset the browser defaults.
 */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
figure,
table, th, td, caption,
hr {
  margin: 0;
  padding: 0;
}

/**
 * These elements' values are usually the same as the base line-height.
 * Add/remove elements if needed. Make sure you only add elements which
 * margin-bottom values are unlikely to redefine later.
 *
 * This concept features the `single-direction` approach:
 * Info: csswizardry.com/2012/06/single-direction-margin-declarations
 */
h1, h2, h3, h4, h5, h6,
ul, ol, dl,
blockquote, p, address,
hr,
table,
fieldset, figure,
pre,
.o-preface__heading {
  margin-bottom: 1.06667rem;
}

/**
 * Some extra placeholders for our laziness ;-)
 * Extends vertical rhythm placeholder `%margin-bottom` (s. above)
 *
 * Example:
 *
 * .foo {
 *    @extend %margin-bottom--quarter;
 *  }
 */
/**
 * Box Sizing
 *
 * Defines `border-box` (instead of `content-box`) state as default to let
 * us deal with predictable paddings and behaviour.
 */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

/**
 * High-, page-level styling.
 *
 * 1. Set the default `font-size`, `font-family`, `font-weight`and line-height`
 *    for the entire project, sourced from our default variables. The `font-size` is
 *    calculated to exist in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 * 4. Prevent certain mobile browsers from automatically zooming fonts.
 * 5. Fonts on OSX will look more consistent with other systems that do not
 *    render text using sub-pixel anti-aliasing.
 */
html {
  font-size: 1.1em;
  /* 1 */
  font-family: "bio-sans", sans-serif;
  /* 1 */
  font-weight: 400;
  /* 1 */
  line-height: 1.4;
  /* 1 */
  background-color: #fff;
  color: #505050;
  overflow-y: scroll;
  /* 2 */
  min-height: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 4 */
  -ms-text-size-adjust: 100%;
  /* 4 */
  -moz-osx-font-smoothing: grayscale;
  /* 5 */
  -webkit-font-smoothing: antialiased;
  /* 5 */
}

/**
 * Headings 1–6, with corresponding Greek-alphabet abstract classes for double-
 * stranded heading hierarchy:
 * csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
 */
h1,
.alpha {
  font-size: 30px;
  line-height: 1.2;
}

h2,
.beta {
  font-size: 38px;
  line-height: 1.68421;
}

h3,
.gamma {
  font-size: 24px;
  line-height: 1.33333;
}

h4,
.delta {
  font-size: 20px;
  line-height: 1.2;
}

h5,
.epsilon {
  font-size: 16px;
  line-height: 2;
}

h6,
.zeta {
  font-size: 14px;
  line-height: 2.28571;
}



/**
 * Core button abstraction
 *
 * Heavily inspired by <https://github.com/suitcss/components-button/>
 */
/**
 * The button classes are best applied to links, buttons, and submit inputs.
 * These components can be used in forms, as calls to action, or as part of the
 * general UI of the site/app.
 */
/**
 * 1. Corrects inability to style clickable `input` types in iOS.
 * 2. Normalize `box-sizing` across all elements that this component could be
 *    applied to.
 * 3. Inherit text color from ancestor.
 * 4. Inherit font styles from ancestor.
 * 5. Normalize `line-height`. For `input`, it can't be changed from `normal` in Firefox 4+.
 * 6. Prevent button text from being selectable.
 * 7. Make sure `input` will wrap text across multiple lines.
 */
.button {
  -webkit-appearance: none;
  /* 1 */
  background: #8CC63F;
  border-color: #fff;
  border-style: solid;
  border-width: 0px;
  border-color: #8CC63F;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 2 */
  color: #fff;
  /* 3 */
  cursor: pointer;
  display: inline-block;
  font: inherit;
  /* 4 */
  line-height: normal;
  /* 5 */
  margin: 0;
  padding: 11px 21.33333px;
  border-radius: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  /* 6 */
  white-space: normal;
  /* 7 */
}

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

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */
.button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

/**
 * UI states
 */
.button:hover,
.button:focus,
.button:active {
  text-decoration: none;
}

.button:disabled,
.button.is-disabled {
  cursor: default;
  opacity: 0.5;
}

/**
 * Modifiers: Blow/shrink buttons
 */
.button--tiny {
  padding: 3px 5px;
}

.button--small {
  padding: 6px 11px;
}

.button--large {
  padding: 22px 43px;
}

.button--huge {
  padding: 43px 85px;
}

/**
 * Modifier: Take away any rectangle borders
 */
.button--pill {
  border-radius: 100px;
}

/**
 * Modifier: Make the button fill the width of its parent
 */
.button--full {
  width: 100%;
}

/**
 * Core list abstraction
 *
 * Several raw list abstractions which solves daily "bread and butter"
 * lists. Additionally these abstractions helps us to build meaningful
 * components.
 */
/**
 * List bare
 *
 * Simply removes the list-style and get rid of margin/paddings
 * that might be present. The abstraction is used in nearly all other
 * list abstractions per @extend as we probably never want list styles
 * to appear within those components.
 */
.list-bare,
.list-inline-block,
.list-stacked,
.list-table,
.list-chart,
.c-breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * List inline block
 *
 * Set a list in horizontal inline block mode.
 *
 * 1. Remove inter-cell whitespace that appears between
 *    `inline-block` child elements.
 * 2. Reset font size change made in `list-inline-block`.
 */
.list-inline-block {
  font-size: 0;
  /* 1 */
}

/**
 * Child of `.list-inline-block`
 */
.list-inline-block__item,
.list-inline-block > li {
  display: inline-block;
  font-size: 20px;
  /* 2 */
}

/**
 * List stacked
 *
 * Set a list in vertical block mode.
 */
/**
 * Children of `.list-stacked`
 *
 * 1. Dedicated link takes all available space
 */
.list-stacked__item,
.list-stacked > li {
  display: block;
}

.list-stacked__block-link {
  display: block;
  /* 1 */
}

/**
 * List table
 *
 * Set list in table mode. Spreads every list item to have equal widths.
 *
 * 1. Parse faster and get more predictable behaviour as all children
 *    occupies equal width.
 * 2. Spread parent element to available space.
 */
.list-table {
  display: table;
  table-layout: fixed;
  /* 1 */
  width: 100%;
  /* 2 */
  text-align: center;
}

/**
 * Children of `.list-table`
 *
 * 1. Automatic divide words with hyphenation.
 * 2. Dedicated link takes all available space
 */
.list-table__item,
.list-table > li {
  display: table-cell;
  text-align: center;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  /* 1 */
}

.list-table__block-link {
  display: block;
  /* 2 */
}

/**
 * List chart
 *
 * Gives a 1:1 comparison layout of label > value structure. Takes all
 * available space of parent. Intend to use for any table alike layouts
 * like price includes etc. which are semantically no tables at all.
 *
 * Applicable to div, ul/ol and dl.
 *
 * 1. By default children take all the available space of parent.
 */
.list-chart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  /* 1 */
}

.list-chart__label {
  width: 50%;
}

.list-chart__value {
  white-space: nowrap;
}

/**
 * Modifiers: Change flex container horizontal alignment
 */
.list-chart--start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

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

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

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

/**
 * Modifiers: Align the content of list items
 *
 * Example:
 *   <ul class="list-table list--[text-left]"></ul>
 */
.list--text-left > li {
  text-align: left;
}

.list--text-center > li {
  text-align: center;
}

.list--text-right > li {
  text-align: right;
}

/**
 * Modifiers: Blow/shrink list items
 *
 * Generic size utilities. Is applicable on every list abstraction except
 * where flex box is involved.
 *
 * 1. Expand list item paddings
 * 2. Ommit left/right padding of first/last item
 *
 * Example:
 *   <ul class="list-table list--[tiny]"></ul>
 *   <ul class="list-stacked list--[tiny] list--skip-vertical"></ul>
 *   <ul class="list-inline-block list--[tiny]-vertical list--skip-vertical"></ul>
 */
.list--tiny > li {
  padding: 8px;
  /* 1 */
}

.list--small > li {
  padding: 16px;
  /* 1 */
}

.list--large > li {
  padding: 64px;
  /* 1 */
}

.list--huge > li {
  padding: 128px;
  /* 1 */
}

.list--tiny-vertical > li {
  padding-left: 8px;
  /* 1 */
  padding-right: 8px;
  /* 1 */
}

.list--small-vertical > li {
  padding-left: 16px;
  /* 1 */
  padding-right: 16px;
  /* 1 */
}

.list--large-vertical > li {
  padding-left: 64px;
  /* 1 */
  padding-right: 64px;
  /* 1 */
}

.list--huge-vertical > li {
  padding-left: 128px;
  /* 1 */
  padding-right: 128px;
  /* 1 */
}

.list--skip-vertical {
  /* 2 */
}

.list--skip-vertical > li:first-of-type {
  padding-left: 0;
}

.list--skip-vertical > li:last-of-type {
  padding-right: 0;
}




/**
 * layout.scss
 */
/*
  =====================================================
  Elements / Generic elements
  =====================================================
*/
a {
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  text-decoration: none;
  color: #8CC63F;
}

a:hover, a:active, a:focus {
  color: #2F6FA8;
  text-decoration: underline;
}

strong, b {
  font-weight: 900;
}

i, em {
  font-style: italic;
}

address {
  font-style: normal;
}

nav {
  width: 100%;
}

/**
 * list of headings
 * @string {String}
 */
h1, h2, h3, h4, h5, h6 {
  font-style: normal;
  font-weight: 600;
  color: #B3462F;
  line-height: 1.2;
  text-transform: uppercase;
}

h3, h4 {
  font-weight: 600;
}

h1, h2, h3, h4 {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

h1 {
  font-size: 60px;
  color: white;
  line-height: 1;
}

h2 {
  font-size: 24px;
  color: #FBEA44;
}

/*
  =====================================================
  Placeholder
  =====================================================
*/
/*
  =====================================================
  Core extension / buttons
  =====================================================
*/
.button, .owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
  font-size: 19px;
  line-height: 1.68421;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

.button::after, .owl-carousel .owl-nav button.owl-prev::after,
.owl-carousel .owl-nav button.owl-next::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  display: block;
  height: 4px;
  width: 0%;
  background-color: #2F6FA8;
}

.button:hover, .button:active, .button:focus, .owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:active,
.owl-carousel .owl-nav button.owl-next:active, .owl-carousel .owl-nav button.owl-prev:focus,
.owl-carousel .owl-nav button.owl-next:focus {
  text-decoration: none;
  color: #fff;
  background-color: #8CC63F;
  overflow: visible;
}

.button:hover::after, .button:active::after, .button:focus::after, .owl-carousel .owl-nav button.owl-prev:hover::after,
.owl-carousel .owl-nav button.owl-next:hover::after, .owl-carousel .owl-nav button.owl-prev:active::after,
.owl-carousel .owl-nav button.owl-next:active::after, .owl-carousel .owl-nav button.owl-prev:focus::after,
.owl-carousel .owl-nav button.owl-next:focus::after {
  -webkit-animation: paint 0.25s forwards;
          animation: paint 0.25s forwards;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

.button--href::before {
  content: '';
  display: inline-block;
  vertical-align: text-top;
  margin-left: 16px;
  background-image: url("../img/arrow-right.svg");
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 1px;
  width: 12px;
  height: 18px;
}

.button--href-external::before {
  content: '';
  display: inline-block;
  vertical-align: text-top;
  margin-left: 16px;
  background-image: url("../img/arrow-external.svg");
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 3px;
  width: 16px;
  height: 16px;
}



.button--invert, .button--phone-invert, .button--email-invert {
  color: #fff;
  background-color: #8CC63F;
}

.button--invert::after, .button--phone-invert::after, .button--email-invert::after {
  background-color: #2F6FA8;
}

.button--invert:hover, .button--invert:active, .button--invert:focus, .button--phone-invert:hover, .button--phone-invert:active, .button--phone-invert:focus, .button--email-invert:hover, .button--email-invert:active, .button--email-invert:focus {
  text-decoration: none;
  color: #fff;
  background-color: #FF594F;
  overflow: visible;
}



.button--email::before, .button--email-invert::before {
  content: '';
  display: inline-block;
  vertical-align: text-top;
  background-image: url("../img/email.svg");
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 0.3em;
  margin-right: 16px;
  width: 24px;
  height: 18px;
}


/*
  =====================================================
  Objects
  =====================================================
*/















/*
  =====================================================
  Extensions
  =====================================================
*/



/*
   =====================================================
   Extensions / respimage, lazysizes
   =====================================================
 */
/**
  * Enable automativ calculation of `srcset` and `sizes`
  */
img[data-sizes="auto"] {
  display: block;
  max-width: none;
  width: 100%;
  height: auto;
}

picture img {
  display: block;
  max-width: none;
  width: 100%;
  height: auto;
}

/**
  * Enable transitions for layzy loaded images
  */
.lazyload,
.lazyloading {
  opacity: 0 !important;
}

.lazyloaded {
  opacity: 1;
  -webkit-transition: opacity 0.25s ease-in !important;
  transition: opacity 0.25s ease-in !important;
}

/*
  =====================================================
  Keyframes
  =====================================================
*/
@-webkit-keyframes paint {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes paint {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}



/*
  =====================================================
  Utility classes /  margins
  =====================================================
*/
.u-margin-bottom {
  margin-bottom: 32px;
}

.u-margin-left {
  margin-left: 32px;
}

/*
  =====================================================
  Utility classes /  imgages
  =====================================================
*/
.u-img-rounded {
  border-radius: 100%;
}

/*
  =====================================================
  Utility classes /  headings
  =====================================================
*/
.u-preface {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.u-preface-offset-15 {
  margin-left: 0;
}

@media screen and (min-width: 64em) {
  .u-preface-offset-15 {
    margin-left: 15%;
  }
}

.u-preface-offset-40 {
  margin-left: 0;
}

@media screen and (min-width: 64em) {
  .u-preface-offset-40 {
    margin-left: 40%;
  }
}

.body-text {
  color: white;
}

.u-width-75 {
  width: 100%;
}

@media screen and (min-width: 45em) {
  .u-width-75 {
    width: 75%;
  }
}

.u-width-70 {
  width: 100%;
}

@media screen and (min-width: 45em) and (max-width: 63.9375em) {
  .u-width-70 {
    width: 80%;
  }
}

@media screen and (min-width: 64em) {
  .u-width-70 {
    width: 70%;
  }
}

.u-width-60 {
  width: 100%;
}

@media screen and (min-width: 45em) and (max-width: 63.9375em) {
  .u-width-60 {
    width: 80%;
  }
}

@media screen and (min-width: 64em) {
  .u-width-60 {
    width: 60%;
  }
}

.u-width-50 {
  width: 100%;
}

@media screen and (min-width: 45em) and (max-width: 63.9375em) {
  .u-width-50 {
    width: 70%;
  }
}

@media screen and (min-width: 64em) {
  .u-width-50 {
    width: 50%;
  }
}

.u-width-40 {
  width: 100%;
}

@media screen and (min-width: 45em) and (max-width: 63.9375em) {
  .u-width-40 {
    width: 60%;
  }
}

@media screen and (min-width: 64em) {
  .u-width-40 {
    width: 40%;
  }
}

.u-fontSize-decrease-2 {
  font-size: 18px;
}

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

.u-footnote {
  font-size: 17px;
}

.u-emphase {
  background-color: #8CC63F;
  display: inline-block;
  padding: 4px 8px;
}

.u-href-heading {
  color: #2F6FA8;
}

.u-href-heading:hover, .u-href-heading:active, .u-href-heading:focus {
  text-decoration: none;
}

.u-margin-bottom {
  margin-bottom: 32px;
}

.u-margin-left {
  margin-left: 32px;
}

.u-heading-icon {
  display: none;
}

@media screen and (min-width: 64em) {
  .u-heading-icon {
    position: absolute;
    display: block;
    top: 2px;
    left: -40px;
  }
}

.u-heading-icon--inline {
  display: none;
}

@media screen and (min-width: 64em) {
  .u-heading-icon--inline {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-left: 32px;
  }
}

@media screen and (min-width: 64em) {
  .u-heading-icon--inline--news {
    margin-left: 16px;
  }
}





/*
  =====================================================
  Utility classes / responsive sizes
  =====================================================
*/
@media screen and (max-width: 63.9375em) {
  .is-hidden-on-lap-and-down {
    display: none;
  }
}

/*
  =====================================================
  Utility classes / javascript related
  =====================================================
*/
.js-simple-text-toggle-content {
  display: none;
}

/*
  =====================================================
  Unique classes
  =====================================================
*/
/*
  =====================================================
  Unique classes / Top link
  =====================================================
*/
.backToTop {
  visibility: hidden;
  opacity: 0;
  display: none;
}

@media screen and (min-width: 45em) {
  .backToTop {
    position: fixed;
    z-index: 999;
    width: auto;
    right: 16px;
    bottom: 45%;
    display: block;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .5s 0s, visibility 0s 5s;
    transition: opacity .5s 0s, visibility 0s 5s;
  }
  .backToTop:hover, .backToTop:focus, .backToTop:active {
    background-color: #8CC63F;
  }
  .backToTop.backToTop-is-visible {
    -webkit-transition: opacity .5s 0s, visibility 0s 0s;
    transition: opacity .5s 0s, visibility 0s 0s;
    visibility: visible;
    opacity: 1;
  }
}

/*
  =====================================================
  Unique classes / Icons (SVG icon sprite)
  =====================================================
*/
.icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  display: inline-block;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  fill: #fff;
}

a:hover .icon {
  fill: #8CC63F;
}

.icon--small {
  width: 0.5em;
  height: 0.5em;
}

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

.icon--large {
  width: 2em;
  height: 2em;
}

.icon--huge {
  width: 4em;
  height: 4em;
}

.icon-news, .icon-person, .icon-persons {
  fill: #fff;
}

.icon-article, .icon-video {
  fill: #fff;
}

/*
  =====================================================
  Core classes / enhanced
  =====================================================
*/
.list-arrow {
  margin-left: 16px;
  margin-bottom: 32px;
}

.list-arrow li {
  list-style-image: url("../img/arrow-list-new.svg");
  list-style-position: outside;
  margin-bottom: 8px;
}

.grid--text-right > .grid__cell {
  text-align: right;
}

@media screen and (max-width: 63.9375em) {
  .grid--gutter-huge-lap-and-down {
    margin: 0 calc(-0.5 * 32px);
  }
  .grid--gutter-huge-lap-and-down > .grid__cell {
    padding: 0 calc(0.5 * 32px);
  }
}

/*
  =====================================================
  Editor classes for user selection
  =====================================================
*/
.u-editor ul, .cke_editable ul {
  list-style: none;
}

.u-editor ol, .cke_editable ol {
  margin-left: 21.33333px;
}

.u-editor .list-bullet, .cke_editable .list-bullet {
  list-style-type: disc;
  list-style-position: outside;
}

.u-editor .list-bullet li, .cke_editable .list-bullet li {
  margin-left: 21.33333px;
}

.u-editor .list-check, .cke_editable .list-check {
  margin-left: 16px;
  margin-bottom: 32px;
}

.u-editor .list-check li, .cke_editable .list-check li {
  list-style-image: url("../img/arrow-list-new.svg");
  list-style-position: outside;
  margin-bottom: 8px;
}

.u-editor h3, .cke_editable h3 {
  margin-bottom: 1.6rem;
  margin-top: 32px;
}

.u-editor h4, .cke_editable h4 {
  margin-bottom: 0.8rem;
  margin-top: 16px;
}

.u-editor .button, .cke_editable .button {
  -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
}

/**
 * Core media queries
 *
 * This assumes a global switch of the base font size and line-height
 * accordingly.
 */
/**
 * Media query for smaller mobile devices (e.g. < 720px (44.9375em), 16px default)
 *
 * 1. Adjust those base values as needed
 * 2. All elements inherits from HTML DOM node declarations except
 * 3. Classes of several core abstractions. The parents of those
 *    classes utilize the inline-block approach. All listed class
 *    comprises font-size declaration to fix the inline-block
 *    whitespace issue of the abstraction. Add any abstraction class
 *    which may be extend the core by and by.
 */
@media screen and (max-width: 44.9375em) {
  /**
    * Redclare default variables
    */
  /* 1 */
  /* 1 */
  html,
  .grid__cell,
  .button-group__item .list-inline-block__item,
  .list-inline-block > li,
  .breadcrumb--horizontal > li {
    font-size: 16px;
    line-height: 22px;
  }
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 24px;
  }
  h3 {
    font-size: 18px;
  }
  h4 {
    font-size: 17px;
  }
}

/**
 * Text Utilities
 *
 * Heavily inspired by <https://github.com/suitcss/utils/>
 */
/**
 * Word breaking
 *
 * Break strings when their length exceeds the width of their container.
 */
.u-text-break {
  word-wrap: break-word !important;
}

/**
 * Horizontal text alignment
 */
.u-text-center {
  text-align: center !important;
}

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

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

/**
 * Inherit the ancestor's text color.
 */
.u-text-inherit-color {
  color: inherit !important;
}

/**
 * Enables font kerning in all browsers.
 * http://blog.typekit.com/2014/02/05/kerning-on-the-web/
 *
 * 1. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
 * 2. Chrome (not Windows), Firefox, IE 10+
 * 3. Safari 7 and future browsers
 */
.u-text-kern {
  text-rendering: optimizeLegibility;
  /* 1 */
  -webkit-font-feature-settings: "kern" 1;
          font-feature-settings: "kern" 1;
  /* 2 */
  -webkit-font-kerning: normal;
          font-kerning: normal;
  /* 3 */
}

/**
 * Prevent whitespace wrapping
 */
.u-text-nowrap {
  white-space: nowrap !important;
}

/**
 * Text truncation
 *
 * Prevent text from wrapping onto multiple lines, and truncate with an
 * ellipsis.
 *
 * 1. Ensure that the node has a maximum width after which truncation can
 *    occur.
 * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
 *    nodes.
 */
.u-text-truncate {
  max-width: 100%;
  /* 1 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  /* 2 */
}

/**
 * Vertical margin utilities
 */
.u-margin-bottom--tiny {
  margin-bottom: 8px !important;
}

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

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

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

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

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

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

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

/**
 * Vertical margin utilities
 */
.u-padding-bottom--tiny {
  padding-bottom: 8px !important;
}

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

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

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

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

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

/**
 * Vertical alignment utilities
 * Depends on an appropriate `display` value.
 */
.u-align-baseline {
  vertical-align: baseline !important;
}

.u-align-bottom {
  vertical-align: bottom !important;
}

.u-align-middle {
  vertical-align: middle !important;
}

.u-align-top {
  vertical-align: top !important;
}

/**
 * Display-type utilities
 *
 * Heavily inspired by <https://github.com/suitcss/utils/>
 */
.u-block {
  display: block !important;
}

.u-hidden {
  display: none !important;
}

/**
 * Completely remove from the flow but leave available to screen readers.
 */
.u-hidden-visually {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
}

.u-inline {
  display: inline !important;
}

/**
 * 1. Fix for Firefox bug: an image styled `max-width:100%` within an
 *    inline-block will display at its default size, and not limit its
 *    width to 100% of an ancestral container.
 */
.u-inline-block {
  display: inline-block !important;
  max-width: 100%;
  /* 1 */
}

















/**
 * layout.scss
 */
/*
  =====================================================
  Elements / Generic elements
  =====================================================
*/
a {
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  text-decoration: none;
  color: #fff;
}

a:hover, a:active, a:focus {
  color: #fff;
  text-decoration: underline;
}

strong, b {
  font-weight: 900;
}

i, em {
  font-style: italic;
}

address {
  font-style: normal;
}

nav {
  width: 100%;
}

/**
 * list of headings
 * @string {String}
 */
h1, h2, h3, h4, h5, h6 {
  font-style: normal;
  font-weight: 600;
  color: #B3462F;
  line-height: 1.2;
  text-transform: uppercase;
  display: inline-block;
}

h3, h4 {
  font-weight: 600;
}

h1, h2, h3, h4 {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

h1 {
  font-size: 44px;
  color: #B3462F;
  background-color: #fff;
  padding: 8px 16px 16px 16px;
  line-height: 1.1;
  font-weight: 700;
  transform: skewX(-8deg);
  l
}

h2 {
  font-size: 24px;
  color: #B3462F;
  background-color: #FBEA44;
  padding: 8px;
  transform: skewX(-8deg);
}



/*
  =====================================================
  Structural object / page
  =====================================================
*/

html {
  /* background-color: #FBEA44; */
  background-color: #B3462F;
  font-size: 26px;
  line-height: 1.25;
}



.page-top {
  margin: 0 auto;
  max-width: none;
  width: 100%;
  padding: 0;
  margin-bottom: 0;
  background-color: #FBEA44;
}

.page {
  margin: 0 auto;
  max-width: 50em;
  padding: 32px;
  margin-bottom: 0;
  color: #FBEA44;
}


@media screen and (min-width: 45em) {
  .page {
    padding: 128px;
    margin-bottom: 0;
  }
}




.gnb-logo {
  display: block;
  max-width: none;
  width: 100%;
  height: auto;
}


.u-divider {
  display: block;
  width: 100%;
  text-align: center;
}



.u-divider > hr{
  display: inline-block;
  border: 0;
  width: 50% !important;
  height: 8px;
  background-color: black;
  margin: 42px 0 42px 0;
}

.wrap-img {
  width: 40%;
  display: inline-block;
  margin-bottom: 0;
}

.wrap-button {
  margin-bottom: 128px;
}

.trapez {
  display: inline-block;
  transform: skewX(-8deg);
  transform-origin: top right;
  background-color: #9c3722;
  padding: 0.05em 0.5em 0.25em 0.5em;
  margin-left: 0.2em;
  margin-bottom: 0.25em;
  margin-top: 0.25em;
}


.emphase {
  background-color: #fff;
}



.button--email {
  background-color: #fff;
  color: #9c3722;
  font-size: 22px;
  transform: skewX(-8deg);
  transform-origin: top right;
}


.button--email:hover,
.button--email:active,
.button--email:focus,
.button--email:visited {
  background-color: inherit;
  background-color: #fff;
  color: #9c3722;
}


.button--email::after {
  content: '';
  height: 0;
}



/* .overlay--imprint {
  left: 40%;
  max-width: 35%;
  padding: .5em;
} */

/* .heading-imprint {
  font-size: 14px;
  margin-bottom: 0.15em;
} */

.list-imprint > li {
  font-size: 14px;
  line-height: 1;
  color: #632012;
}