@import url(https://fonts.googleapis.com/css?family=Oswald:400,600|Raleway:400,600);
@charset "UTF-8";
@font-face {
  font-family: "fontello";
  src: url(/app/themes/thalamus/dist/fonts/fontello.eot?409b2a0eaacf9cbd2901e23c4cd99fec);
  src: url(/app/themes/thalamus/dist/fonts/fontello.eot?409b2a0eaacf9cbd2901e23c4cd99fec) format("embedded-opentype"), url(/app/themes/thalamus/dist/fonts/fontello.woff2?238f1f0a1870feca42de3648a9bf190d) format("woff2"), url(/app/themes/thalamus/dist/fonts/fontello.woff?34ee75cc035606eefa889f2af39629a5) format("woff"), url(/app/themes/thalamus/dist/fonts/fontello.ttf?5ff758a020a2bb33c9c0f140fa319d0a) format("truetype"), url(/app/themes/thalamus/dist/fonts/fontello.svg?f732b73e915fb63772bb02cc5436da87) format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('icons/font/fontello.svg?18898192#fontello') format('svg');
  }
}
*/
[class^=icon-]:before, [class*=" icon-"]:before,
[class^=icon-]:after, [class*=" icon-"]:after {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-facebook:before {
  content: "";
}

.icon-facebook.icon--after:before {
  content: normal;
}

.icon-facebook.icon--after:after {
  content: "";
}

/* '' */
.icon-twitter:before {
  content: "";
}

.icon-twitter.icon--after:before {
  content: normal;
}

.icon-twitter.icon--after:after {
  content: "";
}

/* '' */
.icon-instagram:before {
  content: "";
}

.icon-instagram.icon--after:before {
  content: normal;
}

.icon-instagram.icon--after:after {
  content: "";
}

/* '' */
.icon-linkedin:before {
  content: "";
}

.icon-linkedin.icon--after:before {
  content: normal;
}

.icon-linkedin.icon--after:after {
  content: "";
}

/* '' */
.icon-mail:before {
  content: "";
}

.icon-mail.icon--after:before {
  content: normal;
}

.icon-mail.icon--after:after {
  content: "";
}

/* '' */
.icon-phone:before {
  content: "";
}

.icon-phone.icon--after:before {
  content: normal;
}

.icon-phone.icon--after:after {
  content: "";
}

/* '' */
.icon-globe:before {
  content: "";
}

.icon-globe.icon--after:before {
  content: normal;
}

.icon-globe.icon--after:after {
  content: "";
}

/* '' */
.icon-right-small:before {
  content: "";
}

.icon-right-small.icon--after:before {
  content: normal;
}

.icon-right-small.icon--after:after {
  content: "";
}

/* '' */
.icon-left-small:before {
  content: "";
}

.icon-left-small.icon--after:before {
  content: normal;
}

.icon-left-small.icon--after:after {
  content: "";
}

/* '' */
.icon-arrow-right:before {
  content: "";
}

.icon-arrow-right.icon--after:before {
  content: normal;
}

.icon-arrow-right.icon--after:after {
  content: "";
}

/* '' */
.icon-spinner:before {
  content: "";
}

.icon-spinner.icon--after:before {
  content: normal;
}

.icon-spinner.icon--after:after {
  content: "";
}

/* '' */
.icon-document:before {
  content: "";
}

.icon-document.icon--after:before {
  content: normal;
}

.icon-document.icon--after:after {
  content: "";
}

/* '' */
.icon-left:before {
  content: "";
}

.icon-left.icon--after:before {
  content: normal;
}

.icon-left.icon--after:after {
  content: "";
}

/* '' */
.icon-right:before {
  content: "";
}

.icon-right.icon--after:before {
  content: normal;
}

.icon-right.icon--after:after {
  content: "";
}

/* '' */
.icon-up:before {
  content: "";
}

.icon-up.icon--after:before {
  content: normal;
}

.icon-up.icon--after:after {
  content: "";
}

/* '' */
.icon-down:before {
  content: "";
}

.icon-down.icon--after:before {
  content: normal;
}

.icon-down.icon--after:after {
  content: "";
}

/* '' */
.icon-pdf:before {
  content: "";
}

.icon-pdf.icon--after:before {
  content: normal;
}

.icon-pdf.icon--after:after {
  content: "";
}

/* '' */
.icon-image:before {
  content: "";
}

.icon-image.icon--after:before {
  content: normal;
}

.icon-image.icon--after:after {
  content: "";
}

/* '' */
.icon-zip:before {
  content: "";
}

.icon-zip.icon--after:before {
  content: normal;
}

.icon-zip.icon--after:after {
  content: "";
}

/* '' */
.icon-googleplus:before {
  content: "";
}

.icon-googleplus.icon--after:before {
  content: normal;
}

.icon-googleplus.icon--after:after {
  content: "";
}

/* '' */
/*$breakpoints: (
	tablet: "(min-width: 600px)",
	tablet-max: "(max-width: 599px)",

	laptop: "(min-width: 1080px)",
	laptop-max: "(max-width: 1079px)",

	desktop: "(min-width: 1260px)",
	desktop-max: "(max-width: 1259px)"
) !default;*/
/*$text-colors: (
	white: map-get($colors, white)
) !default;*/
/*$bg-colors: (
	lightgray: map-get($colors, lightgray)
// ) !default;*/
/* $auto-icons: (
	'href*="facebook.com"': $icon-facebook,
	'href*="twitter.com"': $icon-twitter,
	'href*="linkedin.com"': $icon-linkedin,
	'href*="instagram.com"': $icon-instagram,
	'href*="plus.google.com"': $icon-googleplus,

	'href$=".pdf"': $icon-pdf,
	'href$=".doc"': $icon-document,

	'href$=".zip"': $icon-zip,
	'href$=".rar"': $icon-zip,
	'href$=".tar"': $icon-zip,
	'href$=".gz"': $icon-zip,
	'href$=".7z"': $icon-zip,

	'href$=".jpg"': $icon-image,
	'href$=".jpeg"': $icon-image,
	'href$=".png"': $icon-image,
	'href$=".gif"': $icon-image,
	'href$=".bmp"': $icon-image,
	'href$=".svg"': $icon-image,

	'href^="mailto:"': $icon-mail,
	'href^="tel:"': $icon-phone,
	'href*="/maps"': $icon-globe
) !default; */
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * Set consistent quote types.
 */
q {
  quotes: "“" "”" "‘" "’";
}

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

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

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

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

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

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

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

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */
}

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

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

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
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;
}

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

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

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

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

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

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

/* $auto-icons: (
	'href*="facebook.com"': $icon-facebook,
	'href*="twitter.com"': $icon-twitter,
	'href*="linkedin.com"': $icon-linkedin,
	'href*="instagram.com"': $icon-instagram,
	'href*="plus.google.com"': $icon-googleplus,

	'href$=".pdf"': $icon-pdf,
	'href$=".doc"': $icon-document,

	'href$=".zip"': $icon-zip,
	'href$=".rar"': $icon-zip,
	'href$=".tar"': $icon-zip,
	'href$=".gz"': $icon-zip,
	'href$=".7z"': $icon-zip,

	'href$=".jpg"': $icon-image,
	'href$=".jpeg"': $icon-image,
	'href$=".png"': $icon-image,
	'href$=".gif"': $icon-image,
	'href$=".bmp"': $icon-image,
	'href$=".svg"': $icon-image,

	'href^="mailto:"': $icon-mail,
	'href^="tel:"': $icon-phone,
	'href*="/maps"': $icon-globe
) !default; */
/**
 * @arrow
 *
 * Adds an arrow to an element
 *
 * @param		position	$position: where the arrow should be added; left/top/right/bottom
 * @param		unit		$size: size of arrow (20px for example)
 * @param		color		$background: the arrow's background color
 * @param		unit		$border-width: the width of the arrow's border
 * @param		color		$border-color: color of the border
 * @param		percent		$align: how to align the arrow (left|10px|50% etc)
 */
/**
 * @card-flip
 *
 * Use on a container with two children, the first child will be visible and on hover the container will rotate to reveal the second child
 *
 * @param	bool	$hover: whether to rotate the "card" on hover (you may wanna do this manually)
 * @param:	string	$rotate: X or Y - in which direction to rotate
 */
/**
 * @device
 *
 * Turns an element into a mobile device (Nexus 5-looking)
 *
 * @param	unit	$width: the width of the device
 * @param	color	$color: color of the device
 * @param	bool	$h: whether to set height (if used on an img height should be auto)
 */
/**
 * Round icon
 * TODO: icon--round should be exactly like buttons (with :hover/:active --ghost and different colors)
 */
*,
:before,
:after {
  box-sizing: border-box;
}

html {
  background: #f6f6f6;
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-size: 0.9rem;
  font-family: "Raleway", Helvetica, sans-serif;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.6;
  color: #000;
}

.auto-icons a:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  content: "";
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  display: none;
  margin: 0 0.5em 0 0;
}
.auto-icons a[href*="facebook.com"]:before {
  display: inline-block;
  content: "";
}
.auto-icons a[href*="twitter.com"]:before {
  display: inline-block;
  content: "";
}
.auto-icons a[href*="linkedin.com"]:before {
  display: inline-block;
  content: "";
}
.auto-icons a[href*="instagram.com"]:before {
  display: inline-block;
  content: "";
}
.auto-icons a[href*="plus.google.com"]:before {
  display: inline-block;
  content: "";
}
.auto-icons a[href^="mailto:"]:before {
  display: inline-block;
  content: "";
}

/***
    title: Background Colors
    section: Colors
    description: Use to apply a background color to an element. Add your colors to the $bg-colors array in config/bg-colors.scss.
    example:
        <div class="bg--white">I have a white background color</div>
***/
.bg--lightgray {
  background-color: #fafafa;
}

blockquote,
q {
  font-size: 1rem;
  margin: 0;
}

/***
    title: Button
    section: Buttons
    description: Use to create buttons. Buttons come in various sizes and colors. Add more colors and customize your buttons in config/button.scss. You can also use @include button;
    example:
        <p><a href="#" class="button">I'm a normal button</a></p>
        <p><button class="button--ghost">Button elements don't need the button class</button></p>
        <p><input type="submit" value="Submit inputs do though" class="button button--disabled" disabled></p>
        <p><a href="#" class="button">Continue</a> <a href="#" class="button button--gray button--ghost">Cancel</a></p>
        <p><a href="#" class="button button--gradient">Button colors can be a list</a></p>
        <p><a href="#" class="button button--white">Bright buttons don't get white text</a></p>
***/
.button {
  background-color: #fbe83c;
  background-image: none;
  color: #000;
  text-shadow: none;
  box-shadow: none;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.25s cubic-bezier(0.125, 0.75, 0.415, 1), padding 0s 0s linear, border 0s 0s linear;
  box-sizing: border-box;
  padding: 0.9rem 2.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-family: "Raleway", Helvetica, sans-serif;
  letter-spacing: 0;
  border: 0;
  border-radius: 0;
}
.button a,
.button a:hover {
  color: #000;
  text-decoration: none;
}
.button:hover {
  text-decoration: none;
  background-color: #fceb55;
  background-image: none;
  color: #000;
  box-shadow: none;
}
.button[disabled], .button.button--disabled {
  pointer-events: none;
}

