@charset "UTF-8";
/*doc
---
title: Getting started
name: 1_getting_started
category: Getting started
---

## Normalize

## H5BP

## Animate

## 

*/
/*
    Imports settings.scss and the grid dependency [Susy](http://susy.oddbird.net)
*/
/*
    Control all settings which control the SCSS modules found in core/*.scss.
    Some properties don't have settings, if you need to change those properties you can change it in the modules themselves.
*/
/* Base
==========
*/
/* Media queries
==========
*/
/* Colors
==========
*/
/* Sections
==========
*/
/* Container
==========
*/
/* Susy grid
==========
*/
/* Buttons
==========
*/
/* Margin
==========
*/
/* Padding
==========
*/
/* Icons
==========
*/
/* Form
==========
*/
/* Notifications
==========
*/
/* Navigation bar
==========
*/
/* Off canvas
==========
*/
/* Tabs
==========
*/
/* Table
==========
*/
/* Tooltip
==========
*/
/* Modal window
==========
*/
/* Accordion
==========
*/
/* Breadcrumb
==========
*/
/* Pricing tables
==========
*/
/* Progress bar
==========
*/
/* Spinners
==========
*/
/* Dropdown
==========
*/
/* Media
==========
*/
/**
 * Imports all the core components.
 */
@import url("https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700");
blockquote {
  border-left: 4px solid #80356F;
  margin: 0 0 24px 0;
  padding-left: 20px;
  font-size: 17px; }

/*doc
 ---
 title: Vendor
 name: vendor
 category: Getting started
 ---

## Normalize

something about normalize

## H5BP

Something about h5bp
 */
/*! normalize.css v3.0.2 | 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 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/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 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/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 {
  -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, 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"] {
  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
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-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/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; }

/* HTML5 Boilerplate
==========
*/
html,
button,
input,
select,
textarea {
  color: #3C3036; }

body {
  background: #f6f6f6;
  font-size: 1em;
  line-height: 1.4; }

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

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

img {
  vertical-align: middle;
  display: block; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

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

textarea {
  resize: vertical; }

.no-resize {
  resize: none; }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

/*doc
---
title: Functions
name: functions
category: Structure
---

## Tint
Tint is a better way to make a color lighter instead of the standard Sass function "lighten".

    .some-class {
        color: tint( $color, $percentage );
    }

## Shade
Shade is a better way to make a color darker instead of the standard Sass function "darken".

    .some-class {
        color: shade( $color, $percentage );
    }
*/
/* Rem
==========
*/
/*doc
---
title: Mixins
name: mixins
category: Structure
---

## Arrow
This mixin will create a CSS triangle.
Direction values: up, right, bottom, left.

    @include arrow($width, $height, $direction, $color);

```
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}
````


## Font face
Includes a font-face rule for a custom local font.

    @include font-face($fontname, $directory, $woff2: false);

```
@access public
@param {Value} $fontname - name used in the filename, this should be the same for every font type.
@param {Value} $directory - directory relative from the assets/dist, (eg. fonts/somefont).
@param {Boolean} $woff2 - adds woff2 support if you need to. Defaults to false.
@return {Value} - returns compiled font-face rule.
````


*/
/* Media queries
==========
*/
/*doc
---
title: Media queries
name: media_queries
category: Structure
---

Basos uses the mobile first principle so you will never write a mobile media query. There are several breakpoints defined in the settings.scss file which will get you covered in most cases, if you need an even bigger media query (eg. TV), you could simply add a rule in the settings file.

How to add a media query to your SCSS file:

    @include mq(gamma-and-up) {
        ...
    }

You can nest the above code in your CSS selector like this.

    .your-selector {
        @include mq(gamma) {
            ...
        }

        @include mq(epsilon-and-up) {
            ...
        }

        etc..
    }

*/
/* Grid mq
==========
*/
/* Arrow
==========
*/
/* Rem
==========
*/
/* Font-face
==========
*/
/*doc
---
title: Helper classes
name: helpers_classes
category: Structure
---

## Clearfix
Clearfix container class, add this class to a wrapping element which contains floating elements.

```html_example
<div class="clearfix">
    <div class="float-left"></div>
    <div class="float-left"></div>
</div>
````

You can also extend it in your SCSS files like this;

```
.your-class {
    @extend .clearfix;
}
```

## Hide
Hide classes are used for responsive design, for some breakpoints you can hide content if you need to.

```html_example
<div class="hide-alpha">This will show on medium to large screens</div>
<div class="hide-alpha-and-beta">This will show on larger screens</div>
<div class="hide-beta-and-up">This will show on small screens</div>
<div class="hide-gamma-and-up">This will show on even larger screens</div>
```

## Lists

### Unordened list

```html_example
<ul>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>
```

### Ordened list

```html_example
<ol>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ol>
```

### Unstyled list

```html_example
<ul class="list-unstyled">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>
```

### Inline list

```html_example
<ul class="list-inline">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>
```

## Visually hidden
Hide only visually, but have it available for screenreaders.

    .visuallyhidden
    .show-screenreaders


## Margin
These classes will give margin to any element. It will overrule the specified margin of the element.

Keys available:

- alpha (default: 10)
- beta (default: 20)
- gamma (default: 30)
- delta (default: 40)
- epsilon (default: 50)
- zeta (default: 80)
- eta (default: 100)

### Default margin
```html_example
<div class="margin-alpha">Margin alpha all around</div>
```

### Left margin
```html_example
<div class="margin-beta-left">Margin beta left</div>
```

### Reset margin classes

- no-margin
- no-bottom-margin
- no-top-margin
- no-left-margin
- no-right-margin
- no-vertical-margin
- no-horizontal-margin



## Padding
These classes will give padding to any element. It will overrule the specified padding of the element.

Keys available:

- alpha (default: 10)
- beta (default: 20)
- gamma (default: 30)
- delta (default: 40)
- epsilon (default: 50)
- zeta (default: 80)
- eta (default: 100)

### Default padding
```html_example
<div class="padding-alpha">padding alpha all around</div>
```

### Left padding
```html_example
<div class="padding-beta-left">padding beta left</div>
```

### Reset padding classes

- no-padding
- no-bottom-padding
- no-top-padding
- no-left-padding
- no-right-padding
- no-vertical-padding
- no-horizontal-padding


## Float
Give a float or disable float for an element.

- float-left
- float-right
- float-none


## Round
Make something round, for an avatar for example.

- round

## Text align
Align text. Available classes are;

- text-align-left
- text-align-center
- text-align-right

You can also use these classes with a media query appendix.

- text-align-left-beta-and-up
- text-align-left-gamma-and-up


## Text transform

- text-transform-caps
- text-transform-thin
- text-transform-small


## Font style

- font-style-normal
- font-style-italic
- font-style-bold

## Position

- position-relative
- position-absolute

## Display

- display-inline
- display-inline-block
- display-block
- display-none

### Display table
Display table class needs some an extra child if you need to vertically center content.

```html_example
<div class="display-table block" style="height: 100px;">
    <div class="display-table__middle">
        This text will center align
    </div>
</div>
```

```html_example
<div class="display-table block" style="height: 100px;">
    <div class="display-table__bottom">
        This text will bottom align
    </div>
</div>
```

## Ellipsis
Pure CSS ellipsis class

```html_example
<div class="ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis rem, ullam magnam, esse numquam voluptatum culpa neque laboriosam officiis, sint animi beatae qui vero molestias aliquam dolore ea autem. Ipsam!
</div>
```


*/
/* Clearfix
==========
*/
.clearfix:before, .grid:before, [class|=column]:before, .flexible-grid-2:before, .flexible-grid-3:before, .flexible-grid-4:before, .flexible-grid-5:before, .container:before,
.container-beta:before,
.container-gamma:before, .btn-container:before, .btn-group:before, .btn-dropdown__list:before, form:before, .form__row:before, .top-bar__list:before, .menu-bar__list:before, .tile-grid:before, .locations-widget ul li a:before, .clearfix:after, .grid:after, [class|=column]:after, .flexible-grid-2:after, .flexible-grid-3:after, .flexible-grid-4:after, .flexible-grid-5:after, .container:after,
.container-beta:after,
.container-gamma:after, .btn-container:after, .btn-group:after, .btn-dropdown__list:after, form:after, .form__row:after, .top-bar__list:after, .menu-bar__list:after, .tile-grid:after, .locations-widget ul li a:after {
  content: '';
  display: table; }

.clearfix:after, .grid:after, [class|=column]:after, .flexible-grid-2:after, .flexible-grid-3:after, .flexible-grid-4:after, .flexible-grid-5:after, .container:after,
.container-beta:after,
.container-gamma:after, .btn-container:after, .btn-group:after, .btn-dropdown__list:after, form:after, .form__row:after, .top-bar__list:after, .menu-bar__list:after, .tile-grid:after, .locations-widget ul li a:after {
  clear: both; }

/* Hide classes
==========
*/
.hide {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (max-width: 600px) {
  .hide-alpha,
  .hide-alpha-and-beta {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 601px) and (max-width: 700px) {
  .hide-beta,
  .hide-alpha-and-beta {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 601px) {
  .hide-beta-and-up {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 701px) and (max-width: 800px) {
  .hide-gamma {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 701px) {
  .hide-gamma-and-up {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 801px) and (max-width: 999px) {
  .hide-delta {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 801px) {
  .hide-delta-and-up {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 1000px) and (max-width: 1200px) {
  .hide-epsilon {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 1000px) {
  .hide-epsilon-and-up {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important; } }

/*doc
---
title: Default lists
name: default_list
category: Typography
---

## Unordened list

```html_example
<ul>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</ul>
```

## Ordened list

```html_example
<ol>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</ol>
```

*/
ul {
  padding-left: 1.125rem;
  /* =18px */ }

ol {
  padding-left: 1.5rem;
  /* =24px */ }

/*doc
---
title: Unstyled list
name: unstyled_list
category: Typography
---

## Unordened list

```html_example
<ul class="list-unstyled">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</ul>
```

*/
.list-unstyled, .list-inline, .btn-group--inline, .list-dotted, .list-social, .list-last, .list-widget-last ul, .btn-group--block, .btn-dropdown__dropdown, .btn-dropdown__list, .parsley-container, .breadcrumbs > ul, .tabs > ul, .alphabetic__nav ul, .top-bar__list, .menu-bar__list, .mobile-menu__nav-list, .news-archive__list, .locations-widget ul, .links-widget ul {
  margin: 0;
  padding: 0;
  list-style-type: none; }

/*doc
---
title: Inline list
name: inline_list
category: Typography
---

```html_example
<ul class="list-inline">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</ul>
```

*/
.list-inline li, .btn-group--inline li {
  display: inline;
  margin-right: 0.625rem;
  /* =10px */ }

.list-inline--pagination {
  padding: 1.875rem 0; }
  .list-inline--pagination li {
    margin-right: 0; }
    .list-inline--pagination li a {
      color: #3C3036;
      padding: 0.4375rem 0.9375rem;
      border: 1px solid transparent;
      display: inline-block; }
    .list-inline--pagination li.active a, .list-inline--pagination li a:hover {
      color: #1DAFC5;
      border: 1px solid #1DAFC5; }

.page ul, .news-archive ul,
.page-post ul {
  list-style-type: none;
  margin: 0.9375rem 0;
  padding-left: 0; }
  .page ul li, .news-archive ul li,
  .page-post ul li {
    position: relative;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #3C3036;
    padding-left: 1.5625rem;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem; }
    .page ul li::before, .news-archive ul li::before,
    .page-post ul li::before {
      content: '\2022';
      color: #80356F;
      font-size: 0.875rem;
      position: absolute;
      left: 0;
      top: 5px; }

.page ul.list-nostyle li, .news-archive ul.list-nostyle li,
.page-post ul.list-nostyle li {
  padding-left: 0; }
  .page ul.list-nostyle li::before, .news-archive ul.list-nostyle li::before,
  .page-post ul.list-nostyle li::before {
    display: none; }

li.ss360-suggests::before {
  display: none; }

/* ==========================================================================
   Icon list
   ========================================================================== */
ul.list-arrow, .list-widget ul,
ul.list-icon {
  display: inline-block;
  list-style-type: none;
  margin: 0 0 16px 0;
  padding-left: 0; }
  ul.list-arrow li, .list-widget ul li,
  ul.list-icon li {
    position: relative;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #3C3036;
    padding-left: 1.5625rem;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    transition: color .2s ease; }
    ul.list-arrow li::before, .list-widget ul li::before,
    ul.list-icon li::before {
      color: #80356F;
      font-size: 1.25rem;
      position: absolute;
      left: 0;
      top: 6px;
      transition: color .2s ease; }
    ul.list-arrow li a, .list-widget ul li a,
    ul.list-icon li a {
      display: block;
      color: #3C3036;
      transition: color .2s ease; }
      ul.list-arrow li a:hover, .list-widget ul li a:hover,
      ul.list-icon li a:hover {
        color: #1DAFC5; }
        ul.list-arrow li a:hover::before, .list-widget ul li a:hover::before,
        ul.list-icon li a:hover::before {
          color: #1DAFC5; }
      ul.list-arrow li a:focus, .list-widget ul li a:focus,
      ul.list-icon li a:focus {
        outline: none; }
  ul.list-arrow--circled li,
  ul.list-icon--circled li {
    padding-left: 40px;
    margin-bottom: 10px; }
    ul.list-arrow--circled li:before,
    ul.list-icon--circled li:before {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      padding-left: 1px;
      border-radius: 50%;
      line-height: 1;
      color: white;
      background: #80356F;
      font-size: 16px; }
  ul.list-arrow--large li,
  ul.list-icon--large li {
    font-size: 18px; }
  ul.list-arrow--delta li a,
  ul.list-icon--delta li a {
    color: #80356F; }
  ul.list-arrow--alpha li, ul.list-arrow--alpha li::before, ul.list-arrow--alpha li a,
  ul.list-icon--alpha li,
  ul.list-icon--alpha li::before,
  ul.list-icon--alpha li a {
    color: white; }
  ul.list-arrow--alpha li:hover, ul.list-arrow--alpha li:hover::before, ul.list-arrow--alpha li:hover a,
  ul.list-icon--alpha li:hover,
  ul.list-icon--alpha li:hover::before,
  ul.list-icon--alpha li:hover a {
    color: white;
    opacity: 0.8; }

.list-newspaper li::before {
  content: '\e822' !important;
  font-family: 'icons';
  color: black !important;
  top: 6px !important;
  font-size: 16px !important; }

.list-newspaper a {
  display: inline-block; }
  .list-newspaper a:hover h5 {
    color: #1DAFC5 !important; }

.list-dotted li {
  border-top: 2px dashed #3C3036;
  padding-top: 1.25rem;
  /* =20px */
  padding-bottom: 1.25rem;
  /* =20px */ }
  .block .list-dotted li {
    border-color: white; }
  .list-dotted li:last-child {
    padding-bottom: 0; }

.list-social__item {
  display: inline-block;
  margin-right: 1.875rem;
  /* =30px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .list-social__item {
      margin-right: 3.125rem;
      /* =50px */ } }
  .list-social__item:last-child {
    margin-right: 0; }

.list-last li:last-of-type::before, .list-widget-last ul li:last-of-type::before {
  content: "\e82e"; }

ul.redactor-toolbar li:before {
  content: '' !important; }

/* Visually hidden
==========
*/
.visuallyhidden,
.show-screenreaders {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/* Margin classes
==========
*/
.margin-5 {
  margin: 0.3125rem !important;
  /* =5px */ }
  .margin-5-vertical {
    margin-top: 0.3125rem !important;
    /* =5px */
    margin-bottom: 0.3125rem !important;
    /* =5px */ }
  .margin-5-horizontal {
    margin-left: 0.3125rem !important;
    /* =5px */
    margin-right: 0.3125rem !important;
    /* =5px */ }
  .margin-5-right {
    margin-right: 0.3125rem !important;
    /* =5px */ }
  .margin-5-left {
    margin-left: 0.3125rem !important;
    /* =5px */ }
  .margin-5-top {
    margin-top: 0.3125rem !important;
    /* =5px */ }
  .margin-5-bottom {
    margin-bottom: 0.3125rem !important;
    /* =5px */ }

.margin-alpha {
  margin: 0.625rem !important;
  /* =10px */ }
  .margin-alpha-vertical {
    margin-top: 0.625rem !important;
    /* =10px */
    margin-bottom: 0.625rem !important;
    /* =10px */ }
  .margin-alpha-horizontal {
    margin-left: 0.625rem !important;
    /* =10px */
    margin-right: 0.625rem !important;
    /* =10px */ }
  .margin-alpha-right, .icon.icon--margin-alpha:before, ul.list-arrow li.icon--margin-alpha:before, .list-widget ul li.icon--margin-alpha:before,
  ul.list-icon li.icon--margin-alpha:before, .icon--margin-alpha.modal__close:before, .icon--margin-alpha.btn-dropdown__toggle:before, .sub-menu-link a.icon--margin-alpha:before, .icon--margin-alpha.link-icon:before {
    margin-right: 0.625rem !important;
    /* =10px */ }
  .margin-alpha-left, .icon-after.icon--margin-alpha:after, .menu-item--submenu .icon--margin-alpha.menu-link:after {
    margin-left: 0.625rem !important;
    /* =10px */ }
  .margin-alpha-top {
    margin-top: 0.625rem !important;
    /* =10px */ }
  .margin-alpha-bottom {
    margin-bottom: 0.625rem !important;
    /* =10px */ }

.margin-beta {
  margin: 1.25rem !important;
  /* =20px */ }
  .margin-beta-vertical {
    margin-top: 1.25rem !important;
    /* =20px */
    margin-bottom: 1.25rem !important;
    /* =20px */ }
  .margin-beta-horizontal {
    margin-left: 1.25rem !important;
    /* =20px */
    margin-right: 1.25rem !important;
    /* =20px */ }
  .margin-beta-right, .icon.icon--margin-beta:before, ul.list-arrow li.icon--margin-beta:before, .list-widget ul li.icon--margin-beta:before,
  ul.list-icon li.icon--margin-beta:before, .icon--margin-beta.modal__close:before, .icon--margin-beta.btn-dropdown__toggle:before, .sub-menu-link a.icon--margin-beta:before, .icon--margin-beta.link-icon:before {
    margin-right: 1.25rem !important;
    /* =20px */ }
  .margin-beta-left, .icon-after.icon--margin-beta:after, .menu-item--submenu .icon--margin-beta.menu-link:after {
    margin-left: 1.25rem !important;
    /* =20px */ }
  .margin-beta-top {
    margin-top: 1.25rem !important;
    /* =20px */ }
  .margin-beta-bottom {
    margin-bottom: 1.25rem !important;
    /* =20px */ }

.margin-gamma {
  margin: 1.875rem !important;
  /* =30px */ }
  .margin-gamma-vertical {
    margin-top: 1.875rem !important;
    /* =30px */
    margin-bottom: 1.875rem !important;
    /* =30px */ }
  .margin-gamma-horizontal {
    margin-left: 1.875rem !important;
    /* =30px */
    margin-right: 1.875rem !important;
    /* =30px */ }
  .margin-gamma-right {
    margin-right: 1.875rem !important;
    /* =30px */ }
  .margin-gamma-left {
    margin-left: 1.875rem !important;
    /* =30px */ }
  .margin-gamma-top {
    margin-top: 1.875rem !important;
    /* =30px */ }
  .margin-gamma-bottom {
    margin-bottom: 1.875rem !important;
    /* =30px */ }

.margin-delta {
  margin: 2.5rem !important;
  /* =40px */ }
  .margin-delta-vertical {
    margin-top: 2.5rem !important;
    /* =40px */
    margin-bottom: 2.5rem !important;
    /* =40px */ }
  .margin-delta-horizontal {
    margin-left: 2.5rem !important;
    /* =40px */
    margin-right: 2.5rem !important;
    /* =40px */ }
  .margin-delta-right {
    margin-right: 2.5rem !important;
    /* =40px */ }
  .margin-delta-left {
    margin-left: 2.5rem !important;
    /* =40px */ }
  .margin-delta-top {
    margin-top: 2.5rem !important;
    /* =40px */ }
  .margin-delta-bottom {
    margin-bottom: 2.5rem !important;
    /* =40px */ }

.margin-epsilon {
  margin: 3.125rem !important;
  /* =50px */ }
  .margin-epsilon-vertical {
    margin-top: 3.125rem !important;
    /* =50px */
    margin-bottom: 3.125rem !important;
    /* =50px */ }
  .margin-epsilon-horizontal {
    margin-left: 3.125rem !important;
    /* =50px */
    margin-right: 3.125rem !important;
    /* =50px */ }
  .margin-epsilon-right {
    margin-right: 3.125rem !important;
    /* =50px */ }
  .margin-epsilon-left {
    margin-left: 3.125rem !important;
    /* =50px */ }
  .margin-epsilon-top {
    margin-top: 3.125rem !important;
    /* =50px */ }
  .margin-epsilon-bottom {
    margin-bottom: 3.125rem !important;
    /* =50px */ }

.margin-zeta {
  margin: 5rem !important;
  /* =80px */ }
  .margin-zeta-vertical {
    margin-top: 5rem !important;
    /* =80px */
    margin-bottom: 5rem !important;
    /* =80px */ }
  .margin-zeta-horizontal {
    margin-left: 5rem !important;
    /* =80px */
    margin-right: 5rem !important;
    /* =80px */ }
  .margin-zeta-right {
    margin-right: 5rem !important;
    /* =80px */ }
  .margin-zeta-left {
    margin-left: 5rem !important;
    /* =80px */ }
  .margin-zeta-top {
    margin-top: 5rem !important;
    /* =80px */ }
  .margin-zeta-bottom {
    margin-bottom: 5rem !important;
    /* =80px */ }

.margin-eta {
  margin: 6.25rem !important;
  /* =100px */ }
  .margin-eta-vertical {
    margin-top: 6.25rem !important;
    /* =100px */
    margin-bottom: 6.25rem !important;
    /* =100px */ }
  .margin-eta-horizontal {
    margin-left: 6.25rem !important;
    /* =100px */
    margin-right: 6.25rem !important;
    /* =100px */ }
  .margin-eta-right {
    margin-right: 6.25rem !important;
    /* =100px */ }
  .margin-eta-left {
    margin-left: 6.25rem !important;
    /* =100px */ }
  .margin-eta-top {
    margin-top: 6.25rem !important;
    /* =100px */ }
  .margin-eta-bottom {
    margin-bottom: 6.25rem !important;
    /* =100px */ }

.no-margin {
  margin: 0 !important; }

.no-bottom-margin {
  margin-bottom: 0 !important; }

.no-top-margin {
  margin-top: 0 !important; }

.no-left-margin {
  margin-left: 0 !important; }

.no-right-margin {
  margin-right: 0 !important; }

.no-vertical-margin {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

.no-horizontal-margin {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.no-bottom-margin {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) {
    .no-bottom-margin-beta-and-up {
      margin-bottom: 0 !important; } }
  @media (min-width: 701px) {
    .no-bottom-margin-gamma-and-up {
      margin-bottom: 0 !important; } }
  @media (min-width: 801px) {
    .no-bottom-margin-delta-and-up {
      margin-bottom: 0 !important; } }
  @media (min-width: 1000px) {
    .no-bottom-margin-epsilon-and-up {
      margin-bottom: 0 !important; } }

/* Padding classes
==========
*/
.padding-alpha {
  padding: 0.625rem !important;
  /* =10px */ }
  .padding-alpha-vertical {
    padding-top: 0.625rem !important;
    /* =10px */
    padding-bottom: 0.625rem !important;
    /* =10px */ }
  .padding-alpha-horizontal {
    padding-left: 0.625rem !important;
    /* =10px */
    padding-right: 0.625rem !important;
    /* =10px */ }
  .padding-alpha-right {
    padding-right: 0.625rem !important;
    /* =10px */ }
  .padding-alpha-left {
    padding-left: 0.625rem !important;
    /* =10px */ }
  .padding-alpha-top {
    padding-top: 0.625rem !important;
    /* =10px */ }
  .padding-alpha-bottom {
    padding-bottom: 0.625rem !important;
    /* =10px */ }

.padding-beta {
  padding: 1.25rem !important;
  /* =20px */ }
  .padding-beta-vertical {
    padding-top: 1.25rem !important;
    /* =20px */
    padding-bottom: 1.25rem !important;
    /* =20px */ }
  .padding-beta-horizontal {
    padding-left: 1.25rem !important;
    /* =20px */
    padding-right: 1.25rem !important;
    /* =20px */ }
  .padding-beta-right {
    padding-right: 1.25rem !important;
    /* =20px */ }
  .padding-beta-left {
    padding-left: 1.25rem !important;
    /* =20px */ }
  .padding-beta-top {
    padding-top: 1.25rem !important;
    /* =20px */ }
  .padding-beta-bottom {
    padding-bottom: 1.25rem !important;
    /* =20px */ }

.padding-gamma {
  padding: 1.875rem !important;
  /* =30px */ }
  .padding-gamma-vertical {
    padding-top: 1.875rem !important;
    /* =30px */
    padding-bottom: 1.875rem !important;
    /* =30px */ }
  .padding-gamma-horizontal {
    padding-left: 1.875rem !important;
    /* =30px */
    padding-right: 1.875rem !important;
    /* =30px */ }
  .padding-gamma-right {
    padding-right: 1.875rem !important;
    /* =30px */ }
  .padding-gamma-left {
    padding-left: 1.875rem !important;
    /* =30px */ }
  .padding-gamma-top {
    padding-top: 1.875rem !important;
    /* =30px */ }
  .padding-gamma-bottom {
    padding-bottom: 1.875rem !important;
    /* =30px */ }

.padding-delta {
  padding: 2.5rem !important;
  /* =40px */ }
  .padding-delta-vertical {
    padding-top: 2.5rem !important;
    /* =40px */
    padding-bottom: 2.5rem !important;
    /* =40px */ }
  .padding-delta-horizontal {
    padding-left: 2.5rem !important;
    /* =40px */
    padding-right: 2.5rem !important;
    /* =40px */ }
  .padding-delta-right {
    padding-right: 2.5rem !important;
    /* =40px */ }
  .padding-delta-left {
    padding-left: 2.5rem !important;
    /* =40px */ }
  .padding-delta-top {
    padding-top: 2.5rem !important;
    /* =40px */ }
  .padding-delta-bottom {
    padding-bottom: 2.5rem !important;
    /* =40px */ }

.padding-epsilon {
  padding: 3.125rem !important;
  /* =50px */ }
  .padding-epsilon-vertical {
    padding-top: 3.125rem !important;
    /* =50px */
    padding-bottom: 3.125rem !important;
    /* =50px */ }
  .padding-epsilon-horizontal {
    padding-left: 3.125rem !important;
    /* =50px */
    padding-right: 3.125rem !important;
    /* =50px */ }
  .padding-epsilon-right {
    padding-right: 3.125rem !important;
    /* =50px */ }
  .padding-epsilon-left {
    padding-left: 3.125rem !important;
    /* =50px */ }
  .padding-epsilon-top {
    padding-top: 3.125rem !important;
    /* =50px */ }
  .padding-epsilon-bottom {
    padding-bottom: 3.125rem !important;
    /* =50px */ }

.padding-zeta {
  padding: 5rem !important;
  /* =80px */ }
  .padding-zeta-vertical {
    padding-top: 5rem !important;
    /* =80px */
    padding-bottom: 5rem !important;
    /* =80px */ }
  .padding-zeta-horizontal {
    padding-left: 5rem !important;
    /* =80px */
    padding-right: 5rem !important;
    /* =80px */ }
  .padding-zeta-right {
    padding-right: 5rem !important;
    /* =80px */ }
  .padding-zeta-left {
    padding-left: 5rem !important;
    /* =80px */ }
  .padding-zeta-top {
    padding-top: 5rem !important;
    /* =80px */ }
  .padding-zeta-bottom {
    padding-bottom: 5rem !important;
    /* =80px */ }

.padding-eta {
  padding: 6.25rem !important;
  /* =100px */ }
  .padding-eta-vertical {
    padding-top: 6.25rem !important;
    /* =100px */
    padding-bottom: 6.25rem !important;
    /* =100px */ }
  .padding-eta-horizontal {
    padding-left: 6.25rem !important;
    /* =100px */
    padding-right: 6.25rem !important;
    /* =100px */ }
  .padding-eta-right {
    padding-right: 6.25rem !important;
    /* =100px */ }
  .padding-eta-left {
    padding-left: 6.25rem !important;
    /* =100px */ }
  .padding-eta-top {
    padding-top: 6.25rem !important;
    /* =100px */ }
  .padding-eta-bottom {
    padding-bottom: 6.25rem !important;
    /* =100px */ }

.no-padding {
  padding: 0 !important; }

.no-bottom-padding {
  padding-bottom: 0 !important; }

.no-top-padding {
  padding-top: 0 !important; }

.no-left-padding {
  padding-left: 0 !important; }

.no-right-padding {
  padding-right: 0 !important; }

.no-vertical-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.no-horizontal-padding {
  padding-left: 0 !important;
  padding-right: 0 !important; }

/* Float
==========
*/
.float-left {
  float: left !important; }

.float-right {
  float: right !important; }

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

/* Round
==========
*/
.round {
  overflow: hidden;
  border-radius: 50%; }

/* Text align
==========
*/
.vertical-align-top {
  vertical-align: top !important; }

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

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

.vertical-align-baseline {
  vertical-align: baseline !important; }

.vertical-align-initial {
  vertical-align: initial !important; }

.vertical-align-inherit {
  vertical-align: inherit !important; }

/* Text align
==========
*/
.text-align-right {
  text-align: right; }
  .text-align-right-beta-and-up {
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 601px) {
      .text-align-right-beta-and-up {
        text-align: right; } }
  .text-align-right-gamma-and-up {
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 701px) {
      .text-align-right-gamma-and-up {
        text-align: right; } }

.text-align-left {
  text-align: left; }
  .text-align-left-beta-and-up {
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 601px) {
      .text-align-left-beta-and-up {
        text-align: left; } }
  .text-align-left-gamma-and-up {
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 701px) {
      .text-align-left-gamma-and-up {
        text-align: left; } }

.text-align-center {
  text-align: center; }
  .text-align-center-beta-and-up {
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 601px) {
      .text-align-center-beta-and-up {
        text-align: center; } }
  .text-align-center-gamma-and-up {
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 701px) {
      .text-align-center-gamma-and-up {
        text-align: center; } }

/* Text transform
==========
*/
.text-transform-caps {
  text-transform: caps; }

.text-transform-thin {
  text-transform: thin; }

.text-transform-small {
  text-transform: small; }

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

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

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

/* Font style
==========
*/
.font-style-normal {
  font-style: normal !important; }

.font-style-italic {
  font-style: italic !important; }

/* Font style
==========
*/
.font-weight-100 {
  font-weight: 100 !important; }

.font-weight-200 {
  font-weight: 200 !important; }

.font-weight-300 {
  font-weight: 300 !important; }

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

.font-weight-500 {
  font-weight: 500 !important; }

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

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

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

/* Position
==========
*/
.position-relative {
  position: relative !important; }

.position-absolute {
  position: absolute !important; }

/* Display
==========
*/
.display-flex {
  display: flex !important; }

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

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

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

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

.display-table {
  display: table !important; }
  .display-table__middle, .display-table__bottom {
    display: table-cell !important; }
  .display-table__middle {
    vertical-align: middle !important; }
  .display-table__bottom {
    vertical-align: bottom !important; }

/* Ellipsis
==========
*/
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/* CSS columns
==========
*/
.css-columns-2,
.css-columns-3,
.css-columns-4 {
  column-gap: 1.25rem;
  /* =20px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .css-columns-2,
    .css-columns-3,
    .css-columns-4 {
      column-gap: 2.5rem;
      /* =40px */ } }

.css-columns-2 {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .css-columns-2 {
      column-count: 2; } }

.css-columns-3 {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .css-columns-3 {
      column-count: 3; } }

.css-columns-4 {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .css-columns-4 {
      column-count: 4; } }

/*doc
---
title: CSS columns
name: css_columns
category: Structure
---

Pure CSS columns. Classes available for 2, 3 and 4 columns.

```html_example
<p class="css-columns-4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique animi cupiditate inventore repellendus placeat voluptate at nobis assumenda! Accusantium aspernatur id voluptatum itaque autem at dolore eligendi quisquam vitae dolor?
</p>
```

*/
/* Flex
==========
*/
.flex-direction-column {
  flex-direction: column !important; }

/* Animations
==========
*/
/* Animated
==========
Add this class to an element to fire an animation.
*/
.animated {
  animation-duration: 1s;
  animation-fill-mode: both; }

/* Shake animation
==========
*/
@keyframes shake {
  0%, 100% {
    transform: translate3d(0, 0, 0); }
  20%, 60% {
    transform: translate3d(-10px, 0, 0); }
  40%, 80% {
    transform: translate3d(10px, 0, 0); } }

.shake,
.animation-shake {
  animation-name: shake; }

/* Mandatory components
==========
*/
/* Grid
==========
*/
.grid {
  position: relative; }

[class|=column] {
  width: 100%;
  margin-bottom: 7.1428571429%;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) {
    [class|=column] {
      float: left;
      margin-left: 7.1428571429%; } }
  [class|=column]:first-child {
    margin-left: 0; }
  .grid--no-gutters [class|=column] {
    margin: 0; }
  .grid--no-horizontal-gutters [class|=column] {
    margin-left: 0; }
  .grid--no-vertical-gutters [class|=column] {
    margin-bottom: 0; }

[class|=column-alpha],
[class|=column-alpha-and-up],
[class|=column-beta],
[class|=column-beta-and-up],
[class|=column-gamma],
[class|=column-gamma-and-up],
[class|=column-delta],
[class|=column-delta-and-up],
[class|=column-epsilon],
[class|=column-epsilon-and-up],
[class|=column-zeta],
[class|=column-zeta-and-up],
[class|=column-eta],
[class|=column-eta-and-up] {
  float: left;
  margin-left: 7.1428571429%; }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 601px) {
  .column-beta-and-up--first {
    margin-left: 0 !important; }
  .column-1,
  .column-beta-and-up-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-1, .grid--no-gutters
    .column-beta-and-up-1 {
      width: 8.3333333333%; }
  .pre-1,
  .pre-1:first-child {
    margin-left: 8.9285714286%; }
  .post-1,
  .post-1:first-child {
    margin-right: 8.9285714286%; }
  .column-2,
  .column-beta-and-up-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-2, .grid--no-gutters
    .column-beta-and-up-2 {
      width: 16.6666666667%; }
  .pre-2,
  .pre-2:first-child {
    margin-left: 17.8571428571%; }
  .post-2,
  .post-2:first-child {
    margin-right: 17.8571428571%; }
  .column-3,
  .column-beta-and-up-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-3, .grid--no-gutters
    .column-beta-and-up-3 {
      width: 25%; }
  .pre-3,
  .pre-3:first-child {
    margin-left: 26.7857142857%; }
  .post-3,
  .post-3:first-child {
    margin-right: 26.7857142857%; }
  .column-4,
  .column-beta-and-up-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-4, .grid--no-gutters
    .column-beta-and-up-4 {
      width: 33.3333333333%; }
  .pre-4,
  .pre-4:first-child {
    margin-left: 35.7142857143%; }
  .post-4,
  .post-4:first-child {
    margin-right: 35.7142857143%; }
  .column-5,
  .column-beta-and-up-5 {
    width: 37.5%; }
    .grid--no-gutters .column-5, .grid--no-gutters
    .column-beta-and-up-5 {
      width: 41.6666666667%; }
  .pre-5,
  .pre-5:first-child {
    margin-left: 44.6428571429%; }
  .post-5,
  .post-5:first-child {
    margin-right: 44.6428571429%; }
  .column-6,
  .column-beta-and-up-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-6, .grid--no-gutters
    .column-beta-and-up-6 {
      width: 50%; }
  .pre-6,
  .pre-6:first-child {
    margin-left: 53.5714285714%; }
  .post-6,
  .post-6:first-child {
    margin-right: 53.5714285714%; }
  .column-7,
  .column-beta-and-up-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-7, .grid--no-gutters
    .column-beta-and-up-7 {
      width: 58.3333333333%; }
  .pre-7,
  .pre-7:first-child {
    margin-left: 62.5%; }
  .post-7,
  .post-7:first-child {
    margin-right: 62.5%; }
  .column-8,
  .column-beta-and-up-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-8, .grid--no-gutters
    .column-beta-and-up-8 {
      width: 66.6666666667%; }
  .pre-8,
  .pre-8:first-child {
    margin-left: 71.4285714286%; }
  .post-8,
  .post-8:first-child {
    margin-right: 71.4285714286%; }
  .column-9,
  .column-beta-and-up-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-9, .grid--no-gutters
    .column-beta-and-up-9 {
      width: 75%; }
  .pre-9,
  .pre-9:first-child {
    margin-left: 80.3571428571%; }
  .post-9,
  .post-9:first-child {
    margin-right: 80.3571428571%; }
  .column-10,
  .column-beta-and-up-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-10, .grid--no-gutters
    .column-beta-and-up-10 {
      width: 83.3333333333%; }
  .pre-10,
  .pre-10:first-child {
    margin-left: 89.2857142857%; }
  .post-10,
  .post-10:first-child {
    margin-right: 89.2857142857%; }
  .column-11,
  .column-beta-and-up-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-11, .grid--no-gutters
    .column-beta-and-up-11 {
      width: 91.6666666667%; }
  .pre-11,
  .pre-11:first-child {
    margin-left: 98.2142857143%; }
  .post-11,
  .post-11:first-child {
    margin-right: 98.2142857143%; }
  .column-12,
  .column-beta-and-up-12 {
    width: 100%; }
    .grid--no-gutters .column-12, .grid--no-gutters
    .column-beta-and-up-12 {
      width: 100%; }
  .pre-12,
  .pre-12:first-child {
    margin-left: 107.142857143%; }
  .post-12,
  .post-12:first-child {
    margin-right: 107.142857143%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (max-width: 600px) {
  .column-alpha--first {
    margin-left: 0 !important; }
  .column-alpha-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-alpha-1 {
      width: 8.3333333333%; }
  .column-alpha-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-alpha-2 {
      width: 16.6666666667%; }
  .column-alpha-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-alpha-3 {
      width: 25%; }
  .column-alpha-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-alpha-4 {
      width: 33.3333333333%; }
  .column-alpha-5 {
    width: 37.5%; }
    .grid--no-gutters .column-alpha-5 {
      width: 41.6666666667%; }
  .column-alpha-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-alpha-6 {
      width: 50%; }
  .column-alpha-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-alpha-7 {
      width: 58.3333333333%; }
  .column-alpha-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-alpha-8 {
      width: 66.6666666667%; }
  .column-alpha-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-alpha-9 {
      width: 75%; }
  .column-alpha-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-alpha-10 {
      width: 83.3333333333%; }
  .column-alpha-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-alpha-11 {
      width: 91.6666666667%; }
  .column-alpha-12 {
    width: 100%; }
    .grid--no-gutters .column-alpha-12 {
      width: 100%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 0px) {
  .column-alpha-and-up--first {
    margin-left: 0 !important; }
  .column-alpha-and-up-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-alpha-and-up-1 {
      width: 8.3333333333%; }
  .column-alpha-and-up-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-alpha-and-up-2 {
      width: 16.6666666667%; }
  .column-alpha-and-up-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-alpha-and-up-3 {
      width: 25%; }
  .column-alpha-and-up-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-alpha-and-up-4 {
      width: 33.3333333333%; }
  .column-alpha-and-up-5 {
    width: 37.5%; }
    .grid--no-gutters .column-alpha-and-up-5 {
      width: 41.6666666667%; }
  .column-alpha-and-up-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-alpha-and-up-6 {
      width: 50%; }
  .column-alpha-and-up-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-alpha-and-up-7 {
      width: 58.3333333333%; }
  .column-alpha-and-up-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-alpha-and-up-8 {
      width: 66.6666666667%; }
  .column-alpha-and-up-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-alpha-and-up-9 {
      width: 75%; }
  .column-alpha-and-up-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-alpha-and-up-10 {
      width: 83.3333333333%; }
  .column-alpha-and-up-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-alpha-and-up-11 {
      width: 91.6666666667%; }
  .column-alpha-and-up-12 {
    width: 100%; }
    .grid--no-gutters .column-alpha-and-up-12 {
      width: 100%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 601px) and (max-width: 700px) {
  .column-beta--first {
    margin-left: 0 !important; }
  .column-beta-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-beta-1 {
      width: 8.3333333333%; }
  .column-beta-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-beta-2 {
      width: 16.6666666667%; }
  .column-beta-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-beta-3 {
      width: 25%; }
  .column-beta-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-beta-4 {
      width: 33.3333333333%; }
  .column-beta-5 {
    width: 37.5%; }
    .grid--no-gutters .column-beta-5 {
      width: 41.6666666667%; }
  .column-beta-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-beta-6 {
      width: 50%; }
  .column-beta-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-beta-7 {
      width: 58.3333333333%; }
  .column-beta-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-beta-8 {
      width: 66.6666666667%; }
  .column-beta-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-beta-9 {
      width: 75%; }
  .column-beta-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-beta-10 {
      width: 83.3333333333%; }
  .column-beta-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-beta-11 {
      width: 91.6666666667%; }
  .column-beta-12 {
    width: 100%; }
    .grid--no-gutters .column-beta-12 {
      width: 100%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 701px) and (max-width: 800px) {
  .column-gamma--first {
    margin-left: 0 !important; }
  .column-gamma-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-gamma-1 {
      width: 8.3333333333%; }
  .column-gamma-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-gamma-2 {
      width: 16.6666666667%; }
  .column-gamma-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-gamma-3 {
      width: 25%; }
  .column-gamma-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-gamma-4 {
      width: 33.3333333333%; }
  .column-gamma-5 {
    width: 37.5%; }
    .grid--no-gutters .column-gamma-5 {
      width: 41.6666666667%; }
  .column-gamma-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-gamma-6 {
      width: 50%; }
  .column-gamma-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-gamma-7 {
      width: 58.3333333333%; }
  .column-gamma-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-gamma-8 {
      width: 66.6666666667%; }
  .column-gamma-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-gamma-9 {
      width: 75%; }
  .column-gamma-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-gamma-10 {
      width: 83.3333333333%; }
  .column-gamma-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-gamma-11 {
      width: 91.6666666667%; }
  .column-gamma-12 {
    width: 100%; }
    .grid--no-gutters .column-gamma-12 {
      width: 100%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 701px) {
  .column-gamma-and-up--first {
    margin-left: 0 !important; }
  .column-gamma-and-up-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-gamma-and-up-1 {
      width: 8.3333333333%; }
  .column-gamma-and-up-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-gamma-and-up-2 {
      width: 16.6666666667%; }
  .column-gamma-and-up-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-gamma-and-up-3 {
      width: 25%; }
  .column-gamma-and-up-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-gamma-and-up-4 {
      width: 33.3333333333%; }
  .column-gamma-and-up-5 {
    width: 37.5%; }
    .grid--no-gutters .column-gamma-and-up-5 {
      width: 41.6666666667%; }
  .column-gamma-and-up-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-gamma-and-up-6 {
      width: 50%; }
  .column-gamma-and-up-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-gamma-and-up-7 {
      width: 58.3333333333%; }
  .column-gamma-and-up-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-gamma-and-up-8 {
      width: 66.6666666667%; }
  .column-gamma-and-up-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-gamma-and-up-9 {
      width: 75%; }
  .column-gamma-and-up-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-gamma-and-up-10 {
      width: 83.3333333333%; }
  .column-gamma-and-up-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-gamma-and-up-11 {
      width: 91.6666666667%; }
  .column-gamma-and-up-12 {
    width: 100%; }
    .grid--no-gutters .column-gamma-and-up-12 {
      width: 100%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 801px) and (max-width: 999px) {
  .column-delta--first {
    margin-left: 0 !important; }
  .column-delta-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-delta-1 {
      width: 8.3333333333%; }
  .column-delta-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-delta-2 {
      width: 16.6666666667%; }
  .column-delta-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-delta-3 {
      width: 25%; }
  .column-delta-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-delta-4 {
      width: 33.3333333333%; }
  .column-delta-5 {
    width: 37.5%; }
    .grid--no-gutters .column-delta-5 {
      width: 41.6666666667%; }
  .column-delta-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-delta-6 {
      width: 50%; }
  .column-delta-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-delta-7 {
      width: 58.3333333333%; }
  .column-delta-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-delta-8 {
      width: 66.6666666667%; }
  .column-delta-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-delta-9 {
      width: 75%; }
  .column-delta-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-delta-10 {
      width: 83.3333333333%; }
  .column-delta-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-delta-11 {
      width: 91.6666666667%; }
  .column-delta-12 {
    width: 100%; }
    .grid--no-gutters .column-delta-12 {
      width: 100%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 801px) {
  .column-delta-and-up--first {
    margin-left: 0 !important; }
  .column-delta-and-up-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-delta-and-up-1 {
      width: 8.3333333333%; }
  .column-delta-and-up-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-delta-and-up-2 {
      width: 16.6666666667%; }
  .column-delta-and-up-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-delta-and-up-3 {
      width: 25%; }
  .column-delta-and-up-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-delta-and-up-4 {
      width: 33.3333333333%; }
  .column-delta-and-up-5 {
    width: 37.5%; }
    .grid--no-gutters .column-delta-and-up-5 {
      width: 41.6666666667%; }
  .column-delta-and-up-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-delta-and-up-6 {
      width: 50%; }
  .column-delta-and-up-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-delta-and-up-7 {
      width: 58.3333333333%; }
  .column-delta-and-up-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-delta-and-up-8 {
      width: 66.6666666667%; }
  .column-delta-and-up-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-delta-and-up-9 {
      width: 75%; }
  .column-delta-and-up-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-delta-and-up-10 {
      width: 83.3333333333%; }
  .column-delta-and-up-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-delta-and-up-11 {
      width: 91.6666666667%; }
  .column-delta-and-up-12 {
    width: 100%; }
    .grid--no-gutters .column-delta-and-up-12 {
      width: 100%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 1000px) and (max-width: 1200px) {
  .column-epsilon--first {
    margin-left: 0 !important; }
  .column-epsilon-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-epsilon-1 {
      width: 8.3333333333%; }
  .column-epsilon-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-epsilon-2 {
      width: 16.6666666667%; }
  .column-epsilon-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-epsilon-3 {
      width: 25%; }
  .column-epsilon-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-epsilon-4 {
      width: 33.3333333333%; }
  .column-epsilon-5 {
    width: 37.5%; }
    .grid--no-gutters .column-epsilon-5 {
      width: 41.6666666667%; }
  .column-epsilon-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-epsilon-6 {
      width: 50%; }
  .column-epsilon-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-epsilon-7 {
      width: 58.3333333333%; }
  .column-epsilon-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-epsilon-8 {
      width: 66.6666666667%; }
  .column-epsilon-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-epsilon-9 {
      width: 75%; }
  .column-epsilon-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-epsilon-10 {
      width: 83.3333333333%; }
  .column-epsilon-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-epsilon-11 {
      width: 91.6666666667%; }
  .column-epsilon-12 {
    width: 100%; }
    .grid--no-gutters .column-epsilon-12 {
      width: 100%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 1000px) {
  .column-epsilon-and-up--first {
    margin-left: 0 !important; }
  .column-epsilon-and-up-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-epsilon-and-up-1 {
      width: 8.3333333333%; }
  .column-epsilon-and-up-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-epsilon-and-up-2 {
      width: 16.6666666667%; }
  .column-epsilon-and-up-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-epsilon-and-up-3 {
      width: 25%; }
  .column-epsilon-and-up-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-epsilon-and-up-4 {
      width: 33.3333333333%; }
  .column-epsilon-and-up-5 {
    width: 37.5%; }
    .grid--no-gutters .column-epsilon-and-up-5 {
      width: 41.6666666667%; }
  .column-epsilon-and-up-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-epsilon-and-up-6 {
      width: 50%; }
  .column-epsilon-and-up-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-epsilon-and-up-7 {
      width: 58.3333333333%; }
  .column-epsilon-and-up-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-epsilon-and-up-8 {
      width: 66.6666666667%; }
  .column-epsilon-and-up-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-epsilon-and-up-9 {
      width: 75%; }
  .column-epsilon-and-up-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-epsilon-and-up-10 {
      width: 83.3333333333%; }
  .column-epsilon-and-up-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-epsilon-and-up-11 {
      width: 91.6666666667%; }
  .column-epsilon-and-up-12 {
    width: 100%; }
    .grid--no-gutters .column-epsilon-and-up-12 {
      width: 100%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 1201px) and (max-width: 1400px) {
  .column-zeta--first {
    margin-left: 0 !important; }
  .column-zeta-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-zeta-1 {
      width: 8.3333333333%; }
  .column-zeta-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-zeta-2 {
      width: 16.6666666667%; }
  .column-zeta-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-zeta-3 {
      width: 25%; }
  .column-zeta-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-zeta-4 {
      width: 33.3333333333%; }
  .column-zeta-5 {
    width: 37.5%; }
    .grid--no-gutters .column-zeta-5 {
      width: 41.6666666667%; }
  .column-zeta-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-zeta-6 {
      width: 50%; }
  .column-zeta-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-zeta-7 {
      width: 58.3333333333%; }
  .column-zeta-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-zeta-8 {
      width: 66.6666666667%; }
  .column-zeta-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-zeta-9 {
      width: 75%; }
  .column-zeta-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-zeta-10 {
      width: 83.3333333333%; }
  .column-zeta-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-zeta-11 {
      width: 91.6666666667%; }
  .column-zeta-12 {
    width: 100%; }
    .grid--no-gutters .column-zeta-12 {
      width: 100%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 1201px) {
  .column-zeta-and-up--first {
    margin-left: 0 !important; }
  .column-zeta-and-up-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-zeta-and-up-1 {
      width: 8.3333333333%; }
  .column-zeta-and-up-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-zeta-and-up-2 {
      width: 16.6666666667%; }
  .column-zeta-and-up-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-zeta-and-up-3 {
      width: 25%; }
  .column-zeta-and-up-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-zeta-and-up-4 {
      width: 33.3333333333%; }
  .column-zeta-and-up-5 {
    width: 37.5%; }
    .grid--no-gutters .column-zeta-and-up-5 {
      width: 41.6666666667%; }
  .column-zeta-and-up-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-zeta-and-up-6 {
      width: 50%; }
  .column-zeta-and-up-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-zeta-and-up-7 {
      width: 58.3333333333%; }
  .column-zeta-and-up-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-zeta-and-up-8 {
      width: 66.6666666667%; }
  .column-zeta-and-up-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-zeta-and-up-9 {
      width: 75%; }
  .column-zeta-and-up-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-zeta-and-up-10 {
      width: 83.3333333333%; }
  .column-zeta-and-up-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-zeta-and-up-11 {
      width: 91.6666666667%; }
  .column-zeta-and-up-12 {
    width: 100%; }
    .grid--no-gutters .column-zeta-and-up-12 {
      width: 100%; } }

/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
/**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
@media (min-width: 1401px) {
  .column-eta-and-up--first {
    margin-left: 0 !important; }
  .column-eta-and-up-1 {
    width: 1.7857142857%; }
    .grid--no-gutters .column-eta-and-up-1 {
      width: 8.3333333333%; }
  .column-eta-and-up-2 {
    width: 10.7142857143%; }
    .grid--no-gutters .column-eta-and-up-2 {
      width: 16.6666666667%; }
  .column-eta-and-up-3 {
    width: 19.6428571429%; }
    .grid--no-gutters .column-eta-and-up-3 {
      width: 25%; }
  .column-eta-and-up-4 {
    width: 28.5714285714%; }
    .grid--no-gutters .column-eta-and-up-4 {
      width: 33.3333333333%; }
  .column-eta-and-up-5 {
    width: 37.5%; }
    .grid--no-gutters .column-eta-and-up-5 {
      width: 41.6666666667%; }
  .column-eta-and-up-6 {
    width: 46.4285714286%; }
    .grid--no-gutters .column-eta-and-up-6 {
      width: 50%; }
  .column-eta-and-up-7 {
    width: 55.3571428571%; }
    .grid--no-gutters .column-eta-and-up-7 {
      width: 58.3333333333%; }
  .column-eta-and-up-8 {
    width: 64.2857142857%; }
    .grid--no-gutters .column-eta-and-up-8 {
      width: 66.6666666667%; }
  .column-eta-and-up-9 {
    width: 73.2142857143%; }
    .grid--no-gutters .column-eta-and-up-9 {
      width: 75%; }
  .column-eta-and-up-10 {
    width: 82.1428571429%; }
    .grid--no-gutters .column-eta-and-up-10 {
      width: 83.3333333333%; }
  .column-eta-and-up-11 {
    width: 91.0714285714%; }
    .grid--no-gutters .column-eta-and-up-11 {
      width: 91.6666666667%; }
  .column-eta-and-up-12 {
    width: 100%; }
    .grid--no-gutters .column-eta-and-up-12 {
      width: 100%; } }

.column-centered,
.column-centered:first-child {
  float: none;
  margin-left: auto;
  margin-right: auto; }

/*doc
---
title: Grid
name: grid
category: Structure
---

The default grid is a 12 columns grid which you can change in the settings, even as the gutter width.

## Just a basic grid

```html_example
<div class="grid">
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
</div>
```

## No gutters

```html_example
<div class="grid grid--no-gutters">
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
</div>
```

## Breakpoint specific
```html_example
<div class="grid">
    <div class="column-alpha-6 column-beta-12 column-gamma-and-up-3">
        <div class="card">
            <div class="card__content">Lorem ipsum dolor sit amet</div>
        </div>
    </div>
    <div class="column-alpha-6 column-beta-4 column-beta--first column-gamma-and-up-3">
        <div class="card">
            <div class="card__content">Lorem ipsum dolor sit amet</div>
        </div>
    </div>
    <div class="column-alpha-6 column-alpha--first column-beta-4 column-gamma-and-up-3">
        <div class="card">
            <div class="card__content">Lorem ipsum dolor sit amet</div>
        </div>
    </div>
    <div class="column-alpha-6 column-beta-4 column-gamma-and-up-3">
        <div class="card">
            <div class="card__content">Lorem ipsum dolor sit amet</div>
        </div>
    </div>
</div>
```

## Centered
```html_example
<div class="grid">
    <div class="column-6 column-centered">
        <div class="card">
            <div class="card__content">column-6</div>
        </div>
    </div>
</div>
```

## Pre class
```html_example
<div class="grid">
    <div class="column-6 pre-2">
        <div class="card">
            <div class="card__content">column-6 pre-2</div>
        </div>
    </div>
</div>
```

## Post class
```html_example
<div class="grid">
    <div class="column-6 post-2">
        <div class="card">
            <div class="card__content">column-7 post-1</div>
        </div>
    </div>
    <div class="column-4">
        <div class="card">
            <div class="card__content">column-4</div>
        </div>
    </div>
</div>
```

*/
/* Flexible grid
==========
*/
.flexible-grid-2 {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .flexible-grid-2 {
      margin-left: -2%;
      margin-right: -2%; } }
  .flexible-grid-2 > * {
    margin-bottom: 6%; }
  @media (min-width: 701px) {
    .flexible-grid-2 > * {
      width: 46%;
      margin-left: 2%;
      margin-right: 2%;
      float: left; } }

.flexible-grid-3 {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) {
    .flexible-grid-3 {
      margin-left: -2%;
      margin-right: -2%; } }
  .flexible-grid-3 > * {
    margin-bottom: 6%; }
  @media (min-width: 701px) {
    .flexible-grid-3 > * {
      width: 46%;
      margin-left: 2%;
      margin-right: 2%;
      float: left; }
    .flexible-grid-3 > .flexible-grid__large {
      width: 96%; } }
  @media (min-width: 1000px) {
    .flexible-grid-3 > *,
    .flexible-grid-3 > .flexible-grid__large {
      width: 29.333339%;
      margin-left: 2%;
      margin-right: 2%;
      float: left; } }

.flexible-grid-4 {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) {
    .flexible-grid-4 {
      margin-left: -2%;
      margin-right: -2%; } }
  .flexible-grid-4 > * {
    margin-bottom: 6%; }
  @media (min-width: 601px) {
    .flexible-grid-4 > * {
      width: 46%;
      margin-left: 2%;
      margin-right: 2%;
      float: left; } }
  @media (min-width: 1000px) {
    .flexible-grid-4 > * {
      width: 21%;
      margin-left: 2%;
      margin-right: 2%;
      float: left; } }

.flexible-grid-5 {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) {
    .flexible-grid-5 {
      margin-left: -2%;
      margin-right: -2%; } }
  .flexible-grid-5 > * {
    margin-bottom: 6%; }
  @media (min-width: 701px) {
    .flexible-grid-5 > * {
      width: 29.3333333395%;
      margin-left: 2%;
      margin-right: 2%;
      float: left; }
    .flexible-grid-5 > .flexible-grid__large {
      width: 58.666679%; } }
  @media (min-width: 1201px) {
    .flexible-grid-5 > * {
      width: 16%;
      margin-left: 2%;
      margin-right: 2%;
      float: left; }
    .flexible-grid-5 > .flexible-grid__large {
      width: 36%; } }

/*doc
---
title: Flexible grid
name: flexible_grid
category: Structure
---

This module can be used to fancy yourself a flexible grid with evenly height elements, just drop these elements in the flexible grid element. 
It's important to note twice that these elements need the same height, or you'll get in trouble. You could use the equalize module if you have variable content.

```html_example
<div class="flexible-grid-3">
    <div class="card">
        <div class="card__header card__header--beta">
            <div class="card__title">Some title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
    <div class="card">
        <div class="card__header card__header--gamma">
            <div class="card__title">Some title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
    <div class="card">
        <div class="card__header card__header--delta">
            <div class="card__title">Some title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
    <div class="card">
        <div class="card__header card__header--beta">
            <div class="card__title">Some title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
    <div class="card">
        <div class="card__header card__header--gamma">
            <div class="card__title">Some title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
    <div class="card">
        <div class="card__header card__header--delta">
            <div class="card__title">Some title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
</div>
```

*/
/* Layout
==========
*/
*,
:before,
:after {
  box-sizing: border-box; }

html,
body {
  height: 100%; }

html {
  background-color: #f6f6f6;
  overflow-x: hidden; }

body {
  font-family: 'Lato', sans-serif;
  color: #3C3036;
  font-weight: 400;
  transition: opacity 0.05s ease-in; }

.background {
  min-height: 100%; }

.full-width {
  width: 100%; }

.full-height {
  height: 100%; }

.text-large,
.text-large p {
  font-size: 1.75rem;
  /* =28px */
  line-height: 2.375rem;
  /* =38px */ }

.text-medium,
.text-medium p {
  font-size: 1.5rem;
  /* =24px */
  line-height: 2.125rem;
  /* =34px */ }

.text-intro,
.text-intro p {
  font-size: 1.25rem;
  /* =20px */
  line-height: 1.625rem;
  /* =26px */ }

.text {
  font-size: 1.25rem;
  /* =20px */
  line-height: 1.875rem;
  /* =30px */ }

.text-xmedium {
  font-size: 1.125rem;
  /* =18px */
  line-height: 1.625rem;
  /* =26px */ }

.text-small {
  font-size: 0.875rem;
  /* =14px */ }

.text-xsmall {
  font-size: 0.75rem;
  /* =12px */
  line-height: 1.5; }

a {
  color: #1DAFC5;
  text-decoration: none;
  display: inline;
  cursor: pointer;
  transition: all 0.2s; }
  a:hover {
    color: #3C3036; }

button {
  transition: all 0.2s; }

img {
  max-width: 100%; }

address {
  font-style: normal; }

p,
.paragraph {
  margin-top: 0;
  line-height: 26px;
  font-weight: 300;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.1); }

.content-image {
  margin-bottom: 1em; }
  .content-image-description {
    margin-top: .5em;
    font-size: 0.875rem;
    /* =14px */
    font-weight: bold; }

ol,
ul,
table {
  line-height: 160%; }

.disable-hover,
.disable-hover * {
  pointer-events: none !important; }

.disable-transitions,
.disable-transitions * {
  transition: none !important; }

/* Container
==========
*/
.container,
.container-beta,
.container-gamma {
  margin-left: auto;
  margin-right: auto;
  min-width: 20rem;
  /* =320px */
  padding-left: 1.25rem;
  /* =20px */
  padding-right: 1.25rem;
  /* =20px */
  margin-top: 0;
  /* =0 */
  margin-bottom: 0;
  /* =0 */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .container,
    .container-beta,
    .container-gamma {
      padding-left: 2.5rem;
      /* =40px */
      padding-right: 2.5rem;
      /* =40px */ } }
  .container .container,
  .container .container-beta,
  .container .container-gamma,
  .container-beta .container,
  .container-beta .container-beta,
  .container-beta .container-gamma,
  .container-gamma .container,
  .container-gamma .container-beta,
  .container-gamma .container-gamma {
    min-width: auto; }

.container {
  max-width: 78.75rem;
  /* =1260px */ }

.container-beta {
  max-width: 73.75rem;
  /* =1180px */ }

.container-gamma {
  max-width: 66.25rem;
  /* =1060px */ }

.container--dashed {
  border-top: 4px dashed rgba(177, 177, 177, 0.4); }

/*doc
---
title: Container
name: container
category: Structure
---

There are two containers available, 'container' and 'container-beta'. These containers will horizontally center the block with a specific min and max-width. Widths can be specified in the settings.scss file.

    <div class="container">
        your content
    </div>

*/
/* Sections
==========
*/
.section {
  color: white;
  padding-top: 1.875rem;
  /* =30px */
  padding-bottom: 1.875rem;
  /* =30px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .section {
      padding-top: 3.75rem;
      /* =60px */
      padding-bottom: 3.75rem;
      /* =60px */ } }
  .section--light {
    background: white; }
    .section--light.footer *,
    .section--light.footer a {
      color: white; }
    .section--light.footer .back-to-top,
    .section--light.footer .list-social .btn-icon:before {
      color: white; }
  .section--alpha {
    background: #f6f6f6; }
    .section--alpha.footer *,
    .section--alpha.footer a {
      color: white; }
    .section--alpha.footer .back-to-top,
    .section--alpha.footer .list-social .btn-icon:before {
      color: #f6f6f6; }
  .section--beta {
    background: #E67408; }
    .section--beta.footer *,
    .section--beta.footer a {
      color: white; }
    .section--beta.footer .back-to-top,
    .section--beta.footer .list-social .btn-icon:before {
      color: #E67408; }
  .section--gamma {
    background: #1DAFC5; }
    .section--gamma.footer *,
    .section--gamma.footer a {
      color: white; }
    .section--gamma.footer .back-to-top,
    .section--gamma.footer .list-social .btn-icon:before {
      color: #1DAFC5; }
  .section--delta {
    background: #80356F; }
    .section--delta.footer *,
    .section--delta.footer a {
      color: white; }
    .section--delta.footer .back-to-top,
    .section--delta.footer .list-social .btn-icon:before {
      color: #80356F; }
  .section--epsilon {
    background: #ED3D6B; }
    .section--epsilon.footer *,
    .section--epsilon.footer a {
      color: white; }
    .section--epsilon.footer .back-to-top,
    .section--epsilon.footer .list-social .btn-icon:before {
      color: #ED3D6B; }
  .section--kappa {
    background: #8DC63F; }
    .section--kappa.footer *,
    .section--kappa.footer a {
      color: white; }
    .section--kappa.footer .back-to-top,
    .section--kappa.footer .list-social .btn-icon:before {
      color: #8DC63F; }
  .section--delta-dark {
    background: #561447; }
    .section--delta-dark.footer *,
    .section--delta-dark.footer a {
      color: white; }
    .section--delta-dark.footer .back-to-top,
    .section--delta-dark.footer .list-social .btn-icon:before {
      color: #561447; }
  .section--specialist-evenaar {
    background: #009005; }
    .section--specialist-evenaar.footer *,
    .section--specialist-evenaar.footer a {
      color: white; }
    .section--specialist-evenaar.footer .back-to-top,
    .section--specialist-evenaar.footer .list-social .btn-icon:before {
      color: #009005; }
  .section--specialist-evenaar-en {
    background: #009005; }
    .section--specialist-evenaar-en.footer *,
    .section--specialist-evenaar-en.footer a {
      color: white; }
    .section--specialist-evenaar-en.footer .back-to-top,
    .section--specialist-evenaar-en.footer .list-social .btn-icon:before {
      color: #009005; }
  .section--specialist-forensischepsychiatrie {
    background: #0a73a1; }
    .section--specialist-forensischepsychiatrie.footer *,
    .section--specialist-forensischepsychiatrie.footer a {
      color: white; }
    .section--specialist-forensischepsychiatrie.footer .back-to-top,
    .section--specialist-forensischepsychiatrie.footer .list-social .btn-icon:before {
      color: #0a73a1; }
  .section--specialist-kinderenjeugdpsychiatrie {
    background: #0486D4; }
    .section--specialist-kinderenjeugdpsychiatrie.footer *,
    .section--specialist-kinderenjeugdpsychiatrie.footer a {
      color: white; }
    .section--specialist-kinderenjeugdpsychiatrie.footer .back-to-top,
    .section--specialist-kinderenjeugdpsychiatrie.footer .list-social .btn-icon:before {
      color: #0486D4; }
  .section--specialist-kjp {
    background: #0486D4; }
    .section--specialist-kjp.footer *,
    .section--specialist-kjp.footer a {
      color: white; }
    .section--specialist-kjp.footer .back-to-top,
    .section--specialist-kjp.footer .list-social .btn-icon:before {
      color: #0486D4; }
  .section--specialist-gezinspsychiatrie {
    background: #E46C0B; }
    .section--specialist-gezinspsychiatrie.footer *,
    .section--specialist-gezinspsychiatrie.footer a {
      color: white; }
    .section--specialist-gezinspsychiatrie.footer .back-to-top,
    .section--specialist-gezinspsychiatrie.footer .list-social .btn-icon:before {
      color: #E46C0B; }
  .section--specialist-ouderenpsychiatrie {
    background: #614A7B; }
    .section--specialist-ouderenpsychiatrie.footer *,
    .section--specialist-ouderenpsychiatrie.footer a {
      color: white; }
    .section--specialist-ouderenpsychiatrie.footer .back-to-top,
    .section--specialist-ouderenpsychiatrie.footer .list-social .btn-icon:before {
      color: #614A7B; }
  .section--specialist-slaapcentrum {
    background: #EECC3B; }
    .section--specialist-slaapcentrum.footer *,
    .section--specialist-slaapcentrum.footer a {
      color: white; }
    .section--specialist-slaapcentrum.footer .back-to-top,
    .section--specialist-slaapcentrum.footer .list-social .btn-icon:before {
      color: #EECC3B; }
  .section--specialist-cvbp {
    background: #398A41; }
    .section--specialist-cvbp.footer *,
    .section--specialist-cvbp.footer a {
      color: white; }
    .section--specialist-cvbp.footer .back-to-top,
    .section--specialist-cvbp.footer .list-social .btn-icon:before {
      color: #398A41; }
  .section > .container > *:last-child {
    margin-bottom: 0; }
  .section--alpha, .section--light {
    color: #3C3036; }
  .section--beta *, .section--gamma *, .section--delta *, .section--delta-dark * {
    color: white; }
  .section--beta a, .section--gamma a, .section--delta a, .section--delta-dark a {
    color: white; }
  .section--beta p a, .section--gamma p a, .section--delta p a, .section--delta-dark p a {
    text-decoration: underline; }
  .section--beta .redactor-box, .section--gamma .redactor-box, .section--delta .redactor-box, .section--delta-dark .redactor-box {
    color: #3C3036; }
    .section--beta .redactor-box .redactor-layer, .section--gamma .redactor-box .redactor-layer, .section--delta .redactor-box .redactor-layer, .section--delta-dark .redactor-box .redactor-layer {
      color: #3C3036; }
      .section--beta .redactor-box .redactor-layer p, .section--gamma .redactor-box .redactor-layer p, .section--delta .redactor-box .redactor-layer p, .section--delta-dark .redactor-box .redactor-layer p {
        color: #3C3036; }
    .section--beta .redactor-box a, .section--gamma .redactor-box a, .section--delta .redactor-box a, .section--delta-dark .redactor-box a {
      color: #3C3036; }
      .section--beta .redactor-box a i, .section--gamma .redactor-box a i, .section--delta .redactor-box a i, .section--delta-dark .redactor-box a i {
        color: #3C3036; }
  .section--beta a:hover {
    color: #f8d5b5; }
  .section--gamma a:hover {
    color: #bbe7ee; }
  .section--delta a:hover {
    color: #d9c2d4; }
  .section--crisis a {
    text-decoration: underline; }
  .section--bordered {
    border-top: 30px solid #f6f6f6;
    border-bottom: 30px solid #f6f6f6;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 1000px) {
      .section--bordered {
        border-top: 50px solid #f6f6f6;
        border-bottom: 50px solid #f6f6f6; } }
  .section--contact {
    order: -1;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 701px) {
      .section--contact {
        order: inherit; } }
  .section__content {
    padding-top: 4.375rem;
    /* =70px */
    padding-bottom: 4.375rem;
    /* =70px */ }
  .section--emergency .grid h3 {
    margin: 0 0 10px 0; }
    @media screen and (min-width: 801px) {
      .section--emergency .grid h3 {
        margin: 2px 0 0 0; } }
  .section--emergency .grid > div:last-child {
    text-align: left; }
    @media screen and (min-width: 801px) {
      .section--emergency .grid > div:last-child {
        text-align: right; } }
    @media screen and (min-width: 801px) {
      .section--emergency .grid > div:last-child .btn {
        margin: 0; } }

.section-img {
  background: url("../dist/img/someimage.jpg") center center fixed;
  background-size: cover;
  height: 18.75rem;
  /* =300px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) and (max-width: 700px) {
    .section-img {
      height: 25rem;
      /* =400px */ } }
  @media (min-width: 701px) {
    .section-img {
      height: 31.25rem;
      /* =500px */ } }

.section__list {
  margin-bottom: 1.875rem;
  /* =30px */ }

.section__paragraph {
  margin-bottom: 1.875rem;
  /* =30px */ }

/**
 *
 * Section Components
 *
 */
.section--columns {
  padding-bottom: 8px !important; }
  .section--columns .container > .row > div[class^="col"] {
    padding-bottom: 48px; }

/*doc
---
title: Sections
name: sections
category: Structure
---

Sections are blocks of content with a background color or image. Usually you combine this with a container class child element.
There are five colors defined for you as modifiers (section--alpha, section--beta, etc..) but you can add extra or change the predefined colors in the settings.scss file if you need to.

```html_example
<div class="section section--alpha">
    <div class="container">
        Some content..
    </div>
</div>
```

```html_example
<div class="section section--beta">
    <div class="container">
        Some content..
    </div>
</div>
```

```html_example
<div class="section section--gamma">
    <div class="container">
        Some content..
    </div>
</div>
```

```html_example
<div class="section section--delta">
    <div class="container">
        Some content..
    </div>
</div>
```

```html_example
<div class="section section--epsilon">
    <div class="container">
        Some content..
    </div>
</div>
```

*/
/* Fonts
==========
*/
@font-face {
  font-family: "icons";
  src: url("../fonts/icons/icons.eot?v=2");
  src: url("../fonts/icons/icons.eot#iefix") format("embedded-opentype"), url("../fonts/icons/icons.svg#icons") format("svg"), url("../fonts/icons/icons.woff?v=2") format("woff"), url("../fonts/icons/icons.ttf?v=2") format("truetype"); }

.icon:before, ul.list-arrow li:before, .list-widget ul li:before,
ul.list-icon li:before, .modal__close:before, .btn-dropdown__toggle:before, .sub-menu-link a:before, .link-icon:before, .icon-after:after, .menu-item--submenu .menu-link:after, .accordion__trigger:before, .btn-dropdown__action:after, .form__select:after, .form__password-toggle:after, .notification:before, .notification__close, .breadcrumbs > ul > li > a::after, .tab.tab--inline::after, .news-archive__list li a::before, .links-widget ul li::before {
  font-family: 'icons', 'arial', 'verdana';
  font-weight: normal; }

/*doc
---
title: Typography
name: 7_typography
category: Typography
---

Typography

*/
.h1,
h1 {
  color: #4e4248;
  margin-top: 0; }

.h2,
h2 {
  color: #4e4248;
  margin-top: 0; }

.h3, .selftest h4,
h3 {
  color: #4e4248;
  margin-top: 0; }

.h4,
h4 {
  color: #4e4248;
  margin-top: 0; }

.h5,
h5 {
  color: #4e4248;
  margin-top: 0; }

.h6,
h6 {
  color: #4e4248;
  margin-top: 0; }

h1, .h1 {
  font-weight: 400;
  font-size: 1.75rem;
  /* =28px */
  margin-bottom: 1.25rem;
  /* =20px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) and (max-width: 700px) {
    h1, .h1 {
      font-size: 2.5rem;
      /* =40px */
      margin-bottom: 1.25rem;
      /* =20px */ } }
  @media (min-width: 701px) {
    h1, .h1 {
      font-size: 3rem;
      /* =48px */
      margin-bottom: 2.125rem;
      /* =34px */ } }

.h2-xl {
  font-weight: 400;
  font-size: 1.5rem;
  /* =24px */
  margin-bottom: 0.625rem;
  /* =10px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .h2-xl {
      font-size: 2.5rem;
      /* =40px */ } }

h2, .h2 {
  font-weight: 400;
  font-size: 1.375rem;
  /* =22px */
  margin-bottom: 0.625rem;
  /* =10px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    h2, .h2 {
      font-size: 2rem;
      /* =32px */ } }

h3, .h3, .selftest h4 {
  font-weight: 400;
  color: #80356F;
  font-size: 1.5rem;
  /* =24px */
  margin-bottom: 0.625rem;
  /* =10px */ }

h4, .h4 {
  font-weight: 400;
  font-size: 1.25rem;
  /* =20px */
  margin-bottom: 0.5rem;
  /* =8px */ }

h5, .h5 {
  font-weight: 400;
  color: #80356F;
  font-size: 1rem;
  /* =16px */
  margin-bottom: 0.5rem;
  /* =8px */ }

h6, .h6 {
  font-weight: 400;
  font-size: 0.875rem;
  /* =14px */
  margin-bottom: 0.3125rem;
  /* =5px */ }

.intro {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .intro {
      font-size: 1.25rem;
      /* =20px */
      line-height: 2rem;
      /* =32px */ } }

div[class*="specialist-"] h3, div[class*="specialist-"] .h3, div[class*="specialist-"] .selftest h4, .selftest div[class*="specialist-"] h4, div[class*="specialist-"] h5, div[class*="specialist-"] .h5 {
  color: black; }

/*doc
---
title: Type
name: 8_type
category: Typography
---

```html_example
<h1>Heading 1</h1>
```

```html_example
<h2>Heading 2</h2>
```

```html_example
<h3>Heading 3</h3>
```

```html_example
<h3>Heading 4</h4>
```

```html_example
<h5>Heading 5</h5>
```

```html_example
<h6>Heading 6</h6>
```

*/
/*==============================
=            Colors            =
==============================*/
.color-light {
  color: #ffffff !important; }
  .color-light .h1,
  .color-light h1 {
    color: #ffffff !important; }
  .color-light .h2,
  .color-light h2 {
    color: #ffffff !important; }
  .color-light .h3, .color-light .selftest h4, .selftest .color-light h4,
  .color-light h3 {
    color: #ffffff !important; }
  .color-light .h4,
  .color-light h4 {
    color: #ffffff !important; }
  .color-light .h5,
  .color-light h5 {
    color: #ffffff !important; }
  .color-light .h6,
  .color-light h6 {
    color: #ffffff !important; }

.color-dark {
  color: #000000 !important; }
  .color-dark .h1,
  .color-dark h1 {
    color: #000000 !important; }
  .color-dark .h2,
  .color-dark h2 {
    color: #000000 !important; }
  .color-dark .h3, .color-dark .selftest h4, .selftest .color-dark h4,
  .color-dark h3 {
    color: #000000 !important; }
  .color-dark .h4,
  .color-dark h4 {
    color: #000000 !important; }
  .color-dark .h5,
  .color-dark h5 {
    color: #000000 !important; }
  .color-dark .h6,
  .color-dark h6 {
    color: #000000 !important; }

.color-body {
  color: #f6f6f6 !important; }
  .color-body .h1,
  .color-body h1 {
    color: #f6f6f6 !important; }
  .color-body .h2,
  .color-body h2 {
    color: #f6f6f6 !important; }
  .color-body .h3, .color-body .selftest h4, .selftest .color-body h4,
  .color-body h3 {
    color: #f6f6f6 !important; }
  .color-body .h4,
  .color-body h4 {
    color: #f6f6f6 !important; }
  .color-body .h5,
  .color-body h5 {
    color: #f6f6f6 !important; }
  .color-body .h6,
  .color-body h6 {
    color: #f6f6f6 !important; }

.color-text {
  color: #3C3036 !important; }
  .color-text .h1,
  .color-text h1 {
    color: #3C3036 !important; }
  .color-text .h2,
  .color-text h2 {
    color: #3C3036 !important; }
  .color-text .h3, .color-text .selftest h4, .selftest .color-text h4,
  .color-text h3 {
    color: #3C3036 !important; }
  .color-text .h4,
  .color-text h4 {
    color: #3C3036 !important; }
  .color-text .h5,
  .color-text h5 {
    color: #3C3036 !important; }
  .color-text .h6,
  .color-text h6 {
    color: #3C3036 !important; }

.color-placeholder {
  color: #94adc4 !important; }
  .color-placeholder .h1,
  .color-placeholder h1 {
    color: #94adc4 !important; }
  .color-placeholder .h2,
  .color-placeholder h2 {
    color: #94adc4 !important; }
  .color-placeholder .h3, .color-placeholder .selftest h4, .selftest .color-placeholder h4,
  .color-placeholder h3 {
    color: #94adc4 !important; }
  .color-placeholder .h4,
  .color-placeholder h4 {
    color: #94adc4 !important; }
  .color-placeholder .h5,
  .color-placeholder h5 {
    color: #94adc4 !important; }
  .color-placeholder .h6,
  .color-placeholder h6 {
    color: #94adc4 !important; }

.color-selection {
  color: #d1e4fe !important; }
  .color-selection .h1,
  .color-selection h1 {
    color: #d1e4fe !important; }
  .color-selection .h2,
  .color-selection h2 {
    color: #d1e4fe !important; }
  .color-selection .h3, .color-selection .selftest h4, .selftest .color-selection h4,
  .color-selection h3 {
    color: #d1e4fe !important; }
  .color-selection .h4,
  .color-selection h4 {
    color: #d1e4fe !important; }
  .color-selection .h5,
  .color-selection h5 {
    color: #d1e4fe !important; }
  .color-selection .h6,
  .color-selection h6 {
    color: #d1e4fe !important; }

.color-alpha {
  color: #f6f6f6 !important; }
  .color-alpha .h1,
  .color-alpha h1 {
    color: #f6f6f6 !important; }
  .color-alpha .h2,
  .color-alpha h2 {
    color: #f6f6f6 !important; }
  .color-alpha .h3, .color-alpha .selftest h4, .selftest .color-alpha h4,
  .color-alpha h3 {
    color: #f6f6f6 !important; }
  .color-alpha .h4,
  .color-alpha h4 {
    color: #f6f6f6 !important; }
  .color-alpha .h5,
  .color-alpha h5 {
    color: #f6f6f6 !important; }
  .color-alpha .h6,
  .color-alpha h6 {
    color: #f6f6f6 !important; }

.color-beta {
  color: #E67408 !important; }
  .color-beta .h1,
  .color-beta h1 {
    color: #E67408 !important; }
  .color-beta .h2,
  .color-beta h2 {
    color: #E67408 !important; }
  .color-beta .h3, .color-beta .selftest h4, .selftest .color-beta h4,
  .color-beta h3 {
    color: #E67408 !important; }
  .color-beta .h4,
  .color-beta h4 {
    color: #E67408 !important; }
  .color-beta .h5,
  .color-beta h5 {
    color: #E67408 !important; }
  .color-beta .h6,
  .color-beta h6 {
    color: #E67408 !important; }

.color-beta-dark {
  color: #BC5B00 !important; }
  .color-beta-dark .h1,
  .color-beta-dark h1 {
    color: #BC5B00 !important; }
  .color-beta-dark .h2,
  .color-beta-dark h2 {
    color: #BC5B00 !important; }
  .color-beta-dark .h3, .color-beta-dark .selftest h4, .selftest .color-beta-dark h4,
  .color-beta-dark h3 {
    color: #BC5B00 !important; }
  .color-beta-dark .h4,
  .color-beta-dark h4 {
    color: #BC5B00 !important; }
  .color-beta-dark .h5,
  .color-beta-dark h5 {
    color: #BC5B00 !important; }
  .color-beta-dark .h6,
  .color-beta-dark h6 {
    color: #BC5B00 !important; }

.color-gamma {
  color: #1DAFC5 !important; }
  .color-gamma .h1,
  .color-gamma h1 {
    color: #1DAFC5 !important; }
  .color-gamma .h2,
  .color-gamma h2 {
    color: #1DAFC5 !important; }
  .color-gamma .h3, .color-gamma .selftest h4, .selftest .color-gamma h4,
  .color-gamma h3 {
    color: #1DAFC5 !important; }
  .color-gamma .h4,
  .color-gamma h4 {
    color: #1DAFC5 !important; }
  .color-gamma .h5,
  .color-gamma h5 {
    color: #1DAFC5 !important; }
  .color-gamma .h6,
  .color-gamma h6 {
    color: #1DAFC5 !important; }

.color-delta, .modal__close {
  color: #80356F !important; }
  .color-delta .h1, .modal__close .h1,
  .color-delta h1,
  .modal__close h1 {
    color: #80356F !important; }
  .color-delta .h2, .modal__close .h2,
  .color-delta h2,
  .modal__close h2 {
    color: #80356F !important; }
  .color-delta .h3, .modal__close .h3, .color-delta .selftest h4, .selftest .color-delta h4, .modal__close .selftest h4, .selftest .modal__close h4,
  .color-delta h3,
  .modal__close h3 {
    color: #80356F !important; }
  .color-delta .h4, .modal__close .h4,
  .color-delta h4,
  .modal__close h4 {
    color: #80356F !important; }
  .color-delta .h5, .modal__close .h5,
  .color-delta h5,
  .modal__close h5 {
    color: #80356F !important; }
  .color-delta .h6, .modal__close .h6,
  .color-delta h6,
  .modal__close h6 {
    color: #80356F !important; }

.color-delta-dark {
  color: #561447 !important; }
  .color-delta-dark .h1,
  .color-delta-dark h1 {
    color: #561447 !important; }
  .color-delta-dark .h2,
  .color-delta-dark h2 {
    color: #561447 !important; }
  .color-delta-dark .h3, .color-delta-dark .selftest h4, .selftest .color-delta-dark h4,
  .color-delta-dark h3 {
    color: #561447 !important; }
  .color-delta-dark .h4,
  .color-delta-dark h4 {
    color: #561447 !important; }
  .color-delta-dark .h5,
  .color-delta-dark h5 {
    color: #561447 !important; }
  .color-delta-dark .h6,
  .color-delta-dark h6 {
    color: #561447 !important; }

.color-epsilon {
  color: #ED3D6B !important; }
  .color-epsilon .h1,
  .color-epsilon h1 {
    color: #ED3D6B !important; }
  .color-epsilon .h2,
  .color-epsilon h2 {
    color: #ED3D6B !important; }
  .color-epsilon .h3, .color-epsilon .selftest h4, .selftest .color-epsilon h4,
  .color-epsilon h3 {
    color: #ED3D6B !important; }
  .color-epsilon .h4,
  .color-epsilon h4 {
    color: #ED3D6B !important; }
  .color-epsilon .h5,
  .color-epsilon h5 {
    color: #ED3D6B !important; }
  .color-epsilon .h6,
  .color-epsilon h6 {
    color: #ED3D6B !important; }

.color-zeta {
  color: #291720 !important; }
  .color-zeta .h1,
  .color-zeta h1 {
    color: #291720 !important; }
  .color-zeta .h2,
  .color-zeta h2 {
    color: #291720 !important; }
  .color-zeta .h3, .color-zeta .selftest h4, .selftest .color-zeta h4,
  .color-zeta h3 {
    color: #291720 !important; }
  .color-zeta .h4,
  .color-zeta h4 {
    color: #291720 !important; }
  .color-zeta .h5,
  .color-zeta h5 {
    color: #291720 !important; }
  .color-zeta .h6,
  .color-zeta h6 {
    color: #291720 !important; }

.color-jeta {
  color: #B1B1B1 !important; }
  .color-jeta .h1,
  .color-jeta h1 {
    color: #B1B1B1 !important; }
  .color-jeta .h2,
  .color-jeta h2 {
    color: #B1B1B1 !important; }
  .color-jeta .h3, .color-jeta .selftest h4, .selftest .color-jeta h4,
  .color-jeta h3 {
    color: #B1B1B1 !important; }
  .color-jeta .h4,
  .color-jeta h4 {
    color: #B1B1B1 !important; }
  .color-jeta .h5,
  .color-jeta h5 {
    color: #B1B1B1 !important; }
  .color-jeta .h6,
  .color-jeta h6 {
    color: #B1B1B1 !important; }

.color-dota {
  color: #5DC637 !important; }
  .color-dota .h1,
  .color-dota h1 {
    color: #5DC637 !important; }
  .color-dota .h2,
  .color-dota h2 {
    color: #5DC637 !important; }
  .color-dota .h3, .color-dota .selftest h4, .selftest .color-dota h4,
  .color-dota h3 {
    color: #5DC637 !important; }
  .color-dota .h4,
  .color-dota h4 {
    color: #5DC637 !important; }
  .color-dota .h5,
  .color-dota h5 {
    color: #5DC637 !important; }
  .color-dota .h6,
  .color-dota h6 {
    color: #5DC637 !important; }

.color-iota {
  color: #575757 !important; }
  .color-iota .h1,
  .color-iota h1 {
    color: #575757 !important; }
  .color-iota .h2,
  .color-iota h2 {
    color: #575757 !important; }
  .color-iota .h3, .color-iota .selftest h4, .selftest .color-iota h4,
  .color-iota h3 {
    color: #575757 !important; }
  .color-iota .h4,
  .color-iota h4 {
    color: #575757 !important; }
  .color-iota .h5,
  .color-iota h5 {
    color: #575757 !important; }
  .color-iota .h6,
  .color-iota h6 {
    color: #575757 !important; }

.color-kappa {
  color: #8DC63F !important; }
  .color-kappa .h1,
  .color-kappa h1 {
    color: #8DC63F !important; }
  .color-kappa .h2,
  .color-kappa h2 {
    color: #8DC63F !important; }
  .color-kappa .h3, .color-kappa .selftest h4, .selftest .color-kappa h4,
  .color-kappa h3 {
    color: #8DC63F !important; }
  .color-kappa .h4,
  .color-kappa h4 {
    color: #8DC63F !important; }
  .color-kappa .h5,
  .color-kappa h5 {
    color: #8DC63F !important; }
  .color-kappa .h6,
  .color-kappa h6 {
    color: #8DC63F !important; }

.color-lambda {
  color: #848484 !important; }
  .color-lambda .h1,
  .color-lambda h1 {
    color: #848484 !important; }
  .color-lambda .h2,
  .color-lambda h2 {
    color: #848484 !important; }
  .color-lambda .h3, .color-lambda .selftest h4, .selftest .color-lambda h4,
  .color-lambda h3 {
    color: #848484 !important; }
  .color-lambda .h4,
  .color-lambda h4 {
    color: #848484 !important; }
  .color-lambda .h5,
  .color-lambda h5 {
    color: #848484 !important; }
  .color-lambda .h6,
  .color-lambda h6 {
    color: #848484 !important; }

.color-specialist-evenaar {
  color: #009005 !important; }
  .color-specialist-evenaar .h1,
  .color-specialist-evenaar h1 {
    color: #009005 !important; }
  .color-specialist-evenaar .h2,
  .color-specialist-evenaar h2 {
    color: #009005 !important; }
  .color-specialist-evenaar .h3, .color-specialist-evenaar .selftest h4, .selftest .color-specialist-evenaar h4,
  .color-specialist-evenaar h3 {
    color: #009005 !important; }
  .color-specialist-evenaar .h4,
  .color-specialist-evenaar h4 {
    color: #009005 !important; }
  .color-specialist-evenaar .h5,
  .color-specialist-evenaar h5 {
    color: #009005 !important; }
  .color-specialist-evenaar .h6,
  .color-specialist-evenaar h6 {
    color: #009005 !important; }

.color-specialist-evenaar-en {
  color: #009005 !important; }
  .color-specialist-evenaar-en .h1,
  .color-specialist-evenaar-en h1 {
    color: #009005 !important; }
  .color-specialist-evenaar-en .h2,
  .color-specialist-evenaar-en h2 {
    color: #009005 !important; }
  .color-specialist-evenaar-en .h3, .color-specialist-evenaar-en .selftest h4, .selftest .color-specialist-evenaar-en h4,
  .color-specialist-evenaar-en h3 {
    color: #009005 !important; }
  .color-specialist-evenaar-en .h4,
  .color-specialist-evenaar-en h4 {
    color: #009005 !important; }
  .color-specialist-evenaar-en .h5,
  .color-specialist-evenaar-en h5 {
    color: #009005 !important; }
  .color-specialist-evenaar-en .h6,
  .color-specialist-evenaar-en h6 {
    color: #009005 !important; }

.color-specialist-forensischepsychiatrie {
  color: #0a73a1 !important; }
  .color-specialist-forensischepsychiatrie .h1,
  .color-specialist-forensischepsychiatrie h1 {
    color: #0a73a1 !important; }
  .color-specialist-forensischepsychiatrie .h2,
  .color-specialist-forensischepsychiatrie h2 {
    color: #0a73a1 !important; }
  .color-specialist-forensischepsychiatrie .h3, .color-specialist-forensischepsychiatrie .selftest h4, .selftest .color-specialist-forensischepsychiatrie h4,
  .color-specialist-forensischepsychiatrie h3 {
    color: #0a73a1 !important; }
  .color-specialist-forensischepsychiatrie .h4,
  .color-specialist-forensischepsychiatrie h4 {
    color: #0a73a1 !important; }
  .color-specialist-forensischepsychiatrie .h5,
  .color-specialist-forensischepsychiatrie h5 {
    color: #0a73a1 !important; }
  .color-specialist-forensischepsychiatrie .h6,
  .color-specialist-forensischepsychiatrie h6 {
    color: #0a73a1 !important; }

.color-specialist-kinderenjeugdpsychiatrie {
  color: #0486D4 !important; }
  .color-specialist-kinderenjeugdpsychiatrie .h1,
  .color-specialist-kinderenjeugdpsychiatrie h1 {
    color: #0486D4 !important; }
  .color-specialist-kinderenjeugdpsychiatrie .h2,
  .color-specialist-kinderenjeugdpsychiatrie h2 {
    color: #0486D4 !important; }
  .color-specialist-kinderenjeugdpsychiatrie .h3, .color-specialist-kinderenjeugdpsychiatrie .selftest h4, .selftest .color-specialist-kinderenjeugdpsychiatrie h4,
  .color-specialist-kinderenjeugdpsychiatrie h3 {
    color: #0486D4 !important; }
  .color-specialist-kinderenjeugdpsychiatrie .h4,
  .color-specialist-kinderenjeugdpsychiatrie h4 {
    color: #0486D4 !important; }
  .color-specialist-kinderenjeugdpsychiatrie .h5,
  .color-specialist-kinderenjeugdpsychiatrie h5 {
    color: #0486D4 !important; }
  .color-specialist-kinderenjeugdpsychiatrie .h6,
  .color-specialist-kinderenjeugdpsychiatrie h6 {
    color: #0486D4 !important; }

.color-specialist-kjp {
  color: #0486D4 !important; }
  .color-specialist-kjp .h1,
  .color-specialist-kjp h1 {
    color: #0486D4 !important; }
  .color-specialist-kjp .h2,
  .color-specialist-kjp h2 {
    color: #0486D4 !important; }
  .color-specialist-kjp .h3, .color-specialist-kjp .selftest h4, .selftest .color-specialist-kjp h4,
  .color-specialist-kjp h3 {
    color: #0486D4 !important; }
  .color-specialist-kjp .h4,
  .color-specialist-kjp h4 {
    color: #0486D4 !important; }
  .color-specialist-kjp .h5,
  .color-specialist-kjp h5 {
    color: #0486D4 !important; }
  .color-specialist-kjp .h6,
  .color-specialist-kjp h6 {
    color: #0486D4 !important; }

.color-specialist-gezinspsychiatrie {
  color: #E46C0B !important; }
  .color-specialist-gezinspsychiatrie .h1,
  .color-specialist-gezinspsychiatrie h1 {
    color: #E46C0B !important; }
  .color-specialist-gezinspsychiatrie .h2,
  .color-specialist-gezinspsychiatrie h2 {
    color: #E46C0B !important; }
  .color-specialist-gezinspsychiatrie .h3, .color-specialist-gezinspsychiatrie .selftest h4, .selftest .color-specialist-gezinspsychiatrie h4,
  .color-specialist-gezinspsychiatrie h3 {
    color: #E46C0B !important; }
  .color-specialist-gezinspsychiatrie .h4,
  .color-specialist-gezinspsychiatrie h4 {
    color: #E46C0B !important; }
  .color-specialist-gezinspsychiatrie .h5,
  .color-specialist-gezinspsychiatrie h5 {
    color: #E46C0B !important; }
  .color-specialist-gezinspsychiatrie .h6,
  .color-specialist-gezinspsychiatrie h6 {
    color: #E46C0B !important; }

.color-specialist-ouderenpsychiatrie {
  color: #614A7B !important; }
  .color-specialist-ouderenpsychiatrie .h1,
  .color-specialist-ouderenpsychiatrie h1 {
    color: #614A7B !important; }
  .color-specialist-ouderenpsychiatrie .h2,
  .color-specialist-ouderenpsychiatrie h2 {
    color: #614A7B !important; }
  .color-specialist-ouderenpsychiatrie .h3, .color-specialist-ouderenpsychiatrie .selftest h4, .selftest .color-specialist-ouderenpsychiatrie h4,
  .color-specialist-ouderenpsychiatrie h3 {
    color: #614A7B !important; }
  .color-specialist-ouderenpsychiatrie .h4,
  .color-specialist-ouderenpsychiatrie h4 {
    color: #614A7B !important; }
  .color-specialist-ouderenpsychiatrie .h5,
  .color-specialist-ouderenpsychiatrie h5 {
    color: #614A7B !important; }
  .color-specialist-ouderenpsychiatrie .h6,
  .color-specialist-ouderenpsychiatrie h6 {
    color: #614A7B !important; }

.color-specialist-slaapcentrum {
  color: #EECC3B !important; }
  .color-specialist-slaapcentrum .h1,
  .color-specialist-slaapcentrum h1 {
    color: #EECC3B !important; }
  .color-specialist-slaapcentrum .h2,
  .color-specialist-slaapcentrum h2 {
    color: #EECC3B !important; }
  .color-specialist-slaapcentrum .h3, .color-specialist-slaapcentrum .selftest h4, .selftest .color-specialist-slaapcentrum h4,
  .color-specialist-slaapcentrum h3 {
    color: #EECC3B !important; }
  .color-specialist-slaapcentrum .h4,
  .color-specialist-slaapcentrum h4 {
    color: #EECC3B !important; }
  .color-specialist-slaapcentrum .h5,
  .color-specialist-slaapcentrum h5 {
    color: #EECC3B !important; }
  .color-specialist-slaapcentrum .h6,
  .color-specialist-slaapcentrum h6 {
    color: #EECC3B !important; }

.color-specialist-cvbp {
  color: #398A41 !important; }
  .color-specialist-cvbp .h1,
  .color-specialist-cvbp h1 {
    color: #398A41 !important; }
  .color-specialist-cvbp .h2,
  .color-specialist-cvbp h2 {
    color: #398A41 !important; }
  .color-specialist-cvbp .h3, .color-specialist-cvbp .selftest h4, .selftest .color-specialist-cvbp h4,
  .color-specialist-cvbp h3 {
    color: #398A41 !important; }
  .color-specialist-cvbp .h4,
  .color-specialist-cvbp h4 {
    color: #398A41 !important; }
  .color-specialist-cvbp .h5,
  .color-specialist-cvbp h5 {
    color: #398A41 !important; }
  .color-specialist-cvbp .h6,
  .color-specialist-cvbp h6 {
    color: #398A41 !important; }

.bg-color-light {
  background: #ffffff; }

.bg-color-dark {
  background: #000000; }

.bg-color-body {
  background: #f6f6f6; }

.bg-color-text {
  background: #3C3036; }

.bg-color-placeholder {
  background: #94adc4; }

.bg-color-selection {
  background: #d1e4fe; }

.bg-color-alpha {
  background: #f6f6f6; }

.bg-color-beta {
  background: #E67408; }

.bg-color-beta-dark {
  background: #BC5B00; }

.bg-color-gamma {
  background: #1DAFC5; }

.bg-color-delta {
  background: #80356F; }

.bg-color-delta-dark {
  background: #561447; }

.bg-color-epsilon {
  background: #ED3D6B; }

.bg-color-zeta {
  background: #291720; }

.bg-color-jeta {
  background: #B1B1B1; }

.bg-color-dota {
  background: #5DC637; }

.bg-color-iota {
  background: #575757; }

.bg-color-kappa {
  background: #8DC63F; }

.bg-color-lambda {
  background: #848484; }

.bg-color-specialist-evenaar {
  background: #009005; }

.bg-color-specialist-evenaar-en {
  background: #009005; }

.bg-color-specialist-forensischepsychiatrie {
  background: #0a73a1; }

.bg-color-specialist-kinderenjeugdpsychiatrie {
  background: #0486D4; }

.bg-color-specialist-kjp {
  background: #0486D4; }

.bg-color-specialist-gezinspsychiatrie {
  background: #E46C0B; }

.bg-color-specialist-ouderenpsychiatrie {
  background: #614A7B; }

.bg-color-specialist-slaapcentrum {
  background: #EECC3B; }

.bg-color-specialist-cvbp {
  background: #398A41; }

/* Icons
==========
*/
.icon.icon--spinner:before, ul.list-arrow li.icon--spinner:before, .list-widget ul li.icon--spinner:before,
ul.list-icon li.icon--spinner:before, .icon--spinner.modal__close:before, .icon--spinner.btn-dropdown__toggle:before, .sub-menu-link a.icon--spinner:before, .icon--spinner.link-icon:before {
  content: '\e800'; }

.icon.icon--ok:before, ul.list-arrow li.icon--ok:before, .list-widget ul li.icon--ok:before,
ul.list-icon li.icon--ok:before, .icon--ok.modal__close:before, .icon--ok.btn-dropdown__toggle:before, .sub-menu-link a.icon--ok:before, .icon--ok.link-icon:before {
  content: '\e801'; }

.icon.icon--cancel:before, ul.list-arrow li.icon--cancel:before, .list-widget ul li.icon--cancel:before, ul.list-arrow li.modal__close:before, .list-widget ul li.modal__close:before,
ul.list-icon li.icon--cancel:before, ul.list-icon li.modal__close:before, .modal__close:before, .icon--cancel.btn-dropdown__toggle:before, .sub-menu-link a.icon--cancel:before, .icon--cancel.link-icon:before {
  content: '\e802'; }

.icon.icon--cancel-circle:before, ul.list-arrow li.icon--cancel-circle:before, .list-widget ul li.icon--cancel-circle:before,
ul.list-icon li.icon--cancel-circle:before, .icon--cancel-circle.modal__close:before, .icon--cancel-circle.btn-dropdown__toggle:before, .sub-menu-link a.icon--cancel-circle:before, .icon--cancel-circle.link-icon:before {
  content: '\e803'; }

.icon.icon--info:before, ul.list-arrow li.icon--info:before, .list-widget ul li.icon--info:before,
ul.list-icon li.icon--info:before, .icon--info.modal__close:before, .icon--info.btn-dropdown__toggle:before, .sub-menu-link a.icon--info:before, .icon--info.link-icon:before {
  content: '\e804'; }

.icon.icon--attention:before, ul.list-arrow li.icon--attention:before, .list-widget ul li.icon--attention:before,
ul.list-icon li.icon--attention:before, .icon--attention.modal__close:before, .icon--attention.btn-dropdown__toggle:before, .sub-menu-link a.icon--attention:before, .icon--attention.link-icon:before {
  content: '\e805'; }

.icon.icon--question:before, ul.list-arrow li.icon--question:before, .list-widget ul li.icon--question:before,
ul.list-icon li.icon--question:before, .icon--question.modal__close:before, .icon--question.btn-dropdown__toggle:before, .sub-menu-link a.icon--question:before, .icon--question.link-icon:before {
  content: '\e806'; }

.icon.icon--eye:before, ul.list-arrow li.icon--eye:before, .list-widget ul li.icon--eye:before,
ul.list-icon li.icon--eye:before, .icon--eye.modal__close:before, .icon--eye.btn-dropdown__toggle:before, .sub-menu-link a.icon--eye:before, .icon--eye.link-icon:before {
  content: '\e807'; }

.icon.icon--eye-off:before, ul.list-arrow li.icon--eye-off:before, .list-widget ul li.icon--eye-off:before,
ul.list-icon li.icon--eye-off:before, .icon--eye-off.modal__close:before, .icon--eye-off.btn-dropdown__toggle:before, .sub-menu-link a.icon--eye-off:before, .icon--eye-off.link-icon:before {
  content: '\e808'; }

.icon.icon--menu:before, ul.list-arrow li.icon--menu:before, .list-widget ul li.icon--menu:before,
ul.list-icon li.icon--menu:before, .icon--menu.modal__close:before, .icon--menu.btn-dropdown__toggle:before, .sub-menu-link a.icon--menu:before, .icon--menu.link-icon:before {
  content: '\e809'; }

.icon.icon--down:before, ul.list-arrow li.icon--down:before, .list-widget ul li.icon--down:before, ul.list-arrow li.btn-dropdown__toggle:before, .list-widget ul li.btn-dropdown__toggle:before, ul.list-arrow .menu-item--submenu li.menu-link:before, .menu-item--submenu ul.list-arrow li.menu-link:before, .list-widget ul .menu-item--submenu li.menu-link:before, .menu-item--submenu .list-widget ul li.menu-link:before,
ul.list-icon li.icon--down:before, ul.list-icon li.btn-dropdown__toggle:before, ul.list-icon .menu-item--submenu li.menu-link:before, .menu-item--submenu ul.list-icon li.menu-link:before, .icon--down.modal__close:before, .menu-item--submenu .modal__close.menu-link:before, .btn-dropdown__toggle:before, .sub-menu-link a.icon--down:before, .sub-menu-link .menu-item--submenu a.menu-link:before, .menu-item--submenu .sub-menu-link a.menu-link:before, .menu-item--submenu .icon.menu-link:before, .menu-item--submenu .menu-link.btn-dropdown__toggle:before, .menu-item--submenu .menu-link.link-icon:before, .icon--down.link-icon:before {
  content: '\e80a'; }

.icon.icon--left:before, ul.list-arrow li.icon--left:before, .list-widget ul li.icon--left:before,
ul.list-icon li.icon--left:before, .icon--left.modal__close:before, .icon--left.btn-dropdown__toggle:before, .sub-menu-link a.icon--left:before, .icon--left.link-icon:before {
  content: '\e80b'; }

.icon.icon--right:before, ul.list-arrow li:before, .list-widget ul li:before,
ul.list-icon li:before, .icon--right.modal__close:before, .icon--right.btn-dropdown__toggle:before, .sub-menu-link a:before, .link-icon:before {
  content: '\e80c'; }

.icon.icon--up:before, ul.list-arrow li.icon--up:before, .list-widget ul li.icon--up:before,
ul.list-icon li.icon--up:before, .icon--up.modal__close:before, .icon--up.btn-dropdown__toggle:before, .sub-menu-link a.icon--up:before, .icon--up.link-icon:before {
  content: '\e80d'; }

.icon.icon--cog:before, ul.list-arrow li.icon--cog:before, .list-widget ul li.icon--cog:before,
ul.list-icon li.icon--cog:before, .icon--cog.modal__close:before, .icon--cog.btn-dropdown__toggle:before, .sub-menu-link a.icon--cog:before, .icon--cog.link-icon:before {
  content: '\e80e'; }

.icon.icon--search:before, ul.list-arrow li.icon--search:before, .list-widget ul li.icon--search:before,
ul.list-icon li.icon--search:before, .icon--search.modal__close:before, .icon--search.btn-dropdown__toggle:before, .sub-menu-link a.icon--search:before, .icon--search.link-icon:before {
  content: '\e80f'; }

.icon.icon--phone:before, ul.list-arrow li.icon--phone:before, .list-widget ul li.icon--phone:before,
ul.list-icon li.icon--phone:before, .icon--phone.modal__close:before, .icon--phone.btn-dropdown__toggle:before, .sub-menu-link a.icon--phone:before, .icon--phone.link-icon:before {
  content: '\e810'; }

.icon.icon--twitter:before, ul.list-arrow li.icon--twitter:before, .list-widget ul li.icon--twitter:before,
ul.list-icon li.icon--twitter:before, .icon--twitter.modal__close:before, .icon--twitter.btn-dropdown__toggle:before, .sub-menu-link a.icon--twitter:before, .icon--twitter.link-icon:before {
  content: '\e811'; }

.icon.icon--facebook:before, ul.list-arrow li.icon--facebook:before, .list-widget ul li.icon--facebook:before,
ul.list-icon li.icon--facebook:before, .icon--facebook.modal__close:before, .icon--facebook.btn-dropdown__toggle:before, .sub-menu-link a.icon--facebook:before, .icon--facebook.link-icon:before {
  content: '\e812'; }

.icon.icon--linkedin:before, ul.list-arrow li.icon--linkedin:before, .list-widget ul li.icon--linkedin:before,
ul.list-icon li.icon--linkedin:before, .icon--linkedin.modal__close:before, .icon--linkedin.btn-dropdown__toggle:before, .sub-menu-link a.icon--linkedin:before, .icon--linkedin.link-icon:before {
  content: '\e813'; }

.icon.icon--youtube:before, ul.list-arrow li.icon--youtube:before, .list-widget ul li.icon--youtube:before,
ul.list-icon li.icon--youtube:before, .icon--youtube.modal__close:before, .icon--youtube.btn-dropdown__toggle:before, .sub-menu-link a.icon--youtube:before, .icon--youtube.link-icon:before {
  content: '\e814'; }

.icon.icon--instagram:before, ul.list-arrow li.icon--instagram:before, .list-widget ul li.icon--instagram:before,
ul.list-icon li.icon--instagram:before, .icon--instagram.modal__close:before, .icon--instagram.btn-dropdown__toggle:before, .sub-menu-link a.icon--instagram:before, .icon--instagram.link-icon:before {
  content: '\f32d'; }

.icon.icon--speak:before, ul.list-arrow li.icon--speak:before, .list-widget ul li.icon--speak:before,
ul.list-icon li.icon--speak:before, .icon--speak.modal__close:before, .icon--speak.btn-dropdown__toggle:before, .sub-menu-link a.icon--speak:before, .icon--speak.link-icon:before {
  content: '\e815'; }

.icon.icon--email:before, ul.list-arrow li.icon--email:before, .list-widget ul li.icon--email:before,
ul.list-icon li.icon--email:before, .icon--email.modal__close:before, .icon--email.btn-dropdown__toggle:before, .sub-menu-link a.icon--email:before, .icon--email.link-icon:before {
  content: '\e816'; }

.icon.icon--clock:before, ul.list-arrow li.icon--clock:before, .list-widget ul li.icon--clock:before,
ul.list-icon li.icon--clock:before, .icon--clock.modal__close:before, .icon--clock.btn-dropdown__toggle:before, .sub-menu-link a.icon--clock:before, .icon--clock.link-icon:before {
  content: '\e817'; }

.icon.icon--chevron-down:before, ul.list-arrow li.icon--chevron-down:before, .list-widget ul li.icon--chevron-down:before,
ul.list-icon li.icon--chevron-down:before, .icon--chevron-down.modal__close:before, .icon--chevron-down.btn-dropdown__toggle:before, .sub-menu-link a.icon--chevron-down:before, .icon--chevron-down.link-icon:before {
  content: '\e818'; }

.icon.icon--chevron-left:before, ul.list-arrow li.icon--chevron-left:before, .list-widget ul li.icon--chevron-left:before,
ul.list-icon li.icon--chevron-left:before, .icon--chevron-left.modal__close:before, .icon--chevron-left.btn-dropdown__toggle:before, .sub-menu-link a.icon--chevron-left:before, .icon--chevron-left.link-icon:before {
  content: '\e819'; }

.icon.icon--chevron-right:before, ul.list-arrow li.icon--chevron-right:before, .list-widget ul li.icon--chevron-right:before,
ul.list-icon li.icon--chevron-right:before, .icon--chevron-right.modal__close:before, .icon--chevron-right.btn-dropdown__toggle:before, .sub-menu-link a.icon--chevron-right:before, .icon--chevron-right.link-icon:before {
  content: '\e81a'; }

.icon.icon--chevron-up:before, ul.list-arrow li.icon--chevron-up:before, .list-widget ul li.icon--chevron-up:before,
ul.list-icon li.icon--chevron-up:before, .icon--chevron-up.modal__close:before, .icon--chevron-up.btn-dropdown__toggle:before, .sub-menu-link a.icon--chevron-up:before, .icon--chevron-up.link-icon:before {
  content: '\e81b'; }

.icon.icon--search-light:before, ul.list-arrow li.icon--search-light:before, .list-widget ul li.icon--search-light:before,
ul.list-icon li.icon--search-light:before, .icon--search-light.modal__close:before, .icon--search-light.btn-dropdown__toggle:before, .sub-menu-link a.icon--search-light:before, .icon--search-light.link-icon:before {
  content: '\e81C'; }

.icon.icon--close:before, ul.list-arrow li.icon--close:before, .list-widget ul li.icon--close:before,
ul.list-icon li.icon--close:before, .icon--close.modal__close:before, .icon--close.btn-dropdown__toggle:before, .sub-menu-link a.icon--close:before, .icon--close.link-icon:before {
  content: '\e81d'; }

.icon.icon--lock:before, ul.list-arrow li.icon--lock:before, .list-widget ul li.icon--lock:before,
ul.list-icon li.icon--lock:before, .icon--lock.modal__close:before, .icon--lock.btn-dropdown__toggle:before, .sub-menu-link a.icon--lock:before, .icon--lock.link-icon:before {
  content: '\e81e'; }

.icon.icon--phone:before, ul.list-arrow li.icon--phone:before, .list-widget ul li.icon--phone:before,
ul.list-icon li.icon--phone:before, .icon--phone.modal__close:before, .icon--phone.btn-dropdown__toggle:before, .sub-menu-link a.icon--phone:before, .icon--phone.link-icon:before {
  content: '\e81f'; }

.icon.icon--tag:before, ul.list-arrow li.icon--tag:before, .list-widget ul li.icon--tag:before,
ul.list-icon li.icon--tag:before, .icon--tag.modal__close:before, .icon--tag.btn-dropdown__toggle:before, .sub-menu-link a.icon--tag:before, .icon--tag.link-icon:before {
  content: '\e820'; }

.icon.icon--first-aid:before, ul.list-arrow li.icon--first-aid:before, .list-widget ul li.icon--first-aid:before,
ul.list-icon li.icon--first-aid:before, .icon--first-aid.modal__close:before, .icon--first-aid.btn-dropdown__toggle:before, .sub-menu-link a.icon--first-aid:before, .icon--first-aid.link-icon:before {
  content: '\e821'; }

.icon.icon--newspaper:before, ul.list-arrow li.icon--newspaper:before, .list-widget ul li.icon--newspaper:before,
ul.list-icon li.icon--newspaper:before, .icon--newspaper.modal__close:before, .icon--newspaper.btn-dropdown__toggle:before, .sub-menu-link a.icon--newspaper:before, .icon--newspaper.link-icon:before {
  content: '\e822'; }

.icon.icon--menu:before, ul.list-arrow li.icon--menu:before, .list-widget ul li.icon--menu:before,
ul.list-icon li.icon--menu:before, .icon--menu.modal__close:before, .icon--menu.btn-dropdown__toggle:before, .sub-menu-link a.icon--menu:before, .icon--menu.link-icon:before {
  content: '\e823'; }

.icon.icon--phone-closed:before, ul.list-arrow li.icon--phone-closed:before, .list-widget ul li.icon--phone-closed:before,
ul.list-icon li.icon--phone-closed:before, .icon--phone-closed.modal__close:before, .icon--phone-closed.btn-dropdown__toggle:before, .sub-menu-link a.icon--phone-closed:before, .icon--phone-closed.link-icon:before {
  content: '\e824'; }

.icon.icon--check:before, ul.list-arrow li.icon--check:before, .list-widget ul li.icon--check:before,
ul.list-icon li.icon--check:before, .icon--check.modal__close:before, .icon--check.btn-dropdown__toggle:before, .sub-menu-link a.icon--check:before, .icon--check.link-icon:before {
  content: '\e825'; }

.icon.icon--target:before, ul.list-arrow li.icon--target:before, .list-widget ul li.icon--target:before,
ul.list-icon li.icon--target:before, .icon--target.modal__close:before, .icon--target.btn-dropdown__toggle:before, .sub-menu-link a.icon--target:before, .icon--target.link-icon:before {
  content: '\e826'; }

.icon.icon--play:before, ul.list-arrow li.icon--play:before, .list-widget ul li.icon--play:before,
ul.list-icon li.icon--play:before, .icon--play.modal__close:before, .icon--play.btn-dropdown__toggle:before, .sub-menu-link a.icon--play:before, .icon--play.link-icon:before {
  content: '\e827'; }

.icon.icon--mobile-phone:before, ul.list-arrow li.icon--mobile-phone:before, .list-widget ul li.icon--mobile-phone:before,
ul.list-icon li.icon--mobile-phone:before, .icon--mobile-phone.modal__close:before, .icon--mobile-phone.btn-dropdown__toggle:before, .sub-menu-link a.icon--mobile-phone:before, .icon--mobile-phone.link-icon:before {
  content: '\e828'; }

.icon.icon--play-1:before, ul.list-arrow li.icon--play-1:before, .list-widget ul li.icon--play-1:before,
ul.list-icon li.icon--play-1:before, .icon--play-1.modal__close:before, .icon--play-1.btn-dropdown__toggle:before, .sub-menu-link a.icon--play-1:before, .icon--play-1.link-icon:before {
  content: '\e829'; }

.icon.icon--calendar:before, ul.list-arrow li.icon--calendar:before, .list-widget ul li.icon--calendar:before,
ul.list-icon li.icon--calendar:before, .icon--calendar.modal__close:before, .icon--calendar.btn-dropdown__toggle:before, .sub-menu-link a.icon--calendar:before, .icon--calendar.link-icon:before {
  content: '\e82a'; }

.icon.icon--link:before, ul.list-arrow li.icon--link:before, .list-widget ul li.icon--link:before,
ul.list-icon li.icon--link:before, .icon--link.modal__close:before, .icon--link.btn-dropdown__toggle:before, .sub-menu-link a.icon--link:before, .icon--link.link-icon:before {
  content: '\e82b'; }

.icon.icon--location:before, ul.list-arrow li.icon--location:before, .list-widget ul li.icon--location:before,
ul.list-icon li.icon--location:before, .icon--location.modal__close:before, .icon--location.btn-dropdown__toggle:before, .sub-menu-link a.icon--location:before, .icon--location.link-icon:before {
  content: '\e82c'; }

.icon.icon--not-found:before, ul.list-arrow li.icon--not-found:before, .list-widget ul li.icon--not-found:before,
ul.list-icon li.icon--not-found:before, .icon--not-found.modal__close:before, .icon--not-found.btn-dropdown__toggle:before, .sub-menu-link a.icon--not-found:before, .icon--not-found.link-icon:before {
  content: '\e82d'; }

.icon.icon--mobile:before, ul.list-arrow li.icon--mobile:before, .list-widget ul li.icon--mobile:before,
ul.list-icon li.icon--mobile:before, .icon--mobile.modal__close:before, .icon--mobile.btn-dropdown__toggle:before, .sub-menu-link a.icon--mobile:before, .icon--mobile.link-icon:before {
  content: '\f10b'; }

.icon.icon--angle-circled-up:before, ul.list-arrow li.icon--angle-circled-up:before, .list-widget ul li.icon--angle-circled-up:before,
ul.list-icon li.icon--angle-circled-up:before, .icon--angle-circled-up.modal__close:before, .icon--angle-circled-up.btn-dropdown__toggle:before, .sub-menu-link a.icon--angle-circled-up:before, .icon--angle-circled-up.link-icon:before {
  content: '\f139'; }

.icon.icon--angle-circled-down:before, ul.list-arrow li.icon--angle-circled-down:before, .list-widget ul li.icon--angle-circled-down:before,
ul.list-icon li.icon--angle-circled-down:before, .icon--angle-circled-down.modal__close:before, .icon--angle-circled-down.btn-dropdown__toggle:before, .sub-menu-link a.icon--angle-circled-down:before, .icon--angle-circled-down.link-icon:before {
  content: '\f13a'; }

.icon.icon--paper-plane:before, ul.list-arrow li.icon--paper-plane:before, .list-widget ul li.icon--paper-plane:before,
ul.list-icon li.icon--paper-plane:before, .icon--paper-plane.modal__close:before, .icon--paper-plane.btn-dropdown__toggle:before, .sub-menu-link a.icon--paper-plane:before, .icon--paper-plane.link-icon:before {
  content: '\f1d8'; }

.icon.icon--dot-2:before, ul.list-arrow li.icon--dot-2:before, .list-widget ul li.icon--dot-2:before,
ul.list-icon li.icon--dot-2:before, .icon--dot-2.modal__close:before, .icon--dot-2.btn-dropdown__toggle:before, .sub-menu-link a.icon--dot-2:before, .icon--dot-2.link-icon:before {
  content: '\e82e'; }

.icon.icon--record:before, ul.list-arrow li.icon--record:before, .list-widget ul li.icon--record:before,
ul.list-icon li.icon--record:before, .icon--record.modal__close:before, .icon--record.btn-dropdown__toggle:before, .sub-menu-link a.icon--record:before, .icon--record.link-icon:before {
  content: '\e82f'; }

.icon.icon--info-phone:before, ul.list-arrow li.icon--info-phone:before, .list-widget ul li.icon--info-phone:before,
ul.list-icon li.icon--info-phone:before, .icon--info-phone.modal__close:before, .icon--info-phone.btn-dropdown__toggle:before, .sub-menu-link a.icon--info-phone:before, .icon--info-phone.link-icon:before {
  content: '\e830'; }

.icon.icon--vimeo:before, ul.list-arrow li.icon--vimeo:before, .list-widget ul li.icon--vimeo:before,
ul.list-icon li.icon--vimeo:before, .icon--vimeo.modal__close:before, .icon--vimeo.btn-dropdown__toggle:before, .sub-menu-link a.icon--vimeo:before, .icon--vimeo.link-icon:before {
  content: '\f306'; }

.icon.icon--camera:before, ul.list-arrow li.icon--camera:before, .list-widget ul li.icon--camera:before,
ul.list-icon li.icon--camera:before, .icon--camera.modal__close:before, .icon--camera.btn-dropdown__toggle:before, .sub-menu-link a.icon--camera:before, .icon--camera.link-icon:before {
  content: '\e831'; }

.icon.icon--graduation-cap:before, ul.list-arrow li.icon--graduation-cap:before, .list-widget ul li.icon--graduation-cap:before,
ul.list-icon li.icon--graduation-cap:before, .icon--graduation-cap.modal__close:before, .icon--graduation-cap.btn-dropdown__toggle:before, .sub-menu-link a.icon--graduation-cap:before, .icon--graduation-cap.link-icon:before {
  content: '\e832'; }

.icon.icon--pencil:before, ul.list-arrow li.icon--pencil:before, .list-widget ul li.icon--pencil:before,
ul.list-icon li.icon--pencil:before, .icon--pencil.modal__close:before, .icon--pencil.btn-dropdown__toggle:before, .sub-menu-link a.icon--pencil:before, .icon--pencil.link-icon:before {
  content: '\e833'; }

.icon.icon--location-1:before, ul.list-arrow li.icon--location-1:before, .list-widget ul li.icon--location-1:before,
ul.list-icon li.icon--location-1:before, .icon--location-1.modal__close:before, .icon--location-1.btn-dropdown__toggle:before, .sub-menu-link a.icon--location-1:before, .icon--location-1.link-icon:before {
  content: '\e834'; }

.icon.icon--clock-circled:before, ul.list-arrow li.icon--clock-circled:before, .list-widget ul li.icon--clock-circled:before,
ul.list-icon li.icon--clock-circled:before, .icon--clock-circled.modal__close:before, .icon--clock-circled.btn-dropdown__toggle:before, .sub-menu-link a.icon--clock-circled:before, .icon--clock-circled.link-icon:before {
  content: '\e835'; }

.icon:before, ul.list-arrow li:before, .list-widget ul li:before,
ul.list-icon li:before, .modal__close:before, .btn-dropdown__toggle:before, .sub-menu-link a:before, .link-icon:before {
  display: inline-block;
  text-decoration: inherit;
  speak: none;
  font-style: normal;
  font-weight: normal; }

.icon--color-light:before {
  color: white; }

.icon--color-dark:before {
  color: black; }

.icon--color-alpha:before {
  color: #f6f6f6; }

.icon--color-beta:before {
  color: #E67408; }

.icon--color-gamma:before {
  color: #1DAFC5; }

.icon--color-delta:before {
  color: #80356F; }

.icon--color-epsilon:before {
  color: #ED3D6B; }

.icon--color-dota:before {
  color: #5DC637; }

.icon--color-jeta:before {
  color: #B1B1B1; }

.icon--color-kappa:before {
  color: #8DC63F; }

.icon.icon--margin:before, ul.list-arrow li.icon--margin:before, .list-widget ul li.icon--margin:before,
ul.list-icon li.icon--margin:before, .icon--margin.modal__close:before, .icon--margin.btn-dropdown__toggle:before, .sub-menu-link a.icon--margin:before, .icon--margin.link-icon:before {
  margin-right: 0.5rem;
  /* =8px */ }

.icon-after.icon--spinner:after, .menu-item--submenu .icon--spinner.menu-link:after {
  content: '\e800'; }

.icon-after.icon--ok:after, .menu-item--submenu .icon--ok.menu-link:after {
  content: '\e801'; }

.icon-after.icon--cancel:after, .icon-after.modal__close:after, .menu-item--submenu .modal__close.menu-link:after, .menu-item--submenu .icon--cancel.menu-link:after {
  content: '\e802'; }

.icon-after.icon--cancel-circle:after, .menu-item--submenu .icon--cancel-circle.menu-link:after {
  content: '\e803'; }

.icon-after.icon--info:after, .menu-item--submenu .icon--info.menu-link:after {
  content: '\e804'; }

.icon-after.icon--attention:after, .menu-item--submenu .icon--attention.menu-link:after {
  content: '\e805'; }

.icon-after.icon--question:after, .menu-item--submenu .icon--question.menu-link:after {
  content: '\e806'; }

.icon-after.icon--eye:after, .menu-item--submenu .icon--eye.menu-link:after {
  content: '\e807'; }

.icon-after.icon--eye-off:after, .menu-item--submenu .icon--eye-off.menu-link:after {
  content: '\e808'; }

.icon-after.icon--menu:after, .menu-item--submenu .icon--menu.menu-link:after {
  content: '\e809'; }

.icon-after.icon--down:after, .icon-after.btn-dropdown__toggle:after, .menu-item--submenu .menu-link:after {
  content: '\e80a'; }

.icon-after.icon--left:after, .menu-item--submenu .icon--left.menu-link:after {
  content: '\e80b'; }

.icon-after.icon--right:after, ul.list-arrow li.icon-after:after, .list-widget ul li.icon-after:after, ul.list-arrow .menu-item--submenu li.menu-link:after, .menu-item--submenu ul.list-arrow li.menu-link:after, .list-widget ul .menu-item--submenu li.menu-link:after, .menu-item--submenu .list-widget ul li.menu-link:after,
ul.list-icon li.icon-after:after, ul.list-icon .menu-item--submenu li.menu-link:after, .menu-item--submenu ul.list-icon li.menu-link:after, .sub-menu-link a.icon-after:after, .sub-menu-link .menu-item--submenu a.menu-link:after, .menu-item--submenu .sub-menu-link a.menu-link:after, .menu-item--submenu .icon--right.menu-link:after, .menu-item--submenu .menu-link.link-icon:after, .icon-after.link-icon:after {
  content: '\e80c'; }

.icon-after.icon--up:after, .menu-item--submenu .icon--up.menu-link:after {
  content: '\e80d'; }

.icon-after.icon--cog:after, .menu-item--submenu .icon--cog.menu-link:after {
  content: '\e80e'; }

.icon-after.icon--search:after, .menu-item--submenu .icon--search.menu-link:after {
  content: '\e80f'; }

.icon-after.icon--phone:after, .menu-item--submenu .icon--phone.menu-link:after {
  content: '\e810'; }

.icon-after.icon--twitter:after, .menu-item--submenu .icon--twitter.menu-link:after {
  content: '\e811'; }

.icon-after.icon--facebook:after, .menu-item--submenu .icon--facebook.menu-link:after {
  content: '\e812'; }

.icon-after.icon--linkedin:after, .menu-item--submenu .icon--linkedin.menu-link:after {
  content: '\e813'; }

.icon-after.icon--youtube:after, .menu-item--submenu .icon--youtube.menu-link:after {
  content: '\e814'; }

.icon-after.icon--instagram:after, .menu-item--submenu .icon--instagram.menu-link:after {
  content: '\f32d'; }

.icon-after.icon--speak:after, .menu-item--submenu .icon--speak.menu-link:after {
  content: '\e815'; }

.icon-after.icon--email:after, .menu-item--submenu .icon--email.menu-link:after {
  content: '\e816'; }

.icon-after.icon--clock:after, .menu-item--submenu .icon--clock.menu-link:after {
  content: '\e817'; }

.icon-after.icon--chevron-down:after, .menu-item--submenu .icon--chevron-down.menu-link:after {
  content: '\e818'; }

.icon-after.icon--chevron-left:after, .menu-item--submenu .icon--chevron-left.menu-link:after {
  content: '\e819'; }

.icon-after.icon--chevron-right:after, .menu-item--submenu .icon--chevron-right.menu-link:after {
  content: '\e81a'; }

.icon-after.icon--chevron-up:after, .menu-item--submenu .icon--chevron-up.menu-link:after {
  content: '\e81b'; }

.icon-after.icon--search-light:after, .menu-item--submenu .icon--search-light.menu-link:after {
  content: '\e81C'; }

.icon-after.icon--close:after, .menu-item--submenu .icon--close.menu-link:after {
  content: '\e81d'; }

.icon-after.icon--lock:after, .menu-item--submenu .icon--lock.menu-link:after {
  content: '\e81e'; }

.icon-after.icon--phone:after, .menu-item--submenu .icon--phone.menu-link:after {
  content: '\e81f'; }

.icon-after.icon--tag:after, .menu-item--submenu .icon--tag.menu-link:after {
  content: '\e820'; }

.icon-after.icon--first-aid:after, .menu-item--submenu .icon--first-aid.menu-link:after {
  content: '\e821'; }

.icon-after.icon--newspaper:after, .menu-item--submenu .icon--newspaper.menu-link:after {
  content: '\e822'; }

.icon-after.icon--menu:after, .menu-item--submenu .icon--menu.menu-link:after {
  content: '\e823'; }

.icon-after.icon--phone-closed:after, .menu-item--submenu .icon--phone-closed.menu-link:after {
  content: '\e824'; }

.icon-after.icon--check:after, .menu-item--submenu .icon--check.menu-link:after {
  content: '\e825'; }

.icon-after.icon--target:after, .menu-item--submenu .icon--target.menu-link:after {
  content: '\e826'; }

.icon-after.icon--play:after, .menu-item--submenu .icon--play.menu-link:after {
  content: '\e827'; }

.icon-after.icon--mobile-phone:after, .menu-item--submenu .icon--mobile-phone.menu-link:after {
  content: '\e828'; }

.icon-after.icon--play-1:after, .menu-item--submenu .icon--play-1.menu-link:after {
  content: '\e829'; }

.icon-after.icon--calendar:after, .menu-item--submenu .icon--calendar.menu-link:after {
  content: '\e82a'; }

.icon-after.icon--link:after, .menu-item--submenu .icon--link.menu-link:after {
  content: '\e82b'; }

.icon-after.icon--location:after, .menu-item--submenu .icon--location.menu-link:after {
  content: '\e82c'; }

.icon-after.icon--not-found:after, .menu-item--submenu .icon--not-found.menu-link:after {
  content: '\e82d'; }

.icon-after.icon--mobile:after, .menu-item--submenu .icon--mobile.menu-link:after {
  content: '\f10b'; }

.icon-after.icon--angle-circled-up:after, .menu-item--submenu .icon--angle-circled-up.menu-link:after {
  content: '\f139'; }

.icon-after.icon--angle-circled-down:after, .menu-item--submenu .icon--angle-circled-down.menu-link:after {
  content: '\f13a'; }

.icon-after.icon--paper-plane:after, .menu-item--submenu .icon--paper-plane.menu-link:after {
  content: '\f1d8'; }

.icon-after.icon--dot-2:after, .menu-item--submenu .icon--dot-2.menu-link:after {
  content: '\e82e'; }

.icon-after.icon--record:after, .menu-item--submenu .icon--record.menu-link:after {
  content: '\e82f'; }

.icon-after.icon--info-phone:after, .menu-item--submenu .icon--info-phone.menu-link:after {
  content: '\e830'; }

.icon-after.icon--vimeo:after, .menu-item--submenu .icon--vimeo.menu-link:after {
  content: '\f306'; }

.icon-after.icon--camera:after, .menu-item--submenu .icon--camera.menu-link:after {
  content: '\e831'; }

.icon-after.icon--graduation-cap:after, .menu-item--submenu .icon--graduation-cap.menu-link:after {
  content: '\e832'; }

.icon-after.icon--pencil:after, .menu-item--submenu .icon--pencil.menu-link:after {
  content: '\e833'; }

.icon-after.icon--location-1:after, .menu-item--submenu .icon--location-1.menu-link:after {
  content: '\e834'; }

.icon-after.icon--clock-circled:after, .menu-item--submenu .icon--clock-circled.menu-link:after {
  content: '\e835'; }

.icon-after:after, .menu-item--submenu .menu-link:after {
  display: inline-block;
  text-decoration: inherit;
  speak: none;
  font-style: normal;
  font-weight: normal; }

.icon-after--color-light:after {
  color: white; }

.icon-after--color-dark:after {
  color: black; }

.icon-after--color-alpha:after {
  color: #f6f6f6; }

.icon-after--color-beta:after {
  color: #E67408; }

.icon-after--color-gamma:after {
  color: #1DAFC5; }

.icon-after--color-delta:after {
  color: #80356F; }

.icon-after--color-epsilon:after {
  color: #ED3D6B; }

.icon-after--color-dota:after {
  color: #5DC637; }

.icon-after--color-jeta:after {
  color: #B1B1B1; }

.icon-after--color-kappa:after {
  color: #8DC63F; }

.icon-after.icon--margin:after, .menu-item--submenu .icon--margin.menu-link:after {
  margin-right: 0.5rem;
  /* =8px */ }

/*doc
---
title: Icons
name: Icons
category: Structure
---

There are several icons predefined in basos, but you could ditch them all and add your own icons.

These icons are generated with [fontello.com](http://fontello.com), you can use the fontello config.json in assets/src/fonts/src/fontello/ to preselect the icons already defined for basos on fontello.com.

```html_example
<div class="icon icon--spinner"></div>
<div class="icon icon--ok"></div>
<div class="icon icon--cancel"></div>
<div class="icon icon--cancel-circle"></div>
<div class="icon icon--info"></div>
<div class="icon icon--attention"></div>
<div class="icon icon--question"></div>
<div class="icon icon--eye"></div>
<div class="icon icon--eye-off"></div>
<div class="icon icon--menu"></div>
<div class="icon icon--down"></div>
<div class="icon icon--left"></div>
<div class="icon icon--right"></div>
<div class="icon icon--up"></div>
<div class="icon icon--cog"></div>
```

## Icon margin
You can add margin with the icon margin modifier to the icons if you use it in a button for example.

Margin modifiers available;

- icon--margin-alpha (default: 10)
- icon--margin-beta (default: 20)

```html_example
<a class="btn btn--beta btn--medium icon icon--menu icon--margin-alpha">just a button</a>
```
*/
/* Optional components
==========
You can comment some of these out
for a smaller generated CSS file.
*/
/* Modals
==========
*/
.modal {
  position: fixed;
  top: 10%;
  left: 5%;
  width: 90%;
  z-index: 2000;
  visibility: hidden;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) {
    .modal {
      min-width: 31.25rem;
      /* =500px */ } }
  @media (min-width: 701px) {
    .modal {
      height: auto;
      top: 50%;
      left: 50%;
      width: 50%;
      max-height: 100%;
      transform: translate(-50%, -50%);
      max-width: 630px; } }
  .modal.modal-show {
    visibility: visible; }
  .lt-ie9 .modal {
    top: 0;
    margin-left: -315px; }
  .modal__content {
    background: white;
    border-radius: 0;
    position: relative;
    margin: 0 auto;
    opacity: 0;
    height: 100%;
    transform: scale(0.7);
    transition: all 0.3s;
    padding: 10px; }
    .modal-show .modal__content {
      opacity: 1;
      transform: scale(1); }
  .modal__overlay {
    background: black;
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 0;
    transition-property: visibility opacity;
    transition-delay: 0.1s;
    transition-duration: 0.5s; }
    .modal-show .modal__overlay {
      visibility: visible;
      opacity: 0.4;
      transition: opacity 0.5s; }
  .modal__trigger img {
    display: inline-block; }
  .modal__close {
    position: absolute;
    top: -1.125rem;
    /* =-18px */
    right: 0.625rem;
    /* =10px */
    padding: 0.625rem;
    /* =10px */
    font-size: 1.875rem;
    /* =30px */
    line-height: 1.875rem;
    /* =30px */
    line-height: 1rem;
    background: white;
    border-radius: 50%;
    height: 40px;
    border: 1px solid #eae8ea; }

/*doc
---
title: Modals
name: modals
category: Callouts and prompts
---

## Make

```html_example
<a class="btn btn--alpha btn--small modal__trigger" data-modal-id="modal-make" data-modal-title="Weet je het zeker?" data-modal-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-modal-close-btn="sluiten">Make</a>
```

## Confirm

You can go both ways with the confirm modal. You could call it from your HTML with data attributes or you could call it from Javascript. If you use Javascript you can set a callback function, this function will trigger when the modal has opened.

### HTML
```html_example
<a class="btn btn--alpha btn--small modal__trigger" data-modal-id="modal-make2" data-modal-title="Weet je het zeker?" data-modal-close-btn="annuleren" data-modal="confirm" data-modal-confirm-action="http://www.google.nl" data-modal-confirm-btn="Ja, verwijder">Confirm</a>
```


### Javascript call
```
app.modals.confirm({
    modalTitle: 'title', // Title printed in the modal (optional)
    modalText: 'text', // Text to explain the action (optional)
    modalConfirmAction: 'http://google.nl', // URL for the confirm button
    modalConfirmBtn: 'bevestigen', // Confirm button text (optional, default: bevestigen)
    modalCloseBtn: 'annuleren', // Cancel button text (optional, default: annuleren)

    modalOpenCallback: function () {
        // Do magic here..
    }
});
```


## Static

```html_example
<a class="btn btn--alpha btn--small modal__trigger" data-modal-id="modal-static">Static</a>
<div id="modal-static" class="modal">
    <div class="modal__content">
        <a class="modal__close" data-modal-close></a>
        <h2>Dit is een titel</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        <a href="#" class="btn btn--beta btn--medium" data-modal-close>Akkoord</a>
    </div>
</div>
```


## Open

Function to open a modal from Javascript.

```
app.modals.openModal(this, options);
```


## Close

Function to close an open modal.

```
app.modals.closeModal();
```

*/
/* Tables
==========
*/
.table-responsive {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

.table {
  width: 100%;
  margin-bottom: 1.875rem;
  /* =30px */ }
  .table td,
  .table th {
    padding: 10px;
    text-align: left;
    vertical-align: top; }
  .table td {
    border-top: 1px solid #e9e9e9; }
  .table--hover tr:hover td {
    background: #f6f6f6; }
  .table--zebra tr:nth-child(odd) td {
    background: #f8f8f8; }
  .table--bordered {
    border: 1px solid #e9e9e9; }
    .table--bordered td,
    .table--bordered th {
      border-left: 1px solid #e9e9e9; }
      .table--bordered td:first-child,
      .table--bordered th:first-child {
        border-left: none; }

/*doc
---
title: Tables
name: tables
category: Content
---

## Default table

```html_example
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
        </tr>
    </tbody>
</table>
```

## Hover table

```html_example
<table class="table table--hover">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
        </tr>
    </tbody>
</table>
```

## Zebra table

```html_example
<table class="table table--zebra">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
        </tr>
    </tbody>
</table>
```

## Bordered table

```html_example
<table class="table table--bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
        </tr>
    </tbody>
</table>
```

## Zebra & bordered table

```html_example
<table class="table table--zebra table--bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Show</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Bender</td>
            <td>Rodrigues</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Philip</td>
            <td>Fry</td>
            <td>Futurama</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Seinfeld</td>
            <td>Seinfeld</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Larry</td>
            <td>David</td>
            <td>Seinfeld</td>
        </tr>
    </tbody>
</table>
```

## Responsive table

```html_example
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Show</th>
                <th>Yada</th>
                <th>Yada</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Bender</td>
                <td>Rodrigues</td>
                <td>Futurama</td>
                <td>Yada</td>
                <td>Yada</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Philip</td>
                <td>Fry</td>
                <td>Futurama</td>
                <td>Yada</td>
                <td>Yada</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Jerry</td>
                <td>Seinfeld</td>
                <td>Seinfeld</td>
                <td>Yada</td>
                <td>Yada</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Larry</td>
                <td>David</td>
                <td>Seinfeld</td>
                <td>Yada</td>
                <td>Yada</td>
            </tr>
        </tbody>
    </table>
</div>
```


*/
/* Accordion
==========
*/
.accordion {
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 0.625rem; }
  .accordion__group {
    overflow: hidden;
    margin-bottom: 0; }
  .accordion__trigger {
    display: inline-block;
    position: relative;
    background-color: white;
    color: #3C3036;
    padding: 10px 20px 10px 30px;
    border-bottom: 1px solid white; }
    .accordion__trigger:hover {
      background-color: white;
      color: #1DAFC5; }
      .accordion__trigger:hover:before {
        color: #1DAFC5; }
    .accordion-content-show .accordion__trigger {
      background-color: #ffffff;
      color: #1DAFC5; }
    .accordion__trigger:before {
      font-size: 1.5rem;
      content: "";
      position: absolute;
      top: 1.375rem;
      color: #80356F;
      transform: translate(0, -50%);
      transition: all, 0.2s;
      left: 0.0625rem;
      /* =1px */ }
      .no-csstransforms .accordion__trigger:before {
        margin-top: -10px; }
      .accordion-content-show .accordion__trigger:before {
        content: "";
        color: #1DAFC5; }
  .accordion__content {
    overflow: hidden;
    padding: 0;
    transition: all, 0.2s;
    padding-left: 1.875rem;
    /* p{
            margin-bottom: rem(5px);
        } */ }
    .lt-ie9 .accordion__content {
      height: 0; }
    .accordion__content > *:first-child {
      margin-top: 0; }
    .lt-ie9 .accordion-content-show .accordion__content {
      height: auto;
      max-height: 1000px !important; }
  .accordion__alpha {
    margin-bottom: 0; }
    .accordion__alpha .accordion__group {
      border-bottom: 1px solid #ddd; }
    .accordion__alpha .accordion__trigger {
      width: 100%;
      padding: 0.9375rem 3.75rem 0.9375rem 0;
      color: #80356F;
      font-size: 1.125rem;
      font-weight: bold; }
      .accordion__alpha .accordion__trigger:hover {
        color: #1DAFC5; }
        .accordion__alpha .accordion__trigger:hover:after {
          color: #1DAFC5; }
      .accordion__alpha .accordion__trigger:before {
        display: none; }
      .accordion__alpha .accordion__trigger:after {
        font-size: 1.5rem;
        content: '\e80a';
        font-family: 'icons';
        font-weight: bold;
        position: absolute;
        top: 1.8125rem;
        color: #820263;
        transform: translate(0, -50%);
        transition: all, 0.2s;
        right: 0.0625rem; }
    .accordion__alpha .accordion__content {
      padding: 0;
      /* p {
                line-height: rem(30px);
            } */ }
    .accordion__alpha .accordion-content-show .accordion__content {
      margin: 0.625rem 0 1.875rem; }
    .accordion__alpha .accordion-content-show .accordion__trigger {
      color: #1DAFC5; }
      .accordion__alpha .accordion-content-show .accordion__trigger:after {
        color: #1DAFC5;
        content: '\e80d'; }

/*doc
---
title: Accordion
name: accordion
category: Content
---

```html_example
<div class="accordion">
    <div class="accordion__group accordion-content-show">
        <a class="accordion__trigger">Accordion item #1</a>
        <div class="accordion__content">
            <div class="grid">
                <div class="column-12">
                    <p>You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
                    <p>Okay, I like a challenge. Oh, I think we should just stay friends. And from now on you're all named Bender Jr. Why did you bring us here? Humans dating robots is sick. You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! Why would I want to know that?</p>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion__group">
        <a class="accordion__trigger">Accordion item #2</a>
        <div class="accordion__content">
            <div class="grid">
                <div class="column-12">
                    <p>You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
                    <p>Okay, I like a challenge. Oh, I think we should just stay friends. And from now on you're all named Bender Jr. Why did you bring us here? Humans dating robots is sick. You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! Why would I want to know that?</p>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion__group">
        <a class="accordion__trigger">Accordion item #3</a>
        <div class="accordion__content">
            <div class="grid">
                <div class="column-12">
                    <p>You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</p>
                    <p>Okay, I like a challenge. Oh, I think we should just stay friends. And from now on you're all named Bender Jr. Why did you bring us here? Humans dating robots is sick. You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! Why would I want to know that?</p>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion__group">
        <a class="accordion__trigger">Accordion item #4</a>
        <div class="accordion__content">
            <h2>With a grid inside</h2>
            <div class="grid">
                <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
                <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
            </div>
            <div class="grid">
                <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
                <div class="column-6">You guys realize you live in a sewer, right? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Who am I making this out to? No! Don't jump! Bender, we're trying our best.</div>
            </div>
        </div>
    </div>
</div>
```

*/
/* Off canvas
==========
*/
/*doc
---
title: Buttons
name: 5_buttons
category: Buttons
---

Buttons

*/
/* Button container
==========
*/
.btn-container {
  margin: 0 0 1.875rem 0;
  /* =0 0 30px 0 */ }
  .btn-container a {
    padding: 0.625rem 1.125rem;
    /* =10px 18px */ }
  .btn-container--center {
    text-align: center; }
    .btn-container--center ul {
      display: inline-block; }
  .btn-container--right {
    text-align: right; }
    .btn-container--right ul {
      float: right; }

/* Button group
==========
*/
.btn-group {
  margin: 0 0 1.875rem 0;
  /* =0 0 30px 0 */
  /*doc
---
title: Inline
name: inline
category: Buttons
---

These work with the button classes so you can use those to change color and size.

```html_example
<ul class="btn-group btn-group--inline">
    <li><a class="btn btn--beta btn--medium" href="#">button</a></li>
    <li><a class="btn btn--beta btn--medium" href="#">button</a></li>
    <li><a class="btn btn--beta btn--medium" href="#">button</a></li>
    <li><a class="btn btn--beta btn--medium" href="#">button</a></li>
</ul>
```

*/ }
  .btn-group > li a,
  .btn-group > li span {
    border-radius: 0; }
  .btn-group--inline > li {
    margin-right: 0;
    margin-left: 0;
    float: left; }
    .btn-group--inline > li:first-child {
      margin: 0; }
      .btn-group--inline > li:first-child a,
      .btn-group--inline > li:first-child span {
        border-left: 0;
        border-radius: 0 0 0 0; }
    .btn-group--inline > li:last-child a,
    .btn-group--inline > li:last-child span {
      border-radius: 0 0 0 0; }
  .btn-group--block > li {
    margin-top: -1px; }
    .btn-group--block > li a,
    .btn-group--block > li span {
      display: block; }
    .btn-group--block > li:first-child {
      margin: 0; }
      .btn-group--block > li:first-child a,
      .btn-group--block > li:first-child span {
        border-top: 0;
        border-radius: 0 0 0 0; }
    .btn-group--block > li:last-child a,
    .btn-group--block > li:last-child span {
      border-radius: 0 0 0 0; }

/*doc
---
title: Group
name: group
category: Buttons
---

These work with the button classes so you can use those to change color, size is controlled with specific pagination padding.

## Default group

```html_example
<div class="btn-container">
    <a class="btn btn--alpha" href="#">&lsaquo;</a>
    <a class="btn btn--alpha" href="#">1</a>
    <a class="btn btn--alpha" href="#">2</a>
    <a class="btn btn--alpha" href="#">3</a>
    <a class="btn btn--alpha" href="#">4</a>
    <a class="btn btn--alpha" href="#">5</a>
    <a class="btn btn--divider">...</a>
    <a class="btn btn--alpha" href="#">23</a>
    <a class="btn btn--alpha" href="#">&rsaquo;</a>
</div>
```

## Centered group

```html_example
<div class="btn-container btn-container--center">
    <a class="btn btn--alpha" href="#">&lsaquo;</a>
    <a class="btn btn--alpha" href="#">1</a>
    <a class="btn btn--alpha" href="#">2</a>
    <a class="btn btn--alpha" href="#">3</a>
    <a class="btn btn--alpha" href="#">4</a>
    <a class="btn btn--alpha" href="#">5</a>
    <a class="btn btn--divider">...</a>
    <a class="btn btn--alpha" href="#">23</a>
    <a class="btn btn--alpha" href="#">&rsaquo;</a>
</div>
```

## Right group

```html_example
<div class="btn-container btn-container--right">
    <a class="btn btn--alpha" href="#">&lsaquo;</a>
    <a class="btn btn--alpha" href="#">1</a>
    <a class="btn btn--alpha" href="#">2</a>
    <a class="btn btn--alpha" href="#">3</a>
    <a class="btn btn--alpha" href="#">4</a>
    <a class="btn btn--alpha" href="#">5</a>
    <a class="btn btn--divider">...</a>
    <a class="btn btn--alpha" href="#">23</a>
    <a class="btn btn--alpha" href="#">&rsaquo;</a>
</div>
```

## Button group

```html_example
<div class="btn-container">
    <ul class="btn-group btn-group--inline">
        <li><a class="btn btn--alpha" href="#">&lsaquo;</a></li>
        <li><a class="btn btn--alpha" href="#">1</a></li>
        <li><a class="btn btn--alpha" href="#">2</a></li>
        <li><a class="btn btn--alpha" href="#">3</a></li>
        <li><a class="btn btn--alpha" href="#">4</a></li>
        <li><a class="btn btn--alpha" href="#">5</a></li>
        <li><a class="btn btn--divider">...</a></li>
        <li><a class="btn btn--alpha" href="#">23</a></li>
        <li><a class="btn btn--alpha" href="#">&rsaquo;</a></li>
    </ul>
</div>
```

## Centered button group

```html_example
<div class="btn-container btn-container--center">
    <ul class="btn-group btn-group--inline">
        <li><a class="btn btn--alpha" href="#">&lsaquo;</a></li>
        <li><a class="btn btn--alpha" href="#">1</a></li>
        <li><a class="btn btn--alpha" href="#">2</a></li>
        <li><a class="btn btn--alpha" href="#">3</a></li>
        <li><a class="btn btn--alpha" href="#">4</a></li>
        <li><a class="btn btn--alpha" href="#">5</a></li>
        <li><a class="btn btn--divider">...</a></li>
        <li><a class="btn btn--alpha" href="#">23</a></li>
        <li><a class="btn btn--alpha" href="#">&rsaquo;</a></li>
    </ul>
</div>
```

## Right button group

```html_example
<div class="btn-container btn-container--right">
    <ul class="btn-group btn-group--inline">
        <li><a class="btn btn--alpha" href="#">&lsaquo;</a></li>
        <li><a class="btn btn--alpha" href="#">1</a></li>
        <li><a class="btn btn--alpha" href="#">2</a></li>
        <li><a class="btn btn--alpha" href="#">3</a></li>
        <li><a class="btn btn--alpha" href="#">4</a></li>
        <li><a class="btn btn--alpha" href="#">5</a></li>
        <li><a class="btn btn--divider">...</a></li>
        <li><a class="btn btn--alpha" href="#">23</a></li>
        <li><a class="btn btn--alpha" href="#">&rsaquo;</a></li>
    </ul>
</div>
```

*/
/*doc
---
title: Pagination
name: Pagination
category: Navigation
---

These work with the button classes so you can use those to change color, size is controlled with specific pagination padding.

## Default pagination

```html_example
<div class="btn-container">
    <a class="btn btn--alpha" href="#">&lsaquo;</a>
    <a class="btn btn--alpha" href="#">1</a>
    <a class="btn btn--alpha" href="#">2</a>
    <a class="btn btn--alpha" href="#">3</a>
    <a class="btn btn--alpha" href="#">4</a>
    <a class="btn btn--alpha" href="#">5</a>
    <a class="btn btn--divider">...</a>
    <a class="btn btn--alpha" href="#">23</a>
    <a class="btn btn--alpha" href="#">&rsaquo;</a>
</div>
```

## Centered pagination

```html_example
<div class="btn-container btn-container--center">
    <a class="btn btn--alpha" href="#">&lsaquo;</a>
    <a class="btn btn--alpha" href="#">1</a>
    <a class="btn btn--alpha" href="#">2</a>
    <a class="btn btn--alpha" href="#">3</a>
    <a class="btn btn--alpha" href="#">4</a>
    <a class="btn btn--alpha" href="#">5</a>
    <a class="btn btn--divider">...</a>
    <a class="btn btn--alpha" href="#">23</a>
    <a class="btn btn--alpha" href="#">&rsaquo;</a>
</div>
```

## Right pagination

```html_example
<div class="btn-container btn-container--right">
    <a class="btn btn--alpha" href="#">&lsaquo;</a>
    <a class="btn btn--alpha" href="#">1</a>
    <a class="btn btn--alpha" href="#">2</a>
    <a class="btn btn--alpha" href="#">3</a>
    <a class="btn btn--alpha" href="#">4</a>
    <a class="btn btn--alpha" href="#">5</a>
    <a class="btn btn--divider">...</a>
    <a class="btn btn--alpha" href="#">23</a>
    <a class="btn btn--alpha" href="#">&rsaquo;</a>
</div>
```

## Button group pagination

```html_example
<div class="btn-container">
    <ul class="btn-group btn-group--inline">
        <li><a class="btn btn--alpha" href="#">&lsaquo;</a></li>
        <li><a class="btn btn--alpha" href="#">1</a></li>
        <li><a class="btn btn--alpha" href="#">2</a></li>
        <li><a class="btn btn--alpha" href="#">3</a></li>
        <li><a class="btn btn--alpha" href="#">4</a></li>
        <li><a class="btn btn--alpha" href="#">5</a></li>
        <li><a class="btn btn--divider">...</a></li>
        <li><a class="btn btn--alpha" href="#">23</a></li>
        <li><a class="btn btn--alpha" href="#">&rsaquo;</a></li>
    </ul>
</div>
```

## Centered button group pagination

```html_example
<div class="btn-container btn-container--center">
    <ul class="btn-group btn-group--inline">
        <li><a class="btn btn--alpha" href="#">&lsaquo;</a></li>
        <li><a class="btn btn--alpha" href="#">1</a></li>
        <li><a class="btn btn--alpha" href="#">2</a></li>
        <li><a class="btn btn--alpha" href="#">3</a></li>
        <li><a class="btn btn--alpha" href="#">4</a></li>
        <li><a class="btn btn--alpha" href="#">5</a></li>
        <li><a class="btn btn--divider">...</a></li>
        <li><a class="btn btn--alpha" href="#">23</a></li>
        <li><a class="btn btn--alpha" href="#">&rsaquo;</a></li>
    </ul>
</div>
```

## Right button group pagination

```html_example
<div class="btn-container btn-container--right">
    <ul class="btn-group btn-group--inline">
        <li><a class="btn btn--alpha" href="#">&lsaquo;</a></li>
        <li><a class="btn btn--alpha" href="#">1</a></li>
        <li><a class="btn btn--alpha" href="#">2</a></li>
        <li><a class="btn btn--alpha" href="#">3</a></li>
        <li><a class="btn btn--alpha" href="#">4</a></li>
        <li><a class="btn btn--alpha" href="#">5</a></li>
        <li><a class="btn btn--divider">...</a></li>
        <li><a class="btn btn--alpha" href="#">23</a></li>
        <li><a class="btn btn--alpha" href="#">&rsaquo;</a></li>
    </ul>
</div>
```

*/
/* Button sizes
==========
*/
.btn--small.btn {
  padding: 0.625rem 1.875rem;
  /* =10px 30px */
  font-size: 1rem;
  /* =16px */ }

.btn--medium.btn {
  padding: 0.625rem 2.5rem;
  /* =10px 40px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) {
    .btn--medium.btn {
      padding: 0.625rem 2.5rem;
      /* =10px 40px */
      font-size: 1rem;
      /* =16px */ } }

.btn--large.btn {
  padding: 0.75rem 3.125rem;
  /* =12px 50px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) {
    .btn--large.btn {
      padding: 0.75rem 3.125rem;
      /* =12px 50px */ } }

/*doc
---
title: Sizes
name: sizes
category: Buttons
---

All size related stuff can be edited in the settings file.

```html_example
<a class="btn btn--beta btn--small" href="#">button small</a>
<a class="btn btn--beta btn--medium" href="#">button medium</a>
<a class="btn btn--beta btn--large" href="#">button large</a>
```

*/
/*doc
---
title: Styles
name: styles
category: Buttons
---

Add more colors in the settings file under "buttons" if you need to.

```html_example
<a class="btn btn--alpha btn--small" href="#">alpha</a>
<a class="btn btn--beta btn--small" href="#">beta</a>
<a class="btn btn--gamma btn--small" href="#">gamma</a>
<a class="btn btn--delta btn--small" href="#">delta</a>
<a class="btn btn--epsilon btn--small" href="#">epsilon</a>
```

*/
.btn {
  background-image: none;
  position: relative;
  display: inline-block;
  margin: 10px 10px 0 0;
  color: #ffffff;
  border-radius: 2px;
  border: 0;
  outline: 0;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  transition: all 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  user-select: none;
  font-weight: 600;
  /* Make a default button (.btn) looks good */
  padding: 0.625rem 2.5rem;
  /* =10px 40px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /* --- */
  background-color: #1DAFC5;
  border-color: #1DAFC5;
  line-height: 1.125rem;
  /* =18px */
  /*doc
---
title: Mask
name: mask
category: Buttons
---

```html_example
<a class="btn btn--mask btn--medium" href="#">button medium</a>
```

*/
  /*doc
---
title: Block
name: block
category: Buttons
---

```html_example
<div class="grid">
    <div class="column-6">
        <a class="btn btn--block btn--beta btn--large" href="#">block button</a>
    </div>
    <div class="column-6">
        <a class="btn btn--block btn--beta btn--large" href="#">block button</a>
    </div>
</div>
```

*/
  /*doc
---
title: Ghost
name: ghost
category: Buttons
---

Add more colors in the settings file under "buttons" if you need to.

```html_example
<a class="btn btn--ghost btn--dark btn--small" href="#">black</a>
```

*/ }
  @media (min-width: 601px) {
    .btn {
      padding: 0.625rem 2.5rem;
      /* =10px 40px */
      font-size: 1rem;
      /* =16px */ } }
  .btn:hover {
    background-color: #1a9baf; }
  .btn--divider:hover, .btn:disabled, .btn:disabled:hover, .btn.btn--disabled, .btn.btn--disabled:hover {
    background-color: #1DAFC5; }
  .btn.btn--ghost {
    color: #1DAFC5;
    border-color: #1DAFC5; }
    .btn.btn--ghost:hover {
      background: #1DAFC5;
      color: white;
      border-color: #1DAFC5; }
    .btn.btn--ghost.btn--alpha, .btn.btn--ghost.btn--light {
      color: white; }
      .btn.btn--ghost.btn--alpha:hover, .btn.btn--ghost.btn--light:hover {
        color: #3C3036; }
  .btn.btn--alpha {
    color: #80356F; }
  .btn.btn--light {
    color: #3C3036; }
  .btn.btn--border-radius {
    border-radius: 0.3125rem;
    /* =5px */ }
  .btn.btn--edged {
    border-bottom: 4px solid #178c9e; }
  .btn-group--inline .btn {
    border-left: 1px solid #1fbbd2; }
  .btn-group--block .btn {
    border-top: 1px solid #1fbbd2; }
  .btn:hover {
    color: #ffffff; }
  .btn:focus {
    outline: none;
    transition-duration: 0.05s; }
  .btn:disabled, .btn:disabled:hover, .btn.btn--disabled, .btn.btn--disabled:hover {
    cursor: not-allowed;
    color: #cccccc;
    opacity: 0.5; }
    .btn:disabled:focus, .btn:disabled:hover:focus, .btn.btn--disabled:focus, .btn.btn--disabled:hover:focus {
      box-shadow: none; }
  .btn--beta, .btn--gamma, .btn--delta, .btn--epsilon, .btn--dota, .btn--jeta, .btn--kappa {
    color: white;
    text-shadow: none; }
    .btn--beta:hover, .btn--gamma:hover, .btn--delta:hover, .btn--epsilon:hover, .btn--dota:hover, .btn--jeta:hover, .btn--kappa:hover {
      color: white; }
    .btn--beta:disabled, .btn--beta:disabled:hover, .btn--beta.btn--disabled, .btn--beta.btn--disabled:hover, .btn--gamma:disabled, .btn--gamma:disabled:hover, .btn--gamma.btn--disabled, .btn--gamma.btn--disabled:hover, .btn--delta:disabled, .btn--delta:disabled:hover, .btn--delta.btn--disabled, .btn--delta.btn--disabled:hover, .btn--epsilon:disabled, .btn--epsilon:disabled:hover, .btn--epsilon.btn--disabled, .btn--epsilon.btn--disabled:hover, .btn--dota:disabled, .btn--dota:disabled:hover, .btn--dota.btn--disabled, .btn--dota.btn--disabled:hover, .btn--jeta:disabled, .btn--jeta:disabled:hover, .btn--jeta.btn--disabled, .btn--jeta.btn--disabled:hover, .btn--kappa:disabled, .btn--kappa:disabled:hover, .btn--kappa.btn--disabled, .btn--kappa.btn--disabled:hover {
      color: #cccccc; }
  .btn--evenaar, .btn--evenaar-en {
    background-color: #009005;
    border-color: #009005; }
    .btn--evenaar:hover, .btn--evenaar-en:hover {
      background-color: #009005;
      opacity: 0.9; }
  .btn--forensischepsychiatrie {
    background-color: #0a73a1;
    border-color: #0a73a1; }
    .btn--forensischepsychiatrie:hover {
      background-color: #0a73a1;
      opacity: 0.9; }
  .btn--kinderenjeugdpsychiatrie {
    background-color: #0486D4;
    border-color: #0486D4; }
    .btn--kinderenjeugdpsychiatrie:hover {
      background-color: #0486D4;
      opacity: 0.9; }
  .btn--kjp {
    background-color: #0486D4;
    border-color: #0486D4; }
    .btn--kjp:hover {
      background-color: #0486D4;
      opacity: 0.9; }
  .btn--gezinspsychiatrie {
    background-color: #E46C0B;
    border-color: #E46C0B; }
    .btn--gezinspsychiatrie:hover {
      background-color: #E46C0B;
      opacity: 0.9; }
  .btn--ouderenpsychiatrie {
    background-color: #614A7B;
    border-color: #614A7B; }
    .btn--ouderenpsychiatrie:hover {
      background-color: #614A7B;
      opacity: 0.9; }
  .btn--slaapcentrum {
    background-color: #EECC3B;
    border-color: #EECC3B; }
    .btn--slaapcentrum:hover {
      background-color: #EECC3B;
      opacity: 0.9; }
  .btn--cvbp {
    background-color: #398A41;
    border-color: #398A41; }
    .btn--cvbp:hover {
      background-color: #398A41;
      opacity: 0.9; }
  .btn--mask {
    background-color: transparent;
    border-color: transparent; }
    .btn--mask:hover {
      background-color: rgba(0, 0, 0, 0); }
    .btn--mask--divider:hover, .btn--mask:disabled, .btn--mask:disabled:hover, .btn--mask.btn--disabled, .btn--mask.btn--disabled:hover {
      background-color: transparent; }
    .btn--mask.btn--ghost {
      color: transparent;
      border-color: transparent; }
      .btn--mask.btn--ghost:hover {
        background: transparent;
        color: white;
        border-color: transparent; }
      .btn--mask.btn--ghost.btn--alpha, .btn--mask.btn--ghost.btn--light {
        color: white; }
        .btn--mask.btn--ghost.btn--alpha:hover, .btn--mask.btn--ghost.btn--light:hover {
          color: #3C3036; }
    .btn--mask.btn--alpha {
      color: #80356F; }
    .btn--mask.btn--light {
      color: #3C3036; }
    .btn--mask.btn--border-radius {
      border-radius: 0.3125rem;
      /* =5px */ }
    .btn--mask.btn--edged {
      border-bottom: 4px solid rgba(0, 0, 0, 0.2); }
    .btn-group--inline .btn--mask {
      border-left: 1px solid rgba(8, 8, 8, 0); }
    .btn-group--block .btn--mask {
      border-top: 1px solid rgba(8, 8, 8, 0); }
    .btn--mask:hover {
      background-color: #f2f2f2; }
    .btn--mask:active, .btn--mask:focus {
      background-color: #e6e5e5; }
  .btn--block {
    min-width: 100%;
    display: block; }
  .btn--divider {
    cursor: default; }
  .btn--light {
    background-color: white;
    border-color: white; }
    .btn--light:hover {
      background-color: #f2f2f2; }
    .btn--light--divider:hover, .btn--light:disabled, .btn--light:disabled:hover, .btn--light.btn--disabled, .btn--light.btn--disabled:hover {
      background-color: white; }
    .btn--light.btn--ghost {
      color: white;
      border-color: white; }
      .btn--light.btn--ghost:hover {
        background: white;
        color: white;
        border-color: white; }
      .btn--light.btn--ghost.btn--alpha, .btn--light.btn--ghost.btn--light {
        color: white; }
        .btn--light.btn--ghost.btn--alpha:hover, .btn--light.btn--ghost.btn--light:hover {
          color: #3C3036; }
    .btn--light.btn--alpha {
      color: #80356F; }
    .btn--light.btn--light {
      color: #3C3036; }
    .btn--light.btn--border-radius {
      border-radius: 0.3125rem;
      /* =5px */ }
    .btn--light.btn--edged {
      border-bottom: 4px solid #cccccc; }
    .btn-group--inline .btn--light {
      border-left: 1px solid white; }
    .btn-group--block .btn--light {
      border-top: 1px solid white; }
  .btn--dark {
    background-color: black;
    border-color: black; }
    .btn--dark:hover {
      background-color: black; }
    .btn--dark--divider:hover, .btn--dark:disabled, .btn--dark:disabled:hover, .btn--dark.btn--disabled, .btn--dark.btn--disabled:hover {
      background-color: black; }
    .btn--dark.btn--ghost {
      color: black;
      border-color: black; }
      .btn--dark.btn--ghost:hover {
        background: black;
        color: white;
        border-color: black; }
      .btn--dark.btn--ghost.btn--alpha, .btn--dark.btn--ghost.btn--light {
        color: white; }
        .btn--dark.btn--ghost.btn--alpha:hover, .btn--dark.btn--ghost.btn--light:hover {
          color: #3C3036; }
    .btn--dark.btn--alpha {
      color: #80356F; }
    .btn--dark.btn--light {
      color: #3C3036; }
    .btn--dark.btn--border-radius {
      border-radius: 0.3125rem;
      /* =5px */ }
    .btn--dark.btn--edged {
      border-bottom: 4px solid black; }
    .btn-group--inline .btn--dark {
      border-left: 1px solid #080808; }
    .btn-group--block .btn--dark {
      border-top: 1px solid #080808; }
  .btn--alpha {
    background-color: #f6f6f6;
    border-color: #f6f6f6; }
    .btn--alpha:hover {
      background-color: #e9e9e9; }
    .btn--alpha--divider:hover, .btn--alpha:disabled, .btn--alpha:disabled:hover, .btn--alpha.btn--disabled, .btn--alpha.btn--disabled:hover {
      background-color: #f6f6f6; }
    .btn--alpha.btn--ghost {
      color: #f6f6f6;
      border-color: #f6f6f6; }
      .btn--alpha.btn--ghost:hover {
        background: #f6f6f6;
        color: white;
        border-color: #f6f6f6; }
      .btn--alpha.btn--ghost.btn--alpha, .btn--alpha.btn--ghost.btn--light {
        color: white; }
        .btn--alpha.btn--ghost.btn--alpha:hover, .btn--alpha.btn--ghost.btn--light:hover {
          color: #3C3036; }
    .btn--alpha.btn--alpha {
      color: #80356F; }
    .btn--alpha.btn--light {
      color: #3C3036; }
    .btn--alpha.btn--border-radius {
      border-radius: 0.3125rem;
      /* =5px */ }
    .btn--alpha.btn--edged {
      border-bottom: 4px solid #c5c5c5; }
    .btn-group--inline .btn--alpha {
      border-left: 1px solid #fefefe; }
    .btn-group--block .btn--alpha {
      border-top: 1px solid #fefefe; }
  .btn--beta {
    background-color: #E67408;
    border-color: #E67408; }
    .btn--beta:hover {
      background-color: #cd6807; }
    .btn--beta--divider:hover, .btn--beta:disabled, .btn--beta:disabled:hover, .btn--beta.btn--disabled, .btn--beta.btn--disabled:hover {
      background-color: #E67408; }
    .btn--beta.btn--ghost {
      color: #E67408;
      border-color: #E67408; }
      .btn--beta.btn--ghost:hover {
        background: #E67408;
        color: white;
        border-color: #E67408; }
      .btn--beta.btn--ghost.btn--alpha, .btn--beta.btn--ghost.btn--light {
        color: white; }
        .btn--beta.btn--ghost.btn--alpha:hover, .btn--beta.btn--ghost.btn--light:hover {
          color: #3C3036; }
    .btn--beta.btn--alpha {
      color: #80356F; }
    .btn--beta.btn--light {
      color: #3C3036; }
    .btn--beta.btn--border-radius {
      border-radius: 0.3125rem;
      /* =5px */ }
    .btn--beta.btn--edged {
      border-bottom: 4px solid #b85d06; }
    .btn-group--inline .btn--beta {
      border-left: 1px solid #f57b09; }
    .btn-group--block .btn--beta {
      border-top: 1px solid #f57b09; }
  .btn--gamma {
    background-color: #1DAFC5;
    border-color: #1DAFC5; }
    .btn--gamma:hover {
      background-color: #1a9baf; }
    .btn--gamma--divider:hover, .btn--gamma:disabled, .btn--gamma:disabled:hover, .btn--gamma.btn--disabled, .btn--gamma.btn--disabled:hover {
      background-color: #1DAFC5; }
    .btn--gamma.btn--ghost {
      color: #1DAFC5;
      border-color: #1DAFC5; }
      .btn--gamma.btn--ghost:hover {
        background: #1DAFC5;
        color: white;
        border-color: #1DAFC5; }
      .btn--gamma.btn--ghost.btn--alpha, .btn--gamma.btn--ghost.btn--light {
        color: white; }
        .btn--gamma.btn--ghost.btn--alpha:hover, .btn--gamma.btn--ghost.btn--light:hover {
          color: #3C3036; }
    .btn--gamma.btn--alpha {
      color: #80356F; }
    .btn--gamma.btn--light {
      color: #3C3036; }
    .btn--gamma.btn--border-radius {
      border-radius: 0.3125rem;
      /* =5px */ }
    .btn--gamma.btn--edged {
      border-bottom: 4px solid #178c9e; }
    .btn-group--inline .btn--gamma {
      border-left: 1px solid #1fbbd2; }
    .btn-group--block .btn--gamma {
      border-top: 1px solid #1fbbd2; }
  .btn--delta {
    background-color: #80356F;
    border-color: #80356F; }
    .btn--delta:hover {
      background-color: #6e2e5f; }
    .btn--delta--divider:hover, .btn--delta:disabled, .btn--delta:disabled:hover, .btn--delta.btn--disabled, .btn--delta.btn--disabled:hover {
      background-color: #80356F; }
    .btn--delta.btn--ghost {
      color: #80356F;
      border-color: #80356F; }
      .btn--delta.btn--ghost:hover {
        background: #80356F;
        color: white;
        border-color: #80356F; }
      .btn--delta.btn--ghost.btn--alpha, .btn--delta.btn--ghost.btn--light {
        color: white; }
        .btn--delta.btn--ghost.btn--alpha:hover, .btn--delta.btn--ghost.btn--light:hover {
          color: #3C3036; }
    .btn--delta.btn--alpha {
      color: #80356F; }
    .btn--delta.btn--light {
      color: #3C3036; }
    .btn--delta.btn--border-radius {
      border-radius: 0.3125rem;
      /* =5px */ }
    .btn--delta.btn--edged {
      border-bottom: 4px solid #662a59; }
    .btn-group--inline .btn--delta {
      border-left: 1px solid #8b3978; }
    .btn-group--block .btn--delta {
      border-top: 1px solid #8b3978; }
  .btn--epsilon {
    background-color: #ED3D6B;
    border-color: #ED3D6B; }
    .btn--epsilon:hover {
      background-color: #eb2659; }
    .btn--epsilon--divider:hover, .btn--epsilon:disabled, .btn--epsilon:disabled:hover, .btn--epsilon.btn--disabled, .btn--epsilon.btn--disabled:hover {
      background-color: #ED3D6B; }
    .btn--epsilon.btn--ghost {
      color: #ED3D6B;
      border-color: #ED3D6B; }
      .btn--epsilon.btn--ghost:hover {
        background: #ED3D6B;
        color: white;
        border-color: #ED3D6B; }
      .btn--epsilon.btn--ghost.btn--alpha, .btn--epsilon.btn--ghost.btn--light {
        color: white; }
        .btn--epsilon.btn--ghost.btn--alpha:hover, .btn--epsilon.btn--ghost.btn--light:hover {
          color: #3C3036; }
    .btn--epsilon.btn--alpha {
      color: #80356F; }
    .btn--epsilon.btn--light {
      color: #3C3036; }
    .btn--epsilon.btn--border-radius {
      border-radius: 0.3125rem;
      /* =5px */ }
    .btn--epsilon.btn--edged {
      border-bottom: 4px solid #be3156; }
    .btn-group--inline .btn--epsilon {
      border-left: 1px solid #ee4b76; }
    .btn-group--block .btn--epsilon {
      border-top: 1px solid #ee4b76; }
  .btn--dota {
    background-color: #5DC637;
    border-color: #5DC637; }
    .btn--dota:hover {
      background-color: #54b231; }
    .btn--dota--divider:hover, .btn--dota:disabled, .btn--dota:disabled:hover, .btn--dota.btn--disabled, .btn--dota.btn--disabled:hover {
      background-color: #5DC637; }
    .btn--dota.btn--ghost {
      color: #5DC637;
      border-color: #5DC637; }
      .btn--dota.btn--ghost:hover {
        background: #5DC637;
        color: white;
        border-color: #5DC637; }
      .btn--dota.btn--ghost.btn--alpha, .btn--dota.btn--ghost.btn--light {
        color: white; }
        .btn--dota.btn--ghost.btn--alpha:hover, .btn--dota.btn--ghost.btn--light:hover {
          color: #3C3036; }
    .btn--dota.btn--alpha {
      color: #80356F; }
    .btn--dota.btn--light {
      color: #3C3036; }
    .btn--dota.btn--border-radius {
      border-radius: 0.3125rem;
      /* =5px */ }
    .btn--dota.btn--edged {
      border-bottom: 4px solid #4a9e2c; }
    .btn-group--inline .btn--dota {
      border-left: 1px solid #66ca42; }
    .btn-group--block .btn--dota {
      border-top: 1px solid #66ca42; }
  .btn--jeta {
    background-color: #B1B1B1;
    border-color: #B1B1B1; }
    .btn--jeta:hover {
      background-color: #a4a4a4; }
    .btn--jeta--divider:hover, .btn--jeta:disabled, .btn--jeta:disabled:hover, .btn--jeta.btn--disabled, .btn--jeta.btn--disabled:hover {
      background-color: #B1B1B1; }
    .btn--jeta.btn--ghost {
      color: #B1B1B1;
      border-color: #B1B1B1; }
      .btn--jeta.btn--ghost:hover {
        background: #B1B1B1;
        color: white;
        border-color: #B1B1B1; }
      .btn--jeta.btn--ghost.btn--alpha, .btn--jeta.btn--ghost.btn--light {
        color: white; }
        .btn--jeta.btn--ghost.btn--alpha:hover, .btn--jeta.btn--ghost.btn--light:hover {
          color: #3C3036; }
    .btn--jeta.btn--alpha {
      color: #80356F; }
    .btn--jeta.btn--light {
      color: #3C3036; }
    .btn--jeta.btn--border-radius {
      border-radius: 0.3125rem;
      /* =5px */ }
    .btn--jeta.btn--edged {
      border-bottom: 4px solid #8e8e8e; }
    .btn-group--inline .btn--jeta {
      border-left: 1px solid #b9b9b9; }
    .btn-group--block .btn--jeta {
      border-top: 1px solid #b9b9b9; }
  .btn--kappa {
    background-color: #8DC63F;
    border-color: #8DC63F; }
    .btn--kappa:hover {
      background-color: #80b636; }
    .btn--kappa--divider:hover, .btn--kappa:disabled, .btn--kappa:disabled:hover, .btn--kappa.btn--disabled, .btn--kappa.btn--disabled:hover {
      background-color: #8DC63F; }
    .btn--kappa.btn--ghost {
      color: #8DC63F;
      border-color: #8DC63F; }
      .btn--kappa.btn--ghost:hover {
        background: #8DC63F;
        color: white;
        border-color: #8DC63F; }
      .btn--kappa.btn--ghost.btn--alpha, .btn--kappa.btn--ghost.btn--light {
        color: white; }
        .btn--kappa.btn--ghost.btn--alpha:hover, .btn--kappa.btn--ghost.btn--light:hover {
          color: #3C3036; }
    .btn--kappa.btn--alpha {
      color: #80356F; }
    .btn--kappa.btn--light {
      color: #3C3036; }
    .btn--kappa.btn--border-radius {
      border-radius: 0.3125rem;
      /* =5px */ }
    .btn--kappa.btn--edged {
      border-bottom: 4px solid #719e32; }
    .btn-group--inline .btn--kappa {
      border-left: 1px solid #94ca4b; }
    .btn-group--block .btn--kappa {
      border-top: 1px solid #94ca4b; }
  .btn--ghost {
    background: transparent;
    border-width: 1px;
    color: #3C3036;
    text-shadow: none;
    opacity: 1; }
    .btn--ghost:hover, .btn--ghost:active, .btn--ghost:focus {
      background: transparent;
      color: #3C3036; }
    .btn--ghost.btn--evenaar, .btn--ghost.brn--evenaar-en {
      color: #009005;
      border-color: #009005; }
      .btn--ghost.btn--evenaar:hover, .btn--ghost.brn--evenaar-en:hover {
        border-color: #009005;
        background-color: #009005; }
    .btn--ghost.btn--forensischepsychiatrie {
      color: #0a73a1;
      border-color: #0a73a1; }
      .btn--ghost.btn--forensischepsychiatrie:hover {
        border-color: #0a73a1;
        background-color: #0a73a1; }
    .btn--ghost.btn--gezinspsychiatrie {
      color: #E46C0B;
      border-color: #E46C0B; }
      .btn--ghost.btn--gezinspsychiatrie:hover {
        border-color: #E46C0B;
        background-color: #E46C0B; }
    .btn--ghost.btn--kinderenjeugdpsychiatrie {
      color: #0486D4;
      border-color: #0486D4; }
      .btn--ghost.btn--kinderenjeugdpsychiatrie:hover {
        border-color: #0486D4;
        background-color: #0486D4; }
    .btn--ghost.btn--kjp {
      color: #0486D4;
      border-color: #0486D4; }
      .btn--ghost.btn--kjp:hover {
        border-color: #0486D4;
        background-color: #0486D4; }
    .btn--ghost.btn--ouderenpsychiatrie {
      color: #614A7B;
      border-color: #614A7B; }
      .btn--ghost.btn--ouderenpsychiatrie:hover {
        border-color: #614A7B;
        background-color: #614A7B; }
    .btn--ghost.btn--slaapcentrum {
      color: #EECC3B;
      border-color: #EECC3B; }
      .btn--ghost.btn--slaapcentrum:hover {
        border-color: #EECC3B;
        background-color: #EECC3B; }
  .btn--narrow {
    padding-left: 15px;
    padding-right: 15px; }

.btn-icon {
  background-color: white;
  padding: 0;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  border: 5px solid white;
  width: 3rem;
  /* =48px */
  height: 3rem;
  /* =48px */
  font-size: 1.5rem;
  /* =24px */ }
  .btn-icon:hover {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
    color: #1DAFC5; }
    .btn-icon:hover:hover {
      color: #1DAFC5; }
  .btn-icon:before {
    color: #1DAFC5;
    line-height: 38px; }
  .btn-icon--light {
    background-color: white;
    border-color: white; }
    .btn-icon--light:hover {
      background-color: #f7f7f7;
      border-color: #f7f7f7; }
    .btn-icon--light.btn-icon--ghost {
      color: white; }
      .btn-icon--light.btn-icon--ghost:hover {
        background-color: white;
        border-color: white;
        color: white; }
  .btn-icon--dark {
    background-color: black;
    border-color: black; }
    .btn-icon--dark:hover {
      background-color: black;
      border-color: black; }
    .btn-icon--dark.btn-icon--ghost {
      color: black; }
      .btn-icon--dark.btn-icon--ghost:hover {
        background-color: black;
        border-color: black;
        color: white; }
  .btn-icon--alpha {
    background-color: #f6f6f6;
    border-color: #f6f6f6; }
    .btn-icon--alpha:hover {
      background-color: #efefef;
      border-color: #efefef; }
    .btn-icon--alpha.btn-icon--ghost {
      color: #f6f6f6; }
      .btn-icon--alpha.btn-icon--ghost:hover {
        background-color: #f6f6f6;
        border-color: #f6f6f6;
        color: white; }
  .btn-icon--beta {
    background-color: #E67408;
    border-color: #E67408; }
    .btn-icon--beta:hover {
      background-color: #df7108;
      border-color: #df7108; }
    .btn-icon--beta.btn-icon--ghost {
      color: #E67408; }
      .btn-icon--beta.btn-icon--ghost:hover {
        background-color: #E67408;
        border-color: #E67408;
        color: white; }
  .btn-icon--gamma {
    background-color: #1DAFC5;
    border-color: #1DAFC5; }
    .btn-icon--gamma:hover {
      background-color: #1caabf;
      border-color: #1caabf; }
    .btn-icon--gamma.btn-icon--ghost {
      color: #1DAFC5; }
      .btn-icon--gamma.btn-icon--ghost:hover {
        background-color: #1DAFC5;
        border-color: #1DAFC5;
        color: white; }
  .btn-icon--delta {
    background-color: #80356F;
    border-color: #80356F; }
    .btn-icon--delta:hover {
      background-color: #7c336c;
      border-color: #7c336c; }
    .btn-icon--delta.btn-icon--ghost {
      color: #80356F; }
      .btn-icon--delta.btn-icon--ghost:hover {
        background-color: #80356F;
        border-color: #80356F;
        color: white; }
  .btn-icon--epsilon {
    background-color: #ED3D6B;
    border-color: #ED3D6B; }
    .btn-icon--epsilon:hover {
      background-color: #e63b68;
      border-color: #e63b68; }
    .btn-icon--epsilon.btn-icon--ghost {
      color: #ED3D6B; }
      .btn-icon--epsilon.btn-icon--ghost:hover {
        background-color: #ED3D6B;
        border-color: #ED3D6B;
        color: white; }
  .btn-icon--dota {
    background-color: #5DC637;
    border-color: #5DC637; }
    .btn-icon--dota:hover {
      background-color: #5ac035;
      border-color: #5ac035; }
    .btn-icon--dota.btn-icon--ghost {
      color: #5DC637; }
      .btn-icon--dota.btn-icon--ghost:hover {
        background-color: #5DC637;
        border-color: #5DC637;
        color: white; }
  .btn-icon--jeta {
    background-color: #B1B1B1;
    border-color: #B1B1B1; }
    .btn-icon--jeta:hover {
      background-color: #acacac;
      border-color: #acacac; }
    .btn-icon--jeta.btn-icon--ghost {
      color: #B1B1B1; }
      .btn-icon--jeta.btn-icon--ghost:hover {
        background-color: #B1B1B1;
        border-color: #B1B1B1;
        color: white; }
  .btn-icon--kappa {
    background-color: #8DC63F;
    border-color: #8DC63F; }
    .btn-icon--kappa:hover {
      background-color: #89c03d;
      border-color: #89c03d; }
    .btn-icon--kappa.btn-icon--ghost {
      color: #8DC63F; }
      .btn-icon--kappa.btn-icon--ghost:hover {
        background-color: #8DC63F;
        border-color: #8DC63F;
        color: white; }
  .btn-icon--normal {
    background-color: #3C3036;
    border-color: #3C3036; }
    .btn-icon--normal::before {
      color: white; }
    .btn-icon--normal:hover {
      background-color: #3a2f34;
      border-color: #3a2f34; }
    .btn-icon--normal.btn-icon--ghost {
      color: #3C3036; }
      .btn-icon--normal.btn-icon--ghost:hover {
        background-color: #3C3036;
        border-color: #3C3036;
        color: white; }
  .btn-icon--twitter {
    background-color: #00aced;
    border-color: #00aced; }
    .btn-icon--twitter::before {
      color: white; }
    .btn-icon--twitter:hover {
      background-color: #00a7e6;
      border-color: #00a7e6; }
    .btn-icon--twitter.btn-icon--ghost {
      color: #00aced; }
      .btn-icon--twitter.btn-icon--ghost:hover {
        background-color: #00aced;
        border-color: #00aced;
        color: white; }
  .btn-icon--facebook {
    background-color: #3b5999;
    border-color: #3b5999; }
    .btn-icon--facebook::before {
      color: white; }
    .btn-icon--facebook:hover {
      background-color: #395694;
      border-color: #395694; }
    .btn-icon--facebook.btn-icon--ghost {
      color: #3b5999; }
      .btn-icon--facebook.btn-icon--ghost:hover {
        background-color: #3b5999;
        border-color: #3b5999;
        color: white; }
  .btn-icon--googleplus {
    background-color: #d73D32;
    border-color: #d73D32; }
    .btn-icon--googleplus::before {
      color: white; }
    .btn-icon--googleplus:hover {
      background-color: #d13b31;
      border-color: #d13b31; }
    .btn-icon--googleplus.btn-icon--ghost {
      color: #d73D32; }
      .btn-icon--googleplus.btn-icon--ghost:hover {
        background-color: #d73D32;
        border-color: #d73D32;
        color: white; }
  .btn-icon--youtube {
    background-color: #cd201f;
    border-color: #cd201f; }
    .btn-icon--youtube::before {
      color: white; }
    .btn-icon--youtube:hover {
      background-color: #c71f1e;
      border-color: #c71f1e; }
    .btn-icon--youtube.btn-icon--ghost {
      color: #cd201f; }
      .btn-icon--youtube.btn-icon--ghost:hover {
        background-color: #cd201f;
        border-color: #cd201f;
        color: white; }
  .btn-icon--pinterest {
    background-color: #cb2027;
    border-color: #cb2027; }
    .btn-icon--pinterest::before {
      color: white; }
    .btn-icon--pinterest:hover {
      background-color: #c51f26;
      border-color: #c51f26; }
    .btn-icon--pinterest.btn-icon--ghost {
      color: #cb2027; }
      .btn-icon--pinterest.btn-icon--ghost:hover {
        background-color: #cb2027;
        border-color: #cb2027;
        color: white; }
  .btn-icon--github {
    background-color: #333333;
    border-color: #333333; }
    .btn-icon--github::before {
      color: white; }
    .btn-icon--github:hover {
      background-color: #313131;
      border-color: #313131; }
    .btn-icon--github.btn-icon--ghost {
      color: #333333; }
      .btn-icon--github.btn-icon--ghost:hover {
        background-color: #333333;
        border-color: #333333;
        color: white; }
  .btn-icon--dribbble {
    background-color: #ea4c88;
    border-color: #ea4c88; }
    .btn-icon--dribbble::before {
      color: white; }
    .btn-icon--dribbble:hover {
      background-color: #e34a84;
      border-color: #e34a84; }
    .btn-icon--dribbble.btn-icon--ghost {
      color: #ea4c88; }
      .btn-icon--dribbble.btn-icon--ghost:hover {
        background-color: #ea4c88;
        border-color: #ea4c88;
        color: white; }
  .btn-icon--instagram {
    background-color: #517fA4;
    border-color: #517fA4; }
    .btn-icon--instagram::before {
      color: white; }
    .btn-icon--instagram:hover {
      background-color: #4f7b9f;
      border-color: #4f7b9f; }
    .btn-icon--instagram.btn-icon--ghost {
      color: #517fA4; }
      .btn-icon--instagram.btn-icon--ghost:hover {
        background-color: #517fA4;
        border-color: #517fA4;
        color: white; }
  .btn-icon--small {
    width: 2.5rem;
    /* =40px */
    height: 2.5rem;
    /* =40px */
    font-size: 1.25rem;
    /* =20px */
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    .btn-icon--small::before {
      line-height: 31px; }
    @media (min-width: 701px) {
      .btn-icon--small {
        width: 3rem;
        /* =48px */
        height: 3rem;
        /* =48px */
        font-size: 1.5rem;
        /* =24px */ }
        .btn-icon--small::before {
          line-height: 38px; } }
  .btn-icon--delta::before {
    color: white; }
  .btn-icon--ghost {
    background-color: transparent; }

/*doc
---
title: No button style
name: no_btn_style
category: Buttons
---

Commonly used for triggers. For example a navigation trigger

```html_example
<button class="no-btn-style">Button</button>
```

*/
.no-btn-style {
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
  text-shadow: none; }
  .no-btn-style:active, .no-btn-style:focus {
    outline: none; }

/*doc
---
title: Split
name: split_button
category: Buttons
---

```html_example
<div class="btn-dropdown">
    <button data-datatables-btn="action" type="button" class="btn-dropdown__action btn btn--medium btn--alpha btn--bordered icon icon--cog icon--margin-alpha">Activate</button>
    <button data-datatables-btn="action" type="button" class="btn-dropdown__toggle btn btn--medium btn--alpha btn--bordered" data-btn-dropdown-toggle aria-haspopup="true" aria-expanded="false"></button>
    <div class="btn-dropdown__dropdown" data-btn-dropdown="allowPropagation">
        <ul class="btn-dropdown__list btn-dropdown__list--border-bottom" data-btn-dropdown="allowPropagation">
            <li><a class="btn-dropdown__link" href="#">Deactivate</a></li>
            <li><a class="btn-dropdown__link" href="#">Concept</a></li>
        </ul>
        <a class="btn btn--mask btn--medium btn--block" href="#">Delete</a>
    </div>
</div>
```

*/
/*doc
---
title: Dropdown
name: dropdown_button
category: Buttons
---

```html_example
<div class="btn-dropdown btn-dropdown--action">
    <button type="button" class="btn-dropdown__action btn btn--medium btn--alpha btn--bordered icon icon--filter icon--margin-beta-before" data-btn-dropdown-toggle>Filter</button>
    <div class="btn-dropdown__dropdown">
        <ul class="btn-dropdown__list btn-dropdown__list--border-bottom btn-dropdown__list--padding">
            <li class="btn-dropdown__item"><input name="checkbox-active" type="checkbox" id="checkbox-active"><label for="checkbox-active">Active</label></li>
            <li class="btn-dropdown__item"><input name="checkbox-inactive" type="checkbox" id="checkbox-inactive"><label for="checkbox-inactive">Inactive</label></li>
            <li class="btn-dropdown__item"><input name="checkbox-concept" type="checkbox" id="checkbox-concept"><label for="checkbox-concept">Concept</label></li>
            <li class="btn-dropdown__item"><input name="checkbox-published" type="checkbox" id="checkbox-published"><label for="checkbox-published">Published</label></li>
            <li class="btn-dropdown__item"><input name="checkbox-notpublished" type="checkbox" id="checkbox-notpublished"><label for="checkbox-notpublished">Unpublished</label></li>
        </ul>
        <a class="btn btn--mask btn--medium btn--block" data-status-clear-checkboxes>Remove filters</a>
    </div>
</div>
```

*/
.btn-dropdown {
  position: relative;
  display: inline-block; }
  .btn-dropdown__action {
    float: left;
    border-top-left-radius: 0.25rem;
    /* =4px */
    border-bottom-left-radius: 0.25rem;
    /* =4px */ }
    .btn-dropdown--action .btn-dropdown__action {
      float: none;
      border-radius: 0.25rem;
      /* =4px */ }
    .btn-dropdown__action:before {
      color: #8DC63F; }
    .btn-dropdown__action:after {
      color: #8DC63F; }
      .btn-dropdown--action .btn-dropdown__action:after {
        content: '\e80a';
        margin-left: 0.625rem;
        /* =10px */ }
      .btn-dropdown--action.btn-dropdown--open .btn-dropdown__action:after {
        transform: rotate(180deg); }
      .btn-dropdown--no-arrow .btn-dropdown__action:after {
        display: none; }
  .btn-dropdown__toggle {
    margin-left: -1px;
    border-top-right-radius: 0.25rem;
    /* =4px */
    border-bottom-right-radius: 0.25rem;
    /* =4px */ }
    .btn-dropdown--open .btn-dropdown__toggle:before {
      transform: rotate(180deg); }
  .btn-dropdown__dropdown {
    overflow: hidden;
    position: absolute;
    left: 0;
    margin-top: 1px;
    visibility: hidden;
    background-color: white;
    border: 1px solid #e9e9e9;
    opacity: 0;
    z-index: 9999;
    transition: all 0.2s;
    transform: translate3d(0, 10%, 0) scale(0.8);
    min-width: 12.5rem;
    /* =200px */
    max-width: 18.75rem;
    /* =300px */
    border-radius: 0.25rem;
    /* =4px */ }
    .btn-dropdown__dropdown--right {
      left: inherit;
      right: 0; }
    .btn-dropdown--open .btn-dropdown__dropdown {
      visibility: visible;
      opacity: 1;
      transition: all 0.2s;
      transform: translate3d(0, 0, 0) scale(1); }
  .btn-dropdown__list--border-bottom {
    border-bottom: 1px solid #e0e0e0; }
  .btn-dropdown__list--padding {
    padding: 0.875rem 1rem;
    /* =14px 16px */ }
  .btn-dropdown__item {
    font-size: 0.875rem;
    /* =14px */ }
    .btn--small .btn-dropdown__item {
      font-size: 1rem;
      /* =16px */ }
    .btn--medium .btn-dropdown__item {
      font-size: 1rem;
      /* =16px */ }
    .btn--large .btn-dropdown__item {
      font-size: 1.25rem;
      /* =20px */ }
    .btn-dropdown__item + .btn-dropdown__item {
      margin-top: 0.625rem;
      /* =10px */ }
  .btn-dropdown__link {
    background-color: transparent;
    display: block;
    color: #3C3036;
    padding: 0.625rem 0.9375rem;
    /* =10px 15px */
    font-size: 0.875rem;
    /* =14px */ }
    .btn-dropdown__link:hover {
      background-color: #f1f1f1; }

a.btn:disabled, a.btn.btn--disabled {
  pointer-events: none; }

.btn--vacancies-extra,
.btn--alpha.btn--vacancies-extra {
  padding-left: 30px;
  padding-right: 30px;
  background-color: #909E5A;
  color: #F6F6F6; }
  .btn--vacancies-extra:hover,
  .btn--alpha.btn--vacancies-extra:hover {
    background-color: #818e51; }

/* Forms
==========
*/
/* Form
==========
*/
form {
  margin: 0 0 2.5rem 0;
  /* =0 0 40px 0 */ }
  form.form--no-margin {
    margin: 0; }

legend {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 1.25rem;
  /* =20px */
  font-size: 1.25rem;
  /* =20px */
  line-height: 2rem;
  /* =32px */ }

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  color: #333333;
  border-radius: 0.125rem;
  border: 1px solid #e0e0e0;
  background: #f6f6f6;
  outline: 0;
  width: 100%;
  box-shadow: none;
  transition: all 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0.8125rem;
  /* =13px */ }
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="date"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="month"]:focus,
  input[type="week"]:focus,
  input[type="email"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="time"]:focus,
  input[type="url"]:focus,
  textarea:focus {
    border: 1px solid #80356F;
    box-shadow: none;
    background: white; }
  input[type="text"]:disabled,
  input[type="password"]:disabled,
  input[type="date"]:disabled,
  input[type="datetime"]:disabled,
  input[type="datetime-local"]:disabled,
  input[type="month"]:disabled,
  input[type="week"]:disabled,
  input[type="email"]:disabled,
  input[type="number"]:disabled,
  input[type="search"]:disabled,
  input[type="tel"]:disabled,
  input[type="time"]:disabled,
  input[type="url"]:disabled,
  textarea:disabled {
    background-color: #f1f1f1;
    cursor: not-allowed; }

/*doc
---
title: Textarea
name: textarea
category: Forms
---

```html_example
<div class="form__row">
    <div class="column-5 form__label">
        <label>Vraag / opmerking</label>
    </div>
    <div class="column-7">
        <div class="column-10 form__input">
            <textarea cols="30" rows="10"></textarea>
        </div>
    </div>
</div>
```

*/
textarea {
  display: block;
  height: 10rem;
  /* =160px */ }

select {
  position: relative;
  background: transparent;
  background-image: none;
  display: block;
  width: 100%;
  outline: none;
  color: #888888;
  cursor: pointer;
  z-index: 2;
  border: none;
  transition: box-shadow 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow: '';
  text-indent: 1px;
  color: #333333 !important;
  height: 45px;
  background: #f6f6f6;
  border-radius: 2px;
  padding: 0.625rem;
  /* =10px */ }
  select:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
  select:focus {
    border: 1px solid #80356F;
    box-shadow: none;
    background: white; }
  select[multiple=multiple] {
    height: auto;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); }
    select[multiple=multiple]:focus, select[multiple=multiple]:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
  select option[disabled] {
    color: #94adc4;
    text-shadow: none;
    border: none; }
  select option {
    color: #333 !important; }

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #888888; }

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

.input-birthdate select {
  width: 30%;
  float: left;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  margin-right: 5%; }
  .input-birthdate select:last-child {
    margin: 0; }

.input--clean input {
  border: none;
  border-radius: 0px;
  background: #fff; }
  .input--clean input:focus {
    border: none; }

/*doc
---
title: Forms
name: 4_forms
category: Forms
---

*/
/*doc
---
title: Form vertical
name: form_vertical
category: Forms
---

```html_example
<form class="form form--vertical" data-form-validate novalidate="novalidate">
    <h2>Vertical form</h2>
    <div class="grid column-4 column-centered">
        <div class="form__row">
            <div class="form__label">
                <label>Aanhef</label>
            </div>
            <div class="form__input">
                <div class="form__select">
                    <select name="aanhef" id="" required="required">
                        <option value="" disabled="disabled" selected="selected">Kies een optie</option>
                        <option value="Dhr.">Dhr.</option>
                        <option value="Mevr.">Mevr.</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form__row">
            <div class="form__label">
                <label>Website *</label>
            </div>
            <div class="form__input">
                <input type="url" />
            </div>
        </div>

        <div class="form__actions">
            <p class="form__required-field"><i>* = Verplicht veld</i></p>
            <input class="btn btn--beta btn--medium" type="submit" value="verzenden" />
        </div>
    </div>
</form>
```

*/
/*doc
---
title: Form horizontal
name: form_horizontal
category: Forms
---

Use the grid to your advantage.

```html_example
<form class="form form--horizontal" data-form-validate novalidate="novalidate">
    <div class="grid grid--no-gutters column-beta-6 column-gamma-and-up-5 column-centered">
        <div class="column-8"><input type="text" placeholder="E-mailadres" /></div>
        <div class="column-4"><input class="btn btn--beta btn--block btn--medium" type="submit" value="verzenden" /></div>
    </div>
</form>
```

*/
/* Form general classes
==========
*/
.form__row {
  margin-bottom: 0.9375rem; }
  .form--vertical .form__row {
    margin-bottom: 7.1428571429%; }

.form__label {
  margin-bottom: 0;
  font-size: 0.75rem;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  .form__label label {
    line-height: 1.75rem;
    /* =28px */ }
  @media (min-width: 601px) {
    .form__label {
      text-align: left; } }
  .form--vertical .form__label {
    text-align: left; }

.form__input,
.form__select,
.form__switch {
  position: relative;
  margin-bottom: 0; }
  .form__input select,
  .form__select select,
  .form__switch select {
    padding-right: 30px; }

/*doc
---
title: Select
name: select
category: Forms
---

```html_example
<div class="form__row">
    <div class="column-5 form__label">
        <label>Aanhef</label>
    </div>
    <div class="column-7">
        <div class="column-6 form__input">
            <div class="form__select">
                <select name="select" id="" required="required">
                    <option value="" disabled="disabled" selected="selected">Choose option</option>
                    <option value="Dhr.">Some option</option>
                    <option value="Mevr.">Another option</option>
                </select>
            </div>
        </div>
    </div>
</div>
```

*/
.form__select {
  user-select: none;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 2px; }
  .form__select:after {
    content: "";
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 9;
    color: #80356F;
    line-height: 47px;
    font-size: 1.5rem;
    /* =24px */
    height: 2.9375rem;
    /* =47px */ }
    .lt-ie10 .form__select:after,
    .parsley-error .form__select:after,
    .parsley-success .form__select:after {
      display: none; }

/*doc
---
title: Switch
name: switch
category: Forms
---

```html_example
<div class="form__row">
    <div class="column-5 form__label">
        <label>Switch</label>
    </div>
    <div class="column-7">
        <div class="form__switch">
            <input name="switch1" type="checkbox" id="switch1" /><label for="switch1">Switch</label>
        </div>
    </div>
</div>
```

*/
.form__switch {
  margin-top: 0.3125rem;
  /* =5px */ }
  .form__switch input[type=checkbox]:checked + label:before {
    background: #E67408;
    border-color: #E67408; }
  .form__switch input[type=checkbox]:checked + label:after {
    left: 30px; }
  .form__switch input[type=checkbox] + label {
    padding: 0;
    color: rgba(0, 0, 0, 0); }
    .form__switch input[type=checkbox] + label:before {
      width: 60px;
      height: 25px;
      border-radius: 0; }
    .form__switch input[type=checkbox] + label:after {
      background: white;
      content: '';
      top: -1px;
      left: -1px;
      width: 30px;
      height: 25px;
      border-radius: 0;
      border: 1px solid #e0e0e0;
      opacity: 1; }

.form__input-list {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  margin-top: 0 !important; }
  @media (min-width: 601px) {
    .form__input-list {
      margin-top: 0.5rem;
      /* =8px */ } }
  .form__input-list li {
    padding-left: 0 !important; }
    .form__input-list li:before {
      content: '' !important; }
    .form__input-list li + li {
      margin-top: 0.3125rem;
      /* =5px */ }

/*doc
---
title: Data
name: data
category: Forms
---

```html_example
<div class="form__row">
    <div class="column-5 form__label">
        <label>Form data</label>
    </div>
    <div class="column-7 form__data">Some data</div>
</div>
```

*/
.form__data {
  line-height: 1.75rem;
  /* =28px */ }

/*doc
---
title: Actions
name: actions
category: Forms
---

```html_example
<div class="form__actions">
    <input class="btn btn--beta btn--medium" type="submit" value="send" />
</div>
```

*/
.form__actions {
  margin-top: 1.25rem;
  /* =20px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) {
    .form__actions {
      margin-left: 44.6428571429%; } }
  .form--vertical .form__actions {
    margin-left: 0; }

/*doc
---
title: Required field
name: required_field
category: Forms
---

```html_example
<div class="form__actions">
    <p class="form__required-field"><i>* = Required field</i></p>
    <input class="btn btn--beta btn--medium" type="submit" value="send" />
</div>
```

*/
.form__required-field {
  font-size: 0.875rem;
  /* =14px */ }

.form__icon-after {
  max-width: 18.75rem; }
  .form__icon-after input[type="text"] {
    padding-right: 2.8125rem;
    border: none;
    height: 2.8125rem; }
  .form__icon-after .btn-zip {
    margin-left: -2.8125rem;
    width: 2.8125rem;
    height: 2.8125rem;
    border-radius: 0.125rem;
    position: absolute;
    background: #ED3D6B;
    color: white;
    border: 0;
    -webkit-appearance: none; }
    .form__icon-after .btn-zip:hover, .form__icon-after .btn-zip:focus, .form__icon-after .btn-zip:active, .form__icon-after .btn-zip:visited {
      background: #ED3D6B;
      color: white; }
  .form__icon-after .btn-zip--succes {
    background: #5DC637; }

.input-group {
  position: relative;
  display: table;
  border-collapse: separate; }

.form-control {
  border: none !important;
  border-radius: 0 !important; }

.input-group-addon, .input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle; }

.input-group .form-control, .input-group-addon, .input-group-btn {
  display: table-cell; }

.input-group-addon {
  padding: 6px 12px;
  text-align: center;
  background-color: #eee;
  border: 0; }

/* Form placeholder
==========
*/
::placeholder {
  color: #94adc4; }

.placeholder {
  color: #94adc4; }

/* Form checkbox
==========
*/
input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  outline: none;
  opacity: 0; }
  input[type=checkbox][disabled],
  input[type=radio][disabled] {
    cursor: not-allowed; }
    input[type=checkbox][disabled] + label,
    input[type=radio][disabled] + label {
      cursor: not-allowed; }
      input[type=checkbox][disabled] + label:before,
      input[type=radio][disabled] + label:before {
        opacity: 0.4; }
  input[type=checkbox]:focus + label:before,
  input[type=radio]:focus + label:before {
    background: #f1f1f1;
    border-color: #575757;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
  input[type=checkbox]:checked + label:after,
  input[type=radio]:checked + label:after {
    opacity: 1; }
  .no-borderradius input[type=checkbox], .no-borderradius
  input[type=radio] {
    background: transparent;
    position: relative;
    opacity: 1; }
  input[type=checkbox] + label,
  input[type=radio] + label {
    position: relative;
    cursor: pointer;
    padding-left: 31px;
    user-select: none; }
    .no-borderradius input[type=checkbox] + label, .no-borderradius
    input[type=radio] + label {
      padding: 0 0 0 5px; }
    input[type=checkbox] + label:before,
    input[type=radio] + label:before {
      position: absolute;
      left: 0;
      top: 1px;
      content: '';
      background: #f1f1f1;
      width: 16px;
      height: 16px;
      display: block;
      border-radius: 2px;
      border: 1px solid #575757;
      transition: all 0.4s; }
      .no-borderradius input[type=checkbox] + label:before, .no-borderradius
      input[type=radio] + label:before {
        display: none; }
    input[type=checkbox] + label:after,
    input[type=radio] + label:after {
      position: absolute;
      top: 4px;
      left: 3px;
      width: 0.625rem;
      height: 0.625rem;
      line-height: 16px;
      text-align: center;
      color: #80356F;
      opacity: 0;
      transition: all 0.2s;
      content: '';
      display: inline-block;
      border-radius: 0.125rem;
      background: #80356F; }
      .no-borderradius input[type=checkbox] + label:after, .no-borderradius
      input[type=radio] + label:after {
        display: none; }

/*doc
---
title: Checkboxes
name: checkboxes
category: Forms
---

```html_example
<div class="form__row">
    <div class="column-5 form__label">
        <label>Some checkboxes</label>
    </div>
    <div class="column-7">
        <div class="column-6 form__input">
            <ul class="form__input-list list-unstyled">
                <li><input name="checkbox" type="checkbox" checked="checked" id="checkbox1" /><label for="checkbox1">Checkbox</label></li>
                <li><input name="checkbox" type="checkbox" id="checkbox2" /><label for="checkbox2">Checkbox</label></li>
                <li><input name="checkbox" type="checkbox" disabled="disabled" id="checkbox6" /><label for="checkbox6">Checkbox disabled</label></li>
            </ul>
        </div>
    </div>
</div>
```

*/
/* Form radio button
==========
*/
input[type=radio] + label:before {
  border-radius: 16px; }

input[type=radio] + label:after {
  background: #80356F;
  content: '';
  top: 4px;
  left: 3px;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 8px; }

/*doc
---
title: Radio buttons
name: radio_buttons
category: Forms
---

```html_example
<div class="form__row">
    <div class="column-5 form__label">
        <label>Some radio buttons</label>
    </div>
    <div class="column-7">
        <div class="column-6 form__input">
            <ul class="form__input-list list-unstyled">
                <li><input name="radio" type="radio" name="radio" id="radio1" /><label for="radio1">Radio</label></li>
                <li><input name="radio" type="radio" name="radio" id="radio2" /><label for="radio2">Radio</label></li>
                <li><input name="radio" type="radio" name="radio" disabled="disabled" id="radio6" /><label for="radio6">Radio disabled</label></li>
            </ul>
        </div>
    </div>
</div>
```

*/
/* Range input
==========
*/
input[type=range] {
  -webkit-appearance: none;
  margin-top: 0.4375rem;
  /* =7px */
  width: 18.75rem;
  /* =300px */ }
  input[type=range]:focus {
    outline: none; }
  input[type=range]::-webkit-slider-runnable-track {
    background: #f1f1f1;
    height: 25px;
    border-radius: 0;
    border: 1px solid #e0e0e0;
    transition: all 0.4s; }
  input[type=range]::-moz-range-track {
    background: #f1f1f1;
    height: 25px;
    border-radius: 0;
    border: 1px solid #e0e0e0;
    transition: all 0.4s; }
  input[type=range]::-ms-track {
    background: #f1f1f1;
    height: 25px;
    border-radius: 0;
    border: 1px solid #e0e0e0;
    transition: all 0.4s;
    color: transparent; }
  input[type=range]::-webkit-slider-thumb {
    background: white;
    content: '';
    width: 30px;
    height: 25px;
    border-radius: 0;
    border: 1px solid #e0e0e0;
    opacity: 1;
    -webkit-appearance: none;
    margin-top: -1px; }
    input[type=range]::-webkit-slider-thumb:focus {
      background: red; }
  input[type=range]::-moz-range-thumb {
    background: white;
    content: '';
    width: 30px;
    height: 25px;
    border-radius: 0;
    border: 1px solid #e0e0e0;
    opacity: 1; }
    input[type=range]::-moz-range-thumb:focus {
      background: red; }
  input[type=range]::-ms-thumb {
    background: white;
    content: '';
    width: 30px;
    height: 25px;
    border-radius: 0;
    border: 1px solid #e0e0e0;
    opacity: 1; }
    input[type=range]::-ms-thumb:focus {
      background: red; }
  input[type=range]::-ms-fill-lower {
    background: #E67408; }

.range-output {
  display: inline-block;
  color: #E67408;
  margin-top: 0.5rem;
  /* =8px */ }

.rangeslider,
.rangeslider__fill {
  background: #f1f1f1;
  height: 25px;
  border-radius: 0;
  border: 1px solid #e0e0e0;
  transition: all 0.4s; }

.rangeslider {
  position: relative;
  margin-top: 0.4375rem;
  /* =7px */
  width: 18.75rem;
  /* =300px */ }

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4; }

.rangeslider__fill {
  background: #E67408;
  height: 23px;
  position: absolute;
  top: 0;
  border: 0;
  transition: none; }

.rangeslider__handle {
  background: white;
  content: '';
  width: 30px;
  height: 25px;
  border-radius: 0;
  border: 1px solid #e0e0e0;
  opacity: 1;
  position: absolute;
  display: inline-block;
  top: -1px;
  margin-left: -1px; }
  .rangeslider__handle:focus {
    background: red; }

/*doc
---
title: Range
name: range
category: Forms
---

```html_example
<div class="form__row">
    <div class="column-5 form__label">
        <label>Range</label>
    </div>
    <div class="column-7">
        <div class="column-10 form__input">
            <div class="column-2 text-align-center">
                <output data-range="range-test" class="range-output">50s</output>
            </div>
            <div class="column-10">
                <input type="range" min="0" max="100" step="1" value="50" id="range-test" data-range-measurement="s" />
            </div>
        </div>
    </div>
</div>
```

*/
/* Form validation
==========
*/
.form__input--error:after,
.form__input--success:after {
  position: absolute;
  right: 10px;
  top: 9px; }

.form__input--error {
  animation-duration: 0.5s;
  animation-name: shake; }
  .form__input--error.form__input--validation-absolute input[type="text"],
  .form__input--error.form__input--validation-absolute input[type="password"],
  .form__input--error.form__input--validation-absolute input[type="date"],
  .form__input--error.form__input--validation-absolute input[type="datetime"],
  .form__input--error.form__input--validation-absolute input[type="datetime-local"],
  .form__input--error.form__input--validation-absolute input[type="month"],
  .form__input--error.form__input--validation-absolute input[type="week"],
  .form__input--error.form__input--validation-absolute input[type="email"],
  .form__input--error.form__input--validation-absolute input[type="number"],
  .form__input--error.form__input--validation-absolute input[type="search"],
  .form__input--error.form__input--validation-absolute input[type="tel"],
  .form__input--error.form__input--validation-absolute input[type="time"],
  .form__input--error.form__input--validation-absolute input[type="url"],
  .form__input--error.form__input--validation-absolute textarea {
    border-radius: 0 0;
    /* =0 0 */ }
  .form__input--error input[type="text"],
  .form__input--error input[type="password"],
  .form__input--error input[type="date"],
  .form__input--error input[type="datetime"],
  .form__input--error input[type="datetime-local"],
  .form__input--error input[type="month"],
  .form__input--error input[type="week"],
  .form__input--error input[type="email"],
  .form__input--error input[type="number"],
  .form__input--error input[type="search"],
  .form__input--error input[type="tel"],
  .form__input--error input[type="time"],
  .form__input--error input[type="url"],
  .form__input--error textarea {
    box-shadow: none;
    border: 1px solid #E67408;
    background: white;
    padding-right: 1.875rem;
    /* =30px */ }
    .form__input--error input[type="text"]:focus,
    .form__input--error input[type="password"]:focus,
    .form__input--error input[type="date"]:focus,
    .form__input--error input[type="datetime"]:focus,
    .form__input--error input[type="datetime-local"]:focus,
    .form__input--error input[type="month"]:focus,
    .form__input--error input[type="week"]:focus,
    .form__input--error input[type="email"]:focus,
    .form__input--error input[type="number"]:focus,
    .form__input--error input[type="search"]:focus,
    .form__input--error input[type="tel"]:focus,
    .form__input--error input[type="time"]:focus,
    .form__input--error input[type="url"]:focus,
    .form__input--error textarea:focus {
      box-shadow: none; }
  .form__input--error .form__select:after {
    color: #E67408; }

.form__input--validation-absolute .parsley-container:after, .form__input--error + .parsley-container:after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: -16px;
  left: 0;
  border: 8px solid transparent;
  border-bottom-color: #E67408; }

.parsley-container {
  display: none;
  clear: both;
  max-width: 100%;
  position: relative;
  background: #E67408;
  border-radius: 2px;
  color: white;
  margin-top: 0.3125rem;
  padding: 0.5rem 0.8125rem;
  /* =8px 13px */
  font-size: 0.75rem;
  /* =12px */ }
  .form__input--error .parsley-container {
    display: block; }
  .form__input--validation-absolute .parsley-container {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    transform: translateY(100%);
    border-radius: 0 0 0 0;
    /* =0 0 0 0 */
    bottom: -0.75rem;
    /* =-12px */ }

.form__input--error + .parsley-container {
  display: inline-block;
  border-radius: 0 0 0 0;
  /* =0 0 0 0 */
  margin-top: 1rem;
  /* =16px */ }

/*doc
---
title: Validation
name: validation
category: Forms
---

We use the jQuery plugin [parsleyjs](http://parsleyjs.org) for our validation engine.

```html_example
<form class="form" action="?action=ajax" data-form-ajax data-form-ajax-method="GET" data-form-ajax-datatype="json" data-form-ajax-url="form-ajax.json" data-form-ajax-msg-container="#form-message" data-form-validate novalidate="novalidate">
    <div id="form-message"></div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Aanhef</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <div class="form__select">
                        <select name="aanhef" id="" required="required">
                            <option value="" disabled="disabled" selected="selected">Kies een optie</option>
                            <option value="Dhr.">Dhr.</option>
                            <option value="Mevr.">Mevr.</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Postcode</label>
            </div>
            <div class="column-7">
                <div class="column-3 form__input">
                    <input type="text" placeholder="0123AB" data-parsley-pattern="^\d{4}[a-zA-Z]{2}$" data-parsley-error-message="Dit is geen geldige postcode." data-parsley-maxlength="6" maxlength="6" />
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Telefoonnummer</label>
            </div>
            <div class="column-7">
                <div class="column-4 form__input">
                    <input type="tel" placeholder="0123456789" data-parsley-type="digits" data-parsley-minlength="10" data-parsley-error-message="Dit is geen geldig telefoonnummer." />
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>IBAN-nummer (NL)</label>
            </div>
            <div class="column-7">
                <div class="column-4 form__input">
                    <input type="tel" placeholder="NL01INGB0123456789" pattern="^(([a-zA-Z]{2}\d{2})?([a-zA-Z]{4}\d{10})|(\d{7}|\d{9,10}))$" data-parsley-error-message="Dit is geen gelding IBAN nummer." />
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>E-mailadres *</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <input type="email" placeholder="jouwnaam@adres.nl" />
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Wachtwoord *</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <input id="password" type="password" />
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Herhaal wachtwoord *</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <input type="password" data-parsley-equalto="#password" data-parsley-error-message="Wachtwoorden zijn niet identiek." />
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Website *</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <input type="url" />
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Some checkboxes</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <ul class="form__input-list list-unstyled">
                        <li><input name="checkbox2" type="checkbox" checked="checked" id="checkbox10" data-parsley-mincheck="2" /><label for="checkbox10">Checkbox</label></li>
                        <li><input name="checkbox2" type="checkbox" id="checkbox11" /><label for="checkbox11">Checkbox</label></li>
                        <li><input name="checkbox2" type="checkbox" id="checkbox12" /><label for="checkbox12">Checkbox</label></li>
                        <li><input name="checkbox2" type="checkbox" id="checkbox13" /><label for="checkbox13">Checkbox</label></li>
                        <li><input name="checkbox2" type="checkbox" id="checkbox14" /><label for="checkbox14">Checkbox</label></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Some radio buttons</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <ul class="form__input-list list-unstyled">
                        <li><input required="required" name="radio2" type="radio" id="radio13" /><label for="radio13">Radio</label></li>
                        <li><input name="radio2" type="radio" id="radio14" /><label for="radio14">Radio</label></li>
                        <li><input name="radio2" type="radio" id="radio10" /><label for="radio10">Radio</label></li>
                        <li><input name="radio2" type="radio" id="radio11" /><label for="radio11">Radio</label></li>
                        <li><input name="radio2" type="radio" id="radio12" /><label for="radio12">Radio</label></li>
                    </ul>
                </div>
            </div>
        </div>
    </fieldset>

    <div class="form__actions">
        <p class="form__required-field"><i>* = Required field</i></p>
        <input class="btn btn--beta btn--medium" type="submit" value="send" />
    </div>

</form>
```

*/
/* Form password field
==========
*/
.form__password-toggle {
  position: absolute;
  text-decoration: none;
  top: 0.5rem;
  /* =8px */
  right: 0.625rem;
  /* =10px */ }
  .form__password-toggle:after {
    display: inline-block;
    content: "";
    font-size: 1.125rem;
    /* =18px */ }
    .form__input--show-password .form__password-toggle:after {
      content: ""; }
  .form__input--error .form__password-toggle,
  .form__input--success .form__password-toggle {
    display: none; }

/*doc
---
title: Password toggle
name: password_toggle
category: Forms
---

```html_example
<div class="form__row">
    <div class="column-5 form__label">
        <label>Password toggle *</label>
    </div>
    <div class="column-7">
        <div class="column-6 form__input">
            <input type="password" placeholder="password" />
            <a class="form__password-toggle tooltip" data-tooltip-position="top" title="Show/hide password"></a>
        </div>
    </div>
</div>
```

*/
/* Floating label
==========
*/
.form__input--floating-label {
  position: relative;
  padding-top: 1.25rem;
  /* =20px */ }
  .form__input--floating-label input {
    border: none;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    box-shadow: none;
    padding: 0;
    padding-top: 0.375rem;
    /* =6px */
    padding-bottom: 0.375rem;
    /* =6px */ }
    .form__input--floating-label input:focus, .form__input--floating-label input:active {
      border: none;
      box-shadow: none;
      border-bottom: 1px solid #E67408; }
      .form__input--floating-label input:focus + label, .form__input--floating-label input:active + label {
        color: #E67408;
        top: 0.25rem;
        /* =4px */
        font-size: 0.75rem;
        /* =12px */ }
    .form__input--floating-label input:focus + label, .form__input--floating-label input:active + label, .form__input--floating-label input.is-filled + label {
      color: #E67408;
      top: 0.25rem;
      /* =4px */
      font-size: 0.75rem;
      /* =12px */ }
  .form__input--floating-label label {
    bottom: 0;
    color: rgba(0, 0, 0, 0.26);
    left: 0;
    right: 0;
    pointer-events: none;
    position: absolute;
    display: block;
    top: 24px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }

/*doc
---
title: Floating label
name: floating_label
category: Forms
---

```html_example
<div class="form__input form__input--floating-label">
    <input id="floating-label" type="url" />
    <label for="floating-label">Website</label>
</div>
```

*/
/* Notifications
==========
*/
/* Notification
==========
*/
.notification {
  background: #f5f5f5;
  border-radius: 0;
  position: relative;
  transition: all 0.2s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  margin-bottom: 1.875rem;
  /* =30px */ }
  .notification:before {
    content: "";
    color: #2690b0; }
  .notification:before {
    position: absolute;
    top: 0;
    left: 0.625rem;
    /* =10px */
    font-size: 2.5rem;
    /* =40px */ }
  .notification.notification--close {
    opacity: 0; }
    .notification.notification--close:not(.notification--cookie) {
      height: 0;
      overflow: hidden;
      padding: 0;
      min-height: 0;
      margin: 0;
      border: 0;
      transform: scale3d(0.5); }

/*doc
---
title: Notifications
name: notifications
category: Callouts and prompts
---

## Alpha

```html_example
<div class="notification notification--alpha">
    <div class="notification__text">Je abonnement loopt af op 23-02-2014. <a href="#">Verleng je abonnment</a>.</div>
    <button class="notification__close" data-notification-close></button>
</div>
<div class="notification notification--alpha notification--error">
    <div class="notification__text">Deze account gegevens zijn niet bij ons bekend.</div>
    <button class="notification__close" data-notification-close></button>
</div>
<div class="notification notification--alpha notification--success">
    <div class="notification__text">Je bent nu geregistreerd op onze website.</div>
    <button class="notification__close" data-notification-close></button>
</div>
```

## Beta

```html_example
<div class="notification notification--beta">
    <div class="notification__text">Je abonnement loopt af op 23-02-2014. <a href="#">Verleng je abonnment</a>.</div>
    <button class="notification__close" data-notification-close></button>
</div>
<div class="notification notification--beta notification--error">
    <div class="notification__text">Deze account gegevens zijn niet bij ons bekend.</div>
    <button class="notification__close" data-notification-close></button>
</div>
<div class="notification notification--beta notification--success">
    <div class="notification__text">Je bent nu geregistreerd op onze website.</div>
    <button class="notification__close" data-notification-close></button>
</div>
```

## Add

You can call this function to insert a notification in the DOM.

```
app.notifications.add(target, message, size, type);
```

- target: notification container {string selector}
- message: message to be shown {string}
- size: alpha, beta {string}
- type: success, error, info {string}

*/
/* Notification sizes
==========
*/
.notification--alpha {
  padding: 1.25rem 3.75rem 1.25rem 1.25rem;
  /* =20px 60px 20px 20px */ }
  .notification--alpha:before {
    top: 0.125rem;
    /* =2px */ }

.notification--beta {
  padding: 1.25rem 3.75rem 1.25rem 1.25rem;
  /* =20px 60px 20px 20px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) {
    .notification--beta {
      padding: 1.875rem 3.75rem 1.875rem 1.875rem;
      /* =30px 60px 30px 30px */
      min-height: 5.3125rem;
      /* =85px */ }
      .notification--beta:before {
        font-size: 3.75rem;
        /* =60px */
        left: 1.25rem;
        /* =20px */ } }

/* Notification styles
==========
*/
.notification--error:before {
  content: "";
  color: #b02626; }

.notification--success:before {
  content: "";
  color: #26b036; }

/* Notification identifiers
==========
*/
.notification__text {
  margin-left: 2.5rem;
  /* =40px */ }
  @media screen and (min-width: 601px) {
    .notification--beta .notification__text {
      margin-left: 4.375rem;
      /* =70px */ } }

.notification__close {
  position: absolute;
  color: black;
  padding: 0;
  background: none;
  border: none;
  top: 0.625rem;
  /* =10px */
  right: 0.875rem;
  /* =14px */ }
  .notification__close:before {
    content: "";
    opacity: 0.2;
    transition: opacity 0.2s; }
  .notification__close:hover:before {
    opacity: 0.5; }
  .notification__close:focus {
    outline: none; }

/* Cookie notification
==========
*/
.notification--cookie {
  position: fixed;
  left: 0;
  width: 100%;
  min-width: 320px;
  background: black;
  background: rgba(0, 0, 0, 0.85);
  text-align: center;
  z-index: 999;
  margin-bottom: 0;
  border: none;
  color: white;
  transition: all 0.4s;
  border-radius: 0;
  padding: 1.25rem 0;
  /* =20px 0 */ }
  .notification-cookie-show[notification-cookie-position] .notification--cookie.notification--close {
    transform: translate3d(0, 100%, 0); }
  .notification--cookie:before {
    display: none; }
  .notification-cookie-show[notification-cookie-position] .notification--cookie {
    transform: translate3d(0, 0, 0); }
  [notification-cookie-position=top] .notification--cookie {
    top: 0;
    transform: translate3d(0, -100%, 0); }
  [notification-cookie-position=bottom] .notification--cookie {
    bottom: 0;
    transform: translate3d(0, 100%, 0); }
  .notification--cookie .notification__more-info {
    color: white;
    text-decoration: underline; }
  .notification--cookie .notification__text {
    margin-left: 0;
    margin-bottom: 0.625rem;
    /* =10px */ }
  .notification--cookie .notification__close {
    color: white; }
  .notification--cookie a {
    color: white;
    text-decoration: underline; }

/*
Imports the app specific SCSS modules, there are a few already made for you.
You can add your own custom modules here which you'll need for the thing you're building.
*/
@-ms-viewport {
  width: device-width; }

.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 15px;
  padding-left: 15px; }
  @media (min-width: 576px) {
    .container {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 768px) {
    .container {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 992px) {
    .container {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 1210px) {
    .container {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 576px) {
    .container {
      width: 1207px;
      max-width: 100%; } }
  @media (min-width: 768px) {
    .container {
      width: 1208px;
      max-width: 100%; } }
  @media (min-width: 992px) {
    .container {
      width: 1209px;
      max-width: 100%; } }
  @media (min-width: 1210px) {
    .container {
      width: 1210px;
      max-width: 100%; } }

.container-fluid {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 15px;
  padding-left: 15px; }
  @media (min-width: 576px) {
    .container-fluid {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 768px) {
    .container-fluid {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 992px) {
    .container-fluid {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 1210px) {
    .container-fluid {
      padding-right: 15px;
      padding-left: 15px; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px; }
  @media (min-width: 576px) {
    .row {
      margin-right: -15px;
      margin-left: -15px; } }
  @media (min-width: 768px) {
    .row {
      margin-right: -15px;
      margin-left: -15px; } }
  @media (min-width: 992px) {
    .row {
      margin-right: -15px;
      margin-left: -15px; } }
  @media (min-width: 1210px) {
    .row {
      margin-right: -15px;
      margin-left: -15px; } }

.no-gutters {
  margin-right: 0;
  margin-left: 0; }
  .no-gutters > .col,
  .no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0; }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px; }
  @media (min-width: 576px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 768px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 992px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 1210px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
      padding-right: 15px;
      padding-left: 15px; } }

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%; }

.col-auto {
  flex: 0 0 auto;
  width: auto; }

.col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%; }

.col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%; }

.col-3 {
  flex: 0 0 25%;
  max-width: 25%; }

.col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%; }

.col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%; }

.col-6 {
  flex: 0 0 50%;
  max-width: 50%; }

.col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%; }

.col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%; }

.col-9 {
  flex: 0 0 75%;
  max-width: 75%; }

.col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%; }

.col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%; }

.col-12 {
  flex: 0 0 100%;
  max-width: 100%; }

.pull-0 {
  right: auto; }

.pull-1 {
  right: 8.3333333333%; }

.pull-2 {
  right: 16.6666666667%; }

.pull-3 {
  right: 25%; }

.pull-4 {
  right: 33.3333333333%; }

.pull-5 {
  right: 41.6666666667%; }

.pull-6 {
  right: 50%; }

.pull-7 {
  right: 58.3333333333%; }

.pull-8 {
  right: 66.6666666667%; }

.pull-9 {
  right: 75%; }

.pull-10 {
  right: 83.3333333333%; }

.pull-11 {
  right: 91.6666666667%; }

.pull-12 {
  right: 100%; }

.push-0 {
  left: auto; }

.push-1 {
  left: 8.3333333333%; }

.push-2 {
  left: 16.6666666667%; }

.push-3 {
  left: 25%; }

.push-4 {
  left: 33.3333333333%; }

.push-5 {
  left: 41.6666666667%; }

.push-6 {
  left: 50%; }

.push-7 {
  left: 58.3333333333%; }

.push-8 {
  left: 66.6666666667%; }

.push-9 {
  left: 75%; }

.push-10 {
  left: 83.3333333333%; }

.push-11 {
  left: 91.6666666667%; }

.push-12 {
  left: 100%; }

.offset-1 {
  margin-left: 8.3333333333%; }

.offset-2 {
  margin-left: 16.6666666667%; }

.offset-3 {
  margin-left: 25%; }

.offset-4 {
  margin-left: 33.3333333333%; }

.offset-5 {
  margin-left: 41.6666666667%; }

.offset-6 {
  margin-left: 50%; }

.offset-7 {
  margin-left: 58.3333333333%; }

.offset-8 {
  margin-left: 66.6666666667%; }

.offset-9 {
  margin-left: 75%; }

.offset-10 {
  margin-left: 83.3333333333%; }

.offset-11 {
  margin-left: 91.6666666667%; }

@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%; }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto; }
  .col-sm-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%; }
  .col-sm-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%; }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%; }
  .col-sm-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%; }
  .col-sm-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%; }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%; }
  .col-sm-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%; }
  .col-sm-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%; }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%; }
  .col-sm-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%; }
  .col-sm-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%; }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%; }
  .pull-sm-0 {
    right: auto; }
  .pull-sm-1 {
    right: 8.3333333333%; }
  .pull-sm-2 {
    right: 16.6666666667%; }
  .pull-sm-3 {
    right: 25%; }
  .pull-sm-4 {
    right: 33.3333333333%; }
  .pull-sm-5 {
    right: 41.6666666667%; }
  .pull-sm-6 {
    right: 50%; }
  .pull-sm-7 {
    right: 58.3333333333%; }
  .pull-sm-8 {
    right: 66.6666666667%; }
  .pull-sm-9 {
    right: 75%; }
  .pull-sm-10 {
    right: 83.3333333333%; }
  .pull-sm-11 {
    right: 91.6666666667%; }
  .pull-sm-12 {
    right: 100%; }
  .push-sm-0 {
    left: auto; }
  .push-sm-1 {
    left: 8.3333333333%; }
  .push-sm-2 {
    left: 16.6666666667%; }
  .push-sm-3 {
    left: 25%; }
  .push-sm-4 {
    left: 33.3333333333%; }
  .push-sm-5 {
    left: 41.6666666667%; }
  .push-sm-6 {
    left: 50%; }
  .push-sm-7 {
    left: 58.3333333333%; }
  .push-sm-8 {
    left: 66.6666666667%; }
  .push-sm-9 {
    left: 75%; }
  .push-sm-10 {
    left: 83.3333333333%; }
  .push-sm-11 {
    left: 91.6666666667%; }
  .push-sm-12 {
    left: 100%; }
  .offset-sm-0 {
    margin-left: 0%; }
  .offset-sm-1 {
    margin-left: 8.3333333333%; }
  .offset-sm-2 {
    margin-left: 16.6666666667%; }
  .offset-sm-3 {
    margin-left: 25%; }
  .offset-sm-4 {
    margin-left: 33.3333333333%; }
  .offset-sm-5 {
    margin-left: 41.6666666667%; }
  .offset-sm-6 {
    margin-left: 50%; }
  .offset-sm-7 {
    margin-left: 58.3333333333%; }
  .offset-sm-8 {
    margin-left: 66.6666666667%; }
  .offset-sm-9 {
    margin-left: 75%; }
  .offset-sm-10 {
    margin-left: 83.3333333333%; }
  .offset-sm-11 {
    margin-left: 91.6666666667%; } }

@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%; }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto; }
  .col-md-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%; }
  .col-md-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%; }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%; }
  .col-md-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%; }
  .col-md-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%; }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%; }
  .col-md-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%; }
  .col-md-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%; }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%; }
  .col-md-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%; }
  .col-md-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%; }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%; }
  .pull-md-0 {
    right: auto; }
  .pull-md-1 {
    right: 8.3333333333%; }
  .pull-md-2 {
    right: 16.6666666667%; }
  .pull-md-3 {
    right: 25%; }
  .pull-md-4 {
    right: 33.3333333333%; }
  .pull-md-5 {
    right: 41.6666666667%; }
  .pull-md-6 {
    right: 50%; }
  .pull-md-7 {
    right: 58.3333333333%; }
  .pull-md-8 {
    right: 66.6666666667%; }
  .pull-md-9 {
    right: 75%; }
  .pull-md-10 {
    right: 83.3333333333%; }
  .pull-md-11 {
    right: 91.6666666667%; }
  .pull-md-12 {
    right: 100%; }
  .push-md-0 {
    left: auto; }
  .push-md-1 {
    left: 8.3333333333%; }
  .push-md-2 {
    left: 16.6666666667%; }
  .push-md-3 {
    left: 25%; }
  .push-md-4 {
    left: 33.3333333333%; }
  .push-md-5 {
    left: 41.6666666667%; }
  .push-md-6 {
    left: 50%; }
  .push-md-7 {
    left: 58.3333333333%; }
  .push-md-8 {
    left: 66.6666666667%; }
  .push-md-9 {
    left: 75%; }
  .push-md-10 {
    left: 83.3333333333%; }
  .push-md-11 {
    left: 91.6666666667%; }
  .push-md-12 {
    left: 100%; }
  .offset-md-0 {
    margin-left: 0%; }
  .offset-md-1 {
    margin-left: 8.3333333333%; }
  .offset-md-2 {
    margin-left: 16.6666666667%; }
  .offset-md-3 {
    margin-left: 25%; }
  .offset-md-4 {
    margin-left: 33.3333333333%; }
  .offset-md-5 {
    margin-left: 41.6666666667%; }
  .offset-md-6 {
    margin-left: 50%; }
  .offset-md-7 {
    margin-left: 58.3333333333%; }
  .offset-md-8 {
    margin-left: 66.6666666667%; }
  .offset-md-9 {
    margin-left: 75%; }
  .offset-md-10 {
    margin-left: 83.3333333333%; }
  .offset-md-11 {
    margin-left: 91.6666666667%; } }

@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%; }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto; }
  .col-lg-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%; }
  .col-lg-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%; }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%; }
  .col-lg-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%; }
  .col-lg-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%; }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%; }
  .col-lg-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%; }
  .col-lg-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%; }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%; }
  .col-lg-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%; }
  .col-lg-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%; }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%; }
  .pull-lg-0 {
    right: auto; }
  .pull-lg-1 {
    right: 8.3333333333%; }
  .pull-lg-2 {
    right: 16.6666666667%; }
  .pull-lg-3 {
    right: 25%; }
  .pull-lg-4 {
    right: 33.3333333333%; }
  .pull-lg-5 {
    right: 41.6666666667%; }
  .pull-lg-6 {
    right: 50%; }
  .pull-lg-7 {
    right: 58.3333333333%; }
  .pull-lg-8 {
    right: 66.6666666667%; }
  .pull-lg-9 {
    right: 75%; }
  .pull-lg-10 {
    right: 83.3333333333%; }
  .pull-lg-11 {
    right: 91.6666666667%; }
  .pull-lg-12 {
    right: 100%; }
  .push-lg-0 {
    left: auto; }
  .push-lg-1 {
    left: 8.3333333333%; }
  .push-lg-2 {
    left: 16.6666666667%; }
  .push-lg-3 {
    left: 25%; }
  .push-lg-4 {
    left: 33.3333333333%; }
  .push-lg-5 {
    left: 41.6666666667%; }
  .push-lg-6 {
    left: 50%; }
  .push-lg-7 {
    left: 58.3333333333%; }
  .push-lg-8 {
    left: 66.6666666667%; }
  .push-lg-9 {
    left: 75%; }
  .push-lg-10 {
    left: 83.3333333333%; }
  .push-lg-11 {
    left: 91.6666666667%; }
  .push-lg-12 {
    left: 100%; }
  .offset-lg-0 {
    margin-left: 0%; }
  .offset-lg-1 {
    margin-left: 8.3333333333%; }
  .offset-lg-2 {
    margin-left: 16.6666666667%; }
  .offset-lg-3 {
    margin-left: 25%; }
  .offset-lg-4 {
    margin-left: 33.3333333333%; }
  .offset-lg-5 {
    margin-left: 41.6666666667%; }
  .offset-lg-6 {
    margin-left: 50%; }
  .offset-lg-7 {
    margin-left: 58.3333333333%; }
  .offset-lg-8 {
    margin-left: 66.6666666667%; }
  .offset-lg-9 {
    margin-left: 75%; }
  .offset-lg-10 {
    margin-left: 83.3333333333%; }
  .offset-lg-11 {
    margin-left: 91.6666666667%; } }

@media (min-width: 1210px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%; }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto; }
  .col-xl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%; }
  .col-xl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%; }
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%; }
  .col-xl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%; }
  .col-xl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%; }
  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%; }
  .col-xl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%; }
  .col-xl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%; }
  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%; }
  .col-xl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%; }
  .col-xl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%; }
  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%; }
  .pull-xl-0 {
    right: auto; }
  .pull-xl-1 {
    right: 8.3333333333%; }
  .pull-xl-2 {
    right: 16.6666666667%; }
  .pull-xl-3 {
    right: 25%; }
  .pull-xl-4 {
    right: 33.3333333333%; }
  .pull-xl-5 {
    right: 41.6666666667%; }
  .pull-xl-6 {
    right: 50%; }
  .pull-xl-7 {
    right: 58.3333333333%; }
  .pull-xl-8 {
    right: 66.6666666667%; }
  .pull-xl-9 {
    right: 75%; }
  .pull-xl-10 {
    right: 83.3333333333%; }
  .pull-xl-11 {
    right: 91.6666666667%; }
  .pull-xl-12 {
    right: 100%; }
  .push-xl-0 {
    left: auto; }
  .push-xl-1 {
    left: 8.3333333333%; }
  .push-xl-2 {
    left: 16.6666666667%; }
  .push-xl-3 {
    left: 25%; }
  .push-xl-4 {
    left: 33.3333333333%; }
  .push-xl-5 {
    left: 41.6666666667%; }
  .push-xl-6 {
    left: 50%; }
  .push-xl-7 {
    left: 58.3333333333%; }
  .push-xl-8 {
    left: 66.6666666667%; }
  .push-xl-9 {
    left: 75%; }
  .push-xl-10 {
    left: 83.3333333333%; }
  .push-xl-11 {
    left: 91.6666666667%; }
  .push-xl-12 {
    left: 100%; }
  .offset-xl-0 {
    margin-left: 0%; }
  .offset-xl-1 {
    margin-left: 8.3333333333%; }
  .offset-xl-2 {
    margin-left: 16.6666666667%; }
  .offset-xl-3 {
    margin-left: 25%; }
  .offset-xl-4 {
    margin-left: 33.3333333333%; }
  .offset-xl-5 {
    margin-left: 41.6666666667%; }
  .offset-xl-6 {
    margin-left: 50%; }
  .offset-xl-7 {
    margin-left: 58.3333333333%; }
  .offset-xl-8 {
    margin-left: 66.6666666667%; }
  .offset-xl-9 {
    margin-left: 75%; }
  .offset-xl-10 {
    margin-left: 83.3333333333%; }
  .offset-xl-11 {
    margin-left: 91.6666666667%; } }

.order-first {
  order: -1; }

.order-last {
  order: 1; }

.order-0 {
  order: 0; }

.flex-row {
  flex-direction: row !important; }

.flex-column {
  flex-direction: column !important; }

.flex-row-reverse {
  flex-direction: row-reverse !important; }

.flex-column-reverse {
  flex-direction: column-reverse !important; }

.flex-wrap {
  flex-wrap: wrap !important; }

.flex-nowrap {
  flex-wrap: nowrap !important; }

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important; }

.justify-content-start {
  justify-content: flex-start !important; }

.justify-content-end {
  justify-content: flex-end !important; }

.justify-content-center {
  justify-content: center !important; }

.justify-content-between {
  justify-content: space-between !important; }

.justify-content-around {
  justify-content: space-around !important; }

.align-items-start {
  align-items: flex-start !important; }

.align-items-end {
  align-items: flex-end !important; }

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

.align-items-baseline {
  align-items: baseline !important; }

.align-items-stretch {
  align-items: stretch !important; }

.align-content-start {
  align-content: flex-start !important; }

.align-content-end {
  align-content: flex-end !important; }

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

.align-content-between {
  align-content: space-between !important; }

.align-content-around {
  align-content: space-around !important; }

.align-content-stretch {
  align-content: stretch !important; }

.align-self-auto {
  align-self: auto !important; }

.align-self-start {
  align-self: flex-start !important; }

.align-self-end {
  align-self: flex-end !important; }

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

.align-self-baseline {
  align-self: baseline !important; }

.align-self-stretch {
  align-self: stretch !important; }

@media (min-width: 576px) {
  .order-sm-first {
    order: -1; }
  .order-sm-last {
    order: 1; }
  .order-sm-0 {
    order: 0; }
  .flex-sm-row {
    flex-direction: row !important; }
  .flex-sm-column {
    flex-direction: column !important; }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-sm-wrap {
    flex-wrap: wrap !important; }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important; }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .justify-content-sm-start {
    justify-content: flex-start !important; }
  .justify-content-sm-end {
    justify-content: flex-end !important; }
  .justify-content-sm-center {
    justify-content: center !important; }
  .justify-content-sm-between {
    justify-content: space-between !important; }
  .justify-content-sm-around {
    justify-content: space-around !important; }
  .align-items-sm-start {
    align-items: flex-start !important; }
  .align-items-sm-end {
    align-items: flex-end !important; }
  .align-items-sm-center {
    align-items: center !important; }
  .align-items-sm-baseline {
    align-items: baseline !important; }
  .align-items-sm-stretch {
    align-items: stretch !important; }
  .align-content-sm-start {
    align-content: flex-start !important; }
  .align-content-sm-end {
    align-content: flex-end !important; }
  .align-content-sm-center {
    align-content: center !important; }
  .align-content-sm-between {
    align-content: space-between !important; }
  .align-content-sm-around {
    align-content: space-around !important; }
  .align-content-sm-stretch {
    align-content: stretch !important; }
  .align-self-sm-auto {
    align-self: auto !important; }
  .align-self-sm-start {
    align-self: flex-start !important; }
  .align-self-sm-end {
    align-self: flex-end !important; }
  .align-self-sm-center {
    align-self: center !important; }
  .align-self-sm-baseline {
    align-self: baseline !important; }
  .align-self-sm-stretch {
    align-self: stretch !important; } }

@media (min-width: 768px) {
  .order-md-first {
    order: -1; }
  .order-md-last {
    order: 1; }
  .order-md-0 {
    order: 0; }
  .flex-md-row {
    flex-direction: row !important; }
  .flex-md-column {
    flex-direction: column !important; }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-md-wrap {
    flex-wrap: wrap !important; }
  .flex-md-nowrap {
    flex-wrap: nowrap !important; }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .justify-content-md-start {
    justify-content: flex-start !important; }
  .justify-content-md-end {
    justify-content: flex-end !important; }
  .justify-content-md-center {
    justify-content: center !important; }
  .justify-content-md-between {
    justify-content: space-between !important; }
  .justify-content-md-around {
    justify-content: space-around !important; }
  .align-items-md-start {
    align-items: flex-start !important; }
  .align-items-md-end {
    align-items: flex-end !important; }
  .align-items-md-center {
    align-items: center !important; }
  .align-items-md-baseline {
    align-items: baseline !important; }
  .align-items-md-stretch {
    align-items: stretch !important; }
  .align-content-md-start {
    align-content: flex-start !important; }
  .align-content-md-end {
    align-content: flex-end !important; }
  .align-content-md-center {
    align-content: center !important; }
  .align-content-md-between {
    align-content: space-between !important; }
  .align-content-md-around {
    align-content: space-around !important; }
  .align-content-md-stretch {
    align-content: stretch !important; }
  .align-self-md-auto {
    align-self: auto !important; }
  .align-self-md-start {
    align-self: flex-start !important; }
  .align-self-md-end {
    align-self: flex-end !important; }
  .align-self-md-center {
    align-self: center !important; }
  .align-self-md-baseline {
    align-self: baseline !important; }
  .align-self-md-stretch {
    align-self: stretch !important; } }

@media (min-width: 992px) {
  .order-lg-first {
    order: -1; }
  .order-lg-last {
    order: 1; }
  .order-lg-0 {
    order: 0; }
  .flex-lg-row {
    flex-direction: row !important; }
  .flex-lg-column {
    flex-direction: column !important; }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-lg-wrap {
    flex-wrap: wrap !important; }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important; }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .justify-content-lg-start {
    justify-content: flex-start !important; }
  .justify-content-lg-end {
    justify-content: flex-end !important; }
  .justify-content-lg-center {
    justify-content: center !important; }
  .justify-content-lg-between {
    justify-content: space-between !important; }
  .justify-content-lg-around {
    justify-content: space-around !important; }
  .align-items-lg-start {
    align-items: flex-start !important; }
  .align-items-lg-end {
    align-items: flex-end !important; }
  .align-items-lg-center {
    align-items: center !important; }
  .align-items-lg-baseline {
    align-items: baseline !important; }
  .align-items-lg-stretch {
    align-items: stretch !important; }
  .align-content-lg-start {
    align-content: flex-start !important; }
  .align-content-lg-end {
    align-content: flex-end !important; }
  .align-content-lg-center {
    align-content: center !important; }
  .align-content-lg-between {
    align-content: space-between !important; }
  .align-content-lg-around {
    align-content: space-around !important; }
  .align-content-lg-stretch {
    align-content: stretch !important; }
  .align-self-lg-auto {
    align-self: auto !important; }
  .align-self-lg-start {
    align-self: flex-start !important; }
  .align-self-lg-end {
    align-self: flex-end !important; }
  .align-self-lg-center {
    align-self: center !important; }
  .align-self-lg-baseline {
    align-self: baseline !important; }
  .align-self-lg-stretch {
    align-self: stretch !important; } }

@media (min-width: 1210px) {
  .order-xl-first {
    order: -1; }
  .order-xl-last {
    order: 1; }
  .order-xl-0 {
    order: 0; }
  .flex-xl-row {
    flex-direction: row !important; }
  .flex-xl-column {
    flex-direction: column !important; }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important; }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important; }
  .flex-xl-wrap {
    flex-wrap: wrap !important; }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important; }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important; }
  .justify-content-xl-start {
    justify-content: flex-start !important; }
  .justify-content-xl-end {
    justify-content: flex-end !important; }
  .justify-content-xl-center {
    justify-content: center !important; }
  .justify-content-xl-between {
    justify-content: space-between !important; }
  .justify-content-xl-around {
    justify-content: space-around !important; }
  .align-items-xl-start {
    align-items: flex-start !important; }
  .align-items-xl-end {
    align-items: flex-end !important; }
  .align-items-xl-center {
    align-items: center !important; }
  .align-items-xl-baseline {
    align-items: baseline !important; }
  .align-items-xl-stretch {
    align-items: stretch !important; }
  .align-content-xl-start {
    align-content: flex-start !important; }
  .align-content-xl-end {
    align-content: flex-end !important; }
  .align-content-xl-center {
    align-content: center !important; }
  .align-content-xl-between {
    align-content: space-between !important; }
  .align-content-xl-around {
    align-content: space-around !important; }
  .align-content-xl-stretch {
    align-content: stretch !important; }
  .align-self-xl-auto {
    align-self: auto !important; }
  .align-self-xl-start {
    align-self: flex-start !important; }
  .align-self-xl-end {
    align-self: flex-end !important; }
  .align-self-xl-center {
    align-self: center !important; }
  .align-self-xl-baseline {
    align-self: baseline !important; }
  .align-self-xl-stretch {
    align-self: stretch !important; } }

.visible {
  visibility: visible !important; }

.invisible {
  visibility: hidden !important; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

@-ms-viewport {
  width: auto !important; }

/* Header
==========
*/
.header-container {
  padding: 0; }
  @media (min-width: 1260px) {
    .header-container {
      padding-left: 2.5rem;
      /* =40px */
      padding-right: 2.5rem;
      /* =40px */ } }

.header {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 18.75rem;
  /* =300px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 601px) {
    .header {
      min-height: 25rem;
      /* =400px */ } }
  @media (min-width: 1000px) {
    .header {
      min-height: 31.25rem;
      /* =500px */ } }
  .header__heading {
    margin-top: 2.5rem;
    /* =40px */
    margin-bottom: 2.5rem;
    /* =40px */
    max-width: 37.5rem;
    /* =600px */
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 601px) {
      .header__heading {
        margin-left: 1.25rem;
        /* =20px */
        margin-top: 3.75rem;
        /* =60px */
        margin-bottom: 3.75rem;
        /* =60px */ } }
    @media (min-width: 1000px) {
      .header__heading {
        margin-top: 5rem;
        /* =80px */
        margin-bottom: 5rem;
        /* =80px */ } }
  .header__heading-link {
    color: white; }
    .header__heading-link:hover {
      opacity: 0.9;
      color: white; }

.header-small {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  display: flex;
  min-height: 15rem;
  /* =240px */ }
  .header-small__container {
    display: flex;
    align-items: flex-end;
    width: 100%;
    padding-bottom: 2.5rem;
    /* =40px */ }
  .header-small__heading {
    margin-bottom: 0;
    color: white;
    text-shadow: 0px 2px 4px rgba(70, 70, 70, 0.5);
    max-width: 37.5rem;
    /* =600px */
    font-size: 1.5625rem;
    /* =25px */
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 601px) and (max-width: 700px) {
      .header-small__heading {
        font-size: 2.375rem;
        /* =38px */ } }
    @media (min-width: 701px) {
      .header-small__heading {
        font-size: 2.625rem;
        /* =42px */ } }

.header-aside {
  display: flex;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto; }
  @media (min-width: 992px) {
    .header-aside {
      min-height: 20rem; } }
  @media (max-width: 991px) {
    .header-aside {
      flex-wrap: wrap; } }
  .header-aside--large {
    min-height: 37.5rem; }
  .header-aside--contact .header-aside__sidebar .btn {
    display: block;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 701px) {
      .header-aside--contact .header-aside__sidebar .btn {
        display: inline-block; } }
    @media (min-width: 1000px) {
      .header-aside--contact .header-aside__sidebar .btn {
        width: 100%; } }
  .header-aside--contact ul.address-list {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    overflow: inherit;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 1000px) {
      .header-aside--contact ul.address-list {
        margin: 0.9375rem 0; } }
    .header-aside--contact ul.address-list li {
      padding: 0.3125rem 0 0.3125rem 1.875rem;
      position: relative;
      color: white;
      float: none;
      font-weight: 600;
      font-size: 1rem; }
      .header-aside--contact ul.address-list li::before {
        position: absolute;
        left: 0;
        top: 6px;
        font-size: 1.25rem; }
      .header-aside--contact ul.address-list li.icon--location::before {
        font-size: 1.5rem; }
  .header-aside--vacancies .list-arrow > li:last-child, .header-aside--vacancies .list-widget ul > li:last-child, .list-widget .header-aside--vacancies ul > li:last-child {
    margin-top: 0.625rem;
    padding-left: 0;
    font-weight: 600; }
    .header-aside--vacancies .list-arrow > li:last-child::before, .header-aside--vacancies .list-widget ul > li:last-child::before, .list-widget .header-aside--vacancies ul > li:last-child::before {
      content: none; }
  .header-aside__notification {
    background: #f6f6f6;
    color: #ED3D6B;
    padding: 0.3125rem 0.9375rem;
    border-radius: 0.125rem;
    margin-top: 0.3125rem;
    height: 2rem;
    opacity: 0; }
  .header-aside__image {
    min-height: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1;
    background-color: #80356F; }
    .header-aside__image #map {
      height: 100%;
      width: 100%; }
  .header-aside__sidebar {
    padding: 1.25rem 0.9375rem 0.75rem;
    width: 100%;
    border-right: 1.6875rem solid #ED3D6B;
    flex-shrink: 0;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    .header-aside__sidebar ul {
      overflow: auto; }
      .header-aside__sidebar ul li.active a {
        color: #80356F; }
      .header-aside__sidebar ul li.active:before {
        color: #80356F; }
    .header-aside__sidebar dl {
      color: white; }
      .header-aside__sidebar dl:after {
        content: "";
        display: table;
        clear: both; }
      .header-aside__sidebar dl a {
        color: white;
        text-decoration: none; }
      .header-aside__sidebar dl dt, .header-aside__sidebar dl dd {
        float: left;
        margin: 0;
        padding: 0.3125rem 0; }
      .header-aside__sidebar dl dt {
        width: 50%; }
      .header-aside__sidebar dl dd {
        width: 50%;
        font-weight: 600; }
    .header-aside__sidebar .dropdown--trigger__mobile {
      cursor: pointer;
      user-select: none;
      /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
      @media (min-width: 801px) {
        .header-aside__sidebar .dropdown--trigger__mobile {
          cursor: text; } }
    @media (min-width: 801px) {
      .header-aside__sidebar {
        padding: 1.25rem 3.75rem 0.75rem; } }
    @media (min-width: 992px) {
      .header-aside__sidebar {
        width: 25rem;
        padding: 2.5rem; } }
    .header-aside__sidebar.header-aside__sidebar-- {
      background: #80356F; }
    .header-aside__sidebar.header-aside__sidebar--light {
      background: white; }
    .header-aside__sidebar.header-aside__sidebar-border--light {
      border-right: 1.6875rem solid #ffffff; }
    .header-aside__sidebar.header-aside__sidebar--alpha {
      background: #f6f6f6; }
    .header-aside__sidebar.header-aside__sidebar-border--alpha {
      border-right: 1.6875rem solid #f6f6f6; }
    .header-aside__sidebar.header-aside__sidebar--beta {
      background: #E67408; }
    .header-aside__sidebar.header-aside__sidebar-border--beta {
      border-right: 1.6875rem solid #E67408; }
    .header-aside__sidebar.header-aside__sidebar--gamma {
      background: #1DAFC5; }
    .header-aside__sidebar.header-aside__sidebar-border--gamma {
      border-right: 1.6875rem solid #1DAFC5; }
    .header-aside__sidebar.header-aside__sidebar--delta, .header-aside--contact .header-aside__sidebar {
      background: #80356F; }
    .header-aside__sidebar.header-aside__sidebar-border--delta {
      border-right: 1.6875rem solid #80356F; }
    .header-aside__sidebar.header-aside__sidebar--epsilon {
      background: #ED3D6B; }
    .header-aside__sidebar.header-aside__sidebar-border--epsilon, .header-aside--contact .header-aside__sidebar {
      border-right: 1.6875rem solid #ED3D6B; }
    .header-aside__sidebar.header-aside__sidebar--kappa {
      background: #8DC63F; }
    .header-aside__sidebar.header-aside__sidebar-border--kappa {
      border-right: 1.6875rem solid #8DC63F; }
    .header-aside__sidebar.header-aside__sidebar--delta-dark {
      background: #561447; }
    .header-aside__sidebar.header-aside__sidebar-border--delta-dark {
      border-right: 1.6875rem solid #561447; }
    .header-aside__sidebar.header-aside__sidebar--specialist-evenaar {
      background: #009005; }
    .header-aside__sidebar.header-aside__sidebar-border--specialist-evenaar {
      border-right: 1.6875rem solid #009005; }
    .header-aside__sidebar.header-aside__sidebar--specialist-evenaar-en {
      background: #009005; }
    .header-aside__sidebar.header-aside__sidebar-border--specialist-evenaar-en {
      border-right: 1.6875rem solid #009005; }
    .header-aside__sidebar.header-aside__sidebar--specialist-forensischepsychiatrie {
      background: #0a73a1; }
    .header-aside__sidebar.header-aside__sidebar-border--specialist-forensischepsychiatrie {
      border-right: 1.6875rem solid #0a73a1; }
    .header-aside__sidebar.header-aside__sidebar--specialist-kinderenjeugdpsychiatrie {
      background: #0486D4; }
    .header-aside__sidebar.header-aside__sidebar-border--specialist-kinderenjeugdpsychiatrie {
      border-right: 1.6875rem solid #0486D4; }
    .header-aside__sidebar.header-aside__sidebar--specialist-kjp {
      background: #0486D4; }
    .header-aside__sidebar.header-aside__sidebar-border--specialist-kjp {
      border-right: 1.6875rem solid #0486D4; }
    .header-aside__sidebar.header-aside__sidebar--specialist-gezinspsychiatrie {
      background: #E46C0B; }
    .header-aside__sidebar.header-aside__sidebar-border--specialist-gezinspsychiatrie {
      border-right: 1.6875rem solid #E46C0B; }
    .header-aside__sidebar.header-aside__sidebar--specialist-ouderenpsychiatrie {
      background: #614A7B; }
    .header-aside__sidebar.header-aside__sidebar-border--specialist-ouderenpsychiatrie {
      border-right: 1.6875rem solid #614A7B; }
    .header-aside__sidebar.header-aside__sidebar--specialist-slaapcentrum {
      background: #EECC3B; }
    .header-aside__sidebar.header-aside__sidebar-border--specialist-slaapcentrum {
      border-right: 1.6875rem solid #EECC3B; }
    .header-aside__sidebar.header-aside__sidebar--specialist-cvbp {
      background: #398A41; }
    .header-aside__sidebar.header-aside__sidebar-border--specialist-cvbp {
      border-right: 1.6875rem solid #398A41; }
  .header-aside__search .icon--target {
    font-size: 1.625rem; }
  .header-aside__title {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); }
  .header-aside.location .header-aside__sidebar {
    border-right: 0; }
  .header-aside__space {
    margin-top: -22px; }

.specialist-evenaar .header-aside__sidebar-- {
  background-color: #009005;
  border-color: #007704; }

.specialist-forensischepsychiatrie .header-aside__sidebar-- {
  background-color: #0a73a1;
  border-color: #096289; }

.specialist-kinderenjeugdpsychiatrie .header-aside__sidebar-- {
  background-color: #0486D4;
  border-color: #0476bb; }

.specialist-kjp .header-aside__sidebar-- {
  background-color: #0486D4;
  border-color: #0476bb; }

.specialist-gezinspsychiatrie .header-aside__sidebar-- {
  background-color: #E46C0B;
  border-color: #cc600a; }

.specialist-ouderenpsychiatrie .header-aside__sidebar-- {
  background-color: #614A7B;
  border-color: #54406b; }

.specialist-slaapcentrum .header-aside__sidebar-- {
  background-color: #EECC3B;
  border-color: #ecc624; }

.specialist-cvbp .header-aside__sidebar-- {
  background-color: #398A41;
  border-color: #327839; }

.header-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .header-flex__image {
    min-height: 13.75rem;
    margin-right: 0px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1; }
  .header-flex__sidebar {
    width: 40%; }
  .header-flex__title {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); }

.header-aside.location .header-aside__image {
  min-height: 28.75rem; }

.c-header-full {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 50%;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .c-header-full {
      height: 320px;
      padding: 0; } }

/* Footer
==========
*/
.footer {
  position: relative; }
  .footer__title {
    font-size: 1.125rem;
    /* =18px */ }
  .footer__to-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    box-shadow: 0px 7px 6px 0px #1380B1;
    font-size: 1.125rem;
    /* =18px */ }
  .footer--privacy {
    margin-top: 2.125rem; }
  .footer p {
    font-weight: 400;
    -webkit-text-stroke: 0; }

/* Back To Top Button
   ========================================================================== */
a.back-to-top {
  display: inline-block;
  text-decoration: none;
  background-color: white;
  color: #1DAFC5;
  width: 3.125rem;
  height: 3.125rem;
  line-height: 3.125rem;
  text-align: center;
  font-size: 1.375rem;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -50%, 0); }
  a.back-to-top .icon, a.back-to-top ul.list-arrow li, ul.list-arrow a.back-to-top li, a.back-to-top .list-widget ul li, .list-widget ul a.back-to-top li,
  a.back-to-top ul.list-icon li, ul.list-icon a.back-to-top li, a.back-to-top .modal__close, a.back-to-top .btn-dropdown__toggle, a.back-to-top .sub-menu-link a, .sub-menu-link a.back-to-top a, a.back-to-top .link-icon {
    display: inline-block;
    color: inherit;
    transition: transform .15s ease; }
  a.back-to-top:focus {
    outline: none; }
  a.back-to-top:hover {
    color: #1DAFC5; }
    a.back-to-top:hover .icon, a.back-to-top:hover ul.list-arrow li, ul.list-arrow a.back-to-top:hover li, a.back-to-top:hover .list-widget ul li, .list-widget ul a.back-to-top:hover li,
    a.back-to-top:hover ul.list-icon li, ul.list-icon a.back-to-top:hover li, a.back-to-top:hover .modal__close, a.back-to-top:hover .btn-dropdown__toggle, a.back-to-top:hover .sub-menu-link a, .sub-menu-link a.back-to-top:hover a, a.back-to-top:hover .link-icon {
      transform: translate3d(0, -2px, 0); }

.page, .news-archive {
  background: white;
  max-width: 1180px;
  margin: 0 auto; }
  .page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 10rem;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem; }
  .page--light {
    background: white; }
  .page--dashed {
    border-top: 4px dashed rgba(177, 177, 177, 0.4); }
  .page h2, .news-archive h2, .page h4, .news-archive h4 {
    font-weight: 600; }

/* ==========================================================================
   Page Header
   ========================================================================== */
.page-header {
  max-width: 1180px;
  margin: 0 auto;
  background-color: #80356F;
  height: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 1.25rem; }
  .page-header.page-header--light {
    background: white; }
  .page-header.page-header--alpha {
    background: #f6f6f6; }
  .page-header.page-header--beta {
    background: #E67408; }
  .page-header.page-header--gamma {
    background: #1DAFC5; }
  .page-header.page-header--delta {
    background: #80356F; }
  .page-header.page-header--epsilon {
    background: #ED3D6B; }
  .page-header.page-header--kappa {
    background: #8DC63F; }
  .page-header.page-header--delta-dark {
    background: #561447; }
  .page-header.page-header--specialist-evenaar {
    background: #009005; }
  .page-header.page-header--specialist-evenaar-en {
    background: #009005; }
  .page-header.page-header--specialist-forensischepsychiatrie {
    background: #0a73a1; }
  .page-header.page-header--specialist-kinderenjeugdpsychiatrie {
    background: #0486D4; }
  .page-header.page-header--specialist-kjp {
    background: #0486D4; }
  .page-header.page-header--specialist-gezinspsychiatrie {
    background: #E46C0B; }
  .page-header.page-header--specialist-ouderenpsychiatrie {
    background: #614A7B; }
  .page-header.page-header--specialist-slaapcentrum {
    background: #EECC3B; }
  .page-header.page-header--specialist-cvbp {
    background: #398A41; }
  .page-header h1 {
    margin: 0;
    color: white; }
  .page-header--shadow h1 {
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); }

.specialist-evenaar .page-header-- {
  background-color: #009005; }

.specialist-forensischepsychiatrie .page-header-- {
  background-color: #0a73a1; }

.specialist-kinderenjeugdpsychiatrie .page-header-- {
  background-color: #0486D4; }

.specialist-kjp .page-header-- {
  background-color: #0486D4; }

.specialist-gezinspsychiatrie .page-header-- {
  background-color: #E46C0B; }

.specialist-ouderenpsychiatrie .page-header-- {
  background-color: #614A7B; }

.specialist-slaapcentrum .page-header-- {
  background-color: #EECC3B; }

.specialist-cvbp .page-header-- {
  background-color: #398A41; }

.container--white {
  background: white; }

.container--grey {
  background: #f6f6f6; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs-container {
  background-color: #FFFFFF;
  max-width: 1180px;
  margin: 0 auto; }

.breadcrumbs {
  max-width: 1180px;
  margin: 0 auto;
  margin-bottom: 0;
  background: white;
  line-height: 16px;
  padding-top: 1.0625rem;
  padding-bottom: 1.0625rem; }
  .breadcrumbs > ul > li {
    display: inline-block;
    font-size: 0.75rem;
    color: #E67408; }
    .breadcrumbs > ul > li > a {
      color: #B1B1B1; }
      .breadcrumbs > ul > li > a:focus, .breadcrumbs > ul > li > a:hover {
        color: #7e7e7e; }
      .breadcrumbs > ul > li > a::after {
        display: inline-block;
        content: '\e80c';
        color: #B1B1B1;
        margin-left: 0.375rem;
        margin-right: 0.3125rem;
        position: relative;
        top: 1px; }
  .breadcrumbs .rsbtn {
    padding: 0; }
    .breadcrumbs .rsbtn .rsbtn_play {
      margin: 0; }
  .breadcrumbs__readspeaker {
    line-height: 1;
    padding: 1.0625rem 0.9375rem 1.0625rem 0; }
    @media screen and (max-width: 800px) {
      .breadcrumbs__readspeaker {
        padding: 1.0625rem 0.9375rem; } }
    .breadcrumbs__readspeaker .icon--speak {
      color: #80356F;
      font-size: 24px; }
      .breadcrumbs__readspeaker .icon--speak.rs_visible {
        color: #E67408; }
      .breadcrumbs__readspeaker .icon--speak:hover {
        opacity: 0.8; }
    .breadcrumbs__readspeaker #readspeaker-container {
      width: 100%;
      margin: 10px 0 40px 0;
      position: absolute; }
      @media (min-width: 768px) {
        .breadcrumbs__readspeaker #readspeaker-container {
          margin: 10px 0 30px 0; } }
  .breadcrumbs--clean {
    margin: 0;
    padding-left: 0 !important;
    padding-right: 0 !important; }
  .breadcrumbs--no-background {
    background: none; }

/* ==========================================================================
   Article
   ========================================================================== */
.article {
  margin-bottom: 1.5rem; }
  .article h1, .article h2 {
    margin-bottom: 0.3125rem;
    color: #80356F; }
  .article h5 {
    margin-bottom: 0.125rem;
    color: #80356F; }
  .article p {
    margin-bottom: 1.5rem; }
    .article p:last-child {
      margin-bottom: 0; }

/* ==========================================================================
   Tabs
   ========================================================================== */
.tabs__wrapper {
  margin-bottom: 1.5rem; }

.tabs {
  background-color: #ED3D6B;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 0.8125rem 1.875rem;
  display: none; }
  @media (min-width: 576px) {
    .tabs {
      display: block; } }
  .tabs > ul {
    display: flex;
    justify-content: space-between; }
    .tabs > ul > li {
      margin-bottom: 0; }
      .tabs > ul > li > .tab {
        display: inline-block;
        color: white;
        border-radius: 5px;
        padding: 0.5625rem 1.25rem; }
        .tabs > ul > li > .tab:active, .tabs > ul > li > .tab:hover {
          background-color: #e2154b; }
        .tabs > ul > li > .tab.tab--active {
          background-color: white;
          color: #80356F; }

.tab {
  font-size: 1.125rem;
  line-height: 1.125rem;
  padding: 1.375rem 1.875rem; }
  .tab.tab--inline {
    display: block;
    background-color: #ED3D6B;
    color: white; }
    .tab.tab--inline:first-of-type {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px; }
    .tab.tab--inline:last-of-type {
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px; }
      .tab.tab--inline:last-of-type.tab--active {
        border-radius: 0; }
    .tab.tab--inline::after {
      display: inline-block;
      content: '\e80a';
      position: absolute;
      right: 30px;
      transition: transform .15s ease-in-out; }
    .tab.tab--inline.tab--active::after {
      transform: rotate(180deg); }
    @media (min-width: 576px) {
      .tab.tab--inline {
        display: none; } }
  .tab__content {
    border: 1px solid #B1B1B1;
    background: white;
    border-top: 0;
    padding: 1.5rem 1.875rem;
    display: none; }
    .tab__content.tab__content--active {
      display: block; }
    @media (min-width: 576px) {
      .tab__content {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px; } }
    .tab__content .article {
      margin-bottom: 0; }
      .tab__content .article h5 {
        color: #3C3036; }

@media screen and (max-width: 800px) {
  .breadcrumbs-container .column-alpha-12:last-child {
    margin: 0; } }

@media screen and (max-width: 800px) {
  .breadcrumbs-container .column-alpha-12:last-child .breadcrumbs {
    padding-top: 0; } }

/* ==========================================================================
   Layout
   ========================================================================== */
.layout {
  /* Homepage - Layout
	   ========================================================================== */
  /* Nieuws - Layout
	   ========================================================================== */
  /* Basic - Layout
	   ========================================================================== */
  /* 404 - Layout
	   ========================================================================== */
  /* Vacancies - Layout
	   ========================================================================== */
  /* Fullwidth - Layout
	   ========================================================================== */
  /* Vacancy - overview
	   ========================================================================== */
  /* Vacancy - detail
	   ========================================================================== */ }
  .layout.layout--homepage .card--xsmall {
    margin-bottom: 0; }
  .layout.layout--news .archive .dropdown--wrapper {
    margin-bottom: 0.9375rem; }
    .layout.layout--news .archive .dropdown--wrapper:not(:first-child) .dropdown--content {
      display: none; }
  .layout.layout--news .archive h4 {
    font-weight: 600; }
  .layout.layout--news .archive .dropdown--trigger {
    cursor: pointer; }
  @media screen and (min-width: 1000px) {
    .layout.layout--basic .page-header {
      padding-left: 12.5rem;
      padding-right: 12.5rem; } }
  .layout.layout--basic .page, .layout.layout--basic .news-archive {
    padding-top: 1.875rem;
    padding-bottom: 1.875rem; }
    @media screen and (min-width: 1000px) {
      .layout.layout--basic .page, .layout.layout--basic .news-archive {
        padding-left: 12.5rem;
        padding-right: 12.5rem; } }
  @media screen and (min-width: 1000px) {
    .layout.layout--basic .breadcrumbs {
      padding-left: 12.5rem;
      padding-right: 12.5rem; } }
  .layout.layout--basic h5 {
    margin-bottom: 0.625rem;
    color: #80356F; }
  .layout.layout--basic p,
  .layout.layout--basic .paragraph,
  .layout.layout--basic .content-image {
    margin: 0.625rem 0 1.625rem; }
  .layout.layout--404 {
    padding: 3.125rem 0; }
    .layout.layout--404 .icon--not-found {
      font-size: 3.75rem;
      color: #B1B1B1; }
  .layout.layout--beta p {
    font-weight: 400; }
  .layout.layout--beta h1, .layout.layout--beta h2, .layout.layout--beta h3, .layout.layout--beta h4, .layout.layout--beta h5, .layout.layout--beta h6,
  .layout.layout--beta .h1, .layout.layout--beta .h2, .layout.layout--beta .h3, .layout.layout--beta .selftest h4, .selftest .layout.layout--beta h4, .layout.layout--beta .h4, .layout.layout--beta .h5, .layout.layout--beta .h6 {
    font-weight: bold;
    line-height: 1.2; }
  .layout.layout--beta .section {
    padding-top: 56px;
    padding-bottom: 56px;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 1000px) {
      .layout.layout--beta .section {
        padding-top: 72px;
        padding-bottom: 72px; } }
  .layout.layout--fullwidth .breadcrumbs__icon {
    padding-right: 3.75rem;
    display: flex;
    justify-content: flex-start; }
    @media (min-width: 768px) {
      .layout.layout--fullwidth .breadcrumbs__icon {
        justify-content: flex-end; } }
  .layout.layout--vacancy-overview .vacancy-overview-row {
    margin-bottom: 80px; }
  .layout.layout--vacancy-detail {
    margin-bottom: 80px; }
    .layout.layout--vacancy-detail .vacancy-data-import ul li {
      margin-bottom: 8px; }
      .layout.layout--vacancy-detail .vacancy-data-import ul li:last-of-type {
        margin-bottom: 0px; }
      .layout.layout--vacancy-detail .vacancy-data-import ul li::marker {
        font-size: 1.2em;
        color: #E67408; }

/* ==========================================================================
   Layout / Grid / Test - Dit kan later verwijderd worden
   ========================================================================== */
.l-header {
  max-width: 1180px;
  margin: 0 auto;
  background: #80356F;
  height: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 1.25rem; }
  .l-header.l-header--margin {
    margin-bottom: 1.875rem; }

.l-page {
  max-width: 1210px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 15px;
  padding-right: 15px; }

@page {
  size: A4 portrait; }

.print-only {
  display: none; }

@media only print {
  * {
    color: #000; }
  .print-only {
    display: inline-block !important;
    position: relative;
    top: -2px; }
  .hide-print {
    display: none !important; }
  /* ==========================================================================
	   Specific for GGZ
	   ========================================================================== */
  #container {
    padding: 0 !important; }
  .header-component-container .page-header {
    height: auto; }
  .header-component-container h1 {
    font-size: 28px; }
  .header-component-container .header-aside__image {
    min-height: 0; }
  .menu.menu--fixed {
    position: relative !important; }
  .layout {
    margin-top: 20px; }
  header,
  .footer,
  #container .video,
  .tile-grid,
  .breadcrumbs,
  .footer,
  [data-section="section_wide"],
  .card,
  .faq-widget,
  .header-aside__sidebar {
    display: none; }
  .printlogo {
    display: block;
    margin-top: 20px; }
  .quote-component {
    background: blue; }
    .quote-component .quote-component__image {
      display: none; }
    .quote-component .quote-component__text {
      min-height: 0; }
  .main-sidebar {
    page-break-before: always; } }

/* ==========================================================================
   Wrapper
   ========================================================================== */
.wrap, .layout.layout--basic .page, .layout.layout--basic .news-archive {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto; }

/* ==========================================================================
   Indent (extra padding)
   ========================================================================== */
.indent, .page-header, .breadcrumbs, .l-header, .alphabetic__nav {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem; }
  @media screen and (min-width: 801px) {
    .indent, .page-header, .breadcrumbs, .l-header, .alphabetic__nav {
      padding-left: 3.75rem;
      padding-right: 3.75rem; } }
  @media screen and (min-width: 1000px) {
    .indent.indent--small, .indent--small.page-header, .indent--small.breadcrumbs, .indent--small.l-header, .indent--small.alphabetic__nav {
      padding-left: 7.5rem;
      padding-right: 7.5rem; } }

.alphabetic__title {
  font-size: 1.75rem;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 801px) {
    .alphabetic__title {
      font-size: 2rem; } }

.alphabetic__column {
  margin-bottom: 3.125rem; }

.alphabetic__block {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 801px) {
    .alphabetic__block {
      padding-left: 2.8125rem;
      padding-right: 2.8125rem; } }

.alphabetic__nav {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
  max-width: 1180px;
  margin: 0 auto; }
  .alphabetic__nav ul li {
    display: inline-block;
    font-size: 1.5rem;
    color: #DEDEDE;
    margin-right: 0.9375rem;
    margin-bottom: 0.625rem;
    text-transform: uppercase; }

.avatar {
  display: flex;
  align-items: flex-start; }
  .avatar__image {
    margin-right: 15px;
    flex-shrink: 0; }
    .avatar__image img {
      border-radius: 50%; }
  .avatar__name {
    font-size: 18px;
    font-weight: 600; }
  .avatar__function {
    color: #848484; }

/**
 *
 * HTML Exmplae
 *
 */
.circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background-color: #80356F;
  position: relative;
  z-index: 10; }
  .circle--light {
    background-color: #ffffff; }
  .circle--dark {
    background-color: #000000; }
  .circle--body {
    background-color: #f6f6f6; }
  .circle--text {
    background-color: #3C3036; }
  .circle--placeholder {
    background-color: #94adc4; }
  .circle--selection {
    background-color: #d1e4fe; }
  .circle--alpha {
    background-color: #f6f6f6; }
  .circle--beta {
    background-color: #E67408; }
  .circle--beta-dark {
    background-color: #BC5B00; }
  .circle--gamma {
    background-color: #1DAFC5; }
  .circle--delta {
    background-color: #80356F; }
  .circle--delta-dark {
    background-color: #561447; }
  .circle--epsilon {
    background-color: #ED3D6B; }
  .circle--zeta {
    background-color: #291720; }
  .circle--jeta {
    background-color: #B1B1B1; }
  .circle--dota {
    background-color: #5DC637; }
  .circle--iota {
    background-color: #575757; }
  .circle--kappa {
    background-color: #8DC63F; }
  .circle--lambda {
    background-color: #848484; }
  .circle--specialist-evenaar {
    background-color: #009005; }
  .circle--specialist-evenaar-en {
    background-color: #009005; }
  .circle--specialist-forensischepsychiatrie {
    background-color: #0a73a1; }
  .circle--specialist-kinderenjeugdpsychiatrie {
    background-color: #0486D4; }
  .circle--specialist-kjp {
    background-color: #0486D4; }
  .circle--specialist-gezinspsychiatrie {
    background-color: #E46C0B; }
  .circle--specialist-ouderenpsychiatrie {
    background-color: #614A7B; }
  .circle--specialist-slaapcentrum {
    background-color: #EECC3B; }
  .circle--specialist-cvbp {
    background-color: #398A41; }
  .circle--shadow {
    box-shadow: 2px -2px 1px #E67408; }

.circle-line {
  position: relative;
  z-index: 5;
  border-top: 2px dashed #bbbbbb;
  top: 17px;
  width: calc(100% - 30px);
  margin-left: 15px; }
  @media screen and (max-width: 767px) {
    .circle-line {
      display: none; } }

.contact-person {
  display: flex; }
  .contact-person__avatar {
    margin-right: 40px; }
    .contact-person__avatar img {
      border-radius: 50%;
      box-shadow: -7px -7px 1px #E67408;
      min-width: 144px; }
  .contact-person__info p {
    font-weight: 400; }
  @media screen and (max-width: 520px) {
    .contact-person {
      flex-direction: column;
      text-align: center; }
      .contact-person__avatar {
        margin: 0 0 32px 0; }
        .contact-person__avatar img {
          display: inline-block; } }

/* Navigation
==========
*/
.navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #80356F;
  transform: translate3d(0, -100%, 0);
  padding-top: 4.375rem;
  /* =70px */
  transition: transform .2s;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .navigation {
      float: right;
      padding-top: 0;
      position: static;
      width: auto;
      height: auto;
      background: transparent;
      transform: translate3d(0, 0, 0); } }

.navigation--mobile {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  padding-top: 4.375rem;
  /* =70px */
  background: #80356F;
  transform: translate3d(0, -100%, 0);
  transition: all .2s;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .navigation--mobile {
      display: none !important; } }
  .nav-bar--mobile-show .navigation--mobile {
    transform: translate3d(0, 0, 0); }
  .navigation--mobile .mobile-menu {
    flex-grow: 1;
    overflow-y: auto; }
    .navigation--mobile .mobile-menu .menu-bar__item {
      padding: 0rem 2.5rem; }
    .navigation--mobile .mobile-menu .menu-bar__link {
      padding: 1.25rem 0; }
      .navigation--mobile .mobile-menu .menu-bar__link .icon, .navigation--mobile .mobile-menu .menu-bar__link ul.list-arrow li, ul.list-arrow .navigation--mobile .mobile-menu .menu-bar__link li, .navigation--mobile .mobile-menu .menu-bar__link .list-widget ul li, .list-widget ul .navigation--mobile .mobile-menu .menu-bar__link li,
      .navigation--mobile .mobile-menu .menu-bar__link ul.list-icon li, ul.list-icon .navigation--mobile .mobile-menu .menu-bar__link li, .navigation--mobile .mobile-menu .menu-bar__link .modal__close, .navigation--mobile .mobile-menu .menu-bar__link .btn-dropdown__toggle, .navigation--mobile .mobile-menu .menu-bar__link .sub-menu-link a, .sub-menu-link .navigation--mobile .mobile-menu .menu-bar__link a, .navigation--mobile .mobile-menu .menu-bar__link .link-icon {
        color: white; }
    .navigation--mobile .mobile-menu .menu-bar__sub {
      padding: 0; }
  .navigation--mobile .mobile-menu__extra {
    background: #f6f6f6;
    text-align: center;
    padding-bottom: 1.25rem;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 1000px) {
      .navigation--mobile .mobile-menu__extra {
        display: none; } }
    .navigation--mobile .mobile-menu__extra a {
      display: block;
      padding-top: 1.25rem;
      color: #3C3036;
      font-size: 0.75rem; }
      .navigation--mobile .mobile-menu__extra a::before {
        display: block;
        font-size: 1rem;
        margin-bottom: 0.25rem; }

.mobile-nav-buttons {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 0.75rem;
  /* =0 12px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .mobile-nav-buttons {
      display: none; } }
  .mobile-nav-buttons .mobile-nav-button {
    display: inline-block;
    background: transparent;
    border: 0;
    font-size: 1.75rem;
    /* =28px */
    color: #80356F;
    padding: 0.9375rem 0.9375rem;
    /* =15px 15px */
    outline: none;
    transition: all .2s; }
    .mobile-nav-buttons .mobile-nav-button:hover, .mobile-nav-buttons .mobile-nav-button:active, .mobile-nav-buttons .mobile-nav-button:visited {
      color: #80356F; }
    .nav-bar--mobile-show .mobile-nav-buttons .mobile-nav-button {
      color: white; }

.top-bar {
  max-height: 3.125rem;
  /* =50px */
  border-bottom-left-radius: 4px;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .top-bar {
      display: flex;
      width: auto;
      height: 50px; } }
  .top-bar__list {
    background-color: #f6f6f6;
    padding-right: 4.0625rem;
    /* =65px */
    display: none;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 1000px) {
      .top-bar__list {
        display: block; } }
  .top-bar__item {
    float: left;
    line-height: 3.0625rem;
    /* =49px */
    padding: 0 0.9375rem;
    /* =0 15px */
    /* &:nth-child(2) {
			padding-left: 30px;
		} */ }
    .top-bar__item--home {
      background-color: #ffffff;
      padding-right: 30px; }
      .top-bar__item--home .top-bar__link {
        font-weight: bold;
        color: #E67408; }
        .top-bar__item--home .top-bar__link:hover {
          color: #3C3036; }
  .top-bar__link {
    color: #291720;
    font-size: 0.875rem;
    /* =14px */ }
    .top-bar__link-highlight {
      color: #E67408;
      font-weight: bold; }
    .top-bar__link .icon, .top-bar__link ul.list-arrow li, ul.list-arrow .top-bar__link li, .top-bar__link .list-widget ul li, .list-widget ul .top-bar__link li,
    .top-bar__link ul.list-icon li, ul.list-icon .top-bar__link li, .top-bar__link .modal__close, .top-bar__link .btn-dropdown__toggle, .top-bar__link .sub-menu-link a, .sub-menu-link .top-bar__link a, .top-bar__link .link-icon {
      opacity: .3;
      font-size: 1rem;
      /* =16px */ }
    .top-bar__item--active .top-bar__link {
      color: #E67408; }

.search-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  height: 4.375rem;
  /* =70px */
  border-bottom-left-radius: 4px;
  background-color: #1DAFC5;
  transition: all 0.2s cubic-bezier(0.57, 0.34, 0.61, 0.89);
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .search-bar {
      height: 3.125rem;
      /* =50px */ } }
  .search-bar.collapsed {
    width: 3.125rem;
    /* =50px */
    border-bottom-left-radius: 0; }
  .search-bar__wrapper {
    padding: 0 3.125rem;
    /* =0 50px */
    opacity: 1;
    transition: all .4s; }
    .search-bar.collapsed .search-bar__wrapper {
      opacity: 0;
      visibility: hidden;
      pointer-events: none; }
    .search-bar__wrapper form {
      margin: 0; }
  .search-bar__input[type="text"] {
    color: white;
    background: transparent;
    margin-top: 0.8125rem;
    /* =13px */
    padding-left: 0;
    border: 0;
    border-bottom: 1px solid white;
    padding-bottom: 0.25rem;
    /* =4px */
    box-shadow: none;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 1000px) {
      .search-bar__input[type="text"] {
        margin-top: 0.1875rem;
        /* =3px */ } }
    .search-bar__input[type="text"]:focus, .search-bar__input[type="text"]:active {
      border: 0;
      border-bottom: 1px solid white;
      box-shadow: none;
      background: none; }
    .search-bar__input[type="text"]::-webkit-input-placeholder {
      color: white; }
    .search-bar__input[type="text"] ::-moz-placeholder {
      color: white; }
    .search-bar__input[type="text"] :-ms-input-placeholder {
      color: white; }
    .search-bar__input[type="text"] :-moz-placeholder {
      color: white; }
  .search-bar__open, .search-bar__close {
    display: inline-block;
    user-select: none;
    cursor: pointer;
    border: 0;
    color: white;
    background: transparent;
    font-size: 1.5rem;
    /* =24px */
    height: 4.375rem;
    /* =70px */
    width: 3.125rem;
    /* =50px */
    padding: 0;
    outline: none;
    position: absolute;
    top: 0;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 1000px) {
      .search-bar__open, .search-bar__close {
        height: 3.125rem;
        /* =50px */
        width: 3.125rem;
        /* =50px */
        font-size: 1.125rem;
        /* =18px */ } }
  .search-bar__open {
    left: 0;
    z-index: 3;
    cursor: default; }
    .search-bar.collapsed .search-bar__open {
      cursor: pointer; }
  .search-bar__close {
    right: 0;
    z-index: 2;
    font-size: 0.875rem;
    /* =14px */ }

.mobile-menu--show .search-bar {
  background-color: #80356F; }

.menu-bar {
  display: none;
  position: relative;
  background: #80356F;
  float: right;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .menu-bar {
      display: block !important;
      background: transparent;
      margin-right: 0.9375rem;
      /* =15px */
      margin-top: 3.125rem;
      /* =50px */ } }
  @media (min-width: 1201px) {
    .menu-bar {
      margin-right: 3.125rem;
      /* =50px */ } }
  .nav-bar--mobile-show .menu-bar {
    display: block; }
  .menu-bar__item {
    width: 100%;
    padding: 0 0.9375rem;
    /* =0 15px */
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 1000px) {
      .menu-bar__item {
        float: left;
        width: auto;
        padding: 0 0.625rem;
        /* =0 10px */ }
        .menu-bar__item:hover > .menu-bar__sub {
          display: block; } }
    @media (min-width: 1201px) {
      .menu-bar__item {
        padding: 0 1.25rem;
        /* =0 20px */ } }
  .menu-bar__link {
    font-weight: 700;
    display: inline-block;
    color: white;
    padding: 1.25rem 0;
    /* =20px 0 */
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    .menu-bar__link:hover {
      color: white; }
    @media (min-width: 1000px) {
      .menu-bar__link:hover {
        color: #1DAFC5; }
        .menu-bar__link:hover .icon:before, .menu-bar__link:hover ul.list-arrow li:before, ul.list-arrow .menu-bar__link:hover li:before, .menu-bar__link:hover .list-widget ul li:before, .list-widget ul .menu-bar__link:hover li:before,
        .menu-bar__link:hover ul.list-icon li:before, ul.list-icon .menu-bar__link:hover li:before, .menu-bar__link:hover .modal__close:before, .menu-bar__link:hover .btn-dropdown__toggle:before, .menu-bar__link:hover .sub-menu-link a:before, .sub-menu-link .menu-bar__link:hover a:before, .menu-bar__link:hover .link-icon:before {
          transform: rotate(180deg);
          backface-visibility: hidden;
          transition: transform .2s; } }
    .menu-bar__link .icon, .menu-bar__link ul.list-arrow li, ul.list-arrow .menu-bar__link li, .menu-bar__link .list-widget ul li, .list-widget ul .menu-bar__link li,
    .menu-bar__link ul.list-icon li, ul.list-icon .menu-bar__link li, .menu-bar__link .modal__close, .menu-bar__link .btn-dropdown__toggle, .menu-bar__link .sub-menu-link a, .sub-menu-link .menu-bar__link a, .menu-bar__link .link-icon {
      color: #B1B1B1;
      margin-left: 0.3125rem;
      /* =5px */ }
    @media (min-width: 1000px) {
      .menu-bar__link {
        color: #80356F;
        padding: 1.375rem 0 1.4375rem;
        /* =22px 0 23px */ } }
    .menu-bar__item--active .menu-bar__link {
      color: #E67408; }
  .menu-bar__sub {
    display: none;
    background: white;
    width: 100%;
    padding: 1.875rem 1.25rem;
    /* =30px 20px */
    color: #3C3036;
    border: 3px solid #E67408;
    border-top: 0;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 1000px) {
      .menu-bar__sub {
        position: absolute;
        top: 100%;
        left: 0;
        padding: 1.875rem 2.5rem;
        /* =30px 40px */
        margin-top: -1px; } }
    .menu-bar__sub ul.list-arrow > li::before, .menu-bar__sub .list-widget ul > li::before, .list-widget .menu-bar__sub ul > li::before {
      color: #3C3036; }
    .menu-bar__sub ul.list-arrow > li a, .menu-bar__sub .list-widget ul > li a, .list-widget .menu-bar__sub ul > li a {
      color: #3C3036; }
    .menu-bar__sub ul.list-arrow > li:hover::before, .menu-bar__sub .list-widget ul > li:hover::before, .list-widget .menu-bar__sub ul > li:hover::before, .menu-bar__sub ul.list-arrow > li:hover a, .menu-bar__sub .list-widget ul > li:hover a, .list-widget .menu-bar__sub ul > li:hover a {
      color: #584750; }
    .menu-bar__sub ul.list-arrow > li:last-child, .menu-bar__sub .list-widget ul > li:last-child, .list-widget .menu-bar__sub ul > li:last-child {
      margin-bottom: 0; }
    .menu-bar__sub .btn + .btn {
      margin-top: 1.25rem;
      /* =20px */ }
    .menu-bar__sub .sub-menu-column-left ul.list-arrow.alt-lc > li:last-child, .menu-bar__sub .sub-menu-column-left .list-widget ul.alt-lc > li:last-child, .list-widget .menu-bar__sub .sub-menu-column-left ul.alt-lc > li:last-child {
      padding-left: 0;
      margin-top: 0.9375rem; }
      .menu-bar__sub .sub-menu-column-left ul.list-arrow.alt-lc > li:last-child::before, .menu-bar__sub .sub-menu-column-left .list-widget ul.alt-lc > li:last-child::before, .list-widget .menu-bar__sub .sub-menu-column-left ul.alt-lc > li:last-child::before {
        content: none; }
      .menu-bar__sub .sub-menu-column-left ul.list-arrow.alt-lc > li:last-child a, .menu-bar__sub .sub-menu-column-left .list-widget ul.alt-lc > li:last-child a, .list-widget .menu-bar__sub .sub-menu-column-left ul.alt-lc > li:last-child a {
        font-weight: 600; }
      .menu-bar__sub .sub-menu-column-left ul.list-arrow.alt-lc > li:last-child a, .menu-bar__sub .sub-menu-column-left .list-widget ul.alt-lc > li:last-child a, .list-widget .menu-bar__sub .sub-menu-column-left ul.alt-lc > li:last-child a, .menu-bar__sub .sub-menu-column-left ul.list-arrow.alt-lc > li:last-child::before, .menu-bar__sub .sub-menu-column-left .list-widget ul.alt-lc > li:last-child::before, .list-widget .menu-bar__sub .sub-menu-column-left ul.alt-lc > li:last-child::before {
        color: #80356F; }
      .menu-bar__sub .sub-menu-column-left ul.list-arrow.alt-lc > li:last-child:hover a, .menu-bar__sub .sub-menu-column-left .list-widget ul.alt-lc > li:last-child:hover a, .list-widget .menu-bar__sub .sub-menu-column-left ul.alt-lc > li:last-child:hover a, .menu-bar__sub .sub-menu-column-left ul.list-arrow.alt-lc > li:last-child:hover::before, .menu-bar__sub .sub-menu-column-left .list-widget ul.alt-lc > li:last-child:hover::before, .list-widget .menu-bar__sub .sub-menu-column-left ul.alt-lc > li:last-child:hover::before {
        color: #1DAFC5; }
    .menu-bar__sub .sub-menu-column-right {
      border-left: 1px solid #e8e8e8; }
      .menu-bar__sub .sub-menu-column-right ul.list-arrow.alt-lc > li:last-child, .menu-bar__sub .sub-menu-column-right .list-widget ul.alt-lc > li:last-child, .list-widget .menu-bar__sub .sub-menu-column-right ul.alt-lc > li:last-child {
        padding-left: 0;
        margin-top: 0.9375rem; }
        .menu-bar__sub .sub-menu-column-right ul.list-arrow.alt-lc > li:last-child::before, .menu-bar__sub .sub-menu-column-right .list-widget ul.alt-lc > li:last-child::before, .list-widget .menu-bar__sub .sub-menu-column-right ul.alt-lc > li:last-child::before {
          content: none; }
        .menu-bar__sub .sub-menu-column-right ul.list-arrow.alt-lc > li:last-child a, .menu-bar__sub .sub-menu-column-right .list-widget ul.alt-lc > li:last-child a, .list-widget .menu-bar__sub .sub-menu-column-right ul.alt-lc > li:last-child a {
          font-weight: 600; }
        .menu-bar__sub .sub-menu-column-right ul.list-arrow.alt-lc > li:last-child a, .menu-bar__sub .sub-menu-column-right .list-widget ul.alt-lc > li:last-child a, .list-widget .menu-bar__sub .sub-menu-column-right ul.alt-lc > li:last-child a, .menu-bar__sub .sub-menu-column-right ul.list-arrow.alt-lc > li:last-child::before, .menu-bar__sub .sub-menu-column-right .list-widget ul.alt-lc > li:last-child::before, .list-widget .menu-bar__sub .sub-menu-column-right ul.alt-lc > li:last-child::before {
          color: #80356F; }
        .menu-bar__sub .sub-menu-column-right ul.list-arrow.alt-lc > li:last-child:hover a, .menu-bar__sub .sub-menu-column-right .list-widget ul.alt-lc > li:last-child:hover a, .list-widget .menu-bar__sub .sub-menu-column-right ul.alt-lc > li:last-child:hover a, .menu-bar__sub .sub-menu-column-right ul.list-arrow.alt-lc > li:last-child:hover::before, .menu-bar__sub .sub-menu-column-right .list-widget ul.alt-lc > li:last-child:hover::before, .list-widget .menu-bar__sub .sub-menu-column-right ul.alt-lc > li:last-child:hover::before {
          color: #1DAFC5; }
    .menu-bar__sub .col-border-right {
      border-right: 1px solid #e8e8e8; }
  .menu-bar .menu-bar__item--specialist {
    position: relative; }
    .menu-bar .menu-bar__item--specialist .menu-bar__sub--specialist {
      position: absolute;
      width: 18.75rem;
      /* =300px */
      padding: 0.625rem 1.25rem;
      /* =10px 20px */ }
      .menu-bar .menu-bar__item--specialist .menu-bar__sub--specialist .sub-menu-column-left ul.list-arrow, .menu-bar .menu-bar__item--specialist .menu-bar__sub--specialist .sub-menu-column-left .list-widget ul, .list-widget .menu-bar .menu-bar__item--specialist .menu-bar__sub--specialist .sub-menu-column-left ul {
        margin-bottom: 0; }
    .menu-bar .menu-bar__item--specialist:last-child .menu-bar__sub--specialist {
      left: auto;
      right: 0; }

.sub-menu-title {
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 0.625rem; }

.sub-menu-text {
  font-size: 0.9375rem;
  margin: 0.625rem 0; }

.sub-menu-link a {
  display: inline-block;
  color: #3C3036;
  text-decoration: none;
  position: relative;
  padding-left: 0.75rem; }
  .sub-menu-link a, .sub-menu-link a::before {
    transition: color .2s ease; }
  .sub-menu-link a::before {
    color: #80356F;
    position: absolute;
    left: 0;
    top: 1px; }
  .sub-menu-link a:hover::before, .sub-menu-link a:hover {
    color: #1DAFC5; }

/* ==========================================================================
   Main Menu Settings
   ========================================================================== */
/* ==========================================================================
   Main Menu
   ========================================================================== */
.main-menu {
  background: white;
  height: 4.375rem;
  box-shadow: 0 0 8px 2px rgba(125, 125, 125, 0.25);
  z-index: 999;
  display: flex;
  justify-content: space-between;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .main-menu {
      height: 7.5rem; } }
  .main-menu__right {
    flex-shrink: 0; }

/* ==========================================================================
   Global Menu Items
   ========================================================================== */
.menu-item--submenu .menu-link {
  position: relative; }
  .menu-item--submenu .menu-link::after {
    margin-left: 10px;
    transform: rotate(0deg);
    backface-visibility: hidden;
    transition: transform .2s; }

.menu-item--submenu-open .menu-link::after {
  transform: rotate(180deg); }

.sub-menu {
  display: none; }
  .menu-item--submenu-open .sub-menu {
    display: block; }

/* ==========================================================================
   Logo
   ========================================================================== */
.logo.logo--mobile {
  display: none; }

.logo.logo--desktop {
  max-height: 3.5rem;
  padding-right: 10px;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .logo.logo--desktop {
      max-height: 5.9375rem;
      padding-right: 20px; } }
  @media (min-width: 1000px) and (max-width: 1200px) {
    .logo.logo--desktop {
      max-width: 264px; } }

.logo__link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  margin-left: 0.625rem;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1201px) {
    .logo__link {
      margin-left: 2.5rem; } }

/* ==========================================================================
   Mobile Menu Navigation / Buttons
   ========================================================================== */
.mobile-menu-navigation {
  float: right;
  margin-right: 3.75rem;
  position: relative;
  z-index: 9999;
  display: flex;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .mobile-menu-navigation {
      display: none; } }

.mobile-menu-button {
  float: left;
  display: block;
  height: 4.375rem;
  padding: 1.40625rem 0.8125rem;
  border: 0;
  background: transparent;
  color: #80356F;
  outline: none;
  transition: none; }
  .mobile-menu-button:hover {
    color: #80356F; }
  .mobile-menu--show .mobile-menu-button {
    color: white; }
  .mobile-menu-button.mobile-menu-button--open {
    display: block; }
    .mobile-menu--show .mobile-menu-button.mobile-menu-button--open {
      display: none; }
  .mobile-menu-button.mobile-menu-button--close {
    display: none; }
    .mobile-menu--show .mobile-menu-button.mobile-menu-button--close {
      display: block; }
  .mobile-menu-button .svg-icon {
    width: 1.5625rem;
    height: 1.5625rem; }

/* ==========================================================================
   Mobile Menu
   ========================================================================== */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  background: #80356F;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  transform: translate3d(0, -100%, 0);
  transition: all .2s;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  .mobile-menu--show .mobile-menu {
    transform: translate3d(0, 0, 0); }
  @media (min-width: 1000px) {
    .mobile-menu {
      display: none; } }
  .mobile-menu .sub-menu-link, .mobile-menu .sub-menu-link::before,
  .mobile-menu .sub-menu-link a,
  .mobile-menu .sub-menu-link a::before {
    color: white; }

.mobile-menu__nav {
  flex-grow: 1; }
  .mobile-menu__nav--scroll {
    margin-top: 4.375rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }

.mobile-menu__nav--bottom {
  background: white;
  padding: 0.625rem 0; }
  .mobile-menu__nav--bottom a {
    display: block;
    color: #3C3036;
    text-align: center;
    font-size: 0.75rem;
    margin: 0.625rem 0; }
    .mobile-menu__nav--bottom a::before {
      display: block;
      margin-bottom: 0.125rem;
      font-size: 1rem; }

.mobile-menu__nav-list .menu-item .menu-link {
  display: block;
  color: white;
  font-size: 1.25rem;
  padding: 1rem 2.5rem; }

.mobile-menu__nav-list .menu-item .sub-menu {
  padding: 0 2.5rem; }
  .mobile-menu__nav-list .menu-item .sub-menu .btn {
    font-size: 0.875rem;
    margin: 1.25rem 0;
    padding-left: 0.3125rem;
    padding-right: 0.3125rem; }
  .mobile-menu__nav-list .menu-item .sub-menu li:hover, .mobile-menu__nav-list .menu-item .sub-menu li:hover a {
    color: white; }
    .mobile-menu__nav-list .menu-item .sub-menu li:hover::before, .mobile-menu__nav-list .menu-item .sub-menu li:hover a::before {
      color: white; }

/* ==========================================================================
   Search Bar
   ========================================================================== */
.top-menu {
  background: #F7F7F7;
  float: right;
  display: none;
  padding: 0.625rem;
  height: 3.125rem;
  padding-right: 3.125rem;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .top-menu {
      display: block; } }

/* ==========================================================================
   Menu
   ========================================================================== */
.menu {
  width: 100%; }
  .menu.menu--fixed {
    position: fixed;
    top: 0;
    left: 0; }

/* Searcg
==========
*/
.search {
  display: block;
  background: white;
  box-shadow: 0px 4px 8px 0px rgba(69, 69, 69, 0.5);
  max-width: 90%;
  max-width: calc(100% - 40px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.3125rem;
  /* =5px */
  margin-bottom: 4.375rem;
  /* =70px */
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .search {
      max-width: 31.25rem;
      /* =500px */ } }
  .search__floating-label {
    padding: 0; }
  .search__submit {
    position: absolute;
    padding-left: 0;
    padding-right: 0;
    width: 3.125rem;
    /* =50px */
    top: 0.625rem;
    /* =10px */
    right: 0.625rem;
    /* =10px */
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  .search input {
    border-bottom: 0;
    background-color: transparent;
    font-weight: 400;
    padding: 2rem 10.625rem 0.5625rem 1.875rem;
    /* =32px 170px 9px 30px */
    font-size: 1.5rem;
    /* =24px */
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 1000px) {
      .search input {
        padding-right: 12.5rem;
        /* =200px */ } }
    .search input:focus, .search input:active, .search input.is-filled {
      border-bottom: 0; }
      .search input:focus + label, .search input:active + label, .search input.is-filled + label {
        color: #bbbbbb;
        top: 0.9375rem;
        /* =15px */
        font-size: 0.75rem;
        /* =12px */ }
    .search input + label {
      color: #bbbbbb;
      width: 60%;
      top: 1.5625rem;
      /* =25px */
      left: 1.875rem;
      /* =30px */ }

/* Block
==========
*/
.block {
  color: white; }
  .block--light {
    background-color: white; }
  .block--dark {
    background-color: black; }
  .block--alpha {
    background-color: #f6f6f6; }
  .block--beta {
    background-color: #E67408; }
  .block--gamma {
    background-color: #1DAFC5; }
  .block--delta {
    background-color: #80356F; }
  .block--epsilon {
    background-color: #ED3D6B; }
  .block--dota {
    background-color: #5DC637; }
  .block--jeta {
    background-color: #B1B1B1; }
  .block--kappa {
    background-color: #8DC63F; }
  .block * {
    color: white; }
  .block h5 {
    font-weight: 600; }
  .block a:hover {
    color: #d9d9d9; }
  .block__content {
    padding: 2.5rem 2.5rem 1.875rem; }
  .block p {
    -webkit-text-stroke: 0;
    font-weight: 400; }

/* Social text
==========
*/
.social-text {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 801px) {
    .social-text {
      display: flex; } }
  .social-text__content {
    margin-bottom: 1.25rem;
    /* =20px */
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 801px) {
      .social-text__content {
        margin-bottom: 0; } }
  .social-text__icons {
    min-width: 15rem;
    /* =240px */
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 801px) {
      .social-text__icons {
        text-align: right; } }

.social-share li {
  list-style: none;
  display: inline-block; }
  .social-share li a {
    display: inline-block;
    padding: 0.625rem 0.9375rem;
    margin: 0 0.625rem 0.625rem 0;
    border: 1px solid #CFCFCF;
    color: #3C3036;
    border-radius: 0.125rem; }
    .social-share li a:hover {
      color: white; }
      .social-share li a:hover span {
        color: white; }
    .social-share li a span {
      margin-right: 0.5rem;
      transition: all 0.2s ease; }

.social-share-facebook:hover {
  background: #3b5999; }

.social-share-facebook span {
  color: #3b5999; }

.social-share-twitter:hover {
  background: #00aced; }

.social-share-twitter span {
  color: #00aced; }

.social-share-linkedin:hover {
  background: #3776AE; }

.social-share-linkedin span {
  color: #3776AE; }

.social-share-mail:hover {
  background: #820263; }

.social-share-mail span {
  color: #820263; }

#event-detail-left .social-share {
  margin-left: 17%; }

/* Grid (flexbox)
==========
*/
.flexbox-grid-3 {
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin: -1.875rem -0.9375rem 3.75rem -0.9375rem;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .flexbox-grid-3 {
      flex-flow: wrap; } }
  .flexbox-grid-3 > * {
    margin: 1.875rem 0.9375rem 0 0.9375rem;
    max-width: 22.5rem; }

.flexbox-grid {
  display: flex;
  flex-wrap: wrap; }
  .flexbox-grid--top {
    align-items: flex-start; }
  .flexbox-grid--middle {
    align-items: center; }
  .flexbox-grid--bottom {
    align-items: flex-end; }
  .flexbox-grid--stretch {
    align-items: stretch; }
  .flexbox-grid--baseline {
    align-items: baseline; }
  .flexbox-grid--left {
    justify-content: flex-start; }
  .flexbox-grid--center {
    justify-content: center; }
  .flexbox-grid--right {
    justify-content: flex-end; }
  .flexbox-grid--between {
    justify-content: space-between; }
  .flexbox-grid--around {
    justify-content: space-around; }

[class|=flexbox-column] {
  flex-shrink: 0; }

.flexbox-column-fill {
  width: 0;
  min-width: 0;
  flex-grow: 1; }

.flexbox-column-1 {
  width: calc(100% * 1 / 12); }

.flexbox-column-2 {
  width: calc(100% * 2 / 12); }

.flexbox-column-3 {
  width: calc(100% * 3 / 12); }

.flexbox-column-4 {
  width: calc(100% * 4 / 12); }

.flexbox-column-5 {
  width: calc(100% * 5 / 12); }

.flexbox-column-6 {
  width: calc(100% * 6 / 12); }

.flexbox-column-7 {
  width: calc(100% * 7 / 12); }

.flexbox-column-8 {
  width: calc(100% * 8 / 12); }

.flexbox-column-9 {
  width: calc(100% * 9 / 12); }

.flexbox-column-10 {
  width: calc(100% * 10 / 12); }

.flexbox-column-11 {
  width: calc(100% * 11 / 12); }

.flexbox-column-12 {
  width: 100%; }

/*doc
---
title: Grid (flexbox)
name: grid_flexbox
category: Structure
---

You shouldn't use this grid for overall page layout, use the standard grid module in that case. In the future we can use the [CSS grids module](http://caniuse.com/#feat=css-grid) for overall layout, but it's not ready as of writing.

This is perfect for things as [nav bars](http://codepen.io/chriscoyier/pen/FAbpm).

## Simple

```html_example
<div class="flexbox-grid">
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
</div>
```

## Top

```html_example
<div class="flexbox-grid flexbox-grid--top" style="height: 200px;">
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
</div>
```

## Middle

```html_example
<div class="flexbox-grid flexbox-grid--middle" style="height: 200px;">
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
</div>
```

## Buttom

```html_example
<div class="flexbox-grid flexbox-grid--bottom" style="height: 200px;">
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
</div>
```

## Stretch

```html_example
<div class="flexbox-grid flexbox-grid--stretch" style="height: 200px;">
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
</div>
```

## Baseline

```html_example
<div class="flexbox-grid flexbox-grid--baseline" style="height: 200px;">
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
</div>
```

## Left

```html_example
<div class="flexbox-grid flexbox-grid--left">
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
</div>
```

## Center

```html_example
<div class="flexbox-grid flexbox-grid--center">
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
</div>
```

## Right

```html_example
<div class="flexbox-grid flexbox-grid--right">
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
</div>
```

## Space between

```html_example
<div class="flexbox-grid flexbox-grid--between">
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
</div>
```

## Space around

```html_example
<div class="flexbox-grid flexbox-grid--around">
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
	<div class="flexbox-column-3 card">
		<div class="card__content">Flexy</div>
	</div>
</div>
```

*/
.filter-dropdown__trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  @media screen and (min-width: 992px) {
    .filter-dropdown__trigger {
      pointer-events: none; }
      .filter-dropdown__trigger .icon, .filter-dropdown__trigger ul.list-arrow li, ul.list-arrow .filter-dropdown__trigger li, .filter-dropdown__trigger .list-widget ul li, .list-widget ul .filter-dropdown__trigger li,
      .filter-dropdown__trigger ul.list-icon li, ul.list-icon .filter-dropdown__trigger li, .filter-dropdown__trigger .modal__close, .filter-dropdown__trigger .btn-dropdown__toggle, .filter-dropdown__trigger .sub-menu-link a, .sub-menu-link .filter-dropdown__trigger a, .filter-dropdown__trigger .link-icon {
        display: none; } }
  @media screen and (max-width: 991px) {
    .filter-dropdown__trigger {
      font-size: 20px; } }

.filter-dropdown__content {
  display: none; }
  @media screen and (min-width: 992px) {
    .filter-dropdown__content {
      display: block; } }

.filter-dropdown__reset-link {
  color: #fff;
  text-decoration: underline; }
  .filter-dropdown__reset-link:hover {
    color: #fff;
    opacity: 0.8; }

.filter-dropdown-text {
  display: none; }
  @media screen and (min-width: 992px) {
    .filter-dropdown-text {
      display: block; } }

@media screen and (min-width: 992px) {
  .filter-dropdown-jobalert {
    background: #E67408;
    color: #fff !important; } }

.post p {
  font-size: 1.25rem;
  line-height: 1.875rem; }

.post li {
  font-size: 1.25rem;
  line-height: 1.875rem; }

.post .label {
  font-size: 0.75rem;
  color: #B1B1B1; }

.post__title {
  padding-top: 2.5rem;
  /* =40px */
  padding-bottom: 1.875rem;
  /* =30px */ }
  .post__title span.label {
    font-size: 1.125rem; }

.post__image {
  padding: 0;
  height: 0;
  padding-bottom: 47.9166666667%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .post__image {
      height: 20rem;
      padding-bottom: 0; } }
  .post__image-large {
    height: 0;
    padding-bottom: 47.9166666667%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 701px) {
      .post__image-large {
        height: 20rem;
        padding-bottom: 0; } }
    @media (min-width: 801px) {
      .post__image-large {
        height: 20rem;
        padding-bottom: 0; } }

.post__date-block {
  width: 5.625rem;
  height: 5.625rem;
  text-align: center;
  right: 1.875rem;
  bottom: -0.9375rem;
  background: #F7F7F7;
  position: absolute;
  border-radius: 0.25rem;
  border: 0.3125rem solid white;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 53, 0.5); }
  .post__date-block .day {
    font-size: 2rem;
    font-weight: 600;
    margin-top: 5px; }

.post__avatar {
  max-width: 8.75rem;
  max-height: 8.75rem;
  border-radius: 4px;
  border: 5px solid white;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 53, 0.5); }
  @media (max-width: 575px) {
    .post__avatar {
      margin-bottom: 1.25rem; } }
  .post__avatar img {
    width: 100%; }

.post__media {
  margin: 1.5625rem 0; }

.post__quote .quote-title {
  margin-top: 0rem;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column; }
  .post__quote .quote-title h3 {
    color: black;
    font-weight: bold;
    font-style: italic; }
  .post__quote .quote-title p {
    font-size: 0.875rem;
    margin-bottom: 0; }

.post__svg {
  display: none; }
  @media (min-width: 576px) {
    .post__svg {
      margin-top: 1.25rem; } }

.post__overview a {
  color: #3C3036; }
  .post__overview a:hover {
    color: #80356F; }

.post__overview .icon, .post__overview ul.list-arrow li, ul.list-arrow .post__overview li, .post__overview .list-widget ul li, .list-widget ul .post__overview li,
.post__overview ul.list-icon li, ul.list-icon .post__overview li, .post__overview .modal__close, .post__overview .btn-dropdown__toggle, .post__overview .sub-menu-link a, .sub-menu-link .post__overview a, .post__overview .link-icon {
  color: #80356F; }

.post.event-sidebar #event-detail-left .post-image--alpha,
.post.event-sidebar #event-detail-left .post-content--alpha {
  margin-left: 0;
  flex: 0 0 100%;
  max-width: 100%; }

.post.event-sidebar .post__overview {
  margin-left: 0; }

.post.event-sidebar .row:first-of-type .col-md-8.offset-md-2 {
  margin: 0;
  flex: 0 0 100%;
  max-width: 100%; }

.post:not(.event-sidebar) #event-detail-left {
  flex: 0 0 100%;
  max-width: 100%; }

.post:not(.event-sidebar) #event-detail-right {
  display: none; }

.post #event-detail-right .faq-widget .accordion__trigger {
  background: transparent;
  border-bottom: 0; }

.post #event-detail-right .faq-widget .accordion__content p {
  font-size: 16px;
  line-height: 24px; }

.post #event-detail-right .image-text p {
  font-size: 16px;
  line-height: 24px; }

.post #event-detail-right .links-widget ul li a {
  box-shadow: none;
  background: transparent;
  font-size: 18px; }
  .post #event-detail-right .links-widget ul li a:hover {
    color: #80356F; }

.post #event-detail-right .links-widget ul li:before {
  margin-top: 4px;
  margin-left: 8px; }

.card-column {
  margin-bottom: 1.875rem;
  padding-right: 15px;
  padding-left: 15px; }
  @media (min-width: 576px) {
    .card-column {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 768px) {
    .card-column {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 992px) {
    .card-column {
      padding-right: 15px;
      padding-left: 15px; } }
  @media (min-width: 1210px) {
    .card-column {
      padding-right: 15px;
      padding-left: 15px; } }
  .card-column .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0; }
    .card-column .card .card__content {
      display: flex;
      flex-direction: column;
      flex-grow: 1; }
      .card-column .card .card__content .card__body {
        flex-grow: 1; }

.cards-title {
  font-size: 1.25rem;
  font-weight: 300;
  margin-bottom: 1.875rem;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 701px) {
    .cards-title {
      font-size: 1.625rem; } }

.card {
  background: white;
  box-shadow: 0 4px 6px 0 rgba(218, 218, 218, 0.5);
  margin-bottom: 1.875rem; }
  .card.card--light .card__header {
    background: white; }
  .card.card--alpha .card__header {
    background: #f6f6f6; }
  .card.card--beta .card__header {
    background: #E67408; }
  .card.card--gamma .card__header {
    background: #1DAFC5; }
  .card.card--delta .card__header {
    background: #80356F; }
  .card.card--epsilon .card__header {
    background: #ED3D6B; }
  .card.card--kappa .card__header {
    background: #8DC63F; }
  .card.card--delta-dark .card__header {
    background: #561447; }
  .card.card--specialist-evenaar .card__header {
    background: #009005; }
  .card.card--specialist-evenaar-en .card__header {
    background: #009005; }
  .card.card--specialist-forensischepsychiatrie .card__header {
    background: #0a73a1; }
  .card.card--specialist-kinderenjeugdpsychiatrie .card__header {
    background: #0486D4; }
  .card.card--specialist-kjp .card__header {
    background: #0486D4; }
  .card.card--specialist-gezinspsychiatrie .card__header {
    background: #E46C0B; }
  .card.card--specialist-ouderenpsychiatrie .card__header {
    background: #614A7B; }
  .card.card--specialist-slaapcentrum .card__header {
    background: #EECC3B; }
  .card.card--specialist-cvbp .card__header {
    background: #398A41; }
  .card .card__header {
    background-color: #DCDCDC;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative; }
    .card .card__header-inner {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center; }
      .card .card__header-inner h4 {
        color: white;
        font-size: 24px;
        font-weight: 400;
        margin: 1.875rem 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        position: relative;
        z-index: 1; }
      .card .card__header-inner::before {
        background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
        content: '';
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        bottom: 0;
        z-index: 0; }
  .card .card__content {
    padding: 1.5625rem;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 701px) {
      .card .card__content {
        padding: 2.5rem 2.5rem 1.875rem; } }
  .card .card__body {
    color: #291720;
    font-weight: 300; }
    .card .card__body .pipe {
      display: inline-block;
      width: 0.0625rem;
      height: 0.625rem;
      background: #B1B1B1;
      margin: 0.125rem 0.625rem; }
    .card .card__body h5 {
      font-size: 1.25rem;
      font-weight: 400; }
    .card .card__body .label {
      color: #8c8c8c;
      font-size: 1rem; }
    .card .card__body p {
      font-size: 1rem;
      margin: 0.625rem 0; }
    .card .card__body .icon--mobile:before {
      font-size: 30px;
      margin-left: 5px;
      margin-right: 15px; }
    .card .card__body dl:after {
      content: "";
      display: table;
      clear: both; }
    .card .card__body dl a {
      color: #10A4E5;
      text-decoration: none; }
    .card .card__body dl dt, .card .card__body dl dd {
      float: left;
      margin: 0;
      padding: 0.3125rem 0; }
    .card .card__body dl dt {
      width: 50%; }
    .card .card__body dl dd {
      width: 50%;
      font-weight: 400; }
    .card .card__body--medium p {
      font-size: 18px; }
  .card .card__footer a.icon, .card .card__footer a.modal__close, .card .card__footer a.btn-dropdown__toggle, .card .card__footer .sub-menu-link a, .sub-menu-link .card .card__footer a, .card .card__footer a.link-icon, .card .card__footer a.icon::before, .card .card__footer a.modal__close::before, .card .card__footer a.btn-dropdown__toggle::before, .card .card__footer .sub-menu-link a::before, .sub-menu-link .card .card__footer a::before, .card .card__footer a.link-icon::before {
    transition: color .2s ease; }
  .card .card__footer a.icon, .card .card__footer a.modal__close, .card .card__footer a.btn-dropdown__toggle, .card .card__footer .sub-menu-link a, .sub-menu-link .card .card__footer a, .card .card__footer a.link-icon {
    color: #3C3036; }
  .card .card__footer a.icon::before, .card .card__footer a.modal__close::before, .card .card__footer a.btn-dropdown__toggle::before, .card .card__footer .sub-menu-link a::before, .sub-menu-link .card .card__footer a::before, .card .card__footer a.link-icon::before {
    color: #80356F; }
  .card .card__footer a.icon:hover, .card .card__footer a.modal__close:hover, .card .card__footer a.btn-dropdown__toggle:hover, .card .card__footer .sub-menu-link a:hover, .sub-menu-link .card .card__footer a:hover, .card .card__footer a.link-icon:hover, .card .card__footer a.icon:hover::before, .card .card__footer a.modal__close:hover::before, .card .card__footer a.btn-dropdown__toggle:hover::before, .card .card__footer .sub-menu-link a:hover::before, .sub-menu-link .card .card__footer a:hover::before, .card .card__footer a.link-icon:hover::before {
    color: #1DAFC5; }
  .card .card__footer .btn {
    margin: 0; }
  .card .card__footer.card__footer--flex {
    display: flex;
    justify-content: flex-start; }
    .card .card__footer.card__footer--flex .btn--location-route {
      flex-grow: 1; }
    .card .card__footer.card__footer--flex .btn--location-email {
      width: 2.5rem;
      padding-left: 0;
      padding-right: 0;
      margin-left: 0.625rem; }
  .card .card__footer.card__footer--flex-vertical {
    flex-direction: column; }
    .card .card__footer.card__footer--flex-vertical .btn {
      padding-left: 1.25rem;
      padding-right: 1.25rem; }
  .card .card__footer--2-btn .btn {
    padding: 10px 0; }
    .card .card__footer--2-btn .btn:first-child {
      width: 47%; }
    .card .card__footer--2-btn .btn:last-child {
      float: right;
      width: 47%;
      margin-left: 6%; }
  .card .card__avatar, .card .card__date {
    border-radius: 0.25rem;
    border: 5px solid white;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 53, 0.5);
    position: absolute;
    right: 20px;
    bottom: -15px;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 701px) {
      .card .card__avatar, .card .card__date {
        right: 40px;
        bottom: -30px; } }
  .card .card__avatar {
    width: 7.5rem;
    height: 7.5rem; }
    .card .card__avatar img {
      width: 100%; }
  .card .card__date {
    width: 5.625rem;
    height: 5.625rem;
    background: #F7F7F7;
    padding: 0.625rem;
    text-align: center; }
    .card .card__date-day, .card .card__date-month {
      display: block;
      line-height: 1; }
    .card .card__date-day {
      font-size: 2rem;
      font-weight: 600;
      margin-top: 0.3125rem; }
    .card .card__date-month {
      font-size: 1rem;
      font-weight: 400; }
  .card .card__info {
    margin-top: 1.25rem;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 801px) {
      .card .card__info {
        display: flex; } }
    .card .card__info h4, .card .card__info p, .card .card__info .btn {
      margin: 0; }
    .card .card__info .card__info__content {
      /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
      @media (min-width: 801px) {
        .card .card__info .card__info__content {
          flex-grow: 1;
          margin-right: 1.25rem; } }
    .card .card__info .card__info__download {
      display: flex;
      margin-top: 0.625rem;
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-start;
      /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
      @media (min-width: 801px) {
        .card .card__info .card__info__download {
          margin-top: 0;
          align-items: flex-end; } }
      .card .card__info .card__info__download .card__info__btn {
        width: 100%; }
        .touchevents .card .card__info .card__info__download .card__info__btn {
          display: none; }
    .card .card__info .card__info__time {
      display: inline-block;
      background-color: #f6f6f6;
      color: #4e4e4e;
      margin-bottom: 0.75rem;
      font-size: 0.75rem;
      padding: 0.125rem 0.3125rem;
      border-radius: 0.1875rem;
      white-space: nowrap; }
      .card .card__info .card__info__time::before {
        margin-right: 0.3125rem; }
  .card.card--xsmall .card__header {
    height: 8.75rem; }
    .card.card--xsmall .card__header h2 {
      font-size: 2rem;
      color: white;
      padding-left: 1.875rem; }
  .card.card--xsmall .card__content {
    padding-bottom: 0; }
  .card.card--small .card__content {
    padding: 20px; }
  .card.card--small .card__footer {
    text-align: center; }
  .card .card__header, .card.card--medium .card__header {
    height: 11.25rem; }
  .card .card__body h5, .card.card--medium .card__body h5 {
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0 0 0.625rem;
    color: #291720; }
  .card .card__body p, .card.card--medium .card__body p {
    line-height: 1.625rem; }
  .card.card--large .card__header {
    height: 12.5rem; }
  .card.card--xlarge .card__header {
    height: 13.75rem; }
  .card.card--xlarge .card__body h5 {
    font-size: 1.125rem;
    margin-bottom: 0;
    color: #820263; }
  .card.card--no-shadow {
    box-shadow: 0 0 0 0; }
  .card.card--ggz .card__body h4 {
    font-size: 1.5rem;
    color: #E67408; }
  .card.card--ggz .card__footer a.icon::before, .card.card--ggz .card__footer a.modal__close::before, .card.card--ggz .card__footer a.btn-dropdown__toggle::before, .card.card--ggz .card__footer .sub-menu-link a::before, .sub-menu-link .card.card--ggz .card__footer a::before, .card.card--ggz .card__footer a.link-icon::before, .card.card--ggz .card__footer a.icon:hover, .card.card--ggz .card__footer a.modal__close:hover, .card.card--ggz .card__footer a.btn-dropdown__toggle:hover, .card.card--ggz .card__footer .sub-menu-link a:hover, .sub-menu-link .card.card--ggz .card__footer a:hover, .card.card--ggz .card__footer a.link-icon:hover {
    color: #E67408; }
  .card.card--treatments .card__body h4 {
    font-size: 1.5rem;
    color: #80356F; }
  .card.card--exercise {
    display: flex;
    flex: 1; }
    .card.card--exercise .card__body {
      display: flex;
      flex-direction: column; }
    .card.card--exercise .card__content {
      padding: 1.25rem; }
    .card.card--exercise .card__info {
      flex-direction: column;
      display: flex;
      flex: 1; }
      .card.card--exercise .card__info__content {
        margin-bottom: 20px;
        flex: 1; }

/* Card Table */
.tile-grid {
  max-width: 1180px;
  margin: 0 auto; }

.tile {
  display: block;
  background-color: #F8F8F8;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 801px) {
    .tile {
      float: left; } }
  .tile:hover .tile__content {
    transform: translate3d(0, 0, 0); }
    .tile:hover .tile__content .btn {
      opacity: 1; }
  .tile:hover.tile--beta .triangle {
    border-color: transparent transparent white transparent; }
  .tile:hover.tile--beta .triangle__content {
    color: #E67408; }
  .tile:hover.tile--delta .triangle {
    border-color: transparent transparent white transparent; }
  .tile:hover.tile--delta .triangle__content {
    color: #80356F; }
  .tile--darken::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.35);
    content: ''; }
  .tile .tile__content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
    padding: 0 3.75rem 1.25rem 1.5625rem;
    transition: transform .3s;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 801px) {
      .tile .tile__content {
        padding: 0 3.75rem 0.625rem 2.5rem;
        transform: translate3d(0, 40px, 0); } }
    @media (min-width: 801px) and (max-width: 999px) {
      .tile .tile__content {
        padding: 0 0.9375rem 0.625rem 0.9375rem; } }
    @media (min-width: 1201px) {
      .tile .tile__content {
        padding: 0 3.75rem 1.25rem 2.5rem; } }
    .tile .tile__content .svg-icon {
      color: white;
      margin-bottom: 0.625rem; }
      .tile .tile__content .svg-icon--message-bubble, .tile .tile__content .svg-icon--quote {
        width: 2rem;
        height: 2rem;
        /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
        /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
        @media (min-width: 801px) {
          .tile .tile__content .svg-icon--message-bubble, .tile .tile__content .svg-icon--quote {
            width: 2.5rem;
            height: 2.5rem; } }
        @media (min-width: 801px) and (max-width: 999px) {
          .tile .tile__content .svg-icon--message-bubble, .tile .tile__content .svg-icon--quote {
            width: 1.25rem;
            height: 1.25rem; } }
      .tile .tile__content .svg-icon--soundcloud {
        width: 2.8125rem;
        height: 1.5625rem;
        /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
        @media (min-width: 801px) {
          .tile .tile__content .svg-icon--soundcloud {
            width: 3.375rem;
            height: 1.875rem; } }
      .tile .tile__content .svg-icon--selftest {
        width: 2.1875rem;
        width: 2.25rem;
        /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
        /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
        @media (min-width: 801px) {
          .tile .tile__content .svg-icon--selftest {
            width: 2.5rem;
            height: 2.5625rem; } }
        @media (min-width: 801px) and (max-width: 999px) {
          .tile .tile__content .svg-icon--selftest {
            width: 1.25rem;
            height: 1.25rem; } }
    .tile .tile__content h3 {
      color: white;
      font-size: 1.25rem;
      margin-bottom: 0.625rem;
      /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
      @media (min-width: 801px) {
        .tile .tile__content h3 {
          font-size: 1.5rem; } }
    .tile .tile__content .btn {
      margin: 0;
      transition: opacity .3s;
      /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
      @media (min-width: 801px) {
        .tile .tile__content .btn {
          opacity: 0; } }
  .tile.tile--small {
    height: 12.5rem;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 801px) {
      .tile.tile--small {
        width: 40%;
        height: auto;
        padding-bottom: 16.85%; } }
    .tile.tile--small .tile__content h3 {
      font-size: 1.125rem;
      line-height: 1.25rem;
      margin-bottom: 0.9375rem;
      /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
      /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/
      /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
      @media (min-width: 801px) and (max-width: 999px) {
        .tile.tile--small .tile__content h3 {
          font-size: 1rem;
          line-height: 1.0625rem;
          margin-bottom: 0.625rem; } }
      @media (min-width: 1000px) {
        .tile.tile--small .tile__content h3 {
          font-size: 1.25rem; } }
      @media (min-width: 1201px) {
        .tile.tile--small .tile__content h3 {
          font-size: 1.375rem;
          line-height: 1.5rem; } }
  .tile.tile--large {
    display: table;
    width: 100%;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 801px) {
      .tile.tile--large {
        width: 60%; } }
    .tile.tile--large .tile__content {
      transform: translate3d(0, 0, 0);
      transform: translateY(50%);
      padding-top: 0;
      padding-bottom: 50%;
      display: table-cell;
      vertical-align: middle; }
      @media screen and (min-width: 801px) {
        .tile.tile--large .tile__content h3 {
          max-width: 80%; } }
      .tile.tile--large .tile__content .btn {
        opacity: 1; }
  .tile-video {
    pointer-events: auto;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center center; }
    .tile-video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  .tile.tile--beta::before {
    content: ''; }
  .tile.tile--beta .triangle {
    border-color: transparent transparent #E67408 transparent; }
  .tile.tile--delta .triangle {
    border-color: transparent transparent #80356F transparent; }

.link-icon {
  display: inline-block;
  color: #80356F !important; }
  .link-icon:before {
    color: white !important;
    background-color: #80356F;
    margin-right: 5px; }
  .link-icon:hover {
    color: #5c2650 !important; }
    .link-icon:hover:before {
      background-color: #5c2650; }
  .link-icon--circled:before {
    aspect-ratio: 1;
    height: 24px;
    width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; }
  .link-icon--light {
    color: #ffffff !important; }
    .link-icon--light:before {
      background-color: #ffffff; }
    .link-icon--light:hover {
      color: #e6e5e5 !important; }
      .link-icon--light:hover:before {
        background-color: #e6e5e5; }
  .link-icon--dark {
    color: #000000 !important; }
    .link-icon--dark:before {
      background-color: #000000; }
    .link-icon--dark:hover {
      color: black !important; }
      .link-icon--dark:hover:before {
        background-color: black; }
  .link-icon--body {
    color: #f6f6f6 !important; }
    .link-icon--body:before {
      background-color: #f6f6f6; }
    .link-icon--body:hover {
      color: #dddcdc !important; }
      .link-icon--body:hover:before {
        background-color: #dddcdc; }
  .link-icon--text {
    color: #3C3036 !important; }
    .link-icon--text:before {
      background-color: #3C3036; }
    .link-icon--text:hover {
      color: #20191d !important; }
      .link-icon--text:hover:before {
        background-color: #20191d; }
  .link-icon--placeholder {
    color: #94adc4 !important; }
    .link-icon--placeholder:before {
      background-color: #94adc4; }
    .link-icon--placeholder:hover {
      color: #7394b2 !important; }
      .link-icon--placeholder:hover:before {
        background-color: #7394b2; }
  .link-icon--selection {
    color: #d1e4fe !important; }
    .link-icon--selection:before {
      background-color: #d1e4fe; }
    .link-icon--selection:hover {
      color: #9fc7fd !important; }
      .link-icon--selection:hover:before {
        background-color: #9fc7fd; }
  .link-icon--alpha {
    color: #f6f6f6 !important; }
    .link-icon--alpha:before {
      background-color: #f6f6f6; }
    .link-icon--alpha:hover {
      color: #dddcdc !important; }
      .link-icon--alpha:hover:before {
        background-color: #dddcdc; }
  .link-icon--beta {
    color: #E67408 !important; }
    .link-icon--beta:before {
      background-color: #E67408; }
    .link-icon--beta:hover {
      color: #b55b06 !important; }
      .link-icon--beta:hover:before {
        background-color: #b55b06; }
  .link-icon--beta-dark {
    color: #BC5B00 !important; }
    .link-icon--beta-dark:before {
      background-color: #BC5B00; }
    .link-icon--beta-dark:hover {
      color: #894200 !important; }
      .link-icon--beta-dark:hover:before {
        background-color: #894200; }
  .link-icon--gamma {
    color: #1DAFC5 !important; }
    .link-icon--gamma:before {
      background-color: #1DAFC5; }
    .link-icon--gamma:hover {
      color: #168899 !important; }
      .link-icon--gamma:hover:before {
        background-color: #168899; }
  .link-icon--delta {
    color: #80356F !important; }
    .link-icon--delta:before {
      background-color: #80356F; }
    .link-icon--delta:hover {
      color: #5c2650 !important; }
      .link-icon--delta:hover:before {
        background-color: #5c2650; }
  .link-icon--delta-dark {
    color: #561447 !important; }
    .link-icon--delta-dark:before {
      background-color: #561447; }
    .link-icon--delta-dark:hover {
      color: #2d0a25 !important; }
      .link-icon--delta-dark:hover:before {
        background-color: #2d0a25; }
  .link-icon--epsilon {
    color: #ED3D6B !important; }
    .link-icon--epsilon:before {
      background-color: #ED3D6B; }
    .link-icon--epsilon:hover {
      color: #e2154b !important; }
      .link-icon--epsilon:hover:before {
        background-color: #e2154b; }
  .link-icon--zeta {
    color: #291720 !important; }
    .link-icon--zeta:before {
      background-color: #291720; }
    .link-icon--zeta:hover {
      color: #080507 !important; }
      .link-icon--zeta:hover:before {
        background-color: #080507; }
  .link-icon--jeta {
    color: #B1B1B1 !important; }
    .link-icon--jeta:before {
      background-color: #B1B1B1; }
    .link-icon--jeta:hover {
      color: #989797 !important; }
      .link-icon--jeta:hover:before {
        background-color: #989797; }
  .link-icon--dota {
    color: #5DC637 !important; }
    .link-icon--dota:before {
      background-color: #5DC637; }
    .link-icon--dota:hover {
      color: #4a9e2c !important; }
      .link-icon--dota:hover:before {
        background-color: #4a9e2c; }
  .link-icon--iota {
    color: #575757 !important; }
    .link-icon--iota:before {
      background-color: #575757; }
    .link-icon--iota:hover {
      color: #3e3d3d !important; }
      .link-icon--iota:hover:before {
        background-color: #3e3d3d; }
  .link-icon--kappa {
    color: #8DC63F !important; }
    .link-icon--kappa:before {
      background-color: #8DC63F; }
    .link-icon--kappa:hover {
      color: #72a230 !important; }
      .link-icon--kappa:hover:before {
        background-color: #72a230; }
  .link-icon--lambda {
    color: #848484 !important; }
    .link-icon--lambda:before {
      background-color: #848484; }
    .link-icon--lambda:hover {
      color: #6b6a6a !important; }
      .link-icon--lambda:hover:before {
        background-color: #6b6a6a; }
  .link-icon--specialist-evenaar {
    color: #009005 !important; }
    .link-icon--specialist-evenaar:before {
      background-color: #009005; }
    .link-icon--specialist-evenaar:hover {
      color: #005d03 !important; }
      .link-icon--specialist-evenaar:hover:before {
        background-color: #005d03; }
  .link-icon--specialist-evenaar-en {
    color: #009005 !important; }
    .link-icon--specialist-evenaar-en:before {
      background-color: #009005; }
    .link-icon--specialist-evenaar-en:hover {
      color: #005d03 !important; }
      .link-icon--specialist-evenaar-en:hover:before {
        background-color: #005d03; }
  .link-icon--specialist-forensischepsychiatrie {
    color: #0a73a1 !important; }
    .link-icon--specialist-forensischepsychiatrie:before {
      background-color: #0a73a1; }
    .link-icon--specialist-forensischepsychiatrie:hover {
      color: #075171 !important; }
      .link-icon--specialist-forensischepsychiatrie:hover:before {
        background-color: #075171; }
  .link-icon--specialist-kinderenjeugdpsychiatrie {
    color: #0486D4 !important; }
    .link-icon--specialist-kinderenjeugdpsychiatrie:before {
      background-color: #0486D4; }
    .link-icon--specialist-kinderenjeugdpsychiatrie:hover {
      color: #0366a2 !important; }
      .link-icon--specialist-kinderenjeugdpsychiatrie:hover:before {
        background-color: #0366a2; }
  .link-icon--specialist-kjp {
    color: #0486D4 !important; }
    .link-icon--specialist-kjp:before {
      background-color: #0486D4; }
    .link-icon--specialist-kjp:hover {
      color: #0366a2 !important; }
      .link-icon--specialist-kjp:hover:before {
        background-color: #0366a2; }
  .link-icon--specialist-gezinspsychiatrie {
    color: #E46C0B !important; }
    .link-icon--specialist-gezinspsychiatrie:before {
      background-color: #E46C0B; }
    .link-icon--specialist-gezinspsychiatrie:hover {
      color: #b35509 !important; }
      .link-icon--specialist-gezinspsychiatrie:hover:before {
        background-color: #b35509; }
  .link-icon--specialist-ouderenpsychiatrie {
    color: #614A7B !important; }
    .link-icon--specialist-ouderenpsychiatrie:before {
      background-color: #614A7B; }
    .link-icon--specialist-ouderenpsychiatrie:hover {
      color: #48375b !important; }
      .link-icon--specialist-ouderenpsychiatrie:hover:before {
        background-color: #48375b; }
  .link-icon--specialist-slaapcentrum {
    color: #EECC3B !important; }
    .link-icon--specialist-slaapcentrum:before {
      background-color: #EECC3B; }
    .link-icon--specialist-slaapcentrum:hover {
      color: #e2bb14 !important; }
      .link-icon--specialist-slaapcentrum:hover:before {
        background-color: #e2bb14; }
  .link-icon--specialist-cvbp {
    color: #398A41 !important; }
    .link-icon--specialist-cvbp:before {
      background-color: #398A41; }
    .link-icon--specialist-cvbp:hover {
      color: #2a6630 !important; }
      .link-icon--specialist-cvbp:hover:before {
        background-color: #2a6630; }

/**
 *
 * HTML exmaple
 *
 */
.c-therapists__row {
  border-bottom: 2px solid #f6f6f6;
  margin-bottom: 24px;
  padding-bottom: 24px; }

/**
 *
 * In sidebar
 *
 */
.o-sidebar .c-therapists img {
  border-radius: 50%; }

.triangle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 60px 60px;
  border-color: transparent transparent #10A4E4 transparent;
  transition: all .3s; }

.triangle__content {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3.75rem;
  height: 3.75rem;
  white-space: nowrap;
  padding-top: 1.875rem;
  padding-left: 1.875rem;
  color: white;
  transition: all .3s; }
  .triangle__content .svg-icon {
    width: 1.1875rem;
    height: 0.75rem; }

.list .dropdown--trigger {
  cursor: pointer; }

@media (min-width: 576px) {
  .list--header .dropdown--trigger {
    cursor: default; } }

@media (min-width: 576px) {
  .list--header .icon--dropdown {
    display: none; } }

.list--header .dropdown--content {
  display: none; }
  @media (min-width: 576px) {
    .list--header .dropdown--content {
      display: block !important; } }

@media (min-width: 576px) {
  .list--header li {
    width: 50%;
    float: left; } }

@media (min-width: 992px) {
  .list--header li {
    width: 100%; } }

.list--absolute {
  position: relative;
  background: white;
  border-radius: 0.25rem;
  max-width: 100%;
  margin-top: 0.5rem; }
  @media (min-width: 576px) {
    .list--absolute {
      max-width: 16.25rem; } }
  .list--absolute__title {
    padding: 0.75rem;
    margin: 0; }
  .list--absolute .icon--dropdown {
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    border-left: 1px solid #f6f6f6;
    padding-top: 0.5rem;
    height: 100%;
    width: 2.8125rem;
    font-size: 1.375rem; }
  .list--absolute .dropdown--content {
    position: absolute;
    display: none;
    padding: 0.9375rem;
    margin-top: -0.25rem;
    border-top: 1px solid #f6f6f6;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: white;
    z-index: 99;
    width: 100%;
    box-shadow: 0px 4px 6px 0px rgba(218, 218, 218, 0.5); }
    .list--absolute .dropdown--content li a {
      color: #80356F;
      display: block; }
    .list--absolute .dropdown--content li:hover::before, .list--absolute .dropdown--content li:hover a {
      color: #1DAFC5;
      transition: all 0.2s; }
  .list--absolute--grey {
    background: #f6f6f6; }
    .list--absolute--grey .dropdown--content {
      background: #f6f6f6; }

/* ==========================================================================
   Selftest CSS
   ========================================================================== */
.selftest .step, .selftest .stepbuttons {
  display: none; }
  .selftest .step .btn, .selftest .stepbuttons .btn {
    width: 100%;
    margin: 0.5rem 0;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 701px) {
      .selftest .step .btn, .selftest .stepbuttons .btn {
        width: auto; }
        .selftest .step .btn + .btn, .selftest .stepbuttons .btn + .btn {
          margin-left: 1.25rem; } }
  .selftest .step .svg-icon, .selftest .stepbuttons .svg-icon {
    width: 0.625rem;
    height: 0.75rem;
    color: white; }
    .selftest .step .svg-icon.svg-icon--play, .selftest .stepbuttons .svg-icon.svg-icon--play {
      position: relative;
      top: -1px;
      margin-right: 0.625rem; }

.page .selftest ul li, .news-archive .selftest ul li {
  padding-left: 0; }
  .page .selftest ul li::before, .news-archive .selftest ul li::before {
    content: none; }

.selftest h4 {
  color: #80356F; }

.selftest .content {
  display: block;
  margin: 1.25rem 0; }

.selftest .breadcrumbs {
  padding-left: 300px; }

.selftest input[type='radio'] + label {
  padding-left: 3.125rem;
  line-height: 32px;
  display: inline-block; }
  .selftest input[type='radio'] + label::before {
    width: 2rem;
    height: 2rem; }
  .selftest input[type='radio'] + label::after {
    background: #1DAFC5;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    top: 3px;
    left: 4px; }

.selftest.selftest-depressie input[type='radio'] + label {
  margin-bottom: 1.25rem; }

.selftest.selftest-werkstress input[type='radio'] + label {
  margin-bottom: 0.625rem; }

.progress-bar {
  width: 100%;
  background: #80356F;
  margin-bottom: 3.125rem; }
  .progress-bar, .progress-bar .progress {
    display: block;
    height: 0.625rem; }
  .progress-bar .progress {
    background: #E67408;
    width: 10%; }

.roadmap-icon h2, .roadmap-icon h4 {
  font-weight: bold; }

.roadmap-icon h4 {
  white-space: nowrap;
  font-size: 16px; }

.roadmap-icon__inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between; }
  @media screen and (max-width: 1000px) {
    .roadmap-icon__inner {
      justify-content: center;
      flex-wrap: wrap; } }

.roadmap-icon__item {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  padding: 15px;
  flex-grow: 1;
  flex-basis: 0; }
  .roadmap-icon__item:hover {
    opacity: 0.8; }
  .roadmap-icon__item:after {
    content: '\e80c';
    font-family: 'icons', 'arial', 'verdana';
    position: absolute;
    right: 0;
    font-size: 28px;
    color: #B1B1B1; }
  .roadmap-icon__item:last-child:after {
    display: none; }
  .roadmap-icon__item img {
    height: 40px; }
  @media screen and (max-width: 1000px) {
    .roadmap-icon__item {
      flex: 0 0 25%;
      max-width: 25%; } }
  @media screen and (max-width: 600px) {
    .roadmap-icon__item {
      flex: 0 0 50%;
      max-width: 50%; } }

.roadmap-icon__image {
  flex-grow: 1;
  align-items: center;
  display: flex;
  margin-bottom: 10px; }

.roadmap-icon__buttons {
  margin-top: 20px; }
  .roadmap-icon__buttons .btn {
    margin: 15px; }

.video {
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 6px 0 rgba(218, 218, 218, 0.5); }
  .video .video__description {
    padding: 1.375rem 1.5625rem;
    background: white; }
    .video .video__description, .video .video__description p {
      margin: 0; }

html.video {
  margin: inherit;
  box-shadow: inherit; }

.video-flex {
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .video-flex .row {
      height: 100%; }
    .video-flex__cards {
      height: 100%; }
      .video-flex__cards .card-column {
        height: 46%;
        margin-bottom: 6%; } }

.news-archive {
  padding: 4.375rem 2.5rem; }
  .news-archive h4 {
    font-weight: 600;
    margin-bottom: 1.25rem;
    /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
    @media (min-width: 1000px) {
      .news-archive h4 {
        margin-bottom: 3.75rem; } }

.news-archive__list li a {
  display: inline-block;
  padding-left: 2.1875rem;
  position: relative;
  margin-bottom: 1.25rem; }
  .news-archive__list li a::before {
    content: '\e82a';
    position: absolute;
    top: -3px;
    left: 0;
    color: #7F7F7F; }

.news-archive__list li h5 {
  margin: 0;
  font-weight: 400;
  color: #80356F;
  line-height: 1; }

.news-archive__list li time {
  color: #291720;
  font-weight: 300;
  font-size: 0.75rem; }

.quote-component {
  overflow: hidden;
  margin-bottom: 30px; }
  .quote-component__image {
    float: left; }
    @media (max-width: 575px) {
      .quote-component__image {
        text-align: center;
        width: 100%; } }
  .quote-component__background {
    width: 8.75rem;
    height: 8.75rem;
    border: 5px solid white;
    border-radius: 4px;
    margin: 1.25rem;
    display: inline-block;
    box-shadow: 0 2px 20px 0 rgba(135, 135, 135, 0.5); }
  .quote-component__text {
    padding: 0.9375rem 0 0.3125rem 11.25rem;
    min-height: 11.25rem; }
    .quote-component__text h4 {
      font-style: italic; }
  .quote-component__svg {
    margin: 0.625rem 0; }
  .quote-component--right .quote-component__image {
    float: right; }
  .quote-component--right .quote-component__text {
    padding: 0.9375rem 11.25rem 0 0.3125rem; }
  @media (max-width: 575px) {
    .quote-component__text {
      padding: 0 !important; } }
  .quote-component__text .icon, .quote-component__text ul.list-arrow li, ul.list-arrow .quote-component__text li, .quote-component__text .list-widget ul li, .list-widget ul .quote-component__text li,
  .quote-component__text ul.list-icon li, ul.list-icon .quote-component__text li, .quote-component__text .modal__close, .quote-component__text .btn-dropdown__toggle, .quote-component__text .sub-menu-link a, .sub-menu-link .quote-component__text a, .quote-component__text .link-icon {
    position: relative;
    top: 1px; }

/* ==========================================================================
   Global Widget Settings
   ========================================================================== */
.main-sidebar > h4 {
  font-weight: 600; }

.widget {
  margin-bottom: 2.5rem; }
  .widget ul {
    margin: 0.9375rem 0; }
  .widget > h4 {
    font-weight: 600; }

/* ==========================================================================
   Widgets
   ========================================================================== */
.locations-widget ul li {
  position: relative;
  margin-bottom: 0.625rem; }
  .locations-widget ul li a {
    display: inline-block;
    background-color: #F6F6F6;
    padding: 0.625rem; }
  .locations-widget ul li h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.3125rem 0;
    font-size: 1.125rem; }
  .locations-widget ul li p {
    margin: 0;
    line-height: 1;
    color: #3C3036;
    font-size: 0.75rem; }
  .locations-widget ul li img {
    width: 100%; }
  .locations-widget ul li .locations-widget__image, .locations-widget ul li .locations-widget__location {
    max-width: 320px; }

.locations-widget__location h4 {
  font-weight: 400; }

.tags-widget .tag {
  display: inline-block;
  background-color: #1DAFC5;
  color: white;
  font-weight: 600;
  border-radius: 5px;
  font-size: 1rem;
  line-height: 20px;
  padding: 0.5rem 1.25rem;
  margin: 0 0.75rem 0.9375rem 0; }

.links-widget ul li {
  margin-bottom: 0.3125rem;
  padding-left: 0; }
  .links-widget ul li::before {
    content: '\e82b';
    color: #80356F;
    margin: 0.375rem 0 0 0.8125rem;
    position: absolute; }
  .links-widget ul li a {
    display: block;
    padding: 0.5rem 0.9375rem 0.5rem 2.8125rem;
    border-radius: 5px;
    box-shadow: 0 1px 4px 0 rgba(223, 223, 223, 0.5);
    background-color: white;
    color: #4A4A4A;
    line-height: 1.25rem; }
    .links-widget ul li a:hover {
      box-shadow: 0 1px 4px 0 rgba(223, 223, 223, 0.9); }

.faq-widget__title {
  font-weight: bold;
  margin-bottom: 0.625rem; }

.card-widget:nth-child(even) .card .btn--ghost {
  color: #1DAFC5;
  border-color: #1DAFC5; }
  .card-widget:nth-child(even) .card .btn--ghost:hover {
    color: white;
    background-color: #1DAFC5; }

.card-widget:nth-child(odd) .card .btn--ghost {
  color: #80356F;
  border-color: #80356F; }
  .card-widget:nth-child(odd) .card .btn--ghost:hover {
    color: white;
    background-color: #80356F; }

/* ==========================================================================
   Info widget
   ========================================================================== */
.info-widget__panel {
  background: #1DAFC5;
  padding: 1.5625rem 1.25rem; }
  .info-widget__panel p {
    margin: 0;
    color: white;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.9375rem;
    -webkit-text-stroke: 0; }
    .info-widget__panel p:last-of-type {
      margin-bottom: 0; }
  .info-widget__panel a {
    color: white;
    text-decoration: underline; }
    .info-widget__panel a:hover {
      color: #000000; }

.info-widget__inline {
  display: inline; }

.info-widget__icon-span {
  color: white;
  margin-left: 5px;
  font-size: 14px; }

.info-widget__panel .redactor-toolbar,
.info-widget__panel .redactor-toolbar a,
.info-widget__panel .redactor-box,
.info-widget__panel .redactor-box p,
.info-widget__panel .redactor-box a {
  color: #000000; }

.news-widget__item {
  display: block;
  padding: 24px 16px;
  background: #f6f6f6;
  color: #291720;
  margin-bottom: 24px; }
  .news-widget__item:hover .news-widget__title {
    color: #1DAFC5; }

.news-widget__date {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px; }

.news-widget__title {
  color: #80356F;
  font-weight: 400 !important;
  transition: color 0.2s ease-in-out; }

.news-widget__content > *:last-of-type {
  margin-bottom: 0; }

.faq-page {
  padding: 2.5rem 0; }
  .faq-page__column {
    margin-bottom: 2.5rem; }
    .faq-page__column h2 {
      color: #80356F; }

.contact-component form {
  margin-bottom: 0; }

.contact-component__text {
  margin-top: 1.5rem; }

.contact-component button[type="submit"] {
  padding-top: 0.875rem;
  padding-bottom: 0.8125rem; }

.contact-component textarea {
  height: 8.8125rem; }

.contact-component .form__row .btn {
  margin-top: 2rem; }

.contact-title {
  padding-left: 2.1875rem;
  background-image: url(/assets/dist/img/icon-ggz-envelope.svg);
  background-repeat: no-repeat;
  background-size: 25px auto;
  background-position: left center; }

/* Apply job
==========
*/
.apply-job {
  margin: 3.125rem 0; }
  .apply-job__text {
    margin-top: 10px; }
  @media (min-width: 768px) {
    .apply-job__button .btn {
      float: right;
      margin-top: 0; } }

/* Google search
==========

Brute force this ugly shit into something nice

*/
.gsc-control-cse,
.gsc-control-cse * {
  font-family: 'lato', sans-serif !important; }

.gsc-orderby-container {
  display: none !important; }

.cse .gsc-control-cse, .gsc-control-cse {
  padding: 0 !important; }

.gsc-control-cse.gsc-control-cse-nl {
  padding: 0; }

.gcsc-branding,
.gsc-clear-button,
.gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-long {
  display: none; }

.cse form.gsc-search-box, form.gsc-search-box {
  padding: 0 !important;
  margin-top: 10px !important; }

.gsc-result-info {
  font-size: 14px !important;
  margin: 0 0 10px 0 !important;
  padding-left: 0 !important; }

.gsc-control-cse .gs-spelling, .gsc-control-cse .gs-result .gs-title, .gsc-control-cse .gs-result .gs-title * {
  font-size: 20px !important; }

.gs-result .gs-title, .gs-result .gs-title * {
  color: inherit !important;
  text-decoration: none !important; }

.gs-result .gs-title {
  color: #80356F !important; }

.gs-result .gs-title:hover {
  color: #3C3036 !important; }

.cse .gsc-webResult.gsc-result, .gsc-webResult.gsc-result, .gsc-imageResult-classic, .gsc-imageResult-column {
  margin-bottom: 30px !important;
  padding-left: 0 !important; }

.cse .gsc-webResult.gsc-result:hover, .gsc-webResult.gsc-result:hover, .gsc-webResult.gsc-result.gsc-promotion:hover, .gsc-results .gsc-imageResult-classic:hover, .gsc-results .gsc-imageResult-column:hover {
  border-left-color: transparent !important; }

.cse .gsc-cursor-box, .gsc-cursor-box {
  border-top: 0 !important; }

.gsc-above-wrapper-area {
  border-bottom: 0 !important; }

.cse input.gsc-input, input.gsc-input {
  padding: 10px !important; }

.cse input.gsc-search-button, input.gsc-search-button {
  padding: 10px 30px !important;
  height: 41px !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  border: 0 !important;
  transition: all 0.2s ease-out;
  background: #80356F !important;
  border-radius: 0.3125rem !important;
  /* =5px */ }

.cse input.gsc-search-button:hover, input.gsc-search-button:hover {
  background: #6e2e5f !important; }

.gsc-results .gsc-cursor-box {
  padding: 0 !important; }

.gsc-results .gsc-cursor-box .gsc-cursor-page {
  padding: 10px 15px !important;
  border-radius: 0;
  text-decoration: none !important;
  transition: all 0.2s ease-out; }

.gsc-results .gsc-cursor-box .gsc-cursor-page:hover {
  background: #6e2e5f; }

.gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page:hover {
  background: #333333; }

.gsc-cursor-box.gs-bidi-start-align {
  margin-top: 60px !important; }

.gs-no-results-result .gs-snippet, .gs-error-result .gs-snippet {
  background-color: transparent !important;
  border-color: transparent !important; }

.waiting-time--filter .form__select {
  border-radius: 4px;
  border: 1px solid #f6f6f6; }
  .waiting-time--filter .form__select select {
    border: 1px solid #f6f6f6;
    padding-right: 25px;
    padding-left: 15px; }
  .waiting-time--filter .form__select:after {
    content: '\e80a';
    font-size: 1.25rem;
    color: #80356F;
    z-index: 9;
    pointer-events: none; }

.waiting-time--table {
  overflow: auto; }
  .waiting-time--table thead {
    background: #80356F;
    color: white;
    font-weight: bold; }
    .waiting-time--table thead tr {
      background: #80356F; }
      .waiting-time--table thead tr a {
        color: white; }
        .waiting-time--table thead tr a:hover {
          color: white; }
  .waiting-time--table th {
    white-space: nowrap;
    cursor: pointer; }
    .waiting-time--table th:first-child {
      border-radius: 0.3125rem 0 0 0; }
    .waiting-time--table th:last-child {
      border-radius: 0 0.3125rem 0 0; }
  .waiting-time--table th.sorting_asc:after,
  .waiting-time--table th.sorting_desc:after {
    font-family: 'icons', 'arial', 'verdana';
    font-size: 1.125rem;
    margin-left: 0.375rem;
    color: white;
    z-index: 9;
    pointer-events: none; }
  .waiting-time--table th.sorting_asc:after {
    content: '\e80a'; }
  .waiting-time--table th.sorting_desc:after {
    content: '\e80d'; }
  .waiting-time--table th, .waiting-time--table td {
    padding: 0.9375rem;
    border: none; }
  .waiting-time--table tr:nth-child(even) {
    background: #f6f6f6; }
  .waiting-time--table td:nth-of-type(5), .waiting-time--table td:nth-of-type(6) {
    font-weight: bold; }
  .waiting-time--table .dataTables_filter {
    display: none; }

.image-text {
  padding: 0.9375rem 0; }
  .image-text .image-text--image {
    margin-bottom: 0.9375rem; }
    @media (min-width: 576px) {
      .image-text .image-text--image {
        margin-bottom: 0; } }
    @media (max-width: 400px) {
      .image-text .image-text--image {
        max-width: 100%;
        flex: 0 0 100%; } }

.image-popup {
  margin: 1.875rem 0; }

.site-search input[type="text"] {
  background: #1DAFC5;
  border: none;
  color: white;
  margin-top: 17px;
  padding: 10px 0px 5px 10px;
  border-bottom: 1px solid white;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .site-search input[type="text"] {
      margin-top: 10px;
      padding: 5px 0px 5px 10px; } }

.site-search input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1DAFC5 inset !important;
  -webkit-text-fill-color: white; }

.site-search ::-webkit-input-placeholder {
  color: white; }

li.ss360-suggests {
  padding-left: 0 !important; }

/* ==========================================================================
   @PATTEMA: Waarom is dit toegevoegd?
   ========================================================================== */
.mobile-menu--show .site-search input[type="text"] {
  background: #80356F; }

.slick-cards {
  padding-bottom: 56px;
  /* Slick dots */ }
  .slick-cards .slick-list {
    width: 100%; }
  .slick-cards .slick-dots li button {
    display: none; }
  .slick-cards .slick-track {
    display: flex !important;
    min-width: 100%; }
  .slick-cards .slick-slide {
    height: inherit !important; }
  .slick-cards ul.slick-dots {
    display: flex;
    justify-content: center;
    margin: 0;
    position: absolute;
    bottom: 0;
    width: 100%; }
  .slick-cards .slick-dots li {
    display: inline-block;
    background: #B1B1B1;
    content: "";
    border-radius: 50%;
    width: 16px;
    height: 16px;
    aspect-ratio: 1;
    margin: 0 4px;
    cursor: pointer; }
    .slick-cards .slick-dots li.slick-active {
      background: #E67408; }

.o-sidebar--sticky {
  position: sticky;
  top: 150px; }

.c-text-icon {
  display: flex;
  align-items: center; }

/**
 *
 * Text icon's in a inline group
 *
 */
.c-text-icon-group {
  display: flex;
  flex-wrap: wrap; }
  .c-text-icon-group .c-text-icon {
    margin-top: 10px; }
  .c-text-icon-group--vertical {
    flex-direction: column; }
    .c-text-icon-group--vertical .c-text-icon:last-of-type {
      margin-bottom: 0 !important; }

.input-panel {
  display: flex;
  position: relative;
  background: #f6f6f6;
  border: 1px solid #e0e0e0;
  border-radius: 0.125rem;
  margin-bottom: 0.9375rem; }
  .input-panel label {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    padding: 0.9375rem 0.9375rem 0.9375rem 2.8125rem !important; }
    .input-panel label:before, .input-panel label:after {
      margin: 1rem 0 0 0.75rem; }
  .input-panel__text {
    flex-grow: 1; }
  .input-panel__last {
    pointer-events: none;
    margin-left: 0.9375rem;
    white-space: nowrap; }

.c-img-gallery {
  margin: 0; }
  .c-img-gallery__item {
    display: block;
    padding-bottom: 67%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 30px; }

.c-panel {
  width: 100%;
  border-radius: 2px;
  padding: 24px;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .c-panel {
      padding: 40px; } }
  .c-panel--link {
    display: inline-block; }
    .c-panel--link.c-panel--shadow-light {
      transition: shadow 0.2s ease-in-out; }
      .c-panel--link.c-panel--shadow-light:hover {
        box-shadow: 0 4px 6px 0 #dadada; }
  .c-panel--shadow {
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.32); }
  .c-panel--shadow-light {
    box-shadow: 0 4px 6px 0 rgba(218, 218, 218, 0.5); }
  .c-panel--light {
    background-color: #ffffff; }
  .c-panel--dark {
    background-color: #000000; }
  .c-panel--body {
    background-color: #f6f6f6; }
  .c-panel--text {
    background-color: #3C3036; }
  .c-panel--placeholder {
    background-color: #94adc4; }
  .c-panel--selection {
    background-color: #d1e4fe; }
  .c-panel--alpha {
    background-color: #f6f6f6; }
  .c-panel--beta {
    background-color: #E67408; }
  .c-panel--beta-dark {
    background-color: #BC5B00; }
  .c-panel--gamma {
    background-color: #1DAFC5; }
  .c-panel--delta {
    background-color: #80356F; }
  .c-panel--delta-dark {
    background-color: #561447; }
  .c-panel--epsilon {
    background-color: #ED3D6B; }
  .c-panel--zeta {
    background-color: #291720; }
  .c-panel--jeta {
    background-color: #B1B1B1; }
  .c-panel--dota {
    background-color: #5DC637; }
  .c-panel--iota {
    background-color: #575757; }
  .c-panel--kappa {
    background-color: #8DC63F; }
  .c-panel--lambda {
    background-color: #848484; }
  .c-panel--specialist-evenaar {
    background-color: #009005; }
  .c-panel--specialist-evenaar-en {
    background-color: #009005; }
  .c-panel--specialist-forensischepsychiatrie {
    background-color: #0a73a1; }
  .c-panel--specialist-kinderenjeugdpsychiatrie {
    background-color: #0486D4; }
  .c-panel--specialist-kjp {
    background-color: #0486D4; }
  .c-panel--specialist-gezinspsychiatrie {
    background-color: #E46C0B; }
  .c-panel--specialist-ouderenpsychiatrie {
    background-color: #614A7B; }
  .c-panel--specialist-slaapcentrum {
    background-color: #EECC3B; }
  .c-panel--specialist-cvbp {
    background-color: #398A41; }

.c-media-text__media {
  margin-bottom: 32px;
  /**
    *
    * Usage:
    * @include mq('gamma-and-up') {
    *     CSS properties here..
    * }
    *
    **/ }
  @media (min-width: 1000px) {
    .c-media-text__media {
      margin-bottom: 0; } }

.c-media-text__main--center {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; }

.c-media-text__links .c-btn {
  margin-bottom: 0; }
  .c-media-text__links .c-btn:not(:first-of-type) {
    margin-left: 8px; }

.c-media-text--reverse .row {
  flex-direction: row-reverse; }

/*
---
name: Media with text
category: SCSS
---
Two colums with media (image or video for example) and text on the other side. Stacks on mobile.


Media with text
======

```media-text.html
<section class="c-media-text o-section">
	<div class="row">
		<div class="small-12 large-6 column">
			<div class="c-media-text__media">
				<img src="https://api.coolminds.nl/placeholder/600x500" data-fullsize="https://api.coolminds.nl/placeholder/1200x1000" width="1200" height="1000" loading="lazy" alt="Titel afbeelding">
			</div>
		</div>
		<div class="small-12 large-6 column">
			<div class="c-media-text__main">
				<h2 class="h2">Lorem ipsum dolor sit amet consectetur</h2>
				<div class="fs-large">
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio unde blanditiis sint aperiam aliquid quos officiis laudantium animi reprehenderit iste libero, pariatur in vitae, minus temporibus exercitationem assumenda. Quis, molestias.</p>
				</div>
				<div class="c-media-text__links">
					<a href="#" class="c-btn">Jenson button</a>
					<a href="#" class="c-btn c-btn--secondary">Jenson button</a>
				</div>
			</div>
		</div>
	</div>
</section>
```

Media with text reversed
======
Media with text reverserd uses the class `c-media-text--reverse` to reverse the columns on desktop screens. It's also possible to add the `c-media-text__main--center` class to the `c-media-text__main` to vertically center the text/content.


```media-text-reverse.html
<section class="c-media-text c-media-text--reverse o-section">
	<div class="row">
		<div class="small-12 large-6 column">
			<div class="c-media-text__media">
				<img src="https://api.coolminds.nl/placeholder/600x500" data-fullsize="https://api.coolminds.nl/placeholder/1200x1000" width="1200" height="1000" loading="lazy" alt="Titel afbeelding">
			</div>
		</div>
		<div class="small-12 large-6 column">
			<div class="c-media-text__main c-media-text__main--center">
				<h2 class="h2">Lorem ipsum dolor sit amet consectetur</h2>
				<div class="fs-large">
					<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio unde blanditiis sint aperiam aliquid quos officiis laudantium animi reprehenderit iste libero, pariatur in vitae, minus temporibus exercitationem assumenda. Quis, molestias.</p>
				</div>
				<div class="c-media-text__links">
					<a href="#" class="c-btn">Jenson button</a>
					<a href="#" class="c-btn c-btn--secondary">Jenson button</a>
				</div>
			</div>
		</div>
	</div>
</section>
```

*/
@media screen and (max-width: 991px) {
  .vacancy-overview-row {
    flex-direction: column-reverse; } }

.color--light {
  color: #ffffff; }

.color--dark {
  color: #000000; }

.color--body {
  color: #f6f6f6; }

.color--text {
  color: #3C3036; }

.color--placeholder {
  color: #94adc4; }

.color--selection {
  color: #d1e4fe; }

.color--alpha {
  color: #f6f6f6; }

.color--beta {
  color: #E67408; }

.color--beta-dark {
  color: #BC5B00; }

.color--gamma {
  color: #1DAFC5; }

.color--delta {
  color: #80356F; }

.color--delta-dark {
  color: #561447; }

.color--epsilon {
  color: #ED3D6B; }

.color--zeta {
  color: #291720; }

.color--jeta {
  color: #B1B1B1; }

.color--dota {
  color: #5DC637; }

.color--iota {
  color: #575757; }

.color--kappa {
  color: #8DC63F; }

.color--lambda {
  color: #848484; }

.color--specialist-evenaar {
  color: #009005; }

.color--specialist-evenaar-en {
  color: #009005; }

.color--specialist-forensischepsychiatrie {
  color: #0a73a1; }

.color--specialist-kinderenjeugdpsychiatrie {
  color: #0486D4; }

.color--specialist-kjp {
  color: #0486D4; }

.color--specialist-gezinspsychiatrie {
  color: #E46C0B; }

.color--specialist-ouderenpsychiatrie {
  color: #614A7B; }

.color--specialist-slaapcentrum {
  color: #EECC3B; }

.color--specialist-cvbp {
  color: #398A41; }

.bg-color--light {
  background: #ffffff; }

.bg-color--dark {
  background: #000000; }

.bg-color--body {
  background: #f6f6f6; }

.bg-color--text {
  background: #3C3036; }

.bg-color--placeholder {
  background: #94adc4; }

.bg-color--selection {
  background: #d1e4fe; }

.bg-color--alpha {
  background: #f6f6f6; }

.bg-color--beta {
  background: #E67408; }

.bg-color--beta-dark {
  background: #BC5B00; }

.bg-color--gamma {
  background: #1DAFC5; }

.bg-color--delta {
  background: #80356F; }

.bg-color--delta-dark {
  background: #561447; }

.bg-color--epsilon {
  background: #ED3D6B; }

.bg-color--zeta {
  background: #291720; }

.bg-color--jeta {
  background: #B1B1B1; }

.bg-color--dota {
  background: #5DC637; }

.bg-color--iota {
  background: #575757; }

.bg-color--kappa {
  background: #8DC63F; }

.bg-color--lambda {
  background: #848484; }

.bg-color--specialist-evenaar {
  background: #009005; }

.bg-color--specialist-evenaar-en {
  background: #009005; }

.bg-color--specialist-forensischepsychiatrie {
  background: #0a73a1; }

.bg-color--specialist-kinderenjeugdpsychiatrie {
  background: #0486D4; }

.bg-color--specialist-kjp {
  background: #0486D4; }

.bg-color--specialist-gezinspsychiatrie {
  background: #E46C0B; }

.bg-color--specialist-ouderenpsychiatrie {
  background: #614A7B; }

.bg-color--specialist-slaapcentrum {
  background: #EECC3B; }

.bg-color--specialist-cvbp {
  background: #398A41; }

.ls-narrow-alpha {
  letter-spacing: -0.25px; }

.ls-narrow-beta {
  letter-spacing: -0.5px; }

.ls-narrow-gamma {
  letter-spacing: -0.75px; }

.ls-narrow-delta {
  letter-spacing: -1px; }

.ls-narrow-epsilon, .article h1, .article h2 {
  letter-spacing: -1.25px; }

.ls-narrow-zeta {
  letter-spacing: -1.5px; }

.ls-narrow-eta {
  letter-spacing: -1.75px; }

.ls-wide-alpha {
  letter-spacing: 0.25px; }

.ls-wide-beta {
  letter-spacing: 0.5px; }

.ls-wide-gamma {
  letter-spacing: 0.75px; }

.ls-wide-delta {
  letter-spacing: 1px; }

.ls-wide-epsilon {
  letter-spacing: 1.25px; }

.ls-wide-zeta {
  letter-spacing: 1.5px; }

.ls-wide-eta {
  letter-spacing: 1.75px; }

.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0; }
  .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.flex--row, .flex--horizontal {
  flex-direction: row; }

.flex--column, .flex--vertical {
  flex-direction: column; }

.flex--stretch {
  justify-content: space-between; }

/* ==========================================================================
   Flexbox Breakpoints - Bootstrap
   ========================================================================== */
.flex-xs {
  display: flex; }

@media (min-width: 576px) {
  .flex-sm {
    display: flex; } }

@media (min-width: 768px) {
  .flex-md {
    display: flex; } }

@media (min-width: 992px) {
  .flex-lg {
    display: flex; } }

@media (min-width: 1210px) {
  .flex-xl {
    display: flex; } }

.link-beta {
  color: #E67408 !important; }
  .link-beta:hover {
    color: #3C3036 !important; }

/* Print
==========
*/
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  /*
     * Don't show links for images, or javascript/internal links
     */
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group;
    /* h5bp.com/t */ }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  @page {
    margin: 0.5cm; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; } }

/*doc
---
title: Structure
name: 2_structure
category: Structure
---

Structure
*/
/*doc
---
title: Navigation
name: 3_navigation
category: Navigation
---

Navigation
*/
/*doc
---
title: Callouts and prompts
name: 8_callouts
category: Callouts and prompts
---

Callouts and prompts
*/
/*doc
---
title: Content
name: 7_content
category: Content
---

Content
*/