.button--ghost {
  background-color: transparent;
  background-image: none;
  text-shadow: none;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color: #fbe83c;
  border: 1px solid #fbe83c;
  padding: calc(0.9rem - 1px) calc(2.6rem - 1px);
}
.button--ghost:hover {
  text-decoration: none;
  background-color: #fbe83c;
  background-image: none;
  color: #000;
  box-shadow: none;
  border-color: transparent;
}

.button--primary {
  background-color: #fbe83c;
  background-image: none;
  color: #000;
  text-shadow: none;
  box-shadow: none;
}
.button--primary a,
.button--primary a:hover {
  color: #000;
  text-decoration: none;
}
.button--primary:hover {
  text-decoration: none;
  background-color: #fceb55;
  background-image: none;
  color: #000;
  box-shadow: none;
}
.button--primary.button--ghost {
  background-color: transparent;
  background-image: none;
  text-shadow: none;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color: #fbe83c;
  border: 1px solid #fbe83c;
  padding: calc(0.9rem - 1px) calc(2.6rem - 1px);
}
.button--primary.button--ghost:hover {
  text-decoration: none;
  background-color: #fbe83c;
  background-image: none;
  color: #000;
  box-shadow: none;
  border-color: transparent;
}

.button--secondary {
  background-color: #74ec89;
  background-image: none;
  color: #000;
  text-shadow: none;
  box-shadow: none;
}
.button--secondary a,
.button--secondary a:hover {
  color: #000;
  text-decoration: none;
}
.button--secondary:hover {
  text-decoration: none;
  background-color: #8aef9c;
  background-image: none;
  color: #000;
  box-shadow: none;
}
.button--secondary.button--ghost {
  background-color: transparent;
  background-image: none;
  text-shadow: none;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  color: #74ec89;
  border: 1px solid #74ec89;
  padding: calc(0.9rem - 1px) calc(2.6rem - 1px);
}
.button--secondary.button--ghost:hover {
  text-decoration: none;
  background-color: #74ec89;
  background-image: none;
  color: #000;
  box-shadow: none;
  border-color: transparent;
}

/***
    title: Container
    section: Layout
    description: Centers an element on the screen at a width of $site-width. Containers should be direct decendants of body/main (any full width element actually) and don't work properly when nested like this. You can also use @include container and pass an optional width;
    example:
        <div class="container bg--white">
            <h1>I'm centered</h1>
            <p>In the middle of the page</p>
        </div>
***/
.container {
  width: 90%;
  max-width: 1280px;
  margin: 3rem auto;
}

/***
    title: Figure Background
    section: Images
    description: Allows you to use a figure element (and its img) as a background image.
    example:
        <header class="color--white" style="position:relative; overflow:hidden">
            <p>My background image is actually an img</p>
            <p>Note that the styleguide example containers have a background of their own which shines through here - make sure you _don't_ have a background when you use this component and it will look good</p>
            <figure class="figure-background"><img src="http://placehold.it/1920x1080"></figure>
        </header>
***/
.figure-background {
  margin: 0;
}
.figure-background:before {
  background: rgba(0, 0, 0, 0.6);
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
.figure-background img {
  position: absolute;
  left: 0;
  top: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  width: 100%;
  height: 100%;
  font-family: "object-fit: cover; object-position: center center;";
  z-index: -2;
}

/***
    title: Forms
    section: Forms
    description: Form styling.
    example:
        <form method="post" action="">
            <p>
                <label>
                    Search<br>
                    <input type="search" name="q" placeholder="Search the site">
                </label>
            </p>
            <p>
                <label>
                    Name<br>
                    <input type="text" name="name" placeholder="eg. John Doe">
                </label>
            </p>
            <p>
                <label>
                    Email <abbr title="Required">*</abbr><br>
                    <input type="email" name="email" placeholder="eg. john.doe@example.com" required>
                </label>
            </p>
            <p>
                <label>
                    Sex<br>
                    <select name="sex">
                        <option value="f">Female</option>
                        <option value="m">Male</option>
                    </select>
                </label>
            </p>
            <p>
                Smoker?<br>
                <label><input type="radio" name="smoker" value="1"> Yes</label>
                <label><input type="radio" name="smoker" value="0"> No</label>
            </p>
            <p>
                <label>
                    <span class="value">${age}</span>
                    Age<br>
                    <input type="range" name="age" min="1" max="150">
                </label>
                <strong class="error">You have to be at least 18 to conitnue</strong>
            </p>
            <p>
                <label>
                    Message<br>
                    <textarea name="message" rows="3" cols="60" placeholder="Write your message here"></textarea>
                </label>
            </p>
            <p><label><input type="checkbox" name="agree"> I agree</label></p>
            <p><input type="submit" value="Go" class="button button--wide"></p>
        </form>
***/
form {
  margin: 0;
}
form strong.error {
  display: block;
  margin-top: 0.75rem;
  color: #f00;
}
form abbr,
form abbr[title] {
  color: #f00;
  border: 0;
  text-decoration: none;
}

label + label {
  margin-left: 2rem;
}

input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], textarea {
  font-size: 0.9rem;
  font-family: "Raleway", Helvetica, sans-serif;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.6;
  color: #000;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.9rem 0.9rem;
  color: #000;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  transition: all 0.25s cubic-bezier(0.125, 0.75, 0.415, 1);
  border: 1px solid #dedede;
  border-width: 1px;
  border-radius: 0;
}
input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=date]:focus, input[type=month]:focus, input[type=week]:focus, input[type=time]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=color]:focus, textarea:focus {
  outline: 0;
  border: 1px solid #000;
  border-width: 1px;
}

/* @keyframes remove-chrome-autofill-color {
	to {
		background: $form-field-bg;
		color: $form-text-color;
	}
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
	animation-name: remove-chrome-autofill-color;
	animation-fill-mode: both;
} */
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=radio],
input[type=checkbox] {
  margin: 0 0.5em 0 0;
}

textarea {
  resize: vertical;
  max-width: 100%;
}

::-moz-placeholder {
  color: #bbb;
}

:-ms-input-placeholder {
  color: #bbb;
}

::placeholder {
  color: #bbb;
}

button {
  background-color: #fbe83c;
  background-image: none;
  color: #000;
  text-shadow: none;
  box-shadow: none;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.25s cubic-bezier(0.125, 0.75, 0.415, 1), padding 0s 0s linear, border 0s 0s linear;
  box-sizing: border-box;
  padding: 0.9rem 2.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-family: "Raleway", Helvetica, sans-serif;
  letter-spacing: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
}
button a,
button a:hover {
  color: #000;
  text-decoration: none;
}
button:hover {
  text-decoration: none;
  background-color: #fceb55;
  background-image: none;
  color: #000;
  box-shadow: none;
}

input[type=submit] {
  outline: 0;
}

input[type=submit] {
  white-space: normal;
}

select {
  font-size: 0.9rem;
  font-family: "Raleway", Helvetica, sans-serif;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.6;
  color: #000;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40"><polygon points="2.7,14.4 6.8,10.3 20,23.5 33.2,10.3 37.3,14.4 20,31.7 "/></svg>') no-repeat;
  background-position: right 0.9rem top 50%;
  background-size: 0.5rem auto;
  box-sizing: border-box;
  width: 100%;
  padding: 0.9rem 2.3rem 0.9rem 0.9rem;
  color: #000;
  transition: all 0.25s cubic-bezier(0.125, 0.75, 0.415, 1);
  border: 1px solid #dedede;
  border-width: 1px;
  border-radius: 0;
}
select:focus {
  border: 1px solid #000;
  border-width: 1px;
}

/* input[type=range] {
	background: blue;
	height: 10rem;
	border: 1rem solid green;

	// Remove outline
	outline: 0;

	&:focus {
		outline: 0;
	}

	// Even in ff: http://stackoverflow.com/questions/18794026/remove-dotted-outline-from-range-input-element-in-firefox
	&::-moz-focus-outer {
		border: 0;
	}

	// Style the track
	&::-moz-range-progress {
		background: $form-range-color-lower;
		height: 2rem;
	}

	&::-moz-range-track {
		background: $form-range-color-upper;
		height: 2rem;
	}

	&::-moz-range-thumb {
		background: blue;
		width: 1rem;
		height: 1rem;
		border: 1rem solid red;
		border-radius: 50%;
	}
} */
input[type=range] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  width: 100%;
  height: 1rem;
  padding: 0;
  border: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  background: #bbb;
}
input[type=range]::-ms-track {
  background: #bbb;
  color: #bbb;
}
input[type=range]::-ms-fill-lower {
  background: #bbb;
  color: #bbb;
}
input[type=range]::-ms-fill-upper {
  background: #ddd;
  color: #ddd;
}
input[type=range]::-moz-range-progress {
  background: #bbb;
  height: 0.25rem;
}
input[type=range]::-moz-range-track {
  background: #ddd;
}
input[type=range]::-webkit-slider-thumb {
  background: #aaa;
}
input[type=range]::-moz-range-thumb {
  background: #aaa;
}
input[type=range]::-ms-thumb {
  background: #aaa;
}
input[type=range]:focus {
  outline: 0;
}
input[type=range]::-moz-focus-outer {
  border: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  height: 0.25rem;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0.25rem;
}
input[type=range]::-webkit-slider-runnable-track:focus {
  outline: 0;
}
input[type=range]::-ms-track {
  appearance: none;
  width: 100%;
  height: 0.25rem;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0.25rem;
}
input[type=range]::-ms-track:focus {
  outline: 0;
}
input[type=range]::-ms-fill-lower {
  appearance: none;
  width: 100%;
  height: 0.25rem;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0.25rem;
}
input[type=range]::-ms-fill-lower:focus {
  outline: 0;
}
input[type=range]::-ms-fill-upper {
  appearance: none;
  width: 100%;
  height: 0.25rem;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0.25rem;
}
input[type=range]::-ms-fill-upper:focus {
  outline: 0;
}
input[type=range]::-moz-range-track {
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 0.25rem;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0.25rem;
}
input[type=range]::-moz-range-track:focus {
  outline: 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 1rem;
  height: 1rem;
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  cursor: pointer;
  outline: 0;
  border-radius: 50%;
  margin-top: -0.375rem;
}
input[type=range]::-webkit-slider-thumb:focus {
  outline: 0;
}
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  width: 1rem;
  height: 1rem;
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  cursor: pointer;
  outline: 0;
  border-radius: 50%;
}
input[type=range]::-moz-range-thumb:focus {
  outline: 0;
}
input[type=range]::-ms-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  cursor: pointer;
  outline: 0;
  border-radius: 50%;
  transform: translateY(0.25rem);
}
input[type=range]::-ms-thumb:focus {
  outline: 0;
}

/***
    title: Floating Label
    section: Forms
    description: Use to create labels that act as placeholders until the field is focused. Note that the field _must_ also have a placeholder
    example:
        <p class="floating-label">
            <input type="email" name="email" id="styleguide-placeholder-label-example" placeholder="This wont be shown but is required" required>
            <label for="styleguide-placeholder-label-example">E-mail</label>
        </p>
***/
.floating-label {
  display: block;
  position: relative;
  text-align: left;
  padding-top: 1.44rem;
}
.floating-label ::-moz-placeholder {
  color: transparent;
}
.floating-label :-ms-input-placeholder {
  color: transparent;
}
.floating-label ::placeholder {
  color: transparent;
}
.floating-label label,
.floating-label .label {
  display: block;
  pointer-events: none;
  padding-top: 0.9rem;
  padding-left: 0.9rem;
  position: absolute;
  left: 0;
  top: 1.44rem;
  right: 0;
  bottom: 0;
  color: #bbb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(0);
  transform-origin: left top;
  transition: all 0.25s cubic-bezier(0.125, 0.75, 0.415, 1);
}
.floating-label input:not(:-moz-placeholder-shown) + label, .floating-label textarea:not(:-moz-placeholder-shown) + label, .floating-label input:not(:-moz-placeholder-shown) + .label, .floating-label textarea:not(:-moz-placeholder-shown) + .label {
  transform: translateY(-2.34rem);
  color: #000;
}
.floating-label input:not(:-ms-input-placeholder) + label, .floating-label textarea:not(:-ms-input-placeholder) + label, .floating-label input:not(:-ms-input-placeholder) + .label, .floating-label textarea:not(:-ms-input-placeholder) + .label {
  transform: translateY(-2.34rem);
  color: #000;
}
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:not(:placeholder-shown) + label,
.floating-label input:not(:placeholder-shown) + .label,
.floating-label textarea:not(:placeholder-shown) + .label {
  transform: translateY(-2.34rem);
  color: #000;
}
@supports (-ms-ime-align: auto) {
  .floating-label label,
.floating-label .label {
    transform: translateY(-2.34rem) !important;
  }
}
@media all and (-ms-high-contrast: none) {
  .floating-label label,
.floating-label .label {
    transform: translateY(-2.34rem) !important;
  }
}

/***
    title: Headings
    section: Typography
    description: Use to create headings. H1-H6 automatically get the correct styling, however you can use the heading--X classes to make non-headings look like headings, and headings of one size appear to have a different size. You can also use @include heading;
    example:
        <h1>I'm an H1</h1>
        <h2>I'm an H2</h2>
        <h3>I'm an H3</h3>
        <h4>I'm an H4</h4>
        <h5>I'm an H5</h5>
        <h6>I'm an H6</h6>
        <p class="heading--1">I'm a paragraph</p>
***/
h1, h2, h3, h4, h5, h6, .heading--1, .heading--2, .heading--3, .heading--4, .heading--5, .heading--6 {
  display: block;
  margin: 0 0 1.5rem;
  font-weight: 400;
  font-size: 2rem;
  font-family: "Oswald", Helvetica, sans-serif;
  color: #000;
  line-height: 1.6;
  letter-spacing: 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .heading--1 a, .heading--2 a, .heading--3 a, .heading--4 a, .heading--5 a, .heading--6 a {
  color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .heading--1 a:hover, .heading--2 a:hover, .heading--3 a:hover, .heading--4 a:hover, .heading--5 a:hover, .heading--6 a:hover {
  color: #000;
}

h2,
.heading--2 {
  font-size: 1.6rem;
}

h3,
.heading--3 {
  font-size: 1.25rem;
}

h4,
.heading--4 {
  font-size: 1.2rem;
}

h5,
.heading--5 {
  font-size: 1rem;
}

h6,
.heading--6 {
  font-size: 1rem;
}

/***
    title: Hero
    section: Layout
    description: A full width section with loads of padding and white text. This is a typical UI component in modern websites and is often displayed at the top of the page.
    example:
        <header class="hero">
            <h2>I'm a hero</h2>
            <p>With some content</p>
            <figure><img src="http://placehold.it/1920x1080"></figure>
        </header>
***/
.hero {
  padding: 3rem 5%;
  position: relative;
  overflow: hidden;
  color: #fff;
}
@media (min-width: 1422px) {
  .hero {
    padding-left: calc(50% - 640px);
    padding-right: calc(50% - 640px);
  }
}
@media (min-width: 600px) {
  .hero {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6, .hero .heading--1, .hero .heading--2, .hero .heading--3, .hero .heading--4, .hero .heading--5, .hero .heading--6,
.hero a:not(.button) {
  color: #fff;
}
.hero > h1,
.hero > h2 {
  margin: 0;
}
.hero > p {
  margin: 1.5rem 0 0;
}
.hero > nav {
  margin-top: 2.5rem;
}
.hero figure {
  margin: 0;
}
.hero figure:before {
  background: rgba(0, 0, 0, 0.6);
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
.hero figure img {
  position: absolute;
  left: 0;
  top: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  width: 100%;
  height: 100%;
  font-family: "object-fit: cover; object-position: center center;";
  z-index: -2;
}
.hero.text--center, .text--center .hero {
  padding: 3rem 5%;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
}
@media (min-width: 1422px) {
  .hero.text--center, .text--center .hero {
    padding-left: calc(50% - 640px);
    padding-right: calc(50% - 640px);
  }
}
@media (min-width: 600px) {
  .hero.text--center, .text--center .hero {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
.hero.text--center h1, .hero.text--center h2, .hero.text--center h3, .hero.text--center h4, .hero.text--center h5, .hero.text--center h6, .hero.text--center .heading--1, .hero.text--center .heading--2, .hero.text--center .heading--3, .hero.text--center .heading--4, .hero.text--center .heading--5, .hero.text--center .heading--6,
.hero.text--center a:not(.button), .text--center .hero h1, .text--center .hero h2, .text--center .hero h3, .text--center .hero h4, .text--center .hero h5, .text--center .hero h6, .text--center .hero .heading--1, .text--center .hero .heading--2, .text--center .hero .heading--3, .text--center .hero .heading--4, .text--center .hero .heading--5, .text--center .hero .heading--6,
.text--center .hero a:not(.button) {
  color: #fff;
}
.hero.text--center > h1,
.hero.text--center > h2, .text--center .hero > h1,
.text--center .hero > h2 {
  margin: 0;
}
.hero.text--center > p, .text--center .hero > p {
  margin: 1.5rem 0 0;
}
.hero.text--center > nav, .text--center .hero > nav {
  margin-top: 2.5rem;
}
.hero.text--center figure, .text--center .hero figure {
  margin: 0;
}
.hero.text--center figure:before, .text--center .hero figure:before {
  background: rgba(0, 0, 0, 0.6);
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
.hero.text--center figure img, .text--center .hero figure img {
  position: absolute;
  left: 0;
  top: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  width: 100%;
  height: 100%;
  font-family: "object-fit: cover; object-position: center center;";
  z-index: -2;
}

/***
    title: Icon
    section: Icons
    description: Use to add icons to elements. Icons added to empty elements will have zero spacing around them whereas icons added to elements with content will have some spacing. Add icons to the icons.json file (using fontello.com) and Gulp takes care of the rest.
    example:
        <p>
            <a href="#" class="icon-facebook">Facebook</a>
            <a href="#" class="icon-twitter">Twitter</a>
            <a href="#" class="icon-facebook" title="Facebook"></a>
            <a href="#" class="icon-twitter" title="Twitter"></a>
            <button class="icon-search">Find</button>
            <a href="#" class="icon-right icon--after">Icon after text</a>
        </p>
***/
/**
 * Some icon tweaks and margins
 */
[class*=icon-]:before, [class*=icon-]:after {
  text-decoration: none;
}
[class*=icon-]:before {
  margin: 0 0.5em 0 0;
}
[class*=icon-].icon--after:after {
  margin: 0 0 0 0.5em;
}
[class*=icon-]:empty:after, [class*=icon-]:empty:before {
  margin: 0;
}

/**
 * Spinner
 */
@-webkit-keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.icon-spinner:before,
.icon-spinner.icon--after:after {
  -webkit-animation: spin 2s infinite linear;
          animation: spin 2s infinite linear;
}

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

figure {
  margin: 0 0 1.5rem;
}
figure img {
  display: block;
}

/***
    title: Link
    section: Links
    description: Link styling. You can use the link class to make anything look like a link.
    example:
        <a href="#">Normal link</a>
        <span class="link">Not a link at all</span>
        <a href="#" class="link--neutral">Link that looks like text</a>
        <a href="#" class="link--underline">Link with underline</a>
***/
a {
  cursor: pointer;
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #aaa;
  text-decoration: none;
}
a[role=button]:focus, a[href^="#"]:focus {
  outline: 0;
}

.link--neutral {
  color: inherit;
  text-decoration: none;
}
.link--neutral:hover {
  color: inherit;
  text-decoration: none;
}

.link--neutral--hover {
  color: inherit;
}
.link--neutral--hover:hover {
  color: #aaa;
  text-decoration: none;
}

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

.link--underline {
  text-decoration: underline;
}
.link--underline:hover {
  text-decoration: none;
}

/***
    title: List
    section: Lists
    description: Various classes you can use on lists, or list like markup.
    example:
        <h2>Pipe separated</h2>
        <ul class="list--pipe-separated">
            <li>Pipes</li>
            <li>Separate</li>
            <li>Me</li>
        </ul>
        <h2>Inline list</h2>
        <ul class="list--inline text--center">
            <li>Inline list</li>
            <li>Inline list</li>
            <li>Inline list</li>
            <li>Inline list</li>
        </ul>
        <h2>Plain list</h2>
        <ul class="list--plain">
            <li>Plain list</li>
            <li>Plain list</li>
            <li>Plain list</li>
            <li>Plain list</li>
        </ul>
        <h2>Bordered list</h2>
        <ul class="list--border">
            <li>Bordered list</li>
            <li>Bordered list</li>
            <li>Bordered list</li>
            <li>Bordered list</li>
        </ul>
***/
ul,
ol {
  margin: 0 0 1.5rem 2.5rem;
  padding: 0;
}

dl {
  margin: 0 0 1.5rem;
}

.list--pipe-separated {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
.list--pipe-separated > * {
  display: inline-block;
}
.list--pipe-separated > *:not(:last-child):after {
  content: " | ";
}

.list--inline {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
.list--inline > * {
  display: inline-block;
  margin: 0 1.5rem 1.5rem 0;
}
.text--center .list--inline > *, .list--inline.text--center > * {
  margin: 0 0.75rem 1.5rem;
}

.list--border {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
.list--border > :not(:last-child) {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #dedede;
}

.list--plain {
  margin-left: 0;
  list-style: none;
}
.list--plain--spacing {
  margin-left: 0;
  list-style: none;
}
.list--plain--spacing > * {
  margin-bottom: 0.75rem;
}

/***
    title: Popup
    section: Popup
    description: Use to create a popup. Works well with popup.js but isn't necessarily required.
    example:
        <a href="#my-popup">Open popup</a>
        <div class="popup" id="my-popup">
            <div class="popup__content">
                <a href="#" class="popup__close"></a>
                <h2>I'm a popup</h2>
                <p>Built with CSS.</p>
            </div>
        </div>
***/
html.popup-open,
html.popup-open body {
  overflow: hidden;
}

.popup {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 100vh;
  z-index: 100;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 0s 0.2s linear, opacity 0.2s 0s cubic-bezier(0.125, 0.75, 0.415, 1);
}
.popup:target, .popup.open {
  transition: transform 0s 0s linear, opacity 0.2s 0s cubic-bezier(0.125, 0.75, 0.415, 1);
  opacity: 1;
  transform: translateY(0);
}
.popup__close {
  position: fixed;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 1;
  padding: 0.75rem;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}
.popup__close:hover {
  color: #fff;
  text-decoration: none;
}
.popup__close:before {
  content: "×";
  font-size: 2rem;
  line-height: 1rem;
}
.popup__content {
  background: #fff;
  width: 95%;
  max-width: 50rem;
  position: relative;
  margin: auto;
  padding: 2.5rem;
}
.popup__content .popup__close {
  position: absolute;
  color: #000;
}
.popup__content .popup__close:hover {
  color: #000;
}

@media all and (-ms-high-contrast: none) {
  .popup {
    display: block;
  }

  *::-ms-backdrop,
.popup {
    display: block;
  }
}
/***
    title: Section
    section: Layout
    description: Creates a full width section with centered content (based on $site-width). Sections should be direct decendants of body/main (any full width element actually) and don't work properly nested like in the styleguide (that's why it looks broken here).
    example:
        <div class="section bg--white">
            <h2>I'm a section</h2>
            <p>With some content</p>
        </div>
***/
.section {
  padding: 3rem 5%;
}
@media (min-width: 1422px) {
  .section {
    padding-left: calc(50% - 640px);
    padding-right: calc(50% - 640px);
  }
}
.section--slanted {
  -webkit-clip-path: polygon(0 4rem, 100% 0, 100% calc(100% - 4rem), 0 100%);
          clip-path: polygon(0 4rem, 100% 0, 100% calc(100% - 4rem), 0 100%);
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.section--slanted-top {
  -webkit-clip-path: polygon(0 4rem, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 4rem, 100% 0, 100% 100%, 0 100%);
  padding-top: 7rem;
}
.section--slanted-bottom {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4rem), 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4rem), 0 100%);
  padding-bottom: 7rem;
}

/***
    title: Shadows
    section: Layout
    description: Use to apply a shadow to an element. Add your shadows to the $shadows array in config/shadows.scss.
    example:
        <div class="bg--white shadow--4">I have a white background color and a level 4 shadow</div>
***/
.shadow--1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}

.shadow--2 {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .09);
}

.shadow--3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}

.shadow--4 {
  box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .25), 0 25px 25px -20px rgba(0, 0, 0, .25);
}

.shadow--5 {
  box-shadow: 0 60px 140px -40px rgba(0, 0, 0, .25), 0 60px 120px -20px rgba(0, 0, 0, .25);
}

.strike-through {
  display: table;
  width: 100%;
  overflow: hidden;
  border-spacing: 0;
}
.strike-through:before, .strike-through:after {
  display: table-cell;
  content: "";
  width: 50%;
  border-top: 1px solid #dedede;
  transform: translateY(50%) translateX(-1.5rem);
}
.strike-through:after {
  transform: translateY(50%) translateX(1.5rem);
}

/***
    title: Text Colors
    section: Colors
    description: Use to give an element's text a different color. This class affects everything, including headings and links.
    example:
        <div class="bg--lightgray color--white">
            <h2>I have white</h2>
            <p>Text and <a href="#">links</a></p>
        </div>
***/
/***
    title: Text
    section: Typography
    description: Various helper classes for working with text.
    example:
        <p class="text--center">This text is centered and <strong class="text--upper">upper case</strong></p>
        <p class="text--right text--large">This large text is right aligned.</p>
        <p class="text--ellipsis">Regardless of how long this text gets it will never line break regardless of how long this text gets it will never line break etc etc.</p>
***/
p {
  margin: 0 0 1.5rem;
}

small {
  font-size: 0.875rem;
}

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

.text--center {
  text-align: center;
}

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

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

.text--small {
  font-size: 0.875rem;
}

.text--large {
  font-size: 1rem;
}

.text--ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/***
    title: Video
    section: Video
    description: Wrapping class for responsive, embedded videos (from https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php)
    example:
        <div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/JSuYuPz0dlU" frameborder="0" allowfullscreen></iframe></div>
***/
.video,
.entry-content-asset {
  clear: both;
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  margin-bottom: 1.5rem;
}
.video iframe,
.entry-content-asset iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.clear {
  clear: both;
}

.aligncenter {
  display: block;
  margin: 0 auto 1.5rem;
  text-align: center;
}
.aligncenter img {
  margin: 0 auto;
}

@media (min-width: 600px) {
  .alignleft {
    float: left;
    margin: 0 1.5rem 1.5rem 0;
  }

  .alignright {
    float: right;
    margin: 0 0 1.5rem 1.5rem;
  }
}
div.gallery figure {
  position: relative;
  margin: 0 0 1.5rem;
}
div.gallery figure img {
  display: block;
  width: 100%;
}
div.gallery figure figcaption {
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 1.5rem;
  color: #fff;
}
div.gallery.is-slideshow {
  position: relative;
  margin-bottom: 1.5rem;
}
div.gallery.is-slideshow figure {
  margin: 0;
}
div.gallery:not(.is-slideshow) {
  margin: 0 0 1.5rem;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
}
div.gallery:not(.is-slideshow) figure {
  margin: 0;
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
}
@media (min-width: 600px) {
  div.gallery:not(.is-slideshow).gallery-columns-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 100%;
  }
  div.gallery:not(.is-slideshow).gallery-columns-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 50%;
  }
  div.gallery:not(.is-slideshow).gallery-columns-3 > * {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    min-width: 33.3333333333%;
  }
  div.gallery:not(.is-slideshow).gallery-columns-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
    min-width: 25%;
  }
  div.gallery:not(.is-slideshow).gallery-columns-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: 20%;
  }
  div.gallery:not(.is-slideshow).gallery-columns-6 > * {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
    min-width: 16.6666666667%;
  }
  div.gallery:not(.is-slideshow).gallery-columns-7 > * {
    flex: 0 0 14.2857142857%;
    max-width: 14.2857142857%;
    min-width: 14.2857142857%;
  }
  div.gallery:not(.is-slideshow).gallery-columns-8 > * {
    flex: 0 0 12.5%;
    max-width: 12.5%;
    min-width: 12.5%;
  }
  div.gallery:not(.is-slideshow).gallery-columns-9 > * {
    flex: 0 0 11.1111111111%;
    max-width: 11.1111111111%;
    min-width: 11.1111111111%;
  }
}

/***
    title: Flex
    section: Grid
    description: Use to align elements in rows and columns. Perfect for use on ul/li setups or indeed any parent/child markup. Use bp--modifiers to set number of columns in different widths. Customize gutter and breakpoints in config file. You can also use ul {@include flex-grid(3)}.
    example:
        <ul class="flex--2--tablet flex--3--laptop">
            <li><img src="http://placehold.it/320x240" class="img--wide"> I'm two columns</li>
            <li><img src="http://placehold.it/320x240" class="img--wide"> In low resolution</li>
            <li><img src="http://placehold.it/320x240" class="img--wide"> But three columns</li>
            <li><img src="http://placehold.it/320x240" class="img--wide"> In high</li>
            <li><img src="http://placehold.it/320x240" class="img--wide"> Resolutions</li>
            <li><img src="http://placehold.it/320x240" class="img--wide"> Cool?</li>
        </ul>
***/
ul[class*=flex--] {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

[class*=flex--] > * {
  margin-bottom: 2rem;
}

.flex--2 {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex--2 > * {
  min-width: calc(50% - 1rem);
  max-width: calc(50% - 1rem);
  flex: 0 0 calc(50% - 1rem);
  margin-bottom: 2rem;
}

.flex--3 {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex--3 > * {
  min-width: calc(33.3333333333% - 1.3333333333rem);
  max-width: calc(33.3333333333% - 1.3333333333rem);
  flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
  margin-bottom: 2rem;
}

.flex--4 {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex--4 > * {
  min-width: calc(25% - 1.5rem);
  max-width: calc(25% - 1.5rem);
  flex: 0 0 calc(25% - 1.5rem);
  margin-bottom: 2rem;
}

@media (min-width: 600px) {
  .flex--2--tablet {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--2--tablet > * {
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
    margin-bottom: 2rem;
  }
}
@media (min-width: 600px) {
  .flex--3--tablet {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--3--tablet > * {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
  }
}
@media (min-width: 600px) {
  .flex--4--tablet {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--4--tablet > * {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
  }
}
@media (max-width: 599px) {
  .flex--2--tablet-max {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--2--tablet-max > * {
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
    margin-bottom: 2rem;
  }
}
@media (max-width: 599px) {
  .flex--3--tablet-max {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--3--tablet-max > * {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
  }
}
@media (max-width: 599px) {
  .flex--4--tablet-max {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--4--tablet-max > * {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
  }
}
@media (min-width: 1080px) {
  .flex--2--laptop {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--2--laptop > * {
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
    margin-bottom: 2rem;
  }
}
@media (min-width: 1080px) {
  .flex--3--laptop {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--3--laptop > * {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
  }
}
@media (min-width: 1080px) {
  .flex--4--laptop {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--4--laptop > * {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
  }
}
@media (max-width: 1079px) {
  .flex--2--laptop-max {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--2--laptop-max > * {
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
    margin-bottom: 2rem;
  }
}
@media (max-width: 1079px) {
  .flex--3--laptop-max {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--3--laptop-max > * {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
  }
}
@media (max-width: 1079px) {
  .flex--4--laptop-max {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--4--laptop-max > * {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
  }
}
@media (min-width: 1260px) {
  .flex--2--desktop {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--2--desktop > * {
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
    margin-bottom: 2rem;
  }
}
@media (min-width: 1260px) {
  .flex--3--desktop {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--3--desktop > * {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
  }
}
@media (min-width: 1260px) {
  .flex--4--desktop {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--4--desktop > * {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
  }
}
@media (max-width: 1259px) {
  .flex--2--desktop-max {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--2--desktop-max > * {
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
    margin-bottom: 2rem;
  }
}
@media (max-width: 1259px) {
  .flex--3--desktop-max {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--3--desktop-max > * {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
  }
}
@media (max-width: 1259px) {
  .flex--4--desktop-max {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex--4--desktop-max > * {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
  }
}
.flex--3::before, .flex--3::after {
  min-width: calc(33.3333333333% - 1.3333333333rem);
  max-width: calc(33.3333333333% - 1.3333333333rem);
  flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
  margin-bottom: 2rem;
  display: block;
  content: "";
  margin: 0;
  order: 9999;
}

.flex--4::before, .flex--4::after {
  min-width: calc(25% - 1.5rem);
  max-width: calc(25% - 1.5rem);
  flex: 0 0 calc(25% - 1.5rem);
  margin-bottom: 2rem;
  display: block;
  content: "";
  margin: 0;
  order: 9999;
}

@media (min-width: 600px) {
  .flex--3--tablet::before, .flex--3--tablet::after {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (min-width: 600px) {
  .flex--4--tablet::before, .flex--4--tablet::after {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (max-width: 599px) {
  .flex--3--tablet-max::before, .flex--3--tablet-max::after {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (max-width: 599px) {
  .flex--4--tablet-max::before, .flex--4--tablet-max::after {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (min-width: 1080px) {
  .flex--3--laptop::before, .flex--3--laptop::after {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (min-width: 1080px) {
  .flex--4--laptop::before, .flex--4--laptop::after {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (max-width: 1079px) {
  .flex--3--laptop-max::before, .flex--3--laptop-max::after {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (max-width: 1079px) {
  .flex--4--laptop-max::before, .flex--4--laptop-max::after {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (min-width: 1260px) {
  .flex--3--desktop::before, .flex--3--desktop::after {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (min-width: 1260px) {
  .flex--4--desktop::before, .flex--4--desktop::after {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (max-width: 1259px) {
  .flex--3--desktop-max::before, .flex--3--desktop-max::after {
    min-width: calc(33.3333333333% - 1.3333333333rem);
    max-width: calc(33.3333333333% - 1.3333333333rem);
    flex: 0 0 calc(33.3333333333% - 1.3333333333rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (max-width: 1259px) {
  .flex--4--desktop-max::before, .flex--4--desktop-max::after {
    min-width: calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
    flex: 0 0 calc(25% - 1.5rem);
    margin-bottom: 2rem;
    display: block;
    content: "";
    margin: 0;
    order: 9999;
  }
}
@media (max-width: 599px) {
  h1, .heading--1 {
    font-size: 1.55rem;
  }

  h2, .heading--2 {
    font-size: 1.4rem;
  }
}
h1, h2, h3, h6,
.heading--h1, .heading--2, .heading--3, .heading--6 {
  text-transform: uppercase;
}

h4, h5,
.heading--h4, .heading--5 {
  text-transform: none;
}

blockquote,
q {
  font-family: "Oswald", Helvetica, sans-serif;
  font-size: 1rem;
  margin: 0.5rem 0 1.5rem 0;
  padding-left: 2rem;
  position: relative;
  max-width: 31.25rem;
}
blockquote::before,
q::before {
  height: 5rem;
  width: 0.625rem;
  background: #fbe83c;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}

[data-excerpt].has-excerpt {
  overflow: hidden;
}
[data-excerpt].has-excerpt.open {
  transition: height 0.6s linear;
}

textarea {
  height: 12rem;
}

.wpcf7 .screen-reader-response {
  display: none;
}
.wpcf7 .wpcf7-not-valid-tip {
  margin: 0.75rem 0 0;
}
.wpcf7 .ajax-loader {
  display: none;
  margin-left: 2rem;
}
.wpcf7 .ajax-loader:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  content: "";
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  margin: 0;
}
.wpcf7 .ajax-loader.is-active {
  display: inline;
}
.wpcf7 .ajax-loader.is-active:before {
  -webkit-animation: spin 2s infinite linear;
          animation: spin 2s infinite linear;
}

.hs-form-field {
  display: block;
  margin: 0 0 1.5rem;
}
.hs-form-field > label {
  display: block;
  margin: 0 0 0.75rem;
}
.hs-form-field ul.inputs-list {
  margin: 0;
  list-style: none;
}
.hs-form-field ul.inputs-list li {
  display: inline-block;
  margin: 0 1.5rem 1.5rem 0;
}
.hs-form-field .hs-form-required {
  display: none;
}
.hs-form-field ul.hs-error-msgs {
  margin: 0.75rem 0 0;
  list-style: none;
}
.hs-form-field ul.hs-error-msgs li {
  display: block;
}

.hs_error_rollup {
  display: none;
}

a[href="#job-application-form"] {
  position: fixed;
  top: 40%;
  right: 0;
  width: auto;
  transform: rotate(-90deg);
  transform-origin: right bottom;
  z-index: 9;
}

.job-application-form .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem;
}
.job-application-form .col {
  position: relative;
  width: 50%;
  padding: 0.5rem;
}
.job-application-form input[name=candidate-cv],
.job-application-form input[name="candidate-documents[]"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.job-application-form label[for=candidate-cv],
.job-application-form label[for=candidate-documents] {
  display: inline-block;
  width: 100%;
  padding: 0.9rem;
  text-align: center;
  cursor: pointer;
}
.job-application-form textarea {
  display: inline-block;
  margin-top: 0.5rem;
}
.job-application-form .submit-wrapper {
  position: relative;
  margin-top: 2rem;
  text-align: center;
}
.job-application-form .submit-wrapper img {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 50px;
}
.job-application-form .apply-now {
  display: block;
}
.job-application-form .messages {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
}
.job-application-form .messages.success {
  border: 2px solid #74ec89;
}
.job-application-form .messages.error {
  border: 2px solid #f90;
}
@media (max-width: 600px) {
  .job-application-form .col {
    width: 100%;
  }
}

/***
    title: Google Map
    section: Widgets
    description: Use to render a Google Map.
    example:
        <div class="google-map" data-lat="40.7058253" data-lng="-74.1180864">
            <img src="https://maps.googleapis.com/maps/api/staticmap?maptype=roadmap&amp;center=40.7058253,-74.1180864&amp;markers=40.7058253,-74.1180864&amp;zoom=14&amp;size=600x400&amp;key=GOOGLE_MAPS_API_KEY">
        </div>
***/
.google-map {
  height: 20rem;
  overflow: hidden;
}
@media (min-width: 600px) {
  .google-map {
    height: 30rem;
  }
}
.google-map > img {
  display: block;
  width: 100%;
}
.google-map div .google-map-info-window {
  font-size: 0.9rem;
  font-family: "Raleway", Helvetica, sans-serif;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.6;
  color: #000;
  padding: 1.5rem;
}
.google-map div .google-map-info-window h2 {
  font-size: 1.25rem;
}
.google-map div .google-map-info-window > :last-child {
  margin-bottom: 0;
}

.popup .popup__content {
  padding: 0;
}
.popup .popup__content > * {
  margin-bottom: 0;
}
.popup .popup__content .popup__close {
  position: absolute;
  height: 2rem;
  width: 2rem;
  line-height: 2rem;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  top: 1.5rem;
  right: 1.5rem;
}
.popup .popup__content .popup__close::before {
  transform: rotate(45deg);
}
.popup .popup__content .popup__close::after {
  transform: rotate(-45deg);
}
.popup .popup__content .popup__close::after, .popup .popup__content .popup__close::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 2rem;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background: #fff;
}
.popup .apply-form {
  background: linear-gradient(356.3deg, #000000 0%, #454545 100%);
  padding: 2.5rem;
}
.popup .apply-form iframe {
  width: 100%;
  min-height: 30rem;
}

/***
    title: Slideshow
    section: Widgets
    description: Styling for the Slick Carousel jQuery Plugin.
    example:
        <div data-slideshow="3">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
***/
.slideshow-pages {
  margin: 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.slideshow-pages a {
  background: rgba(0, 0, 0, 0.1);
  display: block;
  width: 5px;
  height: 5px;
  margin: 0 0.375rem;
  font-size: 0;
  border-radius: 50%;
}
.slideshow-pages a.active {
  background: rgba(0, 0, 0, 0.5);
}

a.slideshow-prev,
a.slideshow-next {
  position: absolute;
  top: 50%;
  z-index: 97;
  transform: translateY(-50%);
  font-size: 0;
}
a.slideshow-prev:before,
a.slideshow-next:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  content: "[NO-ICON]";
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  color: #000;
  font-size: 1.5rem;
  line-height: 1;
  margin: 0;
}
@media (max-width: 599px) {
  a.slideshow-prev,
a.slideshow-next {
    display: none !important;
  }
}

a.slideshow-prev {
  left: 0;
}
a.slideshow-prev:before {
  content: "";
  transform: rotate(180deg);
}

a.slideshow-next {
  right: 0;
}
a.slideshow-next:before {
  content: "";
}

.slideshow--white .slideshow-next,
.slideshow--white .slideshow-prev {
  color: #fff;
}
.slideshow--white .slideshow-pages a {
  background: transparent;
  border: 1px solid #fff;
}
.slideshow--white .slideshow-pages a.active {
  background: #fff;
}

.slideshow-pages a {
  background: rgba(0, 0, 0, 0.4);
  display: block;
  width: 0.25rem;
  height: 0.25rem;
  margin: 0 0.375rem;
  font-size: 0;
  border-radius: 50%;
}
.slideshow-pages a.active {
  background: rgba(0, 0, 0, 0.8);
}

.underline {
  position: relative;
  padding-bottom: 1.5rem;
}
.underline::after {
  content: "";
  background: #fbe83c;
  width: 1.5rem;
  height: 3px;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}

.accordions {
  position: relative;
  display: block;
  width: 90%;
  max-width: 62rem;
  margin: 2rem auto;
}
.accordions__item {
  margin-bottom: 1rem;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .09);
}
.accordions__item--hidden {
  display: none;
}
.accordions__item--hidden:checked ~ .accordions__item--question:after {
  content: "-";
}
.accordions__item--hidden:checked ~ .accordions__item--answer {
  max-height: 1000px;
  height: auto;
  padding: 0 2rem 1rem;
  opacity: 1;
  transform: translate(0, 0);
}
.accordions__item--question {
  position: relative;
  padding: 1rem 2rem;
  display: block;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.accordions__item--question:hover, .accordions__item--question:focus {
  text-decoration: underline;
}
.accordions__item--question:after {
  position: absolute;
  top: 50%;
  right: 2rem;
  display: inline-block;
  margin-left: 10px;
  font-size: 2rem;
  color: #fbe83c;
  content: "+";
  transform: translateY(-50%);
}
.accordions__item--answer {
  position: relative;
  height: 0;
  max-height: 0;
  margin: 0;
  opacity: 0;
  transform: translate(0, 50%);
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

#archive-header {
  max-width: 56.25rem;
}

#breadcrumbs {
  position: absolute;
  z-index: 1;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 4.438rem;
  font-size: 0.75rem;
  color: #fff;
}
@media (max-width: 599px) {
  #breadcrumbs {
    display: none;
  }
}
#breadcrumbs a {
  color: #fff;
  transition: all 0.25s cubic-bezier(0.125, 0.75, 0.415, 1);
}
#breadcrumbs a:hover {
  color: #aaa;
}

.blog #breadcrumbs, .single #breadcrumbs, .archive #breadcrumbs {
  margin-top: 1rem;
  color: #000;
}
.blog #breadcrumbs a, .single #breadcrumbs a, .archive #breadcrumbs a {
  color: #000;
}
.blog #breadcrumbs a:hover, .single #breadcrumbs a:hover, .archive #breadcrumbs a:hover {
  color: #aaa;
}

#button {
  display: flex;
  justify-content: center;
}

@media (max-width: 1079px) {
  .button {
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 599px) {
  .button {
    width: 100%;
  }
}

#cases {
  max-width: 62rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
#cases header {
  text-align: center;
  margin-bottom: 2.5rem;
}
#cases .cases {
  position: relative;
}
#cases article {
  text-align: center;
  max-width: 33rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#cases figure img {
  border-radius: 50%;
  max-width: 8.5rem;
  max-height: 8.5rem;
  margin-left: auto;
  margin-right: auto;
}

#contact-form {
  width: 90%;
  max-width: 62rem;
  color: #fff;
}
#contact-form h2 {
  color: #fff;
}
@media (min-width: 600px) {
  #contact-form .contact-form-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #contact-form .contact-form-wrapper > * {
    min-width: calc(50% - 0rem);
    max-width: calc(50% - 0rem);
    flex: 0 0 calc(50% - 0rem);
    margin-bottom: 0rem;
  }
}
#contact-form figure {
  position: relative;
  margin-bottom: 0;
}
@media (min-width: 600px) {
  #contact-form figure {
    margin: 0;
  }
  #contact-form figure img {
    position: absolute;
    left: 0;
    top: 0;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
    width: 100%;
    height: 100%;
    font-family: "object-fit: cover; object-position: center center;";
    z-index: -2;
  }
}
@media (max-width: 599px) {
  #contact-form figure img {
    min-height: 10rem;
  }
}
#contact-form .contact-form {
  background: linear-gradient(356.3deg, #000 0%, rgba(0, 0, 0, 0.7) 100%);
}
@media (min-width: 600px) {
  #contact-form .contact-form {
    padding: 2.5rem;
  }
}
@media (max-width: 599px) {
  #contact-form .contact-form {
    padding: 1.5rem;
  }
}
#contact-form .contact-form a {
  color: #fbe83c;
}
#contact-form .contact-form a:hover {
  color: #aaa;
}
#contact-form .contact-form textarea {
  max-height: 5rem;
  resize: none;
}
#contact-form .contact-form input[type=color],
#contact-form .contact-form input[type=date],
#contact-form .contact-form input[type=datetime-local],
#contact-form .contact-form input[type=datetime],
#contact-form .contact-form input[type=email],
#contact-form .contact-form input[type=month],
#contact-form .contact-form input[type=number],
#contact-form .contact-form input[type=password],
#contact-form .contact-form input[type=search],
#contact-form .contact-form input[type=tel],
#contact-form .contact-form input[type=text],
#contact-form .contact-form input[type=time],
#contact-form .contact-form input[type=url],
#contact-form .contact-form input[type=week],
#contact-form .contact-form textarea {
  background: none;
  border: 0;
  border-bottom: 1px solid #fff;
  padding-left: 0;
  font-size: 0.75rem;
  color: #fff;
}

#cookie-consent {
  background: rgba(255, 255, 255, 0.9);
  padding: 0.75rem;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  font-size: 0.875rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}
#cookie-consent a {
  font-weight: 600;
}

#custom-title {
  padding-bottom: 0;
}
#custom-title .container {
  margin: 0 auto;
  max-width: 62rem;
}
#custom-title h2 {
  display: block;
  margin: 0;
  width: 100%;
  background-color: transparent;
}
#custom-title h2 a:hover {
  text-decoration: underline;
}
#custom-title h2.--leftalign {
  text-align: left;
}
#custom-title h2.--centeralign {
  text-align: center;
}
#custom-title h2.--rightalign {
  text-align: right;
}

#employees {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: #fff;
}
#employees .container {
  max-width: 62rem;
  margin: 0 auto;
}
#employees header {
  text-align: center;
  margin-bottom: 2.5rem;
}
#employees article {
  text-align: center;
}
#employees article h3 {
  margin-bottom: 0.5rem;
}
@media (max-width: 599px) {
  #employees article h3 {
    margin-bottom: 0;
  }
}
#employees article figure {
  position: relative;
}
#employees article figure img {
  width: 9rem;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  border-radius: 50%;
}
@media (max-width: 599px) {
  #employees .employees--content .underline {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}
#employees .employees--content a {
  display: block;
  color: #000;
  font-weight: 600;
}
#employees .employees--content a.linkedin {
  font-size: 1rem;
}

#footer a {
  color: #fff;
}
#footer a:hover {
  color: #fbe83c;
}
#footer .site-logo {
  display: flex;
  align-items: center;
}
#footer .site-logo img {
  width: 7.125rem;
}
#footer .menu {
  margin: 0;
  list-style: none;
}
#footer .menu li {
  display: inline-block;
  margin-right: 2.5rem;
}
#footer .menu li:last-child {
  margin-right: 0;
}
#footer #menu-social-menu a:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  content: "";
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  display: none;
  margin: 0 0.5em 0 0;
}
#footer #menu-social-menu a[href*="facebook.com"]:before {
  display: inline-block;
  content: "";
}
#footer #menu-social-menu a[href*="twitter.com"]:before {
  display: inline-block;
  content: "";
}
#footer #menu-social-menu a[href*="linkedin.com"]:before {
  display: inline-block;
  content: "";
}
#footer #menu-social-menu a[href*="instagram.com"]:before {
  display: inline-block;
  content: "";
}
#footer #menu-social-menu a[href*="plus.google.com"]:before {
  display: inline-block;
  content: "";
}
#footer #menu-social-menu a[href^="mailto:"]:before {
  display: inline-block;
  content: "";
}
#footer #menu-social-menu li {
  margin-right: 0.75rem;
}
#footer #menu-social-menu a {
  font-size: 0;
}
#footer #menu-social-menu a::before {
  font-size: 1rem;
}
#footer #top-footer {
  background: #1C1C1C;
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
}
#footer #bottom-footer {
  background: #383838;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
#footer #bottom-footer .menu li a {
  font-weight: 400;
}
#footer #bottom-footer .menu li:last-child {
  margin-right: 0;
}
@media (min-width: 1080px) {
  #footer {
    font-size: 0.75rem;
  }
  #footer .site-logo {
    margin-right: 2.5rem;
  }
  #footer #top-footer {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #footer #top-footer > * {
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
    margin-bottom: 2rem;
  }
  #footer #top-footer #menu-social-menu {
    text-align: right;
  }
  #footer #top-footer .textwidget p {
    margin: 0;
  }
  #footer #top-footer .left, #footer #top-footer .right {
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
  }
  #footer #top-footer .left {
    justify-content: flex-start;
  }
  #footer #top-footer .right {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #footer #top-footer .right > * {
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
    margin-bottom: 2rem;
  }
  #footer #top-footer .right > * {
    margin-bottom: 0;
  }
  #footer #top-footer .right .widget_nav_menu {
    flex: 0 0 calc(30% - 1rem);
    min-width: calc(30% - 1rem);
    max-width: calc(30% - 1rem);
  }
  #footer #top-footer .right .textwidget {
    display: flex;
    justify-content: flex-end;
  }
  #footer #top-footer .right .textwidget a {
    margin-left: 2.5rem;
  }
  #footer #top-footer .right .widget_text {
    flex: 0 0 calc(70% - 1rem);
    min-width: calc(70% - 1rem);
    max-width: calc(70% - 1rem);
  }
}
@media (max-width: 1079px) {
  #footer {
    font-size: 0.688rem;
    text-align: center;
  }
  #footer p {
    margin-bottom: 0.75rem;
  }
  #footer #menu-social-menu {
    margin-top: 1.25rem;
  }
  #footer #bottom-footer .menu li {
    margin: 0 0 0.75rem 0;
    display: block;
  }
  #footer #bottom-footer .menu li:last-child {
    margin-bottom: 0;
  }
  #footer .site-logo img {
    margin: 0 auto 1rem auto;
  }
}

#four-o-four .hero {
  text-align: center;
}
#four-o-four .search input {
  margin-bottom: 1.5rem;
}

.blog #header,
.single #header,
.archive #header {
  background: rgba(0, 0, 0, 0.8);
  top: 0;
}

html.has-scrolled-down #header {
  background: rgba(0, 0, 0, 0.8);
}

#header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}
#header .logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 5px;
}
#header .logo-wrapper .logo--kite__img {
  display: block;
}
#header .site-logo {
  display: flex;
  align-items: center;
}
#header .site-logo img {
  width: 7.125rem;
  height: 1.375rem;
}
#header nav ul {
  margin: 0;
  list-style: none;
}
#header nav ul li.active > a:first-child, #header nav ul li.active-ancestor > a:first-child {
  position: relative;
  padding-left: 0.75rem;
}
#header nav ul li.active > a:first-child::before, #header nav ul li.active-ancestor > a:first-child::before {
  background: #fbe83c;
  content: "";
  position: absolute;
  left: 0;
  width: 0.188rem;
}
#header nav ul li.dropdown {
  position: relative;
}
#header nav ul li a {
  text-transform: uppercase;
  font-family: "Oswald", Helvetica, sans-serif;
  font-size: 1rem;
  color: #fff;
}
#header nav ul li a:hover {
  color: #fbe83c;
}
#header nav ul li .dropdown-toggle::before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  content: "";
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  font-size: 1.5rem;
  transform-origin: center center;
  transition: transform 0.25s 0.5s cubic-bezier(0.125, 0.75, 0.415, 1);
}
#header nav ul.dropdown-menu {
  display: flex;
  flex-direction: column;
}
#header nav ul.dropdown-menu li {
  margin-bottom: 0.7rem;
}
#header nav ul.dropdown-menu li.active > a:first-child {
  padding-left: 0;
  color: #fbe83c;
}
#header nav ul.dropdown-menu li.active > a:first-child::before {
  display: none;
}
#header nav ul.dropdown-menu li a {
  font-family: "Raleway", Helvetica, sans-serif;
  text-transform: none;
  padding-left: 0;
}
@media (min-width: 1080px) {
  #header {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    gap: 0 10px;
  }
  #header ul li {
    display: inline-block;
    margin-right: 3rem;
  }
  #header ul li.active a:first-child::before, #header ul li.active-ancestor a:first-child::before {
    top: 0.3rem;
    height: 0.875rem;
  }
  #header ul li.dropdown .dropdown-menu {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.25s 0.5s cubic-bezier(0.125, 0.75, 0.415, 1);
    position: absolute;
    top: 3.1rem;
    left: -2rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.8);
    min-width: 15rem;
  }
  #header ul li.dropdown .dropdown-menu li.border-top {
    width: 100%;
    border-top: 1px solid #292929;
    padding-top: 0.7rem;
  }
  #header ul li.dropdown .dropdown-menu a:hover {
    color: #fbe83c;
  }
  #header ul li.dropdown:hover .dropdown-toggle::before {
    color: #fbe83c;
  }
  #header ul li.dropdown:hover .dropdown-menu {
    transform: scaleY(1);
    transition-delay: 0s;
  }
  #header ul li.dropdown:hover .dropdown-menu li:hover {
    color: #fbe83c;
  }
  #header ul li.dropdown:hover .dropdown-toggle::before {
    transform: rotate(180deg);
    transition-delay: 0s;
  }
  #header ul li a {
    font-size: 0.875rem;
  }
  #header ul li:last-child {
    margin-right: 0;
  }
  #header [data-toggle-hash] {
    display: none;
  }
}
@media (max-width: 1079px) {
  #header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  #header [data-toggle-hash] {
    display: block;
    width: 32px;
    height: 32px;
    position: relative;
  }
  #header [data-toggle-hash]:before, #header [data-toggle-hash]:after {
    background: #fff;
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    right: 0;
    top: 35%;
    transform: rotate(0);
  }
  #header [data-toggle-hash]:before {
    transition: transform 0.15s cubic-bezier(0.125, 0.75, 0.415, 1), top 0.15s 0.15s cubic-bezier(0.125, 0.75, 0.415, 1);
  }
  #header [data-toggle-hash]:after {
    transition: transform 0.15s cubic-bezier(0.125, 0.75, 0.415, 1), top 0.15s 0.15s cubic-bezier(0.125, 0.75, 0.415, 1), width 0.15s 0.3s cubic-bezier(0.125, 0.75, 0.415, 1);
    width: 80%;
    top: 65%;
  }
  #header [data-toggle-hash]::after {
    width: 100%;
  }
  #header nav {
    display: flex;
    flex-direction: column;
    background: #000;
    padding: 6rem 5% 1.5rem 5%;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 98;
    width: 100%;
    overflow: auto;
    position: fixed;
    transform: translate(100%, 0);
    transition: transform 0.25s cubic-bezier(0.125, 0.75, 0.415, 1);
  }
  #header nav ul:not(.dropdown-menu) > li {
    border-bottom: 1px solid #292929;
    padding-bottom: 1rem;
  }
  #header nav li {
    margin-bottom: 0.75rem;
  }
  #header nav li.active a::before, #header nav li.active-ancestor a::before {
    top: 0.2rem;
    height: 1.1rem;
  }
  #header nav li.open .dropdown-menu {
    display: block;
    position: relative;
    top: 0rem;
    left: 0rem;
  }
  #header nav li.open .dropdown-toggle::before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    content: "";
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: 0.2em;
    text-align: center;
    /* opacity: .8; */
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: 0.2em;
    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    font-size: 1.5rem;
    transition: opacity 0.3s, transform 1s;
  }
  #header nav li .dropdown-menu {
    list-style: none;
    display: none;
  }
  #header nav li .dropdown-menu li {
    margin: 0.75rem 0 0.5rem 1.5rem;
  }
  #header nav li .dropdown-menu li.border-top {
    padding-top: 1rem;
  }
  #header nav li .dropdown-toggle {
    position: absolute;
    right: 0;
    top: 0;
  }
  #header nav li a {
    font-size: 1.1rem;
  }
  #header nav li a:hover {
    color: #fbe83c;
  }
  #header:target [data-toggle-hash] {
    z-index: 100;
  }
  #header:target [data-toggle-hash]:before {
    transition: top 0.15s 0.15s cubic-bezier(0.125, 0.75, 0.415, 1), transform 0.15s 0.3s cubic-bezier(0.125, 0.75, 0.415, 1);
    top: 50%;
    transform: rotate(-45deg);
  }
  #header:target [data-toggle-hash]:after {
    transition: width 0.15s cubic-bezier(0.125, 0.75, 0.415, 1), top 0.15s 0.15s cubic-bezier(0.125, 0.75, 0.415, 1), transform 0.15s 0.3s cubic-bezier(0.125, 0.75, 0.415, 1);
    top: 50%;
    width: 100%;
    transform: rotate(45deg);
  }
  #header:target nav {
    transform: translate(0);
  }
  #header:target nav .dropdown-menu {
    display: none;
  }
  #header:target .site-logo,
#header:target .logo--kite,
#header:target .logo--heart {
    z-index: 99;
  }
}

.home #hero {
  min-height: 80vh;
}

#hero {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 60vh;
}
@media (max-width: 1079px) {
  #hero {
    min-height: 45vh;
  }
}
@media (max-width: 599px) {
  #hero {
    min-height: 60vh;
  }
}
@media (max-width: 599px) {
  #hero.hero {
    padding: 4rem 10% 2rem 10%;
  }
}
@media (min-width: 1080px) {
  #hero figure.image {
    display: none;
  }
}
@media (max-width: 1079px) {
  #hero figure.video {
    display: none;
  }
}
@media (min-width: 1080px) {
  #hero.figure-video {
    padding: 0;
  }
  #hero.figure-video .video {
    padding-top: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
    width: 100%;
    height: 100%;
  }
  #hero.figure-video .hero-video {
    overflow: hidden;
    line-height: 0;
    margin-bottom: 0;
  }
  #hero.figure-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    z-index: -1;
  }
}
#hero.figure-video figure::before {
  z-index: 1;
}
#hero::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#hero header {
  max-width: 50rem;
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
  text-align: center;
}
#hero h1 {
  text-align: center;
  margin-top: 0.8rem;
}
#hero .hero-description {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1080px) {
  #hero .hero-description .button {
    margin-top: 1rem;
  }
}
@media (max-width: 599px) {
  #hero .hero-description {
    max-width: 100%;
  }
}

.info-cards {
  display: flex;
  justify-content: space-around;
  position: relative;
  max-width: 62rem;
  margin: 2rem auto 4rem auto;
}
@media (max-width: 1079px) {
  .info-cards {
    flex-wrap: wrap;
    margin-bottom: 3rem;
  }
}
@media (max-width: 599px) {
  .info-cards {
    margin-top: 3rem;
  }
}
.info-cards__card {
  flex: 1 1 50%;
}
.info-cards__card .-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 1rem 0 0;
  padding: 1rem 2rem;
  text-align: center;
  color: #fafafa;
  background-color: #292929;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .09);
  overflow: hidden;
}
.info-cards__card .-icon {
  padding: 0.5rem 0;
}
.info-cards__card .-icon .fab,
.info-cards__card .-icon .fas {
  font-size: 2.5rem;
  color: #fbe83c;
}
.info-cards__card .-title {
  margin: 0.5rem auto;
}
.info-cards__card .-description {
  font-size: 0.8rem;
}
.info-cards__card:last-child .-content {
  margin-right: auto;
}
@media (max-width: 1079px) {
  .info-cards__card {
    flex: 0 1 50%;
    margin-bottom: 1rem;
  }
  .info-cards__card:nth-child(even) .-content {
    margin-right: auto;
  }
}
@media (max-width: 599px) {
  .info-cards__card {
    flex: 0 1 100%;
    margin-bottom: 1rem;
  }
  .info-cards__card .-content {
    margin-right: auto;
  }
}

#jobs {
  max-width: 1200px;
}
#jobs > header {
  text-align: center;
  margin-bottom: 2.5rem;
}
#jobs > article:not(:last-child) {
  margin-bottom: 2.5rem;
}
#jobs > article > a {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  box-shadow: 0 9px 11px -6px rgba(205, 205, 205, 0.5);
  opacity: 1;
  transition: 0.2s;
}
#jobs > article > a:hover {
  color: inherit;
  opacity: 0.6;
}
#jobs > article > a figure {
  position: relative;
  width: 30%;
  min-height: 240px;
  margin: 0;
}
#jobs > article > a figure img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#jobs > article > a .text {
  width: 70%;
  padding: 2.5rem;
}
#jobs > article > a .text > h3 {
  width: 100%;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}
#jobs > article > a .text > p {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: #777;
}
#jobs > article > a .text > p > :not(:last-child)::after {
  content: " | ";
}
#jobs > article > a .text > .excerpt {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}
#jobs > article > a .text > .read-more {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
#jobs > article > a .text > .read-more::after {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  content: "";
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
@media (max-width: 600px) {
  #jobs > article > a figure, #jobs > article > a .text {
    width: 100%;
  }
}
#jobs > .popup .popup__content .popup__close::after,
#jobs > .popup .popup__content .popup__close::before {
  background: #000;
}
#jobs > nav {
  margin-top: 2.5rem;
}

body.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
body.login #login {
  background: #fff;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 3rem;
}
body.login #login input[type=color], body.login #login input[type=date], body.login #login input[type=datetime-local], body.login #login input[type=datetime], body.login #login input[type=email], body.login #login input[type=month], body.login #login input[type=number], body.login #login input[type=password], body.login #login input[type=search], body.login #login input[type=tel], body.login #login input[type=text], body.login #login input[type=time], body.login #login input[type=url], body.login #login input[type=week], body.login #login textarea {
  border: 1px solid #dedede;
}
@media (min-width: 44rem) {
  body.login #login {
    width: 40rem;
    min-height: 0;
    margin: 2rem auto;
  }
}

#page > article {
  background: #fff;
  width: 90%;
  max-width: 62rem;
  margin: -3rem auto rrem;
  z-index: 1;
  position: relative;
}
@media (min-width: 600px) {
  #page > article {
    padding: 3rem 6rem;
  }
}
@media (max-width: 1079px) {
  #page > article {
    margin: 0 auto 4rem auto;
  }
}
@media (max-width: 599px) {
  #page > article {
    padding: 3rem 5%;
  }
}
#page > article a {
  font-weight: 600;
}
#page > article figure img {
  width: auto;
}
#page section + article {
  margin-top: 2rem;
}

#pagination {
  text-align: center;
}
#pagination .current {
  font-weight: 600;
}
#pagination .page-numbers {
  margin: 0 0.25rem;
}

#post {
  background: #fff;
  padding: 2.5rem;
}
@media (max-width: 599px) {
  #post {
    padding: 1.5rem 5%;
  }
}
#post article::after {
  content: "";
  display: block;
  clear: both;
}
#post article a {
  font-weight: 600;
}
#post article .button {
  padding-left: 4rem;
  padding-right: 4rem;
}
#post.post-job header {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem 2.5rem -0.5rem;
}
#post.post-job header .col {
  width: 50%;
  padding: 0 0.5rem;
}
@media (max-width: 600px) {
  #post.post-job header {
    width: 100%;
    float: none;
    margin-bottom: 1.5rem;
  }
  #post.post-job header .col {
    width: 100%;
  }
}
#post.post-job figure {
  margin-bottom: 0;
}
#post.post-job h1 {
  margin-bottom: 0;
}
#post.post-job .header {
  margin-bottom: 1.5rem;
}
#post.post-job .header > * {
  margin-bottom: 0;
}
@media (min-width: 600px) {
  #post.post-job .header figure {
    flex: 0 0 calc(30% - 1rem);
    min-width: calc(30% - 1rem);
    max-width: calc(30% - 1rem);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }
}
#post.post-job .header figure img {
  margin-top: 1rem;
}
#post.post-job .additional-info span {
  font-weight: 600;
  display: block;
}
#post.post-job .contact-info {
  max-width: 42rem;
}
#post.post-job .contact-info h6 {
  margin-bottom: 0.5rem;
}
#post.post-job .contact-persons a {
  display: block;
}
#post.post-job .contact-persons p {
  margin-bottom: 0;
}
#post.post-job iframe {
  width: 100%;
  height: 800px;
}
#post.post-job iframe .font-company-header {
  display: none !important;
}

#posts article {
  position: relative;
  padding: 1.5rem 3rem 1.5rem 1.5rem;
  margin-bottom: 1.5rem;
  background: transparent;
  transition: all 0.25s cubic-bezier(0.125, 0.75, 0.415, 1);
}
@media (min-width: 600px) {
  #posts article {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #posts article > * {
    min-width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
    margin-bottom: 2rem;
  }
}
@media (max-width: 599px) {
  #posts article {
    padding: 1.5rem 1.5rem 4rem 1.5rem;
  }
}
#posts article:hover {
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .09);
}
#posts article:hover .posts-content .icon {
  color: #fbe83c;
}
#posts article figure .alignleft {
  flex-direction: none;
}
#posts article header h2 {
  margin-bottom: 0.75rem;
}
#posts article .link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}
#posts article .posts-content {
  margin-bottom: 0;
}
@media (min-width: 600px) {
  #posts article .posts-content {
    flex: 0 0 calc(79% - 1rem);
    min-width: calc(79% - 1rem);
    max-width: calc(79% - 1rem);
  }
}
@media (max-width: 599px) {
  #posts article .posts-content {
    flex: 0 0 calc(100% - 0rem);
    min-width: calc(100% - 0rem);
    max-width: calc(100% - 0rem);
  }
}
#posts article .posts-content .icon {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  font-size: 1rem;
}
#posts article .posts-content .author {
  margin-bottom: 0.75rem;
}
#posts article .posts-content p:not(.author):last-of-type {
  margin-bottom: 0;
}
@media (min-width: 600px) {
  #posts article figure {
    flex: 0 0 calc(21% - 1rem);
    min-width: calc(21% - 1rem);
    max-width: calc(21% - 1rem);
    margin-bottom: 0;
  }
}
@media (max-width: 599px) {
  #posts article figure {
    flex: 0 0 calc(100% - 0rem);
    min-width: calc(100% - 0rem);
    max-width: calc(100% - 0rem);
  }
}
#posts article figure img {
  border-radius: 50%;
}

#related-posts {
  margin: 2.5rem auto 6rem auto;
}
@media (max-width: 599px) {
  #related-posts {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

#share-page {
  display: flex;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
#share-page ul a:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  content: "";
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  display: none;
  margin: 0 0.5em 0 0;
}
#share-page ul a[href*="facebook.com"]:before {
  display: inline-block;
  content: "";
}
#share-page ul a[href*="twitter.com"]:before {
  display: inline-block;
  content: "";
}
#share-page ul a[href*="linkedin.com"]:before {
  display: inline-block;
  content: "";
}
#share-page ul a[href*="instagram.com"]:before {
  display: inline-block;
  content: "";
}
#share-page ul a[href*="plus.google.com"]:before {
  display: inline-block;
  content: "";
}
#share-page ul a[href^="mailto:"]:before {
  display: inline-block;
  content: "";
}
#share-page ul li {
  display: inline-block;
}
#share-page ul li a {
  font-size: 0;
}
#share-page ul li a::before {
  font-size: 0.9rem;
}

#share-page--buttons {
  background: #fafafa;
  padding: 2.5rem;
  text-align: center;
}
main > #share-page--buttons {
  padding: 3rem 5%;
}
@media (min-width: 1422px) {
  main > #share-page--buttons {
    padding-left: calc(50% - 640px);
    padding-right: calc(50% - 640px);
  }
}
#share-page--buttons > h2 {
  margin-bottom: 2.5rem;
}
#share-page--buttons > ul {
  list-style: none;
  margin: -0.75rem;
}
#share-page--buttons > ul a:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  content: "";
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  display: none;
  margin: 0 0.5em 0 0;
}
#share-page--buttons > ul a[href*="facebook.com"]:before {
  display: inline-block;
  content: "";
}
#share-page--buttons > ul a[href*="twitter.com"]:before {
  display: inline-block;
  content: "";
}
#share-page--buttons > ul a[href*="linkedin.com"]:before {
  display: inline-block;
  content: "";
}
#share-page--buttons > ul a[href*="instagram.com"]:before {
  display: inline-block;
  content: "";
}
#share-page--buttons > ul a[href*="plus.google.com"]:before {
  display: inline-block;
  content: "";
}
#share-page--buttons > ul a[href^="mailto:"]:before {
  display: inline-block;
  content: "";
}
#share-page--buttons > ul > * {
  display: inline-block;
  margin: 0 0.75rem 1.5rem;
}
#share-page--buttons > ul > * a {
  display: inline-block;
  background: #777777;
  padding: 0.54rem 1.56rem;
  min-width: 8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  transition: background 0.5s;
}
#share-page--buttons > ul > * a::before {
  font-size: 1.2em;
}
#share-page--buttons > ul > * a:hover {
  background: #5e5e5e;
}
#share-page--buttons > ul > * a[href*="facebook.com"] {
  background: #3b5998;
}
#share-page--buttons > ul > * a[href*="facebook.com"]:hover {
  background: #2d4373;
}
#share-page--buttons > ul > * a[href*="twitter.com"] {
  background: #55acee;
}
#share-page--buttons > ul > * a[href*="twitter.com"]:hover {
  background: #2795e9;
}
#share-page--buttons > ul > * a[href*="linkedin.com"] {
  background: #0077b5;
}
#share-page--buttons > ul > * a[href*="linkedin.com"]:hover {
  background: #046293;
}

#featured-cards, #featured-posts {
  max-width: 62rem;
  margin-left: auto;
  margin-right: auto;
}
#featured-cards header, #featured-posts header {
  text-align: center;
  margin-bottom: 2.5rem;
}
#featured-cards article, #featured-posts article {
  position: relative;
  background: #fff;
}
#featured-cards article:hover .featured-posts--content, #featured-posts article:hover .featured-posts--content,
#featured-cards article:hover .featured-cards--content,
#featured-posts article:hover .featured-cards--content {
  color: #000;
}
#featured-cards article h3, #featured-posts article h3 {
  margin-bottom: 0.75rem;
  word-break: break-all;
}
#featured-cards article figure, #featured-posts article figure {
  margin: 0;
}
#featured-cards article .featured-posts--content, #featured-posts article .featured-posts--content,
#featured-cards article .featured-cards--content,
#featured-posts article .featured-cards--content {
  padding: 1.5rem;
  color: #000;
}
#featured-cards article .featured-posts--content h3, #featured-posts article .featured-posts--content h3,
#featured-cards article .featured-cards--content h3,
#featured-posts article .featured-cards--content h3 {
  text-transform: none;
}
#featured-cards article .featured-posts--content p:last-of-type, #featured-posts article .featured-posts--content p:last-of-type,
#featured-cards article .featured-cards--content p:last-of-type,
#featured-posts article .featured-cards--content p:last-of-type {
  margin-bottom: 0;
}
#featured-cards article .link, #featured-posts article .link {
  display: block;
  height: 100%;
}
#featured-cards article .link:hover, #featured-posts article .link:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .09);
}
#featured-cards article .link:hover .icon, #featured-posts article .link:hover .icon {
  color: #fbe83c;
}
#featured-cards article .icon, #featured-posts article .icon {
  color: #000;
  font-size: 1rem;
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
}

/* Remove background for Intelliplan apply form */
html:not(.wp) {
  background: transparent;
}

.blog main,
.single main,
.archive main {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 599px) {
  .blog main,
.single main,
.archive main {
    margin-top: 4rem;
  }
}

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